/* PULT · GAMING (data-welt="pixel") — aus online-pult.css überführt (2026-11-01); die gemeinsamen Regeln bleiben dort.
   Geladen direkt NACH online-pult.css (spiel.html, host.html, runde-trailer.html, handy-*.html). */
/* ---- PIXEL · der Automat -------------------------------------------------- */
.qo-pult[data-welt="pixel"] {
  --pult-grund: linear-gradient(180deg, color-mix(in srgb, var(--acc) 26%, transparent), transparent 46%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .04) 0 .22cqmin, transparent .22cqmin .5cqmin), repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 12%, transparent) 0 .2cqmin, transparent .2cqmin 4cqmin), #040a1b;
  --kante: repeating-linear-gradient(90deg, var(--acc2) 0 1.6cqmin, var(--acc) 1.6cqmin 3.2cqmin); --kante-h: .7cqmin;
  --sitz: repeating-linear-gradient(180deg, color-mix(in srgb, var(--acc) 40%, #040a1b) 0 1cqmin, color-mix(in srgb, var(--acc) 22%, #040a1b) 1cqmin 2cqmin); --sitz-naht: var(--acc2);
  --disp-grund: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 .2cqmin, transparent .2cqmin .45cqmin), #02050f;
  --disp-rahmen: inset 0 0 0 .45cqmin var(--acc), inset 0 0 2.4cqmin color-mix(in srgb, var(--acc) 45%, transparent); --disp-rund: 0cqmin; --disp-glas: none;
  --disp-schrift: var(--f-mono); --disp-fall: uppercase; --disp-sperr: .06em;
  --disp-leer: color-mix(in srgb, var(--acc) 55%, #0a1430); --disp-an: var(--acc2); --disp-fest: var(--t0); --disp-neben: color-mix(in srgb, var(--acc) 70%, var(--t1));
  --disp-leucht: 0 0 1.4cqmin var(--acc2); --disp-leucht-fest: 0 0 1.2cqmin var(--acc); --disp-trenn: var(--acc);
  --taste-rahmen: var(--acc2); --taste-rund: 0cqmin; --taste-schatten: .9cqmin .9cqmin 0 color-mix(in srgb, var(--acc) 80%, #000);
}
.qo-pult[data-welt="pixel"] .qo-buddy::before { border-radius: 0; top: 40%; }
.qo-pult[data-welt="pixel"] .qo-los { padding: .6cqmin; }
.qo-pult[data-welt="pixel"] .qo-los .qo-kappe { border-radius: 0; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .04em; font-size: max(12px, calc(2.8cqmin * min(var(--schrift, 1), 1.25))); }
.qo-pult[data-welt="pixel"] .qo-sagt { border-radius: 0; box-shadow: .7cqmin .7cqmin 0 var(--acc2); }
.qo-pult[data-welt="pixel"] .qo-sagt-text { font-family: var(--f-mono); letter-spacing: -.02em; }

.qo-pult[data-welt="pixel"] .qo-buddy::before { border-radius: 0; top: 44%; left: 8%; right: 8%; }
.qo-pult[data-welt="pixel"] .qo-buddy::after { border-radius: 0; }
.qo-pult[data-welt="pixel"] .qo-rang { padding: .6cqmin; }
.qo-pult[data-welt="pixel"] .qo-rang-in { border-radius: 0; }
.qo-pult[data-welt="pixel"] .qo-rang .qo-los.qo-rang-alt { inset: .6cqmin; }
.qo-pult[data-welt="pixel"] { --disp-mittel: color-mix(in srgb, var(--acc) 30%, #f0f0f0); }
.qo-pult[data-welt="pixel"] .qo-a-marke, .qo-pult[data-welt="pixel"] .qo-a-vor, .qo-pult[data-welt="pixel"] .qo-f-wz, .qo-pult[data-welt="pixel"] .qo-a-marke.qo-f-mini { border-radius: 0; }
.qo-pult[data-welt="pixel"] .qo-a-vor i, .qo-pult[data-welt="pixel"] .qo-a-paar i { border-radius: 0; }
.qo-pult[data-welt="pixel"] .qo-pt-taste .sp-jubel { border-radius: 0; font-family: var(--f-mono); }
.qo-pult[data-welt="pixel"] .qo-pt-taste .sp-jubel-wort { font-family: var(--f-mono); }
.qo-pult[data-welt="pixel"] .qo-pe-feld .qo-e-knopf { border-radius: 0; font-family: var(--f-mono); text-transform: uppercase; }
/* Im Automaten (pixel) stehen die Wörter der Tasten in Großbuchstaben — Jubeln wie Teilen und Feedback. */
.qo-pult[data-welt="pixel"] .qo-pe-feld .sp-jubel-wort { text-transform: uppercase; }
.qo-pult[data-welt="pixel"] .qo-buddy::before { top: 34%; }

/* =====================================================================
   DER AUTOMAT AUF DEM NIVEAU VON WELTREISE (Tobi, 02.11.2026: „die auf das Niveau von Weltreise angleichen, alle Pulte.“)
   Die Geschichte: Du stehst an deinem Spielautomaten. Der Buddy ist die Spielfigur — er steht im
   BILDSCHIRM des Automaten (Pixelhimmel mit Sternen, die blinken, unten der Boden aus Blöcken). Die
   ANZEIGE ist der Bildschirm daneben: Röhrenzeilen, und rechts zieht leise ein Pixel-Invader seine Bahn,
   Schritt für Schritt. Der Buddy spricht in der TEXTBOX eines Rollenspiels (doppelter Rahmen, unten rechts
   blinkt das ▼ „weiter“). Die TASTE ist die Arcade-Taste mit der MÜNZE davor: Münze einwerfen = wählen —
   mit der Wahl dreht sie sich, abgeschickt ist sie drin.
   Kunststoff, Röhre und Neon sind Material; Licht, Schrift und Zustände kommen aus den Rollen des Sets.
   Bewegung nur transform und opacity, in Schritten wie ein Spiel; prefers-reduced-motion hält alles an.
   ===================================================================== */
.qo-pult[data-welt="pixel"] {
  --qo-px-invader: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1h-1zM8 0h1v1h-1zM3 1h1v1h-1zM7 1h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1z'/%3E%3C/svg%3E");
  --qo-px-muenze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1h-4zM0 1h6v1h-6zM0 2h2v4h-2zM3 2h3v4h-3zM0 6h6v1h-6zM1 7h4v1h-4z'/%3E%3C/svg%3E");
  --qo-px-ecke: polygon(0 .7cqmin, .7cqmin .7cqmin, .7cqmin 0, calc(100% - .7cqmin) 0, calc(100% - .7cqmin) .7cqmin, 100% .7cqmin, 100% calc(100% - .7cqmin), calc(100% - .7cqmin) calc(100% - .7cqmin), calc(100% - .7cqmin) 100%, .7cqmin 100%, .7cqmin calc(100% - .7cqmin), 0 calc(100% - .7cqmin));
}
/* DER BILDSCHIRM DES AUTOMATEN hinter dem Buddy: Pixelhimmel, Sterne, unten Blöcke; die Ecken in Stufen */
.qo-pult[data-welt="pixel"] .qo-buddy::before {
  left: 1%; right: 1%; top: 4%; bottom: -1.4cqmin; border-radius: 0; clip-path: var(--qo-px-ecke);
  background:
    linear-gradient(#fff, #fff) 22% 18% / .45cqmin .45cqmin no-repeat, linear-gradient(#fff, #fff) 78% 12% / .45cqmin .45cqmin no-repeat,
    linear-gradient(var(--acc2), var(--acc2)) 88% 40% / .45cqmin .45cqmin no-repeat, linear-gradient(#fff, #fff) 12% 46% / .35cqmin .35cqmin no-repeat,
    linear-gradient(var(--acc), var(--acc)) 56% 6% / .35cqmin .35cqmin no-repeat,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 .2cqmin, transparent .2cqmin .45cqmin),
    linear-gradient(180deg, #050a24, color-mix(in srgb, var(--acc) 30%, #071036) 78%, color-mix(in srgb, var(--acc2) 30%, #120a2e));
  box-shadow: inset 0 0 0 .5cqmin #0b1230, inset 0 0 0 .75cqmin var(--acc), inset 0 0 2.6cqmin color-mix(in srgb, var(--acc) 50%, transparent);
}
/* der Boden des Spiels (statt der Sitzkante): Blöcke mit hellem Rand oben */
.qo-pult[data-welt="pixel"] .qo-buddy::after {
  left: 4%; right: 4%; height: 2.6cqmin; border-radius: 0;
  background: linear-gradient(var(--acc2), var(--acc2)) 0 0 / 100% .35cqmin no-repeat,
    repeating-linear-gradient(90deg, transparent 0 1.9cqmin, rgba(0, 0, 0, .45) 1.9cqmin 2.1cqmin),
    linear-gradient(180deg, color-mix(in srgb, var(--acc2) 55%, #2a0a26) .35cqmin, color-mix(in srgb, var(--acc2) 30%, #12051a));
  box-shadow: 0 -.4cqmin 0 rgba(0, 0, 0, .35);
}

/* DIE TEXTBOX (Rollenspiel): doppelter Rahmen, dunkler Grund, unten rechts das blinkende ▼ */
.qo-pult[data-welt="pixel"] .qo-sagt { background: #060b22; border-radius: 0;
  box-shadow: inset 0 0 0 .3cqmin #f2f4ff, inset 0 0 0 .6cqmin #060b22, inset 0 0 0 .8cqmin var(--acc), .7cqmin .7cqmin 0 rgba(0, 0, 0, .55); }
.qo-pult[data-welt="pixel"] .qo-sagt::before { background: #f2f4ff; }
.qo-pult[data-welt="pixel"] .qo-sagt-text { color: #f2f4ff; }
.qo-pult[data-welt="pixel"] .qo-sagt::after {
  content: ""; position: absolute; left: auto; right: 1.1cqmin; top: auto; bottom: 1cqmin; width: 1.2cqmin; height: .8cqmin; pointer-events: none;
  background: var(--acc2); clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: qo-px-weiter 1.2s steps(1, end) infinite;
}
.qo-pult[data-welt="pixel"] .qo-sagt.leise::after { animation: none; opacity: .5; }
@keyframes qo-px-weiter { 0% { opacity: 1; transform: none; } 50% { opacity: .2; transform: translateY(.2cqmin); } }

/* DER INVADER auf dem Bildschirm der Anzeige: leise, rechts, er zieht in Schritten hin und her */
.qo-pult[data-welt="pixel"] .qo-display::after {
  content: ""; position: absolute; z-index: 0; left: auto; right: var(--qo-motiv-r); top: 50%; width: 5.5cqmin; height: 4cqmin; margin-top: -2cqmin; pointer-events: none;
  background: var(--acc); opacity: .32;
  -webkit-mask: var(--qo-px-invader) center / contain no-repeat; mask: var(--qo-px-invader) center / contain no-repeat;
  animation: qo-px-marsch 6s steps(6, end) infinite alternate;
}
@keyframes qo-px-marsch { from { transform: translateX(-3cqmin); } to { transform: translateX(3cqmin); } }

/* DIE MÜNZE vor dem Wort der Taste: Sie kommt mit der Wahl und dreht sich (in Schritten); abgeschickt ist sie eingeworfen. Leer steht sie
   nicht da — die langen Hinweise („Erst eine Richtung einstellen“) blieben mit ihr nicht in zwei Zeilen. */
.qo-pult[data-welt="pixel"] .qo-los[data-zustand="gewaehlt"] .qo-kappe::before {
  content: ""; display: inline-block; flex: none; width: 2cqmin; height: 2.7cqmin; background: #ffd23f; filter: drop-shadow(.25cqmin .25cqmin 0 rgba(0, 0, 0, .35));
  -webkit-mask: var(--qo-px-muenze) center / contain no-repeat; mask: var(--qo-px-muenze) center / contain no-repeat;
}
.qo-pult[data-welt="pixel"] .qo-los[data-zustand="gewaehlt"] .qo-kappe::before { animation: qo-px-muenze 1.6s steps(4, end) infinite; }
@keyframes qo-px-muenze { 0% { transform: scaleX(1); } 25% { transform: scaleX(.45); } 50% { transform: scaleX(.12); } 75% { transform: scaleX(.45); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .qo-pult[data-welt="pixel"] .qo-sagt::after, .qo-pult[data-welt="pixel"] .qo-display::after, .qo-pult[data-welt="pixel"] .qo-los .qo-kappe::before { animation: none; }
}
/* Wo das lebende Motiv der Anzeige steht: sein rechter Rand bleibt vor „eingeloggt“ (auf M, L, XL beginnt das 17,3 cqmin vor dem
   rechten Rand der Anzeige, auf S — größere Mindestschrift — 21,4 cqmin). */
.qo-pult[data-welt="pixel"] { --qo-motiv-r: 19.5cqmin; --qo-motiv-frei: calc(var(--qo-motiv-r) + 8.5cqmin); }   /* frei: der Invader samt seinem Marsch (± 3 cqmin) — die Schrift endet davor (online-pult.css) */
@container (max-width: 900px) { .qo-pult[data-welt="pixel"] { --qo-motiv-r: 23.6cqmin; } }
/* In der Lobby (.qla-pult) steht kein „eingeloggt“ in der Anzeige — das Motiv rückt an ihren rechten Rand, weg vom Satz. */
.qo-pult.qla-pult[data-welt="pixel"] { --qo-motiv-r: 2.6cqmin; }
/* Am Abendende füllen Titel und Geschichte die ganze Anzeige — das Motiv tritt ab (aus dem Bild geschoben, die Anzeige schneidet es ab). */
.qo-pult.qo-pult-e[data-welt="pixel"] { --qo-motiv-r: -40cqmin; }
/* Auf S reicht der Satz der Lobby bis an den Rand der Anzeige — dort tritt das Motiv ab wie am Abendende. */
@container (max-width: 900px) { .qo-pult.qla-pult[data-welt="pixel"] { --qo-motiv-r: -40cqmin; } }
/* Am Handy (handy-rahmen, .k1-pult) ist die Anzeige schmal und trägt den Namen — das Motiv stünde hinter ihm; dort tritt es ab. */
.qo-pult.k1-pult[data-welt="pixel"] { --qo-motiv-r: -40cqmin; }