:root{--bg: #0b1020;--accent: #4fd1c5;--accent-strong: #38b2ac;--text: #e8eef5;--muted: #9aa7b8;--danger: #f56565;--brand-primary: #a855f7;--brand-secondary: #3b82f6;--brand-gradient: linear-gradient( 100deg, var(--brand-primary), var(--brand-secondary) );font-family:Inter,Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;touch-action:none}#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#05070f}#game-canvas{display:block;background:#0b1020;box-shadow:0 0 60px #0009}#camera-feed{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;top:0;left:0}#debug-canvas{position:absolute;right:12px;bottom:12px;width:240px;height:180px;border:1px solid rgba(255,255,255,.2);border-radius:8px;display:none;transform:scaleX(-1);pointer-events:none;z-index:20}#debug-canvas.visible{display:block}#ui-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10}.overlay{pointer-events:auto;width:min(92vw,560px);max-height:92vh;overflow-y:auto;background:#0c1222eb;border:1px solid rgba(79,209,197,.25);border-radius:18px;padding:32px 40px;text-align:center;box-shadow:0 20px 60px #0000008c;backdrop-filter:blur(6px)}.overlay h1{margin:0 0 8px;font-size:2.4rem;letter-spacing:.5px;font-family:Orbitron,Segoe UI,sans-serif;font-weight:800}.overlay.start.poop{border-color:#a0522d59;background:radial-gradient(130% 120% at 50% -10%,#a0522d2e,#0c1222eb 55%),#0c1222eb}.overlay.start.poop .poop-hero{margin:0 auto 4px;line-height:0;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}.overlay.start.poop .brand-title{background:linear-gradient(100deg,#c4a574,sienna);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.mode-card .mode-emoji.poop-preview{font-size:inherit;line-height:0;display:flex;align-items:center;justify-content:center}.mode-card .mode-emoji.poop-preview svg{display:block}.overlay.start{border-color:#a855f759;background:radial-gradient(130% 120% at 50% -10%,#a855f72e,#0c1222eb 55%),#0c1222eb}.brand-header{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:6px}.brand-lockup{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}.brand-logo{display:inline-flex;color:var(--brand-primary);filter:drop-shadow(0 0 10px rgba(168,85,247,.6))}.brand-logo svg{width:36px;height:36px}.brand-name{font-family:Orbitron,Segoe UI,sans-serif;font-weight:900;font-size:1.7rem;letter-spacing:4px;text-transform:uppercase;color:#fff}.brand-badge{display:inline-block;padding:6px 16px;margin:0 auto 22px;border:1px solid rgba(168,85,247,.5);border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#d6bcfa;background:#a855f714}.brand-title{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.hub-back{display:inline-block;margin-bottom:14px;font-size:.88rem;font-weight:500;color:var(--muted);text-decoration:none;pointer-events:auto}.hub-back:hover{color:var(--brand-primary)}.brand-credit{display:inline-block;margin-top:22px;font-size:.85rem;color:var(--muted);text-decoration:none;pointer-events:auto}.brand-credit strong{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700}.brand-credit:hover{color:var(--text)}.overlay h2{margin:0 0 18px;font-size:1.8rem}.overlay p{color:var(--muted);line-height:1.6;margin:10px 0}.overlay .instructions{text-align:left;margin:22px auto;max-width:420px;display:grid;gap:12px}.instructions .step{display:flex;align-items:center;gap:14px;color:var(--text)}.instructions .step .num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#04221f;font-weight:700;display:flex;align-items:center;justify-content:center}button.primary{margin-top:18px;padding:14px 34px;font-size:1.1rem;font-weight:600;color:#04221f;background:var(--accent);border:none;border-radius:999px;cursor:pointer;transition:transform .12s ease,background .12s ease}button.primary:hover{background:var(--accent-strong);transform:translateY(-1px)}button.primary:active{transform:translateY(1px)}.overlay.error{border-color:#f5656580}.overlay.error h2{color:var(--danger)}.link-btn{pointer-events:auto;background:none;border:none;color:var(--muted);font-size:.95rem;text-decoration:underline;cursor:pointer;padding:6px}.link-btn:hover{color:var(--text)}.hidden{display:none!important}.calibrating .ring{width:64px;height:64px;margin:18px auto;border:5px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mode-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 14px}@media(max-width:720px){.mode-cards{grid-template-columns:1fr}}.mode-tag{margin:8px 0 0;font-size:.9rem;color:var(--muted)}.mode-card{position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 18px;background:#ffffff0a;border:2px solid rgba(255,255,255,.12);border-radius:16px;color:var(--text);cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease;overflow:hidden}.mode-card:hover{border-color:var(--brand-primary);transform:translateY(-2px)}.mode-card.active{border-color:var(--brand-primary);background:#a855f724}.mode-card .mode-emoji{font-size:2.4rem;line-height:1}.mode-card .mode-title{font-size:1.4rem;font-weight:700}.mode-card .mode-sub{font-size:.85rem;color:var(--muted)}.mode-card .progress-ring{position:absolute;inset:0;border-radius:14px;pointer-events:none;background:conic-gradient(var(--brand-primary) var(--p, 0deg),transparent var(--p, 0deg));opacity:.22;transition:background .05s linear}.menu-hint{font-size:.95rem}.menu-reticle{position:fixed;top:0;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid var(--accent);border-radius:50%;pointer-events:none;z-index:30;box-shadow:0 0 12px #4fd1c599}.go-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:22px 0 6px}.go-action{position:relative;overflow:hidden;pointer-events:auto;padding:14px 30px;font-size:1.05rem;font-weight:600;border-radius:999px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.go-action.primary{color:#04221f;background:var(--accent);border:2px solid transparent}.go-action.secondary{color:var(--text);background:#ffffff0a;border:2px solid rgba(255,255,255,.18)}.go-action:hover{transform:translateY(-2px);border-color:var(--brand-primary)}.go-action.active{border-color:var(--brand-primary)}.go-action .progress-ring{position:absolute;inset:0;border-radius:999px;pointer-events:none;background:conic-gradient(var(--brand-primary) var(--p, 0deg),transparent var(--p, 0deg));opacity:.28;transition:background .05s linear}.score-row{display:flex;justify-content:space-around;margin:18px 0;font-size:1.2rem}.score-row .label{color:var(--muted);font-size:.85rem;display:block}.score-row .value{font-size:1.8rem;font-weight:700;color:var(--accent)}