:root { color-scheme: dark; font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#070d23; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; min-height:100svh; overflow:hidden; background:radial-gradient(circle at 50% 0%,#223773 0,#0a1130 38%,#050819 100%); }
button { font:inherit; cursor:pointer; }
.app-shell { position:relative; width:min(100vw, 620px); height:100svh; margin:auto; overflow:hidden; isolation:isolate; }
#game { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.hud { position:absolute; z-index:3; inset:calc(env(safe-area-inset-top) + 12px) 14px auto; display:flex; align-items:start; justify-content:space-between; pointer-events:none; }
.score-card,.next-card { display:grid; gap:2px; padding:8px 12px; border:1px solid #7690df55; border-radius:13px; background:#0b1435a8; box-shadow:0 5px 20px #0005; backdrop-filter:blur(8px); }
.score-card span,.next-card span { color:#b6c9ff; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.score-card strong { font-size:18px; letter-spacing:.06em; }
.next-card { grid-template-columns:auto 23px; align-items:center; min-width:80px; }
.next-card span { grid-column:1 / -1; }.next-card i { grid-column:2; grid-row:1 / 3; width:21px; height:21px; border-radius:50%; box-shadow:inset -4px -4px 7px #0004,inset 4px 4px 6px #fff8; }
.icon-button { pointer-events:auto; border:1px solid #7690df77; color:#eaf0ff; width:42px; height:42px; border-radius:50%; background:#111d46cc; font-size:20px; }
.camera-panel { --quality:#ff3f50; position:absolute; z-index:4; right:13px; bottom:calc(env(safe-area-inset-bottom) + 15px); width:108px; aspect-ratio:.74; overflow:hidden; border:3px solid color-mix(in srgb, var(--quality), #fff 8%); border-radius:16px; background:#11162e; opacity:.41; box-shadow:0 0 0 1px #ffffff33,inset 0 0 15px #000; transition:border-color .22s ease, box-shadow .22s ease, opacity .22s ease; }
.camera-panel.quality-good { opacity:.63; box-shadow:0 0 18px color-mix(in srgb,var(--quality),transparent 55%),inset 0 0 15px #000; }
#camera,#cameraOverlay { position:absolute; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }.camera-panel video { filter:contrast(1.07) saturate(1.1); }.camera-copy { position:absolute; z-index:2; left:7px; right:7px; bottom:7px; display:flex; align-items:center; gap:4px; color:#fff; font-size:9px; font-weight:750; text-shadow:0 1px 3px #000; }.camera-copy span:last-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.camera-copy span:first-child { width:6px; height:6px; border-radius:50%; background:var(--quality); box-shadow:0 0 5px var(--quality); flex:none; }
.overlay { position:absolute; z-index:9; inset:0; display:grid; place-items:center; padding:24px; background:linear-gradient(#07102eb8,#070a1ad9); transition:opacity .35s,visibility .35s; }.overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }.intro-card { max-width:390px; text-align:center; }.eyebrow { color:#73eaf3; font-size:11px; font-weight:900; letter-spacing:.24em; }.intro-card h1 { margin:8px 0 15px; font-size:clamp(38px,11vw,58px); line-height:.93; letter-spacing:-.065em; }.intro-text { color:#d0daf8; line-height:1.48; }.primary-button { display:block; width:100%; margin:26px 0 10px; padding:15px 18px; border:0; border-radius:15px; color:#061127; background:linear-gradient(135deg,#70f6bd,#43c8ff); font-weight:900; box-shadow:0 9px 25px #35caaf4d; }.text-button { border:0; padding:7px; color:#b8c9ff; background:transparent; text-decoration:underline; font-size:14px; }.fine-print { color:#8e9cc6; font-size:11px; line-height:1.4; }
.hint { position:absolute; z-index:5; bottom:calc(env(safe-area-inset-bottom) + 18px); left:14px; max-width:calc(100% - 145px); padding:9px 11px; border-radius:11px; background:#0b1435b8; color:#f3f6ff; font-size:12px; font-weight:700; backdrop-filter:blur(7px); transition:opacity .2s; }.restart-button { position:absolute; z-index:6; left:50%; bottom:20%; transform:translateX(-50%); border:0; border-radius:14px; padding:14px 20px; background:#73eaf3; color:#061127; font-weight:900; }
@media (min-width:700px) { .app-shell { height:96svh; margin-top:2svh; border-radius:25px; box-shadow:0 22px 80px #0008; }.camera-panel { width:132px; }.hud { inset:17px 18px auto; } }