:root{
      --brand-font:'Orbitron',Inter,ui-sans-serif,system-ui,sans-serif;
      --bg:#050814;
      --glass:rgba(255,255,255,.10);
      --glass2:rgba(255,255,255,.16);
      --line:rgba(255,255,255,.18);
      --text:#eef4ff;
      --muted:#aebbd2;
      --accent:#87d8ff;
      --accent2:#76ffcf;
      --danger:#ff6b8b;
      --warn:#ffd36e;
      --shadow:0 20px 60px rgba(0,0,0,.45);
      --blur:blur(18px);
    }
    *{box-sizing:border-box}
    /* Standalone-Route: volle Viewportfläche (wie HTML-Version) */
    html.games-divion-root-html{
      margin:0!important;
      padding:0!important;
      width:100%;
      height:100%;
      overflow:hidden;
    }
    body.games-divion-page{
      margin:0!important;
      padding:0!important;
      width:100%;
      min-height:100vh;
      min-height:100dvh;
      height:100%;
      overflow:hidden;
      color:var(--text);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at 20% 20%, rgba(120,170,255,.16), transparent 25%),
        radial-gradient(circle at 80% 10%, rgba(150,255,220,.11), transparent 20%),
        radial-gradient(circle at 50% 80%, rgba(120,140,255,.10), transparent 28%),
        linear-gradient(180deg, #08101d 0%, #04070f 100%);
    }
    /* Eingeloggte WP-Admins: Admin-Bar einrechnen (WP setzt sonst html { margin-top }) */
    body.games-divion-page.admin-bar{
      padding-top:32px;
    }
    @media screen and (max-width:782px){
      body.games-divion-page.admin-bar{padding-top:46px}
    }
    #games-divion-root{
      display:flex;
      flex-direction:column;
      width:100%;
      min-height:100vh;
      min-height:100dvh;
      flex:1 1 auto;
    }
    body.games-divion-page.admin-bar #games-divion-root{
      min-height:calc(100vh - 32px);
      min-height:calc(100dvh - 32px);
    }
    @media screen and (max-width:782px){
      body.games-divion-page.admin-bar #games-divion-root{
        min-height:calc(100vh - 46px);
        min-height:calc(100dvh - 46px);
      }
    }
    #app{
      position:relative;
      width:100%;
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      height:100%;
      min-height:100%;
    }
    #gameStage{
      position:relative;
      flex:1 1 0;
      min-height:0;
      width:100%;
    }
    #heroPoster{
      position:absolute;inset:0;z-index:1;overflow:hidden;
      background:#03060f;
      pointer-events:none;
    }
    #heroPoster[hidden]{display:none!important}
    .hero-poster-bg{
      position:absolute;inset:0;width:100%;height:100%;
      object-fit:cover;object-position:center;
      user-select:none;-webkit-user-drag:none;
    }
    .hero-poster-logo{
      position:absolute;left:0;right:0;width:100%;
      height:auto;max-height:min(42vh,280px);
      bottom:max(12px,min(8vh,52px));
      object-fit:contain;object-position:center bottom;
      pointer-events:none;user-select:none;
      filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));
    }
    @media (orientation: portrait) and (max-width: 980px){
      .hero-poster-logo{
        max-height:min(36vh,260px);
        bottom:max(92px,min(18vh,148px));
      }
    }
    .hero-brand-corner{
      position:absolute;
      right:20px;
      bottom:20px;
      width:min(18vw,180px);
      max-width:180px;
      min-width:92px;
      height:auto;
      object-fit:contain;
      object-position:right bottom;
      pointer-events:none;
      user-select:none;
      filter:drop-shadow(0 6px 18px rgba(0,0,0,.38));
    }
    @media (orientation: portrait) and (max-width: 980px){
      .hero-brand-corner{
        right:16px;
        bottom:16px;
        width:min(28vw,132px);
        min-width:74px;
      }
    }
    /* Credits „i“ in .stix-actions (wie Musik / SFX / Vollbild); [hidden] nur auf Startseite sichtbar */
    #creditsFab.stix-btn-credits{
      font:800 15px/1 ui-sans-serif,system-ui,sans-serif;
      font-style:italic;
      min-width:40px;
    }
    #creditsFab[hidden]{
      display:none !important;
    }
    #creditsFab.stix-btn-credits:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    /* Hall of Fame / Highscore: volle Flaeche der gameStage (zwischen Hero/Spielfeld und Footer), reinschieben */
    .hof-panel{
      position:absolute;
      inset:0;
      z-index:40;
      overflow:hidden;
      pointer-events:none;
      visibility:hidden;
      opacity:0;
      transition:opacity .38s ease, visibility 0s linear .42s;
    }
    .hof-panel.is-open{
      pointer-events:auto;
      visibility:visible;
      opacity:1;
      transition-delay:0s, 0s;
    }
    .hof-panel__sheet{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      max-height:100%;
      padding:clamp(18px,4.5vw,44px) clamp(16px,3.5vw,36px) clamp(20px,4vh,36px);
      overflow-x:hidden;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      background:
        linear-gradient(180deg, rgba(135,216,255,.12) 0%, transparent 42%),
        linear-gradient(165deg, rgba(8,16,34,.96) 0%, rgba(4,9,20,.99) 100%);
      border:1px solid rgba(135,216,255,.2);
      box-shadow:0 -12px 60px rgba(0,0,0,.35), inset 0 0 100px rgba(60,120,255,.06);
      transform:translate3d(108%,0,0);
      transition:transform .62s cubic-bezier(0.32,0.72,0.25,1);
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:10px;
    }
    .hof-panel.is-open .hof-panel__sheet{
      transform:translate3d(0,0,0);
    }
    .hof-panel__close{ z-index:2; }
    .hof-panel__title{
      margin:0 44px 0 0;
      font-size:clamp(22px,4.2vw,34px);
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:#dff8ff;
      text-shadow:0 6px 24px rgba(80,160,255,.35);
    }
    .hof-panel__intro{
      margin:0 0 8px;
      font-size:14px;
      line-height:1.5;
      color:var(--muted);
    }
    .hof-panel__lead{
      margin:0;
      font-size:16px;
      line-height:1.45;
      color:#d4e2f8;
    }
    .hof-panel__hint{
      margin:0 0 8px;
      font-size:13px;
      line-height:1.5;
      color:rgba(174,187,210,.95);
    }
    .hof-panel__hint.tiny{ font-size:12px; }
    .hof-panel__form{ margin-top:4px; }
    .hof-panel__actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
      margin:8px 0 0;
    }
    .hof-panel__feedback{ margin:0; }
    .hof-panel__loading{ list-style:none; margin:0; padding:12px; color:var(--muted); }
    #hallOfFameList.hof-panel__list{
      margin:8px 0 0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    #hallOfFameList .hof-row{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:12px 16px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
      opacity:0;
      transform:translate3d(20px,0,0);
    }
    #hallOfFameList.hof-ready .hof-row{
      animation: hofRowIn .48s cubic-bezier(0.32,0.72,0.25,1) forwards;
    }
    #hallOfFameList.hof-ready .hof-row:nth-child(1){ animation-delay:.05s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(2){ animation-delay:.1s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(3){ animation-delay:.15s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(4){ animation-delay:.2s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(5){ animation-delay:.25s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(6){ animation-delay:.3s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(7){ animation-delay:.35s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(8){ animation-delay:.4s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(9){ animation-delay:.45s; }
    #hallOfFameList.hof-ready .hof-row:nth-child(10){ animation-delay:.5s; }
    @keyframes hofRowIn{
      to{ opacity:1; transform:translate3d(0,0,0); }
    }
    #hallOfFameList .hof-rank{
      font-family:var(--brand-font);
      font-size:clamp(20px,3.5vw,28px);
      font-weight:900;
      color:rgba(135,216,255,.85);
      min-width:2ch;
      text-align:right;
    }
    #hallOfFameList .hof-main{ min-width:0; }
    #hallOfFameList .hof-name{
      display:block;
      font-weight:800;
      color:#f0f6ff;
      font-size:15px;
      line-height:1.35;
    }
    #hallOfFameList .hof-stats-wrap{
      display:flex;
      flex-flow:row wrap;
      align-items:center;
      justify-content:flex-end;
      gap:12px 14px;
      min-width:0;
    }
    #hallOfFameList .hof-stats{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:6px;
      font-size:13px;
      color:var(--muted);
      text-align:right;
    }
    #hallOfFameList .hof-score{ color:var(--accent2); font-weight:800; }
    #hallOfFameList .hof-levels{ color:#c5dbf4; }
    #hallOfFameList .hof-level-thumb{
      width:56px;
      height:56px;
      border-radius:12px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      box-shadow:0 6px 16px rgba(0,0,0,.22);
      flex:0 0 auto;
    }
    #hallOfFameList .hof-level-thumb img{
      display:block;
      width:100%;
      height:100%;
      object-fit:cover;
      pointer-events:none;
      user-select:none;
      -webkit-user-drag:none;
    }
    #hallOfFameList .hof-row--pending{
      border-color:rgba(118,255,207,.42);
      background:linear-gradient(180deg, rgba(16,44,40,.72), rgba(7,22,25,.66));
      box-shadow:0 10px 24px rgba(118,255,207,.12);
    }
    #hallOfFameList .hof-row--pending .hof-rank{
      color:rgba(118,255,207,.95);
    }
    #hallOfFameList .hof-row--pending .hof-name{
      color:#d8fff0;
    }
    .hof-panel--highscore{ z-index:41; }
    #hallOfFameList .hof-row--register{
      opacity:1;
      transform:none;
      border-color:rgba(118,255,207,.28);
      background:linear-gradient(180deg, rgba(11,28,36,.92), rgba(7,17,27,.9));
      animation:none!important;
    }
    .hof-inline-register{
      display:grid;
      grid-template-columns:minmax(0,1fr);
      gap:10px;
      align-items:stretch;
    }
    .hof-inline-register__lead{
      grid-column:1 / -1;
      margin:0;
      font-size:13px;
      line-height:1.45;
      color:#d4e2f8;
    }
    .hof-inline-register__input{
      min-width:0;
      width:100%;
      padding:12px 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
      color:inherit;
      font-size:16px;
    }
    .hof-inline-register__feedback{
      grid-column:1 / -1;
      margin:0;
      min-height:22px;
      color:rgba(174,187,210,.95);
      font-size:13px;
    }
    .credits-panel__sheet{
      background:
        radial-gradient(circle at top right, rgba(118,255,207,.13), transparent 28%),
        radial-gradient(circle at top left, rgba(135,216,255,.12), transparent 34%),
        linear-gradient(165deg, rgba(8,16,34,.98) 0%, rgba(4,9,20,.995) 100%);
    }
    .credits-panel__hero{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      margin:0 44px 10px 0;
    }
    .credits-panel__hero-logo,
    .credits-panel__hero-logo-link{
      display:block;
    }
    .credits-panel__hero-logo{
      max-width:144px;
      max-height:64px;
      width:auto;
      height:auto;
      object-fit:contain;
      filter:drop-shadow(0 8px 20px rgba(0,0,0,.28));
    }
    .credits-panel__grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
      gap:14px;
      margin-top:10px;
    }
    .credits-card{
      min-height:148px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:14px;
      padding:18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(12,28,42,.82), rgba(8,17,28,.86));
      box-shadow:0 12px 28px rgba(0,0,0,.24);
    }
    .credits-card__eyebrow{
      margin:0;
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:rgba(174,187,210,.9);
      font-weight:800;
    }
    .credits-card__body{
      display:grid;
      gap:10px;
    }
    .credits-card__title{
      font-size:18px;
      line-height:1.35;
      color:#f2f7ff;
      font-weight:800;
    }
    .credits-card__link{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:13px;
      color:var(--accent);
      text-decoration:none;
      font-weight:700;
      word-break:break-word;
    }
    .credits-card__link:hover{
      text-decoration:underline;
    }
    .credits-panel__actions{
      margin-top:18px;
      justify-content:flex-start;
    }
    .credits-close{
      position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:12px;
      border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);
      font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
    }
    .credits-close:hover{background:rgba(255,255,255,.1)}
    canvas{display:block;width:100%;height:100%;background:transparent;position:relative;z-index:0;outline:none}
    .panel{
      position:absolute;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
      background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
      border:1px solid rgba(255,255,255,.16); box-shadow:var(--shadow); border-radius:22px;
    }
    /* HUD blockiert keine Pointer */
    #hud{
      top:0;left:0;right:0;padding:12px 18px 14px;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-start;justify-content:space-between;pointer-events:none;
      border:0;
      border-bottom:1px solid rgba(135,216,255,.28);
      border-radius:0;
      box-shadow:none;
      background:linear-gradient(180deg, rgba(7,14,28,.72), rgba(7,14,28,.36));
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      z-index:2;
      transition:transform .82s cubic-bezier(0.32,0.72,0.25,1),opacity .72s ease;
    }
    .hud-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:auto}
    .hud-btn{
      appearance:none;border:1px solid rgba(255,255,255,.2);
      background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
      color:var(--text);padding:8px 14px;border-radius:14px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)
    }
    .hud-btn:hover{transform:translateY(-1px)}
    .hud-btn-ghost{opacity:.92}
    #gameOverOverlay{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      z-index:12;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:14px;
      padding:22px 28px;border-radius:18px;
      background:linear-gradient(180deg, rgba(8,16,34,.82), rgba(6,11,24,.72));
      border:1px solid rgba(255,255,255,.2);
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      cursor:pointer;
    }
    #gameOverOverlay.game-over-overlay--record{
      border-color:rgba(118,255,207,.42);
      background:linear-gradient(180deg, rgba(10,32,28,.88), rgba(6,22,18,.78));
      box-shadow:0 12px 40px rgba(80,200,160,.18);
    }
    #gameOverOverlay.game-over-overlay--record #gameOverText{
      color:#c8fff0;
      text-shadow:0 4px 24px rgba(118,255,207,.35);
    }
    #startOverlay{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      z-index:4;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:12px;
      padding:20px 26px;border-radius:18px;
      background:linear-gradient(180deg, rgba(8,16,34,.8), rgba(6,11,24,.68));
      border:1px solid rgba(255,255,255,.2);
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      cursor:pointer;
    }
    #startText{
      font-size:clamp(28px,4.8vw,56px);
      font-weight:900;
      letter-spacing:.03em;
      color:#dff8ff;
      text-align:center;
      text-wrap:balance;
      text-shadow:0 8px 18px rgba(120,190,255,.35);
    }
    .overlay-hint{
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(220,236,255,.78);
    }
    #startOverlay.hidden{display:none!important}
    #gameOverOverlay.hidden{display:none!important}
    #gameOverText{
      font-size:clamp(34px,6vw,74px);
      font-weight:900;letter-spacing:.04em;text-transform:uppercase;
      color:#f7fbff;
      text-shadow:
        0 0 8px rgba(175,225,255,.95),
        0 0 22px rgba(120,200,255,.78),
        0 0 46px rgba(74,170,255,.62),
        0 8px 20px rgba(38,120,210,.35);
    }
    #gameOverOverlay.shake{
      animation:gameOverShake .5s linear;
    }
    @keyframes gameOverShake{
      0%{transform:translate(-50%,-50%) translate(0,0) rotate(0deg)}
      10%{transform:translate(-50%,-50%) translate(-9px,6px) rotate(-1.8deg)}
      20%{transform:translate(-50%,-50%) translate(9px,-4px) rotate(1.9deg)}
      30%{transform:translate(-50%,-50%) translate(-8px,5px) rotate(-1.5deg)}
      40%{transform:translate(-50%,-50%) translate(8px,-6px) rotate(1.8deg)}
      50%{transform:translate(-50%,-50%) translate(-7px,4px) rotate(-1.2deg)}
      60%{transform:translate(-50%,-50%) translate(7px,-4px) rotate(1.2deg)}
      70%{transform:translate(-50%,-50%) translate(-5px,3px) rotate(-0.9deg)}
      80%{transform:translate(-50%,-50%) translate(4px,-3px) rotate(0.8deg)}
      90%{transform:translate(-50%,-50%) translate(-3px,2px) rotate(-0.4deg)}
      100%{transform:translate(-50%,-50%) translate(0,0) rotate(0deg)}
    }
    #app.win-mode #hud{
      transform:translateY(calc(-100% - 32px));
      opacity:0;
      pointer-events:none;
    }
    .hud-block{display:flex;align-items:center;gap:14px;min-width:0}
    .hud-chip{padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);min-width:96px}
    button.hud-chip{
      appearance:none;
      font:inherit;
      color:inherit;
      text-align:left;
    }
    #hud .hud-chip--best{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content:center;
      pointer-events:auto;
      cursor:pointer;
      position:relative;
      z-index:5;
      touch-action:manipulation;
      -webkit-tap-highlight-color:rgba(135,216,255,.25);
    }
    #hud .hud-chip--best:focus-visible{
      outline:2px solid var(--accent);
      outline-offset:2px;
    }
    .hud-chip .value.small{white-space:normal;line-height:1.35;max-width:min(42vw,380px)}
    .label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:4px}
    .value{font-size:18px;font-weight:700;white-space:nowrap}
    .small{font-size:14px}
    .progress-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
    .reveal-now{font-size:clamp(17px,2.4vw,22px);font-weight:800;color:var(--accent2);letter-spacing:-.02em}
    .prog-sep{color:var(--muted);opacity:.55;font-weight:600}
    .prog-ziel,.prog-stoer{font-size:11px;font-weight:600;color:var(--muted);opacity:.88}
    .reveal-target{font-size:10px;font-weight:600;color:var(--muted);opacity:.72}
    #progressWrap{width:min(34vw,420px);max-width:420px;min-width:190px}
    #progressBar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
    #progressFill{
      height:100%;width:0%;border-radius:999px;
      background:linear-gradient(90deg, rgba(135,216,255,.8), rgba(118,255,207,.95));
      box-shadow:0 0 20px rgba(135,216,255,.55);transition:width .25s ease
    }
    .hidden{display:none !important}
    .status-line{color:var(--accent2);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
    .danger{color:var(--danger)}
    .warn{color:var(--warn)}
    .kbd{
      display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:6px 10px;margin:0 4px;
      border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font-weight:800;font-size:13px
    }
    #stixBar{
      flex-shrink:0;z-index:20;
      background:linear-gradient(180deg,#0c1832 0%,#060d1c 100%);
      border-top:3px solid #4db8ff;
      box-shadow:0 -6px 28px rgba(0,0,0,.45);
      padding:12px 16px 14px;
      font-size:clamp(13px,1.9vw,16px);line-height:1.45;color:#dcecff;
      max-height:420px;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      transition:max-height .78s cubic-bezier(0.32,0.72,0.25,1),opacity .72s ease,padding .72s ease,border-width .45s ease,transform .82s cubic-bezier(0.32,0.72,0.25,1);
    }
    #app.win-mode #stixBar{
      max-height:0!important;
      opacity:0;
      padding-top:0!important;
      padding-bottom:0!important;
      border-top-width:0;
      overflow:hidden;
      pointer-events:none;
      transform:translateY(calc(100% + 18px));
    }
    #app.overlay-open #hud,
    #app.overlay-open #stixBar{
      opacity:0;
      pointer-events:none;
      transform:translateY(12px);
    }
    #app.overlay-open #stixBar{
      max-height:0!important;
      padding-top:0!important;
      padding-bottom:0!important;
      border-top-width:0;
      overflow:hidden;
    }
    /* Gewinn: Leiste als Overlay unten auf der gameStage — nicht unterhalb (sonst auf Mobil unter dem Viewport). */
    #levelWinBar{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      z-index:25;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:6px;
      padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
      max-height:min(46vh,320px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      background:linear-gradient(0deg, rgba(4,8,18,.94), rgba(4,8,18,.45));
      border-top:1px solid rgba(135,216,255,.22);
      box-shadow:0 -8px 32px rgba(0,0,0,.4);
      pointer-events:auto;
    }
    #levelWinBar.hidden{display:none!important}
    #app.win-mode #gameStage{
      flex:1;
      min-height:0;
    }
    #app.win-mode #levelWinBar:not(.hidden){
      animation:winBarIn .6s cubic-bezier(0.32,0.72,0.25,1) .45s both;
    }
    @keyframes winBarIn{
      from{opacity:0;transform:translateY(18px)}
      to{opacity:1;transform:translateY(0)}
    }
    #winTitle{
      font-size:clamp(15px,2.2vw,22px);
      font-weight:700;
      color:#f0f8ff;
      letter-spacing:.01em;
      text-align:center;
      line-height:1.35;
      max-width:min(92vw,720px);
      text-shadow:0 2px 14px rgba(0,0,0,.45);
    }
    #winKeyHint{
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(180,210,240,.72);
    }
    .stix-inner{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
    .stix-copy{color:#c5dbf4;font-size:13px}
    .stix-actions{display:flex;gap:8px;flex-wrap:wrap}
    .preview{
      width:min(520px, 82vw);aspect-ratio:16/9;margin:0 auto 18px;border-radius:20px;overflow:hidden;
      border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow);background:rgba(255,255,255,.05);position:relative
    }
    .preview img{width:100%;height:100%;object-fit:cover;display:block}
    .preview::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(3,7,16,.1), rgba(3,7,16,.28));
      pointer-events:none
    }
    .meta-line{margin-top:14px;color:var(--muted);font-size:14px}
    .tiny{font-size:12px;color:var(--muted)}
    @media (max-width: 980px) {
      .credits-panel__hero{
        margin-right:0;
        flex-direction:column;
        align-items:flex-start;
      }
      .credits-panel__hero-logo{
        max-width:120px;
        max-height:52px;
      }
      .credits-panel__grid{
        grid-template-columns:1fr;
      }
      /* min-height:0: Flex-Kind darf schrumpfen. #levelWinBar liegt in der Stage (position:absolute unten). */
      #gameStage{
        min-height:0;
      }
      #hud{
        padding:8px 10px 9px;
      }
      .hud-chip{
        min-width:72px;
        padding:6px 8px;
      }
      .label{font-size:10px;letter-spacing:.1em}
      .value{font-size:14px}
      #progressWrap{min-width:120px;width:min(46vw,280px)}
      #progressBar{height:8px}
      #stixBar{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        padding:8px 10px;
        max-height:none;
      }
      .stix-copy{font-size:12px}
      .stix-actions .hud-btn{padding:6px 10px;font-size:12px}
      #startOverlay,#gameOverOverlay{
        inset:auto;
        left:50%;
        top:50%;
        width:min(calc(100% - 24px), 560px);
        max-width:560px;
        transform:translate(-50%,-50%);
        padding:18px 20px;
        background:linear-gradient(180deg, rgba(8,16,34,.82), rgba(6,11,24,.72));
        border:1px solid rgba(255,255,255,.2);
        box-shadow:var(--shadow);
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        justify-content:center;
        align-items:center;
        text-align:center;
      }
      .hof-inline-register{
        grid-template-columns:1fr;
      }
      #app.mobile-minimal #hud,
      #app.mobile-minimal #stixBar{
        opacity:0;
        transform:translateY(-12px);
        pointer-events:none;
      }
      #app.mobile-minimal #stixBar{
        transform:translateY(12px);
      }
      #app.mobile-ui-open #hud,
      #app.mobile-ui-open #stixBar{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
      }
    }
  </style>