* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  :root { --app-sat:0px; --app-sab:0px; --app-sal:0px; --app-sar:0px;
    --sat:max(env(safe-area-inset-top, 0px), var(--app-sat));
    --sab:max(env(safe-area-inset-bottom, 0px), var(--app-sab));
    --sal:max(env(safe-area-inset-left, 0px), var(--app-sal));
    --sar:max(env(safe-area-inset-right, 0px), var(--app-sar)); }
  html, body { width:100%; height:100%; overflow:hidden; background:#05060f; touch-action:none;
    -webkit-user-select:none; user-select:none;
    font-family:'Arial Black','Arial Bold',Arial,sans-serif; }
  canvas { display:block; }

  .hide { display:none !important; }
  .ovl { position:fixed; left:0; top:0; right:0; bottom:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; z-index:20; }

  /* ---------- Anime-Banner & Buttons ---------- */
  .jpban { display:inline-block; transform:skewX(-10deg); background:linear-gradient(135deg,#ff2e55,#ff8a2b);
    color:#fff; font-style:italic; font-weight:900; letter-spacing:2px; padding:8px 26px;
    box-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 24px rgba(255,60,90,.5);
    text-shadow:2px 2px 0 rgba(0,0,0,.4); border:3px solid #fff; border-radius:6px; }
  .btn { transform:skewX(-8deg); background:linear-gradient(180deg,#37b6ff,#1560e8);
    color:#fff; font-style:italic; font-weight:900; font-size:22px; letter-spacing:2px;
    padding:16px 40px; border:3px solid #fff; border-radius:14px;
    box-shadow:0 7px 0 #0b2f7a, 0 0 30px rgba(60,160,255,.55); text-shadow:2px 2px 0 rgba(0,0,0,.45);
    cursor:pointer; transition:transform .08s; }
  .btn:active { transform:skewX(-8deg) scale(.94) translateY(3px); box-shadow:0 3px 0 #0b2f7a; }
  .btn.gold { background:linear-gradient(180deg,#ffcf3d,#ff8a00); box-shadow:0 7px 0 #7a4a00, 0 0 30px rgba(255,180,40,.55); }

  /* ---------- Titel ---------- */
  #titleOverlay { justify-content:space-between; padding:calc(var(--sat) + 7vh) var(--sar) calc(var(--sab) + 10vh) var(--sal);
    background:radial-gradient(circle at 50% 58%, rgba(7,13,33,0) 0 32%, rgba(7,13,33,.1) 48%,
      rgba(7,13,33,.42) 72%, rgba(7,13,33,.7) 100%);
    overflow:hidden; }
  #titleOverlay .rays { position:absolute; left:50%; top:54%; width:160vmax; height:160vmax;
    margin:-80vmax 0 0 -80vmax; pointer-events:none; opacity:.18;
    background:repeating-conic-gradient(from 0deg, #7fd0ff 0deg 5deg, transparent 5deg 18deg);
    animation:raySpin 20s linear infinite; }
  @keyframes raySpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
  #titleTop { display:flex; flex-direction:column; align-items:center; z-index:2; }
  .logo { font-size:13vw; line-height:.95; font-style:italic; font-weight:900; letter-spacing:1px;
    background:linear-gradient(180deg,#ffffff 0%, #bfeaff 20%, #3fb2ff 50%, #0f5fe0 80%, #071a5a 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 2px 0 #3fb2ff) drop-shadow(0 4px 0 #1560e8) drop-shadow(0 6px 0 #0f3fa0)
           drop-shadow(0 8px 0 #0a2a6e) drop-shadow(0 10px 0 #05173f)
           drop-shadow(0 12px 8px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(60,160,255,.9))
           drop-shadow(0 0 80px rgba(60,160,255,.4));
    transform:skewX(-8deg) perspective(500px) rotateX(8deg);
    animation:logoFloat 3s ease-in-out infinite; }
  @keyframes logoFloat { 0%,100%{ transform:skewX(-8deg) perspective(500px) rotateX(8deg) translateY(0);}
    50%{ transform:skewX(-8deg) perspective(500px) rotateX(8deg) translateY(-6px);} }
  .logoSub { margin-top:12px; font-size:7.5vw; padding:10px 32px;
    text-shadow:0 2px 0 #cc1a3a, 0 4px 0 #991530, 0 6px 0 #661020, 0 8px 4px rgba(0,0,0,.5);
    transform:perspective(400px) rotateX(5deg) translateZ(-40px) scale(0.92);
    animation:subFloat 3s ease-in-out infinite 0.3s; }
  @keyframes subFloat { 0%,100%{ transform:perspective(400px) rotateX(5deg) translateZ(-40px) scale(0.92) translateY(0);}
    50%{ transform:perspective(400px) rotateX(5deg) translateZ(-40px) scale(0.94) translateY(-4px);} }
  .jpban.logoSub { background:rgba(12,22,52,.72); }
  .tapstart { margin-top:0; z-index:2; color:#ffe97a; font-style:italic; font-weight:900; font-size:5.4vw;
    letter-spacing:3px; text-shadow:0 0 14px rgba(255,220,90,.7), 0 0 40px rgba(255,220,90,.3);
    animation:pulse 1.1s ease-in-out infinite; }
  @keyframes pulse { 0%,100%{ opacity:.55; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
  #titleOverlay .particle-bg { position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none;
    background:radial-gradient(circle at 30% 40%, rgba(60,160,255,.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(255,60,150,.06) 0%, transparent 40%); 
    animation:bgShift 8s ease-in-out infinite; }
  @keyframes bgShift { 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

  /* ---------- HUD ---------- */
  #hud { position:fixed; left:var(--sal); right:var(--sar); top:16px; padding:calc(var(--sat) + 20px) 12px 0 12px;
    display:flex; justify-content:space-between; align-items:flex-start; z-index:10; pointer-events:none; }
  #spinWrap { width:44vw; max-width:260px; flex:0 0 auto; }
  #spinLabel { color:#fff; font-size:11px; font-style:italic; letter-spacing:1px; text-shadow:1px 1px 0 #000; margin-bottom:3px; }
  #spinBar { height:16px; background:rgba(0,0,0,.55); border:2px solid #fff; border-radius:9px; overflow:hidden;
    box-shadow:0 3px 0 rgba(0,0,0,.4); transform:skewX(-8deg); }
  #spinFill { height:100%; width:100%; background:linear-gradient(90deg,#37e0ff,#2a7bff); transition:width .12s linear; }
  #hudRight { display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:48vw; }
  .moneyChip { background:linear-gradient(180deg,#ffd95e,#ff9d1f); color:#4a2a00; font-weight:900;
    font-style:italic; font-size:16px; padding:5px 14px; border:2px solid #fff; border-radius:20px;
    box-shadow:0 3px 0 rgba(0,0,0,.4); text-shadow:none; }
  #enemyPips { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .pip { width:56px; }
  .pipName { color:#ffb3c0; font-size:9px; font-style:italic; text-align:center; text-shadow:1px 1px 0 #000;
    white-space:normal; overflow:visible; min-height:2.5em; line-height:1.05;
    display:flex; align-items:center; justify-content:center; }
  .pipBar { height:9px; background:rgba(0,0,0,.55); border:2px solid #fff; border-radius:6px; overflow:hidden; transform:skewX(-8deg); }
  .pipFill { height:100%; width:100%; background:linear-gradient(90deg,#ff5f7a,#ff2a3f); }
  .pip.dead { opacity:.35; }

    .skillBtn { position:fixed; right:calc(var(--sar) + 18px); bottom:calc(var(--sab) + 18px);
    width:96px; height:96px; border-radius:50%; border:3px solid #fff; background:#101828;
    color:#fff; z-index:20; pointer-events:auto; overflow:hidden; padding:0;
    font-family:inherit; font-style:italic; font-weight:900; letter-spacing:1px; }
  .skillBtn.ready { border-color:#ffe600; box-shadow:0 0 16px rgba(255,230,0,.55); }
  .skillFill { position:absolute; inset:0; border-radius:50%; pointer-events:none; }
  .skillCd { position:absolute; inset:8px; border-radius:50%; background:rgba(0,0,0,.45);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; pointer-events:none; }
  .skillLbl { position:relative; z-index:1; font-size:11px; }
  .skillWarn { position:absolute; left:50%; top:8px; transform:translateX(-50%);
    background:rgba(255,40,60,.9); color:#fff; font-size:9px; padding:2px 6px; border-radius:6px; pointer-events:none; }
  .pip.warn { box-shadow:0 0 0 2px #ffe600; }
  .bskills { color:#ffe9a8; font-size:8px; text-align:center; line-height:1.2; min-height:18px; margin:0 0 4px 0; }
  #arenaTitleCard { position:fixed; left:50%; top:16%; transform:translate(-50%,-12px) skewX(-7deg);
    width:max-content; max-width:calc(100vw - 32px); z-index:18; pointer-events:none; opacity:0;
    padding:9px 18px; border:2px solid rgba(255,255,255,.9);
    border-radius:10px; background:linear-gradient(135deg,rgba(8,20,48,.92),rgba(32,62,112,.88));
    color:#fff; font-size:18px; line-height:1.16; font-style:italic; font-weight:900; letter-spacing:1px;
    text-shadow:0 2px 0 #061127; box-shadow:0 0 22px rgba(76,181,255,.38);
    transition:opacity .16s ease, transform .16s ease; }
  #arenaTitleCard.show { opacity:1; transform:translate(-50%,0) skewX(-7deg); }
  #arenaStateIcon { position:fixed; left:calc(var(--sal) + 12px); top:calc(var(--sat) + 84px);
    z-index:11; pointer-events:none; max-width:44vw; overflow:visible; white-space:normal; line-height:1.15;
    padding:4px 8px; border:1px solid rgba(255,255,255,.72); border-radius:9px;
    background:rgba(5,14,35,.76); color:#d9f4ff; font-size:9px; font-weight:900;
    letter-spacing:.8px; text-shadow:1px 1px 0 #000; }
  #arenaTitleCard[data-arena-pattern]::before,
  #arenaStateIcon[data-arena-pattern]::before { content:var(--arena-cue-symbol,"");
    display:inline-grid; place-items:center; width:var(--arena-cue-size,0);
    min-width:var(--arena-cue-size,0); height:var(--arena-cue-size,0);
    margin-right:var(--arena-cue-gap,0); border:var(--arena-cue-border,0) solid currentColor;
    border-radius:3px;
    color:#fff; background:#07112a; font-style:normal; font-weight:900;
    line-height:1; text-align:center; text-shadow:0 1px 0 #000; vertical-align:-.12em; }
  [data-arena-pattern="star-impact"] { --arena-cue-symbol:"✦"; --arena-cue-size:1.35em;
    --arena-cue-gap:.42em; --arena-cue-border:1px; }
  [data-arena-pattern="directional-chevron"] { --arena-cue-symbol:"≫"; --arena-cue-size:1.35em;
    --arena-cue-gap:.42em; --arena-cue-border:1px; }
  [data-arena-pattern="triangle-crack"] { --arena-cue-symbol:"△╱"; --arena-cue-size:1.35em;
    --arena-cue-gap:.42em; --arena-cue-border:1px; }
  [data-arena-pattern="snowflake-hatch"] { --arena-cue-symbol:"❄"; --arena-cue-size:1.35em;
    --arena-cue-gap:.42em; --arena-cue-border:1px; }
  @media (max-width:820px) {
    #arenaTitleCard { max-width:calc(100vw - 24px); padding:9px 14px;
      font-size:clamp(13px,3.85vw,16px); }
    [data-arena-pattern="star-impact"], [data-arena-pattern="directional-chevron"],
    [data-arena-pattern="triangle-crack"], [data-arena-pattern="snowflake-hatch"] {
      --arena-cue-size:1.25em;
    }
  }
  #hintText { position:fixed; left:var(--sal); right:var(--sar); bottom:calc(var(--sab) + 18px);
    text-align:center; color:#fff; font-style:italic; font-size:14px; letter-spacing:1px;
    text-shadow:2px 2px 0 rgba(0,0,0,.6); z-index:10; pointer-events:none; transition:opacity 1s; }

  /* ---------- Countdown / RIP ---------- */
  #countdownEl { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; z-index:2200; pointer-events:none;
    font-size:clamp(72px,28vmin,180px); line-height:1; font-style:italic; font-weight:900; color:#fff;
    text-shadow:0 0 30px rgba(120,200,255,.9), 4px 6px 0 #0a2a6e, -2px -2px 0 #0a2a6e, 2px -2px 0 #0a2a6e, -2px 2px 0 #0a2a6e; }
  #countdownEl.pop { animation:cpop .68s ease-out forwards; }
  @keyframes cpop { 0%{ transform:translate(-50%,-50%) scale(2.1); opacity:0;} 25%{ transform:translate(-50%,-50%) scale(1); opacity:1;} 80%{ opacity:1;} 100%{ transform:translate(-50%,-50%) scale(.92); opacity:0;} }
  #ripBanner { position:fixed; left:50%; top:38%; transform:translate(-50%,-50%) skewX(-10deg) rotate(-5deg);
    z-index:41; pointer-events:none; background:linear-gradient(135deg,#ff2e55,#ff8a2b);
    border:4px solid #fff; border-radius:10px; padding:14px 30px;
    color:#fff; font-style:italic; font-weight:900; font-size:11vw; letter-spacing:2px;
    text-shadow:3px 3px 0 rgba(0,0,0,.45); box-shadow:0 0 50px rgba(255,80,60,.8); }
  #ripBanner.slam { animation:slam .9s ease-out; }
  @keyframes slam { 0%{ transform:translate(-50%,-50%) skewX(-10deg) rotate(-5deg) scale(3); opacity:0;}
    18%{ transform:translate(-50%,-50%) skewX(-10deg) rotate(-5deg) scale(1); opacity:1;}
    75%{ opacity:1;} 100%{ transform:translate(-50%,-50%) skewX(-10deg) rotate(-5deg) scale(1.05); opacity:0;} }

  /* ---------- Launcher ---------- */
  #launchOverlay { background:radial-gradient(130% 100% at 50% 20%, rgba(20,30,80,.92) 0%, rgba(5,7,20,.96) 70%); z-index:30; }
  #launchTitle { margin-bottom:4vh; font-size:6vw; }
  #launcherBody { width:56vw; max-width:300px; height:34vw; max-height:180px; border-radius:22px;
    background:linear-gradient(160deg,#e8edf5 0%, #9aa6ba 45%, #5c687e 100%);
    border:4px solid #2c3444; box-shadow:0 10px 0 rgba(0,0,0,.45), inset 0 4px 10px rgba(255,255,255,.6);
    position:relative; display:flex; align-items:center; justify-content:center; }
  #launcherWindow { width:40%; padding-top:40%; border-radius:50%; position:relative;
    background:radial-gradient(circle at 35% 30%, #ffffff 0%, var(--beycol,#3aa0ff) 35%, #0a1c3a 100%);
    border:5px solid #2c3444; box-shadow:inset 0 0 18px rgba(0,0,0,.6); }
  #cordTrack { width:80vw; max-width:420px; height:20px; margin-top:5vh; border-radius:12px;
    background:#141a2b; border:3px solid #3a4560; position:relative;
    box-shadow:inset 0 3px 8px rgba(0,0,0,.8); }
  #cordFill { position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:9px;
    background:linear-gradient(90deg,#37e0ff,#ffe14d,#ff5f2e); }
  #cordHandle { position:absolute; left:0; top:50%; width:64px; height:64px; margin-left:-8px;
    transform:translate(0,-50%); border-radius:14px;
    background:repeating-linear-gradient(90deg,#ff8a2b 0 8px,#e05e10 8px 16px);
    border:4px solid #fff; box-shadow:0 6px 0 rgba(0,0,0,.45); }
  #pullMsg { width:min(92vw, 660px); max-width:calc(100vw - 32px); margin:4.5vh auto 0;
    color:#ffe97a; font-style:italic; font-weight:900; font-size:clamp(18px, 4.2vw, 36px);
    line-height:1.15; letter-spacing:clamp(.5px, .12vw, 1px); text-align:center; white-space:nowrap;
    text-shadow:2px 2px 0 rgba(0,0,0,.6); min-height:1.2em; }

  /* ---------- Ergebnis ---------- */
  #resultOverlay { background:rgba(4,6,16,.82); z-index:35; }
  #resultCard { background:linear-gradient(180deg,#101a3a,#0a0f24); border:3px solid #4d7dff; border-radius:18px;
    padding:26px 22px; width:84vw; max-width:380px; box-shadow:0 0 40px rgba(70,120,255,.4);
    display:flex; flex-direction:column; align-items:center; }
  #resultTitle { font-size:12vw; margin-bottom:14px; }
  #resultTitle.win { background:linear-gradient(135deg,#ffd23d,#ff8a2b); }
  #resultTitle.lose { background:linear-gradient(135deg,#5a6b8f,#2c3450); box-shadow:0 6px 0 rgba(0,0,0,.35); }
  .rline { width:100%; display:flex; justify-content:space-between; color:#cfe0ff; font-size:15px;
    font-style:italic; padding:5px 4px; border-bottom:1px dashed rgba(120,150,255,.25); }
  .rline b { color:#ffe14d; font-style:normal; }
  #resultTotal { margin:14px 0 18px 0; font-size:26px; color:#ffe14d; font-style:italic;
    text-shadow:0 0 16px rgba(255,220,80,.6); }

  /* ---------- Werkstatt / Shop ---------- */
  #shopOverlay { justify-content:flex-end; z-index:25; pointer-events:none; }
  #shopPreviewBadge { position:absolute; left:50%; top:18px; transform:translateX(-50%) skewX(-8deg);
    pointer-events:none; color:#fff7a8; background:rgba(6,10,28,.78); border:2px solid #ffe44d;
    border-radius:9px; padding:7px 18px; font-size:13px; font-style:italic; letter-spacing:1.5px;
    text-shadow:0 0 10px rgba(255,226,64,.65); box-shadow:0 0 20px rgba(255,218,50,.22); }
  #shopPreviewBadge:empty { display:none; }
  #shopPanel { pointer-events:auto; position:relative; width:100%; height:min(64vh, calc(100dvh - var(--sat) - var(--sab))); background:linear-gradient(180deg, rgba(12,19,45,.88), rgba(8,13,34,.96));
    border-top:1px solid #35e8ff; border-radius:22px 22px 0 0; padding:14px 12px calc(var(--sab) + 14px) 12px;
    padding-left:max(12px, var(--sal)); padding-right:max(12px, var(--sar));
    box-shadow:0 -10px 40px rgba(30,60,160,.45); max-height:64vh; overflow-y:auto; overscroll-behavior-y:contain; }
  #shopHead { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding:0 4px; }
  #shopHead .jpban { font-size:17px; padding:5px 18px; }
  #beyCards { touch-action:pan-x pan-y; display:flex; gap:10px; overflow-x:auto; padding:6px 2px 10px 2px; -webkit-overflow-scrolling:touch; }
  .beycard { flex:0 0 auto; width:132px; background:#0d1330; border:3px solid #26325e; border-radius:14px;
    padding:10px 8px; display:flex; flex-direction:column; align-items:center; }
  .beycard.sel { border-color:#3fd6ff; box-shadow:0 0 18px rgba(60,200,255,.55); }
  .beycard.previewing { border-color:#ffe44d; box-shadow:0 0 20px rgba(255,226,64,.5); }
  .beycard.locked { opacity:.92; }
  .swatch { width:56px; height:56px; border-radius:50%; border:3px solid #fff; margin-bottom:6px;
    box-shadow:0 0 14px rgba(255,255,255,.25); }
  .bname { color:#fff; font-size:12px; font-style:italic; text-align:center; letter-spacing:.5px;
    min-height:28px; line-height:1.15; }
  .btype { color:#8fb0ff; font-size:9px; letter-spacing:1px; margin:2px 0 6px 0; }
  .stat { width:100%; display:flex; align-items:center; gap:4px; margin-bottom:3px; }
  .stat span { color:#7f92c9; font-size:8px; width:24px; letter-spacing:1px; }
  .statbar { flex:1; height:6px; background:#060a1c; border-radius:3px; overflow:hidden; }
  .statfill { height:100%; border-radius:3px; background:linear-gradient(90deg,#37e0ff,#2a7bff); }
  .cardbtn { margin-top:7px; width:100%; border:2px solid #fff; border-radius:9px; padding:7px 0;
    font-family:inherit; font-style:italic; font-weight:900; font-size:12px; letter-spacing:1px; color:#fff;
    background:linear-gradient(180deg,#37b6ff,#1560e8); box-shadow:0 3px 0 rgba(0,0,0,.4); }
  .cardbtn.buy { background:linear-gradient(180deg,#ffcf3d,#ff8a00); color:#4a2a00; }
  .cardbtn.poor { background:linear-gradient(180deg,#4a5470,#2b3247); color:#9aa6c4; }
  .cardbtn.equipped { background:linear-gradient(180deg,#37e08a,#159a52); }
  #fightBtn { position:relative; left:0; bottom:auto; z-index:1; width:100%; min-height:48px; margin-top:6px; font-size:24px; padding:8px 0; border-radius:16px; transform:none;
    background:linear-gradient(180deg,#f0d56a,#c9a227); color:#1a1400; }
  #fightBtn:active { transform:scale(.97); }

  /* ---------- Effekte ---------- */
  #flashEl { position:fixed; left:0; top:0; right:0; bottom:0; background:#fff; opacity:0;
    pointer-events:none; z-index:15; transition:opacity .22s ease-out; }
  #vig { position:fixed; left:0; top:0; right:0; bottom:0; pointer-events:none; z-index:5;
    background:radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,10,.5) 100%); }
  /* ---------- v2: Shop-Karten, Popups, Raritäten ---------- */
  .beycard { width:152px; padding:12px 10px; background:linear-gradient(180deg,#121a3e,#0a0f26); }
  .beyimg { width:96px; height:96px; object-fit:contain; margin-bottom:4px;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.65)); }
  .bname { font-size:13px; min-height:30px; }
  .beycard.t2 { border-color:#8a5cff; }
  .beycard.leg { border-color:#ffd23d; animation:legglow 1.8s ease-in-out infinite; }
  @keyframes legglow { 0%,100%{ box-shadow:0 0 14px rgba(255,210,61,.55);} 50%{ box-shadow:0 0 28px rgba(0,240,255,.75);} }
  @media (max-height:520px) {
    #shopPreviewBadge { display:none; }
  }
  .statfill.sfa { background:linear-gradient(90deg,#ff8a5f,#ff2e55); }
  .statfill.sfd { background:linear-gradient(90deg,#7fffb0,#18b45f); }
  .statfill.sfs { background:linear-gradient(90deg,#d0a5ff,#8a3cff); }
  .statfill.sft { background:linear-gradient(90deg,#7fe9ff,#1e90ff); }
  .kopop { position:fixed; transform:translate(-50%,-50%) skewX(-8deg); z-index:45;
    pointer-events:none; font-style:italic; font-weight:900; font-size:9vw; letter-spacing:2px;
    animation:kopop .95s ease-out forwards; }
  @keyframes kopop {
    0% { transform:translate(-50%,-50%) skewX(-8deg) scale(2.4); opacity:0; }
    18% { transform:translate(-50%,-50%) skewX(-8deg) scale(1); opacity:1; }
    70% { opacity:1; }
    100% { transform:translate(-50%,-95%) skewX(-8deg) scale(1); opacity:0; }
  }
  /* ---------- v3: 3D-Launcher-Overlay + Lackierung ---------- */
  #launchOverlay { background:none; pointer-events:none; justify-content:flex-end;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 9vh); }
  #launcherBody, #cordHandle { display:none; }
  #cordTrack { width:58vw; max-width:320px; height:12px; margin-top:2.5vh;
    border:1px solid rgba(53,232,255,.4); }
  #launchOverlay #launchTitle { font-size:5vw; max-width:88vw; padding:8px 14px;
    background:rgba(12,19,45,.78); }
  #pullMsg { margin-top:2vh; }
  /* ---------- v4: Level-Auswahl ---------- */
  #levelBar { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px 2px;
    touch-action:pan-x; -webkit-overflow-scrolling:touch; }
  .lvlchip { flex:0 0 auto; min-width:96px; background:#0d1330; border:2px solid #26325e;
    border-radius:12px; padding:7px 10px; }
  .lvlchip.sel { border-color:#ffd23d; box-shadow:0 0 14px rgba(255,210,61,.5); }
  .lvlchip.locked { opacity:.5; }
  .lvlnum { color:#ffe14d; font-style:italic; font-weight:900; font-size:15px; }
  .lvlname { color:#9fb2e0; font-size:9px; letter-spacing:.5px; margin-top:2px; white-space:nowrap; }
  .lvlarena { color:#65dfff; font-size:8px; letter-spacing:.4px; margin-top:3px; white-space:nowrap; }
  #arenaSelector { display:flex; align-items:center; gap:7px; overflow-x:auto; padding:0 2px 9px 2px;
    touch-action:pan-x; -webkit-overflow-scrolling:touch; }
  #arenaSelector.hide { display:none; }
  .arenaSelectLabel { flex:0 0 auto; color:#8fa4d8; font-size:9px; font-weight:900; letter-spacing:1px; }
  .arenaSelectBtn { flex:0 0 auto; border:2px solid #2f477a; border-radius:10px; padding:7px 9px;
    background:#0d1735; color:#bfeaff; font-family:inherit; font-size:10px; font-weight:900; }
  .arenaSelectBtn.on { border-color:#ffe14d; color:#fff6a0; box-shadow:0 0 12px rgba(255,225,77,.35); }
  /* ---------- v5: Werkstatt-Tabs ---------- */
  #shopTabs { display:flex; gap:8px; margin-bottom:10px; }
  .tabbtn { flex:1; font-family:inherit; font-style:italic; font-weight:900; font-size:14px;
    letter-spacing:1px; color:#8fa4d8; background:#0d1330; border:2px solid #26325e;
    border-radius:11px; padding:9px 0; }
  .tabbtn.on { color:#fff; background:linear-gradient(135deg,#8a5cff,#3fb2ff);
    border-color:#35e8ff; box-shadow:0 0 14px rgba(90,140,255,.5); }
  /* ---------- v6: Tutorial ---------- */
  #tutMsg { position:fixed; left:50%; top:calc(var(--sat) + 76px); transform:translateX(-50%); z-index:21;
    background:linear-gradient(135deg,#1e6bff,#00c2ff); border:3px solid #fff; border-radius:10px;
    padding:8px 18px; color:#fff; font-style:italic; font-weight:900; font-size:clamp(12px,2.6vw,16px);
    letter-spacing:1px; text-shadow:2px 2px 0 rgba(0,0,0,.4); box-shadow:0 5px 0 rgba(0,0,0,.35);
    pointer-events:none; text-align:center; max-width:min(72vw, 420px); }
  #debugBadge { position:fixed; left:50%; top:6px; transform:translateX(-50%); z-index:90;
    max-width:calc(100vw - 16px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    padding:4px 8px; border:1px solid rgba(120,220,255,.85); border-radius:7px;
    background:rgba(4,10,24,.78); color:#9eeeff; font:700 clamp(8px,2.2vw,10px)/1.2 monospace;
    letter-spacing:.3px; pointer-events:none; box-shadow:0 0 14px rgba(40,190,255,.25); }

/* Keep provisional geometry behind a branded loading screen until the real rig is ready. */
#beyLoadingScreen{position:fixed;inset:0;z-index:40000;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#123a50,#050b16 72%);color:#d9f7ff;text-align:center;padding:24px;touch-action:none}
#beyLoadingScreen[hidden],#beyLoadingRetry[hidden]{display:none}
#beyLoadingScreen strong{font:italic 900 clamp(30px,8vw,64px)/1.2 Arial,sans-serif;color:#70e1ff;text-shadow:0 4px 0 #075c92;letter-spacing:2px}
#beyLoadingMessage{margin:24px auto;max-width:320px;font:16px/1.5 Arial,sans-serif}
#beyLoadingRetry{min-height:48px;padding:12px 36px;border:1px solid #8aeaff;border-radius:12px;background:#153c52;color:#effaff;font-weight:bold;cursor:pointer}