@font-face{font-family:Barlow;src:url('fonts/display.ttf') format('truetype');font-weight:900;font-display:swap}
:root{color-scheme:dark;--cyan:#37e6ff;--cyan-deep:#1490ff;--gold:#ffc23d;--gold-deep:#e08a00;--red:#ff3b47;--paper:#fff1dc;--ink:#1a1008;--glass:rgba(255,244,228,.10);--glass-edge:rgba(255,255,255,.34);
--chrome-cyan:linear-gradient(110deg,#0f7fe6 0%,#37e6ff 30%,#ffffff 46%,#8ff6ff 54%,#37e6ff 68%,#0f7fe6 100%);
--chrome-white:linear-gradient(110deg,#d9c7ad 0%,#ffffff 32%,#fff9ec 46%,#ffe4b8 54%,#ffffff 68%,#d9c7ad 100%);
--chrome-gold:linear-gradient(110deg,#c97b00 0%,#ffc23d 30%,#fff2b0 46%,#ffd76a 54%,#ffc23d 68%,#c97b00 100%)}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;font-size:16px}
button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer;color:inherit;border:0}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:active{transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}
#game,#world{position:fixed;inset:0;width:100%;height:100%}#world{touch-action:none;cursor:grab}#game.dragging #world{cursor:grabbing}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 200px #2a120488}.vignette:after{content:'';position:absolute;inset:0;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0 3px,#0003 3px 4px)}
#hitFlash{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 200px #ff2a1a;z-index:2}
/* ---------- Glanz-Bausteine ---------- */
.chrome{background:var(--chrome-cyan);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes sweep{0%{transform:translateX(-140%) skewX(-20deg)}55%{transform:translateX(240%) skewX(-20deg)}100%{transform:translateX(240%) skewX(-20deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes badge{0%,100%{transform:rotate(12deg) scale(1)}50%{transform:rotate(18deg) scale(1.08)}}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.primary,.secondary,.pill,.mode-choices button,#notice,dialog{position:relative;overflow:hidden}
.primary::before,.mode-choices button[aria-pressed=true]::before,#notice::before{content:'';position:absolute;top:-40%;bottom:-40%;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:sweep 3.2s ease-in-out infinite;pointer-events:none}
.primary::after,.mode-choices button::after,.pill::after,#notice::after{content:'';position:absolute;left:3%;right:3%;top:2px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.05));pointer-events:none}
/* ---------- Kopfzeile / HUD ---------- */
header{position:absolute;z-index:3;left:32px;right:32px;top:max(24px,env(safe-area-inset-top));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}header a,header button{pointer-events:auto}
.brand{font-family:Barlow,sans-serif;font-size:25px;font-style:italic;line-height:.9;color:var(--paper);text-decoration:none;text-shadow:2px 2px 0 #1a100899}.brand span{color:var(--cyan)}.brand small{font:10px Arial,sans-serif;letter-spacing:2px;display:block;margin-top:9px}
.top-buttons{display:flex;gap:8px}.top-buttons button{height:42px;width:44px;border-radius:14px;background:linear-gradient(180deg,rgba(255,244,228,.22),rgba(255,244,228,.06));border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px rgba(0,0,0,.25);backdrop-filter:blur(10px);font-size:22px}.top-buttons #sound[aria-pressed=false]{color:#c9b59a}
.legion-hud{text-align:center;display:none}.legion-hud span{display:block;letter-spacing:3px;font-size:12px;text-shadow:1px 1px 0 #1a1008}.legion-hud strong{font:66px/.9 Barlow,sans-serif;font-style:italic;font-variant-numeric:tabular-nums;display:block;background:var(--chrome-cyan);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(3px 3px 0 #0b3a4a) drop-shadow(0 0 18px rgba(55,230,255,.45));animation:shine 4.5s linear infinite;transition:transform .12s}.legion-hud strong.bump{transform:scale(1.25)}.legion-hud strong.drop{background:linear-gradient(180deg,#ffb3b8,#ff3b47);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(3px 3px 0 #4a0b12)}.running .legion-hud{display:block}
.playing-only{display:none}.running .playing-only{display:flex}.running #intro{display:none}
#objectives{position:absolute;top:99px;left:32px;gap:18px;font-size:10px;letter-spacing:1px;text-shadow:1px 1px 0 #1a1008}#objectives b{font:24px Barlow,sans-serif;display:block;letter-spacing:0}
.running #scoreWrap{position:absolute;top:99px;right:32px;display:flex;align-items:flex-end;flex-direction:column;text-shadow:1px 1px 0 #1a1008}#scoreWrap small{font-size:10px;letter-spacing:2px}#scoreWrap strong{font:38px Barlow,sans-serif;font-variant-numeric:tabular-nums}#best{color:var(--gold);font-size:12px;height:15px}
#notice{position:absolute;left:50%;top:22%;transform:translate(-50%,-8px);opacity:0;transition:opacity .15s,transform .15s;pointer-events:none;border-radius:999px;background:linear-gradient(180deg,#8ff6ff 0%,#37e6ff 48%,#0aa8e8 52%,#1490ff 100%);color:#062634;padding:12px 30px;font:italic clamp(23px,3vw,38px) Barlow,sans-serif;text-align:center;white-space:nowrap;z-index:4;box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -3px 0 rgba(0,0,0,.2),0 12px 30px rgba(20,144,255,.45);text-shadow:0 1px 0 rgba(255,255,255,.5)}#notice.show{opacity:1;transform:translate(-50%,0)}#notice.bad{background:linear-gradient(180deg,#ffb3b8 0%,#ff5560 48%,#e0202c 52%,#b3141f 100%);color:#fff1dc;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.25),0 12px 30px rgba(255,59,71,.45)}#notice.gold{background:linear-gradient(180deg,#fff2b0 0%,#ffc23d 48%,#f0a000 52%,#e08a00 100%);color:#3a2300;box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -3px 0 rgba(0,0,0,.2),0 12px 30px rgba(255,194,61,.45)}
.running #bossBar{position:absolute;left:50%;bottom:max(40px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(70%,520px);display:grid;gap:6px;text-align:center}#bossBar small{font-size:11px;letter-spacing:3px;color:var(--gold);text-shadow:1px 1px 0 #1a1008}#bossBar i{display:block;height:14px;border-radius:999px;background:rgba(26,16,8,.7);border:1px solid rgba(255,194,61,.5);box-shadow:inset 0 2px 4px rgba(0,0,0,.6);overflow:hidden;padding:2px}#bossBar em{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(180deg,#fff2b0,#ffc23d 45%,#ff7a1c 55%,#e05a00);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:width .1s}
#touchHint{display:none}
/* ---------- Glossy-Menü ---------- */
#intro{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:96px 16px 60px;overflow:auto;background:radial-gradient(ellipse at 50% 35%,rgba(26,16,8,.18),rgba(26,16,8,.72) 75%)}
.menu{position:relative;width:min(100%,560px);padding:34px 36px 26px;border-radius:30px;text-align:center;background:linear-gradient(160deg,rgba(255,244,228,.20),rgba(255,244,228,.06) 45%,rgba(20,144,255,.10));border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.12),0 30px 80px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.05);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);animation:rise .55s cubic-bezier(.2,.9,.3,1.2) both}
.menu::before{content:'';position:absolute;left:8%;right:8%;top:0;height:42%;border-radius:30px 30px 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pill{display:inline-block;padding:6px 13px 5px;border-radius:999px;font-size:10px;letter-spacing:2.2px;font-weight:bold;color:#062634;background:linear-gradient(180deg,#8ff6ff,#37e6ff 50%,#1490ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 12px rgba(20,144,255,.4)}.pill.gold{color:#3a2300;background:linear-gradient(180deg,#fff2b0,#ffc23d 50%,#e08a00);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 12px rgba(255,194,61,.4)}.pill.glass{color:var(--paper);background:linear-gradient(180deg,rgba(255,244,228,.3),rgba(255,244,228,.08));border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.logo{position:relative;display:inline-block;margin:6px 0 14px;max-width:calc(100% - 40px);font:italic clamp(78px,12vw,132px)/.8 Barlow,Impact,sans-serif;letter-spacing:-2px;animation:floaty 5s ease-in-out infinite}
.logo .line{display:block;background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s linear infinite}
.logo .one{background-image:var(--chrome-white);filter:drop-shadow(0 5px 0 #6b4a2a) drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.logo .two{background-image:var(--chrome-cyan);animation-delay:-1.4s;filter:drop-shadow(0 6px 0 #0b3a4a) drop-shadow(0 0 26px rgba(55,230,255,.55)) drop-shadow(0 16px 24px rgba(0,0,0,.5))}
.logo .badge{position:absolute;right:-84px;top:-34px;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font:italic 30px Barlow,sans-serif;letter-spacing:0;color:#3a2300;background:radial-gradient(circle at 35% 28%,#fff8d6 0,#ffd76a 28%,#ffc23d 55%,#c97b00 100%);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.7),0 10px 24px rgba(255,194,61,.5);transform:rotate(12deg);animation:badge 2.6s ease-in-out infinite}
.pitch{font-size:18px;line-height:1.35;margin:0 0 16px;font-weight:bold;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.features{display:flex;justify-content:center;gap:8px;margin-bottom:18px}.features span{flex:1;max-width:150px;padding:10px 6px 8px;border-radius:16px;font-size:9px;letter-spacing:1.6px;background:linear-gradient(180deg,rgba(255,244,228,.16),rgba(255,244,228,.04));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}.features b{display:block;font:24px Barlow,sans-serif;letter-spacing:0;background:var(--chrome-gold);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s linear infinite;filter:drop-shadow(0 2px 0 #4a2b00)}
.mode-choices{display:flex;justify-content:center;gap:8px;margin:0 auto 14px;padding:5px;width:fit-content;border-radius:999px;background:rgba(26,16,8,.45);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.mode-choices button{padding:9px 20px 7px;border-radius:999px;font:19px Barlow,sans-serif;font-style:italic;display:grid;text-align:center;color:#d9c7ad;background:transparent;transition:background .15s,color .15s}.mode-choices button small{font:10px Arial,sans-serif;font-style:normal;letter-spacing:1px;color:inherit;opacity:.8}
.mode-choices button[aria-pressed=true]{color:#3a2300;background:linear-gradient(180deg,#fff2b0 0%,#ffc23d 48%,#f0a000 52%,#e08a00 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -3px 0 rgba(0,0,0,.2),0 8px 20px rgba(255,194,61,.45);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.primary{display:flex;justify-content:space-between;align-items:center;width:100%;margin:0 auto;padding:16px 26px 14px;border-radius:999px;font:italic 29px Barlow,sans-serif;color:#062634;background:linear-gradient(180deg,#8ff6ff 0%,#37e6ff 46%,#0aa8e8 52%,#1490ff 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -4px 0 rgba(0,0,0,.22),0 14px 34px rgba(20,144,255,.5),0 0 0 4px rgba(55,230,255,.15);text-shadow:0 1px 0 rgba(255,255,255,.55);transition:transform .12s,box-shadow .12s}.primary:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -4px 0 rgba(0,0,0,.22),0 18px 40px rgba(20,144,255,.6),0 0 0 4px rgba(55,230,255,.25)}.primary:active{transform:translateY(2px)}.primary span{font:22px Arial;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(6,38,52,.85);color:#8ff6ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.controls-note{font-size:12px;color:#e6d6bd;line-height:1.7;margin-top:16px;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.record{margin-top:16px;padding:10px 14px;border-radius:14px;font:12px monospace;letter-spacing:2px;color:var(--gold);background:rgba(26,16,8,.4);border:1px solid rgba(255,194,61,.3);display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.record em{font-style:normal;color:#d9c7ad}
.back{position:fixed;bottom:22px;left:32px;z-index:3;font-size:11px;letter-spacing:1px;color:#d9c7ad;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,.5)}
/* ---------- Dialoge ---------- */
dialog{border:1px solid var(--glass-edge);border-radius:28px;background:linear-gradient(160deg,rgba(60,38,20,.9),rgba(26,16,8,.92));color:var(--paper);padding:34px;max-width:480px;width:calc(100% - 32px);max-height:90dvh;overflow:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 30px 80px rgba(0,0,0,.6);backdrop-filter:blur(16px)}dialog::backdrop{background:#1a100899;backdrop-filter:blur(6px)}
dialog .eyebrow{font-size:11px;letter-spacing:2.4px;font-weight:bold;color:var(--gold)}
dialog h2{font:italic 54px/.95 Barlow,sans-serif;margin:16px 0 14px;background:var(--chrome-cyan);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s linear infinite;filter:drop-shadow(0 4px 0 #0b3a4a)}dialog p{font-size:14px;line-height:1.7;color:#e6d6bd}
dialog .primary{font-size:25px;margin-top:8px}
.secondary{width:100%;padding:13px;margin-top:12px;border-radius:999px;background:linear-gradient(180deg,rgba(255,244,228,.18),rgba(255,244,228,.05));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);font-size:14px;display:block;text-align:center;color:inherit;text-decoration:none}.secondary:hover{background:linear-gradient(180deg,rgba(255,244,228,.28),rgba(255,244,228,.1))}
.result-score{border-block:1px solid rgba(255,255,255,.18);padding:18px 0;margin:18px 0;display:grid}.result-score small{letter-spacing:2px;font-size:11px}.result-score strong{font:72px Barlow,sans-serif;background:var(--chrome-gold);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s linear infinite;filter:drop-shadow(0 4px 0 #4a2b00)}.result-score span{color:var(--gold);font-size:13px}
#fatal{position:absolute;z-index:20;inset:0;background:#1f1409;padding:15vh 10vw}#fatal a{color:var(--cyan)}
/* ---------- Anpassungen ---------- */
#touchHint.gone{opacity:0;transition:opacity .6s}
@media(pointer:coarse){.running #touchHint{display:block;position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);font-size:10px;letter-spacing:2px;color:#f2e2c8;background:rgba(26,16,8,.65);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 14px;pointer-events:none}.running #bossBar{bottom:max(46px,env(safe-area-inset-bottom))}}
@media(max-width:700px){header{left:18px;right:18px;top:max(18px,env(safe-area-inset-top))}.brand{font-size:21px}.brand small{font-size:8px;letter-spacing:1px}.top-buttons button{height:35px;width:37px;border-radius:11px;font-size:18px}.legion-hud span{font-size:9px;letter-spacing:1px}.legion-hud strong{font-size:50px}#intro{padding:84px 12px 56px}.menu{padding:26px 18px 20px;border-radius:24px}.logo{font-size:clamp(64px,19vw,88px);margin-bottom:12px}.logo .badge{width:56px;height:56px;font-size:22px;right:-46px;top:-40px}.pitch{font-size:15px}.features span{padding:8px 4px 6px;font-size:8px}.features b{font-size:20px}.mode-choices button{padding:8px 14px 6px;font-size:17px}.primary{font-size:24px;padding:13px 18px 11px}.primary span{width:38px;height:38px;font-size:18px}.controls-note{font-size:11px;margin-top:12px}.record{font-size:10px;letter-spacing:1.5px}.back{left:18px;bottom:14px;font-size:10px}#objectives{left:18px;top:81px;gap:12px;font-size:8px}#objectives b{font-size:22px}.running #scoreWrap{right:18px;top:81px}#scoreWrap strong{font-size:29px}#scoreWrap small{font-size:8px}#notice{top:24%;max-width:95%;font-size:24px;white-space:normal;border-radius:22px}dialog{padding:24px;border-radius:22px}dialog h2{font-size:42px}.running #bossBar{width:min(84%,520px)}}
@media(max-height:560px){#intro{padding:58px 12px 24px;align-items:flex-start}.menu{padding:16px 22px 14px}.tags{margin-bottom:4px}.logo{font-size:54px;margin:2px 0 8px;animation:none;max-width:none}.logo .line{display:inline-block;margin:0 5px}.logo .badge{width:46px;height:46px;font-size:18px;right:-52px;top:-10px}.pitch,.features,.controls-note{display:none}.mode-choices{margin-bottom:10px}.primary{padding:10px 18px 9px;font-size:22px}.record{margin-top:10px;padding:6px 10px}.back{display:none}.legion-hud strong{font-size:44px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}