/* One responsive game layout; progress and chat visibility are settings. */
:root{--arena-board-size:min(1100px,calc(100dvh - 230px),calc(100vw - 28px));--arena-sidebar-width:280px}
.game-app{display:flex;flex-direction:column;max-width:none!important;width:100%!important;min-height:100dvh;height:auto!important;overflow:visible!important}
.game-app .top-bar,#onlineDialog .online-dialog-header{
  display:grid!important;grid-template-columns:minmax(135px,1fr) minmax(300px,500px) minmax(330px,1fr);
  gap:12px;align-items:center;min-height:66px;padding:8px 20px;
}
.top-bar .brand,#onlineDialog .online-game-brand{grid-column:1;grid-row:1;justify-self:start}
.top-bar .header-actions,#onlineDialog .online-header-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.match-scoreboard,.online-match-scoreboard{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-width:0;font-variant-numeric:tabular-nums}
.match-scoreboard .player-card,.online-match-scoreboard .online-player-card{
  order:initial!important;display:flex!important;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;width:auto!important;
  max-width:none!important;min-height:46px;gap:9px;margin:0!important;padding:5px 10px;
  background:transparent!important;border:1px solid transparent!important;border-radius:11px;box-shadow:none!important;text-align:center;
}
.match-scoreboard .player-card.active,.online-match-scoreboard .online-player-card.active{background:#f5c65915!important;border-color:#e0b85375!important}
.match-scoreboard .player-name,.online-match-scoreboard .online-player-name{
  flex:0 1 auto;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#f1f5fb!important;font-size:clamp(12px,1.15vw,17px)!important;font-weight:800!important;
  text-align:center!important;padding:0!important;line-height:1.2;background:none!important;
}
.match-scoreboard .score,.online-match-scoreboard .online-player-score{flex:0 0 auto;display:flex;align-items:center;padding:0!important;gap:4px;justify-content:center;border:0}
.match-scoreboard .score strong,.online-match-scoreboard .online-player-score strong{font-size:clamp(24px,2vw,34px);line-height:1.1;color:#f6f9ff}
#onlineDialog .online-match-scoreboard .online-player-score strong{font-size:clamp(24px,2vw,34px);line-height:1.1}
.match-scoreboard .player-card.active .score strong,.online-match-scoreboard .online-player-card.active .online-player-score strong{color:#fbd06b}
.match-scoreboard .score small,.online-match-scoreboard .online-player-score small{display:none}
.score-divider{color:#e2bc5f;font-size:30px;font-weight:800;line-height:1}
.match-scoreboard #player1Card,.online-match-scoreboard #onlinePlayer1Card{flex-direction:row-reverse}
.game-app .progress-track,#onlineDialog .online-progress{flex:none;width:min(75%,620px);height:13px;margin:5px auto 3px}
.game-app .main-stage,#onlineDialog .online-match-layout{
  display:grid;grid-template-columns:minmax(0,var(--arena-board-size)) var(--arena-sidebar-width);justify-content:center;
  gap:16px;align-items:start;flex:0 0 auto;width:100%;max-width:none;min-height:0;margin:0 auto;padding:4px 14px;
}
.game-app .center-area,#onlineDialog .online-game-board{grid-column:1;grid-row:1;align-self:start;justify-self:center;width:100%;max-width:none;min-width:0;margin:0;padding:0;gap:0}
.game-app .board-rim,#onlineDialog .online-board-rim{width:100%;max-width:none;padding:4px;border-width:1px}
.game-app .board,#onlineDialog .online-board{width:100%;height:auto!important;aspect-ratio:1/1;grid-template-columns:repeat(15,minmax(0,1fr));grid-template-rows:repeat(15,minmax(0,1fr))}
.board-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:30px;width:100%;padding:2px 0 5px}
.game-app .board-crest,#onlineDialog .online-board-crest{flex:none;margin:0;letter-spacing:.1em;font-size:11px;white-space:nowrap}
.board-heading .move-preview,#onlineDialog .board-heading .online-preview{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;margin:0;padding:0;font-size:12px;line-height:1.4;text-align:right}
.board-heading .move-preview strong{font-size:18px}
.board-heading .move-preview-details{flex:0 1 auto;font-size:12px;white-space:normal;overflow-wrap:anywhere}
.game-app .right-side,#onlineDialog .online-right{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:12px;width:100%;height:auto;max-height:var(--arena-board-size);overflow-y:auto;min-width:0;min-height:0;margin:30px 0 0;padding:0;align-items:stretch;justify-content:flex-start}
.game-app .right-side .side-panel,#onlineDialog .online-right .online-panel{flex:0 0 auto;width:100%;height:auto;min-height:0;max-height:calc(var(--arena-board-size) - 20px);margin:0;overflow:auto}
.game-app .right-side .mobile-panel-content,#onlineDialog .online-right .online-panel-content{display:flex;flex-direction:column;gap:8px;min-height:0;padding:0}
.game-app[data-arena-mode="bot"] .chat-panel{display:none!important}
html[data-arena-history="false"] .game-app .status-panel,html[data-arena-history="false"] #onlineDialog .online-status-panel,
html[data-arena-chat="false"] .game-app .chat-panel,html[data-arena-chat="false"] #onlineDialog .online-match-chat{display:none!important}
html[data-arena-history="false"][data-arena-chat="false"] .game-app .right-side,
html[data-arena-history="false"][data-arena-chat="false"] #onlineDialog .online-right,
html[data-arena-history="false"] .game-app[data-arena-mode="bot"] .right-side{display:none}
html[data-arena-history="false"][data-arena-chat="false"] .game-app .main-stage,
html[data-arena-history="false"][data-arena-chat="false"] #onlineDialog .online-match-layout,
html[data-arena-history="false"] .game-app[data-arena-mode="bot"] .main-stage{grid-template-columns:minmax(0,var(--arena-board-size))}
.game-app .control-bar,#onlineDialog .online-control-bar{
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:14px;flex:0 0 auto;
  width:calc(100% - 28px);max-width:1500px;min-height:60px;margin:4px auto 0;padding:6px 14px;
  border:1px solid #304e74;border-radius:12px;background:#0a1b35;
}
.game-app .rack-frame,#onlineDialog .online-rack-frame{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;gap:7px;padding:0;min-height:48px}
.game-app .rack,#onlineDialog .online-rack{display:flex;justify-content:center;gap:4px;width:auto;min-width:0;max-width:none;height:52px;padding:3px 5px}
.game-app .tile,#onlineDialog .online-tile{flex:0 0 44px;width:44px;height:44px;font-size:28px}
.game-app .round-button,#onlineDialog .online-round-button{flex:0 0 42px;width:42px;height:42px}
.game-app .game-controls,#onlineDialog .online-match-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:7px;width:auto}
.game-app .game-controls .gold-button,#onlineDialog .online-match-actions .gold-button{white-space:nowrap;min-height:42px;padding:8px 11px;font-size:12px}
.game-app .timer-wrap,#onlineDialog .online-timer-wrap{flex:0 0 auto;min-width:72px;padding:4px 8px;margin:0}
.game-app .timer-wrap strong,#onlineDialog .online-timer-wrap strong{font-size:21px}
.game-app .bag-count,#onlineDialog .online-bag-count{margin-right:auto;min-width:0;white-space:nowrap;font-size:12px}
.game-app .game-mode,#onlineDialog .online-game-mode{margin-left:auto;min-width:0;font-size:12px;white-space:nowrap}
.game-app .fine-print{margin-top:auto;padding:6px 10px;line-height:1.4}
#onlineDialog.online-dialog{width:calc(100vw - 12px);max-width:1800px;max-height:calc(100dvh - 12px);--arena-board-size:min(1050px,calc(100dvh - 245px),calc(100vw - 40px))}
#onlineDialog .online-dialog-inner{padding:0 0 8px}
#onlineDialog .online-dialog-header{grid-template-columns:minmax(130px,1fr) minmax(300px,500px) minmax(240px,1fr)}
#onlineDialog .online-match-scoreboard[hidden]{display:none!important}
#onlineDialog .online-match-info{display:none}
#onlineStatus{min-height:0;margin:4px 14px!important;font-size:12px}
#onlineGameSettingsDialog .check-line,#settingsDialog .check-line{display:flex;align-items:center;gap:10px;min-height:36px}
#onlineGameSettingsDialog .check-line input,#settingsDialog .check-line input{width:18px;height:18px;flex:none;margin:0}
#settingsDialog{width:min(95vw,610px);max-width:610px}
#settingsDialog .dialog-body{gap:12px;padding:21px}
#settingsDialog .dialog-body>label:not(.check-line){display:grid;grid-template-columns:minmax(150px,1fr) minmax(170px,1fr);align-items:center;gap:12px}
#settingsDialog .dialog-body>label>select{width:100%;min-width:0}
#settingsDialog .dialog-body menu{display:flex;justify-content:flex-end;margin:0}
.rules-full-link{display:inline-block;text-decoration:none;white-space:normal}
.how-to-link{margin-top:16px}
.how-to-link .gold-button{text-decoration:none;display:inline-block}
.quick-rules .how-to-link{grid-column:1}
.quick-rules ol{grid-column:2;grid-row:1 / span 2}
@media(max-width:1200px){
  :root{--arena-sidebar-width:240px}
  .game-app .game-mode,#onlineDialog .online-game-mode{display:none}
  .game-app .top-bar{grid-template-columns:125px minmax(250px,1fr) auto;gap:10px;padding-inline:12px}
  .game-app .header-actions .gold-button{padding:8px;font-size:12px}
}
@media (max-width:1100px) and (orientation:portrait),(max-width:740px){
  :root{--arena-board-size:calc(100vw - 12px)}
  .game-app{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start}
  .game-app .top-bar,#onlineDialog .online-dialog-header{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px;padding:8px 10px}
  .game-app .top-bar{grid-column:1/-1;grid-row:1}
  .top-bar .header-actions,#onlineDialog .online-header-actions{grid-column:2;grid-row:1;width:auto;gap:5px;flex-wrap:wrap;justify-content:flex-end}
  .top-bar .header-actions .gold-button,#onlineDialog .online-header-actions .gold-button{min-height:35px;padding:6px 8px;font-size:11px;width:auto}
  .top-bar .match-scoreboard,#onlineDialog .online-match-scoreboard{grid-column:1/-1;grid-row:2;max-width:none;width:100%;gap:7px;padding:4px 0}
  .match-scoreboard .player-card,#onlineDialog .online-match-scoreboard .online-player-card{min-height:42px}
  .match-scoreboard .player-name,#onlineDialog .online-match-scoreboard .online-player-name{font-size:clamp(11px,2.6vw,16px)!important}
  .game-app .progress-track{grid-column:1/-1;grid-row:2;width:calc(100% - 22px);margin:6px auto}
  .game-app .main-stage,.game-app .right-side,#onlineDialog .online-match-layout,#onlineDialog .online-right{display:contents}
  .game-app .center-area,#onlineDialog .online-game-board{grid-column:1/-1;grid-row:3;width:100%;max-width:none;min-width:0;padding:0 4px}
  .game-app .board-rim,#onlineDialog .online-board-rim{padding:2px}
  .game-app .board .cell,#onlineDialog .online-cell{font-size:clamp(11px,2.7vw,23px)}
  .board-heading{flex-wrap:wrap;gap:4px;min-height:40px;padding:3px 4px 6px}
  .game-app .board-crest,#onlineDialog .online-board-crest{font-size:10px;letter-spacing:.05em}
  .board-heading .move-preview,#onlineDialog .board-heading .online-preview{font-size:11px;gap:4px}
  .board-heading .move-preview-details{font-size:11px}
  .game-app .control-bar,#onlineDialog .online-control-bar{display:grid;grid-template-columns:1fr auto;gap:6px;width:100%;max-width:none;margin:4px 0 0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-radius:0;border-inline:0;position:static}
  .game-app .control-bar{grid-column:1/-1;grid-row:4}
  .game-app .rack-frame,#onlineDialog .online-rack-frame{grid-column:1/-1;grid-row:1;justify-self:center;gap:6px;max-width:100%;min-width:0}
  .game-app .rack,#onlineDialog .online-rack{gap:3px;height:50px;padding:3px;flex:1 1 auto}
  .game-app .tile,#onlineDialog .online-tile{flex:0 1 44px;width:clamp(32px,10vw,44px);height:42px}
  .game-app .round-button,#onlineDialog .online-round-button{flex:0 0 36px;width:36px;height:40px}
  .game-app .game-controls,#onlineDialog .online-match-actions{grid-column:1/-1;grid-row:2;display:flex;width:100%;gap:6px}
  .game-app .game-controls .gold-button,#onlineDialog .online-match-actions .gold-button{flex:1;min-width:0;white-space:normal;padding:8px 4px;min-height:42px;font-size:12px}
  .game-app .bag-count,#onlineDialog .online-bag-count{grid-column:1;grid-row:3;text-align:left;order:initial}
  .game-app .timer-wrap,#onlineDialog .online-timer-wrap{grid-column:2;grid-row:3;display:flex;align-items:center;gap:6px;padding:3px 8px}
  .game-app .timer-wrap strong,#onlineDialog .online-timer-wrap strong{font-size:19px}
  .game-app .status-panel,.game-app .chat-panel,#onlineDialog .online-status-panel,#onlineDialog .online-match-chat{grid-column:1/-1;width:auto;min-height:0;max-height:none;height:auto;padding:14px;margin:10px 10px 0}
  .game-app .status-panel{grid-row:5}.game-app .chat-panel{grid-row:6}
  .game-app .right-side .side-panel,#onlineDialog .online-right .online-panel{width:auto;max-height:none;margin:10px 10px 0}
  .game-app .side-panel .mobile-panel-content>h2,#onlineDialog .online-panel-content>h2{display:block}
  .game-app .fine-print{grid-column:1/-1;grid-row:7;padding:12px 10px}
  #onlineDialog .online-match{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content}
  #onlineDialog .online-progress{grid-column:1/-1;grid-row:1}
  #onlineDialog .online-game-board{grid-row:2}
  #onlineDialog .online-control-bar{grid-column:1/-1;grid-row:3}
  #onlineDialog .online-status-panel{grid-row:4}#onlineDialog .online-match-chat{grid-row:5}
  #settingsDialog .dialog-body>label:not(.check-line){grid-template-columns:1fr;gap:5px}
  .quick-rules ol{grid-column:1;grid-row:auto}
}
@media(max-width:465px){
  .top-bar .brand img{width:32px;height:32px}.top-bar .brand strong{font-size:11px}
  .top-bar .header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-bar .header-actions .gold-button{min-height:32px;font-size:10px;padding:4px 6px}
  .match-scoreboard .player-card,.online-match-scoreboard .online-player-card{gap:5px!important;padding:4px 6px!important}
  .score-divider{font-size:22px}
  .board-heading .move-preview,#onlineDialog .board-heading .online-preview{flex-basis:100%;justify-content:flex-start;text-align:left}
}

/* Clear, actionable signal. Valid placement/selection is GREEN, invalid is RED. */
#confirmButton,#onlineConfirm,#undoButton,#onlineUndo{transition:background .14s,border-color .14s,box-shadow .14s}
#confirmButton[data-state="valid"],#onlineConfirm[data-state="valid"]{
  color:#082e24!important;background:linear-gradient(160deg,#a6f4c3,#36d38e)!important;
  border:2px solid #8bf1bb!important;box-shadow:0 0 0 2px #2dbf8345,0 0 15px #29d38a66!important;
  opacity:1!important;
}
#confirmButton[data-state="invalid"],#onlineConfirm[data-state="invalid"]{
  color:#fff1ed!important;background:#a63139!important;border:2px solid #f08b8b!important;
  box-shadow:0 0 0 2px #f2575747!important;opacity:1!important;
}
#confirmButton[data-state="empty"],#onlineConfirm[data-state="empty"]{
  background:#273d58!important;color:#8699b1!important;border:1px solid #50647e!important;
  box-shadow:none!important;opacity:.7;
}
#undoButton[data-has-pending="true"],#onlineUndo[data-has-pending="true"]{
  background:linear-gradient(150deg,#216b55,#17805c)!important;
  border:1px solid #67e2aa!important;color:#e6fff0!important;
  box-shadow:0 0 11px #4cda9655!important;opacity:1!important;
}
#confirmButton:disabled[data-state="invalid"],#onlineConfirm:disabled[data-state="invalid"]{opacity:1!important}
.tile.selected,.online-tile.chosen{background:linear-gradient(155deg,#b8f8d4,#5fdaa2)!important;color:#07382c!important;border-color:#8ff4c0!important}
.board[data-move-state="valid"] .cell.pending,#onlineBoard[data-move-state="valid"] .online-cell.staged{
  background:linear-gradient(155deg,#b7f6ce,#54dba5)!important;
  color:#083a2b!important;box-shadow:inset 0 0 0 2px #1fa16b,0 0 11px #33dba35f!important;
}
.board[data-move-state="invalid"] .cell.pending,#onlineBoard[data-move-state="invalid"] .online-cell.staged{
  background:#b54d54!important;color:white!important;box-shadow:inset 0 0 0 2px #ed9296!important;
}
.move-preview[data-state="invalid"],.online-preview[data-state="invalid"]{color:#ffb5b5!important}
.move-preview[data-state="valid"],.online-preview[data-state="valid"]{color:#95f4b9!important}


/* Number bonuses are gold, example bonuses are blue; ×3 is the darker shade. */
.board .cell.bonus-hint:is(.dd,.td,.de,.te),
#onlineDialog .online-cell.bonus-hint:is(.dd,.td,.de,.te){
  font-size:clamp(8px,.8vw,13px);font-weight:800;letter-spacing:-.04em;
  text-shadow:none;opacity:1;
}
.bonus-guide{
  width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;padding:7px 0;border-top:1px solid #345477;
}
.bonus-guide span{display:flex;align-items:center;gap:6px;min-width:0;color:#bdcfe4;font-size:11px;line-height:1.25}
.bonus-key{
  display:grid;place-items:center;flex:0 0 29px;height:27px;
  border:1px solid #5c84ad;border-radius:6px;color:#eff7ff;
  font:800 11px/1 ui-sans-serif,system-ui,sans-serif;
}
.bonus-key.dd{background:#bb8e36;color:#182941;border-color:#e2b95b}
.bonus-key.td{background:#866326;border-color:#c6a051;color:#fff0ba}
.bonus-key.de{background:#2b6596;color:#ecf6ff;border-color:#6ca4d1}
.bonus-key.te{background:#244878;border-color:#4e81b9;color:#e2efff}
@media (max-width:1100px) and (orientation:portrait),(max-width:740px){
  .board .cell.bonus-hint:is(.dd,.td,.de,.te),
  #onlineDialog .online-cell.bonus-hint:is(.dd,.td,.de,.te){font-size:clamp(8px,1.9vw,12px)}
  .bonus-guide{grid-template-columns:repeat(2,minmax(0,1fr))}
}