:root { --cyan: #00d9ff; }
.shootout-body { min-height:100vh; overflow:hidden; background:#000; color:var(--text); font-family:var(--font-body); }
.shootout-shell { position:relative; min-height:100vh; isolation:isolate; overflow:hidden; }
.shootout-bg { position:fixed; inset:-3vh -3vw; z-index:-5; background: radial-gradient(circle at 50% 62%, rgba(0,255,204,.09), transparent 22%), url("../assets/images/startbild.png") center/cover no-repeat; filter:saturate(1.08) contrast(1.04); transform:scale(1.06); animation: shootoutDrift 28s ease-in-out infinite alternate; }
.shootout-bg::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.74); }
.shootout-scanlines { position:fixed; inset:0; pointer-events:none; z-index:40; opacity:.18; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 5px); mix-blend-mode:screen; }
@keyframes shootoutDrift { from { transform:scale(1.05) translate(-.5%, -.4%); } to { transform:scale(1.1) translate(.5%, .4%); } }
.shootout-topbar { position:relative; z-index:10; width:min(1180px, calc(100% - 32px)); margin:16px auto 0; display:flex; justify-content:space-between; align-items:center; gap:14px; font-family:var(--font-display); text-transform:uppercase; }
.shootout-status, .shootout-cost { min-height:56px; padding:10px 14px; display:flex; align-items:center; gap:12px; background:rgba(0,0,0,.72); border:1px solid rgba(0,255,204,.34); box-shadow:0 0 22px rgba(0,255,204,.18); clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.shootout-status small, .shootout-cost small, .hud-left small, .hud-right small { display:block; color:var(--muted); letter-spacing:.14em; font-size:.7rem; }
.shootout-status strong, .shootout-cost strong { display:block; color:var(--kaspa); letter-spacing:.1em; }
.status-dot { width:12px; height:12px; border-radius:50%; background:var(--kaspa); box-shadow:0 0 16px var(--kaspa); }
.shootout-panel { width:min(980px, calc(100% - 32px)); margin:clamp(36px, 8vh, 78px) auto 0; padding:clamp(22px, 4vw, 42px); background:linear-gradient(135deg, rgba(0,0,0,.88), rgba(0,24,24,.64)); border:1px solid rgba(0,255,204,.36); box-shadow:0 0 42px rgba(0,255,204,.20), inset 0 0 60px rgba(0,255,204,.045); backdrop-filter:blur(12px); clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); }
.shootout-menu h1 { margin:.08em 0 .08em; font-family:var(--font-display); text-transform:uppercase; font-size:clamp(3.1rem, 8vw, 7.2rem); line-height:.9; letter-spacing:.08em; text-shadow:0 0 34px rgba(0,255,204,.42); }
.eyebrow { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.22em; color:var(--kaspa); text-shadow:0 0 12px rgba(0,255,204,.55); }
.shootout-copy { max-width:720px; color:#d8fffb; line-height:1.55; font-size:1.05rem; }
.shootout-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0 18px; }
.input-shell span { display:block; margin-bottom:8px; color:var(--muted); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; }
.input-shell input, .input-shell select { width:100%; min-height:48px; color:var(--text); background:rgba(0,0,0,.72); border:1px solid rgba(0,255,204,.34); padding:10px 12px; font:700 1rem var(--font-display); letter-spacing:.08em; outline:none; }
.input-shell input:focus, .input-shell select:focus { border-color:var(--kaspa); box-shadow:0 0 18px rgba(0,255,204,.28); }
.mode-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.mode-card { min-height:150px; text-align:left; padding:18px; cursor:pointer; color:var(--text); background:linear-gradient(180deg, rgba(0,20,20,.8), rgba(0,0,0,.88)); border:1px solid rgba(0,255,204,.28); box-shadow:inset 0 0 36px rgba(0,255,204,.04); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mode-card:hover { transform:translateY(-4px); border-color:var(--kaspa); box-shadow:0 0 28px rgba(0,255,204,.24), inset 0 0 42px rgba(0,255,204,.05); }
.mode-card span, .mode-card small { display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-size:.78rem; }
.mode-card strong { display:block; margin:12px 0 12px; color:var(--kaspa); font-family:var(--font-display); text-transform:uppercase; font-size:1.45rem; letter-spacing:.08em; }
.mode-card--magenta { border-color:rgba(255,0,212,.36); }
.mode-card--magenta strong { color:var(--magenta); }
.mode-card--magenta:hover { border-color:var(--magenta); box-shadow:0 0 28px rgba(255,0,212,.25); }
.mode-card--locked { opacity:.62; }
.control-hint { margin-top:18px; padding:12px 14px; border-left:3px solid var(--kaspa); background:rgba(0,0,0,.45); color:#c7dfdc; line-height:1.45; }
.hidden { display:none !important; }
.shootout-game { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, #071026, #00020a 72%); }
#shootoutCanvas { display:block; width:100%; height:100%; }
.hud-left, .hud-right { position:absolute; top:28px; z-index:4; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; text-shadow:0 0 18px rgba(0,255,204,.45); }
.hud-left { left:28px; }
.hud-right { right:28px; text-align:right; }
.hud-left strong, .hud-right strong { display:block; font-size:clamp(1.35rem, 2.7vw, 2.7rem); color:var(--text); margin:3px 0 12px; }
.hud-left small, .hud-right small { color:var(--kaspa); font-size:clamp(.85rem, 1.5vw, 1.4rem); }
.power-meter { position:absolute; left:48px; bottom:50px; width:34px; height:300px; border:2px solid rgba(255,255,255,.7); background:rgba(0,0,0,.35); box-shadow:0 0 18px rgba(255,255,255,.18); display:none; padding:4px; border-radius:14px; overflow:hidden; }
.power-meter.is-visible { display:block; }
.power-meter span { position:absolute; left:4px; right:4px; bottom:4px; height:0%; border-radius:9px; background:linear-gradient(to top, var(--kaspa), #fff06a, #ff4b4b); box-shadow:0 0 18px rgba(0,255,204,.4); transition:height .04s linear; }
.abort-btn { position:absolute; left:50%; transform:translateX(-50%); bottom:24px; z-index:4; background:rgba(0,0,0,.6); color:var(--magenta); border:1px solid var(--magenta); padding:10px 18px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; cursor:pointer; }
.abort-btn:hover { background:rgba(255,0,212,.18); box-shadow:0 0 20px rgba(255,0,212,.28); }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
.panel-head h2, .result-panel h2 { font-family:var(--font-display); font-size:clamp(2.2rem, 5vw, 4.8rem); line-height:.9; text-transform:uppercase; letter-spacing:.08em; }
.tournament-track { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:20px; }
.tournament-node { min-height:130px; padding:14px; background:rgba(0,0,0,.55); border:1px solid rgba(0,255,204,.28); }
.tournament-node.is-active { border-color:var(--magenta); box-shadow:0 0 22px rgba(255,0,212,.24); }
.tournament-node.is-cleared { border-color:var(--kaspa); box-shadow:0 0 18px rgba(0,255,204,.16); opacity:.88; }
.tournament-node small { color:var(--muted); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; }
.tournament-node strong { display:block; color:var(--kaspa); margin-top:10px; font-family:var(--font-display); text-transform:uppercase; }
.result-panel { text-align:center; max-width:760px; }
.result-panel h2 { color:var(--kaspa); text-shadow:0 0 26px rgba(0,255,204,.44); }
.result-panel.is-fail h2 { color:var(--magenta); text-shadow:0 0 26px rgba(255,0,212,.44); }
.result-panel p { color:#d1e6e3; margin:18px auto 26px; max-width:620px; line-height:1.55; }
.result-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
@media (max-width: 760px) { .shootout-topbar { flex-direction:column; align-items:stretch; } .shootout-form-grid, .mode-grid, .tournament-track { grid-template-columns:1fr; } .hud-left strong, .hud-right strong { font-size:1.25rem; } .power-meter { height:200px; } }

/* === GO-LIVE MERGED FIX: GLOBAL HUD SAFE AREA ===
   .shootout-bg remains fixed; only interactive UI moves below the KAS header. */
body.has-destiny-global-hud .shootout-shell {
  box-sizing: border-box;
  height: 100vh;
  padding-top: 76px;
}
body.has-destiny-global-hud .shootout-game {
  top: 76px;
  height: calc(100vh - 76px);
}
body.has-destiny-global-hud .hud-left,
body.has-destiny-global-hud .hud-right { top: 18px; }
@media (max-width:760px) {
  body.has-destiny-global-hud .shootout-shell { padding-top: 118px; }
  body.has-destiny-global-hud .shootout-game { top: 118px; height: calc(100vh - 118px); }
}