:root{
  --bg:#110b07;
  --panel:#22150d;
  --gold:#f7c845;
  --gold2:#aa7a24;
  --cyan:#27d7ff;
  --red:#ff3b4d;
  --green:#58ff6a;
  --text:#fff2c8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#35200f 0,#120b07 50%,#050403 100%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body{touch-action:manipulation}
#gameShell{width:min(1500px,100vw);margin:0 auto;padding:14px;display:grid;grid-template-columns:minmax(320px,1fr) 280px;gap:14px;align-items:start}
#gameFrame{position:relative;background:#000;border:4px solid #6c4a1c;box-shadow:0 0 0 3px #100804,0 18px 45px rgba(0,0,0,.55),inset 0 0 40px rgba(255,200,69,.08);border-radius:12px;overflow:hidden;aspect-ratio:16/9;width:100%}
#gameCanvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#120b07;cursor:crosshair}
#scorePanel{display:flex;flex-direction:column;gap:14px}
.score-card{background:linear-gradient(180deg,rgba(57,35,18,.96),rgba(24,13,8,.96));border:3px solid #704d1d;border-radius:12px;padding:14px;box-shadow:inset 0 0 0 2px rgba(255,207,69,.14),0 12px 30px rgba(0,0,0,.38)}
.score-card h2,.score-card h3{margin:0 0 10px;color:var(--gold);font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-shadow:3px 3px 0 #000}
.score-card ol{margin:0;padding-left:22px;line-height:1.55;font-weight:800}
.score-card li{margin-bottom:5px}
.score-card small{display:block;color:#c99d50;font-weight:700}
.score-card p{margin:.2rem 0;color:#ead6a2;line-height:1.35}
.overlay{position:absolute;inset:0;display:none;place-items:center;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.78));z-index:10;padding:18px;text-align:center}
.overlay.show{display:grid}
.panel{width:min(560px,96%);background:linear-gradient(180deg,#2c1b0f,#120b07);border:4px solid #a87925;border-radius:18px;padding:24px;box-shadow:0 0 0 4px #070301,0 20px 80px rgba(0,0,0,.65),inset 0 0 24px rgba(255,210,74,.12)}
.small-panel{width:min(360px,96%)}
.panel h1{font-size:clamp(2rem,6vw,4.8rem);margin:.1em 0;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;line-height:.92;text-shadow:5px 5px 0 #000,0 0 18px rgba(255,199,45,.42)}
.panel h2{font-size:clamp(1.8rem,5vw,3.4rem);margin:.15em 0;color:var(--gold);text-shadow:4px 4px 0 #000;text-transform:uppercase}
.panel p{font-weight:750;color:#f8e8bc;line-height:1.45}
.kicker{display:inline-block;color:var(--cyan);font-weight:1000;letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;text-shadow:2px 2px #000;margin-bottom:8px}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.menu-grid div{background:rgba(0,0,0,.28);border:2px solid rgba(247,200,69,.36);border-radius:10px;padding:10px;min-height:78px}
.menu-grid strong{display:block;color:var(--gold);margin-bottom:4px;text-transform:uppercase}
.menu-grid span{display:block;font-size:.84rem;color:#f0dbaa;font-weight:700}
button{font-family:inherit;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;border:0;border-radius:12px;padding:13px 18px;margin:6px;cursor:pointer;color:#1a0c04;box-shadow:0 6px 0 rgba(0,0,0,.55);transform:translateY(0);transition:.12s transform,.12s filter}
button:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.55)}
button.primary{background:linear-gradient(180deg,#fff47a,#f4b72d);border:2px solid #fff2a2}
button.secondary{background:linear-gradient(180deg,#4ae9ff,#159fc2);border:2px solid #94f7ff;color:#031014}
.final-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.final-stats div{background:rgba(0,0,0,.28);border:2px solid rgba(255,200,69,.28);border-radius:10px;padding:10px;font-weight:900}
.final-stats span{display:block;color:var(--cyan);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
#scoreForm{display:grid;gap:8px;margin:12px 0}
#scoreForm label{font-weight:900;color:#f8e8bc}
#scoreForm input{width:100%;border:3px solid #8a5e22;border-radius:10px;background:#0b0603;color:#fff2c8;font:900 1rem system-ui;padding:12px;text-align:center;outline:none}
#scoreForm input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(247,200,69,.25)}
.score-status{min-height:22px;font-weight:900;font-size:.9rem;color:#f8e8bc;line-height:1.25}
.score-status.loading{color:#7df7ff}
.score-status.success{color:#78ff77}
.score-status.error{color:#ff7380;background:rgba(0,0,0,.28);border:1px solid rgba(255,115,128,.35);border-radius:8px;padding:7px}
button:disabled{opacity:.62;cursor:not-allowed;filter:grayscale(.35)}
#mobileControls{display:none;position:absolute;inset:0;z-index:5;pointer-events:none}
#stickZone{position:absolute;left:20px;bottom:20px;width:118px;height:118px;border-radius:50%;background:rgba(0,0,0,.28);border:3px solid rgba(255,255,255,.2);pointer-events:auto;touch-action:none}
#stickKnob{position:absolute;left:38px;top:38px;width:38px;height:38px;border-radius:50%;background:rgba(255,211,68,.9);border:3px solid rgba(0,0,0,.45)}
.mobile-actions{position:absolute;right:18px;bottom:18px;display:flex;gap:12px;pointer-events:auto}
.mobile-actions button{width:78px;height:78px;border-radius:50%;padding:0;margin:0;font-size:.8rem;color:#050403}
#btnJump{background:linear-gradient(180deg,#65e6ff,#168db7);border:3px solid #bff8ff}
#btnFire{background:linear-gradient(180deg,#ff7a5f,#f3c02e);border:3px solid #ffe18a}
@media (max-width:1100px){
  #gameShell{grid-template-columns:1fr;padding:8px}
  #scorePanel{display:none}
}
@media (hover:none) and (pointer:coarse){
  #mobileControls{display:block}
  #gameCanvas{cursor:default}
  .menu-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  #gameShell{padding:0}
  #gameFrame{border-radius:0;border-left:0;border-right:0}
  .panel{padding:18px}
  .menu-grid{grid-template-columns:1fr}
  .final-stats{grid-template-columns:1fr}
}