.connect-buttons,.connect-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.connect-buttons{margin-bottom:8px}.connect-buttons button{border:1px solid #587378;background:#314a51;border-radius:7px;min-height:36px;color:var(--accent);font-size:23px;padding:0}.connect-board{padding:14px;background:#264758;border:1px solid #628590;border-radius:12px}.connect-cell{aspect-ratio:1;border-radius:50%;background:#122631;border:2px solid #172e38;box-shadow:inset 0 3px 5px #0005;cursor:pointer}.connect-cell.p1{background:#a7ebcb;border-color:#6db493;box-shadow:inset 0 0 0 5px #bff2d24d}.connect-cell.p2{background:#edaa97;border-color:#b47e6d;box-shadow:inset 0 0 0 5px #ffcbb24d}.connect-cell.winning{outline:3px solid #ffe5a3;outline-offset:-4px}.checkers-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border:3px solid #7b8371;border-radius:5px;overflow:hidden}.checker-cell{aspect-ratio:1;min-width:0;border:0;padding:5px;background:#ccd4be;display:grid;place-items:center}.checker-cell.dark{background:#4a625a}.checker-cell.selected{background:#a08d67;box-shadow:inset 0 0 0 3px #f0dda9}.checker-cell.legal{background:#6e8e69}.checker-piece{width:86%;height:86%;border-radius:50%;display:grid;place-items:center;font-size:clamp(16px,4vw,30px);line-height:1;border:2px solid #347860;box-shadow:0 3px 2px #0004,inset 0 0 0 4px #ffffff30}.checker-piece.p1{background:#b7ebd0;color:#255a44}.checker-piece.p2{background:#edaa97;border-color:#9b645a;color:#733d34}.destination-dot{width:24%;height:24%;border-radius:50%;background:#e1f3c5}.picross-grid{display:grid;grid-template-columns:minmax(42px,.8fr) repeat(var(--picross-size),minmax(0,1fr));gap:1px;background:#465a60;border:1px solid #73838b;border-radius:4px;overflow:hidden}.picross-grid>div:first-child{background:#213039}.picross-clue{font:500 13px var(--display);color:#d2d1e7;background:#263640;display:flex;align-items:center;justify-content:center}.picross-clue.col{flex-direction:column;justify-content:end;min-height:60px;padding:5px 0;gap:2px}.picross-clue.row{padding:0 3px;white-space:nowrap}.picross-clue.complete{color:#a7ebcb;background:#304e49}.picross-cell{aspect-ratio:1;min-width:0;padding:0;border:0;background:#bac8c3;color:#45626b;font-size:clamp(15px,3.5vw,26px);line-height:1}.picross-cell.filled{background:#938cc9;box-shadow:inset 0 0 0 2px #b7a9ed}.picross-cell.crossed{background:#9fafae}.picross-cell:focus-visible{outline:2px solid #fff1b9;outline-offset:-3px;z-index:1}.sokoban-grid{display:grid;grid-template-columns:repeat(var(--soko-width),1fr);gap:3px;touch-action:none;background:#14292b;padding:6px;border:1px solid #567871;border-radius:9px;outline-offset:3px}.soko-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:4px;background:#294640;font:500 clamp(20px,6vw,40px) var(--display);color:#9dd2c0;min-width:0;line-height:1}.soko-cell.wall{background:repeating-linear-gradient(0deg,transparent 0 48%,#172c2b 48% 53%,transparent 53%),#4c645b;border:1px solid #718578;box-shadow:inset 0 2px #a4b6a333}.soko-cell.goal{background:#485a38;color:#ebdc96}.soko-cell.box{background:#a87f4b;color:#f8d6a1;border:2px solid #d2a96d;box-shadow:inset 0 0 0 3px #916739}.soko-cell.box.goal{background:#588563;border-color:#9ccf8c;color:#d3f5b8;box-shadow:inset 0 0 0 3px #497653}.soko-cell.player{color:#c8f8de;text-shadow:0 2px 0 #183a31}.puzzle-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}.mahjong-board{position:relative;width:100%;aspect-ratio:1.03;padding-bottom:5px}.mahjong-tile{position:absolute;width:11.3%;height:15%;border-radius:5px;border:1px solid #d8cfac;border-bottom:4px solid #7b966d;background:#f0ead4;box-shadow:2px 4px 2px #071a2290;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;color:#2d604d;transition:filter .12s}.mahjong-tile.blocked{filter:brightness(.7)}.mahjong-tile.selected,.mahjong-tile.hinted{outline:3px solid #f9d086;outline-offset:0;background:#fff1bc}.mahjong-tile small{font-size:7px;color:#647066;max-width:100%;overflow:hidden}.mahjong-glyph{font:500 clamp(21px,4vw,33px) serif;line-height:1.1}.mahjong-glyph.color-1{color:#ac5256}.mahjong-glyph.color-2{color:#516da3}.tetris-layout{display:grid;grid-template-columns:minmax(0,1fr) 95px;gap:15px;max-width:430px;margin:auto}.tetris-canvas{display:block;width:100%;height:auto;background:#12232b;border:1px solid #5a7075;border-radius:7px;touch-action:none}.tetris-side{font-size:9px;letter-spacing:1px;color:#a8b8b7}.tetris-next{width:100%;aspect-ratio:1;background:#162b32;border:1px solid #3b555f;border-radius:8px;margin-top:8px}.tetris-side p{font-size:10px;letter-spacing:0;line-height:1.9;color:var(--muted)}.tetris-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}.tetris-controls button,.flipper-buttons button{min-height:47px;border:1px solid #566d76;border-radius:8px;background:#293e48;color:var(--accent);font-size:17px;padding:6px;touch-action:none}.tetris-controls button:last-child{font-size:11px}.arcade-stage{max-width:420px;margin:auto;position:relative}.collection-canvas{display:block;width:100%;height:auto;border:1px solid #55727b;border-radius:10px;background:#12232b;touch-action:none}.arcade-hud{position:absolute;inset:1px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;background:#10232cdd;border-radius:9px;pointer-events:none;text-align:center}.arcade-hud h2{font:500 29px var(--display);color:var(--accent);margin:0 0 12px}.arcade-hud p{font-size:12px;color:#bdcecc;max-width:220px;margin:0}.flipper-buttons{display:flex;gap:12px;width:100%;max-width:420px}.flipper-buttons button{flex:1;font-size:13px;min-height:58px}.flipper-buttons button.pressed{background:#6d5574}.bubble-color-label{font-size:10px;color:var(--muted)}
@media(max-width:650px){.connect-board{padding:8px;gap:5px}.connect-buttons{gap:5px}.checker-cell{padding:3px}.checker-piece{border-width:1px;box-shadow:0 2px 1px #0004,inset 0 0 0 3px #ffffff30}.picross-clue{font-size:10px}.picross-clue.col{min-height:55px}.picross-grid{grid-template-columns:40px repeat(var(--picross-size),minmax(0,1fr))}.mahjong-tile small{font-size:5px}.mahjong-tile{border-bottom-width:3px;border-radius:3px}.mahjong-glyph{font-size:clamp(18px,6vw,25px)}.tetris-layout{grid-template-columns:minmax(0,1fr) 72px;gap:10px}.tetris-controls{gap:4px}.tetris-controls button{font-size:17px}.tetris-controls button:last-child{font-size:9px}.sokoban-grid{gap:2px}.soko-cell.box{border-width:1px}.arcade-hud h2{font-size:25px}.casual-title h1{overflow-wrap:anywhere}}
.picross-clue.row{gap:5px;font-variant-numeric:tabular-nums}
@media(max-width:650px){
  body:is([data-game=tetris],[data-game=pinball],[data-game=bubble]) .casual-main{padding-top:18px}
  body:is([data-game=tetris],[data-game=pinball],[data-game=bubble]) .casual-title{margin-bottom:14px}
  body:is([data-game=tetris],[data-game=pinball],[data-game=bubble]) .casual-title p{display:none}
  body:is([data-game=tetris],[data-game=pinball],[data-game=bubble]) .casual-title h1{font-size:32px;margin-top:8px}
  body:is([data-game=tetris],[data-game=pinball],[data-game=bubble]) .casual-toolbar{margin-bottom:10px}
  body:is([data-game=tetris],[data-game=pinball],[data-game=bubble]) .casual-controls{margin-top:14px}
  body[data-game=tetris] .tetris-layout{width:min(100%,max(205px,calc(50svh - 150px)));max-width:310px;grid-template-columns:minmax(0,1fr) 65px}
  body[data-game=tetris] .tetris-side p{font-size:8px}
  body[data-game=pinball] .arcade-stage{width:min(100%,max(180px,calc(60svh - 272px)));max-width:300px}
  body[data-game=bubble] .arcade-stage{width:min(100%,max(205px,calc(69svh - 285px)));max-width:340px}
}