:root{--ink: #071419;--panel: rgba(8, 27, 34, .66);--panel-solid: rgba(8, 27, 34, .92);--edge: rgba(255, 214, 160, .24);--edge-strong: rgba(255, 214, 160, .5);--gold: #ffc861;--gold-deep: #e08a2b;--leaf: #a8e063;--leaf-deep: #4d7c22;--coral: #ff7a6b;--sky: #7dd3fc;--paper: #f6efe1;--muted: rgba(246, 239, 225, .6);--font-display: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--radius: 16px;--gutter: clamp(12px, 1.6vw, 28px)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:#12222a;overflow:hidden;font-family:var(--font-body);color:var(--paper);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}.hidden{display:none!important}#scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.bg-layer{position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;will-change:transform;transform:scale(1.12);backface-visibility:hidden}#bg-sky{background:radial-gradient(circle at 26% 14%,rgba(255,219,160,.52) 0%,rgba(255,190,116,.2) 18%,transparent 46%),radial-gradient(circle at 80% 10%,rgba(96,206,222,.26),transparent 40%),radial-gradient(ellipse 90% 55% at 50% 74%,rgba(52,120,126,.3),transparent 70%),linear-gradient(170deg,#1f4c56,#1a3844 36%,#142935 70%,#0e1d26)}#bg-far{opacity:.5;background:radial-gradient(ellipse 42% 30% at 10% 100%,#0c2430 0%,transparent 72%),radial-gradient(ellipse 52% 26% at 44% 102%,#0a1f2a 0%,transparent 70%),radial-gradient(ellipse 40% 32% at 84% 100%,#0c2430 0%,transparent 72%),radial-gradient(circle at 62% 22%,rgba(148,214,226,.09),transparent 30%)}#bg-mid{opacity:.72;background:radial-gradient(circle at 12% 6%,rgba(255,176,92,.3) 0%,transparent 9%),radial-gradient(circle at 33% 3%,rgba(255,142,88,.24) 0%,transparent 7%),radial-gradient(circle at 70% 5%,rgba(255,196,120,.24) 0%,transparent 8%),radial-gradient(circle at 89% 2%,rgba(255,158,96,.2) 0%,transparent 7%),radial-gradient(ellipse 60% 22% at 50% -4%,rgba(6,22,28,.9),transparent 70%)}#bg-near{opacity:.85;background:radial-gradient(ellipse 26% 58% at -4% 42%,#04101a 0%,rgba(4,16,26,.55) 46%,transparent 74%),radial-gradient(ellipse 26% 58% at 104% 56%,#04101a 0%,rgba(4,16,26,.55) 46%,transparent 74%),radial-gradient(ellipse 70% 22% at 50% 106%,rgba(3,12,18,.95),transparent 72%)}#floor-glow{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(132,214,206,.22) 0%,rgba(68,152,162,.08) 44%,transparent 100%)}#vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 82% 76% at 50% 46%,transparent 48%,rgba(2,10,14,.38) 88%,rgba(1,6,9,.6) 100%)}canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none}#game-canvas{background:transparent}body.menu-active #game-canvas{z-index:45}body.menu-active #ui-layer{opacity:0;transition:opacity .25s}#ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none;padding:var(--gutter)}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--gutter)}.panel{background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);padding:clamp(8px,.9vw,16px) clamp(12px,1.3vw,22px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 10px 30px #00000059,inset 0 1px #ffecc814;display:flex;flex-direction:column;gap:2px}.panel-status{align-items:flex-end}.stat-label{font-size:clamp(10px,.85vw,15px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.stat-value{font-family:var(--font-display);font-size:clamp(30px,3.4vw,66px);line-height:.95;letter-spacing:.01em;color:var(--paper);text-shadow:0 3px 0 rgba(0,0,0,.45);transition:transform .12s ease-out;display:inline-block}.stat-value.stat-sm{font-size:clamp(18px,1.7vw,32px)}.stat-gold{color:var(--gold)}.stat-sky{color:var(--sky)}.stat-foot{font-size:clamp(11px,.95vw,17px);color:var(--muted);letter-spacing:.04em}.stat-foot b{color:var(--paper)}.stat-row{display:flex;align-items:baseline;gap:clamp(6px,.7vw,12px)}.lives{display:flex;gap:clamp(4px,.45vw,9px);margin-bottom:2px}.life{width:clamp(13px,1.25vw,24px);height:clamp(13px,1.25vw,24px);border-radius:50%;display:block}.life.on{background:radial-gradient(circle at 34% 30%,#ffd9a0,var(--coral) 62%,#b23b31 100%);box-shadow:0 0 10px #ff7a6ba6}.life.off{background:#ffffff0f;border:1px solid rgba(255,255,255,.2)}.combo{font-size:clamp(11px,1vw,18px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .15s}.combo.is-combo{color:var(--leaf)}.combo.is-hot{color:var(--gold);animation:pulse .9s ease-in-out infinite}.quest-zone{position:absolute;top:clamp(74px,8.5vh,128px);left:50%;transform:translate(-50%);width:min(90vw,900px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.quest-banner{display:inline-flex;align-items:center;gap:clamp(8px,.9vw,16px);background:var(--panel);border:1px solid rgba(168,224,99,.4);border-radius:999px;padding:clamp(5px,.55vw,10px) clamp(14px,1.4vw,26px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 26px #00000059;max-width:100%}.quest-tag{font-size:clamp(9px,.8vw,14px);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--leaf);white-space:nowrap}.quest-text{font-family:var(--font-display);font-size:clamp(15px,1.7vw,32px);color:var(--paper);letter-spacing:.01em}.lesson{margin:0;font-size:clamp(12px,1.1vw,20px);color:var(--muted);text-shadow:0 2px 6px rgba(0,0,0,.7)}.feedback{font-size:clamp(14px,1.35vw,25px);font-weight:700;opacity:0;transition:opacity .2s;text-shadow:0 2px 8px rgba(0,0,0,.85)}.feedback.is-good{color:var(--leaf)}.feedback.is-bad{color:var(--coral)}.toast-warning{position:absolute;top:clamp(16px,2vh,30px);left:50%;transform:translate(-50%);background:#781e18d9;border:1px solid var(--coral);color:#ffe4e0;padding:8px 20px;border-radius:999px;font-weight:700;font-size:clamp(12px,1.1vw,19px);opacity:0;transition:opacity .5s}#camera-preview{position:absolute;right:var(--gutter);bottom:var(--gutter);width:min(240px,26vw);aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--radius);border:1px solid var(--edge-strong);background:#04121a;box-shadow:0 16px 40px #00000080;z-index:24;pointer-events:none}#video-feed{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:brightness(.7) contrast(1.05) saturate(.85)}#hand-preview-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:2}.preview-label{position:absolute;left:9px;bottom:7px;z-index:3;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}#loading-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:radial-gradient(ellipse at 50% 38%,#1c414b,#0b1a22 58%,#051016)}.lantern-spinner{width:54px;height:54px;border-radius:50%;margin-bottom:18px;border:4px solid rgba(255,200,97,.18);border-top-color:var(--gold);border-right-color:var(--gold-deep);animation:spin .9s linear infinite;box-shadow:0 0 30px #ffc86147}.loading-title{font-family:var(--font-display);font-size:clamp(22px,2.6vw,40px);margin:0;color:var(--paper)}#loading-text{margin:0;color:var(--gold);font-weight:600}.loading-note{margin-top:22px;font-size:13px;color:var(--muted)}#menu-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:var(--gutter);background:radial-gradient(ellipse at 50% 42%,#0c283185,#030c11db);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.menu-card{text-align:center;max-width:min(94vw,940px);display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.9vh,14px)}.menu-kicker{margin:0;font-size:clamp(11px,1vw,17px);font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--leaf)}.menu-title{margin:0;font-family:var(--font-display);font-size:clamp(44px,8vw,132px);line-height:.94;letter-spacing:.01em;background:linear-gradient(180deg,#fff3d0 0%,var(--gold) 42%,var(--gold-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}.menu-title.is-gameover{background:linear-gradient(180deg,#ffd9d2 0%,var(--coral) 44%,#a02a20 100%);-webkit-background-clip:text;background-clip:text}.menu-sub{margin:0 0 clamp(6px,1vh,16px);font-size:clamp(14px,1.5vw,26px);color:var(--muted);max-width:40ch}.mode-row{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,20px);justify-content:center;pointer-events:auto}.mode-btn{flex:1 1 260px;max-width:340px;display:flex;flex-direction:column;gap:5px;text-align:left;padding:clamp(12px,1.3vw,20px) clamp(14px,1.5vw,24px);border-radius:var(--radius);border:2px solid rgba(255,255,255,.16);background:#081b22b8;color:var(--paper);font-family:var(--font-body);cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}.mode-name{font-family:var(--font-display);font-size:clamp(17px,1.7vw,28px)}.mode-desc{font-size:clamp(11px,1vw,16px);color:var(--muted);line-height:1.35}.mode-btn.selected-mode{border-color:var(--leaf);background:#30541eb3;box-shadow:0 0 26px #a8e06352}.mode-btn.selected-mode .mode-desc{color:#f6efe1d1}.start-btn{margin-top:clamp(8px,1.2vh,20px);pointer-events:auto;cursor:pointer;font-family:var(--font-display);font-size:clamp(20px,2.4vw,42px);letter-spacing:.02em;color:#10240f;padding:clamp(12px,1.5vw,24px) clamp(34px,4.5vw,80px);border-radius:999px;border:none;background:linear-gradient(180deg,#d8f58a 0%,var(--leaf) 45%,var(--leaf-deep) 100%);box-shadow:0 12px 34px #4d7c2273,inset 0 2px #ffffff80;transition:transform .18s,box-shadow .18s,filter .18s}.menu-hint{margin:clamp(6px,1vh,14px) 0 0;font-size:clamp(12px,1.1vw,19px);color:var(--gold);animation:pulse 2s ease-in-out infinite}.virtual-hover{transform:scale(1.06);filter:brightness(1.2);border-color:var(--gold)!important;box-shadow:0 0 34px #ffc861a6!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.pop-in{animation:popIn .32s cubic-bezier(.175,.885,.32,1.275) forwards}@media (prefers-reduced-motion: reduce){.pop-in,.menu-hint,.combo.is-hot{animation:none}}