.flip-page .pub-layout{max-width:1260px;gap:9%;grid-template-columns:1fr 1.1fr}
.flip-page .pub-intro h1{font-size:clamp(82px,8vw,118px);line-height:1;margin:24px 0}
.flip-page .machine-top{gap:16px}.flip-page .mode-select{width:auto;max-width:calc(100% - 60px);font-size:12px;border:0;margin:0;padding-left:0}
.flip-page .stage{border:1px solid var(--line);border-radius:3px;max-height:49dvh;width:auto}
.flip-page #panel{inset:auto 12px 12px;gap:10px;border:1px solid var(--line);background:#171b13f5;padding:20px}
.flip-page #panel h2{font-size:31px}.flip-page #panel .eyebrow{font-size:9px;color:var(--gold)}
.flip-notes{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:10px 'Courier New',monospace;color:var(--muted)}#streak{color:var(--gold)}
.flip-history{display:flex;justify-content:space-between;list-style:none;padding:0;margin:12px 0;gap:8px}
.flip-history li{height:15px;width:15px;border:1px solid var(--line);border-radius:50%;font:11px/13px sans-serif;text-align:center;color:var(--night)}
.flip-history .current{border-color:var(--gold);outline:1px solid var(--line);outline-offset:3px}.flip-history .hit{background:var(--gold)}.flip-history .miss{color:#efb392;border-color:#efb392}
.meter-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);min-height:24px}.meter-label strong{color:var(--gold);font-weight:500}.meter-label output{font-variant-numeric:tabular-nums;color:var(--paper)}
.power-meter{height:14px;background:#302c21;position:relative;border:1px solid var(--line);margin-bottom:12px}
#charge{display:block;height:100%;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
#sweet{position:absolute;top:-4px;bottom:-4px;background:#c6a54a88;border:2px solid var(--gold)}
#flip{width:100%;min-height:54px;font:24px var(--serif);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:3px;box-shadow:0 4px #6a5426;padding:9px 18px}
#flip[aria-pressed=true]{background:var(--paper);transform:translateY(3px);box-shadow:0 1px #6a5426}.flip-page #status{font-size:12px;min-height:38px;margin:12px 0 0}
@media(max-width:900px){.flip-page .pub-layout{display:block;max-width:540px;padding-top:8px}.flip-page .pub-intro h1{font-size:38px;margin:0;letter-spacing:-1px}.flip-page .stage{max-height:42dvh}.flip-page #panel{padding:12px;gap:8px}.flip-page #panel h2{font-size:25px}.flip-page #panel .eyebrow{display:none}.flip-page .flip-notes{font-size:9px;margin-top:9px}.flip-page .flip-history{margin:9px 0}.flip-page #got-it{font-size:12px}}
@media(max-width:900px) and (max-height:760px){.flip-page .pub-intro h1{font-size:32px}.flip-page .stage{max-height:max(180px,calc(100dvh - 340px))}.flip-page .scoreboard{padding-block:4px}.flip-page #panel h2{font-size:22px}.flip-page #panel p{font-size:11px;line-height:1.4}.flip-page #panel{gap:7px;padding:10px}.flip-page #flip{min-height:48px;font-size:22px}.flip-page .flip-notes{margin-top:7px}.flip-page .flip-history{margin:7px 0}.flip-page .power-meter{margin-bottom:8px}.flip-page #status{margin-top:8px;font-size:11px}}
.flip-page .stage:has(#panel:not([hidden]) #share:not([hidden])){max-height:none;aspect-ratio:auto}.flip-page .stage:has(#panel:not([hidden]) #share:not([hidden])) canvas{display:none}.flip-page #panel:has(#share:not([hidden])){position:static;margin:12px;min-height:240px}
@media(prefers-reduced-motion:reduce){#flip[aria-pressed=true]{transform:none}}
@media(max-width:900px) and (max-height:760px){.flip-page .flip-notes{display:none}.flip-page .flip-history{margin:5px 0}.flip-page .stage{max-height:max(180px,calc(100dvh - 350px))}.flip-page #panel h2{font-size:20px}.flip-page #panel{inset:auto 6px 6px;padding:8px;gap:5px}}