/* Discworld-Lesekarte (Template discworld). Eigener Look, bewusst vom Rest der Seite abweichend:
   Nachthimmel mit Gold, durchgehend dunkel (auch die Tafel). Oben die gelbe Leiste mit dem Buch, das gerade gelesen wird,
   darunter ein kompakter Kopf, Steuerung und die senkrechte Metro-Karte. Auf dem Rechner steht rechts ein feststehendes
   Detailfeld, auf dem Handy öffnet sich ein Blatt von unten.
   Schriften lokal (Germania One, Instrument Sans, beide SIL OFL, Lizenzen in licenses/). */

@font-face {
  font-family: 'Germania One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/germania-one-dw-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-dw-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --nacht: #0a0e1f;
  --nacht-2: #131936;
  --nacht-linie: #2a3260;
  --gold: #ab7c0b;
  --gold-hell: #e0b84a;
  --gold-leuchte: #d9a520;
  /* Tafel (dunkel) */
  --bg: #0f1430;
  --bg2: #181e44;
  --ink: #eef0fb;
  --mut: #a3a9cc;
  --line: #262c55;
  --aus: #3b4373;
  --akz: #e0b84a;
  --akz-text: #e8c867;
  --chk-bg: #e0b84a;
  --chk-fg: #0a0e1f;
  --stern: #e0b84a;
  --pille: #232a57;
  /* Reihen */
  --l0: #ff6a58;  /* Rincewind */
  --l1: #ffa040;  /* Industrial Revolution */
  --l2: #5aaaf0;  /* Watch */
  --l3: #aab8d4;  /* Death */
  --l4: #d2a869;  /* Ancient Civilizations */
  --l5: #b98cf0;  /* Tiffany Aching */
  --l6: #4cc88a;  /* Witches */
  --l7: #f27cb8;  /* Science of Discworld */
  --font-display: "Germania One", "Rockwell", "Georgia", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp: 18px;
  /* Farben für das Spiel am Seitenende (css/pixelspiel.css nimmt diese Namen) */
  --linie: #2a3260;
  --tinte-weich: #9aa1c8;
  --sans: var(--font-body);
  color-scheme: dark;
}
@media (min-width: 520px) { :root { --sp: 24px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--nacht); color: #eef0fb; font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--nacht); }
.in { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--gold-leuchte); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* Gelbe Leiste ganz oben */
.goldleiste { display: block; width: 100%; border: 0; background: var(--gold); color: #fff; padding: 0; text-align: center; min-height: 40px; }
.goldleiste .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; min-height: 40px; padding-block: 4px; }
.goldleiste:disabled { cursor: default; }
.gl-s { color: #ffe9a8; font-size: 13px; }
.gl-k { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #ffeab5; }
.gl-t { font-family: var(--font-display); font-size: 18px; letter-spacing: .05em; text-transform: uppercase; overflow-wrap: anywhere; }
.gl-z { font-size: 12.5px; color: #ffeab5; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .gl-z { display: none; } }
.goldleiste:focus-visible { outline-offset: -3px; outline-color: #fff; }

/* Kopf mit Sternen */
.hero {
  position: relative; overflow: hidden; padding-block: 8px 16px;
  background-color: var(--nacht);
  background-image:
    radial-gradient(1.6px 1.6px at 8% 28%, #fff, transparent), radial-gradient(1.2px 1.2px at 17% 71%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 47% 16%, #fff, transparent), radial-gradient(1px 1px at 58% 70%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 66% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 74% 78%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 83% 18%, #fff, transparent), radial-gradient(1px 1px at 91% 55%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 96% 88%, #fff, transparent);
}
.oben { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; }
.zurueck { color: var(--gold-hell); font-size: 13px; text-decoration: none; padding: 8px 0; }
.zurueck:hover { text-decoration: underline; }
.konto { display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; }
.konto button { border: 0; background: none; color: #9aa1c8; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; min-height: 36px; font-size: 13px; }
.konto button:hover { color: #fff; }
#dw-nochmal { color: var(--gold-hell); }
.stat { display: inline-flex; align-items: center; gap: 6px; color: #9aa1c8; }
.stat i { width: 8px; height: 8px; border-radius: 50%; background: #4cc88a; flex: none; }
.stat[data-art="speichert"] i { background: var(--gold-leuchte); animation: puls 1s ease-in-out infinite; }
.stat[data-art="fehler"] i { background: #ff6a58; }
.stat[data-art="fehler"] { color: #ff9b8f; }
.stat[data-art="gespeichert"] #dw-status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes puls { 50% { opacity: .35; } }
.kopfzeile { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.logo { width: 64px; height: auto; flex: none; }
.kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hell); }
h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 10vw, 54px); line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.unter { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-family: var(--font-display); font-size: 17px; letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.unter::after { content: ""; flex: 1; max-width: 80px; height: 2px; background: var(--gold-leuchte); }

/* Kennzahlen */
.zahlen { padding-block: 4px 16px; background: var(--nacht); }
.gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kachel { background: var(--nacht-2); border: 1px solid var(--nacht-linie); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.kachel .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hell); font-weight: 600; }
.kachel .w { font-family: var(--font-display); font-size: 26px; line-height: 1.15; font-variant-numeric: tabular-nums; color: #fff; }
.kachel .w small { font-family: var(--font-body); font-size: 13px; color: #9aa1c8; }
.balken { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--nacht-linie); overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--gold-hell); border-radius: 3px; transition: width .25s; }

/* Mitlaufende Leiste */
.mini { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--nacht-2); border-bottom: 1px solid var(--nacht-linie); }
.mini .in { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.mini .zahl { font-family: var(--font-display); font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
.mini .balken { flex: 1; }
.mini button { border: 0; background: var(--gold-leuchte); color: var(--nacht); border-radius: 999px; padding: 6px 14px; min-height: 36px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.mini button:disabled { opacity: .6; cursor: default; }

/* Tafel */
.tafelband { background: var(--bg); color: var(--ink); border-top: 5px double var(--gold); padding-bottom: 80px; }
.layout { display: grid; gap: 0 28px; }
@media (min-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr) 380px; } }
.meldung { margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--bg2); color: var(--ink); }
.meldung.fehler { background: #4a1511; color: #ffd6d0; }
.leer { padding: 28px 8px; text-align: center; color: var(--mut); }

/* Steuerung */
.steuerung { padding-top: 14px; display: grid; gap: 10px; }
.steuerung .zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seg2 { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg); }
.seg2 button { border: 0; background: transparent; color: var(--ink); padding: 8px 14px; min-height: 40px; font-size: 14px; }
.seg2 button[aria-pressed="true"] { background: var(--akz); color: #0a0e1f; font-weight: 600; }
.suche { position: relative; flex: 1; min-width: 160px; }
.suche input { width: 100%; font: inherit; font-size: 16px; padding: 9px 36px 9px 38px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); min-height: 44px; }
.suche svg { position: absolute; left: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--mut); pointer-events: none; }
.suche button { position: absolute; right: 4px; top: 50%; margin-top: -18px; width: 36px; height: 36px; border: 0; background: none; color: var(--mut); font-size: 20px; }
.leiste { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.leiste::-webkit-scrollbar { display: none; }
/* Mit Maus gibt es kein Wischen: Die Reihen stehen dort in mehreren Zeilen untereinander statt in einer Zeile zum Scrollen */
@media (hover: hover) and (pointer: fine) { .leiste { flex-wrap: wrap; overflow: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; } }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); min-height: 40px; }
.chip i { width: 14px; height: 14px; border-radius: 0; background: var(--sym-chip) center / contain no-repeat; }
.chip[data-lane="-1"] i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.chip b { font-weight: 600; color: var(--mut); font-variant-numeric: tabular-nums; font-size: 12px; }
.chip[aria-pressed="true"] { border-color: var(--akz); box-shadow: inset 0 0 0 1px var(--akz); }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12.5px; color: var(--mut); margin: 6px 0 0; }
.legende .k { display: inline-block; width: 12px; height: 12px; background: var(--mut); border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.legende .r { width: 8px; height: 8px; margin: 0 7px 0 2px; vertical-align: 0; }

/* Karte */
.kolonnen { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 44px); z-index: 30; background: var(--bg); display: grid; grid-template-columns: calc(var(--sp) * 8) minmax(0, 1fr); border-bottom: 1px solid var(--line); margin-top: 10px; }
.kolonnen .punkte { display: grid; grid-template-columns: repeat(8, var(--sp)); }
.kolonnen button { border: 0; background: none; padding: 0; height: 40px; display: grid; place-items: center; }
.kolonnen button i { width: 16px; height: 16px; border-radius: 0; background: var(--sym-chip) center / contain no-repeat; }
.kolonnen button[aria-pressed="true"] i { outline: 2px solid var(--ink); outline-offset: 2px; }
.kolonnen .text { font-size: 12px; color: var(--mut); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; padding-left: 4px; }

.row { display: grid; grid-template-columns: calc(var(--sp) * 8) minmax(0, 1fr); transition: opacity .15s; scroll-margin-top: 130px; }
.row.aus { opacity: .38; }
.graf { display: grid; grid-template-columns: repeat(8, var(--sp)); }
.seg { position: relative; }
.seg.on::before { content: ""; position: absolute; left: calc(50% - 2px); width: 4px; top: 0; bottom: 0; background: var(--c); }
.seg.first::before { top: 26px; }
.seg.last::before { bottom: auto; height: 26px; }
/* Punkte der Karte: je Reihe ein Zeichen (Zauberhut, Dampflok, Wachmarke, Sanduhr, Pyramide, Bratpfanne, Besen, Erlenmeyerkolben) auf einer runden Scheibe in
   der Farbe der Tafel, damit die Linie nicht hindurchläuft. Ungelesen = Umriss, gelesen = ausgefüllt, Nebenwerke kleiner. Die Zeichen stehen unten als SVG
   (`--sym-leer`, `--sym-voll`, `--sym-chip` je Reihe, `data-l` setzt js/discworld.js). Im Pixel-Modus ersetzt css/discworld-pixel.css sie durch Pixelbilder. */
.punkt { position: absolute; left: 50%; top: 26px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; z-index: 1;
  background: var(--bg) var(--sym-leer) center / 94% no-repeat; }
.punkt.gelesen { background-image: var(--sym-voll); }
.punkt.neben { width: 22px; height: 22px; margin: -11px 0 0 -11px; background-size: 94%; }
.row.sel .punkt { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); }
/* Du liest gerade: goldener Ring, der sanft pulsiert */
@keyframes sym-puls { 0%, 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-hell); } 50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 7px rgba(224, 184, 74, .22); } }
.row.liest .punkt { animation: sym-puls 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .row.liest .punkt { animation: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-hell); } }
.dekade .dk { display: flex; align-items: center; gap: 10px; padding: 16px 4px 4px; font-family: var(--font-display); font-size: 15px; letter-spacing: .12em; color: var(--mut); text-transform: uppercase; }
.dekade .dk::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.inhalt { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.wisch { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: #fff; }
.wisch span { display: flex; align-items: center; height: 100%; padding: 0 14px; }
.wisch .wl { background: #2e9b57; }
.wisch .wr { background: var(--gold); margin-left: auto; }
.vorn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; background: var(--bg); touch-action: pan-y; transition: transform .18s; }
.row.sel .vorn { background: var(--bg2); }
.row.liest .vorn { box-shadow: inset 4px 0 0 var(--gold-leuchte); }
.vorn.zieht { transition: none; }
.kopf { border: 0; background: none; text-align: left; padding: 11px 4px 10px 8px; min-width: 0; color: inherit; }
.meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); min-height: 18px; white-space: nowrap; min-width: 0; }
.meta .nr { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.meta .reihe { color: var(--c); font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.titel { display: block; font-family: var(--font-display); font-size: 18.5px; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; color: var(--ink); }
.marken { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.marken:empty { display: none; }
.marke { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--pille); color: var(--ink); }
.marke.gold { background: var(--gold-leuchte); color: #0a0e1f; }
.sterne { margin-left: auto; display: inline-flex; align-items: center; }
.ks { display: inline-flex; color: var(--aus); }
.ks.an { color: var(--stern); }
.ks svg { width: 13px; height: 13px; display: block; }
.haken { width: 44px; height: 52px; border: 0; background: none; display: grid; place-items: start center; padding-top: 14px; }
.haken span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--aus); display: grid; place-items: center; color: transparent; font-size: 14px; font-weight: 700; line-height: 1; transition: background .12s; }
.haken[aria-pressed="true"] span { background: var(--chk-bg); border-color: var(--chk-bg); color: var(--chk-fg); }

/* Ansicht Nach Reihe */
.reihen { display: grid; gap: 12px; padding-top: 14px; }
.rk { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg); }
.rk-kopf { width: 100%; text-align: left; border: 0; background: none; padding: 12px 14px; display: grid; gap: 6px; color: inherit; }
.rk-zeile { display: flex; align-items: center; gap: 10px; }
.rk-zeile i { width: 18px; height: 18px; border-radius: 0; background: var(--sym-chip) center / contain no-repeat; flex: none; }
.rk-name { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; letter-spacing: .02em; flex: 1; min-width: 0; }
.rk-zahl { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--mut); font-size: 14px; }
.rk-fig { font-size: 12.5px; color: var(--mut); }
.rk .fb { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rk .fb b { display: block; height: 100%; background: var(--c); }
.rk-weiter { font-size: 13.5px; color: var(--ink); }
.rk-weiter b { color: var(--akz-text); }
.rk-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rk-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; border-bottom: 1px solid var(--line); }
.rk-liste li:last-child { border-bottom: 0; }
.rk-liste .kopf { padding-left: 14px; }
.rk-liste li.sel { background: var(--bg2); }

/* Detail (Blatt auf dem Handy, Feld rechts auf dem Rechner) */
.dt { display: grid; gap: 14px; }
.dt-kopf { display: flex; gap: 8px; align-items: flex-start; }
.dt-kopf .mitte { flex: 1; min-width: 0; }
.dt-meta { margin: 0; font-size: 13px; color: var(--mut); }
.dt h2 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.12; overflow-wrap: anywhere; color: var(--ink); }
.dt h2:focus { outline: none; }
.dt-nav { width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 22px; line-height: 1; flex: none; }
.dt-info { margin: 0; font-size: 14px; color: var(--mut); }
.dt-stern { display: flex; justify-content: space-between; max-width: 340px; }
.bstern { position: relative; width: 20%; max-width: 68px; aspect-ratio: 1; color: var(--aus); }
.bstern svg { display: block; width: 100%; height: 100%; padding: 4px; }
.bstern.an, .bstern.halb { color: var(--stern); }
.bstern button { position: absolute; top: 0; bottom: 0; width: 50%; border: 0; padding: 0; background: transparent; border-radius: 0; }
.bstern .l { left: 0; }
.bstern .r { right: 0; }
.dt-text { margin: 0; font-weight: 600; font-size: 16px; min-height: 24px; }
.dt-akt { display: flex; flex-wrap: wrap; gap: 8px; }
.knopf { border: 2px solid var(--akz); background: transparent; color: var(--akz); border-radius: 999px; padding: 8px 18px; font-family: var(--font-display); font-size: 17px; text-transform: uppercase; letter-spacing: .03em; min-height: 46px; white-space: nowrap; }
.knopf[aria-pressed="true"] { background: var(--akz); color: #0a0e1f; }
.link { border: 0; background: none; color: var(--mut); text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; min-height: 44px; text-align: left; }

.seite { display: none; }
@media (min-width: 1000px) { .seite:not([hidden]) { display: block; position: sticky; top: 100px; align-self: start; margin-top: 14px; background: var(--bg2); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; } }
.seite .leer { padding: 12px 0; }

.hintergrund { position: fixed; inset: 0; background: rgba(5, 8, 20, .6); z-index: 70; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: var(--bg); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 8px max(18px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); max-height: 88vh; overflow: auto; animation: hoch .2s ease-out; }
.sheet .griff { width: 44px; height: 5px; border-radius: 3px; background: var(--aus); margin: 4px auto 12px; }
.sheet .dt { max-width: 520px; margin: 0 auto; }
/* Blatt auf dem Handy: immer gleich hoch. Der Text in der Mitte scrollt bei Bedarf, Sterne und Knöpfe stehen bei jedem Buch an derselben Stelle,
   so lässt sich mit ‹ und › durch alle Bücher blättern. */
.sheet { height: min(88vh, 640px); display: flex; flex-direction: column; overflow: hidden; }
.sheet #dw-sheet-inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet .dt { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.sheet .dt-kopf .mitte { min-height: calc(2 * 1.12 * 26px + 20px); }
.sheet .dt h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.sheet .dt-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.dt-body { display: grid; gap: 10px; }
.dt .leer-platz { visibility: hidden; } /* behält den Platz, damit Sterne und Knöpfe bei jedem Buch gleich liegen */
.dt-inhalt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
@keyframes hoch { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 1000px) { .hintergrund, .sheet { display: none !important; } }

/* Meldung unten */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80; background: #232a57; color: #fff; border: 1px solid #4a5390; border-radius: 12px; padding: 6px 8px 6px 14px; display: flex; align-items: center; gap: 4px; width: min(92vw, 460px); font-size: 14.5px; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.toast span { flex: 1; min-width: 0; }
.toast button { border: 0; background: none; color: var(--gold-hell); font-weight: 600; padding: 10px; min-height: 44px; }

/* Anmeldung */
.anmelden { max-width: 380px; margin: 0 auto; padding: 28px 0 40px; display: grid; gap: 8px; }
.anmelden h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 30px; text-transform: uppercase; text-align: center; }
.anmelden label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mut); margin-top: 6px; }
.anmelden input[type="text"], .anmelden input[type="password"] { font: inherit; font-size: 16px; padding: 12px; border: 1.5px solid var(--aus); border-radius: 8px; background: var(--bg2); color: var(--ink); min-height: 48px; width: 100%; }
.pw { position: relative; }
.pw input { padding-right: 96px; }
.pw button { position: absolute; right: 4px; top: 4px; height: 40px; border: 0; background: none; color: var(--mut); text-decoration: underline; padding: 0 10px; font-size: 14px; }
.anmelden .absenden { margin-top: 10px; border: 0; background: var(--akz); color: #0a0e1f; border-radius: 999px; min-height: 50px; font-family: var(--font-display); font-size: 19px; letter-spacing: .04em; text-transform: uppercase; }
.anmelden .absenden:disabled { opacity: .6; cursor: default; }
.anmelden .fehlertext { color: #ff9b8f; font-size: 14px; margin: 4px 0 0; }
.anmelden .hinweis-text { color: var(--mut); font-size: 14px; margin: 0 0 4px; text-align: center; }
.anmelden .klein { color: var(--mut); font-size: 13px; text-align: center; margin: 6px 0 0; }

.skel { padding-top: 14px; display: grid; gap: 10px; }
.skel i { display: block; height: 52px; border-radius: 10px; background: linear-gradient(90deg, var(--bg2), var(--line), var(--bg2)); background-size: 200% 100%; animation: glanz 1.2s linear infinite; }
@keyframes glanz { to { background-position: -200% 0; } }

/* Seitenende: hier steht Rincewind (Spiel, css/pixelspiel.css); die Spielfläche wächst darunter */
footer { background: var(--nacht); padding-block: 34px 56px; }
footer .in { display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .vorn, .row, .sheet, .balken i, .skel i, .stat i { transition: none; animation: none; } }

/* Zeichen der Reihen (erzeugt, nicht von Hand ändern: Zeichnungen siehe CLAUDE.md „Punkte der Metrokarte“) */
.punkt[data-l="0"] { --sym-leer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 17.2C8 12 9.3 7.2 12.8 3.6C14.2 2.2 16.2 3.2 15.6 4.8C15.1 6 14.7 6.8 15.2 8.6C15.8 11 16.8 14 17.6 17.2Z%22 fill=%22%23ff6a58%22 fill-opacity=%22.14%22 stroke=%22%23ff6a58%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2212%22 cy=%2217.6%22 rx=%229.6%22 ry=%222.7%22 fill=%22%23ff6a58%22 fill-opacity=%22.14%22 stroke=%22%23ff6a58%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); --sym-voll: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 17.2C8 12 9.3 7.2 12.8 3.6C14.2 2.2 16.2 3.2 15.6 4.8C15.1 6 14.7 6.8 15.2 8.6C15.8 11 16.8 14 17.6 17.2Z%22 fill=%22%23ff6a58%22/%3E%3Cellipse cx=%2212%22 cy=%2217.6%22 rx=%229.6%22 ry=%222.7%22 fill=%22%23994035%22/%3E%3Cpath d=%22M9.8 17.3C10.3 14 11.4 11 13 8.4%22 stroke=%22%23ffada3%22 stroke-width=%221.2%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpolygon points=%2212.40,9.90 12.99,11.39 14.59,11.49 13.35,12.51 13.75,14.06 12.40,13.20 11.05,14.06 11.45,12.51 10.21,11.49 11.81,11.39%22 fill=%22%23f4c542%22/%3E%3C/svg%3E"); }
.punkt[data-l="1"] { --sym-leer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223.2%22 y=%227.6%22 width=%226%22 height=%229%22 rx=%221%22 fill=%22%23ffa040%22 fill-opacity=%22.14%22 stroke=%22%23ffa040%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Crect x=%228.6%22 y=%2210.4%22 width=%2212.2%22 height=%226.2%22 rx=%221.2%22 fill=%22%23ffa040%22 fill-opacity=%22.14%22 stroke=%22%23ffa040%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Crect x=%2214.8%22 y=%225.6%22 width=%223.4%22 height=%225%22 rx=%22.6%22 fill=%22%23ffa040%22 fill-opacity=%22.14%22 stroke=%22%23ffa040%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%226.5%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2212%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2217.6%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3C/svg%3E"); --sym-voll: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223.2%22 y=%227.6%22 width=%226%22 height=%229%22 rx=%221%22 fill=%22%23ffa040%22/%3E%3Crect x=%228.6%22 y=%2210.4%22 width=%2212.2%22 height=%226.2%22 rx=%221.2%22 fill=%22%23ffa040%22/%3E%3Crect x=%2214.8%22 y=%225.6%22 width=%223.4%22 height=%225%22 rx=%22.6%22 fill=%22%23996026%22/%3E%3Crect x=%224.6%22 y=%229%22 width=%223.2%22 height=%223%22 rx=%22.5%22 fill=%22%230f1430%22/%3E%3Ccircle cx=%2211.6%22 cy=%229.8%22 r=%221.5%22 fill=%22%23f4c542%22/%3E%3Ccircle cx=%2216.4%22 cy=%223.6%22 r=%221.5%22 fill=%22%23ffcb96%22/%3E%3Ccircle cx=%2219%22 cy=%222.4%22 r=%221%22 fill=%22%23ffcb96%22/%3E%3Ccircle cx=%226.5%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2212%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2217.6%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3C/svg%3E"); }
.punkt[data-l="2"] { --sym-leer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2.4 L20 5.4 V11.4 C20 16.4 16.6 19.8 12 21.8 C7.4 19.8 4 16.4 4 11.4 V5.4 Z%22 fill=%22%235aaaf0%22 fill-opacity=%22.14%22 stroke=%22%235aaaf0%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Cpolygon points=%2212.00,7.20 13.12,10.06 16.18,10.24 13.81,12.19 14.59,15.16 12.00,13.50 9.41,15.16 10.19,12.19 7.82,10.24 10.88,10.06%22 stroke=%22%235aaaf0%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); --sym-voll: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2.4 L20 5.4 V11.4 C20 16.4 16.6 19.8 12 21.8 C7.4 19.8 4 16.4 4 11.4 V5.4 Z%22 fill=%22%235aaaf0%22/%3E%3Cpath d=%22M12 2.4 L20 5.4 V11.4 C20 16.4 16.6 19.8 12 21.8Z%22 fill=%22%23366690%22 fill-opacity=%22.28%22/%3E%3Cpolygon points=%2212.00,7.20 13.12,10.06 16.18,10.24 13.81,12.19 14.59,15.16 12.00,13.50 9.41,15.16 10.19,12.19 7.82,10.24 10.88,10.06%22 fill=%22%23f4c542%22/%3E%3C/svg%3E"); }
.punkt[data-l="3"] { --sym-leer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6.8 3.4H17.2M6.8 20.6H17.2%22 stroke=%22%23aab8d4%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M8.2 4.4C8.2 9 11.2 10.6 12 12C12.8 10.6 15.8 9 15.8 4.4Z%22 fill=%22%23aab8d4%22 fill-opacity=%22.14%22 stroke=%22%23aab8d4%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M12 12C11.2 13.4 8.2 15 8.2 19.6H15.8C15.8 15 12.8 13.4 12 12Z%22 fill=%22%23aab8d4%22 fill-opacity=%22.14%22 stroke=%22%23aab8d4%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); --sym-voll: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6.8 3.4H17.2M6.8 20.6H17.2%22 stroke=%22%238b5a2b%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M8.2 4.4C8.2 9 11.2 10.6 12 12C12.8 10.6 15.8 9 15.8 4.4Z%22 fill=%22%23aab8d4%22/%3E%3Cpath d=%22M12 12C11.2 13.4 8.2 15 8.2 19.6H15.8C15.8 15 12.8 13.4 12 12Z%22 fill=%22%23aab8d4%22/%3E%3Cpath d=%22M9.6 17.2H14.4L15.2 19.4H8.8Z%22 fill=%22%23666e7f%22 fill-opacity=%22.55%22/%3E%3Cpath d=%22M10.4 6.2H13.6C13.3 8 12.6 9 12 9.6C11.4 9 10.7 8 10.4 6.2Z%22 fill=%22%23d0d8e7%22/%3E%3C/svg%3E"); }
.punkt[data-l="4"] { --sym-leer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 5.6 L22 19 H2 Z%22 fill=%22%23d2a869%22 fill-opacity=%22.14%22 stroke=%22%23d2a869%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); --sym-voll: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 5.6 L22 19 H2 Z%22 fill=%22%23d2a869%22/%3E%3Cpath d=%22M12 5.6 L22 19 H12Z%22 fill=%22%237e653f%22 fill-opacity=%22.3%22/%3E%3Cpath d=%22M6 14.6H18M8.8 10.6H15.2%22 stroke=%22%237e653f%22 stroke-width=%22.9%22 stroke-opacity=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M12 5.6 L22 19 H2 Z%22 fill=%22none%22 stroke=%22%230f1430%22 stroke-width=%22.9%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.punkt[data-l="5"] { --sym-leer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M16 12H21.4%22 stroke=%22%23b98cf0%22 stroke-width=%223.6%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%229.6%22 cy=%2212%22 r=%227.4%22 fill=%22%23b98cf0%22 fill-opacity=%22.14%22 stroke=%22%23b98cf0%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%229.6%22 cy=%2212%22 r=%224.8%22 fill=%22none%22 stroke=%22%23b98cf0%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22 stroke-opacity=%22.5%22/%3E%3C/svg%3E"); --sym-voll: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M16 12H21.4%22 stroke=%22%238b5a2b%22 stroke-width=%223.6%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2220.6%22 cy=%2212%22 r=%22.8%22 fill=%22%230f1430%22/%3E%3Ccircle cx=%229.6%22 cy=%2212%22 r=%227.4%22 fill=%22%23b98cf0%22/%3E%3Ccircle cx=%229.6%22 cy=%2212%22 r=%225.4%22 fill=%22%236f5490%22 fill-opacity=%22.45%22/%3E%3Cellipse cx=%229.4%22 cy=%2212.4%22 rx=%223.2%22 ry=%222.8%22 fill=%22%23fff6d6%22/%3E%3Ccircle cx=%229.6%22 cy=%2212.4%22 r=%221.4%22 fill=%22%23f4c542%22/%3E%3C/svg%3E"); }
.punkt[data-l="6"] { --sym-leer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M21 3L10.6 13.4%22 stroke=%22%234cc88a%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M8.2 11.6L14.4 17.8C13.4 20 10 22 4.8 22C3.4 22 2.8 20.8 3.6 19.8C5.4 17.4 6.6 14.2 8.2 11.6Z%22 fill=%22%234cc88a%22 fill-opacity=%22.14%22 stroke=%22%234cc88a%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M6.4 18.4L10 15.6M8.2 20.2L12 17.2%22 stroke=%22%234cc88a%22 stroke-width=%221.1%22 stroke-opacity=%22.6%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); --sym-voll: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M21 3L10.6 13.4%22 stroke=%22%238b5a2b%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M8.2 11.6L14.4 17.8C13.4 20 10 22 4.8 22C3.4 22 2.8 20.8 3.6 19.8C5.4 17.4 6.6 14.2 8.2 11.6Z%22 fill=%22%23f4c542%22/%3E%3Cpath d=%22M8.2 11.6L14.4 17.8%22 stroke=%22%234cc88a%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M6.4 18.4L10 15.6M8.2 20.2L12 17.2M5 20.6L7.4 18.8%22 stroke=%22%238b5a2b%22 stroke-width=%22.9%22 stroke-opacity=%22.75%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.punkt[data-l="7"] { --sym-leer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9.6 3H14.4V9.2L20 19.2C20.6 20.6 19.8 21.6 18.4 21.6H5.6C4.2 21.6 3.4 20.6 4 19.2L9.6 9.2Z%22 fill=%22%23f27cb8%22 fill-opacity=%22.14%22 stroke=%22%23f27cb8%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M8.6 3H15.4%22 stroke=%22%23f27cb8%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); --sym-voll: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9.6 3H14.4V9.2L20 19.2C20.6 20.6 19.8 21.6 18.4 21.6H5.6C4.2 21.6 3.4 20.6 4 19.2L9.6 9.2Z%22 fill=%22%23dff3ff%22 fill-opacity=%22.22%22 stroke=%22%23dff3ff%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M6.6 15.4H17.4L19.8 19.6C20.3 20.8 19.6 21.2 18.4 21.2H5.6C4.4 21.2 3.7 20.8 4.2 19.6Z%22 fill=%22%23f27cb8%22/%3E%3Ccircle cx=%2210.4%22 cy=%2218%22 r=%22.9%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3Ccircle cx=%2213.4%22 cy=%2216.8%22 r=%22.7%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3Cpath d=%22M8.6 3H15.4%22 stroke=%22%23dff3ff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-lane="0"], [data-rk="0"] { --sym-chip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 17.2C8 12 9.3 7.2 12.8 3.6C14.2 2.2 16.2 3.2 15.6 4.8C15.1 6 14.7 6.8 15.2 8.6C15.8 11 16.8 14 17.6 17.2Z%22 fill=%22%23ff6a58%22/%3E%3Cellipse cx=%2212%22 cy=%2217.6%22 rx=%229.6%22 ry=%222.7%22 fill=%22%23994035%22/%3E%3Cpath d=%22M9.8 17.3C10.3 14 11.4 11 13 8.4%22 stroke=%22%23ffada3%22 stroke-width=%221.2%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpolygon points=%2212.40,9.90 12.99,11.39 14.59,11.49 13.35,12.51 13.75,14.06 12.40,13.20 11.05,14.06 11.45,12.51 10.21,11.49 11.81,11.39%22 fill=%22%23f4c542%22/%3E%3C/svg%3E"); }
[data-lane="1"], [data-rk="1"] { --sym-chip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223.2%22 y=%227.6%22 width=%226%22 height=%229%22 rx=%221%22 fill=%22%23ffa040%22/%3E%3Crect x=%228.6%22 y=%2210.4%22 width=%2212.2%22 height=%226.2%22 rx=%221.2%22 fill=%22%23ffa040%22/%3E%3Crect x=%2214.8%22 y=%225.6%22 width=%223.4%22 height=%225%22 rx=%22.6%22 fill=%22%23996026%22/%3E%3Crect x=%224.6%22 y=%229%22 width=%223.2%22 height=%223%22 rx=%22.5%22 fill=%22%230f1430%22/%3E%3Ccircle cx=%2211.6%22 cy=%229.8%22 r=%221.5%22 fill=%22%23f4c542%22/%3E%3Ccircle cx=%2216.4%22 cy=%223.6%22 r=%221.5%22 fill=%22%23ffcb96%22/%3E%3Ccircle cx=%2219%22 cy=%222.4%22 r=%221%22 fill=%22%23ffcb96%22/%3E%3Ccircle cx=%226.5%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2212%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2217.6%22 cy=%2218.8%22 r=%222.1%22 fill=%22%230f1430%22 stroke=%22%23ffa040%22 stroke-width=%221.5%22/%3E%3C/svg%3E"); }
[data-lane="2"], [data-rk="2"] { --sym-chip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2.4 L20 5.4 V11.4 C20 16.4 16.6 19.8 12 21.8 C7.4 19.8 4 16.4 4 11.4 V5.4 Z%22 fill=%22%235aaaf0%22/%3E%3Cpath d=%22M12 2.4 L20 5.4 V11.4 C20 16.4 16.6 19.8 12 21.8Z%22 fill=%22%23366690%22 fill-opacity=%22.28%22/%3E%3Cpolygon points=%2212.00,7.20 13.12,10.06 16.18,10.24 13.81,12.19 14.59,15.16 12.00,13.50 9.41,15.16 10.19,12.19 7.82,10.24 10.88,10.06%22 fill=%22%23f4c542%22/%3E%3C/svg%3E"); }
[data-lane="3"], [data-rk="3"] { --sym-chip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6.8 3.4H17.2M6.8 20.6H17.2%22 stroke=%22%238b5a2b%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M8.2 4.4C8.2 9 11.2 10.6 12 12C12.8 10.6 15.8 9 15.8 4.4Z%22 fill=%22%23aab8d4%22/%3E%3Cpath d=%22M12 12C11.2 13.4 8.2 15 8.2 19.6H15.8C15.8 15 12.8 13.4 12 12Z%22 fill=%22%23aab8d4%22/%3E%3Cpath d=%22M9.6 17.2H14.4L15.2 19.4H8.8Z%22 fill=%22%23666e7f%22 fill-opacity=%22.55%22/%3E%3Cpath d=%22M10.4 6.2H13.6C13.3 8 12.6 9 12 9.6C11.4 9 10.7 8 10.4 6.2Z%22 fill=%22%23d0d8e7%22/%3E%3C/svg%3E"); }
[data-lane="4"], [data-rk="4"] { --sym-chip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 5.6 L22 19 H2 Z%22 fill=%22%23d2a869%22/%3E%3Cpath d=%22M12 5.6 L22 19 H12Z%22 fill=%22%237e653f%22 fill-opacity=%22.3%22/%3E%3Cpath d=%22M6 14.6H18M8.8 10.6H15.2%22 stroke=%22%237e653f%22 stroke-width=%22.9%22 stroke-opacity=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M12 5.6 L22 19 H2 Z%22 fill=%22none%22 stroke=%22%230f1430%22 stroke-width=%22.9%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-lane="5"], [data-rk="5"] { --sym-chip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M16 12H21.4%22 stroke=%22%238b5a2b%22 stroke-width=%223.6%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2220.6%22 cy=%2212%22 r=%22.8%22 fill=%22%230f1430%22/%3E%3Ccircle cx=%229.6%22 cy=%2212%22 r=%227.4%22 fill=%22%23b98cf0%22/%3E%3Ccircle cx=%229.6%22 cy=%2212%22 r=%225.4%22 fill=%22%236f5490%22 fill-opacity=%22.45%22/%3E%3Cellipse cx=%229.4%22 cy=%2212.4%22 rx=%223.2%22 ry=%222.8%22 fill=%22%23fff6d6%22/%3E%3Ccircle cx=%229.6%22 cy=%2212.4%22 r=%221.4%22 fill=%22%23f4c542%22/%3E%3C/svg%3E"); }
[data-lane="6"], [data-rk="6"] { --sym-chip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M21 3L10.6 13.4%22 stroke=%22%238b5a2b%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M8.2 11.6L14.4 17.8C13.4 20 10 22 4.8 22C3.4 22 2.8 20.8 3.6 19.8C5.4 17.4 6.6 14.2 8.2 11.6Z%22 fill=%22%23f4c542%22/%3E%3Cpath d=%22M8.2 11.6L14.4 17.8%22 stroke=%22%234cc88a%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M6.4 18.4L10 15.6M8.2 20.2L12 17.2M5 20.6L7.4 18.8%22 stroke=%22%238b5a2b%22 stroke-width=%22.9%22 stroke-opacity=%22.75%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
[data-lane="7"], [data-rk="7"] { --sym-chip: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9.6 3H14.4V9.2L20 19.2C20.6 20.6 19.8 21.6 18.4 21.6H5.6C4.2 21.6 3.4 20.6 4 19.2L9.6 9.2Z%22 fill=%22%23dff3ff%22 fill-opacity=%22.22%22 stroke=%22%23dff3ff%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M6.6 15.4H17.4L19.8 19.6C20.3 20.8 19.6 21.2 18.4 21.2H5.6C4.4 21.2 3.7 20.8 4.2 19.6Z%22 fill=%22%23f27cb8%22/%3E%3Ccircle cx=%2210.4%22 cy=%2218%22 r=%22.9%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3Ccircle cx=%2213.4%22 cy=%2216.8%22 r=%22.7%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3Cpath d=%22M8.6 3H15.4%22 stroke=%22%23dff3ff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }