/* smp.winku.de — SMP Arcade: Übersicht, Üben, Spielen (Lobby), Kasse, Partien, Bank. Baut auf smp.css auf (Farben, Knöpfe, Inventar-Fenster, Slots, Notenblöcke, Handelsfenster). Keine Inline-Stile: Balken und Farben setzt das Skript nur über Klassen und CSS-Variablen (CSSOM). */ .kopf.k48 { inline-size: 48px; block-size: 48px; } /* ── Unter der Bereichsleiste (26.09.2026): Die Reiter der Arcade (Übersicht, Spielen, Üben, Kasse, Turniere) stehen seit dem Umbau der Navigation in der EINEN Bereichsleiste der Hülle (seiten/navigation.js, smp.css Abschnitt 4) — hier bleibt nur der Kasten für Herausforderungen, Verbindungsanzeige und Event-Streifen. Ab 761 px bleibt er unter dem Winku-Kopf (64 px) stehen, damit eine Herausforderung nie außer Sicht ankommt; ohne Inhalt ist er weg. ─────────── */ .arcade-kopf { position: relative; z-index: 40; image-rendering: pixelated; background: linear-gradient(rgb(14 14 18 / .92), rgb(14 14 18 / .92)), url("img/tex/tiefenschiefer.png") 0 0 / 64px 64px; border-block-end: 4px solid #000; box-shadow: 0 10px 24px -6px rgb(0 0 0 / .6); } .arcade-kopf:not(:has(.forderungen > *, .leitung-hinweis:not([hidden]), .event-streifen)) { display: none; } .arcade-post > .innen { padding-block: 10px 0; } @media (min-width: 761px) { .arcade-kopf { position: sticky; inset-block-start: 64px; } } html[data-titelspiel-laeuft] .arcade-kopf { position: relative; inset-block-start: auto; } /* Guthaben im Reiter „Kasse" (Bereichsleiste) blinkt, wenn es sich ändert (js/arcade-live.js) */ .nv-reiter.blitzt .nv-betrag { animation: guthaben-blitz 1.2s ease-out; } /* Unter der Leiste: Verbindungsanzeige und Herausforderungen (live) — stehen mit der Leiste fest, sind also immer zu sehen */ .arcade-post .leitung-hinweis { margin: 0 0 10px; } .arcade-post .forderungen:not(:empty) { margin-block-end: 10px; } /* Anker (#spiele, #sonic-echo …) nicht unter Kopf- und Arcade-Leiste verstecken */ .arcade-bereich [id] { scroll-margin-block-start: 88px; } /* unter dem Winku-Kopf (64 px) und etwas Luft */ @media (min-width: 761px) { .arcade-bereich [id] { scroll-margin-block-start: 160px; } } /* Toasts nicht über die Leiste legen — und nicht über Herausforderungen im Arcade-Kasten (--toast-oben setzt js/arcade-live.js melden(), Audit arcade-11; erst ab 761 px steht der Kasten fest — darunter scrollt er mit weg). Schmal (Nach-Audit 03.10.): Der Kasten scrollt zwar mit, liegt aber oben im Bild, solange man nicht gescrollt hat — der Toast hat ihn am Handy angeschnitten; darum auch dort unter den Kasten (stand er nicht im Bild, bleibt es bei der üblichen Toast-Höhe). */ [data-bereich="arcade"] .toasts { inset-block-start: max(calc(76px + env(safe-area-inset-top, 0px)), var(--toast-oben, 0px)); } @media (min-width: 761px) { [data-bereich="arcade"] .toasts { inset-block-start: max(156px, var(--toast-oben, 0px)); } } /* Seiten hinter der Leiste: weniger Luft oben, die Leiste ist schon der Anfang */ .arcade-bereich .arcade-seite { padding-block-start: 44px; } /* Links im Text sichtbar machen (winku.css setzt a auf „wie Text") — auf dunkler Welt weiß, in hellen Fenstern dunkel */ .arcade-bereich .kopfzeile-welt p a { color: #fff; text-decoration: underline; text-underline-offset: .18em; } .arcade-bereich .kopfzeile-welt p a:hover { color: var(--mc-gelb); } .arcade-bereich .mc-inventar p a, .arcade-bereich .mc-inventar .zu-wenig a { color: #111; font-weight: 650; text-decoration: underline; text-underline-offset: .18em; } @keyframes guthaben-blitz { 0% { color: #fff; text-shadow: 0 0 12px #ffd27a; } 100% { } } .leitung-hinweis { margin: 0 0 16px; padding: 8px 12px; background: rgb(90 20 20 / .75); border: 2px solid #5c1010; color: #ffd0d0; font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 #000; } /* ── Raster ─────────────────────────────────────────────────────────────────────────────────────────────────────── */ .lobby-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-block-start: 18px; } .lobby-raster.gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 20px; } /* minmax(0, …): sonst setzt eine Tabelle ihre Mindestbreite durch und die Seite wird breiter als das Telefon (375 → 446 px) */ @media (max-width: 960px) { .lobby-raster, .lobby-raster.gleich { grid-template-columns: minmax(0, 1fr); } } .abstand-unten { margin-block-end: 18px; } /* Die Spalte selbst ist ein Raster mit EINER Spur — ohne minmax(0, …) wäre sie so breit wie die breiteste Tabelle darin */ .arcade-bereich .spalte-mc { grid-template-columns: minmax(0, 1fr); } /* Telefon: Tabellen (letzte Partien, Kassenbuch) enger — und wenn es dann noch nicht passt, im Fenster seitlich schieben */ @media (max-width: 560px) { .arcade-bereich .mc-inventar .tabelle-mc { display: block; overflow-x: auto; } .arcade-bereich .mc-inventar .tabelle-mc th, .arcade-bereich .mc-inventar .tabelle-mc td { padding: 6px 7px; } } .arcade-seite .kopfzeile-welt .ueber { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; } .arcade-seite .mc-inventar p { margin: 0 0 10px; line-height: 1.5; } .arcade-seite .mc-inventar p:last-child { margin-block-end: 0; } .arcade-seite fieldset { border: 0; margin: 0 0 12px; padding: 0; min-inline-size: 0; } .arcade-seite legend { font: 400 20px/24px var(--mc-schrift); color: var(--gui-text); margin-block-end: 8px; padding: 0; } .mitte { text-align: center; } .arcade-seite .mc-inventar > .fenster-titel, .arcade-seite .mc-inventar > summary.fenster-titel { display: flex; align-items: center; gap: 8px; } .arcade-seite .fenster-titel .mc-item { inline-size: 32px; block-size: 32px; flex: none; } .mc-dialog .fenster-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .online-zahl { font: 400 20px/24px var(--mc-schrift); color: #d8d8d8; text-shadow: 2px 2px 0 #000; } .marke-mc.bot-an { color: var(--mc-gruen); } .marke-mc.bot-aus { color: var(--mc-gold); } /* ── Schnell spielen (Quickplay): drei nummerierte Schritte ─────────────────────────────────────────────────────── */ .nr { display: inline-grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; box-sizing: border-box; padding-block-end: 2px; font: 400 20px/1 var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #173717; background: #2f6b2f; border: 2px solid #000; box-shadow: inset 2px 2px 0 #6fbf6f, inset -2px -2px 0 #173717; } .quickplay legend { display: flex; align-items: center; gap: 8px; } .quickplay > .klein.leise:first-of-type { margin-block-end: 14px; } .los-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-block-start: 6px; } /* Audit arcade-12: am Handy bleibt „Gegner suchen" beim Wählen unten im Bild (nur innerhalb des Schnellspiel-Kastens) */ @media (max-width: 760px) { .quickplay .los-zeile { position: sticky; inset-block-end: 0; z-index: 5; padding-block: 8px; background: var(--gui); box-shadow: 0 -3px 0 rgba(0, 0, 0, .18); } } .guthaben-zeile { margin: 10px 0 0; color: #2b2b2b; font-size: .92rem; } .guthaben-zeile b { font: 400 20px/24px var(--mc-schrift); color: #6e4700; font-variant-numeric: tabular-nums; } .guthaben-zeile a { color: #111; font-weight: 650; text-decoration: underline; text-underline-offset: .18em; } .guthaben-zeile.blitzt b { animation: guthaben-blitz 1.2s ease-out; } .zu-wenig { margin: 8px 0 0; padding: 8px 10px; background: #f6e0e0; border: 2px solid #a31515; color: #5c0d0d; font-size: .92rem; line-height: 1.45; } .spiel-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* Handy (Nach-Audit 03.10.2026, Lobby war ~6000 px lang): zwei Spalten, Karte = Symbol + Name + EINE Zeile; „Mehr erfahren" klappt den Erklärtext auf (die offene Karte nimmt beide Spalten, Muster 45: minmax(0, 1fr) statt auto). Breit sind Knopf und Sprunglink weg und der Text steht wie bisher ganz da. */ .karte-mehr, .zum-einsatz { display: none; } @media (max-width: 560px) { .spiel-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .spiel-wahl .spiel-karte .karte-innen { padding: 8px 4px; gap: 2px; align-content: start; } .spiel-wahl .spiel-karte .mc-item.gross { inline-size: 32px; block-size: 32px; } /* Namen mit der Breite wachsen lassen: „Tresorknacken“ bricht sonst mitten im Wort (Muster 41) */ .spiel-wahl .spiel-karte b { font-size: clamp(12px, 3.7vw, 17px); line-height: 1.2; } .spiel-wahl .spiel-karte small { font-size: .74rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; max-inline-size: 100%; } .spiel-wahl .spiel-karte[data-mehr-offen] { grid-column: 1 / -1; } .spiel-wahl .spiel-karte[data-mehr-offen] small { display: block; overflow: visible; } .karte-mehr { display: inline-block; position: relative; z-index: 2; margin: 0; padding: 4px 6px; min-block-size: 28px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .76rem; line-height: 1.2; color: #ffd76a; text-decoration: underline; text-underline-offset: .18em; } .karte-mehr:focus-visible { outline: 3px solid var(--mc-aqua); outline-offset: 2px; } .spiel-wahl .spiel-karte .anl-auf { margin-block-start: 8px; max-inline-size: 100%; } .zum-einsatz { display: inline-block; margin: 0 0 10px; padding: 4px 0; color: #111; font-weight: 650; font-size: .9rem; text-decoration: underline; text-underline-offset: .18em; } } .spiel-karte, .einsatz-stein { position: relative; display: block; cursor: pointer; } .spiel-karte input, .einsatz-stein input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .spiel-karte .karte-innen { display: grid; justify-items: center; gap: 4px; padding: 12px 8px 10px; text-align: center; block-size: 100%; box-sizing: border-box; background: #585858; box-shadow: inset 3px 3px 0 #2e2e2e, inset -3px -3px 0 #8b8b8b; color: #fff; } .spiel-karte .mc-item.gross { inline-size: 48px; block-size: 48px; image-rendering: pixelated; } .spiel-karte b { font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); } .spiel-karte small { font-size: .8rem; line-height: 1.35; color: #fff; text-shadow: 1px 1px 0 #1a1a1a; } .spiel-karte:hover .karte-innen { filter: brightness(1.08); } .spiel-karte input:checked + .karte-innen { background: #3f6e22; box-shadow: inset 3px 3px 0 #8cc85a, inset -3px -3px 0 #22400f; outline: 3px solid #fff; outline-offset: -3px; } .spiel-karte input:focus-visible + .karte-innen, .einsatz-stein input:focus-visible + span { outline: 3px solid var(--mc-aqua); outline-offset: 2px; } .spiel-karte[data-bald] { cursor: not-allowed; } .spiel-karte[data-bald] .karte-innen { background: #474747; } .spiel-karte[data-bald] .mc-item { filter: grayscale(1); opacity: .55; } .spiel-karte .bald { font: 400 20px/20px var(--mc-schrift); color: #ffd76a; text-shadow: 2px 2px 0 #000; } .schlange { min-block-size: 20px; font: 400 20px/20px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; } .schlange:empty { visibility: hidden; } .einsatz-steine { display: flex; flex-wrap: wrap; gap: 8px; } /* Nur der äußere Stein — das innere span der Eingabe („Eigener Betrag") bekam sonst einen zweiten Kasten (21.09.2026) */ .einsatz-stein > span { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; min-inline-size: 92px; padding: 6px 12px 8px; box-sizing: border-box; background: #3a3a3a; border: 2px solid #000; box-shadow: inset 2px 2px 0 #6a6a6a, inset -2px -3px 0 #1c1c1c; } .einsatz-stein b { font: 400 20px/24px var(--mc-schrift); color: var(--mc-gold); text-shadow: 2px 2px 0 #3f2a00; } .einsatz-stein small.schlange { font-size: 20px; line-height: 20px; } .einsatz-stein:hover > span { border-color: #fff; } .einsatz-stein input:checked + span { background: #6b4b0c; box-shadow: inset 2px 2px 0 #ffd76a, inset -2px -3px 0 #3a2702; border-color: #fff; } .einsatz-stein input:checked + span b { color: #fff; } /* Eigener Betrag (21.09.2026): das Textfeld liegt ÜBER dem unsichtbaren Radioknopf, sonst schluckt der jeden Klick */ .eigen-eingabe { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 4px; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gold); } .einsatz-stein .eigen-eingabe input, .einsatz-stein input.klein-feld { position: relative; z-index: 1; opacity: 1; inset: auto; cursor: text; } .mc-feld.klein-feld { inline-size: 6.5em; min-block-size: 30px; padding: 2px 8px; } .einsatz-stein input:checked + span .eigen-eingabe { color: #fff; } .formular-mc .eigen-eingabe { color: #e0e0e0; } .formular-mc .eigen-eingabe .mc-feld { inline-size: 12em; } /* Einsatz je Spieler als festes Raster (Faddi 22.09.2026: „ein Dorn im Auge von der Symmetrie her"): 3 Spalten, am Handy 2, alle Steine gleich breit und hoch; „Eigener Betrag" füllt den Rest seiner Reihe, falls die Stufenzahl nicht aufgeht. */ [data-einsatz-feld] .einsatz-steine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; } [data-einsatz-feld] .einsatz-stein > span { block-size: 100%; min-inline-size: 0; align-content: center; } [data-einsatz-feld] .eigener-betrag:nth-child(3n+1) { grid-column: span 3; } [data-einsatz-feld] .eigener-betrag:nth-child(3n+2) { grid-column: span 2; } [data-einsatz-feld] .eigen-eingabe { max-inline-size: 100%; } [data-einsatz-feld] .eigen-eingabe .mc-feld { inline-size: 100%; min-inline-size: 0; max-inline-size: 8em; } @media (max-width: 520px) { [data-einsatz-feld] .einsatz-steine { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-einsatz-feld] .eigener-betrag:nth-child(n) { grid-column: auto; } [data-einsatz-feld] .eigener-betrag:nth-child(2n+1) { grid-column: span 2; } } /* Irgendein Spiel: ein Knopf oben, eine Karte in Schritt 1, je Spiel Haken + Bereich von–bis */ .irgendwer-zeile { display: grid; gap: 4px; margin-block-end: 14px; } .irgendwer-zeile small { font-size: .85rem; } .quickplay[data-sucht] .irgendwer-zeile { display: none; } /* Faddi 03.10.2026: 2vs2 allein suchen (unter „Gegner suchen") */ .allein-zeile { display: grid; gap: 4px; justify-items: start; margin-block-start: 10px; } .allein-zeile[hidden], .quickplay[data-sucht] .allein-zeile { display: none; } .allein-zeile small { font-size: .85rem; } .beliebig-karte .karte-innen { background: #6b4b0c; box-shadow: inset 3px 3px 0 #a67c1f, inset -3px -3px 0 #3a2702; } .bereich-liste { display: grid; gap: 6px; } .bereich-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 10px; background: #3a3a3a; border: 2px solid #000; box-shadow: inset 2px 2px 0 #6a6a6a, inset -2px -3px 0 #1c1c1c; color: #fff; } .bereich-zeile label.haken { display: flex; align-items: center; gap: 8px; cursor: pointer; } .bereich-zeile label.haken input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: #3f8f1f; } .bereich-zeile label.haken span { display: inline-flex; align-items: center; gap: 8px; } .bereich-zeile b { font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 #000; } .bereich-zeile small.leise { color: #c8c8c8; } .bereich-felder { display: inline-flex; flex-wrap: wrap; gap: 8px; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gold); } .bereich-felder label { display: inline-flex; align-items: center; gap: 4px; } .bereich-zeile:has(input[type="checkbox"]:not(:checked)) .bereich-felder { opacity: .45; } .bereich-zeile.falsch { border-color: #ff5555; } .quickplay[data-sucht] .spiel-wahl, .quickplay[data-sucht] .einsatz-wahl { opacity: .55; pointer-events: none; } .quickplay[data-sucht] .spiel-meldung::after { content: ""; display: inline-block; inline-size: 12px; block-size: 12px; margin-inline-start: 8px; background: var(--mc-gelb); animation: suche-puls 1s steps(2) infinite; } @keyframes suche-puls { 50% { opacity: 0; } } .quickplay .spiel-meldung { color: #3a3a00; text-shadow: none; } .quickplay .spiel-meldung.fehler, .spiel-meldung.fehler { color: var(--mc-dunkelrot); } /* ── Spieler online ─────────────────────────────────────────────────────────────────────────────────────────────── */ .filter-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 10px; } .filter-chip { all: unset; cursor: pointer; padding: 2px 10px 4px; font: 400 20px/24px var(--mc-schrift); color: #e0e0e0; background: #555; border: 2px solid #000; box-shadow: inset 2px 2px 0 #7a7a7a, inset -2px -2px 0 #333; text-shadow: 2px 2px 0 #222; } .filter-chip[aria-pressed="true"] { background: #2f6b2f; box-shadow: inset 2px 2px 0 #6fbf6f, inset -2px -2px 0 #173717; color: #fff; } .filter-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .spieler-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; max-block-size: 560px; overflow-y: auto; } .spieler-liste > li.leer { padding: 14px 10px; color: var(--gui-text); text-align: center; line-height: 1.5; } .spieler-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; background: #4a4a4a; box-shadow: inset 2px 2px 0 #2a2a2a, inset -2px -2px 0 #7a7a7a; color: #fff; } .spieler-zeile .kopf { inline-size: 40px; block-size: 40px; image-rendering: pixelated; background: #555; } .spieler-zeile .wer { display: grid; gap: 2px; min-inline-size: 0; } .spieler-zeile .wer b { font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spieler-zeile .wer small { font-size: .78rem; color: #f2f2f2; text-shadow: 1px 1px 0 #333; } .spieler-zeile .orte { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .ort { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 1px; font: 400 20px/20px var(--mc-schrift); background: rgb(0 0 0 / .45); text-shadow: 2px 2px 0 #000; } .ort::before { content: ""; inline-size: 8px; block-size: 8px; background: currentColor; } .ort.web { color: var(--mc-gruen); } .ort.hugo { color: var(--mc-aqua); } .spieler-zeile .status { font: 400 20px/20px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #000; } .spieler-zeile .status.sucht { color: var(--mc-gelb); } .spieler-zeile .status.spielt { color: #ffb0b0; } .spieler-zeile .tun { display: flex; flex-direction: column; gap: 4px; align-items: stretch; } .spieler-zeile .tun small, .spieler-zeile .tun small.leise { font-size: .78rem; line-height: 1.3; color: #e8e8e8; text-shadow: 1px 1px 0 #222; max-inline-size: 12em; text-align: center; } .spieler-zeile .mc-knopf.klein { min-block-size: 32px; padding: 0 10px 2px; font-size: 20px; } /* Die Liste steht am PC in einer schmalen Spalte (~390 px bei 1024) — dort fraß die Knopfspalte einer Party-Zeile („Mitspielen", „Party herausfordern") den Namen. Die Grenze fragt die LISTE, nicht das Fenster (Muster 13). */ .spieler-liste { container: spielerliste / inline-size; } @container spielerliste (max-width: 560px) { .spieler-zeile:has(.tun > .mc-knopf ~ .mc-knopf) { grid-template-columns: 40px minmax(0, 1fr); } .spieler-zeile:has(.tun > .mc-knopf ~ .mc-knopf) .tun { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; } } @media (max-width: 480px) { .spieler-zeile { grid-template-columns: 32px minmax(0, 1fr); } .spieler-zeile .kopf { inline-size: 32px; block-size: 32px; } .spieler-zeile .tun { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; } } /* ── Herausforderungen ──────────────────────────────────────────────────────────────────────────────────────────── */ .forderungen { display: grid; gap: 8px; } .forderungen:not(:empty) { margin-block-end: 16px; } .forderung { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px 14px; background: rgb(20 40 20 / .88); border: 2px solid #000; box-shadow: inset 2px 2px 0 #4c8f4c, inset -2px -2px 0 #0d240d; color: #fff; } .forderung.raus { background: rgb(30 30 40 / .88); box-shadow: inset 2px 2px 0 #6a6a8a, inset -2px -2px 0 #15151f; } .forderung .kopf { inline-size: 40px; block-size: 40px; image-rendering: pixelated; } .forderung .text { font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 #000; } .forderung .text small { display: block; font: 400 .8rem/1.4 var(--schrift-text); color: #cfe8cf; text-shadow: none; margin-block-start: 2px; } .forderung .knopfreihe { flex-wrap: nowrap; } .forderung .uhr-leiste { position: absolute; inset: auto 0 0 0; block-size: 4px; background: transparent; border: 0; } @media (max-width: 560px) { .forderung { grid-template-columns: 32px minmax(0, 1fr); } .forderung .knopfreihe { grid-column: 1 / -1; justify-content: flex-end; } } @media (prefers-reduced-motion: no-preference) { .forderung.neu { animation: forderung-rein .45s cubic-bezier(.16,1,.3,1) both; } } @keyframes forderung-rein { from { opacity: 0; translate: 0 -12px; } } /* Ablaufende Frist: --anteil (1 → 0) setzt das Skript */ .uhr-leiste { block-size: 8px; background: #2c2c2c; border: 2px solid #000; margin: 10px 0; overflow: hidden; } .uhr-leiste i { display: block; block-size: 100%; inline-size: calc(var(--anteil, 1) * 100%); background: var(--mc-gruen); transition: inline-size .25s linear; } .uhr-leiste.knapp i { background: var(--mc-rot); } /* ── Dialoge (Bereit-Abfrage, Herausfordern) ────────────────────────────────────────────────────────────────────── */ /* margin: auto ausdrücklich — die Grundstile setzen margin: 0, dann säße der Dialog oben links. */ .mc-dialog { position: fixed; inset: 0; margin: auto; block-size: fit-content; padding: 0; border: 0; background: transparent; inline-size: min(100% - 32px, 460px); max-inline-size: none; color: inherit; overflow: visible; } .mc-dialog::backdrop { background: rgb(0 0 0 / .62); } .mc-dialog .mc-inventar { margin: 0; } .mc-dialog .treffer-text { font: 400 20px/28px var(--mc-schrift); color: var(--gui-text); text-align: center; } /* „So geht das Spiel" im Bereit-Dialog (arcade-live.js anleitungFuellen): beim ersten Treffer offen, danach zu. */ .spiel-anleitung-kasten { border: 2px solid var(--gui-rand, #5a5a5a); background: rgb(0 0 0 / .18); padding: 8px 10px; } .spiel-anleitung-kasten[hidden] { display: none; } .spiel-anleitung-kasten > summary { cursor: pointer; font: 400 14px/20px var(--mc-schrift); color: var(--mc-gelb); } .spiel-anleitung-kasten > summary::marker { color: var(--mc-gelb); } .spiel-anleitung-kasten .anleitung-ziel { margin: 8px 0 6px; color: var(--gui-text); font-size: .9rem; line-height: 1.5; } .spiel-anleitung-kasten .anleitung-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .spiel-anleitung-kasten .anleitung-liste li { position: relative; padding-inline-start: 18px; color: var(--gui-text-leise, #d8d8d8); font-size: .86rem; line-height: 1.45; } .spiel-anleitung-kasten .anleitung-liste li::before { content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 2px; inline-size: 6px; aspect-ratio: 1; background: var(--mc-gruen); } .mc-dialog .spiel-meldung { color: #3a3a00; text-shadow: none; } .mc-dialog .feld-block { display: grid; gap: 4px; } .mc-dialog .feld-titel { color: #505050; text-shadow: none; } @media (prefers-reduced-motion: no-preference) { .mc-dialog[open] { animation: dialog-rein .3s cubic-bezier(.16,1,.3,1) both; } } @keyframes dialog-rein { from { opacity: 0; scale: .96; } } /* ── Kasse: wie am Schalter — Guthaben, Einzahlen, Auszahlen nebeneinander, darunter das Kassenbuch ──────────────── */ .kasse-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; } @media (max-width: 1000px) { .kasse-raster { grid-template-columns: minmax(0, 1fr); } } /* Ohne verbundenes Minecraft-Konto: das zuerst, gelb umrandet */ .kasse-zuerst { margin-block-end: 20px; } .kasse-zuerst .mc-inventar { outline: 3px solid var(--mc-gelb); outline-offset: 3px; } .kontostand-tafel.blitzt .stand-zeile.gross b { animation: guthaben-blitz 1.2s ease-out; } .kontostand-tafel .knopfreihe { margin-block-start: 12px; } /* Zeile „Beschriftung links, Wert rechts" — überall gleich: Guthaben, Abos, Creator. War bis 20.09.2026 nur innerhalb von .kontostand-tafel gesetzt, deshalb klebten im Abo- und Creator-Kasten Text und Zahl aneinander. */ .stand-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; align-items: baseline; padding: 6px 0; border-block-end: 2px solid rgb(0 0 0 / .12); } .stand-zeile > span { color: var(--gui-text); min-inline-size: 0; } .stand-zeile > span:first-child { flex: 1 1 auto; } .stand-zeile b { font: 400 20px/24px var(--mc-schrift); color: #2b2b2b; font-variant-numeric: tabular-nums; } .stand-zeile:last-child { border-block-end: 0; } .kontostand-tafel .stand-zeile.gross b { font-size: 40px; line-height: 48px; color: #6e4700; text-shadow: 3px 3px 0 #efd08a; } /* Bank-Automat im Browser (nur mit Mod im Spiel): nimmt die Plätze von Einzahlen + Auszahlen ein */ .kasse-raster.mit-automat .bank-automat { grid-column: span 2; } @media (max-width: 1000px) { .kasse-raster.mit-automat .bank-automat { grid-column: auto; } } .bank-automat .fenster-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bank-mod-an { margin-inline-start: auto; font: 400 16px/20px var(--mc-schrift); color: #1f7a2a; } .bank-eingabe { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: #0b1a10; border: 3px solid #a67612; box-shadow: inset 0 0 0 2px #000; } .bank-eingabe > span { font: 400 32px/40px var(--mc-schrift); color: #ffd76a; } .bank-eingabe .mc-feld { flex: 1 1 auto; min-inline-size: 0; background: transparent; border: 0; box-shadow: none; padding: 4px 0; font: 400 32px/40px var(--mc-schrift); color: #7dff8a; caret-color: #7dff8a; letter-spacing: 1px; } .bank-eingabe .mc-feld::placeholder { color: rgb(125 255 138 / .3); } .bank-eingabe:focus-within { border-color: #ffd76a; } /* Guthaben und Automat gleich hoch — keine Holzlücke unter dem kürzeren Kasten (Faddi 22.09.2026) */ @media (min-width: 1001px) { .kasse-raster { align-items: stretch; } .kasse-raster > .mc-inventar { display: flex; flex-direction: column; } .arcade-bereich .kasse-raster > .mc-inventar > .knopfreihe { margin-block-start: auto; padding-block-start: 12px; } } .bank-automat { gap: 10px; } .bank-automat > * { margin-block: 0; } .bank-unter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .bank-wert { margin: 0; min-block-size: 24px; font: 400 20px/24px var(--mc-schrift); color: #6e4700; font-variant-numeric: tabular-nums; } .bank-wert.falsch { color: #b3261e; } .bank-schnell { display: flex; flex-wrap: wrap; gap: 6px; } .bank-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block-start: auto; } .bank-knoepfe .mc-knopf { justify-content: center; min-block-size: 52px; font-size: 22px; } @media (max-width: 420px) { .bank-knoepfe { grid-template-columns: 1fr; } } .bank-vorschau { margin-block-start: 12px; padding: 10px 12px; border: 2px dashed rgb(0 0 0 / .25); } .bank-vorschau p { margin: 0; } /* Trustpilot-Streifen oben in der Kasse — ruhig, ein Satz, eigener Stil (Sterne im Trustpilot-Grün) */ .tp-streifen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-block-end: 20px; padding: 10px 14px; background: rgb(10 14 12 / .72); border: 2px solid #2f4a3c; color: #e8efe9; line-height: 1.5; } .tp-haupt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fff; text-decoration: none; } .tp-haupt:hover .tp-name, .tp-haupt:focus-visible .tp-name { text-decoration: underline; } .tp-sterne { display: inline-flex; gap: 2px; } .tp-stern { display: block; image-rendering: pixelated; shape-rendering: crispEdges; } .tp-haupt b { font: 400 22px/24px var(--mc-schrift); } .tp-zahl { color: #b9c8bf; } .tp-name { font-weight: 700; color: #00d68f; } .tp-satz { flex: 1 1 18rem; color: #c9d4cd; font-size: 15px; } .tp-bewerten { color: #fff; text-decoration: underline; white-space: nowrap; } .befehl-mc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 10px; } .befehl-mc code { flex: 1 1 12rem; padding: 6px 10px; background: #000; color: var(--mc-aqua); font: 400 20px/24px var(--mc-schrift); border: 2px solid #a0a0a0; overflow-wrap: anywhere; } .liste-mc { margin: 0; padding-inline-start: 1.2rem; color: var(--gui-text); line-height: 1.6; } .schritte { margin: 0; padding-inline-start: 1.4rem; color: var(--gui-text); line-height: 1.6; display: grid; gap: 4px; } .regeln-mc summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .regeln-mc summary::-webkit-details-marker { display: none; } .regeln-mc summary::after { content: "+"; margin-inline-start: auto; } .regeln-mc[open] summary::after { content: "−"; } .regeln-mc .info-liste dt { color: #505050; text-shadow: none; } .regeln-mc .info-liste dd { color: var(--gui-text); } .arcade-seite .mc-inventar .tabelle-mc td, .arcade-seite .mc-inventar .tabelle-mc th { font-variant-numeric: tabular-nums; } /* ── Partie ─────────────────────────────────────────────────────────────────────────────────────────────────────── */ .partie { display: grid; gap: 14px; } .partie-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; } .partie-spieler { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgb(0 0 0 / .5); border: 2px solid #000; color: #fff; transition: border-color .2s, box-shadow .2s; } .partie-spieler.rechts { grid-template-columns: auto minmax(0, 1fr) 40px; text-align: end; } .partie-spieler.rechts .kopf, .partie-spieler.rechts > .mc-item { order: 3; } .partie-spieler.rechts .partie-name { order: 2; } .partie-spieler.rechts .partie-punkte { order: 1; } .partie-spieler .kopf { inline-size: 40px; block-size: 40px; image-rendering: pixelated; } .partie-name { min-inline-size: 0; } .partie-name b { display: block; font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partie-punkte { font: 400 30px/36px var(--mc-schrift); color: var(--mc-gold); text-shadow: 3px 3px 0 #3f2a00; min-inline-size: 1ch; } .partie-spieler.ich { box-shadow: inset 0 0 0 2px rgb(85 255 85 / .35); } .partie-spieler.am-zug { border-color: var(--mc-gelb); box-shadow: 0 0 0 2px var(--mc-gelb), 0 0 18px rgb(255 255 85 / .35); } .partie-mitte { display: grid; justify-items: center; gap: 4px; } .partie-uhr { font: 400 30px/36px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 #000; font-variant-numeric: tabular-nums; min-inline-size: 3ch; text-align: center; } .partie-uhr.knapp { color: var(--mc-rot); } @media (max-width: 640px) { .partie-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .partie-mitte { grid-column: 1 / -1; grid-row: 1; } .partie-spieler, .partie-spieler.rechts { grid-template-columns: 32px minmax(0, 1fr) auto; text-align: start; } .partie-spieler.rechts .kopf, .partie-spieler.rechts > .mc-item, .partie-spieler.rechts .partie-name, .partie-spieler.rechts .partie-punkte { order: 0; } .partie-spieler .kopf { inline-size: 32px; block-size: 32px; } } .partie-flaeche { min-block-size: 200px; align-content: center; } .partie-meldung { min-block-size: 48px; } .ergebnis-tafel { text-align: center; } .ergebnis-titel { font: 400 40px/48px var(--mc-schrift); color: #2b2b2b; margin: 0 0 6px; } .ergebnis-titel.c-gruen { color: #2f7d1f; } .ergebnis-titel.c-rot { color: #a02020; } .ergebnis-geld { font: 400 30px/36px var(--mc-schrift); color: #a06a00; } .ton-knopf { justify-self: center; } /* Sonic Echo: 12 Blöcke */ .noten.zwoelf { grid-template-columns: repeat(4, minmax(0, 96px)); } @media (min-width: 760px) { .noten.zwoelf { grid-template-columns: repeat(6, minmax(0, 96px)); } } .notenblock.von-mir { outline: 4px solid var(--mc-gruen); outline-offset: -4px; } .notenblock.von-gegner { outline: 4px solid var(--mc-lila); outline-offset: -4px; } /* Formen nur für aufgedeckte Blöcke — und nur, wenn man sie einschaltet (Sonic Echo ist ein Hörspiel; wer nichts hört, bekommt dieselbe Information als Form). Gefundene Paare zeigen ihre Form immer (smp.css). */ .noten[data-formen] .notenblock.offen .form { opacity: 1; } .noten[data-gesperrt] .notenblock:not(.gefunden) { cursor: default; filter: saturate(.55) brightness(.85); } .noten[data-gesperrt] .notenblock:hover { translate: none; } .notenblock:disabled { cursor: default; } .sonic-leiste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Bid Wars: Handelsfenster im Inventar */ .bid-fenster .handel .partei b { color: #2b2b2b; } .bid-fenster .gebot-slot[data-neu] { animation: gebot-auf .5s cubic-bezier(.16,1,.3,1) both; } @keyframes gebot-auf { from { scale: .6; opacity: 0; } } .bid-fenster .gebot-slot.alt { opacity: .5; } .bid-fenster .gebot-eingabe { grid-template-columns: minmax(0, 1fr) 8ch auto; } /* Um Einsatz gibt es kein Zahlenfeld (nur die Hand bietet) — dann bekommt der Knopf die zweite Spalte ganz */ .bid-fenster .gebot-eingabe:not(:has(input[type="number"])) { grid-template-columns: minmax(0, 1fr) auto; } @media (max-width: 480px) { .bid-fenster .gebot-eingabe { grid-template-columns: minmax(0, 1fr) auto; } .bid-fenster .gebot-eingabe .mc-regler { grid-column: 1 / -1; } } .bid-fenster .gebot-eingabe .mc-feld { inline-size: 100%; box-sizing: border-box; } .bid-fenster .handel .partei .kopf { margin-inline: auto; } /* Lange Minecraft-Namen in Pixelschrift schoben die Partie auf dem Telefon über den Rand (375 → 401 px) */ .bid-fenster .handel .partei { min-inline-size: 0; } .bid-fenster .handel .partei b { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 480px) { .bid-fenster .handel .budget { font-size: 20px; line-height: 24px; } } .bid-fenster .runden i[data-sieg="ich"] { background: #3f8f1f; } .bid-fenster .runden i[data-sieg="gegner"] { background: #b02e26; } .bid-fenster .runden i[data-sieg="gleich"] { background: #c77c12; } .bid-fenster .runden i[data-jetzt] { outline: 2px solid #fff; outline-offset: 1px; } .bid-fenster .gebot-eingabe input[type="number"] { inline-size: 7ch; } .bid-verlauf { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .88rem; color: var(--gui-text); } /* 1vs1 */ .arena-live { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; justify-items: center; padding: 22px 12px; background: url("img/tex/sand.png") 0 100% / 64px 64px repeat-x, linear-gradient(#3a1d0f, #20100a); border: 4px solid #000; image-rendering: pixelated; } .arena-live .kaempfer { display: grid; justify-items: center; gap: 6px; padding-block-end: 48px; } .arena-live .kaempfer .kopf { inline-size: 64px; block-size: 64px; image-rendering: pixelated; } .arena-live .kaempfer b { font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #000; overflow-wrap: anywhere; text-align: center; } .arena-live .kaempfer .haken-mc { font: 400 20px/20px var(--mc-schrift); color: var(--mc-gruen); text-shadow: 2px 2px 0 #000; min-block-size: 20px; } .arena-live .gegen { font: 400 50px/1 var(--mc-schrift); color: var(--mc-gold); text-shadow: 5px 5px 0 #3f2a00; padding-block-end: 48px; } .arena-live .kaempfer.tot { filter: grayscale(1) brightness(.6); } /* 2VS2 (Faustkampf 2vs2, 24.09.2026): je Seite zwei Kämpfer untereinander, dazwischen VS — schmal: nebeneinander bleibt lesbar */ .arena-live.team-kampf .team-seite { display: grid; gap: 4px; justify-items: center; min-inline-size: 0; } .arena-live.team-kampf .kaempfer { padding-block-end: 12px; } .arena-live.team-kampf .team-seite:last-child .kaempfer:last-child, .arena-live.team-kampf .team-seite:first-child .kaempfer:last-child { padding-block-end: 48px; } .anl-kampf .arena-live.team-kampf .kaempfer .kopf { inline-size: 48px; block-size: 48px; } /* ── Lesbarkeit: helle Inventar-Fenster (#c6c6c6) brauchen dunkle Schrift ───────────────────────────────────────── smp.css färbt .leise, .info-liste, label.haken, .feld-titel und die Minecraft-Farben für DUNKLE Flächen — in den hellen Fenstern der Arcade waren sie kaum lesbar (Faddi 19.09.2026). Hier überall mindestens 4,5 : 1 Kontrast. .arcade-bereich umfasst jede Arcade-Seite (auch Üben) und die Dialoge, die außerhalb des Abschnitts liegen. */ .arcade-bereich .mc-inventar { color: #2b2b2b; } .arcade-bereich .mc-inventar .leise { color: #505050; } .arcade-bereich .mc-inventar .info-liste dt { color: #505050; text-shadow: none; } .arcade-bereich .mc-inventar .info-liste dd { color: #1f1f1f; } .arcade-bereich .mc-inventar p b, .arcade-bereich .mc-inventar dd b { color: #1f1f1f; } .arcade-bereich .mc-inventar label.haken { color: #2b2b2b; } .arcade-bereich .mc-inventar .feld-titel { color: #404040; text-shadow: none; } .arcade-bereich .mc-inventar .c-gruen { color: #0f5a0f; } .arcade-bereich .mc-inventar .c-rot { color: #a31515; } .arcade-bereich .mc-inventar .c-gelb, .arcade-bereich .mc-inventar .c-gold { color: #6b4400; } .arcade-bereich .mc-inventar .spiel-meldung { color: #3a3a00; text-shadow: none; } .arcade-bereich .mc-inventar .spiel-meldung.fehler { color: #a31515; } /* Tabellen im Fenster: dunkel wie eine Buchseite, darin gelten wieder die hellen Farben */ .arcade-bereich .mc-inventar .tabelle-mc { background: #262626; } .arcade-bereich .mc-inventar .tabelle-mc td { color: #ececec; } .arcade-bereich .mc-inventar .tabelle-mc .leise { color: #b8b8b8; } .arcade-bereich .mc-inventar .tabelle-mc .c-gruen { color: var(--mc-gruen); } .arcade-bereich .mc-inventar .tabelle-mc .c-rot { color: var(--mc-rot); } .arcade-bereich .mc-inventar .tabelle-mc .c-gelb, .arcade-bereich .mc-inventar .tabelle-mc .c-gold { color: var(--mc-gelb); } .arcade-bereich .mc-inventar .tabelle-mc a { color: #fff; text-decoration: underline; text-underline-offset: .18em; } .arcade-bereich .mc-inventar .marke-mc { background: #262626; } .arcade-bereich .mc-inventar .info-liste + .knopfreihe, .arcade-bereich .mc-inventar p + .knopfreihe { margin-block-start: 12px; } .arcade-bereich .mc-inventar .pfeil-mc { color: #505050; } /* ── Übersicht: die Spiele als Karten — Satz, Regeln in Kürze, Spielen / Üben ─────────────────────────────────── */ /* Der Himmel ist hier niedriger: über ihm stehen Kopf- und Arcade-Leiste, „So geht's" soll gleich darunter anfangen */ .arcade-himmel { min-block-size: min(700px, calc(100vh - 150px)); } .spiel-tafeln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } @media (max-width: 1000px) { .spiel-tafeln { grid-template-columns: minmax(0, 1fr); } } .spiel-tafel, .uebung { display: grid; gap: 14px; padding: 16px 18px 18px; box-sizing: border-box; background: #1c1c21; border: 2px solid #000; box-shadow: inset 2px 2px 0 #3b3b44, inset -2px -2px 0 #0c0c10; } .spiel-tafel { grid-template-rows: auto 1fr auto; } /* Nach-Audit 03.10.2026: Rendering des Spiels (lib/szenen.js) als Kopfbild der Karte; ohne Rendering wird das Item größer */ .spiel-tafel.mit-bild { grid-template-rows: auto auto 1fr auto; } .spiel-tafel-szene { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid #000; box-shadow: inset 0 0 0 2px #2a2a31; background: #0e0e12; } @media (max-width: 1000px) { .spiel-tafel-szene { aspect-ratio: 16 / 7; } } .spiel-tafel.modus-ist-aus .spiel-tafel-szene { filter: grayscale(1); opacity: .6; } .spiel-tafel:not(.mit-bild) .spiel-tafel-kopf > img { inline-size: 64px; block-size: 64px; padding: 6px; } .spiel-tafel-kopf, .uebung-kopf { display: flex; gap: 12px; align-items: center; } .spiel-tafel-kopf > img, .uebung-kopf > img { inline-size: 48px; block-size: 48px; padding: 4px; flex: none; image-rendering: pixelated; background: #0e0e12; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #2a2a31; } .spiel-tafel h3, .uebung-kopf h3 { margin: 0; font: 400 30px/36px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 var(--mc-schatten); } .spiel-tafel-kopf p { margin: 0; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; } .spiel-tafel-kopf .marke-mc { margin-inline-start: auto; } .regeln-liste { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; list-style: none; color: #e2e5ec; font-size: .95rem; line-height: 1.5; } .regeln-liste li { position: relative; padding-inline-start: 18px; } .regeln-liste li::before { content: ""; position: absolute; inset: .55em auto auto 2px; inline-size: 8px; block-size: 8px; background: var(--mc-gold); box-shadow: 1px 1px 0 #000; } .spiel-tafel .knopfreihe .mc-knopf { flex: 1 1 8rem; } /* ── Üben: beide Spiele nebeneinander, jedes mit dem Weg zum echten Spiel ─────────────────────────────────────── */ .uebungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; } @media (max-width: 1000px) { .uebungen { grid-template-columns: minmax(0, 1fr); } } .uebung-kopf { align-items: flex-start; } .uebung-kopf p { margin: 4px 0 0; color: #d9dde6; font-size: .95rem; line-height: 1.5; } .uebung .spielflaeche { background: #0e0e12; } .uebung .mc-inventar { margin: 0; } .uebung .handel { gap: 10px; } @media (max-width: 420px) { .uebung { padding: 12px; } .uebung .handel .gebot-slot { inline-size: 64px; block-size: 64px; } } /* ── 1vs1 mit Mod-Schiedsrichter (19.09.2026) ─────────────────────────────────────────────────────────────────── */ .ort.mod { background: rgb(40 70 20 / .85); color: #d8ffb0; } .arena-wahl .einsatz-stein b { color: var(--mc-gelb); } .arena-schritte { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 18px 0 6px; padding: 0; counter-reset: schritt; } .arena-schritte li { counter-increment: schritt; padding: 3px 10px 4px; font: 400 20px/22px var(--mc-schrift); color: #c8c8c8; text-shadow: 2px 2px 0 #000; background: rgb(0 0 0 / .55); border: 2px solid #3a3a3a; } .arena-schritte li::before { content: counter(schritt) " "; color: #8a8a8a; } .arena-schritte li.jetzt { color: var(--mc-gelb); border-color: var(--mc-gelb); } .arena-schritte li.fertig { color: #9be58a; border-color: #2f6b22; } .arena-schritte li.fertig::before { content: "✔ "; color: #9be58a; } /* Schrumpfende Arena (24.09.2026): welche Regel in DIESER Partie gilt — unter der Statuszeile, gleich ausgerichtet */ .arena-regel { margin: 6px 0 0; text-align: center; color: #e0c872; text-shadow: 1px 1px 0 #000; } .arena-regel[hidden] { display: none; } .strittig-tafel { margin-block-end: 24px; } .strittig-tafel .streitfall { margin-block: 10px; padding: 8px 10px; background: #d6d6d6; border: 2px solid #8a8a8a; } .strittig-tafel .streitfall summary { cursor: pointer; color: #1f1f1f; } .strittig-tafel .protokoll-mc td { font-size: .82rem; } .strittig-tafel .protokoll-mc td.mono { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Sonic Echo ab 20.09.2026: neun Blöcke, Folge nachspielen (kein Memory mehr — siehe lib/spiele/sonic.js) ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .noten.neun { grid-template-columns: repeat(3, minmax(0, 96px)); } /* Beim Vorspielen leuchtet der Block, der gerade klingt — beide Spieler sehen dasselbe zur selben Zeit. */ .notenblock.spielt { animation: echo-leuchten .5s ease-out both; } @keyframes echo-leuchten { 0% { filter: brightness(2.4); scale: 1.1; } 100% { filter: none; scale: 1; } } @media (prefers-reduced-motion: reduce) { .notenblock.spielt { animation: none; outline: 4px solid #fff; outline-offset: -4px; } } .echo-balken { display: flex; justify-content: center; gap: 28px; margin-block: 10px; } .echo-seite { display: grid; justify-items: center; gap: 2px; color: var(--gui-text); } .echo-stand { font: 400 30px/34px var(--mc-schrift); color: #2b2b2b; } .echo-stand.raus { color: #a02020; } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Tresorknacken (Umbau 21.09.2026): Tresortür aus Stahl, 6 × 4 Stiftlöcher, Pixel-Stifte — js/tresor-brett.js Bilder aus werkzeug/pixelkunst-bauen.js (stift, goldstift, alarmstift, stiftloch, herz, herz-leer, tresorstahl). ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .tresor-fenster { --mc-lueckchen: 8px; } /* Üben: die Tür braucht Platz — über beide Spalten, aber nicht breiter als in der Partie */ .uebungen > #tresorknacken { grid-column: 1 / -1; } /* Klingenduell braucht die Breite wie Tresorknacken und Baumeister — sonst ist die Bühne winzig (Faddi 21.09.2026) */ .uebungen > #klingenduell { grid-column: 1 / -1; } /* Sonic Echo und Bid Wars üben wie die Partie (22.09.2026): Partie-Kopf + dasselbe Brett, über beide Spalten */ .uebungen > #sonic-echo, .uebungen > #bid-wars { grid-column: 1 / -1; } .uebung-partie { max-inline-size: 900px; inline-size: 100%; margin-inline: auto; } .uebung-partie .partie-meldung:empty { display: none; } .uebung#tresorknacken .tresor-fenster { max-inline-size: 760px; margin-inline: auto; } .tresor-tuer { position: relative; padding: 10px; image-rendering: pixelated; user-select: none; -webkit-user-select: none; background: linear-gradient(rgb(255 255 255 / .07), rgb(255 255 255 / .07)), url("img/tex/tresorstahl.png") 0 0 / 64px 64px, #3c4148; box-shadow: 0 0 0 3px #000, inset 4px 4px 0 #6b717b, inset -4px -4px 0 #1b1d21; } /* Leiste: Leben links, Riegel mit Faktor in der Mitte, Punkte rechts — wie ein Anzeigefeld in der Tür */ .tresor-leiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-block-end: 12px; padding: 6px 10px; background: #0d0f11; box-shadow: 0 0 0 3px #000, inset 3px 3px 0 #000, inset -2px -2px 0 #2a2e33; } .tresor-herzen { display: flex; gap: 4px; } .tresor-herzen .herz { inline-size: 32px; block-size: 32px; background: url("img/item/herz.png") center / 100% 100% no-repeat; image-rendering: pixelated; } .tresor-herzen .herz.leer { background-image: url("img/item/herz-leer.png"); } .tresor-riegel { display: flex; align-items: center; gap: 6px; } .tresor-riegel .riegel { position: relative; inline-size: 40px; block-size: 18px; background: #050607; box-shadow: 0 0 0 2px #000, inset 2px 2px 0 #000, inset -2px -2px 0 #2a2e33; overflow: hidden; } .tresor-riegel .riegel::after { content: ""; position: absolute; inset: 4px auto 4px 3px; inline-size: 22px; background: linear-gradient(#b8bec7 0 30%, #7d838d 30% 70%, #4b5058 70%); box-shadow: 2px 0 0 #000; transition: translate .18s steps(3), background .18s; } .tresor-riegel .riegel.auf::after { translate: 14px 0; background: linear-gradient(#fff3a0 0 30%, #ffc61a 30% 70%, #b07a00 70%); } .tresor-riegel .riegel.auf { box-shadow: 0 0 0 2px #000, inset 2px 2px 0 #000, 0 0 10px #ffc61a88; } .tresor-faktor { min-inline-size: 2.2em; font: 400 28px/32px var(--mc-schrift); color: #7d838d; text-shadow: 2px 2px 0 #000; text-align: center; } .tresor-riegel[data-faktor="2"] .tresor-faktor { color: #55ffff; } .tresor-riegel[data-faktor="3"] .tresor-faktor { color: #ff55ff; } .tresor-riegel[data-faktor="4"] .tresor-faktor { color: #ffaa00; text-shadow: 2px 2px 0 #000, 0 0 10px #ffaa00; } .tresor-punkte { justify-self: end; display: flex; align-items: baseline; gap: 6px; } .tresor-zahl { font: 400 34px/36px var(--mc-schrift); color: #ffd84a; text-shadow: 3px 3px 0 #3a2a00; } .tresor-punkte small { font: 400 18px/20px var(--mc-schrift); color: #8a9099; } /* Das Schließblech: feste Seitenverhältnisse (3 : 2, Löcher quadratisch), damit ein Stift bei allen an derselben Stelle sitzt. Rand nur als Schatten — ein echter Rand würde die Fläche kleiner machen als die, in der der Browser misst. */ .tresor-blech { position: relative; aspect-ratio: 3 / 2; inline-size: 100%; touch-action: none; overflow: hidden; background: linear-gradient(rgb(0 0 0 / .3), rgb(0 0 0 / .3)), url("img/tex/tresorstahl.png") 16px 16px / 48px 48px, #373b42; image-rendering: pixelated; box-shadow: 0 0 0 4px #000, inset 0 0 0 3px #1b1d21, inset 0 0 60px rgb(0 0 0 / .55); } .tresor-loecher { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); pointer-events: none; } .tresor-loecher .loch { background: url("img/item/stiftloch.png") center / 58% 58% no-repeat; image-rendering: pixelated; } /* Ohne fill-mode: Läuft die Sprung-Animation nicht (Tab im Hintergrund, Energiesparen), steht der Stift trotzdem in voller Größe da — mit „both" blieb er bei scale .2 hängen, fast unsichtbar (Chamie03, 21.09.2026). */ .tresor-blech .stift { position: absolute; inset-block-start: var(--y); inset-inline-start: var(--x); inline-size: calc(var(--r) * 2); aspect-ratio: 1; translate: -50% -50%; padding: 0; border: 0; border-radius: 0; cursor: pointer; z-index: 2; background: url("img/item/stift.png") center / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .65)); animation: tresor-raus .18s steps(3); } .tresor-blech .stift[data-art="gold"] { background-image: url("img/item/goldstift.png"); animation: tresor-raus .18s steps(3), tresor-funkeln .5s steps(2) infinite; } .tresor-blech .stift[data-art="alarm"] { background-image: url("img/item/alarmstift.png"); animation: tresor-raus .18s steps(3), tresor-warnen .6s steps(2) infinite; } /* Die Uhr unter dem Stift: läuft leer, von grün über gelb nach rot. --schon: verspätet angekommen → Uhr läuft weiter. */ .tresor-blech .stift-uhr { position: absolute; inset-inline: 8%; inset-block-start: calc(100% + 5px); block-size: 6px; background: #000; pointer-events: none; } .tresor-blech .stift-uhr::before { content: ""; position: absolute; inset: 1px; transform-origin: left center; animation: tresor-uhr var(--dauer) linear var(--schon, 0ms) both; } .tresor-blech .stift[data-wie="gedrueckt"] { scale: .86; filter: brightness(.8) drop-shadow(0 1px 0 rgb(0 0 0 / .65)); } .tresor-blech .stift[data-wie="gesetzt"] { animation: tresor-rein .26s steps(4) forwards; pointer-events: none; } .tresor-blech .stift[data-wie="alarm"] { animation: tresor-knall .38s steps(4) forwards; pointer-events: none; } .tresor-blech .stift[data-wie="daneben"] { animation: tresor-verblassen .38s steps(3) forwards; pointer-events: none; } .tresor-blech .stift[data-wie] .stift-uhr { display: none; } .tresor-schwebt { position: absolute; inset-block-start: var(--y); inset-inline-start: var(--x); translate: -50% -50%; z-index: 3; pointer-events: none; font: 400 28px/1 var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 #000; white-space: nowrap; animation: tresor-schweben .9s ease-out forwards; } .tresor-schwebt.serie { color: #55ffff; } .tresor-schwebt.gold { color: #ffd84a; font-size: 36px; } .tresor-schwebt.alarm { color: #ff5555; font-size: 44px; } .tresor-schwebt.daneben { color: #b8bec7; font-size: 20px; } .tresor-banner { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; z-index: 4; opacity: 0; pointer-events: none; font: 400 52px/1 var(--mc-schrift); color: #ffd84a; text-shadow: 4px 4px 0 #3a2a00, 0 0 18px rgb(0 0 0 / .8); white-space: nowrap; } .tresor-banner.zeigt { animation: tresor-banner 1.3s ease-out both; } .tresor-siegel { position: absolute; inset: 0; z-index: 5; display: none; place-items: center; background: rgb(8 9 11 / .62); font: 400 46px/1 var(--mc-schrift); color: #fff; text-shadow: 4px 4px 0 #000; text-align: center; padding: 12px; } .tresor-blech[data-zu] { pointer-events: none; } .tresor-blech[data-zu] .tresor-siegel { display: grid; } .tresor-blech[data-zu] .tresor-loecher { filter: grayscale(1) brightness(.6); } .tresor-fuss { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-block-start: 12px; min-block-size: 24px; font: 400 20px/24px var(--mc-schrift); color: #d5d9df; text-shadow: 2px 2px 0 #000; } /* Störstift (03.10.2026, lib/spiele/tresor.js): ein Alarmstift aus dem Riegel des Gegners — kurzer weißer Rahmen beim Herausspringen */ .tresor-blech .stift[data-stoer] { animation: tresor-raus .18s steps(3), tresor-warnen .6s steps(2) infinite, tresor-stoer .9s steps(3); } @keyframes tresor-stoer { 0%, 66% { filter: drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); } } /* Riegel-Leiste des Gegners unter der Tür: drei Mini-Riegel und sein Faktor */ .tresor-gegner { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-inline-size: 0; } .tresor-gegner-riegel { display: inline-flex; align-items: center; gap: 4px; } .tresor-gegner-riegel i { inline-size: 14px; block-size: 8px; background: #050607; box-shadow: 0 0 0 2px #000, inset -2px -2px 0 #2a2e33; } .tresor-gegner-riegel i.auf { background: #ffc61a; box-shadow: 0 0 0 2px #000, inset -2px -2px 0 #b07a00; } .tresor-gegner-riegel b { font-weight: 400; min-inline-size: 2ch; } .tresor-gegner-riegel[data-faktor="2"] b { color: #55ffff; } .tresor-gegner-riegel[data-faktor="3"] b { color: #ff55ff; } .tresor-gegner-riegel[data-faktor="4"] b { color: #ffaa00; } .tresor-gegner-riegel.springt { animation: tresor-hupfen .3s steps(3); } /* Rückmeldungen */ .tresor-blech.wackelt, .tresor-herzen.wackelt { animation: tresor-wackeln .36s steps(6); } .tresor-tuer.blitzt { animation: tresor-blitzen .45s steps(3); } .tresor-zahl.hupft { animation: tresor-hupfen .22s steps(3); } .tresor-riegel.springt { animation: tresor-hupfen .3s steps(3); } .tresor-riegel.zuschnappen { animation: tresor-wackeln .3s steps(5); } @keyframes tresor-raus { from { scale: .2; } 70% { scale: 1.12; } to { scale: 1; } } @keyframes tresor-rein { 0% { scale: 1; filter: brightness(2.2); } 100% { scale: .2; opacity: 0; filter: brightness(2.2); } } @keyframes tresor-knall { 0% { scale: 1; } 50% { scale: 1.5; filter: brightness(1.8) drop-shadow(0 0 12px #ff3030); } 100% { scale: 1.8; opacity: 0; } } @keyframes tresor-verblassen { to { scale: .7; opacity: 0; filter: grayscale(1); } } @keyframes tresor-funkeln { 50% { filter: brightness(1.35) drop-shadow(0 4px 0 rgb(0 0 0 / .65)) drop-shadow(0 0 8px #ffe45c); } } @keyframes tresor-warnen { 50% { filter: brightness(1.2) drop-shadow(0 4px 0 rgb(0 0 0 / .65)) drop-shadow(0 0 8px #ff3030); } } @keyframes tresor-uhr { 0% { scale: 1 1; background: #6fe36f; } 55% { background: #ffd84a; } 100% { scale: 0 1; background: #ff4b4b; } } @keyframes tresor-schweben { 0% { opacity: 0; translate: -50% -30%; } 15% { opacity: 1; translate: -50% -60%; } 100% { opacity: 0; translate: -50% -180%; } } @keyframes tresor-banner { 0% { opacity: 0; scale: 2.2; } 20% { opacity: 1; scale: 1; } 75% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; } } @keyframes tresor-wackeln { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 4px 0; } } @keyframes tresor-blitzen { 0%, 100% { box-shadow: 0 0 0 3px #000, inset 4px 4px 0 #6b717b, inset -4px -4px 0 #1b1d21; } 40% { box-shadow: 0 0 0 3px #ff3030, 0 0 26px #ff3030, inset 0 0 40px rgb(255 40 40 / .5); } } @keyframes tresor-hupfen { 50% { scale: 1.25; } } /* Nach der Breite der Tür, nicht des Fensters: Seit 21.09.2026 wird sie auch auf breiten, aber niedrigen Bildschirmen schmal */ .tresor-fenster { container-type: inline-size; inline-size: 100%; box-sizing: border-box; } /* inline-size: 100% ist Pflicht: Ein Container hat KEINE Breite aus seinem Inhalt. Mit margin-inline: auto (Übungsseite) schrumpfte die Tür deshalb auf 36 px — „komplett verbuggt" (Faddi 21.09.2026). Die Obergrenzen (max-inline-size) bleiben. */ @container (max-width: 560px) { .tresor-tuer { padding: 6px; } .tresor-leiste { gap: 6px; padding: 4px 6px; } .tresor-herzen .herz { inline-size: 22px; block-size: 22px; } .tresor-riegel .riegel { inline-size: 26px; block-size: 14px; } .tresor-riegel .riegel::after { inset: 3px auto 3px 2px; inline-size: 13px; } .tresor-riegel .riegel.auf::after { translate: 9px 0; } .tresor-faktor { font-size: 22px; } .tresor-zahl { font-size: 26px; } .tresor-punkte small { display: none; } .tresor-schwebt { font-size: 20px; } .tresor-banner { font-size: 34px; } .tresor-siegel { font-size: 30px; } .tresor-fuss { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .tresor-blech .stift, .tresor-blech .stift[data-art] { animation: none; } .tresor-blech .stift[data-wie] { opacity: 0; } .tresor-blech.wackelt, .tresor-herzen.wackelt, .tresor-tuer.blitzt, .tresor-zahl.hupft, .tresor-riegel.springt, .tresor-riegel.zuschnappen, .tresor-gegner-riegel.springt { animation: none; } .tresor-schwebt { animation-duration: .01s; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Baumeister (neu 20.09.2026, lib/spiele/baumeister.js) — ein Grundstück von oben, zwei Figuren darauf ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .bau-fenster { --mc-lueckchen: 8px; } /* Drei feste Spalten: mein Stand · Runde · sein Stand. Als Flexbox rutschte die Runde neben den linken Stand und der rechte in die zweite Zeile. */ .bau-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px 12px; } /* Je Seite ein dunkles Schild: Kopf, Name, Blöcke — und groß die Punkte der Runde, in der Farbe des Spielers */ .bau-seite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-inline-size: 0; padding: 6px 12px 6px 6px; background: #22222a; box-shadow: inset 2px 2px 0 #3b3b46, inset -2px -2px 0 #0c0c10, 0 0 0 2px #000; --farbe: #ff7a6e; transition: box-shadow .25s; } .bau-seite.ich { --farbe: #7fb2ff; } .bau-seite.rechts { grid-template-columns: auto minmax(0, 1fr) auto; } .bau-seite .kopf { inline-size: 32px; block-size: 32px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--farbe); } .bau-wer { display: grid; min-inline-size: 0; } .bau-name { font: 400 20px/22px var(--mc-schrift); color: var(--farbe); text-shadow: 2px 2px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bau-bloecke { font-size: .78rem; color: #b9b9c4; } .bau-punkte { font: 400 40px/40px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 #000; font-variant-numeric: tabular-nums; min-inline-size: 1.4ch; text-align: end; } .bau-seite.vorn { box-shadow: inset 2px 2px 0 #3b3b46, inset -2px -2px 0 #0c0c10, 0 0 0 2px #000, 0 0 16px -2px var(--farbe); } .bau-seite.vorn .bau-punkte { color: var(--mc-gelb, #ffff55); } .bau-mitte { display: grid; justify-items: center; gap: 6px; } .bau-runde { font: 400 20px/24px var(--mc-schrift); color: #3a2a10; text-align: center; white-space: nowrap; } /* Best of three: drei Steine — blau gewonnen, rot verloren, gelb gleich, weiß blinkend die laufende Runde */ .bau-pips { display: flex; gap: 6px; } .bau-pips i { inline-size: 18px; block-size: 18px; background: #6f6f6f; box-shadow: inset 2px 2px 0 #4a4a4a, inset -2px -2px 0 #9a9a9a, 0 0 0 2px #1a1a1a; } .bau-pips i[data-sieg="ich"] { background: #3f7fe0; box-shadow: inset 2px 2px 0 #7fb2ff, inset -2px -2px 0 #1d3f8d, 0 0 0 2px #1a1a1a; } .bau-pips i[data-sieg="gegner"] { background: #c23a30; box-shadow: inset 2px 2px 0 #ff7a6e, inset -2px -2px 0 #6d1f1f, 0 0 0 2px #1a1a1a; } .bau-pips i[data-sieg="gleich"] { background: #c7a012; } .bau-pips i[data-sieg="jetzt"] { background: #eaeaea; animation: bau-pip 1s steps(2, end) infinite; } @keyframes bau-pip { 50% { background: #9a9a9a; } } /* ── Die 3D-Bühne (js/baumeister-welt.js): Himmel, Insel, Figuren — Schilder und „+2" liegen als HTML darüber ── */ .bau-welt { margin-block: 10px; } .bau-buehne { position: relative; overflow: hidden; aspect-ratio: 16 / 11; border: 4px solid #1b1b22; box-shadow: inset 0 0 0 2px #3b3b46, 0 6px 0 rgb(0 0 0 / .25); background: radial-gradient(120% 80% at 50% 110%, #fff7d6 0%, transparent 55%), linear-gradient(#5aa7ee 0%, #8cc6f4 55%, #cfe8fb 100%); } .bau-buehne::before, .bau-buehne::after { content: ""; position: absolute; pointer-events: none; block-size: 18px; background: #fff; opacity: .75; box-shadow: 24px -10px 0 #fff, 48px 0 0 #fff; inline-size: 56px; animation: bau-wolke 60s linear infinite; } .bau-buehne::before { inset-block-start: 9%; inset-inline-start: -90px; } .bau-buehne::after { inset-block-start: 20%; inset-inline-start: -90px; animation-duration: 85s; animation-delay: -40s; scale: 1.4; opacity: .6; } @keyframes bau-wolke { to { translate: calc(100cqi + 200px) 0; } } .bau-buehne { container-type: inline-size; } .bau-3d { position: absolute; z-index: 1; inset: 0; inline-size: 100%; block-size: 100%; display: block; cursor: pointer; touch-action: pan-y; } /* Freie Kamera: beim Ziehen die passende Hand, oben rechts „Ansicht zurücksetzen", unten ein Hinweis, der von selbst geht */ .bau-buehne[data-zieht="drehen"] .bau-3d { cursor: grabbing; } .bau-buehne[data-zieht="schieben"] .bau-3d { cursor: move; } .bau-ansicht { position: absolute; z-index: 3; inset-block-start: 8px; inset-inline-end: 8px; padding: 4px 10px 5px; cursor: pointer; font: 400 16px/18px var(--mc-schrift); color: #fff; background: rgb(0 0 0 / .55); border: 2px solid rgb(255 255 255 / .35); text-shadow: 1px 1px 0 #000; } .bau-ansicht:hover, .bau-ansicht:focus-visible { background: rgb(0 0 0 / .75); border-color: #fff; outline: none; } .bau-kamera-hinweis { position: absolute; z-index: 3; inset-inline-start: 8px; inset-block-start: 8px; margin: 0; inline-size: fit-content; max-inline-size: calc(100% - 130px); padding: 3px 8px; text-align: start; font-size: .74rem; color: #fff; background: rgb(0 0 0 / .6); pointer-events: none; transition: opacity .6s; } .bau-kamera-hinweis.weg { opacity: 0; } .bau-buehne[data-zu] .bau-3d { cursor: default; } .bau-schild { position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: 0; translate: calc(var(--x, -999px) - 50%) calc(var(--y, -999px) - 100%); pointer-events: none; padding: 1px 6px 2px; font: 400 16px/18px var(--mc-schrift); color: #fff; white-space: nowrap; background: rgb(0 0 0 / .55); text-shadow: 1px 1px 0 #000; max-inline-size: 140px; overflow: hidden; text-overflow: ellipsis; } .bau-schild.ich { color: #9cc8ff; } .bau-zettel { position: absolute; z-index: 2; inset: 0; pointer-events: none; } .bau-plus { position: absolute; inset-block-start: 0; inset-inline-start: 0; translate: calc(var(--x, -999px) - 50%) calc(var(--y, -999px) - 50%); font: 400 24px/1 var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #000; animation: bau-plus 1.3s ease-out forwards; } .bau-plus.ich { color: #9cc8ff; } .bau-plus.gegner { color: #ffb0a8; } .bau-plus.gold { color: #ffe25a; } .bau-plus.gross { font-size: 40px; text-shadow: 3px 3px 0 #000; } @keyframes bau-plus { 0% { opacity: 0; scale: .4; } 15% { opacity: 1; scale: 1.25; } 30% { scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } .bau-banner { position: absolute; z-index: 3; inset-inline: 0; inset-block-start: 38%; padding: 10px 16px; text-align: center; pointer-events: none; font: 400 30px/36px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 #000; background: linear-gradient(90deg, transparent, rgb(0 0 0 / .6) 20%, rgb(0 0 0 / .6) 80%, transparent); } .bau-banner[data-art="sieg"] { color: #7fb2ff; } .bau-banner[data-art="niederlage"] { color: #ff8a80; } .bau-banner[data-art="los"] { color: #ffe25a; } .bau-banner.neu { animation: bau-banner .45s cubic-bezier(.16, 1, .3, 1) both; } @keyframes bau-banner { from { opacity: 0; scale: 1.6 1; } } @media (prefers-reduced-motion: reduce) { .bau-buehne::before, .bau-buehne::after, .bau-plus, .bau-banner.neu, .bau-pips i[data-sieg="jetzt"] { animation: none; } } /* Das Grundstück: quadratisch, damit ein Feld bei allen gleich breit wie hoch ist (die Figuren rechnen damit). */ .bau-grund { position: relative; display: grid; grid-template-columns: repeat(var(--kante), 1fr); aspect-ratio: 1; inline-size: 100%; margin-block: 10px; border: 4px solid #3a2a16; background: #5a8a3a; touch-action: manipulation; overflow: hidden; } .bau-grund[data-zu] { filter: grayscale(.5) brightness(.75); pointer-events: none; } .bau-feld { all: unset; position: relative; aspect-ratio: 1; cursor: pointer; background: url("img/tex/gras.png") center/100% 100%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); } .bau-feld:focus-visible { outline: 3px solid #fff; outline-offset: -3px; } .bau-feld:hover:not([data-b]) { filter: brightness(1.15); } /* Erz liegt offen da, solange das Feld frei ist — gebaut wird es von der Farbe des Bauherrn überdeckt. */ .bau-feld[data-erz]:not([data-b]) { background-image: url("img/tex/golderz.png"); } .bau-feld[data-b] { cursor: default; background-image: url("img/tex/stein.png"); } /* Eigene Blöcke blau, nicht grün: auf Gras wäre Grün auf Grün — man sähe auf einen Blick nicht, was schon gebaut ist. */ .bau-feld[data-b="ich"] { background-color: #3a6fb8; background-blend-mode: multiply; box-shadow: inset 0 0 0 2px #1d3f6d; } .bau-feld[data-b="gegner"] { background-color: #a23a3a; background-blend-mode: multiply; box-shadow: inset 0 0 0 2px #6d1f1f; } /* Ein erobertes Erzfeld behält eine goldene Ecke — man sieht bis zum Schluss, wer die dicken Felder geholt hat. */ .bau-feld[data-b][data-erz]::after { content: ""; position: absolute; inset-block-start: 8%; inset-inline-end: 8%; inline-size: 26%; aspect-ratio: 1; background: var(--mc-gold, #f5c542); box-shadow: 0 0 0 2px #3f2a00; } /* Die Figuren liegen über dem Gitter und werden nur über --fx/--fy bewegt (CSSOM, keine Inline-Stile). */ .bau-figur { position: absolute; inset-block-start: var(--fy, 50%); inset-inline-start: var(--fx, 50%); translate: -50% -62%; pointer-events: none; display: grid; justify-items: center; z-index: 2; inline-size: calc(100% / var(--kante, 11)); } .bau-figur img.kopf { inline-size: 92%; min-inline-size: 16px; block-size: auto; image-rendering: pixelated; border: 2px solid #17170f; box-shadow: 0 3px 0 rgb(0 0 0 / .45); } .bau-figur-name { font: 400 14px/16px var(--mc-schrift); color: #fff; text-shadow: 1px 1px 0 #000; background: rgb(0 0 0 / .45); padding: 0 4px; white-space: nowrap; max-inline-size: 90px; overflow: hidden; text-overflow: ellipsis; } .bau-figur[data-ich] .bau-figur-name { color: #9cc8ff; } .bau-figur[data-laeuft] img.kopf { animation: bau-wippen .42s steps(2, end) infinite; } @keyframes bau-wippen { from { translate: 0 0; } 50% { translate: 0 -8%; } to { translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .bau-figur[data-laeuft] img.kopf { animation: none; } } /* Auf dem Handy wird das Gitter schnell eng: Name weg (der Kopf reicht), und das Fenster gibt seitlich Platz ab — sonst bleiben von 375 px nur 267 für elf Felder, also gut 23 px je Feld zum Antippen. */ .bau-feld[data-fels] { cursor: not-allowed; background-image: url("img/tex/stein.png"); box-shadow: inset 0 0 0 2px #2a2a2a; } /* Gedreht wie die 3D-Welt (24.09.2026): die eigene Startecke unten links, die des Gegners oben rechts — für beide gleich. Wer man ist, verrät die Figur mit data-ich (Spieler 0 startet oben links → -90°, Spieler 1 unten rechts → 90°). Figuren drehen zurück, damit Kopf und Name aufrecht bleiben. Ohne data-ich bleibt das Brett ungedreht. */ .bau-grund:has(.bau-figur[data-figur-spieler="0"][data-ich]) { rotate: -90deg; --zurueck: 90deg; } .bau-grund:has(.bau-figur[data-figur-spieler="1"][data-ich]) { rotate: 90deg; --zurueck: -90deg; } .bau-grund:has(.bau-figur[data-ich]) .bau-figur { rotate: var(--zurueck); translate: -50% -50%; } /* Die eigene Ecke liegt jetzt immer unten: das Namensschild darf über den Rand hängen statt abgeschnitten zu werden */ .bau-grund:has(.bau-figur[data-ich]) { overflow: visible; } @media (width < 560px) { .bau-figur-name { display: none; } .bau-fenster { padding-inline: 6px; } /* Handy: Runde über die ganze Breite und zuerst, darunter die beiden Seiten */ .bau-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bau-mitte { grid-column: 1 / -1; order: -1; } .bau-seite { gap: 6px; padding: 4px 8px 4px 4px; } .bau-punkte { font-size: 30px; line-height: 30px; } .bau-bloecke { display: none; } .bau-grund { border-width: 3px; } .bau-buehne { aspect-ratio: 1 / 1.05; border-width: 3px; } .bau-banner { font-size: 22px; line-height: 28px; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Menschprüfung „folge dem Punkt" (lib/mensch.js) — die Partie wartet so lange ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .probe-schleier { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); } .probe-kasten { max-inline-size: 640px; inline-size: 100%; } .probe-hinweis { color: var(--gui-text); margin: 6px 0 10px; } .probe-feld { position: relative; aspect-ratio: 3 / 2; inline-size: 100%; background: #1b1b1b; border: 4px solid #5a5a5a; touch-action: none; cursor: crosshair; overflow: hidden; } .probe-punkt { position: absolute; inset-block-start: var(--y); inset-inline-start: var(--x); inline-size: 26px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 25%, #ffd84a 55%, #b07c00 100%); box-shadow: 0 0 14px rgba(255, 216, 74, .8); } /* Kurze Pause, während die Menschprüfung läuft: niemand kann ziehen, die Uhren stehen (lib/arcade.js pauseEnde). */ .partie-pause [data-flaeche] { pointer-events: none; filter: saturate(.5) brightness(.85); } .partie-pause [data-uhr] { opacity: .5; } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Creator-Programm (lib/creator.js): Kasten in der Kasse, Link-Seite ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .creator-tafel .creator-eingabe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 10px; } /* Das Feld nimmt den Platz neben dem Knopf, damit der Platzhalter ganz lesbar bleibt (Pixelschrift ist breit) */ .creator-tafel .creator-eingabe .creator-feld { flex: 1 1 18rem; min-inline-size: 0; } .creator-tafel .creator-eingabe .mc-feld { inline-size: 100%; box-sizing: border-box; } .creator-tafel .creator-schalter { margin-block-start: 10px; } .creator-tafel .creator-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; } .creator-tafel .trenner-mc { border: 0; border-block-start: 2px solid #8a8a8a; margin-block: 14px; } .gebuehr-zeile { margin-block-start: 6px; } /* Twitch-Panel in der Kasse: der Knopf klappt das Bild auf und zu (details/summary, kein Skript nötig). */ .panel-kasten { margin-block-start: 10px; } .panel-kasten > summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; } .panel-kasten > summary::-webkit-details-marker { display: none; } .panel-kasten[open] > summary > span::after { content: " ▾"; } .panel-kasten:not([open]) > summary > span::after { content: " ▸"; } .panel-bild { display: block; max-inline-size: 100%; block-size: auto; image-rendering: pixelated; border: 3px solid #1a1a1a; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .6); margin-block: 8px; } /* ── Lobby: „Wer dich sieht" (Umbau 21.09.2026, Faddi mit Bild: Haken mittig neben zwei Zeilen, Hilfetexte #b8b8b8 auf #c6c6c6 unlesbar, weißes „$" auf hellem Grund). Jede Option eine Zeile: Schalter oben links, Titel fett, kurzer Hinweis darunter — alles dunkel auf hell, ≥ 7 : 1. */ .sicht-optionen { display: grid; gap: 8px; } .sicht-option, .sicht-betrag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; background: #b3b3b3; box-shadow: inset 2px 2px 0 #8b8b8b, inset -2px -2px 0 #dcdcdc; cursor: pointer; } .sicht-option:hover { background: #ababab; } .sicht-option:has(input:focus-visible) { outline: 2px solid #1f1f1f; outline-offset: 2px; } /* Tippziel ist die ganze Zeile (Label, ≥ 44 px hoch); der Haken selbst so hoch wie die Titelzeile daneben (24 px) */ .sicht-option { min-block-size: 44px; box-sizing: border-box; } .sicht-option input { inline-size: 24px; block-size: 24px; margin: 0; accent-color: #3f8f1f; cursor: pointer; } .sicht-text { display: grid; gap: 3px; min-inline-size: 0; } .sicht-text b { font: 400 20px/24px var(--mc-schrift); color: #1f1f1f; } .sicht-text small { font-size: .84rem; line-height: 1.4; color: #333; } .sicht-option:has(input:not(:checked)) .sicht-text b { color: #4a4a4a; } .sicht-betrag { grid-template-columns: minmax(0, 1fr) auto; align-items: center; cursor: default; } .sicht-dollar { display: inline-flex; align-items: center; gap: 6px; font: 400 24px/1 var(--mc-schrift); color: #6b4400; } .sicht-dollar .mc-feld { inline-size: 7.5em; text-align: end; } @media (max-width: 420px) { .sicht-betrag { grid-template-columns: minmax(0, 1fr); } } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Bid Wars als Auktionsbühne (21.09.2026, Faddi: „visuell upgraden … zu statisch und langweilig") Regal mit fünf Waren · Saal: Bieter, Gebotsschilder, Podest im Scheinwerfer · Stempel, Münzen, aufsteigende Zahlen ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .bid-buehne { position: relative; overflow: hidden; padding: 12px 12px 6px; display: grid; gap: 10px; background: radial-gradient(60% 70% at 50% 60%, #4a1d24 0%, #2a0f14 60%, #16080b 100%); border: 4px solid #1a0a0d; box-shadow: inset 0 0 0 2px #6b2a33, inset 0 -30px 40px -20px rgb(0 0 0 / .6); } /* Vorhang oben: gewellte Samtkante */ .bid-buehne::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 14px; pointer-events: none; background: repeating-linear-gradient(90deg, #7a1e2a 0 16px, #5c1520 16px 24px); box-shadow: 0 4px 0 #3a0c13; } .bid-regal { display: flex; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 8px 10px 6px; list-style: none; background: linear-gradient(#6b4a2a, #4f341b); box-shadow: inset 0 -4px 0 #2e1d0c, 0 4px 0 #1a0f06; } .bid-ware { position: relative; display: grid; justify-items: center; gap: 3px; padding: 5px 6px 4px; min-inline-size: 44px; background: #2e1d0c; box-shadow: inset 2px 2px 0 #1a0f06, inset -2px -2px 0 #5e4127; transition: translate .3s, filter .3s; } .bid-ware .mc-item { inline-size: 32px; block-size: 32px; image-rendering: pixelated; } .bid-pips { display: flex; gap: 2px; } .bid-pips i { inline-size: 6px; block-size: 6px; background: #ffd24a; box-shadow: 0 0 0 1px #3f2a00; } .bid-ware[data-jetzt] { translate: 0 -4px; background: #6b4f1d; box-shadow: inset 2px 2px 0 #ffdf7a, inset -2px -2px 0 #3f2a00, 0 0 14px #ffd24a; } .bid-ware[data-sieg="ich"] { background: #1d3f7a; box-shadow: inset 2px 2px 0 #7fb2ff, inset -2px -2px 0 #0d1f3d; } .bid-ware[data-sieg="gegner"] { background: #7a1d1d; box-shadow: inset 2px 2px 0 #ff8a80, inset -2px -2px 0 #3d0d0d; } .bid-ware[data-sieg="gleich"] { filter: grayscale(1) brightness(.6); } .bid-saal { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: end; gap: 10px; min-block-size: 190px; } .bid-bieter { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; min-inline-size: 0; text-align: center; --farbe: #ff8a80; } .bid-bieter.ich { --farbe: #7fb2ff; } .bid-kopf { padding: 6px; background: #120609; box-shadow: 0 0 0 3px var(--farbe), 0 6px 0 #000; transition: box-shadow .3s, translate .3s; } .bid-kopf .kopf { display: block; inline-size: 64px; block-size: 64px; image-rendering: pixelated; } .bid-bieter.vorn .bid-kopf { box-shadow: 0 0 0 3px var(--farbe), 0 6px 0 #000, 0 0 20px var(--farbe); } .bid-bieter.gewinnt .bid-kopf { animation: bid-hops .5s cubic-bezier(.3, 1.6, .5, 1) 2; } @keyframes bid-hops { 50% { translate: 0 -14px; } } .bid-bieter-name { max-inline-size: 100%; font: 400 20px/22px var(--mc-schrift); color: var(--farbe); text-shadow: 2px 2px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bid-bieter-punkte { font: 400 16px/18px var(--mc-schrift); color: #ffd24a; text-shadow: 1px 1px 0 #000; } .bid-kasse { display: flex; align-items: end; gap: 6px; } .bid-kasse > span { display: grid; text-align: start; } .bid-kasse small { font-size: .7rem; color: #d9c2c2; } .bid-kasse-zahl { font: 400 24px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #000; font-variant-numeric: tabular-nums; } .bid-kasse-zahl.blitzt { animation: bid-blitz .5s; } @keyframes bid-blitz { 30% { color: #ff8a80; scale: 1.15; } } /* Münzstapel: Höhe = Rest vom Budget */ .bid-stapel { position: relative; inline-size: 16px; block-size: 44px; background: #120609; box-shadow: 0 0 0 2px #000; } .bid-stapel i { position: absolute; inset: auto 0 0; block-size: calc(var(--anteil, 1) * 100%); transition: block-size .6s cubic-bezier(.2, .9, .3, 1); background: repeating-linear-gradient(#ffd24a 0 3px, #c99a1a 3px 4px); } /* Gebotsschilder: Stiel und Blatt — verdeckt „?", versiegelt, aufgedeckt die Zahl */ .bid-schild { display: grid; justify-items: center; align-self: center; translate: 0 10px; transition: translate .3s; } .bid-schild-blatt { display: grid; place-items: center; min-inline-size: 70px; block-size: 56px; padding: 0 8px; box-sizing: border-box; background: #efe6d2; box-shadow: inset 0 0 0 3px var(--farbe, #ff8a80), 0 4px 0 #000; } .bid-schild.ich .bid-schild-blatt { --farbe: #7fb2ff; } .bid-schild-stiel { order: 2; inline-size: 6px; block-size: 34px; background: #6b4a2a; box-shadow: 0 0 0 2px #000; } .bid-schild-zahl { font: 400 26px/1 var(--mc-schrift); color: #2b2b2b; font-variant-numeric: tabular-nums; } .bid-schild[data-art="denkt"] .bid-schild-zahl { color: #8a7a6a; animation: bid-denkt 1.2s steps(3, end) infinite; } @keyframes bid-denkt { 50% { opacity: .35; } } .bid-schild[data-art="versiegelt"] .bid-schild-blatt { background: #c33; box-shadow: inset 0 0 0 3px #ffd24a, 0 4px 0 #000; } .bid-schild[data-art="versiegelt"] .bid-schild-zahl { color: #ffd24a; } .bid-schild[data-art="meins"] .bid-schild-zahl { color: #1d3f7a; } .bid-schild[data-art="offen"] { translate: 0 -8px; } .bid-schild[data-art="offen"] .bid-schild-blatt { animation: bid-umklappen .45s ease-out; } @keyframes bid-umklappen { 0% { scale: 1 1; } 45% { scale: 0 1; } 100% { scale: 1 1; } } .bid-schild.sieger .bid-schild-blatt { background: #fff6c8; box-shadow: inset 0 0 0 3px #ffd24a, 0 4px 0 #000, 0 0 22px #ffd24a; } .bid-schild.wackelt { animation: bid-wackeln .4s; } @keyframes bid-wackeln { 25% { rotate: -8deg; } 75% { rotate: 8deg; } } /* Podest mit Scheinwerfer */ .bid-podest { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 18px 10px; min-inline-size: 110px; } .bid-podest::after { content: ""; position: absolute; inset: auto 6px 0; block-size: 18px; background: linear-gradient(#8a8a8a, #5a5a5a); box-shadow: inset 0 3px 0 #b8b8b8, 0 4px 0 #1a1a1a; z-index: 0; } .bid-licht { position: absolute; inset: -40px -30px 0; pointer-events: none; z-index: 0; background: conic-gradient(from 180deg at 50% 0%, transparent 155deg, rgb(255 236 170 / .28) 170deg, rgb(255 236 170 / .38) 180deg, rgb(255 236 170 / .28) 190deg, transparent 205deg); } .bid-podest-ware { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 84px; block-size: 84px; filter: drop-shadow(0 0 10px rgb(255 220 120 / .7)); animation: bid-schweben 2.4s ease-in-out infinite; } .bid-podest-ware .mc-item { inline-size: 64px; block-size: 64px; image-rendering: pixelated; } .bid-podest[data-wert="3"] .bid-podest-ware { filter: drop-shadow(0 0 14px rgb(120 255 180 / .9)); } @keyframes bid-schweben { 50% { translate: 0 -6px; } } .bid-podest.neu .bid-podest-ware { animation: bid-rein .5s cubic-bezier(.2, 1.4, .4, 1), bid-schweben 2.4s ease-in-out .5s infinite; } @keyframes bid-rein { from { scale: .2; opacity: 0; rotate: -30deg; } } .bid-podest-wert { position: relative; z-index: 1; margin-block-end: 18px; font: 400 20px/22px var(--mc-schrift); color: #ffd24a; text-shadow: 2px 2px 0 #000; white-space: nowrap; } .bid-stempel { position: absolute; z-index: 2; inset-block-start: 26px; inset-inline: -30px; text-align: center; pointer-events: none; font: 400 30px/34px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 #000; rotate: -10deg; } .bid-stempel[data-art="ich"] { color: #9cc8ff; } .bid-stempel[data-art="gegner"] { color: #ff9a90; } .bid-stempel[data-art="gleich"] { color: #ffd24a; } .bid-stempel.knallt { animation: bid-stempel .45s cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes bid-stempel { from { scale: 3; opacity: 0; } } .bid-uhr { margin: 0; block-size: 8px; } .bid-uhr i { background: linear-gradient(90deg, #ffd24a, #ff9a3a); } /* Effekte: Münzen fliegen hoch und fallen, Zahlen steigen auf */ .bid-effekte { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .bid-muenze { position: absolute; inset-block-start: 55%; inline-size: 12px; block-size: 12px; background: #ffd24a; box-shadow: inset -3px -3px 0 #c99a1a, 0 0 0 2px #3f2a00; animation: bid-muenze 1.3s cubic-bezier(.3, .7, .6, 1) var(--verz, 0ms) both; } .bid-muenze.ich { inset-inline-start: 16%; } .bid-muenze.gegner { inset-inline-start: 82%; } @keyframes bid-muenze { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 45% { translate: calc(var(--dx) * .6) var(--dy); } 100% { translate: var(--dx) 80px; rotate: var(--dreh); opacity: 0; } } .bid-aufstieg { position: absolute; inset-block-start: 40%; translate: -50% 0; font: 400 22px/1 var(--mc-schrift); text-shadow: 2px 2px 0 #000; white-space: nowrap; animation: bid-aufstieg 1.6s ease-out both; } .bid-aufstieg.ich { inset-inline-start: 16%; } .bid-aufstieg.gegner { inset-inline-start: 84%; } .bid-aufstieg.punkte { color: #ffd24a; font-size: 28px; } .bid-aufstieg.zurueck { color: #e0e0e0; font-size: 18px; } @keyframes bid-aufstieg { 0% { opacity: 0; translate: -50% 20px; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: -50% -60px; } } /* Unter der Bühne: Lage, Schnellwahl, Regler in Gold */ .bid-lage { margin: 10px 0 0; text-align: center; font: 400 20px/24px var(--mc-schrift); color: #3a2a10; } .bid-schnell { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-block: 8px 4px; } .bid-schnell .filter-chip:disabled { opacity: .5; cursor: default; } .bid-regler input[type="range"] { background: linear-gradient(90deg, #c99a1a calc(var(--wert, 0) * 100%), #3a3a3a 0); } .bid-bieten { gap: 8px; } .bid-bieten .mc-item { inline-size: 24px; block-size: 24px; image-rendering: pixelated; } .bid-verlauf li { display: flex; align-items: center; gap: 8px; padding: 3px 8px; background: #262626; color: #ececec; } .bid-verlauf li .mc-item { inline-size: 16px; block-size: 16px; image-rendering: pixelated; } .bid-verlauf li[data-sieg="ich"] { box-shadow: inset 4px 0 0 #3f7fe0; } .bid-verlauf li[data-sieg="gegner"] { box-shadow: inset 4px 0 0 #c23a30; } .bid-verlauf li[data-sieg="gleich"] { box-shadow: inset 4px 0 0 #c7a012; } @media (max-width: 640px) { .bid-saal { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "a p b" "sa p sb"; min-block-size: 0; gap: 6px; } .bid-saal > .bid-bieter:first-child { grid-area: a; } .bid-saal > .bid-bieter:last-child { grid-area: b; } .bid-saal > .bid-schild:nth-child(2) { grid-area: sa; } .bid-saal > .bid-schild:nth-child(4) { grid-area: sb; } .bid-saal > .bid-podest { grid-area: p; } .bid-kopf .kopf { inline-size: 40px; block-size: 40px; } .bid-schild { translate: 0 0; } .bid-schild-blatt { min-inline-size: 56px; block-size: 42px; } .bid-schild-stiel { block-size: 12px; } .bid-schild-zahl { font-size: 20px; } .bid-podest { min-inline-size: 84px; padding-inline: 4px; } .bid-podest-ware { inline-size: 64px; block-size: 64px; } .bid-podest-ware .mc-item { inline-size: 48px; block-size: 48px; } .bid-ware { min-inline-size: 0; padding: 4px; } .bid-ware .mc-item { inline-size: 24px; block-size: 24px; } .bid-regal { gap: 4px; padding-inline: 6px; } .bid-stempel { font-size: 22px; } .bid-kasse-zahl { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .bid-podest-ware, .bid-podest.neu .bid-podest-ware, .bid-schild[data-art="denkt"] .bid-schild-zahl, .bid-bieter.gewinnt .bid-kopf, .bid-stempel.knallt, .bid-schild[data-art="offen"] .bid-schild-blatt, .bid-schild.wackelt { animation: none; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Klingenduell (21.09.2026, js/klinge-welt.js) — Bühne 640×360 pixelgenau hochgezogen, Knöpfe für Finger, Tastenhilfe ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .kl-fenster { --mc-lueckchen: 8px; display: grid; gap: 10px; } /* Die Leinwand hat so viele Punkte wie der Bildschirm (js/pixelbuehne.js, scharfe Schrift) — ihre GRÖSSE auf der Seite darf davon nicht abhängen: contain + contain-intrinsic-size lassen sie im Layout immer 640 × 360 „groß“ sein wie früher. */ .kl-buehne { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; image-rendering: crisp-edges; contain: size; contain-intrinsic-size: 640px 360px; background: #0b0820; border: 4px solid #1b1b22; box-shadow: 0 0 0 2px #000, 0 8px 0 -2px rgb(0 0 0 / .35); outline: none; cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .kl-buehne:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 5px #4fc3ff; } .kl-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .kl-hilfe { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: .85rem; color: #3a2a10; } .kl-hilfe-teil { white-space: nowrap; } .kl-hilfe kbd { font: 400 10px/1 var(--mc-schrift); padding: 5px 6px 4px; background: #2b2b33; color: #f4f1e6; box-shadow: inset 2px 2px 0 #44444f, inset -2px -2px 0 #111116, 0 0 0 2px #000; } .kl-meldung { margin: 0; } .kl-wahl { margin-block-start: 0; } /* Knöpfe für Finger: links laufen und springen, rechts die drei Aktionen — groß genug für Daumen */ .kl-finger { display: flex; justify-content: space-between; gap: 12px; touch-action: none; user-select: none; -webkit-user-select: none; } .kl-finger[hidden] { display: none; } .kl-finger-seite { display: flex; gap: 8px; } .kl-knopf { min-inline-size: 58px; min-block-size: 58px; padding: 6px 8px; font: 400 20px/1.1 var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #000; background: #4a4a55; border: 0; box-shadow: inset 3px 3px 0 #6d6d7a, inset -3px -3px 0 #26262e, 0 0 0 2px #000; touch-action: none; cursor: pointer; } .kl-knopf.hieb { background: #8a5a2b; box-shadow: inset 3px 3px 0 #b07a44, inset -3px -3px 0 #5a3a18, 0 0 0 2px #000; } .kl-knopf.parade { background: #2b6c8a; box-shadow: inset 3px 3px 0 #4fa3c9, inset -3px -3px 0 #174458, 0 0 0 2px #000; } .kl-knopf.sturm { background: #a4481c; box-shadow: inset 3px 3px 0 #d8733d, inset -3px -3px 0 #62290d, 0 0 0 2px #000; } .kl-knopf.gedrueckt { transform: translateY(2px); filter: brightness(1.25); } @media (max-width: 520px) { .kl-knopf { min-inline-size: 50px; min-block-size: 54px; font-size: 10px; padding: 4px; } .kl-finger-seite { gap: 6px; } .kl-hilfe { display: none; } .kl-fenster { --mc-lueckchen: 4px; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Anleitungen als Fenster (web/seiten/anleitungen.js + js/anleitung.js, 21.09.2026) Ein Schritt = großes Bild, Nummer, fette Zeile, ein Satz. Die Bilder bewegen sich nur über die Klassen hier. ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* Knopf „? So geht's" — Lobby-Karten, Übersicht, Üben, Partie, Bereit-Abfrage */ .anl-auf { all: unset; box-sizing: border-box; position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 10px 5px; font: 400 16px/18px var(--mc-schrift); color: #fff; background: #2a4f86; border: 2px solid #000; box-shadow: inset 2px 2px 0 #5d8ad0, inset -2px -2px 0 #16294a; text-shadow: 1px 1px 0 #000; white-space: nowrap; } .anl-auf:hover { filter: brightness(1.15); } .anl-auf:focus-visible { outline: 3px solid var(--mc-aqua, #55ffff); outline-offset: 2px; } .anl-auf[hidden] { display: none; } /* Nie gespielt: gold, leuchtet, mit Marke „Neu für dich" — nach dem Ansehen ruhiger */ .anl-auf.neu { background: #8a6410; box-shadow: inset 2px 2px 0 #ffd76a, inset -2px -2px 0 #3f2a00, 0 0 0 0 rgb(255 215 106 / .8); animation: anl-lock 1.6s ease-out infinite; } .anl-auf.neu.gesehen { animation: none; box-shadow: inset 2px 2px 0 #ffd76a, inset -2px -2px 0 #3f2a00; } @keyframes anl-lock { 70% { box-shadow: inset 2px 2px 0 #ffd76a, inset -2px -2px 0 #3f2a00, 0 0 0 10px rgb(255 215 106 / 0); } 100% { box-shadow: inset 2px 2px 0 #ffd76a, inset -2px -2px 0 #3f2a00, 0 0 0 0 rgb(255 215 106 / 0); } } .anl-neu-marke { position: absolute; inset-block-start: -12px; inset-inline-end: -8px; padding: 1px 5px; font: 400 12px/14px var(--mc-schrift); color: #3f2a00; background: #ffe25a; border: 2px solid #000; rotate: 4deg; } .anl-auf.gesehen .anl-neu-marke { display: none; } .spiel-karte .anl-auf { margin-block-start: 14px; justify-self: center; } /* Platz für die Marke „Neu für dich", die sonst die Zeile darüber verdeckt (22.09.2026) */ .spiel-karte[data-nie-gespielt] .karte-innen { box-shadow: inset 3px 3px 0 #a0a0a0, inset -3px -3px 0 #3a3a3a, 0 0 0 2px #ffd76a; } .anl-tipp { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; padding: 8px 10px; font-size: .88rem; color: #2b2b2b; background: #fff3c4; box-shadow: inset 0 0 0 2px #c99a1a; } .anl-tipp .mc-item { inline-size: 24px; block-size: 24px; image-rendering: pixelated; flex: none; } /* Das Fenster */ .anl-dialog { inline-size: min(100% - 24px, 600px); max-block-size: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; } .anl-fenster { display: grid; gap: 10px; } .anl-kopf { display: flex; align-items: center; gap: 10px; } .anl-kopf .mc-item { inline-size: 32px; block-size: 32px; image-rendering: pixelated; } .anl-kopf .fenster-titel { flex: 1; margin: 0; } .anl-zu { all: unset; cursor: pointer; inline-size: 32px; block-size: 32px; display: grid; place-items: center; font: 400 24px/1 var(--mc-schrift); color: #fff; background: #8b2b2b; border: 2px solid #000; box-shadow: inset 2px 2px 0 #c55, inset -2px -2px 0 #4a1010; } .anl-zu:focus-visible { outline: 3px solid #fff; } .anl-ziel { margin: 0; padding: 8px 12px; font-size: .95rem; line-height: 1.45; color: #1f1f1f; background: #e8e2cf; box-shadow: inset 4px 0 0 #c99a1a; } .anl-schritte { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .anl-schritt { display: grid; gap: 10px; } .anl-schritt[hidden] { display: none; } .anl-worte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; } .anl-nr { display: grid; place-items: center; inline-size: 36px; block-size: 36px; font: 400 24px/1 var(--mc-schrift); color: #fff; background: #3f7fe0; border: 2px solid #000; box-shadow: inset 2px 2px 0 #7fb2ff, inset -2px -2px 0 #1d3f8d; text-shadow: 2px 2px 0 #000; } .anl-worte h4 { margin: 0 0 2px; font: 400 22px/26px var(--mc-schrift); color: #1f1f1f; } .anl-worte p { margin: 0; font-size: .95rem; line-height: 1.45; color: #2b2b2b; } .anl-fuss { display: none; } .karussell .anl-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .anl-punkte { display: flex; gap: 6px; } .anl-punkte button { all: unset; cursor: pointer; inline-size: 12px; block-size: 12px; background: #8b8b8b; border: 2px solid #000; } .anl-punkte button[aria-current="step"] { background: #3f7fe0; } .anl-punkte button:focus-visible { outline: 2px solid #000; outline-offset: 2px; } .anl-fuss .mc-knopf:disabled { opacity: .45; cursor: default; } @media (max-width: 480px) { .anl-worte h4 { font-size: 20px; line-height: 24px; } .anl-fuss .mc-knopf span { font-size: 16px; } } /* Bühne der Vorführung (anleitung.js): darin läuft das echte Spiel — nur zum Zusehen */ .anl-bild { position: relative; overflow: hidden; display: grid; place-items: center; min-block-size: 220px; background: #16161b; border: 3px solid #000; box-shadow: inset 0 0 0 2px #3b3b46; } .anl-bild:empty { display: none; } .anl-bild * { pointer-events: none; } .anl-bau { inline-size: 100%; } .anl-bau .bau-buehne { border: 0; box-shadow: none; aspect-ratio: 16 / 9; max-block-size: 42dvh; margin-inline: auto; } .anl-bild > .mc-inventar { margin: 10px; inline-size: calc(100% - 20px); box-sizing: border-box; } .anl-sonic { display: grid; justify-items: center; gap: 8px; padding: 14px; } .anl-sonic .noten.neun { grid-template-columns: repeat(3, 72px); gap: 8px; } .anl-status { min-block-size: 24px; margin: 0; text-align: center; } .anl-bid .bid-saal { min-block-size: 150px; } .anl-bid .gebot-eingabe { margin-block-start: 8px; } .anl-bid .gebot-eingabe[hidden] { display: none; } .anl-tresor { inline-size: 100%; } .anl-kampf { background: #26262d; box-shadow: inset 2px 2px 0 #3b3b46, inset -2px -2px 0 #0c0c10; display: grid; gap: 8px; padding: 12px; } .anl-kampf .arena-live { padding-block: 10px; } .anl-kampf .arena-schritte { margin: 0; } .anl-kampf .anl-status { color: #ffff55; text-shadow: 2px 2px 0 #3f3f15; } .anl-kampf .gegen.anl-zaehlt { animation: anl-zaehlt .33s ease-out; } @keyframes anl-zaehlt { from { scale: 1.7; opacity: .4; } } .anl-inventar { display: flex; justify-content: center; gap: 2px; padding: 6px; background: #c6c6c6; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #555; } .anl-inventar[hidden] { display: none; } .anl-slot { display: grid; place-items: center; inline-size: 36px; block-size: 36px; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; } .anl-slot .mc-item { inline-size: 28px; block-size: 28px; image-rendering: pixelated; transition: opacity .25s, scale .25s; } .anl-slot.leer .mc-item { opacity: 0; scale: .3; } .anl-ohne { color: #fff; } /* Klingenduell in der Anleitung: die echte Bühne, darüber die Taste, die gerade gedrückt wird */ .anl-klinge { position: relative; inline-size: 100%; } .anl-klinge .kl-buehne { max-block-size: 42dvh; inline-size: min(100%, 640px, calc(42dvh * 16 / 9)); margin-inline: auto; } .anl-klinge .anl-taste { position: absolute; inset-block-start: 26%; inset-inline-start: 50%; transform: translateX(-50%); z-index: 2; min-inline-size: 36px; padding: 4px 10px; text-align: center; font: 400 20px/1 var(--mc-schrift); color: #fff; background: rgb(10 8 18 / .82); border: 2px solid #fff; box-shadow: 0 3px 0 #000; } .anl-klinge .anl-taste[hidden] { display: none; } /* Der Mauszeiger der Vorführung: gleitet, klickt (Ring), zeigt beim Drehen die rechte Taste */ .anl-maus { position: absolute; z-index: 9; inset-block-start: 0; inset-inline-start: 0; inline-size: 0; block-size: 0; translate: var(--x, 50%) var(--y, 50%); transition: translate .5s cubic-bezier(.3, .8, .3, 1); } .anl-maus.schnell { transition-duration: .9s; transition-timing-function: linear; } .anl-maus[hidden] { display: none; } .anl-maus-pfeil { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 22px; block-size: 30px; background: #fff; clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 58% 94%, 40% 56%, 72% 56%); filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(2px 3px 2px rgb(0 0 0 / .5)); } .anl-maus-ring { position: absolute; inset-block-start: -16px; inset-inline-start: -16px; inline-size: 32px; block-size: 32px; border: 3px solid #fff; border-radius: 50%; opacity: 0; box-sizing: border-box; } .anl-maus.klickt .anl-maus-ring { animation: anl-klickring .5s ease-out; } .anl-maus.klickt .anl-maus-pfeil { animation: anl-druck .2s ease-out; } @keyframes anl-klickring { 0% { opacity: 1; scale: .3; } 100% { opacity: 0; scale: 1.6; } } @keyframes anl-druck { 50% { scale: .85; } } .anl-maus.rechts::after { content: ""; position: absolute; inset-block-start: 26px; inset-inline-start: 18px; inline-size: 18px; block-size: 24px; border: 2px solid #000; border-radius: 9px 9px 8px 8px; background: linear-gradient(90deg, #eee 50%, #e33 50%) top / 100% 45% no-repeat, #eee; } /* Vorführung in einer Anleitung: dieselbe Bühne, aber nur zum Zusehen */ .bau-buehne.vorfuehrung .bau-3d { pointer-events: none; cursor: default; } /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ Partie: Platz und Ergebnis (21.09.2026) — js/arcade-live.js platzMessen() und ergebnisZeigen(), für jedes Spiel. --spiel-hoehe Höhe, die zwischen festem Seitenkopf, Partie-Kopf und Leiste unten (Telefon) für die Spielfläche bleibt --brett-breite so breit darf das Fenster eines Spiels mit wachsendem Teil (Tresorblech, 3D-Bühne, Klingen-Bühne) höchstens sein, damit es ganz in den Bildschirm passt ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .partie, .partie-flaeche { scroll-margin-block-start: calc(var(--seite-oben, 0px) + 6px); } .partie-flaeche { position: relative; } .partie-flaeche > :first-child:not(.partie-ergebnis) { inline-size: 100%; max-inline-size: var(--brett-breite, none); justify-self: center; margin-inline: auto; } /* Sonic Echo hat kein Teil, das mit der Breite wächst — dort werden die Blöcke kleiner */ .partie .noten.neun { grid-template-columns: repeat(3, minmax(0, clamp(56px, calc((var(--spiel-hoehe, 100vh) - 240px) / 3), 96px))); } /* Der Hinweis unter der Tür bricht im schmalen Fenster in drei Zeilen um — kleiner, und auf niedrigen Bildschirmen weg (dasselbe steht in der Anleitung) */ .partie .tresor-fenster > .spiel-meldung { min-block-size: 0; margin-block: 8px 0; font-size: 16px; line-height: 20px; } .partie .tresor-fenster > .spiel-meldung:empty { display: none; } /* Solange die Partie läuft, rollt die Arcade-Leiste mit weg — auf niedrigen Bildschirmen auch der Winku-Kopf */ html[data-partie-laeuft] .arcade-kopf { position: relative; inset-block-start: auto; } @media (max-height: 820px) { html[data-partie-seite] .wk-kopf, html[data-partie-seite] .arcade-kopf { position: relative; inset-block-start: auto; } .partie .tresor-fenster > .spiel-meldung { display: none; } .partie .bau-fenster > .spiel-meldung { font-size: 16px; line-height: 20px; min-block-size: 0; } .partie { gap: 8px; } .partie-flaeche.spielflaeche { padding: 8px; gap: 8px; } .partie .tresor-tuer { padding: 6px; } .partie .tresor-leiste { margin-block-end: 6px; } .partie .tresor-fuss { margin-block-start: 6px; } .partie .bau-welt { margin-block: 6px; } } /* Übung: dieselbe Tür, ohne Partie-Kopf */ .uebung#tresorknacken .tresor-fenster { max-inline-size: clamp(320px, calc((100svh - 300px) * 1.5 + 56px), 760px); } /* VOLLBILD (27.09.2026, js/vollbild.js, Grundregeln in smp.css): Partie und Übung füllen den Bildschirm. Die Breite der wachsenden Teile rechnen platzMessen (Partie) bzw. vollbild.js (Übung) — hier fallen nur die festen Obergrenzen der normalen Ansicht, und was ohne wachsendes Teil größer werden darf, wird es (Sonic Echo, Emote-Raten). */ .uebung#tresorknacken .tresor-fenster.vollbild-an, .uebung-partie.vollbild-an { max-inline-size: none; } .vollbild-an .bau-buehne, .uebung#baumeister .vollbild-an .bau-buehne { max-block-size: none; } .partie.vollbild-an .noten.neun { grid-template-columns: repeat(3, minmax(0, clamp(56px, calc((var(--spiel-hoehe, 100vh) - 240px) / 3), 150px))); } .vollbild-an .er-buehne { max-inline-size: 760px; } .vollbild-an .er-rahmen { inline-size: min(100%, 480px, max(150px, calc(var(--spiel-hoehe, 640px) - 250px))); } /* Die ausführlichen Kampfregeln und der Hinweis-Kasten unter dem Spiel brauchen im Vollbild keinen Platz */ .partie.vollbild-an > .regeln-mc { display: none; } /* Handy quer (niedrig): die Tastenhilfe weicht (steht in der Anleitung; am Handy gibt es die Finger-Knöpfe), Köpfe und Finger-Knöpfe werden flacher — die Höhe gehört der Bühne */ @media (max-height: 560px) { .vollbild-an .kl-hilfe { display: none; } .vollbild-an .kl-knopf { min-block-size: 42px; } .vollbild-an .partie-spieler .kopf { inline-size: 24px; block-size: 24px; } .vollbild-an .partie-name b { font-size: 10px; line-height: 12px; } .vollbild-an .partie-punkte, .vollbild-an .partie-uhr { font-size: 20px; line-height: 24px; } .vollbild-an .tresor-tuer { padding: 4px; } .vollbild-an .tresor-leiste { margin-block-end: 4px; } .vollbild-an .tresor-fuss { margin-block-start: 4px; min-block-size: 0; font-size: 10px; line-height: 12px; } .vollbild-an .bau-welt { margin-block: 4px; } .partie.vollbild-an .partie-flaeche.spielflaeche { padding: 4px; gap: 4px; } .vollbild-an .kl-fenster, .kl-fenster.vollbild-an { gap: 4px; } .partie.vollbild-an .kl-fenster { padding: 4px; } .vollbild-an .partie-spieler { padding-block: 2px; min-block-size: 0; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; } .vollbild-an .partie-spieler.rechts { grid-template-columns: auto minmax(0, 1fr) 24px; } } /* Ergebnis AUF dem Brett: wer gewonnen hat, Stand, Geld, Revanche — nicht erst darunter */ .partie-flaeche.mit-ergebnis { min-block-size: 340px; } .partie-ergebnis { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 12px; background: rgb(8 9 11 / .62); animation: ergebnis-auf .3s steps(3) both; } .partie-ergebnis .ergebnis-tafel { inline-size: min(100%, 540px); max-block-size: 100%; overflow: auto; margin: 0; box-shadow: 0 10px 0 rgb(0 0 0 / .35); } .ergebnis-stand { display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 8px; font: 400 20px/26px var(--mc-schrift); color: #2b2b2b; } .ergebnis-stand > b { font: 400 32px/36px var(--mc-schrift); color: #2b2b2b; font-variant-numeric: tabular-nums; } .ergebnis-seite { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; } .ergebnis-seite.ich { color: #1f5f14; } .ergebnis-seite .kopf { inline-size: 24px; block-size: 24px; image-rendering: pixelated; flex: none; } .ergebnis-knoepfe { margin-block-start: 12px; } .ergebnis-zurueck { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 30; } @keyframes ergebnis-auf { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .partie-ergebnis { animation: none; } } @media (max-width: 520px) { .partie-ergebnis { padding: 6px; } .partie-ergebnis .ergebnis-titel { font-size: 30px; line-height: 36px; } .ergebnis-stand > b { font-size: 26px; } } /* Kampf-Modi in der Anleitung: die Anzeige aus dem Spiel — Aktionsleiste, darunter Herzen (links) und Hunger (rechts, füllt sich wie in Minecraft von rechts) — denn genau die prüft die Mod vor dem RTP (Faddi 21.09.2026). */ .anl-hud { display: grid; gap: 6px; padding: 8px 10px 10px; background: rgb(0 0 0 / .35); } .anl-hud[hidden] { display: none; } .anl-aktion { margin: 0; min-block-size: 22px; text-align: center; font: 400 18px/22px var(--mc-schrift); color: #ff5555; text-shadow: 2px 2px 0 #3f1515; } .anl-aktion[hidden] { visibility: hidden; display: block; } .anl-aktion.gold { color: #ffaa00; text-shadow: 2px 2px 0 #3f2a00; } /* „Arena schrumpft" — wie die Mod über der Hotbar */ .anl-hud-leiste { display: flex; justify-content: space-between; gap: 12px; } .anl-reihe { display: flex; gap: 1px; } .anl-reihe.hunger { flex-direction: row-reverse; } .anl-reihe .mc-item { inline-size: 18px; block-size: 18px; image-rendering: pixelated; } .anl-slot.bleibt { box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff, 0 0 0 2px #55ff55; } .anl-fair { display: grid; gap: 6px; margin: 0; padding: 4px 6px; list-style: none; } .anl-fair[hidden] { display: none; } .anl-fair li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #1c1c21; box-shadow: inset 2px 2px 0 #3b3b46, inset -2px -2px 0 #0c0c10; font: 400 18px/22px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #000; } .anl-fair li[hidden] { display: none; } .anl-fair .mc-item { inline-size: 28px; block-size: 28px; image-rendering: pixelated; flex: none; } .anl-fair li.anl-rein { animation: anl-rein .35s cubic-bezier(.2, 1.4, .4, 1); } @keyframes anl-rein { from { opacity: 0; translate: -20px 0; } } @media (max-width: 480px) { .anl-reihe .mc-item { inline-size: 12px; block-size: 12px; } .anl-hud-leiste { gap: 4px; } } /* Sonic Echo (Test 21.09.2026): Der Block selbst leuchtet in seiner Farbe — beim Vorspielen und beim eigenen Klick; richtig = grüner Rahmen, daneben = roter (kurz). Vorher stieg nur die Note auf, und jeder Block war dauerhaft grün. */ .noten.neun .notenblock.leuchtet { animation: note-leuchten .5s ease-out; } @keyframes note-leuchten { 0% { filter: brightness(1.9) drop-shadow(0 0 14px var(--note, #fff)); scale: 1.08; } 100% { filter: none; scale: 1; } } .noten.neun .notenblock.richtig { animation: note-richtig .6s ease-out; } @keyframes note-richtig { 0%, 60% { box-shadow: 0 0 0 4px var(--mc-gruen), 0 0 16px var(--mc-gruen); } 100% { box-shadow: none; } } .noten.neun .notenblock.daneben { outline: 0; animation: note-daneben .7s ease-out; } @keyframes note-daneben { 0%, 70% { box-shadow: 0 0 0 4px var(--mc-rot), 0 0 16px var(--mc-rot); translate: 0 0; } 15% { translate: -4px 0; } 30% { translate: 4px 0; } 100% { box-shadow: none; } } /* „Jetzt üben" im Anleitungsfenster (nur bei Spielen mit Übung) */ .anl-ueben { justify-self: start; gap: 8px; text-decoration: none; } .anl-ueben .mc-item { inline-size: 20px; block-size: 20px; image-rendering: pixelated; } /* Baumeister-Übung: dieselbe Bühne wie in der Partie */ .uebung .bau-fenster { display: grid; gap: 10px; } .uebungen > #baumeister { grid-column: 1 / -1; } .uebung#baumeister .bau-buehne { max-block-size: 70svh; margin-inline: auto; } /* ── Lobby: Boxen einer Reihe gleich hoch (Faddi 21.09.2026 mit Bild: „komische verschiedene größen, wenn keine bei wer ist da dann alles leer"). Am PC füllt „Wer ist da?" die Höhe von „Schnell spielen" — die Liste rollt innen —, „Deine letzten Partien" die von „Wer dich sieht". Auf dem Handy (eine Spalte) bleibt alles, wie es war. */ @media (min-width: 961px) { .lobby-raster { align-items: stretch; } .lobby-raster > .spalte-mc { align-content: stretch; } .lobby-raster > .spalte-mc > .mc-inventar { box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; } /* „Wer ist da?" fährt beim Scrollen mit, statt sich zu einer riesigen (oft leeren) Fläche zu strecken — unten schließt es trotzdem bündig mit „Schnell spielen" ab. --arcade-oben misst arcade-live.js (Seitenkopf + Arcade-Leiste). */ .lobby-raster:not(.gleich) > .spalte-mc:last-child { align-content: start; } .spieler-tafel { position: sticky; inset-block-start: calc(var(--arcade-oben, 190px) + 12px); max-block-size: calc(100svh - var(--arcade-oben, 190px) - 110px); min-block-size: 420px; } .spieler-tafel .spieler-liste { flex: 1 1 auto; min-block-size: 220px; max-block-size: none; margin: 0; align-content: start; } .spieler-tafel .spieler-liste:has(> li.leer) { align-content: stretch; } .lobby-raster.gleich .mc-inventar > .rollfeld { flex: 1 1 0; min-block-size: 160px; max-block-size: none; } .lobby-raster > .spalte-mc > .mc-inventar > .fenster-titel { margin-block-end: 0; } /* Bank (Admins): jeder Kasten so hoch wie sein Inhalt — gestreckt standen dort leere Flächen (Faddi 22.09.2026) */ .lobby-raster.bank-raster { align-items: start; } .lobby-raster.bank-raster > .spalte-mc { align-content: start; } } .spieler-liste > li.leer { display: grid; justify-items: center; align-content: center; gap: 10px; min-block-size: 100%; box-sizing: border-box; padding: 24px 16px; background: rgb(0 0 0 / .06); box-shadow: inset 2px 2px 0 rgb(0 0 0 / .12); color: #3a3a3a; font-size: .95rem; } .spieler-liste > li.leer .mc-item { inline-size: 48px; block-size: 48px; image-rendering: pixelated; opacity: .7; } .spieler-liste > li.leer span { max-inline-size: 28ch; } /* ── Klingenduell, 21.09.2026 abends: Ton-Leiste unten rechts, Einstellungen (Zahnrad), Ping ─────────────────── */ .kl-rahmen { position: relative; } .kl-ecke { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; z-index: 3; } .kl-eckknopf { inline-size: 30px; block-size: 30px; padding: 0; display: grid; place-items: center; cursor: pointer; background: rgb(10 8 18 / .72); border: 2px solid rgb(255 255 255 / .35); } .kl-eckknopf:hover, .kl-eckknopf:focus-visible { border-color: #fff; outline: none; background: rgb(10 8 18 / .9); } .kl-eckknopf.aus { opacity: .55; background-image: linear-gradient(135deg, transparent 45%, #ff5a4f 45%, #ff5a4f 55%, transparent 55%); } .kl-symbol { inline-size: 16px; block-size: 16px; fill: #f4f1e6; } .kl-ping { font: 400 10px/1 var(--mc-schrift); color: #cfc6e8; background: rgb(10 8 18 / .65); padding: 7px 8px 5px; } .kl-ping.schlecht { color: #ff9b4a; } .kl-einst { position: absolute; inset: 5% 8%; z-index: 5; overflow: auto; display: grid; gap: 8px; align-content: start; padding: 12px 16px; color: #f4f1e6; background: rgb(14 10 26 / .96); border: 3px solid #000; box-shadow: inset 2px 2px 0 #3b3552, inset -2px -2px 0 #07050d; } .kl-einst[hidden] { display: none; } .kl-einst-titel { margin: 0; font: 400 20px/1.2 var(--mc-schrift); } .kl-einst-tasten { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center; } .kl-einst-name { font-size: .95rem; } .kl-einst-taste { min-inline-size: 92px; padding: 3px 8px 2px; cursor: pointer; font: 400 20px/1 var(--mc-schrift); color: #fff; background: #2b2b33; border: 0; box-shadow: inset 2px 2px 0 #44444f, inset -2px -2px 0 #111116, 0 0 0 2px #000; } .kl-einst-taste:hover, .kl-einst-taste:focus-visible { background: #3a3a46; outline: none; } .kl-einst-taste.wartet { background: #7a5410; animation: kl-warten .8s steps(2, end) infinite; } @keyframes kl-warten { 50% { background: #b07a18; } } .kl-einst-regler { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; } .kl-einst-hinweis, .kl-einst-maus { margin: 0; font-size: .85rem; color: #cfc6e8; } @media (max-width: 520px) { .kl-einst { inset: 2%; padding: 8px 10px; } .kl-einst-taste { min-inline-size: 64px; font-size: 10px; padding: 6px 6px 4px; } .kl-eckknopf { inline-size: 26px; block-size: 26px; } .kl-ecke { right: 6px; bottom: 6px; gap: 4px; } .kl-ping { padding: 5px 6px 4px; } } /* ── Partie melden (js/arcade-melden.js) ─────────────────────────────────────────────────────────────────────── */ .melden-fenster { max-inline-size: 580px; display: grid; gap: 10px; } .melden-gruende { display: grid; gap: 6px; } .melden-grund { display: flex; gap: 10px; align-items: flex-start; padding: 7px 9px; cursor: pointer; background: rgb(0 0 0 / .08); box-shadow: 0 0 0 2px rgb(0 0 0 / .25); } .melden-grund:has(input:checked) { background: rgb(255 90 79 / .16); box-shadow: 0 0 0 2px #c23a30; } .melden-grund small { display: block; font-size: .82rem; opacity: .85; } [data-melden-auf].erledigt { opacity: .5; } /* ── Wiederholung gemeldeter Partien (Moderation, js/arcade-aufnahme.js) ───────────────────────────────────── */ .arcade-meldung { display: grid; gap: 6px; margin-block: 12px; } .aufnahme-zitat { margin: 4px 0; padding: 6px 10px; border-inline-start: 3px solid #8a5a2b; background: rgb(0 0 0 / .18); } .aufnahme-sichten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 8px; } @media (max-width: 900px) { .aufnahme-sichten { grid-template-columns: minmax(0, 1fr); } } .aufnahme-sicht { min-inline-size: 0; } .aufnahme-sicht-titel { margin: 0 0 4px; font: 400 20px/1.2 var(--mc-schrift); } .aufnahme-live { margin: 4px 0 0; font-variant-numeric: tabular-nums; } .aufnahme-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 8px; } .aufnahme-regler { flex: 1 1 220px; min-inline-size: 160px; } .aufnahme-uhr { font: 400 20px/1 var(--mc-schrift); font-variant-numeric: tabular-nums; } .aufnahme-tempo { inline-size: auto; } .aufnahme-spur, .aufnahme-ping { display: block; inline-size: 100%; block-size: auto; image-rendering: pixelated; margin-block: 8px; cursor: pointer; border: 2px solid #000; } .aufnahme-deck { display: block; inline-size: min(100%, 460px); block-size: auto; margin: 8px auto; border: 2px solid #000; } .aufnahme-tafel { overflow-x: auto; } .aufnahme-werte td, .aufnahme-werte th { font-variant-numeric: tabular-nums; } .aufnahme-spieler-0 { color: #4fc3ff; } .aufnahme-spieler-1 { color: #ff5a4f; } .aufnahme-partie .partie-flaeche { pointer-events: none; } .aufnahme-ereignisse { max-block-size: 9em; overflow: auto; margin: 6px 0 0; padding-inline-start: 1.2em; } /* Glibberball in der Anleitung (js/anleitung.js): die Bühne ganz breit, unten die Tasten, die der eigene Glibber drückt */ .anl-bild > .gb-anl { inline-size: 100%; } .gb-anl-tasten { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 3; } .gb-anl-tasten kbd { min-inline-size: 28px; padding: 4px 6px 2px; text-align: center; font: 400 20px/1 var(--mc-schrift); color: #f4f1e6; background: #2b2b33; box-shadow: 0 0 0 2px #000, inset -2px -2px 0 #15151a, inset 2px 2px 0 #4a4a55; } .gb-anl-tasten kbd.an { color: #0a0812; background: #4fc3ff; transform: translateY(2px); box-shadow: 0 0 0 2px #000, inset -2px -2px 0 #1b5d85, inset 2px 2px 0 #a8e3ff; } /* ── Glibberball (21.09.2026, js/glibber-welt.js) — nutzt die kl-*-Bausteine des Klingenduells (Bühne, Leiste, Zahnrad) ── */ .uebungen > #glibberball { grid-column: 1 / -1; } .gb-sprungknopf { min-inline-size: 120px; } .gb-einst-schalter input[type="checkbox"] { inline-size: 20px; block-size: 20px; accent-color: #4fc3ff; } .gb-einst-schalter { grid-template-columns: minmax(0, 1fr) auto; } /* ── Events (21.09.2026, lib/arcadeevent.js): Banner oben und Marke auf der Spielkarte ── */ .event-streifen { margin-block: 8px; border-color: #e0b52a; background: rgb(80 55 0 / .85); } .event-streifen[hidden] { display: none; } .arcade-post .event-streifen { margin-block: 0 8px; } .spiel-karte.event-karte .karte-innen { outline: 3px solid #e0b52a; outline-offset: -3px; } .event-marke { display: inline-block; margin-block-start: 4px; padding: 1px 6px; background: #e0b52a; color: #1b120a; font-size: .8em; font-weight: 700; box-shadow: 0 0 0 2px #000; } /* Klingenduell am Telefon: die Tasten teilen sich die Breite, statt rechts hinauszuragen */ @media (max-width: 480px) { .kl-finger { gap: 8px; } .kl-finger-seite { flex: 1 1 0; min-inline-size: 0; } .kl-finger-seite.rechts { flex-grow: 1.5; } .kl-finger .kl-knopf { flex: 1 1 0; min-inline-size: 0; font-size: 10px; hyphens: auto; overflow-wrap: anywhere; } } /* ── Party und 2vs2 (22.09.2026, lib/arcade.js): Party-Kasten in der Lobby, Team-Karte, Partie mit vier Plätzen ── */ .party-kasten { margin-block-end: 12px; } .party-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .party-liste[hidden] { display: none; } .party-mitglied { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 4px 8px; background: #4a4a4a; box-shadow: inset 2px 2px 0 #2a2a2a, inset -2px -2px 0 #7a7a7a; color: #fff; } .party-mitglied.ich { box-shadow: inset 2px 2px 0 #2a2a2a, inset -2px -2px 0 #7a7a7a, 0 0 0 2px var(--mc-gruen); } .party-mitglied .kopf { inline-size: 24px; block-size: 24px; image-rendering: pixelated; } .party-mitglied b { font: 400 20px/22px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .party-mitglied small { font-size: .78rem; color: #e8e8e8; text-shadow: 1px 1px 0 #222; } .party-einladungen { display: grid; gap: 6px; } .party-einladungen:empty { display: none; } .party-einladungen .forderung { margin-block-start: 8px; } /* Karte „nur als Party" und Karten, die in einer Party gesperrt sind */ .team-marke { display: inline-block; margin-block-start: 4px; padding: 1px 6px; background: #4fc3ff; color: #06263a; font-size: .8em; font-weight: 700; box-shadow: 0 0 0 2px #000; }.spiel-karte.party-gesperrt { opacity: .45; } .spiel-karte.party-gesperrt .karte-innen { filter: grayscale(.7); } /* Partie zu viert: je Seite ein Kasten mit beiden Spielern und EINER Punktzahl */ .partie-team { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .partie-team.rechts { grid-template-columns: auto minmax(0, 1fr); } .partie-team.rechts .partie-team-leute { order: 2; } .partie-team.rechts .partie-punkte { order: 1; } .partie-team-leute { display: grid; gap: 4px; min-inline-size: 0; } /* Beide Spieler einer Seite stehen gleich herum (Kopf, Name) — die Punktzahl der Seite liegt daneben */ .partie-team .partie-spieler, .partie-team .partie-spieler.rechts { grid-template-columns: 28px minmax(0, 1fr); padding: 4px 8px; text-align: start; } .partie-team .partie-spieler .kopf { inline-size: 28px; block-size: 28px; } .partie-team .partie-spieler.rechts .kopf, .partie-team .partie-spieler.rechts > .mc-item { order: 0; } .partie-team .partie-spieler.rechts .partie-name { order: 1; } .partie-team.ich .partie-punkte { color: var(--mc-gruen); text-shadow: 3px 3px 0 #10330a; } /* Melden im 2vs2: erst wählen, wen */ .melden-wen { display: grid; gap: 4px; margin-block-end: 8px; } /* ── Party und Freunde in der Lobby (22.09.2026) ──────────────────────────────────────────────────────────────── Der Party-Kasten steht nur da, wenn er etwas zu sagen hat (2vs2 gewählt, in einer Party oder eine Einladung offen — js/arcade-live.js partyRegeln). Wer in einer Party etwas anderes wählt, bekommt den Streifen darunter: wählen darf man alles, suchen erst ohne Party (Faddi 22.09.2026). */ .party-kasten[hidden] { display: none; } .party-sperre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 8px; } .party-sperre > span { flex: 1 1 200px; min-inline-size: 0; } .spieler-zeile.ist-freund .wer b::before { content: "★ "; color: var(--mc-gelb); } .spieler-zeile .stern-knopf, .freund .stern-knopf { white-space: nowrap; } /* Der Hinweis „gerade nur im Spiel" steht im Freundes-Kasten auf Dunkel — .leise wäre hier fast unsichtbar (.arcade-bereich .mc-inventar .leise ist dunkelgrau und sticht die Regel in smp.css). */ .arcade-bereich .mc-inventar .freund .tun small, .arcade-bereich .mc-inventar .freund .tun small.leise { font-size: .78rem; line-height: 1.3; color: #e8e8e8; text-shadow: 1px 1px 0 #222; } /* Die Kasse unter dem Bieter darf schrumpfen, statt aus seiner Spalte zu ragen (23.09.2026) */ .bid-kasse { min-inline-size: 0; max-inline-size: 100%; } } /* SPIELGEFÜHL (lib/spielgefuehl.js, 24.09.2026): „Lief die Partie bei dir flüssig?" — ein Kasten im Mitteilungsbereich, drei Knöpfe darunter über die ganze Breite. .toast button setzt alles zurück (smp.css), deshalb eigene, genauere Regeln. */ .toast.fluss-frage { grid-template-columns: 40px 1fr auto; row-gap: 10px; } .toast.fluss-frage .fluss-warum { display: block; margin-block-start: 4px; font: 400 .74rem/1.35 var(--schrift-text); color: #aaa; text-shadow: none; } .toast.fluss-frage .fluss-knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; } .toast.fluss-frage .fluss-knoepfe button { flex: 1 1 auto; min-inline-size: 0; box-sizing: border-box; padding: 6px 10px; text-align: center; color: #fff; font: 400 16px/20px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); background: #6d6d6d; border: 2px solid #000; box-shadow: inset 2px 2px 0 #9a9a9a, inset -2px -2px 0 #3f3f3f; } .toast.fluss-frage .fluss-knoepfe button:hover, .toast.fluss-frage .fluss-knoepfe button:focus-visible { background: #7b8fc2; outline: none; } .toast.fluss-frage .fluss-knoepfe button[data-antwort="nein"]:hover { background: #a85252; } /* „Deine Arcade-Meldungen" (24.09.2026): eigener Kasten in voller Breite unter der Reihe „Deine letzten Partien" */ .meine-arcade-meldungen { margin-block-start: 20px; display: grid; gap: 10px; min-inline-size: 0; } .meine-arcade-meldungen .fenster-titel { margin-block-end: 0; } .meine-arcade-meldungen td small { display: inline-block; margin-block-start: 2px; } /* Klingenduell am Telefon (24.09.2026, klingetest „Bühne 282 px breit", Knöpfe „Parad|e", „Sturms|toß"): weniger Rand um die Bühne, die Pfeile schmal, die drei Aktionen breit genug für ihr Wort in einer Zeile — nie mitten im Wort trennen */ @media (max-width: 520px) { .partie-flaeche:has(.kl-fenster) { padding-inline: 4px; } .partie-flaeche .kl-fenster { padding-inline: 6px; } } @media (max-width: 480px) { .kl-finger-seite.rechts { flex-grow: 2; } .kl-finger .kl-knopf { font-size: 10px; padding: 4px 2px; overflow-wrap: normal; hyphens: manual; } } /* 29.09.2026 Arcade-Bank (Faddi: „soll nicht seitlich scrollbar sein"): Ein-/Auszahlungen und Warnungen als Liste statt Tabelle — je Eintrag oben Name und Betrag, darunter Art, Stand und Zeit; die Daten der Warnungen brechen um (seiten/arcade.js bank) */ .bank-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); } .bank-liste > li { display: grid; gap: 2px; min-inline-size: 0; padding: 6px 8px; border-block-end: 1px solid rgb(0 0 0 / .45); } .bank-liste > li:nth-child(odd) { background: rgb(0 0 0 / .06); } .bank-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-inline-size: 0; } .bank-kopf > b:first-child { min-inline-size: 0; overflow-wrap: anywhere; } .bank-betrag { flex: none; } .bank-liste small { min-inline-size: 0; overflow-wrap: anywhere; } .bank-daten { display: block; min-inline-size: 0; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .rollfeld:has(> .bank-liste) { overflow-x: hidden; } /* deckend dunkel wie vorher die Tabelle — heller Text nie auf dem hellen Inventar-Grau (UI-Fehler 12) */ .bank-liste { background: #262626; color: #e8e8e8; } .bank-liste > li:nth-child(odd) { background: #2e2e2e; } .bank-liste > li { border-block-end-color: #111; } .bank-liste small { color: #b8b8b8; } .bank-betrag { color: var(--mc-gold); } .bank-daten { color: #d8d8d8; }