/* Fonts are self-hosted: Aeonik 500 (card text, display), Geist Mono 400/500 (table labels, numbers). */
@font-face{font-family:Aeonik;font-weight:500;font-display:block;src:url(fonts/aeonik-500.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:400 500;font-display:block;src:url(fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-weight:400 500;font-display:block;src:url(fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* the table owns the whole screen: no scroll, no bounce, no pinch or double-tap zoom, no text selection */
html,body{margin:0;width:100%;height:100%;background:#000;overflow:hidden;overscroll-behavior:none;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{position:fixed;inset:0}
#safe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%;outline:none}
#hit{position:fixed;inset:0;pointer-events:none}
#hit .card,#again{position:absolute;pointer-events:auto;margin:0;padding:0;border:0;background:transparent;border-radius:12px;cursor:pointer;outline:none;touch-action:manipulation}
#hit .card[data-state=matched],#hit .card[data-state=face]{cursor:default}
#hit .card:focus-visible,#again:focus-visible{box-shadow:0 0 0 2px #efefef}
#again{display:none}
body.ended #again{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* loading + notices: a printed sheet on the dark table, same frame, ink and fonts as the cards */
.notice{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#030303;z-index:5;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);transition:opacity .32s linear}
.notice[hidden]{display:none}
.sheet{box-sizing:border-box;width:min(360px,calc(100vw - 48px));padding:28px 28px 24px;border-radius:16px;background:#080808;
  border:2px solid #333;box-shadow:inset 0 0 0 7px #080808,inset 0 0 0 9px #1d1d1d;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.sheet .mark{width:56px;height:auto}
.sheet .title{margin:0;font:500 24px/1.25 Aeonik,system-ui,sans-serif;color:#efefef}
.sheet .label{margin:0;font:500 13px/1.5 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;color:#a3a3a3}
.sheet a.act{text-decoration:none;display:inline-flex;align-items:center}
.sheet .act[hidden]{display:none}
.sheet .act{font:500 13px 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;color:#efefef;background:#111;border:2px solid #555;border-radius:10px;padding:12px 18px;min-height:44px;cursor:pointer}
.sheet .act:focus-visible{outline:2px solid #efefef;outline-offset:2px}
#loading .mark{animation:breathe 1.4s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.45}to{opacity:1}}
body.ready #loading{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){#loading .mark{animation:none}.notice{transition:none}}