:root{--bg:#050711;--cab:#111827;--cab2:#202943;--screen:#071324;--line:rgba(255,255,255,.18);--text:#f8fbff;--muted:#9fb0d1;--red:#ff2448;--cyan:#42efff;--yellow:#ffe06e;--green:#4dff88;--shadow:0 28px 80px rgba(0,0,0,.58)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#050711;color:var(--text);overflow:hidden}body{background:radial-gradient(circle at 50% -10%,rgba(72,63,166,.55),transparent 38%),linear-gradient(135deg,#04050b,#0b1631 55%,#02030a)}button,a,input{font:inherit}.qq-machine{height:100svh;width:100vw;padding:clamp(8px,1.6vw,20px);display:grid;grid-template-rows:auto 1fr;gap:clamp(8px,1.6vw,18px);background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:50px 50px}.qq-marquee{min-height:76px;border:1px solid var(--line);background:linear-gradient(180deg,#202943,#111827);box-shadow:var(--shadow);display:grid;grid-template-columns:120px 1fr 120px;align-items:center;padding:8px clamp(10px,2vw,22px);position:relative}.qq-title{text-align:center;line-height:1}.qq-title span,.qq-title em{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--cyan);font-weight:1000}.qq-title b{font-size:clamp(30px,5vw,62px);letter-spacing:-.08em;text-shadow:3px 3px 0 var(--red),-3px -3px 0 #243cff}.qq-back,.qq-btn,.qq-big-btn{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.09);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border-radius:0;font-weight:1000;min-height:44px;padding:0 18px;cursor:pointer}.qq-back:hover,.qq-btn:hover{background:rgba(255,255,255,.17)}.qq-screen{position:relative;min-height:0;border:clamp(8px,1.4vw,16px) solid #111827;background:radial-gradient(circle at 50% 40%,rgba(67,239,255,.12),transparent 34%),linear-gradient(180deg,#0b1730,#040710);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.1);overflow:hidden;padding:clamp(14px,2.4vw,32px);display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(8px,1.4vw,16px)}.qq-screen.is-hidden{display:none}.qq-scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen}.qq-intro,.qq-gameover{position:relative;z-index:1;max-width:980px;margin:auto;text-align:center}.qq-kicker{text-transform:uppercase;letter-spacing:.18em;color:var(--yellow);font-weight:1000;margin:0 0 10px}.qq-intro h1,.qq-gameover h2{font-size:clamp(44px,8vw,112px);line-height:.86;letter-spacing:-.08em;margin:0 0 18px;text-shadow:4px 4px 0 var(--red),-4px -4px 0 #233cff}.qq-intro p,.qq-gameover p{color:var(--muted);font-size:clamp(16px,2vw,24px);line-height:1.42}.qq-player{display:inline-flex;gap:8px;border:1px solid var(--line);padding:12px 18px;margin:10px 0 22px;background:rgba(255,255,255,.07);font-weight:900}.qq-big-btn{min-height:62px;padding:0 34px;background:var(--red);border-color:transparent;box-shadow:0 0 34px rgba(255,36,72,.38);font-size:20px}.qq-hud{display:grid;grid-template-columns:1.4fr repeat(3,.8fr);gap:10px}.qq-hud>div{border:1px solid var(--line);background:rgba(255,255,255,.07);padding:10px 14px}.qq-hud small{display:block;color:var(--muted);text-transform:uppercase;font-weight:900;letter-spacing:.12em;font-size:11px}.qq-hud b{font-size:clamp(20px,3vw,38px);line-height:1}.qq-timer{height:10px;background:rgba(255,255,255,.09);border:1px solid var(--line);overflow:hidden}.qq-timer span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));transform-origin:left center}.qq-question-card{border:1px solid var(--line);background:rgba(255,255,255,.08);padding:clamp(16px,2.2vw,28px);min-height:clamp(122px,22vh,230px);display:flex;flex-direction:column;justify-content:center}.qq-question-card h2{font-size:clamp(24px,4.6vw,62px);line-height:1.02;letter-spacing:-.05em;margin:0}.qq-options{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.3vw,16px);align-content:start}.qq-option{min-height:clamp(56px,10vh,110px);border:2px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));color:var(--text);font-weight:1000;font-size:clamp(16px,2.4vw,30px);text-align:left;padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:14px}.qq-option:before{content:attr(data-key);display:grid;place-items:center;width:38px;height:38px;min-width:38px;background:var(--cyan);color:#06101f;font-weight:1000}.qq-option:hover{border-color:var(--cyan)}.qq-option.is-correct{background:rgba(77,255,136,.2);border-color:var(--green)}.qq-option.is-wrong{background:rgba(255,36,72,.18);border-color:var(--red)}.qq-feedback{position:absolute;inset:auto clamp(14px,2.4vw,32px) clamp(14px,2.4vw,32px);z-index:4;border:1px solid var(--line);background:rgba(5,9,20,.96);box-shadow:var(--shadow);padding:clamp(12px,2vw,22px);display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,420px) auto;gap:16px;align-items:center}.qq-feedback.is-hidden{display:none}.qq-feedback-text{font-size:clamp(16px,2vw,24px);font-weight:900}.qq-feedback-text small{display:block;color:var(--muted);font-weight:700;margin-top:4px}.qq-trailer iframe{width:100%;aspect-ratio:16/9;border:0;background:#000}.qq-trailer a{color:var(--cyan);font-weight:1000}.qq-score-table{width:min(740px,100%);margin:18px auto 0;border:1px solid var(--line);background:rgba(255,255,255,.06);max-height:32vh;overflow:auto}.qq-score-row{display:grid;grid-template-columns:56px 1fr 100px 120px;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-weight:900}.qq-score-row small{color:var(--muted);font-weight:700}.qq-end-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}@media(max-width:820px){.qq-marquee{grid-template-columns:76px 1fr 76px;min-height:58px}.qq-back{min-height:36px;padding:0 10px}.qq-title b{font-size:34px}.qq-title span,.qq-title em{font-size:9px}.qq-screen{padding:10px;border-width:8px}.qq-hud{grid-template-columns:1fr 1fr}.qq-question-card{min-height:150px}.qq-options{grid-template-columns:1fr}.qq-option{min-height:48px;font-size:16px}.qq-feedback{grid-template-columns:1fr;inset:auto 10px 10px}.qq-trailer iframe{max-height:150px}.qq-intro h1,.qq-gameover h2{font-size:48px}.qq-intro p{font-size:15px}.qq-score-row{grid-template-columns:42px 1fr 72px}.qq-score-row small{display:none}}@media(max-height:650px){.qq-marquee{min-height:54px}.qq-title b{font-size:34px}.qq-question-card{min-height:105px}.qq-option{min-height:44px}.qq-feedback{padding:10px}.qq-trailer iframe{max-height:120px}.qq-intro h1,.qq-gameover h2{font-size:48px}.qq-intro p{font-size:15px}.qq-big-btn{min-height:48px}}
/* v21 arcade polish */
.qq-marquee{grid-template-columns:120px minmax(0,1fr) auto}.qq-top-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}.qq-sound.is-on{background:rgba(77,255,136,.16);border-color:rgba(77,255,136,.58);color:#dfffea;box-shadow:0 0 18px rgba(77,255,136,.24)}
.qq-feedback{position:fixed;inset:0;z-index:80;border:0;background:radial-gradient(circle at 50% 42%,rgba(67,239,255,.18),transparent 32%),linear-gradient(180deg,rgba(5,7,17,.96),rgba(5,7,17,.985));box-shadow:none;padding:clamp(16px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.8fr);grid-template-rows:1fr auto;gap:clamp(16px,3vw,34px);align-items:center;overflow:hidden}.qq-feedback:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 5px);mix-blend-mode:screen;pointer-events:none}.qq-feedback:after{content:"";position:absolute;inset:clamp(10px,2vw,28px);border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 60px rgba(67,239,255,.12),0 0 60px rgba(255,36,72,.12);pointer-events:none}.qq-feedback.is-hidden{display:none}.qq-feedback.is-correct{background:radial-gradient(circle at 50% 42%,rgba(77,255,136,.2),transparent 32%),linear-gradient(180deg,rgba(3,20,15,.97),rgba(4,7,17,.985))}.qq-feedback.is-wrong{background:radial-gradient(circle at 50% 42%,rgba(255,36,72,.25),transparent 32%),linear-gradient(180deg,rgba(24,4,12,.97),rgba(4,7,17,.985))}.qq-feedback-text{position:relative;z-index:2;font-weight:1000}.qq-feedback-text .qq-result-kicker{display:block;color:var(--yellow);letter-spacing:.22em;text-transform:uppercase;font-size:clamp(12px,1.4vw,18px);margin-bottom:10px}.qq-feedback-text b{display:block;font-size:clamp(56px,10vw,160px);line-height:.78;letter-spacing:-.09em;text-transform:uppercase;text-shadow:6px 6px 0 var(--red),-6px -6px 0 #233cff}.qq-feedback.is-correct .qq-feedback-text b{text-shadow:6px 6px 0 #0a6930,-6px -6px 0 var(--cyan)}.qq-feedback-text strong{display:block;margin-top:18px;font-size:clamp(28px,4vw,64px);color:var(--yellow);text-shadow:0 0 30px rgba(255,224,110,.28)}.qq-feedback-text small{display:block;color:var(--muted);font-weight:800;margin-top:16px;font-size:clamp(16px,2vw,28px);line-height:1.35}.qq-trailer{position:relative;z-index:2;align-self:center}.qq-trailer iframe{width:100%;aspect-ratio:16/9;border:2px solid rgba(255,255,255,.22);background:#000;box-shadow:0 22px 70px rgba(0,0,0,.48)}.qq-trailer.is-empty{display:none}.qq-feedback .qq-btn{position:relative;z-index:2;grid-column:1/-1;justify-self:center;min-width:min(420px,100%);min-height:64px;background:var(--red);border-color:transparent;font-size:22px;box-shadow:0 0 34px rgba(255,36,72,.38)}
@keyframes qqPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}.qq-feedback:not(.is-hidden) .qq-feedback-text b{animation:qqPulse .8s ease-in-out infinite}
@media(max-width:820px){.qq-marquee{grid-template-columns:64px minmax(0,1fr) auto}.qq-top-actions{gap:5px;flex-direction:column}.qq-top-actions .qq-back{min-height:28px;font-size:11px;padding:0 7px}.qq-feedback{grid-template-columns:1fr;grid-template-rows:1fr auto auto;padding:20px 14px}.qq-feedback-text b{font-size:clamp(48px,17vw,96px)}.qq-trailer iframe{max-height:38svh}.qq-feedback .qq-btn{min-height:54px;font-size:18px}.qq-feedback-text small{font-size:16px}}@media(max-height:650px){.qq-feedback{padding:14px;gap:10px}.qq-feedback-text b{font-size:clamp(42px,12vh,78px)}.qq-feedback-text strong{font-size:clamp(24px,6vh,42px);margin-top:8px}.qq-feedback-text small{font-size:14px;margin-top:8px}.qq-trailer iframe{max-height:34svh}.qq-feedback .qq-btn{min-height:46px}}

/* v22: getrennte Audio-Schalter */
.qq-top-actions{flex-wrap:wrap;max-width:min(520px,42vw)}
.qq-top-actions .qq-back{min-height:38px;padding:0 12px;font-size:13px;white-space:nowrap}
.qq-sound.is-muted{opacity:.52;border-color:rgba(255,255,255,.14);box-shadow:none;background:rgba(255,255,255,.055)}
.qq-sound.qq-music.is-on{background:rgba(67,239,255,.16);border-color:rgba(67,239,255,.5);color:#e7fbff;box-shadow:0 0 18px rgba(67,239,255,.22)}
.qq-sound.qq-fx.is-on{background:rgba(255,216,107,.16);border-color:rgba(255,216,107,.54);color:#fff7d8;box-shadow:0 0 18px rgba(255,216,107,.2)}
@media(max-width:820px){
  .qq-top-actions{max-width:150px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .qq-top-actions .qq-back{min-height:28px;font-size:10px;padding:0 6px}
  .qq-top-actions a.qq-back{grid-column:1/-1}
}
@media(max-width:520px){
  .qq-marquee{grid-template-columns:54px minmax(0,1fr) 128px}
  .qq-title span,.qq-title em{display:none}
}

/* v23: weniger Knöpfe im Game-Kopf, robustere Audio-Schalter */
.qq-marquee{grid-template-columns:90px minmax(0,1fr) auto}.qq-top-actions{max-width:min(430px,38vw)}.qq-top-actions .qq-back{min-height:36px;padding:0 11px}.qq-sound{min-width:74px}.qq-sound.is-on{background:rgba(77,255,136,.17);border-color:rgba(77,255,136,.56)}
@media(max-width:820px){.qq-marquee{grid-template-columns:58px minmax(0,1fr) 132px}.qq-top-actions{max-width:132px}.qq-sound{min-width:0}.qq-title b{font-size:clamp(28px,8vw,42px)}}


/* v24: Mobile passt vollständig auf kleine Handyhöhen, inkl. Fold-Ansicht */
.qq-screen[data-screen="play"]{grid-template-rows:auto 8px minmax(80px,.82fr) minmax(150px,1.18fr);gap:clamp(6px,1.1svh,12px);overflow:hidden}
.qq-options{min-height:0;align-content:stretch}
.qq-option span{min-width:0}
@media(max-width:820px){
  html,body{height:100svh;overflow:hidden}
  .qq-machine{padding:6px;gap:6px;height:100svh;min-height:0}
  .qq-marquee{min-height:48px;padding:4px 6px;grid-template-columns:48px minmax(0,1fr) 120px}
  .qq-title b{font-size:clamp(24px,7vw,34px)}
  .qq-top-actions{max-width:120px;grid-template-columns:1fr 1fr;gap:3px}
  .qq-top-actions .qq-back{min-height:24px;font-size:9px;padding:0 4px}
  .qq-screen{border-width:6px;padding:7px}
  .qq-hud{grid-template-columns:1.05fr .55fr .7fr .65fr;gap:5px}
  .qq-hud>div{padding:6px 7px;min-width:0}
  .qq-hud small{font-size:8px;letter-spacing:.08em}
  .qq-hud b{font-size:clamp(14px,4.5vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qq-timer{height:7px}
  .qq-question-card{min-height:0;padding:9px 10px}
  .qq-question-card .qq-kicker{font-size:9px;margin-bottom:5px;letter-spacing:.12em}
  .qq-question-card h2{font-size:clamp(17px,5.2vw,27px);line-height:1.05;letter-spacing:-.035em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .qq-options{grid-template-columns:1fr 1fr;gap:6px}
  .qq-option{min-height:0;height:auto;padding:8px 8px;gap:7px;font-size:clamp(12px,3.5vw,15px);line-height:1.12;align-items:center;overflow:hidden}
  .qq-option:before{width:26px;height:26px;min-width:26px;font-size:12px}
  .qq-option{word-break:normal;overflow-wrap:anywhere}
}
@media(max-width:430px){
  .qq-marquee{grid-template-columns:42px minmax(0,1fr) 112px}
  .qq-title b{font-size:26px}
  .qq-screen[data-screen="play"]{grid-template-rows:auto 7px minmax(72px,.78fr) minmax(145px,1.22fr)}
  .qq-hud{grid-template-columns:1fr 1fr 1fr 1fr}
  .qq-hud small{display:none}
  .qq-hud b{font-size:13px}
  .qq-option{font-size:12px;padding:7px 6px}
  .qq-option:before{width:23px;height:23px;min-width:23px}
}
@media(max-height:620px){
  .qq-machine{padding:5px;gap:5px}
  .qq-marquee{min-height:42px}
  .qq-title span,.qq-title em{display:none}
  .qq-title b{font-size:26px}
  .qq-screen[data-screen="play"]{grid-template-rows:auto 6px minmax(58px,.68fr) minmax(120px,1.32fr);gap:5px}
  .qq-hud>div{padding:4px 6px}
  .qq-question-card{padding:7px 8px}
  .qq-question-card h2{font-size:clamp(15px,4.8svh,24px);-webkit-line-clamp:3}
  .qq-options{gap:5px}
  .qq-option{font-size:clamp(11px,3.2svh,14px);padding:6px;gap:5px}
  .qq-option:before{width:22px;height:22px;min-width:22px}
}


/* v27: Start-Ladescreen mit QuoteQuest-Plakat */
.qq-loadout{position:relative;z-index:1;width:min(980px,96%);margin:auto;display:grid;grid-template-columns:minmax(170px,320px) minmax(0,1fr);gap:clamp(18px,4vw,44px);align-items:center}.qq-loadout img{width:100%;aspect-ratio:2/3;object-fit:cover;box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 44px rgba(255,36,72,.22);border:1px solid rgba(255,255,255,.18)}.qq-loadout-copy h2{font-size:clamp(48px,9vw,120px);line-height:.78;margin:0 0 14px;letter-spacing:-.09em;text-transform:uppercase;text-shadow:5px 5px 0 var(--red),-5px -5px 0 #233cff}.qq-loadout-copy p:not(.qq-kicker){color:var(--muted);font-size:clamp(16px,2vw,24px);font-weight:800}.qq-loadbar{height:14px;margin-top:22px;border:1px solid var(--line);background:rgba(255,255,255,.09);overflow:hidden}.qq-loadbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--red));box-shadow:0 0 28px rgba(255,36,72,.78)}.qq-screen[data-screen="loader"]:not(.is-hidden) .qq-loadbar span{animation:qqLoad 2.1s linear forwards}@keyframes qqLoad{to{width:100%}}
@media(max-width:760px){.qq-loadout{grid-template-columns:1fr;text-align:center;gap:14px}.qq-loadout img{width:min(210px,56vw);margin:0 auto}.qq-loadout-copy h2{font-size:clamp(42px,14vw,78px)}}
@media(max-height:620px){.qq-loadout{grid-template-columns:120px 1fr;text-align:left}.qq-loadout img{width:120px}.qq-loadout-copy h2{font-size:clamp(34px,12vh,64px)}}