/* index.php — Seiten-CSS, ausgelagert 2026-09 */
    :root{
      --bg-img: url('/stuff/reycasino.webp'); /* 161 KB statt 3,8 MB PNG (Original bleibt liegen) */
      --panel: rgba(20,14,32,.85);
      --card:  rgba(14,8,22,.93);
      --txt:   #ece6ff;
      --txt-dim:#cbbdf3;
      --pur:   #a983f7;
      --pur-2: #6b2dff;
      --pink:  #ff6eff;
      --blue:  #5865F2;
      --green: #57F287;
      --br:    rgba(130,95,190,.28);
      --chip:  #2c2141;
      --dot:   #ef4444;
      --r:     14px;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    body{
      background:#0a0613 var(--bg-img) center/cover no-repeat fixed;
      color:var(--txt); min-height:100vh; overflow-x:hidden;
    }
    body::before{
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(169,131,247,.25), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 100%, rgba(255,110,255,.18), transparent 60%),
        linear-gradient(180deg, rgba(8,4,16,.55) 0%, rgba(8,4,16,.85) 60%, rgba(8,4,16,.95) 100%);
    }
    a{color:inherit;text-decoration:none}

    /* ── Particle Canvas ── */
    #particle-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

    /* ── Audio Control (Musik) ──
       Frei schwebend direkt unter dem Header, rechts neben dem Header-Sound-
       Regler. var(--banner-h) wird vom App-Update-Banner gesetzt und schiebt
       den Regler automatisch mit nach unten. */
    #audio-control{position:fixed;top:calc(var(--banner-h, 0px) + 78px);right:16px;display:flex;align-items:center;gap:8px;z-index:1300;background:rgba(20,14,32,.78);border:1px solid var(--br);padding:6px 10px;border-radius:9999px;backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
    #audio-control button{background:linear-gradient(135deg,var(--pur),var(--pur-2));border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;color:#fff;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
    #audio-control input[type=range]{-webkit-appearance:none;width:90px;height:5px;background:rgba(169,131,247,.4);border-radius:3px;accent-color:var(--pur);cursor:pointer}
    #audio-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:var(--pur);border-radius:50%;cursor:pointer}

    /* ══════════════════════════════════════════════════════════
       STARTSEITE (eingeloggt + Gast-Showcase)
       Gruppen wie das Games-/Manage-Menü im Header (header.css:
       .games-cat-title, .dd-logo, .game-mode). Alle Klassen mit hp-
       Präfix, damit nichts ins Header-Dropdown durchschlägt.
    ══════════════════════════════════════════════════════════ */
    .hp{
      --drop-bg:#1a132b; --drop-br:#3b2a66; --hover:#291e49; --cat:#a78bfa;
      --gut:clamp(12px, 3vw, 28px);
      --hp-max:1440px;
      --tile:clamp(128px, 11vw, 176px); /* eine Kachelgröße für alle Kategorien */
    }
    .page{position:relative;z-index:2}
    .hp img{max-width:100%}

    /* ── Hero ── */
    .hp-hero{
      max-width:var(--hp-max);margin:clamp(14px,3vw,30px) auto 0;padding:0 var(--gut);
      display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
      gap:clamp(14px,2.4vw,28px);
    }
    .hp-hero-logo{
      width:clamp(64px,8vw,112px);height:auto;aspect-ratio:1;
      filter:drop-shadow(0 0 24px rgba(169,131,247,.55)) drop-shadow(0 0 48px rgba(120,70,255,.35));
      animation:floatLogo 4s ease-in-out infinite;
    }
    @keyframes floatLogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
    .hp-hero h1{
      font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.03em;line-height:1.1;
      font-size:clamp(1.35rem, 1rem + 2vw, 2.6rem);
      background:linear-gradient(135deg,#fff 0%,var(--pur) 55%,var(--pink) 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      overflow-wrap:anywhere;
    }
    .hp-hero-sub{color:var(--txt-dim);font-weight:600;font-size:clamp(.85rem,.8rem + .3vw,1.05rem);margin:6px 0 10px}
    .hp-online{
      display:inline-flex;align-items:center;gap:8px;
      background:linear-gradient(135deg,rgba(169,131,247,.18),rgba(255,110,255,.12));
      border:1px solid rgba(169,131,247,.35);border-radius:9999px;
      padding:5px 13px;font-weight:800;font-size:.82rem;
    }
    .hp-online .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}

    .hp-stats{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px}
    .hp-stat{
      display:flex;align-items:center;gap:10px;min-width:0;
      padding:10px 14px;border-radius:12px;
      background:var(--drop-bg);border:1px solid var(--drop-br);
      box-shadow:0 8px 22px rgba(0,0,0,.3);
      transition:background .15s, transform .15s, border-color .15s;
    }
    .hp-stat:hover{background:var(--hover);border-color:var(--pur);transform:translateY(-2px)}
    .hp-stat-ico{width:34px;height:34px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
    .hp-stat span{display:flex;flex-direction:column;min-width:0}
    .hp-stat small{font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--cat)}
    .hp-stat strong{font-family:'Orbitron',sans-serif;font-size:1.02rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* ── Section ── */
    .hp-section{max-width:var(--hp-max);margin:0 auto;padding:clamp(16px,2.6vw,28px) var(--gut) 0}
    .hp-title{
      font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.04em;
      font-size:clamp(1.1rem,.9rem + .9vw,1.5rem);
      display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
    }
    .hp-title::before{
      content:"";width:6px;height:1.1em;border-radius:4px;
      background:linear-gradient(180deg,var(--pur),var(--pink));
      box-shadow:0 0 14px rgba(169,131,247,.55);
    }
    .hp-title-count{margin-left:auto;font-family:'Manrope',sans-serif;font-size:.78rem;color:var(--txt-dim);font-weight:700;letter-spacing:0}

    /* ── Kategorien-Leiste (sticky unter dem Header; --hp-hdr setzt index.js) ── */
    .hp-catnav{
      position:sticky;top:calc(var(--banner-h,0px) + var(--hp-hdr,0px));z-index:20;
      display:flex;align-items:center;gap:10px;
      margin:0 calc(var(--gut) * -1) 14px;padding:8px var(--gut);
      background:linear-gradient(180deg,rgba(14,8,26,.92),rgba(14,8,26,.78));
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(59,42,102,.6);
    }
    /* Klebt die Leiste, liegt rechts der Musikregler (#audio-control) darüber */
    @media (min-width:721px){
      body:has(.purple-header) .hp-catnav.is-stuck{padding-right:calc(var(--gut) + 170px)}
    }
    .hp-catnav-track{
      flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
      mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
      padding-right:24px;
    }
    .hp-catnav-track::-webkit-scrollbar{display:none}
    .hp-chip{
      flex-shrink:0;scroll-snap-align:start;
      display:inline-flex;align-items:center;gap:8px;
      height:40px;padding:0 12px 0 6px;border-radius:9999px;
      background:var(--drop-bg);border:1px solid var(--drop-br);
      font-weight:800;font-size:.86rem;color:#fff;white-space:nowrap;
      transition:background .15s, border-color .15s;
    }
    .hp-chip[data-cat="all"]{padding-left:14px}
    .hp-chip:hover{background:var(--hover)}
    .hp-chip.is-active{
      background:linear-gradient(135deg,#8b5cf6,var(--pur-2));border-color:transparent;
      box-shadow:0 4px 14px rgba(107,45,255,.4);
    }
    .hp-chip-ico{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
    .hp-chip-count{
      font-size:.68rem;font-weight:900;min-width:20px;text-align:center;
      padding:2px 6px;border-radius:9999px;background:rgba(0,0,0,.28);color:var(--txt-dim);
    }
    .hp-chip.is-active .hp-chip-count{color:#fff;background:rgba(0,0,0,.22)}
    .hp-view{display:flex;gap:2px;padding:3px;border-radius:9999px;background:var(--drop-bg);border:1px solid var(--drop-br);flex-shrink:0}
    .hp-view-btn{
      width:34px;height:32px;border:0;border-radius:9999px;cursor:pointer;
      display:inline-flex;align-items:center;justify-content:center;
      background:transparent;color:var(--txt-dim);transition:background .15s,color .15s;
    }
    .hp-view-btn:hover{color:#fff}
    .hp-view-btn.is-active{background:linear-gradient(135deg,#8b5cf6,var(--pur-2));color:#fff}

    /* ── Kategorien-Raster: 12 Spalten, richtet sich nach der eigenen Breite
         (Container-Query), damit es eingeloggt und im Gast-Showcase passt ── */
    .hp-cats{
      container-type:inline-size;
      display:flex;flex-wrap:wrap;gap:14px;
    }
    .hp-cat,.hp-mgroup{
      min-width:0;
      background:rgba(26,19,43,.86);border:1px solid var(--drop-br);border-radius:16px;
      box-shadow:0 16px 40px rgba(0,0,0,.35);padding:10px 12px 12px;
      scroll-margin-top:calc(var(--banner-h,0px) + var(--hp-hdr,0px) + 70px);
    }
    .hp-cat{flex:1 1 100%}
    /* Kleine Kategorien teilen sich eine Reihe, solange ihre Kacheln (--n Stück)
       in voller Größe passen; sonst rutscht die nächste in eine neue Reihe. */
    .hp-cat--sm{flex:var(--n,2) 1 calc(var(--n,2) * (var(--tile) + 10px) + 16px)}

    /* Kategorie-Kopf = .games-cat-title aus dem Header, plus Symbol + Zähler */
    .hp-cat-head{
      display:flex;align-items:center;gap:10px;
      padding:2px 4px 8px;margin-bottom:10px;border-bottom:1px solid var(--drop-br);
    }
    .hp-cat-ico{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
    .hp-cat-title{font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--cat)}
    .hp-cat-count{
      margin-left:auto;font-size:.68rem;font-weight:800;color:var(--txt-dim);white-space:nowrap;
      background:rgba(169,131,247,.12);padding:3px 9px;border-radius:9999px;border:1px solid rgba(169,131,247,.22);
    }

    /* ── Spiel-Kacheln ── */
    .hp-grid{
      display:grid;gap:10px;
      grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));
    }
    .hp-game{
      position:relative;display:flex;flex-direction:column;min-width:0;
      border-radius:12px;overflow:hidden;
      background:linear-gradient(135deg,#1f1638,#120b22);
      border:1px solid rgba(59,42,102,.9);
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .15s;
      -webkit-tap-highlight-color:transparent;
    }
    .hp-game-art{
      position:relative;display:block;aspect-ratio:4/3;
      background:radial-gradient(ellipse 70% 65% at 50% 50%,rgba(169,131,247,.24),transparent 72%);
    }
    .hp-game-art img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%;
      filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));transition:transform .3s ease, filter .3s ease;
    }
    .hp-game-row{
      display:flex;align-items:center;gap:8px;padding:8px 10px;
      border-top:1px solid rgba(59,42,102,.8);
      background:linear-gradient(180deg,rgba(74,42,130,.22),rgba(20,14,32,.55));
    }
    .hp-game-logo{display:none;width:40px;height:40px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
    .hp-game-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
    .hp-game-name{font-weight:800;font-size:.9rem;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hp-game-tag{font-size:.72rem;font-weight:600;color:var(--txt-dim);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hp-mode{display:inline-flex;gap:2px;flex-shrink:0;font-size:12px;opacity:.9;filter:drop-shadow(0 0 4px rgba(167,139,250,.35))}
    .hp-mode-slot{display:inline-block;width:1.3em;text-align:center;line-height:1}

    .hp-badge{
      position:absolute;top:8px;left:8px;z-index:2;
      font-size:.62rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#fff;
      padding:3px 8px;border-radius:9999px;box-shadow:0 4px 12px rgba(0,0,0,.35);
    }
    .hp-badge--hot{background:linear-gradient(135deg,#ff6e6e,#ff4081)}
    .hp-badge--new{background:linear-gradient(135deg,#34d399,#10b981)}
    .hp-cta{
      position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);z-index:2;opacity:0;
      background:linear-gradient(135deg,#8b5cf6,var(--pur-2));color:#fff;
      font-weight:900;font-size:.8rem;padding:6px 14px;border-radius:9999px;white-space:nowrap;
      box-shadow:0 8px 22px rgba(107,45,255,.55);pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
    }
    @media (hover:hover){
      .hp-game:hover{transform:translateY(-4px);border-color:var(--pur);box-shadow:0 14px 34px rgba(169,131,247,.3)}
      .hp-game:hover .hp-game-art img{transform:scale(1.06);filter:drop-shadow(0 8px 20px rgba(169,131,247,.5))}
      .hp-game:hover .hp-cta{opacity:1;transform:translate(-50%,0)}
    }
    .hp-game:active{transform:scale(.98)}
    .hp-game:focus-visible,.hp-chip:focus-visible,.hp-mlink:focus-visible,.hp-stat:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

    /* ── Listen-Ansicht = Zeilen wie im Header-Dropdown (Logo, Name, 👤/👥) ── */
    .hp-cats.is-list .hp-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 14px}
    .hp-cats.is-list .hp-game{background:transparent;border-color:transparent;border-radius:10px}
    .hp-cats.is-list .hp-game-art{display:none}
    .hp-cats.is-list .hp-game-row{border-top:0;background:transparent;padding:6px 8px}
    .hp-cats.is-list .hp-game-logo{display:block}
    .hp-cats.is-list .hp-game:hover{background:var(--hover);transform:none;box-shadow:none;border-color:transparent}

    /* ── Manage-Gruppen ── */
    .hp-manage{container-type:inline-size;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
    .hp-mgroup{grid-column:span 12}
    .hp-mgroup--lg{grid-column:span 6}
    .hp-mgroup--sm{grid-column:span 3}
    .hp-mgroup--lg .hp-mlinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
    @container (max-width:1100px){ .hp-mgroup--lg{grid-column:span 12} .hp-mgroup--sm{grid-column:span 6} }
    @container (max-width:600px){ .hp-mgroup--sm{grid-column:span 12} .hp-mgroup--lg .hp-mlinks{grid-template-columns:1fr} }
    .hp-mlinks{display:flex;flex-direction:column;gap:2px}
    .hp-mlink{
      display:flex;align-items:center;gap:10px;min-width:0;
      padding:8px 10px;border-radius:10px;transition:background .15s;
    }
    .hp-mlink:hover{background:var(--hover)}
    .hp-mlink-ico{width:34px;height:34px;object-fit:contain;flex-shrink:0;
      filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));transition:transform .12s ease, filter .12s ease}
    .hp-mlink:hover .hp-mlink-ico{transform:scale(1.12);filter:drop-shadow(0 0 6px rgba(167,139,250,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.55))}
    .hp-mlink-txt{display:flex;flex-direction:column;min-width:0}
    .hp-mlink-title{font-weight:800;font-size:.92rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hp-mlink-sub{font-size:.74rem;color:var(--txt-dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hp-beta{font-size:.6rem;font-weight:900;letter-spacing:.06em;padding:1px 6px;border-radius:9999px;
      background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;vertical-align:middle}

    main.hp{padding-bottom:90px}

    /* ══════════════════════════════════════════════════════════
       GUEST LOGIN SCREEN
    ══════════════════════════════════════════════════════════ */
    .guest-wrap{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}
    .guest-top{
      display:flex;align-items:center;justify-content:center;gap:14px;
      padding:22px 22px 6px;
    }
    .guest-top img.logo{
      width:64px;height:64px;
      filter:drop-shadow(0 0 18px rgba(169,131,247,.55)) drop-shadow(0 0 32px rgba(120,70,255,.35));
    }
    .guest-top .title{
      font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.85rem;letter-spacing:.04em;
      color:#fff;text-shadow:0 0 12px rgba(196,113,255,.55), 0 0 22px rgba(150,70,255,.35);
    }
    .guest-top .title .purple-text{color:#c471ff}

    .guest-main{
      flex:1;display:flex;align-items:flex-start;justify-content:center;
      gap:clamp(18px,2.4vw,34px);padding:14px var(--gut) 60px;
      width:100%;max-width:var(--hp-max);margin:0 auto;
    }

    /* Showcase column */
    .showcase{flex:1 1 0;min-width:0}
    /* Im Gast-Showcase liegt die Leiste im Inhalt statt randlos */
    .showcase .hp-catnav{margin:0 0 12px;padding:8px;border:1px solid var(--drop-br);border-radius:9999px}
    .showcase-title{
      font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.25rem;letter-spacing:.03em;
      margin-bottom:14px;text-align:center;
    }
    .showcase-title .accent{
      background:linear-gradient(135deg,var(--pur),var(--pink));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    /* Login column */
    #login-container{
      flex:0 0 400px;width:100%;max-width:440px;padding:26px 24px 22px;
      position:sticky;top:16px;
      border-radius:18px;background:var(--card);
      border:1px solid rgba(169,131,247,.22);
      box-shadow:0 20px 60px rgba(0,0,0,.6);
      backdrop-filter:blur(12px);
      text-align:center;
    }
    .login-head{
      font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.4rem;
      margin-bottom:4px;letter-spacing:.03em;
    }
    .login-head .accent{
      background:linear-gradient(135deg,var(--pur),var(--pink));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .login-sub{font-size:.85rem;color:var(--txt-dim);margin-bottom:18px;font-weight:600}

    /* Messages */
    .auth-msg{margin-bottom:12px;padding:9px 13px;border-radius:10px;font-weight:700;font-size:.9rem;text-align:left}
    .auth-msg.error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.35);color:#ffd7d7}
    .auth-msg.info {background:rgba(87,242,135,.10);border:1px solid rgba(87,242,135,.3);color:#b6ffd5}
    .auth-msg.warn {background:rgba(255,180,0,.10);border:1px solid rgba(255,180,0,.3);color:#ffe9a0}

    /* Tabs */
    .auth-tabs{display:flex;gap:5px;margin-bottom:16px;background:rgba(255,255,255,.05);border-radius:11px;padding:4px}
    .auth-tab{flex:1;padding:9px 0;border:none;border-radius:8px;cursor:pointer;
      font-weight:800;font-size:.93rem;transition:background .15s,color .15s;
      background:transparent;color:rgba(255,255,255,.5);font-family:inherit}
    .auth-tab.active{background:linear-gradient(135deg,var(--pur),var(--pur-2));color:#fff;box-shadow:0 4px 14px rgba(107,45,255,.35)}

    /* Input rows */
    .auth-form{display:flex;flex-direction:column;gap:9px}
    .auth-form.hidden{display:none}
    .input-wrap{position:relative}
    .auth-input{
      width:100%;padding:11px 38px 11px 14px;border-radius:10px;font-size:.96rem;
      background:rgba(255,255,255,.07);border:1px solid rgba(169,131,247,.3);
      color:#fff;outline:none;transition:border-color .15s, background .15s;
      font-family:inherit;
    }
    .auth-input:focus{border-color:var(--pur);background:rgba(169,131,247,.08)}
    .auth-input::placeholder{color:rgba(255,255,255,.35)}
    /* Browser-Autofill (Chrome/Edge/Safari) zwingt sonst gelben Background
       — wir überschreiben mit unserem dunklen Inset-Shadow-Trick. */
    .auth-input:-webkit-autofill,
    .auth-input:-webkit-autofill:hover,
    .auth-input:-webkit-autofill:focus,
    .auth-input:-webkit-autofill:active{
      -webkit-text-fill-color:#fff !important;
      -webkit-box-shadow:0 0 0 1000px rgba(40,28,64,.95) inset !important;
      box-shadow:0 0 0 1000px rgba(40,28,64,.95) inset !important;
      caret-color:#fff;
      transition:background-color 9999s ease-out 0s;
    }

    .eye-btn{
      position:absolute;right:10px;top:50%;transform:translateY(-50%);
      background:rgba(20,14,32,.6);border:none;cursor:pointer;
      color:#d8c9ff;font-size:16px;line-height:1;
      padding:4px 6px;border-radius:6px;
      transition:color .15s, background .15s, box-shadow .15s;
      z-index:2;
    }
    .eye-btn:hover{color:#fff;background:var(--pur);box-shadow:0 4px 12px rgba(107,45,255,.4)}

    .auth-submit{
      width:100%;padding:12px;border-radius:10px;border:none;cursor:pointer;
      font-weight:900;font-size:.97rem;margin-top:4px;font-family:inherit;
      background:linear-gradient(135deg,var(--pur),var(--pur-2));color:#fff;
      transition:transform .15s,box-shadow .15s;letter-spacing:.02em;
    }
    .auth-submit:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(107,45,255,.45)}
    .auth-submit:disabled{opacity:.55;cursor:not-allowed;transform:none}

    .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:5px}
    @keyframes spin{to{transform:rotate(360deg)}}

    .login-divider{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--txt-dim);font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
    .login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:rgba(169,131,247,.22)}

    /* OAuth buttons */
    .oauth-btn{display:flex;align-items:center;justify-content:center;gap:9px;
      width:100%;padding:11px 16px;border-radius:11px;text-decoration:none;
      font-weight:800;font-size:.93rem;transition:transform .15s,box-shadow .15s;
      border:none;cursor:pointer;margin-bottom:9px;font-family:inherit}
    .oauth-btn:last-child{margin-bottom:0}
    .oauth-btn:hover{transform:translateY(-2px)}
    .oauth-btn.discord{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(88,101,242,.3)}
    .oauth-btn.discord:hover{box-shadow:0 10px 24px rgba(88,101,242,.4)}
    .oauth-btn.steam{background:linear-gradient(135deg,#1b2838 0%,#2a475e 100%);color:#c6d4df;
      border:1px solid rgba(198,212,223,.15);box-shadow:0 4px 14px rgba(0,0,0,.25)}
    .oauth-btn.steam:hover{box-shadow:0 10px 24px rgba(0,0,0,.4)}
    .steam-login-wrap a,.steam-login-wrap img{display:none!important}

    /* ══ VERIFY STEP ══ */
    #verify-step{display:none}
    #verify-step.active{display:block}

    .verify-title{font-family:'Orbitron',sans-serif;font-size:1.2rem;font-weight:900;margin-bottom:6px}
    .verify-sub{font-size:.88rem;color:var(--txt-dim);margin-bottom:16px;line-height:1.55}
    .verify-sub strong{color:var(--pur)}

    .code-wrap{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
    .code-digit{
      width:44px;height:54px;border-radius:10px;font-size:1.5rem;font-weight:900;
      text-align:center;background:rgba(255,255,255,.07);font-family:'Orbitron',monospace;
      border:1px solid rgba(169,131,247,.35);color:#fff;outline:none;
      transition:border-color .15s, background .15s;
    }
    .code-digit:focus{border-color:var(--pur);background:rgba(169,131,247,.12)}

    .verify-timer{font-size:.83rem;color:var(--txt-dim);margin-bottom:10px}
    .verify-timer.expired{color:#ffd7d7}
    .verify-links{font-size:.86rem;color:var(--txt-dim);margin-top:10px}
    .verify-links a{color:var(--pur);text-decoration:none;cursor:pointer;font-weight:700}
    .verify-links a:hover{text-decoration:underline}

    .debug-code-box{
      background:rgba(87,242,135,.1);border:1px solid rgba(87,242,135,.3);
      border-radius:10px;padding:10px 14px;margin-bottom:12px;text-align:center;
    }
    .debug-code-box .dc-label{font-size:.8rem;color:var(--txt-dim);margin-bottom:4px}
    .debug-code-box .dc-value{font-family:'Orbitron',monospace;font-size:1.8rem;font-weight:900;letter-spacing:.25em;color:var(--green)}

    /* ── Login Container Pulse (Click on guest tile) ── */
    @keyframes loginPulse{
      0%   { box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 0 rgba(169,131,247,.55); transform:scale(1); }
      40%  { box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 18px rgba(169,131,247,0); transform:scale(1.015); }
      100% { box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 0 rgba(169,131,247,0); transform:scale(1); }
    }
    #login-container.pulse{ animation:loginPulse .9s ease-out 2; }

    /* ── Floating "Login to play" toast ── */
    .login-toast{
      position:fixed;left:50%;top:24px;transform:translate(-50%,-20px);
      z-index:300;opacity:0;pointer-events:none;
      background:linear-gradient(135deg,var(--pur),var(--pur-2));
      color:#fff;font-weight:900;font-size:.95rem;letter-spacing:.02em;
      padding:11px 22px;border-radius:9999px;
      box-shadow:0 14px 40px rgba(107,45,255,.55), 0 0 24px rgba(255,110,255,.25);
      border:1px solid rgba(255,255,255,.15);
      display:inline-flex;align-items:center;gap:9px;
      transition:opacity .25s ease, transform .25s ease;
      white-space:nowrap;max-width:calc(100vw - 32px);
    }
    .login-toast.show{ opacity:1; transform:translate(-50%,0); }
    .login-toast .toast-icon{ font-size:1.1rem; }
    .login-toast strong{ color:#fff5b3; }

    /* ── Forgot password link ── */
    .forgot-link{
      display:block;text-align:right;font-size:.82rem;color:var(--pur);
      font-weight:700;margin-top:-3px;cursor:pointer;text-decoration:none;
      transition:color .15s;
    }
    .forgot-link:hover{color:var(--pink);text-decoration:underline}

    /* ── Reset Password Steps ── */
    #reset-step, #reset-confirm-step{display:none}
    #reset-step.active, #reset-confirm-step.active{display:block}

    .back-link{
      display:inline-flex;align-items:center;gap:5px;font-size:.85rem;color:var(--txt-dim);
      font-weight:700;cursor:pointer;text-decoration:none;margin-top:12px;
      transition:color .15s;
    }
    .back-link:hover{color:var(--pur)}

    /* ── Responsive ── */
    @media (max-width:1100px){
      .hp-hero{grid-template-columns:auto minmax(0,1fr)}
      .hp-stats{grid-column:1 / -1;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
    }
    @media (max-width:980px){
      .guest-main{flex-direction:column-reverse;align-items:stretch;gap:22px;padding:10px var(--gut) 50px}
      #login-container{position:static;flex:none;align-self:center}
      .showcase{flex:none;width:100%}
    }
    /* Gast (kein Header): Musikregler unten rechts, sonst liegt er auf dem Login */
    body:not(:has(.purple-header)) #audio-control{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
    @media (max-width:720px){
      /* Musikregler: auf dem Handy unten rechts statt unter dem Header */
      #audio-control{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:12px;padding:5px 8px}
      #audio-control input[type=range]{width:64px}
    }
    @media (max-width:560px){
      .hp-hero{grid-template-columns:auto minmax(0,1fr);gap:12px}
      .hp-hero-sub{display:none}
      .hp-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
      .hp-stat{padding:8px 10px;gap:8px}
      .hp-stat-ico{width:28px;height:28px}
      .hp-stat strong{font-size:.9rem}
      .hp-cat,.hp-mgroup{padding:8px 8px 10px;border-radius:14px}
      .hp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
      .hp-cats.is-list .hp-grid{grid-template-columns:1fr}
      .hp-game-row{padding:7px 8px;gap:6px}
      .hp-game-name{font-size:.84rem}
      .hp-chip{height:36px;font-size:.8rem}
      .hp-chip-ico{width:26px;height:26px}
      .hp-title-count{margin-left:0;width:100%}
      .guest-top{padding:16px 16px 4px}
      .guest-top .title{font-size:1.4rem}
      .guest-top img.logo{width:48px;height:48px}
      #login-container{padding:20px 16px 18px}
      .code-digit{width:40px;height:50px}
    }
    @media (max-width:360px){
      .hp-game-tag{display:none}
      .code-wrap{gap:5px}
      .code-digit{width:36px;height:46px;font-size:1.3rem}
    }
    @media (min-width:1800px){
      .hp{--hp-max:1680px}
    }
    @media (prefers-reduced-motion:reduce){
      .hp-hero-logo{animation:none}
      .hp-game,.hp-game-art img,.hp-cta{transition:none}
    }