:root{--bg-deep: #6B3E22;--bg-warm-brown: #8A522B;--caramel: #B86F32;--orange-primary: #E88924;--orange-bright: #F39A27;--orange-light: #F6B45C;--tan-warm: #C9955D;--beige: #DDB982;--beige-light: #E9CFA3;--cream: #F5E6C8;--cream-pale: #FFF3D8;--dark-text: #3B2417;--shadow-warm-soft: 0 4px 20px rgba(59, 36, 23, .35);--shadow-warm-card: 0 8px 32px rgba(59, 36, 23, .45);--border-subtle: rgba(221, 185, 130, .28);--border-accent: rgba(232, 137, 36, .45);--font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-deep);color:var(--cream-pale);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 50%,var(--bg-warm-brown) 0%,var(--bg-deep) 100%)}canvas#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:1;cursor:crosshair}.hud-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:22px 28px;transition:opacity .4s ease}.hud-overlay.hidden{opacity:0}.hud-top{display:flex;align-items:flex-start;justify-content:space-between;width:100%}.hud-brand-block{display:flex;flex-direction:column;gap:2px}.hud-title-brand{font-family:var(--font-sans);font-size:13px;font-weight:800;letter-spacing:2.5px;color:var(--cream-pale);text-transform:uppercase;text-shadow:0 1px 3px rgba(59,36,23,.5)}.hud-wave-label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1.5px;color:var(--orange-light)}.hud-phase-label{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:1.5px;color:var(--tan-warm);text-transform:uppercase}.hud-flow-badge{display:inline-block;font-family:var(--font-sans);font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--cream-pale);background:var(--orange-bright);padding:2px 6px;border-radius:3px;box-shadow:0 0 10px #f39a27b3;opacity:0;transform:translateY(-2px);transition:all .25s ease;width:fit-content;margin-top:2px}.hud-flow-badge.active{opacity:1;transform:translateY(0)}.hud-center-block{display:flex;flex-direction:column;align-items:center;gap:4px}.hud-score-display{display:flex;flex-direction:column;align-items:center;gap:2px}.hud-label{font-family:var(--font-sans);font-size:9px;font-weight:700;letter-spacing:2px;color:var(--tan-warm);text-transform:uppercase}.hud-value-cream{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--cream-pale);letter-spacing:1px;text-shadow:0 1px 3px rgba(59,36,23,.4)}.hud-combo-display{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transform:translateY(-4px);transition:all .2s cubic-bezier(.16,1,.3,1)}.hud-combo-display.active{opacity:1;transform:translateY(0)}.hud-combo-tag{font-family:var(--font-sans);font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--orange-bright);text-transform:uppercase;text-shadow:0 1px 4px rgba(59,36,23,.5)}.combo-gauge-track{width:54px;height:3px;background:#3b241780;border-radius:1.5px;overflow:hidden;border:1px solid rgba(221,185,130,.2)}.combo-gauge-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--orange-primary),var(--orange-bright));transition:width .05s linear}.hud-middle-left{display:flex;flex-direction:column;margin-top:10px;max-width:220px}.hud-objectives-card{display:flex;flex-direction:column;gap:4px;background:#3b241759;border:1px solid rgba(221,185,130,.18);border-radius:4px;padding:6px 10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hud-obj-header{font-family:var(--font-sans);font-size:8.5px;font-weight:800;letter-spacing:1.5px;color:var(--tan-warm);text-transform:uppercase}.hud-obj-list{display:flex;flex-direction:column;gap:3px}.hud-obj-item{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--beige-light)}.hud-obj-item.completed{color:var(--orange-bright);text-decoration:line-through}.hud-obj-check{margin-right:4px;font-weight:700}.hud-right-block{display:flex;align-items:flex-start;gap:20px}.hud-shields-display{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.shields-pips{display:flex;gap:5px}.shield-pip{width:9px;height:9px;border-radius:2px;border:1px solid var(--tan-warm);background:#3b241766;transition:all .25s ease}.shield-pip.active{background:var(--orange-bright);border-color:var(--cream-pale);box-shadow:0 0 8px #f39a2799}.hud-velocity-display{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.hud-value-orange{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--orange-bright);letter-spacing:.5px;text-shadow:0 1px 3px rgba(59,36,23,.4)}.hud-value-orange .unit{font-size:10px;color:var(--beige);font-weight:500;margin-left:2px}.hud-bottom{display:flex;align-items:flex-end;justify-content:space-between;width:100%}.hud-bank-display{display:flex;flex-direction:column;gap:3px}.hud-bank-label{font-family:var(--font-sans);font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--tan-warm);text-transform:uppercase}.bank-gauge-track{width:110px;height:4px;background:#3b241799;border:1px solid rgba(221,185,130,.3);border-radius:2px;overflow:hidden}.bank-gauge-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--orange-primary),var(--orange-bright));transition:width .08s ease}.hud-controls-group{display:flex;align-items:center;gap:16px;pointer-events:auto}.btn-icon-subtle{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--cream);border:1px solid var(--beige);border-radius:4px;color:var(--dark-text);font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:1.5px;cursor:pointer;box-shadow:0 2px 8px #3b241740,inset 0 1px #fff9;transition:all .2s cubic-bezier(.16,1,.3,1)}.btn-icon-subtle:hover{background:var(--cream-pale);border-color:var(--orange-primary);color:var(--dark-text);box-shadow:0 4px 12px #3b241759;transform:translateY(-1px)}.btn-icon-subtle:active{transform:translateY(1px);box-shadow:0 1px 4px #3b24174d}.title-screen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#8a522bd1,#6b3e22f2 80%);padding:40px 24px;transition:opacity .5s cubic-bezier(.16,1,.3,1),visibility .5s}.title-screen-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.title-container{max-width:640px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}.title-header{margin-bottom:20px}.main-title{font-family:var(--font-sans);font-size:44px;font-weight:800;letter-spacing:6px;color:var(--cream-pale);text-transform:uppercase;margin-bottom:8px;text-shadow:0 2px 8px rgba(59,36,23,.5)}.main-tagline{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:3px;color:var(--beige-light);text-transform:uppercase;text-shadow:0 1px 4px rgba(59,36,23,.4)}.demo-animation-box{width:280px;height:110px;margin:12px 0 24px;position:relative;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #3b241740;border-radius:4px;overflow:hidden}.demo-animation-box canvas{width:100%;height:100%}.title-buttons-group{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:32px;width:100%}.btn-enter-game{padding:15px 42px;background:linear-gradient(180deg,var(--orange-bright) 0%,var(--orange-primary) 100%);border:1px solid var(--orange-light);border-radius:5px;color:var(--cream-pale);font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 16px #3b241766,inset 0 1px #fff3d866;text-shadow:0 1px 2px rgba(59,36,23,.4);transition:all .22s cubic-bezier(.16,1,.3,1);min-width:240px}.btn-enter-game:hover{background:linear-gradient(180deg,var(--orange-light) 0%,var(--orange-bright) 100%);border-color:var(--cream-pale);box-shadow:0 6px 24px #3b241780,inset 0 1px #ffffff80;transform:translateY(-2px)}.btn-enter-game:active{transform:translateY(1px);box-shadow:0 2px 8px #3b241773}.btn-tutorial-link{background:transparent;border:1px solid rgba(221,185,130,.35);color:var(--beige-light);font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:8px 18px;border-radius:4px;cursor:pointer;transition:all .2s ease}.btn-tutorial-link:hover{background:#3b241766;border-color:var(--orange-light);color:var(--cream-pale);transform:translateY(-1px)}.btn-tutorial-link:active{transform:translateY(1px)}.instruction-guide-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;max-width:580px;border-top:1px solid var(--border-subtle);padding-top:20px;text-align:left}.guide-step{display:flex;flex-direction:column;gap:4px}.step-label{font-family:var(--font-sans);font-size:11px;font-weight:800;letter-spacing:2px;color:var(--orange-light);text-transform:uppercase}.step-text{font-family:var(--font-sans);font-size:12px;line-height:1.4;color:var(--beige-light)}.tutorial-intro-overlay,.tutorial-complete-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:35;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#8a522be0,#6b3e22fa 85%);padding:30px 20px;transition:opacity .4s ease,visibility .4s ease}.tutorial-intro-overlay.hidden,.tutorial-complete-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.tutorial-intro-card,.tutorial-complete-card{max-width:460px;width:100%;background:#3b24178c;border:1px solid var(--border-subtle);border-radius:8px;padding:32px 28px;text-align:center;box-shadow:var(--shadow-warm-card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.tutorial-brand{font-family:var(--font-sans);font-size:14px;font-weight:800;letter-spacing:3px;color:var(--cream-pale);margin-bottom:4px}.tutorial-tagline{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--orange-light);margin-bottom:24px}.tutorial-intro-body{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}.tutorial-line{font-family:var(--font-sans);font-size:15px;color:var(--cream);line-height:1.5}.tutorial-line.highlight{font-size:17px;font-weight:700;color:var(--orange-bright);margin-top:4px}.tutorial-intro-actions{display:flex;flex-direction:column;align-items:center;gap:12px}.btn-skip-link{background:transparent;border:none;color:var(--tan-warm);font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:1.5px;cursor:pointer;text-transform:uppercase;transition:color .2s ease;padding:6px 12px}.btn-skip-link:hover{color:var(--cream-pale);text-decoration:underline}.tut-complete-badge{font-family:var(--font-sans);font-size:10px;font-weight:800;letter-spacing:2.5px;color:var(--orange-light);margin-bottom:6px}.tut-complete-title{font-family:var(--font-sans);font-size:26px;font-weight:800;letter-spacing:4px;color:var(--cream-pale);margin-bottom:16px}.tut-checklist{display:flex;flex-direction:column;gap:8px;background:#3b241773;border:1px solid rgba(221,185,130,.25);border-radius:6px;padding:14px 20px;margin-bottom:24px;text-align:left}.tut-check-row{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:2px;color:var(--cream-pale)}.tut-check-icon{color:var(--orange-bright);font-weight:800;font-size:14px}.tutorial-hud-bar{position:absolute;top:24px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#3b2417bf;border:1px solid rgba(221,185,130,.35);border-radius:6px;padding:10px 20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 20px #3b241766;max-width:520px;width:90%;pointer-events:auto;transition:opacity .3s ease}.tutorial-hud-bar.hidden{opacity:0;pointer-events:none}.tut-hud-content{display:flex;flex-direction:column;gap:2px}.tut-step-tag{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--orange-light)}.tut-main-text{font-family:var(--font-sans);font-size:13px;font-weight:800;letter-spacing:1.5px;color:var(--cream-pale)}.tut-sub-text{font-family:var(--font-mono);font-size:10px;color:var(--beige-light)}.btn-tut-corner-skip{background:transparent;border:1px solid rgba(221,185,130,.3);color:var(--tan-warm);font-family:var(--font-sans);font-size:9.5px;font-weight:700;letter-spacing:1.2px;border-radius:3px;padding:5px 10px;cursor:pointer;white-space:nowrap;transition:all .2s ease}.btn-tut-corner-skip:hover{background:#6b3e2280;color:var(--cream-pale);border-color:var(--orange-primary)}.gameover-screen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#8a522be6,#6b3e22fa 80%);padding:32px 20px;overflow-y:auto;transition:opacity .4s cubic-bezier(.16,1,.3,1),visibility .4s}.gameover-screen-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.gameover-container{max-width:540px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}.gameover-header{margin-bottom:12px}.gameover-badge{font-family:var(--font-sans);font-size:9.5px;font-weight:800;letter-spacing:2.5px;color:var(--orange-light);text-transform:uppercase;margin-bottom:4px}.gameover-title{font-family:var(--font-sans);font-size:32px;font-weight:800;letter-spacing:5px;color:var(--cream-pale);text-transform:uppercase;text-shadow:0 2px 8px rgba(59,36,23,.5)}.gameover-score-hero{display:flex;flex-direction:column;align-items:center;margin-bottom:18px}.hero-score-val{font-family:var(--font-mono);font-size:36px;font-weight:800;color:var(--cream-pale);letter-spacing:2px;text-shadow:0 2px 8px rgba(59,36,23,.6)}.hero-score-label{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:2px;color:var(--orange-light);text-transform:uppercase}.gameover-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;margin-bottom:18px;padding:14px;background:#3b241773;border:1px solid var(--border-subtle);border-radius:6px;box-shadow:0 4px 16px #3b24174d}.gameover-stat-item{display:flex;flex-direction:column;gap:2px;align-items:center}.stat-label{font-family:var(--font-sans);font-size:8px;font-weight:700;letter-spacing:1.2px;color:var(--tan-warm);text-transform:uppercase;white-space:nowrap}.stat-value-orange{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--orange-bright)}.stat-value-cream{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--cream-pale)}.gameover-objectives-section{width:100%;background:#3b241759;border:1px solid rgba(221,185,130,.2);border-radius:6px;padding:12px;margin-bottom:22px;text-align:left}.obj-section-label{font-family:var(--font-sans);font-size:9px;font-weight:800;letter-spacing:2px;color:var(--tan-warm);margin-bottom:6px}.obj-checklist{display:flex;flex-direction:column;gap:4px}.obj-check-item{font-family:var(--font-mono);font-size:11px;color:var(--beige-light)}.obj-check-item.completed{color:var(--orange-bright)}.gameover-actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.gameover-actions .btn-enter-game{margin-bottom:0;width:100%}@media (max-width: 600px){.main-title{font-size:32px;letter-spacing:4px}.instruction-guide-row{grid-template-columns:1fr;gap:14px;text-align:center}.gameover-stats-grid{grid-template-columns:repeat(2,1fr)}.hud-overlay{padding:14px 16px}.hud-right-block{gap:12px}.tutorial-hud-bar{top:12px;padding:8px 14px;flex-direction:column;align-items:flex-start;gap:8px}}.pause-screen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#8a522be0,#6b3e22fa 85%);padding:30px 20px;transition:opacity .3s ease,visibility .3s ease}.pause-screen-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.pause-card{max-width:400px;width:100%;background:#3b241799;border:1px solid var(--border-subtle);border-radius:8px;padding:32px 28px;text-align:center;box-shadow:var(--shadow-warm-card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pause-badge{font-family:var(--font-sans);font-size:10px;font-weight:800;letter-spacing:2.5px;color:var(--orange-light);margin-bottom:4px;text-transform:uppercase}.pause-title{font-family:var(--font-sans);font-size:30px;font-weight:800;letter-spacing:5px;color:var(--cream-pale);margin-bottom:24px;text-transform:uppercase;text-shadow:0 2px 8px rgba(59,36,23,.5)}.pause-actions{display:flex;flex-direction:column;gap:10px;width:100%}.pause-actions .btn-enter-game{width:100%;margin-bottom:0}.pause-actions .btn-icon-subtle{justify-content:center;padding:10px 18px}.how-to-play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#8a522beb,#6b3e22fa 85%);padding:24px 16px;overflow-y:auto;transition:opacity .35s ease,visibility .35s ease}.how-to-play-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.how-to-play-container{max-width:680px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}.htp-header{margin-bottom:18px}.htp-badge{font-family:var(--font-sans);font-size:9.5px;font-weight:800;letter-spacing:2.5px;color:var(--orange-light);text-transform:uppercase;margin-bottom:4px}.htp-title{font-family:var(--font-sans);font-size:32px;font-weight:800;letter-spacing:5px;color:var(--cream-pale);text-transform:uppercase;text-shadow:0 2px 8px rgba(59,36,23,.5)}.htp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-bottom:18px}.htp-card{display:flex;flex-direction:column;align-items:center;background:#3b241780;border:1px solid var(--border-subtle);border-radius:6px;padding:14px 12px;box-shadow:0 4px 16px #3b24174d}.htp-icon-box{width:52px;height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;position:relative}.htp-visual-shift{width:12px;height:12px;background:var(--cream-pale);border-radius:50%;box-shadow:0 0 10px var(--orange-bright);position:relative}.htp-visual-shift:after{content:"→";position:absolute;left:18px;top:-4px;color:var(--orange-bright);font-weight:800;font-size:14px}.htp-visual-drift{width:32px;height:20px;border-bottom:2px solid var(--orange-bright);border-right:2px solid var(--orange-bright);border-radius:0 0 12px;position:relative}.htp-visual-cut{width:36px;height:2px;background:var(--orange-bright);position:relative}.htp-visual-cut:after{content:"✕";position:absolute;left:14px;top:-9px;color:var(--cream-pale);font-size:12px;font-weight:800}.htp-visual-chain{display:flex;gap:6px;align-items:center}.htp-visual-chain:before{content:"○";color:var(--orange-light);font-size:10px;font-weight:700}.htp-visual-chain:after{content:"○ ○";color:var(--orange-bright);font-size:10px;font-weight:700}.htp-visual-graze{width:14px;height:14px;border:1.5px dashed var(--orange-bright);border-radius:50%;position:relative}.htp-visual-graze:after{content:"•";color:var(--cream-pale);position:absolute;top:-4px;left:3px;font-size:14px}.htp-visual-flow{font-family:var(--font-sans);font-size:11px;font-weight:800;color:var(--cream-pale);background:var(--orange-bright);padding:2px 6px;border-radius:3px;box-shadow:0 0 8px var(--orange-bright)}.htp-card-label{font-family:var(--font-sans);font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--orange-light);text-transform:uppercase;margin-bottom:4px}.htp-card-desc{font-family:var(--font-sans);font-size:11px;line-height:1.35;color:var(--beige-light)}.htp-golden-rule{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px 16px;background:#3b241766;border:1px solid rgba(221,185,130,.2);border-radius:4px;margin-bottom:16px}.rule-node{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--cream-pale)}.rule-node.highlight{color:var(--orange-bright);text-shadow:0 0 8px rgba(243,154,39,.6)}.rule-arr{color:var(--tan-warm);font-size:11px}.htp-controls-ref{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;margin-bottom:22px}.htp-ctrl-item{display:flex;flex-direction:column;gap:2px;padding:8px 6px;background:#3b241759;border:1px solid rgba(221,185,130,.15);border-radius:4px}.ctrl-key{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--orange-light);letter-spacing:1px}.ctrl-desc{font-family:var(--font-sans);font-size:9px;color:var(--beige-light)}.htp-actions{display:flex;align-items:center;gap:14px;width:100%;justify-content:center}.htp-actions .btn-enter-game{margin-bottom:0;min-width:220px}.title-secondary-row{display:flex;align-items:center;gap:12px}.tut-complete-quote{font-family:var(--font-sans);font-size:13px;color:var(--beige-light);font-style:italic;margin-bottom:20px}.tut-complete-actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.tut-complete-actions .btn-enter-game{width:100%;margin-bottom:0}@media (max-width: 600px){.htp-grid{grid-template-columns:1fr}.htp-controls-ref{grid-template-columns:repeat(2,1fr)}.title-secondary-row{flex-direction:column;gap:8px}}