*{box-sizing:border-box}[hidden]{display:none!important}html:has(.certain-page){height:100%;overflow:hidden}body.certain-page{height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}.certain-page>.shell{height:100%;padding:0 max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column}.certain-page .site-header{flex:none;min-height:36px;padding:3px 0;gap:4px 12px}.certain-page .site-brand{min-height:28px;font-size:10px}.certain-page .site-header-right{gap:8px}.certain-page .site-page-details{font-size:10px;gap:6px}.certain-page .site-header .site-nav{font-size:10px;gap:10px}.certain-page .site-nav a{min-height:28px}
.certain-page main{flex:1;min-height:0;display:flex;padding:8px 0}.certain-page main>section{flex:1;min-height:0}.certain-page button{font:12px/1.4 var(--sans);color:var(--ink);border:1px solid var(--line);background:var(--deep);min-width:44px;min-height:44px;padding:7px 14px;cursor:pointer;touch-action:manipulation}.certain-page button:hover{border-color:var(--gold)}.certain-page button:disabled{opacity:.5;cursor:default}.certain-page button.primary{background:var(--gold);border-color:var(--gold);color:var(--deep);font-weight:700}.certain-page .center-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:auto;text-align:center;padding:12px}.certain-page h1{font:700 clamp(36px,7vh,64px)/1.1 var(--sans);letter-spacing:-.04em;margin:0}.certain-page h2{color:var(--gold);font:700 clamp(24px,5vh,40px)/1.2 var(--sans);margin:0}.kicker{font:11px/1.5 Consolas,monospace;color:var(--gold);letter-spacing:.06em;margin:0}.tagline{margin:0;font-size:15px;line-height:1.8}.small{font-size:11px;color:var(--muted);margin:0;line-height:1.6}.title-art{width:min(240px,65vw);height:100px}.center-screen>button{width:min(300px,100%)}
#play-screen{display:flex;flex-direction:column;gap:6px;overflow:hidden;max-width:900px;margin:0 auto}.hud{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--deep);border:1px solid var(--line);padding:6px 10px;font:11px/1.5 Consolas,monospace;color:var(--muted)}#timer{color:var(--gold);font-variant-numeric:tabular-nums}.arena-space{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;container-type:size}.arena{position:relative;width:min(100cqw,100cqh,560px);height:min(100cqw,100cqh,560px);background:var(--deep);border:1px solid var(--line);overflow:hidden;touch-action:manipulation}.arena canvas{width:100%;height:100%;display:block}#socket-controls{position:absolute;inset:0;pointer-events:none}#socket-controls button{position:absolute;pointer-events:auto;border:1px solid var(--gold);border-radius:50%;padding:0;min-width:0;min-height:0;width:12.2%;height:12.2%;transform:translate(-50%,-50%);font:bold clamp(14px,3.5vw,24px)/1 Arial,sans-serif;background:#173b45e6;color:var(--gold)}#socket-controls button:focus-visible{outline-offset:1px}.legend{font-size:10px;color:var(--muted);text-align:center;white-space:nowrap}#status{font-size:12px;line-height:1.5;min-height:36px;text-align:center;margin:0;white-space:pre-line;color:var(--muted)}.actions{display:flex;justify-content:center;gap:8px}.actions .primary{min-width:150px}#reveal{position:absolute;top:43%;left:0;right:0;pointer-events:none;text-align:center;font:bold clamp(20px,5vw,42px)/1.2 var(--sans);color:var(--gold);text-shadow:0 2px 18px #000}.tools{display:flex;flex:none;justify-content:center;gap:6px;padding:4px 0;border-top:1px solid var(--line)}.certain-page .tools button{font-size:10px;padding:4px 8px}.certain-page .footer-ad{flex:none;display:flex;justify-content:center;align-items:flex-start;min-height:50px;max-height:clamp(50px,16dvh,100px);overflow:hidden;margin:0}.footer-ad-content{flex:none;width:max-content;transform-origin:top center}.total{font:24px/1.5 Consolas,monospace;color:var(--gold);margin:0}#result-stats{margin:0;color:var(--muted)}.result-actions{width:min(330px,100%);display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-actions .primary{grid-column:1/-1}
.tutorial{flex:none;padding:8px 10px;border:1px solid var(--line);background:var(--deep)}.tutorial-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--gold)}.certain-page .tutorial-heading button{font-size:10px;min-height:28px;padding:2px 8px}.tutorial-progress{display:flex;gap:4px;font-size:9px}.tutorial-progress span{flex:1;text-align:center;padding:2px;border-bottom:2px solid var(--line);color:var(--muted)}.tutorial-progress .current{background:var(--gold);color:var(--deep)}.tutorial-progress .done{border-color:var(--gold)}.certain-page .tutorial h2{font-size:14px;margin:4px 0}.tutorial p{font-size:11px;line-height:1.5;margin:3px 0;color:var(--muted)}.certain-page .tutorial>button{min-height:32px;padding:3px 12px}.tutorial-focus{outline:2px solid var(--gold);outline-offset:-2px}
dialog{color:var(--ink);background:var(--panel);border:1px solid var(--gold);border-radius:6px;padding:22px;width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - clamp(50px,16dvh,100px) - 24px);overflow:auto;position:fixed;inset:12px 0 calc(clamp(50px,16dvh,100px) + 12px);margin:auto}dialog::backdrop{background:linear-gradient(to bottom,#020b12cc calc(100% - clamp(50px,16dvh,100px)),transparent calc(100% - clamp(50px,16dvh,100px)))}.certain-page dialog h2{font-size:22px;line-height:1.4}dialog p{font-size:13px;line-height:1.8;color:var(--muted)}.dialog-actions{display:flex;flex-wrap:wrap;gap:8px}.dialog-actions button{flex:1 1 180px}#menu-content{display:grid;gap:8px;margin:14px 0}#menu-content.practice-list{grid-template-columns:1fr 1fr}textarea{width:100%;height:200px;background:var(--deep);color:var(--ink);font:13px/1.6 Consolas,monospace;border:1px solid var(--line);margin:16px 0;padding:10px}
@media(max-width:700px){.certain-page .site-header-right{flex-basis:100%;gap:2px 8px}.certain-page .site-page-name .app-icon{width:18px;height:18px}.certain-page .tools{gap:3px}.certain-page .tools button{padding:3px 5px}.hud{font-size:10px}.certain-page .tutorial{padding:5px 8px}.tutorial p{font-size:10px}}
@media(max-height:650px){.certain-page .center-screen{gap:8px}.title-art{height:65px}.certain-page .tutorial{padding:4px 8px}.tutorial p{margin:2px 0}.legend{font-size:9px}#status{font-size:11px;min-height:32px}#play-screen{gap:4px}}
@media(orientation:landscape) and (max-height:500px){#play-screen{display:grid;grid-template-columns: minmax(180px,1fr) minmax(180px,1fr);grid-template-rows:auto 1fr auto auto;column-gap:14px;max-width:1000px;width:100%}.arena-space{grid-column:2;grid-row:1/5}.hud{grid-column:1;grid-row:1}.tutorial{grid-column:1;grid-row:2;overflow:auto}#status{grid-column:1;grid-row:3}.actions{grid-column:1;grid-row:4}.legend{display:none}.title-art{display:none}.certain-page .center-screen{gap:6px;padding:6px}.certain-page h1{font-size:32px}.tagline{font-size:12px}.certain-page .center-screen>button{min-height:36px}.certain-page .tools button{min-height:32px}#result-screen{gap:6px}.total{font-size:18px}.result-actions button{min-height:36px}.certain-page dialog{padding:14px}}

/* Preserve room for touch input, including the compact tutorial. */
body.certain-page>.shell{padding-inline:max(12px,env(safe-area-inset-left))}
.certain-page .center-screen{justify-content:safe center}
.actions button{flex:1;min-width:0;max-width:200px}.actions .primary{min-width:0}
.certain-page #socket-controls .guided-socket{width:max(12.2%,44px);height:max(12.2%,44px);outline:2px solid var(--gold);outline-offset:2px}
#play-screen:has(.tutorial:not([hidden])) .legend,#play-screen:has(.tutorial:not([hidden])) #status{display:none}
@media(max-width:360px){
body.certain-page .site-header{display:grid;grid-template-columns:auto 1fr;gap:0 6px}
body.certain-page .site-header-right{display:contents}
body.certain-page .site-page-details{font-size:9px;gap:4px;justify-content:flex-end}
body.certain-page .site-version{font-size:9px}
body.certain-page .site-brand{font-size:9px;min-height:24px;gap:6px}
body.certain-page .site-header .site-nav{grid-column:1/-1;justify-content:flex-end}
body.certain-page .site-header .site-nav a{min-height:24px}
body.certain-page .tools button{font-size:9px;min-height:40px}
.certain-page .total{font-size:18px}
.certain-page .center-screen{gap:7px;padding:8px}
}
#tutorial-feedback:empty{display:none}.tutorial #tutorial-feedback{color:var(--gold)}