:root{--ww-sand: #e8c98f;--ww-ochre: #c98d3d;--ww-wood: #6f4528;--ww-wood-dark: #4a2c18;--ww-cream: #f3e0bd;--ww-red: #b23a2a;--ww-ink: #2b1c10;--ww-gold: #f2c14e;--font-west: Georgia, "Times New Roman", serif}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#1a1108;font-family:var(--font-west);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#game-root{position:fixed;top:0;right:0;bottom:0;left:0}#game-root canvas{display:block;cursor:none}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;font-family:var(--font-west)}.hud.hidden{display:none}.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:12px 16px;gap:12px;background:linear-gradient(to bottom,#140c05d9,#140c0500)}.hud-hearts{display:flex;gap:4px;font-size:34px;line-height:1;min-width:125px}.heart{display:inline-block;color:var(--ww-red);filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));transition:transform .15s ease,opacity .15s ease}.heart.lost{opacity:.16;transform:scale(.85);filter:grayscale(1)}.hud-hearts.shake{animation:heart-shake .26s ease}@keyframes heart-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.hud-score,.hud-target{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.hud-label{font-size:11px;letter-spacing:.22em;color:var(--ww-gold);text-shadow:0 1px 0 rgba(0,0,0,.6)}.hud-value{font-size:30px;line-height:1;font-weight:700;color:var(--ww-cream);text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 12px rgba(242,193,78,.25);font-variant-numeric:tabular-nums}.hud-level{position:absolute;top:12px;left:50%;transform:translate(-50%);padding:6px 18px;background:var(--ww-wood-dark);border:2px solid var(--ww-gold);border-radius:4px;color:var(--ww-gold);font-weight:700;letter-spacing:.18em;font-size:15px;text-shadow:0 1px 0 #000;box-shadow:0 3px #00000073;white-space:nowrap}.btn-mute{position:absolute;right:14px;bottom:14px;width:46px;height:46px;font-size:22px;background:var(--ww-wood-dark);border:2px solid var(--ww-gold);border-radius:8px;color:var(--ww-gold);cursor:pointer;pointer-events:auto;box-shadow:0 3px #00000073}.btn-mute:active{transform:translateY(2px)}.btn-menu{position:absolute;left:14px;bottom:14px;width:46px;height:46px;font-size:22px;background:var(--ww-wood-dark);border:2px solid var(--ww-gold);border-radius:8px;color:var(--ww-gold);cursor:pointer;pointer-events:auto;box-shadow:0 3px #00000073}.btn-menu:active{transform:translateY(2px)}.level-progress{position:absolute;bottom:38px;left:50%;transform:translate(-50%);width:min(60vw,560px);height:24px;pointer-events:none}.level-progress-track{position:relative;width:100%;height:100%;background:#140c05a6;border:2px solid var(--ww-gold);border-radius:6px;overflow:hidden;box-shadow:0 3px #00000073,inset 0 0 10px #00000080}.level-progress-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,var(--ww-ochre),var(--ww-gold));transition:width .25s ease}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at center,#1c0f06b8,#0c0602e6);font-family:var(--font-west)}.overlay.hidden{display:none}.panel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:560px;width:100%;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overflow-x:hidden;padding:34px 30px;background:linear-gradient(180deg,#5c3620,#3c2412);border:3px solid var(--ww-gold);border-radius:12px;box-shadow:0 12px 40px #0009,inset 0 0 0 3px #0000004d}.panel-menu{padding:40px 34px}.kicker{font-size:13px;letter-spacing:.32em;color:var(--ww-sand);text-shadow:0 1px 0 #000}.title-main{font-size:clamp(32px,6.2vw,52px);line-height:1.06;color:var(--ww-gold);text-shadow:0 3px 0 #2b1c10,0 6px 18px rgba(0,0,0,.5);letter-spacing:.02em}.title-big{font-size:clamp(30px,6.5vw,52px);line-height:1.05;color:var(--ww-gold);text-shadow:0 3px 0 #2b1c10,0 5px 14px rgba(0,0,0,.5)}.subtitle{font-size:clamp(15px,2.6vw,19px);line-height:1.5;color:var(--ww-cream);text-shadow:0 1px 0 rgba(0,0,0,.5)}.btn{font-family:var(--font-west);font-size:22px;font-weight:700;letter-spacing:.12em;color:var(--ww-cream);background:linear-gradient(180deg,#b23a2a,#8c2a1e);border:2px solid var(--ww-gold);border-radius:8px;padding:14px 42px;cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.4);box-shadow:0 4px #5c1a12,0 8px 20px #0006;transition:transform .08s ease,box-shadow .08s ease}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(3px);box-shadow:0 1px #5c1a12,0 4px 10px #0006}.btn.hidden{display:none}.btn-secondary{background:linear-gradient(180deg,#6f4528,#4a2c18);border-color:var(--ww-sand);box-shadow:0 4px #2b1c10,0 8px 20px #0006}.btn-secondary:active{box-shadow:0 1px #2b1c10,0 4px 10px #0006}.howto{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ww-sand);opacity:.9;margin-top:4px}.howto b{color:var(--ww-gold)}.debug-menu{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:2px;padding-top:14px;border-top:1px solid rgba(242,193,78,.22)}.debug-toggle{font-family:var(--font-west);font-size:11px;font-weight:700;letter-spacing:.28em;color:var(--ww-sand);background:transparent;border:1px solid rgba(232,201,143,.45);border-radius:5px;padding:5px 14px 5px 16px;cursor:pointer;opacity:.75;transition:opacity .15s ease,border-color .15s ease}.debug-toggle:hover,.debug-toggle[aria-expanded=true]{opacity:1;border-color:var(--ww-gold);color:var(--ww-gold)}.debug-panel{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px;background:#140c058c;border:1px solid rgba(242,193,78,.3);border-radius:8px}.debug-panel.hidden,.debug-levels.hidden{display:none}.debug-heading{font-size:10px;letter-spacing:.3em;color:var(--ww-ochre);text-align:left}.debug-option{font-family:var(--font-west);font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--ww-cream);background:linear-gradient(180deg,#6f4528,#4a2c18);border:1px solid var(--ww-sand);border-radius:6px;padding:9px 16px;cursor:pointer;text-align:left}.debug-option:hover{border-color:var(--ww-gold);color:var(--ww-gold)}.debug-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.debug-level-btn{font-family:var(--font-west);display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;background:#4a2c18b3;border:1px solid rgba(232,201,143,.5);border-radius:6px;color:var(--ww-cream);cursor:pointer;text-align:left;min-width:0}.debug-level-btn:hover{border-color:var(--ww-gold);background:#6f4528e6}.debug-level-btn .level-num{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--ww-gold)}.debug-level-btn .level-name{font-size:11px;letter-spacing:.16em;color:var(--ww-sand)}@media (max-width: 520px){.debug-levels{grid-template-columns:1fr}}@media (max-width: 520px){.hud-top{padding:8px 10px}.hud-value{font-size:24px}.hud-label{font-size:9px}.hud-hearts{font-size:26px;min-width:94px}.hud-level{font-size:11px;padding:4px 12px;letter-spacing:.1em}.level-progress{bottom:36px;height:18px;width:min(72vw,420px)}.panel{padding:24px 18px;gap:14px}.btn{font-size:18px;padding:12px 30px}}
