.match-page{--mono:'Courier New',monospace}
.match-page .pub-layout{max-width:1440px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:7%;padding:38px 5% 30px}
.match-page .pub-intro{padding-top:17px}.match-page .back{font-size:10px;font-weight:700;letter-spacing:1.8px}
.match-page .pub-intro h1{font-size:clamp(68px,6.8vw,100px);line-height:.99;letter-spacing:-4px;margin:24px 0 22px}
.match-page .lede{font:17px/1.6 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--muted)}
.match-page .rules{list-style:none;counter-reset:rule;padding:0;gap:13px;margin:28px 0 32px;font-size:14px}
.match-page .rules li{counter-increment:rule}.match-page .rules li::before{content:'0' counter(rule);color:var(--gold);font:10px var(--mono);margin-right:23px}
.match-page .record{max-width:360px;margin-top:27px}.match-page .fine-print{max-width:360px}.match-page .record strong{font-size:36px}
.match-page .machine-top{border:0;min-height:48px;gap:14px}.match-page .mode-select{width:auto;max-width:calc(100% - 70px);font-size:12px;padding:10px 14px;margin:0;border-radius:4px}
.match-page .scoreboard{align-items:center;padding:23px 0 12px;max-width:460px;margin:auto}
.match-page .scoreboard>div{text-align:center;min-width:80px}.match-page .scoreboard strong{font-size:27px}
.match-page .scoreboard>div:nth-child(2) strong{font-size:60px;letter-spacing:-2px}.match-page .scoreboard small{font-size:9px}
.match-page .stage{background:none;overflow:visible;border-radius:0;max-width:460px;aspect-ratio:1;margin-top:12px;isolation:isolate}
.match-page .stage::before{content:'';position:absolute;inset:-7%;border:1px dashed #c6a54a26;border-radius:50%;pointer-events:none;z-index:-1}
.match-page .memory-grid{inset:0;gap:14px}
.match-page .memory-grid button{position:relative;border:0;background:none;box-shadow:none;padding:0;min-height:44px;aspect-ratio:1;border-radius:50%;perspective:600px;opacity:1;transition:transform .15s}
.match-page .memory-grid button:enabled:hover{transform:translateY(-3px)}.match-page .memory-grid button:enabled:active{transform:translateY(2px)}
.cap-turner{display:block;position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.65,.3,1)}
.cap-back,.cap-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.cap-face{transform:rotateY(180deg)}
/* WebKit can paint SVG descendants through a hidden 3D backface. Hide the inactive side explicitly. */
.cap-back,.cap-face{transition:visibility 0s .15s}.cap-face{visibility:hidden}
.open .cap-back,.matched .cap-back{visibility:hidden}.open .cap-face,.matched .cap-face{visibility:visible}
.cap-turner svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 0 #6a542666)}.match-page .open .cap-turner,.match-page .matched .cap-turner{transform:rotateY(180deg)}
.match-page .memory-grid small{position:absolute;top:69%;left:0;right:0;font:600 8px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.3px;color:#493923;margin:0}
.match-page .matched .cap-face::after{content:'✓';position:absolute;right:3%;top:2%;width:21px;height:21px;background:var(--gold);border:2px solid var(--night);border-radius:50%;color:var(--night);font:bold 12px/17px Arial;text-align:center}
.match-page .memory-grid button.matched{background:none;opacity:.7}.match-page .memory-grid button:focus-visible{outline:2px solid #e7c147;outline-offset:3px}
.match-page #panel,.match-page #paused{inset:9% 0;background:#0d0c0af7;border:1px solid var(--line);border-radius:4px;padding:25px;gap:15px;box-shadow:0 15px 40px #0005}
.match-page #panel h2,.match-page #paused h2{font-size:46px;color:var(--gold);letter-spacing:-2px}.match-page #panel p{font-size:14px}
.match-page .gold{border:1px solid #ac8c35;border-radius:4px;box-shadow:0 4px #6a5426;font:22px var(--serif);min-width:190px;transition:transform .1s,box-shadow .1s}
.match-page .gold:active{transform:translateY(3px);box-shadow:0 1px #6a5426}
.match-meter{display:flex;justify-content:space-between;gap:15px;max-width:460px;margin:22px auto 0;border-top:1px solid var(--line);padding-top:15px;font:10px var(--mono);color:var(--muted)}
.match-meter strong{color:var(--gold);font-weight:400}.match-page #status{font-size:12px;min-height:38px;margin:16px 0 0}.match-page #game-controls{margin:0}
.match-page .brand-signoff{font:14px var(--serif);color:var(--muted);margin-top:27px}
.match-page #panel:has(#share:not([hidden])){inset:0;min-height:100%;height:max-content}
@media(max-width:900px){.match-page .pub-layout{display:block;max-width:550px;padding:17px 5% 25px}.match-page .pub-intro{display:block;padding:0;text-align:center}.match-page .back{font-size:9px;min-height:30px;display:flex;letter-spacing:1px}.match-page .pub-intro h1{font-size:44px;letter-spacing:-1.5px;margin:0 0 5px}.match-page .lede{display:block;font-size:12px;margin:0 0 17px}.match-page .brand-signoff{display:none}.match-page .scoreboard{padding:8px 0 5px}.match-page .scoreboard>div:nth-child(2) strong{font-size:45px}.match-page .scoreboard strong{font-size:23px}.match-page .scoreboard small{font-size:8px}.match-page .stage{max-height:none;width:100%;max-width:min(100%,43dvh);margin-top:12px}.match-page .memory-grid{gap:9px}.match-page .memory-grid small{font-size:6px}.match-page #panel,.match-page #paused{padding:15px;gap:10px;inset:5% -3%}.match-page #panel h2,.match-page #paused h2{font-size:33px}.match-page #panel p{font-size:12px}.match-page #panel .eyebrow{font-size:8px}.match-page .gold{font-size:19px;min-width:165px;min-height:44px;padding:10px 18px}.match-meter{margin-top:20px;font-size:9px}.match-page #status{font-size:11px;margin-top:12px}.match-page .matched .cap-face::after{width:17px;height:17px;font-size:10px;line-height:13px}}
@media(max-width:350px){.match-page .pub-intro h1{font-size:38px}.match-page .memory-grid{gap:7px}.match-page #panel h2{font-size:29px}.match-page #panel p{font-size:11px}.match-page .memory-grid small{font-size:5.5px}.match-page .scoreboard>div{min-width:65px}}
@media(prefers-reduced-motion:reduce){.match-page .cap-turner,.match-page .memory-grid button{transition:none}.match-page .memory-grid button:enabled:hover{transform:none}}
@media(max-width:900px){.match-page .stage::before{inset:-2%}.match-page #panel:has(#share:not([hidden])){gap:8px}.match-page #panel:has(#share:not([hidden])) .eyebrow{display:none}}
/* Motif names are announced on flip and shown at readable size below the board. */
@media(max-width:900px){.match-page .memory-grid small{display:none}.match-page #status{font-size:13px}}