/* Startseite „Spiele“ mit Kacheln */
.hub-title { margin: 6px 0 0; font-size: 28px; font-weight: 900; letter-spacing: -.3px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (pointer: coarse) and (min-width: 600px) and (orientation: landscape) { .tiles { grid-template-columns: repeat(4, 1fr); } } /* Tablet quer: alle Spiele in einer Reihe */
.tile { --t: #15803d; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .1s; }
.tile:active { transform: scale(.98); }
.tile-art { aspect-ratio: 1 / .78; max-width: 100%; border-radius: 12px; background: var(--t); display: grid; place-items: center; font-size: 40px; font-weight: 900; color: #fff; margin-bottom: 6px; }
.tile b { font-size: 16px; }
.tile small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }

/* Bestenliste */
.boardstrip { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.boardstrip span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boardstrip em { font-style: normal; color: #4ee08b; font-weight: 700; }
.blist { display: flex; flex-direction: column; gap: 6px; }
.brow { display: grid; grid-template-columns: 30px 30px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-variant-numeric: tabular-nums; }
.brow.me { outline: 2px solid var(--accent); outline-offset: -2px; }
.brow .rank { text-align: center; font-weight: 800; color: var(--muted); }
.brow .ava { width: 30px; height: 30px; border-radius: 50%; background: var(--a); color: #fff; display: grid; place-items: center; font-weight: 900; }
.brow b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .bnet { font-weight: 800; }
.bnet.pos { color: #4ee08b; } .bnet.neg { color: #ff7b7b; }
.brow.me .ava { color: #0b0b12; }

/* Ränge: wischbare Leiste und Detail */
.tiers { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 2px 16px; flex: none; }
.tier { flex: 0 0 104px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .18s cubic-bezier(.3,1.6,.5,1); }
.tier:active { transform: scale(.96); }
.tier.sel { border-color: var(--text); }
.tier.locked { color: var(--faint); }
.tier.locked .gem { opacity: .6; }
.tier-n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); }
.tier.cur .tier-n { color: var(--accent); }
.gem { color: var(--g); font-size: 26px; line-height: 1; display: inline-flex; }
.gem .crown { width: 28px; height: 28px; }
.tier b { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 14px; letter-spacing: -.02em; }
.tier small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.tier-info { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); background: var(--surface); }
.ti-head { display: flex; align-items: center; gap: 10px; }
.ti-head b { flex: 1; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 18px; }
.ti-state { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.tier-info .odds .bar { flex: 1; width: auto; }
.ti-bar { height: 6px; background: var(--sunken); border: 1px solid var(--line); }
.ti-bar i { display: block; height: 100%; }
.ti-line { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ti-line b { color: var(--text); font-weight: 600; }
.ti-rules { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-top: 4px; }
.ti-rules div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.ti-rules div + div { border-left: 1px solid var(--line); }
.ti-rules small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.ti-rules b { font-family: var(--display); font-weight: 800; font-size: 18px; }
.ti-rules .good { color: var(--good); } .ti-rules .bad { color: var(--bad); }
.ti-note { margin: 0; font-size: 12px; color: var(--muted); }
.tier-info small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; line-height: 1.6; }

/* Hinweis auf die Statistik-Seite und Seite selbst */
.swipehint { align-self: flex-end; display: flex; gap: 6px; align-items: center; padding: 8px 0; border: none; background: none; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.swipehint span { font-size: 16px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { translate: 4px 0; } }
.stat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chartbox { border: 1px solid var(--line); background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chart-head b { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.chart-head span, .chart-axis { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-axis { display: flex; justify-content: space-between; color: var(--faint); }
#netChart { width: 100%; height: auto; display: block; overflow: visible; }
#netChart .hit { fill: transparent; cursor: pointer; }
#netChart g.on .hit { fill: #f2f1ee0f; }
#netChart .up { fill: var(--good); }
#netChart .down { fill: var(--bad); }
#netChart .zero { stroke: var(--line-strong); stroke-width: 1; }

/* Chip-Shop */
button.bank { color: var(--text); font: inherit; cursor: pointer; display: flex; align-items: center; gap: 2px; }
.bank.buy b { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); color: var(--accent); font-weight: 700; }
.packs { display: flex; flex-direction: column; gap: 10px; }
.pack { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); background: var(--surface); }
.pack.hot { border-color: var(--accent); }
.pack { grid-template-columns: 64px 1fr auto auto !important; }
.pack .btn.free { min-width: 0; padding: 0 10px; border-color: var(--good); color: var(--good); }
.pack-art { height: 62px; display: flex; align-items: flex-end; justify-content: center; background: var(--sunken); padding-bottom: 6px; overflow: hidden; }
.pile { display: flex; align-items: flex-end; }
.pcol { display: flex; flex-direction: column-reverse; margin-left: -7px; z-index: calc(10 - var(--c)); }
.pcol:first-child { margin-left: 0; }
.pcol:nth-child(even) { margin-bottom: -3px; }
.chip.pchip { width: 20px; height: 20px; border-width: 2px; margin-top: -15px; box-shadow: 0 2px 0 #0009; cursor: default; flex: none; animation: chipdrop .4s cubic-bezier(.3,1.6,.5,1) both; }
.chip.pchip::before { inset: 1px; border-width: 1px; }
@keyframes chipdrop { from { transform: translateY(-30px); opacity: 0; } }
.pack-info b { display: block; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pack-info small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pack.hot .pack-info small { color: var(--accent); }
.pack .btn { flex: none; height: 44px; padding: 0 14px; min-width: 92px; }
.paynote { font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 12px; border: 1px dashed var(--line); }

/* Diagramme: Ringe, Leisten, Linie */
.chart-toggle { width: 100%; padding: 0; border: none; background: none; color: var(--text); cursor: pointer; text-align: left; }
.chart-toggle i { font-style: normal; margin-left: 6px; padding: 2px 6px; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--muted); vertical-align: 2px; }
#netChart .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .5s cubic-bezier(.3,1.5,.5,1) both; }
#netChart .bar.down { transform-origin: 50% 0; }
@keyframes grow { from { transform: scaleY(0); } }
#netChart .lineplot { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: draw .9s cubic-bezier(.3,.7,.3,1) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
#netChart .dot { stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: dotpop .4s cubic-bezier(.3,1.7,.5,1) both; }
#netChart .dot.up { fill: var(--good); } #netChart .dot.down { fill: var(--bad); } #netChart .dot.flat { fill: var(--faint); }
#netChart g.on .dot { r: 6; }
@keyframes dotpop { from { transform: scale(0); } }

.stat.donut { display: flex; align-items: center; gap: 16px; }
.donut svg { width: 104px; height: 104px; flex: none; overflow: visible; }
.donut .track { fill: none; stroke: var(--sunken); stroke-width: 12; }
.donut .seg { fill: none; stroke-width: 12; animation: ring .8s cubic-bezier(.3,.8,.3,1) both; }
@keyframes ring { from { stroke-dasharray: 0 var(--C); } }
.donut text { fill: var(--text); text-anchor: middle; }
.donut .dq { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 19px; }
.donut .dl { fill: var(--muted); font-family: var(--mono); font-size: 7px; letter-spacing: .15em; }
.dleg { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.dleg div { display: flex; align-items: center; gap: 8px; }
.dleg i { width: 10px; height: 10px; flex: none; }
.dleg span { flex: 1; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dleg b { font-size: 15px !important; display: inline !important; }

.lbar { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; }
.lbar span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbar b { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.ltrack { height: 10px; background: var(--sunken); overflow: hidden; }
.ltrack.big { height: 14px; }
.ltrack i { display: block; height: 100%; min-width: 2px; transform-origin: left; animation: fill .7s cubic-bezier(.3,1.2,.4,1) both; }
@keyframes fill { from { transform: scaleX(0); } }

.swiperow { display: flex; justify-content: space-between; }
.swipehint.left span { animation-direction: reverse; }
.reviewbtn { align-self: center; margin: 14px auto 4px; padding: 10px 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.stars { display: flex; justify-content: center; gap: 8px; margin: 6px 0 14px; }
.stars button { border: none; background: none; font-size: 38px; line-height: 1; color: var(--faint); cursor: pointer; transition: transform .15s, color .15s; }
.stars button.on { color: var(--warn); }
.stars button:active { transform: scale(1.25); }
.reviewtext { width: 100%; box-sizing: border-box; resize: none; font: inherit; padding: 10px 12px; }
.tile.soon { cursor: default; opacity: .55; } .tile.soon .tile-art { background: var(--sunken); }
#netChart .empty { fill: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; dominant-baseline: middle; }
/* Rang-Leiste: Pfeile am Rand statt Abschneiden ohne Hinweis */
.tierwrap { position: relative; flex: none; }
.tierarr { position: absolute; top: 50%; translate: 0 -50%; width: 32px; height: 44px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font-size: 20px; cursor: pointer; z-index: 1; }
.tierarr.l { left: -8px; } .tierarr.r { right: -8px; }
.tierarr[hidden] { display: none; }