:root {
  --gold: #ffd23f;
  --red: #e63946;
  --cyan: #2ee6d6;
  --dark: #10131a;
  --panel: rgba(16, 19, 26, 0.88);
  --text: #f4f1ea;
  --muted: #a9b0bd;
  --green: #5bd16b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text); font-family: 'Rubik', system-ui, sans-serif; user-select: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* ---------- Overlays ---------- */
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 50; }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(220, 20, 30, .75) 100%); }
#speedlines { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.0) 0deg 3deg, rgba(255,255,255,.18) 3.3deg 3.6deg);
  -webkit-mask: radial-gradient(circle at center, transparent 38%, #000 75%); mask: radial-gradient(circle at center, transparent 38%, #000 75%); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0,0,0,.6); }
#hud.cine > *:not(#subtitle) { display: none !important; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6); border-radius: 1px; }
#crosshair i:nth-child(1) { width: 2px; height: 9px; left: -1px; top: -16px; }
#crosshair i:nth-child(2) { width: 2px; height: 9px; left: -1px; top: 7px; }
#crosshair i:nth-child(3) { width: 9px; height: 2px; left: -16px; top: -1px; }
#crosshair i:nth-child(4) { width: 9px; height: 2px; left: 7px; top: -1px; }
#crosshair b { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 1px #000; }
#crosshair.spread i:nth-child(1) { top: -22px; } #crosshair.spread i:nth-child(2) { top: 13px; }
#crosshair.spread i:nth-child(3) { left: -22px; } #crosshair.spread i:nth-child(4) { left: 13px; }
#crosshair i { transition: all .08s; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0;
  background:
    linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%); mask: radial-gradient(circle, transparent 30%, #000 31%); }
#hitmarker.show { animation: hitm .25s ease-out; }
#hitmarker.kill { filter: drop-shadow(0 0 3px var(--red)) sepia(1) saturate(8) hue-rotate(-30deg); }
@keyframes hitm { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); } }

#topleft { position: absolute; left: 22px; top: 16px; }
#score { font-family: 'Bangers', cursive; font-size: 46px; letter-spacing: 2px; color: var(--gold); }
#combo { font-family: 'Bangers', cursive; font-size: 26px; color: #ff8c42; min-height: 30px; }
#combo.pop { animation: pop .2s; }
#timer { font-size: 15px; color: var(--muted); }
@keyframes pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

#objective { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); max-width: 46vw; text-align: center;
  font-weight: 600; font-size: 17px; background: rgba(0,0,0,.45); padding: 7px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.15); }
#objective:empty { display: none; }
#bossbar { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); width: min(620px, 60vw); text-align: center; }
#bossbar .bname { font-family: 'Bangers', cursive; font-size: 28px; letter-spacing: 2px; color: #ff5a5f; }
#bossbar .bbar { position: relative; height: 18px; background: rgba(0,0,0,.6); border: 2px solid #000; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
#bossbar .bfill, #bossbar .bghost { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#bossbar .bghost { background: #fff; opacity: .5; transition: width .6s .2s; }
#bossbar .bfill { background: linear-gradient(90deg, #ff3b3b, #ff9f1c); z-index: 1; transition: width .1s; }

#minimap { position: absolute; right: 18px; top: 16px; width: 200px; text-align: right; }
#mapcanvas { width: 200px; height: 200px; border-radius: 50%; background: rgba(0,0,0,.45); border: 3px solid rgba(255,255,255,.3); box-shadow: 0 4px 16px rgba(0,0,0,.5); }
#roomname { font-family: 'Bangers', cursive; font-size: 24px; letter-spacing: 1px; margin-top: 6px; color: var(--cyan); }
#progress { font-size: 13px; line-height: 1.5; color: var(--muted); }
#progress .done { color: var(--green); }
#progress .boss { color: #ff8c8c; }

#bottomleft { position: absolute; left: 22px; bottom: 20px; width: 290px; }
.stat { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.stat .ico { font-size: 26px; width: 32px; text-align: center; }
.stat .bar { flex: 1; height: 16px; background: rgba(0,0,0,.55); border: 2px solid #000; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.stat .fill { height: 100%; width: 100%; transition: width .15s; }
.bar.hp .fill { background: linear-gradient(90deg, #e9a23b, #ffd166); }
.bar.akku .fill { background: linear-gradient(90deg, #2ec4b6, #8fffe0); }
.stat span:last-child { font-weight: 800; width: 52px; text-align: right; }
#speedo { font-family: 'Bangers', cursive; font-size: 54px; margin-top: 4px; }
#speedo small { font-size: 18px; margin-left: 4px; color: var(--muted); }
#speedo em { font-style: normal; font-size: 20px; margin-left: 10px; color: var(--cyan); }
#rpmbar { position: relative; width: 230px; height: 14px; margin-top: 4px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.25); border-radius: 7px; overflow: hidden; }
#rpmbar i { display: block; height: 100%; width: 0; background: var(--cyan); }
#rpmbar span { position: absolute; right: 8px; top: -1px; font-size: 11px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px #000; }
.lowhp .bar.hp .fill { background: #ff3b3b; animation: blink .5s infinite alternate; }
@keyframes blink { to { opacity: .4; } }

#weapons { position: absolute; right: 18px; bottom: 18px; text-align: right; }
#slots { display: flex; gap: 6px; justify-content: flex-end; }
.slot { position: relative; width: 64px; height: 64px; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.25); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 34px; transition: transform .1s; }
.slot .k { position: absolute; left: 4px; top: 1px; font-size: 12px; font-weight: 800; color: var(--muted); }
.slot .n { position: absolute; left: 0; right: 0; bottom: -17px; font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; color: var(--muted); }
.slot.sel { border-color: var(--gold); background: rgba(255, 210, 63, .2); transform: translateY(-6px) scale(1.08); }
.slot.sel .n { color: var(--gold); }
.slot.locked { opacity: .3; filter: grayscale(1); }
.slot.cool::after { content: ''; position: absolute; inset: 0; border-radius: 10px; background: rgba(0,0,0,.45); }
#bombs { margin-top: 26px; font-family: 'Bangers', cursive; font-size: 32px; }
#bombs small { font-family: 'Rubik'; font-size: 12px; color: var(--muted); margin-left: 6px; }
#ultra { margin-top: 6px; width: 330px; margin-left: auto; }
#ultra .ulabel { font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #ff9f1c; }
#ultra .ubar { height: 14px; background: rgba(0,0,0,.55); border: 2px solid #000; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
#ultra .ufill { height: 100%; width: 0; background: linear-gradient(90deg, #ff006e, #ff9f1c, #ffd23f); transition: width .2s; }
#ultra.ready .ubar { animation: ultraglow .6s infinite alternate; }
#ultra.ready .ulabel { color: var(--gold); }
#ultra.nobomb { opacity: .35; }
@keyframes ultraglow { from { box-shadow: 0 0 0 2px #ff9f1c, 0 0 10px #ff006e; } to { box-shadow: 0 0 0 2px #ffd23f, 0 0 26px #ffd23f; } }

#prompt { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-weight: 800; font-size: 20px;
  background: rgba(0,0,0,.55); padding: 8px 18px; border-radius: 10px; border: 2px solid rgba(255,255,255,.25); }
#prompt:empty { display: none; }
#prompt kbd, .controls kbd { display: inline-block; min-width: 26px; padding: 1px 7px; margin: 0 2px; border-radius: 6px; background: #f4f1ea; color: #111; font-family: 'Rubik'; font-weight: 800; font-size: .85em; text-shadow: none; box-shadow: 0 3px 0 #888; }

#popups { position: absolute; left: 0; right: 0; top: 30%; text-align: center; }
.popup { font-family: 'Bangers', cursive; font-size: 54px; letter-spacing: 2px; color: var(--gold); -webkit-text-stroke: 2px #000;
  animation: popup 1.4s ease-out forwards; white-space: nowrap; }
.popup.red { color: #ff4d4d; } .popup.cyan { color: var(--cyan); } .popup.green { color: var(--green); }
.popup.huge { font-size: 110px; }
.popup.small { font-size: 34px; }
@keyframes popup { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 12% { transform: scale(1.2) rotate(3deg); opacity: 1; }
  22% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
#floaters { position: absolute; inset: 0; }
.floater { position: absolute; font-family: 'Bangers', cursive; font-size: 26px; color: #fff; -webkit-text-stroke: 1px #000; transform: translate(-50%, -50%);
  animation: floatup .9s ease-out forwards; white-space: nowrap; }
.floater.crit { color: var(--gold); font-size: 34px; }
.floater.pts { color: #9dff8a; font-size: 22px; }
@keyframes floatup { 0% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: -60px; } }
#subtitle { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); max-width: 70vw; text-align: center; font-size: 22px; font-weight: 600;
  background: rgba(0,0,0,.6); padding: 8px 18px; border-radius: 8px; }
#subtitle:empty { display: none; }
#subtitle b { color: var(--gold); }
#windicon { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); font-family: 'Bangers', cursive; font-size: 30px; color: #b8f2ff; animation: blink .6s infinite alternate; }
#attrib { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 11px; color: #fff; opacity: .85; max-width: 60vw; text-align: center; text-shadow: 0 1px 2px #000; }
#attrib b { font-family: Arial, sans-serif; font-size: 14px; letter-spacing: -.3px; }

/* ---------- Bildschirme ---------- */
.screen { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20, 24, 34, .55), rgba(0,0,0,.85)); }
/* HTL-Foto gibt es nur lokal – online (ohne Foto) scheint das Lienz-Bild darunter durch */
#menu { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.75)), url('../assets/htl/media_0EFA03CA_18D7_55B3_41B0_E4B17466A37A.jpg') center/cover, url('menu-lienz.jpg') center/cover; }
.panel { background: var(--panel); border: 2px solid rgba(255,255,255,.12); border-radius: 18px; padding: 26px 34px; max-width: 760px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); text-align: center; max-height: 96vh; overflow: auto; }
.title { font-family: 'Bangers', cursive; font-size: 92px; line-height: .9; margin: 0; letter-spacing: 4px; color: var(--gold);
  -webkit-text-stroke: 3px #000; text-shadow: 6px 6px 0 #e63946; transform: rotate(-2deg); }
.title span { display: block; color: #fff; text-shadow: 6px 6px 0 #2ee6d6; }
.title.small { font-size: 80px; }
.subtitle { font-weight: 800; letter-spacing: 1px; color: var(--cyan); margin-top: 12px; text-transform: uppercase; font-size: 14px; }
.story { color: #dfe3ea; line-height: 1.5; font-size: 15px; }
.btnrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
button { font-family: 'Rubik'; font-weight: 800; font-size: 15px; padding: 10px 18px; border-radius: 12px; border: 2px solid #000; cursor: pointer;
  background: #e8e4da; color: #111; box-shadow: 0 4px 0 #000; transition: transform .08s; }
button:hover { transform: translateY(-2px); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
button.big { font-family: 'Bangers', cursive; font-size: 28px; letter-spacing: 2px; padding: 8px 30px; background: var(--gold); }
.keybox { text-align: left; background: rgba(255,255,255,.05); border-radius: 12px; padding: 12px 14px; margin: 8px 0 14px; font-size: 14px; }
.keybox label { font-weight: 600; }
.keyrow { display: flex; gap: 6px; margin: 6px 0; }
.keyrow input { flex: 1; font-family: monospace; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 2px solid #000; background: #fff; color: #111; }
.keyrow button { padding: 6px 12px; font-size: 13px; }
#keyStatus { font-size: 13px; margin-bottom: 6px; }
#keyStatus.ok { color: var(--green); } #keyStatus.no { color: #ffb347; }
.keybox a { color: var(--cyan); }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; text-align: left; font-size: 13px; color: #dfe3ea; }
#highscore { margin-top: 12px; color: var(--gold); font-weight: 600; }
.fine { margin-top: 12px; font-size: 11px; color: #7d8492; }
.fine a { color: inherit; }
.fine.imp { margin-top: 4px; }
#story .panel { max-width: 700px; }
#storytext { font-size: 20px; line-height: 1.55; text-align: left; }
#storytext h2 { font-family: 'Bangers', cursive; font-size: 46px; letter-spacing: 2px; color: var(--gold); margin: 0 0 10px; text-align: center; }
.hint { margin-top: 18px; color: var(--muted); animation: blink .8s infinite alternate; }
h2 { font-family: 'Bangers', cursive; font-size: 56px; letter-spacing: 2px; margin: 0 0 8px; }
h2.red { color: #ff4d4d; }
#wintext { font-size: 18px; line-height: 1.7; margin: 10px 0; }
#wintext .big { font-family: 'Bangers', cursive; font-size: 48px; color: var(--gold); }
.spinner { font-size: 64px; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
#loadtext { margin-top: 10px; font-weight: 600; }
.lbar { height: 10px; background: rgba(255,255,255,.1); border-radius: 5px; margin-top: 12px; overflow: hidden; }
#loadfill { height: 100%; width: 0; background: var(--gold); transition: width .2s; }
#errorbox { position: fixed; left: 10px; bottom: 10px; right: 10px; z-index: 99; background: #400; color: #fff; padding: 10px; font-family: monospace; font-size: 12px; border-radius: 6px; white-space: pre-wrap; max-height: 30vh; overflow: auto; pointer-events: auto; }

@media (max-width: 700px) {
  .title { font-size: 60px; }
  .controls { grid-template-columns: 1fr; }
  #minimap { transform: scale(.7); transform-origin: top right; }
}