*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* Farbwelt 2026-07-30: Der dunkle Terminal-Automat ist raus, das Quiz ist
     jetzt ein helles Plakat im nerdistan-Banner-Look — gleiche Richtung wie die
     Icy-Tower-Overlays. Die --qz-*-Namen bleiben absichtlich erhalten (sie
     haengen an dutzenden Stellen), nur ihre Werte drehen auf hell und ziehen
     jetzt die Portal-Tokens als Quelle heran. Gold/Orange bleibt: der
     Brawl-Stars-Charakter (Lilita One + Gold-Gradients) ist Identitaet des
     Spiels und passt zum Sign-Gelb des Portals. */
  :root {
    --qz-bg:         var(--bg, #fbf3e0);        /* Creme — das Plakat selbst */
    --qz-bg-soft:    var(--bg-soft, #ffffff);   /* Weiss — Karte, Listen, Buttons */
    --qz-sunken:     var(--bg-sunken, #f3e8ce); /* leicht abgesetzte Rinnen */
    --qz-border:     var(--border-strong, rgba(58, 45, 24, 0.38));
    --qz-text:       var(--text, #2b2312);
    --qz-text-muted: var(--text-muted, #6e5f41);
    --qz-accent:     var(--accent, #1f7a33);
    --qz-sun:        var(--sun, #ffc933);
    --qz-gold:       #ffd200;
    --qz-orange:     #ff8c00;
    /* Zahlen laufen in Space Mono (Portal-Token) — bewusst NICHT mehr Courier,
       das war der Terminal-Rest. */
    --qz-num:        var(--font-mono, 'Space Mono', ui-monospace, monospace);
    --qz-radius:     var(--radius, 10px);
  }

  /* Seiten-Hintergrund kommt vom Portal-Theme (tokens.css).
     Hoehe/Flow macht seit 2026-07-30 die GameShell — hier bleibt nur noch
     die Sperre gegen horizontales Ausbrechen (Konfetti fliegt fixed). */
  body {
    overflow-x: hidden;
  }

  /* Embedded-Mode (Legacy-iframe): ohne Footer, ohne Rahmen */
  body.embedded { background: transparent; min-height: auto; }
  body.embedded footer { display: none; }
  body.embedded main { padding: 20px 16px; min-height: auto; margin: 0; border: none; box-shadow: none; }

  /* Das Plakat. Kompakt gehalten (2026-07-30): Auf 1366x768 und auf dem Handy
     muss der komplette Start-Screen ohne Scrollen sichtbar sein — deshalb enge
     Aussenabstaende und nur so viel Innenabstand wie der Look braucht. */
  main {
    position: relative;
    width: min(520px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px;
    font-family: 'Nunito', Arial, sans-serif;
    color: var(--qz-text);
    background: var(--qz-bg);
    border: 3px solid var(--qz-text);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-pop-lg, 7px 9px 0 rgba(43, 35, 18, 0.16));
  }

  /* Ersetzt den frueheren Gradient-Logo-Block: eine Zeile statt 90px Hoehe.
     Der eigentliche Titel steht in der GameShell-Kopfzeile. Auf Creme wirkt
     ein Gold-Verlauf matschig, darum schlichte Versalien-Zeile. */
  .card-eyebrow {
    font-family: 'Lilita One', cursive;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: var(--qz-text-muted);
    margin-bottom: 14px;
  }

  .subtitle {
    color: var(--qz-text-muted);
    font-size: 16px;
    font-weight: 700;
    margin-top: 4px;
  }

  /* Karte: weisse Flaeche mit Comic-Outline im Plakat */
  .card {
    background: var(--qz-bg-soft);
    border: 2px solid var(--qz-text);
    border-radius: var(--qz-radius);
    padding: 20px 22px 24px;
    width: 100%;
    max-width: 440px;
  }

  /* Progress */
  .progress-wrap { margin-bottom: 18px; }

  .progress-info {
    display: flex;
    justify-content: space-between;
    color: var(--qz-text-muted);
    font-family: var(--qz-num);
    font-size: 13px;
    margin-bottom: 8px;
  }

  /* Rinne mit Outline statt rgba-weiss-Strich. box-sizing:border-box ist global
     gesetzt, die 12px sind also inkl. Rahmen. */
  .progress-track {
    height: 12px;
    background: var(--qz-sunken);
    border: 2px solid var(--qz-text);
    border-radius: 999px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--qz-orange), var(--qz-gold));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Question */
  .question {
    font-size: clamp(19px, 4vw, 23px);
    font-weight: 900;
    color: var(--qz-text);
    text-align: center;
    margin-bottom: 18px;
    line-height: 1.3;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Answer buttons */
  .answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .btn-answer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--qz-text);
    border-radius: var(--qz-radius);
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    background: var(--qz-bg-soft);
    color: var(--qz-text);
    transition: background 0.16s, transform 0.16s;
    text-align: left;
  }

  .btn-answer:hover {
    background: color-mix(in srgb, var(--qz-sun) 32%, transparent);
    transform: translateX(4px);
  }

  .btn-answer:active { transform: translateX(4px) scale(0.98); }

  .btn-icon {
    font-size: 26px;
    min-width: 32px;
    text-align: center;
  }

  /* ---------- Button-System ----------
     Gleiche Formsprache wie Hub und Icy-Tower-Overlays: Comic-Outline + Radius
     fuer alle, Primaer zusaetzlich mit Pop-Schatten, der sich beim Klick
     wegdrueckt. Der Gold-Verlauf bleibt als Fuellung — Outline und Schatten
     machen den Banner-Look, nicht die Farbe. */
  .btn-start,
  .btn-open,
  .btn-primary,
  .btn-start-secondary,
  .btn-secondary {
    border: 3px solid var(--qz-text);
    border-radius: var(--qz-radius);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease, filter 0.12s ease;
  }

  .btn-start,
  .btn-open,
  .btn-primary {
    background: linear-gradient(135deg, var(--qz-orange), var(--qz-gold));
    color: #2b1a00;
    box-shadow: var(--shadow-pop, 4px 5px 0 rgba(43, 35, 18, 0.16));
  }
  .btn-start:hover,
  .btn-open:hover,
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-start:active,
  .btn-open:active,
  .btn-primary:active {
    transform: translate(4px, 5px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  .btn-start-secondary,
  .btn-secondary {
    background: var(--qz-bg-soft);
    color: var(--qz-text);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
  }
  /* Auf der vollflaechigen Gelb-Flaeche braucht es die Aufsatzfarbe --sun-fg —
     --qz-text folgt dem Theme und waere in dunklen Themes hier unlesbar. */
  .btn-start-secondary:hover,
  .btn-secondary:hover {
    background: var(--qz-sun);
    color: var(--sun-fg, #2b2312);
  }
  .btn-start-secondary:active,
  .btn-secondary:active { transform: translate(1px, 2px); }

  /* Sichtbarer Fokus-Ring fuer Tastatur-Navigation. :focus-visible statt :focus,
     damit Maus-Klicks keinen Ring hinterlassen. */
  .btn-start:focus-visible,
  .btn-open:focus-visible,
  .btn-primary:focus-visible,
  .btn-start-secondary:focus-visible,
  .btn-secondary:focus-visible,
  .btn-answer:focus-visible,
  footer a:focus-visible {
    outline: 3px solid var(--qz-accent);
    outline-offset: 2px;
  }
  /* .stardrop bekommt bewusst keinen Ring: quiz.js rendert sie als div mit
     onclick, sie ist also gar nicht fokussierbar. Der Star-Drop laesst sich
     gleichwertig ueber den .btn-open darunter oeffnen. */

  /* Start-Screen */
  .start-wrap {
    text-align: center;
  }

  .start-intro {
    color: var(--qz-text-muted);
    font-size: 15px;
    margin-bottom: 16px;
    line-height: 1.45;
  }

  .start-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }

  .btn-start {
    width: 100%;
    padding: 15px;
    font-family: 'Lilita One', cursive;
    font-size: 20px;
    letter-spacing: 1px;
  }

  .btn-start-secondary {
    width: 100%;
    padding: 13px;
    font-size: 16px;
  }

  /* Top-3 Preview auf Start-Screen */
  .top3 {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 2px dashed var(--qz-border);
  }

  .top3-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--qz-text-muted);
    margin-bottom: 10px;
    text-align: left;
  }

  .top3-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 15px;
    border-bottom: 1px dashed var(--qz-border);
  }

  .top3-item:last-child { border-bottom: none; }

  /* Medaillen-Plakette wie im Hub: getoente Scheibe mit Outline hinter dem
     Medaillen-Emoji, das quiz.js als Inhalt setzt. Der Tint bleibt dezent,
     sonst kaempft er mit dem Emoji. */
  .top3-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--qz-text);
    background: var(--qz-sunken);
    font-size: 13px;
  }
  .top3-rank.gold   { background: color-mix(in srgb, var(--crown, #de9a0f) 45%, #fff); }
  .top3-rank.silver { background: color-mix(in srgb, #c0c0c0 45%, #fff); }
  .top3-rank.bronze { background: color-mix(in srgb, #cd7f32 45%, #fff); }

  .top3-name { flex: 1; color: var(--qz-text); font-weight: 700; text-align: left; }
  .top3-time { color: var(--qz-accent); font-family: var(--qz-num); font-weight: 700; }

  .top3-empty {
    text-align: center;
    color: var(--qz-text-muted);
    padding: 12px 0;
    font-size: 14px;
  }

  /* Lootbox */
  .lootbox-wrap { text-align: center; }

  /* Star Drop — leuchtender Stern-Tropfen statt Pappkarton. Tier-Farben kommen
     inline über --c1/--c2 (in quiz.js zufällig gewählt). Effekt bleibt
     unverändert; nur die Funken mussten von Weiss auf die gesättigte
     Tier-Farbe, sonst wären sie auf der weissen Karte unsichtbar. */
  .stardrop {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 6px auto 22px;
    cursor: pointer;
    animation: float 1.6s ease-in-out infinite alternate;
    transition: transform 0.12s;
  }
  .stardrop:active { transform: scale(0.92); }

  .stardrop-star {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 14px var(--c1)) drop-shadow(0 0 30px var(--c2));
    animation: twinkle 2.6s ease-in-out infinite;
  }
  .stardrop-path { fill: var(--c2); stroke: var(--c1); stroke-width: 2; stroke-linejoin: round; }
  .stardrop-shine { fill: var(--c1); opacity: 0.5; }

  .stardrop-glow {
    position: absolute;
    inset: -25%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c1) 0%, transparent 62%);
    opacity: 0.35;
    pointer-events: none;
    animation: sdGlow 2s ease-in-out infinite;
  }

  .stardrop-spark {
    position: absolute;
    color: var(--c2, #ffb800);
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 0 6px var(--c1);
    animation: sdSpark 2.2s ease-in-out infinite;
  }
  .stardrop-spark.s1 { top: 4%;  left: 14%;  font-size: 18px; animation-delay: 0.1s; }
  .stardrop-spark.s2 { top: 16%; right: 8%;  font-size: 14px; animation-delay: 0.9s; }
  .stardrop-spark.s3 { bottom: 12%; left: 22%; font-size: 22px; animation-delay: 1.5s; }

  @keyframes float {
    from { transform: scale(1) rotate(-4deg) translateY(0); }
    to   { transform: scale(1.06) rotate(4deg) translateY(-8px); }
  }
  @keyframes twinkle {
    0%, 100% { transform: rotate(-3deg) scale(1); }
    50%      { transform: rotate(3deg) scale(1.04); }
  }
  @keyframes sdGlow {
    0%, 100% { opacity: 0.28; transform: scale(0.95); }
    50%      { opacity: 0.5;  transform: scale(1.08); }
  }
  @keyframes sdSpark {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(90deg); }
  }

  .lootbox-text {
    color: var(--qz-text-muted);
    font-size: 17px;
    margin-bottom: 20px;
  }

  .btn-open {
    width: 100%;
    padding: 17px;
    font-family: 'Lilita One', cursive;
    font-size: 22px;
    letter-spacing: 1px;
  }

  /* Loading */
  .loading-wrap {
    text-align: center;
    padding: 40px 0;
  }

  .loading-emoji {
    font-size: 52px;
    animation: spin 0.6s linear infinite;
    display: block;
    margin-bottom: 16px;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .loading-text {
    color: var(--qz-text-muted);
    font-size: 16px;
  }

  /* Result */
  .result-wrap { text-align: center; }

  .result-img-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 8px;
  }

  .result-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    position: relative;
    z-index: 1;
  }

  /* Deckkraft gegenueber der Dunkel-Variante gesenkt — auf Weiss wirkte der
     alte Wert wie ein gelber Schmutzfleck statt wie ein Leuchten. */
  .result-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(255, 180, 0, 0.28) 0%, transparent 70%);
    animation: pulseGlow 1.5s ease-in-out infinite alternate;
    border-radius: 50%;
  }

  @keyframes pulseGlow {
    from { opacity: 0.35; transform: scale(0.9); }
    to   { opacity: 0.7;  transform: scale(1.1); }
  }

  @keyframes popIn {
    from { transform: scale(0) rotate(-10deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg); opacity: 1; }
  }

  /* Gold-Verlauf allein verschwindet auf Weiss — die dunkle Kontur macht daraus
     einen Comic-Schriftzug und loest das Kontrastproblem. paint-order legt die
     Kontur hinter die Fuellung; wo es fehlt, wird die Schrift nur etwas
     schmaler, bleibt aber lesbar. */
  .result-name {
    font-family: 'Lilita One', cursive;
    font-size: clamp(30px, 7vw, 42px);
    background: linear-gradient(135deg, var(--qz-orange), var(--qz-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 2px var(--qz-text);
    paint-order: stroke fill;
    margin: 8px 0 6px;
    animation: popIn 0.5s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  }

  .result-trait {
    display: inline-block;
    background: color-mix(in srgb, var(--qz-accent) 12%, transparent);
    border: 2px solid var(--qz-accent);
    color: var(--qz-accent);
    font-size: 13px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Seltenheits-Chip — Textfarbe kommt inline aus rarityColor (sanitisiert).
     Die Chip-Flaeche ist darum dunkel: Brawlify liefert leuchtende Rarity-Toene
     (Gold, Cyan, Pink), die auf Weiss untergehen wuerden. */
  .result-rarity {
    display: inline-block;
    margin: 0 0 10px;
    padding: 3px 12px;
    background: var(--qz-text);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* Jackpot-Badge (P5, additiv) — Border/Color kommen inline aus dem Skin-Tier,
     gleiche Logik wie beim Seltenheits-Chip: dunkle Flaeche darunter. */
  .result-jackpot {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    background: var(--qz-text);
    border: 2px solid currentColor;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
  }
  .result-jackpot small { opacity: 0.85; font-weight: 600; }

  .result-desc {
    color: var(--qz-text-muted);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0 8px;
  }

  /* Ergebnis-"Anteil aller Spieler" — verspielter Brawler-Look. */
  .result-share {
    background: var(--qz-sunken);
    border: 2px solid var(--qz-text);
    border-radius: var(--qz-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .result-share-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .result-share-pct {
    font-family: 'Lilita One', cursive;
    font-size: 30px;
    line-height: 1;
    background: linear-gradient(135deg, var(--qz-orange), var(--qz-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 1.5px var(--qz-text);
    paint-order: stroke fill;
  }
  .result-share-text { color: var(--qz-text-muted); font-size: 14px; }
  .share-track {
    height: 12px;
    background: var(--qz-bg-soft);
    border: 2px solid var(--qz-text);
    border-radius: 999px;
    overflow: hidden;
  }
  .share-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--qz-orange), var(--qz-gold));
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Buttons row */
  .btn-row { display: flex; gap: 10px; }

  .btn-secondary {
    flex: 1;
    padding: 13px;
    font-size: 16px;
  }

  .btn-primary {
    flex: 1;
    padding: 13px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 16px;
  }

  /* Highscore board (Full-View) */
  .hs-board {
    width: 100%;
    max-width: 440px;
    margin-top: 16px;
  }

  .hs-title {
    font-family: 'Lilita One', cursive;
    color: var(--qz-text);
    font-size: 20px;
    text-align: center;
    margin-bottom: 12px;
  }
  /* Sign-Gelb-Balken statt Neon-Schein — dasselbe Motiv wie ueber den
     Icy-Tower-Plakat-Headlines. */
  .hs-title::after {
    content: '';
    display: block;
    width: 46px;
    height: 5px;
    margin: 6px auto 0;
    background: var(--qz-sun);
    border: 2px solid var(--qz-text);
    border-radius: 3px;
  }

  .hs-list {
    background: var(--qz-bg-soft);
    border: 2px solid var(--qz-text);
    border-radius: var(--qz-radius);
    overflow: hidden;
  }

  .hs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px dashed var(--qz-border);
    color: var(--qz-text);
    font-size: 15px;
    font-weight: 700;
  }

  .hs-item:last-child { border-bottom: none; }

  .hs-name { flex: 1; }
  .hs-time { color: var(--qz-accent); font-family: var(--qz-num); font-size: 14px; }

  .hs-empty {
    text-align: center;
    color: var(--qz-text-muted);
    padding: 18px;
    font-size: 15px;
  }

  /* Confetti */
  .confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    border-radius: 2px;
    animation: confettiFall var(--duration) ease-in var(--delay) forwards;
    z-index: 999;
  }

  @keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg) translateX(var(--drift)); opacity: 0; }
  }

  /* Transitions */
  .fade-in { animation: fadeIn 0.3s ease both; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Footer — liegt AUSSERHALB des Plakats auf dem Portal-Hintergrund,
     nutzt darum die Portal-Tokens statt der Quiz-Farben. Scrollt in der
     GameShell-Buehne mit und darf ruhig unter der Falz liegen. */
  footer {
    text-align: center;
    padding: 0.9rem 1rem 1.25rem;
    font-size: 13px;
    color: var(--text-muted, #6e5f41);
  }
  footer a { color: var(--accent, #1f7a33); text-decoration: none; }
  footer a:hover { text-decoration: underline; }