.puzzle-scroll{overflow:auto;padding:18px;background:#e9eee8;border:1px solid var(--studio-line);border-radius:8px;margin-top:18px}.sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);width:min(100%,450px);min-width:279px;aspect-ratio:1;border:2px solid var(--studio-ink);margin:auto;background:var(--studio-ink);gap:1px}.sudoku-cell{min-width:0;min-height:0;padding:0;border:0;background:#fffefa;color:var(--studio-blue);font-size:clamp(18px,3vw,27px);font-weight:600;cursor:pointer;touch-action:manipulation}.sudoku-cell:nth-child(3n):not(:nth-child(9n)){border-right:2px solid var(--studio-ink)}.sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--studio-ink)}.sudoku-cell.given{color:var(--studio-ink);font-weight:850;background:#f0f2f5}.sudoku-cell.selected{background:#d4e0ff;outline:3px solid var(--studio-blue);outline-offset:-3px}.sudoku-cell.conflict{color:#ad2031;text-decoration:underline wavy}.sudoku-notes{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:3px}.sudoku-notes i{font-size:10px;font-style:normal;line-height:1.1}.sudoku-keypad{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;max-width:450px;margin:14px auto 0;min-width:279px}.sudoku-keypad button{min-height:44px;border:1px solid var(--studio-line);border-radius:5px;background:white;color:var(--studio-ink);font:inherit;font-weight:800;cursor:pointer}.mahjong-board{--tile-w:43px;--tile-h:55px;position:relative;width:560px;height:492px;margin:auto;background:#315c50;border-radius:8px}.mahjong-tile{position:absolute;left:calc(12px + var(--tile-x)*var(--tile-w) - var(--tile-z)*3px);top:calc(12px + var(--tile-y)*var(--tile-h) - var(--tile-z)*5px);z-index:calc(1 + var(--tile-z));width:var(--tile-w);height:var(--tile-h);border:1px solid #627a65;border-radius:4px;background:#fff9dd;box-shadow:3px 5px 0 #abc1a8;color:#214c3a;cursor:pointer;padding:4px;touch-action:manipulation}.mahjong-tile.blocked{background:#e1e5cf}.mahjong-tile.selected{outline:3px solid #ffd64f;outline-offset:0;z-index:6}.mahjong-tile.hinted{outline:3px dashed #ffd64f}.mahjong-tile:focus-visible{outline:3px solid #8ecbff;z-index:7}.tile-dots,.tile-bamboo{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-content:center;justify-content:center;width:100%;height:100%}.tile-dots i{width:7px;height:7px;border:2px solid #2f698f;border-radius:50%;justify-self:center}.tile-bamboo i{width:4px;height:9px;background:#246442;border-radius:2px;justify-self:center}.tile-character{font-size:21px;line-height:1.1}.tile-character b{display:block;color:#b83637;font-size:21px}.tile-honor{font-size:25px;color:#963d3e}.puzzle-scroll:has(.mahjong-board){background:#315c50}.classic-controls [aria-pressed=true]{background:#d4e0ff;color:var(--studio-ink)}
@media(max-width:760px),(max-height:500px){.puzzle-scroll{padding:8px}.sudoku-notes{padding:2px}.sudoku-notes i{font-size:8px}.classic-controls button{min-height:44px}.mahjong-board{margin:0}.puzzle-scroll:has(.mahjong-board){padding:10px}}
nav[data-variants]{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 6px}
nav[data-variants] a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border:1px solid var(--studio-line);border-radius:999px;text-decoration:none;color:var(--studio-ink);background:var(--studio-paper);font-size:13px;font-weight:700;text-transform:capitalize}
nav[data-variants] a[aria-current=page]{background:var(--studio-ink);color:white}
.studio-board-wrap>h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.055em;margin:10px 0}
.settings-trigger{margin-left:auto;min-height:44px;padding:10px 14px;border:1px solid var(--studio-line);border-radius:999px;background:var(--studio-paper);color:var(--studio-ink);font:inherit;font-weight:700}
.studio-settings{max-width:min(460px,90vw);border:1px solid var(--studio-line);border-radius:12px;padding:26px;background:var(--studio-paper);color:var(--studio-ink);line-height:1.5}
.studio-settings::backdrop{background:#14213d80}.studio-settings label{display:flex;align-items:center;gap:10px;min-height:46px}.studio-settings input{width:22px;height:22px}.studio-settings button{min-height:44px;padding:10px 16px;background:var(--studio-ink);color:white;border:0;border-radius:5px;margin:5px}.studio-settings [data-clear]{background:transparent;color:#a92835;border:1px solid currentColor}
.studio-hide-timer [data-timer]{display:none}.studio-reduce-motion *{transition:none!important;animation:none!important;scroll-behavior:auto!important}.studio-large .sudoku-grid,.studio-large .sudoku-keypad{min-width:450px}.studio-large .classic-board{--card-width:90px;--card-height:125px;--card-overlap:35px}.studio-high-contrast{--studio-ink:#071426;--studio-muted:#25334a;--studio-line:#667389}.studio-high-contrast .playing-card,.studio-high-contrast .sudoku-cell,.studio-high-contrast .mahjong-tile{border-color:#071426}.studio-high-contrast .mahjong-tile.blocked{background:#bcc6a9}.sudoku-cell.related:not(.selected){background:#edf2ff}.sudoku-cell.same-digit{background:#e1eaff;font-weight:850}
/* Must follow the unconditional .studio-large rule above: identical specificity, so cascade order decides. */
@media(max-width:760px),(max-height:500px){.studio-large .sudoku-grid,.studio-large .sudoku-keypad{min-width:279px}}
.mahjong-board{--tile-w:44px;zoom:min(1,calc((100vw - 60px)/560px))}
.mine-grid,.mine-grid .mine-cell,.mine-toolbar button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.studio-hide-timer [data-time]{display:none}
.studio-large .mahjong-board{--tile-w:52px;--tile-h:66px;width:660px;height:560px;zoom:min(1,calc((100vw - 60px)/660px))}

/* Minesweeper: give the nine-column beginner board the width it can use, while
   retaining a bounded scroller for the wider intermediate and expert boards. */
@media(max-width:760px),(max-height:500px){
  .mine-scroll{width:100%;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .mine-scroll .mine-grid{grid-template-columns:repeat(var(--mine-columns),28px)}
  .mine-grid .mine-cell{width:28px;min-width:28px;height:28px}
  .mine-grid[style*="--mine-columns:9"]{grid-template-columns:repeat(var(--mine-columns),36px)}
  .mine-grid[style*="--mine-columns:9"] .mine-cell{width:36px;min-width:36px;height:36px}
  .studio-large .mine-scroll .mine-grid{grid-template-columns:repeat(var(--mine-columns),36px)}
  .studio-large .mine-grid .mine-cell{width:36px;min-width:36px;height:36px}
}

/* Sudoku’s controls and weekly copy remain present; only excess chrome is tightened
   before the board on a phone. */
@media(max-width:760px){
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]){padding-top:14px;padding-bottom:48px}
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]) > .classic-all-games{margin-bottom:0}
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]) > h1{margin:4px 0 2px;font-size:clamp(30px,8.5vw,38px);line-height:.95}
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]) > nav[data-variants]{margin:2px 0 6px;gap:4px}
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]) > nav[data-variants] a{min-height:44px;padding-inline:10px}
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]) > [data-weekly-rhythm]{min-height:0;margin:4px 0 6px;font-size:12px;line-height:1.3}
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]) > [data-classic-root] > .classic-toolbar{padding-top:4px;gap:8px}
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]) > [data-classic-root] > .classic-notice{min-height:0;margin:6px 0 8px}
  .studio-board-wrap:has(> [data-classic-root][data-game="sudoku"]) > [data-classic-root] > .puzzle-scroll{margin-top:8px;padding:6px}
}

/* The smallest phones have ~284px of board width after page gutters. Keep all
   nine Sudoku columns and beginner mines visible instead of clipping the edge. */
@media(max-width:359px){
  .sudoku-grid,.sudoku-keypad,.studio-large .sudoku-grid,.studio-large .sudoku-keypad{min-width:0;width:100%}
  .mine-grid[style*="--mine-columns:9"],.studio-large .mine-grid[style*="--mine-columns:9"]{grid-template-columns:repeat(var(--mine-columns),31px)}
  .mine-grid[style*="--mine-columns:9"] .mine-cell,.studio-large .mine-grid[style*="--mine-columns:9"] .mine-cell{width:31px;min-width:31px;height:31px}
}