.extra-grid{width:min(100%,390px);aspect-ratio:1;max-height:calc(100% - 65px);gap:6px;flex-shrink:1}.extra-grid .tile{font-size:22px;background:#34455b;color:#e8eddb;border-radius:6px}.extra-grid .tile.selected{outline:3px solid #e6d68b;outline-offset:-3px}.extra-grid .tile.done{opacity:.12}.extra-grid .tile.conflict{background:#ad546c;color:#fff}.extra-actions{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;width:100%;min-height:28px}.swatch{background:var(--swatch);border-radius:8px;border:2px solid #ffffff20;color:#2b3740;width:38px;height:36px;font-size:19px;font-weight:800}.grid-flood{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:3px}.grid-flood .tile{border-radius:3px;color:#283e42;font-size:19px}.grid-sokoban{grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:3px}.grid-sokoban .wall,.grid-maze .wall{background:#7383a0;color:transparent}.grid-sokoban .tile:not(.wall){color:#e6ca98;background:#27384a;font-size:27px}.grid-sokoban .goal{background:#687958!important}.grid-maze{width:min(100%,600px);aspect-ratio:15/11;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(11,1fr);gap:2px}.grid-maze .tile{border-radius:2px;font-size:19px;background:#172739;color:#dbe99e}.grid-maze .trail{background:#2d4b4f}.grid-nonogram{grid-template-columns:52px repeat(5,1fr);grid-template-rows:52px repeat(5,1fr)}.grid-nonogram .filled{background:#bba8dc}.clue{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;line-height:1.1;white-space:pre}.col-clue{text-align:center;display:block;align-self:end;padding-bottom:6px}.grid-sudoku{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:7px}.grid-sudoku .tile{font-size:32px;color:#d8e8a5}.grid-sudoku .fixed{background:#233243;color:#8494a7}.grid-sudoku .tile:nth-child(4n+2){border-right:3px solid #9a9cb0}.grid-sudoku .tile:nth-child(n+5):nth-child(-n+8){border-bottom:3px solid #9a9cb0}.grid-match{grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr)}.grid-match .jelly{background:var(--swatch);color:#283541;border-radius:11px;box-shadow:inset 0 -4px #0002}.grid-reversi{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:7px}.grid-reversi .tile{border-radius:50%;font-size:32px}.grid-reversi .light{background:#e3e8ca;box-shadow:inset 0 -5px #9aa885}.grid-reversi .dark{background:#17232f;box-shadow:inset 0 -5px #080e19;border:2px solid #617288}.code-history{width:min(100%,380px);flex:1;min-height:100px;overflow:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}.code-row{display:flex;align-items:center;gap:7px;font-size:11px;color:#9ca9b8}.code-row>b,.code-guess>b{display:flex;align-items:center;justify-content:center;background:#ffffff12;border-radius:50%;width:27px;height:27px;color:#263444;font-size:15px;flex-shrink:0}.code-guess{display:flex;gap:10px;min-height:35px}.code-guess>b{width:34px;height:34px;font-size:19px}.code-feedback{margin-left:auto;font-size:12px;white-space:nowrap}.grid-pipes{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:3px}.pipe svg{width:100%;height:100%;stroke:#6c879f;fill:#6c879f}.pipe path{stroke-width:9;stroke-linecap:round}.pipe.flowing svg{stroke:#9cd5ca;fill:#9cd5ca}.stroop-word{font-size:clamp(23px,4vw,44px);font-weight:900;letter-spacing:-.5px;padding:30px 0}.stroop-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,440px)}.stroop-answers button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;padding:16px 8px}.stroop-answers b{width:17px;height:17px;border-radius:50%;flex-shrink:0}.grid-moles{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:13px}.grid-moles .tile{background:radial-gradient(ellipse,#142c27,#405d47);border-radius:45%;font-size:48px;box-shadow:inset 0 6px #0003}.grid-numbers,.grid-knight{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr)}.math-problem{font-size:clamp(27px,5vw,52px);font-weight:800;margin:25px 0}.math-answers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(100%,470px)}.math-answers button{font-size:26px;position:relative;padding:22px 10px}.math-answers small{position:absolute;top:5px;left:8px;font-size:10px;opacity:.5}.grid-sum{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);aspect-ratio:6/4}.word-rescue{font-size:clamp(18px,2.5vw,28px);letter-spacing:2px;font-weight:800;text-align:center;max-width:100%;line-height:1.6}.rescue-lives{color:#e7a4b8;font-size:24px;letter-spacing:8px}.hangman-keyboard{display:grid;grid-template-columns:repeat(11,1fr);gap:6px;width:min(100%,580px)}.hangman-keyboard button{padding:10px 3px;min-height:36px}.hangman-keyboard button:disabled{opacity:.2}.grid-wordsearch,.grid-queens,.grid-ships{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:3px}.grid-wordsearch .tile{font-size:19px}.grid-wordsearch .found{background:#6e8e6b;color:#f4efce}.word-found{text-decoration:line-through;color:#b2d796}.grid-queens .tile{font-size:30px;background:#5c687d;color:#eaddbb}.grid-queens .checker{background:#2e3d53}.grid-knight .visited{background:#435968}.grid-knight .available{background:#728964;color:#e6f4be}.grid-knight .tile{font-size:23px}.grid-peg{grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:5px}.grid-peg .tile{border-radius:50%;color:#d8db9b;font-size:31px}.hanoi-poles{display:flex;align-items:stretch;gap:12px;width:min(100%,620px);height:260px}.hanoi-pole{flex:1;position:relative;background:#ffffff06;border-radius:12px;min-width:0}.hanoi-pole.selected{outline:2px solid #cbdca3}.hanoi-rod{position:absolute;width:5px;height:180px;left:calc(50% - 2px);bottom:39px;background:#7e8da0;border-radius:3px}.hanoi-disks{position:absolute;inset:20px 0 38px;display:flex;flex-direction:column-reverse;align-items:center;gap:5px}.hanoi-disks b{display:block;height:28px;border-radius:5px;color:#273541;font-size:16px;line-height:28px;z-index:1}.hanoi-pole small{position:absolute;bottom:12px;left:0;right:0;color:#c3cbbd}.nim-pile{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(100%,400px);padding:30px 0}.nim-pile span{font-size:50px;line-height:1;color:#e0c49d}.grid-boxes{grid-template-columns:10px 1fr 10px 1fr 10px 1fr 10px;grid-template-rows:10px 1fr 10px 1fr 10px 1fr 10px;gap:0;max-width:360px}.dot{width:10px;height:10px;border-radius:50%;background:#d6e3c7;z-index:1}.box-edge{padding:0;background:#ffffff18;border-radius:5px}.box-edge.horizontal{height:10px;margin:0 1px}.box-edge.vertical{width:10px;margin:1px 0}.box-edge:hover{background:#9fb690}.box-edge.yours{background:#bcdb9e}.box-edge.theirs{background:#bfa6df}.box-owner{margin:5px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:30px}.box-owner.yours{background:#b3d49433;color:#bbdc9c}.box-owner.theirs{background:#c6acdf33;color:#bba4e0}.grid-ships .tile{font-size:20px;background:#294b63}.grid-ships .hit{background:#c199a8;color:#fff1d2}.binary-readout{display:flex;gap:40px;align-items:center;margin:15px 0}.binary-readout span{display:flex;flex-direction:column;text-align:center;gap:8px;font-size:10px;color:#a5b6c5}.binary-readout b{font-size:42px;color:#d5e5ae}.binary-switches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;width:min(100%,560px)}.binary-switches button{display:flex;flex-direction:column;gap:12px;align-items:center;padding:14px 7px}.binary-switches b{font-size:29px}.binary-switches small{font-size:10px}.grid-rows{grid-template-columns:repeat(3,1fr) 35px;grid-template-rows:repeat(3,1fr) 35px}.grid-rows .tile{font-size:32px;background:#998bb8;color:#f5f0d6}.grid-rows .board-action{padding:0;font-size:24px}.grid-odd .tile{font-size:31px;color:#dedbc2;background:#34455b}
@media(max-width:580px){.extra-grid{max-height:calc(100% - 64px);gap:4px}.swatch{width:34px;height:34px;font-size:17px}.extra-actions{gap:5px}.extra-actions .board-action{font-size:10px;padding:8px}.grid-maze{gap:1px}.grid-maze .tile{font-size:13px}.grid-flood{gap:2px}.grid-sokoban{gap:2px}.grid-sokoban .tile:not(.wall){font-size:23px}.grid-nonogram{grid-template-columns:36px repeat(5,1fr);grid-template-rows:36px repeat(5,1fr)}.clue{font-size:11px}.grid-sudoku .tile{font-size:27px}.grid-match .jelly{font-size:17px;border-radius:7px}.grid-moles .tile{font-size:38px}.grid-queens .tile{font-size:25px}.grid-wordsearch .tile{font-size:16px}.grid-wordsearch,.grid-queens,.grid-ships{gap:2px}.grid-peg .tile{font-size:26px}.grid-boxes{gap:0}.stroop-answers button{font-size:9px;padding:16px 5px}.hangman-keyboard{grid-template-columns:repeat(8,1fr);gap:4px}.hangman-keyboard button{font-size:12px;padding:7px 3px;min-height:33px}.hanoi-poles{height:235px;gap:7px}.hanoi-rod{height:155px}.hanoi-disks b{height:25px;font-size:13px;line-height:25px}.binary-switches{grid-template-columns:repeat(4,1fr)}.binary-switches button{padding:9px;gap:4px}.binary-switches b{font-size:23px}.binary-readout{margin:4px 0}.binary-readout b{font-size:34px}.grid-odd .tile{font-size:24px}.code-feedback{font-size:10px}.code-row{gap:5px}.code-row>b{width:24px;height:24px}.grid-sum .tile{font-size:23px}.grid-pipes{gap:2px}}
@media(max-width:580px){#stage[data-game="blocks"] canvas{object-fit:cover}.grid-nonogram .clue:not(.col-clue){letter-spacing:2px}}
.code-history{flex:0 1 auto;min-height:0;max-height:65%;justify-content:center}
@media(max-width:580px){.math-answers{gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}.math-answers button{font-size:23px;padding:19px 4px}.math-answers small{left:5px}}
.grid-peg .tile{min-height:0;line-height:1}@media(max-width:580px){.nim-pile{padding:12px 0;gap:6px}.nim-pile span{font-size:36px}}