/* Only the local game page. Loaded last to override legacy header/layout rules. */

/* Desktop: brand | remaining time | game actions, with digits + score below. */
.game-app .top-bar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  grid-template-rows:auto auto auto;
  gap:7px 12px;
  align-items:center;
  min-height:0;
  padding:8px clamp(12px,2.5vw,32px);
}
.game-app .top-bar .brand{
  grid-column:1;grid-row:1;justify-self:start;min-width:0;
}
.game-app .top-bar .timer-wrap{
  grid-column:2;grid-row:1;justify-self:center;
  display:flex;flex-direction:row;align-items:center;gap:7px;
  min-width:0;margin:0;padding:6px 12px;
}
.game-app .top-bar .timer-wrap span{font-size:10px;letter-spacing:.06em}
.game-app .top-bar .timer-wrap strong{font-size:clamp(19px,2.2vw,26px);font-variant-numeric:tabular-nums;line-height:1}
.game-app .top-bar .timer-wrap.warning strong{color:#ff8066}
.game-app .top-bar .game-menu-toggle{display:none}
.game-app .top-bar .game-navigation{
  grid-column:3;grid-row:1;justify-self:end;
  display:flex;align-items:center;gap:8px;
  width:auto;margin:0;
}
.game-app .top-bar .game-navigation .gold-button,
#onlineDialog .top-bar .game-navigation .gold-button{
  display:inline-flex;align-items:center;justify-content:center;
  column-gap:.5em;min-height:42px;
}
.game-app .top-bar .game-navigation .nav-icon,
#onlineDialog .top-bar .game-navigation .nav-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.35em;margin-right:0;font-size:1em;line-height:1;flex:none;
}
/* Second header row: one centered line for remaining digits directly below the timer. */
.game-app .top-bar > .bag-count{
  grid-column:2;grid-row:2;justify-self:center;
  display:flex;align-items:center;justify-content:center;gap:5px;
  margin:0;min-width:0;white-space:nowrap;
  font-size:13px;color:#aebfda;
}
.game-app .top-bar > .bag-count strong{font-size:18px;color:#fbd477}

/* Third row: two equal score columns, completely independent of the bag count. */
.game-app .top-bar .game-header-score{
  grid-column:1/-1;grid-row:3;
  width:100%;min-width:0;display:block;
}
.game-app .top-bar .game-header-score .match-scoreboard{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;justify-content:center;
  width:min(100%,700px);max-width:100%;min-width:0;
  margin:0 auto;padding:0;gap:clamp(10px,2vw,20px);
}
.game-app .top-bar .game-header-score .match-scoreboard .player-card,
.game-app .top-bar .game-header-score .match-scoreboard #player1Card{
  display:flex!important;flex-direction:column!important;
  align-items:center;justify-content:center;
  width:100%!important;max-width:100%;min-width:0;min-height:70px;
  margin:0!important;padding:8px 12px!important;gap:4px!important;
  box-sizing:border-box;
}
/* Explicit slots override older mobile grid positions for both players. */
.game-app .top-bar .game-header-score .match-scoreboard #player0Card{grid-column:1;grid-row:1}
.game-app .top-bar .game-header-score .match-scoreboard #player1Card{grid-column:2;grid-row:1}
.game-app .top-bar .game-header-score .match-scoreboard .player-name{
  flex:0 1 auto;display:block;
  width:100%;max-width:100%;min-width:0;
  padding:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center!important;font-size:clamp(12px,1.3vw,16px)!important;line-height:1.2;
}
.game-app .top-bar .game-header-score .match-scoreboard .score{
  flex:0 0 auto;justify-content:center;
  padding:0!important;min-width:0;max-width:100%;
  background:transparent!important;
}
.game-app .top-bar .game-header-score .match-scoreboard .score strong{
  font-size:clamp(25px,3vw,40px);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:transparent!important;
}
/* The rack is now the entire control bar; timer and bag count live above the board. */
.game-app .control-bar .rack-frame{min-width:0}

/* Keep preview state/confirmation logic alive, without duplicate text above the board. */
.game-app .center-area > .board-heading[hidden]{display:none!important}

@media(max-width:1000px){
  .game-app .top-bar{gap:6px 9px;padding-inline:12px}
  .game-app .top-bar .game-navigation{gap:5px}
  .game-app .top-bar .game-navigation .gold-button{font-size:11px;padding:7px 8px;white-space:nowrap}
}

/* Same mobile menu interaction as the homepage, without four buttons over the board. */
@media(max-width:760px){
  .game-app .top-bar{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    grid-template-rows:auto auto auto;
    gap:8px 6px;
    padding:9px max(10px,env(safe-area-inset-left));
    align-items:center;
  }
  .game-app .top-bar .brand{grid-column:1;grid-row:1;justify-self:start}
  .game-app .top-bar .brand img.brand-mark{width:32px;height:32px}
  .game-app .top-bar .brand strong{font-size:12px}
  .game-app .top-bar .timer-wrap{
    grid-column:2;grid-row:1;justify-self:center;
    flex-direction:column;gap:0;
    padding:5px 9px;
  }
  .game-app .top-bar .timer-wrap span{font-size:9px}
  .game-app .top-bar .timer-wrap strong{font-size:20px}
  .game-app .top-bar .game-menu-toggle{
    grid-column:3;grid-row:1;justify-self:end;
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:82px;
    padding:8px 11px;
    font-size:13px;
  }
  .game-app .top-bar .game-navigation{
    grid-column:1/-1;grid-row:2;
    justify-self:stretch;
    display:none;flex-direction:column;align-items:stretch;
    width:100%;padding-top:9px;margin:0;
    border-top:1px solid #365578;
  }
  .game-app .top-bar .game-navigation.is-open{display:flex}
  .game-app .top-bar .game-navigation .gold-button{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:44px;text-align:center;
    font-size:13px;padding:9px 12px;
  }
  .game-app .top-bar > .bag-count{
    grid-column:2;grid-row:2;justify-self:center;
    font-size:12px;gap:4px;
  }
  .game-app .top-bar > .bag-count strong{font-size:16px}
  .game-app .top-bar .game-header-score{
    grid-column:1/-1;grid-row:3;width:100%;
  }
  .game-app .top-bar:has(.game-navigation.is-open) > .bag-count{grid-row:3}
  .game-app .top-bar:has(.game-navigation.is-open) .game-header-score{grid-row:4}
  .game-app .top-bar .game-header-score .match-scoreboard{
    width:100%;max-width:100%;gap:10px;
  }
  .game-app .top-bar .game-header-score .match-scoreboard .player-card,
  .game-app .top-bar .game-header-score .match-scoreboard #player1Card{
    min-height:66px;padding:7px 8px!important;gap:3px!important;
  }
  .game-app .top-bar .game-header-score .match-scoreboard .player-name{
    font-size:clamp(11px,2.9vw,14px)!important;
  }
  .game-app .top-bar .game-header-score .match-scoreboard .score strong{
    font-size:clamp(23px,6vw,30px);
  }
  .game-app .control-bar{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:370px){
  .game-app .top-bar > .bag-count{font-size:11px}
  .game-app .top-bar > .bag-count strong{font-size:15px}
  .game-app .top-bar .game-header-score .match-scoreboard{gap:8px}
  .game-app .top-bar .game-header-score .match-scoreboard .player-card,
  .game-app .top-bar .game-header-score .match-scoreboard #player1Card{padding:6px 5px!important}
  .game-app .top-bar .game-header-score .match-scoreboard .score strong{font-size:clamp(21px,6vw,25px)}
  .game-app .top-bar .game-menu-toggle{min-width:74px;padding:7px}
}

/* Settings for both game modes now live in shared-game-settings.css. */

/* Landscape tablet/desktop: five compact header slots, a centered square board,
   small controls alongside it on the left, and history/chat on its right.
   No footer below the board: at 100% zoom the board takes the available height. */
@media (min-width:1101px), (min-width:900px) and (orientation:landscape) and (min-height:601px){
  :root{
    --arena-sidebar-width:clamp(200px,18vw,260px);
    --arena-board-size:min(1100px,calc(100dvh - 104px),calc(100vw - var(--arena-sidebar-width) - var(--arena-sidebar-width) - 40px));
  }
  .game-app .top-bar{
    /* Equal outer tracks put the clock at the viewport center, not halfway
       between the logo and a much wider navigation area. */
    grid-template-columns:minmax(0,1fr) clamp(118px,12vw,170px) clamp(138px,13vw,165px) clamp(118px,12vw,170px) minmax(0,1fr)!important;
    grid-template-rows:42px 13px;column-gap:clamp(4px,.8vw,12px);row-gap:1px;
    min-height:0;padding:4px clamp(8px,1.2vw,16px);
  }
  .game-app .top-bar .brand{grid-column:1;grid-row:1 / span 2;align-self:center}
  .game-app .top-bar .brand img.brand-mark{width:36px;height:36px}
  .game-app .top-bar .timer-wrap{
    grid-column:3;grid-row:1;align-self:center;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:0;min-width:112px;padding:2px 8px;
  }
  .game-app .top-bar .timer-wrap span{font-size:9px;line-height:1}
  .game-app .top-bar .timer-wrap strong{line-height:1}
  .game-app .top-bar > .bag-count{
    grid-column:3;grid-row:2;justify-self:center;
    font-size:10px;line-height:1.1;
  }
  .game-app .top-bar > .bag-count strong{font-size:13px}
  .game-app .top-bar .game-navigation{
    grid-column:5;grid-row:1 / span 2;align-self:center;gap:4px;
  }
  .game-app .top-bar .game-navigation .gold-button{
    min-height:34px;padding:5px 6px;font-size:10px;
  }
  /* The existing score elements become header grid items, with IDs unchanged. */
  .game-app .top-bar .game-header-score,
  .game-app .top-bar .game-header-score .match-scoreboard{display:contents!important}
  .game-app .top-bar .game-header-score .match-scoreboard #player0Card{
    grid-column:2;grid-row:1 / span 2;align-self:center;
  }
  .game-app .top-bar .game-header-score .match-scoreboard #player1Card{
    grid-column:4;grid-row:1 / span 2;align-self:center;
  }
  .game-app .top-bar .game-header-score .match-scoreboard .player-card,
  .game-app .top-bar .game-header-score .match-scoreboard #player1Card{
    flex-direction:row!important;min-height:42px;
    padding:4px 6px!important;gap:5px!important;
  }
  .game-app .top-bar .game-header-score .match-scoreboard .player-name{
    width:auto;max-width:63%;flex:0 1 auto;
    font-size:clamp(11px,1vw,14px)!important;
  }
  .game-app .top-bar .game-header-score .match-scoreboard .score strong{
    font-size:clamp(23px,2.3vw,30px);
  }
  .game-app .progress-track{
    width:min(var(--arena-board-size),calc(100% - 24px));margin:2px auto;
  }
  .game-app .main-stage{
    grid-template-columns:minmax(0,1fr) minmax(0,var(--arena-board-size)) minmax(0,1fr)!important;
    column-gap:10px;justify-content:stretch;padding:2px 10px 0;
  }
  .game-app .center-area{grid-column:2;grid-row:1}
  .game-app .right-side{
    grid-column:3;grid-row:1;max-height:var(--arena-board-size);
    margin:0;align-self:start;
  }
  .game-app .right-side .side-panel{max-height:var(--arena-board-size)}
  /* The former footer is a small, centered card in the left grid track. */
  .game-app .control-bar{
    grid-column:1;grid-row:1;justify-self:stretch;align-self:center;
    display:flex;flex-direction:column;align-items:stretch;
    width:100%;max-width:none;min-height:0;height:auto;
    gap:8px;margin:0;padding:10px;border-radius:12px;
  }
  .game-app .control-bar .rack-frame{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto 40px;gap:6px;width:100%;min-height:0;padding:0;
  }
  .game-app .control-bar .rack{
    grid-column:1 / -1;grid-row:1;
    display:flex;justify-content:center;align-items:center;
    width:100%;min-width:0;max-width:none;height:48px;padding:3px;gap:clamp(2px,.5vw,8px);
  }
  .game-app .control-bar .tile{
    flex:0 1 clamp(36px,3vw,54px);width:clamp(36px,3vw,54px);
    min-width:0;height:40px;font-size:24px;
  }
  .game-app .control-bar #undoButton,
  .game-app .control-bar #confirmButton{
    width:100%;height:40px;min-width:0;border-radius:9px;
  }
  .game-app .control-bar #undoButton{grid-column:1;grid-row:2}
  .game-app .control-bar #confirmButton{grid-column:2;grid-row:2}
  .game-app .control-bar .game-controls{
    display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:5px;
  }
  .game-app .control-bar .game-controls .gold-button{
    width:100%;min-width:0;min-height:38px;padding:5px 7px;
    font-size:12px;white-space:normal;
  }
  .game-app .control-bar .game-mode{display:none!important}
}
@media (min-width:900px) and (max-width:1050px) and (orientation:landscape) and (min-height:601px){
  .game-app .top-bar .game-navigation .gold-button{padding-inline:3px;font-size:9px}
}


/* Tablet portrait: fit the digit rack and every action in one compact row.
   Keep the square board within the remaining height so the actions are visible
   without scrolling on shorter tablets. Phones and desktop are unchanged. */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait) and (pointer:coarse){
  :root{--arena-board-size:min(calc(100vw - 12px),calc(100dvh - 330px))}
  .game-app .center-area{max-width:var(--arena-board-size)}
  .game-app .control-bar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content minmax(0,2fr)!important;
    grid-template-rows:auto;
    align-items:center;justify-items:stretch;
    column-gap:clamp(4px,.9vw,9px);row-gap:0;
    width:100%;min-width:0;max-width:none;
    min-height:0;margin-top:2px;
    box-sizing:border-box;padding:3px 8px calc(3px + env(safe-area-inset-bottom));
  }
  .game-app .control-bar .rack-frame{
    grid-column:3;grid-row:1;
    justify-self:center;align-self:center;
    width:max-content;max-width:100%;min-width:0;
    min-height:46px;margin:0;padding:0;gap:4px;
  }
  .game-app .control-bar .rack{height:48px;padding:2px 3px;border-width:2px}
  .game-app .control-bar .game-controls{display:contents!important}
  .game-app .control-bar #hintButton{grid-column:1;grid-row:1}
  .game-app .control-bar #exchangeButton{grid-column:2;grid-row:1}
  .game-app .control-bar #passButton{
    grid-column:4;grid-row:1;align-self:center;
  }
  .game-app .control-bar .game-controls .gold-button{
    box-sizing:border-box;width:100%;max-width:100%;min-width:0;
    height:44px;min-height:44px;padding:4px 5px;
    font-size:clamp(10px,1.2vw,12px);line-height:1.15;
    white-space:normal;
  }
  .game-app .control-bar .game-mode{display:none!important}
}

/* Phone landscape (iPhone and Android): board is based on screen WIDTH, not the short height.
   Vertical scrolling is intentional for the full 15x15 board. Portrait and PC
   remain unchanged. Keep any optional history/chat panels below the board. */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px) and (pointer:coarse){
  :root{
    --arena-board-size:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  /* Reuse the portrait phone menu on landscape iPhone/Android, not four
     always-visible actions. Keep the clock and bag in their existing rows. */
  .game-app .top-bar .game-menu-toggle{
    grid-column:3;grid-row:1;justify-self:end;
    display:inline-flex;align-items:center;justify-content:center;
    min-width:82px;min-height:44px;
    padding:8px 11px;font-size:13px;
  }
  .game-app .top-bar .game-navigation{
    grid-column:1/-1;grid-row:2;justify-self:stretch;
    display:none;flex-direction:column;align-items:stretch;
    width:100%;padding-top:9px;margin:0;
    gap:6px;border-top:1px solid #365578;
  }
  .game-app .top-bar .game-navigation.is-open{display:flex}
  .game-app .top-bar .game-navigation .gold-button{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:44px;text-align:center;
    font-size:13px;padding:9px 12px;
  }
  .game-app .top-bar:has(.game-navigation.is-open) > .bag-count{grid-row:3}
  .game-app .top-bar:has(.game-navigation.is-open) .game-header-score{grid-row:4}
  .game-app .main-stage{
    display:grid;grid-template-columns:minmax(0,1fr)!important;
    gap:6px;max-width:none;width:100%;min-width:0;
    padding:4px max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));
    align-items:start;justify-content:stretch;
  }
  .game-app .center-area{
    grid-column:1;grid-row:1;justify-self:stretch;
    width:100%;max-width:none;min-width:0;margin:0;padding:0;
  }
  /* Reserve the entire 15x15 square on the first paint, before game JS
     fills it. Safari can then scroll all the way down immediately. */
  html{
    height:auto!important;min-height:100%;
    overflow-x:clip;overflow-y:auto!important;
    scroll-behavior:auto;
  }
  body{
    height:auto!important;min-height:100dvh;
    overflow-x:clip;overflow-y:visible!important;
  }
  .game-app{
    height:auto!important;min-height:100dvh;overflow:visible!important;
  }
  .game-app .board-rim{
    box-sizing:border-box;display:flex;
    width:100%;max-width:none;margin:0;
    aspect-ratio:1 / 1;
  }
  .game-app .board{
    box-sizing:border-box;flex:1 1 auto;min-width:0;min-height:0;
    width:100%;height:100%!important;
    aspect-ratio:1 / 1;
  }
  /* Letter sizes now follow the rendered board width, rather than
     --board-side, which stays height-limited in the older desktop theme. */
  .game-app .board .cell.occupied,
  .game-app .board .cell.pending{
    font-size:clamp(19px,2.5vw,32px);
    line-height:1;
  }
  .game-app .board .cell.bonus-hint:is(.dd,.td,.de,.te){
    font-size:clamp(11px,1.55vw,18px);
    line-height:1;
  }
  .game-app .right-side{
    grid-column:1;grid-row:2;width:100%;max-height:none;
    margin:6px 0 0;overflow:visible;
  }
  .game-app .right-side .side-panel{
    width:100%;max-height:none;overflow:visible;
  }
  /* Equal free-space columns center the rack across the phone width.
     Existing action buttons become grid items without any JS/DOM changes. */
  .game-app .control-bar{
    box-sizing:border-box;display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;justify-items:stretch;
    column-gap:clamp(6px,1.2vw,14px);row-gap:4px;
    width:calc(100% - 16px);max-width:none;
    padding:6px 8px;margin:4px auto 0;
  }
  .game-app .control-bar .rack-frame{
    grid-column:2;grid-row:1 / span 2;
    justify-self:center;align-self:center;
    width:max-content;max-width:100%;min-width:0;
    margin:0;padding:0;
  }
  .game-app .control-bar .game-controls{display:contents!important}
  .game-app .control-bar #hintButton{grid-column:1;grid-row:1}
  .game-app .control-bar #exchangeButton{grid-column:1;grid-row:2}
  .game-app .control-bar #passButton{
    grid-column:3;grid-row:1 / span 2;align-self:stretch;
  }
  .game-app .control-bar .game-controls .gold-button{
    box-sizing:border-box;width:100%;max-width:100%;
    min-width:0;min-height:27px;
    padding:4px clamp(3px,.7vw,8px);
    font-size:clamp(10px,1.2vw,13px);
    line-height:1.15;white-space:normal;
  }
  .game-app .control-bar .game-mode{display:none!important}

  /* Score animation: a short, fully visible card instead of a portrait-sized
     overlay on the narrow landscape viewport. No changes to animation timing. */
  .arena-score-recap{padding:7px}
  .arena-score-recap .arena-score-scroll{
    box-sizing:border-box;width:min(410px,calc(100vw - 24px));
    min-height:0;max-height:calc(100dvh - 14px);
    grid-template-columns:minmax(0,1fr);overflow-y:auto;
  }
  .arena-score-recap .arena-score-face{
    min-height:0;padding:8px 14px 10px;gap:1px;
  }
  .arena-score-recap .arena-score-player{
    margin:0 0 4px;padding:5px 9px;
    font-size:12px;line-height:1.1;
  }
  .arena-score-recap .arena-score-equation{
    min-height:0;font-size:clamp(17px,4vh,24px);line-height:1.15;
  }
  .arena-score-recap .arena-score-addition{
    margin:4px auto 0;font-size:16px;
  }
  .arena-score-recap .arena-score-bonus{
    min-height:0;font-size:10px;line-height:1.2;
  }
  .arena-score-recap .arena-score-separator{
    margin:5px 0 3px;height:1px;
  }
  .arena-score-recap .arena-score-total-label{
    margin:0 0 3px;font-size:10px;
  }
  .arena-score-recap .arena-score-counter{
    width:52px;height:52px;font-size:25px;border-radius:10px;
  }
  .arena-score-recap .arena-score-progress{
    margin-top:4px;font-size:10px;
  }
}

/* Controls must remain finger-friendly in desktop, tablet and phone layouts.
   These rules intentionally follow the compact and landscape overrides above. */
.game-app .control-bar .game-controls .gold-button,
#onlineDialog .control-bar .game-controls .gold-button,
.game-app .top-bar .game-navigation .gold-button,
#onlineDialog .top-bar .game-navigation .gold-button {
  min-height:44px;
}
.game-app .control-bar #undoButton,
.game-app .control-bar #confirmButton,
#onlineDialog .control-bar #onlineUndo,
#onlineDialog .control-bar #onlineConfirm {
  height:44px;min-height:44px;min-width:44px;
}
.game-app .control-bar .tile,
#onlineDialog .control-bar .tile {height:44px;min-height:44px}