/* Shared game layout: readable tablet boards, large touch targets, and a viewport-filling play view. */
.mini-page{max-width:1400px;padding-block:24px 52px}
.mini-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.mini-intro .eyebrow{color:var(--game-accent);margin-bottom:12px;font-size:10px}
.mini-intro h1{font-size:clamp(38px,6vw,72px);line-height:1.05;max-width:none;letter-spacing:-.015em}
.mini-intro p:not(.eyebrow){color:var(--muted);max-width:600px;margin:12px 0 0;font-size:16px}
.mini-intro>.text-link{white-space:nowrap;margin-bottom:5px}
.play-area{background:#151b22;border:1px solid #343b43;border-radius:12px;overflow:hidden}
.play-view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid #343b43}
.play-view-title{font-size:16px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-settings{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px;padding:16px 24px;border-bottom:1px solid #343b43;background:#19232c}
.game-settings label{display:flex;flex-direction:column;gap:7px;color:#bfc8d0;font-size:12px}
.game-settings select{font:600 16px Gabarito,system-ui;color:#f2f2e9;background:#101820;border:1px solid #657080;border-radius:7px;min-height:48px;padding:8px 34px 8px 12px;cursor:pointer;max-width:100%}
.game-settings select:focus-visible{outline:2px solid var(--game-accent);outline-offset:3px}
.settings-hint{flex:1;min-width:200px;font-size:12px;line-height:1.55;color:#aeb8c2;margin:0}
.game-bar{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:20px;padding:16px 24px;min-height:82px;border-bottom:1px solid #343b43}
.game-bar>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.game-bar>div:last-child{text-align:right}
.game-bar span{font-size:11px;color:var(--muted);letter-spacing:.03em}
.game-bar strong{font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.game-bar p{font-size:14px;text-align:center;color:#d8dfe5;margin:0;overflow-wrap:anywhere}
.game-stage{position:relative;min-height:200px;background:#101820;isolation:isolate}
.game-stage canvas{display:block;width:100%;height:auto;max-height:80svh;object-fit:contain;background:#101820;outline-offset:-4px;touch-action:none}
.game-stage canvas:focus-visible{outline:2px solid var(--game-accent)}
.game-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgb(13 19 26/.9);padding:22px;gap:14px;backdrop-filter:blur(2px);overflow:auto}
[hidden]{display:none!important}
.game-overlay h2{font-size:clamp(28px,4vw,46px);margin:0;letter-spacing:-.04em;line-height:1.15}
.overlay-eyebrow{color:var(--game-accent);font-size:10px;letter-spacing:.15em;margin:0}
.game-overlay>p:not(.overlay-eyebrow){font-size:15px;line-height:1.55;max-width:440px;margin:0;color:#bfc8d0}
.game-button{border:0;border-radius:8px;padding:14px 24px;min-height:56px;background:var(--game-accent);color:#101419;font:700 16px Gabarito,system-ui;cursor:pointer;touch-action:manipulation}
.game-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-top:1px solid #343b43}
.touch-controls{display:flex;gap:10px;margin-right:auto;align-items:center;flex-wrap:wrap}
.touch-controls:empty{display:none}
.touch-controls button,.quiet-button{font:600 15px Gabarito,system-ui;color:#edf1f4;min-height:56px;border:1px solid #53606b;border-radius:8px;background:#202b35;padding:10px 16px;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.touch-controls button{min-width:60px;touch-action:none}
.touch-controls button:active,.touch-controls button[aria-pressed=true]{background:var(--game-accent);color:#101419}
.quiet-button:disabled{opacity:.4;cursor:default}
button:focus-visible{outline:3px solid var(--game-accent,var(--accent));outline-offset:3px}
.game-help{padding:0 24px;margin:2px 0 18px;font-size:13px;color:#aeb8c2;line-height:1.6}
.game-help span{white-space:nowrap}
.storage-note{padding:0 24px;font-size:12px;color:#ffd48a}
.more-mini{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:26px}
.more-mini>span{font-size:10px;letter-spacing:.13em;color:var(--muted)}
.more-mini a{font-size:14px;border-bottom:1px solid #65707e;padding-bottom:5px}
.dom-board{padding:24px;min-height:420px;display:grid;place-items:safe center;background:#101820;min-width:0}
.puzzle-grid{display:grid;gap:10px;width:min(100%,900px,calc(74svh * var(--board-ratio,1)));min-width:0}
.memory-grid{min-width:calc(var(--board-columns,4) * 44px + (var(--board-columns,4) - 1) * 10px)}
.memory-grid,.number-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.memory-card{aspect-ratio:1;min-width:44px;min-height:44px;border:1px solid #657080;border-radius:9px;background:#26333f;color:#a9b8c7;font:700 clamp(24px,5vw,54px) Gabarito,system-ui;cursor:pointer;transition:background .12s;touch-action:manipulation}
.memory-card span{display:block;font-size:12px}
.memory-card.face{background:#efb6dc;color:#18212b}
.memory-card.matched{background:#1c413a;color:#a4e5d5;border-color:#4c9988;cursor:default}
.number-tile{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(24px,6vw,64px);font-weight:750;border-radius:8px;background:#202c37;color:#b8c8d6;line-height:1}
.number-tile[data-value='2']{background:#eee8d5;color:#39352c}
.number-tile[data-value='4']{background:#e5d3aa;color:#39352c}
.number-tile[data-value='8']{background:#ecb77b;color:#30251a}
.number-tile[data-value='16']{background:#ec975f;color:#231c13}
.number-tile[data-value='32']{background:#f08664;color:#231c13}
.number-tile[data-value='64']{background:#e56045;color:#fff4e9}
.number-tile.high{background:#ffb020;color:#251e12;font-size:clamp(17px,4.5vw,48px)}
.mines-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-inline:auto}
.mine-cell{aspect-ratio:1;min-width:0;padding:0;border:1px solid #59717c;border-radius:5px;background:#263b44;color:#f3f6f8;font:700 clamp(16px,3vw,30px) Gabarito,system-ui;cursor:pointer;touch-action:manipulation}
.mine-cell.open{background:#15252d;border-color:#2d424c;cursor:default}
.mine-cell[data-number='1']{color:#88c9ff}
.mine-cell[data-number='2']{color:#9ce2b1}
.mine-cell[data-number='3']{color:#ffa38c}
.mine-cell.flagged{color:#ffb020}
.mine-cell.hit{background:#a3342d;color:#fff}
.mine-viewport{width:100%;max-width:100%;min-width:0;overflow:auto;overscroll-behavior:contain;padding:4px;scrollbar-color:#7d94a4 #19232c}
.mine-viewport.zoomed{align-items:start;justify-items:start}
.mine-viewport.zoomed .mine-cell{min-height:44px;min-width:44px;font-size:22px}
.connect-wrap{min-width:350px;width:min(100%,900px,calc(74svh * 1.1667));min-width:0}
.connect-controls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-bottom:12px}
.connect-controls button{min-width:0;min-height:56px;border:1px solid #577284;border-radius:7px;background:#223947;color:#ffb020;font:700 28px Gabarito,system-ui;cursor:pointer;touch-action:manipulation}
.connect-controls button:disabled{opacity:.4;cursor:default}
.connect-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;background:#284d66;padding:15px;border-radius:12px}
.connect-cell{aspect-ratio:1;border-radius:50%;background:#101820;box-shadow:inset 0 3px 0 #0b1014}
.connect-cell[data-player='1']{background:#ffb020;box-shadow:inset 0 -5px 0 #cf8110}
.connect-cell[data-player='2']{background:#87c6f5;box-shadow:inset 0 -5px 0 #5596c3}
.simon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.simon-pad{aspect-ratio:1;border:2px solid var(--pad);border-radius:12px;background:#1b2832;color:var(--pad);font:700 clamp(17px,2.4vw,26px) Gabarito,system-ui;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;touch-action:manipulation}
.simon-pad span{font-size:clamp(32px,5vw,58px);line-height:1}
.simon-pad.lit{background:var(--pad);color:#101419;box-shadow:0 0 0 4px rgb(255 255 255/.2)}
.simon-pad:disabled{cursor:default}
.reaction-wrap{width:min(100%,900px);text-align:center}
.reaction-target{width:100%;min-height:clamp(250px,40svh,540px);background:#253642;border:2px solid #536774;border-radius:12px;color:#d3e1eb;cursor:pointer;font:700 clamp(22px,4vw,44px) Gabarito,system-ui;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;touch-action:manipulation}
.reaction-target small{font-size:16px;font-weight:400}
.reaction-target.ready{background:#ffb020;color:#101419;border-color:#ffb020}
.reaction-rounds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;color:#b4c5d1;font-size:13px}
.reaction-rounds span{padding:7px 10px;border:1px solid #3c5666;border-radius:5px}
/* CSS play view works on iPad and iPhone, including browsers without a Fullscreen API. */
body.game-expanded{overflow:hidden;overscroll-behavior:none}
.play-area.is-expanded{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:100%;height:100vh;height:100dvh;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overscroll-behavior:none}
.play-area.is-expanded .game-settings,.play-area.is-expanded .game-help,.play-area.is-expanded .storage-note{display:none}
.play-area.is-expanded .play-view-toolbar{padding:8px 16px}
.play-area.is-expanded .game-bar{min-height:60px;padding:8px 20px}
.play-area.is-expanded .game-stage{min-height:0;min-width:0;overflow:hidden;container-type:size}
.play-area.is-expanded canvas{height:100%;max-height:none;width:100%;min-height:0}
.play-area.is-expanded .dom-board{height:100%;min-height:0;padding:12px;overflow:auto}
.play-area.is-expanded .puzzle-grid{width:min(100%,900px,calc((100cqh - 24px) * var(--board-ratio,1)))}
.play-area.is-expanded .memory-card{font-size:clamp(16px,8cqh,54px)}
.play-area.is-expanded .number-tile{font-size:clamp(20px,6cqh,64px)}
.play-area.is-expanded .number-tile.high{font-size:clamp(14px,4.5cqh,48px)}
.play-area.is-expanded .connect-wrap{min-width:350px;width:min(100%,900px,calc((100cqh - 108px) * 1.1667))}
.play-area.is-expanded .mine-viewport{max-height:100%;height:100%;display:grid;place-items:center;overflow:auto}
.play-area.is-expanded .mines-grid .mine-cell{font-size:clamp(12px,3.4cqh,30px)}
.play-area.is-expanded .mines-grid{width:min(100%,900px,calc(100cqh - 32px))}
.play-area.is-expanded .reaction-wrap{height:100%;display:flex;flex-direction:column;gap:12px;min-height:0}
.play-area.is-expanded .reaction-target{flex:1;min-height:100px}
.play-area.is-expanded .reaction-rounds{margin:0}
.play-area.is-expanded .game-toolbar{padding:10px 16px}
@media(hover:hover) and (pointer:fine){.game-button:hover{filter:brightness(1.08)}.quiet-button:hover:not(:disabled),.touch-controls button:hover{border-color:var(--game-accent)}}
@media(max-width:1100px){.mini-page.wrap{width:calc(100% - 32px)}.mini-intro h1{font-size:clamp(38px,5vw,58px)}.mini-intro{margin-bottom:20px}.dom-board{padding:20px}}
@media(max-width:767px){
 .mini-page{padding-block:16px 32px}.mini-page.wrap{width:calc(100% - 20px)}.mini-intro{display:block;margin-bottom:16px}.mini-intro>.text-link{display:inline-block;margin-top:12px;font-size:12px}.mini-intro h1{font-size:40px}.mini-intro p:not(.eyebrow){font-size:14px}.mini-intro .eyebrow{margin-bottom:9px}
 .play-view-toolbar{padding:10px 12px;gap:10px}.play-view-title{font-size:14px}.game-settings{padding:12px;gap:12px}.game-settings label{flex:1;min-width:130px}.settings-hint{flex-basis:100%;min-width:0}.game-bar{padding:12px;gap:8px;grid-template-columns:1fr 1.2fr 1fr;min-height:76px}.game-bar span{font-size:10px}.game-bar strong{font-size:23px}.game-bar p{font-size:12px;line-height:1.4}
 .game-overlay{gap:10px;padding:16px}.game-overlay>p:not(.overlay-eyebrow){font-size:13px}.game-overlay h2{font-size:30px}.game-toolbar{padding:12px;gap:10px}.touch-controls{width:100%;justify-content:center;margin-right:0;gap:8px}.touch-controls button{min-width:58px}.quiet-button{flex:1;padding-inline:12px;font-size:14px}.game-help{padding:0 14px;font-size:12px}
 .dom-board{padding:12px 10px;min-height:320px}.puzzle-grid{gap:7px}.memory-card span{font-size:10px}.memory-grid[style]{gap:5px}.connect-grid{gap:5px;padding:9px}.connect-controls{gap:4px;margin-bottom:8px}.connect-controls button{font-size:23px}.simon-grid{gap:10px}.reaction-rounds{gap:5px}.reaction-rounds span{font-size:12px;padding:6px 8px}.more-mini>span{display:none}.more-mini{justify-content:center}
 .play-area.is-expanded .game-bar{padding:6px 12px;min-height:58px}.play-area.is-expanded .game-toolbar{padding:8px 10px;gap:8px}.play-area.is-expanded .play-view-toolbar{padding:6px 10px}
}
@media(max-height:600px) and (orientation:landscape){
 .play-area.is-expanded{grid-template-rows:48px 46px minmax(0,1fr) 64px}.play-area.is-expanded .play-view-toolbar{padding:3px 12px}.play-area.is-expanded .play-view-toolbar .quiet-button{min-height:40px}.play-area.is-expanded .game-bar{padding:3px 12px;min-height:0}.play-area.is-expanded .game-bar strong{font-size:20px}.play-area.is-expanded .game-bar span{font-size:9px}.play-area.is-expanded .game-bar p{font-size:11px}.play-area.is-expanded .game-toolbar{padding:4px 12px;gap:8px;flex-wrap:nowrap}.play-area.is-expanded .touch-controls{width:auto;margin-right:auto;flex-wrap:nowrap;gap:6px}.play-area.is-expanded .touch-controls button{min-width:48px;min-height:52px;padding:5px 10px}.play-area.is-expanded .game-toolbar>.quiet-button{flex:0;min-height:52px;padding:6px 10px;font-size:12px}.play-area.is-expanded .dom-board{padding:8px}.play-area.is-expanded .game-overlay{padding:10px;gap:8px}.play-area.is-expanded .overlay-eyebrow{display:none}.play-area.is-expanded .game-overlay h2{font-size:25px}.play-area.is-expanded .game-overlay>p:not(.overlay-eyebrow){font-size:12px;line-height:1.3}.play-area.is-expanded .game-button{min-height:44px;padding:8px 16px}
}
@media(prefers-reduced-motion:reduce){.memory-card{transition:none}.game-overlay{backdrop-filter:none}}