/*
 * HANGMAN HIGHTECH VERSION
 * Entwickler : Sven Helle
 * Webseite   : https://sven-helle.de
 * Projekt    : Hangman Hightech Version
 * Datei      : app.css
 * Version    : V3.0
 * Stand      : 26.09.2026
 *  */
/*
 * Datei: public/assets/css/app.css
 * Aufgabe: CSS-Datei für das visuelle Design und Layout der Hangman-Oberfläche.
 * Weblink: sven-helle.de
 * Author: Sven Helle
 * Copyright: © 2026 Sven Helle
 */

:root{--bg:#071016;--panel:#0d1a21;--panel2:#10232c;--line:#1d3944;--cyan:#20d6e8;--gold:#f7b733;--text:#ecf8fa;--muted:#82a1aa;--red:#ff4d5f}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0%,#12313b 0,#071016 35%,#050b0f 100%);color:var(--text);font:15px Inter,system-ui,sans-serif;min-height:100vh}.app{max-width:1500px;margin:auto;padding:24px}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}.eyebrow{letter-spacing:.22em;color:var(--cyan);font-size:11px;font-weight:800}.top h1{margin:5px 0 0;font-size:30px;letter-spacing:.08em}.top h1 span{font-weight:300;color:var(--muted)}.capital{text-align:right}.capital small,.capital strong{display:block}.capital small{color:var(--muted);font-size:10px;letter-spacing:.18em}.capital strong{color:var(--gold);font-size:23px}.card{background:linear-gradient(145deg,rgba(16,35,44,.96),rgba(8,20,26,.96));border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px #0006}.start-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:22px}.hero{position:relative;padding:48px;overflow:hidden}.orb{position:absolute;width:400px;height:400px;border-radius:50%;right:-130px;top:-180px;background:radial-gradient(circle,#1bc9dc55,#1bc9dc00 65%);filter:blur(5px)}.hero h2{font-size:58px;line-height:.98;margin:14px 0 22px;max-width:700px}.hero h2 em{color:var(--cyan);font-style:normal}.hero p{max-width:700px;color:var(--muted);line-height:1.7}.start-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}.start-form label{color:var(--muted);font-size:12px}.start-form label:last-of-type{grid-column:1/-1}input,select{display:block;width:100%;margin-top:6px;padding:14px;border-radius:10px;border:1px solid var(--line);background:#071219;color:var(--text);outline:none}.primary{grid-column:1/-1;padding:17px;border:0;border-radius:11px;background:var(--cyan);color:#041015;font-weight:900;letter-spacing:.12em}.categories{padding:22px}.section-head{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;letter-spacing:.16em;margin-bottom:15px}.section-head b{color:var(--cyan)}.cat{display:flex;gap:13px;padding:13px 4px;border-top:1px solid var(--line)}.cat-icon{width:34px;height:34px;border-radius:9px;background:#12343e;display:grid;place-items:center;color:var(--cyan)}.cat strong,.cat small{display:block}.cat small{color:var(--muted);margin-top:4px;font-size:11px}.game{display:grid;grid-template-columns:1fr 390px;gap:20px;margin-top:20px}.scorebar{grid-column:1/-1;display:grid;grid-template-columns:1fr 140px 1fr;align-items:center;gap:14px}.team{padding:18px 22px;border:1px solid var(--line);background:#0a171d;border-radius:14px;display:flex;justify-content:space-between}.team.active{border-color:var(--cyan);box-shadow:0 0 25px #20d6e81c}.team strong{color:var(--gold)}.team.right{flex-direction:row-reverse}.round{text-align:center;color:var(--muted);font-size:11px;letter-spacing:.15em}.round i{display:block;color:var(--cyan);font-style:normal;font-size:16px;margin-top:5px}.main-board{min-height:690px;background:linear-gradient(160deg,#0e222b,#071116);border:1px solid var(--line);border-radius:18px;padding:65px 45px;text-align:center;display:flex;flex-direction:column;justify-content:center}.category-pill{align-self:center;border:1px solid #20d6e855;color:var(--cyan);padding:8px 14px;border-radius:99px;font-size:11px;letter-spacing:.12em}.main-board h2{font-size:22px;line-height:1.35;margin:10px auto 2px;color:#d6e9ed;max-width:820px}.main-board .category-pill{margin-bottom:4px}.word{font:800 43px/1.25 ui-monospace,monospace;letter-spacing:.12em;word-break:break-word;margin:12px 0 6px;color:white}.used{color:var(--muted);font-size:11px;letter-spacing:.08em;margin-top:4px}.turn-msg{margin-top:35px;color:var(--cyan);min-height:24px}.side{background:#08141a;border:1px solid var(--line);border-radius:18px;padding:22px;position:relative}.timer-card{text-align:center}.timer-card small{color:var(--muted);font-size:10px;letter-spacing:.13em}.timer-card #timer{font:800 44px ui-monospace,monospace;color:var(--cyan);margin:5px}.timer-card #timer.danger{color:var(--red);animation:pulse .5s infinite alternate}@keyframes pulse{to{transform:scale(1.06)}}.timer-card span{font-size:10px;color:#52717b}.wheel-wrap{height:300px;display:grid;place-items:center;position:relative}.pointer{position:absolute;z-index:3;top:4px;border-left:13px solid transparent;border-right:13px solid transparent;border-top:30px solid var(--gold);filter:drop-shadow(0 2px 3px #000)}.wheel{width:270px;height:270px;border-radius:50%;border:9px solid #b9d5d9;box-shadow:0 0 0 5px #233d45,0 12px 35px #0009;background:conic-gradient(from -16.363636deg,#20d6e8 0deg 32.727deg,#f7b733 32.727deg 65.454deg,#ff5263 65.454deg 98.181deg,#7c68ff 98.181deg 130.908deg,#20d6e8 130.908deg 163.635deg,#f7b733 163.635deg 196.362deg,#ff5263 196.362deg 229.089deg,#7c68ff 229.089deg 261.816deg,#20d6e8 261.816deg 294.543deg,#ff4d5f 294.543deg 327.27deg,#19a34a 327.27deg 360deg);display:block;position:relative;overflow:hidden;transform-origin:center}.wheel-segment{position:absolute;inset:0;display:block;pointer-events:none;transform:rotate(var(--center-angle));transform-origin:50% 50%}.wheel-segment b{position:absolute;left:50%;top:50%;display:flex;width:72px;height:112px;align-items:center;justify-content:center;transform:translate(-50%,-50%) translateY(-82px) rotate(var(--text-angle));transform-origin:50% 50%;color:#071016;font-size:12px;font-weight:1000;letter-spacing:.02em;line-height:1;text-align:center;white-space:nowrap;text-shadow:0 1px 0 #fff8}.wheel-segment:nth-child(10) b,.wheel-segment:nth-child(11) b{font-size:9px;color:#fff;text-shadow:0 1px 2px #000}.letter:disabled{opacity:.35;cursor:not-allowed;border-color:#162a31;color:#55717a;background:#09171d}.letter:not(:disabled):hover{border-color:var(--cyan);color:var(--cyan)}.wheel-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;z-index:2;flex:none;border-radius:50%;background:#071016;border:3px solid #fff;color:white;display:grid;place-items:center;text-align:center;font-size:10px;font-weight:900;line-height:1.2}
/* V28.3: Runde 10 = SUPER-RUNDE. Nur der JACKPOT-Hintergrund blinkt Gold; der Text bleibt ruhig und fest. */
.wheel.super-round .wheel-segment.jackpot::before{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,#8e5b0b 0%,#ffd95a 28%,#fff0a3 50%,#e7a52d 72%,#9a650d 100%);opacity:.35;animation:superJackpotGoldBlink .72s ease-in-out infinite;z-index:0;pointer-events:none;clip-path:polygon(50% 50%,35.91% 2.03%,39.60% 1.09%,43.04% .49%,46.51% .12%,50% 0,53.49% .12%,56.96% .49%,60.40% 1.09%,64.09% 2.03%);filter:drop-shadow(0 0 5px rgba(255,215,70,.95)) drop-shadow(0 0 12px rgba(255,195,40,.72))}
.wheel.super-round .wheel-segment.jackpot b{position:absolute;z-index:1;color:#fff;text-shadow:0 1px 3px #000,0 0 5px #000;font-weight:1000}
@keyframes superJackpotGoldBlink{0%,100%{opacity:.22;filter:brightness(.9) saturate(.9) drop-shadow(0 0 2px rgba(255,205,55,.55))}50%{opacity:1;filter:brightness(1.55) saturate(1.6) drop-shadow(0 0 10px rgba(255,214,65,1))} }

.wheel.spinning{animation:spinReal 5.4s cubic-bezier(.08,.82,.12,1) both;will-change:transform}
@keyframes spinReal{0%{transform:rotate(0deg)}14%{transform:rotate(900deg)}42%{transform:rotate(2100deg)}68%{transform:rotate(2820deg)}86%{transform:rotate(3220deg)}100%{transform:rotate(3420deg)}}.spin{width:100%;padding:15px;background:var(--gold);border:0;border-radius:10px;font-weight:900;letter-spacing:.1em}.spin:disabled{opacity:.4}.actions{margin-top:18px}.letter-row{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.letter{padding:9px 0;border:1px solid var(--line);border-radius:6px;background:#0e2028;color:#d8eef1}.letter:hover{border-color:var(--cyan);color:var(--cyan)}.solve{display:flex;gap:6px;margin-top:10px}.solve button{border:0;background:#183943;color:var(--cyan);padding:0 12px;border-radius:8px}.vowels{display:flex;gap:5px;align-items:center;margin-top:10px}.vowels span{font-size:9px;color:var(--muted);margin-right:auto}.vowels button{width:31px;height:31px;border:1px solid #745d2b;background:#221b0d;color:var(--gold);border-radius:7px}.reset{margin-top:18px;background:none;border:0;color:#55747d;font-size:11px}.leader{margin-top:20px;padding:22px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-top:1px solid var(--line);font-size:12px}th{color:var(--muted)}.flash{margin-top:15px;padding:12px;border-radius:9px;background:#2a171b;color:#ffb8bf}.flash.error{border:1px solid #74313b}.leader p{color:var(--muted)}@media(max-width:1000px){.start-grid,.game{grid-template-columns:1fr}.side{order:-1}.hero h2{font-size:42px}.scorebar{grid-template-columns:1fr 80px 1fr}.team{padding:12px;font-size:12px}.main-board{min-height:520px}.word{font-size:30px}}
.hangman-stage{width:100%;max-width:300px;margin:8px auto 4px;position:relative;display:flex;flex-direction:column;align-items:center}.hangman-stage svg{width:260px;height:280px;display:block}.gallows path{fill:none;stroke:var(--cyan);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}.hang-parts .part{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform-origin:165px 105px;transition:opacity .25s,filter .25s}.hang-parts .p1{fill:none}.hangman-stage[data-mistakes="1"] .p1,.hangman-stage[data-mistakes="2"] .p1,.hangman-stage[data-mistakes="3"] .p1,.hangman-stage[data-mistakes="4"] .p1,.hangman-stage[data-mistakes="5"] .p1,.hangman-stage[data-mistakes="6"] .p1{opacity:1}.hangman-stage[data-mistakes="2"] .p2,.hangman-stage[data-mistakes="3"] .p2,.hangman-stage[data-mistakes="4"] .p2,.hangman-stage[data-mistakes="5"] .p2,.hangman-stage[data-mistakes="6"] .p2{opacity:1}.hangman-stage[data-mistakes="3"] .p3,.hangman-stage[data-mistakes="4"] .p3,.hangman-stage[data-mistakes="5"] .p3,.hangman-stage[data-mistakes="6"] .p3{opacity:1}.hangman-stage[data-mistakes="4"] .p4,.hangman-stage[data-mistakes="5"] .p4,.hangman-stage[data-mistakes="6"] .p4{opacity:1}.hangman-stage[data-mistakes="5"] .p5,.hangman-stage[data-mistakes="6"] .p5{opacity:1}.hangman-stage[data-mistakes="6"] .p6{opacity:1}.mistake-count{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-top:-8px}.mistake-count strong{color:var(--gold)}.vowels span{font-size:10px;color:var(--gold);font-weight:700}.vowels{padding:8px 0 0}

/* Compact Game Show Layout + Fullscreen */
.top{gap:16px;padding-bottom:12px}.top-actions{display:flex;align-items:center;gap:12px}.fullscreen-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#0b1b22;color:var(--text);font-size:10px;font-weight:900;letter-spacing:.1em;cursor:pointer}.fullscreen-btn:hover{border-color:var(--cyan);color:var(--cyan)}.fullscreen-btn:first-letter{font-size:16px}.app{max-width:1420px;padding:16px}.start-grid{gap:14px;margin-top:16px}.hero{padding:32px}.hero h2{font-size:48px;margin:10px 0 16px}.start-form{gap:10px;margin-top:20px}.categories{padding:18px}.cat{padding:9px 4px}.game{gap:14px;margin-top:14px;grid-template-columns:minmax(0,1fr) 360px}.scorebar{gap:10px}.team{padding:13px 16px}.main-board{min-height:570px;padding:34px 28px}.main-board h2{margin:7px auto 0;font-size:19px}.hangman-stage{margin:4px auto 0;max-height:230px}.hangman-stage svg{max-height:210px}.word{font-size:38px;margin:6px 0 3px}.turn-msg{margin-top:16px}.side{padding:16px}.wheel-wrap{height:260px}.wheel{width:235px;height:235px}.actions{margin-top:12px}.letter-row{gap:4px}.letter{padding:7px 0}.solve{margin-top:7px}.vowels{margin-top:7px}.leader{margin-top:14px;padding:14px 18px}.leader .section-head{margin-bottom:8px}.leader table th,.leader table td{padding:7px 9px;font-size:11px}.reset{margin-top:10px}.flash{margin-top:10px;padding:9px}
@media(max-width:1000px){.app{padding:12px}.top h1{font-size:24px}.capital strong{font-size:18px}.fullscreen-btn span{display:none}.game{grid-template-columns:1fr}.side{order:-1}.main-board{min-height:500px;padding:28px 18px}.wheel-wrap{height:250px}.hero{padding:26px}.hero h2{font-size:38px}}

/* V12: kompakterer Spielbereich, Kategorie weiter oben, eindeutiges Single-Click-Feedback */
.main-board{justify-content:flex-start;padding-top:22px}
.main-board .category-pill{margin-top:0;margin-bottom:2px}
.main-board h2{margin-top:6px}
.hangman-stage{margin-top:0}
.form.is-submitting{pointer-events:none}
button:disabled{cursor:wait}

/* Persistentes Vollbild-Layout nach Reload. Der native Browser-Fullscreenmodus
   darf nicht automatisch ohne Benutzeraktion wieder angefordert werden. */
body.persistent-fullscreen{min-height:100vh;overflow:auto}
body.persistent-fullscreen .app{max-width:none;width:100%;min-height:100vh;padding:14px 18px}
body.persistent-fullscreen .game{grid-template-columns:minmax(0,1fr) 380px}
body.persistent-fullscreen .main-board{min-height:calc(100vh - 190px)}

/* V14: zentrale Meldungen */
.flash { position:fixed; left:50%; top:24vh; transform:translateX(-50%); z-index:10000; width:min(680px,calc(100vw - 32px)); margin:0; padding:18px 54px 18px 20px; border-radius:14px; background:rgba(10,24,31,.97); color:var(--text); border:1px solid var(--cyan); box-shadow:0 18px 55px #000b; text-align:center; animation:flash-in .22s ease-out; }
.flash.error { border-color:var(--red); }
.flash.success { border-color:var(--gold); }
.flash-text { line-height:1.45; font-weight:700; }
.flash-ok { position:absolute; right:10px; top:10px; border:1px solid var(--line); background:#11262f; color:var(--text); border-radius:8px; padding:7px 10px; font-weight:900; cursor:pointer; }
.flash-ok:hover { border-color:var(--cyan); color:var(--cyan); }
.flash-hide { opacity:0; transform:translate(-50%,-10px); transition:opacity .2s,transform .2s; }
@keyframes flash-in { from { opacity:0; transform:translate(-50%,-12px); } to { opacity:1; transform:translate(-50%,0); } }
form.is-submitting .letter, form.is-submitting .vowels button, form.is-submitting .solve button { cursor:wait; }

.letter.used{opacity:.28;cursor:not-allowed;text-decoration:line-through}.letter-status{min-height:14px;margin-top:5px;color:#52717b;font-size:9px;letter-spacing:.04em}.letter.chosen{border-color:var(--gold);color:var(--gold)}
.confetti-layer{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden}.confetti-layer.show{opacity:1;visibility:visible}.confetti-piece{position:absolute;top:-18px;width:var(--size);height:calc(var(--size) * 1.7);border-radius:2px;background:var(--cyan);animation:confettiFall var(--duration) cubic-bezier(.2,.7,.2,1) var(--delay) forwards;box-shadow:0 0 6px #fff4}.confetti-piece:nth-child(3n){background:var(--gold)}.confetti-piece:nth-child(3n+1){background:#ff5263}.confetti-piece:nth-child(4n){background:#7c68ff}.confetti-piece:nth-child(5n){background:#8ff0c8}@keyframes confettiFall{0%{transform:translate3d(0,-10px,0) rotate(0deg);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--x),105vh,0) rotate(var(--r));opacity:0}}


/* Hangman Hightech Version branding */
.brand-subtitle{margin:.15rem 0 .45rem;text-align:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72}.brand-subtitle span{opacity:.9}

/* V24: Timer-Pause */
.timer-card{position:relative}.pause-form{margin-top:8px}.pause-btn{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#10242c;color:var(--text);font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer}.pause-btn:hover{border-color:var(--cyan);color:var(--cyan)}#timer.paused{color:var(--gold);text-shadow:0 0 14px #d6a63a66}.game-paused .main-board,.game-paused .side{opacity:.72}.game-paused .pause-btn{border-color:var(--gold);color:var(--gold)}
/* V27: Konsonanten bleiben sichtbar; gesperrt wird nur die Interaktion. */
.letter.locked:not(.used){opacity:.42;cursor:not-allowed;border-color:#162a31;color:#55717a;background:#09171d}
.letter.locked:not(.used):hover{border-color:#162a31;color:#55717a}


/* Kompakte Desktop-Spielansicht – ausschließlich Layout, keine Spiel-/JS-/PHP-Änderungen */
@media (min-width:1001px){
  .app{max-width:1600px;padding:8px 14px}
  .top{padding-bottom:7px}
  .top h1{font-size:22px;margin:2px 0 0}
  .eyebrow{font-size:9px}
  .capital strong{font-size:18px}
  .game{margin-top:8px;gap:8px;grid-template-columns:minmax(0,1fr) 320px}
  .scorebar{gap:7px}
  .team{padding:8px 12px;border-radius:10px}
  .round{font-size:9px}
  .round i{font-size:13px;margin-top:2px}

  .main-board{min-height:0;height:calc(100vh - 115px);padding:10px 18px;border-radius:14px;justify-content:center}
  .category-pill{padding:4px 10px;font-size:8px;margin-bottom:0}
  .main-board h2{font-size:15px;line-height:1.2;margin:4px auto 0}
  .hangman-stage{max-width:190px;max-height:155px;margin:0 auto}
  .hangman-stage svg{width:165px;height:155px;max-height:155px}
  .mistake-count{font-size:8px;margin-top:-5px}
  .word{font-size:clamp(24px,2.25vw,34px);line-height:1.05;margin:3px 0 2px}
  .used{font-size:8px;margin-top:0}
  .turn-msg{margin-top:5px;min-height:16px;font-size:11px}

  .side{padding:8px 10px;border-radius:14px}
  .timer-card #timer{font-size:31px;margin:1px}
  .timer-card small{font-size:8px}
  .wheel-wrap{height:185px}
  .wheel{width:175px;height:175px;border-width:6px}
  .pointer{top:1px;border-left-width:9px;border-right-width:9px;border-top-width:21px}
  .wheel-segment b{width:54px;height:76px;transform:translate(-50%,-50%) translateY(-52px) rotate(var(--text-angle));font-size:7px}
  .wheel-segment:nth-child(10) b,.wheel-segment:nth-child(11) b{font-size:6px}
  .wheel-label{width:54px;height:54px;font-size:7px}
  .spin{padding:8px;font-size:10px}
  .actions{margin-top:6px}
  .letter-row{gap:3px}
  .letter{padding:4px 0;font-size:10px;border-radius:4px}
  .solve{margin-top:4px}
  .solve input{padding:6px;font-size:10px}
  .solve button{padding:0 8px;font-size:9px}
  .vowels{margin-top:4px;padding-top:3px}
  .vowels span{font-size:7px}
  .vowels button{width:24px;height:24px;font-size:10px}
  .reset{margin-top:5px;font-size:8px}

  .leader{display:none}
}
@media (min-width:1001px) and (max-height:800px){
  .main-board{height:calc(100vh - 105px)}
  .hangman-stage{max-height:130px}
  .hangman-stage svg{height:130px;max-height:130px}
  .wheel-wrap{height:165px}
  .wheel{width:155px;height:155px}
  .wheel-segment b{transform:translate(-50%,-50%) translateY(-46px) rotate(var(--text-angle))}
}


/* V28: Dreispaltige, ruhigere Spieloberfläche */
@media (min-width:1001px){
  .game{
    grid-template-columns:minmax(430px,1.35fr) minmax(190px,.55fr) minmax(330px,.9fr);
    align-items:stretch;
  }
  .scorebar{grid-column:1/-1}
  .main-board{grid-column:1;grid-row:2;min-width:0}
  .middle-side{
    grid-column:2;grid-row:2;
    background:#08141a;border:1px solid var(--line);border-radius:14px;
    padding:14px 10px;display:flex;flex-direction:column;justify-content:center;
    gap:22px;min-width:0;
  }
  .middle-side .timer-card{text-align:center}
  .middle-side .vowels{
    flex-wrap:wrap;justify-content:center;align-content:center;
    border-top:1px solid var(--line);padding-top:16px;margin-top:0;
  }
  .middle-side .vowels span{width:100%;text-align:center;margin:0 0 8px}
  .middle-side .vowels form{margin:0}
  .middle-side .pause-btn{margin-top:8px}
  .side{grid-column:3;grid-row:2;min-width:0}
}
@media (min-width:1001px) and (max-width:1250px){
  .game{grid-template-columns:minmax(380px,1.2fr) minmax(165px,.5fr) minmax(300px,.85fr)}
  .middle-side{padding:10px 7px}
  .middle-side .vowels button{width:22px;height:22px}
}

/* V29: Navigation zur Spielanleitung */
.guide-link{display:inline-flex;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#0b1b22;color:var(--text);font-size:10px;font-weight:900;letter-spacing:.1em;text-decoration:none}
.guide-link:hover{border-color:var(--cyan);color:var(--cyan)}


/* V40: Spielmeldungen für Rundensieg und Teamwechsel */
.game-notice{
  position:fixed;left:50%;top:20vh;transform:translateX(-50%);
  z-index:9999;display:flex;align-items:center;gap:14px;
  width:min(620px,calc(100vw - 32px));padding:18px 20px;
  border:1px solid var(--cyan);border-radius:14px;
  background:rgba(7,16,22,.97);box-shadow:0 16px 60px rgba(0,0,0,.55);
  color:var(--text);font-weight:800;text-align:center;
  animation:gameNoticeIn .24s ease-out;
}
.game-notice.success{border-color:#19a34a}
.game-notice.turn{border-color:var(--gold)}
.game-notice-text{flex:1;line-height:1.45}
.game-notice-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.notice-info-btn{margin:0}.game-notice-actions .game-notice-ok{margin:0}
.game-notice-ok{border:1px solid var(--line);background:#10232c;color:var(--text);border-radius:8px;padding:8px 14px;font-weight:900;cursor:pointer}
.game-notice-ok:hover{border-color:var(--cyan);color:var(--cyan)}
@keyframes gameNoticeIn{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}

/* V41 Hangman Visual Upgrade */
.hangman-stage{position:relative;overflow:hidden;min-height:330px;padding:12px 14px 10px;border:1px solid #21414d;border-radius:16px;background:radial-gradient(circle at 72% 28%,rgba(32,214,232,.11),transparent 28%),linear-gradient(145deg,#0d2028,#071116 68%);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.2)}.hangman-stage:before{content:"";position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(32,214,232,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(32,214,232,.12) 1px,transparent 1px);background-size:28px 28px}.hangman-card-head{position:relative;z-index:2;display:flex;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.12em}.hangman-card-head strong{color:var(--gold);font-size:13px}.hangman-art{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;height:245px}.hangman-svg{width:min(100%,285px);height:245px}.hangman-svg .gallows{stroke:#5d7882;stroke-width:8;filter:drop-shadow(0 4px 3px rgba(0,0,0,.45))}.hangman-svg .person{stroke:var(--cyan);stroke-width:7;fill:none;filter:drop-shadow(0 0 5px rgba(32,214,232,.2))}.hangman-svg .head{fill:#0a171c}.hangman-svg .person>*{opacity:.12;transition:opacity .35s ease}.hangman-stage[data-mistakes="1"] .head,.hangman-stage[data-mistakes="2"] .head,.hangman-stage[data-mistakes="2"] .body,.hangman-stage[data-mistakes="3"] .head,.hangman-stage[data-mistakes="3"] .body,.hangman-stage[data-mistakes="3"] .arm-left,.hangman-stage[data-mistakes="4"] .head,.hangman-stage[data-mistakes="4"] .body,.hangman-stage[data-mistakes="4"] .arm-left,.hangman-stage[data-mistakes="4"] .arm-right,.hangman-stage[data-mistakes="5"] .head,.hangman-stage[data-mistakes="5"] .body,.hangman-stage[data-mistakes="5"] .arm-left,.hangman-stage[data-mistakes="5"] .arm-right,.hangman-stage[data-mistakes="5"] .leg-left,.hangman-stage[data-mistakes="6"] .person>*{opacity:1}.hangman-stage[data-mistakes="6"] .person{stroke:var(--red);filter:drop-shadow(0 0 8px rgba(255,77,95,.4))}.hangman-shadow{position:absolute;bottom:8px;width:145px;height:18px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%)}.hangman-caption{position:relative;z-index:2;text-align:center;color:var(--muted);font-size:10px;padding-top:2px}

/* Computergegner-Konfiguration */
.computer-opponent{display:grid;gap:8px;padding:10px 12px;border:1px solid rgba(0,229,255,.22);border-radius:12px;background:rgba(0,229,255,.05)}
.computer-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:700}
.computer-toggle input{width:auto;margin:0;accent-color:#00e5ff}
.computer-difficulty{display:grid;gap:5px}
.computer-difficulty select{width:100%}

/* ================================================================
   HANGMAN HIGHTECH VERSION – HIGH-TECH DASHBOARD REDESIGN
   Reines Design-Override: keine PHP-, JS- oder Spiellogikänderung.
   ================================================================ */
:root{--bg:#d7edf7;--ink:#183747;--ink-soft:#496775;--glass:rgba(222,243,251,.78);--glass-strong:rgba(199,228,241,.90);--cyan:#19c9e6;--cyan-deep:#127c9a;--gold:#f3ad37;--line:rgba(39,111,136,.36);--shadow:0 12px 26px rgba(20,57,73,.24),inset 0 1px 0 rgba(255,255,255,.82)}
body{background:radial-gradient(circle at 50% -15%,#f7fdff 0 18%,transparent 45%),radial-gradient(circle at 10% 90%,#c3e7f4 0,transparent 28%),linear-gradient(135deg,#d8edf6,#b8d9e7 54%,#d9edf4);color:var(--ink);font-family:Inter,Arial,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(90deg,transparent 49.8%,rgba(34,102,127,.25) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(34,102,127,.18) 50%,transparent 50.2%);background-size:90px 90px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent)}
.app{position:relative;z-index:1;max-width:1680px;padding:16px 28px 20px}
.top{min-height:68px;padding:0 4px 12px;border-bottom:1px solid rgba(37,94,115,.24)}
.eyebrow{color:#54727e;letter-spacing:.18em;font-size:10px;text-shadow:0 1px #fff}
.top h1{font-size:28px;letter-spacing:.06em;color:#193c4d;text-shadow:0 1px rgba(255,255,255,.9)}
.top h1 span{color:#617681}.brand-subtitle{color:#385764;font-size:11px;letter-spacing:.1em}
.top-actions{display:flex;gap:12px;align-items:center}.guide-link,.fullscreen-btn{min-height:44px;padding:0 20px!important;border:1px solid rgba(44,105,127,.28)!important;border-radius:12px!important;background:linear-gradient(180deg,rgba(236,249,255,.96),rgba(176,211,227,.88))!important;color:#294958!important;box-shadow:var(--shadow)!important;font-size:11px!important;letter-spacing:.08em;text-decoration:none;font-weight:900}
.fullscreen-btn{cursor:pointer}.guide-link:hover,.fullscreen-btn:hover{border-color:var(--cyan)!important;color:#0a7893!important;transform:translateY(-1px)}
.card,.main-board,.middle-side,.side{background:linear-gradient(145deg,rgba(227,244,251,.86),rgba(181,216,231,.78))!important;border:1px solid rgba(34,104,127,.34)!important;box-shadow:var(--shadow),0 0 0 3px rgba(32,213,235,.06)!important;color:var(--ink)}
.card:before,.main-board:before,.side:before{content:"";position:absolute;inset:8px;border:1px solid rgba(21,174,199,.20);border-radius:inherit;pointer-events:none}
.game{gap:18px;margin-top:14px}.scorebar{gap:20px}.team{min-height:48px;padding:10px 18px;border-radius:13px;border:1px solid rgba(39,112,138,.34);background:linear-gradient(90deg,rgba(45,106,129,.78),rgba(197,229,241,.75));color:#effaff;box-shadow:0 8px 18px rgba(37,78,94,.18),inset 0 1px rgba(255,255,255,.35)}
.team strong{color:#ffd276;text-shadow:0 1px 4px rgba(77,49,0,.35)}.team.active{border-color:#38d7ee;box-shadow:0 0 0 2px rgba(38,213,238,.18),0 10px 22px rgba(22,108,135,.25)}.team.right{background:linear-gradient(270deg,rgba(45,106,129,.78),rgba(197,229,241,.75))}.round{color:#496b78;font-size:11px}.round i{color:#277b91;font-weight:900}
.main-board{position:relative;overflow:hidden;border-radius:28px!important;padding:28px 38px!important;min-height:720px!important;background:radial-gradient(circle at 50% 36%,rgba(255,255,255,.42),transparent 38%),linear-gradient(145deg,rgba(220,240,248,.94),rgba(167,207,224,.84))!important}
.main-board:after,.side:after{content:"";position:absolute;inset:auto -4% 2% auto;width:44%;height:26%;opacity:.13;background:repeating-radial-gradient(circle at center,transparent 0 14px,rgba(31,102,127,.75) 15px 16px,transparent 17px 28px);clip-path:polygon(0 50%,100% 0,100% 100%);pointer-events:none}
.category-pill{position:relative;z-index:2;background:linear-gradient(90deg,#c4e5f1,#e8f7fb);border-color:#7fb7ca;color:#456977;padding:8px 18px;box-shadow:0 5px 12px rgba(44,90,108,.14);font-size:10px}.main-board h2{position:relative;z-index:2;color:#1e4152;font-size:19px;max-width:760px}
.hangman-stage{position:relative;z-index:2;min-height:360px!important;max-width:330px;background:linear-gradient(145deg,rgba(235,248,252,.92),rgba(190,218,230,.84))!important;border-color:rgba(40,102,124,.34)!important;box-shadow:0 10px 20px rgba(42,78,92,.18),inset 0 1px rgba(255,255,255,.8)!important}.hangman-stage:before{opacity:.16;background-size:28px 28px}.hangman-card-head{color:#466977}.hangman-card-head strong{color:#d98c26}.hangman-svg .gallows{stroke:#607b87}.hangman-svg .person{stroke:#547683}.hangman-svg .head{fill:#dceff5}.hangman-caption{color:#496773}
.word{position:relative;z-index:2;color:#294d5d;font-size:clamp(27px,2.2vw,43px);letter-spacing:.18em;text-shadow:0 1px rgba(255,255,255,.85)}.used,.turn-msg{position:relative;z-index:2;color:#476976}.turn-msg{font-weight:800}
.middle-side{position:relative;border-radius:22px!important;padding:22px 16px!important;gap:18px!important;background:linear-gradient(180deg,rgba(206,231,241,.92),rgba(171,205,220,.80))!important}.middle-side:before{content:"";position:absolute;left:15%;right:15%;top:52%;border-top:1px solid rgba(39,101,122,.22)}
.timer-card small{color:#466774}.timer-card #timer{color:#1f6579;text-shadow:0 1px rgba(255,255,255,.8);font-size:42px}.timer-card span{color:#5b7883}.pause-btn{background:linear-gradient(180deg,#e9f6fb,#bfdce8)!important;color:#315362!important;border-color:#91c3d4!important;box-shadow:0 6px 13px rgba(49,89,104,.18)}.pause-btn:hover{color:#087c97!important;border-color:#18c9e5!important}.vowels{border-color:rgba(40,100,122,.22)!important}.vowels span{color:#587681}.vowels button{background:linear-gradient(180deg,#fff4df,#efd7ad)!important;color:#8d6221!important;border-color:#d9b878!important;box-shadow:0 3px 7px rgba(92,66,27,.18)}
.side{position:relative;border-radius:28px!important;padding:24px!important;overflow:hidden;background:linear-gradient(145deg,rgba(220,240,248,.94),rgba(169,207,223,.82))!important}.wheel-wrap{height:290px}.wheel{border-color:#edf9fc;box-shadow:0 0 0 5px rgba(56,116,135,.35),0 16px 28px rgba(26,57,70,.34)!important}.pointer{border-top-color:#ffc83f;filter:drop-shadow(0 3px 3px rgba(106,69,0,.35))}.wheel-label{background:#153747;border-color:#eaf7fa;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3)}.spin{background:linear-gradient(180deg,#ffe4ae,#f5b45d)!important;color:#70401e!important;border:1px solid #d68d36!important;border-radius:12px!important;box-shadow:0 7px 13px rgba(130,75,19,.22),inset 0 1px rgba(255,255,255,.8)}.spin:hover{filter:brightness(1.05);transform:translateY(-1px)}
.actions{position:relative;z-index:3}.letter-row{gap:7px}.letter{padding:10px 0;border-radius:8px;border-color:rgba(42,104,126,.28);background:linear-gradient(180deg,#edf8fb,#c6e0ea);color:#315564;box-shadow:0 3px 7px rgba(49,88,103,.10)}.letter:hover{background:#effcff;color:#0d7e99;border-color:#19c9e6}.letter.used{background:rgba(126,160,173,.25);color:#69848e}.letter.locked:not(.used){background:rgba(194,215,223,.48);color:#6d8790;border-color:rgba(70,110,124,.15)}.letter-status{color:#526f7b}.solve input{background:rgba(236,248,252,.86);border-color:rgba(42,103,125,.25);color:#315564}.solve button{background:linear-gradient(180deg,#e9f7fb,#bddae6)!important;color:#3d6471!important;border:1px solid #9bc7d6!important;box-shadow:0 4px 8px rgba(50,89,104,.15)}.reset{color:#486c78}.reset:hover{color:#0b809b}
.game-notice{background:linear-gradient(145deg,rgba(237,250,255,.98),rgba(185,220,234,.98));color:#244858;border-color:#20c9e5;box-shadow:0 18px 50px rgba(24,68,84,.32)}.game-notice-ok{background:#dff1f7;color:#315665;border-color:#83b7c7}.flash{background:#f9e7e8;color:#843842;border-color:#db8c96!important}
.computer-opponent{background:linear-gradient(145deg,rgba(221,244,250,.92),rgba(184,218,231,.8));border-color:rgba(29,170,197,.35);box-shadow:inset 0 1px rgba(255,255,255,.7)}.computer-toggle{color:#345968}.computer-toggle input{accent-color:#14bdd9}.computer-difficulty{color:#486b77}.computer-difficulty select{background:#edf8fb;color:#345968;border-color:#8dbccc}
.leader{background:linear-gradient(145deg,rgba(223,242,249,.9),rgba(181,213,226,.8))!important;color:#294b5a}th{color:#4d6d78}td{border-color:rgba(44,101,120,.18)}
.event-overlay .event-card{background:linear-gradient(145deg,rgba(237,251,255,.98),rgba(177,215,231,.98));color:#234857;border-color:#1ac6e3;box-shadow:0 20px 60px rgba(23,66,82,.35)}
@media (min-width:1001px){.app{padding:10px 30px 14px}.game{grid-template-columns:minmax(500px,1.28fr) minmax(190px,.46fr) minmax(470px,.98fr);gap:16px}.main-board{height:calc(100vh - 125px);min-height:680px}.side{padding:18px!important}.wheel-wrap{height:245px}.wheel{width:220px;height:220px}.wheel-segment b{transform:translate(-50%,-50%) translateY(-65px) rotate(var(--text-angle));font-size:9px}.wheel-label{width:64px;height:64px;font-size:8px}.letter{padding:7px 0}.middle-side{padding:16px 12px!important}.hangman-stage{min-height:300px!important}.hangman-art{height:210px}.hangman-svg{height:210px}.word{font-size:clamp(25px,2.15vw,37px)}}
@media (max-width:1000px){.app{padding:10px}.top{gap:12px;flex-wrap:wrap}.top-actions{order:3;width:100%;justify-content:center}.main-board{min-height:auto;padding:28px 16px!important}.card:before,.main-board:before,.side:before{inset:5px}.game{gap:12px}.wheel-wrap{height:250px}}


/* ==========================================================
   AKTUELLER SPIELER – dauerhafte, eindeutige Zuganzeige
   ========================================================== */
[data-active-team]{
  position:relative;
  transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease, filter .22s ease;
}
[data-active-team].is-active-turn,
.team-active{
  z-index:5;
  transform:translateY(-2px) scale(1.015);
  border-color:#00e5ff !important;
  box-shadow:
    0 0 0 2px rgba(0,229,255,.88),
    0 0 22px rgba(0,229,255,.8),
    0 0 46px rgba(0,180,255,.36) !important;
  animation:hangmanActivePulse 1.35s ease-in-out infinite;
}
[data-active-team].is-inactive-turn,
.team-inactive{
  opacity:.52;
  filter:saturate(.55) brightness(.88);
}
.is-active-turn::after,
.team-active::after{
  content:"◉ AKTUELL AM ZUG";
  position:absolute;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  z-index:20;
  white-space:nowrap;
  padding:5px 11px;
  border-radius:999px;
  background:linear-gradient(90deg,#00a9d8,#00e5ff);
  color:#062330;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 5px 18px rgba(0,229,255,.48);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
}
@keyframes hangmanActivePulse{
  0%,100%{box-shadow:0 0 0 2px rgba(0,229,255,.72),0 0 20px rgba(0,229,255,.58),0 0 42px rgba(0,180,255,.28)}
  50%{box-shadow:0 0 0 3px rgba(255,191,54,.9),0 0 30px rgba(0,229,255,.95),0 0 58px rgba(0,180,255,.48)}
}


/* Reale Spielstandsanzeige: der aktive Zug ist jederzeit eindeutig sichtbar. */
.scorebar .team.is-active-turn{
  opacity:1 !important;
  filter:none !important;
  transform:translateY(-3px) scale(1.025);
  background:linear-gradient(135deg,rgba(0,229,255,.30),rgba(14,74,110,.78)) !important;
}
.scorebar .team.is-inactive-turn{
  opacity:.42 !important;
  filter:saturate(.35) brightness(.82);
  transform:scale(.985);
}
.scorebar .team.is-active-turn strong{
  color:#ffd15a !important;
  text-shadow:0 0 12px rgba(255,209,90,.72);
}
.scorebar .team.is-active-turn span{
  font-weight:900;
  letter-spacing:.04em;
}

/* Computerzug-Hinweis oberhalb der Rundenanzeige entfernt. */
/* Computerzug: sichtbare autonome Phase */
body[data-computer-team2="1"][data-team="1"] .letters-form button,
body[data-computer-team2="1"][data-team="1"] .vowel-form button{
  pointer-events:none;
  opacity:.48;
}
body[data-computer-team2="1"][data-team="1"] #computerStepForm{display:none !important}


/* Abstand zwischen Kategorie-Anzeige und Spielbrett reduzieren */
.category-pill{
  margin-bottom: 8px !important;
}
.category-pill + .main-board{
  margin-top: 0 !important;
}


/* Alle Inhalte innerhalb der Spiel-Panels grundsätzlich oben ausrichten */
.game-shell,
.game-layout,
.game-grid,
.left-panel,
.right-panel,
.hangman-panel,
.main-board,
.timer-card,
.score-card,
.scoreboard,
.panel,
.info-panel{
  align-items: flex-start;
}

/* Bei vertikalen Flex-Containern keine Zentrierung oder Verteilung nach unten */
.left-panel,
.right-panel,
.hangman-panel,
.main-board,
.timer-card,
.score-card,
.scoreboard,
.panel,
.info-panel{
  justify-content: flex-start !important;
}

/* Einzelne Elemente wie Timer und Anzeigen beginnen immer am oberen Rand */
.timer-card > *,
.score-card > *,
.scoreboard > *,
.info-panel > *,
.hangman-panel > *{
  margin-top: 0;
}


/* Game-over: hämisch lachender Hangman */
.hangman-laugh-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(3,6,14,.82);
  backdrop-filter:blur(10px);
  animation:laughOverlayIn .35s ease-out;
}
.hangman-laugh-card{
  position:relative; width:min(92vw,560px); overflow:hidden;
  text-align:center; padding:34px 28px 30px; border-radius:28px;
  background:linear-gradient(145deg,rgba(20,26,47,.98),rgba(8,10,20,.98));
  border:1px solid rgba(255,75,105,.65);
  box-shadow:0 0 45px rgba(255,45,85,.38),0 22px 70px rgba(0,0,0,.55);
}
.laugh-glow{position:absolute;inset:-40%;background:radial-gradient(circle,rgba(255,50,90,.18),transparent 55%);pointer-events:none}
.laugh-hangman{position:relative;width:170px;height:210px;margin:0 auto 8px;transform-origin:50% 12%;animation:hangmanLaugh .34s ease-in-out infinite alternate}
.laugh-head{position:absolute;top:8px;left:47px;width:78px;height:78px;border:7px solid #f3f5ff;border-radius:50%;background:#202744;box-shadow:0 0 25px rgba(255,255,255,.2)}
.laugh-eye{position:absolute;top:22px;width:11px;height:11px;border-radius:50%;background:#ff4b6e;box-shadow:0 0 12px #ff4b6e}
.laugh-eye.left{left:18px}.laugh-eye.right{right:18px}
.laugh-mouth{position:absolute;left:17px;right:17px;bottom:13px;height:22px;border-bottom:7px solid #fff;border-radius:0 0 50% 50%;transform:rotate(-8deg)}
.laugh-body{position:absolute;top:88px;left:82px;width:7px;height:62px;background:#f3f5ff;border-radius:10px}
.laugh-arm,.laugh-leg{position:absolute;width:7px;background:#f3f5ff;border-radius:10px;transform-origin:top center}
.laugh-arm.left{top:96px;left:79px;height:58px;transform:rotate(52deg)}
.laugh-arm.right{top:96px;left:89px;height:58px;transform:rotate(-52deg)}
.laugh-leg.left{top:145px;left:82px;height:58px;transform:rotate(28deg)}
.laugh-leg.right{top:145px;left:88px;height:58px;transform:rotate(-28deg)}
.hangman-laugh-card h2{position:relative;margin:2px 0 6px;font-size:clamp(32px,7vw,58px);letter-spacing:.04em;color:#ff4b6e;text-shadow:0 0 22px rgba(255,75,110,.75)}
.hangman-laugh-card p{position:relative;margin:0 0 18px;font-size:18px}
.laugh-solution{position:relative;margin:0 auto 22px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.06);font-size:15px}
.laugh-solution strong{display:block;margin-top:5px;font-size:clamp(22px,5vw,34px);letter-spacing:.06em;color:#ffd166}
.laugh-close{position:relative;border:0;border-radius:999px;padding:12px 28px;font:inherit;font-weight:900;letter-spacing:.08em;cursor:pointer;background:#ff4b6e;color:#fff;box-shadow:0 8px 28px rgba(255,75,110,.35)}
.hangman-laugh-overlay.is-closing{animation:laughOverlayOut .25s ease-in forwards}
@keyframes laughOverlayIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes laughOverlayOut{to{opacity:0}}
@keyframes hangmanLaugh{0%{transform:rotate(-11deg) translateY(0)}100%{transform:rotate(11deg) translateY(-7px)}}

/* Deutlichere, hämische Lachanimation */
.laugh-hangman{
  animation:hangmanLaugh .18s cubic-bezier(.36,.07,.19,.97) infinite alternate !important;
}
.laugh-head{animation:laughHead .12s ease-in-out infinite alternate}
.laugh-arm.left{animation:laughArmLeft .18s ease-in-out infinite alternate}
.laugh-arm.right{animation:laughArmRight .18s ease-in-out infinite alternate}
@keyframes hangmanLaugh{
  0%{transform:rotate(-15deg) translate(-9px,2px) scale(1)}
  35%{transform:rotate(13deg) translate(9px,-8px) scale(1.04)}
  70%{transform:rotate(-10deg) translate(-6px,4px) scale(.98)}
  100%{transform:rotate(17deg) translate(11px,-10px) scale(1.05)}
}
@keyframes laughHead{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(12deg) translateY(-5px)}}
@keyframes laughArmLeft{from{transform:rotate(40deg)}to{transform:rotate(78deg)}}
@keyframes laughArmRight{from{transform:rotate(-40deg)}to{transform:rotate(-78deg)}}


/* Nur während der HAHAHA-Maske ist das Spiel vollständig gesperrt */
body.hangman-laugh-locked{
  overflow:hidden;
}
body.hangman-laugh-locked #appContent{
  pointer-events:none !important;
  user-select:none;
}
.hangman-laugh-overlay{
  pointer-events:auto;
}
.hangman-laugh-overlay .laugh-close{
  pointer-events:auto;
  position:relative;
  z-index:2;
}


/* HAHAHA-Maske: Hinweistext deutlich heller und besser lesbar */
.hangman-laugh-card p{
  color:#ffffff !important;
  opacity:1 !important;
  font-weight:800;
  text-shadow:0 0 12px rgba(255,255,255,.28);
}


/* Timer und Vokale: Inhalte immer am oberen Rand der jeweiligen Spiel-DIV ausrichten */
.timer-card,
.vocal-card,
.vowels-card,
.vocals-card,
.vowel-card,
.info-panel:has(#timer),
.info-panel:has(.vowel-btn),
.info-panel:has([data-vowel]){
  justify-content:flex-start !important;
  align-items:stretch;
}

.timer-card > *,
.vocal-card > *,
.vowels-card > *,
.vocals-card > *,
.vowel-card > *,
.info-panel:has(#timer) > *,
.info-panel:has(.vowel-btn) > *,
.info-panel:has([data-vowel]) > *{
  margin-top:0 !important;
}

.timer-card #timer,
.info-panel #timer{
  margin-top:0 !important;
}

/* HAHAHA-Maske: Beschriftung „Das gesuchte Wort war:“ deutlich hell */
.hangman-laugh-card .laugh-solution{
  color:#ffffff !important;
  opacity:1 !important;
  font-weight:800 !important;
  text-shadow:0 0 12px rgba(255,255,255,.30);
}
.hangman-laugh-card .laugh-solution strong{
  color:#ffd166 !important;
  opacity:1 !important;
}

/* Hall-of-Fame-Navigation */
html{scroll-behavior:smooth}
#hall-of-fame{scroll-margin-top:24px}
.top-actions .hall-link{border-color:rgba(247,183,51,.45)}
.top-actions .hall-link:hover{border-color:var(--gold);color:var(--gold)}


/* Online-Duell */
.online-game-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px;padding:10px 14px;border:1px solid rgba(0,210,255,.28);border-radius:12px;background:rgba(0,210,255,.06);color:var(--text);font-size:11px;letter-spacing:.05em}
.online-game-bar form{margin:0}.online-game-bar .reset{margin:0;padding:7px 10px}
@media(max-width:700px){.online-game-bar{align-items:flex-start;flex-direction:column}}


/* Fachliche Info-Maske nach gelöster Runde */
.word-info-trigger{display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;border:1px solid rgba(53,217,255,.5);border-radius:999px;background:rgba(53,217,255,.08);color:var(--cyan);padding:9px 15px;font:inherit;font-weight:900;letter-spacing:.08em;cursor:pointer;box-shadow:0 0 18px rgba(53,217,255,.08)}
.word-info-trigger:hover{border-color:var(--cyan);background:rgba(53,217,255,.14)}
.word-info-overlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:24px;background:rgba(2,7,12,.86);backdrop-filter:blur(7px);overflow:auto}
.word-info-card{position:relative;width:min(760px,94vw);max-height:min(82vh,720px);overflow:auto;border:1px solid rgba(53,217,255,.42);border-radius:22px;background:linear-gradient(145deg,#0d1c27,#071018);box-shadow:0 25px 90px rgba(0,0,0,.65),0 0 35px rgba(53,217,255,.12);padding:26px 28px 24px;color:var(--text)}
.word-info-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.word-info-head strong{font-size:28px;color:var(--cyan);text-shadow:0 0 16px rgba(53,217,255,.5)}
.word-info-card h2{margin:8px 0 18px;font-size:clamp(26px,4vw,42px);line-height:1.08;color:#fff}
.word-info-body{font-size:17px;line-height:1.68;color:#d9e7eb;white-space:normal}
.word-info-verified{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:22px;color:#58e58a;font-size:13px;font-weight:900;letter-spacing:.04em}.verified-check{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#1d9b55;color:#fff;box-shadow:0 0 15px rgba(88,229,138,.35);font-size:17px}
.word-info-ok{display:block;margin:24px auto 0;min-width:120px;border:0;border-radius:999px;padding:12px 30px;background:var(--gold);color:#10151b;font:inherit;font-weight:900;letter-spacing:.08em;cursor:pointer;box-shadow:0 8px 25px rgba(247,183,51,.2)}
.word-info-ok:hover{filter:brightness(1.08)}
body.word-info-locked{overflow:hidden} body.word-info-locked #appContent{pointer-events:none;user-select:none}.word-info-overlay{pointer-events:auto}.word-info-ok{pointer-events:auto;position:relative;z-index:2}
@media(max-width:650px){.word-info-card{padding:22px 19px}.word-info-body{font-size:15px;line-height:1.58}}

/* Online-Code im Zentrum der Spielstandsanzeige */
.scorebar .round{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.online-code-game{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:7px;padding:7px 11px;border:1px solid rgba(39,112,138,.35);border-radius:999px;background:linear-gradient(180deg,rgba(237,249,253,.96),rgba(193,222,233,.92));color:#275568;font:900 10px/1 Inter,Arial,sans-serif;letter-spacing:.07em;cursor:pointer;box-shadow:0 4px 10px rgba(37,78,94,.13);white-space:nowrap}
.online-code-game:hover{border-color:#18c9e5;color:#087c97;transform:translateY(-1px)}
.online-code-game span{font-weight:1000}.online-code-game b{font-size:12px}
.online-copy-feedback{display:block;min-height:14px;margin-top:3px;color:#179650;font-size:9px;font-weight:900;letter-spacing:.03em}
@media(max-width:700px){.online-code-game{max-width:100%;white-space:normal}.scorebar .round{min-width:72px}}

.online-rematch-overlay{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;padding:24px;background:rgba(2,7,12,.86);backdrop-filter:blur(7px)}
.online-rematch-card{width:min(620px,94vw);padding:30px;border:1px solid rgba(53,217,255,.42);border-radius:22px;background:linear-gradient(145deg,#0d1c27,#071018);box-shadow:0 25px 90px rgba(0,0,0,.65);text-align:center;color:var(--text)}
.online-rematch-card h2{font-size:clamp(30px,5vw,46px);margin:8px 0 14px;color:#fff}.online-rematch-card p{font-size:17px;line-height:1.55;color:#d9e7eb}.online-rematch-status{min-height:24px;margin:18px 0;color:var(--cyan);font-weight:800}.online-rematch-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.online-rematch-actions button{min-width:210px}.online-rematch-locked{overflow:hidden}.online-rematch-locked #appContent{pointer-events:none;user-select:none}
.laugh-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.laugh-info{border:1px solid rgba(53,217,255,.5);border-radius:999px;padding:11px 24px;background:rgba(53,217,255,.08);color:var(--cyan);font:inherit;font-weight:900;cursor:pointer}.laugh-close{margin-top:0!important}


/* Lösungseingabe als blockierende Popup-Maske: verhindert Reload/Fokusverlust beim Tippen. */
.solve-popup-trigger{display:block;width:100%;margin-top:10px;padding:12px 14px;border:1px solid rgba(42,103,125,.35);border-radius:10px;background:linear-gradient(180deg,#e9f7fb,#bddae6);color:#315564;font:900 11px/1 Inter,Arial,sans-serif;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 8px rgba(50,89,104,.12)}
.solve-popup-trigger:hover{border-color:#18c9e5;color:#087c97}.solve-popup-trigger:disabled{opacity:.45;cursor:not-allowed}
.solve-overlay{position:fixed;inset:0;z-index:13000;display:grid;place-items:center;padding:24px;background:rgba(2,7,12,.86);backdrop-filter:blur(7px)}
.solve-card{width:min(620px,94vw);padding:30px;border:1px solid rgba(53,217,255,.42);border-radius:22px;background:linear-gradient(145deg,#0d1c27,#071018);box-shadow:0 25px 90px rgba(0,0,0,.65),0 0 35px rgba(53,217,255,.10);color:var(--text)}
.solve-card h2{margin:8px 0 10px;font-size:clamp(30px,5vw,44px);color:#fff}.solve-card p{margin:0 0 18px;color:#d9e7eb;line-height:1.55}.solve-popup-form input{font-size:18px;padding:15px;background:#071219;color:var(--text)}
.solve-popup-actions{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}.solve-popup-actions .primary{grid-column:auto;min-width:180px}.solve-popup-actions .reset{margin-top:0;padding:12px 20px}
body.solve-locked{overflow:hidden}body.solve-locked #appContent{pointer-events:none;user-select:none}

/* ================================================================
   V24 – WebSocket Game-Chat / Hangman Design
   ================================================================ */
.online-chat{width:min(900px,100%);margin:20px auto 30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(16,35,44,.98),rgba(8,20,26,.98));box-shadow:0 20px 60px #0006;overflow:visible;color:var(--text);position:relative}
.online-chat-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(32,214,232,.08),rgba(247,183,51,.05));border-radius:18px 18px 0 0}
.online-chat-head strong{display:block;font-size:13px;letter-spacing:.12em;color:var(--cyan)}
.online-chat-head small{display:block;margin-top:4px;color:var(--muted);font-size:10px;letter-spacing:.08em}
.online-chat-head>span{font-size:10px;color:var(--cyan);white-space:nowrap}
.online-chat[data-connection="offline"] .online-chat-head>span,.online-chat[data-connection="error"] .online-chat-head>span{color:var(--red)}
.online-chat[data-connection="finished"] .online-chat-head>span{color:var(--gold)}
.online-chat-messages{height:240px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth;background:rgba(5,13,17,.34)}
.online-chat-message{max-width:min(76%,620px);padding:9px 13px;border-radius:14px;background:#102630;border:1px solid #24414b;align-self:flex-start;color:var(--text);box-shadow:0 5px 18px #0003;animation:chatMessageIn .22s ease-out both}
.online-chat-message.self{align-self:flex-end;background:linear-gradient(145deg,#26331f,#1c271b);border-color:#74622c}
.online-chat-message.other{background:linear-gradient(145deg,#102b35,#0d222a);border-color:#24505c}
.online-chat-meta{font-size:10px;color:#86aab3;margin-bottom:4px;letter-spacing:.03em}
.online-chat-message.self .online-chat-meta{color:#d9bc6a}
.online-chat-text{font-size:14px;line-height:1.5;color:#f2fbfc;overflow-wrap:anywhere;white-space:pre-wrap}
.online-chat-message.emoji-only .online-chat-text{font-size:27px;line-height:1.15;animation:emojiPop .42s cubic-bezier(.2,.8,.2,1)}
.online-chat-system-line{font-size:10px;color:#6f8b93;padding:3px 6px;text-align:center;overflow-wrap:anywhere}
.online-chat-composer{position:relative;display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--line);background:#08141a;border-radius:0 0 18px 18px}
.online-chat-form{display:flex;gap:8px;flex:1;min-width:0}
.online-chat-form input{flex:1;min-width:0;margin:0!important;box-sizing:border-box;padding:12px 13px;border:1px solid #294852;background:#071219;color:var(--text);font-size:14px}
.online-chat-form input::placeholder{color:#64818a}
.online-chat-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px #20d6e81a}
.online-chat-send{flex:0 0 auto;margin:0!important;padding:12px 17px;border:0;border-radius:10px;background:var(--cyan);color:#041015;font-weight:900;letter-spacing:.08em;cursor:pointer}
.online-chat-send:hover{filter:brightness(1.08)}
.online-emoji-button{width:42px;height:42px;flex:0 0 42px;border:1px solid #294852;border-radius:10px;background:#0e2028;color:var(--gold);font-size:24px;line-height:1;cursor:pointer}
.online-emoji-button:hover{border-color:var(--gold);background:#162a31}
.online-emoji-picker{position:absolute;left:10px;bottom:64px;width:min(420px,calc(100% - 20px));padding:12px;border:1px solid var(--line);border-radius:14px;background:#0b181f;box-shadow:0 20px 60px #000b;z-index:80}
.online-emoji-title{font-size:9px;letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
.online-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;max-height:190px;overflow-y:auto}
.online-emoji-grid button{border:0;background:transparent;border-radius:8px;font-size:22px;padding:5px;cursor:pointer;line-height:1.15}
.online-emoji-grid button:hover{background:#17333d;transform:scale(1.12)}
@keyframes chatMessageIn{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}
@keyframes emojiPop{0%{transform:scale(.7) rotate(-5deg)}65%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1)}}
@media(max-width:560px){.online-chat{width:100%;margin-top:15px}.online-chat-messages{height:210px;padding:12px}.online-chat-message{max-width:88%}.online-chat-composer{align-items:flex-end}.online-chat-form{flex-direction:row}.online-chat-send{padding:12px 12px}.online-emoji-picker{width:calc(100% - 20px)}.online-emoji-grid{grid-template-columns:repeat(7,1fr)}}

/* ================================================================
   V25 – ONLINE CHAT: VISUALLY MATCH THE HANGMAN TECH EDITION
   Light blue glass / cyan frame / dark teal typography / gold accent
   ================================================================ */
.online-chat{
  width:min(1120px,100%);
  margin:14px auto 26px;
  color:#234b5a;
  background:
    linear-gradient(145deg,rgba(238,249,252,.96),rgba(190,221,231,.90));
  border:1px solid rgba(70,151,174,.55);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 28px rgba(44,92,108,.18);
  overflow:visible;
  position:relative;
}
.online-chat::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(32,198,221,.28);
  border-radius:17px;
  pointer-events:none;
}
.online-chat-head{
  min-height:62px;
  padding:12px 18px;
  border-bottom:1px solid rgba(57,127,149,.25);
  background:linear-gradient(90deg,rgba(116,213,229,.28),rgba(238,249,252,.34),rgba(247,183,51,.10));
  border-radius:22px 22px 0 0;
  position:relative;
}
.online-chat-title{display:flex;align-items:center;gap:10px}
.online-chat-title strong{
  color:#244a5a;
  font-size:14px;
  letter-spacing:.14em;
  font-weight:1000;
}
.online-chat-title small{
  color:#5b7c88;
  font-size:10px;
  letter-spacing:.08em;
  margin-top:3px;
}
.chat-bubble-icon{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(44,139,163,.35);
  box-shadow:inset 0 1px 0 #fff;
  font-size:19px;
}
.online-chat-head>span{
  color:#168ba2;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
}
.online-chat[data-connection="offline"] .online-chat-head>span,
.online-chat[data-connection="error"] .online-chat-head>span{color:#c9484f}
.online-chat[data-connection="finished"] .online-chat-head>span{color:#a87513}
.online-chat-messages{
  height:250px;
  overflow-y:auto;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:9px;
  background:
    linear-gradient(180deg,rgba(224,242,247,.42),rgba(190,221,231,.22));
  scrollbar-color:#8bc8d6 rgba(255,255,255,.25);
}
.online-chat-message{
  max-width:min(76%,720px);
  padding:10px 14px;
  border-radius:16px;
  align-self:flex-start;
  color:#244a5a;
  background:linear-gradient(145deg,rgba(248,253,254,.95),rgba(215,237,243,.92));
  border:1px solid rgba(65,143,163,.38);
  box-shadow:0 5px 14px rgba(48,91,104,.12),inset 0 1px 0 #fff;
  animation:chatMessageIn .22s ease-out both;
}
.online-chat-message.self{
  align-self:flex-end;
  color:#264b52;
  background:linear-gradient(145deg,rgba(255,248,224,.96),rgba(247,225,166,.80));
  border-color:rgba(190,143,42,.55);
}
.online-chat-message.other{
  background:linear-gradient(145deg,rgba(246,252,254,.98),rgba(201,231,239,.92));
  border-color:rgba(44,143,167,.42);
}
.online-chat-meta{
  color:#63818b;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  margin-bottom:4px;
}
.online-chat-message.self .online-chat-meta{color:#9a721e}
.online-chat-text{
  color:#1f4350;
  font-size:14px;
  line-height:1.45;
  font-weight:650;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.online-chat-message.emoji-only .online-chat-text{
  font-size:31px;
  line-height:1.15;
  animation:emojiPop .42s cubic-bezier(.2,.8,.2,1);
}
.online-chat-system-line{
  color:#65828d;
  font-size:9px;
  font-weight:800;
  text-align:center;
}
.online-chat-composer{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 13px 13px;
  border-top:1px solid rgba(57,127,149,.25);
  background:linear-gradient(180deg,rgba(219,239,245,.76),rgba(190,221,231,.78));
  border-radius:0 0 22px 22px;
}
.online-chat-form{display:flex;gap:8px;flex:1;min-width:0}
.online-chat-form input{
  flex:1;
  min-width:0;
  margin:0!important;
  padding:11px 14px;
  border:1px solid rgba(59,133,153,.46);
  border-radius:11px;
  background:rgba(250,254,255,.90);
  color:#244b59;
  font-size:14px;
  box-shadow:inset 0 1px 3px rgba(51,103,117,.10);
}
.online-chat-form input::placeholder{color:#78939c}
.online-chat-form input:focus{
  border-color:#20cde4;
  box-shadow:0 0 0 2px rgba(32,205,228,.18),inset 0 1px 3px rgba(51,103,117,.08);
}
.online-chat-send{
  flex:0 0 auto;
  padding:11px 17px;
  border:1px solid rgba(22,144,166,.55);
  border-radius:10px;
  background:linear-gradient(180deg,#83e3ef,#28c4db);
  color:#123a46;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 4px 10px rgba(31,126,147,.16);
  font-weight:1000;
  letter-spacing:.08em;
  cursor:pointer;
}
.online-chat-send:hover{filter:brightness(1.04);transform:translateY(-1px)}
.online-emoji-button{
  width:43px;height:43px;flex:0 0 43px;
  border:1px solid rgba(56,131,150,.48);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(250,254,255,.96),rgba(205,231,238,.94));
  color:#b17c17;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 #fff;
}
.online-emoji-button:hover{border-color:#20cde4;background:#eaf9fc}
.online-emoji-picker{
  position:absolute;
  left:12px;
  bottom:67px;
  width:min(430px,calc(100% - 24px));
  padding:12px;
  border:1px solid rgba(57,132,153,.50);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(247,253,255,.99),rgba(207,232,239,.98));
  box-shadow:0 18px 45px rgba(36,78,91,.25),inset 0 1px 0 #fff;
  z-index:80;
}
.online-emoji-title{
  color:#466975;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.15em;
  margin-bottom:9px;
}
.online-emoji-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.online-emoji-grid button{
  width:100%;aspect-ratio:1;
  padding:0;
  border:1px solid rgba(68,135,153,.18);
  border-radius:8px;
  background:rgba(255,255,255,.60);
  font-size:21px;
  cursor:pointer;
  transition:.15s ease;
}
.online-emoji-grid button:hover{
  background:#fff;
  border-color:#20cde4;
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 5px 12px rgba(35,130,151,.18);
}
@media(max-width:600px){
  .online-chat{border-radius:16px}
  .online-chat-messages{height:220px;padding:12px}
  .online-chat-message{max-width:88%}
  .online-chat-form input{font-size:13px}
  .online-chat-send{padding:11px 12px}
  .online-emoji-grid{grid-template-columns:repeat(7,1fr)}
}

.online-chat-audit-notice{
  position:relative;
  z-index:2;
  width:100%;
  padding:7px 14px;
  border-bottom:1px solid rgba(177,126,23,.28);
  border-radius:22px 22px 0 0;
  background:linear-gradient(180deg,rgba(255,238,190,.94),rgba(247,216,143,.78));
  color:#765515;
  text-align:center;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.10em;
  line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}
.online-chat .online-chat-head{border-radius:0}
@media(max-width:600px){
  .online-chat-audit-notice{font-size:8px;letter-spacing:.06em}
}

/* V27 – Datenschutz / Impressum */
.legal-page{min-height:100vh;padding:18px 32px 74px;color:#244b5b;background:radial-gradient(circle at 10% 20%,rgba(93,217,234,.38),transparent 27%),radial-gradient(circle at 88% 75%,rgba(84,169,199,.26),transparent 32%),linear-gradient(135deg,#d8edf3 0%,#eef8fa 43%,#b9d5df 100%)}
.legal-wrap{max-width:1240px;margin:0 auto}.legal-top{min-height:112px;display:grid;grid-template-columns:minmax(270px,1fr) auto minmax(240px,1fr);align-items:center;gap:24px;border-bottom:1px solid rgba(52,106,123,.24)}
.legal-brand-eyebrow{color:#5a7480;font-size:11px;font-weight:1000;letter-spacing:.20em}.legal-brand-title{color:#21495a;font-size:38px;line-height:.9;font-weight:1000;letter-spacing:.04em;margin-top:4px}.legal-brand-title span{color:#5f7680;font-weight:350}
.legal-nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.legal-nav a{min-width:135px;min-height:54px;padding:8px 14px;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#294d5c;font-size:12px;font-weight:1000;letter-spacing:.06em;background:linear-gradient(180deg,rgba(239,250,253,.96),rgba(190,220,230,.91));border:1px solid rgba(83,157,178,.52);border-radius:15px;box-shadow:inset 0 1px 0 #fff,0 7px 15px rgba(54,103,119,.13)}
.legal-nav a:hover,.legal-nav a.active{border-color:#28cce3;box-shadow:inset 0 1px 0 #fff,0 0 22px rgba(32,214,232,.20),0 8px 17px rgba(54,103,119,.16)}
.legal-credit{justify-self:end;color:#6a858f;text-align:center;font-size:11px;line-height:1.35;letter-spacing:.08em}.legal-heading{text-align:center;padding:20px 0 16px;border-bottom:1px solid rgba(52,106,123,.18)}
.legal-kicker{color:#587580;font-size:10px;font-weight:1000;letter-spacing:.18em}.legal-heading h1{margin:4px 0 0;color:#244c5d;font-size:31px;letter-spacing:.09em}
.legal-lead{max-width:1000px;margin:16px auto 18px;padding:15px 20px;text-align:center;line-height:1.65;color:#355b68;background:linear-gradient(145deg,rgba(245,252,254,.78),rgba(190,221,231,.68));border:1px solid rgba(69,145,166,.36);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 9px 20px rgba(49,94,109,.12)}
.legal-card{margin:14px 0;padding:20px 22px;color:#3c626d;background:linear-gradient(145deg,rgba(238,249,252,.86),rgba(192,222,231,.78));border:1px solid rgba(70,148,170,.40);border-radius:19px;box-shadow:inset 0 1px 0 rgba(255,255,255,.94),inset 0 0 0 3px rgba(89,208,223,.07),0 9px 22px rgba(46,90,105,.15)}
.legal-card h2{margin:0 0 10px;color:#214a5a;font-size:17px;letter-spacing:.04em}.legal-card h3{color:#2c5665;font-size:14px;margin:18px 0 7px}.legal-card p,.legal-card li{font-size:13px;line-height:1.62}.legal-card ul{padding-left:21px}.legal-card strong{color:#8f6818}.legal-card a{color:#087f9a}
.legal-notice{padding:12px 14px;border-radius:13px;margin:12px 0;background:rgba(247,183,51,.14);border:1px solid rgba(190,143,42,.38);color:#765515}.legal-small{font-size:11px!important;color:#587580}
.legal-footer{position:fixed;right:20px;bottom:12px;z-index:100;display:flex;gap:8px;align-items:center;padding:7px 10px;border-radius:13px;background:rgba(226,243,248,.88);border:1px solid rgba(75,146,167,.35);box-shadow:0 5px 16px rgba(49,94,109,.14);backdrop-filter:blur(8px)}
.legal-footer a{color:#365e6c;text-decoration:none;font-size:10px;font-weight:900;letter-spacing:.05em}.legal-footer a:hover{color:#087f9a;text-decoration:underline}.legal-footer span{color:#86a0a8;font-size:9px}
@media(max-width:1050px){.legal-top{grid-template-columns:1fr;gap:12px;padding-bottom:14px}.legal-brand{text-align:center}.legal-nav{order:2}.legal-credit{justify-self:center}}
@media(max-width:600px){.legal-page{padding:12px 12px 72px}.legal-nav a{min-width:calc(50% - 8px);min-height:48px;font-size:10px}.legal-brand-title{font-size:31px}.legal-card{padding:16px}.legal-footer{right:10px;bottom:8px}}

/* V28: Spielende, Highscore-Schwelle und Goldmünzenregen */
.game-finished-panel{display:flex;flex-direction:column;gap:5px;margin:16px 0;padding:16px 14px;border-radius:14px;background:linear-gradient(145deg,rgba(255,244,211,.72),rgba(231,241,247,.9));border:1px solid rgba(214,141,54,.58);color:#70401e;box-shadow:0 10px 24px rgba(106,69,0,.12),inset 0 1px rgba(255,255,255,.8);text-align:center}
.game-finished-panel strong{font-size:15px;letter-spacing:.08em}.game-finished-panel span{font-weight:900}.game-finished-panel small{color:#54717c}
.coin-rain-layer{position:fixed;inset:0;z-index:14500;pointer-events:none;overflow:hidden}
.gold-coin{position:fixed;width:13px;height:13px;border-radius:50%;left:0;top:0;background:radial-gradient(circle at 35% 30%,#fff4b0 0 12%,#ffd35a 13% 40%,#d99a21 41% 72%,#8e5b0b 73% 100%);border:1px solid #fff0a0;box-shadow:0 1px 3px rgba(74,47,0,.38),inset 0 0 0 1px rgba(255,255,255,.35);transform:translate3d(0,0,0) scale(var(--scale));opacity:0;animation:coinToAccount var(--duration) cubic-bezier(.2,.76,.2,1) var(--delay) forwards}
.gold-coin:after{content:'€';position:absolute;inset:0;display:grid;place-items:center;color:#8a5a0b;font:900 8px/1 Arial,sans-serif;text-shadow:0 1px rgba(255,255,255,.55)}
@keyframes coinToAccount{0%{opacity:0;transform:translate3d(0,0,0) scale(var(--scale)) rotate(0deg)}12%{opacity:1}48%{opacity:1;transform:translate3d(calc(var(--dx)*.56),calc(var(--dy)*.52 - 34px),0) scale(calc(var(--scale)*.86)) rotate(calc(var(--spin)*.5))}82%{opacity:1;transform:translate3d(calc(var(--dx)*.88),calc(var(--dy)*.88),0) scale(calc(var(--scale)*.56)) rotate(calc(var(--spin)*.85))}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.28) rotate(var(--spin))}}
@media(max-width:700px){.gold-coin{width:11px;height:11px}.gold-coin:after{font-size:7px}}

.game-finish-notice{flex-direction:column;gap:12px;top:18vh;padding:24px 26px;max-width:720px;border-width:2px;font-size:16px}.game-finish-notice .game-notice-text{width:100%;line-height:1.55}.game-finish-notice .game-notice-ok{min-width:100px;padding:10px 18px}

.online-chat-link-notice{padding:6px 12px 8px;font-size:9px;line-height:1.35;letter-spacing:.03em;color:#6a7f88;background:rgba(255,255,255,.22);border-bottom:1px solid rgba(44,101,120,.12);text-align:center}

/* V28.1: Timer im mittleren Seitenpanel immer ganz oben */
@media (min-width:1001px){
  .middle-side{
    justify-content:flex-start !important;
    align-items:stretch !important;
  }
  .middle-side > .timer-card{
    flex:0 0 auto;
    margin-top:0 !important;
    align-self:stretch;
  }
}


/* ================================================================
   V28.5 – ONLINE DUELL STABILISIERUNG
   Chat und Gewinnanimation bewusst auf die aktuelle Game-Oberfläche
   abgestimmt. Dieser Block steht zuletzt, damit ältere V24/V25-Regeln
   nicht mehr dazwischenfunken.
   ================================================================ */
.online-chat{
  width:min(980px,100%);
  margin:18px auto 24px;
  color:#234b5a;
  background:linear-gradient(145deg,rgba(238,249,252,.98),rgba(194,224,233,.94));
  border:1px solid rgba(53,143,166,.52);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px rgba(44,92,108,.16);
  overflow:hidden;
  position:relative;
}
.online-chat::before{display:none}
.online-chat-head{min-height:54px;padding:10px 16px;background:linear-gradient(90deg,rgba(65,203,224,.18),rgba(255,255,255,.22),rgba(247,183,51,.10));border-bottom:1px solid rgba(57,127,149,.25);border-radius:0}
.online-chat-messages{height:230px;padding:14px 16px;gap:8px;background:linear-gradient(180deg,rgba(224,242,247,.46),rgba(190,221,231,.25));}
.online-chat-message{max-width:min(72%,650px);padding:9px 13px;border-radius:14px;color:#244a5a;background:linear-gradient(145deg,rgba(250,254,255,.98),rgba(213,237,243,.94));border:1px solid rgba(65,143,163,.38);box-shadow:0 4px 12px rgba(48,91,104,.11),inset 0 1px 0 #fff}
.online-chat-message.self{background:linear-gradient(145deg,rgba(255,248,224,.98),rgba(247,225,166,.84));border-color:rgba(190,143,42,.55)}
.online-chat-message.other{background:linear-gradient(145deg,rgba(246,252,254,.99),rgba(201,231,239,.94));border-color:rgba(44,143,167,.42)}
.online-chat-text{font-size:14px;line-height:1.42;color:#1f4350;font-weight:650}
.online-chat-meta{font-size:9px;margin-bottom:3px;color:#64818b;font-weight:900}
.online-chat-composer{padding:9px 11px 11px;background:linear-gradient(180deg,rgba(219,239,245,.80),rgba(190,221,231,.82));border-top:1px solid rgba(57,127,149,.25);border-radius:0}
.online-chat-form input{height:43px;padding:10px 13px;border-radius:10px}
.online-chat-send{height:43px;padding:10px 16px;border-radius:10px}
.online-emoji-button{width:43px;height:43px}
.online-chat-audit-notice,.online-chat-link-notice{position:relative;z-index:1}
.coin-rain-layer{position:fixed;inset:0;pointer-events:none;z-index:10050;overflow:hidden}
.gold-coin{position:fixed;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4ad 0 12%,#ffd65c 13% 38%,#d99a19 39% 72%,#9d6910 73% 100%);border:1px solid rgba(133,86,5,.72);box-shadow:0 2px 7px rgba(128,86,10,.38),inset 0 1px 2px rgba(255,255,255,.8);animation:coinToTeam var(--duration) cubic-bezier(.2,.78,.22,1) var(--delay) both;transform-origin:center;}
.gold-coin::after{content:'€';position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:1000;color:#9a6811;text-shadow:0 1px rgba(255,241,173,.7)}
@keyframes coinToTeam{0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) scale(calc(var(--scale) + .25))}10%{opacity:1}70%{opacity:1}94%{opacity:1;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--spin)) scale(.34)}100%{opacity:.95;transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--spin) + 120deg)) scale(.22)}}
@media(max-width:700px){.online-chat{margin-left:10px;margin-right:10px;width:calc(100% - 20px)}.online-chat-message{max-width:88%}.online-chat-messages{height:220px}}

/* V28.6: Online-Spiel bewusst und endgültig verlassen */
.online-leave-form{margin-top:10px}
.online-leave-btn{width:100%;border:1px solid rgba(173,83,45,.45);background:linear-gradient(145deg,rgba(255,246,238,.96),rgba(246,232,222,.96));color:#8b3f25;font-weight:900;letter-spacing:.06em;border-radius:12px;padding:11px 14px;cursor:pointer;box-shadow:0 5px 14px rgba(110,60,30,.10)}
.online-leave-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(110,60,30,.14)}
.online-leave-btn:disabled{opacity:.65;cursor:wait;transform:none}

/* V29 TECHNO RUSH – Siegerentscheidung */
.winner-choice{margin-top:12px;padding:15px;border-radius:15px;background:linear-gradient(145deg,rgba(255,248,220,.95),rgba(224,240,246,.9));border:1px solid rgba(214,151,38,.55);color:#5d4820}.winner-choice>b{display:block;font-size:18px;color:#815c13}.winner-choice>span{display:block;margin:4px 0 12px;color:#526f7a}.winner-choice-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.winner-choice-actions form{margin:0}.winner-choice-actions button,.winner-choice .risk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 14px;border-radius:11px;font-weight:1000;letter-spacing:.03em;text-decoration:none;cursor:pointer}.secure-btn{border:1px solid rgba(170,123,20,.45);background:linear-gradient(145deg,#fff1b0,#e7b93f);color:#60440b}.risk-btn{border:1px solid rgba(160,61,38,.45);background:linear-gradient(145deg,#ffe4d7,#d77c58);color:#672a1b}.winner-choice-actions .risk-btn{color:#672a1b}

/* V29.2: SUPER-RUNDE JACKPOT – echtes Neon-Fading ausschließlich auf dem JACKPOT-Feld. */
.wheel.super-round .wheel-segment.jackpot::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 15%,rgba(255,255,220,.95) 0 3%,rgba(255,220,70,.75) 12%,rgba(255,190,30,.35) 38%,rgba(255,170,0,0) 70%),
    linear-gradient(135deg,rgba(255,244,150,.95),rgba(255,186,20,.55) 48%,rgba(120,65,0,.15));
  clip-path:polygon(50% 50%,35.913% 2.025%,64.087% 2.025%);
  opacity:.16;
  transform:scale(1.015);
  transform-origin:50% 50%;
  animation:superJackpotNeon 1.15s ease-in-out infinite;
}
.wheel.super-round .wheel-segment.jackpot::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:rgba(255,210,55,.55);
  clip-path:polygon(50% 50%,35.913% 2.025%,64.087% 2.025%);
  opacity:0;
  transform:scale(1.025);
  animation:superJackpotNeonCore 1.15s ease-in-out infinite;
}
.wheel.super-round .wheel-segment.jackpot b{
  position:absolute;
  z-index:2;
  color:#fff;
  text-shadow:0 1px 3px #000,0 0 5px #000,0 0 12px rgba(255,220,70,.95);
}
@keyframes superJackpotNeon{
  0%,100%{opacity:.10;filter:brightness(.8) drop-shadow(0 0 2px rgba(255,205,40,.35))}
  50%{opacity:1;filter:brightness(1.7) drop-shadow(0 0 8px rgba(255,214,65,1)) drop-shadow(0 0 18px rgba(255,190,30,.8))}
}
@keyframes superJackpotNeonCore{
  0%,100%{opacity:0}
  50%{opacity:.82;filter:blur(1px) drop-shadow(0 0 12px rgba(255,220,70,1))}
}

/*
 * STARTSEITE REDESIGN – kompakter + stärkeres 3D-Finish
 * Bewusst als abschließender Override, damit Spiel- und Online-Layout unverändert bleiben.
 */
:root{
  --surface-3d:#dff3f8;
  --surface-3d-2:#c8e6ed;
  --ink-3d:#123340;
  --shadow-3d:0 14px 30px rgba(18,55,67,.20),0 3px 8px rgba(18,55,67,.16),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 0 rgba(66,119,133,.16);
  --shadow-3d-deep:0 24px 50px rgba(7,30,40,.25),0 7px 14px rgba(7,30,40,.18),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -3px 0 rgba(50,103,119,.18);
}

/* Startseite: weniger Leerraum, klarere Proportionen */
body:has(.start-grid){
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.98) 0,rgba(255,255,255,.55) 18%,transparent 42%),
    linear-gradient(145deg,#eefbfe 0%,#d9eff4 45%,#c7e4eb 100%);
  color:#173744;
}
body:has(.start-grid) .app{
  max-width:1380px;
  padding:12px 16px 22px;
}
body:has(.start-grid) .top{
  position:relative;
  min-height:54px;
  padding:6px 10px 9px;
  border:1px solid rgba(75,139,155,.32);
  border-radius:13px 13px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(224,244,248,.72));
  box-shadow:0 4px 12px rgba(30,79,92,.10),inset 0 1px 0 #fff;
}
body:has(.start-grid) .eyebrow{font-size:8px;letter-spacing:.20em;color:#397a8a}
body:has(.start-grid) .top h1{margin:1px 0 0;font-size:24px;color:#193e4d;text-shadow:0 1px 0 #fff;letter-spacing:.07em}
body:has(.start-grid) .top h1 span{color:#668793}
body:has(.start-grid) .top-actions{gap:7px}
body:has(.start-grid) .top-actions .guide-link,
body:has(.start-grid) .fullscreen-btn{
  min-height:31px;
  padding:7px 12px;
  border:1px solid rgba(65,125,141,.38);
  border-radius:8px;
  background:linear-gradient(180deg,#f9ffff 0%,#d6edf2 48%,#bcdde5 100%);
  color:#244d5a;
  box-shadow:0 3px 7px rgba(26,76,89,.16),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(57,109,123,.22);
  text-shadow:0 1px 0 #fff;
  font-size:9px;
}
body:has(.start-grid) .top-actions .guide-link:hover,
body:has(.start-grid) .fullscreen-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 12px rgba(26,76,89,.20),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(57,109,123,.22);
}
body:has(.start-grid) .brand-subtitle{right:10px;top:4px;font-size:7px;color:#7699a4}

body:has(.start-grid) .start-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);
  gap:14px;
  margin-top:12px;
  align-items:stretch;
}
body:has(.start-grid) .hero.card,
body:has(.start-grid) .categories.card{
  border:1px solid rgba(70,137,153,.38);
  background:
    linear-gradient(145deg,rgba(242,252,254,.98),rgba(204,233,239,.98));
  box-shadow:var(--shadow-3d-deep);
}
body:has(.start-grid) .hero{
  min-height:0;
  padding:25px 28px 20px;
  border-radius:15px;
  transform:perspective(1000px) rotateX(.25deg);
}
body:has(.start-grid) .hero::after,
body:has(.start-grid) .categories::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.58);
  pointer-events:none;
}
body:has(.start-grid) .hero h2{
  margin:8px 0 12px;
  max-width:650px;
  font-size:clamp(38px,4vw,50px);
  line-height:.98;
  color:#1d4150;
  text-shadow:0 2px 0 #fff,0 5px 12px rgba(20,65,79,.12);
}
body:has(.start-grid) .hero p:not(.eyebrow){
  max-width:650px;
  margin:7px 0;
  color:#64828d;
  line-height:1.42;
  font-size:12px;
}
body:has(.start-grid) .hero .orb{
  width:300px;height:300px;right:-105px;top:-145px;
  background:radial-gradient(circle,rgba(32,214,232,.22),rgba(32,214,232,0) 67%);
}
body:has(.start-grid) .hero .primary{
  min-height:35px;
  padding:9px 15px;
  border-radius:9px;
  background:linear-gradient(180deg,#40e4ef 0%,#0fc1d6 48%,#079eb7 100%);
  color:#07323c;
  border:1px solid rgba(0,113,133,.40);
  box-shadow:0 6px 12px rgba(0,144,166,.22),inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 0 rgba(0,88,105,.28);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  font-size:10px;
}
body:has(.start-grid) .start-form{
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:15px;
}
body:has(.start-grid) .start-form label{
  color:#5d7d88;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
}
body:has(.start-grid) .start-form input,
body:has(.start-grid) .start-form select{
  margin-top:4px;
  padding:9px 11px;
  min-height:35px;
  border-radius:8px;
  border:1px solid rgba(65,125,141,.34);
  background:linear-gradient(180deg,#f9feff,#d7edf2);
  color:#193d4b;
  box-shadow:inset 0 2px 4px rgba(44,93,106,.10),0 2px 4px rgba(25,75,88,.08),inset 0 1px 0 #fff;
}
body:has(.start-grid) .start-form input:focus,
body:has(.start-grid) .start-form select:focus{
  border-color:#1bc9dc;
  box-shadow:0 0 0 3px rgba(32,214,232,.13),inset 0 2px 4px rgba(44,93,106,.08),inset 0 1px 0 #fff;
}
body:has(.start-grid) .start-form .primary{
  grid-column:1/-1;
  width:100%;
  min-height:38px;
  padding:9px 14px;
  border-radius:9px;
  background:linear-gradient(180deg,#35ddec,#0bbbd1 50%,#079eb5 100%);
  box-shadow:0 7px 13px rgba(0,127,150,.20),inset 0 1px 0 rgba(255,255,255,.76),inset 0 -2px 0 rgba(0,76,94,.24);
}

/* Kategorien: kompakte, technisch wirkende 3D-Liste */
body:has(.start-grid) .categories{
  position:relative;
  padding:13px 14px 10px;
  border-radius:15px;
  overflow:hidden;
}
body:has(.start-grid) .categories .section-head{
  margin:0 2px 6px;
  font-size:8px;
}
body:has(.start-grid) .cat{
  position:relative;
  gap:9px;
  padding:7px 5px;
  border-top:1px solid rgba(77,137,151,.28);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
body:has(.start-grid) .cat:first-of-type{border-top:0}
body:has(.start-grid) .cat:hover{
  transform:translateX(2px) translateY(-1px);
  border-radius:7px;
  background:linear-gradient(90deg,rgba(255,255,255,.50),rgba(185,224,232,.24));
  box-shadow:4px 5px 10px rgba(35,89,103,.10),inset 0 1px 0 rgba(255,255,255,.75);
}
body:has(.start-grid) .cat-icon{
  flex:0 0 26px;
  width:26px;height:26px;
  border-radius:7px;
  background:linear-gradient(145deg,#194b59,#0c2731);
  border:1px solid rgba(0,0,0,.16);
  color:#e9fbff;
  box-shadow:0 3px 6px rgba(13,53,65,.24),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.24);
  font-size:11px;
}
body:has(.start-grid) .cat strong{
  color:#163c49;
  font-size:10px;
  line-height:1.1;
  text-shadow:0 1px 0 #fff;
}
body:has(.start-grid) .cat small{
  margin-top:2px;
  color:#718f99;
  font-size:7px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Kleine Tiefenlinie am Seitenfuß der Startseite */
body:has(.start-grid) .legal-footer{
  margin-top:10px;
  padding-top:6px;
  border-top:1px solid rgba(65,125,141,.20);
}

@media(max-width:1050px){
  body:has(.start-grid) .start-grid{grid-template-columns:1fr 360px}
  body:has(.start-grid) .hero h2{font-size:40px}
  body:has(.start-grid) .cat small{font-size:7px}
}
@media(max-width:820px){
  body:has(.start-grid) .start-grid{grid-template-columns:1fr}
  body:has(.start-grid) .categories{max-height:none}
  body:has(.start-grid) .hero{padding:22px 20px 18px}
  body:has(.start-grid) .hero h2{font-size:38px}
}
@media(max-width:560px){
  body:has(.start-grid) .app{padding:7px 8px 16px}
  body:has(.start-grid) .top{padding:7px 8px;display:block}
  body:has(.start-grid) .top-actions{margin-top:7px;flex-wrap:wrap}
  body:has(.start-grid) .brand-subtitle{display:none}
  body:has(.start-grid) .start-form{grid-template-columns:1fr}
  body:has(.start-grid) .hero h2{font-size:34px}
}

/* V3.0 – Kategorie-Blitz als einheitlicher 3D-Spielstein */
body:has(.start-grid) .cat-icon{
  position:relative;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:8px;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:0;
  background:
    linear-gradient(145deg,#3d6f7c 0%,#183e4a 42%,#092630 100%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:
    0 3px 0 #071b22,
    0 5px 9px rgba(9,42,52,.30),
    inset 1px 1px 0 rgba(255,255,255,.34),
    inset -2px -2px 0 rgba(0,0,0,.30);
  transform:translateY(-1px);
}

body:has(.start-grid) .cat-icon::before{
  content:"";
  position:absolute;
  width:12px;
  height:17px;
  background:linear-gradient(180deg,#f4ffff 0%,#20d6e8 42%,#0ca7ba 100%);
  clip-path:polygon(56% 0,100% 0,68% 38%,92% 38%,30% 100%,42% 55%,12% 55%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));
  z-index:2;
}

body:has(.start-grid) .cat-icon::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:5px;
  border-top:1px solid rgba(255,255,255,.18);
  border-left:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}

body:has(.start-grid) .cat:hover .cat-icon{
  transform:translateY(-2px) rotate(-1deg);
  box-shadow:
    0 4px 0 #071b22,
    0 7px 13px rgba(9,42,52,.36),
    0 0 12px rgba(32,214,232,.18),
    inset 1px 1px 0 rgba(255,255,255,.42),
    inset -2px -2px 0 rgba(0,0,0,.28);
}

/* V3.0 – Startseite: klare Informationshierarchie und kompaktere Anordnung */
body:has(.start-grid) .start-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:16px;
  align-items:stretch;
}
body:has(.start-grid) .hero{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:0;
  padding:24px 26px 22px;
}
body:has(.start-grid) .hero .eyebrow{margin-bottom:2px}
body:has(.start-grid) .hero h2{
  font-size:clamp(36px,3.6vw,48px);
  margin:7px 0 10px;
}
body:has(.start-grid) .hero p:not(.eyebrow){
  max-width:590px;
  margin:5px 0;
}
body:has(.start-grid) .start-form{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(70,137,153,.22);
}
body:has(.start-grid) .categories{
  padding:13px 15px 12px;
}
body:has(.start-grid) .categories .section-head{
  min-height:24px;
  align-items:center;
  margin:0 3px 7px;
  padding-bottom:7px;
  border-bottom:1px solid rgba(70,137,153,.22);
}
body:has(.start-grid) .categories .section-head span{font-weight:900;color:#416b79}
body:has(.start-grid) .categories .section-head b{font-size:8px}
body:has(.start-grid) .categories .cat{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 6px;
  border:1px solid transparent;
  border-top:1px solid rgba(77,137,151,.22);
  border-radius:6px;
}
body:has(.start-grid) .categories .cat:nth-of-type(2n){background:rgba(255,255,255,.18)}
body:has(.start-grid) .categories .cat-icon{width:28px;height:28px;flex-basis:28px}
body:has(.start-grid) .categories .cat strong{
  display:block;
  font-size:9px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body:has(.start-grid) .categories .cat small{
  display:block;
  font-size:6.5px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body:has(.start-grid) .categories .cat:hover{transform:translateY(-1px);border-color:rgba(32,198,220,.24)}

@media(min-width:1051px){
  body:has(.start-grid) .categories{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-content:start;
    column-gap:8px;
  }
  body:has(.start-grid) .categories .section-head{
    grid-column:1/-1;
  }
}
@media(max-width:1050px) and (min-width:821px){
  body:has(.start-grid) .start-grid{grid-template-columns:minmax(0,1fr) 390px}
  body:has(.start-grid) .hero h2{font-size:38px}
  body:has(.start-grid) .categories .cat small{font-size:6.5px}
}
@media(max-width:820px){
  body:has(.start-grid) .start-grid{grid-template-columns:1fr}
  body:has(.start-grid) .categories{display:block}
}

/* ============================================================================
   HANGMAN HIGHTECH VERSION – STARTSEITE V3.0 / LIVE UI
   Entwickler : Sven Helle
   Webseite   : https://sven-helle.de
   Projekt    : Hangman Hightech Version
   Datei      : app.css
   Version    : V3.0
   Stand      : 23.09.2026
   ============================================================================ */

/* The start screen is deliberately scoped so the running game keeps its layout. */
body:has(.start-page-v3){
  background:
    radial-gradient(circle at 50% -20%,rgba(41,202,230,.20),transparent 42%),
    radial-gradient(circle at 0 100%,rgba(39,126,154,.16),transparent 38%),
    linear-gradient(180deg,#dff5fb 0%,#c5e7ef 48%,#b5d9e2 100%);
  color:#102f3d;
}
body:has(.start-page-v3) .app{max-width:1540px;padding:12px 18px 20px}
body:has(.start-page-v3) .top{
  position:relative;min-height:72px;padding:8px 18px 10px;border:1px solid #86b8c7;border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#f5fcff 0%,#d7edf3 54%,#c3e1e9 100%);
  box-shadow:0 5px 0 rgba(34,92,108,.14),inset 0 1px 0 #fff,0 10px 30px rgba(24,80,98,.18);
  align-items:center;gap:16px;
}
body:has(.start-page-v3) .top:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,transparent,#20d6e8 20%,#20d6e8 80%,transparent);opacity:.9}
body:has(.start-page-v3) .top .eyebrow{color:#6e94a0;font-size:8px;letter-spacing:.20em}
body:has(.start-page-v3) .top h1{margin:2px 0 0;color:#153849;font-size:25px;letter-spacing:.07em;text-shadow:0 1px 0 #fff}
body:has(.start-page-v3) .top h1 span{color:#486b79;font-weight:300}
body:has(.start-page-v3) .version-tag{display:inline-block;vertical-align:middle;margin-left:4px;padding:2px 5px;border-radius:5px;background:#153b4a;color:#d8f8ff;font:800 8px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;box-shadow:inset 0 1px 0 #ffffff66,0 2px 4px #0003}
body:has(.start-page-v3) .top-actions{gap:8px}
body:has(.start-page-v3) .guide-link,body:has(.start-page-v3) .fullscreen-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 17px;border:1px solid #91b7c4;border-radius:9px;
  background:linear-gradient(180deg,#f3fbfe,#c5e0e8);color:#163c4d;text-decoration:none;font-size:9px;font-weight:1000;letter-spacing:.08em;
  box-shadow:inset 0 1px 0 #fff,0 3px 7px rgba(22,73,90,.22),0 1px 0 #fff;transition:.18s ease;cursor:pointer
}
body:has(.start-page-v3) .guide-link:hover,body:has(.start-page-v3) .fullscreen-btn:hover{transform:translateY(-1px);border-color:#4e9eb2;box-shadow:inset 0 1px 0 #fff,0 6px 13px rgba(22,73,90,.25),0 0 0 2px #20d6e81c}
body:has(.start-page-v3) .brand-subtitle{position:absolute;right:16px;top:10px;color:#789aa5;font-size:8px;letter-spacing:.05em}
body:has(.start-page-v3) .start-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(500px,.92fr);gap:12px;margin-top:12px;align-items:stretch}
body:has(.start-page-v3) .hero,body:has(.start-page-v3) .categories{
  border:1px solid #8ebbc8;border-radius:18px;background:linear-gradient(145deg,#eaf8fc 0%,#d1eaf1 48%,#bddde6 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -8px 20px rgba(50,110,126,.08),0 14px 30px rgba(23,76,94,.18),0 2px 0 #fff;
  color:#163b4b;overflow:hidden;
}
body:has(.start-page-v3) .hero{padding:22px 22px 20px;min-height:720px;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr;gap:10px 14px;position:relative}
body:has(.start-page-v3) .hero:before,body:has(.start-page-v3) .categories:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 30px rgba(32,214,232,.08)}
body:has(.start-page-v3) .hero-glow{position:absolute;width:500px;height:240px;right:20px;top:-100px;background:radial-gradient(circle,#20d6e84d 0,#20d6e800 68%);filter:blur(8px);pointer-events:none}
body:has(.start-page-v3) .hero-copy{position:relative;z-index:2;padding:24px 0 0 14px;grid-column:1;grid-row:1}
body:has(.start-page-v3) .hero .eyebrow{color:#789ca8;font-size:9px;letter-spacing:.18em;margin:0 0 6px}
body:has(.start-page-v3) .hero h2{margin:0;color:#173b4c;font-size:49px;line-height:.98;letter-spacing:-.02em;text-shadow:0 1px 0 #fff}
body:has(.start-page-v3) .hero h2 strong{font-weight:1000}
body:has(.start-page-v3) .hero h2 em{color:#18c9df;font-style:normal;font-weight:1000;text-shadow:0 2px 0 #fff}
body:has(.start-page-v3) .hero .hero-lead{margin:12px 0 0;color:#6e929d;font-size:13px;line-height:1.4}
body:has(.start-page-v3) .hero-visual{grid-column:2;grid-row:1;display:grid;place-items:center;align-self:center;min-height:245px;position:relative;z-index:1}
body:has(.start-page-v3) .hero-visual:after{content:"";position:absolute;width:180px;height:22px;bottom:24px;border-radius:50%;background:#20d6e82e;filter:blur(10px)}
body:has(.start-page-v3) .hero-bulb{width:255px;height:292px;filter:drop-shadow(0 10px 14px rgba(17,78,94,.28))}
body:has(.start-page-v3) .start-form{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;margin:0;padding:16px 12px 12px;border:1px solid #9bc6d1;border-radius:16px;background:linear-gradient(180deg,#e7f6fa,#d3eaf0);box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(26,85,102,.12)}
body:has(.start-page-v3) .start-panel-title{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0 0 2px;color:#173b4c;font-size:24px;font-weight:1000;letter-spacing:.01em}
body:has(.start-page-v3) .panel-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:linear-gradient(145deg,#1b6072,#082b36);color:#21d9ef;font-size:25px;box-shadow:inset 0 2px 0 #ffffff55,0 5px 10px #173b4c44}
body:has(.start-page-v3) .team-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
body:has(.start-page-v3) .start-form label>span:first-child,.computer-difficulty{color:#163d4e;font-size:11px;font-weight:1000;letter-spacing:.05em}
body:has(.start-page-v3) .start-form input,body:has(.start-page-v3) .start-form select,.computer-select-display{
  width:100%;min-height:42px;margin-top:5px;padding:10px 13px;border:1px solid #80adbb;border-radius:9px;background:linear-gradient(180deg,#eefaff,#d7eaf0);color:#173b4c;box-shadow:inset 0 2px 4px rgba(31,91,108,.12),0 2px 3px rgba(28,82,98,.10);font-size:14px
}
body:has(.start-page-v3) .start-form input:focus,body:has(.start-page-v3) .start-form select:focus{border-color:#20bfd4;box-shadow:0 0 0 3px #20d6e81e,inset 0 2px 4px #1f5b6c1f;outline:none}
body:has(.start-page-v3) .computer-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(180px,.7fr);gap:10px}
body:has(.start-page-v3) .computer-opponent{min-width:0}
body:has(.start-page-v3) .computer-toggle{display:block}
body:has(.start-page-v3) .computer-toggle>span:first-child{display:block}
body:has(.start-page-v3) .computer-select-display{display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:5px;position:relative}
body:has(.start-page-v3) .computer-select-display input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
body:has(.start-page-v3) .computer-select-display span{flex:1;color:#23495a}
body:has(.start-page-v3) .computer-select-display b{font-size:19px;color:#5a8190}
body:has(.start-page-v3) .category-field{grid-column:1/-1}
body:has(.start-page-v3) .primary{grid-column:1/-1;min-height:58px;padding:12px 18px;border:1px solid #047e9b;border-radius:12px;background:linear-gradient(180deg,#3de4f2 0%,#16c8e1 52%,#09a9c7 100%);color:#073342;font-size:19px;font-weight:1000;letter-spacing:.08em;box-shadow:inset 0 2px 0 #ffffffaa,inset 0 -4px 0 #078ba5,0 6px 0 #0a5f70,0 10px 18px rgba(10,94,112,.25);text-shadow:0 1px 0 #fff8;transition:.15s ease}
body:has(.start-page-v3) .primary:hover{transform:translateY(-1px);box-shadow:inset 0 2px 0 #ffffffaa,inset 0 -4px 0 #078ba5,0 7px 0 #0a5f70,0 14px 22px rgba(10,94,112,.30)}
body:has(.start-page-v3) .primary:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #ffffff66,inset 0 -2px 0 #078ba5,0 3px 0 #0a5f70,0 7px 12px rgba(10,94,112,.22)}
body:has(.start-page-v3) .play-triangle{display:inline-block;margin-right:12px;font-size:18px}
body:has(.start-page-v3) .categories{position:relative;padding:18px 16px;min-height:720px}
body:has(.start-page-v3) .categories .section-head{position:relative;z-index:2;margin:0;padding:0 8px 12px;border-bottom:1px solid #8dbbc8;color:#3f6977;font-size:18px;letter-spacing:.14em;align-items:center}
body:has(.start-page-v3) .categories .section-head b{font-size:12px;color:#0badd0;letter-spacing:.04em}
body:has(.start-page-v3) .category-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;position:relative;z-index:2}
body:has(.start-page-v3) .categories .cat{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;min-height:73px;padding:8px 4px;border-top:1px solid #8dbbc84f;transition:.16s ease}
body:has(.start-page-v3) .categories .cat:nth-child(odd){border-right:1px solid #8dbbc82e;padding-right:10px}
body:has(.start-page-v3) .categories .cat:hover{background:linear-gradient(90deg,#ffffff42,#20d6e80d);transform:translateY(-1px)}
body:has(.start-page-v3) .categories .cat-icon{position:relative;display:grid;place-items:center;width:54px;height:54px;flex:0 0 54px;border-radius:13px;background:linear-gradient(145deg,#1b5363 0%,#0a2934 46%,#061c25 100%);border:2px solid #86d8e5;box-shadow:inset 0 2px 0 #ffffff66,inset 0 -5px 0 #03151b,0 4px 0 #0c3d4b,0 7px 12px rgba(9,51,64,.30);overflow:hidden}
body:has(.start-page-v3) .categories .cat-icon:before{content:"";position:absolute;inset:3px;border:1px solid #4e99aa;border-radius:10px;box-shadow:inset 0 0 0 1px #07192366}
body:has(.start-page-v3) .categories .cat-icon:after{content:"";position:absolute;left:6px;right:6px;top:5px;height:10px;border-radius:50%;background:linear-gradient(180deg,#ffffff5c,#ffffff00);filter:blur(1px)}
body:has(.start-page-v3) .categories .cat-bolt{position:relative;z-index:2;font-size:27px;line-height:1;color:#ffbe48;text-shadow:0 2px 0 #8a3d00,0 0 8px #ff8a00,0 0 16px #ffb000;font-family:Arial,sans-serif}
body:has(.start-page-v3) .categories .cat strong{display:block;color:#153b4d;font-size:13px;line-height:1.12;font-weight:1000}
body:has(.start-page-v3) .categories .cat small{display:block;margin-top:4px;color:#477888;font-size:10px;line-height:1.15}
body:has(.start-page-v3) .categories .cat:nth-child(even){ }
body:has(.start-page-v3) .categories .cat:nth-child(n+3){ }
body:has(.start-page-v3) .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1180px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:minmax(0,1fr) 470px}
  body:has(.start-page-v3) .hero{grid-template-columns:minmax(0,1fr) 230px}
  body:has(.start-page-v3) .hero h2{font-size:42px}
  body:has(.start-page-v3) .hero-bulb{width:205px}
  body:has(.start-page-v3) .categories .cat{grid-template-columns:50px minmax(0,1fr)}
  body:has(.start-page-v3) .categories .cat-icon{width:48px;height:48px;flex-basis:48px}
}
@media(max-width:980px){
  body:has(.start-page-v3) .brand-subtitle{display:none}
  body:has(.start-page-v3) .top{flex-wrap:wrap}
  body:has(.start-page-v3) .top-actions{margin-left:auto}
  body:has(.start-page-v3) .start-grid{grid-template-columns:1fr}
  body:has(.start-page-v3) .hero,body:has(.start-page-v3) .categories{min-height:auto}
  body:has(.start-page-v3) .categories .category-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body:has(.start-page-v3) .app{padding:8px}
  body:has(.start-page-v3) .top{padding:8px 10px;min-height:62px}
  body:has(.start-page-v3) .top h1{font-size:19px}
  body:has(.start-page-v3) .top-actions{width:100%;overflow:auto;padding-bottom:2px}
  body:has(.start-page-v3) .guide-link,body:has(.start-page-v3) .fullscreen-btn{min-height:32px;padding:0 11px;white-space:nowrap}
  body:has(.start-page-v3) .hero{grid-template-columns:1fr;padding:15px;}
  body:has(.start-page-v3) .hero-copy{padding:5px 4px 0;grid-column:1;grid-row:1}
  body:has(.start-page-v3) .hero-visual{grid-column:1;grid-row:2;min-height:185px;margin-top:-5px}
  body:has(.start-page-v3) .hero-bulb{width:155px;height:185px}
  body:has(.start-page-v3) .start-form{grid-column:1;grid-row:3;grid-template-columns:1fr;padding:12px}
  body:has(.start-page-v3) .team-fields,body:has(.start-page-v3) .computer-row{grid-template-columns:1fr}
  body:has(.start-page-v3) .hero h2{font-size:34px}
  body:has(.start-page-v3) .category-grid{grid-template-columns:1fr!important}
  body:has(.start-page-v3) .categories .cat:nth-child(odd){border-right:0;padding-right:4px}
}

/* ============================================================
   STARTSEITE V3.0 - LIVE 3D DESIGN MASTER
   Reference: Hangman Tech Edition 3D lobby
   ============================================================ */
body:has(.start-page-v3){
  background:
    radial-gradient(circle at 50% -18%,rgba(25,176,224,.22),transparent 38%),
    radial-gradient(circle at 0 100%,rgba(0,89,133,.24),transparent 34%),
    linear-gradient(180deg,#dff6fb 0%,#c9eaf2 48%,#b7dce7 100%);
  color:#102f40;
}
body:has(.start-page-v3) .app{max-width:1540px;padding:12px 18px 18px}
body:has(.start-page-v3) .top{
  position:relative;min-height:76px;padding:9px 18px 10px;gap:18px;align-items:center;
  border:1px solid #0a789e;border-radius:15px 15px 7px 7px;
  background:linear-gradient(180deg,#103d58 0%,#07283d 56%,#031a2a 100%);
  box-shadow:inset 0 1px 0 #8ceeff66,inset 0 -4px 0 #020d16,0 5px 0 #063b53,0 13px 30px rgba(2,34,52,.30);
  color:#fff;overflow:hidden;
}
body:has(.start-page-v3) .top:before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#11c8f0,#4be9ff 35%,#0b83b0 70%,#11c8f0);box-shadow:0 0 12px #18d8ff}
body:has(.start-page-v3) .top .eyebrow{color:#83c7d8;font-size:8px;letter-spacing:.22em;text-shadow:0 1px 0 #000}
body:has(.start-page-v3) .top h1{margin:2px 0 0;color:#fff;font-size:25px;letter-spacing:.065em;text-shadow:0 2px 0 #02101b,0 0 10px #6deaff22}
body:has(.start-page-v3) .top h1 span{color:#ffd75d;font-weight:700}
body:has(.start-page-v3) .version-tag{display:inline-block;vertical-align:middle;margin-left:5px;padding:3px 6px;border-radius:5px;background:#0a6f8c;color:#d9fbff;font:900 8px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;border:1px solid #35d9f3;box-shadow:inset 0 1px 0 #fff5,0 2px 4px #0007}
body:has(.start-page-v3) .top-actions{gap:8px}
body:has(.start-page-v3) .guide-link,body:has(.start-page-v3) .fullscreen-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 18px;
  border:1px solid #39c7eb;border-radius:8px;background:linear-gradient(180deg,#17698d 0%,#0a3f5d 48%,#06283e 100%);
  color:#f2fdff;text-decoration:none;font-size:9px;font-weight:1000;letter-spacing:.075em;
  box-shadow:inset 0 1px 0 #9ff4ff66,inset 0 -3px 0 #021824,0 3px 0 #021523,0 6px 12px #0005;transition:.16s ease;cursor:pointer
}
body:has(.start-page-v3) .guide-link:hover,body:has(.start-page-v3) .fullscreen-btn:hover{transform:translateY(-1px);border-color:#74ebff;box-shadow:inset 0 1px 0 #dfffff88,inset 0 -3px 0 #021824,0 5px 0 #021523,0 9px 17px #0006,0 0 13px #19cfee55}
body:has(.start-page-v3) .brand-subtitle{position:absolute;right:18px;top:9px;color:#82b4c7;font-size:8px;letter-spacing:.06em}

body:has(.start-page-v3) .start-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(470px,.92fr);gap:12px;margin-top:12px;align-items:stretch}
body:has(.start-page-v3) .start-left-column{display:grid;grid-template-rows:274px 1fr;gap:12px;min-width:0}

/* Hero card */
body:has(.start-page-v3) .hero-banner{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;min-width:0;overflow:hidden;
  border:1px solid #0a6c91;border-radius:17px;background:
    radial-gradient(circle at 65% 15%,#0d5a78 0%,transparent 34%),
    linear-gradient(145deg,#082d43 0%,#041b2b 54%,#021522 100%);
  box-shadow:inset 0 1px 0 #8deaff55,inset 0 -12px 30px #0005,0 4px 0 #063e57,0 13px 28px #16495b33;
}
body:has(.start-page-v3) .hero-banner:after{content:"";position:absolute;inset:8px;border:1px solid #2e88a555;border-radius:12px;pointer-events:none}
body:has(.start-page-v3) .hero-banner:before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;background:linear-gradient(90deg,transparent,#17d7ff 30%,#17d7ff 70%,transparent);box-shadow:0 0 15px #18d9ff}
body:has(.start-page-v3) .hero-banner-glow{position:absolute;width:420px;height:220px;right:130px;top:-120px;background:#11d5ff33;filter:blur(20px);pointer-events:none}
body:has(.start-page-v3) .hero-banner-copy{position:relative;z-index:2;padding:45px 8px 20px 32px;align-self:center}
body:has(.start-page-v3) .hero-kicker{margin:0 0 8px;color:#a1d4df;font-size:10px;letter-spacing:.19em;font-weight:900}
body:has(.start-page-v3) .hero-banner h2{margin:0;color:#f1fbff;font-size:42px;line-height:.98;letter-spacing:-.025em;text-shadow:0 2px 0 #000b,0 0 18px #1fd9ff12}
body:has(.start-page-v3) .hero-banner h2 strong{font-weight:1000;color:#fff;text-shadow:0 2px 0 #000b,0 0 12px #2edfff22}
body:has(.start-page-v3) .hero-banner h2 em{color:#15d9f4;font-style:normal;font-weight:1000;text-shadow:0 2px 0 #002431,0 0 15px #11d8f055}
body:has(.start-page-v3) .hero-lead{margin:12px 0 0;color:#a6cbd5;font-size:13px;line-height:1.35}
body:has(.start-page-v3) .hero-banner-visual{position:relative;z-index:2;display:grid;place-items:center;overflow:hidden}
body:has(.start-page-v3) .hero-banner-visual:after{content:"";position:absolute;width:190px;height:26px;bottom:18px;border-radius:50%;background:#0bdcff55;filter:blur(14px)}
body:has(.start-page-v3) .hero-banner-visual img{width:258px;height:276px;object-fit:cover;object-position:center;filter:drop-shadow(0 12px 12px #0009);mix-blend-mode:screen}

/* Start panel */
body:has(.start-page-v3) .start-panel-v3{
  position:relative;min-width:0;padding:17px 18px 18px;border:1px solid #72b8cc;border-radius:17px;
  background:linear-gradient(145deg,#e9f8fc 0%,#cfeaf2 52%,#b9dce6 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -10px 22px #3e91a51a,0 4px 0 #fff,0 13px 28px #1a5d7533;overflow:hidden;
}
body:has(.start-page-v3) .start-panel-v3:before,body:has(.start-page-v3) .categories-v3:before{content:"";position:absolute;inset:5px;border:1px solid #ffffff66;border-radius:12px;pointer-events:none}
body:has(.start-page-v3) .start-panel-title-v3{display:flex;align-items:center;gap:12px;color:#12384c;font-size:27px;font-weight:1000;letter-spacing:.01em;margin-bottom:12px;text-shadow:0 1px 0 #fff}
body:has(.start-page-v3) .ui-icon{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:10px;background:linear-gradient(145deg,#17677f,#092b39 58%,#041923);border:2px solid #1a809a;box-shadow:inset 0 2px 0 #9af4ff55,inset 0 -4px 0 #020f16,0 4px 0 #0a4a5e,0 7px 12px #173d4b44;overflow:hidden}
body:has(.start-page-v3) .ui-icon img{width:31px;height:31px;display:block}
body:has(.start-page-v3) .start-form-v3{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;position:relative;z-index:2}
body:has(.start-page-v3) .team-fields-v3{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
body:has(.start-page-v3) .start-form-v3 label>span:first-child{display:block;color:#173e50;font-size:11px;font-weight:1000;letter-spacing:.06em;margin-bottom:5px}
body:has(.start-page-v3) .field-with-icon{display:flex;align-items:center;min-height:54px;padding:4px 10px 4px 6px;border:1px solid #6faabd;border-radius:9px;background:linear-gradient(180deg,#e7f6fb,#c9e2ea);box-shadow:inset 0 2px 5px #1f61731c,0 2px 4px #2b65751c}
body:has(.start-page-v3) .field-with-icon .ui-icon{width:42px;height:42px;border-radius:8px;border-width:1px;box-shadow:inset 0 1px 0 #9af4ff55,inset 0 -3px 0 #020f16,0 2px 4px #173d4b33}
body:has(.start-page-v3) .field-with-icon .ui-icon img{width:28px;height:28px}
body:has(.start-page-v3) .start-form-v3 input,.start-form-v3 select{font:inherit}
body:has(.start-page-v3) .field-with-icon input{min-width:0;flex:1;border:0;background:transparent;box-shadow:none;margin:0;padding:8px 10px;color:#102f40;font-size:14px;outline:none}
body:has(.start-page-v3) .computer-row-v3{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr);gap:10px}
body:has(.start-page-v3) .computer-select-display-v3,.difficulty-display-v3,.category-select-v3{display:flex;align-items:center;gap:9px;min-height:54px;padding:5px 10px 5px 6px;border:1px solid #6faabd;border-radius:9px;background:linear-gradient(180deg,#e7f6fb,#c9e2ea);box-shadow:inset 0 2px 5px #1f61731c,0 2px 4px #2b65751c}
body:has(.start-page-v3) .computer-select-display-v3 input{position:absolute;opacity:0;pointer-events:none}
body:has(.start-page-v3) .computer-select-display-v3>span:not(.ui-icon){flex:1;color:#244b5b;font-size:13px}
body:has(.start-page-v3) .computer-select-display-v3 b{font-size:20px;color:#527c8c}
body:has(.start-page-v3) .difficulty-display-v3{padding-right:5px}
body:has(.start-page-v3) .difficulty-bars{display:flex;align-items:flex-end;gap:3px;padding:0 7px}
body:has(.start-page-v3) .difficulty-bars i{display:block;width:5px;background:#167b99;border-radius:2px}
body:has(.start-page-v3) .difficulty-bars i:nth-child(1){height:9px}.difficulty-bars i:nth-child(2){height:14px}.difficulty-bars i:nth-child(3){height:19px}
body:has(.start-page-v3) .difficulty-display-v3 select{min-width:0;flex:1;border:0;background:transparent;color:#315a6b;outline:none;font-size:13px}
body:has(.start-page-v3) .category-field-v3{grid-column:1/-1}
body:has(.start-page-v3) .category-select-v3{padding-right:10px}
body:has(.start-page-v3) .category-select-v3 select{min-width:0;flex:1;border:0;background:transparent;color:#173f51;outline:none;font-size:13px}
body:has(.start-page-v3) .category-select-v3 .ui-icon{width:42px;height:42px;border-radius:8px}
body:has(.start-page-v3) .category-select-v3 .ui-icon img{width:28px;height:28px}
body:has(.start-page-v3) .primary-v3{grid-column:1/-1;min-height:68px;border:1px solid #057f9e;border-radius:12px;background:linear-gradient(180deg,#36e6f7 0%,#12cce6 48%,#05a6c7 100%);color:#052b39;font-size:20px;font-weight:1000;letter-spacing:.08em;box-shadow:inset 0 2px 0 #ffffffbb,inset 0 -5px 0 #078da8,0 5px 0 #064e61,0 10px 18px #075c7238;text-shadow:0 1px 0 #fff8;transition:.14s ease;cursor:pointer}
body:has(.start-page-v3) .primary-v3:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:inset 0 2px 0 #ffffffbb,inset 0 -5px 0 #078da8,0 6px 0 #064e61,0 14px 22px #075c7248}
body:has(.start-page-v3) .primary-v3:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #ffffff88,inset 0 -2px 0 #078da8,0 2px 0 #064e61,0 7px 12px #075c7238}
body:has(.start-page-v3) .play-triangle-v3{display:inline-block;margin-right:13px;font-size:19px}

/* Categories */
body:has(.start-page-v3) .categories-v3{position:relative;min-width:0;overflow:hidden;padding:18px 18px 12px;border:1px solid #76b7ca;border-radius:17px;background:linear-gradient(145deg,#e8f7fb 0%,#d2eaf2 52%,#c0dfe8 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -10px 22px #3e91a51a,0 4px 0 #fff,0 13px 28px #1a5d7533}
body:has(.start-page-v3) .section-head-v3{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:4px 8px 13px;border-bottom:1px solid #77aebe;color:#173c50;font-size:19px;font-weight:1000;letter-spacing:.13em;text-shadow:0 1px 0 #fff}
body:has(.start-page-v3) .section-head-v3 b{color:#0b9bc5;font-size:12px;letter-spacing:.04em}
body:has(.start-page-v3) .category-grid-v3{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;column-gap:13px}
body:has(.start-page-v3) .cat-v3{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:10px;min-height:72px;padding:7px 5px;border-bottom:1px solid #6e9fae88;transition:.14s ease}
body:has(.start-page-v3) .cat-v3:nth-child(odd){border-right:1px solid #6e9fae55;padding-right:11px}
body:has(.start-page-v3) .cat-v3:hover{background:linear-gradient(90deg,#fff5,#18d7f00b);transform:translateY(-1px)}
body:has(.start-page-v3) .cat-icon-v3{display:grid;place-items:center;width:54px;height:54px;min-width:54px;min-height:54px}
body:has(.start-page-v3) .cat-icon-v3 img{display:block;width:54px;height:54px}
body:has(.start-page-v3) .cat-v3 strong{display:block;color:#173b4d;font-size:13px;line-height:1.12;font-weight:1000;text-shadow:0 1px 0 #fff}
body:has(.start-page-v3) .cat-v3 small{display:block;margin-top:4px;color:#3f7081;font-size:10px;line-height:1.15}

@media(max-width:1180px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:minmax(0,1fr) 450px}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:minmax(0,1fr) 225px}
  body:has(.start-page-v3) .hero-banner h2{font-size:36px}
  body:has(.start-page-v3) .hero-banner-visual img{width:210px;height:230px}
  body:has(.start-page-v3) .cat-v3{grid-template-columns:48px minmax(0,1fr)}
  body:has(.start-page-v3) .cat-icon-v3,.cat-icon-v3 img{width:48px;height:48px;min-width:48px;min-height:48px}
}
@media(max-width:980px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:1fr}
  body:has(.start-page-v3) .start-left-column{grid-template-rows:auto auto}
  body:has(.start-page-v3) .categories-v3{min-height:auto}
}
@media(max-width:680px){
  body:has(.start-page-v3) .app{padding:7px}
  body:has(.start-page-v3) .top{padding:8px 10px;min-height:65px}
  body:has(.start-page-v3) .top h1{font-size:19px}
  body:has(.start-page-v3) .brand-subtitle{display:none}
  body:has(.start-page-v3) .top-actions{width:100%;overflow:auto;padding-bottom:2px}
  body:has(.start-page-v3) .guide-link,body:has(.start-page-v3) .fullscreen-btn{min-height:32px;padding:0 11px;white-space:nowrap}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:1fr;min-height:330px}
  body:has(.start-page-v3) .hero-banner-copy{padding:30px 18px 0;align-self:start}
  body:has(.start-page-v3) .hero-banner h2{font-size:32px}
  body:has(.start-page-v3) .hero-banner-visual{position:absolute;right:4px;bottom:-6px;width:190px;height:190px;opacity:.9}
  body:has(.start-page-v3) .hero-banner-visual img{width:180px;height:190px}
  body:has(.start-page-v3) .start-panel-v3{padding:14px}
  body:has(.start-page-v3) .start-form-v3,.team-fields-v3,.computer-row-v3{grid-template-columns:1fr}
  body:has(.start-page-v3) .category-grid-v3{grid-template-columns:1fr}
  body:has(.start-page-v3) .cat-v3:nth-child(odd){border-right:0;padding-right:5px}
}
/* Reference-Layout: Hero-Grafik links, Text rechts */
body:has(.start-page-v3) .hero-banner{grid-template-columns:280px minmax(0,1fr)}
body:has(.start-page-v3) .hero-banner-visual{grid-column:1;grid-row:1}
body:has(.start-page-v3) .hero-banner-copy{grid-column:2;grid-row:1}
@media(max-width:1180px){body:has(.start-page-v3) .hero-banner{grid-template-columns:225px minmax(0,1fr)}}
@media(max-width:680px){body:has(.start-page-v3) .hero-banner{grid-template-columns:1fr}.hero-banner-visual{grid-column:1!important;grid-row:2!important}.hero-banner-copy{grid-column:1!important;grid-row:1!important}}

/* ============================================================
   STARTSEITE V3.0 - FINAL REFERENCE LAYOUT OVERRIDES
   Keep the complete lobby visible and preserve the 3D controls.
   ============================================================ */
body:has(.start-page-v3) .start-grid{
  grid-template-columns:minmax(0,1.28fr) minmax(460px,.92fr)!important;
  gap:14px!important;
  margin-top:14px!important;
  align-items:stretch!important;
}
body:has(.start-page-v3) .start-left-column{
  display:grid!important;
  grid-template-rows:280px minmax(430px,1fr)!important;
  gap:14px!important;
  min-width:0!important;
}
body:has(.start-page-v3) .hero-banner{
  min-height:280px!important;
  height:280px!important;
  grid-template-columns:250px minmax(0,1fr)!important;
}
body:has(.start-page-v3) .hero-banner-visual{
  width:250px!important;
  height:280px!important;
  min-width:250px!important;
  min-height:280px!important;
  overflow:hidden!important;
}
body:has(.start-page-v3) .hero-banner-visual img{
  display:block!important;
  width:230px!important;
  height:250px!important;
  max-width:230px!important;
  max-height:250px!important;
  object-fit:contain!important;
  object-position:center!important;
  mix-blend-mode:normal!important;
}
body:has(.start-page-v3) .hero-banner-copy{
  padding:34px 24px 20px 8px!important;
  align-self:center!important;
}
body:has(.start-page-v3) .hero-banner h2{
  font-size:42px!important;
  line-height:1.02!important;
}
body:has(.start-page-v3) .start-panel-v3{
  min-height:430px!important;
  height:auto!important;
  padding:18px 20px 20px!important;
}
body:has(.start-page-v3) .start-panel-title-v3{
  font-size:26px!important;
  margin-bottom:14px!important;
}
body:has(.start-page-v3) .start-form-v3{
  gap:12px 10px!important;
}
body:has(.start-page-v3) .primary-v3{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:66px!important;
  height:66px!important;
  margin-top:2px!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:20!important;
}
body:has(.start-page-v3) .play-triangle-v3{
  display:inline-block!important;
  font-size:20px!important;
  line-height:1!important;
  margin-right:13px!important;
}
body:has(.start-page-v3) .categories-v3{
  min-height:724px!important;
  height:100%!important;
}
body:has(.start-page-v3) .cat-icon-v3,
body:has(.start-page-v3) .cat-icon-v3 img{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  object-fit:contain!important;
}
@media(max-width:1180px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:minmax(0,1fr) 430px!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:210px minmax(0,1fr)!important}
  body:has(.start-page-v3) .hero-banner-visual{width:210px!important;min-width:210px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:195px!important;height:220px!important;max-width:195px!important;max-height:220px!important}
  body:has(.start-page-v3) .hero-banner h2{font-size:36px!important}
}
@media(max-width:980px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:1fr!important}
  body:has(.start-page-v3) .start-left-column{grid-template-rows:280px auto!important}
  body:has(.start-page-v3) .categories-v3{min-height:auto!important;height:auto!important}
}
@media(max-width:680px){
  body:has(.start-page-v3) .start-left-column{grid-template-rows:auto auto!important}
  body:has(.start-page-v3) .hero-banner{height:300px!important;min-height:300px!important;grid-template-columns:1fr!important}
  body:has(.start-page-v3) .hero-banner-copy{grid-column:1!important;grid-row:1!important;padding:24px 18px 0!important}
  body:has(.start-page-v3) .hero-banner-visual{position:absolute!important;right:4px!important;bottom:-6px!important;width:170px!important;height:170px!important;min-width:170px!important;min-height:170px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:165px!important;height:165px!important;max-width:165px!important;max-height:165px!important}
  body:has(.start-page-v3) .hero-banner h2{font-size:31px!important}
  body:has(.start-page-v3) .start-panel-v3{min-height:auto!important}
  body:has(.start-page-v3) .primary-v3{height:62px!important;min-height:62px!important;font-size:18px!important}
}

/*
HANGMAN HIGHTECH VERSION
Entwickler : Sven Helle
Webseite   : https://sven-helle.de
Projekt    : Hangman Hightech Version
Datei      : app.css
Version    : V3.0
Stand      : 23.09.2026

FINAL STARTSEITE REFERENZ-OVERRIDE
Die Startseite folgt der freigegebenen 3D-Referenz: dunkler Header,
dunkler Hero, helle Spiel-/Kategorien-Panels und kompakte Proportionen.
*/
body:has(.start-page-v3){
  background:
    linear-gradient(rgba(24,72,91,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,72,91,.045) 1px,transparent 1px),
    #f2f9fc!important;
  background-size:42px 42px!important;
  color:#173b4c!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
body:has(.start-page-v3) .app{max-width:1500px!important;padding:12px 18px 22px!important}
body:has(.start-page-v3) .top{
  min-height:76px!important;
  padding:10px 14px!important;
  border:1px solid #0b3548!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#0c2d3d 0%,#08202d 100%)!important;
  box-shadow:inset 0 1px 0 #8fefff33,0 8px 20px #183f5030!important;
}
body:has(.start-page-v3) .eyebrow{color:#86b5c3!important;font-size:9px!important;letter-spacing:.2em!important}
body:has(.start-page-v3) .top h1{margin:2px 0 0!important;color:#fff!important;font-size:29px!important;line-height:1!important;letter-spacing:.05em!important}
body:has(.start-page-v3) .top h1 span{color:#a9c1ca!important;font-weight:300!important}
body:has(.start-page-v3) .version-tag{color:#f5c44f!important;font-size:.62em!important;font-weight:900!important}
body:has(.start-page-v3) .top-actions{gap:9px!important}
body:has(.start-page-v3) .guide-link,
body:has(.start-page-v3) .fullscreen-btn{
  min-height:42px!important;
  padding:0 18px!important;
  border:1px solid #55b4d0!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#17607a,#0b3547)!important;
  color:#eafaff!important;
  box-shadow:inset 0 1px 0 #a8efff55,0 4px 0 #06212d,0 8px 14px #061e2a66!important;
  font-size:10px!important;font-weight:1000!important;letter-spacing:.08em!important;
}
body:has(.start-page-v3) .guide-link:hover,
body:has(.start-page-v3) .fullscreen-btn:hover{transform:translateY(-1px)!important;border-color:#7de8ff!important}
body:has(.start-page-v3) .brand-subtitle{color:#8fb6c2!important;font-size:8px!important;right:14px!important;top:8px!important}

body:has(.start-page-v3) .start-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.58fr) minmax(460px,.9fr)!important;
  gap:14px!important;
  margin-top:14px!important;
  align-items:stretch!important;
}
body:has(.start-page-v3) .start-left-column{
  display:grid!important;
  grid-template-rows:252px minmax(0,1fr)!important;
  gap:14px!important;
  min-width:0!important;
}

/* HERO */
body:has(.start-page-v3) .hero-banner{
  grid-template-columns:minmax(0,1fr) 265px!important;
  min-height:252px!important;height:252px!important;
  border:1px solid #087fa6!important;border-radius:17px!important;
  background:radial-gradient(circle at 78% 20%,#12657f 0%,transparent 38%),linear-gradient(145deg,#092f45 0%,#061f30 55%,#041522 100%)!important;
  box-shadow:inset 0 1px 0 #8deaff66,inset 0 -15px 30px #0007,0 4px 0 #063e57,0 13px 28px #174c6038!important;
}
body:has(.start-page-v3) .hero-banner:after{inset:8px!important;border:1px solid #4c9ab555!important;border-radius:12px!important}
body:has(.start-page-v3) .hero-banner:before{left:18px!important;right:18px!important;height:3px!important;background:linear-gradient(90deg,transparent,#17d7ff 25%,#17d7ff 75%,transparent)!important;box-shadow:0 0 15px #18d9ff!important}
body:has(.start-page-v3) .hero-banner-copy{padding:27px 8px 18px 28px!important;align-self:center!important}
body:has(.start-page-v3) .hero-kicker{color:#9ed6e2!important;font-size:9px!important;margin:0 0 7px!important}
body:has(.start-page-v3) .hero-banner h2{font-size:39px!important;line-height:.99!important;color:#f5fcff!important;margin:0!important}
body:has(.start-page-v3) .hero-banner h2 strong{color:#fff!important}
body:has(.start-page-v3) .hero-banner h2 em{color:#18d8f2!important}
body:has(.start-page-v3) .hero-lead{color:#a8cbd4!important;font-size:12px!important;margin:10px 0 0!important}
body:has(.start-page-v3) .hero-banner-visual{width:265px!important;min-width:265px!important;height:252px!important;overflow:hidden!important}
body:has(.start-page-v3) .hero-banner-visual img{
  width:218px!important;height:234px!important;max-width:218px!important;max-height:234px!important;
  object-fit:cover!important;object-position:center!important;
  border-radius:12px!important;filter:drop-shadow(0 12px 14px #0009)!important;mix-blend-mode:screen!important;
}
body:has(.start-page-v3) .hero-banner-visual:after{width:175px!important;height:22px!important;bottom:13px!important;background:#0bdcff55!important}

/* START PANEL */
body:has(.start-page-v3) .start-panel-v3{
  min-height:430px!important;
  padding:16px 18px 18px!important;
  border:1px solid #75b8ca!important;border-radius:17px!important;
  background:linear-gradient(145deg,#eaf8fc 0%,#d4ecf3 55%,#c2e1ea 100%)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -12px 22px #3e91a51a,0 4px 0 #fff,0 13px 28px #1a5d7530!important;
}
body:has(.start-page-v3) .start-panel-title-v3{font-size:24px!important;color:#143b4d!important;margin-bottom:10px!important}
body:has(.start-page-v3) .start-panel-title-v3 .ui-icon{width:44px!important;height:44px!important}
body:has(.start-page-v3) .start-form-v3{gap:10px 10px!important}
body:has(.start-page-v3) .team-fields-v3{gap:10px!important}
body:has(.start-page-v3) .field-with-icon,
body:has(.start-page-v3) .computer-select-display-v3,
body:has(.start-page-v3) .difficulty-display-v3,
body:has(.start-page-v3) .category-select-v3{
  min-height:51px!important;height:51px!important;
  background:linear-gradient(180deg,#e9f8fc,#cbe4ec)!important;
  border:1px solid #6faabd!important;
  box-shadow:inset 0 2px 5px #1f61731c,0 2px 4px #2b65751c!important;
}
body:has(.start-page-v3) .field-with-icon .ui-icon,
body:has(.start-page-v3) .category-select-v3 .ui-icon{width:40px!important;height:40px!important}
body:has(.start-page-v3) .primary-v3{
  min-height:64px!important;height:64px!important;
  border:2px solid #057f9e!important;border-radius:12px!important;
  background:linear-gradient(180deg,#43e8f8 0%,#15cfe7 48%,#05a8c9 100%)!important;
  color:#062c3b!important;font-size:20px!important;font-weight:1000!important;
  box-shadow:inset 0 2px 0 #fff, inset 0 -5px 0 #078da8,0 5px 0 #064e61,0 11px 18px #075c7238!important;
}

/* CATEGORIES */
body:has(.start-page-v3) .categories-v3{
  min-height:696px!important;height:100%!important;
  padding:17px 17px 12px!important;
  border:1px solid #75b8ca!important;border-radius:17px!important;
  background:linear-gradient(145deg,#eaf8fc 0%,#d4ecf3 55%,#c2e1ea 100%)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -12px 22px #3e91a51a,0 4px 0 #fff,0 13px 28px #1a5d7530!important;
}
body:has(.start-page-v3) .section-head-v3{padding:4px 7px 11px!important;font-size:18px!important;color:#173c50!important;border-bottom:1px solid #77aebe!important}
body:has(.start-page-v3) .section-head-v3 b{font-size:11px!important;color:#0b9bc5!important}
body:has(.start-page-v3) .category-grid-v3{grid-template-columns:1fr 1fr!important;column-gap:10px!important}
body:has(.start-page-v3) .cat-v3{grid-template-columns:46px minmax(0,1fr)!important;gap:9px!important;min-height:63px!important;padding:6px 4px!important}
body:has(.start-page-v3) .cat-v3:nth-child(odd){padding-right:9px!important}
body:has(.start-page-v3) .cat-icon-v3,
body:has(.start-page-v3) .cat-icon-v3 img{
  width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important;
  object-fit:contain!important;display:block!important;
}
body:has(.start-page-v3) .cat-v3 strong{font-size:12px!important;color:#173b4d!important}
body:has(.start-page-v3) .cat-v3 small{font-size:9px!important;color:#3f7081!important;margin-top:3px!important}

@media(max-width:1180px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:minmax(0,1fr) 420px!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:minmax(0,1fr) 225px!important}
  body:has(.start-page-v3) .hero-banner-visual{width:225px!important;min-width:225px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:190px!important;height:210px!important;max-width:190px!important;max-height:210px!important}
}
@media(max-width:980px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:1fr!important}
  body:has(.start-page-v3) .categories-v3{min-height:auto!important;height:auto!important}
}
@media(max-width:680px){
  body:has(.start-page-v3) .app{padding:7px!important}
  body:has(.start-page-v3) .top{min-height:64px!important;padding:8px 10px!important}
  body:has(.start-page-v3) .top h1{font-size:20px!important}
  body:has(.start-page-v3) .top-actions{gap:5px!important}
  body:has(.start-page-v3) .guide-link,body:has(.start-page-v3) .fullscreen-btn{min-height:34px!important;padding:0 9px!important}
  body:has(.start-page-v3) .hero-banner{height:250px!important;min-height:250px!important;grid-template-columns:1fr!important}
  body:has(.start-page-v3) .hero-banner-copy{padding:20px 16px 0!important;grid-column:1!important;grid-row:1!important}
  body:has(.start-page-v3) .hero-banner h2{font-size:31px!important}
  body:has(.start-page-v3) .hero-banner-visual{position:absolute!important;right:2px!important;bottom:-8px!important;width:155px!important;height:155px!important;min-width:155px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:145px!important;height:145px!important;max-width:145px!important;max-height:145px!important}
  body:has(.start-page-v3) .category-grid-v3{grid-template-columns:1fr!important}
}

/* ============================================================
   V3.0 FUTURISTIC BUTTON LIGHT FX
   Entwickler : Sven Helle
   Projekt    : Hangman Hightech Version
   Datei      : public/assets/css/app.css
   Version    : V3.0
   Stand      : 23.09.2026
   ============================================================ */
body:has(.start-page-v3) .primary-v3{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-color:#38f0ff!important;
  background:
    linear-gradient(180deg,#61f3ff 0%,#16dff1 42%,#05a9cb 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -5px 0 #078da8,
    0 0 0 1px rgba(87,246,255,.8),
    0 0 12px rgba(24,229,255,.72),
    0 0 28px rgba(24,229,255,.48),
    0 5px 0 #064e61,
    0 12px 22px rgba(7,92,114,.28)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.38),0 0 8px rgba(255,255,255,.18)!important;
  transform:translateZ(0);
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease!important;
  animation:duellButtonGlow 2.4s ease-in-out infinite;
}
body:has(.start-page-v3) .primary-v3::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-42%;
  width:28%;
  height:160%;
  z-index:-1;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  filter:blur(2px);
  animation:duellButtonSweep 3.2s ease-in-out infinite;
}
body:has(.start-page-v3) .primary-v3::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:9px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.48);
  box-shadow:inset 0 0 16px rgba(255,255,255,.14),inset 0 0 24px rgba(0,240,255,.18);
}
body:has(.start-page-v3) .primary-v3:hover{
  filter:brightness(1.08) saturate(1.08);
  transform:translateY(-1px) scale(1.006)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 -5px 0 #078da8,
    0 0 0 1px rgba(87,246,255,1),
    0 0 18px rgba(24,229,255,.9),
    0 0 42px rgba(24,229,255,.62),
    0 6px 0 #064e61,
    0 15px 28px rgba(7,92,114,.34)!important;
}
body:has(.start-page-v3) .primary-v3:active,
body:has(.start-page-v3) .primary-v3.fx-pressed{
  transform:translateY(3px) scale(.995)!important;
  filter:brightness(1.16) saturate(1.18)!important;
  animation:none!important;
  box-shadow:
    inset 0 3px 8px rgba(0,72,94,.38),
    0 0 8px rgba(24,229,255,1),
    0 0 34px rgba(24,229,255,.95),
    0 0 70px rgba(24,229,255,.68),
    0 2px 0 #064e61!important;
}
@keyframes duellButtonGlow{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.055);}
}
@keyframes duellButtonSweep{
  0%,38%{left:-42%;opacity:0;}
  48%{opacity:1;}
  62%,100%{left:125%;opacity:0;}
}

/* Futuristic light pulse for navigation and interactive controls. */
body:has(.start-page-v3) .top-actions .guide-link,
body:has(.start-page-v3) .top-actions .fullscreen-btn,
body:has(.start-page-v3) .field-with-icon,
body:has(.start-page-v3) .computer-select-display-v3,
body:has(.start-page-v3) .difficulty-display-v3,
body:has(.start-page-v3) .category-select-v3{
  position:relative;
  overflow:hidden;
  transition:transform .14s ease,filter .14s ease,box-shadow .18s ease,border-color .18s ease!important;
}
body:has(.start-page-v3) .top-actions .guide-link::after,
body:has(.start-page-v3) .top-actions .fullscreen-btn::after,
body:has(.start-page-v3) .field-with-icon::after,
body:has(.start-page-v3) .computer-select-display-v3::after,
body:has(.start-page-v3) .difficulty-display-v3::after,
body:has(.start-page-v3) .category-select-v3::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-65%;
  width:34%;
  height:190%;
  transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  opacity:0;
  pointer-events:none;
}
body:has(.start-page-v3) .top-actions .guide-link:hover,
body:has(.start-page-v3) .top-actions .fullscreen-btn:hover,
body:has(.start-page-v3) .field-with-icon:hover,
body:has(.start-page-v3) .computer-select-display-v3:hover,
body:has(.start-page-v3) .difficulty-display-v3:hover,
body:has(.start-page-v3) .category-select-v3:hover{
  filter:brightness(1.055);
  transform:translateY(-1px);
  box-shadow:0 0 10px rgba(44,218,245,.24),inset 0 0 10px rgba(44,218,245,.10)!important;
}
body:has(.start-page-v3) .top-actions .guide-link.fx-pressed,
body:has(.start-page-v3) .top-actions .fullscreen-btn.fx-pressed,
body:has(.start-page-v3) .field-with-icon.fx-pressed,
body:has(.start-page-v3) .computer-select-display-v3.fx-pressed,
body:has(.start-page-v3) .difficulty-display-v3.fx-pressed,
body:has(.start-page-v3) .category-select-v3.fx-pressed{
  transform:translateY(1px) scale(.988);
  filter:brightness(1.16);
  border-color:#6df5ff!important;
  box-shadow:0 0 0 1px rgba(80,239,255,.9),0 0 12px rgba(40,227,255,.8),0 0 30px rgba(40,227,255,.45),inset 0 0 14px rgba(40,227,255,.18)!important;
}
body:has(.start-page-v3) .top-actions .guide-link.fx-pressed::after,
body:has(.start-page-v3) .top-actions .fullscreen-btn.fx-pressed::after,
body:has(.start-page-v3) .field-with-icon.fx-pressed::after,
body:has(.start-page-v3) .computer-select-display-v3.fx-pressed::after,
body:has(.start-page-v3) .difficulty-display-v3.fx-pressed::after,
body:has(.start-page-v3) .category-select-v3.fx-pressed::after{
  animation:controlLightSweep .38s ease-out forwards;
}
@keyframes controlLightSweep{
  0%{left:-65%;opacity:0;}
  18%{opacity:1;}
  100%{left:135%;opacity:0;}
}

/* Reduced motion remains accessible. */
@media (prefers-reduced-motion:reduce){
  body:has(.start-page-v3) .primary-v3,
  body:has(.start-page-v3) .primary-v3::before{animation:none!important;}
  body:has(.start-page-v3) .top-actions .guide-link,
  body:has(.start-page-v3) .top-actions .fullscreen-btn,
  body:has(.start-page-v3) .field-with-icon,
  body:has(.start-page-v3) .computer-select-display-v3,
  body:has(.start-page-v3) .difficulty-display-v3,
  body:has(.start-page-v3) .category-select-v3{transition:none!important;}
}


/*
 * HANGMAN HIGHTECH VERSION
 * Entwickler : Sven Helle
 * Webseite   : https://sven-helle.de
 * Projekt    : Hangman Hightech Version
 * Datei      : app.css
 * Version    : V3.0
 * Stand      : 23.09.2026
 *
 * FINAL FUTURISTIC STARTPAGE POLISH
 */

/* Header: credit gets its own grid area and can never slide behind navigation. */
body:has(.start-page-v3) .top{
  display:grid!important;
  grid-template-columns:minmax(290px,auto) minmax(0,1fr) minmax(220px,auto)!important;
  align-items:center!important;
  column-gap:18px!important;
}
body:has(.start-page-v3) .top-actions{
  justify-self:center!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
}
body:has(.start-page-v3) .brand-subtitle{
  position:static!important;
  justify-self:end!important;
  align-self:start!important;
  margin:3px 0 0!important;
  white-space:nowrap!important;
  text-align:right!important;
  color:#8fb6c2!important;
  font-size:8px!important;
  line-height:1.25!important;
  letter-spacing:.06em!important;
  z-index:5!important;
}

/* Hero: enough room for the complete word count without squeezing the panel. */
body:has(.start-page-v3) .hero-banner{
  grid-template-columns:270px minmax(0,1fr)!important;
}
body:has(.start-page-v3) .hero-banner-visual{
  width:270px!important;
  min-width:270px!important;
  height:252px!important;
}
body:has(.start-page-v3) .hero-banner-visual img{
  width:224px!important;
  height:238px!important;
  max-width:224px!important;
  max-height:238px!important;
}
body:has(.start-page-v3) .hero-banner-copy{
  min-width:0!important;
  padding:27px 22px 18px 12px!important;
}
body:has(.start-page-v3) .hero-banner h2{
  max-width:100%!important;
  font-size:clamp(30px,3.0vw,39px)!important;
  line-height:.99!important;
  letter-spacing:-.015em!important;
  overflow-wrap:anywhere!important;
}
body:has(.start-page-v3) .hero-lead{max-width:560px!important}

/* Primary CTA: calm breathing glow when idle, energetic sweep on hover/press. */
body:has(.start-page-v3) .primary-v3{
  isolation:isolate!important;
  overflow:hidden!important;
  animation:duellIdlePulse 2.8s ease-in-out infinite!important;
}
body:has(.start-page-v3) .primary-v3::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-42%;
  width:28%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),rgba(124,248,255,.55),transparent);
  filter:blur(2px);
  opacity:.5;
  animation:duellLightSweep 3.8s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
body:has(.start-page-v3) .primary-v3::after{
  content:"LOS – SPIEL MIT MIR!";
  position:absolute;
  left:50%;
  bottom:-24px;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:9px;
  letter-spacing:.24em;
  font-weight:900;
  color:#15758b;
  text-shadow:0 1px 0 #fff,0 0 8px rgba(32,214,232,.25);
  opacity:.72;
  pointer-events:none;
}
body:has(.start-page-v3) .primary-v3:hover{
  animation:none!important;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -5px 0 #078da8,
    0 0 0 1px rgba(87,246,255,.95),
    0 0 16px rgba(24,229,255,.95),
    0 0 36px rgba(24,229,255,.65),
    0 5px 0 #064e61,
    0 14px 28px rgba(7,92,114,.40)!important;
}
body:has(.start-page-v3) .primary-v3:active{
  animation:none!important;
}
@keyframes duellIdlePulse{
  0%,100%{filter:brightness(1);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 0 #078da8,0 0 0 1px rgba(87,246,255,.55),0 0 10px rgba(24,229,255,.48),0 0 22px rgba(24,229,255,.25),0 5px 0 #064e61,0 11px 18px rgba(7,92,114,.28)}
  50%{filter:brightness(1.08);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 0 #078da8,0 0 0 1px rgba(87,246,255,.9),0 0 18px rgba(24,229,255,.82),0 0 36px rgba(24,229,255,.42),0 5px 0 #064e61,0 13px 24px rgba(7,92,114,.34)}
}
@keyframes duellLightSweep{
  0%,58%{left:-42%;opacity:0}
  65%{opacity:.2}
  82%{left:115%;opacity:.8}
  100%{left:125%;opacity:0}
}

/* Futuristic light sweep for navigation and interactive controls. */
body:has(.start-page-v3) .guide-link,
body:has(.start-page-v3) .fullscreen-btn,
body:has(.start-page-v3) .field-with-icon,
body:has(.start-page-v3) .computer-select-display-v3,
body:has(.start-page-v3) .difficulty-display-v3,
body:has(.start-page-v3) .category-select-v3{
  position:relative!important;
  overflow:hidden!important;
}
body:has(.start-page-v3) .guide-link::after,
body:has(.start-page-v3) .fullscreen-btn::after,
body:has(.start-page-v3) .field-with-icon::after,
body:has(.start-page-v3) .computer-select-display-v3::after,
body:has(.start-page-v3) .difficulty-display-v3::after,
body:has(.start-page-v3) .category-select-v3::after{
  content:"";
  position:absolute;
  top:-20%;bottom:-20%;left:-55%;width:26%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),rgba(54,235,255,.35),transparent);
  opacity:0;
  pointer-events:none;
}
body:has(.start-page-v3) .guide-link:active::after,
body:has(.start-page-v3) .fullscreen-btn:active::after,
body:has(.start-page-v3) .field-with-icon:focus-within::after,
body:has(.start-page-v3) .computer-select-display-v3:active::after,
body:has(.start-page-v3) .difficulty-display-v3:focus-within::after,
body:has(.start-page-v3) .category-select-v3:focus-within::after{
  animation:uiLightSweep .55s ease-out forwards;
}
@keyframes uiLightSweep{from{left:-55%;opacity:0}18%{opacity:.8}to{left:125%;opacity:0}}

@media(max-width:1180px){
  body:has(.start-page-v3) .top{grid-template-columns:minmax(240px,auto) minmax(0,1fr)!important}
  body:has(.start-page-v3) .brand-subtitle{grid-column:1/-1;justify-self:end;grid-row:2}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:225px minmax(0,1fr)!important}
  body:has(.start-page-v3) .hero-banner-visual{width:225px!important;min-width:225px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:190px!important;height:210px!important;max-width:190px!important;max-height:210px!important}
}
@media(max-width:680px){
  body:has(.start-page-v3) .top{display:flex!important;flex-wrap:wrap!important}
  body:has(.start-page-v3) .brand-subtitle{display:none!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:1fr!important}
}

/*
 * V3.0 FINAL BUTTON POLISH
 * Entwickler : Sven Helle
 * Webseite   : https://sven-helle.de
 * Projekt    : Hangman Hightech Version
 * Datei      : app.css
 * Version    : V3.0
 * Stand      : 23.09.2026
 *
 * Obere Navigation bewusst ruhig und maximal lesbar.
 * Der primäre DUELL-STARTEN-Button erhält den starken futuristischen Puls.
 */

/* Obere Buttons: keine Licht-Sweeps/Glow-Effekte, nur klare fette Schrift mit schwarzer Kontur. */
body:has(.start-page-v3) .top-actions .guide-link,
body:has(.start-page-v3) .top-actions .fullscreen-btn{
  overflow:hidden!important;
  transform:none!important;
  filter:none!important;
  text-shadow:
    -1px -1px 0 #06131a,
     1px -1px 0 #06131a,
    -1px  1px 0 #06131a,
     1px  1px 0 #06131a!important;
  color:#fff!important;
  font-weight:1000!important;
  letter-spacing:.055em!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(0,35,48,.22)!important;
}
body:has(.start-page-v3) .top-actions .guide-link::after,
body:has(.start-page-v3) .top-actions .fullscreen-btn::after{
  display:none!important;
  animation:none!important;
}
body:has(.start-page-v3) .top-actions .guide-link:hover,
body:has(.start-page-v3) .top-actions .fullscreen-btn:hover,
body:has(.start-page-v3) .top-actions .guide-link.fx-pressed,
body:has(.start-page-v3) .top-actions .fullscreen-btn.fx-pressed{
  transform:none!important;
  filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(0,35,48,.22)!important;
}

/* Auch Auswahlfelder bleiben ruhig: keine unnötigen Lichtblitze. */
body:has(.start-page-v3) .field-with-icon::after,
body:has(.start-page-v3) .computer-select-display-v3::after,
body:has(.start-page-v3) .difficulty-display-v3::after,
body:has(.start-page-v3) .category-select-v3::after{
  display:none!important;
  animation:none!important;
}

/* DUELL STARTEN: deutlich kräftigeres "Los – spiel mit mir!" Pulsieren. */
body:has(.start-page-v3) .primary-v3{
  animation:duellStrongPulse 1.65s ease-in-out infinite!important;
  will-change:transform,filter,box-shadow;
}
body:has(.start-page-v3) .primary-v3::before{
  animation:duellStrongSweep 2.55s ease-in-out infinite!important;
  opacity:.72!important;
}
body:has(.start-page-v3) .primary-v3::after{
  opacity:.95!important;
  font-size:10px!important;
  color:#075d70!important;
  text-shadow:0 1px 0 #fff,0 0 10px rgba(32,214,232,.38)!important;
}
@keyframes duellStrongPulse{
  0%,100%{
    transform:scale(1);
    filter:brightness(1) saturate(1.02);
    box-shadow:
      inset 0 2px 0 #fff,
      inset 0 -5px 0 #078da8,
      0 0 0 1px rgba(87,246,255,.72),
      0 0 13px rgba(24,229,255,.65),
      0 0 30px rgba(24,229,255,.34),
      0 5px 0 #064e61,
      0 12px 20px rgba(7,92,114,.30);
  }
  50%{
    transform:scale(1.018);
    filter:brightness(1.16) saturate(1.14);
    box-shadow:
      inset 0 2px 0 #fff,
      inset 0 -5px 0 #078da8,
      0 0 0 2px rgba(109,248,255,.98),
      0 0 22px rgba(24,229,255,1),
      0 0 52px rgba(24,229,255,.70),
      0 0 82px rgba(24,229,255,.30),
      0 6px 0 #064e61,
      0 16px 28px rgba(7,92,114,.42);
  }
}
@keyframes duellStrongSweep{
  0%,48%{left:-45%;opacity:0}
  55%{opacity:.12}
  68%{opacity:.95}
  82%,100%{left:125%;opacity:0}
}
body:has(.start-page-v3) .primary-v3:hover{
  animation:duellStrongHoverPulse .9s ease-in-out infinite!important;
}
@keyframes duellStrongHoverPulse{
  0%,100%{transform:scale(1.012);filter:brightness(1.1) saturate(1.08)}
  50%{transform:scale(1.028);filter:brightness(1.23) saturate(1.18)}
}
body:has(.start-page-v3) .primary-v3:active,
body:has(.start-page-v3) .primary-v3.fx-pressed{
  animation:none!important;
  transform:translateY(3px) scale(.988)!important;
}

@media(prefers-reduced-motion:reduce){
  body:has(.start-page-v3) .primary-v3,
  body:has(.start-page-v3) .primary-v3::before{animation:none!important}
}

/* ============================================================
   V3.0 STARTSEITEN-MUSIK
   Entwickler : Sven Helle
   Webseite   : https://sven-helle.de
   Projekt    : Hangman Hightech Version
   Datei      : app.css
   Version    : V3.0
   Stand      : 23.09.2026
   ============================================================ */
body:has(.start-page-v3) .start-music-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:46px;
  padding:0 17px;
  border:1px solid rgba(89,220,245,.72);
  border-radius:13px;
  background:linear-gradient(180deg,#d7eef5 0%,#9cc7d7 52%,#78aec1 100%);
  color:#fff;
  font-weight:1000;
  letter-spacing:.045em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 3px 8px rgba(0,35,48,.22);
  text-shadow:-1px -1px 0 #06131a,1px -1px 0 #06131a,-1px 1px 0 #06131a,1px 1px 0 #06131a;
}
body:has(.start-page-v3) .start-music-toggle:hover{filter:brightness(1.04)}
body:has(.start-page-v3) .start-music-toggle.is-off{opacity:.78}
body:has(.start-page-v3) .start-music-toggle.is-off span::after{content:' AUS';}
body:has(.start-page-v3) .start-music-toggle:not(.is-off) span::after{content:' ON';}
@media(max-width:1180px){body:has(.start-page-v3) .start-music-toggle{min-height:40px;padding:0 12px;font-size:11px}}

/* ============================================================
   HANGMAN HIGHTECH VERSION – STARTSEITE DESIGN POLISH
   Entwickler : Sven Helle
   Webseite   : https://sven-helle.de
   Projekt    : Hangman Hightech Version
   Datei      : public/assets/css/app.css
   Version    : V3.0
   Stand      : 23.09.2026

   Kompakteres Referenzlayout: klare Proportionen, ruhige Hierarchie,
   bessere Lesbarkeit und mehr sichtbarer Spielstart-Bereich.
   ============================================================ */
body:has(.start-page-v3) .app{
  max-width:1540px!important;
  padding:14px 18px 18px!important;
}
body:has(.start-page-v3) .top{
  min-height:70px!important;
  padding:0 8px 10px!important;
  display:grid!important;
  grid-template-columns:minmax(350px,1fr) auto minmax(250px,auto)!important;
  align-items:center!important;
  gap:18px!important;
}
body:has(.start-page-v3) .top > div:first-child{min-width:0!important}
body:has(.start-page-v3) .top h1{
  font-size:27px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body:has(.start-page-v3) .top-actions{
  justify-content:center!important;
  gap:8px!important;
  min-width:0!important;
}
body:has(.start-page-v3) .top-actions .guide-link,
body:has(.start-page-v3) .top-actions .fullscreen-btn{
  min-height:40px!important;
  padding:0 15px!important;
  font-size:10px!important;
  border-radius:11px!important;
}
body:has(.start-page-v3) .brand-subtitle{
  position:static!important;
  justify-self:end!important;
  text-align:right!important;
  max-width:250px!important;
  line-height:1.2!important;
  font-size:8px!important;
  white-space:normal!important;
}
body:has(.start-page-v3) .start-music-toggle{
  min-height:40px!important;
  width:42px!important;
  padding:0!important;
  font-size:0!important;
  border-radius:11px!important;
}
body:has(.start-page-v3) .start-music-toggle span{display:none!important}

body:has(.start-page-v3) .start-grid{
  grid-template-columns:minmax(0,1.58fr) minmax(430px,.92fr)!important;
  gap:12px!important;
  margin-top:12px!important;
  align-items:start!important;
}
body:has(.start-page-v3) .start-left-column{
  grid-template-rows:208px 390px!important;
  gap:12px!important;
}

/* HERO – kompakt, klar und mit stärkerer visueller Balance */
body:has(.start-page-v3) .hero-banner{
  min-height:208px!important;
  height:208px!important;
  grid-template-columns:minmax(0,1fr) 238px!important;
  border-radius:18px!important;
}
body:has(.start-page-v3) .hero-banner-copy{
  padding:20px 8px 18px 26px!important;
}
body:has(.start-page-v3) .hero-kicker{margin-bottom:6px!important;font-size:8px!important}
body:has(.start-page-v3) .hero-banner h2{
  font-size:34px!important;
  line-height:1.02!important;
  letter-spacing:-.018em!important;
}
body:has(.start-page-v3) .hero-lead{
  font-size:11px!important;
  margin-top:8px!important;
}
body:has(.start-page-v3) .hero-banner-visual{
  width:238px!important;
  min-width:238px!important;
  height:208px!important;
}
body:has(.start-page-v3) .hero-banner-visual img{
  width:190px!important;
  height:202px!important;
  max-width:190px!important;
  max-height:202px!important;
  border-radius:11px!important;
}
body:has(.start-page-v3) .hero-banner-visual:after{
  width:154px!important;
  height:18px!important;
  bottom:9px!important;
}

/* START PANEL – alle wesentlichen Elemente innerhalb des ersten Screens */
body:has(.start-page-v3) .start-panel-v3{
  min-height:390px!important;
  height:390px!important;
  padding:14px 16px 15px!important;
  border-radius:18px!important;
}
body:has(.start-page-v3) .start-panel-title-v3{
  font-size:21px!important;
  margin-bottom:8px!important;
}
body:has(.start-page-v3) .start-panel-title-v3 .ui-icon{
  width:40px!important;height:40px!important;
}
body:has(.start-page-v3) .start-form-v3{gap:8px!important}
body:has(.start-page-v3) .team-fields-v3,
body:has(.start-page-v3) .computer-row-v3{gap:8px!important}
body:has(.start-page-v3) .team-fields-v3 label>span,
body:has(.start-page-v3) .computer-toggle>span:first-child,
body:has(.start-page-v3) .computer-difficulty{
  font-size:9px!important;
}
body:has(.start-page-v3) .field-with-icon,
body:has(.start-page-v3) .computer-select-display-v3,
body:has(.start-page-v3) .difficulty-display-v3,
body:has(.start-page-v3) .category-select-v3{
  min-height:46px!important;height:46px!important;
  border-radius:10px!important;
}
body:has(.start-page-v3) .field-with-icon .ui-icon,
body:has(.start-page-v3) .category-select-v3 .ui-icon{
  width:36px!important;height:36px!important;
}
body:has(.start-page-v3) .category-select-v3{min-height:46px!important;height:46px!important}
body:has(.start-page-v3) .primary-v3{
  min-height:58px!important;height:58px!important;
  border-radius:11px!important;
  font-size:18px!important;
}

/* KATEGORIEN – sauberer, luftiger und näher an der Referenz */
body:has(.start-page-v3) .categories-v3{
  min-height:610px!important;
  height:610px!important;
  padding:14px 15px 10px!important;
  border-radius:18px!important;
}
body:has(.start-page-v3) .section-head-v3{
  padding:4px 6px 9px!important;
  font-size:17px!important;
}
body:has(.start-page-v3) .section-head-v3 b{font-size:10px!important}
body:has(.start-page-v3) .category-grid-v3{
  column-gap:8px!important;
}
body:has(.start-page-v3) .cat-v3{
  grid-template-columns:42px minmax(0,1fr)!important;
  gap:8px!important;
  min-height:55px!important;
  padding:5px 3px!important;
}
body:has(.start-page-v3) .cat-icon-v3,
body:has(.start-page-v3) .cat-icon-v3 img{
  width:42px!important;height:42px!important;
  min-width:42px!important;min-height:42px!important;
  max-width:42px!important;max-height:42px!important;
}
body:has(.start-page-v3) .cat-v3 strong{font-size:11px!important;line-height:1.12!important}
body:has(.start-page-v3) .cat-v3 small{font-size:8px!important;margin-top:2px!important}

@media(max-width:1180px){
  body:has(.start-page-v3) .top{grid-template-columns:1fr auto!important}
  body:has(.start-page-v3) .brand-subtitle{grid-column:1/-1;justify-self:end;grid-row:2}
  body:has(.start-page-v3) .start-grid{grid-template-columns:minmax(0,1fr) 390px!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:minmax(0,1fr) 205px!important}
  body:has(.start-page-v3) .hero-banner-visual{width:205px!important;min-width:205px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:170px!important;height:190px!important;max-width:170px!important;max-height:190px!important}
}
@media(max-width:980px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:1fr!important}
  body:has(.start-page-v3) .categories-v3{height:auto!important;min-height:0!important}
}

/* ============================================================
   V3.0 – GLASS BLUE / FUTURISTIC START PAGE MASTER
   Entwickler : Sven Helle
   Webseite   : https://sven-helle.de
   Projekt    : Hangman Hightech Version
   Datei      : app.css
   Version    : V3.0
   Stand      : 23.09.2026

   Startseite bewusst als glasblaue Game-UI:
   dunkles Tech-Glas, Cyan-Kanten, feine Circuit-Linien,
   kleine Lichtpunkte und kontrollierte Gold-Akzente.
   ============================================================ */
body:has(.start-page-v3){
  --glass-bg:#062b3b;
  --glass-bg2:#0a4055;
  --glass-deep:#031b28;
  --glass-cyan:#20e7ff;
  --glass-cyan2:#76f5ff;
  --glass-gold:#ffd45a;
  --glass-white:#eefcff;
  --glass-muted:#8fc3d2;
  background:
    radial-gradient(circle at 50% 0%,rgba(30,213,255,.16),transparent 34%),
    linear-gradient(rgba(28,177,214,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,177,214,.055) 1px,transparent 1px),
    #031a27!important;
  background-size:auto,32px 32px,32px 32px,auto!important;
  color:var(--glass-white)!important;
}
body:has(.start-page-v3) .app{
  max-width:1640px!important;
  padding:14px 22px 22px!important;
}
body:has(.start-page-v3) .app::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 18% 30%,rgba(0,215,255,.10),transparent 24%),radial-gradient(circle at 88% 55%,rgba(0,179,255,.09),transparent 26%);
}

/* HEADER */
body:has(.start-page-v3) .top{
  min-height:78px!important;
  padding:8px 16px!important;
  border:1px solid rgba(68,221,255,.78)!important;
  border-radius:18px!important;
  background:
    linear-gradient(135deg,rgba(7,44,60,.98),rgba(3,25,38,.98) 58%,rgba(8,62,80,.98))!important;
  box-shadow:0 0 0 1px rgba(8,127,158,.65),0 0 18px rgba(0,213,255,.22),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -8px 24px rgba(0,0,0,.25)!important;
  position:relative!important;overflow:hidden!important;
}
body:has(.start-page-v3) .top::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,#00dfff 18%,#7af8ff 50%,#00dfff 82%,transparent);
  box-shadow:0 0 14px #00dfff;
}
body:has(.start-page-v3) .top::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:linear-gradient(135deg,transparent 0 30%,rgba(0,225,255,.08) 30.1% 30.25%,transparent 30.35% 67%,rgba(0,225,255,.06) 67.1% 67.25%,transparent 67.35%);
}
body:has(.start-page-v3) .top h1{
  color:#f2fcff!important;text-shadow:0 2px 0 #001018,0 0 12px rgba(0,224,255,.18)!important;
}
body:has(.start-page-v3) .top h1 span{color:#9bb7c2!important}
body:has(.start-page-v3) .top .eyebrow{color:#75c9d9!important}
body:has(.start-page-v3) .brand-subtitle{color:#7ca8b5!important;z-index:2}
body:has(.start-page-v3) .top-actions{z-index:3}
body:has(.start-page-v3) .top-actions .guide-link,
body:has(.start-page-v3) .top-actions .fullscreen-btn{
  background:linear-gradient(180deg,#15566d,#083143)!important;
  border:1px solid #2bdfff!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(0,145,183,.35),0 0 12px rgba(0,219,255,.18),inset 0 1px 0 rgba(255,255,255,.25)!important;
  text-shadow:-1px -1px 0 #03151d,1px -1px 0 #03151d,-1px 1px 0 #03151d,1px 1px 0 #03151d!important;
}
body:has(.start-page-v3) .start-music-toggle{
  width:42px!important;height:40px!important;min-height:40px!important;padding:0!important;
  background:linear-gradient(180deg,#1b6a80,#062d40)!important;
  border:1px solid #38e5ff!important;color:#fff!important;
  box-shadow:0 0 12px rgba(0,219,255,.28),inset 0 1px 0 rgba(255,255,255,.22)!important;
  z-index:4;
}

/* SHARED GLASS PANELS */
body:has(.start-page-v3) .hero-banner,
body:has(.start-page-v3) .start-panel-v3,
body:has(.start-page-v3) .categories-v3{
  position:relative!important;overflow:hidden!important;
  border:1px solid rgba(43,229,255,.82)!important;
  background:
    radial-gradient(circle at 72% 0%,rgba(22,208,255,.18),transparent 35%),
    linear-gradient(145deg,rgba(7,61,80,.97),rgba(3,28,43,.98) 58%,rgba(5,52,68,.97))!important;
  box-shadow:
    0 0 0 1px rgba(0,122,158,.62),
    0 0 18px rgba(0,217,255,.20),
    0 18px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -12px 30px rgba(0,0,0,.25)!important;
}
body:has(.start-page-v3) .hero-banner::before,
body:has(.start-page-v3) .start-panel-v3::before,
body:has(.start-page-v3) .categories-v3::before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(91,239,255,.22);border-radius:inherit;pointer-events:none;z-index:4;
}
body:has(.start-page-v3) .hero-banner::after,
body:has(.start-page-v3) .start-panel-v3::after,
body:has(.start-page-v3) .categories-v3::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;z-index:0;
  background:
    linear-gradient(90deg,transparent 0 18%,rgba(54,225,255,.12) 18.2% 18.35%,transparent 18.5% 76%,rgba(54,225,255,.08) 76.2% 76.35%,transparent 76.5%),
    linear-gradient(135deg,transparent 0 14%,rgba(54,225,255,.10) 14.2% 14.35%,transparent 14.5% 86%,rgba(54,225,255,.08) 86.2% 86.35%,transparent 86.5%);
}

/* HERO */
body:has(.start-page-v3) .hero-banner{
  min-height:280px!important;height:280px!important;
  grid-template-columns:390px minmax(0,1fr)!important;
  border-radius:20px!important;
}
body:has(.start-page-v3) .hero-banner-glow{display:none!important}
body:has(.start-page-v3) .hero-banner-visual{z-index:2!important;width:390px!important;min-width:390px!important;height:280px!important;position:relative!important}
body:has(.start-page-v3) .hero-banner-visual::before{
  content:"";position:absolute;inset:18px 18px 18px 18px;border:1px solid #2de8ff88;border-radius:14px;background:linear-gradient(135deg,rgba(20,184,222,.08),rgba(0,0,0,.14));box-shadow:0 0 15px rgba(0,224,255,.16),inset 0 0 25px rgba(0,224,255,.08);z-index:1;
}
body:has(.start-page-v3) .hero-banner-visual::after{content:"";position:absolute;width:220px;height:24px;bottom:15px;left:84px;background:#00e7ff55;filter:blur(14px);border-radius:50%;z-index:1}
body:has(.start-page-v3) .hero-banner-visual img{position:relative!important;z-index:2!important;width:300px!important;height:270px!important;max-width:300px!important;max-height:270px!important;object-fit:cover!important;object-position:center!important;mix-blend-mode:screen!important;filter:drop-shadow(0 10px 14px #000b) drop-shadow(0 0 9px rgba(0,219,255,.22))!important}
body:has(.start-page-v3) .hero-banner-copy{z-index:3!important;padding:28px 32px!important;align-self:center!important}
body:has(.start-page-v3) .hero-kicker{color:#6fe8ff!important;letter-spacing:.18em!important}
body:has(.start-page-v3) .hero-banner h2{font-size:44px!important;line-height:.98!important;color:#f5fcff!important;text-shadow:0 2px 0 #001018,0 0 14px rgba(0,220,255,.18)!important}
body:has(.start-page-v3) .hero-banner h2 strong{color:#fff!important;text-shadow:0 0 12px rgba(0,221,255,.42)!important}
body:has(.start-page-v3) .hero-banner h2 em{color:#19e5ff!important;text-shadow:0 0 16px rgba(0,225,255,.42)!important}
body:has(.start-page-v3) .hero-lead{color:#a8ced8!important}

/* START PANEL */
body:has(.start-page-v3) .start-panel-v3{min-height:430px!important;height:430px!important;padding:18px 20px 18px!important;border-radius:20px!important}
body:has(.start-page-v3) .start-panel-title-v3{position:relative;z-index:5;color:#eafcff!important;font-size:24px!important;text-shadow:0 0 10px rgba(0,220,255,.2)!important}
body:has(.start-page-v3) .start-panel-title-v3 .ui-icon{background:linear-gradient(145deg,#0b6880,#032838)!important;border-color:#26ddff!important;box-shadow:0 0 13px rgba(0,224,255,.25),inset 0 1px 0 rgba(255,255,255,.22)!important}
body:has(.start-page-v3) .start-form-v3{position:relative;z-index:5}
body:has(.start-page-v3) .team-fields-v3 label>span,
body:has(.start-page-v3) .computer-toggle>span:first-child,
body:has(.start-page-v3) .computer-difficulty,
body:has(.start-page-v3) .category-field-v3>span:first-child{color:#8de6f6!important}
body:has(.start-page-v3) .field-with-icon,
body:has(.start-page-v3) .computer-select-display-v3,
body:has(.start-page-v3) .difficulty-display-v3,
body:has(.start-page-v3) .category-select-v3{
  background:linear-gradient(180deg,rgba(231,250,255,.96),rgba(171,222,236,.92))!important;
  border:1px solid #35dfff!important;color:#123c4d!important;
  box-shadow:0 0 0 1px rgba(0,132,164,.34),0 0 12px rgba(0,214,255,.16),inset 0 1px 0 #fff!important;
}
body:has(.start-page-v3) .field-with-icon input,
body:has(.start-page-v3) .category-select-v3 select,
body:has(.start-page-v3) .difficulty-display-v3 select{color:#123c4d!important}
body:has(.start-page-v3) .primary-v3{
  position:relative!important;z-index:5!important;
  min-height:70px!important;height:70px!important;border-radius:18px!important;
  background:linear-gradient(180deg,#1ae8ff,#079ec2 58%,#05657d)!important;
  border:2px solid #76f7ff!important;color:#fff!important;
  box-shadow:0 0 0 1px #00677d,0 0 18px rgba(0,224,255,.65),0 0 44px rgba(0,224,255,.28),0 8px 0 #034e60,inset 0 2px 0 #fff,inset 0 -8px 18px rgba(0,40,55,.34)!important;
  text-shadow:0 2px 0 #005366,0 0 10px rgba(255,255,255,.6)!important;
}
body:has(.start-page-v3) .primary-v3::after{color:#0a596b!important;text-shadow:0 1px 0 #fff,0 0 10px rgba(0,224,255,.55)!important}

/* CATEGORY PANEL */
body:has(.start-page-v3) .categories-v3{min-height:720px!important;height:720px!important;padding:16px 18px 12px!important;border-radius:20px!important}
body:has(.start-page-v3) .section-head-v3{position:relative;z-index:5;color:#f1fcff!important;font-size:22px!important;border-bottom:1px solid rgba(74,225,255,.55)!important;text-shadow:0 0 9px rgba(0,221,255,.16)!important}
body:has(.start-page-v3) .section-head-v3 b{color:#2be7ff!important;text-shadow:0 0 9px rgba(0,225,255,.35)!important}
body:has(.start-page-v3) .category-grid-v3{position:relative;z-index:5;column-gap:10px!important;row-gap:6px!important}
body:has(.start-page-v3) .cat-v3{
  grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important;min-height:62px!important;padding:6px 7px!important;border:1px solid rgba(55,220,255,.55)!important;border-radius:11px!important;
  background:linear-gradient(145deg,rgba(11,89,113,.78),rgba(4,39,55,.90))!important;
  box-shadow:0 0 10px rgba(0,207,255,.12),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
body:has(.start-page-v3) .cat-v3:hover{border-color:#63efff!important;box-shadow:0 0 16px rgba(0,225,255,.32),inset 0 1px 0 rgba(255,255,255,.18)!important;transform:translateY(-1px)}
body:has(.start-page-v3) .cat-icon-v3,
body:has(.start-page-v3) .cat-icon-v3 img{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important}
body:has(.start-page-v3) .cat-v3 strong{color:#f3fdff!important;font-size:12px!important;line-height:1.08!important;text-shadow:0 1px 0 #00131c!important}
body:has(.start-page-v3) .cat-v3 small{color:#78c5d5!important;font-size:9px!important}

/* small tech details */
body:has(.start-page-v3) .hero-banner-copy::after,
body:has(.start-page-v3) .start-panel-v3 .start-form-v3::after,
body:has(.start-page-v3) .categories-v3 .category-grid-v3::after{
  content:"";position:absolute;pointer-events:none;width:5px;height:5px;border-radius:50%;background:#7ff8ff;box-shadow:0 0 8px #00dfff,120px 42px 0 #1ee7ff,240px 16px 0 #1ee7ff55;opacity:.65;animation:techDots 3.4s ease-in-out infinite alternate;
}
body:has(.start-page-v3) .hero-banner-copy::after{right:22px;top:26px}
body:has(.start-page-v3) .start-panel-v3 .start-form-v3::after{right:18px;bottom:18px}
body:has(.start-page-v3) .categories-v3 .category-grid-v3::after{right:12px;top:12px}
@keyframes techDots{from{opacity:.25;filter:blur(.2px)}to{opacity:.9;filter:blur(0);transform:translateX(6px)}}

@media(max-width:1180px){
 body:has(.start-page-v3) .hero-banner{grid-template-columns:300px minmax(0,1fr)!important}
 body:has(.start-page-v3) .hero-banner-visual{width:300px!important;min-width:300px!important}
 body:has(.start-page-v3) .hero-banner-visual img{width:235px!important;height:255px!important}
}
@media(max-width:980px){
 body:has(.start-page-v3) .hero-banner{height:auto!important;min-height:250px!important;grid-template-columns:270px minmax(0,1fr)!important}
 body:has(.start-page-v3) .hero-banner-visual{height:250px!important;width:270px!important;min-width:270px!important}
 body:has(.start-page-v3) .hero-banner-visual img{width:220px!important;height:235px!important}
 body:has(.start-page-v3) .categories-v3{height:auto!important;min-height:0!important}
}
@media(max-width:680px){
 body:has(.start-page-v3) .hero-banner{grid-template-columns:1fr!important}
 body:has(.start-page-v3) .hero-banner-visual{position:absolute!important;right:0;bottom:0;width:190px!important;min-width:190px!important;height:190px!important;opacity:.72}
 body:has(.start-page-v3) .hero-banner-visual img{width:180px!important;height:185px!important}
 body:has(.start-page-v3) .hero-banner-copy{padding:24px 18px!important}
 body:has(.start-page-v3) .hero-banner h2{font-size:32px!important;max-width:100%!important}
}

/* ============================================================
   V3.0 – GLASS BLUE MASTER – FINAL LAYOUT / ICON POLISH
   Entwickler : Sven Helle
   Webseite   : https://sven-helle.de
   Projekt    : Hangman Hightech Version
   Datei      : app.css
   Version    : V3.0
   Stand      : 23.09.2026
   ============================================================ */
body:has(.start-page-v3){
  --gb-cyan:#31e9ff;
  --gb-cyan-soft:#8ff7ff;
  --gb-blue:#0a7e9f;
  --gb-deep:#032333;
  --gb-glass:rgba(8,67,86,.58);
  --gb-glass2:rgba(7,48,66,.66);
  background:
    radial-gradient(circle at 50% -10%,rgba(92,240,255,.20),transparent 38%),
    linear-gradient(90deg,rgba(74,213,242,.045) 1px,transparent 1px),
    linear-gradient(rgba(74,213,242,.045) 1px,transparent 1px),
    #061d2b!important;
  background-size:auto,32px 32px,32px 32px,auto!important;
}
body:has(.start-page-v3) .app{max-width:1660px!important;padding:12px 24px 28px!important}

/* HEADER: glass, clean, readable */
body:has(.start-page-v3) .top{
  min-height:84px!important;padding:10px 18px!important;
  border:1px solid rgba(115,241,255,.78)!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(12,67,84,.82),rgba(3,32,47,.78))!important;
  backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);
  box-shadow:0 0 0 1px rgba(0,159,196,.42),0 0 24px rgba(0,215,255,.18),inset 0 1px 0 rgba(255,255,255,.20),inset 0 -16px 28px rgba(0,10,20,.22)!important;
  overflow:hidden!important;
}
body:has(.start-page-v3) .top::before{content:"";position:absolute;inset:1px;border-radius:17px;pointer-events:none;background:linear-gradient(105deg,transparent 0 22%,rgba(118,244,255,.10) 23%,transparent 24% 70%,rgba(118,244,255,.08) 71%,transparent 72%)}
body:has(.start-page-v3) .top::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#39eaff 12%,#d9fdff 50%,#39eaff 88%,transparent);box-shadow:0 0 12px #00dcff}
body:has(.start-page-v3) .top-actions{gap:10px!important;align-items:center!important;z-index:5!important}
body:has(.start-page-v3) .top-actions .guide-link,
body:has(.start-page-v3) .top-actions .fullscreen-btn,
body:has(.start-page-v3) .top-actions .start-music-toggle{
  min-height:46px!important;height:46px!important;padding:0 16px!important;border-radius:13px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  color:#f7fdff!important;font-weight:900!important;letter-spacing:.02em!important;
  text-shadow:-1px -1px 0 #001018,1px -1px 0 #001018,-1px 1px 0 #001018,1px 1px 0 #001018!important;
  background:linear-gradient(180deg,rgba(35,132,158,.76),rgba(5,54,72,.84))!important;
  border:1px solid rgba(103,235,255,.86)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 10px rgba(0,215,255,.13),0 5px 12px rgba(0,0,0,.22)!important;
}
body:has(.start-page-v3) .top-actions .guide-link:hover,
body:has(.start-page-v3) .top-actions .fullscreen-btn:hover{filter:brightness(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 18px rgba(0,225,255,.30),0 5px 12px rgba(0,0,0,.22)!important}
body:has(.start-page-v3) .start-music-toggle{width:auto!important;min-width:48px!important;padding:0 12px!important;color:#dffcff!important}
body:has(.start-page-v3) .start-music-toggle span{display:inline!important;font-size:10px!important}
body:has(.start-page-v3) .brand-subtitle{z-index:6!important;white-space:nowrap!important;color:#80b5c4!important}

/* Navigation icons – stable, non-emoji */
body:has(.start-page-v3) .nav-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:#8ff7ff;font-size:20px;line-height:1;text-shadow:0 0 8px rgba(0,235,255,.55)}
body:has(.start-page-v3) .nav-icon.gold{color:#ffd86a;text-shadow:0 0 8px rgba(255,193,45,.55)}
body:has(.start-page-v3) .nav-icon.music{font-size:19px}

/* MAIN GRID: no overlap */
body:has(.start-page-v3) .start-grid{
  display:grid!important;grid-template-columns:minmax(0,1.78fr) minmax(470px,.92fr)!important;gap:14px!important;align-items:start!important;
}
body:has(.start-page-v3) .start-left-column{display:grid!important;grid-template-rows:auto auto!important;gap:12px!important;min-width:0!important}

/* HERO – fixed internal geometry */
body:has(.start-page-v3) .hero-banner{
  display:grid!important;grid-template-columns:360px minmax(0,1fr)!important;gap:0!important;
  height:292px!important;min-height:292px!important;max-height:292px!important;
  overflow:hidden!important;border-radius:20px!important;
  background:
    linear-gradient(115deg,rgba(17,103,127,.60),rgba(2,34,49,.56) 52%,rgba(7,70,88,.52)),
    radial-gradient(circle at 82% 15%,rgba(56,229,255,.16),transparent 36%)!important;
  backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%);
}
body:has(.start-page-v3) .hero-banner::before{inset:8px!important;border:1px solid rgba(127,247,255,.28)!important;border-radius:15px!important}
body:has(.start-page-v3) .hero-banner::after{opacity:.55!important;background:linear-gradient(125deg,transparent 0 20%,rgba(93,239,255,.16) 20.2% 20.4%,transparent 20.6% 70%,rgba(93,239,255,.12) 70.2% 70.4%,transparent 70.6%)!important}
body:has(.start-page-v3) .hero-banner-visual{width:360px!important;min-width:360px!important;height:292px!important;overflow:hidden!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}
body:has(.start-page-v3) .hero-banner-visual::before{inset:16px 16px 14px!important;border-color:rgba(97,239,255,.28)!important;background:linear-gradient(135deg,rgba(89,229,255,.09),rgba(0,0,0,.16))!important}
body:has(.start-page-v3) .hero-banner-visual img{width:320px!important;height:285px!important;max-width:320px!important;max-height:285px!important;object-fit:cover!important;object-position:center!important;margin:0!important;mix-blend-mode:screen!important;filter:drop-shadow(0 12px 18px rgba(0,0,0,.52)) drop-shadow(0 0 16px rgba(0,225,255,.25))!important}
body:has(.start-page-v3) .hero-banner-copy{padding:30px 34px!important;min-width:0!important;align-self:center!important;overflow:hidden!important}
body:has(.start-page-v3) .hero-kicker{font-size:12px!important;color:#79eaff!important;letter-spacing:.16em!important}
body:has(.start-page-v3) .hero-banner h2{font-size:39px!important;line-height:.98!important;max-width:100%!important;margin:8px 0 10px!important;white-space:normal!important;overflow-wrap:normal!important;color:#f5fdff!important}
body:has(.start-page-v3) .hero-banner h2 strong{display:inline!important;color:#f7fdff!important;white-space:nowrap!important}
body:has(.start-page-v3) .hero-banner h2 em{display:block!important;color:#25e7ff!important;white-space:nowrap!important}
body:has(.start-page-v3) .hero-lead{font-size:14px!important;color:#b4d8e1!important;margin:0!important}

/* START PANEL – below hero, independent box */
body:has(.start-page-v3) .start-panel-v3{
  height:auto!important;min-height:0!important;padding:18px 20px 20px!important;border-radius:20px!important;
  background:linear-gradient(145deg,rgba(17,93,115,.62),rgba(3,35,51,.70))!important;
  backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 0 0 1px rgba(64,228,255,.48),0 0 26px rgba(0,215,255,.12),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -20px 35px rgba(0,0,0,.20)!important;
}
body:has(.start-page-v3) .start-panel-title-v3{font-size:25px!important;margin-bottom:12px!important}
body:has(.start-page-v3) .start-form-v3{display:grid!important;gap:10px!important}
body:has(.start-page-v3) .team-fields-v3{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
body:has(.start-page-v3) .computer-row-v3{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(230px,.75fr)!important;gap:12px!important}
body:has(.start-page-v3) .field-with-icon,
body:has(.start-page-v3) .computer-select-display-v3,
body:has(.start-page-v3) .difficulty-display-v3,
body:has(.start-page-v3) .category-select-v3{
  min-height:56px!important;height:56px!important;border-radius:12px!important;
  background:linear-gradient(180deg,rgba(232,250,255,.90),rgba(164,219,235,.72))!important;
  border:1px solid rgba(105,239,255,.92)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -8px 18px rgba(28,130,158,.10),0 0 10px rgba(0,213,255,.12)!important;
}
body:has(.start-page-v3) .field-with-icon .ui-icon,
body:has(.start-page-v3) .category-select-v3 .ui-icon{flex:0 0 42px!important;width:42px!important;height:42px!important}
body:has(.start-page-v3) .primary-v3{margin-top:2px!important;height:66px!important;min-height:66px!important;border-radius:16px!important}

/* CATEGORIES – glass cards, consistent height */
body:has(.start-page-v3) .categories-v3{
  height:auto!important;min-height:100%!important;padding:18px 18px 16px!important;border-radius:20px!important;
  background:linear-gradient(145deg,rgba(11,81,104,.64),rgba(3,34,49,.72))!important;
  backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 0 0 1px rgba(64,228,255,.50),0 0 26px rgba(0,215,255,.12),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -20px 35px rgba(0,0,0,.18)!important;
}
body:has(.start-page-v3) .section-head-v3{font-size:23px!important;padding:0 4px 12px!important;margin-bottom:10px!important}
body:has(.start-page-v3) .category-grid-v3{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px 10px!important}
body:has(.start-page-v3) .cat-v3{
  min-height:68px!important;height:68px!important;padding:7px 8px!important;display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;
  border-radius:12px!important;border:1px solid rgba(73,226,255,.52)!important;
  background:linear-gradient(145deg,rgba(22,119,145,.48),rgba(5,49,67,.56))!important;
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 8px rgba(0,210,255,.08)!important;
}
body:has(.start-page-v3) .cat-v3:hover{transform:translateY(-1px)!important;border-color:#8bf5ff!important;box-shadow:0 0 16px rgba(0,224,255,.28),inset 0 1px 0 rgba(255,255,255,.22)!important}
body:has(.start-page-v3) .cat-icon-v3,
body:has(.start-page-v3) .cat-icon-v3 img{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important}
body:has(.start-page-v3) .cat-v3 strong{font-size:12px!important;line-height:1.08!important;color:#f5fdff!important}
body:has(.start-page-v3) .cat-v3 small{font-size:9px!important;color:#82c9d7!important}

/* restore icon visibility in top controls */
body:has(.start-page-v3) .top-actions .guide-link::before,
body:has(.start-page-v3) .top-actions .fullscreen-btn::before,
body:has(.start-page-v3) .top-actions .start-music-toggle::before{display:inline-flex!important;align-items:center;justify-content:center!important;flex:0 0 auto!important}
body:has(.start-page-v3) .top-actions .guide-link:nth-child(1)::before{content:'▣';color:#8ff7ff;font-size:18px;text-shadow:0 0 8px #00dcff}
body:has(.start-page-v3) .top-actions .guide-link:nth-child(2)::before{content:'◎';color:#8ff7ff;font-size:20px;text-shadow:0 0 8px #00dcff}
body:has(.start-page-v3) .top-actions .guide-link:nth-child(3)::before{content:'♛';color:#ffd45a;font-size:19px;text-shadow:0 0 8px rgba(255,201,64,.5)}
body:has(.start-page-v3) .top-actions .start-music-toggle::before{content:'♫';color:#8ff7ff;font-size:20px;text-shadow:0 0 9px #00dcff}
body:has(.start-page-v3) .top-actions .fullscreen-btn::before{content:'⛶';color:#8ff7ff;font-size:18px;text-shadow:0 0 8px #00dcff}
body:has(.start-page-v3) .top-actions .guide-link::after,
body:has(.start-page-v3) .top-actions .fullscreen-btn::after{display:none!important}

@media(max-width:1200px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:minmax(0,1.55fr) minmax(410px,.9fr)!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:315px minmax(0,1fr)!important}
  body:has(.start-page-v3) .hero-banner-visual{width:315px!important;min-width:315px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:285px!important;height:270px!important}
  body:has(.start-page-v3) .hero-banner h2{font-size:34px!important}
}
@media(max-width:980px){
  body:has(.start-page-v3) .start-grid{grid-template-columns:1fr!important}
  body:has(.start-page-v3) .categories-v3{min-height:0!important}
}

/* V3.0 FINAL POLISH – header alignment, hero fit, glass depth and duell pulse */
body:has(.start-page-v3) .top{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(430px,1fr) auto!important;
  align-items:center!important;
  min-height:88px!important;
  padding:0 18px!important;
  overflow:hidden!important;
}
body:has(.start-page-v3) .top-actions{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin-right:210px!important;
  position:relative!important;
  z-index:20!important;
}
body:has(.start-page-v3) .top-actions .guide-link,
body:has(.start-page-v3) .top-actions .fullscreen-btn,
body:has(.start-page-v3) .top-actions .start-music-toggle{
  box-sizing:border-box!important;
  width:max-content!important;
  min-width:0!important;
  min-height:48px!important;
  height:48px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  white-space:nowrap!important;
  text-align:center!important;
  line-height:1.05!important;
}
body:has(.start-page-v3) .top-actions .guide-link span,
body:has(.start-page-v3) .top-actions .fullscreen-btn span,
body:has(.start-page-v3) .top-actions .start-music-toggle span{
  display:inline-block!important;
  text-align:center!important;
}
body:has(.start-page-v3) .top-actions .guide-link::before,
body:has(.start-page-v3) .top-actions .fullscreen-btn::before,
body:has(.start-page-v3) .top-actions .start-music-toggle::before{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
}
body:has(.start-page-v3) .brand-subtitle{
  position:absolute!important;
  right:18px!important;
  top:10px!important;
  z-index:25!important;
  width:185px!important;
  max-width:185px!important;
  text-align:right!important;
  white-space:normal!important;
  line-height:1.15!important;
  font-size:8px!important;
}

/* Hero: independent glass card, no overlap and enough room for the complete copy. */
body:has(.start-page-v3) .start-left-column{gap:14px!important}
body:has(.start-page-v3) .hero-banner{
  grid-template-columns:340px minmax(0,1fr)!important;
  height:300px!important;
  min-height:300px!important;
  max-height:300px!important;
  isolation:isolate!important;
  background:
    linear-gradient(135deg,rgba(33,160,190,.24),rgba(4,31,45,.70) 48%,rgba(5,71,91,.36)),
    radial-gradient(circle at 72% 24%,rgba(64,232,255,.20),transparent 40%),
    rgba(3,28,42,.58)!important;
  border:1px solid rgba(111,241,255,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 28px rgba(62,224,255,.10),
    0 0 0 1px rgba(0,188,230,.22),
    0 0 26px rgba(0,212,255,.18),
    0 18px 36px rgba(0,0,0,.28)!important;
}
body:has(.start-page-v3) .hero-banner-copy{
  padding:24px 26px!important;
  overflow:visible!important;
  min-width:0!important;
  align-self:center!important;
}
body:has(.start-page-v3) .hero-banner h2{
  font-size:32px!important;
  line-height:1.02!important;
  letter-spacing:-.02em!important;
  margin:7px 0 10px!important;
  white-space:normal!important;
  overflow:visible!important;
  max-width:none!important;
}
body:has(.start-page-v3) .hero-banner h2 strong{
  display:inline!important;
  white-space:nowrap!important;
}
body:has(.start-page-v3) .hero-banner h2 em{
  display:block!important;
  white-space:nowrap!important;
  font-size:.98em!important;
}
body:has(.start-page-v3) .hero-lead{max-width:480px!important;font-size:13px!important;line-height:1.35!important}
body:has(.start-page-v3) .hero-banner-visual{
  width:340px!important;min-width:340px!important;height:300px!important;
  align-items:flex-end!important;overflow:hidden!important;
}
body:has(.start-page-v3) .hero-banner-visual img{
  width:285px!important;height:285px!important;max-width:285px!important;max-height:285px!important;
  object-fit:cover!important;object-position:center!important;
}

/* Real glass: stronger translucent layers and reflective highlight. */
body:has(.start-page-v3) .hero-banner::before,
body:has(.start-page-v3) .start-panel-v3::before,
body:has(.start-page-v3) .categories-v3::before{
  content:""!important;
  pointer-events:none!important;
  position:absolute!important;
  inset:7px!important;
  border:1px solid rgba(192,250,255,.22)!important;
  border-radius:15px!important;
  background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 28%,transparent 72%,rgba(120,240,255,.05))!important;
}
body:has(.start-page-v3) .hero-banner::after,
body:has(.start-page-v3) .start-panel-v3::after,
body:has(.start-page-v3) .categories-v3::after{
  content:""!important;
  pointer-events:none!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background:linear-gradient(125deg,transparent 0 30%,rgba(159,247,255,.07) 30.2% 30.35%,transparent 30.6% 64%,rgba(159,247,255,.055) 64.2% 64.35%,transparent 64.7%)!important;
  opacity:1!important;
}
body:has(.start-page-v3) .hero-banner,
body:has(.start-page-v3) .start-panel-v3,
body:has(.start-page-v3) .categories-v3{position:relative!important;overflow:hidden!important}
body:has(.start-page-v3) .start-panel-v3,
body:has(.start-page-v3) .categories-v3{
  background:
    linear-gradient(135deg,rgba(41,146,170,.22),rgba(3,34,50,.68) 52%,rgba(10,87,108,.28)),
    rgba(5,35,50,.54)!important;
  border:1px solid rgba(112,241,255,.58)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 30px rgba(62,224,255,.08),0 0 24px rgba(0,210,255,.13),0 14px 30px rgba(0,0,0,.24)!important;
}

/* DUELL STARTEN – strong invitation pulse, red edge on press. */
body:has(.start-page-v3) .primary-v3{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border:2px solid #55efff!important;
  box-shadow:
    0 0 0 1px rgba(0,40,55,.9),
    0 0 12px rgba(0,232,255,.72),
    0 0 30px rgba(0,220,255,.50),
    0 0 58px rgba(0,220,255,.22),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -7px 15px rgba(0,79,108,.40)!important;
  animation:duellUltraPulse 1.35s ease-in-out infinite!important;
}
body:has(.start-page-v3) .primary-v3::after{
  content:""!important;
  position:absolute!important;
  top:-20%;bottom:-20%;left:-30%;width:24%!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),rgba(87,245,255,.55),transparent)!important;
  transform:skewX(-18deg)!important;
  filter:blur(2px)!important;
  animation:duellUltraSweep 2.2s ease-in-out infinite!important;
  pointer-events:none!important;
}
body:has(.start-page-v3) .primary-v3:active,
body:has(.start-page-v3) .primary-v3.fx-pressed{
  border-color:#ff3048!important;
  box-shadow:0 0 0 2px rgba(255,30,55,.42),0 0 18px rgba(255,30,55,.95),0 0 42px rgba(255,30,55,.68),inset 0 0 22px rgba(255,30,55,.24)!important;
  animation:duellRedPress .22s ease-out!important;
}
@keyframes duellUltraPulse{
  0%,100%{transform:scale(1);filter:brightness(1);}
  50%{transform:scale(1.018);filter:brightness(1.12);}
}
@keyframes duellUltraSweep{0%,35%{left:-30%;opacity:0}45%{opacity:1}70%{left:108%;opacity:1}80%,100%{left:108%;opacity:0}}
@keyframes duellRedPress{0%{transform:scale(1)}50%{transform:scale(.985)}100%{transform:scale(1)}}

@media(max-width:1200px){
  body:has(.start-page-v3) .top-actions{margin-right:190px!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:300px minmax(0,1fr)!important}
  body:has(.start-page-v3) .hero-banner-visual{width:300px!important;min-width:300px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:255px!important;height:275px!important}
  body:has(.start-page-v3) .hero-banner h2{font-size:28px!important}
}
@media(max-width:980px){
  body:has(.start-page-v3) .top{grid-template-columns:1fr!important}
  body:has(.start-page-v3) .top-actions{grid-column:1!important;grid-row:2!important;margin:8px 0 0!important;justify-self:start!important;flex-wrap:wrap!important}
  body:has(.start-page-v3) .brand-subtitle{display:none!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:1fr!important;height:270px!important;min-height:270px!important}
  body:has(.start-page-v3) .hero-banner-visual{position:absolute!important;right:0!important;bottom:0!important;width:220px!important;min-width:220px!important;height:220px!important;opacity:.62!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:210px!important;height:215px!important}
  body:has(.start-page-v3) .hero-banner-copy{position:relative!important;z-index:4!important;padding:20px!important}
}


/*
 * HANGMAN HIGHTECH VERSION
 * Entwickler : Sven Helle
 * Webseite   : https://sven-helle.de
 * Projekt    : Hangman Hightech Version
 * Datei      : app.css
 * Version    : V3.0
 * Stand      : 23.09.2026
 *
 * HEADER FINAL ALIGNMENT
 */
body:has(.start-page-v3) .top{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-height:88px!important;
  padding:14px 18px!important;
  padding-right:20px!important;
  gap:0!important;
}
body:has(.start-page-v3) .top > div:first-child{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:58%!important;
  position:relative!important;
  z-index:2!important;
}
body:has(.start-page-v3) .top-actions{
  position:absolute!important;
  right:20px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  margin:0!important;
  z-index:8!important;
}
body:has(.start-page-v3) .top-actions .guide-link,
body:has(.start-page-v3) .top-actions .start-music-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  flex:0 0 auto!important;
  min-height:44px!important;
  width:auto!important;
  min-width:0!important;
  padding:0 16px!important;
  margin:0!important;
  white-space:nowrap!important;
}
body:has(.start-page-v3) .top-actions .guide-link span,
body:has(.start-page-v3) .top-actions .start-music-toggle span{
  display:inline!important;
  text-align:center!important;
}
body:has(.start-page-v3) .top-actions .start-music-toggle{
  width:88px!important;
  padding:0 12px!important;
  font-size:10px!important;
}
body:has(.start-page-v3) .brand-subtitle{
  position:absolute!important;
  right:20px!important;
  top:8px!important;
  margin:0!important;
  max-width:none!important;
  white-space:nowrap!important;
  text-align:right!important;
  font-size:8px!important;
  line-height:1!important;
  z-index:9!important;
  pointer-events:none!important;
}
body:has(.start-page-v3) .top h1{
  white-space:nowrap!important;
  overflow:visible!important;
  font-size:27px!important;
}
body:has(.start-page-v3) .top .version-tag{
  position:relative!important;
  z-index:3!important;
}
@media(max-width:1180px){
  body:has(.start-page-v3) .top > div:first-child{max-width:44%!important}
  body:has(.start-page-v3) .top-actions{gap:6px!important;right:14px!important}
  body:has(.start-page-v3) .top-actions .guide-link{padding:0 11px!important;font-size:9px!important}
  body:has(.start-page-v3) .top-actions .start-music-toggle{width:74px!important}
}
@media(max-width:820px){
  body:has(.start-page-v3) .top{min-height:118px!important;align-items:flex-start!important}
  body:has(.start-page-v3) .top > div:first-child{max-width:100%!important}
  body:has(.start-page-v3) .top-actions{position:absolute!important;left:16px!important;right:16px!important;top:auto!important;bottom:12px!important;transform:none!important;justify-content:flex-end!important;overflow-x:auto!important}
  body:has(.start-page-v3) .brand-subtitle{display:none!important}
}

/* ONLINE / SPIELANLEITUNG: identical right-aligned glass navigation */
.glass-topbar{min-height:96px!important;padding:12px 18px!important;position:relative!important;display:flex!important;align-items:center!important;gap:0!important}
.glass-brand{min-width:0!important;max-width:52%!important;flex:0 1 auto!important;position:relative!important;z-index:2!important}
.glass-nav{position:absolute!important;right:18px!important;bottom:12px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;z-index:5!important}
.glass-nav-btn{min-width:0!important;width:auto!important;min-height:44px!important;padding:0 16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:nowrap!important}
.glass-icon{flex:0 0 22px!important}
.glass-credit{right:18px!important;top:9px!important;white-space:nowrap!important;text-align:right!important;max-width:none!important;font-size:8px!important;line-height:1!important}
@media(max-width:1100px){
  .glass-brand{max-width:42%!important}
  .glass-nav{gap:6px!important;right:12px!important}
  .glass-nav-btn{padding:0 11px!important;font-size:10px!important}
}
@media(max-width:820px){
  .glass-topbar{min-height:142px!important;align-items:flex-start!important}
  .glass-brand{max-width:100%!important}
  .glass-nav{left:14px!important;right:14px!important;bottom:12px!important;overflow-x:auto!important;justify-content:flex-end!important}
  .glass-credit{display:none!important}
}

/*
 * HANGMAN HIGHTECH VERSION
 * Entwickler : Sven Helle
 * Webseite   : https://sven-helle.de
 * Projekt    : Hangman Hightech Version
 * Datei      : app.css
 * Version    : V3.0
 * Stand      : 23.09.2026
 *
 * TABLET HEADER – Navigation centered in second row below title.
 */
@media (min-width:821px) and (max-width:1180px){
  body:has(.start-page-v3) .top{
    min-height:142px!important;
    height:auto!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto 44px!important;
    row-gap:6px!important;
    align-items:start!important;
    padding:12px 18px 10px!important;
    overflow:hidden!important;
  }
  body:has(.start-page-v3) .top > div:first-child{
    grid-column:1!important;
    grid-row:1!important;
    max-width:none!important;
    width:100%!important;
  }
  body:has(.start-page-v3) .top-actions{
    grid-column:1!important;
    grid-row:2!important;
    position:static!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    overflow:visible!important;
    transform:none!important;
  }
  body:has(.start-page-v3) .top-actions .guide-link,
  body:has(.start-page-v3) .top-actions .start-music-toggle{
    flex:0 0 auto!important;
    min-height:44px!important;
    height:44px!important;
    padding:0 12px!important;
    justify-content:center!important;
    text-align:center!important;
  }
  body:has(.start-page-v3) .brand-subtitle{
    position:absolute!important;
    right:18px!important;
    top:10px!important;
    margin:0!important;
    white-space:nowrap!important;
    font-size:7px!important;
    line-height:1!important;
  }
}

@media (min-width:821px) and (max-width:980px){
  body:has(.start-page-v3) .top{min-height:148px!important;grid-template-rows:auto 50px!important}
  body:has(.start-page-v3) .top > div:first-child h1{font-size:31px!important;line-height:1.05!important}
  body:has(.start-page-v3) .top-actions{gap:6px!important}
  body:has(.start-page-v3) .top-actions .guide-link,
  body:has(.start-page-v3) .top-actions .start-music-toggle{padding:0 10px!important;font-size:9px!important}
}

/* V3.0 TABLET HEADER – 2x2 navigation row, centered below title */
@media (min-width: 821px) and (max-width: 1180px){
  body:has(.start-page-v3) header.top{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    align-items:start !important;
    justify-items:center !important;
    row-gap:6px !important;
    min-height:0 !important;
    height:auto !important;
    padding:16px 18px 12px !important;
    position:relative !important;
  }
  body:has(.start-page-v3) header.top > div:first-child{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    justify-self:start !important;
  }
  body:has(.start-page-v3) .top-actions{
    grid-column:1 !important;
    grid-row:2 !important;
    position:static !important;
    width:min(680px,100%) !important;
    margin:6px auto 0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:48px !important;
    gap:6px !important;
    justify-self:center !important;
    justify-content:stretch !important;
    align-items:stretch !important;
    transform:none !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    top:auto !important;
    overflow:visible !important;
  }
  body:has(.start-page-v3) .top-actions .guide-link,
  body:has(.start-page-v3) .top-actions .start-music-toggle{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }
  body:has(.start-page-v3) .top-actions .guide-link span,
  body:has(.start-page-v3) .top-actions .start-music-toggle span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.05 !important;
  }
  body:has(.start-page-v3) .brand-subtitle{
    position:absolute !important;
    top:14px !important;
    right:18px !important;
    width:auto !important;
    max-width:none !important;
    white-space:nowrap !important;
    text-align:right !important;
    font-size:9px !important;
    line-height:1.1 !important;
    grid-column:auto !important;
    grid-row:auto !important;
    z-index:8 !important;
  }
}

@media (min-width: 821px) and (max-width: 900px){
  body:has(.start-page-v3) .top-actions{width:min(620px,100%) !important;}
  body:has(.start-page-v3) .top-actions .guide-link,
  body:has(.start-page-v3) .top-actions .start-music-toggle{font-size:9px !important;}
}

@media (max-width: 820px){
  body:has(.start-page-v3) header.top{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    row-gap:6px !important;
  }
  body:has(.start-page-v3) .top-actions{
    position:static !important;
    width:min(620px,100%) !important;
    margin:6px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    transform:none !important;
  }
  body:has(.start-page-v3) .top-actions .guide-link,
  body:has(.start-page-v3) .top-actions .start-music-toggle{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    justify-content:center !important;
  }
}

/* V3.0 FINAL HEADER VISIBILITY / TABLET NAVIGATION */
body:has(.start-page-v3) .brand-subtitle{right:10px!important;top:9px!important;max-width:calc(100% - 20px)!important;white-space:nowrap!important;overflow:visible!important;font-size:clamp(6px,0.62vw,9px)!important;letter-spacing:.04em!important;opacity:.82!important}
@media (min-width:821px) and (max-width:1180px){body:has(.start-page-v3) .brand-subtitle{right:10px!important;top:8px!important;font-size:7px!important;max-width:none!important}body:has(.start-page-v3) header.top{padding-top:14px!important;padding-bottom:12px!important}body:has(.start-page-v3) .top-actions{width:min(700px,calc(100vw - 44px))!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-top:6px!important}}
@media (max-width:820px){body:has(.start-page-v3) .brand-subtitle{display:none!important}}
.glass-topbar{position:relative!important;overflow:visible!important;background:linear-gradient(145deg,rgba(10,63,79,.72),rgba(3,25,38,.86))!important;border:1px solid rgba(91,235,255,.68)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -10px 30px rgba(0,180,220,.08),0 0 26px rgba(0,220,255,.14)!important;backdrop-filter:blur(18px) saturate(145%)!important}
.glass-topbar:after{content:"";position:absolute;left:2%;right:2%;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#24eaff 18%,#8af9ff 50%,#24eaff 82%,transparent);box-shadow:0 0 12px #20dff5;pointer-events:none}
.glass-credit{position:absolute!important;right:12px!important;top:9px!important;white-space:nowrap!important;max-width:none!important;overflow:visible!important;font-size:8px!important;line-height:1!important;color:#7faeb8!important;z-index:20!important}
.glass-nav{position:absolute!important;right:12px!important;bottom:12px!important;display:flex!important;align-items:stretch!important;justify-content:flex-end!important;gap:8px!important;z-index:10!important}
.glass-nav-btn{min-width:0!important;min-height:46px!important;height:46px!important;padding:0 14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;white-space:nowrap!important;text-align:center!important;border:1px solid rgba(107,239,255,.72)!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(24,104,126,.72),rgba(4,49,66,.88))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 12px rgba(0,220,255,.08)!important;color:#f4fdff!important}
@media (max-width:1200px){.glass-topbar{min-height:150px!important;align-items:flex-start!important;padding:12px 16px 10px!important}.glass-brand{width:100%!important;max-width:none!important}.glass-nav{left:50%!important;right:auto!important;bottom:10px!important;transform:translateX(-50%)!important;width:min(720px,calc(100% - 28px))!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}.glass-nav-btn{width:100%!important;height:46px!important;min-height:46px!important;padding:0 8px!important}.glass-credit{right:10px!important;top:8px!important;font-size:7px!important}}
@media (max-width:700px){.glass-topbar{min-height:190px!important}.glass-nav{width:calc(100% - 20px)!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.glass-credit{display:none!important}.glass-nav-btn{font-size:9px!important}}

/* V3.0 ONLINE DUELL – MUSIC BUTTON IN HEADER */
body:has(.online-wrap) .glass-topbar .glass-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
}
body:has(.online-wrap) .glass-topbar .glass-music-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:96px!important;
  min-height:44px!important;
  padding:0 14px!important;
  box-sizing:border-box!important;
}
body:has(.online-wrap) .glass-topbar .glass-music-toggle .glass-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
body:has(.online-wrap) .glass-topbar .glass-music-toggle span:last-child{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.05!important;
}
body:has(.online-wrap) .glass-topbar .glass-music-toggle.is-off{
  filter:saturate(.65)!important;
  opacity:.78!important;
}
@media (max-width:1000px){
  body:has(.online-wrap) .glass-topbar .glass-nav{
    flex-wrap:wrap!important;
    justify-content:center!important;
  }
  body:has(.online-wrap) .glass-topbar .glass-nav-btn{
    flex:1 1 calc(50% - 8px)!important;
    min-width:0!important;
  }
}

/* V3.0 ONLINE DUELL – TABLET HEADER: NAVIGATION IN ZWEITE ZEILE */
@media (min-width:701px) and (max-width:1200px){
  body:has(.online-wrap) .glass-topbar{
    min-height:150px!important;
    padding:12px 16px 10px!important;
  }
  body:has(.online-wrap) .glass-brand{
    width:100%!important;
    max-width:none!important;
  }
  body:has(.online-wrap) .glass-nav{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    bottom:10px!important;
    top:auto!important;
    transform:translateX(-50%)!important;
    width:min(720px,calc(100% - 28px))!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin:0!important;
    justify-content:initial!important;
    align-items:stretch!important;
    flex-wrap:initial!important;
  }
  body:has(.online-wrap) .glass-nav-btn,
  body:has(.online-wrap) .glass-topbar .glass-music-toggle{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
    flex:none!important;
    box-sizing:border-box!important;
    margin:0!important;
  }
  body:has(.online-wrap) .glass-credit{
    right:10px!important;
    top:8px!important;
    white-space:nowrap!important;
    max-width:none!important;
  }
}
@media (max-width:700px){
  body:has(.online-wrap) .glass-topbar{min-height:190px!important}
  body:has(.online-wrap) .glass-nav{
    width:calc(100% - 20px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body:has(.online-wrap) .glass-credit{display:none!important}
  body:has(.online-wrap) .glass-nav-btn,
  body:has(.online-wrap) .glass-topbar .glass-music-toggle{font-size:9px!important}
}


/* ==========================================================
   V3.0 STARTSEITE – MUSIKBUTTON NUR ALS ICON
   EIN = Lautsprecher
   AUS = Lautsprecher mit rotem Diagonalstrich
   ========================================================== */
body:has(.start-page-v3) .top-actions .start-music-toggle{
  position:relative!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding:0!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 42px!important;
  font-size:0!important;
  line-height:1!important;
}
body:has(.start-page-v3) .top-actions .start-music-toggle > span{
  display:grid!important;
  place-items:center!important;
  width:24px!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  font-size:20px!important;
  line-height:1!important;
  filter:none!important;
  position:relative!important;
}
body:has(.start-page-v3) .top-actions .start-music-toggle.is-off{
  opacity:1!important;
  background:linear-gradient(180deg,#3b1820,#2b0d14)!important;
  border-color:#ff4b5e!important;
  box-shadow:0 0 12px rgba(255,45,70,.28),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
body:has(.start-page-v3) .top-actions .start-music-toggle.is-off > span{
  color:#fff!important;
}
body:has(.start-page-v3) .top-actions .start-music-toggle.is-off > span::after{
  content:""!important;
  position:absolute!important;
  width:29px!important;
  height:3px!important;
  border-radius:3px!important;
  background:#ff273f!important;
  box-shadow:0 0 6px rgba(255,39,63,.9)!important;
  transform:rotate(-45deg)!important;
}
@media(max-width:820px){
  body:has(.start-page-v3) .top-actions .start-music-toggle{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    flex-basis:48px!important;
  }
}

/* ================================================================
   V29 – KOMPAKTE FUTURISTISCHE GAME-OBERFLÄCHE
   Layout nach dem abgestimmten Glass-Blue-Mockup vom 24.09.2026.
   Bewusst als letzter Override in app.css, damit ältere V24–V28
   Spieloberflächen nicht mehr dazwischenfunken.
   ================================================================ */
@media (min-width:1001px){
  body:has(.game) {
    background:
      radial-gradient(circle at 72% 8%,rgba(0,222,255,.12),transparent 28%),
      radial-gradient(circle at 18% 72%,rgba(0,120,255,.08),transparent 28%),
      linear-gradient(135deg,#020d16 0%,#041b28 48%,#020b13 100%) !important;
  }
  body:has(.game) .app{max-width:1680px;padding:12px 18px 18px!important}
  body:has(.game) .top{
    min-height:82px;padding:10px 16px!important;gap:14px;
    border:1px solid rgba(37,225,255,.72)!important;border-radius:18px;
    background:linear-gradient(180deg,rgba(5,47,65,.94),rgba(2,23,35,.94))!important;
    box-shadow:0 0 0 1px rgba(0,145,190,.32),0 0 25px rgba(0,213,255,.12),inset 0 1px rgba(255,255,255,.14)!important;
  }
  body:has(.game) .top .eyebrow{color:#7ff5ff!important}
  body:has(.game) .top h1{color:#f2fcff!important;font-size:28px!important}
  body:has(.game) .top h1 span{color:#9bc5d0!important}
  body:has(.game) .capital small{color:#719aa6!important}
  body:has(.game) .capital strong{color:#ffd44f!important}

  body:has(.game) .game{
    display:grid!important;
    grid-template-columns:minmax(0,1.48fr) minmax(230px,.52fr) minmax(390px,.92fr)!important;
    grid-template-rows:auto minmax(430px,1fr) auto!important;
    column-gap:12px!important;row-gap:12px!important;margin-top:12px!important;
    align-items:stretch!important;
  }
  body:has(.game) .scorebar{
    grid-column:1/-1!important;grid-row:1!important;
    display:grid!important;grid-template-columns:minmax(250px,1fr) minmax(270px,.62fr) minmax(250px,1fr)!important;
    gap:12px!important;align-items:stretch!important;
  }
  body:has(.game) .team{
    min-height:74px!important;padding:12px 18px!important;align-items:center!important;
    border:1px solid rgba(44,222,251,.66)!important;border-radius:15px!important;
    color:#e9fbff!important;background:linear-gradient(145deg,rgba(7,67,88,.86),rgba(2,28,43,.92))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 18px rgba(0,211,255,.07)!important;
  }
  body:has(.game) .team.active{border-color:#1deaff!important;box-shadow:0 0 20px rgba(0,224,255,.25),inset 0 1px rgba(255,255,255,.16)!important}
  body:has(.game) .team strong{color:#ffd44f!important;font-size:22px!important}
  body:has(.game) .round{
    min-width:0!important;padding:8px 12px!important;border:1px solid rgba(45,222,249,.66)!important;border-radius:15px;
    background:linear-gradient(145deg,rgba(9,69,88,.82),rgba(2,27,41,.94))!important;
    color:#86eefd!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 18px rgba(0,211,255,.07)!important;
  }
  body:has(.game) .round>span{font-size:18px!important;font-weight:1000!important;letter-spacing:.12em!important;color:#53edff!important}
  body:has(.game) .round>i{font-size:10px!important;margin:1px 0!important;color:#b5dbe3!important}
  body:has(.game) .round-category{
    width:100%!important;margin-top:4px!important;padding:6px 10px!important;border-radius:8px!important;
    border:1px solid rgba(63,219,244,.38)!important;background:linear-gradient(180deg,rgba(11,91,114,.62),rgba(3,43,61,.78))!important;
    color:#dffaff!important;font-size:10px!important;font-weight:900!important;letter-spacing:.04em!important;text-align:center!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body:has(.game) .main-board{
    grid-column:1!important;grid-row:2!important;min-height:0!important;height:auto!important;padding:18px 20px 14px!important;
    border:1px solid rgba(38,222,250,.62)!important;border-radius:20px!important;text-align:center!important;
    background:linear-gradient(145deg,rgba(5,43,60,.94),rgba(2,20,31,.97))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 0 38px rgba(0,214,255,.06),0 0 24px rgba(0,214,255,.10)!important;
    overflow:hidden!important;justify-content:flex-start!important;
  }
  body:has(.game) .main-board h2{font-size:18px!important;line-height:1.35!important;margin:2px auto 6px!important;max-width:900px!important;color:#eefcff!important}
  body:has(.game) .hangman-stage{max-width:100%!important;min-height:245px!important;margin:2px auto 0!important;display:grid!important;grid-template-columns:minmax(190px,.72fr) minmax(260px,1fr)!important;grid-template-rows:auto 1fr!important;column-gap:16px!important;align-items:center!important}
  body:has(.game) .hangman-card-head{grid-column:2!important;grid-row:1!important;justify-content:center!important;margin:0!important;color:#7fefff!important}
  body:has(.game) .hangman-art{grid-column:1!important;grid-row:1/3!important;height:225px!important;display:grid!important;place-items:center!important;margin:0!important}
  body:has(.game) .hangman-svg{height:215px!important;width:220px!important;filter:drop-shadow(0 0 9px rgba(0,220,255,.20))!important}
  body:has(.game) .hangman-caption{grid-column:2!important;grid-row:2!important;margin:4px 0 0!important;align-self:start!important;color:#77aebb!important;font-size:10px!important;text-align:left!important}
  body:has(.game) .word{margin:6px auto 4px!important;padding:8px 12px!important;width:100%!important;border:1px solid rgba(48,211,238,.30)!important;border-radius:11px!important;background:rgba(2,32,46,.60)!important;font-size:clamp(26px,2.35vw,38px)!important;letter-spacing:.14em!important;color:#f4fdff!important}
  body:has(.game) .used{font-size:9px!important;color:#6d9eaa!important}
  body:has(.game) .turn-msg{margin:4px 0 0!important;min-height:16px!important;color:#57eaff!important;font-size:10px!important}

  body:has(.game) .middle-side{
    grid-column:2!important;grid-row:2!important;min-width:0!important;padding:12px!important;
    border:1px solid rgba(42,221,248,.58)!important;border-radius:20px!important;
    background:linear-gradient(145deg,rgba(5,48,64,.92),rgba(2,23,35,.96))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 0 30px rgba(0,214,255,.05),0 0 20px rgba(0,214,255,.08)!important;
    display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:10px!important;
  }
  body:has(.game) .timer-card{padding:12px 8px 10px!important;border:1px solid rgba(62,216,238,.32)!important;border-radius:14px!important;background:rgba(4,42,57,.58)!important}
  body:has(.game) .timer-card small{color:#73dce9!important;font-size:9px!important}
  body:has(.game) .timer-card #timer{font-size:40px!important;color:#fff!important;text-shadow:0 0 12px rgba(0,219,255,.35)!important}
  body:has(.game) .timer-card #timer.danger{color:#ff5262!important}
  body:has(.game) .timer-card>span{color:#668f9c!important;font-size:8px!important}
  body:has(.game) .pause-btn{width:100%!important;margin-top:7px!important;min-height:35px!important;border:1px solid rgba(45,222,249,.58)!important;border-radius:8px!important;background:linear-gradient(180deg,#0b86a5,#063d56)!important;color:#e8fcff!important;font-weight:1000!important;font-size:10px!important;box-shadow:0 0 10px rgba(0,215,255,.12)!important}
  body:has(.game) .vowels{display:grid!important;grid-template-columns:1fr repeat(5,30px)!important;gap:4px!important;align-items:center!important;margin:0!important;padding:8px 2px!important;border-top:1px solid rgba(62,177,198,.20)!important;border-bottom:1px solid rgba(62,177,198,.20)!important}
  body:has(.game) .vowels span{font-size:7px!important;color:#78a5af!important;line-height:1.2!important;margin:0!important}
  body:has(.game) .vowels button{width:30px!important;height:30px!important;border-radius:7px!important;background:linear-gradient(180deg,#ffe8bb,#d99c3b)!important;color:#603b10!important;border:1px solid #e5ae4d!important;font-weight:1000!important}
  body:has(.game) .game-controls-v3{margin-top:auto!important;padding-top:4px!important}
  body:has(.game) .game-controls-title{margin:0 0 7px!important;color:#5feaff!important;font-size:10px!important;font-weight:1000!important;letter-spacing:.09em!important}
  body:has(.game) .game-controls-v3 form{margin:0 0 6px!important}
  body:has(.game) .game-control-btn-v3{width:100%!important;min-height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;text-decoration:none!important;border:1px solid rgba(45,222,249,.58)!important;border-radius:8px!important;background:linear-gradient(180deg,#0a7e9d,#053a52)!important;color:#e9fcff!important;font-size:9px!important;font-weight:1000!important;letter-spacing:.04em!important}
  body:has(.game) .game-control-btn-v3:hover{border-color:#7df4ff!important;box-shadow:0 0 13px rgba(0,220,255,.22)!important}
  body:has(.game) .game-control-btn-v3:disabled{opacity:.45!important;cursor:not-allowed!important}

  body:has(.game) .side{
    grid-column:3!important;grid-row:2/4!important;min-width:0!important;padding:14px!important;border-radius:20px!important;
    border:1px solid rgba(42,221,248,.62)!important;background:linear-gradient(145deg,rgba(5,48,64,.94),rgba(2,22,34,.97))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 0 35px rgba(0,214,255,.06),0 0 24px rgba(0,214,255,.10)!important;
    overflow:hidden!important;
  }
  body:has(.game) .wheel-wrap{height:330px!important;margin-top:2px!important}
  body:has(.game) .wheel{width:min(300px,92%)!important;height:min(300px,92%)!important;border:7px solid #bfeef5!important;box-shadow:0 0 0 4px rgba(40,121,143,.55),0 0 28px rgba(0,220,255,.22)!important}
  body:has(.game) .wheel-segment b{font-size:10px!important;transform:translate(-50%,-50%) translateY(-86px) rotate(var(--text-angle))!important}
  body:has(.game) .wheel-label{width:76px!important;height:76px!important;background:#061725!important;border:2px solid #b9f8ff!important;font-size:10px!important;box-shadow:0 0 16px rgba(0,220,255,.28)!important}
  body:has(.game) .spin{width:100%!important;min-height:38px!important;border:1px solid #d99a35!important;border-radius:9px!important;background:linear-gradient(180deg,#ffe0a0,#f0a73c)!important;color:#603b10!important;font-size:10px!important;box-shadow:0 0 14px rgba(247,183,51,.16)!important}
  body:has(.game) .game-actions-v3,
  body:has(.game) .actions.game-actions-v3{
    grid-column:1/3!important;grid-row:3!important;min-width:0!important;margin:0!important;padding:10px 12px!important;
    border:1px solid rgba(42,221,248,.58)!important;border-radius:18px!important;
    background:linear-gradient(145deg,rgba(5,48,64,.94),rgba(2,22,34,.97))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 20px rgba(0,214,255,.07)!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(190px,.42fr)!important;gap:9px!important;align-items:center!important;
  }
  body:has(.game) .game-actions-v3 .letter-row{display:grid!important;grid-template-columns:repeat(11,minmax(24px,1fr))!important;gap:4px!important}
  body:has(.game) .game-actions-v3 .letter{min-width:0!important;height:31px!important;padding:0!important;border:1px solid rgba(65,188,213,.42)!important;border-radius:6px!important;background:linear-gradient(180deg,#123b4c,#062434)!important;color:#d9f6fa!important;font-weight:900!important}
  body:has(.game) .game-actions-v3 .letter:not(:disabled):hover{border-color:#64efff!important;color:#64efff!important;box-shadow:0 0 9px rgba(0,220,255,.20)!important}
  body:has(.game) .game-actions-v3 .letter.used{opacity:.35!important}
  body:has(.game) .game-actions-v3 .letter-status{grid-column:1/-1!important;margin-top:2px!important;color:#6e9eaa!important;font-size:8px!important}
  body:has(.game) .game-actions-v3 .solve-popup-trigger{grid-column:2!important;grid-row:1!important;min-height:43px!important;border:1px solid rgba(49,220,247,.65)!important;border-radius:9px!important;background:linear-gradient(180deg,#0b9fc5,#07536f)!important;color:#edfdff!important;font-weight:1000!important;font-size:10px!important;box-shadow:0 0 15px rgba(0,214,255,.15)!important}
  body:has(.game) .game-actions-v3 .letters-form{grid-column:1!important;grid-row:1!important}
  body:has(.game) .game-actions-v3 .end-game-form,
  body:has(.game) .game-actions-v3 .online-leave-form{display:none!important}
}

@media (max-width:1000px){
  body:has(.game) .round-category{max-width:260px;margin-left:auto;margin-right:auto}
  body:has(.game) .game-controls-v3{margin-top:10px}
  body:has(.game) .game-actions-v3{margin-top:10px!important}
}

/* ================================================================
   V30 – VIEWPORT-FIT / HEIGHT-FIRST
   Die komplette Spieloberfläche wird zuerst an die verfügbare Höhe
   angepasst. Erst danach darf die Breite die einzelnen Spalten begrenzen.
   Ziel: kein vertikales Scrollen im laufenden Spiel.
   ================================================================ */
@media (min-width:1001px){
  body:has(.game){
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
  }
  body:has(.game) .app{
    width:100%!important;
    max-width:1680px!important;
    height:100vh!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:clamp(6px,1vh,12px) clamp(10px,1.2vw,18px) clamp(6px,1vh,12px)!important;
    display:flex!important;
    flex-direction:column!important;
  }

  /* Kopfbereich: Höhe statt fester Pixelwerte */
  body:has(.game) .top{
    flex:0 0 clamp(62px,11vh,88px)!important;
    min-height:0!important;
    height:clamp(62px,11vh,88px)!important;
    padding:clamp(6px,1vh,10px) clamp(10px,1vw,16px)!important;
    border-radius:clamp(12px,1.2vh,18px)!important;
    gap:10px!important;
  }
  body:has(.game) .top .eyebrow{font-size:clamp(7px,1.25vh,11px)!important}
  body:has(.game) .top h1{font-size:clamp(18px,3.1vh,28px)!important;line-height:1!important;margin:3px 0 0!important}
  body:has(.game) .top .capital small{font-size:clamp(7px,1.1vh,10px)!important}
  body:has(.game) .top .capital strong{font-size:clamp(15px,2.5vh,22px)!important}
  body:has(.game) .top-actions{gap:clamp(6px,.7vw,12px)!important}
  body:has(.game) .top-actions a,
  body:has(.game) .top-actions button{min-height:clamp(34px,6.2vh,58px)!important;padding:clamp(5px,.9vh,10px) clamp(12px,1.3vw,24px)!important;font-size:clamp(8px,1.45vh,13px)!important}

  /* Das eigentliche Spiel füllt exakt den Rest des Viewports. */
  body:has(.game) .game{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    margin-top:clamp(6px,.9vh,10px)!important;
    grid-template-rows:clamp(58px,10.5vh,78px) minmax(0,1fr) clamp(56px,8.2vh,70px)!important;
    row-gap:clamp(6px,.8vh,10px)!important;
    column-gap:clamp(7px,.75vw,12px)!important;
    align-items:stretch!important;
  }
  body:has(.game) .scorebar{
    min-height:0!important;
    height:100%!important;
    grid-template-columns:minmax(0,1fr) minmax(210px,.62fr) minmax(0,1fr)!important;
    gap:clamp(7px,.75vw,12px)!important;
  }
  body:has(.game) .team{
    min-height:0!important;
    height:100%!important;
    padding:clamp(6px,.9vh,10px) clamp(10px,1vw,16px)!important;
    border-radius:clamp(10px,1.2vh,15px)!important;
    font-size:clamp(11px,1.6vh,15px)!important;
  }
  body:has(.game) .team strong{font-size:clamp(15px,2.5vh,22px)!important}
  body:has(.game) .round{padding:clamp(4px,.8vh,8px) 10px!important;border-radius:clamp(10px,1.2vh,15px)!important}
  body:has(.game) .round>span{font-size:clamp(12px,2.1vh,18px)!important}
  body:has(.game) .round>i{font-size:clamp(7px,1.2vh,10px)!important;margin:0!important}
  body:has(.game) .round-category{font-size:clamp(7px,1.2vh,10px)!important;padding:clamp(4px,.65vh,6px) 8px!important;margin-top:clamp(2px,.5vh,4px)!important}

  /* Linkes Spielbrett: keine feste Mindesthöhe mehr. */
  body:has(.game) .main-board{
    min-height:0!important;
    height:100%!important;
    padding:clamp(8px,1.3vh,14px) clamp(10px,1.2vw,20px) clamp(7px,1vh,12px)!important;
    border-radius:clamp(12px,1.5vh,20px)!important;
  }
  body:has(.game) .main-board h2{
    flex:0 0 auto!important;
    font-size:clamp(11px,2.1vh,18px)!important;
    line-height:1.2!important;
    margin:0 auto clamp(2px,.5vh,6px)!important;
    max-width:90%!important;
  }
  body:has(.game) .hangman-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    margin:0 auto!important;
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:minmax(105px,.72fr) minmax(150px,1fr)!important;
    column-gap:clamp(7px,1vw,16px)!important;
  }
  body:has(.game) .hangman-art{height:100%!important;min-height:0!important}
  body:has(.game) .hangman-svg{width:min(100%,220px)!important;height:min(100%,215px)!important}
  body:has(.game) .hangman-card-head{font-size:clamp(8px,1.2vh,10px)!important}
  body:has(.game) .hangman-caption{font-size:clamp(7px,1.1vh,10px)!important}
  body:has(.game) .word{
    flex:0 0 auto!important;
    font-size:clamp(17px,3.7vh,38px)!important;
    line-height:1.05!important;
    padding:clamp(4px,.8vh,8px) 8px!important;
    margin:clamp(2px,.45vh,6px) auto!important;
  }
  body:has(.game) .used{font-size:clamp(7px,1.05vh,9px)!important}
  body:has(.game) .turn-msg{font-size:clamp(7px,1.1vh,10px)!important;min-height:clamp(10px,1.8vh,16px)!important;margin:2px 0 0!important}

  /* Mittlere Spalte: Inhalt darf nicht mehr durch feste Höhen auseinandergezogen werden. */
  body:has(.game) .middle-side{
    min-height:0!important;
    height:100%!important;
    padding:clamp(7px,.9vh,12px)!important;
    border-radius:clamp(12px,1.5vh,20px)!important;
    gap:clamp(5px,.8vh,10px)!important;
    overflow:hidden!important;
  }
  body:has(.game) .timer-card{padding:clamp(7px,.9vh,12px) 7px clamp(6px,.8vh,10px)!important;border-radius:clamp(9px,1.2vh,14px)!important}
  body:has(.game) .timer-card small{font-size:clamp(7px,1.1vh,9px)!important}
  body:has(.game) .timer-card #timer{font-size:clamp(24px,4.7vh,40px)!important;margin:3px!important}
  body:has(.game) .timer-card>span{font-size:clamp(6px,1vh,8px)!important}
  body:has(.game) .pause-btn{min-height:clamp(27px,4.1vh,35px)!important;margin-top:clamp(3px,.7vh,7px)!important;font-size:clamp(7px,1.15vh,10px)!important}
  body:has(.game) .vowels{grid-template-columns:1fr repeat(5,clamp(20px,3.4vh,30px))!important;gap:3px!important;padding:clamp(4px,.65vh,8px) 2px!important}
  body:has(.game) .vowels span{font-size:clamp(6px,.95vh,7px)!important}
  body:has(.game) .vowels button{width:clamp(20px,3.4vh,30px)!important;height:clamp(20px,3.4vh,30px)!important;font-size:clamp(8px,1.1vh,10px)!important}
  body:has(.game) .game-controls-title{font-size:clamp(7px,1.15vh,10px)!important;margin-bottom:clamp(3px,.55vh,7px)!important}
  body:has(.game) .game-controls-v3 form{margin-bottom:clamp(3px,.55vh,6px)!important}
  body:has(.game) .game-control-btn-v3{min-height:clamp(27px,4.1vh,34px)!important;font-size:clamp(7px,1.1vh,9px)!important}

  /* Rechtes Rad: Durchmesser richtet sich zuerst nach der Höhe des verfügbaren Bereichs. */
  body:has(.game) .side{
    min-height:0!important;
    height:100%!important;
    padding:clamp(7px,.9vh,14px)!important;
    border-radius:clamp(12px,1.5vh,20px)!important;
    overflow:hidden!important;
  }
  body:has(.game) .wheel-wrap{
    height:clamp(210px,38vh,330px)!important;
    min-height:0!important;
    margin-top:0!important;
  }
  body:has(.game) .wheel{
    /* Das Glücksrad bleibt IMMER geometrisch rund.
       Die verfügbare Größe wird über die Breite bestimmt; die Höhe
       wird ausschließlich über aspect-ratio: 1 / 1 daraus abgeleitet. */
    width:min(300px,82%,calc(38vh - 20px))!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    max-width:100%!important;
    max-height:none!important;
    flex:none!important;
    border-width:clamp(4px,.75vh,7px)!important;
  }
  body:has(.game) .wheel-segment b{
    font-size:clamp(7px,1.25vh,10px)!important;
    transform:translate(-50%,-50%) translateY(clamp(-86px,-10.5vh,-55px)) rotate(var(--text-angle))!important;
  }
  body:has(.game) .wheel-label{
    width:clamp(50px,8.5vh,76px)!important;
    height:clamp(50px,8.5vh,76px)!important;
    font-size:clamp(7px,1.25vh,10px)!important;
  }
  body:has(.game) .spin{min-height:clamp(28px,4.5vh,38px)!important;font-size:clamp(7px,1.2vh,10px)!important;padding:5px!important}

  /* Buchstabenleiste ebenfalls höhengeführt. */
  body:has(.game) .game-actions-v3,
  body:has(.game) .actions.game-actions-v3{
    height:100%!important;
    min-height:0!important;
    padding:clamp(5px,.7vh,10px) clamp(7px,.8vw,12px)!important;
    border-radius:clamp(10px,1.3vh,18px)!important;
    gap:clamp(5px,.6vw,9px)!important;
  }
  body:has(.game) .game-actions-v3 .letter-row{grid-template-columns:repeat(11,minmax(16px,1fr))!important;gap:clamp(2px,.35vh,4px)!important}
  body:has(.game) .game-actions-v3 .letter{height:clamp(22px,3.7vh,31px)!important;font-size:clamp(8px,1.3vh,11px)!important}
  body:has(.game) .game-actions-v3 .solve-popup-trigger{min-height:clamp(28px,4.8vh,43px)!important;font-size:clamp(8px,1.3vh,10px)!important}
}

/* Kleine/hochformatige Fenster: zuerst Höhe nutzen, danach die Breite reduzieren. */
@media (max-width:1000px){
  body:has(.game){min-height:100vh!important}
  body:has(.game) .app{padding:6px 8px!important}
  body:has(.game) .top{padding:7px 10px!important}
  body:has(.game) .game{margin-top:6px!important}
}


/* Lesbarkeit: Zugmeldung und benutzte Buchstaben deutlich hervorheben.
   Die Fachinfo bleibt als reines Info-Symbol oben rechts im Spielfeld. */
body:has(.game) .main-board{position:relative!important}
body:has(.game) .used{font-size:clamp(11px,1.7vh,15px)!important;line-height:1.25!important;margin-top:6px!important;letter-spacing:.06em!important}
body:has(.game) .turn-msg{font-size:clamp(12px,1.9vh,16px)!important;line-height:1.25!important;min-height:clamp(16px,2.5vh,24px)!important;margin:7px 0 0!important;font-weight:900!important}
body:has(.game) .word-info-trigger{position:absolute!important;top:10px!important;right:12px!important;margin:0!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:50%!important;font-size:18px!important;font-weight:1000!important;line-height:1!important;letter-spacing:0!important;z-index:20!important}

/* ================================================================
   V31 – EXAKTER VIEWPORT-RAND
   Im laufenden Spiel bleiben oben und unten immer 20px Abstand
   zum Bildschirmrand. Die vorhandene Height-First-Logik passt
   den Spielbereich innerhalb dieses Rahmens weiter an.
   ================================================================ */
@media (min-width:1px){
  body:has(.game) .app{
    box-sizing:border-box!important;
    padding-top:20px!important;
    padding-bottom:20px!important;
  }
}

/* ================================================================
   V32 – SCREEN SAFE AREA
   Bei Windows/Browser-Vollbild bleibt unterhalb der Spieloberfläche
   zusätzlicher Sicherheitsabstand für die Taskleiste. Oben bleiben
   weiterhin 20px. Die Height-First-Skalierung arbeitet innerhalb
   dieser tatsächlich verfügbaren Fläche.
   ================================================================ */
@media (min-width:1001px){
  body:has(.game){
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
  }
  body:has(.game) .app{
    box-sizing:border-box!important;
    height:calc(100vh - 80px)!important;
    min-height:0!important;
    max-height:calc(100vh - 80px)!important;
    padding-top:20px!important;
    padding-bottom:60px!important;
    overflow:hidden!important;
  }
}


/* ================================================================
   COMPUTERGEGNER – Eindeutiger visueller Auswahlzustand
   ================================================================ */
body:has(.start-page-v3) .computer-select-display-v3{
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .14s ease,filter .18s ease!important;
}
body:has(.start-page-v3) .computer-select-display-v3.is-selected{
  background:linear-gradient(180deg,#0fcae6,#087f9f)!important;
  border-color:#58f2ff!important;
  box-shadow:0 0 0 1px rgba(87,240,255,.85),0 0 14px rgba(0,224,255,.48),inset 0 2px 5px rgba(255,255,255,.25),inset 0 -5px 10px rgba(0,44,63,.28)!important;
  color:#ffffff!important;
}
body:has(.start-page-v3) .computer-select-display-v3.is-selected .computer-toggle-state{
  color:#ffffff!important;
  font-weight:1000!important;
  text-shadow:0 0 8px rgba(0,247,255,.42);
}
body:has(.start-page-v3) .computer-select-display-v3.is-selected .ui-icon{
  border-color:rgba(255,255,255,.7)!important;
  background:rgba(255,255,255,.12)!important;
  box-shadow:0 0 10px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.5)!important;
}
body:has(.start-page-v3) .computer-select-display-v3.is-selected > b{
  color:#ffffff!important;
  transform:rotate(180deg);
}
body:has(.start-page-v3) .computer-select-display-v3:not(.is-selected) .computer-toggle-state{
  color:#244b5b!important;
}

/* ================================================================
   V33 – VIEWPORT FIT REPAIR
   Kein künstliches "Safe Area"-Schrumpfen mehr. Die Spielfläche
   bleibt innerhalb des Viewports und wird bei kleineren Desktop-
   Breiten kompakt verteilt. Das Glücksrad bleibt immer 1:1 rund.
   ================================================================ */
@media (min-width:1001px){
  body:has(.game){
    overflow:hidden!important;
    height:100vh!important;
    min-height:0!important;
  }
  body:has(.game) .app{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:1680px!important;
    height:100vh!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:20px 18px 20px!important;
    overflow:hidden!important;
  }
}

/* Bis ca. 1400 CSS-Pixel: alle drei Spielbereiche bleiben sichtbar.
   Keine Mindestbreiten, die den rechten Bereich aus dem Viewport drücken. */
@media (min-width:1001px) and (max-width:1400px){
  body:has(.game) .app{padding-left:10px!important;padding-right:10px!important}
  body:has(.game) .top{
    min-width:0!important;
    min-height:68px!important;
    height:auto!important;
    padding:7px 10px!important;
    gap:8px!important;
  }
  body:has(.game) .top > div:first-child{min-width:0!important;flex:1 1 auto!important}
  body:has(.game) .top h1{font-size:clamp(19px,2.5vw,28px)!important;white-space:nowrap!important}
  body:has(.game) .top .eyebrow{font-size:clamp(6px,.8vw,10px)!important}
  body:has(.game) .top-actions{min-width:0!important;flex:0 1 auto!important;gap:6px!important}
  body:has(.game) .top-actions a,
  body:has(.game) .top-actions button{
    min-width:0!important;
    min-height:42px!important;
    height:42px!important;
    padding:5px 12px!important;
    font-size:clamp(8px,1vw,12px)!important;
    white-space:nowrap!important;
  }

  body:has(.game) .game{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1.35fr) minmax(145px,.42fr) minmax(250px,.78fr)!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    column-gap:8px!important;
    row-gap:8px!important;
    margin-top:8px!important;
  }
  body:has(.game) .scorebar{
    grid-template-columns:minmax(0,1fr) minmax(145px,.55fr) minmax(0,1fr)!important;
    gap:8px!important;
  }
  body:has(.game) .team{
    min-width:0!important;
    min-height:58px!important;
    padding:8px 12px!important;
    font-size:clamp(10px,1.15vw,14px)!important;
  }
  body:has(.game) .team strong{font-size:clamp(14px,1.8vw,20px)!important}
  body:has(.game) .round{min-width:0!important;padding:5px 7px!important}
  body:has(.game) .round>span{font-size:clamp(11px,1.55vw,17px)!important;white-space:nowrap!important}
  body:has(.game) .round-category{font-size:clamp(6px,.75vw,10px)!important;padding:5px 6px!important}

  body:has(.game) .main-board{
    min-width:0!important;
    padding:10px 12px 9px!important;
  }
  body:has(.game) .main-board h2{font-size:clamp(10px,1.45vw,17px)!important;margin:0 auto 3px!important}
  body:has(.game) .hangman-stage{
    min-width:0!important;
    min-height:0!important;
    grid-template-columns:minmax(75px,.55fr) minmax(0,1fr)!important;
    column-gap:7px!important;
    margin:0 auto!important;
  }
  body:has(.game) .hangman-art{height:clamp(135px,25vh,205px)!important}
  body:has(.game) .hangman-svg{width:min(100%,150px)!important;height:min(100%,175px)!important}
  body:has(.game) .hangman-card-head{font-size:clamp(7px,.75vw,10px)!important}
  body:has(.game) .hangman-caption{font-size:clamp(6px,.7vw,9px)!important}
  body:has(.game) .word{font-size:clamp(15px,2.2vw,32px)!important;padding:5px 7px!important;margin:3px auto!important}
  body:has(.game) .used{font-size:clamp(9px,1.1vw,14px)!important;margin-top:3px!important}
  body:has(.game) .turn-msg{font-size:clamp(10px,1.35vw,15px)!important;margin:4px 0 0!important}

  body:has(.game) .middle-side{
    min-width:0!important;
    padding:8px!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  body:has(.game) .timer-card{padding:7px 5px!important}
  body:has(.game) .timer-card #timer{font-size:clamp(22px,3.2vw,34px)!important}
  body:has(.game) .timer-card small{font-size:clamp(6px,.7vw,9px)!important}
  body:has(.game) .timer-card>span{font-size:6px!important}
  body:has(.game) .pause-btn{min-height:29px!important;font-size:8px!important;margin-top:4px!important}
  body:has(.game) .vowels{grid-template-columns:1fr repeat(5,clamp(18px,2.3vw,26px))!important;gap:2px!important;padding:5px 0!important}
  body:has(.game) .vowels button{width:clamp(18px,2.3vw,26px)!important;height:clamp(18px,2.3vw,26px)!important;font-size:8px!important}
  body:has(.game) .vowels span{font-size:6px!important}
  body:has(.game) .game-controls-title{font-size:8px!important;margin-bottom:4px!important}
  body:has(.game) .game-control-btn-v3{min-height:29px!important;font-size:8px!important;padding:4px!important}

  body:has(.game) .side{
    min-width:0!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  body:has(.game) .wheel-wrap{height:clamp(190px,30vh,275px)!important;margin-top:0!important}
  body:has(.game) .wheel{
    width:min(100%,275px,30vh)!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    max-height:none!important;
  }
  body:has(.game) .wheel-segment b{font-size:clamp(7px,.8vw,10px)!important}
  body:has(.game) .wheel-label{width:clamp(50px,5.5vw,68px)!important;height:clamp(50px,5.5vw,68px)!important;font-size:8px!important}
  body:has(.game) .spin{min-height:32px!important;padding:5px!important;font-size:8px!important}

  /* Tatsächliche HTML-Klasse ist .actions, nicht .game-actions-v3. */
  body:has(.game) .actions{
    min-width:0!important;
    grid-column:1/3!important;
    grid-row:3!important;
    margin:0!important;
    padding:6px 8px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(145px,.42fr)!important;
    gap:7px!important;
    align-items:center!important;
  }
  body:has(.game) .actions .letters-form{min-width:0!important}
  body:has(.game) .actions .letter-row{grid-template-columns:repeat(11,minmax(14px,1fr))!important;gap:3px!important}
  body:has(.game) .actions .letter{height:clamp(20px,3.1vh,29px)!important;font-size:9px!important;padding:0!important}
  body:has(.game) .actions .letter-status{font-size:7px!important}
  body:has(.game) .actions .solve-popup-trigger{min-height:34px!important;font-size:8px!important}
}

/* V-Notice-Fix: Info-Schaltfläche innerhalb der Erfolgsmaske halten.
   .word-info-trigger ist im Spielfeld absichtlich als rundes Info-Symbol positioniert;
   innerhalb der Erfolgsmaske darf diese Positionierung NICHT greifen. */
.game-notice.success{
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:12px!important;
  width:min(760px,calc(100vw - 40px))!important;
  max-width:760px!important;
  padding:20px 24px 18px!important;
  box-sizing:border-box!important;
}
.game-notice.success .game-notice-text{
  width:100%!important;
  flex:0 0 auto!important;
  line-height:1.4!important;
  text-align:center!important;
  font-size:clamp(14px,1.5vw,19px)!important;
  overflow-wrap:anywhere!important;
}
.game-notice.success .game-notice-actions{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin:0!important;
}
.game-notice.success .notice-info-btn.word-info-trigger{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:38px!important;
  padding:8px 14px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border-radius:9px!important;
  font-size:clamp(10px,1vw,13px)!important;
  line-height:1.1!important;
  letter-spacing:.06em!important;
  white-space:nowrap!important;
  z-index:2!important;
}
.game-notice.success .game-notice-ok{
  min-height:38px!important;
  margin:0!important;
  padding:8px 18px!important;
  font-size:clamp(10px,1vw,13px)!important;
}
@media(max-width:600px){
  .game-notice.success{width:calc(100vw - 24px)!important;padding:16px 14px!important}
  .game-notice.success .game-notice-actions{flex-direction:column!important}
  .game-notice.success .notice-info-btn.word-info-trigger,
  .game-notice.success .game-notice-ok{width:100%!important}
}

/* ================================================================
   V34 – GAME HEADER / KOMPAKTE GLASS-BLUE NAVIGATION
   Die Navigation bleibt vollständig innerhalb des Headers.
   Keine Überlappung mit Titel oder Copyright.
   ================================================================ */
@media (min-width:1001px){
  body:has(.game) .top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(190px,.42fr)!important;
    align-items:center!important;
    column-gap:clamp(10px,1vw,18px)!important;
    min-width:0!important;
  }

  body:has(.game) .top > div:first-child{
    min-width:0!important;
    overflow:hidden!important;
  }

  body:has(.game) .top .eyebrow{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body:has(.game) .top h1{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:clamp(19px,2.6vh,28px)!important;
  }

  /* Neue dunkle Glass-Blue-Navigation statt der alten hellen Buttons. */
  body:has(.game) .top-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(5px,.55vw,9px)!important;
    min-width:0!important;
    width:auto!important;
    flex:none!important;
  }

  body:has(.game) .top-actions .guide-link,
  body:has(.game) .top-actions .fullscreen-btn{
    box-sizing:border-box!important;
    min-width:0!important;
    width:auto!important;
    height:clamp(36px,5.4vh,48px)!important;
    min-height:0!important;
    padding:0 clamp(12px,1vw,18px)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(44,220,247,.58)!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,rgba(17,92,116,.96),rgba(4,43,61,.98))!important;
    color:#dffaff!important;
    box-shadow:inset 0 1px rgba(255,255,255,.14),0 0 12px rgba(0,214,255,.09)!important;
    font-size:clamp(8px,1.25vh,11px)!important;
    line-height:1.05!important;
    letter-spacing:.07em!important;
    font-weight:1000!important;
    white-space:nowrap!important;
    text-decoration:none!important;
  }

  body:has(.game) .top-actions .guide-link:hover,
  body:has(.game) .top-actions .fullscreen-btn:hover{
    border-color:#72f4ff!important;
    color:#ffffff!important;
    background:linear-gradient(180deg,rgba(18,125,153,.98),rgba(5,57,78,.99))!important;
    box-shadow:0 0 14px rgba(0,225,255,.24),inset 0 1px rgba(255,255,255,.18)!important;
    transform:translateY(-1px)!important;
  }

  /* Copyright/Branding rechts wieder deutlich lesbar. */
  body:has(.game) .top .brand-subtitle{
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:right!important;
    color:#91d8e7!important;
    opacity:1!important;
    font-size:clamp(8px,1.25vh,11px)!important;
    line-height:1.25!important;
    letter-spacing:.08em!important;
    text-shadow:0 0 7px rgba(0,210,240,.12)!important;
  }
  body:has(.game) .top .brand-subtitle span{color:#c0edf5!important;opacity:1!important}
}

/* Bei mittleren Desktop-Breiten werden die Buttons zusätzlich verkleinert,
   bevor Titel oder Copyright aus dem Header gedrückt werden. */
@media (min-width:1001px) and (max-width:1250px){
  body:has(.game) .top{grid-template-columns:minmax(0,1fr) auto 150px!important;column-gap:7px!important}
  body:has(.game) .top-actions{gap:4px!important}
  body:has(.game) .top-actions .guide-link,
  body:has(.game) .top-actions .fullscreen-btn{height:34px!important;padding:0 8px!important;font-size:8px!important;letter-spacing:.045em!important}
  body:has(.game) .top .brand-subtitle{font-size:7px!important;letter-spacing:.04em!important}
}

@media (max-width:1000px){
  body:has(.game) .top-actions .guide-link,
  body:has(.game) .top-actions .fullscreen-btn{
    background:linear-gradient(180deg,rgba(17,92,116,.96),rgba(4,43,61,.98))!important;
    border-color:rgba(44,220,247,.58)!important;
    color:#dffaff!important;
  }
  body:has(.game) .top .brand-subtitle{color:#91d8e7!important;opacity:1!important}
}

/* ================================================================
   3D HANGMAN UPGRADE – vector based, responsive and mistake-aware
   ================================================================ */
body:has(.game) .hangman-svg{overflow:visible;filter:drop-shadow(0 12px 18px rgba(0,0,0,.42))}
body:has(.game) .gallows-3d{stroke-width:11}
body:has(.game) .gallows-3d .gallows-extrude{stroke:#02090d;stroke-width:15;opacity:.9;filter:blur(.2px)}
body:has(.game) .gallows-3d .gallows-surface{stroke:url(#hgMetal);stroke-width:10;filter:url(#hgSoftGlow)}
body:has(.game) .gallows-3d .gallows-highlight{stroke:#d7fbff;stroke-width:2;opacity:.48}
body:has(.game) .gallows-details{filter:url(#hgSoftGlow)}
body:has(.game) .person-3d{overflow:visible}
body:has(.game) .person-3d .part3d{opacity:.08;transition:opacity .28s ease,filter .28s ease}
body:has(.game) .person-3d .part3d .extrude{stroke:#020a0f;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;fill:#020a0f;transform:translate(7px,7px);opacity:.9}
body:has(.game) .person-3d .part3d .head{fill:url(#hgHead);stroke:url(#hgCyan);stroke-width:6;filter:url(#hgGlow)}
body:has(.game) .person-3d .part3d .body,
body:has(.game) .person-3d .part3d .arm-left,
body:has(.game) .person-3d .part3d .arm-right,
body:has(.game) .person-3d .part3d .leg-left,
body:has(.game) .person-3d .part3d .leg-right{fill:none;stroke:url(#hgCyan);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:url(#hgSoftGlow)}
body:has(.game) .person-3d .part3d:after{content:""}
body:has(.game) .hangman-stage[data-mistakes="1"] .part3d[data-part="1"],
body:has(.game) .hangman-stage[data-mistakes="2"] .part3d[data-part="1"],
body:has(.game) .hangman-stage[data-mistakes="2"] .part3d[data-part="2"],
body:has(.game) .hangman-stage[data-mistakes="3"] .part3d[data-part="1"],
body:has(.game) .hangman-stage[data-mistakes="3"] .part3d[data-part="2"],
body:has(.game) .hangman-stage[data-mistakes="3"] .part3d[data-part="3"],
body:has(.game) .hangman-stage[data-mistakes="4"] .part3d[data-part="1"],
body:has(.game) .hangman-stage[data-mistakes="4"] .part3d[data-part="2"],
body:has(.game) .hangman-stage[data-mistakes="4"] .part3d[data-part="3"],
body:has(.game) .hangman-stage[data-mistakes="4"] .part3d[data-part="4"],
body:has(.game) .hangman-stage[data-mistakes="5"] .part3d[data-part="1"],
body:has(.game) .hangman-stage[data-mistakes="5"] .part3d[data-part="2"],
body:has(.game) .hangman-stage[data-mistakes="5"] .part3d[data-part="3"],
body:has(.game) .hangman-stage[data-mistakes="5"] .part3d[data-part="4"],
body:has(.game) .hangman-stage[data-mistakes="5"] .part3d[data-part="5"],
body:has(.game) .hangman-stage[data-mistakes="6"] .part3d{opacity:1;filter:drop-shadow(0 0 7px rgba(34,230,248,.32))}
body:has(.game) .hangman-stage[data-mistakes="6"] .person-3d .part3d .head,
body:has(.game) .hangman-stage[data-mistakes="6"] .person-3d .part3d .body,
body:has(.game) .hangman-stage[data-mistakes="6"] .person-3d .part3d .arm-left,
body:has(.game) .hangman-stage[data-mistakes="6"] .person-3d .part3d .arm-right,
body:has(.game) .hangman-stage[data-mistakes="6"] .person-3d .part3d .leg-left,
body:has(.game) .hangman-stage[data-mistakes="6"] .person-3d .part3d .leg-right{stroke:#ff5c6e;filter:drop-shadow(0 0 8px rgba(255,82,103,.52))}
body:has(.game) .hud-rings{animation:hgPulse 2.8s ease-in-out infinite}
@keyframes hgPulse{0%,100%{opacity:.16;transform:scale(.98)}50%{opacity:.34;transform:scale(1.02)}}
@media (max-width:700px){body:has(.game) .hud-rings{display:none}body:has(.game) .gallows-3d .gallows-surface{stroke-width:8}body:has(.game) .person-3d .part3d .body,body:has(.game) .person-3d .part3d .arm-left,body:has(.game) .person-3d .part3d .arm-right,body:has(.game) .person-3d .part3d .leg-left,body:has(.game) .person-3d .part3d .leg-right{stroke-width:7}}

/* ================================================================
   V35 – STABILER FINALER GAME-VIEWPORT + 3D-HANGMAN
   Dieser Block hat bewusst Priorität gegenüber älteren V30–V34-Regeln.
   ================================================================ */
@media (min-width:1001px){
  body:has(.game){
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body:has(.game) .app{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:1680px!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:12px 14px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  body:has(.game) .top{
    flex:0 0 clamp(62px,10dvh,82px)!important;
    height:clamp(62px,10dvh,82px)!important;
    min-height:62px!important;
    padding:7px 12px!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  body:has(.game) .top > div:first-child{min-width:0!important;overflow:hidden!important}
  body:has(.game) .top h1{font-size:clamp(18px,3.0dvh,28px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body:has(.game) .top .eyebrow{font-size:clamp(7px,1.15dvh,11px)!important;white-space:nowrap!important}
  body:has(.game) .top-actions{
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:7px!important;flex:0 1 auto!important;min-width:0!important;white-space:nowrap!important;
  }
  body:has(.game) .top-actions .guide-link{
    box-sizing:border-box!important;
    height:clamp(34px,5.2dvh,46px)!important;
    min-height:34px!important;
    padding:0 clamp(10px,1vw,18px)!important;
    border:1px solid rgba(47,224,249,.72)!important;
    border-radius:11px!important;
    background:linear-gradient(180deg,rgba(17,101,128,.98),rgba(4,42,60,.99))!important;
    color:#e6fbff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -8px 16px rgba(0,20,32,.22),0 0 14px rgba(0,205,240,.16)!important;
    font-size:clamp(8px,1.25dvh,11px)!important;
    font-weight:1000!important;letter-spacing:.065em!important;line-height:1!important;
    white-space:nowrap!important;text-decoration:none!important;
    overflow:hidden!important;
  }
  body:has(.game) .top-actions .guide-link span{display:block!important;white-space:nowrap!important}
  body:has(.game) .top-actions .guide-link:hover{
    background:linear-gradient(180deg,rgba(24,135,163,.99),rgba(5,59,80,.99))!important;
    border-color:#72f5ff!important;color:#fff!important;
    box-shadow:0 0 18px rgba(0,225,255,.28),inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
  body:has(.game) .top .brand-subtitle{
    min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;
    text-align:right!important;color:#91d8e7!important;opacity:1!important;
    font-size:clamp(7px,1.15dvh,10px)!important;line-height:1.25!important;letter-spacing:.06em!important;
    overflow:hidden!important;
  }

  body:has(.game) .game{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    margin-top:8px!important;
    grid-template-columns:minmax(0,1.35fr) minmax(140px,.42fr) minmax(240px,.82fr)!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    column-gap:9px!important;row-gap:7px!important;
    align-items:stretch!important;overflow:hidden!important;
  }
  body:has(.game) .scorebar{min-width:0!important;height:auto!important;min-height:0!important;grid-template-columns:minmax(0,1fr) minmax(150px,.52fr) minmax(0,1fr)!important;gap:9px!important}
  body:has(.game) .team{min-width:0!important;height:100%!important;min-height:52px!important;padding:8px 12px!important}
  body:has(.game) .round{min-width:0!important;padding:4px 7px!important}

  body:has(.game) .main-board,
  body:has(.game) .middle-side,
  body:has(.game) .side{min-width:0!important;min-height:0!important;height:100%!important;overflow:hidden!important}
  body:has(.game) .main-board{
    padding:9px 12px 8px!important;
    background:linear-gradient(145deg,rgba(5,43,60,.94),rgba(2,20,31,.97))!important;
  }
  body:has(.game) .main-board h2{font-size:clamp(10px,1.9dvh,17px)!important;line-height:1.18!important;margin:0 auto 3px!important;max-width:90%!important}

  /* Kein grauer Hangman-Kasten mehr. Die 3D-PNG besitzt transparenten Hintergrund. */
  body:has(.game) .hangman-stage{
    flex:1 1 auto!important;min-height:0!important;height:auto!important;width:100%!important;max-width:none!important;
    margin:0 auto!important;padding:5px 7px!important;
    display:grid!important;grid-template-columns:minmax(125px,.72fr) minmax(0,1fr)!important;grid-template-rows:auto 1fr!important;
    column-gap:8px!important;align-items:center!important;
    background:linear-gradient(145deg,rgba(5,43,60,.58),rgba(2,20,31,.38))!important;
    border:1px solid rgba(38,222,250,.28)!important;box-shadow:inset 0 0 25px rgba(0,214,255,.04)!important;
  }
  body:has(.game) .hangman-art{
    grid-column:1!important;grid-row:1/3!important;height:100%!important;min-height:0!important;
    display:grid!important;place-items:center!important;position:relative!important;
  }
  body:has(.game) .hangman-image{
    display:block!important;width:min(100%,250px)!important;height:min(100%,330px)!important;
    max-width:100%!important;max-height:100%!important;object-fit:contain!important;
    filter:drop-shadow(0 12px 16px rgba(0,0,0,.42))!important;
    visibility:visible!important;opacity:1!important;
  }
  body:has(.game) .hangman-shadow{display:none!important}
  body:has(.game) .hangman-card-head{grid-column:2!important;grid-row:1!important;font-size:clamp(8px,1.1dvh,10px)!important;justify-content:center!important;margin:0!important}
  body:has(.game) .hangman-caption{grid-column:2!important;grid-row:2!important;align-self:start!important;margin:3px 0 0!important;font-size:clamp(7px,1dvh,9px)!important;text-align:left!important}

  body:has(.game) .word{font-size:clamp(17px,3.2dvh,34px)!important;margin:3px auto!important;padding:5px 8px!important;line-height:1.05!important}
  body:has(.game) .used{font-size:clamp(10px,1.5dvh,14px)!important;margin-top:4px!important}
  body:has(.game) .turn-msg{font-size:clamp(11px,1.8dvh,15px)!important;margin:5px 0 0!important}

  body:has(.game) .middle-side{padding:8px!important;gap:6px!important}
  body:has(.game) .side{padding:8px!important}
  body:has(.game) .wheel-wrap{height:clamp(190px,34dvh,300px)!important;margin:0!important}
  body:has(.game) .wheel{width:min(100%,280px,34dvh)!important;height:auto!important;aspect-ratio:1/1!important;max-height:none!important}

  body:has(.game) .actions{min-width:0!important;grid-column:1/3!important;grid-row:3!important;margin:0!important;padding:5px 7px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(140px,.42fr)!important;gap:7px!important;align-items:center!important;overflow:hidden!important}
  body:has(.game) .actions .letter-row{grid-template-columns:repeat(11,minmax(12px,1fr))!important;gap:3px!important}
  body:has(.game) .actions .letter{height:clamp(20px,3.2dvh,29px)!important;padding:0!important}
}

@media (min-width:1001px) and (max-width:1200px){
  body:has(.game) .top-actions .guide-link{height:34px!important;padding:0 8px!important;font-size:8px!important;letter-spacing:.04em!important}
  body:has(.game) .top{grid-template-columns:minmax(0,1fr) auto 125px!important}
  body:has(.game) .game{grid-template-columns:minmax(0,1.35fr) minmax(125px,.4fr) minmax(210px,.78fr)!important}
  body:has(.game) .hangman-stage{grid-template-columns:minmax(95px,.6fr) minmax(0,1fr)!important}
  body:has(.game) .hangman-image{width:min(100%,185px)!important;height:min(100%,250px)!important}
}

/* ================================================================
   FINAL 3D HANGMAN – LEFT SIDE / robust image layers
   ================================================================ */
@media (min-width:1001px){
  body:has(.game) .hangman-stage{
    display:grid!important;
    grid-template-columns:minmax(190px,.72fr) minmax(260px,1fr)!important;
    grid-template-rows:auto 1fr!important;
    column-gap:16px!important;
    align-items:center!important;
    min-height:245px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
  }
  body:has(.game) .hangman-art{
    grid-column:1!important;
    grid-row:1/3!important;
    width:100%!important;
    height:100%!important;
    min-height:225px!important;
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    overflow:hidden!important;
  }
  body:has(.game) .hangman-3d-composite{
    position:relative!important;
    width:min(100%,235px,30dvh)!important;
    height:min(100%,245px,34dvh)!important;
    min-width:150px!important;
    min-height:175px!important;
    overflow:visible!important;
    flex:none!important;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.38))!important;
  }
  body:has(.game) .hangman-3d-layer{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:fill!important;
    display:block!important;
    pointer-events:none!important;
    opacity:0!important;
    transform:none!important;
    transition:opacity .3s ease,filter .3s ease!important;
  }
  /* The image contains the complete wooden gallows and figure.
     Each layer reveals only its own physical part. */
  body:has(.game) .hangman-3d-layer.gallows-top{clip-path:inset(0 27% 89% 13%);opacity:1!important}
  body:has(.game) .hangman-3d-layer.gallows-post{clip-path:inset(4% 72% 12% 13%);opacity:1!important}
  body:has(.game) .hangman-3d-layer.gallows-brace{clip-path:polygon(24% 4%,46% 4%,30% 28%,22% 28%,0 20%,0 12%);opacity:1!important}
  body:has(.game) .hangman-3d-layer.gallows-base{clip-path:inset(81% 0 0 0);opacity:1!important}

  body:has(.game) .hangman-3d-layer[data-part="1"]{clip-path:inset(0 38% 74% 51%)}
  body:has(.game) .hangman-3d-layer[data-part="2"]{clip-path:ellipse(13.5% 12.5% at 58% 32.5%)}
  body:has(.game) .hangman-3d-layer[data-part="3"]{clip-path:ellipse(8.8% 11.5% at 58% 55%)}
  body:has(.game) .hangman-3d-layer[data-part="4"]{clip-path:polygon(42% 43%,56% 43%,52% 68%,43% 70%,39% 65%)}
  body:has(.game) .hangman-3d-layer[data-part="5"]{clip-path:polygon(59% 43%,74% 43%,75% 65%,68% 70%,62% 66%)}
  body:has(.game) .hangman-3d-layer[data-part="6"]{clip-path:polygon(49% 58%,67% 58%,69% 87%,60% 88%,57% 67%,53% 88%,44% 88%)}

  body:has(.game) .hangman-stage[data-mistakes="1"] .hangman-3d-layer[data-part="1"],
  body:has(.game) .hangman-stage[data-mistakes="2"] .hangman-3d-layer[data-part="1"],
  body:has(.game) .hangman-stage[data-mistakes="2"] .hangman-3d-layer[data-part="2"],
  body:has(.game) .hangman-stage[data-mistakes="3"] .hangman-3d-layer[data-part="1"],
  body:has(.game) .hangman-stage[data-mistakes="3"] .hangman-3d-layer[data-part="2"],
  body:has(.game) .hangman-stage[data-mistakes="3"] .hangman-3d-layer[data-part="3"],
  body:has(.game) .hangman-stage[data-mistakes="4"] .hangman-3d-layer[data-part="1"],
  body:has(.game) .hangman-stage[data-mistakes="4"] .hangman-3d-layer[data-part="2"],
  body:has(.game) .hangman-stage[data-mistakes="4"] .hangman-3d-layer[data-part="3"],
  body:has(.game) .hangman-stage[data-mistakes="4"] .hangman-3d-layer[data-part="4"],
  body:has(.game) .hangman-stage[data-mistakes="5"] .hangman-3d-layer[data-part="1"],
  body:has(.game) .hangman-stage[data-mistakes="5"] .hangman-3d-layer[data-part="2"],
  body:has(.game) .hangman-stage[data-mistakes="5"] .hangman-3d-layer[data-part="3"],
  body:has(.game) .hangman-stage[data-mistakes="5"] .hangman-3d-layer[data-part="4"],
  body:has(.game) .hangman-stage[data-mistakes="5"] .hangman-3d-layer[data-part="5"],
  body:has(.game) .hangman-stage[data-mistakes="6"] .hangman-3d-layer[data-part="1"],
  body:has(.game) .hangman-stage[data-mistakes="6"] .hangman-3d-layer[data-part="2"],
  body:has(.game) .hangman-stage[data-mistakes="6"] .hangman-3d-layer[data-part="3"],
  body:has(.game) .hangman-stage[data-mistakes="6"] .hangman-3d-layer[data-part="4"],
  body:has(.game) .hangman-stage[data-mistakes="6"] .hangman-3d-layer[data-part="5"],
  body:has(.game) .hangman-stage[data-mistakes="6"] .hangman-3d-layer[data-part="6"]{
    opacity:1!important;
    filter:drop-shadow(0 0 7px rgba(34,230,248,.18))!important;
  }

  body:has(.game) .hangman-card-head{
    grid-column:2!important;grid-row:1!important;
    justify-content:center!important;margin:0!important;
    font-size:10px!important;color:#7fefff!important;
  }
  body:has(.game) .hangman-caption{
    grid-column:2!important;grid-row:2!important;
    align-self:start!important;margin:4px 0 0!important;
    color:#77aebb!important;font-size:10px!important;text-align:left!important;
  }
}
@media (min-width:1001px) and (max-width:1200px){
  body:has(.game) .hangman-stage{grid-template-columns:minmax(125px,.65fr) minmax(0,1fr)!important;column-gap:10px!important}
  body:has(.game) .hangman-3d-composite{width:min(100%,190px,29dvh)!important;height:min(100%,220px,32dvh)!important}
}
@media (max-width:1000px){
  body:has(.game) .hangman-stage{display:grid!important;grid-template-columns:minmax(130px,.72fr) minmax(0,1fr)!important;grid-template-rows:auto 1fr!important;column-gap:8px!important;align-items:center!important}
  body:has(.game) .hangman-art{grid-column:1!important;grid-row:1/3!important;min-height:150px!important;display:grid!important;place-items:center!important}
  body:has(.game) .hangman-3d-composite{position:relative!important;width:min(100%,190px)!important;height:min(100%,210px)!important;min-width:120px!important;min-height:140px!important}
  body:has(.game) .hangman-3d-layer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;display:block!important;opacity:0!important}
  body:has(.game) .hangman-3d-layer.gallows-top,
  body:has(.game) .hangman-3d-layer.gallows-post,
  body:has(.game) .hangman-3d-layer.gallows-brace,
  body:has(.game) .hangman-3d-layer.gallows-base{opacity:1!important}
  body:has(.game) .hangman-card-head{grid-column:2!important;grid-row:1!important}
  body:has(.game) .hangman-caption{grid-column:2!important;grid-row:2!important;text-align:left!important}
}
/* ================================================================
   HANGMAN 0-6 FEHLER – FIXED 3D STATE IMAGES
   Jeder Fehlerstand verwendet exakt seine eigene 3D-Grafik.
   ================================================================ */
@media (min-width:1001px){
  body:has(.game) .hangman-art{
    grid-column:1!important;
    grid-row:1/3!important;
    width:100%!important;
    height:100%!important;
    min-height:225px!important;
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    overflow:hidden!important;
  }
  body:has(.game) .hangman-3d-fixed{
    display:block!important;
    width:min(100%,235px,30dvh)!important;
    height:auto!important;
    max-height:245px!important;
    object-fit:contain!important;
    object-position:center!important;
    flex:none!important;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.38))!important;
  }
}
@media (min-width:1001px) and (max-width:1200px){
  body:has(.game) .hangman-3d-fixed{
    width:min(100%,190px,29dvh)!important;
    max-height:220px!important;
  }
}
@media (max-width:1000px){
  body:has(.game) .hangman-art{
    grid-column:1!important;
    grid-row:1/3!important;
    min-height:150px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  body:has(.game) .hangman-3d-fixed{
    display:block!important;
    width:min(100%,190px)!important;
    height:auto!important;
    max-height:210px!important;
    object-fit:contain!important;
    object-position:center!important;
    filter:drop-shadow(0 9px 14px rgba(0,0,0,.36))!important;
  }
}

/* Die drei oberen Navigationsbuttons bleiben der aktuelle Blue-Glass-Stil. */
@media (min-width:1001px){
  body:has(.game) .top-actions .guide-link{
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:clamp(34px,5.2dvh,46px)!important;
    min-height:34px!important;
    padding:0 clamp(12px,1vw,18px)!important;
    border:1px solid rgba(47,224,249,.78)!important;
    border-radius:12px!important;
    background:linear-gradient(180deg,rgba(17,101,128,.98),rgba(4,42,60,.99))!important;
    color:#e6fbff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -8px 16px rgba(0,20,32,.24),0 0 14px rgba(0,205,240,.18)!important;
    font-size:clamp(8px,1.2dvh,11px)!important;
    font-weight:1000!important;
    letter-spacing:.065em!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-decoration:none!important;
  }
  body:has(.game) .top-actions .guide-link:hover{
    background:linear-gradient(180deg,rgba(24,135,163,.99),rgba(5,59,80,.99))!important;
    border-color:#72f5ff!important;
    box-shadow:0 0 18px rgba(0,225,255,.30),inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
}
@media (min-width:1001px) and (max-width:1200px){
  body:has(.game) .top-actions .guide-link{height:34px!important;padding:0 9px!important;font-size:8px!important}
}

/* ==========================================================
   TEAM-HEADER REPAIR – Namen niemals abschneiden
   ========================================================== */
body:has(.game) .scorebar .team{
  min-width:0!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  box-sizing:border-box!important;
}
body:has(.game) .scorebar .team > span[data-team-name]{
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  text-overflow:clip!important;
  line-height:1.08!important;
  text-align:left!important;
  display:block!important;
}
body:has(.game) .scorebar .team.right > span[data-team-name]{
  text-align:right!important;
}
body:has(.game) .scorebar .team > strong{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
body:has(.game) .scorebar .team.is-active-turn::after,
body:has(.game) .scorebar .team.team-active::after{
  bottom:-11px!important;
}
@media(max-width:900px){
  body:has(.game) .scorebar .team{gap:7px!important;padding-left:9px!important;padding-right:9px!important}
  body:has(.game) .scorebar .team > span[data-team-name]{font-size:clamp(10px,2.2vw,14px)!important}
  body:has(.game) .scorebar .team > strong{font-size:clamp(12px,2.4vw,18px)!important}
}

/* ==========================================================
   FINAL TEAM ACTIVE / NAME VISIBILITY FIX
   Aktiver Team-Header darf durch Highlight und Nachbarspalten
   niemals seinen Namen abschneiden.
   ========================================================== */
body:has(.game) .scorebar .team{
  position:relative!important;
  z-index:2!important;
  overflow:visible!important;
  contain:none!important;
}
body:has(.game) .scorebar .team.is-active-turn,
body:has(.game) .scorebar .team.team-active,
body:has(.game) .scorebar .team.active{
  z-index:30!important;
  transform:translateY(-2px) scale(1.01)!important;
  overflow:visible!important;
}
body:has(.game) .scorebar .team.is-active-turn > span[data-team-name],
body:has(.game) .scorebar .team.team-active > span[data-team-name],
body:has(.game) .scorebar .team.active > span[data-team-name]{
  position:relative!important;
  z-index:35!important;
  flex:1 1 0!important;
  min-width:0!important;
  max-width:none!important;
  width:100%!important;
  overflow:visible!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  text-overflow:clip!important;
  display:block!important;
  line-height:1.12!important;
}
body:has(.game) .scorebar .team.is-active-turn > strong,
body:has(.game) .scorebar .team.team-active > strong,
body:has(.game) .scorebar .team.active > strong{
  position:relative!important;
  z-index:35!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
body:has(.game) .scorebar .round{position:relative!important;z-index:1!important}

/* Die Zug-Pille bleibt unterhalb des Team-Headers und kann
   den Teamnamen nicht überdecken. */
body:has(.game) .scorebar .team.is-active-turn::after,
body:has(.game) .scorebar .team.team-active::after,
body:has(.game) .scorebar .team.active::after{
  z-index:12!important;
  pointer-events:none!important;
}

/* Größere Geld-/Gewinnanimation */
body:has(.game) .coin-rain-layer{z-index:16000!important}
body:has(.game) .gold-coin{
  width:24px!important;
  height:24px!important;
  border-width:1.5px!important;
  box-shadow:0 3px 10px rgba(128,86,10,.46),inset 0 1px 3px rgba(255,255,255,.88),0 0 8px rgba(255,203,62,.28)!important;
}
body:has(.game) .gold-coin::after{font-size:11px!important}
@keyframes coinToTeamLarge{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) scale(calc(var(--scale) + .35))}
  10%{opacity:1}
  42%{opacity:1;transform:translate3d(calc(var(--dx)*.42),calc(var(--dy)*.34 - 55px),0) rotate(calc(var(--spin)*.45)) scale(calc(var(--scale) + .12))}
  72%{opacity:1;transform:translate3d(calc(var(--dx)*.78),calc(var(--dy)*.76),0) rotate(calc(var(--spin)*.82)) scale(.58)}
  94%{opacity:1;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--spin)) scale(.38)}
  100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--spin) + 120deg)) scale(.25)}
}
body:has(.game) .gold-coin{animation-name:coinToTeamLarge!important}

/* ==========================================================
   FINAL GLASS-BLUE GAME POLISH + ACTIVE TEAM SAFE AREA
   ========================================================== */
body:has(.game){
  background:
    radial-gradient(900px 520px at 8% 8%,rgba(0,218,255,.14),transparent 68%),
    radial-gradient(800px 500px at 92% 12%,rgba(0,132,255,.13),transparent 70%),
    radial-gradient(700px 520px at 50% 100%,rgba(38,98,255,.10),transparent 72%),
    repeating-linear-gradient(90deg,rgba(85,231,255,.025) 0,rgba(85,231,255,.025) 1px,transparent 1px,transparent 62px),
    repeating-linear-gradient(0deg,rgba(85,231,255,.022) 0,rgba(85,231,255,.022) 1px,transparent 1px,transparent 62px),
    linear-gradient(135deg,#02131f 0%,#052333 45%,#031523 100%)!important;
}
body:has(.game) .game{
  position:relative;
  isolation:isolate;
}
body:has(.game) .game::before{
  content:"";
  position:absolute;
  inset:-12px;
  z-index:-1;
  pointer-events:none;
  border-radius:28px;
  background:
    radial-gradient(circle at 16% 20%,rgba(88,244,255,.20) 0 1px,transparent 2px),
    radial-gradient(circle at 76% 34%,rgba(76,186,255,.18) 0 1px,transparent 2px),
    radial-gradient(circle at 48% 78%,rgba(72,121,255,.14) 0 1px,transparent 2px);
  background-size:190px 170px,240px 210px,310px 270px;
  opacity:.65;
}
body:has(.game) .scorebar{
  position:relative!important;
  z-index:40!important;
  min-height:78px!important;
  margin-bottom:18px!important;
  overflow:visible!important;
  grid-template-columns:minmax(0,1fr) minmax(190px,.54fr) minmax(0,1fr)!important;
}
body:has(.game) .scorebar .team{
  position:relative!important;
  min-width:0!important;
  min-height:64px!important;
  height:auto!important;
  padding:12px 18px!important;
  overflow:visible!important;
  contain:none!important;
  border:1px solid rgba(76,224,255,.48)!important;
  background:
    linear-gradient(135deg,rgba(17,104,132,.58),rgba(4,43,64,.72) 48%,rgba(9,74,101,.56))!important;
  backdrop-filter:blur(18px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(155%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 28px rgba(0,14,28,.24),
    0 0 0 1px rgba(30,196,255,.08),
    0 0 22px rgba(0,194,255,.12),
    0 12px 24px rgba(0,0,0,.20)!important;
}
body:has(.game) .scorebar .team::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:10px;
  pointer-events:none;
  border:1px solid rgba(176,249,255,.11);
  background:linear-gradient(125deg,rgba(255,255,255,.07),transparent 24%,transparent 70%,rgba(0,224,255,.06));
}
body:has(.game) .scorebar .team.is-active-turn,
body:has(.game) .scorebar .team.team-active,
body:has(.game) .scorebar .team.active{
  z-index:60!important;
  transform:none!important;
  border-color:#4ceeff!important;
  background:
    linear-gradient(135deg,rgba(15,150,184,.72),rgba(3,65,92,.82) 52%,rgba(8,106,140,.68))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -20px 30px rgba(0,14,28,.20),
    0 0 0 2px rgba(58,232,255,.32),
    0 0 26px rgba(0,225,255,.48),
    0 0 54px rgba(0,126,255,.20),
    0 14px 30px rgba(0,0,0,.24)!important;
  animation:none!important;
}
body:has(.game) .scorebar .team.is-active-turn > span[data-team-name],
body:has(.game) .scorebar .team.team-active > span[data-team-name],
body:has(.game) .scorebar .team.active > span[data-team-name]{
  position:relative!important;
  z-index:70!important;
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  text-overflow:clip!important;
  line-height:1.12!important;
  padding-right:6px!important;
}
body:has(.game) .scorebar .team.is-active-turn > strong,
body:has(.game) .scorebar .team.team-active > strong,
body:has(.game) .scorebar .team.active > strong{
  position:relative!important;
  z-index:70!important;
  flex:0 0 auto!important;
  min-width:max-content!important;
  white-space:nowrap!important;
}
body:has(.game) .scorebar .team.is-active-turn::after,
body:has(.game) .scorebar .team.team-active::after,
body:has(.game) .scorebar .team.active::after{
  bottom:-13px!important;
  z-index:90!important;
  box-shadow:0 4px 20px rgba(0,229,255,.60),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
body:has(.game) .scorebar .round{
  min-width:0!important;
  min-height:64px!important;
  padding:7px 10px!important;
  border:1px solid rgba(73,229,255,.46)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(12,91,119,.48),rgba(3,35,53,.76))!important;
  backdrop-filter:blur(16px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 22px rgba(0,211,255,.10)!important;
}
body:has(.game) .main-board,
body:has(.game) .side,
body:has(.game) .middle-side{
  border-color:rgba(64,221,255,.42)!important;
  background:
    linear-gradient(145deg,rgba(11,77,101,.54),rgba(2,27,43,.82) 48%,rgba(5,50,72,.68))!important;
  backdrop-filter:blur(20px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -24px 42px rgba(0,10,22,.24),
    0 0 0 1px rgba(0,209,255,.08),
    0 0 30px rgba(0,184,255,.10),
    0 18px 40px rgba(0,0,0,.20)!important;
}
body:has(.game) .main-board::before,
body:has(.game) .side::before,
body:has(.game) .middle-side::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:13px;
  pointer-events:none;
  border:1px solid rgba(131,241,255,.12);
  background:linear-gradient(125deg,rgba(255,255,255,.045),transparent 22%,transparent 68%,rgba(0,213,255,.045));
}
body:has(.game) .main-board::after,
body:has(.game) .side::after,
body:has(.game) .middle-side::after{
  content:"";
  position:absolute;
  left:10%;right:10%;top:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#62efff 35%,#d8ffff 50%,#62efff 65%,transparent);
  box-shadow:0 0 13px rgba(42,230,255,.75);
  opacity:.72;
}
body:has(.game) .category-pill,
body:has(.game) .round-category{
  border-color:rgba(73,231,255,.48)!important;
  background:linear-gradient(180deg,rgba(19,111,137,.34),rgba(3,49,69,.48))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 14px rgba(0,216,255,.08)!important;
}
body:has(.game) .wheel{
  box-shadow:0 0 0 5px rgba(28,72,91,.90),0 0 0 7px rgba(83,224,255,.16),0 0 34px rgba(0,220,255,.18),0 12px 35px rgba(0,0,0,.55)!important;
}
@media(max-width:900px){
  body:has(.game) .scorebar{grid-template-columns:minmax(0,1fr) minmax(130px,.55fr) minmax(0,1fr)!important;min-height:72px!important;margin-bottom:16px!important}
  body:has(.game) .scorebar .team{min-height:58px!important;padding:9px 10px!important}
  body:has(.game) .scorebar .team.is-active-turn::after,
  body:has(.game) .scorebar .team.team-active::after,
  body:has(.game) .scorebar .team.active::after{font-size:.62rem!important;padding:4px 8px!important;bottom:-11px!important}
}

/* ================================================================
   FINAL VERTICAL SPACE FIX – LETTERS / ACTION BAR
   Die komplette Buchstabenleiste und BEGRIFF KOMPLETT LÖSEN
   dürfen am unteren Rand niemals abgeschnitten werden.
   ================================================================ */
body:has(.game){
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body:has(.game) .game{
  overflow:visible!important;
  grid-template-rows:auto minmax(0,1fr) minmax(88px,auto)!important;
  align-content:stretch!important;
}
body:has(.game) .scorebar{
  margin-bottom:4px!important;
}
body:has(.game) .actions{
  min-width:0!important;
  min-height:88px!important;
  height:auto!important;
  overflow:visible!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
  padding:7px 9px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(145px,.42fr)!important;
  gap:7px!important;
  align-items:center!important;
  position:relative!important;
  z-index:20!important;
}
body:has(.game) .actions .letters-form{
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
}
body:has(.game) .actions .letter-row{
  display:grid!important;
  grid-template-columns:repeat(11,minmax(14px,1fr))!important;
  grid-auto-rows:minmax(25px,29px)!important;
  gap:3px!important;
  min-height:53px!important;
  overflow:visible!important;
}
body:has(.game) .actions .letter{
  width:100%!important;
  min-width:0!important;
  height:clamp(24px,3.2vh,29px)!important;
  min-height:24px!important;
  padding:0!important;
  line-height:1!important;
}
body:has(.game) .actions .letter-status{
  display:block!important;
  min-height:14px!important;
  margin-top:4px!important;
  font-size:clamp(7px,.9vh,9px)!important;
  line-height:1.2!important;
  overflow:visible!important;
  white-space:normal!important;
}
body:has(.game) .actions .solve-popup-trigger{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  height:auto!important;
  align-self:center!important;
  overflow:visible!important;
}
@media (max-width:1000px){
  body:has(.game) .game{grid-template-rows:auto minmax(0,1fr) minmax(92px,auto)!important}
  body:has(.game) .actions{min-height:92px!important;grid-template-columns:minmax(0,1fr) minmax(130px,.42fr)!important}
}

/* ================================================================
   V36 – GAME HEIGHT / VERTICAL CONTENT FIX
   Die Spielfläche darf nicht mehr auf die Viewport-Höhe geklemmt werden.
   Der komplette Buchstabenbereich bleibt unterhalb des Hauptspielfeldes
   sichtbar; bei kleineren Bildschirmen wird sauber vertikal gescrollt.
   ================================================================ */
@media (min-width:1001px){
  body:has(.game){
    height:auto!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body:has(.game) .app{
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body:has(.game) .game{
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    grid-template-rows:auto minmax(560px,auto) minmax(112px,auto)!important;
    align-content:start!important;
    row-gap:12px!important;
  }
  body:has(.game) .scorebar{
    height:auto!important;
    min-height:78px!important;
  }
  body:has(.game) .main-board{
    height:auto!important;
    min-height:560px!important;
    overflow:visible!important;
    align-self:stretch!important;
  }
  body:has(.game) .middle-side{
    height:auto!important;
    min-height:560px!important;
    overflow:visible!important;
    align-self:stretch!important;
  }
  body:has(.game) .side{
    height:auto!important;
    min-height:684px!important;
    overflow:visible!important;
  }
  body:has(.game) .actions{
    height:auto!important;
    min-height:112px!important;
    overflow:visible!important;
    align-self:stretch!important;
    padding:10px 12px!important;
  }
  body:has(.game) .actions .letter-row{
    min-height:58px!important;
    grid-auto-rows:27px!important;
    gap:4px!important;
  }
  body:has(.game) .actions .letter{
    height:27px!important;
    min-height:27px!important;
  }
  body:has(.game) .actions .letter-status{
    min-height:16px!important;
    margin-top:6px!important;
    line-height:1.25!important;
  }
  body:has(.game) .actions .solve-popup-trigger{
    min-height:48px!important;
    height:48px!important;
    align-self:center!important;
  }
}

@media (min-width:1001px) and (max-height:800px){
  body:has(.game) .game{
    grid-template-rows:auto minmax(540px,auto) minmax(112px,auto)!important;
  }
  body:has(.game) .main-board,
  body:has(.game) .middle-side{min-height:540px!important}
  body:has(.game) .side{min-height:664px!important}
}


/* ============================================================
   HANGMAN HIGHTECH VERSION – AUTHORITATIVE VIEWPORT SIZING
   Priority: HEIGHT -> WIDTH -> four-side safety margin.
   The complete game canvas is sized as one unit. Content is
   never clipped to the viewport.
   ============================================================ */
:root{
  --game-safe-top: clamp(14px, 2.2vh, 28px);
  --game-safe-bottom: clamp(14px, 2.2vh, 28px);
  --game-safe-left: clamp(12px, 1.6vw, 28px);
  --game-safe-right: clamp(12px, 1.6vw, 28px);
}
html:has(.game),
body:has(.game){
  min-height:100%;
  height:auto;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
body:has(.game){
  box-sizing:border-box;
  padding-top:var(--game-safe-top);
  padding-bottom:var(--game-safe-bottom);
  padding-left:var(--game-safe-left);
  padding-right:var(--game-safe-right);
}
body:has(.game) .app{
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 auto !important;
  box-sizing:border-box;
}
body:has(.game) .game{
  /*
   * JS writes --game-scale from the available browser height first.
   * The wrapper itself therefore keeps a predictable design size.
   */
  --game-scale:1;
  width:min(100%, calc(1600px * var(--game-scale))) !important;
  min-width:0 !important;
  height:auto !important;
  min-height:calc(900px * var(--game-scale)) !important;
  max-height:none !important;
  margin:0 auto !important;
  box-sizing:border-box;
  transform-origin:top center;
}
body:has(.game) .game-shell,
body:has(.game) .game-layout,
body:has(.game) .game-main,
body:has(.game) .game-board{
  box-sizing:border-box;
}
body:has(.game) .letters,
body:has(.game) .game-actions,
body:has(.game) .game-actions-v3{
  overflow:visible !important;
}
body:has(.game) .letters{
  min-height:calc(112px * var(--game-scale)) !important;
}
body:has(.game) .game-actions,
body:has(.game) .game-actions-v3{
  min-height:calc(74px * var(--game-scale)) !important;
}
body:has(.game) .game-board,
body:has(.game) .main-board{
  overflow:visible !important;
}
@media (max-width:700px){
  body:has(.game){
    --game-safe-top:12px;
    --game-safe-bottom:16px;
    --game-safe-left:8px;
    --game-safe-right:8px;
  }
}


/* ============================================================
   V31 – FINAL REAL VIEWPORT FIT
   The actual browser viewport is authoritative. We calculate the
   available height from the real top position of .game, then use
   width only as the second constraint. Four-side safety margins are
   retained. The previous 900px design-height lock is intentionally
   overridden here.
   ============================================================ */
@media (min-width:1001px){
  html:has(.game){overflow-x:hidden!important;overflow-y:auto!important}
  body:has(.game){
    height:auto!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:0!important;
  }
  body:has(.game) .app{
    width:100%!important;
    max-width:1680px!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:12px 18px 18px!important;
    box-sizing:border-box!important;
  }
  body:has(.game) .game{
    width:100%!important;
    max-width:100%!important;
    height:var(--game-available-height,auto)!important;
    min-height:0!important;
    max-height:none!important;
    margin:8px 0 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(145px,.42fr) minmax(240px,.82fr)!important;
    grid-template-rows:68px minmax(0,1fr) 68px!important;
    column-gap:9px!important;
    row-gap:7px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  body:has(.game) .scorebar{
    grid-column:1/-1!important;grid-row:1!important;
    height:100%!important;min-height:0!important;
    grid-template-columns:minmax(0,1fr) minmax(150px,.52fr) minmax(0,1fr)!important;
    gap:9px!important;
  }
  body:has(.game) .team{
    height:100%!important;min-height:0!important;padding:8px 14px!important;
  }
  body:has(.game) .round{height:100%!important;min-height:0!important;padding:4px 7px!important}

  body:has(.game) .main-board,
  body:has(.game) .middle-side{
    grid-row:2!important;
    min-height:0!important;height:100%!important;
  }
  body:has(.game) .main-board{
    grid-column:1!important;
    overflow:hidden!important;
    padding:8px 12px 7px!important;
  }
  body:has(.game) .middle-side{
    grid-column:2!important;
    overflow:hidden!important;
    padding:8px!important;
  }
  body:has(.game) .side{
    grid-column:3!important;
    grid-row:2/4!important;
    min-height:0!important;height:100%!important;
    overflow:hidden!important;
    padding:10px!important;
  }

  /* Main board uses its remaining row; nothing is allowed to push
     the letters/action row below the viewport. */
  body:has(.game) .hangman-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    margin:0 auto!important;
  }
  body:has(.game) .hangman-art{min-height:0!important;height:100%!important;overflow:hidden!important}
  body:has(.game) .hangman-3d-fixed{
    display:block!important;
    width:auto!important;
    height:min(100%,270px)!important;
    max-width:100%!important;
    object-fit:contain!important;
  }
  body:has(.game) .word{flex:0 0 auto!important;margin:3px auto!important;padding:4px 8px!important;line-height:1.05!important}
  body:has(.game) .used{flex:0 0 auto!important;margin-top:2px!important}
  body:has(.game) .turn-msg{flex:0 0 auto!important;margin:3px 0 0!important;min-height:12px!important}

  /* Middle column stays compact and fully visible. */
  body:has(.game) .timer-card{flex:0 0 auto!important}
  body:has(.game) .vowels{flex:0 0 auto!important}
  body:has(.game) .game-controls-v3{flex:0 0 auto!important;margin-top:6px!important}

  /* More air between the wheel and its button. */
  body:has(.game) .wheel-wrap{
    height:clamp(185px,31vh,285px)!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
  body:has(.game) .wheel{width:min(100%,280px,31vh)!important;height:auto!important;aspect-ratio:1/1!important}
  body:has(.game) .action-form{margin-top:20px!important}
  body:has(.game) .spin{min-height:40px!important;padding:9px 10px!important}

  /* Letters/actions are a real bottom row of the game canvas. */
  body:has(.game) .actions,
  body:has(.game) .game-actions-v3{
    grid-column:1/3!important;grid-row:3!important;
    height:100%!important;min-height:0!important;
    margin:0!important;padding:6px 7px!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(140px,.42fr)!important;
    gap:7px!important;align-items:center!important;
  }
  body:has(.game) .actions .letters-form,
  body:has(.game) .game-actions-v3 .letters-form{min-width:0!important;grid-column:1!important;grid-row:1!important}
  body:has(.game) .actions .letter-row,
  body:has(.game) .game-actions-v3 .letter-row{
    grid-template-columns:repeat(21,minmax(13px,1fr))!important;
    gap:3px!important;
  }
  body:has(.game) .actions .letter,
  body:has(.game) .game-actions-v3 .letter{
    height:30px!important;min-height:0!important;padding:0!important;
  }
  body:has(.game) .actions .letter-status,
  body:has(.game) .game-actions-v3 .letter-status{font-size:8px!important;margin-top:2px!important}
  body:has(.game) .actions .solve-popup-trigger,
  body:has(.game) .game-actions-v3 .solve-popup-trigger{
    grid-column:2!important;grid-row:1!important;min-height:42px!important;
  }
}

@media (min-width:1001px) and (max-height:760px){
  body:has(.game) .game{grid-template-rows:60px minmax(0,1fr) 62px!important}
  body:has(.game) .wheel-wrap{height:clamp(160px,29vh,235px)!important}
  body:has(.game) .action-form{margin-top:22px!important}
  body:has(.game) .spin{min-height:36px!important;padding:7px 8px!important}
  body:has(.game) .actions .letter,
  body:has(.game) .game-actions-v3 .letter{height:27px!important}
}

@media (min-width:1001px) and (max-width:1200px){
  body:has(.game){--desktop-game-side:8px}
  body:has(.game) .game{grid-template-columns:minmax(0,1.35fr) minmax(125px,.4fr) minmax(210px,.78fr)!important}
  body:has(.game) .actions .letter-row,
  body:has(.game) .game-actions-v3 .letter-row{grid-template-columns:repeat(21,minmax(10px,1fr))!important}
  body:has(.game) .actions .letter,
  body:has(.game) .game-actions-v3 .letter{font-size:10px!important}
}


/* ============================================================
   V32 – BALANCED INNER SPACING
   Keep the viewport fit, but restore comfortable internal rhythm.
   No content is allowed to push the bottom action row outside.
   ============================================================ */
@media (min-width:1001px){
  body:has(.game) .game{
    grid-template-rows:clamp(74px,11%,86px) minmax(0,1fr) clamp(80px,12%,92px)!important;
    column-gap:10px!important;
    row-gap:10px!important;
  }

  body:has(.game) .scorebar{
    gap:10px!important;
  }
  body:has(.game) .team{
    padding:10px 16px!important;
  }
  body:has(.game) .round{
    padding:7px 10px!important;
    overflow:visible!important;
    justify-content:center!important;
  }
  body:has(.game) .round i{
    margin-top:7px!important;
    line-height:1.15!important;
  }

  body:has(.game) .main-board{
    padding:12px 16px 10px!important;
    justify-content:flex-start!important;
  }
  body:has(.game) .main-board h2{
    margin:0 auto 5px!important;
    line-height:1.25!important;
  }
  body:has(.game) .category-pill{
    margin-bottom:7px!important;
  }
  body:has(.game) .hangman-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:3px 0 5px!important;
    margin:0!important;
  }
  body:has(.game) .hangman-art{
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body:has(.game) .hangman-3d-fixed{
    height:min(100%,250px)!important;
    max-height:250px!important;
  }
  body:has(.game) .word{
    margin:8px auto 5px!important;
    padding:6px 10px!important;
    line-height:1.05!important;
  }
  body:has(.game) .used{
    margin-top:5px!important;
  }
  body:has(.game) .turn-msg{
    margin-top:6px!important;
    min-height:14px!important;
  }

  body:has(.game) .middle-side{
    padding:10px!important;
    gap:10px!important;
  }
  body:has(.game) .timer-card{
    padding:4px 5px!important;
  }
  body:has(.game) .vowels{
    margin-top:2px!important;
    margin-bottom:2px!important;
  }
  body:has(.game) .game-controls-v3{
    margin-top:8px!important;
  }

  body:has(.game) .side{
    padding:12px!important;
  }
  body:has(.game) .wheel-wrap{
    height:clamp(190px,32vh,292px)!important;
    margin:0!important;
  }
  body:has(.game) .wheel{
    width:min(100%,280px,32vh)!important;
  }
  body:has(.game) .action-form{
    margin-top:28px!important;
  }
  body:has(.game) .spin{
    min-height:42px!important;
    padding:10px 12px!important;
  }

  body:has(.game) .actions,
  body:has(.game) .game-actions-v3{
    padding:9px 9px!important;
    gap:9px!important;
  }
  body:has(.game) .actions .letter-row,
  body:has(.game) .game-actions-v3 .letter-row{
    gap:4px!important;
  }
  body:has(.game) .actions .letter,
  body:has(.game) .game-actions-v3 .letter{
    height:30px!important;
  }
  body:has(.game) .actions .solve-popup-trigger,
  body:has(.game) .game-actions-v3 .solve-popup-trigger{
    min-height:44px!important;
  }
}

/* ============================================================
   MAIN BOARD – HANGMAN LEFT / INFORMATION STACK RIGHT
   The Hangman stage occupies the complete left content column.
   Word, used letters, turn message and optional info stay stacked
   vertically on the right side.
   ============================================================ */
@media (min-width:1001px){
  body:has(.game) .main-board{
    display:grid!important;
    grid-template-columns:minmax(300px,1.08fr) minmax(260px,.92fr)!important;
    grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1fr)!important;
    column-gap:18px!important;
    row-gap:10px!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    text-align:left!important;
    padding:12px 16px!important;
  }

  body:has(.game) .main-board h2{
    grid-column:1/-1!important;
    grid-row:1!important;
    width:100%!important;
    margin:0!important;
    padding:0 8px!important;
    text-align:center!important;
    align-self:center!important;
  }

  body:has(.game) .main-board .hangman-stage{
    grid-column:1!important;
    grid-row:2/6!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:100%!important;
    margin:0!important;
    padding:12px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board .hangman-card-head{
    flex:0 0 auto!important;
    width:100%!important;
    padding:0 4px!important;
    justify-content:center!important;
  }

  body:has(.game) .main-board .hangman-art{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    overflow:hidden!important;
  }

  body:has(.game) .main-board .hangman-3d-fixed{
    width:auto!important;
    height:min(100%,360px)!important;
    max-width:92%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }

  body:has(.game) .main-board .hangman-caption{
    flex:0 0 auto!important;
    width:100%!important;
    padding:7px 8px 2px!important;
    text-align:center!important;
  }

  body:has(.game) .main-board .word{
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
    min-height:70px!important;
    margin:0!important;
    padding:12px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board .used{
    grid-column:2!important;
    grid-row:3!important;
    width:100%!important;
    margin:0!important;
    padding:9px 12px!important;
    align-self:start!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board .turn-msg{
    grid-column:2!important;
    grid-row:4!important;
    width:100%!important;
    min-height:42px!important;
    margin:0!important;
    padding:10px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board .word-info-trigger{
    grid-column:2!important;
    grid-row:5!important;
    justify-self:end!important;
    align-self:start!important;
    margin:0 8px 8px 0!important;
  }
}


/* ============================================================
   FINAL HANGMAN ART SIZE
   Use the complete available Hangman-art area.
   No fixed 190/235/360px image limit.
   ============================================================ */
body:has(.game) .main-board .hangman-stage{
  grid-template-rows:auto minmax(0,1fr) auto!important;
  min-height:0!important;
}

body:has(.game) .main-board .hangman-art{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
}

body:has(.game) .main-board .hangman-art .hangman-3d-fixed{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  flex:1 1 auto!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
  transform:none!important;
}


/* FINAL: Hangman stage minimum height */
body:has(.game) .main-board .hangman-stage{
  min-height:500px!important;
}


/* FINAL: Hangman card header – error count aligned to the right */
body:has(.game) .main-board .hangman-card-head{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  text-align:right!important;
  padding-left:0!important;
  padding-right:14px!important;
  box-sizing:border-box!important;
}

body:has(.game) .main-board .hangman-card-head .hangman-errors{
  margin-left:auto!important;
  text-align:right!important;
}


/* ============================================================
   FINAL LAYOUT – HANGMAN IMAGE LEFT, ALL OTHER CONTENT RIGHT
   Hangman stage minimum height: 200px.
   ============================================================ */
@media (min-width:1001px){
  body:has(.game) .main-board .hangman-stage{
    grid-column:1!important;
    grid-row:2/6!important;
    min-height:200px!important;
    height:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    column-gap:18px!important;
    align-items:stretch!important;
    padding:10px!important;
    box-sizing:border-box!important;
  }

  /* The artwork is the only element on the left. */
  body:has(.game) .main-board .hangman-art{
    grid-column:1!important;
    grid-row:1/4!important;
    width:100%!important;
    height:100%!important;
    min-height:200px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }

  body:has(.game) .main-board .hangman-art .hangman-3d-fixed{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    flex:1 1 auto!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
  }

  /* Error count and explanatory text are completely on the right. */
  body:has(.game) .main-board .hangman-card-head{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    margin:0!important;
    padding:4px 10px!important;
    justify-content:flex-end!important;
    text-align:right!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board .hangman-caption{
    grid-column:2!important;
    grid-row:2/4!important;
    width:100%!important;
    align-self:start!important;
    padding:18px 10px!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }

  /* Everything outside the stage stays stacked on the right. */
  body:has(.game) .main-board .word,
  body:has(.game) .main-board .used,
  body:has(.game) .main-board .turn-msg,
  body:has(.game) .main-board .word-info-trigger{
    grid-column:2!important;
  }
}


/* FINAL LAYOUT: caption removed; error header positioned above USED. */
body:has(.game) .main-board .hangman-caption{
  display:none!important;
}

@media (min-width:1001px){
  body:has(.game) .main-board .hangman-stage{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    min-height:200px!important;
  }

  /* Image only on the left, full available stage height. */
  body:has(.game) .main-board .hangman-art{
    grid-column:1!important;
    grid-row:1!important;
    min-height:200px!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }

  body:has(.game) .main-board .hangman-art .hangman-3d-fixed{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
  }

  /* The right-hand information column is ordered:
     ERROR HEADER -> USED -> remaining information. */
  body:has(.game) .main-board .hangman-card-head{
    grid-column:2!important;
    grid-row:1!important;
    align-self:start!important;
    justify-content:flex-end!important;
    text-align:right!important;
    margin:0!important;
    padding:4px 10px!important;
    z-index:3!important;
  }

  body:has(.game) .main-board .used{
    grid-column:2!important;
    grid-row:2!important;
    margin-top:0!important;
  }
}


/* ============================================================
   MAIN BOARD FINAL: CARD HEAD ON RIGHT, MAXIMUM SPACE FOR ART
   ============================================================ */
@media (min-width:1001px){
  /* Main board: dedicate the left portion exclusively to Hangman art.
     All textual Hangman information belongs to the right column. */
  body:has(.game) .main-board .hangman-stage{
    position:relative!important;
    display:block!important;
    min-height:200px!important;
    height:100%!important;
    padding:8px!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board .hangman-art{
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:58%!important;
    height:100%!important;
    min-height:200px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
  }

  body:has(.game) .main-board .hangman-art .hangman-3d-fixed{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-width:0!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
    flex:1 1 auto!important;
  }

  /* Error header is completely in the right information area. */
  body:has(.game) .main-board .hangman-card-head{
    position:absolute!important;
    left:60%!important;
    right:0!important;
    top:8px!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:4px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    text-align:right!important;
    box-sizing:border-box!important;
    z-index:5!important;
  }

  /* USED starts directly below the error header on the right. */
  body:has(.game) .main-board .used{
    position:absolute!important;
    left:60%!important;
    right:0!important;
    top:42px!important;
    width:auto!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
}


/* FINAL: USED with clear spacing below WORD */
@media (min-width:1001px){
  body:has(.game) .main-board .word{
    margin-bottom:18px!important;
  }
  body:has(.game) .main-board .used{
    top:72px!important;
    margin-top:18px!important;
    padding-top:0!important;
  }
}


/* FINAL: USED spans the complete right column; TURN-MSG below with clear spacing */
@media (min-width:1001px){
  body:has(.game) .main-board .used{
    left:60%!important;
    right:0!important;
    width:auto!important;
    margin-top:18px!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }

  body:has(.game) .main-board .turn-msg{
    position:absolute!important;
    left:60%!important;
    right:0!important;
    top:128px!important;
    width:auto!important;
    margin:20px 0 0!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }
}


/* ============================================================
   MAIN BOARD – FULL WIDTH VERTICAL INFORMATION FLOW
   Hangman artwork remains alone on the left. All textual
   information below/around it uses the complete main-board width.
   ============================================================ */
@media (min-width:1001px){
  body:has(.game) .main-board{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto auto minmax(0,1fr)!important;
    align-content:stretch!important;
    row-gap:0!important;
    width:100%!important;
    box-sizing:border-box!important;
  }

  /* Hint across the complete main board. */
  body:has(.game) .main-board > h2{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    box-sizing:border-box!important;
  }

  /* Hangman stage is the only split area: artwork left, error header right. */
  body:has(.game) .main-board .hangman-stage{
    position:relative!important;
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-height:200px!important;
    height:clamp(200px, 32vh, 360px)!important;
    box-sizing:border-box!important;
    padding:8px!important;
    display:block!important;
    overflow:hidden!important;
  }

  body:has(.game) .main-board .hangman-art{
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:48%!important;
    height:100%!important;
    min-height:200px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
  }

  body:has(.game) .main-board .hangman-art .hangman-3d-fixed{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
  }

  body:has(.game) .main-board .hangman-card-head{
    position:absolute!important;
    left:50%!important;
    right:0!important;
    top:10px!important;
    width:auto!important;
    margin:0!important;
    padding:4px 12px!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    box-sizing:border-box!important;
    text-align:right!important;
  }

  /* Word, Used and Turn message each get the full main-board width,
     in a clean vertical sequence. */
  body:has(.game) .main-board > .word,
  body:has(.game) .main-board > .used,
  body:has(.game) .main-board > .turn-msg,
  body:has(.game) .main-board > .word-info-trigger{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    grid-column:1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board > .word{
    grid-row:3!important;
    margin:14px 0 0!important;
    padding:14px 18px!important;
    text-align:center!important;
  }

  body:has(.game) .main-board > .used{
    grid-row:4!important;
    margin:18px 0 0!important;
    padding:10px 18px!important;
    text-align:left!important;
  }

  body:has(.game) .main-board > .turn-msg{
    grid-row:5!important;
    margin:18px 0 0!important;
    padding:10px 18px!important;
    text-align:left!important;
    min-height:32px!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    overflow:visible!important;
    z-index:10!important;
  }

  body:has(.game) .main-board > .word-info-trigger{
    grid-row:6!important;
    justify-self:end!important;
    align-self:end!important;
    margin:12px 12px 12px 0!important;
  }
}

/* CLEAN MAIN-BOARD STRUCTURE: LEFT HANGMAN / RIGHT INFORMATION */
@media (min-width:1001px){
 body:has(.game) .main-board{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr)!important;grid-template-rows:auto minmax(0,1fr)!important;column-gap:18px!important;row-gap:12px!important;align-items:stretch!important;position:relative!important;}
 body:has(.game) .main-board>h2{grid-column:1 / -1!important;grid-row:1!important;width:100%!important;margin:0!important;}
 body:has(.game) .main-board>.hangman-stage{grid-column:1!important;grid-row:2!important;position:relative!important;min-height:200px!important;height:100%!important;width:100%!important;padding:0!important;margin:0!important;overflow:hidden!important;box-sizing:border-box!important;display:block!important;}
 body:has(.game) .main-board>.hangman-stage .hangman-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;padding:0!important;margin:0!important;overflow:hidden!important;}
 body:has(.game) .main-board>.hangman-stage .hangman-3d-fixed{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;margin:0!important;}
 body:has(.game) .main-board>.hangman-stage-rechts{grid-column:2!important;grid-row:2!important;display:flex!important;flex-direction:column!important;min-width:0!important;min-height:200px!important;height:100%!important;width:100%!important;gap:0!important;padding:0!important;margin:0!important;box-sizing:border-box!important;position:relative!important;}
 body:has(.game) .main-board>.hangman-stage-rechts .hangman-card-head{position:static!important;width:100%!important;flex:0 0 auto!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;text-align:right!important;margin:0 0 18px!important;padding:10px 12px!important;box-sizing:border-box!important;}
 body:has(.game) .main-board>.hangman-stage-rechts>.word{position:static!important;width:100%!important;flex:0 0 auto!important;margin:0 0 22px!important;padding:14px 18px!important;box-sizing:border-box!important;text-align:center!important;}
 body:has(.game) .main-board>.hangman-stage-rechts>.used{position:static!important;width:100%!important;flex:0 0 auto!important;margin:0 0 22px!important;padding:10px 12px!important;box-sizing:border-box!important;text-align:left!important;}
 body:has(.game) .main-board>.hangman-stage-rechts>.turn-msg{position:static!important;width:100%!important;flex:1 1 auto!important;min-height:42px!important;margin:0!important;padding:10px 12px!important;box-sizing:border-box!important;text-align:left!important;display:block!important;visibility:visible!important;opacity:1!important;overflow:visible!important;}
 body:has(.game) .main-board>.hangman-stage-rechts>.word-info-trigger{position:absolute!important;right:10px!important;bottom:10px!important;margin:0!important;}
}
@media (max-width:1000px){
 body:has(.game) .main-board{display:flex!important;flex-direction:column!important;}
 body:has(.game) .main-board>.hangman-stage{min-height:200px!important;}
 body:has(.game) .main-board>.hangman-stage-rechts{display:flex!important;flex-direction:column!important;width:100%!important;}
}


/* ============================================================
   FINAL MAIN-BOARD FIT
   Two real columns, bounded by the main-board height.
   Nothing may protrude outside the main-board.
   ============================================================ */
@media (min-width:1001px){
  body:has(.game) .main-board{
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    column-gap:18px!important;
    row-gap:10px!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    align-items:stretch!important;
  }

  body:has(.game) .main-board>h2{
    grid-column:1 / -1!important;
    grid-row:1!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  /* LEFT: only the Hangman artwork. */
  body:has(.game) .main-board>.hangman-stage{
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:200px!important;
    max-height:100%!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board>.hangman-stage .hangman-art{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board>.hangman-stage .hangman-3d-fixed{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
    flex:1 1 auto!important;
    box-sizing:border-box!important;
  }

  /* RIGHT: one bounded vertical information stage. */
  body:has(.game) .main-board>.hangman-stage-rechts{
    grid-column:2!important;
    grid-row:2!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    position:relative!important;
  }

  body:has(.game) .main-board>.hangman-stage-rechts .hangman-card-head{
    position:static!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 14px!important;
    padding:8px 12px!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    text-align:right!important;
    box-sizing:border-box!important;
  }

  body:has(.game) .main-board>.hangman-stage-rechts>.word{
    position:static!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 18px!important;
    padding:12px 16px!important;
    box-sizing:border-box!important;
    text-align:center!important;
  }

  body:has(.game) .main-board>.hangman-stage-rechts>.used{
    position:static!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 18px!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }

  body:has(.game) .main-board>.hangman-stage-rechts>.turn-msg{
    position:static!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:32px!important;
    margin:0!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    text-align:left!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    overflow:hidden!important;
  }

  body:has(.game) .main-board>.hangman-stage-rechts>.word-info-trigger{
    position:absolute!important;
    right:10px!important;
    bottom:10px!important;
    margin:0!important;
  }
}

/* ============================================================
   RESPONSIVE GLASS-BLUE DESIGN — mobile / tablet
   Keeps desktop rules untouched; visual override only.
   ============================================================ */
@media (max-width:1000px){
  :root{
    --glass-mobile:rgba(8,32,49,.78);
    --glass-mobile-strong:rgba(10,46,68,.90);
    --glass-line-mobile:rgba(79,205,238,.42);
    --glass-text-mobile:#eafaff;
    --glass-muted-mobile:#9bc4d2;
  }
  body{
    background:
      radial-gradient(circle at 50% -10%,rgba(25,167,214,.34),transparent 38%),
      radial-gradient(circle at 8% 82%,rgba(16,101,150,.28),transparent 34%),
      linear-gradient(145deg,#03101c 0%,#071e30 48%,#04121f 100%) !important;
    color:var(--glass-text-mobile)!important;
  }
  body:before{
    opacity:.22!important;
    background-image:linear-gradient(90deg,transparent 49.6%,rgba(54,202,238,.20) 50%,transparent 50.4%),linear-gradient(0deg,transparent 49.6%,rgba(54,202,238,.14) 50%,transparent 50.4%)!important;
    background-size:54px 54px!important;
  }
  .app{padding:10px 10px 18px!important;max-width:100%!important}
  .top{padding:8px 8px 12px!important;border-bottom-color:rgba(75,198,232,.28)!important}
  .eyebrow,.brand-subtitle{color:#8cc8da!important;text-shadow:none!important}
  .top h1{color:#f1fbff!important;text-shadow:0 0 18px rgba(31,202,238,.22)!important}
  .top h1 span{color:#9dbbc6!important}

  .card,.main-board,.middle-side,.side,
  .hangman-stage,.computer-opponent,.leader{
    background:linear-gradient(145deg,rgba(13,48,69,.88),rgba(4,24,39,.82))!important;
    border:1px solid var(--glass-line-mobile)!important;
    box-shadow:0 14px 35px rgba(0,0,0,.34),inset 0 1px 0 rgba(214,248,255,.13),0 0 0 1px rgba(30,178,220,.06)!important;
    color:var(--glass-text-mobile)!important;
    backdrop-filter:blur(14px) saturate(135%)!important;
    -webkit-backdrop-filter:blur(14px) saturate(135%)!important;
  }
  .card:before,.main-board:before,.side:before{border-color:rgba(76,207,240,.18)!important}
  .main-board{border-radius:20px!important;padding:20px 14px!important;overflow:hidden!important}
  .side{border-radius:20px!important;padding:16px!important}
  .middle-side{border-radius:18px!important;padding:15px 12px!important}

  .team{
    background:linear-gradient(135deg,rgba(14,70,96,.92),rgba(7,38,57,.84))!important;
    border-color:rgba(73,202,236,.34)!important;color:#effbff!important;
    box-shadow:0 8px 20px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.10)!important;
  }
  .team.active{border-color:#37d9f3!important;box-shadow:0 0 0 2px rgba(55,217,243,.16),0 0 24px rgba(29,192,232,.20)!important}
  .round,.used,.hangman-card-head,.timer-card small,.timer-card span,.letter-status{color:var(--glass-muted-mobile)!important}
  .round i,.turn-msg{color:#55ddf5!important}
  .team strong,.hangman-card-head strong{color:#ffd275!important}

  .category-pill{
    background:linear-gradient(180deg,rgba(18,76,101,.88),rgba(8,43,62,.86))!important;
    border-color:rgba(70,207,239,.46)!important;color:#bceefa!important;
    box-shadow:inset 0 1px rgba(255,255,255,.10),0 6px 16px rgba(0,0,0,.20)!important;
  }
  .main-board h2{color:#dff7ff!important}
  .word{color:#fff!important;text-shadow:0 0 14px rgba(59,214,246,.24)!important}
  .hangman-stage{max-width:none!important;width:100%!important;border-radius:17px!important}
  .hangman-stage:before{opacity:.18!important}

  .timer-card #timer{color:#5be2f8!important;text-shadow:0 0 16px rgba(40,207,239,.22)!important}
  .pause-btn,.guide-link,.fullscreen-btn,.solve button,.game-control-btn-v3{
    background:linear-gradient(180deg,rgba(22,83,108,.96),rgba(7,42,61,.96))!important;
    color:#e9faff!important;border-color:rgba(75,205,238,.46)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 17px rgba(0,0,0,.25)!important;
  }
  .letter{
    background:linear-gradient(180deg,rgba(24,79,101,.94),rgba(7,39,57,.94))!important;
    color:#e9fbff!important;border-color:rgba(67,194,226,.34)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.10),0 3px 8px rgba(0,0,0,.22)!important;
  }
  .letter:hover{background:linear-gradient(180deg,rgba(30,112,139,.98),rgba(9,58,78,.98))!important;color:#fff!important;border-color:#43d7f1!important}
  .letter.used,.letter.locked:not(.used){background:rgba(24,54,67,.58)!important;color:#6f96a4!important;border-color:rgba(76,125,142,.22)!important}
  .solve input,input,select{background:rgba(3,25,39,.76)!important;color:#edfaff!important;border-color:rgba(69,181,213,.36)!important}
  .vowels button{background:linear-gradient(180deg,#ffe6af,#eab45e)!important;color:#603b10!important}
  .spin{box-shadow:0 7px 17px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.55)!important}
  .wheel{box-shadow:0 0 0 4px rgba(72,192,224,.34),0 14px 28px rgba(0,0,0,.42)!important}

  .game-notice,.event-overlay .event-card{
    background:linear-gradient(145deg,rgba(12,55,78,.98),rgba(4,27,43,.98))!important;
    color:#eafaff!important;border-color:#32d2ef!important;
    box-shadow:0 20px 55px rgba(0,0,0,.48),0 0 28px rgba(37,201,235,.13)!important;
    backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  }
}

@media (max-width:600px){
  .app{padding:7px 7px 14px!important}
  .top h1{font-size:clamp(20px,7vw,27px)!important}
  .top-actions{gap:7px!important}
  .guide-link,.fullscreen-btn{min-height:40px!important;padding:0 11px!important;font-size:9px!important}
  .scorebar{gap:7px!important}
  .team{padding:9px 10px!important;min-width:0!important}
  .main-board{padding:16px 10px!important}
  .hangman-stage{min-height:220px!important}
  .word{font-size:clamp(23px,8vw,34px)!important;letter-spacing:.10em!important}
  .letter-row{gap:5px!important}.letter{border-radius:7px!important}
}

/* Elektro-Wiki integration */
.top-actions .wiki-link{border-color:rgba(40,204,227,.55)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 18px rgba(40,204,227,.16)!important}.word-info-wiki{display:flex;align-items:center;justify-content:center;margin:18px 0 10px;min-height:44px;padding:10px 16px;border:1px solid rgba(53,217,255,.55);border-radius:12px;background:linear-gradient(145deg,rgba(12,55,72,.96),rgba(15,99,119,.88));color:#e9fcff;text-decoration:none;font-weight:1000;letter-spacing:.05em;box-shadow:0 0 18px rgba(53,217,255,.16),inset 0 1px rgba(255,255,255,.14)}.word-info-wiki:hover{border-color:#ffd65c;color:#ffd65c}




/* FIRST-SESSION WELCOME PRELOADER V11 — separated background / foreground / glass UI */
html.hh-preloading,html.hh-preloading body{overflow:hidden!important}
.hh-welcome{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:#08020d;color:#fff;overflow:hidden;transition:opacity .65s ease}
.hh-welcome[hidden]{display:none}.hh-welcome-out{opacity:0;pointer-events:none}
.hh-welcome-bg{position:absolute;inset:-3%;background:url('../images/preloader-casino-bg.webp') center/cover no-repeat;transform:scale(1.04);filter:saturate(1.12) brightness(.72)}
/* This entire foreground unit is always visible and maximized. */
.hh-welcome-stage{position:relative;width:min(96vw,153vh);aspect-ratio:1115/730;max-height:96vh;flex:none;filter:drop-shadow(0 16px 34px rgba(0,0,0,.52))}
.hh-welcome-foreground{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
/* Dynamic content sits inside the empty gold-frame field of the foreground artwork. */
.hh-loader-card{position:absolute;left:25.7%;top:37.2%;width:49.0%;height:36.0%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:1.7% 3.0%;text-align:center;border:1px solid rgba(255,222,137,.35);border-radius:5.5%;background:linear-gradient(145deg,rgba(18,8,25,.66),rgba(5,2,11,.46));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 32px rgba(164,38,255,.12),0 10px 35px rgba(0,0,0,.20);backdrop-filter:blur(13px) saturate(1.28);-webkit-backdrop-filter:blur(13px) saturate(1.28);overflow:hidden}
.hh-loader-card:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 23%,transparent 70%,rgba(255,200,76,.06));pointer-events:none}
.hh-loader-card>*{position:relative;z-index:1}
.hh-welcome-title{font:800 clamp(13px,2vh,27px)/1.05 Georgia,serif;color:#ffe8ad;text-shadow:0 0 9px rgba(255,174,0,.9);letter-spacing:.055em}
.hh-loader-status{font-size:clamp(9px,1.3vh,17px);margin:.35vh 0;color:#fff}
.hh-countdown,.hh-asset-text{font-size:clamp(7px,1vh,13px);color:#f8eafa;margin-top:.35vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-progress-wrap{height:clamp(9px,1.35vh,18px);margin:.55vh 0 .18vh;border:1px solid rgba(255,230,157,.92);border-radius:999px;background:rgba(16,5,25,.58);overflow:hidden;box-shadow:inset 0 1px 2px rgba(255,255,255,.16),0 0 12px rgba(255,188,0,.56);backdrop-filter:blur(5px)}
.hh-progress-bar{height:100%;width:0;background:linear-gradient(90deg,rgba(108,23,255,.96),rgba(239,0,255,.94),rgba(255,184,20,.94));box-shadow:0 0 15px rgba(245,0,255,.9);transition:width .18s linear}
.hh-progress-text{font:700 clamp(9px,1.2vh,16px) Georgia,serif;color:#ffe5a3;text-shadow:0 0 7px #ff9800}
.hh-tip{margin-top:.35vh;min-height:2.25em;padding:.25em .7em;border:1px solid rgba(220,128,255,.22);border-radius:999px;background:rgba(80,17,104,.13);font-size:clamp(7px,.92vh,12px);line-height:1.25;color:#ffeab8;opacity:1;transition:opacity .28s ease,transform .28s ease;backdrop-filter:blur(7px)}
.hh-tip.is-changing{opacity:0;transform:translateY(4px)}
.hh-start-button{align-self:center;margin:.45vh auto 0;padding:clamp(5px,.7vh,9px) clamp(15px,1.7vw,28px);border:1px solid rgba(255,231,156,.96);border-radius:999px;background:linear-gradient(180deg,rgba(169,38,255,.88),rgba(78,7,177,.80));color:#fff;font:800 clamp(8px,1.08vh,14px)/1.1 Arial,sans-serif;letter-spacing:.05em;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 12px #ffcf40,0 0 25px rgba(225,0,255,.68);text-shadow:0 1px 3px #000;backdrop-filter:blur(9px);animation:hhStartPulse 1.25s ease-in-out infinite alternate}
.hh-start-button:hover{transform:scale(1.04);filter:brightness(1.18)}.hh-start-button:disabled{opacity:.65;cursor:default}
html.hh-preloading body > *:not(#hhWelcome):not(script){visibility:hidden!important}
html.hh-preloading #hhWelcome,html.hh-preloading #hhWelcome *{visibility:visible!important}
html.hh-preloading #hhWelcome{opacity:1!important;pointer-events:auto!important}
@keyframes hhStartPulse{from{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 9px #ffcf40,0 0 18px rgba(225,0,255,.48)}to{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 0 19px #ffd75b,0 0 35px rgba(225,0,255,.9)}}
@media(max-width:700px){.hh-welcome-stage{width:100vw}.hh-loader-card{left:24.5%;width:51%;padding:1% 2.3%}}



/* ================================================================
   GLÜCKSRAD 3D DEKAGON V3 — HOLLOW FRAME ARCHITECTURE
   Functional wheel stays live. The luxury 3D frame is stationary.
   ================================================================ */
body:has(.game) .wheel-wrap{
  position:relative;
  isolation:isolate;
  overflow:visible!important;
}

/* Existing wheel = rotating inner functional layer only. */
body:has(.game) .wheel{
  position:relative;
  z-index:2;
  clip-path:polygon(50% 0%,79.389% 9.549%,97.553% 34.549%,97.553% 65.451%,79.389% 90.451%,50% 100%,20.611% 90.451%,2.447% 65.451%,2.447% 34.549%,20.611% 9.549%)!important;
  -webkit-clip-path:polygon(50% 0%,79.389% 9.549%,97.553% 34.549%,97.553% 65.451%,79.389% 90.451%,50% 100%,20.611% 90.451%,2.447% 65.451%,2.447% 34.549%,20.611% 9.549%)!important;
  border:0!important;
  box-shadow:none!important;
}

/* Stationary luxury frame: it does NOT rotate with .wheel. */
body:has(.game) .wheel-wrap::after{
  content:"";
  position:absolute;
  z-index:8;
  pointer-events:none;
  left:-11%;
  top:-13%;
  width:122%;
  height:126%;
  background:url('../images/gluecksrad-dekagon-rahmen-3d.webp') center/contain no-repeat;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.55)) drop-shadow(0 0 11px rgba(255,190,38,.34));
}

/* Functional text stays crisp and above the rotating colored segments. */
body:has(.game) .wheel .seg{z-index:3!important}
body:has(.game) .wheel .seg span,
body:has(.game) .wheel .seg .label{
  color:#fff8df!important;
  font-family:"Trebuchet MS",Arial,sans-serif!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
  text-shadow:-1px -1px 0 rgba(25,8,0,.88),1px -1px 0 rgba(25,8,0,.88),-1px 1px 0 rgba(25,8,0,.88),1px 1px 0 rgba(25,8,0,.88),0 2px 3px rgba(0,0,0,.82),0 0 5px rgba(255,208,92,.38)!important;
}

/* Center control is visually independent from the rotating segment artwork. */
body:has(.game) .wheel-label{
  z-index:5!important;
  color:#fff4d2!important;
  border:2px solid rgba(255,222,127,.94)!important;
  background:radial-gradient(circle at 45% 30%,rgba(87,31,112,.97),rgba(14,5,24,.98) 68%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 3px rgba(104,53,8,.65),0 0 13px rgba(255,192,43,.55)!important;
  text-shadow:0 2px 3px #000,0 0 7px rgba(255,196,49,.42)!important;
}

/* Existing pointer remains the actual hit marker and sits above the frame. */
body:has(.game) .pointer{
  z-index:12!important;
  border-top-color:#ffd65f!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.82)) drop-shadow(0 0 7px rgba(255,197,43,.9))!important;
}


/* ================================================================
   GLÜCKSRAD 3D RAHMEN V4 — PROPORTIONSKORREKTUR
   Screenshot-Tuning: mehr Spielfläche, weniger Rahmen, mehr Freiraum.
   ================================================================ */

/* Give the complete assembly breathing room inside its panel. */
body:has(.game) .wheel-wrap{
  transform:scale(.91);
  transform-origin:50% 50%;
  margin-top:8px;
  margin-bottom:8px;
}

/* Enlarge the live rotating wheel relative to the decorative frame.
   This pushes the coloured segments closer to the inner gold rim. */
body:has(.game) .wheel{
  transform-origin:50% 50%!important;
}

/* V3 was 122% x 126% and too dominant. Tighten the stationary frame. */
body:has(.game) .wheel-wrap::after{
  left:-4.5%!important;
  top:-6.0%!important;
  width:109%!important;
  height:112%!important;
  background-size:contain!important;
}

/* Make the existing CSS pointer less dominant. */
body:has(.game) .pointer{
  transform:scale(.78);
  transform-origin:50% 0;
}

/* Slightly reduce the center hub visually so segment labels gain room. */
body:has(.game) .wheel-label{
  transform:translate(-50%,-50%) scale(.86)!important;
  transform-origin:50% 50%!important;
}

/* Improve readability/consistency of the live labels. */
body:has(.game) .wheel .seg span,
body:has(.game) .wheel .seg .label{
  font-size:.94em!important;
  line-height:1!important;
  white-space:nowrap!important;
}


/* ================================================================
   GLÜCKSRAD V8 — TRANSPARENTER 3D-RAHMEN MIT STANDFUSS
   Finales Layer-Prinzip:
   - dynamisches Rad dreht
   - 3D-Gehäuse + Standfuß bleiben stehen
   - Mittelnabe bleibt unverändert
   - enger Innenring / längere Segmente
   ================================================================ */
body:has(.game) .wheel-wrap{
  transform:scale(.88)!important;
  transform-origin:50% 46%!important;
  margin-top:2px!important;
  margin-bottom:34px!important;
  overflow:visible!important;
}

/* Functional wheel enlarged inside the housing. */
body:has(.game) .wheel{
  z-index:2!important;
  transform-origin:50% 50%!important;
  clip-path:polygon(50% 0%,79.389% 9.549%,97.553% 34.549%,97.553% 65.451%,79.389% 90.451%,50% 100%,20.611% 90.451%,2.447% 65.451%,2.447% 34.549%,20.611% 9.549%)!important;
}

/* New transparent housing including pedestal. */
body:has(.game) .wheel-wrap::after{
  content:"";
  position:absolute;
  z-index:8;
  pointer-events:none;
  left:-7%!important;
  top:-9%!important;
  width:114%!important;
  height:132%!important;
  background:url('../images/gluecksrad-dekagon-rahmen-3d.webp') center top/contain no-repeat!important;
  filter:drop-shadow(0 10px 13px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,190,38,.30));
}

/* Keep RAD DREHEN at the proven V4 size. */
body:has(.game) .wheel-label{
  transform:translate(-50%,-50%) scale(.86)!important;
  z-index:11!important;
}

/* No artificial extra inner disc/ring from V5-V7. */
body:has(.game) .wheel-wrap::before{content:none!important}
body:has(.game) .wheel-label::after{content:none!important}

/* Pointer remains functional above the housing. */
body:has(.game) .pointer{
  z-index:12!important;
  transform:scale(.78)!important;
  transform-origin:50% 0!important;
}


/* ================================================================
   GLÜCKSRAD V11 — ASSET-PROPORTIONEN / TYPO / SUPER-JACKPOT
   Die Rahmen-GRAFIK selbst wurde horizontal auf 91 % korrigiert.
   Keine CSS-Stauchung des funktionalen Rades.
   ================================================================ */

/* Keep V8 housing geometry; corrected proportions are now inside the image asset. */
body:has(.game) .wheel-wrap::after{
  left:-7%!important;
  width:114%!important;
  top:-9%!important;
  height:132%!important;
  background-size:contain!important;
}

/* Stationary center caption, exactly two centered lines. */
body:has(.game) .wheel-wrap::before{
  content:"RAD\A DREHEN"!important;
  white-space:pre!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:18.5%!important;
  aspect-ratio:1/1!important;
  transform:translate(-50%,-50%)!important;
  z-index:14!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  pointer-events:none!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff0c6!important;
  font-family:"Trebuchet MS",Arial,sans-serif!important;
  font-size:clamp(10px,1.02vw,14px)!important;
  line-height:1.02!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
  text-shadow:
    -1px -1px 0 #4d2500,1px -1px 0 #4d2500,
    -1px 1px 0 #4d2500,1px 1px 0 #4d2500,
    0 2px 3px #000,0 0 6px rgba(255,193,42,.55)!important;
}

/* Keep original rotating center control active but visually hidden. */
body:has(.game) .wheel-label{
  color:transparent!important;
  text-shadow:none!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* Typography matched to the new luxury reference:
   dark letters + warm cream contour on normal fields. */
body:has(.game) .wheel-segment b{
  font-family:"Trebuchet MS",Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:1000!important;
  letter-spacing:.015em!important;
  color:#17110d!important;
  text-shadow:
    -1px -1px 0 #fff1c8,
     1px -1px 0 #fff1c8,
    -1px  1px 0 #fff1c8,
     1px  1px 0 #fff1c8,
     0 2px 2px rgba(0,0,0,.42)!important;
}

/* BANKROTT / JACKPOT: cream-white type with deep contour. */
body:has(.game) .wheel-segment.bankrupt b,
body:has(.game) .wheel-segment.jackpot b,
body:has(.game) .wheel-segment:nth-child(10) b,
body:has(.game) .wheel-segment:nth-child(11) b{
  font-size:10.5px!important;
  color:#fff1d0!important;
  text-shadow:
    -1px -1px 0 #241006,
     1px -1px 0 #241006,
    -1px  1px 0 #241006,
     1px  1px 0 #241006,
     0 2px 3px #000!important;
}

/* ROUND 10: Jackpot becomes the visual star.
   Glow intentionally spills across neighbouring wedges. */
body:has(.game) .wheel.super-round .wheel-segment.jackpot{
  z-index:30!important;
  filter:
    drop-shadow(0 0 7px rgba(255,235,105,1))
    drop-shadow(0 0 16px rgba(255,194,0,.95))
    drop-shadow(0 0 28px rgba(255,148,0,.72))!important;
}
body:has(.game) .wheel.super-round .wheel-segment.jackpot::before{
  opacity:.72!important;
  animation:superJackpotGoldMega 1.05s ease-in-out infinite!important;
  filter:
    brightness(1.45) saturate(1.55)
    drop-shadow(0 0 8px rgba(255,244,151,1))
    drop-shadow(0 0 18px rgba(255,205,37,1))
    drop-shadow(0 0 34px rgba(255,154,0,.9))!important;
}
body:has(.game) .wheel.super-round .wheel-segment.jackpot b{
  z-index:31!important;
  color:#fff8dc!important;
  text-shadow:
    -1px -1px 0 #3d1b00,1px -1px 0 #3d1b00,
    -1px 1px 0 #3d1b00,1px 1px 0 #3d1b00,
    0 0 6px #fff3a1,0 0 13px #ffc400,0 2px 3px #000!important;
}
@keyframes superJackpotGoldMega{
  0%,100%{
    opacity:.42;
    filter:brightness(1.05) saturate(1.15)
      drop-shadow(0 0 5px rgba(255,220,73,.75))
      drop-shadow(0 0 12px rgba(255,174,0,.55));
  }
  50%{
    opacity:1;
    filter:brightness(2.05) saturate(1.9)
      drop-shadow(0 0 11px rgba(255,250,190,1))
      drop-shadow(0 0 25px rgba(255,213,42,1))
      drop-shadow(0 0 46px rgba(255,137,0,.95));
  }
}


/* PRELOADER DOWNLOAD CONFIRMATION V1 */
.hh-download-decision{margin-top:.55vh;padding:.55em .75em;border:1px solid rgba(255,222,137,.35);border-radius:12px;background:rgba(10,3,18,.48);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.hh-download-question{font-size:clamp(8px,1.08vh,14px);line-height:1.35;color:#fff2c9;font-weight:800;text-shadow:0 1px 3px #000}
.hh-download-actions{display:flex;justify-content:center;gap:clamp(7px,.7vw,12px);margin-top:.55em}
.hh-decision-button{min-width:clamp(82px,8vw,125px);padding:clamp(5px,.65vh,8px) clamp(9px,1vw,16px);border-radius:999px;font:900 clamp(7px,.95vh,12px)/1 Arial,sans-serif;letter-spacing:.045em;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.hh-decision-button:hover{transform:scale(1.035);filter:brightness(1.13)}
.hh-decision-yes{border:1px solid rgba(255,231,156,.96);background:linear-gradient(180deg,rgba(169,38,255,.92),rgba(78,7,177,.88));color:#fff;box-shadow:0 0 12px rgba(255,207,64,.65),0 0 20px rgba(225,0,255,.45)}
.hh-decision-no{border:1px solid rgba(255,119,119,.75);background:linear-gradient(180deg,rgba(82,22,34,.92),rgba(39,7,14,.9));color:#ffd9d9;box-shadow:0 0 12px rgba(255,45,74,.22)}
.hh-sorry-page{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 38%,rgba(109,24,145,.28),transparent 36%),linear-gradient(160deg,#13051d 0%,#07030b 58%,#020103 100%);text-align:center}
.hh-sorry-card{width:min(620px,92vw);padding:clamp(28px,5vw,52px);border:1px solid rgba(255,222,137,.46);border-radius:28px;background:linear-gradient(145deg,rgba(31,12,42,.92),rgba(8,3,13,.94));box-shadow:0 25px 80px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.13),0 0 45px rgba(160,31,224,.18);color:#fff}
.hh-sorry-icon{font-size:clamp(52px,8vw,86px);line-height:1;filter:drop-shadow(0 0 18px rgba(255,190,46,.45))}
.hh-sorry-kicker{margin-top:18px;font-size:12px;font-weight:1000;letter-spacing:.18em;color:#d997ff}
.hh-sorry-card h2{margin:8px 0 12px;font:800 clamp(30px,5vw,52px)/1 Georgia,serif;color:#ffe6a0;text-shadow:0 0 15px rgba(255,173,0,.35)}
.hh-sorry-card p{max-width:500px;margin:0 auto;color:#eadff0;font-size:clamp(14px,2vw,17px);line-height:1.55}
.hh-sorry-note{margin-top:18px!important;padding-top:17px;border-top:1px solid rgba(255,255,255,.12);font-size:13px!important;color:#bdaec5!important}

/* Benutzerkonto V1.2 – kompakter Header */
.user-mini{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 8px;border:1px solid rgba(102,173,255,.28);border-radius:999px;background:rgba(5,18,48,.58);box-shadow:inset 0 1px rgba(255,255,255,.08);font-size:11px;white-space:nowrap}.user-mini a{text-decoration:none}.user-question{color:#aebdd8}.user-login,.user-register,.user-chip,.user-mail{color:#eaf4ff;font-weight:800}.user-register{color:#74c9ff}.user-dot{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#39df91;box-shadow:0 0 8px #39df91}.user-mail b{color:#78d2ff}.user-sep{opacity:.35}@media(max-width:900px){.user-question{display:none}.user-mini{font-size:10px;padding:2px 6px}.user-register{max-width:92px;overflow:hidden;text-overflow:ellipsis}}

/* Benutzerkonto V1.2.2 – kompakt direkt unter DUELL STARTEN */
.start-account-mini{display:flex;align-items:center;justify-content:center;gap:7px;margin:7px auto 0;padding:3px 9px;width:max-content;max-width:100%;min-height:24px;border:1px solid rgba(95,154,225,.22);border-radius:999px;background:rgba(5,16,42,.42);color:#9eb2d3;font-size:10px;line-height:1.2;white-space:nowrap}
.start-account-mini a{color:#dcecff;text-decoration:none;font-weight:800;letter-spacing:.03em}.start-account-mini a:hover{color:#fff;text-shadow:0 0 8px #5db9ff}.start-account-mini .register{color:#67c8ff}.start-account-mini .start-account-sep{opacity:.35}.start-account-mini .user-dot{width:6px;height:6px;margin-right:4px}.start-account-status strong{color:#eaf4ff}@media(max-width:520px){.start-account-mini{font-size:9px;gap:5px;padding:3px 7px}}

/* Loginstatus-Schlüssel */
.login-key-btn{width:34px;height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid;text-decoration:none;font-size:17px;line-height:1;box-sizing:border-box;transition:filter .18s,box-shadow .18s,transform .18s}
.login-key-btn.is-logged-in{background:rgba(38,166,91,.18);border-color:rgba(73,226,137,.72);box-shadow:0 0 10px rgba(54,220,126,.22)}
.login-key-btn.is-logged-out{background:rgba(190,55,55,.16);border-color:rgba(255,91,91,.65);filter:grayscale(.18)}
.login-key-btn:hover{transform:translateY(-1px);filter:brightness(1.15)}

/* ================================================================
 * STARTSEITE DESKTOP – VIEWPORT-RASTER
 * Version V3.0 / Stand 26.09.2026
 *
 * Aufgabe dieses Abschnitts:
 * - widersprüchliche ältere Desktop-Overrides vollständig ersetzen;
 * - Header, Hero, Startformular und Kategorien in einen Viewport einpassen;
 * - keine Skalierung per zoom/transform für die gesamte Seite verwenden;
 * - die Brain-Animation vollständig und höher im Bildfenster darstellen;
 * - Kategorien bei Platzmangel intern scrollen statt die Seite zu verlängern.
 * ================================================================ */
@media (min-width:1181px){
  body:has(.start-page-v3){overflow-x:hidden!important}
  body:has(.start-page-v3) .app{
    width:100%!important;max-width:none!important;
    padding:8px 12px 10px!important;
  }

  /* Kompakter Kopfbereich. Der Untertitel endet immer 10 px vor
     der rechten Innenkante und kann nicht über die Navigation laufen. */
  body:has(.start-page-v3) header.top{
    position:relative!important;
    min-height:88px!important;height:88px!important;
    padding:8px 18px!important;
  }
  body:has(.start-page-v3) .brand-subtitle{
    position:absolute!important;top:7px!important;right:10px!important;
    width:auto!important;max-width:calc(100% - 20px)!important;
    margin:0!important;text-align:right!important;white-space:nowrap!important;
    overflow:hidden!important;
  }
  body:has(.start-page-v3) .top h1{font-size:28px!important;line-height:1!important;margin:4px 0 0!important}
  body:has(.start-page-v3) .top-actions{gap:10px!important}

  /* Die gesamte Startfläche bleibt innerhalb des ersten Viewports.
     Die rechte Spalte übernimmt exakt die Höhe der linken Spalte. */
  body:has(.start-page-v3) .start-grid{
    grid-template-columns:minmax(0,1.9fr) minmax(440px,1fr)!important;
    gap:12px!important;margin-top:10px!important;
    height:calc(100vh - 116px)!important;
    min-height:610px!important;max-height:760px!important;
    align-items:stretch!important;
  }
  body:has(.start-page-v3) .start-left-column{
    display:grid!important;
    grid-template-rows:minmax(220px,38%) minmax(360px,62%)!important;
    gap:10px!important;min-height:0!important;height:100%!important;
  }

  /* Hero: Motiv bewusst höher setzen, ohne es abzuschneiden. */
  body:has(.start-page-v3) .hero-banner{
    height:100%!important;min-height:0!important;max-height:none!important;
    grid-template-columns:300px minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  body:has(.start-page-v3) .hero-banner-visual{
    width:300px!important;min-width:300px!important;height:100%!important;
    display:flex!important;align-items:flex-start!important;justify-content:center!important;
    overflow:hidden!important;padding:2px 0 0!important;
  }
  body:has(.start-page-v3) .hero-banner-visual img{
    width:min(272px,92%)!important;height:auto!important;
    max-width:272px!important;max-height:calc(100% + 24px)!important;
    object-fit:contain!important;object-position:center top!important;
    transform:translateY(-18px)!important;margin:0!important;
  }
  body:has(.start-page-v3) .hero-banner-copy{padding:18px 28px!important}
  body:has(.start-page-v3) .hero-kicker{font-size:10px!important;line-height:1.1!important;margin:0 0 7px!important}
  body:has(.start-page-v3) .hero-banner h2{font-size:32px!important;line-height:.98!important;margin:5px 0 9px!important}
  body:has(.start-page-v3) .hero-lead{font-size:12px!important;line-height:1.3!important;margin:4px 0!important}

  /* Startformular: alle Höhen gehören zu demselben Raster. Dadurch
     können Labels und Schriften nicht mehr in Nachbarfelder ragen. */
  body:has(.start-page-v3) .start-panel-v3{
    height:100%!important;min-height:0!important;max-height:none!important;
    padding:11px 14px 9px!important;overflow:hidden!important;
  }
  body:has(.start-page-v3) .start-panel-title-v3{font-size:22px!important;line-height:1!important;margin:0 0 7px!important}
  body:has(.start-page-v3) .start-form-v3{gap:5px!important;min-height:0!important}
  body:has(.start-page-v3) .team-fields-v3,
  body:has(.start-page-v3) .computer-row-v3{gap:9px!important}
  body:has(.start-page-v3) .start-form-v3 label{font-size:8.5px!important;line-height:1!important;margin:0!important}
  body:has(.start-page-v3) .field-with-icon,
  body:has(.start-page-v3) .computer-select-display-v3,
  body:has(.start-page-v3) .difficulty-display-v3,
  body:has(.start-page-v3) .category-select-v3{height:48px!important;min-height:48px!important;max-height:48px!important}
  body:has(.start-page-v3) .start-form-v3 input,
  body:has(.start-page-v3) .start-form-v3 select{font-size:11.5px!important;line-height:1.1!important}
  body:has(.start-page-v3) .primary-v3{height:52px!important;min-height:52px!important;max-height:52px!important;font-size:17px!important;line-height:1!important;margin-top:1px!important}
  body:has(.start-page-v3) .start-account-mini{margin-top:3px!important;min-height:18px!important;padding:2px 8px!important;font-size:8px!important;line-height:1!important}

  /* Kategorien bleiben vollständig bedienbar. Wenn mehr Kategorien als
     vertikal passen, scrollt ausschließlich diese Spalte. */
  body:has(.start-page-v3) .categories-v3{
    height:100%!important;min-height:0!important;max-height:none!important;
    padding:11px 12px 10px!important;overflow-y:auto!important;overflow-x:hidden!important;
    scrollbar-gutter:stable!important;
  }
  body:has(.start-page-v3) .section-head-v3{min-height:42px!important;margin-bottom:6px!important;padding-bottom:6px!important}
  body:has(.start-page-v3) .section-head-v3 span{font-size:22px!important;line-height:1!important}
  body:has(.start-page-v3) .section-head-v3 b{font-size:8px!important;line-height:1!important}
  body:has(.start-page-v3) .category-grid-v3{gap:6px 9px!important}
  body:has(.start-page-v3) .cat-v3{height:54px!important;min-height:54px!important;padding:5px 8px!important;overflow:hidden!important}
  body:has(.start-page-v3) .cat-icon-v3{width:35px!important;height:35px!important;min-width:35px!important}
  body:has(.start-page-v3) .cat-v3 strong{font-size:10.5px!important;line-height:1.03!important;margin:0!important}
  body:has(.start-page-v3) .cat-v3 small{font-size:7.5px!important;line-height:1!important;margin-top:2px!important}
}

/* Niedrige Desktopfenster: zusätzliche, aber konsistente Verdichtung.
   Die Proportionen bleiben erhalten; es werden keine Elemente verdeckt. */
@media (min-width:1181px) and (max-height:900px){
  body:has(.start-page-v3) header.top{height:80px!important;min-height:80px!important;padding-top:7px!important;padding-bottom:7px!important}
  body:has(.start-page-v3) .top h1{font-size:26px!important}
  body:has(.start-page-v3) .start-grid{height:calc(100vh - 106px)!important;min-height:0!important;margin-top:8px!important;gap:9px!important}
  body:has(.start-page-v3) .start-left-column{grid-template-rows:minmax(210px,39%) minmax(330px,61%)!important;gap:9px!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:270px minmax(0,1fr)!important}
  body:has(.start-page-v3) .hero-banner-visual{width:270px!important;min-width:270px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:min(245px,92%)!important;max-width:245px!important;transform:translateY(-20px)!important}
  body:has(.start-page-v3) .hero-banner-copy{padding:14px 24px!important}
  body:has(.start-page-v3) .hero-banner h2{font-size:29px!important}
  body:has(.start-page-v3) .start-panel-v3{padding:9px 12px 7px!important}
  body:has(.start-page-v3) .start-panel-title-v3{font-size:20px!important;margin-bottom:5px!important}
  body:has(.start-page-v3) .start-form-v3{gap:4px!important}
  body:has(.start-page-v3) .field-with-icon,
  body:has(.start-page-v3) .computer-select-display-v3,
  body:has(.start-page-v3) .difficulty-display-v3,
  body:has(.start-page-v3) .category-select-v3{height:44px!important;min-height:44px!important;max-height:44px!important}
  body:has(.start-page-v3) .primary-v3{height:48px!important;min-height:48px!important;max-height:48px!important}
  body:has(.start-page-v3) .cat-v3{height:50px!important;min-height:50px!important}
}


/* ================================================================
 * STARTSEITE DESKTOP – FEINTUNING V4.6.8
 * Projektversion V3.0 / Stand 26.09.2026
 *
 * Aufgabe:
 * - linkes Startformular vollständig im ersten Viewport halten;
 * - große Eingabe-/Auswahlflächen deutlich kompakter gestalten;
 * - Brain-Animation in einem eigenen, oben ausgerichteten Bildfenster führen.
 * ================================================================ */
@media (min-width:1181px){
  body:has(.start-page-v3) .start-left-column{
    grid-template-rows:minmax(205px,36%) minmax(0,64%)!important;
  }
  body:has(.start-page-v3) .hero-banner{
    grid-template-columns:250px minmax(0,1fr)!important;
  }
  body:has(.start-page-v3) .hero-banner-visual{
    width:250px!important;min-width:250px!important;height:100%!important;
    padding:0!important;align-items:flex-start!important;overflow:hidden!important;
  }
  body:has(.start-page-v3) .hero-banner-visual img{
    width:225px!important;max-width:225px!important;height:auto!important;
    max-height:none!important;object-fit:contain!important;object-position:center top!important;
    transform:translateY(-34px)!important;
  }
  body:has(.start-page-v3) .hero-banner-copy{padding:12px 24px!important}
  body:has(.start-page-v3) .hero-banner h2{font-size:28px!important;margin:3px 0 6px!important}
  body:has(.start-page-v3) .hero-kicker{font-size:9px!important;margin-bottom:5px!important}
  body:has(.start-page-v3) .hero-lead{font-size:11px!important;margin:2px 0!important}

  body:has(.start-page-v3) .start-panel-v3{padding:7px 12px 6px!important}
  body:has(.start-page-v3) .start-panel-title-v3{font-size:19px!important;margin:0 0 4px!important}
  body:has(.start-page-v3) .start-form-v3{gap:3px!important}
  body:has(.start-page-v3) .team-fields-v3,
  body:has(.start-page-v3) .computer-row-v3{gap:8px!important}
  body:has(.start-page-v3) .start-form-v3 label{font-size:8px!important;line-height:1!important}
  body:has(.start-page-v3) .field-with-icon,
  body:has(.start-page-v3) .computer-select-display-v3,
  body:has(.start-page-v3) .difficulty-display-v3,
  body:has(.start-page-v3) .category-select-v3{
    height:36px!important;min-height:36px!important;max-height:36px!important;
    border-radius:10px!important;
  }
  body:has(.start-page-v3) .field-with-icon .field-icon,
  body:has(.start-page-v3) .computer-select-display-v3 .field-icon,
  body:has(.start-page-v3) .difficulty-display-v3 .field-icon,
  body:has(.start-page-v3) .category-select-v3 .field-icon{
    width:36px!important;min-width:36px!important;height:36px!important;font-size:18px!important;
  }
  body:has(.start-page-v3) .start-form-v3 input,
  body:has(.start-page-v3) .start-form-v3 select{font-size:10.5px!important}
  body:has(.start-page-v3) .primary-v3{
    height:40px!important;min-height:40px!important;max-height:40px!important;
    font-size:15px!important;margin-top:0!important;border-radius:10px!important;
  }
  body:has(.start-page-v3) .start-account-mini{
    margin-top:2px!important;min-height:16px!important;padding:1px 7px!important;font-size:7.5px!important;
  }
}
@media (min-width:1181px) and (max-height:900px){
  body:has(.start-page-v3) .start-left-column{grid-template-rows:minmax(190px,35%) minmax(0,65%)!important}
  body:has(.start-page-v3) .hero-banner{grid-template-columns:230px minmax(0,1fr)!important}
  body:has(.start-page-v3) .hero-banner-visual{width:230px!important;min-width:230px!important}
  body:has(.start-page-v3) .hero-banner-visual img{width:205px!important;max-width:205px!important;transform:translateY(-38px)!important}
  body:has(.start-page-v3) .field-with-icon,
  body:has(.start-page-v3) .computer-select-display-v3,
  body:has(.start-page-v3) .difficulty-display-v3,
  body:has(.start-page-v3) .category-select-v3{height:34px!important;min-height:34px!important;max-height:34px!important}
  body:has(.start-page-v3) .field-with-icon .field-icon,
  body:has(.start-page-v3) .computer-select-display-v3 .field-icon,
  body:has(.start-page-v3) .difficulty-display-v3 .field-icon,
  body:has(.start-page-v3) .category-select-v3 .field-icon{width:34px!important;min-width:34px!important;height:34px!important}
  body:has(.start-page-v3) .primary-v3{height:38px!important;min-height:38px!important;max-height:38px!important}
}

/* ================================================================
 * STARTSEITE – HERO-FEINPOSITIONIERUNG
 * Projektversion V3.0 / Stand 26.09.2026
 *
 * Aufgabe:
 * - Brain-GIF vollständig darstellen, ohne Cropping oder negative Verschiebung;
 * - Textblock im Hero oben ruhiger ausrichten und vertikal entzerren.
 * ================================================================ */
@media (min-width:1181px){
  body:has(.start-page-v3) .hero-banner-visual{
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:visible!important;
    padding:8px 8px 0!important;
  }
  body:has(.start-page-v3) .hero-banner-visual img{
    display:block!important;
    width:auto!important;
    height:calc(100% - 14px)!important;
    max-width:calc(100% - 16px)!important;
    max-height:calc(100% - 14px)!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    margin:0 auto!important;
  }
  body:has(.start-page-v3) .hero-banner-copy{
    align-self:start!important;
    padding:24px 24px 12px!important;
  }
  body:has(.start-page-v3) .hero-kicker{margin:0 0 8px!important}
  body:has(.start-page-v3) .hero-banner h2{margin:5px 0 10px!important}
  body:has(.start-page-v3) .hero-lead{margin:0!important;line-height:1.4!important}
}
@media (min-width:1181px) and (max-height:900px){
  body:has(.start-page-v3) .hero-banner-copy{padding-top:18px!important}
  body:has(.start-page-v3) .hero-banner-visual{padding-top:6px!important}
  body:has(.start-page-v3) .hero-banner-visual img{
    height:calc(100% - 10px)!important;
    max-height:calc(100% - 10px)!important;
  }
}


/* ================================================================
 * STARTSEITE – HERO-REFERENZLAYOUT V3.0
 * Stand 26.09.2026
 *
 * Ordnet die 16:9-Brain-Animation links und den Wissensspiel-Text
 * unmittelbar rechts daneben an. Die Animation bleibt vollständig
 * sichtbar und wird weder beschnitten noch negativ verschoben.
 * ================================================================ */
@media (min-width:1181px){
  body:has(.start-page-v3) .hero-banner{
    display:grid!important;
    grid-template-columns:300px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:18px!important;
    padding:10px 16px!important;
    overflow:hidden!important;
  }
  body:has(.start-page-v3) .hero-banner-visual{
    grid-column:1!important;
    grid-row:1!important;
    width:300px!important;
    min-width:300px!important;
    height:100%!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }
  body:has(.start-page-v3) .hero-banner-visual::before{
    display:none!important;
  }
  body:has(.start-page-v3) .hero-banner-visual img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:300px!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:left center!important;
    transform:none!important;
    margin:0!important;
  }
  body:has(.start-page-v3) .hero-banner-copy{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:stretch!important;
    padding:0 12px 0 0!important;
    margin:0!important;
    min-width:0!important;
    transform:translateY(-6px)!important;
  }
  body:has(.start-page-v3) .hero-kicker{margin:0 0 7px!important}
  body:has(.start-page-v3) .hero-banner h2{margin:0 0 8px!important}
  body:has(.start-page-v3) .hero-lead{margin:0!important}

  /* Der längere offizielle Produktname bleibt in einer Zeile und
     nutzt nur den tatsächlich verfügbaren Platz im Kopfbereich. */
  body:has(.start-page-v3) .top h1{
    white-space:nowrap!important;
    letter-spacing:.055em!important;
    font-size:clamp(22px,1.65vw,28px)!important;
  }
  body:has(.start-page-v3) .top h1 span{letter-spacing:.035em!important}
}

@media (min-width:1181px) and (max-height:900px){
  body:has(.start-page-v3) .hero-banner{grid-template-columns:270px minmax(0,1fr)!important;column-gap:16px!important}
  body:has(.start-page-v3) .hero-banner-visual{width:270px!important;min-width:270px!important}
  body:has(.start-page-v3) .hero-banner-visual img{max-width:270px!important}
  body:has(.start-page-v3) .hero-banner-copy{transform:translateY(-4px)!important}
}

/* ================================================================
 * ACCOUNT-DROPDOWN IM HAUPTHEADER
 * Version V3.0 / Stand 26.09.2026
 *
 * Aufgabe: Schwebende Account-Maske über dem gesamten Seiteninhalt.
 * Alle Schnellzugriffe stehen bewusst vertikal untereinander.
 * ================================================================ */
.account-menu-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.account-menu-wrap>.login-key-btn{
  cursor:pointer;
  font-family:inherit;
}
.account-quick-menu[hidden]{display:none!important}
.account-quick-menu{
  /* fixed + body-Anbindung: Die Maske beeinflusst niemals das Header-Layout. */
  position:fixed!important;
  z-index:2147483000!important;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  width:248px;
  max-width:calc(100vw - 20px);
  padding:9px;
  box-sizing:border-box;
  border:1px solid rgba(49,218,240,.72);
  border-radius:14px;
  background:linear-gradient(155deg,rgba(12,61,78,.995),rgba(5,31,43,.995));
  box-shadow:0 20px 52px rgba(0,0,0,.68),0 0 26px rgba(32,214,232,.18),inset 0 1px 0 rgba(255,255,255,.10);
  overflow:visible;
  isolation:isolate;
}
.account-quick-menu::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-6px;
  left:var(--account-arrow-left,18px);
  width:11px;
  height:11px;
  background:#0c3d4e;
  border-left:1px solid rgba(49,218,240,.72);
  border-top:1px solid rgba(49,218,240,.72);
  transform:rotate(45deg);
}
.account-quick-head{
  position:relative;
  display:block;
  padding:7px 10px 10px;
  margin:0 0 4px;
  border-bottom:1px solid rgba(95,216,235,.20);
}
.account-quick-head small,.account-quick-head strong{display:block}
.account-quick-head small{color:#82b9c7;font-size:8px;font-weight:900;letter-spacing:.13em}
.account-quick-head strong{margin-top:2px;color:#effcff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-quick-menu>a,
.account-quick-logout button{
  /* Jeder Menüpunkt ist eine eigene volle Zeile. */
  width:100%!important;
  min-height:37px;
  display:flex!important;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:8px 11px;
  box-sizing:border-box;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#e9f9fc;
  text-decoration:none;
  text-align:left;
  white-space:nowrap;
  font:800 11px/1.15 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  cursor:pointer;
}
.account-quick-menu>a span,.account-quick-logout button span{
  flex:0 0 18px;
  width:18px;
  text-align:center;
  color:#5ce4f3;
  font-size:13px;
}
.account-quick-menu>a:hover{background:rgba(42,190,215,.14);color:#fff}
.account-quick-logout{
  display:block;
  width:100%;
  margin:5px 0 0;
  padding:5px 0 0;
  border-top:1px solid rgba(255,255,255,.11);
}
.account-quick-logout button{color:#d9b9bd}
.account-quick-logout button span{color:#c9858e}
.account-quick-logout button:hover{background:rgba(155,55,70,.15);color:#ffe7e9}

/* ================================================================
 * EINHEITLICHE HAUPTNAVIGATION
 * Version V3.0 / Stand 26.09.2026
 * Aufgabe: Alle Textbuttons erhalten dieselbe Grundgröße. Die reinen
 * Iconbuttons bleiben quadratisch, besitzen aber exakt dieselbe Höhe.
 * ================================================================ */
@media (min-width:1181px){
  body:has(.start-page-v3) .top-actions .guide-link{
    width:154px!important;min-width:154px!important;height:48px!important;min-height:48px!important;
    padding:0 10px!important;box-sizing:border-box!important;justify-content:center!important;text-align:center!important;
  }
  body:has(.start-page-v3) .top-actions .login-key-btn,
  body:has(.start-page-v3) .top-actions .start-music-toggle{
    width:48px!important;min-width:48px!important;max-width:48px!important;height:48px!important;min-height:48px!important;max-height:48px!important;
    padding:0!important;box-sizing:border-box!important;
  }
}


/* ================================================================
 * VOLTIGMA — Responsive Preloader Artwork
 * Entwickler : Sven Helle | Version: V3.0 | Stand: 26.09.2026
 * Desktop: 16:9 | Mobile portrait: 9:16 | dynamic HTML stays functional
 * ================================================================ */
#hhWelcome.hh-welcome{background:#030913!important;isolation:isolate}
#hhWelcome .hh-welcome-bg{position:absolute;inset:0;transform:none;filter:none;background:#030913 url('../images/voltigma-preloader-landscape.webp') center center/cover no-repeat}
#hhWelcome .hh-welcome-stage{position:relative;width:100vw;height:100dvh;max-height:none;aspect-ratio:auto;filter:none;pointer-events:none}
#hhWelcome .hh-loader-card{pointer-events:auto;position:absolute;left:50%;top:auto;bottom:7%;transform:translateX(-50%);width:min(660px,86vw);height:auto;min-height:180px;max-height:42dvh;padding:clamp(16px,2.3vh,28px);border-radius:22px;overflow:auto;background:linear-gradient(135deg,rgba(2,13,32,.86),rgba(7,24,50,.78));border:1px solid rgba(75,195,255,.65);box-shadow:0 0 40px rgba(0,111,255,.28),inset 0 1px 0 rgba(206,244,255,.25);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
#hhWelcome .hh-welcome-title{color:#e0f7ff;text-shadow:0 0 15px rgba(46,178,255,.95)}
#hhWelcome .hh-progress-wrap{border-color:rgba(88,205,255,.85);box-shadow:0 0 12px rgba(15,164,255,.3)}
#hhWelcome .hh-progress-bar{background:linear-gradient(90deg,#1248e5,#09a9fa,#a5f7ff)}
#hhWelcome .hh-tip{border-color:rgba(83,190,255,.35);color:#dcf7ff;background:rgba(4,42,89,.3)}
@media (orientation:portrait){
 #hhWelcome .hh-welcome-bg{background-image:url('../images/voltigma-preloader-portrait.webp');background-position:center center}
 #hhWelcome .hh-loader-card{bottom:max(3%,env(safe-area-inset-bottom));width:min(92vw,530px);max-height:38dvh;min-height:0;padding:clamp(12px,2vh,22px)}
}
@media (max-height:520px) and (orientation:landscape){
 #hhWelcome .hh-loader-card{bottom:2%;min-height:0;max-height:70dvh;padding:10px 18px}
}