/* V1.19: automatic phone landscape. No permanent sidebar next to the board. */
.mobile-match-chrome[hidden], .mobile-match-drawer[hidden], .mobile-match-scrim[hidden],
.mobile-match-notice[hidden], .mobile-roll-anchor[hidden], .mobile-dice-slot[hidden],
.mobile-notice-dot[hidden] { display:none !important; }
#mobileMatchAnnouncement { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Do not let a sticky touch hover impersonate a selected difficulty. */
#modalCard .difficulty-options .option-button { min-width:0; }
#modalCard .difficulty-options .option-button[aria-pressed="false"],
#modalCard .difficulty-options .option-button[aria-pressed="false"]:hover,
#modalCard .difficulty-options .option-button[aria-pressed="false"]:focus {
  border-color:#3b4454; background:rgba(255,255,255,.025); box-shadow:none;
}
#modalCard .difficulty-options .option-button[aria-pressed="true"] {
  border-color:var(--lime); background:linear-gradient(100deg,rgba(186,255,38,.10),rgba(107,235,143,.06));
  box-shadow:inset 0 0 0 1px var(--lime);
}
#modalCard .difficulty-options .option-button:focus-visible { outline:2px dashed #edf3ff; outline-offset:3px; }
#modalCard .option-copy { min-width:0; }
#modalCard .invite-friend-option { display:flex; gap:12px; align-items:center; text-align:left; }
#modalCard .invite-friend-option .option-copy { flex:1; }
#modalCard .invite-friend-option .option-copy strong { white-space:nowrap; }
#modalCard .invite-friend-option .option-icon { color:#87d3ff; flex-shrink:0; }
#gameView #diceZone { flex-wrap:nowrap; }
@media(max-width:720px) {
  #modalCard .option-button { padding:12px; gap:10px; }
  #modalCard .option-icon { width:34px; height:34px; flex:0 0 34px; }
  #modalCard .option-copy strong { font-size:13px; }
  #modalCard .option-copy small { font-size:10px; line-height:1.4; }
  #modalCard .option-value { font-size:11px; flex:0 0 auto; }
  #modalCard .difficulty-options .option-button { min-height:68px; }
  #gameView #diceZone { min-width:0; gap:6px; }
  #gameView #diceZone .game-die { flex-shrink:0; }
}
body.is-game-view.mobile-board-mode { overflow:hidden; }
body.is-game-view.mobile-board-mode .app-shell { min-height:0; height:var(--mobile-view-height,100dvh); padding:0; overflow:visible; }
body.is-game-view.mobile-board-mode .topbar, body.is-game-view.mobile-board-mode .app-footer { display:none !important; }
body.is-game-view.mobile-board-mode .main-content { padding:0 !important; margin:0; height:100%; max-width:none; }
body.is-game-view.mobile-board-mode #gameView.active {
  position:fixed; left:var(--mobile-view-left,0px); top:var(--mobile-view-top,0px);
  width:var(--mobile-view-width,100vw); height:var(--mobile-view-height,100dvh);
  padding:max(3px,var(--safe-top)) max(5px,var(--safe-right)) max(3px,var(--safe-bottom)) max(5px,var(--safe-left));
  margin:0; max-width:none; max-height:none; min-height:0; display:block;
  box-sizing:border-box; overflow:hidden; background:#090e17;
}
body.is-game-view.mobile-board-mode #gameView > .game-layout { display:block; width:100%; height:100%; min-height:0; margin:0; padding:0; }
body.is-game-view.mobile-board-mode #gameView .board-stage {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:44px minmax(0,1fr) 30px; gap:2px; width:100%; height:100%; min-height:0; margin:0; padding:0;
}
body.is-game-view.mobile-board-mode #gameView .board-stage > .board-frame {
  grid-area:2 / 1 / 3 / 2; width:100%; height:100%; min-height:0; max-height:none; margin:0; padding:6px;
  aspect-ratio:auto; box-sizing:border-box; flex:none; border-radius:16px;
}
body.is-game-view.mobile-board-mode #gameView .board-caption { display:none; }
body.is-game-view.mobile-board-mode #gameView .board-stage > .player-rail {
  display:grid; width:100%; height:100%; min-height:0; max-height:none; padding:2px 6px; margin:0;
  border-radius:7px; border:0; background:transparent; box-sizing:border-box; gap:9px; flex:none;
}
body.is-game-view.mobile-board-mode #gameView .board-stage > .player-rail-top {
  grid-area:1 / 1 / 2 / 2; padding-right:105px; grid-template-areas:'status stats identity'; grid-template-columns:auto auto minmax(0,1fr);
}
body.is-game-view.mobile-board-mode #gameView .board-stage > .player-rail-bottom {
  grid-area:3 / 1 / 4 / 2; padding-right:138px; grid-template-areas:'identity stats status'; grid-template-columns:minmax(0,1fr) auto auto;
}
body.is-game-view.mobile-board-mode #gameView .player-identity { min-width:0; gap:6px; }
body.is-game-view.mobile-board-mode #gameView .player-identity strong { font-size:11px; }
body.is-game-view.mobile-board-mode #gameView .player-identity small { display:none; }
body.is-game-view.mobile-board-mode #gameView .player-identity .avatar-ring { width:24px; height:24px; padding:2px; }
body.is-game-view.mobile-board-mode #gameView .player-identity .avatar { font-size:10px; }
body.is-game-view.mobile-board-mode #gameView .player-stats { display:flex; gap:9px; }
body.is-game-view.mobile-board-mode #gameView .player-stats > span { min-width:0; padding:0; display:flex; align-items:center; gap:4px; }
body.is-game-view.mobile-board-mode #gameView .player-stats small { font-size:7px; letter-spacing:0; }
body.is-game-view.mobile-board-mode #gameView .player-stats strong { font-size:11px; }
body.is-game-view.mobile-board-mode #gameView .player-rail .turn-chip { display:flex; min-width:0; margin:0; padding:4px 7px; font-size:8px; gap:4px; }
body.is-game-view.mobile-board-mode #gameView .player-rail .turn-chip > span { width:4px; height:4px; }
body.is-game-view.mobile-board-mode #gameBoard .board-grid { border-radius:10px; }
body.is-game-view.mobile-board-mode #gameBoard .board-corner { width:14px; height:14px; border-radius:5px; }
body.is-game-view.mobile-board-mode #gameBoard .checker { width:var(--focus-checker-size); height:var(--focus-checker-size); max-width:none; max-height:none; aspect-ratio:1; }
body.is-game-view.mobile-board-mode #gameBoard .top-quadrant .checker { top:calc(3px + var(--stack-index) * var(--focus-stack-step)); }
body.is-game-view.mobile-board-mode #gameBoard .bottom-quadrant .checker { bottom:calc(3px + var(--stack-index) * var(--focus-stack-step)); }
body.is-game-view.mobile-board-mode #gameBoard .bar-checker { width:var(--focus-bar-size); height:var(--focus-bar-size); }
body.is-game-view.mobile-board-mode #gameBoard .black-bar-zone .bar-checker { top:calc(3px + var(--bar-index) * var(--focus-bar-step)); }
body.is-game-view.mobile-board-mode #gameBoard .white-bar-zone .bar-checker { bottom:calc(3px + var(--bar-index) * var(--focus-bar-step)); }
body.is-game-view.mobile-board-mode #gameBoard .checker-count { width:clamp(11px,calc(var(--focus-checker-size) * .38),22px); height:clamp(11px,calc(var(--focus-checker-size) * .38),22px); font-size:clamp(7px,calc(var(--focus-checker-size) * .19),11px); }
.mobile-match-tab { position:absolute; z-index:31; top:max(3px,var(--safe-top)); right:calc(max(5px,var(--safe-right)) + 3px); min-width:92px; height:44px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:10px; background:#1a2634; color:#edf5ff; border:1px solid #38485b; border-radius:12px; font-size:12px; font-weight:800; }
.mobile-notice-dot { position:absolute; top:4px; right:4px; background:#ceff42; width:7px; height:7px; border-radius:50%; }
.mobile-match-notice { position:absolute; z-index:32; top:calc(max(3px,var(--safe-top)) + 48px); right:calc(max(5px,var(--safe-right)) + 8px); min-height:44px; padding:8px 14px; max-width:200px; border:1px solid #b2d94e; border-radius:12px; color:#d3ff72; background:#122319f5; font-size:12px; font-weight:800; box-shadow:0 6px 18px #0007; }
.mobile-roll-anchor { position:absolute; z-index:30; right:calc(max(5px,var(--safe-right)) + 38px); bottom:calc(max(3px,var(--safe-bottom)) + 46px); width:152px; }
body.is-game-view.mobile-board-mode #mobileRollAnchor > #rollButton,
body.is-game-view.mobile-board-mode #mobileRollAnchor > #endTurnButton { display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; height:50px; width:100%; margin:0; padding:10px 16px; border-radius:16px; font-size:16px; box-shadow:0 8px 28px #0009,0 0 0 1px #b8ff3280; }
body.is-game-view.mobile-board-mode #mobileRollAnchor > .hidden, body.is-game-view.mobile-board-mode #mobileRollAnchor > .mobile-roll-hidden { display:none !important; }
body.is-game-view.mobile-board-mode #mobileRollAnchor .roll-key { display:none; }
.mobile-dice-slot { position:absolute; right:calc(max(5px,var(--safe-right)) + 5px); bottom:max(3px,var(--safe-bottom)); height:30px; width:127px; display:flex; justify-content:flex-end; pointer-events:none; }
body.is-game-view.mobile-board-mode #mobileDiceSlot #diceZone { position:static; display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; width:100%; gap:5px; min-height:0; height:30px; padding:0; margin:0; background:transparent; border:0; border-radius:0; }
body.is-game-view.mobile-board-mode #mobileDiceSlot .game-die, body.is-game-view.mobile-board-mode #mobileDiceSlot .die-placeholder { width:24px; height:24px; flex:0 0 24px; padding:4px; border-radius:6px; }
body.is-game-view.mobile-board-mode #mobileDiceSlot .die-pip { width:4px; height:4px; }
body.is-game-view.mobile-board-mode #mobileDiceSlot .roll-pending-label { font-size:10px; white-space:nowrap; padding:0; }
body.is-game-view.mobile-board-mode #mobileDiceSlot .game-die.used { opacity:.24; }
.mobile-match-scrim { position:absolute; z-index:79; inset:0; background:#0009; }
.mobile-match-drawer { position:absolute; z-index:80; top:max(3px,var(--safe-top)); right:max(5px,var(--safe-right)); bottom:max(3px,var(--safe-bottom)); width:min(420px,calc(100% - max(5px,var(--safe-left)) - max(5px,var(--safe-right)))); display:flex; flex-direction:column; min-height:0; background:#111923; border:1px solid #435066; border-radius:18px; box-shadow:-10px 0 45px #0008; overflow:hidden; }
.mobile-drawer-heading { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid #2d3948; }
.mobile-drawer-heading small { color:var(--lime); font-size:9px; letter-spacing:.12em; }
.mobile-drawer-heading h2 { font-size:18px; margin:3px 0 0; }
#closeMobileMatch { min-width:76px; min-height:44px; background:#1b2939; border:1px solid #42536b; border-radius:11px; color:#f0f5fc; font-size:12px; font-weight:800; padding:8px 12px; }
.mobile-drawer-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px; display:flex; flex-direction:column; gap:12px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-topbar { position:static; display:grid; grid-area:auto; grid-template-columns:44px minmax(0,1fr) auto 44px; padding:9px; gap:8px; margin:0; min-height:62px; flex:0 0 auto; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-topbar .game-status-chip { display:none; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-mode-copy { display:block; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-mode-copy > .mode-tag { display:none; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-mode-copy strong { font-size:12px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-mode-copy small { font-size:10px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-pot strong { font-size:17px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-pot small { font-size:7px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .match-fairness { width:44px; height:44px; padding:0; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .match-fairness-label { display:none; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .match-tools { display:grid; grid-area:auto; grid-template-columns:1fr auto; margin:0; padding:10px; gap:9px; min-height:0; flex:0 0 auto; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .match-tool-actions { display:grid; grid-column:1 / -1; grid-template-columns:1fr 1fr; gap:6px; }
body.is-game-view.mobile-board-mode.match-focus #mobileMatchDrawer .match-tool-actions { grid-template-columns:1fr 1fr 1fr; }
body.is-game-view.mobile-board-mode:not(.match-focus) #mobileMatchDrawer #focusMatchButton { display:none; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .match-tool-actions button { padding:8px; min-height:44px; min-width:0; font-size:11px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .match-tool-actions button span { position:static; width:auto; height:auto; clip-path:none; overflow:visible; white-space:normal; font-size:10px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .series-score { gap:5px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .score-player > span { display:none; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .game-sidebar { display:flex; flex-direction:column; grid-area:auto; gap:12px; width:100%; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .turn-panel { display:block; grid-area:auto; padding:12px; height:auto; max-height:none; overflow:visible; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .turn-panel > .section-kicker { display:block; margin-bottom:7px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .turn-title { display:flex; margin:0; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer #turnInstruction { white-space:normal; font-size:11px; overflow:visible; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .move-log-panel, body.is-game-view.mobile-board-mode #mobileMatchDrawer .match-panel { display:block; height:auto; grid-area:auto; padding:12px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .move-log { max-height:150px; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .round-notice { display:flex; grid-area:auto; flex-direction:column; flex:0 0 auto; align-items:stretch; gap:8px; padding:12px; margin:0; max-height:none; overflow:visible; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .round-notice[hidden] { display:none; }
body.is-game-view.mobile-board-mode #mobileMatchDrawer .round-notice button { min-height:44px; }
.mobile-drawer-note { flex:0 0 auto; font-size:10px; line-height:1.45; color:#9daec2; padding:9px 14px; margin:0; border-top:1px solid #2d3948; }
@media(max-width:650px) {
  body.is-game-view.mobile-board-mode #gameView .player-stats { gap:6px; }
  body.is-game-view.mobile-board-mode #gameView .player-stats > span:not(:first-child) { display:none; }
  body.is-game-view.mobile-board-mode #gameView .player-rail .turn-chip { font-size:7px; padding:3px 5px; }
  body.is-game-view.mobile-board-mode #gameView .player-identity strong { font-size:10px; }
  body.is-game-view.mobile-board-mode #gameView .board-stage > .player-rail-bottom { padding-right:115px; }
  .mobile-dice-slot { width:105px; }
  body.is-game-view.mobile-board-mode #mobileDiceSlot .game-die { width:21px; height:21px; flex-basis:21px; gap:0; }
}

.mobile-player-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; flex:0 0 auto; }
.mobile-player-summary > div { min-width:0; padding:10px; border:1px solid #344152; border-radius:10px; background:#16202b; }
.mobile-player-summary strong { display:block; overflow-wrap:anywhere; font-size:11px; margin-bottom:6px; }
.mobile-player-summary span { font-size:9px; color:#9eafc3; white-space:nowrap; }
.mobile-player-summary b { color:#f0f5ff; }