/* Bürokratopia – Geschicklichkeits-Minispiele (Scanner, Kaffee, Stapler, Whack). Gehört zu assets/js/spiele_geschick.js.
   Präfix sg-, Farben ausschließlich über Variablen aus app.css (hell und dunkel). Bühnen: Scanner/Stapler 4:5, Kaffee/Whack 3:4,
   damit sie bei 340 px Breite samt Leiste und Ergebniszeile in 560 px Höhe passen. Rahmen → Scanner → Kaffee → Stapler → Whack. */

/* --- Rahmen: Leiste, Bühne, Startschild, Ergebnis ------------------------------------------------------------- */
.sg { display: grid; gap: 8px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sg-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.sg-zahl { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.sg-zahl b { display: inline-block; font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sg-zahl b.sg-pop { animation: sg-pop .2s var(--kurve); }
.sg-zahl span { font-size: .78rem; color: var(--leise); font-weight: 600; }
.sg-mitte { flex: 1; text-align: center; font-weight: 700; font-size: .9rem; min-width: 0; }
.sg-mitte b { font-variant-numeric: tabular-nums; }
.sg-kombo { display: inline-block; padding: 4px 12px; border-radius: 99px; background: var(--akzent-hell); color: var(--akzent-text); animation: aufploppen .25s var(--kurve); white-space: nowrap; }
.sg-fehl-zahl { color: var(--rot); white-space: nowrap; }
.sg-perfekt-zahl { color: var(--gold-text); white-space: nowrap; }
.sg-timer { font-size: 1rem; min-width: 64px; text-align: center; }
.sg-buehne { position: relative; width: 100%; max-width: 400px; margin: 0 auto; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--flaeche2); touch-action: none; cursor: pointer; outline: none; }
.sg-scanner .sg-buehne, .sg-stapler .sg-buehne { aspect-ratio: 4 / 5; }
.sg-kaffee .sg-buehne, .sg-whack .sg-buehne { aspect-ratio: 3 / 4; }
.sg-buehne:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 35%, transparent); }
.sg-buehne.sg-ende { cursor: default; }
.sg-start { position: absolute; inset: 0; z-index: 6; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--flaeche) 88%, transparent); backdrop-filter: blur(3px); cursor: default; }
.sg-start p { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.4; max-width: 280px; }
.sg-los { min-width: 170px; min-height: 60px; font-size: 1.25rem; border-radius: 16px; }
.sg-ergebnis { margin: 0; text-align: center; font-weight: 700; padding: 9px 12px; border-radius: var(--radius-k); background: var(--gruen-hell); color: var(--gruen-text); animation: aufploppen .4s var(--kurve) backwards; }
@keyframes sg-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes sg-blink { from { opacity: 1; } to { opacity: .35; } }

/* --- Scanner ---------------------------------------------------------------------------------------------------- */
.sg-geraet { position: absolute; inset: 0; }
.sg-einzug { position: absolute; left: 20%; right: 20%; top: 6%; height: 12%; }
.sg-einzug i { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: var(--flaeche); border: 1px solid var(--linie2); border-radius: 3px; }
.sg-einzug i:nth-child(2) { transform: translate(3px, -4px) rotate(1.2deg); }
.sg-einzug i:nth-child(3) { transform: translate(-3px, -8px) rotate(-1deg); }
.sg-koerper { position: absolute; left: 8%; right: 8%; top: 22%; height: 36%; background: var(--flaeche); border: 2px solid var(--linie2); border-radius: 18px; box-shadow: var(--schatten); transition: border-color .1s; }
.sg-glas { position: absolute; left: 10%; right: 10%; top: 18%; height: 22%; background: var(--flaeche3); border-radius: 8px; overflow: hidden; }
.sg-licht { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--akzent), transparent); opacity: .22; transition: opacity .1s; }
.sg-blitz .sg-licht { opacity: .95; }
.sg-anzeige { position: absolute; left: 10%; right: 10%; bottom: 14%; text-align: center; font-weight: 800; font-size: 1.3rem; color: var(--akzent-text); letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.sg-ablage { position: absolute; left: 14%; right: 14%; top: 64%; height: 20%; border: 2px dashed var(--linie2); border-top: 0; border-radius: 0 0 14px 14px; }
.sg-ablage i { position: absolute; left: 6%; right: 6%; bottom: 4px; height: 90%; background: repeating-linear-gradient(180deg, var(--flaeche) 0 3px, var(--linie) 3px 4px); border: 1px solid var(--linie2); border-radius: 3px; transform: scaleY(0); transform-origin: bottom; transition: transform .2s var(--kurve); }
.sg-blaetter { position: absolute; inset: 0; pointer-events: none; }
.sg-blatt { position: absolute; left: 32%; right: 32%; top: 12%; height: 14%; padding: 6px; background: var(--flaeche); background-image: repeating-linear-gradient(180deg, transparent 0 5px, var(--linie2) 5px 6px); background-clip: content-box; border: 1px solid var(--linie2); border-radius: 3px; box-shadow: var(--schatten); animation: sg-scan .42s linear forwards; }
@keyframes sg-scan { from { transform: translateY(0); opacity: 1; } 60% { opacity: 1; } to { transform: translateY(var(--sg-weg, 240px)); opacity: 0; } }
.sg-stau-schild { position: absolute; left: 50%; top: 40%; z-index: 3; display: none; padding: 10px 18px; border-radius: 12px; background: var(--rot); color: var(--flaeche); font-weight: 800; font-size: 1.3rem; transform: translate(-50%, -50%) rotate(-4deg); white-space: nowrap; }
.sg-stau .sg-stau-schild { display: block; animation: sg-blink .3s steps(2, jump-none) infinite; }
.sg-stau .sg-koerper { border-color: var(--rot); animation: sg-blink .3s steps(2, jump-none) infinite; }
.sg-stau .sg-licht { background: var(--rot); opacity: .8; }
.sg-stau .sg-anzeige { color: var(--rot); }
.sg-ziel { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 10px; background: var(--flaeche3); border-radius: 99px; }
.sg-ziel span { position: absolute; right: 0; bottom: 14px; font-size: .74rem; font-weight: 700; color: var(--leise); font-variant-numeric: tabular-nums; }
.sg-ziel i { position: absolute; inset: 0; border-radius: 99px; background: var(--akzent); transform: scaleX(0); transform-origin: left; transition: transform .15s linear; }
.sg-ziel-erreicht .sg-ziel i { background: var(--gruen); }
.sg-ziel-erreicht .sg-ziel span { color: var(--gruen-text); }

/* --- Kaffee ----------------------------------------------------------------------------------------------------- */
.sg-flur { position: absolute; inset: 0; overflow: hidden; background: var(--flaeche2); }
.sg-flur::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--linie2) 0 2px, transparent 2px); background-size: calc(100% / var(--sg-spuren, 3)) 100%; background-position: -1px 0; opacity: .6; pointer-events: none; }
.sg-flur::after { content: ""; position: absolute; inset: 0; background: var(--rot); opacity: 0; pointer-events: none; transition: opacity .12s; }
.sg-flur.sg-schwapp::after { opacity: .28; }
.sg-flur.sg-schwapp-klein::after { opacity: .12; }
.sg-boden { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 48px); background: repeating-linear-gradient(180deg, var(--flaeche3) 0 2px, transparent 2px 48px); will-change: transform; }
.sg-dinge { position: absolute; inset: 0; pointer-events: none; }
.sg-ding { position: absolute; left: 0; top: 0; aspect-ratio: 1; will-change: transform; transition: opacity .2s; }
.sg-ding svg, .sg-tasse svg, .sg-tuer svg { display: block; width: 100%; height: 100%; }
.sg-ding.sg-getroffen { opacity: .45; }
.sg-tasse { position: absolute; left: 0; top: 0; z-index: 1; aspect-ratio: 1; will-change: transform; }
.sg-tasse-koerper { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; }
.sg-fuell { fill: var(--gold-text); }
.sg-henkel { fill: none; stroke: var(--text); stroke-width: 2.5; }
.sg-untertasse { fill: var(--flaeche3); stroke: var(--linie2); }
.sg-dampf { fill: none; stroke: var(--leise); stroke-width: 2; stroke-linecap: round; opacity: .7; animation: dampf 2.6s ease-in-out infinite; }
.sg-hemd { fill: var(--blau); }
.sg-krawatte { fill: var(--rot-dunkel); }
.sg-haut { fill: var(--pfirsich); stroke: var(--gold-text); stroke-width: 1.5; }
.sg-haar { fill: var(--text); }
.sg-wagen { fill: var(--leise); stroke: var(--text); stroke-width: 2; }
.sg-akte-a { fill: var(--gold); } .sg-akte-b { fill: var(--rot); } .sg-akte-c { fill: var(--akzent); }
.sg-rad { fill: var(--text); }
.sg-pfuetze { fill: var(--gold-text); opacity: .8; }
.sg-glanz { fill: var(--flaeche); opacity: .5; }
.sg-schwapp-schild { position: absolute; left: 50%; top: 45%; z-index: 3; display: none; padding: 8px 16px; border-radius: 12px; background: var(--rot); color: var(--flaeche); font-weight: 800; font-size: 1.4rem; transform: translate(-50%, -50%) rotate(-6deg); white-space: nowrap; }
.sg-schwapp .sg-schwapp-schild { display: block; animation: aufploppen .25s var(--kurve); }
.sg-tuer { position: absolute; left: 50%; top: 0; z-index: 2; width: 42%; aspect-ratio: 3 / 4; transform: translate(-50%, -100%); filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--text) 20%, transparent)); }
.sg-tuer-rahmen { fill: var(--linie2); }
.sg-tuer-blatt { fill: var(--flaeche); stroke: var(--linie2); }
.sg-tuer-schild { fill: var(--akzent-hell); }
.sg-tuer-text { fill: var(--akzent-text); font-family: var(--schrift); }
.sg-tuer-griff { fill: var(--text); }

/* --- Stapler ---------------------------------------------------------------------------------------------------- */
.sg-turm { position: absolute; inset: 0; transition: transform .35s var(--kurve); will-change: transform; }
.sg-tisch { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; background: var(--flaeche3); border-top: 3px solid var(--linie2); }
.sg-tisch::after { content: "Schreibtisch"; position: absolute; left: 10px; top: 6px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }
.sg-block { position: absolute; left: 0; top: 0; border-radius: 4px; border: 1.5px solid var(--akzent); background: var(--akzent-hell); }
.sg-block::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--flaeche); opacity: .85; }
.sg-block[data-f="1"] { border-color: var(--gold); background: var(--gold-hell); }
.sg-block[data-f="2"] { border-color: var(--gruen); background: var(--gruen-hell); }
.sg-block[data-f="3"] { border-color: var(--blau); background: var(--blau-hell); }
.sg-schwebt { z-index: 2; box-shadow: var(--schatten); will-change: transform; }
.sg-abfall, .sg-faellt { z-index: 1; animation: sg-fall .8s ease-in forwards; }
.sg-nach-links { --sg-rot: -60deg; }
.sg-nach-rechts { --sg-rot: 60deg; }
@keyframes sg-fall { to { transform: translateY(420px) rotate(var(--sg-rot, 60deg)); opacity: 0; } }
.sg-perfekt { position: absolute; left: 50%; top: 30%; z-index: 4; padding: 8px 18px; border-radius: 99px; background: var(--gold); color: var(--flaeche); font-weight: 800; font-size: 1.3rem; transform: translate(-50%, -50%); animation: aufploppen .3s var(--kurve); pointer-events: none; white-space: nowrap; }
.sg-ziel-linie { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--gold); pointer-events: none; }
.sg-ziel-linie span { position: absolute; right: 8px; top: -20px; font-size: .72rem; font-weight: 700; color: var(--gold-text); }

/* --- Whack ------------------------------------------------------------------------------------------------------ */
.sg-raster { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
.sg-fach { position: relative; margin: 0; padding: 0; min-height: 44px; border: 0; border-radius: 12px; background: var(--flaeche3); box-shadow: inset 0 3px 8px color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; cursor: pointer; font: inherit; color: inherit; touch-action: none; -webkit-tap-highlight-color: transparent; transition: background .12s; }
.sg-fach::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; z-index: 2; height: 18%; background: var(--flaeche2); border: 1px solid var(--linie2); border-bottom: 0; border-radius: 6px 6px 0 0; }
.sg-akte { position: absolute; left: 14%; right: 14%; top: 10%; bottom: 14%; z-index: 1; opacity: 0; transform: translateY(70%) scale(.7); transition: transform .14s var(--kurve), opacity .12s; pointer-events: none; }
.sg-akte.sg-auf { opacity: 1; transform: none; }
.sg-akte.sg-auf.sg-kippt { transform: translateY(10%) rotate(80deg); transform-origin: 20% 100%; transition: transform .35s ease-in; }
.sg-akte svg { position: absolute; inset: 0; display: none; width: 100%; height: 100%; }
.sg-akte[data-art="frist"] .sg-sym-frist, .sg-akte[data-art="normal"] .sg-sym-normal, .sg-akte[data-art="kaffee"] .sg-sym-kaffee { display: block; }
.sg-mappe { fill: var(--gold); }
.sg-mappe-grau { fill: var(--leise); }
.sg-blatt-w { fill: var(--flaeche); stroke: var(--linie2); }
.sg-zeile { stroke: var(--linie2); stroke-width: 2; stroke-linecap: round; }
.sg-stempel-rot { fill: none; stroke: var(--rot); stroke-width: 2.5; }
.sg-stempel-text { fill: var(--rot); font-family: var(--schrift); }
.sg-becher { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; }
.sg-becher-band { fill: var(--gold-text); }
.sg-haken { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: var(--gruen); opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .1s, transform .15s var(--kurve); }
.sg-fach.sg-treffer { background: var(--gruen-hell); }
.sg-fach.sg-treffer .sg-haken { opacity: 1; transform: scale(1); }
.sg-fach.sg-fehl { background: var(--rot-hell); box-shadow: inset 0 0 0 3px var(--rot); animation: sg-wackeln .3s; }
.sg-fach.sg-verpasst { box-shadow: inset 0 0 0 3px var(--gold); }
@keyframes sg-wackeln { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Deko bei reduzierter Bewegung (die Spielbewegung selbst läuft weiter, app.css nimmt ohnehin alle Animationen heraus) */
@media (prefers-reduced-motion: reduce) { .sg-dampf, .sg-zahl b.sg-pop, .sg-kombo, .sg-ergebnis, .sg-perfekt { animation: none !important; } }