/* ═══════════════════════════════════════════════════════════════════════════ CASE BATTLES + CASES — Oberflaeche (v3.53) ─────────────────────────────────────────────────────────────────────────── Drei Ansichten in einer Seite: Liste, Erstellen, Battle. Alles darin zeichnet public/js/battles.js; hier stehen nur Formen und Bewegung. Die Buehne eines Battles ist eine Reihe von Walzen — je Platz eine, die waagrecht laeuft und auf dem gezogenen Gegenstand haelt. Bewegung nur auf transform, die Walze ist ein einziges Element mit vielen Kacheln darin. ═══════════════════════════════════════════════════════════════════════════ */ /* Seltenheitsfarben — dieselben wie in cases.js / BATTLES_SPEC.md */ .bt { --common: #9aa3b2; --uncommon: #4cc9f0; --rare: #b18cff; --epic: #ff8ac4; --legendary: #f5c46a } .bt [data-selten="common"] { --sf: var(--common); --sf-rgb: 154,163,178 } .bt [data-selten="uncommon"] { --sf: var(--uncommon); --sf-rgb: 76,201,240 } .bt [data-selten="rare"] { --sf: var(--rare); --sf-rgb: 177,140,255 } .bt [data-selten="epic"] { --sf: var(--epic); --sf-rgb: 255,138,196 } .bt [data-selten="legendary"] { --sf: var(--legendary); --sf-rgb: 245,196,106 } .bt-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap } .bt-kopf .page-title { margin-bottom: 2px } .bt-kopf p { margin: 0; font: var(--t-text); color: var(--muted) } .bt-kopf__aktionen { display: flex; gap: var(--s2); flex-wrap: wrap } /* ═══ LISTE ═════════════════════════════════════════════════════════════════ */ .bt-abschnitt { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s2) } .bt-abschnitt h3 { margin: 0; font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; color: var(--muted) } .bt-abschnitt .zahl { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--accent-ink); background: var(--accent-dim); padding: 3px 8px; border-radius: 999px } .bt-liste { display: flex; flex-direction: column; gap: var(--s2) } .bt-zeile { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); transition: border-color .2s var(--ease-out), background .2s var(--ease-out), transform .2s var(--ease-out); animation: bt-rein .4s var(--ease-out) both; } @keyframes bt-rein { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } .bt-zeile:hover { border-color: var(--line-2); background: var(--ink-750) } .bt-zeile--laeuft { border-color: rgba(124,92,255,.35); box-shadow: 0 0 0 1px rgba(124,92,255,.12) inset } .bt-zeile--meins { border-left: 3px solid var(--accent) } .bt-modus { display: flex; flex-direction: column; gap: 6px; min-width: 0 } .bt-modus__name { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--gold) } .bt-modus__name[data-modus="jackpot"] { color: var(--gold) } .bt-modus__name[data-modus="regular"] { color: var(--accent-ink) } .bt-modus__name[data-modus="crazy"] { color: var(--red-ink) } .bt-sitze { display: flex; align-items: center; gap: 3px; flex-wrap: wrap } .bt-sitze__vs { margin: 0 4px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-kopfbild { width: 26px; height: 26px; border-radius: 50%; background: var(--ink-650); box-shadow: 0 0 0 1px var(--line-2); object-fit: cover; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; } .bt-kopfbild img { width: 100%; height: 100%; object-fit: cover; display: block } .bt-kopfbild--leer { background: repeating-linear-gradient(45deg, var(--ink-700) 0 3px, var(--ink-650) 3px 6px) } .bt-kopfbild--bot img { transform: scale(1.15) } .bt-kisten { display: flex; gap: var(--s2); flex-wrap: wrap; min-width: 0 } .bt-kiste-mini { position: relative; width: 54px; height: 54px; border-radius: var(--r-sm); background: var(--ink-850); border: 1px solid var(--line); display: grid; place-items: center } .bt-kiste-mini img { width: 46px; height: 46px; display: block } .bt-kiste-mini b { position: absolute; right: 2px; bottom: 2px; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text-2); background: rgba(0,0,0,.6); padding: 2px 4px; border-radius: 3px } .bt-kiste-mini--mehr { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-kosten { text-align: right; min-width: 120px } .bt-kosten b { display: block; font: var(--t-zahl); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap } .bt-kosten small { display: block; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-kosten .bt-runden { color: var(--text-2); text-transform: none } .bt-zeile .btn { min-width: 110px } .bt-leer { padding: var(--s6); text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); font: var(--t-text) } @media (max-width: 880px) { .bt-zeile { grid-template-columns: 1fr auto; gap: var(--s3) } .bt-kisten { grid-column: 1 / -1 } .bt-kosten { text-align: left; min-width: 0 } } /* ═══ ERSTELLEN ═════════════════════════════════════════════════════════════ */ .bt-erstellen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s4); align-items: start } @media (max-width: 1000px) { .bt-erstellen { grid-template-columns: 1fr } } .bt-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); margin-bottom: var(--s4) } .bt-opt { position: relative; display: flex; flex-direction: column; gap: 3px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-850); color: var(--text-2); text-align: left; font: inherit; cursor: pointer; transition: border-color .18s, background .18s, transform .16s var(--ease-out); } .bt-opt:hover { border-color: var(--line-2); transform: translateY(-1px) } .bt-opt b { font: var(--t-karte); color: var(--text) } .bt-opt small { font: var(--t-klein); color: var(--muted) } .bt-opt.ist-an { border-color: rgba(124,92,255,.6); background: var(--accent-dim); box-shadow: 0 0 0 2px rgba(124,92,255,.14) } .bt-opt.ist-an b { color: var(--accent-ink) } .bt-opt--format { align-items: center; text-align: center; padding: var(--s3) } .bt-opt:disabled { opacity: .45; cursor: not-allowed; transform: none } /* Case-Auswahl: Raster mit Zaehler je Case */ .bt-kisten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: var(--s2) } .bt-kiste { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s3) var(--s2) var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-850); transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s; } .bt-kiste:hover { border-color: var(--line-2); transform: translateY(-2px) } .bt-kiste.ist-drin { border-color: rgba(var(--kt-rgb, 124,92,255), .55); box-shadow: 0 8px 26px -14px rgba(var(--kt-rgb, 124,92,255), .6) } .bt-kiste__bild { width: 96px; height: 96px; display: block; cursor: pointer; transition: transform .3s var(--ease-spring) } .bt-kiste:hover .bt-kiste__bild { transform: translateY(-3px) scale(1.04) } .bt-kiste__name { font: var(--t-karte); color: var(--text); text-align: center } .bt-kiste__preis { font: var(--t-zahl-klein); color: var(--gold); font-variant-numeric: tabular-nums } .bt-kiste__info { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--muted); font: var(--t-etikett); letter-spacing: var(--ls-etikett); display: grid; place-items: center; cursor: pointer } .bt-kiste__info:hover { color: var(--text); border-color: var(--text-2) } .bt-zaehler { display: flex; align-items: center; gap: 4px; margin-top: 4px } .bt-zaehler button { width: 30px; height: 28px; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: rgba(255,255,255,.05); color: var(--text-2); font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, color .15s, transform .12s; } .bt-zaehler button:hover { background: var(--accent-dim); color: var(--accent-ink) } .bt-zaehler button:active { transform: scale(.92) } .bt-zaehler button:disabled { opacity: .35; cursor: not-allowed } .bt-zaehler b { min-width: 26px; text-align: center; font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--text) } .bt-zaehler b.ist-null { color: var(--muted) } /* Zusammenfassung rechts */ .bt-summe { position: sticky; top: 0 } .bt-summe .card-title { margin-bottom: var(--s2) } .bt-summe dl { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s3); margin: 0 0 var(--s3); font: var(--t-text) } .bt-summe dt { color: var(--muted) } .bt-summe dd { margin: 0; text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text) } .bt-summe dd.geld { color: var(--gold); font: var(--t-zahl-klein); font-variant-numeric: tabular-nums } .bt-summe__gross { display: flex; flex-direction: column; gap: 2px; padding: var(--s3); border-radius: var(--r-md); background: rgba(245,196,106,.07); border: 1px solid rgba(245,196,106,.2); margin-bottom: var(--s3) } .bt-summe__gross small { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-summe__gross b { font: var(--t-zahl-gross); color: var(--gold); font-variant-numeric: tabular-nums } .bt-summe__reihe { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3) } .bt-schalter { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255,255,255,.03); font: var(--t-text); color: var(--text-2); cursor: pointer; user-select: none; flex: 1 1 120px } .bt-schalter input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0 } .bt-summe__sitze { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; margin-bottom: var(--s3) } .bt-summe__sitz { display: grid; place-items: center; height: 30px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--ink-850); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--muted) } .bt-summe__sitz--du { color: var(--accent-ink); border-color: rgba(124,92,255,.4); background: var(--accent-dim) } .bt-summe__team { grid-column: 1 / -1; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); margin-top: 2px } /* Inhalt einer Case (Dialog) */ .bt-inhalt { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); margin-top: var(--s3) } .bt-gegenstand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--s3) var(--s2); border: 1px solid rgba(var(--sf-rgb), .28); border-radius: var(--r-md); background: radial-gradient(80% 60% at 50% 30%, rgba(var(--sf-rgb), .16), transparent 70%), var(--ink-850); } .bt-gegenstand img { width: 64px; height: 64px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) } .bt-gegenstand__name { font: var(--t-zeile); color: var(--text); text-align: center } .bt-gegenstand__wert { font: var(--t-zahl-klein); color: var(--gold); font-variant-numeric: tabular-nums } .bt-gegenstand__chance { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--muted) } .bt-gegenstand__selten { position: absolute; top: 5px; left: 6px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--sf) } .bt-inhalt-kopf { display: flex; align-items: center; gap: var(--s3) } .bt-inhalt-kopf img { width: 72px; height: 72px } .bt-inhalt-kopf b { font: var(--t-karte) } .bt-inhalt-kopf small { display: block; color: var(--muted); font: var(--t-klein); margin-top: 2px } /* ═══ BATTLE ════════════════════════════════════════════════════════════════ */ .bt-battle { display: flex; flex-direction: column; gap: var(--s3) } .bt-oben { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3) } .bt-oben__links, .bt-oben__rechts { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap } .bt-oben__rechts { justify-content: flex-end } .bt-oben__mitte { text-align: center } .bt-oben__mitte b { display: block; font: var(--t-karte) } .bt-oben__mitte small { display: block; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-pille { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font: var(--t-etikett); letter-spacing: var(--ls-etikett); color: var(--text-2); white-space: nowrap } .bt-pille b { font-family: var(--font-num); color: var(--gold); font-variant-numeric: tabular-nums } .bt-pille--hash { font: var(--t-klein); font-family: var(--font-mono); color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; cursor: pointer } @media (max-width: 720px) { .bt-oben { grid-template-columns: 1fr } .bt-oben__rechts { justify-content: flex-start } } /* Rundenleiste: alle Cases in Reihenfolge, die aktuelle leuchtet */ .bt-verlauf { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: var(--s2) 0 } .bt-verlauf__kiste { position: relative; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--ink-850); display: grid; place-items: center; opacity: .45; transition: opacity .3s, border-color .3s, transform .3s var(--ease-spring) } .bt-verlauf__kiste img { width: 32px; height: 32px } .bt-verlauf__kiste.ist-fertig { opacity: .8 } .bt-verlauf__kiste.ist-jetzt { opacity: 1; border-color: var(--gold); transform: scale(1.15); box-shadow: 0 0 18px rgba(245,196,106,.35) } /* Arena: eine Zeile je Team-Reihe, Spalten je Platz */ .bt-arena { position: relative; display: grid; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-900); overflow: hidden; /* Genug Hoehe, dass die Ergebniskarte hineinpasst — sonst schneidet overflow:hidden ihr die untere Zeile ab. */ min-height: 360px; } .bt-arena[data-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .bt-arena[data-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) } .bt-arena[data-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) } .bt-arena[data-spalten="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)) } @media (max-width: 900px) { .bt-arena[data-spalten="4"], .bt-arena[data-spalten="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .bt-arena[data-spalten="3"] { grid-template-columns: 1fr } } .bt-platz { position: relative; display: flex; flex-direction: column; min-height: 190px; background: var(--ink-800); isolation: isolate; } .bt-platz--team-0 { --tf: 124,92,255 } .bt-platz--team-1 { --tf: 245,150,60 } .bt-platz--team-2 { --tf: 52,211,153 } .bt-platz--team-3 { --tf: 236,127,176 } .bt-platz::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: rgba(var(--tf), .7) } .bt-platz__kopf { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; min-width: 0 } .bt-platz__kopf .bt-kopfbild { width: 30px; height: 30px } .bt-platz__name { font: var(--t-zeile); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 } .bt-platz__name small { display: block; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-platz__summe { font: var(--t-zahl-klein); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform .25s var(--ease-spring) } .bt-platz__summe.ist-neu { transform: scale(1.18) } .bt-platz--leer .bt-platz__name { color: var(--muted) } .bt-platz__frei { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); flex: 1; padding: var(--s3); color: var(--muted); font: var(--t-klein); text-align: center } .bt-platz__frei .btn { min-width: 130px } .bt-platz--gewinner { background: linear-gradient(180deg, rgba(245,196,106,.14), var(--ink-800) 60%) } .bt-platz--gewinner::before { background: var(--gold); box-shadow: 0 0 16px rgba(245,196,106,.6) } .bt-platz--verlierer { opacity: .55 } /* Die Walze */ .bt-walze { position: relative; flex: 1; min-height: 118px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } .bt-walze::after { content: ''; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; background: linear-gradient(180deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); transform: translateX(-50%); opacity: .9; pointer-events: none; z-index: 3; } .bt-band { position: absolute; top: 50%; left: 50%; display: flex; gap: var(--bt-luecke, 8px); transform: translate(0, -50%); contain: layout paint; } .bt-band--laeuft { transition: transform var(--bt-dauer, 3.6s) cubic-bezier(.12, .7, .1, 1) } .bt-karte { width: var(--bt-kachel, 96px); height: 104px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-md); border: 1px solid rgba(var(--sf-rgb), .22); background: radial-gradient(70% 55% at 50% 35%, rgba(var(--sf-rgb), .14), transparent 72%), var(--ink-850); } /* Kein Schattenfilter auf den Kacheln der Walze: 4–6 Walzen × 46 Kacheln in Bewegung, jede mit Filter, liessen den Browser stottern. Nur der Treffer bekommt seinen Schein (unten). */ .bt-karte img { width: 62px; height: 62px; display: block } .bt-karte small { font: var(--t-zahl-klein); color: var(--sf); font-variant-numeric: tabular-nums } /* Der Treffer: leuchtet auf und waechst, sobald die Walze steht. */ .bt-karte--treffer { animation: bt-treffer .55s var(--ease-spring) both; border-color: rgba(var(--sf-rgb), .8); box-shadow: 0 0 0 1px rgba(var(--sf-rgb), .35), 0 0 28px rgba(var(--sf-rgb), .45) } @keyframes bt-treffer { 0% { transform: scale(1) } 50% { transform: scale(1.1) } 100% { transform: scale(1.04) } } /* v3.65: Der Legendaer-Schein pulst nicht mehr endlos (box-shadow = jedes Bild neu malen, und die Karte bleibt bis zur naechsten Runde stehen). Ein ::before-Schein mit opacity geht nicht, weil die Karte fuer den Lichtstreifen overflow: hidden braucht und ihn abschneiden wuerde. Also: sieben Halbschwuenge (~10 s), danach steht der helle Endzustand still. */ .bt-karte--treffer[data-selten="legendary"] { animation: bt-treffer .55s var(--ease-spring) both, bt-legendaer 1.4s var(--ease-in-out) 7 alternate both } @keyframes bt-legendaer { from { box-shadow: 0 0 0 1px rgba(245,196,106,.4), 0 0 22px rgba(245,196,106,.4) } to { box-shadow: 0 0 0 2px rgba(245,196,106,.9), 0 0 48px rgba(245,196,106,.8) } } /* Ergebnis der Runde je Platz: Name + Wert unter der Walze */ .bt-platz__zug { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; padding: 0 10px 8px; font: var(--t-klein); color: var(--text-2) } .bt-platz__zug b { color: var(--sf) } .bt-platz__zug .wert { font: var(--t-zahl-klein); color: var(--gold); font-variant-numeric: tabular-nums } /* Vor dem Start: Countdown in der Mitte */ .bt-warten { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(15,18,22,.66); backdrop-filter: blur(3px); pointer-events: none; } .bt-warten > div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center } .bt-warten b { font: var(--t-zahl-gross); color: var(--text); font-variant-numeric: tabular-nums } .bt-warten small { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } /* Ergebnis-Einblendung */ .bt-ergebnis { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; overflow: auto; background: rgba(15,18,22,.78); backdrop-filter: blur(6px); animation: fade-in .4s var(--ease-out) both; } .bt-ergebnis__karte { display: flex; flex-direction: column; align-items: center; gap: var(--s2); max-width: min(92%, 560px); padding: var(--s5) var(--s6); border-radius: var(--r-xl); border: 1px solid rgba(245,196,106,.4); background: var(--ink-850); box-shadow: 0 30px 80px -20px rgba(245,196,106,.45), 0 1px 0 rgba(255,255,255,.1) inset; animation: burst-karte .6s var(--ease-spring) both; text-align: center; } .bt-ergebnis__titel { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-ergebnis__wer { font: var(--t-karte); color: var(--text) } .bt-ergebnis__betrag { font: var(--t-zahl-gross); color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(245,196,106,.4) } .bt-ergebnis__sub { font: var(--t-klein); color: var(--text-2) } .bt-ergebnis__sub b { color: var(--green-ink) } .bt-ergebnis__koepfe { display: flex; gap: 6px; justify-content: center; margin: 4px 0 } .bt-ergebnis__koepfe .bt-kopfbild { width: 40px; height: 40px } .bt-ergebnis__aktionen { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; margin-top: var(--s2) } /* Jackpot-Balken: Anteile nebeneinander, ein Zeiger faehrt auf den Zug. */ .bt-jackpot { width: min(92%, 640px); display: flex; flex-direction: column; gap: 8px; align-items: center } .bt-jackpot__balken { position: relative; width: 100%; height: 54px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-850) } .bt-jackpot__band { position: absolute; inset: 0; display: flex; transform: translateX(0) } .bt-jackpot__band--laeuft { transition: transform 3.2s cubic-bezier(.1, .75, .12, 1) } .bt-jackpot__teil { display: grid; place-items: center; height: 100%; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); flex-shrink: 0 } .bt-jackpot__zeiger { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 3px; background: #fff; box-shadow: 0 0 10px #fff; transform: translateX(-50%); z-index: 2 } .bt-jackpot__legende { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; font: var(--t-klein); color: var(--text-2) } .bt-jackpot__legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px } /* Unten: Spielerkarten mit Anteil und Summe */ .bt-spieler { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2) } .bt-spieler__karte { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-800); transition: border-color .3s, background .3s } .bt-spieler__karte--ich { border-color: rgba(124,92,255,.45) } .bt-spieler__karte--gewinner { border-color: rgba(52,211,153,.5); background: linear-gradient(180deg, rgba(52,211,153,.1), var(--ink-800)) } .bt-spieler__karte--verlierer { opacity: .6 } .bt-spieler__kopf { display: flex; align-items: center; gap: 8px; min-width: 0 } .bt-spieler__kopf span { font: var(--t-zeile); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bt-spieler__zeile { display: flex; justify-content: space-between; align-items: center; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums } .bt-spieler__zeile .anteil { color: var(--accent-ink) } .bt-spieler__zeile .summe { color: var(--gold) } .bt-spieler__zeile .ergebnis { padding: 3px 8px; border-radius: 999px } .bt-spieler__zeile .ergebnis--plus { background: var(--green-dim); color: var(--green-ink) } .bt-spieler__zeile .ergebnis--minus { background: var(--red-dim); color: var(--red-ink) } .bt-aktionen { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; padding: var(--s2) 0 } .bt-hinweis { text-align: center; font: var(--t-klein); color: var(--muted); margin: 0 } /* Reduzierte Bewegung: Walzen springen ans Ziel. */ @media (prefers-reduced-motion: reduce) { .bt-band--laeuft, .bt-jackpot__band--laeuft { transition: none } .bt-karte--treffer, .bt-zeile, .bt-ergebnis, .bt-ergebnis__karte { animation: none } } /* ═══════════════════════════════════════════════════════════════════════════ v3.47 — Aufbau wie beim Vorbild: Kopf mit Zeichen, Banner, Filterzeile, Erstellen mit Dialog und Seitenleiste, Sitzreihen je Team, Zug-Karten, Cases-Seite mit Regalen und Einzeloeffnung. ═══════════════════════════════════════════════════════════════════════════ */ .bt-kopf__titel { display: flex; align-items: center; gap: var(--s3) } .bt-kopf__titel h2 { margin: 0; font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase } .bt-kopf__zeichen { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--accent-dim); color: var(--accent-ink); border: 1px solid rgba(124,92,255,.3) } .bt-kopf__zeichen img { width: 40px; height: 40px } .bt-kopf--schmal { align-items: center } .bt-kopf--schmal > div:first-child { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap } .bt-kopf__h { margin: 0; font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase } .bt-zurueck { border: 0; background: none; color: var(--muted); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; padding: 6px 0 } .bt-zurueck:hover, .bt-zurueck.ist-an { color: var(--text) } .bt-zurueck.ist-an { color: var(--red-ink) } .bt-etikett { display: flex; align-items: center; gap: 8px; margin: var(--s4) 0 var(--s3); font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) } .bt-etikett .ico { color: var(--muted) } /* Banner „Battles with bots“ */ .bt-banner { position: relative; display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); margin-bottom: var(--s4); border-radius: var(--r-lg); background: linear-gradient(90deg, #5b3fd6, #6f4fe8 60%, #4a34b8); color: #fff; overflow: hidden } .bt-banner > div { flex: 1; display: flex; flex-direction: column; gap: 4px; z-index: 1 } .bt-banner b { font: var(--t-kachel); letter-spacing: var(--ls-titel); text-transform: uppercase } .bt-banner span { font: var(--t-text); opacity: .9 } .bt-banner__bild { width: 96px; height: 96px; margin: -20px 0; filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)) } .bt-banner .btn { z-index: 1 } .bt-banner__zu { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.2); color: #fff; cursor: pointer; z-index: 1 } @media (max-width: 720px) { .bt-banner__bild { display: none } } /* Filterzeile */ .bt-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2) } .bt-filter .bt-abschnitt { margin: 0 } .bt-filter__rechts { display: flex; gap: var(--s3); flex-wrap: wrap } .bt-filter__rechts label { display: flex; align-items: center; gap: 6px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .input--klein { min-height: 32px; padding: 5px 10px; font-size: .78rem; width: auto } .bt-ueber { margin-top: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); background: var(--ink-850) } .bt-ueber summary { cursor: pointer; font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; color: var(--text-2) } .bt-ueber p, .bt-ueber__text p { margin: 10px 0 0; font: var(--t-text); color: var(--text-2) } .bt-ueber p b, .bt-ueber__text p b { color: var(--text) } /* Listenzeile: zusaetzliche Spalten */ .bt-zeile { grid-template-columns: 170px minmax(0, 1fr) auto auto auto } .bt-zeile--vorbei { opacity: .78 } .bt-sitze__team { display: inline-flex; gap: 2px } .bt-runden-pille { display: flex; gap: 4px } .bt-kosten__leih { color: var(--text-2) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .7rem !important } .bt-kosten__leih b { display: inline; font: inherit; color: var(--gold) } .bt-kosten__geliehen { color: var(--accent-ink) !important } .bt-zeile__knopf { display: flex; flex-direction: column; align-items: center; gap: 4px } .bt-zeile__knopf small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } @media (max-width: 880px) { .bt-zeile { grid-template-columns: 1fr auto } .bt-runden-pille { display: none } } /* Erstellen: Modus-Karten mit Bild, Seitenleiste */ .bt-wahl--modi { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) } .bt-opt { flex-direction: row; align-items: center; gap: var(--s3) } .bt-opt__bild { width: 52px; height: 52px; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) } .bt-opt > span { display: flex; flex-direction: column; gap: 2px } .bt-gewaehlt { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: var(--s2) } .bt-kiste--neu { border: 1px dashed var(--line-2); background: transparent; cursor: pointer; justify-content: center; min-height: 190px; gap: 8px; font: inherit; color: var(--muted) } .bt-kiste--neu:hover { border-color: var(--accent-ink); color: var(--text) } .bt-kiste--neu__plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 1.4rem/1 var(--font-label) } .bt-seite { display: flex; flex-direction: column; gap: var(--s3); position: sticky; top: 0 } .bt-seite .card-title { margin-bottom: var(--s2) } .bt-format { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2) } .bt-format__zeichen { color: var(--muted) } .bt-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px } .bt-slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); border-left: 3px solid var(--tf, var(--accent)); background: var(--ink-850) } .bt-slot small { display: block; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-slot b { font: var(--t-zeile); color: var(--text) } .bt-slot--du b { color: var(--accent-ink) } .bt-info { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--line-2); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--muted); cursor: help; vertical-align: 1px } .bt-schalter + .bt-schalter { margin-top: 6px } .bt-schalter input[type=checkbox] { appearance: none; width: 34px; height: 18px; border-radius: 999px; background: var(--ink-650); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0 } .bt-schalter input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease-out) } .bt-schalter input[type=checkbox]:checked { background: var(--accent) } .bt-schalter input[type=checkbox]:checked::after { transform: translateX(16px) } .bt-leih { display: flex; justify-content: space-between; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); margin-bottom: 8px } .bt-leih b { color: var(--text); font-family: var(--font-num) } .bt-slider { width: 100%; accent-color: var(--accent); margin: 0 } .bt-leih__stufen { display: flex; justify-content: space-between; margin-top: 4px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--muted) } .bt-hinweis--rot { color: var(--red-ink) } .bt-kiste__add { width: 100%; margin-top: 4px } .bt-risiko { position: relative; display: block; width: 60px; height: 4px; margin: 2px auto; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--gold), var(--red)) } .bt-risiko i { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink-850) } /* Dialog: breit, mit Tabs, Suche und Fusszeile */ #modal-box.modal-box--breit { max-width: 980px } .bt-dialog { display: flex; flex-direction: column; gap: var(--s3); max-height: 78vh } .bt-dialog__kopf { display: flex; flex-direction: column; gap: var(--s2) } .bt-tabs { display: flex; gap: 4px; flex-wrap: wrap } .bt-tab { padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--ink-850); color: var(--muted); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer } .bt-tab:hover { color: var(--text) } .bt-tab.ist-an { background: var(--accent-dim); color: var(--accent-ink); border-color: rgba(124,92,255,.4) } .bt-dialog__zeile { display: flex; gap: var(--s2) } .bt-dialog__zeile .input[type=search] { flex: 1 } .bt-dialog__zeile--seite { margin: var(--s3) 0 } .bt-dialog__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); overflow-y: auto; padding-right: 4px; flex: 1 } .bt-dialog__fuss { display: flex; align-items: center; gap: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-dialog__fuss b { color: var(--text); font-family: var(--font-num); letter-spacing: 0 } .bt-dialog__fuss b.geld { color: var(--gold) } .bt-dialog__fuss .btn { margin-left: auto } /* Battle: Sitzreihen je Team, VS-Trenner */ .bt-arena { display: flex; flex-direction: column; gap: 0 } .bt-reihe { display: grid; gap: 2px } .bt-reihe[data-n="1"] { grid-template-columns: 1fr } .bt-reihe[data-n="2"] { grid-template-columns: 1fr 1fr } .bt-reihe[data-n="3"] { grid-template-columns: 1fr 1fr 1fr } .bt-vs { position: relative; display: grid; place-items: center; height: 2px; margin: 4px 0; background: linear-gradient(90deg, transparent, var(--line-2), transparent) } .bt-vs span { padding: 3px 10px; border-radius: 999px; background: var(--ink-900); border: 1px solid var(--line-2); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-oben__format { display: block; color: var(--muted) } .bt-platz { min-height: 200px } .bt-platz--raus { opacity: .45; filter: grayscale(.6) } .bt-platz__zug .selten { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--sf) } .bt-replay { position: absolute; top: 8px; right: 10px; z-index: 4; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: rgba(15,18,22,.7); color: var(--text-2); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer } .bt-replay:hover { color: var(--text); border-color: var(--text-2) } .bt-raus { margin-left: auto; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--red-ink) } .bt-spieler__zeile .punkte { color: var(--text-2) } /* Zug-Karten der Runde */ .bt-zuege { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2) } .bt-zugkarte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s4) var(--s2) var(--s3); border: 1px solid rgba(var(--sf-rgb), .25); border-radius: var(--r-md); background: radial-gradient(70% 55% at 50% 40%, rgba(var(--sf-rgb), .14), transparent 72%), var(--ink-800); animation: bt-rein .4s var(--ease-out) both } .bt-zugkarte img { width: 84px; height: 84px; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)) } .bt-zugkarte__selten { position: absolute; top: 8px; left: 10px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--sf) } .bt-zugkarte small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); margin-top: 4px } .bt-zugkarte b { font: var(--t-zeile); color: var(--text); text-align: center } .bt-zugkarte .wert { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--gold) } .bt-zugkarte--gold { border-color: rgba(245,196,106,.5); box-shadow: 0 0 18px -6px rgba(245,196,106,.6) } /* Gold: die goldene Kiste auf der Walze, Gold-Gegenstaende in der Liste */ .bt-karte--goldkiste { border-color: rgba(245,196,106,.6); background: radial-gradient(70% 55% at 50% 35%, rgba(245,196,106,.28), transparent 72%), var(--ink-850) } .bt-karte--goldkiste small { color: var(--gold); letter-spacing: .1em; text-transform: uppercase } .bt-gegenstand--gold { border-color: rgba(245,196,106,.45) } .bt-gegenstand--gold .bt-gegenstand__selten { color: var(--gold) } .bt-gegenstand__chance { position: absolute; top: 5px; right: 6px } .bt-inhalt--seite { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) } .bt-code { font: var(--t-klein); font-family: var(--font-mono); color: var(--text) } .bt-code--block { display: block; margin-top: 4px; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(0,0,0,.3); word-break: break-all; line-height: 1.5 } /* Cases-Seite */ .cs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3) } .cs-karte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s4) var(--s3) var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(80% 60% at 50% 30%, rgba(var(--kt-rgb), .12), transparent 70%), var(--ink-800); transition: transform .2s var(--ease-out), border-color .2s } .cs-karte:hover { transform: translateY(-3px); border-color: rgba(var(--kt-rgb), .5) } /* v3.70 Leistung: kein drop-shadow – bei 36 Karten der teuerste Teil beim Scrollen; der Schatten steckt im SVG. */ .cs-karte__bild { width: 130px; height: 130px; cursor: pointer; transition: transform .3s var(--ease-spring) } /* v3.65: content-visibility: auto fuer die 48 Karten wurde gemessen und verworfen – auf dem Handy loeste jede Karte, die beim Scrollen ins Bild kam, ein eigenes Layout aus (65 statt 87 fps beim Scrollen). Die Bilder laden stattdessen lazy/async mit fester Groesse (battles.js). */ .cs-karte:hover .cs-karte__bild { transform: translateY(-4px) scale(1.04) } .cs-karte__name { font: var(--t-kachel); letter-spacing: var(--ls-titel); text-transform: uppercase; text-align: center } .cs-karte__preis { min-width: 120px; color: var(--gold) } .cs-fav { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--faint); font-size: .8rem; cursor: pointer } .cs-fav.ist-an { color: var(--red-ink); border-color: rgba(255,118,118,.4) } .cs-seite { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s4); align-items: start } @media (max-width: 900px) { .cs-seite { grid-template-columns: 1fr } .cs-buehne { order: -1 } } .cs-menge { display: flex; gap: 6px } .cs-menge .quick-bet { flex: 1; min-height: 36px } .cs-menge .quick-bet.ist-an { color: var(--accent-ink); border-color: rgba(124,92,255,.5); background: var(--accent-dim) } /* ═══ v3.48 — Preis-Pillen, Markierungspfeile, Blitz, Krone ═══════════════ */ .bt-preis { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(245,196,106,.1); border: 1px solid rgba(245,196,106,.28); color: var(--gold); font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; white-space: nowrap } .bt-preis .ico { width: 13px; height: 13px; color: var(--gold) } .cs-karte__preis { border: 0; background: none; padding: 0; cursor: pointer; font: inherit } .cs-karte__preis .bt-preis { padding: 7px 16px; min-width: 120px; justify-content: center; transition: background .2s, transform .15s var(--ease-out) } .cs-karte__preis:hover .bt-preis { background: rgba(245,196,106,.2); transform: translateY(-1px) } .bt-inhalt-kopf .bt-preis { margin-top: 4px } /* Markierung: Linie plus zwei Pfeile oben und unten, wie beim Vorbild. */ .bt-walze { position: relative } .bt-walze::before { content: ""; position: absolute; z-index: 4; left: 50%; top: 0; width: 0; height: 0; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--accent-2); filter: drop-shadow(0 0 6px rgba(124,92,255,.7)); pointer-events: none; } .bt-pfeil-unten { position: absolute; z-index: 4; left: 50%; bottom: 0; width: 0; height: 0; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid var(--accent-2); filter: drop-shadow(0 0 6px rgba(124,92,255,.7)); pointer-events: none; } .bt-walze::after { background: linear-gradient(180deg, var(--accent-2), rgba(124,92,255,.25) 40%, rgba(124,92,255,.25) 60%, var(--accent-2)); opacity: .8 } /* Blitz beim Anhalten: die Walze leuchtet einmal in der Seltenheitsfarbe. */ .bt-walze.ist-blitz { animation: bt-blitz .9s var(--ease-out) both } @keyframes bt-blitz { 0% { box-shadow: inset 0 0 0 rgba(var(--sf-rgb), 0) } 18% { box-shadow: inset 0 0 90px rgba(var(--sf-rgb), .5) } 100% { box-shadow: inset 0 0 0 rgba(var(--sf-rgb), 0) } } /* Lichtstreifen einmal ueber den Treffer. */ .bt-karte { position: relative } .bt-karte--treffer { overflow: hidden } .bt-karte--treffer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 1s var(--ease-out) .25s both; pointer-events: none; } .bt-walze .feier { z-index: 6 } /* Krone fuer die Gewinner. */ .bt-platz--gewinner .bt-platz__kopf .bt-kopfbild { position: relative; overflow: visible; box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245,196,106,.6) } .bt-platz--gewinner .bt-platz__kopf .bt-kopfbild::after { content: "\1F451"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-12deg); font-size: 14px; animation: bt-krone .6s var(--ease-spring) both } @keyframes bt-krone { from { opacity: 0; transform: translateX(-50%) translateY(-8px) rotate(-30deg) scale(.5) } to { opacity: 1; transform: translateX(-50%) rotate(-12deg) } } .bt-spieler__karte--gewinner .bt-spieler__kopf .bt-kopfbild { box-shadow: 0 0 0 2px var(--gold) } @media (prefers-reduced-motion: reduce) { .bt-walze.ist-blitz, .bt-karte--treffer::after, .bt-platz--gewinner .bt-kopfbild::after { animation: none } } /* ═══ v3.48b — Teams als Spalten, Zug-Spalten, Abdunkeln, Jackpot bleibt ══ */ .bt-arena { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 0 } .bt-arena[data-teams="1"] { grid-auto-columns: minmax(0, 1fr) } .bt-team { display: flex; flex-direction: column; gap: 2px; min-width: 0 } /* Rechte Seite gespiegelt: Summe links, Kopf rechts — wie beim Vorbild. */ .bt-team--rechts .bt-platz__kopf { flex-direction: row-reverse; text-align: right } .bt-team--rechts .bt-platz__name { text-align: right } .bt-vs { width: 30px; height: auto; margin: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent, var(--line-2), transparent); padding: 0; align-self: stretch } .bt-vs span { transform: rotate(45deg); width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border-radius: 4px; background: var(--ink-900); border: 1px solid var(--accent); box-shadow: 0 0 12px rgba(124,92,255,.5); color: var(--accent-ink); font-size: .5rem } .bt-vs span { font-size: 0 } .bt-vs span::before { content: 'VS'; transform: rotate(-45deg); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--accent-ink) } @media (max-width: 900px) { .bt-arena { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr } .bt-vs { width: auto; height: 26px; background: linear-gradient(90deg, transparent, var(--line-2), transparent) } .bt-team--rechts .bt-platz__kopf { flex-direction: row; text-align: left } } .bt-walze.ist-gestoppt .bt-karte:not(.bt-karte--treffer) { opacity: .28; filter: grayscale(.4); transition: opacity .5s var(--ease-out), filter .5s } .bt-walze.ist-gestoppt .bt-karte--treffer { z-index: 2 } /* Gezogene Gegenstaende: eine Spalte je Spieler, neueste oben. */ .bt-zuege { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: var(--s2); overflow-x: auto; padding-bottom: 4px } .bt-zugspalte { display: flex; flex-direction: column; gap: var(--s2); min-width: 0 } .bt-zugspalte__kopf { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--ink-850); border: 1px solid var(--line); font: var(--t-zeile); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bt-zugspalte__kopf .bt-kopfbild { width: 22px; height: 22px } /* Ergebnis-Einblendung: Balken und Karte untereinander, Arena waechst mit — sonst schneidet overflow:hidden die Karte unter dem Balken ab. */ .bt-arena:has(.bt-ergebnis) { min-height: 620px } .bt-ergebnis { grid-auto-flow: row; align-content: center; gap: var(--s4); background: rgba(15,18,22,.9) } .bt-ergebnis .bt-jackpot { margin: 0 auto } /* ═══ v3.50 — Cases wie DonutFlip: Auswahl links, Schieber, grosse Walze ═══ */ .cs-titel { margin: 0; font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase } .cs-titel em { font: inherit; letter-spacing: inherit; font-style: normal; color: var(--play-ink) } .cs-seite--uebersicht { grid-template-columns: 280px minmax(0, 1fr) } .cs-gewaehlt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); background: var(--ink-850); border: 1px solid var(--line); cursor: pointer } .cs-gewaehlt img { width: 64px; height: 64px } .cs-gewaehlt b { display: block; font: var(--t-karte); margin-bottom: 4px } .cs-summe { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; margin-bottom: 10px; border-radius: var(--r-md); background: rgba(245,196,106,.07); border: 1px solid rgba(245,196,106,.2) } .cs-summe small { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .cs-summe b { font: var(--t-zahl-gross); color: var(--gold); font-variant-numeric: tabular-nums } .cs-rechts { display: flex; flex-direction: column; gap: var(--s3); min-width: 0 } .cs-werkzeuge { display: flex; gap: var(--s2); flex-wrap: wrap } .cs-werkzeuge .input[type=search] { flex: 1 1 220px } .cs-schieber { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-850) } .cs-schieber label { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .cs-schieber i { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text-2) } .cs-schieber input[type=range] { width: 100%; accent-color: var(--play); margin: 0 } @media (max-width: 720px) { .cs-schieber { grid-template-columns: 1fr } } .cs-karte.ist-an { border-color: var(--play); box-shadow: 0 0 0 1px var(--play), 0 10px 30px -14px var(--play-glow) } .cs-karte { cursor: pointer } .cs-karte__top { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--muted) } .cs-leiste { margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-850); overflow: hidden } .cs-leiste__kopf { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) } .cs-leiste__kopf span { color: var(--muted) } .cs-leiste__band { display: flex; gap: 6px; padding: 8px; overflow-x: auto } .cs-leiste__item { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-sm); border: 1px solid rgba(var(--sf-rgb), .25); background: radial-gradient(70% 55% at 50% 35%, rgba(var(--sf-rgb), .14), transparent 72%), var(--ink-800) } .cs-leiste__item img { width: 46px; height: 46px } .cs-leiste__item b { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--gold) } .cs-leiste__item small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--muted) } .cs-leiste__item.ist-gold { border-color: rgba(245,196,106,.45) } /* Strich-Icons in Knoepfen und Pillen (v3.50) */ .bt-pille .ico, .bt-schalter .ico, .bt-zurueck .ico, .bt-replay .ico, .btn .ico { margin-block: -2px } .bt-format__zeichen, .bt-oben__format { display: inline-flex; align-items: center; gap: 2px } .bt-format__zeichen .ico, .bt-oben__format .ico { width: 14px; height: 14px; color: var(--text-2) } .bt-x { font-style: normal; margin: 0 5px; color: var(--faint) } .cs-fav .ico { width: 14px; height: 14px } .cs-fav.ist-an .ico { fill: currentColor } .bt-zurueck.ist-an .ico { fill: currentColor } .bt-tab .ico { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px } /* ═══════════════════════════════════════════════════════════════════════════ v3.53 — Cases-Buehne wie DonutDrop ─────────────────────────────────────────────────────────────────────────── Alles auf der Case-Seite traegt das Praefix cs- und haengt unter .cs-detail. Der innere Rahmen hat feste Hoehe und schaltet ueber data-zustand (leerlauf | wartet | laeuft | gelandet) nur Opacity und Transform um — nichts springt im Layout. Zeiten stehen in battles.js (CS_DAUER …), das Band liest Kachel und Luecke aus --cs-kachel / --cs-luecke. ═══════════════════════════════════════════════════════════════════════════ */ .cs-detail { --cs-violett: 124,92,255; --cs-kachel: 140px; --cs-luecke: 16px; min-width: 0; max-width: 100% } /* Seltenheitsfarben (--rc) wie beim Vorbild: grau-blau, gruen, blau, violett, orange — und Gold #fdb022 fuer die goldene Kiste. Als Text hell genug auf --ink-900 (alle ueber 4.5:1). */ .cs-detail [data-selten="common"], .cs-drops [data-selten="common"] { --rc: #9aa3b2; --rc-rgb: 154,163,178 } .cs-detail [data-selten="uncommon"], .cs-drops [data-selten="uncommon"] { --rc: #4ade80; --rc-rgb: 74,222,128 } .cs-detail [data-selten="rare"], .cs-drops [data-selten="rare"] { --rc: #60a5fa; --rc-rgb: 96,165,250 } .cs-detail [data-selten="epic"], .cs-drops [data-selten="epic"] { --rc: #a78bfa; --rc-rgb: 167,139,250 } .cs-detail [data-selten="legendary"], .cs-drops [data-selten="legendary"] { --rc: #f59e0b; --rc-rgb: 245,158,11 } .cs-detail [data-selten="gold"], .cs-detail .cs-kachel--gold, .cs-drops [data-selten="gold"] { --rc: #fdb022; --rc-rgb: 253,176,34 } /* Buehne: aussen 14 px Rand mit grossem Radius, innen 376 px hoch, unten ein violetter Schein und ab 55 % Hoehe der Gitterboden (::before, nach oben ausgeblendet). */ .cs-buehne { padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--ink-950); min-width: 0; overflow: hidden } .cs-buehne__innen { position: relative; height: 376px; border-radius: 10px; overflow: hidden; isolation: isolate; background: radial-gradient(60% 55% at 50% 100%, rgba(var(--cs-violett), .13), transparent 70%), radial-gradient(40% 50% at 50% 50%, rgba(var(--cs-violett), .06), transparent 70%), var(--ink-900); } .cs-buehne__innen::before { content: ""; position: absolute; left: 0; right: 0; top: 55%; bottom: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(var(--cs-violett), .07) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(var(--cs-violett), .07) 0 1px, transparent 1px 20px); -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%); } /* Kulisse: die Items der Case als gedimmte, unscharfe Reihe hinter allem. */ .cs-kulisse { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; gap: var(--cs-luecke); opacity: .35; filter: blur(3px) saturate(.8); pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); transition: opacity .3s var(--ease-out); } /* Leerlauf: die Case schwebt in der Mitte — Glow-Kopie dahinter, Bodenschatten darunter, violettes Leuchten drumherum. Alles liegt auf derselben Rasterzelle. */ .cs-leerlauf { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; transition: opacity .25s var(--ease-out) } .cs-leerlauf > * { grid-area: 1 / 1 } .cs-leerlauf__leuchten { width: 480px; max-width: 100%; height: 400px; max-height: 100%; background: radial-gradient(closest-side, rgba(var(--cs-violett), .5), rgba(var(--cs-violett), .18) 55%, transparent) } .cs-leerlauf__glow { width: 192px; height: 192px; filter: blur(40px) saturate(1.8); opacity: .6; transform: scale(1.25) } .cs-leerlauf__schatten { width: 170px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); transform: translateY(104px) } /* v3.64 Leistung: kein drop-shadow auf dem schwebenden Bild (wurde jedes Bild neu gefiltert); der Bodenschatten ist ein eigenes Element. */ .cs-leerlauf__case { width: 192px; height: 192px; animation: cs-schweben 3.2s ease-in-out infinite; will-change: transform } @keyframes cs-schweben { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } } /* Rattern, solange die Antwort des Servers aussteht. */ .cs-buehne__innen[data-zustand="wartet"] .cs-leerlauf__case { animation: cs-rattern .42s ease-in-out infinite } @keyframes cs-rattern { 0%, 100% { transform: rotate(-4deg) scale(1.04) } 50% { transform: rotate(4deg) scale(1.04) } } /* Zustandswechsel: Leerlauf und Kulisse weichen den Walzen. */ .cs-buehne__innen[data-zustand="laeuft"] .cs-leerlauf, .cs-buehne__innen[data-zustand="gelandet"] .cs-leerlauf, .cs-buehne__innen[data-zustand="laeuft"] .cs-kulisse, .cs-buehne__innen[data-zustand="gelandet"] .cs-kulisse { opacity: 0 } .cs-buehne__innen[data-zustand="laeuft"] .cs-leerlauf__case, .cs-buehne__innen[data-zustand="gelandet"] .cs-leerlauf__case { animation-play-state: paused } .cs-walzen { position: absolute; inset: 0; z-index: 2; display: flex; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out) } .cs-buehne__innen[data-zustand="laeuft"] .cs-walzen, .cs-buehne__innen[data-zustand="gelandet"] .cs-walzen { opacity: 1 } /* Walze: waagrecht (Menge 1) mit Maske links/rechts; senkrecht (Menge 2–4) als Spalten nebeneinander mit Maske oben/unten. */ .cs-walze { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } .cs-walze--senkrecht { -webkit-mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); } /* Goldener Spaltenglow fuer den Zweitzug. */ .cs-walze--gold::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(45% 70% at 50% 50%, rgba(253,176,34,.22), transparent 70%) } .cs-walze--senkrecht.cs-walze--gold::before { background: linear-gradient(90deg, transparent, rgba(253,176,34,.16), transparent) } /* Das Band: ein Element, viele Kacheln, Bewegung nur auf transform. */ .cs-band { position: absolute; top: 50%; left: 50%; z-index: 1; display: flex; gap: var(--cs-luecke); transform: translate(0, -50%); will-change: transform; contain: layout paint } .cs-walze--senkrecht .cs-band { flex-direction: column; transform: translate(-50%, 0) } .cs-band--laeuft { transition: transform var(--cs-dauer, 5200ms) cubic-bezier(.12, .8, .2, 1) } /* Kachel: Glow (86 %, Radius 16 %) in der Seltenheitsfarbe mit feinem Pixelraster hinter dem Bild. */ /* Kein will-change auf den Kacheln: 4 x 46 eigene Ebenen mit Filter waeren zu viel Speicher — das Band ist die eine bewegte Ebene. */ .cs-kachel { position: relative; width: var(--cs-kachel); height: var(--cs-kachel); flex-shrink: 0; display: grid; place-items: center; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out) } .cs-kachel img { position: relative; z-index: 1; width: 96px; height: 96px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) } .cs-walze--senkrecht .cs-kachel img { width: 68%; height: 68% } .cs-glow { position: absolute; inset: 7%; z-index: 0; border-radius: 16%; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(var(--rc-rgb), var(--cs-glow-a, .30)), transparent 70%), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 100% 100%, 13px 13px, 13px 13px; -webkit-mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%); mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%); transition: opacity .35s var(--ease-out); } /* Gelandet: alles ausser dem Treffer tritt zurueck, der Treffer waechst und leuchtet. */ .cs-walze.ist-gelandet .cs-kachel:not(.ist-treffer) { opacity: .28 } .cs-walze.ist-gelandet .cs-kachel.ist-treffer { transform: scale(1.12); z-index: 2 } .cs-walze.ist-gelandet .cs-kachel.ist-treffer .cs-glow { --cs-glow-a: .55; box-shadow: 0 0 36px rgba(var(--rc-rgb), .6) } /* Markierung: 2 px violette Linie, kraeftig an den Enden, schwach in der Mitte, plus kleine Dreiecke oben und unten. Senkrechte Walzen bekommen sie quer mit Dreiecken links und rechts. */ .cs-marke { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); opacity: .55; pointer-events: none; background: linear-gradient(180deg, var(--accent-2), rgba(var(--cs-violett), .15) 50%, var(--accent-2)) } .cs-marke::before, .cs-marke::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent } .cs-marke::before { top: 0; border-top: 8px solid var(--accent-2) } .cs-marke::after { bottom: 0; border-bottom: 8px solid var(--accent-2) } .cs-walze--senkrecht .cs-marke { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, var(--accent-2), rgba(var(--cs-violett), .15) 50%, var(--accent-2)) } .cs-walze--senkrecht .cs-marke::before, .cs-walze--senkrecht .cs-marke::after { top: 50%; bottom: auto; transform: translateY(-50%); border: 6px solid transparent } .cs-walze--senkrecht .cs-marke::before { left: 0; border-left: 8px solid var(--accent-2); border-right: 0 } .cs-walze--senkrecht .cs-marke::after { left: auto; right: 0; border-right: 8px solid var(--accent-2); border-left: 0 } /* Gewinn-Overlay ueber der Buehne. */ /* display:flex + margin:auto: mittig, solange es passt; vier umgebrochene Karten scrollen statt oben abgeschnitten zu werden. */ .cs-overlay { position: absolute; inset: 0; z-index: 5; display: flex; padding: 16px; overflow: auto; background: rgba(10,17,25,.78); backdrop-filter: blur(4px); animation: cs-einblenden .25s var(--ease-out) both } @keyframes cs-einblenden { from { opacity: 0 } to { opacity: 1 } } .cs-overlay__innen { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; margin: auto } .cs-overlay__titel { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .cs-overlay__karten { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap } .cs-gewinn { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border-radius: 8px; border: 1px solid rgba(var(--rc-rgb), .35); background: linear-gradient(180deg, var(--ink-800), var(--ink-900)); box-shadow: inset 0 -30px 40px -30px rgba(var(--rc-rgb), .6); animation: cs-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; } .cs-overlay__karten:not([data-n="1"]) .cs-gewinn { width: 150px } @keyframes cs-pop { from { transform: scale(.85); opacity: 0 } to { transform: none; opacity: 1 } } .cs-gewinn__bild { position: relative; width: 84px; height: 84px; display: grid; place-items: center } .cs-gewinn__bild img { position: relative; z-index: 1; width: 84px; height: 84px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) } .cs-gewinn__bild .cs-glow { inset: -8% } .cs-gewinn__kat { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); text-align: center } .cs-gewinn__name { font: var(--t-kachel); letter-spacing: var(--ls-titel); text-transform: uppercase; color: var(--rc); text-align: center } .cs-gewinn__wert { display: inline-flex; align-items: center; gap: 5px; font: var(--t-zahl); color: var(--gold); font-variant-numeric: tabular-nums } .cs-gewinn__wert .ico { width: 16px; height: 16px; color: var(--gold) } .cs-gewinn__mult { font: var(--t-zahl-klein); color: var(--muted); font-variant-numeric: tabular-nums } .cs-gewinn__mult.ist-plus { color: var(--play-ink) } .cs-overlay__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center } .cs-overlay__knoepfe .btn { min-height: 40px; height: 40px; padding: 0 18px; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums } /* „Found in this case“: Karten 246 px hoch, Leiste oben mit Seltenheit und Chance, Bild mit Glow, Name in Seltenheitsfarbe, unten die Farblinie. */ .cs-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s2) } .cs-item { position: relative; height: 246px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(70% 55% at 50% 40%, rgba(var(--rc-rgb), .10), transparent 72%), var(--ink-850); } .cs-item::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px; background: var(--rc); box-shadow: 0 0 18px var(--rc) } .cs-item__leiste { width: 100%; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .cs-item--gold .cs-item__tag { color: #fdb022 } .cs-item__chance { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0 } .cs-item__bild { position: relative; width: 104px; height: 104px; display: grid; place-items: center; flex-shrink: 0 } .cs-item__bild img { position: relative; z-index: 1; width: 96px; height: 96px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) } .cs-item__bild .cs-glow { inset: 0 } .cs-item__kat { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); margin-top: 4px } .cs-item__name { font: var(--t-kachel); letter-spacing: var(--ls-titel); text-transform: uppercase; color: var(--rc); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .cs-item__wert { display: inline-flex; align-items: center; gap: 5px; font: var(--t-zahl-klein); color: var(--gold); font-variant-numeric: tabular-nums } .cs-item__wert .ico { width: 14px; height: 14px; color: var(--gold) } /* Handy: kleinere Kacheln, flachere Buehne, schmalere Gewinnkarten — und nichts, was die Seite seitlich verschiebt. */ @media (max-width: 600px) { .cs-detail { --cs-kachel: 116px; --cs-luecke: 14px } .cs-buehne { padding: 10px; border-radius: 14px } .cs-buehne__innen { height: 300px } .cs-leerlauf__case, .cs-leerlauf__glow { width: 150px; height: 150px } .cs-leerlauf__schatten { transform: translateY(82px) } .cs-kachel img { width: 80px; height: 80px } .cs-walze--senkrecht .cs-kachel img { width: 60%; height: 60% } .cs-gewinn, .cs-overlay__karten:not([data-n="1"]) .cs-gewinn { width: 132px; padding: 10px 6px } .cs-gewinn__bild, .cs-gewinn__bild img { width: 64px; height: 64px } .cs-items { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) } /* Vier Spalten in 315 px: die Kachel schrumpft je Menge (das Band liest --cs-kachel, darum stimmt der Schritt automatisch mit). */ .cs-walzen[data-menge="3"] { --cs-kachel: 92px; --cs-luecke: 10px } .cs-walzen[data-menge="4"] { --cs-kachel: 70px; --cs-luecke: 8px } } /* Reduzierte Bewegung: kein Schweben, kein Rattern, kein Pop; der Lauf ist kurz (battles.js setzt 600 ms, hier die Sicherung fuers CSS). */ @media (prefers-reduced-motion: reduce) { .cs-leerlauf__case, .cs-buehne__innen[data-zustand="wartet"] .cs-leerlauf__case { animation: none } .cs-gewinn, .cs-overlay { animation: none } .cs-band--laeuft { transition-duration: 600ms } .cs-kachel, .cs-glow, .cs-kulisse, .cs-leerlauf, .cs-walzen { transition: none } } /* ═══════════════════════════════════════════════════════════════════════════ v3.54 — Live-Drops-Leiste, Gratis-Case, Kopfleisten-Knopf, Rewards-Karte ─────────────────────────────────────────────────────────────────────────── Die Leiste steht oben auf der Cases-Uebersicht UND der Case-Seite; neue Kacheln schieben per transform von links herein (400 ms), bei reduzierter Bewegung ohne Animation. Der Multiplikator faerbt sich nach Stufe (data-stufe: gold ≥ 5×, plus ≥ 1×, leer darunter). ═══════════════════════════════════════════════════════════════════════════ */ .cs-drops { margin-bottom: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-850); overflow: hidden; min-width: 0 } .cs-drops__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 8px 12px; border-bottom: 1px solid var(--line) } .cs-drops__titel { display: inline-flex; align-items: center; gap: 8px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) } /* v3.65: Der Ring war ein wachsender box-shadow (Neumalen je Bild). Jetzt waechst ein fertiger Kreis (::after) per transform und verblasst per opacity – 8 px Ring um 8 px Punkt = Faktor 3, laeuft auf dem Compositor. */ .cs-drops__punkt { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--play) } .cs-drops__punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(74,222,128,.55); pointer-events: none; animation: cs-drops-puls 1.8s ease-out infinite } @keyframes cs-drops-puls { 0% { transform: scale(1); opacity: 1 } 100% { transform: scale(3); opacity: 0 } } .cs-drops__tabs .bt-tab { padding: 5px 10px } .cs-drops__band { display: flex; gap: 6px; padding: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; min-height: 128px; align-items: stretch } .cs-drops__leer { align-self: center; padding: 0 6px; font: var(--t-klein); color: var(--muted) } .cs-drop { position: relative; flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: var(--r-sm); cursor: pointer; text-align: center; border: 1px solid rgba(var(--rc-rgb), .28); color: var(--text); background: radial-gradient(70% 55% at 50% 32%, rgba(var(--rc-rgb), .16), transparent 72%), var(--ink-800); transition: transform .2s var(--ease-out), border-color .2s; } .cs-drop:hover { transform: translateY(-2px); border-color: rgba(var(--rc-rgb), .6) } .cs-drop--gold { border-color: rgba(253,176,34,.45) } .cs-drop__bild { position: relative; width: 56px; height: 56px; display: grid; place-items: center } .cs-drop__bild img { position: relative; z-index: 1; width: 56px; height: 56px; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)) } .cs-drop__bild .cs-glow { inset: -4% } .cs-drop__name { max-width: 100%; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .cs-drop__wert { font: var(--t-zahl-klein); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap } /* v4.23: „999.9K Donut" bricht auf dem Handy nicht um */ .cs-drop__mult { font: var(--t-etikett-klein); font-family: var(--font-num); color: var(--muted); font-variant-numeric: tabular-nums } .cs-drop[data-stufe="plus"] .cs-drop__mult { color: var(--play-ink) } .cs-drop[data-stufe="gold"] .cs-drop__mult { color: var(--gold); text-shadow: 0 0 10px rgba(245,196,106,.5) } .cs-drop__wer { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); color: var(--muted) } .cs-drop__tag { position: absolute; top: 4px; left: 4px; padding: 2px 5px; border-radius: 4px; background: var(--play); color: #0b1a10; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase } .cs-drop--neu { animation: cs-drop-rein .4s var(--ease-out) both } /* „My drops“ (v3.58): Level-Kaestchen (chat-lvl aus design.css) oben rechts, erst beim Hover oder Fokus sichtbar — die Leiste soll ruhig bleiben. Ein ungekuerzter Name (data-wer) ist ein Ziel: Klick oeffnet das Profil. */ .cs-drop__lvl { position: absolute; top: 4px; right: 4px; opacity: 0; transition: opacity .18s; pointer-events: none } .cs-drop:hover .cs-drop__lvl, .cs-drop:focus-visible .cs-drop__lvl { opacity: 1 } .cs-drop__wer[data-wer] { cursor: pointer; color: var(--muted) } .cs-drop__wer[data-wer]:hover { color: var(--accent-ink); text-decoration: underline } @keyframes cs-drop-rein { from { transform: translateX(-110%); opacity: 0 } to { transform: none; opacity: 1 } } /* Gratis-Case: Stand mit Zaehler, Fortschrittsbalken zur naechsten Stufe. */ .cs-gratis__stand { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin-bottom: 4px; border-radius: var(--r-md); background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.22) } .cs-gratis__zaehler { display: flex; flex-direction: column; font: var(--t-text); color: var(--text-2) } .cs-gratis__zaehler b { font: var(--t-zahl-gross); font-variant-numeric: tabular-nums; color: var(--play-ink); margin-right: 4px } .cs-gratis__zaehler small { font: var(--t-klein); color: var(--muted) } .cs-gratis__balken { position: relative; height: 8px; border-radius: 4px; background: var(--ink-950); overflow: hidden } .cs-gratis__balken i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--play), var(--gold)); transition: width .5s var(--ease-out) } .cs-gratis__text { font: var(--t-klein); color: var(--muted) } .cs-gratis__text b { color: var(--text); font-family: var(--font-num) } .cs-detail--gratis .cs-leerlauf__leuchten { background: radial-gradient(closest-side, rgba(74,222,128,.4), rgba(74,222,128,.14) 55%, transparent) } /* Kopfleiste: „3× FREE CASES“ mit Case-Bild und Zaehler (motion.js baut den Knopf). Unter 880 px ist die Kopfleisten-Navigation ausgeblendet — dieser eine Knopf bleibt, kompakt: nur Bild und Zaehler. */ .top-nav__gratis { border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); color: var(--play-ink) } .top-nav__gratis img { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)) } .top-nav__gratis b { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--play-ink) } .top-nav__gratis b:empty { display: none } @media (max-width: 880px) { .top-nav { display: flex; margin-left: 6px } .top-nav > :not(.top-nav__gratis) { display: none } .top-nav__gratis { padding: 4px 8px; gap: 4px } .top-nav__gratis .text { display: none } } /* Rewards-Seite: Karte „Free daily cases“ (motion.js haengt sie an .rw-raster). */ .rw-gratis__zaehler { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 10px; font: var(--t-text); color: var(--text-2) } .rw-gratis__zaehler b { font: var(--t-zahl-gross); font-variant-numeric: tabular-nums; color: var(--play-ink) } .rw-gratis__text { margin: 0 0 10px; font: var(--t-klein); color: var(--muted) } @media (prefers-reduced-motion: reduce) { .cs-drop--neu, .cs-drops__punkt, .cs-drops__punkt::after { animation: none } .cs-drop, .cs-drop__lvl, .cs-gratis__balken i { transition: none } } /* ═══════════════════════════════════════════════════════════════════════════ v3.59 — Battles: Wortmarke, Segmente, Modus-Chips, Arena wie die Cases-Buehne ─────────────────────────────────────────────────────────────────────────── Die Battles-Seite spricht jetzt dieselbe Buehnensprache wie die Case-Seite: die Walzen bestehen aus cs-walze / cs-band / cs-kachel (gleiche Kachel, gleicher Glow, gleiche Marke), die Teams stehen als Spalten mit Kopf, Summe und Fuehrungsbalken, die Modi tragen feste Farben. Alles hier steht HINTER den aelteren Regeln und ueberschreibt sie bewusst; die aelteren Klassen bleiben, weil die Startseite (Highlights) dieselbe Zeile zeigt. Versalien laufen mit .04em. Bewegung nur auf transform und opacity, der Balken ausgenommen (width, einmal je Runde). ═══════════════════════════════════════════════════════════════════════════ */ .bt .ico--xs, .bt-modchip .ico--xs, .bt-status .ico--xs { width: 12px; height: 12px } /* Modus-Farben: Regular violett, Jackpot gold, Point Rush cyan, Group Unbox gruen, Elimination rot. */ [data-modus="regular"] { --mc: 124,92,255; --mc-ink: var(--accent-ink) } [data-modus="jackpot"] { --mc: 245,196,106; --mc-ink: var(--gold) } [data-modus="pointrush"] { --mc: 76,201,240; --mc-ink: #4cc9f0 } [data-modus="groupunbox"] { --mc: 74,222,128; --mc-ink: var(--green-ink) } [data-modus="elimination"] { --mc: 255,118,118; --mc-ink: var(--red-ink) } .bt-modchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(var(--mc, 124,92,255), .35); background: rgba(var(--mc, 124,92,255), .12); color: var(--mc-ink, var(--accent-ink)); font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; white-space: nowrap } .bt-modchip--mod { --mc: 255,255,255; --mc-ink: var(--text-2); border-color: var(--line); background: rgba(255,255,255,.04) } .bt-modchip[data-mod="crazy"] { --mc: 255,118,118; --mc-ink: var(--red-ink); border-color: rgba(255,118,118,.35); background: rgba(255,118,118,.1) } .bt-modchip[data-mod="lastchance"] { --mc: 245,196,106; --mc-ink: var(--gold); border-color: rgba(245,196,106,.35); background: rgba(245,196,106,.1) } /* Kopf mit Wortmarke */ .bt-kopf--marke { align-items: center } .bt-kopf--marke .bt-kopf__titel { gap: var(--s4) } .bt-kopf__bild { width: 104px; height: 60px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); flex-shrink: 0 } .bt-wortmarke { margin: 0; font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase; color: var(--text) } .bt-wortmarke em { font: inherit; letter-spacing: inherit; font-style: normal; color: var(--accent-ink) } .bt-kopf--marke p { margin-top: 3px } /* Segment-Control: eine Leiste, ein aktiver Knopf — ruhiger als drei Auswahlfelder. */ .bt-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-850); max-width: 100% } .bt-seg__knopf { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s } .bt-seg__knopf:hover { color: var(--text) } .bt-seg__knopf.ist-an { background: var(--ink-700); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset } .bt-seg__knopf.ist-an[data-modus] { color: var(--mc-ink); background: rgba(var(--mc), .16) } .bt-seg__knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px } .bt-filter { align-items: center } .bt-filter__rechts { gap: var(--s2); align-items: center } /* Zeile: Modus-Chip und Sitze | Cases | Kosten | Status | Knopf */ .bt-zeile { grid-template-columns: minmax(210px, 1.15fr) minmax(0, 1fr) auto auto auto; gap: var(--s4); align-items: center } .bt-zeile:hover { transform: translateY(-1px); border-color: var(--line-2); background: var(--ink-750); box-shadow: 0 12px 26px -20px rgba(0,0,0,.9) } .bt-zeile__modus { display: flex; flex-direction: column; gap: 8px; min-width: 0 } .bt-zeile__chips { display: flex; gap: 4px; flex-wrap: wrap } .bt-sitz { position: relative; display: inline-flex; margin-right: 4px } .bt-sitz .chat-lvl, .bt-sitz .bt-botmarke { position: absolute; right: -8px; bottom: -5px; z-index: 1; font-size: .5rem; min-width: 14px; padding: 2px 3px; line-height: 1.1; box-shadow: 0 0 0 2px var(--ink-800) } .bt-sitze__vs { margin: 0 6px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-botmarke { display: inline-grid; place-items: center; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--ink-650); color: var(--text-2); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase } .bt-kiste-mini b { letter-spacing: 0 } .bt-zeile__status { display: flex; justify-content: center; min-width: 118px } .bt-status { position: relative; display: inline-flex; align-items: center; gap: 6px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); white-space: nowrap } .bt-status b { color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0 } .bt-status__punkt { width: 3px; height: 3px; border-radius: 50%; background: var(--faint) } .bt-status--laeuft { color: var(--green-ink) } .bt-status__puls { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green-ink) } .bt-status__puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green-ink); animation: bt-puls 1.6s ease-out infinite } @keyframes bt-puls { from { transform: scale(1); opacity: .7 } to { transform: scale(2.8); opacity: 0 } } .bt-status--vorbei { color: var(--text-2) } .bt-status__sieger { position: relative; display: inline-flex; margin-right: 4px } .bt-status__sieger .bt-kopfbild { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--gold) } .bt-status__sieger .bt-kopfbild + .bt-kopfbild { margin-left: -6px } .bt-status__krone { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-10deg); color: var(--gold) } .bt-status--weg { color: var(--muted) } .bt-zeile__knopf .btn { min-width: 110px } @media (max-width: 880px) { .bt-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "modus kosten" "kisten kisten" "status knopf"; gap: var(--s3) } .bt-zeile__modus { grid-area: modus } .bt-kisten { grid-area: kisten; grid-column: auto } .bt-kosten { grid-area: kosten; text-align: right } .bt-zeile__status { grid-area: status; justify-content: flex-start; min-width: 0 } .bt-zeile__knopf { grid-area: knopf; align-items: flex-end } } /* Leerer Zustand: Voxel-Bild, ein Satz, der gruene Knopf. */ .bt-leer--gross { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s7) var(--s4); border-style: solid; background: radial-gradient(60% 70% at 50% 25%, var(--accent-dim), transparent 70%), var(--ink-850) } .bt-leer--gross img { width: min(260px, 70%); height: auto; margin-bottom: var(--s2); filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)) } .bt-leer--gross b { font: var(--t-karte); color: var(--text) } .bt-leer--gross span { max-width: 420px; line-height: 1.5 } .bt-leer--gross .btn { margin-top: var(--s3) } /* Erstellen: vier Schritte untereinander, rechts die Zusammenfassung. */ .bt-schritte { display: flex; flex-direction: column; gap: var(--s6) } .bt-schritt__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3) } .bt-schritt__kopf h3 { margin: 0; font: var(--t-karte); color: var(--text) } .bt-schritt__nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; transition: background .2s } .bt-schritt.ist-fertig .bt-schritt__nr { background: var(--green) } .bt-schritt .bt-wahl { margin-bottom: 0 } .bt-opt--modus { --mc: 124,92,255; --mc-ink: var(--accent-ink); align-items: center } .bt-opt__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); background: rgba(var(--mc), .14); color: var(--mc-ink); flex-shrink: 0; transition: transform .2s var(--ease-spring) } .bt-opt__icon .ico { width: 20px; height: 20px } .bt-opt--modus:hover .bt-opt__icon { transform: scale(1.08) } .bt-opt--modus.ist-an { border-color: rgba(var(--mc), .6); background: rgba(var(--mc), .1); box-shadow: 0 0 0 2px rgba(var(--mc), .14) } .bt-opt--modus.ist-an b { color: var(--mc-ink) } .bt-opt--modus small { display: block } .bt-seg--format { margin-bottom: var(--s3) } .bt-seg--format .bt-seg__knopf { text-transform: none } .bt-slots { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) } .bt-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px } .bt-optionen .bt-schalter { margin: 0 } .bt-leih-box { margin-top: var(--s3); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-850) } .bt-leih { letter-spacing: .04em } .bt-leih__stufen { letter-spacing: .04em } .bt-summe__gross small { letter-spacing: .04em } .bt-summe__hinweis { font: var(--t-klein); color: var(--muted) } .bt-summe dd .bt-modchip { vertical-align: middle; margin-left: 4px } .bt-summe .btn-full { width: 100%; margin: var(--s2) 0 } .bt-summe .btn-full .ico { display: none } /* Case-Dialog: Suche mit Lupe, Preisleiter. */ .bt-suche { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--ink-850); color: var(--muted) } .bt-suche:focus-within { border-color: var(--accent) } .bt-suche .input { flex: 1; border: 0; background: none; min-height: 34px; padding: 4px 0 } .bt-suche .input:focus { box-shadow: none; border: 0 } .bt-seg--preis { flex-wrap: wrap; border-radius: var(--r-md) } .bt-seg--preis .bt-seg__knopf { text-transform: none } .bt-dialog__fuss { letter-spacing: .04em } /* Arena: Teams als Spalten, Walzen wie auf der Cases-Buehne. */ .bt-arena { --cs-kachel: 116px; --cs-luecke: 12px; background: var(--ink-950); gap: 2px; padding: 2px } .bt-arena [data-selten="common"] { --rc: #9aa3b2; --rc-rgb: 154,163,178 } .bt-arena [data-selten="uncommon"] { --rc: #4ade80; --rc-rgb: 74,222,128 } .bt-arena [data-selten="rare"] { --rc: #60a5fa; --rc-rgb: 96,165,250 } .bt-arena [data-selten="epic"] { --rc: #a78bfa; --rc-rgb: 167,139,250 } .bt-arena [data-selten="legendary"] { --rc: #f59e0b; --rc-rgb: 245,158,11 } .bt-arena [data-selten="gold"], .bt-arena .cs-kachel--gold { --rc: #fdb022; --rc-rgb: 253,176,34 } .bt-team { position: relative; display: flex; flex-direction: column; gap: 0; min-width: 0; border-radius: var(--r-md); background: var(--ink-800); overflow: hidden; isolation: isolate; transition: box-shadow .4s var(--ease-out), opacity .4s var(--ease-out) } .bt-team::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2; background: rgba(var(--tf-rgb), .85) } .bt-team__koepfe { position: relative; display: flex; flex-shrink: 0 } .bt-team__koepfe .bt-kopfbild { width: 38px; height: 38px; box-shadow: 0 0 0 2px rgba(var(--tf-rgb), .8) } .bt-team__koepfe .bt-kopfbild + .bt-kopfbild { margin-left: -10px } .bt-team__du { padding: 2px 6px; border-radius: 4px; background: var(--accent-dim); color: var(--accent-ink); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase } .bt-team .bt-platz { min-height: 0; background: transparent } .bt-team .bt-platz::before { display: none } .bt-team .bt-platz + .bt-platz { border-top: 1px solid var(--line) } .bt-team .bt-platz__kopf { padding: 6px 12px 2px } .bt-team .bt-platz__kopf .bt-kopfbild { width: 24px; height: 24px } .bt-team .bt-platz__name { display: flex; align-items: center; gap: 6px; white-space: nowrap } .bt-team .bt-platz__name small { display: inline; letter-spacing: .04em } /* Walze: dieselben Kacheln wie auf der Cases-Buehne, dazu der Wert unter dem Bild. */ .bt-arena .bt-walze { flex: none; min-height: 0; height: calc(var(--cs-kachel) + 28px); overflow: hidden } .bt-arena .bt-walze::before, .bt-arena .bt-walze::after, .bt-arena .bt-pfeil-unten { display: none } .bt-arena .cs-kachel img { width: 66%; height: 66% } .bt-arena .cs-kachel small { position: absolute; left: 50%; bottom: 4%; z-index: 1; transform: translateX(-50%); font: var(--t-zahl-klein); color: var(--rc); font-variant-numeric: tabular-nums; white-space: nowrap } .bt-arena .cs-kachel--gold small { letter-spacing: .04em; text-transform: uppercase } .bt-arena .cs-walze--gold::before { background: radial-gradient(45% 70% at 50% 50%, rgba(253,176,34,.22), transparent 70%) } .bt-arena .bt-walze.ist-blitz { animation: bt-blitz .9s var(--ease-out) both } .bt-arena .bt-platz__zug { min-height: 26px; padding: 4px 10px 8px } .bt-arena .bt-platz__zug .selten { letter-spacing: .04em } /* Aufloesung: Gewinner leuchten, Verlierer treten zurueck, Krone ueber den Koepfen. */ .bt-team--gewinner { box-shadow: 0 0 0 1px rgba(245,196,106,.6), 0 0 44px -6px rgba(245,196,106,.55), inset 0 0 70px -30px rgba(245,196,106,.35); animation: bt-leuchten .9s var(--ease-out) both } @keyframes bt-leuchten { from { opacity: .55; transform: scale(.985) } to { opacity: 1; transform: none } } .bt-team--gewinner::before { background: var(--gold) } .bt-team--gewinner .bt-team__koepfe .bt-kopfbild { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245,196,106,.6) } .bt-team--verlierer { opacity: .5 } .bt-krone { position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(-12deg); color: var(--gold); filter: drop-shadow(0 0 6px rgba(245,196,106,.7)); animation: bt-krone .6s var(--ease-spring) both; pointer-events: none } .bt-krone .ico { width: 18px; height: 18px } .bt-ergebnis__koepfe { position: relative } .bt-ergebnis__koepfe .bt-krone { top: -18px } .bt-ergebnis__koepfe .bt-krone .ico { width: 22px; height: 22px } /* Die alte Krone aus dem Zeichensatz (CSS-Escape) bleibt aus — Strich-Icon statt Emoji. */ .bt-platz--gewinner .bt-platz__kopf .bt-kopfbild::after { content: none } .bt-platz--gewinner .bt-platz__kopf .bt-kopfbild { box-shadow: 0 0 0 2px var(--gold) } .bt-ergebnis__betrag b { font: inherit; color: inherit } .bt-ergebnis__aktionen .btn-play { min-width: 190px } /* Konfetti: Teilchen aus dem Mittelpunkt, nur transform und opacity. */ .bt-konfetti { position: absolute; inset: 0; z-index: 7; overflow: hidden; pointer-events: none } .bt-konfetti i { position: absolute; left: 50%; top: 45%; width: var(--g); height: var(--g); border-radius: 2px; background: var(--f); animation: bt-konfetti-flug 1.3s cubic-bezier(.12,.62,.3,1) forwards; will-change: transform, opacity } @keyframes bt-konfetti-flug { 0% { transform: translate(-50%, -50%) rotate(0) scale(1.1); opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.3); opacity: 0 } } /* Rundenzaehler mit Fortschrittspunkten */ .bt-oben__links { gap: 6px } .bt-verlauf__kiste { width: 34px; height: 34px } .bt-verlauf__kiste img { width: 28px; height: 28px } .bt-spieler__kopf .chat-lvl, .bt-spieler__kopf .bt-botmarke { flex-shrink: 0 } /* Tablet: sobald die Teams untereinander stehen (aeltere 900-px-Regel), ist die Spiegelung der rechten Spalte sinnlos. */ /* Handy: Teams untereinander, Walzen 92 px, Kopf ohne Bild. */ @media (max-width: 600px) { .bt-arena { --cs-kachel: 92px; --cs-luecke: 10px; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr } .bt-vs { width: auto; height: 26px; background: linear-gradient(90deg, transparent, var(--line-2), transparent) } .bt-arena .cs-kachel img { width: 62%; height: 62% } .bt-kopf__bild { display: none } .bt-filter__rechts { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin } .bt-leer--gross { padding: var(--s5) var(--s3) } .bt-ergebnis__aktionen .btn-play { min-width: 0; width: 100% } } /* Reduzierte Bewegung: Systemeinstellung oder Schalter der Seite (html.reduziert). */ @media (prefers-reduced-motion: reduce) { .bt-status__puls::after, .bt-krone, .bt-team--gewinner, .bt-konfetti i, .bt-arena .bt-walze.ist-blitz { animation: none } .bt-zeile, .bt-seg__knopf, .bt-team, .bt-opt__icon { transition: none } .bt-zeile:hover { transform: none } } html.reduziert .bt-status__puls::after, html.reduziert .bt-krone, html.reduziert .bt-team--gewinner, html.reduziert .bt-konfetti i, html.reduziert .bt-arena .bt-walze.ist-blitz { animation: none } html.reduziert .bt-zeile, html.reduziert .bt-seg__knopf, html.reduziert .bt-team, html.reduziert .bt-opt__icon { transition: none } html.reduziert .bt-zeile:hover { transform: none } /* ═══════════════════════════════════════════════════════════════════════════ v3.62 — Cases und Battles „perfekt": Knopf, Aufbruch, Walze, Arena-Kopf ─────────────────────────────────────────────────────────────────────────── Alles hier ist Bewegung und Feinschliff auf den Formen von v3.53/v3.59: der Open-Knopf mit Ripple, Glow-Puls und Fortschrittsrand, der Aufbruch der Case (Blitz, Funken, Kreuzblende), die Walze mit Bewegungsunschaerfe nur auf den Bildern, Marker-Puls, Kamera-Zoom und Wackeln, Lichtstrahlen hinter dem Treffer, das Overlay mit 3D-Kipp; in der Arena die Kopfleiste mit Pot, die Cases-Leiste als wischbarer Streifen, die Treffer-Reihe je Platz, Close call, Final round, Crazy-Stimmung, Elimination-Stempel, Jackpot-Auslauf, Beitritts-Hinweis und das Ergebnis mit Auszahlung. Bewegung nur auf transform, opacity und filter (Bilder). Versalien .04em. Bei reduzierter Bewegung (System oder html.reduziert) bleibt alles ruhig. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Knoepfe: Press-Feedback, Ripple aus dem Klickpunkt ─────────────────── */ .bt-ripple, #cs-oeffnen { position: relative; overflow: hidden; isolation: isolate; transition: transform 80ms var(--ease-out), box-shadow .3s var(--ease-out) } .bt-ripple:active:not(:disabled), #cs-oeffnen:active:not(:disabled) { transform: scale(.97) } .bt-welle { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.35); transform: translate(-50%, -50%) scale(0); animation: bt-welle .55s var(--ease-out) forwards; pointer-events: none } @keyframes bt-welle { from { transform: translate(-50%, -50%) scale(0); opacity: 1 } to { transform: translate(-50%, -50%) scale(28); opacity: 0 } } /* Open-Knopf: v3.65 kein Dauer-Puls mehr im Leerlauf – der animierte box-shadow malte den Knopf jedes Bild neu, solange die Cases-Seite offen war. Der Glow kommt jetzt nur beim Zeigen/Fokus (einmaliger Uebergang). Waehrend `wartet` ein umlaufender Fortschrittsrand (rotierender Kegelverlauf hinter der Flaeche, die Flaeche deckt alles bis auf 2 px Rand ab). */ #cs-oeffnen:not(:disabled):hover, #cs-oeffnen:not(:disabled):focus-visible { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 0 22px -4px rgba(61,220,132,.55) } #cs-oeffnen.ist-wartet { animation: none } #cs-oeffnen.ist-wartet::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 160%; padding-top: 160%; margin: -80% 0 0 -80%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(255,255,255,.9) 100%); animation: cs-ring .9s linear infinite } #cs-oeffnen.ist-wartet::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: inherit; background: inherit } @keyframes cs-ring { to { transform: rotate(360deg) } } /* ── Case-Karten: Hover-Hub bleibt, dazu ein feiner Rand in der Case-Farbe ── */ .cs-karte { transition: transform .22s var(--ease-out), border-color .22s, box-shadow .22s } .cs-karte:hover { box-shadow: 0 16px 30px -18px rgba(var(--kt-rgb), .55) } /* ── Aufladen: die Case zittert (v3.53) und leuchtet staerker ───────────── */ .cs-leerlauf__glow, .cs-leerlauf__leuchten { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out) } .cs-buehne__innen[data-zustand="wartet"] .cs-leerlauf__glow { opacity: 1; transform: scale(1.5) } .cs-buehne__innen[data-zustand="wartet"] .cs-leerlauf__leuchten { transform: scale(1.12) } /* ── Aufbruch: Blitz aus der Case, zehn Funken, Kreuzblende zur Walze ───── */ .cs-aufbruch { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none } .cs-aufbruch > * { grid-area: 1 / 1 } .cs-blitz { width: 520px; max-width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(var(--cs-violett), .55) 35%, transparent 72%); opacity: 0; transform: scale(.4); animation: cs-blitz-auf .25s var(--ease-out) both } @keyframes cs-blitz-auf { 0% { opacity: 0; transform: scale(.4) } 30% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1.35) } } .cs-aufbruch i { width: 9px; height: 9px; border-radius: 2px; background: linear-gradient(135deg, #ffe08a, var(--gold)); box-shadow: 0 0 8px rgba(245,196,106,.8); opacity: 0; animation: cs-funke-flug .6s cubic-bezier(.15,.7,.3,1) both } @keyframes cs-funke-flug { 0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.4); opacity: 0 } } .cs-leerlauf { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out) } .cs-buehne__innen[data-zustand="aufbruch"] .cs-leerlauf { opacity: 0; transform: scale(1.14) } .cs-buehne__innen[data-zustand="aufbruch"] .cs-leerlauf__case { animation-play-state: paused } .cs-buehne__innen[data-zustand="aufbruch"] .cs-kulisse { opacity: 0 } .cs-walzen { transition: opacity .2s var(--ease-out) } .cs-buehne__innen[data-zustand="aufbruch"] .cs-walzen { opacity: 1 } /* ── Walze: Unschaerfe nur auf den Bildern, Marker-Puls, Kamera-Zoom ────── */ /* Die Unschaerfe folgt der Fahrt: sie laeuft als Animation ueber dieselbe Dauer und Kurve wie das Band, scharf zum Ende hin. Nur img, nie Text. */ .cs-band--laeuft .cs-kachel img { animation: cs-unschaerfe var(--cs-dauer, 5200ms) cubic-bezier(.12, .8, .2, 1) both } @keyframes cs-unschaerfe { 0% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) blur(2px) } 55% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) blur(1px) } 100% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) blur(0) } } .cs-band--laeuft ~ .cs-marke { animation: cs-marke-puls .5s ease-in-out infinite alternate } @keyframes cs-marke-puls { from { opacity: .55 } to { opacity: 1 } } /* Kamera: die Buehne zoomt waehrend des Laufs auf 1.03 und setzt sich beim Landen. */ .cs-buehne__innen { transition: transform 1.2s var(--ease-out) } .cs-buehne__innen[data-zustand="laeuft"] { transform: scale(1.03) } .cs-buehne__innen[data-zustand="gelandet"] { transform: scale(1); transition-duration: .5s } /* Wackeln beim Landen ab Rare (120 ms). */ .cs-buehne__innen.ist-wackeln, .bt-arena.ist-wackeln { animation: cs-wackeln .12s ease-in-out both } @keyframes cs-wackeln { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(-3px, 1px) } 50% { transform: translate(3px, -1px) } 75% { transform: translate(-2px, 0) } } /* Lichtstrahlen hinter dem Treffer (Epic, Legendary, Gold): rotierende Kegelverlaeufe in der Seltenheitsfarbe, radial ausgeblendet. */ .cs-strahlen { position: absolute; left: 50%; top: 50%; z-index: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(var(--rc-rgb, 245,196,106), .2) 0 7deg, transparent 7deg 24deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%); animation: cs-strahlen-auf .6s var(--ease-out) both, cs-strahlen-dreh 16s linear infinite } @keyframes cs-strahlen-auf { from { opacity: 0 } to { opacity: 1 } } @keyframes cs-strahlen-dreh { to { transform: rotate(360deg) } } /* Treffer-Kachel: das Bild springt (1.12 → 1.0 mit Ueberschwingen), der Glow pulst zweimal. */ .cs-walze.ist-gelandet .cs-kachel.ist-treffer img { animation: cs-treffer-sprung .5s var(--ease-spring) both } @keyframes cs-treffer-sprung { 0% { transform: scale(.94) } 45% { transform: scale(1.12) } 100% { transform: scale(1) } } .cs-walze.ist-gelandet .cs-kachel.ist-treffer .cs-glow { animation: cs-glow-puls .7s ease-in-out 2 } @keyframes cs-glow-puls { 0%, 100% { opacity: 1 } 50% { opacity: .45 } } /* ── Overlay: Karte kippt aus 12 Grad heran, Multiplikator als farbiger Chip ── */ .cs-overlay__karten { perspective: 900px } @keyframes cs-kipp { from { transform: rotateX(12deg) translateY(14px) scale(.94); opacity: 0 } to { transform: none; opacity: 1 } } .cs-gewinn { animation-name: cs-kipp; animation-duration: .45s; transform-origin: 50% 100% } .cs-gewinn__zahl { font: inherit; color: inherit } .cs-gewinn__mult { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-2) } .cs-gewinn__mult.ist-plus { background: rgba(61,220,132,.14) } .cs-gewinn__mult.ist-gross { background: rgba(245,196,106,.16); color: var(--gold) } /* ── Battles-Uebersicht: Rundenstand in laufenden Zeilen ────────────────── */ .bt-status__runde { margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line-2); color: var(--text-2); font-family: var(--font-num); font-style: normal; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0 } /* ── Erstellen: Mengen-Stepper mit Press-Feedback ──────────────────────── (Der Case-Dialog ist seit dem v3.62-Umbau weg — Erstellen zeigt alle Cases direkt im Raster; seine Regeln stehen darum nicht mehr hier.) */ .bt-zaehler button { transition: background .15s, color .15s, transform 80ms var(--ease-out) } .bt-zaehler button:active { transform: scale(.9) } /* ── Arena-Kopf: Chips und Lage links, Runde mit Punkten, Pot in Gold ───── */ .bt-arena-kopf { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-850) } .bt-pot { display: flex; flex-direction: column; align-items: flex-end; margin-left: 4px } .bt-pot small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-pot b { font: var(--t-zahl-gross); color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(245,196,106,.3) } .bt-modchip--zuschauer { --mc: 154,163,178; --mc-ink: var(--text-2) } .bt-modchip--geteilt { --mc: 74,222,128; --mc-ink: var(--green-ink); border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.1) } .bt-modchip--final { --mc: 245,196,106; --mc-ink: var(--gold); border-color: rgba(245,196,106,.5); background: rgba(245,196,106,.14); box-shadow: 0 0 14px -2px rgba(245,196,106,.5) } .bt-modchip--knapp { --mc: 245,196,106; --mc-ink: var(--gold); border-color: rgba(245,196,106,.4); background: rgba(245,196,106,.1); animation: bt-chip-blink 1.2s ease-in-out infinite } @keyframes bt-chip-blink { 0%, 100% { opacity: 1 } 50% { opacity: .5 } } /* Last chance blinkt nur in der Arena (in der Liste bleibt es ruhig); Crazy faerbt die Stimmung leicht rot. */ .bt-battle .bt-modchip[data-mod="lastchance"] { animation: bt-chip-blink 1.4s ease-in-out infinite } .bt-battle.ist-crazy .bt-arena { background: linear-gradient(180deg, rgba(255,118,118,.07), transparent 45%), var(--ink-950); box-shadow: inset 0 0 0 1px rgba(255,118,118,.18) } .bt-battle.ist-crazy .bt-arena-kopf { border-color: rgba(255,118,118,.25) } .bt-arena.ist-final { box-shadow: inset 0 0 0 1px rgba(245,196,106,.35), 0 0 40px -16px rgba(245,196,106,.4) } /* ── Cases-Leiste: wischbarer Streifen, die aktuelle Case mittig ────────── */ .bt-verlauf { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; padding: 8px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch } .bt-verlauf::-webkit-scrollbar { display: none } .bt-verlauf__kiste { flex: 0 0 auto; width: 46px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px } .bt-verlauf__kiste:first-child { margin-left: auto } .bt-verlauf__kiste:last-child { margin-right: auto } .bt-verlauf__kiste img { width: 30px; height: 30px } .bt-verlauf__kiste small { font: var(--t-etikett-klein); font-family: var(--font-num); color: var(--muted); font-variant-numeric: tabular-nums } .bt-verlauf__kiste.ist-jetzt small { color: var(--gold) } /* ── Team-Spalte: Kopf 44 px, Rundensieger, Treffer-Reihe unter der Walze ── */ .bt-team__koepfe .bt-kopfbild { width: 44px; height: 44px } .bt-team__koepfe .bt-kopfbild + .bt-kopfbild { margin-left: -12px } @keyframes bt-rundensieger { 0% { transform: scale(1) } 30% { transform: scale(1.14) } 100% { transform: scale(1) } } @keyframes bt-knapp-puls { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.06) } } @keyframes bt-treffer-rein { from { transform: translateX(-12px) scale(.8); opacity: 0 } to { transform: none; opacity: 1 } } /* Beitritt: der Platz blendet ein, oben rechts ein kurzer Hinweis. */ .bt-platz.ist-neu { animation: bt-platz-rein .5s var(--ease-out) both } @keyframes bt-platz-rein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } .bt-beitritt { position: absolute; top: 8px; right: 10px; z-index: 3; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-650); color: var(--text-2); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; animation: bt-beitritt 2s var(--ease-out) both; pointer-events: none } @keyframes bt-beitritt { 0% { opacity: 0; transform: translateY(-6px) } 12% { opacity: 1; transform: none } 78% { opacity: 1 } 100% { opacity: 0 } } /* Elimination: die Spalte wird grau, quer darueber der Stempel. */ .bt-team--raus { opacity: .6; filter: grayscale(.7) } .bt-stempel { position: absolute; left: 50%; top: 42%; z-index: 4; padding: 6px 14px; border: 2px solid var(--red-ink); border-radius: var(--r-sm); background: rgba(15,18,22,.72); color: var(--red-ink); font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translate(-50%, -50%) rotate(-10deg); animation: bt-stempel .4s var(--ease-spring) both; pointer-events: none } @keyframes bt-stempel { from { transform: translate(-50%, -50%) rotate(-10deg) scale(1.7); opacity: 0 } to { transform: translate(-50%, -50%) rotate(-10deg) scale(1); opacity: 1 } } /* ── Ergebnis: die Overlay-Karte ueber der Arena ist seit dem Umbau weg — das Ende zeigt nur noch das grosse Ergebnisfeld (Block v3.62 Umbau). */ /* Jackpot: langsamer Auslauf ueber 4 s, der getroffene Anteil leuchtet. */ /* ── Handy: Kopf kompakt, Pot kleiner, Treffer-Reihe enger ─────────────── */ @media (max-width: 600px) { .bt-arena-kopf { padding: 8px 10px } .bt-pot { align-items: flex-start; margin: 0 } .bt-team__koepfe .bt-kopfbild { width: 36px; height: 36px } .bt-verlauf__kiste { width: 42px; height: 50px } .cs-strahlen { width: 360px; height: 360px; margin: -180px 0 0 -180px } /* Unschaerfe kostet auf dem Handy zu viel — dort bleibt das Bild scharf. */ .cs-band--laeuft .cs-kachel img { animation: none } } @media (hover: none) { .cs-karte:hover { box-shadow: none } } /* ── Reduzierte Bewegung: kein Blitz, kein Wackeln, kein Zoom, keine Strahlen ── */ @media (prefers-reduced-motion: reduce) { .bt-welle, #cs-oeffnen:not(:disabled), #cs-oeffnen.ist-wartet::before, .cs-blitz, .cs-aufbruch i, .cs-band--laeuft .cs-kachel img, .cs-band--laeuft ~ .cs-marke, .cs-buehne__innen.ist-wackeln, .bt-arena.ist-wackeln, .cs-strahlen, .cs-walze.ist-gelandet .cs-kachel.ist-treffer img, .cs-walze.ist-gelandet .cs-kachel.ist-treffer .cs-glow, .cs-gewinn, .bt-modchip--knapp, .bt-battle .bt-modchip[data-mod="lastchance"], .bt-platz.ist-neu, .bt-beitritt, .bt-stempel { animation: none } .cs-buehne__innen[data-zustand="laeuft"] { transform: none } .cs-buehne__innen, .cs-leerlauf, .cs-walzen, .bt-ripple { transition: none } .bt-ripple:active:not(:disabled) { transform: none } } html.reduziert .bt-welle, html.reduziert #cs-oeffnen:not(:disabled), html.reduziert #cs-oeffnen.ist-wartet::before, html.reduziert .cs-blitz, html.reduziert .cs-aufbruch i, html.reduziert .cs-band--laeuft .cs-kachel img, html.reduziert .cs-band--laeuft ~ .cs-marke, html.reduziert .cs-buehne__innen.ist-wackeln, html.reduziert .bt-arena.ist-wackeln, html.reduziert .cs-strahlen, html.reduziert .cs-walze.ist-gelandet .cs-kachel.ist-treffer img, html.reduziert .cs-walze.ist-gelandet .cs-kachel.ist-treffer .cs-glow, html.reduziert .cs-gewinn, html.reduziert .bt-modchip--knapp, html.reduziert .bt-battle .bt-modchip[data-mod="lastchance"], html.reduziert .bt-platz.ist-neu, html.reduziert .bt-beitritt, html.reduziert .bt-stempel { animation: none } html.reduziert .cs-buehne__innen[data-zustand="laeuft"] { transform: none } html.reduziert .cs-buehne__innen, html.reduziert .cs-leerlauf, html.reduziert .cs-walzen, html.reduziert .bt-ripple { transition: none } /* ═══════════════════════════════════════════════════════════════════════════ v3.62 UMBAU — Battles fuer Neulinge (Vorbilder DonutDrop und DonutLuck) ─────────────────────────────────────────────────────────────────────────── Uebersicht mit Zaehlern, Hilfe-Leiste und drei Abschnitten (Open seats, Live, Latest results); Zeilen mit Modus-Bild, Format, Modifikator-Chips mit Mini-Bild und markierter laufender Case. Erstellen in drei Spalten (Einstellungen | Case-Raster mit „+ Add" | „Your battle" mit einem Knopf), auf dem Handy einspaltig mit fester Leiste unten. Battle-Ansicht mit Warteleiste, grossem Ergebnisfeld (Winner gruen, Loss rot) und je Spieler einer Spalte aller Treffer. Dazu ⓘ-Tooltips und Popover. Versalien .04em, Bewegung nur auf transform und opacity; bei reduzierter Bewegung (System oder html.reduziert) bleibt alles ruhig. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Gruene Knoepfe: spiele.css macht .btn-play seitenbreit und laesst ihn gesperrt pulsieren (dort heisst gesperrt „Spiel laeuft"). Auf der Battles- Seite heisst gesperrt „es fehlt noch etwas" — also ruhig, und der Knopf ist so breit wie sein Text. Gepulst wird nur, solange der Server rechnet. */ #bt-wurzel .btn.btn-play { width: auto } #bt-wurzel .btn.btn-play.btn-full { width: 100% } #bt-wurzel .btn.btn-play:disabled { animation: none; cursor: not-allowed; opacity: .5; filter: grayscale(.5) } /* v3.65: Der Warte-Puls sitzt jetzt auf ::before (spiele.css) – hier wie bisher keiner; der Fortschrittsrand (ist-wartet) bleibt unberuehrt. */ #bt-wurzel .btn.btn-play:disabled:not(.ist-wartet)::before { content: none } #bt-wurzel .btn.btn-play.ist-wartet:disabled { cursor: default; opacity: .85; filter: none; animation: bt-warte-puls 1.1s ease-in-out infinite } @keyframes bt-warte-puls { 0%, 100% { opacity: .85 } 50% { opacity: .6 } } /* ── ⓘ-Tooltip: ein Knopf, der Text steht in data-tip (per CSS, kein Skript) ── */ .bt-tip { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); cursor: help; vertical-align: middle; flex-shrink: 0; transition: color .15s, border-color .15s } .bt-tip:hover, .bt-tip:focus-visible { color: var(--text); border-color: var(--text-2) } .bt-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } .bt-tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 60; width: max-content; max-width: 240px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--ink-650); color: var(--text); font: var(--t-klein); text-align: left; white-space: normal; box-shadow: 0 12px 28px -12px rgba(0,0,0,.85); opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out) } .bt-tip:hover::after, .bt-tip:focus::after { opacity: 1; transform: translate(-50%, 0) } /* ── Uebersicht: Kopf mit Reiter, Zaehlern, Hilfe-Knopf ────────────────── */ .bt-kopf--uebersicht .bt-kopf__text { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 3px } .bt-kopf--uebersicht .bt-kopf__text p { grid-column: 1 / -1; grid-row: 2; margin: 0 } .bt-kopf--uebersicht .bt-reiter { grid-column: 2; grid-row: 1; justify-self: start } .bt-kopf--uebersicht .bt-kopf__aktionen { align-items: center } .bt-reiter { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-850) } .bt-reiter__link { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; transition: color .15s, background .15s } .bt-reiter__link:hover { color: var(--text) } .bt-reiter__link.ist-an { background: var(--accent-dim); color: var(--accent-ink); cursor: default } .bt-reiter__link:focus-visible, .bt-hilfe-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } .bt-zaehlwerk { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-850); font: var(--t-etikett); letter-spacing: var(--ls-etikett); color: var(--muted); white-space: nowrap } .bt-zaehlwerk b { color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums } .bt-zaehlwerk .bt-status__puls { width: 7px; height: 7px; margin-right: 2px } .bt-zaehlwerk__punkt { width: 3px; height: 3px; border-radius: 50%; background: var(--faint) } .bt-hilfe-knopf { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink-850); color: var(--text-2); font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; transition: color .15s, border-color .15s } .bt-hilfe-knopf:hover, .bt-hilfe-knopf[aria-expanded="true"] { color: var(--accent-ink); border-color: rgba(124,92,255,.5) } /* ── Hilfe-Leiste „How battles work" ────────────────────────────────────── */ .bt-hilfe { margin-bottom: var(--s4); padding: 14px 16px; border: 1px solid rgba(124,92,255,.3); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(124,92,255,.13), rgba(124,92,255,.03) 60%), var(--ink-850); animation: bt-hilfe-rein .35s var(--ease-out) both } @keyframes bt-hilfe-rein { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } } .bt-hilfe__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: 10px } .bt-hilfe__kopf b { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--accent-ink) } .bt-hilfe__schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px } .bt-hilfe__schritt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(255,255,255,.03) } .bt-hilfe__bild { position: relative; flex-shrink: 0; width: 56px; height: 56px } .bt-hilfe__bild img { display: block; width: 56px; height: 56px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)) } .bt-hilfe__nr { position: absolute; left: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--ink-850) } .bt-hilfe__schritt b { display: block; font: var(--t-karte); color: var(--text) } .bt-hilfe__schritt small { display: block; margin-top: 2px; font: var(--t-klein); color: var(--muted) } /* ── Filter: Modus-Segment mit Mini-Bildern, Reihenfolge rechts ─────────── */ .bt-seg__bild { width: 18px; height: 18px; margin: -4px 5px -4px -4px; vertical-align: middle; filter: grayscale(.6); transition: filter .15s } .bt-seg__knopf.ist-an .bt-seg__bild, .bt-seg__knopf:hover .bt-seg__bild { filter: none } .bt-filter > .bt-seg { overflow-x: auto; scrollbar-width: none } .bt-filter > .bt-seg::-webkit-scrollbar { display: none } /* ── Drei Abschnitte ────────────────────────────────────────────────────── */ .bt-bereich { margin-top: var(--s5) } .bt-bereich .bt-abschnitt { flex-wrap: wrap; gap: 6px 10px; margin: 0 0 var(--s2) } .bt-bereich .bt-abschnitt h3 { display: inline-flex; align-items: center; gap: 8px; font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; color: var(--text) } .bt-bereich .bt-abschnitt small { font: var(--t-klein); color: var(--muted) } .bt-bereich[data-bereich="live"] .bt-abschnitt .zahl { color: var(--green-ink); background: var(--green-dim) } .bt-leer--bereich { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 16px; text-align: left } .bt-leer--bereich .btn { flex-shrink: 0 } /* ── Zeile als Karte: Modus-Bild und -Name, Format, Chips, Cases, Kosten ── */ .bt-zeile.bt-zeile--karte { grid-template-columns: minmax(230px, 1.2fr) minmax(0, 1fr) auto auto auto; padding: 12px 16px } .bt-zeile--karte .bt-zeile__modus { gap: 7px } .bt-zeile__titel { display: flex; align-items: center; gap: 8px; min-width: 0 } .bt-modbild { width: 32px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) } .bt-zeile__name { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--mc-ink, var(--accent-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .bt-format { padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--ink-850); color: var(--text-2); font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; white-space: nowrap } .bt-modchip--bild { padding: 3px 8px 3px 4px } .bt-modchip--bild img { width: 16px; height: 16px; margin: -3px 0 } .bt-zeile__mitte { display: flex; align-items: center; gap: 10px; min-width: 0 } .bt-zeile--karte .bt-kisten { flex-wrap: nowrap; overflow-x: auto; padding: 7px 2px; scrollbar-width: none } .bt-zeile--karte .bt-kisten::-webkit-scrollbar { display: none } .bt-zeile--karte .bt-kiste-mini { flex-shrink: 0 } /* Laufende Case: Dreiecke oben und unten wie bei DonutLuck, fertige treten zurueck. */ .bt-kiste-mini.ist-fertig { opacity: .45 } .bt-kiste-mini.ist-jetzt { border-color: var(--gold); box-shadow: 0 0 14px -2px rgba(245,196,106,.45) } .bt-kiste-mini.ist-jetzt::before, .bt-kiste-mini.ist-jetzt::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; border: 5px solid transparent; transform: translateX(-50%) } .bt-kiste-mini.ist-jetzt::before { top: -7px; border-top-color: var(--gold); border-bottom-width: 0 } .bt-kiste-mini.ist-jetzt::after { bottom: -7px; border-bottom-color: var(--gold); border-top-width: 0 } .bt-zeile--karte .bt-kosten b { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px } .bt-zeile--karte .bt-kosten small { letter-spacing: .04em } .bt-zeile--karte .bt-kosten__pot { text-transform: none; color: var(--text-2) } .bt-zeile--karte .bt-zeile__knopf .btn { min-width: 124px } .bt-zeile--karte .bt-zeile__knopf small { letter-spacing: .04em; text-transform: uppercase; color: var(--muted) } .bt-zeile--crazy { border-color: rgba(255,118,118,.28); background: linear-gradient(90deg, rgba(255,90,90,.13), rgba(255,90,90,.03) 60%), var(--ink-800) } .bt-zeile--crazy:hover { border-color: rgba(255,118,118,.45); background: linear-gradient(90deg, rgba(255,90,90,.17), rgba(255,90,90,.05) 60%), var(--ink-750) } /* ── About battles: ein Bild je Absatz ──────────────────────────────────── */ .bt-ueber__absatz { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px } .bt-ueber__absatz img { width: 40px; height: 40px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) } .bt-ueber .bt-ueber__absatz p { margin: 0 } /* ── Erstellen (v3.68, Vorbild DonutDrop): Kopf mit „‹ Lobby"-Pille, Schwert und Titel; drei Spalten 190 | 1fr | 250. Links Spieler-Kacheln (grosse Zahl), knappe Modus-Karten (28-px-Bild) und Modifikator-Zeilen; Mitte Werkzeugleiste (Suche, Official/Popular, Popular/Price, Richtung, Regal) und das Raster mit 4/3/2 Spalten; rechts „Selected · n/30" mit Ablage, Fast mode, Sitz-Zeile, Total cost und dem einen Create-Knopf. Radien 12 px, Flaechen ink-850/800, Rahmen --line, Akzent nur fuer Wahl und „+ Add case". */ .bt-kopf--bauen { align-items: center; gap: 6px var(--s3) } .bt-kopf--bauen > div:first-child { gap: 10px } .bt-zurueck--pille { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-750); color: var(--text-2); transition: background .15s, color .15s } .bt-zurueck--pille:hover { background: var(--ink-700); color: var(--text) } .bt-kopf__schwert { display: grid; place-items: center; width: 30px; height: 30px; color: var(--accent-ink) } .bt-kopf__schwert .ico { width: 24px; height: 24px } .bt-kopf--bauen .bt-kopf__h { font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase; color: var(--text) } .bt-kopf__satz { flex-basis: 100%; margin: 0; font: var(--t-klein); color: var(--muted) } .bt-bauen { display: grid; grid-template-columns: 200px minmax(0, 1fr) 250px; gap: var(--s4); align-items: start } .bt-bauen__links { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-850) } /* „Settings"-Klappe gibt es nur auf dem Handy; am Desktop gilt `ist-zu` nicht. */ .bt-bauen__klapp { display: none } .bt-bauen__inhalt { display: flex; flex-direction: column; gap: 14px } .bt-bauen__mitte { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-850) } .bt-bauen__rechts { position: sticky; top: 12px; min-width: 0 } .bt-block { display: flex; flex-direction: column; gap: 8px } .bt-block__titel { display: flex; align-items: center; margin: 0; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } /* Spieler: grosse Zahl, kleines Etikett; Team-Formate als schmale Reihe darunter */ .bt-format-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 6px } .bt-format-kacheln--teams { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) } .bt-format-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-800); color: var(--text-2); font: inherit; cursor: pointer; transition: border-color .15s, background .15s } .bt-format-kachel:hover { border-color: var(--line-2); background: var(--ink-750) } .bt-format-kachel:focus-visible, .bt-modus-karte__wahl:focus-visible, .bt-frage:focus-visible, .bt-case__bildknopf:focus-visible, .bt-richtung:focus-visible, .bt-bauen__klapp:focus-visible, .bt-auswahl__weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } .bt-format-kachel b { font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--text) } .bt-format-kachel small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); white-space: nowrap } .bt-format-kacheln--teams .bt-format-kachel { min-height: 42px; gap: 2px } .bt-format-kachel.ist-an { border-color: rgba(124,92,255,.7); background: var(--accent-dim); box-shadow: 0 0 0 1px rgba(124,92,255,.25) } .bt-format-kachel.ist-an b { color: var(--accent-ink) } /* Modus-Karten: 28-px-Bild, Name in Versalien, drei Woerter; gewaehlt violett, andere entsaettigt */ .bt-modi-liste { display: flex; flex-direction: column; gap: 6px } .bt-modus-karte { position: relative } .bt-modus-karte__wahl { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 6px 28px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-800); color: var(--text-2); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s } .bt-modus-karte__wahl:hover { border-color: var(--line-2) } .bt-modus-karte__wahl > span { min-width: 0 } .bt-modus-karte__bild { width: 28px; height: 28px; flex-shrink: 0; filter: grayscale(.85) brightness(.8); opacity: .75; transition: filter .25s, opacity .25s, transform .25s var(--ease-spring) } .bt-modus-karte__wahl:hover .bt-modus-karte__bild { filter: grayscale(.3); opacity: .95 } .bt-modus-karte__wahl b { display: block; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) } /* v3.69: Kurzsaetze duerfen umbrechen – mit dem Typo-System (.76rem) wurden sie sonst abgeschnitten („Highest total w…"). */ .bt-modus-karte__wahl small { display: block; margin-top: 1px; font: var(--t-klein); line-height: 1.25; color: var(--muted) } .bt-modus-karte.ist-an .bt-modus-karte__wahl { border-color: rgba(124,92,255,.7); background: linear-gradient(90deg, rgba(var(--mc), .16), rgba(var(--mc), .04)), var(--ink-850); box-shadow: 0 0 0 1px rgba(124,92,255,.25) } .bt-modus-karte.ist-an .bt-modus-karte__bild { filter: none; opacity: 1; transform: scale(1.06) } .bt-modus-karte.ist-an .bt-modus-karte__wahl b { color: var(--mc-ink) } .bt-frage { position: absolute; top: 50%; right: 6px; width: 18px; height: 18px; margin-top: -9px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink-800); color: var(--muted); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); cursor: pointer; transition: color .15s, border-color .15s } .bt-frage:hover, .bt-frage[aria-expanded="true"] { color: var(--text); border-color: var(--text-2) } .bt-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(260px, 88vw); padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--ink-650); color: var(--text-2); font: var(--t-klein); box-shadow: 0 16px 36px -14px rgba(0,0,0,.9); animation: bt-pop-auf .18s var(--ease-out) both } .bt-pop b { display: block; margin-bottom: 3px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--mc-ink, var(--accent-ink)) } .bt-pop[hidden] { display: none } @keyframes bt-pop-auf { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } } /* Modifikatoren: 24-px-Bild, Name in Versalien, kurzer Satz, Schalter; Borrow mit Schieber */ .bt-mods { display: flex; flex-direction: column; gap: 6px } .bt-mod { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 8px 7px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-800); transition: border-color .15s, background .15s } .bt-mod.ist-an { border-color: rgba(124,92,255,.5); background: var(--accent-dim) } .bt-mod__bild { width: 24px; height: 24px; filter: grayscale(.8) brightness(.85); transition: filter .2s } .bt-mod.ist-an .bt-mod__bild { filter: none } .bt-mod__text { min-width: 0 } .bt-mod__text b { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text); white-space: nowrap } .bt-mod__text small { display: block; font: var(--t-klein); line-height: 1.25; color: var(--muted) } .bt-mod .bt-tip { width: 13px; height: 13px; margin-left: 3px; vertical-align: 1px } .bt-mod__wert { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text) } .bt-mod--leihen .bt-leih-box { grid-column: 1 / -1; margin: 2px 0 0; padding: 0; border: 0; background: none } .bt-toggle { appearance: none; position: relative; width: 30px; height: 18px; margin: 0; border-radius: 999px; background: var(--ink-650); cursor: pointer; flex-shrink: 0; transition: background .2s } .bt-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease-out) } .bt-toggle:checked { background: var(--accent) } .bt-toggle:checked::after { transform: translateX(12px) } .bt-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } /* Mitte: Werkzeugleiste — Suche, zwei Segmente, Richtung, Regal-Auswahl */ .bt-werkzeug { display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .bt-werkzeug--bauen .bt-suche { flex: 1 1 220px; min-width: 160px; min-height: 36px; border-radius: 10px; background: var(--ink-800) } .bt-werkzeug--bauen .bt-suche .input { font-size: .8rem; appearance: none; -webkit-appearance: none; box-shadow: none } .bt-seg--bauen { padding: 3px; border-radius: 10px; background: var(--ink-800) } .bt-seg--bauen .bt-seg__knopf { padding: 6px 10px; border-radius: 7px } .bt-seg--bauen .bt-seg__knopf.ist-an { background: var(--ink-650); color: var(--text); box-shadow: 0 0 0 1px rgba(124,92,255,.55) inset } .bt-richtung { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-800); color: var(--text-2); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s } .bt-richtung:hover { color: var(--text); border-color: var(--line-2) } .bt-wahl-regal { min-height: 32px; max-width: 150px; border-radius: 10px } /* Raster: 4 Spalten ab 1280 px, 3 ab 1000 px, sonst 2 */ .bt-case-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px } @media (min-width: 1000px) { .bt-case-raster { grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (min-width: 1280px) { .bt-case-raster { grid-template-columns: repeat(4, minmax(0, 1fr)) } } .bt-case { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 10px 10px; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(90% 55% at 50% 22%, rgba(var(--kt-rgb, 124,92,255), .14), transparent 70%), var(--ink-800); transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s } .bt-case:hover { border-color: var(--line-2); transform: translateY(-2px) } .bt-case.ist-drin { border-color: rgba(124,92,255,.6); box-shadow: 0 0 0 1px rgba(124,92,255,.25), 0 10px 26px -16px rgba(124,92,255,.7) } .bt-case__zahl { position: absolute; top: 8px; right: 8px; z-index: 1; min-width: 28px; padding: 4px 7px; border-radius: 999px; background: var(--accent); color: #fff; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; text-align: center; box-shadow: 0 4px 10px -4px rgba(124,92,255,.8); animation: bt-abzeichen .35s var(--ease-spring) both } @keyframes bt-abzeichen { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } } /* Das Bild ist der Knopf fuer „What is inside" (Popover) */ .bt-case__bildknopf { display: block; padding: 2px; border: 0; border-radius: 10px; background: none; cursor: pointer } .bt-case__bild { display: block; width: 96px; height: 96px; transition: transform .3s var(--ease-spring) } .bt-case:hover .bt-case__bild { transform: translateY(-3px) scale(1.04) } .bt-case__name { max-width: 100%; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bt-preis--gruen { padding: 0; border: 0; background: none; color: var(--green-ink) } .bt-preis--gruen .ico { width: 15px; height: 15px; color: var(--accent-ink) } .bt-case__fuss { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-top: 4px } #bt-wurzel .bt-case .btn.bt-case__add { width: 100%; min-height: 34px; border-radius: 8px; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums } .bt-case .bt-zaehler { justify-content: center; min-height: 34px; margin-top: 0 } /* „What is inside": Popover am , Lage per Skript am Bild */ .bt-drops-pop { position: fixed; z-index: 120; width: min(320px, calc(100vw - 16px)); max-height: min(440px, calc(100vh - 16px)); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--ink-800); box-shadow: 0 24px 60px -20px rgba(0,0,0,.9); animation: bt-pop-auf .18s var(--ease-out) both } .bt-drops-pop .btn.btn-play { min-height: 38px } .bt-drops-pop__kopf { display: flex; align-items: center; gap: 10px } .bt-drops-pop__kopf img { width: 44px; height: 44px; flex-shrink: 0 } .bt-drops-pop__kopf div { flex: 1; min-width: 0 } .bt-drops-pop__kopf b { display: block; font: var(--t-karte); color: var(--text) } .bt-drops-pop__kopf small { font: var(--t-klein); color: var(--muted) } .bt-drops-pop__zu { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--text-2); cursor: pointer } .bt-drops-pop__zu:hover { color: var(--text); border-color: var(--text-2) } .bt-drops-pop__liste { list-style: none; margin: 0; padding: 0 2px 0 0; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto } .bt-drops-pop__liste li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-sm); border-left: 2px solid var(--sf, var(--line-2)); background: rgba(var(--sf-rgb, 154,163,178), .07) } .bt-drops-pop__liste li.ist-gold { background: rgba(253,176,34,.09) } .bt-drops-pop__liste img { width: 32px; height: 32px } .bt-drops-pop__liste span { min-width: 0; font: var(--t-zeile); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bt-drops-pop__liste small { display: block; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--sf, var(--muted)) } .bt-drops-pop__liste b { font: var(--t-zahl-klein); color: var(--gold); font-variant-numeric: tabular-nums } .bt-drops-pop__liste em { min-width: 46px; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right } /* Rechts: „Selected · n/30" — Ablage, Fast mode, Sitz-Zeile, Total cost, Knopf */ .bt-bauen__rechts .bt-summe { position: static; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px } .bt-summe__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px } .bt-summe__titel { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text) } .bt-summe__titel b { font-family: var(--font-num); color: var(--accent-ink) } .bt-ablage { display: flex; flex-direction: column; min-height: 320px; border-radius: 10px } .bt-ablage.ist-leer { border: 1px dashed var(--line-2); background: var(--ink-850) } .bt-ablage__leer { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; text-align: center } .bt-ablage__plus { font: 300 2.6rem/1 var(--font-disp); color: var(--faint) } .bt-ablage__leer p { margin: 0; max-width: 180px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-auswahl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; max-height: 440px; overflow-y: auto; scrollbar-width: thin } .bt-auswahl__eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bild bild" "name name" "zaehler weg"; align-items: center; gap: 4px; padding: 8px 6px 6px; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(90% 50% at 50% 20%, rgba(var(--kt-rgb, 124,92,255), .14), transparent 70%), var(--ink-800); animation: bt-auswahl-rein .3s var(--ease-out) both } @keyframes bt-auswahl-rein { from { opacity: 0; transform: translateX(8px) } to { opacity: 1; transform: none } } .bt-auswahl__bild { grid-area: bild; position: relative; display: grid; place-items: center; height: 48px } .bt-auswahl__bild img { width: 44px; height: 44px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) } .bt-auswahl__zahl { position: absolute; top: -4px; right: 4px; padding: 3px 6px; border-radius: 999px; background: var(--accent); color: #fff; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums } .bt-auswahl__name { grid-area: name; min-width: 0; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bt-auswahl__name small { display: block; font: var(--t-etikett-klein); font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--green-ink) } .bt-auswahl .bt-zaehler--klein { grid-area: zaehler; gap: 3px; margin: 0 } .bt-zaehler--klein button { width: 24px; height: 24px } .bt-auswahl__weg { grid-area: weg; justify-self: end; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s } .bt-auswahl__weg:hover { color: var(--red-ink); border-color: rgba(255,118,118,.4) } .bt-summe__sitze { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-800) } .bt-summe__sitze-text { min-width: 0; font: var(--t-klein); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .bt-summe__sitze-text b { color: var(--text); font-family: var(--font-num) } .bt-summe__sitze-text small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .bt-summe__bots { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); cursor: pointer } .bt-summe__kosten { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 2px 2px 0 } .bt-summe__kosten small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-summe__betrag { display: inline-flex; align-items: center; gap: 6px; font: var(--t-zahl-gross); color: var(--text); font-variant-numeric: tabular-nums } .bt-summe__betrag .ico { width: 20px; height: 20px; color: var(--accent-ink) } .bt-summe__hinweis { flex-basis: 100%; color: var(--muted) } .bt-summe__aktion { display: flex; flex-direction: column; gap: 6px } .bt-summe__aktion-preis { display: none } .bt-summe .bt-summe__aktion .btn-full { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; border-radius: 10px; font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums } .bt-summe__warum:empty { display: none } .bt-summe__fuss { font: var(--t-klein) } /* ── Battle-Ansicht: Kopf mit Modus-Bild, Warteleiste ───────────────────── */ /* Der Modus steht jetzt mit Bild und Namen vorn — der Chip dahinter waere doppelt. */ .bt-arena-kopf .bt-oben__links > .bt-modchip[data-modus] { display: none } /* .bt-oben__mitte b (v3.47) macht jedes b zum Block — die Rundenzahl gehoert in die Zeile. */ .bt-warteleiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid rgba(124,92,255,.35); border-radius: var(--r-lg); background: linear-gradient(90deg, rgba(124,92,255,.12), transparent 70%), var(--ink-850) } .bt-warteleiste__puls { position: relative; width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--accent-ink) } .bt-warteleiste__puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-ink); animation: bt-puls 1.6s ease-out infinite } .bt-warteleiste__text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px } .bt-warteleiste__text b { font: var(--t-karte); color: var(--text) } .bt-warteleiste__text small { font: var(--t-klein); color: var(--muted) } .bt-warteleiste__text small span { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-2) } .bt-warteleiste .bt-aktionen { padding: 0; justify-content: flex-end } .bt-team .bt-platz--leer { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 10px, transparent 10px 20px) } /* ── Ergebnisfeld: Winner gruen, Loss rot, Schwerter dazwischen ─────────── */ .bt-ende { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(60% 80% at 50% 0%, rgba(74,222,128,.08), transparent 70%), var(--ink-850); animation: bt-ende-rein .5s var(--ease-out) both } @keyframes bt-ende-rein { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } .bt-ende__satz { display: flex; align-items: center; gap: 10px; margin: 0; font: var(--t-karte); color: var(--text-2); text-align: center } .bt-ende__satz img { width: 28px; height: 28px; flex-shrink: 0 } .bt-ende__satz b { color: var(--text) } .bt-ende__satz .bt-ende__summe { color: var(--gold); font-variant-numeric: tabular-nums } .bt-ende__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center } .bt-ende__knoepfe .btn-play { min-width: 230px } /* ── Je Spieler eine Spalte mit allen Treffern (Vorbild DonutDrop) ──────── Die Spalten teilen sich die volle Breite (--n = Zahl der Plaetze); ab vier Plaetzen haben sie eine Mindestbreite und die Reihe scrollt waagrecht. Kopf und Karten haben feste Hoehen: so steht Runde 3 in jeder Spalte auf derselben Hoehe und man vergleicht Zeile fuer Zeile. */ .bt-spieler { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); align-items: start; gap: 8px } .bt-spieler--viele { grid-template-columns: repeat(var(--n, 4), minmax(210px, 1fr)); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin } .bt-spalte { min-width: 0; padding: 10px; gap: 8px; border-top: 3px solid rgba(var(--tf-rgb), .8) } .bt-spalte .bt-spieler__kopf { min-height: 30px } .bt-spalte .bt-spieler__kopf .chat-lvl, .bt-spalte .bt-spieler__kopf .bt-botmarke { flex-shrink: 0 } .bt-spalte .bt-spieler__zeile { min-height: 24px; gap: 6px; flex-wrap: wrap } .bt-spalte.bt-spieler__karte--gewinner { border-color: rgba(74,222,128,.45); border-top-color: rgba(var(--tf-rgb), .8); background: linear-gradient(180deg, rgba(74,222,128,.07), var(--ink-800) 40%) } .bt-spalte.bt-spieler__karte--verlierer { opacity: .72 } .bt-spieler__zeile .ergebnis { display: inline-flex; align-items: center; gap: 3px } .bt-spalte__treffer { display: flex; flex-direction: column; gap: 8px } .bt-ende__sub { margin: -6px 0 0; font: var(--t-klein); color: var(--muted) } .bt-ende__sub b { color: var(--text); font-family: var(--font-num) } /* ── Tablet: Einstellungen (drei Bloecke nebeneinander) ueber dem Raster, „Selected" rechts ── */ @media (max-width: 1100px) { .bt-bauen { grid-template-columns: minmax(0, 1fr) 250px } .bt-bauen__links { grid-column: 1; grid-row: 1 } .bt-bauen__mitte { grid-column: 1; grid-row: 2 } .bt-bauen__rechts { grid-column: 2; grid-row: 1 / span 2 } .bt-bauen__inhalt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px } } @media (max-width: 720px) { /* Einspaltig gibt es kein links/Mitte/rechts — der Satz dazu fiele falsch aus. */ .bt-kopf__satz { display: none } .bt-bauen { grid-template-columns: 1fr } .bt-bauen__links, .bt-bauen__mitte, .bt-bauen__rechts { grid-column: 1; grid-row: auto } .bt-bauen__rechts { position: static } .bt-bauen__inhalt { grid-template-columns: 1fr } } /* ── Handy: einspaltig, Case-Raster zweispaltig, Create-Leiste klebt unten ── */ @media (max-width: 600px) { .bt-kopf--uebersicht .bt-kopf__aktionen { width: 100%; justify-content: space-between } /* v4.24 (D29): „Create battle" eine eigene volle Zeile unter Zaehlwerk und „?" — in einer Reihe mit dem nicht schrumpfenden Zaehlwerk (nowrap) war sein Text abgeschnitten (150 px in 133 px) und der Knopf lag am Rand. */ .bt-kopf--uebersicht .bt-kopf__aktionen .btn-play { flex: 1 1 100%; min-height: 44px } .bt-hilfe { padding: 12px } .bt-hilfe__schritt { padding: 8px 10px } .bt-hilfe__bild, .bt-hilfe__bild img { width: 44px; height: 44px } /* v4.24 (D29): „How battles work" ein Schritt je Zeile (Bild links, Text rechts) — drei ~95-px-Spalten liessen ein, zwei Woerter je Zeile, und „Winner takes the pot" lief ueber Kasten und Seitenrand. */ .bt-hilfe__schritte { grid-template-columns: minmax(0, 1fr) } /* v4.24 (D79): 16 px in Suchfeld und kleinen Auswahlen, sonst zoomt iOS Safari beim Antippen in die Seite und bleibt gezoomt. design.css setzt .input am Handy schon auf 16 px, verlor aber gegen diese spaeteren bzw. spezifischeren Regeln (.8rem / .78rem). */ .bt-suche .input, .bt-werkzeug--bauen .bt-suche .input, .input--klein { font-size: 16px } /* v4.24 (D84): Fingerziele. Segmente, Reiter und Drop-Filter waren 23 px hoch: 38 px plus eine unsichtbare Trefferflaeche (::before) ueber das Polster des Segments = 44 px, ohne dass die Leisten viel hoeher werden. Der ⓘ-Knopf bleibt ein 16-px-Kreis, trifft aber 36 px. */ .bt-seg__knopf, .bt-reiter__link, .cs-drops__tabs .bt-tab { position: relative; min-height: 38px } .bt-seg__knopf::before, .bt-reiter__link::before, .cs-drops__tabs .bt-tab::before { content: ""; position: absolute; inset: -3px 0 } .bt-tip::before { content: ""; position: absolute; inset: -10px; border-radius: 50% } .bt-filter { flex-direction: column; align-items: stretch } .bt-filter .bt-filter__rechts { width: auto; overflow: visible } .bt-leer--bereich { flex-direction: column; text-align: center } .bt-zeile.bt-zeile--karte { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "modus modus" "mitte mitte" "status status" "kosten knopf"; gap: 8px; padding: 10px } .bt-zeile--karte .bt-zeile__knopf { align-items: stretch } .bt-zeile--karte .bt-zeile__knopf .btn { min-width: 0; min-height: 44px } /* Erstellen: Einstellungen eingeklappt unter „Settings" (Klapp-Knopf nur hier), Kopfzeile ohne Hilfesatz, Ablage flacher, Create-Leiste klebt unten. */ .bt-bauen__links { gap: 10px; padding: 0; border: 0; background: none } .bt-bauen__klapp { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-850); color: var(--text); font: inherit; text-align: left; cursor: pointer } .bt-bauen__klapp > span { flex: 1; min-width: 0 } .bt-bauen__klapp b { display: block; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase } .bt-bauen__klapp small { display: block; font: var(--t-klein); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bt-bauen__pfeil { width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease-out) } .bt-bauen__klapp[aria-expanded="true"] .bt-bauen__pfeil { transform: rotate(-135deg); margin-top: 4px } .bt-bauen__inhalt { display: flex; flex-direction: column; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-850) } .bt-bauen__inhalt.ist-zu { display: none } .bt-modi-liste, .bt-mods { display: flex } .bt-werkzeug--bauen .bt-suche { flex-basis: 100% } .bt-wahl-regal { flex: 1; max-width: none } .bt-ablage { min-height: 140px } .bt-auswahl { max-height: 300px } .bt-case-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) } .bt-case__bild { width: 80px; height: 80px } .bt-case .btn, .bt-case .bt-zaehler button { min-height: 40px } .bt-bauen { padding-bottom: 96px } /* Die Seiten-Einblendung (seite-rein) laesst auf .page.active eine Transform- Matrix stehen — damit wird die Seite zum Bezug fuer position: fixed und die Create-Leiste laege am Seitenende statt ueber der Navigationsleiste. Im Erstellen auf dem Handy also keine Einblendung. */ #page-battles.page.active:has(.bt-bauen) { animation: none } .bt-summe__aktion { position: fixed; left: 0; right: 0; bottom: var(--handy-leiste, 68px); z-index: 40; flex-direction: row; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-2); background: rgba(15,18,22,.96); box-shadow: 0 -12px 30px -16px rgba(0,0,0,.9) } .bt-summe__aktion-preis { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0 } .bt-summe__aktion-preis small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-summe__aktion-preis b { font: var(--t-zahl); color: var(--gold); font-variant-numeric: tabular-nums } .bt-summe .bt-summe__aktion .btn-full { flex: 1; width: auto; min-height: 46px } .bt-summe__warum { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0; padding: 5px 16px; border-top: 1px solid var(--line); background: rgba(15,18,22,.96); text-align: center } body:has(.page.active .bt-summe__aktion) #rail-toggle { bottom: calc(var(--handy-leiste, 68px) + 80px) } .bt-warteleiste { padding: 10px 12px } .bt-warteleiste .bt-aktionen { width: 100%; justify-content: stretch } .bt-warteleiste .bt-aktionen .btn { flex: 1; min-height: 44px } .bt-ende { padding: 14px 10px } .bt-ende__knoepfe .btn { flex: 1 1 100%; min-height: 44px } .bt-spieler--viele { grid-template-columns: repeat(var(--n, 4), minmax(160px, 1fr)) } .bt-tip::after { max-width: min(240px, 70vw) } } /* ═══════════════════════════════════════════════════════════════════════════ ARENA 2 (v3.69) — Battle-Ansicht wie DonutLuck: Zellenraster, senkrechte Walzen, gruenes Landeband mit Wert-Chip, Countdown-Ring, goldenes Jackpot-Rad, Loss/Winner-Zellen, Spalten mit Zug-Zeilen ─────────────────────────────────────────────────────────────────────────── Nur die Battle-Ansicht (battleZeichnen und die Rundenlogik). Die aelteren Arena-Regeln (.bt-arena, .bt-team, .bt-platz, .cs-walze …) bleiben fuer die Cases-Buehne, die Startseite und die Tests; hier ueberschreibt .bt-a2-… sie mit gleicher oder hoeherer Spezifitaet, weiter hinten in der Datei. Bewegung nur auf transform und opacity — Ausnahme: der Countdown- Bogen (1 s stroke-dashoffset auf sechs kleinen SVGs). Das Walzenband ist das cs-band der Cases-Buehne und erbt dessen will-change; hier kommt kein neues dazu. Zustaende: Zelle .ist-bereit (Ready), .ist-gelandet (Band, Chip), .bt-platz--gewinner/--verlierer (Ergebnis); Kachel .ist-mitte (die an der Marke), .ist-treffer (die gelandete); Rad .ist-gelandet (Kopf leuchtet) und .ist-vorbei (gedimmt stehen lassen). v3.78 — Masse nach dem Vorbildvideo (1 Videopixel = 1 CSS-Pixel, gemessen): Zelle 250 = Kopf 58 + Walzenfenster 192, Kachel 88 mit Luecke 12 (Schritt 100), Arena hoechstens 1400 breit mit 1 px Fugen, gruenes Landeband 100 hoch mit feinen Linien, Wert-Chip 22 hoch bei Linie + 29. Alles ausser Kachel und Luecke haengt an --a2-s (Desktop 1, bis 900 px .85, bis 600 px .75); Kachel und Luecke bleiben glatte px, weil masse() in battles.js sie mit parseFloat liest und calc() dort nicht ankommt. Nur die Kachel an der Marke (.ist-mitte) steht gross und hell, die Nachbarn auf scale(.64)/.25 — wie im Vorbild. Keine Maske ueber der Walze (harter Schnitt) und keine Bewegungsunschaerfe mehr: die Filter-Animation machte jedes der 276 Bilder zu einer eigenen Compositor-Ebene (338 statt 48), und das Vorbild zeigt auch bei voller Fahrt scharfe Pixel. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Seltenheitsfarben auch ausserhalb der Arena (Zug-Zeilen, Chips) ─────── */ .bt-a2 [data-selten="common"] { --rc: #9aa3b2; --rc-rgb: 154,163,178 } .bt-a2 [data-selten="uncommon"] { --rc: #4ade80; --rc-rgb: 74,222,128 } .bt-a2 [data-selten="rare"] { --rc: #60a5fa; --rc-rgb: 96,165,250 } .bt-a2 [data-selten="epic"] { --rc: #a78bfa; --rc-rgb: 167,139,250 } .bt-a2 [data-selten="legendary"] { --rc: #f59e0b; --rc-rgb: 245,158,11 } .bt-a2 [data-selten="gold"] { --rc: #fdb022; --rc-rgb: 253,176,34 } .bt-a2-muenze { width: 14px; height: 14px; color: var(--accent-2); flex-shrink: 0 } /* ── Kopfzeile: Return + Einsatz | Case der Runde | Copy, Share, Fairness, Auge ── */ .bt-a2 { gap: 12px; width: 100%; max-width: 1400px; margin-inline: auto } .bt-a2 .bt-a2-kopf { grid-template-columns: 1fr auto 1fr; padding: 6px 4px; border: 0; background: transparent } .bt-a2-kopf .bt-zurueck { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px } .bt-a2-kopf .bt-a2-einsatz { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-750); color: var(--text) } .bt-a2-kopf .bt-a2-einsatz b { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text) } .bt-a2-kopf .bt-oben__rechts { gap: 8px } .bt-a2-titel { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0 } .bt-a2-titel b { display: block; max-width: 100%; font: var(--t-karte); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bt-a2-titel small { display: inline-flex; align-items: center; gap: 4px; font: var(--t-etikett-klein); font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted) } .bt-a2-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums } .bt-a2-auge { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(74,222,128,.4); background: rgba(74,222,128,.1); color: var(--green-ink); font: var(--t-zahl-klein); font-variant-numeric: tabular-nums } .bt-a2-kopie { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(74,222,128,.55); background: rgba(74,222,128,.12); color: var(--green-ink); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; animation: bt-a2-rein .4s var(--ease-out) both; transition: background .15s } .bt-a2-kopie:hover { background: rgba(74,222,128,.22) } .bt-a2-kopie:focus-visible, .bt-a2-join:focus-visible, .bt-a2-linie:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } @keyframes bt-a2-rein { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } } /* ── Infozeile: Pillen | Case-Streifen | Lage und Pot ────────────────────── */ .bt-a2-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-850) } .bt-a2-pillen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap } .bt-a2-pille { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 66px; height: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-800); text-align: center } .bt-a2-pille b { display: inline-flex; align-items: center; gap: 3px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text) } .bt-a2-pille b em { font-style: normal; color: var(--muted) } .bt-a2-pille small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .bt-a2-pille--modus b { color: var(--mc-ink, var(--accent-ink)) } .bt-a2-pille--runde b { font-family: var(--font-num); letter-spacing: 0; font-variant-numeric: tabular-nums } .bt-a2-pille--gold { border-color: rgba(245,196,106,.5); background: rgba(245,196,106,.08) } .bt-a2-pille--gold b { color: var(--gold) } .bt-a2-pille--pink { border-color: rgba(236,127,176,.5); background: rgba(236,127,176,.08) } .bt-a2-pille--pink b { color: #ec7fb0 } /* Case-Streifen: kleine Bilder, die aktuelle hell mit violettem Schein, fertige halb, kommende blass. */ .bt-a2 .bt-a2-verlauf { padding: 0; gap: 4px } .bt-a2 .bt-a2-verlauf .bt-verlauf__kiste { width: 36px; height: 36px; border: 0; background: transparent; box-shadow: none; opacity: .28; transform: scale(.82); transition: opacity .35s var(--ease-out), transform .35s var(--ease-spring) } .bt-a2 .bt-a2-verlauf .bt-verlauf__kiste img { width: 30px; height: 30px } .bt-a2 .bt-a2-verlauf .bt-verlauf__kiste small { display: none } .bt-a2 .bt-a2-verlauf .bt-verlauf__kiste.ist-fertig { opacity: .5 } .bt-a2 .bt-a2-verlauf .bt-verlauf__kiste.ist-jetzt { opacity: 1; transform: scale(1.12); background: radial-gradient(circle, rgba(124,92,255,.4), transparent 68%) } .bt-a2-lage { display: flex; align-items: center; gap: 12px; justify-self: end } .bt-a2-lage > b { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); white-space: nowrap } .bt-a2 .bt-a2-pot { align-items: flex-end; margin: 0 } /* ── Arena: Raster aus Zellen, Team-Reihen, Schwerter in der Mitte ───────── */ .bt-arena.bt-a2-arena { --a2-s: 1; --cs-kachel: 88px; --cs-luecke: 12px; --a2-fenster: calc(192px * var(--a2-s)); --a2-kopf: calc(58px * var(--a2-s)); --a2-band: calc(100px * var(--a2-s)); display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 1px; padding: 0; min-height: 0; border: 1px solid #2a2b30; border-radius: 12px; background: var(--ink-950); overflow: hidden; align-items: stretch } .bt-arena.bt-a2-arena[data-a2-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .bt-arena.bt-a2-arena[data-a2-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) } .bt-arena.bt-a2-arena[data-a2-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) } .bt-a2-arena .bt-team { position: relative; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 1px; min-width: 0; border-radius: 0; background: var(--ink-950); overflow: visible; box-shadow: none; transition: opacity .4s var(--ease-out), filter .4s } .bt-a2-arena .bt-team::before { display: none } .bt-a2-arena .bt-team--gewinner { box-shadow: none; animation: none } .bt-a2-arena .bt-team--verlierer { opacity: 1 } .bt-a2-arena .bt-team--gewinner::before { display: none } .bt-a2-arena .bt-a2-zelle { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--ink-900); isolation: isolate; overflow: hidden; opacity: 1 } .bt-a2-arena .bt-a2-zelle + .bt-a2-zelle { border-top: 0 } .bt-a2-arena .bt-a2-zelle::before { display: none } .bt-a2-arena .bt-a2-zelle.ist-neu { animation: bt-platz-rein .5s var(--ease-out) both } /* Kopf: Kopfbild mit Ring in Teamfarbe, Bot-Marke, Name; darunter Summe und Anteil. */ .bt-a2-arena .bt-a2-zelle__kopf { display: flex; align-items: center; gap: 8px; height: var(--a2-kopf); padding: 0 12px; background: var(--ink-850); border-bottom: 1px solid var(--line) } .bt-a2-arena .bt-a2-zelle__kopf .bt-team__koepfe { position: relative; flex-shrink: 0 } .bt-a2-arena .bt-a2-zelle__kopf .bt-a2-kopfbild { width: calc(32px * var(--a2-s)); height: calc(32px * var(--a2-s)); background: var(--ink-700); box-shadow: 0 0 0 2px rgb(var(--tf-rgb, 124,92,255)) } .bt-a2-arena .bt-a2-zelle__kopf .bt-a2-kopfbild.bt-kopfbild--leer { box-shadow: 0 0 0 1px var(--line-2); color: var(--faint); background: var(--ink-750) } .bt-a2-arena .bt-a2-zelle__kopf .bt-a2-kopfbild.bt-kopfbild--leer .ico { width: 16px; height: 16px } .bt-a2-arena .bt-a2-zelle__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0 } .bt-a2-arena .bt-a2-zelle__name { display: flex; align-items: center; gap: 5px; flex: none; min-width: 0; font: var(--t-klein); color: var(--text); white-space: nowrap } .bt-a2-arena .bt-a2-zelle__name > span { overflow: hidden; text-overflow: ellipsis } .bt-a2-arena .bt-a2-zelle__name .bt-team__du { font-style: normal } .bt-a2-bot { display: inline-grid; place-items: center; padding: 2px 4px; border-radius: 3px; background: var(--accent-dim); color: var(--accent-ink); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; flex-shrink: 0 } /* Vorbild: Summe 14 px (kein Token dazwischen), Muenze 16, Anteil 10 px. */ .bt-a2-arena .bt-a2-zelle__zahlen { display: flex; align-items: center; gap: 4px; font: var(--t-zahl-klein); font-size: .875rem; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap } .bt-a2-arena .bt-a2-zelle__zahlen .bt-platz__summe { font: inherit; color: var(--text) } .bt-a2-arena .bt-a2-zelle__zahlen .bt-a2-muenze { width: 16px; height: 16px } .bt-a2-anteil { margin-left: 4px; font: var(--t-etikett); font-family: var(--font-num); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--gold) } .bt-a2-anteil--pts { color: #4cc9f0 } .bt-a2-arena .bt-platz--leer .bt-a2-zelle__name { color: var(--muted) } .bt-a2-arena .bt-a2-zelle--ich .bt-a2-zelle__kopf { box-shadow: inset 0 2px 0 rgba(124,92,255,.75) } /* Krone der Gewinner sitzt am Kopfbild, innerhalb der Zelle. */ .bt-a2-arena .bt-a2-zelle__kopf .bt-krone { top: -3px; left: auto; right: -10px; transform: rotate(18deg) } .bt-a2-arena .bt-a2-zelle__kopf .bt-krone .ico { width: 15px; height: 15px } /* Koerper: der dunkle Raum fuer Walze, Landeband, Chip und Status — genau ein Walzenfenster hoch (Vorbild 192 px unter dem 58er Kopf). */ .bt-a2-koerper { position: relative; flex: 1; min-height: var(--a2-fenster); display: grid; place-items: center; background: rgb(17,18,23) } /* Gruenes Landeband quer ueber die Reihe — je Zelle, die Zellen stossen aneinander. Vorbild: 100 px Flaeche mit je einer feinen Linie oben und unten, dazu 8 px weicher Rand (zusammen 116); es erscheint ohne Einblenden, genau mit Chip und angehobenem Treffer. Helligkeit 1:1 nachgemessen (v-66.00, Spalten x=830 und x=1200, im Ruhezustand): Fenster rgb(20,20,26), Bandflaeche rgb(29,47,42), obere Linie rgb(39..42,59..61,49..54), untere rgb(28,68,47). Flaeche .14 ergibt ueber unserem Fenster rgb(25,47,38) — Gruen genau wie im Vorbild; die Linien wirken mit .16 ueber der Flaeche zusammen .278 = rgb(25,75,52). Vorher standen dort .11 und .3 (wirksam .377 = rgb(38,95,62)), also rund doppelt so helle Linien wie im Vorbild. */ .bt-a2-koerper::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--a2-band) + 16px); z-index: 0; transform: translateY(-50%); background: linear-gradient(180deg, rgba(74,222,128,0) 6.5%, rgba(74,222,128,.16) 7%, rgba(74,222,128,.16) 7.9%, rgba(74,222,128,0) 8.4%, rgba(74,222,128,0) 91.6%, rgba(74,222,128,.16) 92.1%, rgba(74,222,128,.16) 93%, rgba(74,222,128,0) 93.5%), linear-gradient(180deg, rgba(74,222,128,0), rgba(74,222,128,.14) 7%, rgba(74,222,128,.14) 93%, rgba(74,222,128,0)); opacity: 0; pointer-events: none } .bt-a2-zelle.ist-gelandet .bt-a2-koerper::before { opacity: 1 } /* Nachleuchten: die Linien stehen zuerst heller und dunkeln in 700 ms ab (Vorbild rgb(51,77,64) -> rgb(37,63,52)). Eine Auflage je Zelle, nur opacity. */ .bt-a2-koerper::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--a2-band) + 16px); z-index: 0; transform: translateY(-50%); background: linear-gradient(180deg, rgba(74,222,128,0) 6.5%, rgba(74,222,128,.14) 7%, rgba(74,222,128,.14) 7.9%, rgba(74,222,128,0) 8.4%, rgba(74,222,128,0) 91.6%, rgba(74,222,128,.14) 92.1%, rgba(74,222,128,.14) 93%, rgba(74,222,128,0) 93.5%); opacity: 0; pointer-events: none } .bt-a2-zelle.ist-gelandet .bt-a2-koerper::after { animation: bt-a2-band-nach .7s var(--ease-out) both } @keyframes bt-a2-band-nach { from { opacity: 1 } to { opacity: 0 } } /* Walze: senkrecht, fuellt den Koerper. Keine Maske — das Vorbild schneidet hart an Kopfunterkante und Zellenende ab. */ .bt-a2-arena .bt-a2-walze { position: absolute; inset: 0; z-index: 1; flex: none; height: auto; min-height: 0; overflow: hidden; -webkit-mask: none; mask: none } /* Nur die Kachel an der Marke steht gross und hell; die Nachbarn sind auf .64 verkleinert und zu .25 sichtbar (Vorbild). Der Wechsel dauert 100 ms (zwei bis drei Bilder) und betrifft je Schritt genau zwei Kacheln — deshalb auch waehrend der Fahrt bezahlbar. */ .bt-a2-arena .cs-kachel { width: var(--cs-kachel); height: var(--cs-kachel); opacity: .25; transform: scale(.64); transition: opacity .1s linear, transform .1s linear } .bt-a2-arena .cs-kachel.ist-mitte { opacity: 1; transform: none } .bt-a2-arena .cs-kachel img { width: 100%; height: 100%; filter: none } /* Keine Bewegungsunschaerfe: das Vorbild zeigt auch bei voller Fahrt scharfe Pixel, und die Filter-Animation machte jedes der 276 Bilder zu einer eigenen Compositor-Ebene (338 Ebenen statt 48). */ .bt-a2-arena .cs-band--laeuft .cs-kachel img { animation: none; filter: none } /* Und auch beim Landen nicht: das Vorbild laesst den Treffer nicht wachsen, er hebt sich nur ueber die Linie (siehe unten). Die Cases-Buehne behaelt ihren federnden Sprung — dort ist es eine einzelne grosse Kachel. */ .bt-a2-arena .cs-walze.ist-gelandet .cs-kachel.ist-treffer img { animation: none } /* Glow hinter dem Treffer: weich, rund, in der Seltenheitsfarbe — erst beim Landen. */ .bt-a2-arena .cs-glow { inset: -22%; border-radius: 50%; opacity: 0; --cs-glow-a: .55; -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%); mask: radial-gradient(circle, #000 18%, transparent 70%); transition: opacity .4s var(--ease-out) } .bt-a2-arena .cs-walze.ist-gelandet .cs-kachel.ist-treffer .cs-glow { opacity: 1; box-shadow: none; --cs-glow-a: .62 } /* Gelandet: der Treffer waechst nicht, er hebt sich um 12 px ueber die Linie; nur seine beiden Nachbarn wachsen in 300 ms auf volle Groesse und Helligkeit (alles Weitere liegt ohnehin ausserhalb des Fensters — vorher animierten 45 Kacheln je Walze mit, das waren 187 bewegte Ebenen beim Landen). */ .bt-a2-arena .cs-walze.ist-gelandet .cs-kachel:not(.ist-treffer) { opacity: .25 } .bt-a2-arena .cs-walze.ist-gelandet .cs-kachel.ist-treffer { opacity: 1; transform: translateY(calc(-12px * var(--a2-s))) } .bt-a2-arena .cs-walze.ist-gelandet .cs-kachel.ist-treffer + .cs-kachel, .bt-a2-arena .cs-walze.ist-gelandet .cs-kachel:has(+ .cs-kachel.ist-treffer) { opacity: 1; transform: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out) } .bt-a2-arena .cs-walze--gold::before { background: linear-gradient(180deg, transparent, rgba(253,176,34,.18), transparent) } /* Marke: die violette Linie quer durch die ganze Reihe, ohne Dreiecke, ohne Puls. */ /* Vorbild: eine durchgehende 2-px-Linie quer durch die ganze Reihe, ohne blasse Enden — aber mit weichem Schein. Farbe 1:1 nachgemessen (v-66.00, Spalten x=830 und x=1200): Spitze rgb(158..161,76..77,209..212), also #9f4ed0 und deutlich roter als unser --accent-2 (#9b7dff). Der Schein liegt im Vorbild bei +-4 px rund 14-18 Blaustufen ueber der Bandflaeche und laeuft bis +-12 px aus; v3.78 hatte ihn ganz gestrichen. */ .bt-a2-arena .bt-a2-marke { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); opacity: 1; background: #9f4ed0; box-shadow: 0 0 14px rgba(159,78,208,.62) } .bt-a2-arena .bt-a2-marke::before, .bt-a2-arena .bt-a2-marke::after { display: none } .bt-a2-arena .cs-band--laeuft ~ .cs-marke { animation: none } .bt-a2-arena .cs-strahlen { width: 260px; height: 260px; margin: -130px 0 0 -130px } /* Wert-Chip unter dem Treffer: Betrag in der Seltenheitsfarbe, springt beim Landen herein. */ .bt-a2-arena .bt-a2-wert { position: absolute; left: 50%; top: calc(50% + 29px * var(--a2-s)); z-index: 3; display: block; min-height: 0; padding: 0; opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity .25s var(--ease-out), transform .35s var(--ease-spring) } .bt-a2-zelle.ist-gelandet .bt-a2-wert { opacity: 1; transform: translate(-50%, 0) } .bt-a2-wert__chip { display: inline-flex; align-items: center; gap: calc(5px * var(--a2-s, 1)); height: calc(22px * var(--a2-s, 1)); padding: 0 calc(9px * var(--a2-s, 1)); border-radius: 5px; border: 1px solid rgba(var(--rc-rgb, 154,163,178), .35); background: rgba(15,18,22,.94); font: var(--t-zahl-klein); color: var(--rc, var(--text)); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0,0,0,.8) } .bt-a2-wert__chip b { font: inherit; color: inherit } .bt-a2-arena .bt-a2-wert__chip .bt-a2-muenze { width: calc(14px * var(--a2-s)); height: calc(14px * var(--a2-s)) } /* Statusflaeche ueber allem: Countdown-Ring, Ready, Lader, Loss/Winner. */ .bt-a2-status { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none } .bt-a2-status:empty { display: none } /* Solange eine Zelle Status zeigt (Ring, Ready, Lader), treten Marke und Walze zurueck. */ .bt-a2-arena .bt-a2-zelle.ist-status .bt-a2-marke { opacity: 0 } .bt-a2-arena .bt-a2-zelle.ist-status .bt-a2-walze { opacity: .35 } /* Waehrend Countdown und Ready ist das Fenster im Vorbild fast schwarz (gemessen rgb(10,9,12)), erst mit dem Lauf wird es wieder rgb(17,18,23). */ .bt-a2-arena .bt-a2-zelle.ist-status .bt-a2-koerper { background: rgb(10,9,12) } /* Waehrend des Jackpot-Rads (Lader) ist die Zelle leer und dunkel wie beim Vorbild. */ .bt-a2-arena .bt-a2-zelle.ist-dunkel .bt-a2-walze, .bt-a2-arena .bt-a2-zelle.ist-dunkel .bt-a2-wert, .bt-a2-arena .bt-a2-zelle.ist-dunkel .bt-a2-koerper::before, .bt-a2-arena .bt-a2-zelle.ist-dunkel .bt-a2-koerper::after { opacity: 0; animation: none } .bt-a2-arena .bt-a2-marke, .bt-a2-arena .bt-a2-walze { transition: opacity .3s var(--ease-out) } .bt-a2-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; animation: bt-a2-auf .3s var(--ease-spring) both } .bt-a2-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) } .bt-a2-ring__spur { fill: none; stroke: rgba(124,92,255,.22); stroke-width: 3 } .bt-a2-ring__bogen { fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: bt-a2-ring-ab 1s linear both } @keyframes bt-a2-ring-ab { from { stroke-dashoffset: 0 } to { stroke-dashoffset: 100 } } @keyframes bt-a2-auf { from { transform: scale(.7); opacity: 0 } to { transform: none; opacity: 1 } } .bt-a2-ring b { font: var(--t-zahl-gross); color: var(--accent-ink); font-variant-numeric: tabular-nums } .bt-a2-bereit { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--green-ink); animation: bt-a2-auf .3s var(--ease-spring) both } .bt-a2-lader { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--text-2); animation: bt-a2-drehen .9s linear infinite } @keyframes bt-a2-drehen { to { transform: rotate(360deg) } } /* Leere Zelle: Join violett mit Schein, darunter Call bot / Fill bots gruen umrandet. */ .bt-a2-frei { display: flex; flex-direction: column; align-items: center; gap: 10px } .bt-a2-join { min-width: 96px; padding: 12px 24px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #9b6bff, #7c5cff); color: #fff; font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: 0 0 22px rgba(124,92,255,.55), 0 6px 18px -8px rgba(0,0,0,.8); transition: transform .15s var(--ease-out), box-shadow .2s } .bt-a2-join:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(124,92,255,.75), 0 8px 20px -8px rgba(0,0,0,.8) } .bt-a2-linie { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 118px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(74,222,128,.45); background: transparent; color: var(--green-ink); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, border-color .15s } .bt-a2-linie:hover { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.75) } .bt-a2-frei__text { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } /* Gekreuzte Schwerter in der Mitte der Arena (zwischen den Reihen bzw. Zellen). */ /* Groesse mit --a2-s: auf dem Handy (Massstab .75) sassen 36 px sonst in einer 172er Zelle und wirkten ein Fuenftel zu gross. */ .bt-a2-schwerter { position: absolute; left: 50%; top: 50%; z-index: 6; display: grid; place-items: center; width: calc(36px * var(--a2-s, 1)); height: calc(36px * var(--a2-s, 1)); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgb(42,43,48); background: rgb(28,28,33); color: var(--accent-ink); pointer-events: none } .bt-a2-schwerter .ico { width: calc(17px * var(--a2-s, 1)); height: calc(17px * var(--a2-s, 1)) } .bt-a2-arena[data-teams="1"] .bt-a2-schwerter { display: none } /* Der alte Countdown-Vorhang wird zum unsichtbaren Live-Bereich fuer Screenreader. */ .bt-a2-arena .bt-a2-warten { position: absolute; inset: auto; left: 0; top: 0; z-index: 0; display: block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); background: none; backdrop-filter: none } /* Ergebnis: Verlierer dunkelrot mit „Loss" und 0, Gewinner gruen mit „Winner" und Betrag; die Walze tritt zurueck. */ .bt-a2-arena .bt-a2-zelle.bt-platz--verlierer, .bt-a2-arena .bt-a2-zelle.bt-platz--gewinner { opacity: 1; background: var(--ink-900) } .bt-a2-arena .bt-a2-zelle.bt-platz--verlierer .bt-a2-koerper { background: linear-gradient(180deg, #4d1332, #3a0e27) } .bt-a2-arena .bt-a2-zelle.bt-platz--gewinner .bt-a2-koerper { background: linear-gradient(180deg, #15652f, #0f4d25) } .bt-a2-arena .bt-a2-zelle.bt-platz--verlierer .bt-a2-koerper::before, .bt-a2-arena .bt-a2-zelle.bt-platz--gewinner .bt-a2-koerper::before, .bt-a2-arena .bt-a2-zelle.bt-platz--verlierer .bt-a2-koerper::after, .bt-a2-arena .bt-a2-zelle.bt-platz--gewinner .bt-a2-koerper::after { opacity: 0; animation: none } .bt-a2-arena .bt-a2-zelle.bt-platz--verlierer .bt-a2-walze, .bt-a2-arena .bt-a2-zelle.bt-platz--gewinner .bt-a2-walze { opacity: .2 } .bt-a2-arena .bt-a2-zelle.bt-platz--verlierer .bt-a2-wert, .bt-a2-arena .bt-a2-zelle.bt-platz--gewinner .bt-a2-wert { opacity: 0 } .bt-a2-arena .bt-a2-zelle.bt-platz--verlierer .bt-a2-marke, .bt-a2-arena .bt-a2-zelle.bt-platz--gewinner .bt-a2-marke { display: none } .bt-a2-arena .bt-a2-zelle.bt-platz--verlierer .cs-glow, .bt-a2-arena .bt-a2-zelle.bt-platz--gewinner .cs-glow { opacity: 0 } .bt-a2-ergebnis { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: bt-a2-auf .45s var(--ease-spring) both } .bt-a2-ergebnis small { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase } /* Loss-Zellen tragen nur das Wort — groesser, weil nichts darunter steht. */ .bt-platz--verlierer .bt-a2-ergebnis small { font: var(--t-knopf) } .bt-a2-ergebnis b { display: inline-flex; align-items: center; gap: 5px; font: var(--t-zahl-gross); font-variant-numeric: tabular-nums } .bt-a2-ergebnis em { display: inline-flex; align-items: center; gap: 4px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; opacity: .8 } .bt-a2-ergebnis .bt-a2-muenze { color: currentColor; opacity: .8 } .bt-platz--verlierer .bt-a2-ergebnis { color: #ff7d9c } .bt-platz--verlierer .bt-a2-ergebnis b { color: #ffa3b8 } .bt-platz--gewinner .bt-a2-ergebnis { color: #6ee7a0 } .bt-platz--gewinner .bt-a2-ergebnis b { color: #c4ffd9; text-shadow: 0 0 18px rgba(74,222,128,.55) } /* Rundensieger und Close call pulsieren die Summen in den Zellenkoepfen (statt der alten Teamsumme). */ .bt-a2-arena .bt-team.ist-rundensieger .bt-platz__summe { animation: bt-rundensieger .9s var(--ease-out) both } .bt-a2-arena.ist-knapp .bt-platz__summe { animation: bt-knapp-puls 1.1s ease-in-out infinite } /* Ausgeschiedene (Elimination): grau wie bisher, der Stempel sitzt in der Reihe. */ .bt-a2-arena .bt-team--raus .bt-a2-zelle__kopf { opacity: 1; filter: none } /* ── Warteleiste, Ergebniszeile ──────────────────────────────────────────── */ .bt-a2 .bt-a2-warteleiste { padding: 10px 14px } .bt-a2 .bt-a2-ende { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--ink-850) } .bt-a2 .bt-a2-ende .bt-ende__sub { display: inline; margin: 0 0 0 8px } .bt-a2 .bt-a2-ende .bt-ende__knoepfe .btn-play { min-width: 0 } /* ── Unten: je Spieler eine Spalte, darunter die Zug-Zeilen ──────────────── */ .bt-a2 .bt-a2-unten { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-900); overflow: hidden; align-items: start } .bt-a2 .bt-a2-unten.bt-spieler--viele { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); overflow-x: hidden; padding-bottom: 0 } .bt-a2 .bt-a2-spalte { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 10px 10px; border: 0; border-radius: 0; background: transparent; opacity: 1; transition: background .4s var(--ease-out) } .bt-a2 .bt-a2-spalte + .bt-a2-spalte { border-left: 1px solid var(--line) } .bt-a2 .bt-a2-spalte__kopf { flex-direction: column; justify-content: center; gap: 8px; min-height: 0; text-align: center } .bt-a2 .bt-a2-spalte__kopf .bt-a2-kopfbild--gross { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgb(var(--tf-rgb, 124,92,255)) } .bt-a2 .bt-a2-spalte__kopf .bt-a2-kopfbild--gross.bt-kopfbild--leer { box-shadow: 0 0 0 1px var(--line-2); color: var(--faint); background: var(--ink-750) } .bt-a2 .bt-a2-spalte__kopf .bt-a2-kopfbild--gross.bt-kopfbild--leer .ico { width: 20px; height: 20px } .bt-a2-spalte__name { display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; font: var(--t-zeile); color: var(--text); white-space: nowrap } .bt-a2-spalte__name > span { overflow: hidden; text-overflow: ellipsis } .bt-a2 .bt-a2-spalte__zeile { justify-content: center; gap: 3px; min-height: 0; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; flex-wrap: wrap } .bt-a2 .bt-a2-spalte__zeile .summe { color: var(--text) } /* flex-basis 100 % gibt beiden eine eigene Zeile — ohne text-align stand der Text darin links, obwohl Bild, Name und Summe mittig sitzen. */ .bt-a2 .bt-a2-spalte__zeile .anteil { flex-basis: 100%; margin-top: 4px; text-align: center; font: var(--t-etikett-klein); font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--gold) } .bt-a2 .bt-a2-spalte__zeile .punkte { flex-basis: 100%; margin-top: 4px; text-align: center; font: var(--t-etikett-klein); font-family: var(--font-num); font-variant-numeric: tabular-nums; color: #4cc9f0 } .bt-a2 .bt-a2-spalte__ergebnis { align-self: center; padding: 0; background: none; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase } .bt-a2 .bt-a2-spalte.ist-gewinner { background: linear-gradient(180deg, rgba(74,222,128,.16), rgba(74,222,128,.03) 70%) } .bt-a2 .bt-a2-spalte.ist-gewinner .bt-a2-spalte__ergebnis { color: var(--green-ink) } .bt-a2 .bt-a2-spalte.ist-verlierer .bt-a2-spalte__ergebnis { color: #ff7d9c } .bt-a2 .bt-a2-spalte.bt-spieler__karte--verlierer { opacity: 1 } .bt-a2 .bt-a2-liste { display: flex; flex-direction: column; gap: 8px; max-height: 420px; margin-top: 6px; padding-right: 2px; overflow-y: auto; scrollbar-width: thin } .bt-a2 .bt-a2-liste:empty { display: none } /* Der leere Ergebnisplatz trug bisher eine volle 12-px-Fuge zwischen Arena und Spielerleiste; im Vorbild liegen dort insgesamt nur 17 px. */ #bt-ende-platz:empty { display: none } .bt-a2-zug { position: relative; display: flex; align-items: center; box-sizing: border-box; gap: 10px; min-width: 0; min-height: 48px; padding: 6px 10px 6px 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-850) } /* Der Seltenheitsbalken ist im Vorbild eingerueckt und gerundet, nicht der ganze linke Rand: 3 px breit, oben und unten rund 6 px frei. */ .bt-a2-zug::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: calc(100% - 12px); transform: translateY(-50%); border-radius: 999px; background: rgb(var(--rc-rgb, 154,163,178)); pointer-events: none } /* Das Motiv sitzt im Vorbild in einer eigenen dunklen Kachel (34 aussen, rund 22 Motiv) — vorher schwebte das Bild frei auf der Zeile. */ .bt-a2-zug img { box-sizing: border-box; width: 34px; height: 34px; padding: 6px; flex-shrink: 0; border-radius: 8px; background: var(--ink-800); filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)) } .bt-a2-zug__text { display: flex; flex-direction: column; gap: 3px; min-width: 0 } .bt-a2-zug__text b { font: var(--t-klein); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } /* Der Wert steht im Vorbild immer gruen, auch bei violetter Seltenheit (gemessen an „Skeleton Spawner 5M"); die Farbe traegt allein der Balken. */ .bt-a2-zug__text small { display: inline-flex; align-items: center; gap: 3px; font: var(--t-etikett-klein); font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--green-ink) } .bt-a2-zug.ist-neu { animation: bt-a2-zug-rein .4s var(--ease-spring) both } @keyframes bt-a2-zug-rein { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } } /* ── Jackpot-Rad: goldener Rahmen, Koepfe mit Summe und Anteil, goldene Marke mit Abzeichen ── */ .bt-a2-rad { position: relative; width: min(100%, 800px); height: 150px; margin: 2px auto 4px; border-radius: 12px; border: 2px solid rgba(245,196,106,.75); background: rgba(15,18,22,.92); box-shadow: 0 0 30px rgba(245,196,106,.35), 0 0 80px -10px rgba(245,196,106,.45), inset 0 0 40px rgba(0,0,0,.6); overflow: hidden; animation: bt-a2-rad-rein .5s var(--ease-spring) both; transition: opacity .8s var(--ease-out) } @keyframes bt-a2-rad-rein { from { opacity: 0; transform: translateY(-10px) scale(.97) } to { opacity: 1; transform: none } } .bt-a2-rad.ist-vorbei { opacity: .25 } .bt-a2-rad__band { position: absolute; top: 0; bottom: 0; left: 0; display: flex; transform: translateX(0) } .bt-a2-rad__band--laeuft { transition: transform 4s cubic-bezier(.08, .8, .1, 1) } .bt-a2-rad__kopf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 138px; height: 100%; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,.06); text-align: center; transition: opacity .4s var(--ease-out) } .bt-a2-rad__kopf .bt-a2-kopfbild--rad { width: 64px; height: 64px; margin-bottom: 4px; border-radius: 10px; background: var(--ink-750); box-shadow: 0 0 0 1px rgba(255,255,255,.1) } .bt-a2-rad__kopf b { display: inline-flex; align-items: center; gap: 3px; font: var(--t-zahl-klein); color: var(--green-ink); font-variant-numeric: tabular-nums } .bt-a2-rad__kopf small { font: var(--t-etikett-klein); font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted) } .bt-a2-rad.ist-gelandet .bt-a2-rad__kopf:not(.ist-treffer) { opacity: .4 } .bt-a2-rad__kopf.ist-treffer .bt-a2-kopfbild--rad { box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(245,196,106,.85) } .bt-a2-rad__marke { position: absolute; left: 50%; top: 0; bottom: 0; z-index: 3; width: 3px; transform: translateX(-50%); background: var(--gold); box-shadow: 0 0 10px rgba(245,196,106,.9); pointer-events: none } .bt-a2-rad__marke i { position: absolute; left: 50%; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; transform: translateX(-50%); background: var(--gold); color: #2a1d05; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.5) } /* ── Schmaler Desktop / Tablet (≤900px): derselbe Aufbau, Masstab .85 ───── */ @media (max-width: 900px) { .bt-arena.bt-a2-arena { --a2-s: .85; --cs-kachel: 74px; --cs-luecke: 11px } } /* ── Handy (≤600px): Kopf zweizeilig, Zellen zu zweit, Masstab .75, Spalten wischbar ── */ @media (max-width: 600px) { .bt-a2 .bt-a2-kopf { grid-template-columns: 1fr; grid-template-areas: "links" "rechts" "mitte"; gap: 8px; padding: 2px 0 } .bt-a2 .bt-a2-kopf .bt-oben__links { grid-area: links; flex-wrap: nowrap } .bt-a2 .bt-a2-kopf .bt-oben__rechts { grid-area: rechts; justify-content: flex-start; flex-wrap: wrap; row-gap: 6px } .bt-a2 .bt-a2-kopf .bt-a2-kopie { white-space: nowrap } .bt-a2 .bt-a2-kopf .bt-a2-titel { grid-area: mitte } .bt-a2 .bt-a2-kopf .bt-zurueck { padding: 8px 0; font-size: 0; letter-spacing: 0 } .bt-a2 .bt-a2-kopf .bt-zurueck::before { content: "‹ Back"; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); font-variant-numeric: tabular-nums; white-space: nowrap } .bt-a2 .bt-a2-kopf .bt-a2-knopf { padding: 8px 9px } .bt-a2 .bt-a2-lage { justify-self: stretch; justify-content: space-between } .bt-a2 .bt-a2-pille { min-width: 56px; height: 40px; padding: 0 8px } /* Masstab .75: Kachel 66 + Luecke 10 (Schritt 76), Fenster 144, Kopf 43, Band 75, Chip bei Linie + 22 — dasselbe Verhaeltnis wie im Vorbild. Zwei Zellen je Reihe statt drei: bei 375 px waere eine Zelle sonst 113 px breit und der Name nicht mehr lesbar. */ .bt-arena.bt-a2-arena { --a2-s: .75; --cs-kachel: 66px; --cs-luecke: 10px } .bt-arena.bt-a2-arena[data-a2-spalten="3"], .bt-arena.bt-a2-arena[data-a2-spalten="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .bt-a2-arena .bt-team[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .bt-a2-arena .bt-a2-zelle__kopf { gap: 7px; padding: 0 8px } .bt-a2 .bt-a2-info { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px } .bt-a2-join { min-width: 84px; padding: 11px 18px } .bt-a2-linie { min-width: 0; padding: 8px 10px } .bt-a2 .bt-a2-unten, .bt-a2 .bt-a2-unten.bt-spieler--viele { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch } .bt-a2 .bt-a2-spalte { flex: 0 0 150px } .bt-a2 .bt-a2-liste { max-height: 260px } .bt-a2-rad { height: 122px } .bt-a2-rad__kopf { width: 96px } .bt-a2-rad__kopf .bt-a2-kopfbild--rad { width: 44px; height: 44px } .bt-a2 .bt-a2-ende { padding: 10px 12px } } /* ── Reduzierte Bewegung (System oder html.reduziert): kein Ring-Bogen, kein Lader, keine Einblendungen, kein Rad-Auslauf ── */ @media (prefers-reduced-motion: reduce) { .bt-a2-ring, .bt-a2-ring__bogen, .bt-a2-bereit, .bt-a2-lader, .bt-a2-ergebnis, .bt-a2-kopie, .bt-a2-rad, .bt-a2-zug.ist-neu, .bt-a2-arena .bt-a2-zelle.ist-neu, .bt-a2-arena .bt-team.ist-rundensieger .bt-platz__summe, .bt-a2-arena.ist-knapp .bt-platz__summe, .bt-a2-koerper::after { animation: none } .bt-a2-rad__band--laeuft, .bt-a2 .bt-a2-verlauf .bt-verlauf__kiste, .bt-a2-arena .cs-kachel, .bt-a2-arena .bt-a2-wert, .bt-a2-arena .cs-glow, .bt-a2-join, .bt-a2-rad, .bt-a2-rad__kopf, .bt-a2 .bt-a2-spalte, .bt-a2-arena .bt-team { transition: none } .bt-a2-ring__bogen { stroke-dashoffset: 0 } } html.reduziert .bt-a2-ring, html.reduziert .bt-a2-ring__bogen, html.reduziert .bt-a2-bereit, html.reduziert .bt-a2-lader, html.reduziert .bt-a2-ergebnis, html.reduziert .bt-a2-kopie, html.reduziert .bt-a2-rad, html.reduziert .bt-a2-zug.ist-neu, html.reduziert .bt-a2-arena .bt-a2-zelle.ist-neu, html.reduziert .bt-a2-arena .bt-team.ist-rundensieger .bt-platz__summe, html.reduziert .bt-a2-arena.ist-knapp .bt-platz__summe, html.reduziert .bt-a2-koerper::after { animation: none } html.reduziert .bt-a2-rad__band--laeuft, html.reduziert .bt-a2 .bt-a2-verlauf .bt-verlauf__kiste, html.reduziert .bt-a2-arena .cs-kachel, html.reduziert .bt-a2-arena .bt-a2-wert, html.reduziert .bt-a2-arena .cs-glow, html.reduziert .bt-a2-join, html.reduziert .bt-a2-rad, html.reduziert .bt-a2-rad__kopf, html.reduziert .bt-a2 .bt-a2-spalte, html.reduziert .bt-a2-arena .bt-team { transition: none } html.reduziert .bt-a2-ring__bogen { stroke-dashoffset: 0 } /* ── Reduzierte Bewegung: keine Einblendungen, keine Pulse ──────────────── */ @media (prefers-reduced-motion: reduce) { .bt-hilfe, .bt-pop, .bt-drops-pop, .bt-case__zahl, .bt-auswahl__eintrag, .bt-ende, .bt-warteleiste__puls::after, #bt-wurzel .btn.btn-play.ist-wartet:disabled { animation: none } .bt-tip::after, .bt-case, .bt-case__bild, .bt-format-kachel, .bt-modus-karte__bild, .bt-modus-karte__wahl, .bt-mod, .bt-mod__bild, .bt-toggle, .bt-toggle::after, .bt-richtung, .bt-zurueck--pille, .bt-bauen__pfeil, .bt-auswahl__weg { transition: none } .bt-case:hover, .bt-format-kachel:hover { transform: none } .bt-case:hover .bt-case__bild { transform: none } } html.reduziert .bt-hilfe, html.reduziert .bt-pop, html.reduziert .bt-drops-pop, html.reduziert .bt-case__zahl, html.reduziert .bt-auswahl__eintrag, html.reduziert .bt-ende, html.reduziert .bt-warteleiste__puls::after, html.reduziert #bt-wurzel .btn.btn-play.ist-wartet:disabled { animation: none } html.reduziert .bt-tip::after, html.reduziert .bt-case, html.reduziert .bt-case__bild, html.reduziert .bt-format-kachel, html.reduziert .bt-modus-karte__bild, html.reduziert .bt-modus-karte__wahl, html.reduziert .bt-mod, html.reduziert .bt-mod__bild, html.reduziert .bt-toggle, html.reduziert .bt-toggle::after, html.reduziert .bt-richtung, html.reduziert .bt-zurueck--pille, html.reduziert .bt-bauen__pfeil, html.reduziert .bt-auswahl__weg { transition: none } html.reduziert .bt-case:hover, html.reduziert .bt-format-kachel:hover, html.reduziert .bt-case:hover .bt-case__bild { transform: none } /* ═══════════════════════════════════════════════════════════════════════════ HANDY-FEINSCHLIFF (v3.61) — Cases-Kopf, Live-Drops, Battles-Liste, Arena ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* ── 3 Cases-Detailkopf: Back links, Favorit + Share rechts, Titel darunter. Das Markup (battles.js) ist ein Flex-Kopf mit drei Kindern; das erste traegt Back UND Favorit. `display: contents` loest es auf, damit beide Knoepfe eigene Rasterzellen bekommen. Favorit wird zum Icon-Knopf (Text per font-size 0 weg, das Herz bleibt). */ .cs-detail .bt-kopf--schmal { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "zurueck fav teilen" "titel titel titel"; align-items: center; gap: 8px 6px; } .cs-detail .bt-kopf--schmal > div:first-child { display: contents } .cs-detail .bt-kopf--schmal .bt-zurueck { grid-area: zurueck; justify-self: start; min-height: 44px } .cs-detail .bt-kopf--schmal .bt-zurueck[data-fav] { grid-area: fav; justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.03); font-size: 0; letter-spacing: 0; } .cs-detail .bt-kopf--schmal .bt-zurueck[data-fav] .ico { width: 18px; height: 18px; margin: 0 } .cs-detail .bt-kopf--schmal .bt-oben__mitte { grid-area: titel; text-align: center; min-width: 0 } .cs-detail .bt-kopf--schmal .bt-oben__mitte b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cs-detail .bt-kopf--schmal > div:last-child { grid-area: teilen; justify-self: end } .cs-detail .bt-kopf--schmal > div:last-child .btn { min-height: 44px } .cs-menge .quick-bet { min-height: 44px } .cs-fav { width: 36px; height: 36px } /* ── 7 Live-Drops: Kacheln 84 px, Band wischt mit Schwung ─────────────── */ .cs-drops__kopf { flex-wrap: wrap; padding: 6px 10px } .cs-drops__band { gap: 6px; padding: 6px; min-height: 112px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; } .cs-drops__band::-webkit-scrollbar { display: none } .cs-drop { flex-basis: 84px; padding: 6px 3px 5px; scroll-snap-align: start } .cs-drop__bild, .cs-drop__bild img { width: 46px; height: 46px } /* ── 6 Battles-Uebersicht: jede Zeile eine Karte. Modus-Chips oben, dann die Cases in einer wischbaren Reihe, Status, unten Kosten links und der Knopf rechts (volle Hoehe, 44 px). */ .bt-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "modus modus" "kisten kisten" "status status" "kosten knopf"; gap: 8px; padding: 10px; } .bt-zeile__modus { grid-area: modus } .bt-zeile__chips { flex-wrap: wrap } .bt-kisten { grid-area: kisten; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bt-kisten::-webkit-scrollbar { display: none } .bt-zeile__status { grid-area: status; justify-content: flex-start; min-width: 0 } .bt-kosten { grid-area: kosten; text-align: left; min-width: 0; align-self: center } .bt-zeile__knopf { grid-area: knopf; align-items: stretch } .bt-zeile .btn { min-width: 0; min-height: 44px } /* ── 6 Arena: Kopfzeile kompakt (eine Spalte, linksbuendig), Teams untereinander (aeltere 600-px-Regel), Walzen 84 px, Kopfbilder 32 px. */ .bt-oben { grid-template-columns: 1fr; gap: 8px } .bt-oben__mitte { text-align: left } .bt-oben__rechts { justify-content: flex-start } .bt-oben__rechts .btn { min-height: 40px } .bt-pille { padding: 4px 8px } .bt-arena { --cs-kachel: 84px; --cs-luecke: 8px } .bt-team__koepfe .bt-kopfbild { width: 32px; height: 32px } /* Gewinn-Karten der Cases nie breiter als das Handy. */ .cs-overlay { padding: 10px } .cs-overlay__karten { max-width: 92vw; margin: auto } } /* Ohne Maus kein Hover-Hub — sonst bleibt die Kachel nach dem Tipp oben. */ @media (hover: none) { .cs-drop:hover { transform: none } .bt-zeile:hover { transform: none } }