:root { --bg:#0f172a; --panel:#1e293b; --line:#334155; --text:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; color-scheme:dark; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:960px; margin:0 auto; padding:12px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.home { align-self:flex-start; color:var(--accent); text-decoration:none; }
h1 { margin:0; font-size:1.5rem; }
.hud, .bar { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; color:var(--muted); }
.hud b { color:var(--text); }
button { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 12px; cursor:pointer; }
button:hover { border-color:var(--accent); }
.pics { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
canvas { width:100%; aspect-ratio:4 / 3; border-radius:8px; background:#fff; touch-action:manipulation; cursor:crosshair; display:block; }
@media (max-width:700px) { .pics { grid-template-columns:1fr; } }
#msg { margin:0; min-height:1.4em; color:#f87171; font-weight:600; }
#overlay { position:fixed; inset:0; background:rgba(11,18,32,.8); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; }
#overlay[hidden] { display:none; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 26px; text-align:center; }
.card h2 { margin:0 0 6px; } .card p { margin:0 0 12px; color:var(--muted); }
#next { background:var(--accent); color:#0b1220; font-weight:700; border:0; padding:8px 22px; }