/* Phone playing surfaces. Specificity beats module styles injected on demand.
   Action controls are named separately from board cells: never stretch a grid
   by applying a minimum button size to every square. */
@media (max-width:700px), (max-width:950px) and (pointer:coarse) {
  body[data-view="game"] .wrap { padding-left:max(6px,env(safe-area-inset-left)); padding-right:max(6px,env(safe-area-inset-right)); }
  .game-main:not(.dg-expanded)>.game-box { padding:8px 6px 14px; border-radius:14px; }
  .game-box.game-box button:is(.a-b,.am-b,.b-b,.bg-b,.c-b,.cb-b,.cf-b,.ch-b,.ce-b,.cp-b,.cs-b,.cu-b,.d-b,.dk-b,.dp-b,.dr-b,.em-b,.f-b,.fg-b,.fm-b,.fo-b,.g-b,.gh-b,.gn-b,.gr-b,.h-b,.hm-b,.ht-b,.i-b,.is-b,.j-b,.k-b,.kk-b,.kt-b,.l-b,.ld-b,.lp-b,.m-b,.md-b,.mj-b,.mo-b,.n-b,.nb-b,.o-b,.p-b,.pf-b,.pr-b,.q-b,.r-b,.rm-b,.rv-b,.s-b,.s9-b,.sk-b,.sp-b,.st-b,.t-b,.tn-b,.u-b,.w-b,.ws-b,.x-b,.xq-b,.y-b,.z-b,.btn,.bl-btn,.bl-pick,.dc-opt,.td-btn,.td-opt,.hd-mode,.hd-level,.lb-mode,.lb-level,.rk-mode,.rk-level,.su-mode,.su-level,.vb-mode,.vb-level),
  .game-box.game-box :is(.ls-options,.pr-options,.tt-options,.pd-options,.cd-options,.bd-options,.od-row,.du-row) button {
    box-sizing:border-box; min-height:46px; min-width:44px; font-size:14px; line-height:1.2;
    padding:10px 12px; border-radius:10px; touch-action:manipulation;
  }
  .game-box.game-box button:focus-visible { outline:3px solid #ffcd87; outline-offset:-3px; }
  .game-box.game-box :is(.s9-b,.s-b,.m-b,.n-b,.d-b,.ch-b,.am-b,.f-b,.rv-b)[aria-pressed="true"] { background:#e7bd8d; border-color:#f6d6b0; color:#302316; font-weight:700; }
  .game-box.game-box :is([class$="-msg"],[class$="-status"]) { font-size:14px; line-height:1.5; }
  .game-box.game-box :is([class$="-tip"],[class$="-hint"],[class$="-help"]) { font-size:12px; line-height:1.6; }
  .game-box.game-box :is(.ch-foot,.am-foot,.f-foot,.rv-foot,.n-foot,.d-foot,.s-actions,.s9-foot) { gap:8px; }
  .game-box.game-box :is(.ch-foot,.am-foot,.rv-foot,.n-foot) button { flex:1 1 auto; }
  .game-box.game-box :is(.g-dots,.g-fleet,.g-mines,.g-flood,.g-sudoku,.g-sudoku9) { width:100%; min-width:0; }

  /* Keep boards close to the screen edges, with distinct pieces and legal moves. */
  .game-box.game-box :is(.g-chess .ch-wrap,.g-amazons .am-stage) { width:calc(100% - 6px); margin-left:auto; margin-right:auto; }
  .game-box.game-box .g-chess .ch-piece { width:90%; height:90%; stroke-width:1.9; }
  .game-box.game-box .g-amazons .am-q { width:85%; height:85%; }
  .game-box.game-box .g-chess .ch-sq.sel,
  .game-box.game-box .g-amazons .am-cell.is-sel { box-shadow:inset 0 0 0 3px #7f3f1d,inset 0 0 0 100px #ffd47660; }
  .game-box.game-box .g-chess .ch-sq.go { background-image:radial-gradient(circle,#47311c 0 21%,#fff4d5 22% 26%,transparent 27%); }
  .game-box.game-box .g-amazons .am-cell.is-go::after { width:28%; height:28%; left:36%; top:36%; background:#47311c; box-shadow:0 0 0 2px #fff4d5; }
  .game-box.game-box .g-amazons .am-cell.is-shot::after { width:34%; height:34%; left:33%; top:33%; border-width:3px; }
  .game-box.game-box :is(.ch-card,.am-card,.cf-card,.bg-card,.cb-card,.hm-card,.gn-card,.xq-card) { padding:12px; max-height:100%; overflow:auto; }
  .game-box.game-box :is(.ch-otext,.am-otext) { font-size:14px; line-height:1.45; }
  .game-box.game-box :is(.ch-overlay,.am-overlay) { padding:6px; }
  .game-box.game-box .g-fourrow .f-board { gap:4px; padding:6px; }
  .game-box.game-box .g-fourrow .f-drops { gap:4px; }
  .game-box.game-box .g-fourrow .f-drop { min-height:48px; font-size:20px; color:#ffe0a9; border:1px solid #9c7950; }
  .game-box.game-box .g-reversi .rv-board { padding:4px; gap:2px; }
  .game-box.game-box .g-reversi .rv-cell.is-legal::after { width:28%; height:28%; box-shadow:0 0 0 2px #394327; }
  .game-box.game-box .g-reversi .rv-disc { width:86%; height:86%; }

  /* Paper puzzles: clearer digits, box boundaries and generously sized keys. */
  .game-box.game-box .g-sudoku9 .s9-grid { width:100%; margin:0; border:2px solid #79694f; }
  .game-box.game-box :is(.s9-cell,.s-cell) { font-size:clamp(20px,6vw,28px); }
  .game-box.game-box .s9-cell.bx-r { border-right:2px solid #79694f!important; }
  .game-box.game-box .s9-cell.bx-b { border-bottom:2px solid #79694f!important; }
  .game-box.game-box :is(.s9-key,.s-key) { min-height:48px; font-size:21px; padding:6px 0; touch-action:manipulation; }
  .game-box.game-box .s9-pad { gap:5px; }
  .game-box.game-box .s-pad { grid-template-columns:repeat(6,minmax(0,1fr)); max-width:none; gap:5px; }
  .game-box.game-box .s-pad .s-key:last-child { grid-column:1/-1; font-size:16px; }
  .game-box.game-box .s-pad .s-key:last-child::after { content:' Erase'; font-size:14px; }

  /* Fleet: a full-width ocean on a phone, readable hits/misses and ship previews. */
  .game-box.game-box .g-fleet .n-side { width:100%; max-width:440px; }
  .game-box.game-box .g-fleet .n-grid { width:100%; max-width:none; padding:4px; gap:2px; background:#18232c; border-color:#7b8b93; }
  .game-box.game-box .g-fleet .n-cell { font-size:19px; border-radius:4px; }
  .game-box.game-box .g-fleet .n-cell.sea { background:#30414e; box-shadow:inset 0 0 0 1px #72838a80; }
  .game-box.game-box .g-fleet .n-cell.ship { background:#d9c29a; box-shadow:inset 0 2px #fff3d3,inset 0 -3px #9d815b; }
  .game-box.game-box .g-fleet .n-cell.miss { background:#202c35; color:#fff3da; }
  .game-box.game-box .g-fleet .n-cell.ghost { background:#b3caac; outline:2px solid #e9f3d3; outline-offset:-2px; }
  .game-box.game-box .g-fleet .n-cell.bad { background:#913f44; outline:2px solid #ffc3b8; outline-offset:-2px; }
  .game-box.game-box .g-fleet .n-cell.cursor { box-shadow:inset 0 0 0 3px #ffce84; }
  .game-box.game-box .g-fleet .n-cap { font-size:13px; letter-spacing:.04em; }

  /* Dots: widen the whole board and the line hit areas, not only the artwork. */
  .game-box.game-box .g-dots .d-board { max-width:440px; padding:10px; background:#f3ecdd; border:2px solid #a59479; grid-template-columns:repeat(4,28px minmax(0,1fr)) 28px!important; grid-template-rows:repeat(4,28px minmax(0,1fr)) 28px!important; }
  .game-box.game-box .g-dots .d-dot { width:11px; height:11px; background:#4e493d; }
  .game-box.game-box .g-dots .d-edge.h::before { height:7px; }
  .game-box.game-box .g-dots .d-edge.v::before { width:7px; }
  .game-box.game-box .g-dots .d-edge.is-open::before { background:#beb29b; }
  .game-box.game-box .g-dots .d-edge.is-you::before { background:#9f4e22; }
  .game-box.game-box .g-dots .d-edge.is-cpu::before { background:#70508c; }
  .game-box.game-box .g-dots .d-box.you { background:#ecc7a3; color:#683714; }
  .game-box.game-box .g-dots .d-box.cpu { background:#d8c9e3; color:#4d315d; }
  .game-box.game-box .g-dots .d-box { font-size:16px; border-radius:6px; }

  .game-box.game-box .g-flood .f-picks { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
  .game-box.game-box .g-flood .f-pick { width:100%; height:50px; font-size:22px; border:2px solid #f2e8d199; }
  .game-box.game-box .g-flood .f-grid { padding:4px; }
  .game-box.game-box .g-flood .f-cell { font-size:clamp(8px,2.4vw,11px); }
  .game-box.game-box .g-flood .f-cell.own { box-shadow:inset 0 0 0 2px #fff8e2; }

  /* Distinguish covered tiles from revealed clues. Enlarged fields scroll inside
     their frame; the rest of the page always stays at the phone's width. */
  .game-box.game-box .g-mines .m-board { background:#827662; border-color:#b4a180; }
  .game-box.game-box .g-mines .m-cell { background:#ded5c4; color:#292b28; box-shadow:inset 0 2px #fff8e8,inset 0 -2px #b6a78e; }
  .game-box.game-box .g-mines .m-cell.is-open { background:#262c2d; box-shadow:none; }
  .game-box.game-box .g-mines .m-cell.is-flag { background:#f0c77d; }
  .game-box.game-box .g-mines .m-cell.is-boom,.game-box.game-box .g-mines .m-cell.is-wrongflag { background:#a83235; color:white; box-shadow:none; }
  .game-box.game-box .g-mines .m-cell.n1 { color:#9bd0ff; }.game-box.game-box .g-mines .m-cell.n2 { color:#b9e4a6; }
  .game-box.game-box .g-mines .m-cell.n3 { color:#ffafa3; }.game-box.game-box .g-mines .m-cell.n4 { color:#d5bdff; }
  .game-box.game-box .g-mines .m-cell.n5,.game-box.game-box .g-mines .m-cell.n6 { color:#ffdc95; }
  .game-box.game-box .g-mines .m-cell.n7,.game-box.game-box .g-mines .m-cell.n8 { color:#faf5e8; }
  .game-box.game-box .g-mines .m-cell.is-cursor { outline:3px solid #f1a55e; outline-offset:-3px; }
  .game-box.game-box .g-mines .m-zoom { display:inline-flex; align-items:center; justify-content:center; }
  .game-box.game-box .g-mines .m-wrap.is-zoomed { display:block; overflow:auto; max-height:60dvh; border:2px solid #b4a180; border-radius:10px; overscroll-behavior:contain; }
  .game-box.game-box .g-mines .m-wrap.is-zoomed .m-board { width:calc(var(--mine-columns) * 46px + 6px); max-width:none; font-size:24px!important; border:0; border-radius:0; }
  .game-box.game-box .g-mines .m-zoom-help:not([hidden]) { display:block; font-size:13px; line-height:1.5; color:#edcd9c; margin:0; }

  .game-box.game-box :is(.tt-panel,.pd-panel) { padding:10px; border-radius:14px; }
  .game-box.game-box :is(.tt-status,.pd-status,.tt-selection,.pd-selection) { font-size:14px; }
  .game-box.game-box .g-patchduel .pd-rack { gap:5px; }
  .game-box.game-box .g-patchduel .pd-piece { min-height:72px; font-size:12px; }
  .game-box.game-box .g-patchduel .pd-mini { grid-template-columns:repeat(4,9px); grid-template-rows:repeat(4,9px); }
  .game-box.game-box .g-patchduel .pd-board { padding:2px; gap:2px; }
  .game-box.game-box .g-patchduel .pd-cell.pd-origin { outline:3px solid #fff1bb; outline-offset:-3px; }
}
@media (max-width:350px) {
  .game-box.game-box :is(.in-pad,.as-pad,.in-cluster,.as-cluster) { gap:4px; }
}