/* Das Monopoly-Zeichen: M mit zwei Querstrichen, liegt auf U+20A5 */
@font-face { font-family: "Bank Mark Serif"; src: url("/fonts/bank-mark-serif.ttf") format("truetype"); font-weight: 100 900; unicode-range: U+20A5; font-display: block; }
@font-face { font-family: "Bank Mark Sans"; src: url("/fonts/bank-mark-sans.ttf") format("truetype"); font-weight: 100 900; unicode-range: U+20A5; font-display: block; }

:root {
  --bg: #0b1311;
  --surface: #101a17;
  --raised: #17241f;
  --line: #2a3b34;
  --ink: #f3efe2;
  --ink-2: #b6c0b6;
  --ink-3: #849186;
  --gold: #e6c15a;
  --plus: #4fd08f;
  --minus: #f27a6e;
  --paper: #f5f0e1;
  --cell: #dcecd8;
  --board-ink: #1c2a24;
  --felt: #123a2d;
  --radius: 14px;
  --serif: "Bank Mark Serif", "Fraunces", Georgia, serif;
  --sans: "Bank Mark Sans", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dvh: 1vh;
  --cq: 1vw;
  color-scheme: dark;
}
@supports (height: 1dvh) {
  :root { --dvh: 1dvh; }
}
@supports (width: 1cqw) {
  .board-wrap, .waitbox { --cq: 1cqw; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 30% 0%, #15251f 0%, var(--bg) 62%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
input, select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  width: 100%;
  min-width: 0;
}
input:focus-visible, button:focus-visible, .cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
label { display: block; font-size: 13px; color: var(--ink-2); }
label > input, label > select { margin-top: 5px; color: var(--ink); font-size: 16px; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: 11px;
  background: var(--raised); border: 1px solid var(--line); font-weight: 600;
  text-decoration: none; color: var(--ink); transition: transform .1s, background .15s;
}
.btn:hover { background: #1f2f29; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #1d1a0d; }
.btn.primary:hover { background: #f0cf72; }
.btn.danger { color: var(--minus); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .4; cursor: default; }
.err { color: var(--minus); font-size: 14px; min-height: 19px; margin: 8px 0 0; }

/* Figuren */
.tk {
  --c: #666; display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 36% 26%, #ffffff61, #fff0 52%, #0000 52%, #00000061), var(--c);
  box-shadow: inset 0 0 0 1.500px #f3dc95cc, 0 2px 6px #0007;
}
.tk .tk-ico { width: 80%; height: 80%; filter: drop-shadow(0 1px 1px #0007); }
.tk.sm { width: 26px; height: 26px; }
.tk.lg { width: 58px; height: 58px; }
.tk.bank { background: #33443c; font: 600 13px var(--serif); color: var(--gold); }

/* Brett */
.board { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 18px 60px #0009, 0 0 0 1px #0007; }
.b-edge { fill: var(--board-ink); }
.b-mark { font: 600 72px var(--serif); fill: var(--gold); letter-spacing: 6px; }
.tv .b-mark { display: none; }
.f-bg { fill: var(--cell); stroke: var(--board-ink); stroke-width: 1.500; }
.f-jail { font: 800 13px var(--sans); fill: #1c2a24; letter-spacing: .8px; }
.f-name { font: 600 15.500px var(--sans); fill: var(--board-ink); letter-spacing: -.1px; }
.f-price { font: 600 14px var(--sans); fill: #33423b; font-variant-numeric: tabular-nums; }
.f-small { font: 600 15px var(--sans); fill: var(--board-ink); }
.f-corner { font: 700 22px var(--serif); fill: var(--board-ink); }
.f-corner.big { font-size: 50px; fill: #c6352e; }
.f-q { font: 700 30px var(--serif); fill: #e0531f; paint-order: stroke; stroke: #7a1f1a; stroke-width: 1px; }
.f-q.big { font-size: 56px; }
.f-focus { fill: none; stroke: none; pointer-events: none; }
.cell[role="button"] { cursor: pointer; outline: none; }
.cell[role="button"]:hover .f-bg { fill: #eaf6e6; }
.cell.owned .f-bg { fill: var(--own); }
.cell.owned[role="button"]:hover .f-bg { fill: color-mix(in srgb, var(--own) 86%, #fff); }
.cell.owned text { fill: #fff; paint-order: stroke; stroke: #0000004d; stroke-width: 2.400px; }
.cell.owned .f-price { display: none; }
.cell.own-light text, .board.classic .cell.own-light text { fill: #1d1a0d; stroke: #ffffff40; }
.cell.owned svg { fill: #fff; }
.cell.owned.mortgaged .f-bg { fill: color-mix(in srgb, var(--own) 34%, #8d897b); }
.f-own { font: 600 13px var(--sans); }
.f-own.rent { font-weight: 800; }
.cell.fresh { animation: fieldin 1.100s ease-out; }
@keyframes fieldin { 0% { filter: brightness(2.200); } 100% { filter: none; } }
.ripple { fill: none; stroke: var(--gold); stroke-width: 5; transform-box: fill-box; transform-origin: center; pointer-events: none; animation: ripple .9s ease-out forwards; }
@keyframes ripple { from { transform: scale(.25); opacity: 1; } to { transform: scale(1.200); opacity: 0; } }
.cell.landed .f-focus { stroke: var(--gold); stroke-width: 5; animation: landed 1.8s ease-in-out infinite; }
.token { transition: transform .26s cubic-bezier(.3, .7, .3, 1); filter: drop-shadow(0 5px 6px #0009); pointer-events: none; }
.t-pulse { opacity: 0; stroke-width: 3; }
.token.turn .t-pulse { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { opacity: .9; r: 29px; } 100% { opacity: 0; r: 46px; } }
@keyframes landed { 50% { stroke-opacity: .35; } }

.board-wrap { position: relative; container-type: inline-size; aspect-ratio: 1; }
.center {
  position: absolute; inset: 16%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: calc(var(--cq) * 2.200); padding: calc(var(--cq) * 3);
  pointer-events: none;
}
.c-mark { font: 600 calc(var(--cq) * 6.400) var(--serif); letter-spacing: .08em; color: var(--gold); }
.c-sub { font-size: calc(var(--cq) * 1.900); color: #c9d8cc; letter-spacing: .14em; text-transform: uppercase; }
.c-turn { display: flex; align-items: center; gap: calc(var(--cq) * 1.400); font-size: calc(var(--cq) * 3); font-weight: 600; }
.c-turn .tk { width: calc(var(--cq) * 6); height: calc(var(--cq) * 6); }
.c-tx { min-height: calc(var(--cq) * 11); display: flex; flex-direction: column; gap: calc(var(--cq) * .5); align-items: center; }
.c-tx b { font: 600 calc(var(--cq) * 5.400) var(--serif); }
.c-flow { display: flex; align-items: center; gap: calc(var(--cq) * 1); color: #d7e2d9; font-size: calc(var(--cq) * 2.400); }
.c-flow .tk { width: calc(var(--cq) * 4.200); height: calc(var(--cq) * 4.200); font-size: calc(var(--cq) * 1.900); }
.c-tx span { font-size: calc(var(--cq) * 2.300); color: #d7e2d9; }
.c-txlabel { font-size: calc(var(--cq) * 1.600); letter-spacing: .14em; text-transform: uppercase; color: #9fb3a4; margin-top: calc(var(--cq) * 1); }
.c-tx.pop { animation: pop .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

/* TV */
.tv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 22px; height: calc(var(--dvh) * 100); padding: 20px; overflow: hidden; }
.tv-board { height: calc(calc(var(--dvh) * 100) - 40px); aspect-ratio: 1; }
.tv-side { display: grid; grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1.200fr); gap: 14px; min-width: 0; min-height: 0; }
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tv-head h1 { font-size: 22px; }
.tv-head .meta { color: var(--ink-3); font-size: 14px; display: flex; align-items: center; gap: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--plus); display: inline-block; }
.dot.off { background: var(--minus); animation: landed 1s infinite; }
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pcard {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center;
  padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .25s, box-shadow .25s;
}
.pcard .tk { grid-row: span 2; }
.pcard.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pcard.broke .p-bal { color: var(--minus); }
.p-name { font-size: 15px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; }
.p-name small { color: var(--ink-3); font-size: 13px; }
.p-bal { font: 600 clamp(24px, 2.300vw, 40px)/1.05 var(--serif); }
.delta {
  position: absolute; right: 14px; bottom: 10px; font-weight: 700; font-size: 20px; pointer-events: none;
  animation: float 2.2s ease-out forwards;
}
.delta.plus { color: var(--plus); }
.delta.minus { color: var(--minus); }
@keyframes float { 0% { opacity: 0; transform: translateY(10px); } 12% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-height: 0; display: flex; flex-direction: column; }
.panel h2 { font: 600 13px var(--sans); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.chart { position: relative; flex: 1; min-height: 0; }
.chart svg { display: block; position: absolute; inset: 0 0 26px 0; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-grid.zero { stroke: var(--ink-3); }
.ch-axis, .ch-label { font: 500 12px var(--sans); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-label { fill: var(--ink-2); }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.ch-end { stroke: var(--surface); stroke-width: 2; }
.ch-cross { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.ch-legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item i, .ch-tip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ch-tip { position: absolute; top: 4px; background: #000c; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font-size: 13px; pointer-events: none; min-width: 170px; }
.th { color: var(--ink-3); margin-bottom: 3px; white-space: nowrap; }
.tr { display: flex; align-items: center; gap: 7px; }
.tr b { margin-left: auto; padding-left: 12px; }

.ledger { list-style: none; margin: 0; padding: 0 8px 0 0; overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.lr { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #ffffff0d; }
.lr:first-child { border-top: 0; }
.lr.new { animation: rowin .5s ease-out; }
@keyframes rowin { from { opacity: 0; transform: translateX(14px); background: #e6c15a22; } }
.lr-time { color: var(--ink-3); font-size: 13px; }
.lr-who { display: inline-flex; align-items: center; gap: 4px; }
.lr-arrow { color: var(--ink-3); font-size: 13px; }
.lr-text { min-width: 0; display: flex; flex-direction: column; }
.lr-text b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-text small { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-amount { font-weight: 700; white-space: nowrap; }
.lr-amount.plus { color: var(--plus); }
.lr-amount.minus { color: var(--minus); }
.empty { color: var(--ink-3); padding: 12px 0; text-align: center; }

@media (max-aspect-ratio: 1/1) {
  .tv { display: block; height: auto; overflow: visible; padding: 14px; }
  .tv-board { height: auto; width: 100%; margin-bottom: 14px; }
  .tv-side { display: flex; flex-direction: column; }
  .panel.chartp { height: 260px; }
  .panel.ledgerp { max-height: 60vh; }
}

/* Start */
.start { max-width: 1120px; margin: 0 auto; padding: 32px 18px 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.04; margin-bottom: 12px; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { color: var(--ink-2); margin: 0 0 22px; max-width: 46ch; }
.hero .board-wrap { max-width: 460px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.card + .card { margin-top: 16px; }
.card h2 { font-size: 22px; margin-bottom: 14px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper b { font: 600 26px var(--serif); min-width: 2ch; text-align: center; }
.stepper div { display: flex; align-items: center; gap: 10px; }
.round { width: 44px; height: 44px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); font-size: 22px; }
.seat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; }
.tokpick { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; padding: 8px; background: var(--raised); border-radius: 12px; }
.tokpick button:disabled { opacity: .25; }
.tokpick .sel .tk { box-shadow: 0 0 0 2px var(--gold); }
.colpick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; grid-column: 1 / -1; padding: 8px; background: var(--raised); border-radius: 12px; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.colpick small { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.swatch {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 36% 26%, #ffffff4d, #fff0 55%, #0000 55%, #0000004d), var(--c);
  box-shadow: inset 0 0 0 1px #ffffff2e;
}
.swatch.light { color: #1d1a0d; }
.swatch .ui-ico { width: 20px; height: 20px; stroke-width: 3; }
.swatch.sel { box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--gold); }
.swatch:disabled { opacity: .2; cursor: default; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--raised); border-radius: 12px; margin-top: 12px; }
.seg button { min-height: 42px; border-radius: 9px; font-weight: 600; color: var(--ink-2); }
.seg button.on { background: var(--gold); color: #1d1a0d; }
@media (max-width: 860px) {
  .start { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .hero .board-wrap { display: none; }
}

/* Bank */
.bankapp { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(var(--dvh) * 100); max-width: 1380px; margin: 0 auto; }
.bank-board { display: none; }
.bank-main { min-width: 0; display: flex; flex-direction: column; min-height: calc(var(--dvh) * 100); }
.bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; position: sticky; top: 0; z-index: 5; background: #0b1311ee; backdrop-filter: blur(8px); }
.bar h1 { font-size: 18px; }
.bar .spacer { flex: 1; }
.iconbtn { min-height: 38px; padding: 0 10px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.iconbtn:disabled { opacity: .35; }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 5px; padding: 2px 14px 8px; }
.strip .chip { padding: 3px 8px 3px 3px; gap: 5px; }
.strip .chip .tk { width: 26px; height: 26px; }
.strip .chip small { font-size: 11px; }
.strip .chip b { font-size: 13px; }
.strip.row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.strip.row .chip { flex: none; }
.chip { min-width: 0; }
.chip > span:last-child { min-width: 0; }
.chip small, .chip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.chip.turn { border-color: var(--gold); }
.chip .tk { width: 34px; height: 34px; }
.chip small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.1; }
.chip b { display: block; font-weight: 700; line-height: 1.15; }
.view { flex: 1; padding: 6px 14px 92px; }
.sec { margin-bottom: 16px; }
.sec > h3, .lbl { font: 600 13px var(--sans); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr); background: #101a17f5; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { min-height: 58px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tabs button.on { color: var(--gold); box-shadow: inset 0 2px 0 var(--gold); }

.turnhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.turnhead h2 { font-size: 24px; }
.turnhead small { color: var(--ink-3); display: block; }
.dice { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.dice button { min-height: 52px; border-radius: 11px; background: var(--raised); border: 1px solid var(--line); font: 600 20px var(--serif); }
.dice button:active { background: var(--gold); color: #1d1a0d; }
.hint { padding: 14px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); margin-bottom: 14px; }
.hint h4 { margin: 0 0 3px; font: 600 18px var(--serif); }
.hint p { margin: 0 0 11px; color: var(--ink-2); font-size: 14px; }
.hint .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hint .acts:empty { display: none; }
.twobtn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }

.who { display: flex; flex-wrap: wrap; gap: 7px; }
.who button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 5px; min-height: 44px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font-weight: 600; }
.who button .tk { width: 32px; height: 32px; }
.who button.on { background: #e6c15a26; border-color: var(--gold); }
.amount { font: 600 34px var(--serif); text-align: center; padding: 8px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 8px; }
.quick button, .notes button { min-height: 42px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.notes { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.notes button { padding: 0 12px; }
.notes button.on { border-color: var(--gold); color: var(--gold); }
.swap { display: flex; justify-content: flex-end; margin: -2px 0 6px; }

.group { margin-bottom: 14px; }
.group-h { height: 6px; border-radius: 3px; margin-bottom: 4px; }
.fieldrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 2px; text-align: left; border-bottom: 1px solid #ffffff0d; min-height: 50px; }
.fieldrow small { color: var(--ink-3); display: block; font-size: 13px; }
.fieldrow .own { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }

.sheet-bg { position: fixed; inset: 0; z-index: 20; background: #0009; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(520px, 100%); max-height: calc(var(--dvh) * 88); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.sheet .bandtop { height: 10px; border-radius: 5px; margin-bottom: 12px; }
.sheet h2 { font-size: 24px; margin-bottom: 3px; }
.sheet p { color: var(--ink-2); margin: 0 0 14px; font-size: 14px; }
.sheet .close { margin-top: 12px; }
.rents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 22px; font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.rents div { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.rents .on { color: var(--gold); font-weight: 700; }
.housebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

.playerrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #ffffff0d; }
.playerrow.out { opacity: .5; }
.playerrow small { color: var(--ink-3); display: block; }
.linkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }

.toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 30; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; animation: pop .25s; max-width: calc(100% - 28px); }
.toast.bad { background: var(--minus); }

@media (min-width: 980px) {
  /* Ganze Breite: Brett links so gross wie die Hoehe erlaubt, rechts mindestens 440 px fuer Infos und Eingaben. */
  .bankapp { max-width: none; grid-template-columns: auto minmax(440px, 1fr); gap: clamp(16px, 1.6vw, 32px); padding: 0 clamp(12px, 1.4vw, 28px); }
  .bank-board { display: flex; align-items: center; position: sticky; top: 0; height: calc(var(--dvh) * 100); padding: 14px 0; }
  .bank-board .board-wrap { width: min(calc(calc(var(--dvh) * 100) - 28px), calc(100vw - 460px - 3 * clamp(12px, 1.4vw, 28px))); margin: 0 auto; }
  /* Rechte Spalte als feste Flaeche: Kopf, Spieler und Tabs bleiben stehen, nur die Ansicht scrollt, wenn es sein muss. */
  .bank-main { height: calc(var(--dvh) * 100); min-height: 0; }
  .view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; scrollbar-width: thin; }
  .tabs { position: static; }
  .tabs button { min-height: 52px; }
  .bsum { bottom: 0; }
  .sheet-bg { align-items: center; }
  .sheet { border-radius: 18px; }
  .toast { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Viele Spieler: Karten rücken enger zusammen */
.pcards[data-n="5"], .pcards[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcards[data-n="7"], .pcards[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcards.many .pcard { grid-template-columns: minmax(0, 1fr); padding: 10px; }
.pcards.many .tk { grid-row: auto; width: 34px; height: 34px; }
.pcards.many .p-name small { display: none; }
.pcards.many .p-bal { font-size: clamp(20px, 1.700vw, 30px); }
@media (max-aspect-ratio: 1/1) {
  .pcards[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Der Buchen-Knopf bleibt über der Tab-Leiste sichtbar */
#payGo { position: sticky; bottom: 70px; z-index: 2; box-shadow: 0 6px 18px #0009; }

/* Handy hochkant: Betrag bekommt die volle Kartenbreite */
@media (max-aspect-ratio: 1/1) {
  .pcard { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .pcard .tk { grid-row: auto; width: 36px; height: 36px; }
  .p-name small { display: none; }
  .p-bal { font-size: 24px; }
}

.lead { font-style: normal; font-size: 12px; font-weight: 700; color: var(--gold); margin-left: 6px; }
.flag { font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.pcard.broke .flag { color: var(--minus); }

/* Würfeln */
.rollhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rollhead h3 { font: 600 13px var(--sans); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.toggle { min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font-weight: 600; }
.toggle.on { background: var(--gold); border-color: var(--gold); color: #1d1a0d; }
.dice button:disabled { opacity: .3; }
.why { display: block; color: var(--ink-3); font-size: 13px; }
.sheet .why { margin: 0 0 10px; }
.housebar .why { margin: 2px 0 0; }

/* Versteigerung, Bank */
.sheet.auc { padding-top: 12px; }
.auc .bandtop { height: 7px; margin-bottom: 8px; }
.auc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auc-head h2 { font-size: 21px; margin: 0; }
.auc-head small { color: var(--ink-3); }
.auc-clock { text-align: right; line-height: 1; white-space: nowrap; }
.auc-clock b { font: 600 36px var(--serif); }
.auc-clock small { margin-left: 3px; }
.auc-bar { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; margin: 8px 0; }
.auc-bar i { display: block; height: 100%; background: var(--gold); transition: width .2s linear; }
.auc-bar i.low { background: var(--minus); }
.auc-high { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 34px; margin-bottom: 8px; }
.auc-high span { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.auc-high b { font: 600 25px var(--serif); }
.auc-input { font: 600 20px var(--sans); text-align: center; padding: 9px; }
.auc-steps { grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; }
.auc-steps button { font-size: 13px; }
.auc .err { margin: 0 0 6px; }
.seatbids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.seatbid { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 5px 8px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); text-align: left; min-width: 0; }
.seatbid:active { background: #e6c15a33; }
.seatbid:disabled { opacity: .4; }
.seatbid.lead-seat { border-color: var(--gold); }
.seatbid .tk { width: 34px; height: 34px; }
.seatbid span:last-child { min-width: 0; }
.seatbid b, .seatbid small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seatbid small { color: var(--ink-3); font-size: 12px; }
.auc .close { min-height: 40px; margin-top: 8px; font-size: 14px; }

/* Versteigerung, TV */
.center.in-auction > .c-mark, .center.in-auction > .c-sub, .center.in-auction > .c-turn, .center.in-auction > .c-roll, .center.in-auction > .c-tx { display: none; }
.c-auc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--cq) * 1.400); }
.c-name { font: 600 calc(var(--cq) * 5) var(--serif); color: var(--gold); }
.c-clock { width: 70%; }
.c-clock b { font: 600 calc(var(--cq) * 8)/1 var(--serif); }
.c-clock .auc-bar { height: calc(var(--cq) * 1); border-radius: calc(var(--cq) * 1); background: #ffffff22; margin: calc(var(--cq) * 1) 0 0; }
.c-bids { list-style: none; margin: 0; padding: 0; font-size: calc(var(--cq) * 2); color: #c9d8cc; min-height: calc(var(--cq) * 5); }

/* Regeln */
.rules { display: grid; gap: 10px; }
.rule { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; break-inside: avoid; }
.rule h3 { font-size: 17px; color: var(--gold); margin-bottom: 3px; }
.rule p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.rulesbox { max-width: 760px; margin: 0 auto; padding: 18px 14px 26px; }
.rulesbox h1 { font-size: 30px; }
.rulesbox > p { color: var(--ink-2); margin: 4px 0 14px; }
.rulesbox .btn { position: sticky; bottom: 12px; margin-top: 14px; box-shadow: 0 6px 18px #0009; }
.rulestv { position: fixed; inset: 0; z-index: 10; background: var(--bg); padding: 2.200vh 2vw; overflow: auto; }
.rulestv h1 { font-size: 3.400vh; margin-bottom: .6vh; color: var(--gold); }
.rulestv .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1vh .8vw; }
.rulestv .rule { padding: 1.200vh 1vw; }
.rulestv .rule h3 { font-size: 2.300vh; }
.rulestv .rule p { font-size: 1.800vh; line-height: 1.32; }
@media (max-aspect-ratio: 1/1) {
  .rulestv .rules { grid-template-columns: minmax(0, 1fr); }
  .rulestv .rule h3 { font-size: 17px; }
  .rulestv .rule p { font-size: 14px; }
}

/* Endstand */
.endtitle { font-size: 26px; margin-bottom: 10px; color: var(--gold); }
.rank { list-style: none; margin: 0; padding: 0; width: 100%; }
.rank li { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #ffffff14; }
.rank b { margin-left: auto; }
.c-auc .rank { width: 80%; font-size: calc(var(--cq) * 2.600); text-align: left; }
.c-auc .rank .tk { width: calc(var(--cq) * 4); height: calc(var(--cq) * 4); }

/* Hausregeln */
.toggle-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid #ffffff0d; color: var(--ink); cursor: pointer; }
.toggle-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); }
.toggle-row b { display: block; font-weight: 600; }
.toggle-row small { color: var(--ink-3); font-size: 13px; }
.rule.houserule { border-color: #e6c15a66; }
.f-pot { font: 700 14px var(--sans); fill: #c6352e; }

/* Timer, Pleite, Bauen */
.auc-tools { display: flex; gap: 6px; margin-top: 8px; }
.auc-tools .btn { flex: 1; min-height: 40px; padding: 0 6px; font-size: 13px; }
.aucpill { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 25; padding: 11px 18px; border-radius: 999px; background: var(--gold); color: #1d1a0d; font-weight: 700; box-shadow: 0 6px 18px #0009; white-space: nowrap; }
.hint.debt { border-color: var(--minus); }
.levels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 10px; }
.levels button { min-height: 50px; padding: 3px 1px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); line-height: 1.1; min-width: 0; }
.levels button b { display: block; font-size: 16px; }
.levels button small { font-size: 9.500px; letter-spacing: -.2px; color: var(--ink-3); white-space: nowrap; overflow: hidden; display: block; }
.levels button.on { border-color: var(--gold); opacity: 1; }
.levels button:disabled:not(.on) { opacity: .35; }
.round.sm { width: 34px; height: 34px; font-size: 18px; }
.round:disabled { opacity: .35; }

/* Handelsfenster */
.sheet.deal { width: min(760px, 100%); max-height: calc(var(--dvh) * 94); padding-top: 12px; }
.sheet.deal h2 { font-size: 21px; margin-bottom: 8px; }
.dealgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.dealside { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px; border-radius: 12px; background: var(--raised); }
.dealhead { display: flex; flex-wrap: wrap; gap: 4px; }
.dealhead button { padding: 2px; border-radius: 50%; }
.dealhead button.on { box-shadow: 0 0 0 2px var(--gold); }
.dealside > .why { font-size: 12px; }
.dealside input { padding: 8px; }
.dealcards { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0; }
.dealcards span:last-child { display: flex; gap: 5px; }
.dealrows { display: flex; flex-direction: column; gap: 3px; max-height: calc(var(--dvh) * 34); overflow: auto; }
.dealrow { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 7px; align-items: stretch; width: 100%; padding: 5px 7px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); text-align: left; font-size: 13px; }
.dealrow i { border-radius: 3px; }
.dealrow small { display: block; color: var(--ink-3); font-size: 11px; }
.dealrow.on { border-color: var(--gold); background: #e6c15a26; }
.dealrow:disabled { opacity: .45; }

/* Statistik, QR, Replay */
.stats { margin: 12px 0 0; display: grid; gap: 4px; }
.stats div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.stats dt { color: var(--ink-3); }
.stats dd { margin: 0; font-weight: 600; text-align: right; }
.c-auc .stats { width: 80%; margin: calc(var(--cq) * .6) 0 0; gap: calc(var(--cq) * .2); }
.c-auc .stats div { font-size: calc(var(--cq) * 1.700); }
.c-auc .rank li { padding: calc(var(--cq) * .5) 0; }
.tv-qr { position: absolute; inset: 0; margin: auto; height: fit-content; z-index: 3; width: calc(var(--cq) * 38); background: #fff; padding: calc(var(--cq) * 1.200); border-radius: calc(var(--cq) * 1.600); text-align: center; color: #123a2d; box-shadow: 0 calc(var(--cq) * 1) calc(var(--cq) * 5) #000b, 0 0 0 calc(var(--cq) * .4) var(--gold); animation: pop .3s; }
.tv-qr svg { display: block; width: 100%; height: auto; }
.tv-qr small { display: block; font: 700 calc(var(--cq) * 2.200) var(--sans); margin-top: calc(var(--cq) * .4); }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.iconbtn svg { flex: none; }
.iconbtn.on { background: var(--gold); border-color: var(--gold); color: #1d1a0d; }
.replaybar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 9; width: min(760px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #0b1311f2; border: 1px solid var(--line); box-shadow: 0 8px 30px #000a; }
.replaybar input { flex: 1; min-width: 80px; padding: 0; accent-color: var(--gold); }
.replaybar span { flex: 1.4; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-aspect-ratio: 1/1) {
  .tv-qr { display: none; }
  .replaybar { flex-wrap: wrap; }
  .replaybar span { flex-basis: 100%; }
  body.replaying main.tv { padding-bottom: 110px; }
}

/* Regelfenster */
.rulehead { grid-column: 1 / -1; font-size: 20px; color: var(--ink); margin: 6px 0 0; }
.rulestv .rulehead { font-size: 2.800vh; margin: .6vh 0 0; }
.sheet.rules-sheet { display: flex; flex-direction: column; width: min(620px, 100%); height: calc(var(--dvh) * 88); }
.rules-sheet .seg { margin: 6px 0 10px; }
.rules-scroll { flex: 1; min-height: 0; overflow: auto; margin-bottom: 10px; }

/* Karten */
.cardrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 7px 10px; margin-bottom: 5px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); text-align: left; }
.cardrow:active { background: #e6c15a33; }
.cardrow small { flex: none; max-width: 48%; color: var(--gold); font-size: 13px; text-align: right; }
.c-card { padding: calc(var(--cq) * 1) calc(var(--cq) * 2); border-radius: calc(var(--cq) * 1); background: #fff5d6; color: #2a2412; box-shadow: 0 calc(var(--cq) * .6) calc(var(--cq) * 2) #0007; max-width: 80%; animation: pop .4s cubic-bezier(.2, 1.3, .4, 1); }
.c-card.chest { background: #d9ecf7; }
.c-card small { display: block; font: 600 calc(var(--cq) * 1.700) var(--sans); color: #7a5a14; }
.c-card.chest small { color: #2f6db3; }
.c-card b { font: 600 calc(var(--cq) * 2.900) var(--serif); }
.center.in-auction > .c-card { display: none; }

.housepick { margin-bottom: 12px; padding: 4px 13px 8px; border: 1px solid #e6c15a66; border-radius: var(--radius); background: var(--surface); }

/* ---- Fernseher: feste Gesamtansicht, alles in Bildschirm-Einheiten ---- */
.tv { --u: min(1vh, .5625vw); --board: min(calc(calc(var(--dvh) * 100) - var(--u) * 4), 57vw); grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 2); padding: calc(var(--u) * 2); }
.tv-board { width: var(--board); height: auto; align-self: center; }
.tv-side { grid-template-rows: auto minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--u) * 1.300); }
.tv-side[data-n="7"], .tv-side[data-n="8"] { grid-template-rows: auto minmax(0, 2.300fr) minmax(0, 1fr); }
.tv-head { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; gap: calc(var(--u) * 3); padding: 0 calc(var(--u) * .6); }
.kpi small { display: block; font-size: calc(var(--u) * 1.500); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.kpi b { font: 600 calc(var(--u) * 2.600)/1.1 var(--serif); white-space: nowrap; }
.tv-head .iconbtn { min-height: calc(var(--u) * 3.600); font-size: calc(var(--u) * 1.400); opacity: .45; }
.tv-head .meta { justify-self: end; }
.ptable { display: flex; flex-direction: column; gap: calc(var(--u) * .7); min-height: 0; }
.prow {
  position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: calc(var(--u) * 1.500); padding: 0 calc(var(--u) * 1.800) 0 calc(var(--u) * 1.500); overflow: hidden;
  border-radius: calc(var(--u) * 1.400); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 46%);
  border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, background .3s;
}
.prow::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--u) * .5); background: var(--c); }
.prow.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 calc(var(--u) * 2.400) #e6c15a33; }
.prow .tk.lg { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.p-mid { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.prow .p-name { display: flex; align-items: center; gap: calc(var(--u) * .7); justify-content: flex-start; overflow: hidden; font-size: inherit; }
.p-name b { font: 600 calc(var(--u) * 2.600)/1.1 var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { flex: none; font: 700 calc(var(--u) * 1.350)/1 var(--sans); padding: calc(var(--u) * .35) calc(var(--u) * .7); border-radius: 99px; background: #ffffff14; color: var(--ink-2); white-space: nowrap; }
.tag.turn { background: var(--gold); color: #1d1a0d; }
.tag.lead { color: var(--gold); box-shadow: inset 0 0 0 1px #e6c15a88; background: none; }
.tag.jail { background: #ee8a2e33; color: #f6b474; }
.tag.pasch { background: #5ab4ee2e; color: #9fd3f6; }
.tag.debt { background: #f27a6e33; color: var(--minus); }
.p-money { text-align: right; white-space: nowrap; }
.p-money .p-bal { font: 600 calc(var(--u) * 3.900)/1.05 var(--serif); }
.p-money small { color: var(--ink-3); font-size: calc(var(--u) * 1.500); }
.prow.broke .p-bal { color: var(--minus); }
.ptable[data-n="7"] .tk.lg, .ptable[data-n="8"] .tk.lg { width: calc(var(--u) * 4.600); height: calc(var(--u) * 4.600); }
.ptable[data-n="7"] .p-bal, .ptable[data-n="8"] .p-bal { font-size: calc(var(--u) * 3); }
.ptable[data-n="7"] .p-name b, .ptable[data-n="8"] .p-name b { font-size: calc(var(--u) * 2.100); }
.ptable[data-n="7"] .p-money small, .ptable[data-n="8"] .p-money small { font-size: calc(var(--u) * 1.350); }
.ptable[data-n="7"] .p-mid, .ptable[data-n="8"] .p-mid { gap: calc(var(--u) * .35); }
.prow .delta { right: auto; left: 46%; bottom: calc(50% - var(--u) * 1.750); font-size: calc(var(--u) * 2.600); }
.tv-low { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.150fr); gap: calc(var(--u) * 1.100); min-height: 0; }
.tv .panel { padding: calc(var(--u) * 1) calc(var(--u) * 1.300); }
.tv .panel h2 { font-size: calc(var(--u) * 1.400); margin-bottom: calc(var(--u) * .6); }
.tv .ledger { overflow: hidden; padding: 0; }
.tv .lr { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: calc(var(--u) * .9); padding: calc(var(--u) * .55) 0; }
.tv .lr-time { font-size: calc(var(--u) * 1.350); font-variant-numeric: tabular-nums; }
.tv .lr-text b { font-size: calc(var(--u) * 1.700); }
.tv .lr-text small { font-size: calc(var(--u) * 1.350); }
.tv .lr-amount { font-size: calc(var(--u) * 1.800); }
.tv .tk.sm { width: calc(var(--u) * 2.600); height: calc(var(--u) * 2.600); font-size: calc(var(--u) * 1.300); }
.tv .ch-axis, .tv .ch-label { font-size: calc(var(--u) * 1.250); }
.tv .ch-legend { font-size: calc(var(--u) * 1.250); }
.tv .board { box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 7) #000a, 0 0 0 2px #e6c15a2e; }
.c-roll { font-size: calc(var(--cq) * 2.200); color: #c9d8cc; min-height: calc(var(--cq) * 3); }
.c-mark { background: linear-gradient(100deg, var(--gold) 42%, #fff6d2 50%, var(--gold) 58%) 0 0 / 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite; }
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -60% 0; } }
.c-turn .tk { animation: pop .45s cubic-bezier(.2, 1.3, .4, 1); }
.prow.turnnew { animation: turnin .8s cubic-bezier(.2, 1.1, .4, 1); }
@keyframes turnin { from { transform: translateX(calc(var(--u) * -2)); box-shadow: 0 0 calc(var(--u) * 5) var(--gold); } }
.prow.gain { animation: gain 1.400s ease-out; }
.prow.lose { animation: lose 1.400s ease-out; }
@keyframes gain { 0% { background-color: #4fd08f55; box-shadow: 0 0 calc(var(--u) * 3) #4fd08f88; } 100% { box-shadow: none; } }
@keyframes lose { 0% { background-color: #f27a6e55; box-shadow: 0 0 calc(var(--u) * 3) #f27a6e88; } 100% { box-shadow: none; } }
#tvLeft.low { color: var(--minus); display: inline-block; animation: urgent .9s ease-in-out infinite; }
@keyframes urgent { 50% { transform: scale(1.180); } }
.confetti { position: fixed; top: -2vh; z-index: 11; width: 1vh; height: 1.600vh; border-radius: 2px; pointer-events: none; animation: confetti 4s linear forwards; }
@keyframes confetti { to { transform: translate3d(6vw, 106vh, 0) rotate(720deg); } }
.coin { position: fixed; left: 0; top: 0; z-index: 12; padding: calc(var(--u, 1vh) * .5) calc(var(--u, 1vh) * 1.100); border-radius: 99px; background: linear-gradient(180deg, #f6dc8a, #d9ae3f); color: #2a2206; font: 700 calc(1vh * 1.900)/1.2 var(--sans); box-shadow: 0 .4vh 1.400vh #0009, inset 0 1px 0 #fff8; white-space: nowrap; pointer-events: none; }

/* Besitz-Leiste */
.ostrip { display: flex; flex-wrap: nowrap; gap: 5px; --s: 13px; }
.p-mid { container-type: inline-size; }
.tv .ostrip { --s: calc(var(--u) * 1.300); gap: 4px; }
@supports (width: calc(var(--cq) * 1)) {
  .tv .ostrip { --s: min(calc(var(--u) * 1.900), calc((100cqw - 45px) / 28 - 1px)); gap: 5px; }
}
.og { display: inline-flex; gap: 1px; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.og.full { border-bottom-color: var(--gold); }
.og i { width: var(--s); height: var(--s); border-radius: 2px; background: #ffffff0f; box-shadow: inset 0 0 0 1px #ffffff1c; display: grid; place-items: center; font: 800 calc(var(--s) * .72)/1 var(--sans); color: #fff; text-shadow: 0 0 2px #000; font-style: normal; }
.og i.own { box-shadow: none; }
.og i.mort { opacity: .38; }

/* Handelstafel in der Brettmitte */
.c-auc > .c-sub { font-size: calc(var(--cq) * 2.100); color: var(--gold); }
.c-auc.sealed { animation: pop .5s cubic-bezier(.2, 1.3, .4, 1); }
.dl-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: calc(var(--cq) * 1.200); align-items: start; }
.dl-x { align-self: center; font: 600 calc(var(--cq) * 4.800) var(--serif); color: var(--gold); }
.dl-who { display: flex; align-items: center; gap: calc(var(--cq) * 1); text-align: left; margin-bottom: calc(var(--cq) * 1); }
.dl-who .tk { width: calc(var(--cq) * 5.400); height: calc(var(--cq) * 5.400); }
.dl-who b { display: block; font: 600 calc(var(--cq) * 3)/1.1 var(--serif); }
.dl-who small { color: #c9d8cc; font-size: calc(var(--cq) * 1.700); }
.dl-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--cq) * .55); text-align: left; }
.dl-side li { border-radius: calc(var(--cq) * .7); font-size: calc(var(--cq) * 2.300); line-height: 1.15; }
.dl-money { padding: calc(var(--cq) * .7) calc(var(--cq) * 1); background: linear-gradient(180deg, #f6dc8a, #d9ae3f); color: #2a2206; font: 700 calc(var(--cq) * 3.300) var(--serif) !important; }
.dl-free { padding: calc(var(--cq) * .6) calc(var(--cq) * 1); background: #fff5d6; color: #2a2412; font-weight: 700; }
.dl-street { padding: calc(var(--cq) * .55) calc(var(--cq) * 1) calc(var(--cq) * .55) calc(var(--cq) * 1.500); background: var(--paper); color: var(--board-ink); box-shadow: inset calc(var(--cq) * .8) 0 0 var(--g); }
.dl-street b { display: block; font-weight: 700; }
.dl-street small { font-size: calc(var(--cq) * 1.700); color: #47564e; }
.dl-none { color: #9fb2a6; font-size: calc(var(--cq) * 1.900); }
.dl-done { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--cq) * .6); }
.dl-done span { padding: calc(var(--cq) * .45) calc(var(--cq) * 1); border-radius: 99px; background: color-mix(in srgb, var(--g) 70%, #000); color: #fff; font-weight: 700; font-size: calc(var(--cq) * 1.800); }

/* Geld */
.tabs { grid-template-columns: repeat(7, 1fr); background: var(--surface); }
.tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; padding: 0; }
.tabs .ui-ico { width: 23px; height: 23px; }
.tabs button.live::after { content: ""; position: absolute; top: 8px; right: calc(50% - 26px); width: 8px; height: 8px; border-radius: 50%; background: var(--plus); }
.modes { margin: 0 0 10px; }
.modes button { min-height: 40px; font-size: 13.500px; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 10px; }
.flowside { position: relative; display: grid; justify-items: center; gap: 1px; min-height: 104px; padding: 6px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-align: center; min-width: 0; }
.flowside.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.flowside small { color: var(--ink-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.flowside .tk { width: 30px; height: 30px; }
.flowside b { font: 600 17px var(--serif); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flowside span:not(.tk) { font-size: 13px; color: var(--ink-2); }
.flowside em { font-style: normal; font-size: 12px; color: var(--ink-3); min-height: 16px; white-space: nowrap; }
.flowside em.bad { color: var(--minus); }
/* Von/An quer statt hoch: Figur links, Name und Stand rechts, "danach" neben dem Etikett (alle Breiten) */
.flowside { min-height: 0; padding: 6px 8px; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tk lbl" "tk name" "tk det"; justify-items: start; text-align: left; column-gap: 8px; row-gap: 0; align-items: center; }
.flowside > small { grid-area: lbl; font-size: 11px; }
.flowside > .tk { grid-area: tk; width: 30px; height: 30px; }
.flowside > b { grid-area: name; font-size: 16px; }
.flowside > span:not(.tk) { grid-area: det; font-size: 12.5px; }
.flowside > em { grid-area: lbl; justify-self: end; min-height: 0; font-size: 11px; }
.flowswap { width: 40px; height: 40px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); font-size: 18px; color: var(--gold); }
.picks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 10px; padding: 0 14px; }
.picks button { flex: none; }
.who button:disabled { opacity: .35; }
.who button.on { box-shadow: inset 0 0 0 1px var(--gold); }
.amountbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.amountbox output { font: 600 30px/1.1 var(--serif); color: var(--gold); white-space: nowrap; }
.amountbox:has(.padtoggle) { grid-template-columns: minmax(0, 1fr) minmax(0, 150px) auto; }
.padtoggle { min-height: 34px; padding: 0 10px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--gold); white-space: nowrap; }
.padtoggle.on { color: var(--ink-2); }
.amountbox .amount { font: 600 15px var(--sans); text-align: right; padding: 7px 8px; background: var(--raised); }
.quick.seven { display: flex; overflow-x: auto; scrollbar-width: none; margin: 8px -14px 0; padding: 0 14px; }
.quick.seven button { flex: none; padding: 0 12px; font-size: 13px; min-height: 38px; }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 14px; }
.keypad button { min-height: 42px; border-radius: 11px; background: var(--raised); border: 1px solid var(--line); font: 600 21px var(--serif); }
.keypad button:active { background: #e6c15a33; }
.keypad button.unit { font: 700 14px var(--sans); color: var(--gold); }
.keypad button:disabled { opacity: .35; }
.recent { margin-top: 16px; }
.recent .lr { grid-template-columns: auto auto minmax(0, 1fr) auto; }

/* Handel */
.livepill { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; padding: 4px 11px; border-radius: 99px; background: #4fd08f1f; color: var(--plus); font-size: 13px; font-weight: 700; }
.livepill .dot { animation: landed 1.400s infinite; }
.dealpeople { display: grid; gap: 7px; }
.dealperson { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-align: left; }
.dealperson.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.dealperson > span:last-child { min-width: 0; }
.dealperson b { display: block; font: 600 17px var(--serif); }
.dealperson small { display: block; color: var(--ink-3); font-size: 12.500px; margin-bottom: 4px; }
.dealperson .ostrip { --s: 9px; gap: 3px; flex-wrap: wrap; }
.dealpeople { grid-template-columns: minmax(0, 1fr); }
.dealgrid { align-items: start; }
.dealside { gap: 6px; background: var(--surface); border: 1px solid var(--line); }
.dealwho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dealwho .tk { width: 36px; height: 36px; }
.dealwho > span:last-child { min-width: 0; }
.dealwho b { display: block; font: 600 17px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dealwho small { display: block; color: var(--ink-3); font-size: 11.500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dealhead button .tk { opacity: .55; }
.dealhead button.on .tk { opacity: 1; }
.dealadds { grid-template-columns: repeat(3, 1fr); margin-top: 0; gap: 4px; }
.dealadds button { min-height: 34px; font-size: 11px; padding: 0 1px; }
.dealrows { max-height: none; gap: 4px; }
.dealtile { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 7px; align-items: stretch; width: 100%; padding: 6px 7px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); text-align: left; }
.dealtile i { border-radius: 3px; }
.dealtile b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dealtile small { display: block; font-size: 11px; color: var(--ink-3); }
.dealtile span { min-width: 0; }
.dealblocked { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; padding: 4px 7px; font-size: 12px; color: var(--ink-3); }
.dealblocked span { display: inline-flex; gap: 2px; }
.dealblocked i { width: 6px; height: 14px; border-radius: 2px; opacity: .6; }
.dealtile.on { border-color: var(--gold); background: #e6c15a26; box-shadow: inset 0 0 0 1px var(--gold); }
.dealtile:disabled { opacity: .45; }
.dealsum { padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; }
.dealscale { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.dealscale i { display: block; min-width: 4px; transition: width .2s; }
.dealscale i:last-child { flex: 1; }
.dealrowsum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: 12.500px; color: var(--ink-2); }
.dealrowsum > div:last-child { text-align: right; }
.dealrowsum b { display: block; color: var(--ink); font-size: 14px; }
.dealrowsum span { display: block; }
.dealrowsum .bad { color: var(--minus); }
.dealsum .dl-done { margin-top: 8px; gap: 6px; }
.dealsum .dl-done span { padding: 3px 10px; font-size: 13px; }
.dealbar { position: sticky; bottom: 68px; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.dealbar .btn { box-shadow: 0 6px 18px #0009; }
.sheet .ostrip { margin-bottom: 8px; flex-wrap: wrap; }
.sheet .turnhead h2 { margin: 0; }
.sheet .turnhead { margin-bottom: 10px; }

@media (max-aspect-ratio: 1/1) {
  .tv { --u: .8vh; display: block; }
  .tv-board { width: 100%; }
  .tv-side { display: flex; flex-direction: column; }
  .tv-head { grid-template-columns: auto auto minmax(0, 1fr); gap: 14px; }
  .tv-head .meta { display: none; }
  .prow { flex: none; min-height: 66px; padding: 8px 10px 8px 12px; gap: 8px; }
  .prow .tk.lg { width: 36px; height: 36px; }
  .p-money .p-bal { font-size: 20px; }
  .p-money small { font-size: 11px; }
  .ostrip { --s: 8px; gap: 2px; }
  .tv .ostrip { --s: min(7px, calc((100cqw - 18px) / 28 - 1px)); gap: 2px; }
  .tag { font-size: 10px; padding: 2px 5px; }
  .tv .tag:not(.turn):not(.jail):not(.pasch) { display: none; }
  .p-name b { font-size: 16px; }
  .tv-low { display: flex; flex-direction: column; }
  .tv .panel h2 { font-size: 12px; }
  .tv .lr-text b { font-size: 14px; }
  .tv .lr-text small { font-size: 12px; }
  .tv .lr-amount { font-size: 14px; }
  .tv .tk.sm { width: 24px; height: 24px; }
  .kpi small { font-size: 11px; }
  .kpi b { font-size: 16px; }
}

/* Handy-Ansicht der Mitspieler */
.waitbox { min-height: calc(var(--dvh) * 100); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 18px; text-align: center; container-type: inline-size; }
.waitbox .c-mark { font-size: calc(var(--cq) * 12); }
.waitbox h1 { font-size: 26px; }
.waitbox p { margin: 0; color: var(--ink-2); max-width: 32ch; }
.waitbox .card { width: 100%; margin-top: 14px; text-align: left; }
.waitpulse { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); margin: 14px 0 6px; animation: landed 1.400s ease-in-out infinite; }
.pickgrid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.pickme { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.pickme:active { border-color: var(--gold); }
.pickme b { font: 600 19px var(--serif); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone { min-height: calc(var(--dvh) * 100); display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.mehead { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, var(--bg)), var(--bg) 70%); border-bottom: 1px solid var(--line); }
.mehead .tk.lg { width: 50px; height: 50px; }
.mehead .dot { position: absolute; right: 6px; top: calc(6px + env(safe-area-inset-top)); width: 7px; height: 7px; }
.memid { min-width: 0; }
.mename { display: flex; align-items: baseline; gap: 8px; }
.mename b { font: 600 20px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mename button { flex: none; font-size: 12px; color: var(--ink-3); text-decoration: underline; padding: 0; }
.metags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.metags .tag { font-size: 11px; padding: 3px 7px; }
.memoney { text-align: right; white-space: nowrap; }
.memoney b { display: block; font: 600 23px/1.1 var(--serif); }
.memoney b.bad { color: var(--minus); }
.memoney small { color: var(--ink-3); font-size: 12px; }
.mebanner { margin: 8px 14px 0; padding: 9px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.mebanner small { display: block; color: var(--ink-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.mebanner > b { font: 600 17px var(--serif); margin-right: 8px; }
.mebanner > span { color: var(--ink-2); }
.mebanner i { font-style: normal; font-weight: 700; color: var(--gold); }
.mebanner.hot { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: #e6c15a14; }
.bannerdeal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 3px; }
.bannerdeal b, .bannerdeal span { display: block; }
.bannerdeal span { color: var(--ink-2); font-size: 13px; }
.phoneview { padding-top: 10px; }
.metiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.metiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.metile { padding: 9px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.metile small { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; }
.metile b { display: block; font: 600 18px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metiles.three .metile b { font-size: 15px; }
.phone .ostrip { --s: 9px; gap: 3px; flex-wrap: wrap; }
.proplist { display: grid; gap: 5px; margin-top: 8px; }
.proplist.grouped { margin: 0 0 12px; }
.proprow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 11px 8px 15px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 6px 0 0 var(--g); text-align: left; }
.proprow b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proprow small { display: block; color: var(--ink-3); font-size: 12.500px; }
.proprow > span:first-child { min-width: 0; }
.proprow .own { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); }
.ranklist { display: grid; gap: 6px; }
.rankrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 55%); border: 1px solid var(--line); text-align: left; }
.rankrow.mine { border-color: var(--gold); }
.rankrow .tk { width: 32px; height: 32px; }
.ranknum { font: 600 15px var(--serif); color: var(--ink-3); }
.rankmid { min-width: 0; display: grid; gap: 4px; }
.rankname { display: flex; align-items: center; gap: 5px; overflow: hidden; }
.rankname b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankname .tag { font-size: 10px; padding: 2px 5px; }
.rankrow .ostrip { --s: 6px; gap: 2px; }
.rankmoney { text-align: right; white-space: nowrap; }
.rankmoney b { display: block; font: 600 15px var(--serif); }
.rankmoney small { color: var(--ink-3); font-size: 11.500px; }
.phonechart { height: 230px; margin-top: 0; }
.boardpane { flex: 1; padding: 12px 8px 84px; }
.tabs.five { grid-template-columns: repeat(5, 1fr); }
@media (min-width: 980px) { .phone .tabs { position: fixed; } .phone .view { padding-bottom: 80px; } }

/* Wuerfelziele */
.r-mark { pointer-events: none; }
.r-mark circle { fill: var(--gold); stroke: #1c2a24; stroke-width: 2.500; filter: drop-shadow(0 2px 3px #0008); }
.r-mark text { font: 800 19px var(--sans); fill: #1c2a24; }
.rollgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rollbtn { --g: transparent; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 66px; padding: 5px 7px 5px 12px; border-radius: 11px; background: var(--raised); border: 1px solid var(--line); box-shadow: inset 5px 0 0 var(--g); text-align: left; min-width: 0; }
.rollbtn b { font: 600 21px/1 var(--serif); color: var(--ink); }
.rollbtn span, .rollbtn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rollbtn span { font-size: 12px; font-weight: 600; margin-top: 3px; }
.rollbtn small { font-size: 11px; color: var(--ink-3); }
.rollbtn.free small { color: var(--plus); }
.rollbtn.pay small { color: var(--minus); }
.rollbtn.own small { color: var(--gold); }
.rollbtn:active { background: #e6c15a33; }
.rollbtn:disabled { opacity: .3; }

/* Figur versetzen */
.sheet.moveboard { width: min(640px, 100%); max-height: calc(var(--dvh) * 96); padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); }
.moveboard .board-wrap { width: 100%; max-width: calc(calc(var(--dvh) * 96) - 170px); margin: 0 auto; }
.moveboard .twobtn .toggle { min-height: 46px; }
.moveboard h2, .moveboard p { padding: 0 6px; }
.moveboard p { margin-bottom: 8px; }

/* Zu wenig Geld */
.who button.short { opacity: .62; border-style: dashed; }
.who button small { display: block; color: var(--minus); font-size: 11.500px; font-weight: 600; }
.who button > span:last-child { text-align: left; line-height: 1.15; }

/* Klassisches Brett */
.board.classic .b-edge { fill: #111; }
.board.classic .f-bg { fill: #cfe6d2; stroke: #111; stroke-width: 2.400; }
.board.classic .cell[role="button"]:hover .f-bg { fill: #e0f1e2; }
.board.classic .f-band { stroke: #111; stroke-width: 2.400; }
.board.classic .f-name { font: 700 15px var(--sans); fill: #111; letter-spacing: .1px; }
.board.classic .f-price { font: 600 13.500px var(--sans); fill: #111; }
.board.classic .f-jail { font: 800 13px var(--sans); fill: #111; }
.board.classic .f-corner-text { font: 800 15.500px var(--sans); fill: #111; letter-spacing: .4px; }
.board.classic .f-go { font: 800 54px var(--sans); fill: #111; letter-spacing: 2px; }
.board.classic .f-go.small { font: 700 10.500px var(--sans); letter-spacing: .3px; }
.board.classic .f-pot { fill: #d81e24; }
.board.classic .cell.owned .f-bg { fill: var(--own); }
.board.classic .cell.owned[role="button"]:hover .f-bg { fill: color-mix(in srgb, var(--own) 86%, #fff); }
.board.classic .cell.owned text { fill: #fff; }
.board.classic .cell.owned.mortgaged .f-bg { fill: color-mix(in srgb, var(--own) 34%, #8d897b); }

/* Bauen */
.bplayers { flex-wrap: wrap; margin-bottom: 4px; }
.bplayers button { min-height: 36px; padding: 3px 11px 3px 4px; font-size: 13.500px; }
.bplayers button .tk { width: 26px; height: 26px; }
.bgroup { margin-top: 10px; padding: 8px 11px 10px 15px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 6px 0 0 var(--g); }
.bghead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.bghead b { font: 600 17px var(--serif); }
.bghead small { color: var(--ink-3); font-size: 12.500px; }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #ffffff0d; }
.bname { min-width: 0; }
.bname > b { display: block; font-weight: 600; font-size: 14.500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bname small { display: block; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.bname small b { color: var(--gold); }
.bpips { display: grid; grid-template-columns: repeat(2, 11px); gap: 2px; }
.bh { width: 11px; height: 11px; border-radius: 2px; background: #ffffff12; box-shadow: inset 0 0 0 1px #ffffff24; }
.bh.on { background: #27b267; box-shadow: none; }
.bh.add { background: var(--gold); box-shadow: none; }
.bh.drop { background: none; box-shadow: inset 0 0 0 1.500px var(--minus); }
.bh.hotel { grid-column: 1 / -1; width: 24px; height: 12px; background: #e0413a; box-shadow: none; }
.bh.hotel.add { background: var(--gold); }
.bh.hotel.drop { background: none; box-shadow: inset 0 0 0 1.500px var(--minus); }
.bbtns { display: flex; gap: 6px; }
.round.muted { opacity: .38; }
.bgbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.bgbtns .btn { flex-direction: column; gap: 0; min-height: 44px; padding: 3px 6px; font-size: 13.500px; }
.bgbtns small { color: var(--ink-3); font-size: 11.500px; font-weight: 500; }
.bgroup .why { margin: 6px 0 0; color: var(--minus); }
.bmissing { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; color: var(--ink-2); font-size: 13.500px; }
.bmissing i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; }
.bsum { position: sticky; bottom: 68px; z-index: 2; margin-top: 12px; padding: 9px 11px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); box-shadow: 0 6px 18px #0009; }
.bsumrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12px; color: var(--ink-3); }
.bsumrow b { display: block; color: var(--ink); font: 600 15px var(--serif); white-space: nowrap; }
.bsumrow .bad b { color: var(--minus); }
.bsum .twobtn { margin-top: 7px; }

/* Fernseher-Browser sind oft alt: Samsung Tizen 5.5 ist Chrome 94 und kennt weder cqw noch color-mix. */
@supports not (width: 1cqw) {
  .tv .board-wrap { --cq: calc(var(--board) / 100); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .prow { background: var(--surface); }
  .prow::after { content: ""; position: absolute; inset: 0 54% 0 0; background: linear-gradient(90deg, var(--c), transparent); opacity: .16; pointer-events: none; }
  .cell.owned.mortgaged .f-bg, .board.classic .cell.owned.mortgaged .f-bg { fill: var(--own); fill-opacity: .4; }
  .dl-done span { background: var(--g); }
}

/* Bedien-Icons */
.ui-ico { width: 1.300em; height: 1.300em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.800; stroke-linecap: round; stroke-linejoin: round; }
.ui-ico .d { fill: currentColor; fill-opacity: .22; }
.ui-ico .p { fill: currentColor; stroke: none; }
.btn .ui-ico { width: 20px; height: 20px; }
.twobtn .btn { padding: 0 10px; }
.kpi small .ui-ico, .panel h2 .ui-ico { margin-right: .35em; vertical-align: -.25em; }
.lr-text b .ui-ico { width: 1.100em; height: 1.100em; margin-right: .3em; vertical-align: -.2em; opacity: .75; }
@media (max-width: 440px) {
  .bar .iconbtn span { display: none; }
  .bar .iconbtn { min-width: 40px; padding: 0 8px; }
}

/* Baukosten */
.rents.costs { margin-top: 8px; }
.costs summary { list-style: none; cursor: pointer; }
.costs summary::-webkit-details-marker { display: none; }
.costs summary h3 { display: inline; font: 600 13px var(--sans); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.costs summary::after { content: " ▸"; color: var(--ink-3); }
.costs[open] summary::after { content: " ▾"; }
.costs[open] summary { margin-bottom: 8px; }
.costtable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.costtable th, .costtable td { padding: 7px 6px; text-align: right; border-bottom: 1px solid #ffffff0d; font-weight: 500; }
.costtable thead th { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.costtable th:first-child { text-align: left; }
.costtable tbody th i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.costtable + .why { margin-top: 8px; }

/* Angebote */
.offer { padding: 12px; margin-bottom: 10px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); }
.offer header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.offer header b { flex: 1; min-width: 0; margin-left: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer header small { color: var(--ink-3); font-size: 13px; }
.offer .dealsum { margin-top: 10px; }
.offer .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.offer .acts:empty { display: none; }
.offer .acts .btn { flex: 1 1 auto; padding: 0 10px; }
.offer .why.bad { color: var(--minus); margin: 8px 0 0; }
.dealgrid.single { grid-template-columns: minmax(0, 1fr); }
.bannerlink { display: block; width: 100%; text-align: left; color: inherit; }
.bannerlink small, .bannerlink b, .bannerlink span { display: block; }
.tabs button { position: relative; }
.tabs button[data-count]:not([data-count=""])::after {
  content: attr(data-count); position: absolute; top: 6px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--minus); color: #240b08; font-size: 12px; font-weight: 700; line-height: 18px;
}
.tabs.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tabs.six button { font-size: 12px; }
.pickme small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 500; }
.c-offers { display: flex; align-items: center; justify-content: center; gap: calc(var(--cq) * .800); margin-top: calc(var(--cq) * 1); color: var(--gold); font-size: calc(var(--cq) * 1.700); font-weight: 600; }
.c-offers .ui-ico { width: calc(var(--cq) * 2.200); height: calc(var(--cq) * 2.200); }

/* Eigene Figuren */
.tk img { width: 80%; height: 80%; border-radius: 50%; object-fit: cover; }
.tk.figtext { font-size: 24px; font-weight: 700; }
.figedit { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 12px; }
.figedit label { margin-bottom: 10px; }
.figfile { display: flex; cursor: pointer; font-size: 15px; color: var(--ink); }
.err:empty { display: none; }

/* Statistik */
.statpage { max-width: 1120px; margin: 0 auto; padding: 16px 16px 40px; }
.stathead { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.stathead h1 { flex: 1; min-width: 120px; font: 600 28px var(--serif); margin: 0; }
.stathead .iconbtn .ui-ico { transform: scaleX(-1); }
.stathead select { width: auto; max-width: min(100%, 340px); }
.metiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.award { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.award small { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; }
.award > span { color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.awardwho { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.awardwho b { font-weight: 600; }
.heatgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.heatgrid .board-wrap { --cq: 1%; }
.heat rect { pointer-events: none; }
.heat text { font: 700 24px var(--sans); fill: #fff; }
.toplist { list-style: none; margin: 0 0 10px; padding: 0; }
.toplist li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; }
.toplist span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toplist i { display: block; height: 8px; border-radius: 4px; background: #d9371f; }
.toplist b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dicebars { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.die { display: grid; grid-template-rows: 20px 150px 22px; text-align: center; font-size: 13px; color: var(--ink-3); }
.die b { color: var(--ink-2); font-weight: 600; }
.dbar { position: relative; border-bottom: 1px solid var(--ink-3); }
.dbar i { position: absolute; left: 12%; right: 12%; bottom: 0; background: var(--gold); border-radius: 4px 4px 0 0; }
.dbar u { position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); }
.statchart { height: 280px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stattable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stattable th, .stattable td { padding: 8px 12px; text-align: right; border-bottom: 1px solid #ffffff0d; font-weight: 500; }
.stattable thead th { color: var(--ink-2); font-weight: 600; }
.stattable thead th .tk { margin-right: 6px; vertical-align: middle; }
.stattable th:first-child { position: sticky; left: 0; text-align: left; background: var(--surface); color: var(--ink-2); }
.stattable tbody th .tk { margin-right: 8px; vertical-align: middle; }
.stattable tr:last-child th, .stattable tr:last-child td { border-bottom: 0; }
.gamerow { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #ffffff0d; }
.gamelink { flex: 1; min-width: 0; padding: 10px 2px; text-align: left; }
.gamelink b, .gamelink small { display: block; }
.gamelink small { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn.danger { border-color: var(--minus); color: var(--minus); }
@media (max-width: 760px) {
  .heatgrid { grid-template-columns: minmax(0, 1fr); }
  .metiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .die { grid-template-rows: 18px 110px 20px; font-size: 12px; }
  .dicebars { gap: 3px; }
}
.soundhint { position: fixed; right: calc(var(--u) * 1.5); bottom: calc(var(--u) * 1.5); z-index: 8; padding: calc(var(--u) * .7) calc(var(--u) * 1.2); border-radius: 999px; background: var(--gold); color: #1d1a0d; font-size: calc(var(--u) * 1.5); font-weight: 600; }
.soundlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* Gitter vor Figuren im Gefaengnis */
.t-bars rect { fill: #aab4bb; stroke: #1d252b; stroke-width: 1.200; }
.tk.jailed { position: relative; }
.tk.jailed::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #0000 24%, #1d252bc0 24% 29%, #0000 29% 47.500%, #1d252bc0 47.500% 52.500%, #0000 52.500% 71%, #1d252bc0 71% 76%, #0000 76%); }
.tk.sm.jailed::after { display: none; }

/* Spezial: direkt auf Los mit doppeltem Geld */
.los-fx { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: radial-gradient(circle, #0b131199 0, #0b1311e0 70%); animation: losIn .35s ease-out, losOut .5s ease-in 5.1s forwards; }
.los-rays { position: absolute; left: 50%; top: 50%; width: 170%; height: 170%; margin: -85% 0 0 -85%; border-radius: 50%; background: repeating-conic-gradient(#f6dc8640 0 9deg, #0000 9deg 18deg); will-change: transform; animation: losSpin 12s linear infinite; }
.los-coin { position: absolute; top: -8%; width: calc(var(--cq) * 4); height: calc(var(--cq) * 4); border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff1b8, #e6c15a 45%, #a9791c); box-shadow: inset 0 0 0 calc(var(--cq) * .3) #c99b2e; will-change: transform; animation: losCoin 2s linear infinite; }
.los-card { position: relative; display: grid; justify-items: center; gap: calc(var(--cq) * .8); padding: calc(var(--cq) * 3) calc(var(--cq) * 5); border-radius: calc(var(--cq) * 2.500); background: #0f2a21f0; border: calc(var(--cq) * .3) solid var(--gold); box-shadow: 0 0 calc(var(--cq) * 7) #e6c15a88; animation: losPop .55s cubic-bezier(.2, 1.5, .4, 1); }
.los-card .tk.lg { width: calc(var(--cq) * 10); height: calc(var(--cq) * 10); }
.los-card small { font: 600 calc(var(--cq) * 2.400) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.los-card b { font: 600 calc(var(--cq) * 9) var(--serif); color: var(--gold); line-height: 1.05; }
.los-card span:not(.tk) { font: 600 calc(var(--cq) * 2.600) var(--sans); color: var(--ink); }
@keyframes losIn { from { opacity: 0; } }
@keyframes losOut { to { opacity: 0; } }
@keyframes losSpin { to { transform: rotate(360deg); } }
@keyframes losCoin { 0% { transform: translateY(0) rotateY(0); } 100% { transform: translateY(calc(var(--cq) * 118)) rotateY(1080deg); } }
@keyframes losPop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .los-rays { animation: none; } .los-card { animation: none; } }

/* Statistik: Gesamt und Runden */
.statseg { margin: 0 0 16px; max-width: 360px; }
.backbtn { margin-bottom: 12px; }
.backbtn .ui-ico { transform: scaleX(-1); }
.metiles.six { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.awardgame { font-size: 17px; font-weight: 600; }
.roundlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.roundcard { display: grid; gap: 12px; padding: 18px; text-align: left; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .1s; }
.roundcard:hover, .roundcard:focus-visible { border-color: var(--gold); }
.roundcard:active { transform: translateY(1px); }
.roundtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roundtop b { font: 600 18px var(--serif); min-width: 0; }
.roundtokens { display: flex; flex-wrap: wrap; gap: 6px; }
.roundcard small { color: var(--ink-2); font-size: 14px; }
.statchip { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--raised); color: var(--ink-2); font-size: 12px; font-style: normal; font-weight: 600; }
.statchip.live { background: var(--gold); color: #1d1a0d; }
.statchip.muted { color: var(--ink-3); }
.resetbox { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.btn.danger { border-color: var(--minus); color: var(--minus); }
@media (max-width: 480px) { .roundlist { grid-template-columns: minmax(0, 1fr); } }

/* Ueber Los: kurzer Effekt am Feld */
.go-fx { position: absolute; right: 0; bottom: 0; width: 14%; height: 14%; z-index: 6; pointer-events: none; }
.go-ring { position: absolute; inset: 0; border-radius: 12%; box-shadow: 0 0 0 calc(var(--cq) * .5) var(--gold), 0 0 calc(var(--cq) * 5) var(--gold); animation: goRing 2.4s ease-out forwards; }
.go-coin { position: absolute; right: 30%; bottom: 30%; width: calc(var(--cq) * 2.400); height: calc(var(--cq) * 2.400); border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff1b8, #e6c15a 45%, #a9791c); animation: goCoin 1.1s ease-out both; }
.go-pill { position: absolute; right: 100%; bottom: 60%; margin-right: calc(var(--cq) * 1); display: flex; align-items: center; gap: calc(var(--cq) * .8); padding: calc(var(--cq) * .7) calc(var(--cq) * 1.400); white-space: nowrap; border-radius: 999px; background: #0f2a21f2; border: calc(var(--cq) * .2) solid var(--gold); color: var(--ink); font-size: calc(var(--cq) * 2); animation: goPill 2.5s ease-out forwards; }
.go-pill span:not(.tk) { color: var(--gold); font-weight: 700; }
.go-pill .tk.sm { width: calc(var(--cq) * 3.200); height: calc(var(--cq) * 3.200); }
@keyframes goRing { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes goCoin { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--x) * var(--cq) * 22), calc(var(--y) * var(--cq) * 22)) scale(1); opacity: 0; } }
@keyframes goPill { 0% { transform: translateY(calc(var(--cq) * 2)) scale(.8); opacity: 0; } 12% { transform: none; opacity: 1; } 80% { transform: none; opacity: 1; } 100% { transform: translateY(calc(var(--cq) * -2)); opacity: 0; } }

/* Versteigerung, Besuche, Analyse */
.auc-end { margin: 10px 0 8px; }
.toplist li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; }
.toplist small { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.toplist small.up { color: var(--plus); }
.analysisgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.award.analysis { gap: 8px; }
.award.analysis p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
@media (max-width: 480px) { .analysisgrid { grid-template-columns: minmax(0, 1fr); } .toplist li { grid-template-columns: minmax(0, 1fr) auto auto; } .toplist i { display: none; } }

/* Analyse von Claude */
.claudebox { display: block; padding: 18px 20px; max-width: 72ch; }
.claudebox h4 { margin: 18px 0 6px; font: 600 18px var(--serif); color: var(--gold); }
.claudebox h4:first-child { margin-top: 0; }
.claudebox p { margin: 0 0 8px; color: var(--ink); line-height: 1.5; }
.claudebox .claudeitem { padding-left: 14px; border-left: 2px solid var(--line); color: var(--ink-2); }
.claudebox small { display: block; margin-top: 12px; color: var(--ink-3); font-size: 13px; }

/* Reihenfolge am Spielstart */
.orderbox { max-width: 620px; margin: 0 auto; padding: 18px 14px 26px; }
.orderbox h1 { font-size: 30px; }
.orderbox > p { color: var(--ink-2); margin: 4px 0 14px; }
.orderbox h2 { font: 600 20px var(--serif); margin: 0 0 10px; }
.orderdice { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 18px; }
.orderlist { list-style: none; margin: 0 0 16px; padding: 0; }
.orderlist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #ffffff14; }
.ordernum { width: 22px; text-align: center; font: 600 18px var(--serif); color: var(--gold); }
.ordername { flex: 1; min-width: 0; }
.ordername b, .ordername small { display: block; }
.ordername small { color: var(--ink-3); font-size: 13px; }
.orderbtns { display: flex; gap: 6px; }

/* Chips mit Figur: links und rechts gleich viel Luft, mehrzeilige Knoepfe mittig */
.who button { padding-left: 10px; padding-right: 10px; }
.btn { text-align: center; }
.playerrow > div:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playerrow > div:last-child { flex: none; }
@media (max-width: 440px) {
  .playerrow .iconbtn span { display: none; }
  .playerrow .iconbtn { padding: 0 11px; }
}

/* Bankzugang: Sperrbildschirm, Geraeteliste, allgemeine Startseite */
.solo { max-width: 480px; margin: 0 auto; padding: 40px 16px 60px; }
.solo .why { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.solo-hero { margin-bottom: 22px; }
.solo-hero h1 { font-size: clamp(36px, 9vw, 52px); }
.homebtns { display: grid; gap: 10px; }
.homeplayers { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.homeplayer { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.paircode { font: 700 38px var(--sans); letter-spacing: .12em; color: var(--gold); text-align: center; padding: 14px 0 16px; font-variant-numeric: tabular-nums; }
.paircode.sm { font-size: 22px; padding: 0; letter-spacing: .1em; }
.dev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.dev.pending { grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--gold); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: #e6c15a12; }
.dev.pending .dev-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dev-main { min-width: 0; }
.dev-main b { display: block; }
.dev-main small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.dev-btns .btn { min-height: 40px; padding: 0 14px; }
.devtag { white-space: nowrap; font: 600 11px var(--sans); color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.devlog { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.devlog summary { cursor: pointer; color: var(--ink-3); font-weight: 600; }
.devlog ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.devlog li { display: grid; grid-template-columns: 92px minmax(0, 7em) minmax(0, 1fr); gap: 8px; }
.devlog li span { color: var(--ink-3); }
.devlog li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devbar { position: fixed; z-index: 60; top: 10px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100vw - 20px)); background: var(--surface); border-radius: 16px; box-shadow: 0 12px 40px #000a; }
.devbar .dev.pending { margin: 0; }

/* Fernseher: grosse Momente (fx.js) */
.fx-stage { position: absolute; inset: 15%; z-index: 8; display: grid; place-items: center; pointer-events: none; perspective: calc(var(--cq) * 140); }
.fx-stage[hidden] { display: none; }
.fx-stage.out { animation: fxOut .3s ease-in forwards; }
.fx-back { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--cq) * 2); background: radial-gradient(circle, #10221bf7 0, #0b1311fc 75%); box-shadow: 0 0 0 calc(var(--cq) * .3) #e6c15a33; animation: fxIn .3s ease-out both; }
.fx-show { position: relative; display: grid; justify-items: center; gap: calc(var(--cq) * 1.800); }
.fx-who { display: flex; align-items: center; gap: calc(var(--cq) * 1.200); font: 600 calc(var(--cq) * 3) var(--sans); color: var(--ink); animation: fxRise .45s ease-out .9s both; }
.fx-who .tk { width: calc(var(--cq) * 5); height: calc(var(--cq) * 5); }
.fx-who b { color: var(--gold); }

.fx-deed { position: relative; width: calc(var(--cq) * 36); padding: calc(var(--cq) * 1.400) calc(var(--cq) * 1.400) calc(var(--cq) * 9.500); border-radius: calc(var(--cq) * 1.200); background: #fbf7ea; color: #1d1a12; box-shadow: 0 calc(var(--cq) * 2) calc(var(--cq) * 6) #000b; transform-origin: 50% 0; animation: deedIn .75s cubic-bezier(.2, 1.3, .4, 1) both; }
.fx-band { display: grid; padding: calc(var(--cq) * 1.200) calc(var(--cq) * 1); border-radius: calc(var(--cq) * .6); background: var(--g); color: #fff; text-align: center; }
.fx-band small { font: 600 calc(var(--cq) * 1.300) var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.fx-band b { font: 600 calc(var(--cq) * 4)/1.15 var(--serif); }
.fx-deed dl { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--cq) * .6) calc(var(--cq) * 2); margin: calc(var(--cq) * 1.600) calc(var(--cq) * .8) calc(var(--cq) * .6); font-size: calc(var(--cq) * 2.300); }
.fx-deed dt { color: #5d5644; }
.fx-deed dd { margin: 0; font-weight: 700; text-align: right; }
.fx-stamp { position: absolute; left: 50%; bottom: calc(var(--cq) * 1.400); translate: -50% 0; rotate: -6deg; padding: calc(var(--cq) * .5) calc(var(--cq) * 2); border: calc(var(--cq) * .5) solid var(--c); border-radius: calc(var(--cq) * .8); background: #fbf7ea; color: var(--c); font: 800 calc(var(--cq) * 5)/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) .8s both; }
.fx-show.grey .fx-band { filter: grayscale(1); }

.fx-rise { position: relative; animation: cardRise .6s cubic-bezier(.2, 1.2, .4, 1) both; }
.fx-flip { position: relative; width: calc(var(--cq) * 46); height: calc(var(--cq) * 30); transform-style: preserve-3d; animation: cardFlip .7s cubic-bezier(.4, 0, .2, 1) .8s both; }
.fx-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--cq) * 1.400); padding: calc(var(--cq) * 2.600); border-radius: calc(var(--cq) * 1.600); text-align: center; backface-visibility: hidden; box-shadow: 0 calc(var(--cq) * 2) calc(var(--cq) * 6) #000b; }
.fx-cover { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #ea8a2c 0 calc(var(--cq) * 1.400), #d8761d 0 calc(var(--cq) * 2.800)); color: #fff; border: calc(var(--cq) * .6) solid #fff3; }
.chest .fx-cover { background: repeating-linear-gradient(45deg, #3b88cb 0 calc(var(--cq) * 1.400), #2e71ac 0 calc(var(--cq) * 2.800)); }
.fx-cover b { font: 600 calc(var(--cq) * 13)/1 var(--serif); }
.fx-cover b .ui-ico { width: calc(var(--cq) * 12); height: calc(var(--cq) * 12); }
.fx-cover small { font: 700 calc(var(--cq) * 1.900) var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.fx-front { background: #fff5d6; color: #2a2412; }
.chest .fx-front { background: #d9ecf7; }
.fx-front small { font: 700 calc(var(--cq) * 1.800) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9a6a12; }
.chest .fx-front small { color: #2f6db3; }
.fx-front b { font: 600 calc(var(--cq) * 3.600)/1.25 var(--serif); }
.fx-front .fx-who { color: #2a2412; font-size: calc(var(--cq) * 2.200); animation-delay: 1.4s; }
.fx-front .fx-who .tk { width: calc(var(--cq) * 4); height: calc(var(--cq) * 4); }

.fx-siren { position: absolute; inset: 0; box-shadow: inset 0 0 calc(var(--cq) * 9) #e5484d; animation: siren .9s steps(1) 3; }
.fx-cell { position: relative; display: grid; place-items: center; width: calc(var(--cq) * 22); height: calc(var(--cq) * 22); overflow: hidden; border: calc(var(--cq) * .5) solid #59645f; border-radius: calc(var(--cq) * 1.400); background: #17211d; }
.fx-cell .tk { width: calc(var(--cq) * 12); height: calc(var(--cq) * 12); }
.fx-bars { position: absolute; inset: 0; display: flex; justify-content: space-evenly; }
.fx-bars i { width: calc(var(--cq) * 1.200); height: 100%; background: linear-gradient(90deg, #6f7a75, #e1e7e3 45%, #59645f); box-shadow: 0 0 calc(var(--cq) * .6) #000a; animation: barDrop .45s cubic-bezier(.5, 0, .6, 1.5) calc(.25s + var(--i) * .07s) both; }
.fx-jail b { font: 600 calc(var(--cq) * 5.200) var(--serif); color: #ff8a65; animation: fxRise .4s ease-out 1s both; }
.fx-jail > span { font: 600 calc(var(--cq) * 2.500) var(--sans); color: var(--ink); animation: fxRise .4s ease-out 1.2s both; }


.fx-built { align-self: start; margin-top: 4%; }
.fx-pill { display: flex; align-items: center; gap: calc(var(--cq) * 1.200); padding: calc(var(--cq) * 1) calc(var(--cq) * 2); border: calc(var(--cq) * .25) solid var(--gold); border-radius: 999px; background: #0f2a21f2; color: var(--ink); box-shadow: 0 calc(var(--cq) * 1) calc(var(--cq) * 4) #0009; animation: fxRise .4s ease-out both; }
.fx-pill .tk.sm { width: calc(var(--cq) * 4); height: calc(var(--cq) * 4); }
.fx-pill span { display: grid; text-align: left; }
.fx-pill b { font: 600 calc(var(--cq) * 2.400) var(--sans); }
.fx-pill small { font-size: calc(var(--cq) * 1.600); color: var(--ink-2); }

.fx-spots { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.fx-at, .fx-ring, .fx-rentat { position: absolute; }
.fx-at { display: flex; flex-wrap: wrap; place-content: center; gap: 6%; border-radius: 10%; box-shadow: inset 0 0 0 calc(var(--cq) * .4) var(--c), 0 0 calc(var(--cq) * 3) var(--c); background: #0b1311b3; animation: fxIn .3s ease-out both, fxOut .4s ease-in 2.1s forwards; }
.fx-house { width: calc(var(--cq) * 3); height: calc(var(--cq) * 3); background: #2fa84f; clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); filter: drop-shadow(0 1px 1px #0008); animation: houseDrop .6s cubic-bezier(.3, 1.6, .5, 1) calc(.2s + var(--d) * .16s) both; }
.fx-house.hotel { width: calc(var(--cq) * 5); background: #e5484d; }
.fx-ring { border-radius: 10%; box-shadow: 0 0 0 calc(var(--cq) * .5) var(--c), 0 0 calc(var(--cq) * 4) var(--c); animation: ringPulse 1.8s ease-out forwards; }
.fx-rentat { display: grid; place-items: center; }
.fx-rent { padding: calc(var(--cq) * .5) calc(var(--cq) * 1.200); border-radius: 999px; background: #b42318; color: #fff; font: 700 calc(var(--cq) * 2)/1.2 var(--sans); white-space: nowrap; box-shadow: 0 calc(var(--cq) * .5) calc(var(--cq) * 2) #000a; animation: rentUp 2s ease-out forwards; }

@keyframes fxIn { from { opacity: 0; } }
@keyframes fxOut { to { opacity: 0; } }
@keyframes fxRise { from { opacity: 0; transform: translateY(calc(var(--cq) * 2)); } }
@keyframes deedIn { from { opacity: 0; transform: translateY(calc(var(--cq) * -30)) rotateX(75deg); } }
@keyframes stamp { from { opacity: 0; transform: scale(2.8); } 60% { opacity: 1; } }
@keyframes cardRise { from { opacity: 0; translate: 0 calc(var(--cq) * 45); rotate: -10deg; } }
@keyframes cardFlip { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
@keyframes siren { 0% { box-shadow: inset 0 0 calc(var(--cq) * 9) #e5484d; } 50% { box-shadow: inset 0 0 calc(var(--cq) * 9) #3b82f6; } 100% { box-shadow: none; } }
@keyframes barDrop { from { transform: translateY(-105%); } }
@keyframes houseDrop { from { opacity: 0; transform: translateY(calc(var(--cq) * -9)) scale(1.5); } }
@keyframes ringPulse { 0% { opacity: 0; transform: scale(1.4); } 20% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rentUp { 0% { opacity: 0; transform: translateY(0) scale(.7); } 15% { opacity: 1; transform: translateY(-20%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120%); } }
/* Pleite */
.fx-dire { background: radial-gradient(circle at 50% 45%, #3a0d0df5 0, #120606fc 70%); }
.fx-broke { gap: calc(var(--cq) * 2.400); animation: stageShake .45s ease-out 2.25s; }
.fx-acct { position: relative; width: calc(var(--cq) * 34); height: calc(var(--cq) * 24); animation: fxRise .5s cubic-bezier(.2, 1.3, .4, 1) both, acctShake .32s ease-in-out 1.9s; }
.fx-half { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--cq) * .5); border: calc(var(--cq) * .4) solid var(--c); border-radius: calc(var(--cq) * 1.600); background: linear-gradient(160deg, #1b2a24, #101915); box-shadow: 0 calc(var(--cq) * 2) calc(var(--cq) * 6) #000c; }
.fx-half .tk { width: calc(var(--cq) * 8); height: calc(var(--cq) * 8); }
.fx-half b { font: 600 calc(var(--cq) * 3.200) var(--serif); color: var(--ink); }
.fx-half small { font: 700 calc(var(--cq) * 1.400) var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.fx-half em { font: 600 calc(var(--cq) * 4.600)/1 var(--serif); font-style: normal; color: #ff6b5e; font-variant-numeric: tabular-nums; }
.fx-half.l { clip-path: polygon(0 0, 53% 0, 47% 28%, 56% 52%, 45% 76%, 51% 100%, 0 100%); animation: halfLeft .9s cubic-bezier(.5, 0, .8, .6) 2.2s forwards; }
.fx-half.r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 51% 100%, 45% 76%, 56% 52%, 47% 28%); animation: halfRight .9s cubic-bezier(.5, 0, .8, .6) 2.2s forwards; }
.fx-chip { position: absolute; left: 50%; top: 82%; z-index: 1; width: calc(var(--cq) * 2.600); height: calc(var(--cq) * 3.600); margin: calc(var(--cq) * -1.800) 0 0 calc(var(--cq) * -1.300); border-radius: calc(var(--cq) * .4); background: var(--g); border: calc(var(--cq) * .25) solid #fbf7ea; box-shadow: 0 calc(var(--cq) * .4) calc(var(--cq) * 1) #0009; opacity: 0; animation: chipFly 1s cubic-bezier(.5, 0, .5, 1) calc(.75s + var(--i) * .09s) forwards; }
.fx-xband { position: absolute; left: -12%; right: -12%; top: 46%; padding: calc(var(--cq) * .8) 0; background: repeating-linear-gradient(-45deg, #f2c94c 0 calc(var(--cq) * 1.600), #141008 0 calc(var(--cq) * 3.200)); rotate: -9deg; box-shadow: 0 calc(var(--cq) * 1) calc(var(--cq) * 4) #000c; text-align: center; animation: bandSlam .42s cubic-bezier(.3, 1.5, .5, 1) 2.25s both; }
.fx-xband b { display: block; padding: calc(var(--cq) * .6) 0; background: #c62828; color: #fff; font: 800 calc(var(--cq) * 6.400)/1.05 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 calc(var(--cq) * .3) 0 #0006; }
.fx-heir { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(var(--cq) * 1.400); margin-top: calc(var(--cq) * 9); padding: calc(var(--cq) * 1) calc(var(--cq) * 2.200); border-radius: 999px; background: #0f1a16f2; border: calc(var(--cq) * .25) solid #ffffff22; animation: fxRise .45s ease-out 3s both; }
.fx-heir .tk { width: calc(var(--cq) * 5); height: calc(var(--cq) * 5); }
.fx-heir span { display: grid; text-align: left; }
.fx-heir b { font: 600 calc(var(--cq) * 2.700) var(--sans); color: var(--ink); }
.fx-heir small { font-size: calc(var(--cq) * 1.900); color: var(--ink-2); }
@keyframes acctShake { 20% { transform: translateX(-3%) rotate(-2deg); } 40% { transform: translateX(3%) rotate(2deg); } 60% { transform: translateX(-2%); } 80% { transform: translateX(2%); } }
@keyframes halfLeft { to { transform: translate(-38%, 55%) rotate(-24deg); opacity: 0; } }
@keyframes halfRight { to { transform: translate(38%, 60%) rotate(20deg); opacity: 0; } }
@keyframes chipFly { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: translateY(calc(var(--cq) * -6)) scale(1.1); } 100% { opacity: 0; transform: translate(calc(var(--tx) * var(--cq)), calc(var(--cq) * 30)) rotate(calc(var(--tx) * 6deg)) scale(.6); } }
@keyframes bandSlam { from { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; } }
@keyframes stageShake { 20% { translate: calc(var(--cq) * -1) calc(var(--cq) * .6); } 40% { translate: calc(var(--cq) * 1) calc(var(--cq) * -.6); } 60% { translate: calc(var(--cq) * -.6) 0; } 80% { translate: calc(var(--cq) * .4) 0; } }
.fx-stage.calm * { animation-duration: .01s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .fx-spots * { animation-duration: .01s !important; animation-delay: 0s !important; } }
.fx-stage.calm .fx-flip { animation: none; transform: none; }

/* Zug-Uhr am Fernseher */
.c-timer { display: flex; align-items: center; gap: calc(var(--cq) * 1.200); padding: calc(var(--cq) * .6) calc(var(--cq) * 1.800) calc(var(--cq) * .6) calc(var(--cq) * .7); border-radius: 999px; background: #0f2a21e6; border: calc(var(--cq) * .2) solid #ffffff22; --tone: #5fd38d; }
.c-timer[hidden] { display: none; }
.c-timer i { width: calc(var(--cq) * 4); height: calc(var(--cq) * 4); border-radius: 50%; background: conic-gradient(var(--tone) calc(var(--p) * 360deg), #ffffff1f 0); -webkit-mask: radial-gradient(circle, #0000 52%, #000 54%); mask: radial-gradient(circle, #0000 52%, #000 54%); }
.c-timer b { font: 600 calc(var(--cq) * 3)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.c-timer span { font-size: calc(var(--cq) * 1.800); color: var(--ink-2); }
.c-timer.warn { --tone: #f2b53c; border-color: #f2b53c88; }
.c-timer.warn b { color: #f6c860; }
.c-timer.over { --tone: #e5484d; --p: 1; border-color: #e5484d; background: #3a0d0de6; animation: timerPulse 1s ease-in-out infinite; }
.c-timer.over b { color: #ff8a80; }
@keyframes timerPulse { 50% { box-shadow: 0 0 calc(var(--cq) * 3) #e5484daa; } }
.center.in-auction > .c-timer { display: none; }
/* Uhren in der Bank-Leiste und am Handy */
.clocks { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clocks b { font-weight: 600; color: var(--ink); }
.clocks .warn { color: #f6c860; }
.clocks .over { color: #ff8a80; font-weight: 700; }
.mebanner .turnclock { font-variant-numeric: tabular-nums; font-weight: 700; }
.mebanner .turnclock.warn { color: #f6c860; }
.mebanner .turnclock.over { color: #ff8a80; }
.field-label { margin-top: 12px; font-weight: 600; font-size: 14px; }
.field-label small { display: block; margin-top: 2px; font-weight: 400; color: var(--ink-3); }
/* Kopfleiste der Bank: bei wenig Platz nur Symbole, damit Spielzeit und Zug-Uhr Platz haben. */
@media (max-width: 1240px) { .bar .iconbtn > span { display: none; } }
@media (max-width: 420px) { .clocks { font-size: 12px; gap: 5px; margin-left: 6px; } .clocks .ui-ico { display: none; } }
/* Haeuser und Hotels auf dem Brett: dunkle Kontur, damit sie auf jeder Strassenfarbe klar stehen. */
.f-build { filter: drop-shadow(0 0 .6px #0b1311) drop-shadow(0 0 .6px #0b1311) drop-shadow(0 1.2px 1px #0008); }
.credits { margin: 18px 4px 8px; font-size: 12px; text-align: center; }
.credits a { color: inherit; }

/* Fernseher: lange Buchungstexte kuerzen, damit sie nie unter die Karte oder aus der Mitte laufen. */
.c-tx span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.center.with-card .c-tx span { -webkit-line-clamp: 1; }
.center.with-card .c-roll { display: none; }
/* Kopfleiste: Bank-Bestand darf schrumpfen statt in die Symbole zu laufen. */
.tv-head .kpi { min-width: 0; }
.tv-head .kpi b { display: block; overflow: hidden; text-overflow: ellipsis; }
.tv-head { gap: calc(var(--u) * 2.200); }
.tv-head .kpi:nth-child(4) b { font-size: calc(var(--u) * 2.200); }
.linkbtn { margin-top: 14px; background: none; border: 0; color: var(--ink-3); font-size: 13px; text-decoration: underline; cursor: pointer; }
.waitbox > .tk.lg { width: 72px; height: 72px; margin: 6px auto 2px; }
.waitbox .rank { text-align: left; }

/* Bank auf breiten Bildschirmen (Laptop, iPad quer): dichter, damit ein Tab ohne Scrollen passt.
   Steht am Ende, damit es die Grundregeln oben ueberschreibt. */
@media (min-width: 980px) {
  /* Dichter, damit ein Tab ohne Scrollen auf einen Blick passt */
  .bar { padding: 8px 14px; }
  /* Spieler gleich breit nebeneinander, bei Platzmangel sauber in zwei Zeilen */
  .strip, .strip.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); overflow: visible; gap: 5px; padding: 0 14px 8px; }
  .strip .chip { padding: 2px 6px 2px 2px; gap: 4px; }
  .strip .chip .tk { width: 24px; height: 24px; }
  .strip .chip small { font-size: 11px; }
  .strip .chip b { font-size: 13px; letter-spacing: -.01em; }
  .sec { margin-bottom: 10px; }
  .seg { margin-top: 2px; }
  .seg button { min-height: 36px; }
  .flow { margin-bottom: 8px; }
  .picks { margin-bottom: 8px; }
  .picks button { min-height: 38px; }
  .amountbox { padding: 5px 12px; }
  .amountbox output { font-size: 26px; }
  .quick.seven button { min-height: 34px; }
  .quick.seven, .view .notes:not(.bplayers) { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .keypad { margin: 6px 0 10px; }
  .keypad { gap: 5px; }
  .keypad button { min-height: 38px; font-size: 19px; }
  .notes { margin-bottom: 6px; }
  .notes button, .quick button { min-height: 36px; }
  #payGo { bottom: 0; }
  .dealbar { bottom: 0; }
  .view .notes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 6px; padding: 0 14px; }
  .view .notes button { flex: none; }
  .sec > h3, .lbl { margin-bottom: 5px; }
  #payNote { padding-top: 8px; padding-bottom: 8px; }
  /* Die letzten Buchungen stehen im Verlauf und am Brett, hier wuerden sie nur nach unten schieben. */
  .recent { display: none; }
  .view .sec:has(> #payNote) > h3 { display: none; }
  .bgroup { margin-top: 8px; padding: 6px 10px 8px 14px; }
  .bghead small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .brow { padding: 2px 0; }
  .brow .bname { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .brow .bname b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brow .bname small { white-space: nowrap; }
  .bsum { padding: 7px 10px; margin-top: 8px; }
  .bsum .twobtn { margin-top: 5px; }
  .bsum .twobtn .btn { min-height: 38px; }
  .view .bplayers { gap: 5px; }
  .view .bplayers button { padding: 2px 9px 2px 3px; gap: 5px; font-size: 13px; min-height: 32px; }
  .view .bplayers button .tk { width: 24px; height: 24px; }
  /* Farbgruppe: Reihe -1/+1 rechts in der Kopfzeile statt eigener Zeile */
  .bgroup { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
  .bgroup > * { grid-column: 1 / -1; }
  .bgroup > .bghead { grid-column: 1; grid-row: 1; margin-bottom: 2px; }
  .bgroup > .bgbtns { grid-column: 2; grid-row: 1; margin: 0; display: flex; gap: 4px; }
  .bgbtns .btn { min-height: 30px; padding: 0 9px; font-size: 12.5px; }
  .bgbtns .btn small { display: none; }
  .turnhead { margin-bottom: 10px; }
  /* Handel: Strassen einzeilig, Name links, Preis oder Hinweis rechts daneben */
  .dealtile { padding: 4px 7px; gap: 6px; }
  .dealtile span { display: flex; align-items: baseline; gap: 6px; }
  .dealtile b { flex: none; max-width: 62%; }
  .dealtile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .hint .dice { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
  .hint .dice button { min-height: 40px; font-size: 17px; }
  .hint { padding: 11px 12px; margin-bottom: 10px; }
}