:root{
  --bg:#2b2e22; --panel:#3a3d2e; --paper:#d9d2b6; --ink:#1d1f16; --line:#5a5d46;
  --text:#e4ddc2; --muted:#a39f84; --accent:#d9a441; --ok:#5f8a3a; --bad:#a8402c;
  --stencil:"Saira Stencil One","Impact",sans-serif;
  --body:"Barlow Condensed","Arial Narrow",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:18px;overscroll-behavior:none}
body{padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.5px);background-size:6px 6px}
.screen{display:none;height:100%;flex-direction:column;max-width:560px;margin:0 auto;padding:16px 0}
.screen.active{display:flex}
button{font:inherit;color:inherit;cursor:pointer;border-radius:2px}

#menu{justify-content:center;gap:14px}
.logo{font-family:var(--stencil);font-size:54px;text-align:center;color:var(--paper);letter-spacing:.04em;line-height:1}
.sub{text-align:center;color:var(--muted);margin:4px 0 18px;text-transform:uppercase;letter-spacing:.25em;font-size:15px}
.big{background:var(--paper);color:var(--ink);border:0;border-left:10px solid var(--accent);padding:20px 18px;
  font-family:var(--stencil);font-size:26px;text-align:left;display:flex;justify-content:space-between;align-items:baseline;
  box-shadow:3px 3px 0 rgba(0,0,0,.45)}
.big small{font-family:var(--body);font-size:17px;font-weight:600;color:#5b5a45;letter-spacing:.08em;text-transform:uppercase}
.big:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.45)}

#game{gap:10px}
.top{display:flex;justify-content:space-between;align-items:center;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:17px}
.top button{background:none;border:1px solid var(--line);padding:6px 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.timer{height:6px;background:#1d1f16}
.timer i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left}
.count{text-align:center;font-family:var(--stencil);font-size:34px;min-height:40px;color:var(--accent);font-variant-numeric:tabular-nums}

.card{perspective:1000px;flex:0 0 auto;width:100%;aspect-ratio:4/3;max-height:42vh}
.inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.card.flipped .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:var(--paper);border:6px solid var(--paper);box-shadow:3px 3px 0 rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.face img{width:100%;height:100%;object-fit:contain;background:#14150f}
.back{transform:rotateY(180deg);font-family:var(--stencil);font-size:70px;color:var(--ink);
  background:var(--accent);border-color:var(--accent)}

#choices{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;
  align-content:start;padding-bottom:8px;-webkit-overflow-scrolling:touch}
#choices.hidden{visibility:hidden}
.choice{background:var(--panel);border:1px solid var(--line);padding:12px 6px;
  font-weight:700;letter-spacing:.06em;font-size:21px;text-align:center;text-transform:uppercase}
.choice:active{background:#4a4e3a}
.choice.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.choice.bad{background:var(--bad);border-color:var(--bad);color:#fff}
.choice:disabled{cursor:default}
#msg{text-align:center;font-family:var(--stencil);font-size:22px;min-height:28px}
#next{display:none;background:var(--accent);color:var(--ink);border:0;padding:14px;font-family:var(--stencil);font-size:22px;
  box-shadow:3px 3px 0 rgba(0,0,0,.45)}

#end{justify-content:center;align-items:center;gap:14px;text-align:center}
#end .score{font-family:var(--stencil);font-size:72px;color:var(--accent)}
#end button{width:100%}

.streak{text-align:center;font-family:var(--stencil);font-size:17px;letter-spacing:.12em;color:var(--muted);margin-top:-4px}
.streak.hot{color:var(--accent);animation:pulse .5s ease-out}
@keyframes pulse{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.finalsub{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}