:root {
  --navy: #0c1b2a;
  --navy-2: #13293f;
  --navy-3: #1c3a58;
  --gold: #c9a35c;
  --gold-2: #ddbe85;
  --text: #e8ecf1;
  --muted: #93a3b5;
  --light: #ecdcbc;
  --dark: #a98a5a;
  --hl: rgba(255, 214, 92, .45);
  --sel: rgba(120, 190, 255, .55);
  --bad: #e5675c;
  --mid: #e9a23b;
  --soft: #d9c86a;
  --k: 8;     /* Brettbreite in Feldern (Leuchtbrett: inkl. Rahmen und Fugen) */
  --bz: 0px;  /* Rahmenbreite */
  --sq: min(calc((100vw - 32px) / var(--k)), calc((100vh - 170px) / var(--k)), 76px);
  --sq: min(calc((100vw - 32px) / var(--k)), calc((100dvh - 170px) / var(--k)), 76px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { background: var(--navy); color: var(--text); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
button, select, input { font: inherit; color: inherit; }
.noscript { padding: 2rem; }

.layout { flex: 1; display: flex; gap: 28px; justify-content: center; align-items: flex-start; padding: 18px 16px 8px; }
.play { display: flex; flex-direction: column; gap: 8px; }

.player { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.avatar { width: 38px; height: 38px; border-radius: 8px; background: var(--navy-3); display: grid; place-items: center; font-weight: 700; color: var(--gold-2); font-size: .9rem; flex: none; }
.avatar.me { background: var(--gold); color: var(--navy); }
.pinfo { flex: 1; min-width: 0; line-height: 1.25; }
.pinfo b { font-weight: 500; }
.rating { color: var(--muted); font-size: .9rem; }
.captured { min-height: 18px; display: flex; flex-wrap: wrap; align-items: center; }
.captured .pc { width: 18px; height: 18px; margin-right: -4px; }
.captured .adv { margin-left: 8px; font-size: .8rem; color: var(--muted); }
.thinking { font-size: .85rem; color: var(--gold-2); }
.thinking::after { content: '…'; display: inline-block; animation: dots 1.2s steps(4) infinite; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1.1em; } }
.clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; background: var(--navy-2); padding: 4px 12px; border-radius: 6px; min-width: 84px; text-align: right; }
.clock.run { background: var(--text); color: var(--navy); }
.clock.low { background: var(--bad); color: #fff; }

.board-wrap { position: relative; }
.board { display: grid; grid-template-columns: repeat(8, var(--sq)); grid-template-rows: repeat(8, var(--sq)); border-radius: 4px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.35); touch-action: none; user-select: none; -webkit-user-select: none; }
.sq { position: relative; }
.sq.l { background: var(--light); }
.sq.d { background: var(--dark); }
.sq.last::before, .sq.sel::before, .sq.chk::before { content: ''; position: absolute; inset: 0; }
.sq.last::before { background: var(--hl); }
.sq.sel::before { background: var(--sel); }
.sq.chk::before { background: radial-gradient(circle, rgba(230,40,40,.9) 0%, rgba(230,40,40,.4) 45%, transparent 75%); }
.sq .coord { position: absolute; font-size: calc(var(--sq) * .17); font-weight: 700; pointer-events: none; z-index: 1; }
.sq .coord.f { right: 3px; bottom: 1px; }
.sq .coord.r { left: 3px; top: 1px; }
.sq.l .coord { color: var(--dark); }
.sq.d .coord { color: var(--light); }
.sq.tgt::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20, 40, 60, .3); z-index: 3; pointer-events: none; }
.sq.tgt.cap::after { width: 92%; height: 92%; background: none; border: calc(var(--sq) * .08) solid rgba(20, 40, 60, .3); }
.pc { position: absolute; inset: 0; background-size: 100% 100%; z-index: 2; cursor: grab; }
.captured .pc { position: static; display: inline-block; cursor: default; }
.pc.drag { position: fixed; inset: auto; width: var(--sq); height: var(--sq); z-index: 50; pointer-events: none; cursor: grabbing; transform: scale(1.08); }
.pc.ghost { opacity: .3; }
.pc.anim { transition: transform .18s ease-out; }

.promo { position: absolute; top: var(--bz); left: var(--bz); width: calc(100% - 2 * var(--bz)); height: calc(var(--sq) * 8 + 7 * var(--gap, 0px)); background: rgba(12, 27, 42, .55); display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 20; }
.promo button { width: var(--sq); height: var(--sq); border: 0; border-radius: 8px; background: var(--light); position: relative; cursor: pointer; }
.promo button:hover { background: var(--gold-2); }

.panel { width: 320px; background: var(--navy-2); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 18px; max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow-y: auto; scrollbar-width: thin; }
.phead .kicker { color: var(--gold); font-size: .8rem; text-decoration: none; letter-spacing: .08em; text-transform: uppercase; }
.phead h1 { font-size: 1.5rem; font-weight: 700; }
.status { color: var(--gold-2); min-height: 1.4em; font-size: .95rem; flex: none; }
.moves { list-style: none; overflow-y: auto; min-height: 120px; flex: none; max-height: max(160px, calc(var(--sq) * 8 - 230px)); background: var(--navy); border-radius: 6px; padding: 6px 0; font-variant-numeric: tabular-nums; font-size: .95rem; }
.panel:has(.review:not([hidden])) .moves { max-height: max(120px, calc(var(--sq) * 8 - 420px)); }
.moves li { display: grid; grid-template-columns: 36px 1fr 1fr; padding: 1px 8px; }
.moves li:nth-child(even) { background: rgba(255,255,255,.03); }
.moves .n { color: var(--muted); }
.moves .m { cursor: pointer; border-radius: 3px; padding: 0 4px; }
.moves .m:hover { background: var(--navy-3); }
.moves .m.cur { background: var(--navy-3); outline: 1px solid var(--gold); }
.moves .m .g { font-weight: 700; margin-left: 2px; }
.g.b4 { color: var(--bad); } .g.b3 { color: var(--mid); } .g.b2 { color: var(--soft); }
.nav { display: flex; gap: 6px; }
.nav button { flex: 1; background: var(--navy-3); border: 0; border-radius: 6px; padding: 6px; cursor: pointer; font-size: 1.1rem; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions button, .primary { border: 0; border-radius: 6px; padding: 9px 10px; background: var(--navy-3); cursor: pointer; font-weight: 500; }
.actions button:hover:not(:disabled) { background: #24496d; }
.actions button:disabled { opacity: .4; cursor: default; }
.actions .primary, .primary { background: var(--gold); color: var(--navy); grid-column: 1 / -1; }
.actions .primary:hover, .primary:hover { background: var(--gold-2); }
.review { background: var(--navy); border-radius: 6px; padding: 10px 12px; font-size: .85rem; line-height: 1.45; }
.review td:first-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review h3 { font-size: 1rem; margin-bottom: 4px; }
.review table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.review td, .review th { padding: 2px 4px; text-align: right; font-weight: 400; }
.review th { color: var(--muted); font-size: .8rem; }
.review td:first-child, .review th:first-child { text-align: left; }
.review .note { color: var(--muted); margin-top: 6px; }
.record { color: var(--muted); font-size: .8rem; }

.modal { position: fixed; inset: 0; background: rgba(5, 12, 20, .72); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal[hidden] { display: none; }
.sheet { background: var(--navy-2); border-radius: 12px; padding: 22px; width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.sheet h2 { font-size: 1.35rem; }
.sheethead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheetx { background: none; border: 0; color: var(--muted); font-size: 1.6rem; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.sheetx:hover { color: var(--text); }
.setupacct { color: var(--muted); font-size: .85rem; margin-top: -8px; }
.setupacct b { color: var(--text); }
fieldset { border: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
legend { color: var(--muted); font-size: .85rem; margin-bottom: 6px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; background: var(--navy); cursor: pointer; border: 1px solid transparent; }
.opt:has(input:checked) { border-color: var(--gold); }
.opt input { margin-top: 4px; accent-color: var(--gold); }
.opt span { display: flex; flex-direction: column; }
.opt small { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.row.two { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.assistnote { color: var(--muted); font-size: .8rem; line-height: 1.4; margin-top: -6px; }
select { background: var(--navy); border: 1px solid var(--navy-3); border-radius: 6px; padding: 7px 8px; width: 100%; }
.big { padding: 12px; font-size: 1.05rem; }

.foot { color: var(--muted); font-size: .75rem; text-align: center; padding: 10px 16px 16px; }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot a:hover { color: var(--gold); }

@media (max-width: 900px) {
  :root { --sq: min(calc((100vw - 32px) / var(--k)), 72px); }
  .layout { flex-direction: column; align-items: center; padding-top: 10px; }
  .panel { width: calc(var(--sq) * 8); max-height: none; position: static; overflow: visible; }
  .moves { max-height: 180px; }
  .row { grid-template-columns: 1fr; }
}

/* ---------- Analyse ---------- */
.arrows { position: absolute; top: var(--bz); left: var(--bz); width: calc(100% - 2 * var(--bz)); height: calc(var(--sq) * 8 + 7 * var(--gap, 0px)); pointer-events: none; z-index: 4; }
.arrows line { stroke-width: .18; stroke-linecap: round; opacity: .85; }
.arrows line.best, .arrows marker.best path { stroke: #3fb950; fill: #3fb950; }
.arrows line.played, .arrows marker.played path { stroke: var(--bad); fill: var(--bad); }
.moveinfo { background: var(--navy); border-radius: 6px; padding: 8px 10px; font-size: .85rem; line-height: 1.4; }
.moveinfo .who { font-weight: 700; color: var(--gold-2); }
.moveinfo .who.op { color: var(--muted); }
.moveinfo .ev, .review .ev { font-variant-numeric: tabular-nums; color: var(--muted); }
.moveinfo .showbest { margin-left: 6px; border: 1px solid var(--navy-3); background: var(--navy-2); border-radius: 5px; padding: 2px 8px; font-size: .8rem; cursor: pointer; }
.moveinfo .showbest:hover { background: var(--navy-3); }
.moveinfo .legend { color: var(--muted); }
.review .prog { height: 6px; background: var(--navy-2); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.review .prog i { display: block; height: 100%; background: var(--gold); transition: width .2s; }
.review h3 small { color: var(--muted); font-weight: 400; font-size: .8rem; margin-left: 6px; }
.review h4 { font-size: .9rem; margin: 12px 0 4px; color: var(--gold-2); }
.review .elo { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.review .elo .big { display: flex; align-items: center; gap: 12px; }
.review .elo .num { font-size: 2.3rem; font-weight: 700; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.review .elo .lbl { line-height: 1.3; }
.review .elo .lbl small { color: var(--muted); }
.review .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.review .kpis div { background: var(--navy-2); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; }
.review .kpis b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.review .kpis small { color: var(--muted); font-size: .72rem; }
.review .graph { width: 100%; height: 72px; display: block; border-radius: 6px; margin: 4px 0 8px; cursor: pointer; }
.review .graph .bg { fill: var(--navy-2); }
.review .graph .mid { stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 3 3; }
.review .graph .area { fill: rgba(201,163,92,.22); }
.review .graph .line { fill: none; stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.review .graph .cur { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.review .graph .mk { stroke: var(--navy); stroke-width: 1; }
.review .graph .mk.b4 { fill: var(--bad); } .review .graph .mk.b3 { fill: var(--mid); } .review .graph .mk.b2 { fill: var(--soft); }
.review .phases div { display: grid; grid-template-columns: 1fr 90px 44px; align-items: center; gap: 8px; margin: 3px 0; }
.review .phases small { color: var(--muted); }
.review .phases .bar { height: 7px; background: var(--navy-2); border-radius: 4px; overflow: hidden; }
.review .phases .bar i { display: block; height: 100%; background: var(--gold); }
.review .phases b { text-align: right; font-variant-numeric: tabular-nums; }
.review .errs, .review .style { list-style: none; padding: 0; }
.review .errs li { padding: 5px 6px; border-radius: 5px; cursor: pointer; border-left: 3px solid var(--navy-3); margin: 3px 0; }
.review .errs li:hover { background: var(--navy-2); }
.review .errs .mv { font-weight: 700; }
.review .errs .more { color: var(--muted); cursor: default; border: 0; }
.review .style li { padding: 2px 0 2px 14px; position: relative; }
.review .style li::before { content: '·'; position: absolute; left: 3px; color: var(--gold); font-weight: 700; }
.review .fazit { line-height: 1.5; }

/* ---------- Statistik ---------- */
.actions button.on { background: var(--navy); outline: 1px solid var(--gold); }
.stats { background: var(--navy); border-radius: 6px; padding: 10px 12px; font-size: .85rem; line-height: 1.45; }
.stats h3 { font-size: 1rem; margin-bottom: 6px; }
.stats h3 small { color: var(--muted); font-weight: 400; font-size: .8rem; margin-left: 6px; }
.stats .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stats .kpis div { background: var(--navy-2); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; }
.stats .kpis b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stats .kpis small { color: var(--muted); font-size: .72rem; }
.stats .rec { color: var(--muted); margin: 6px 0 4px; }
.stats .note { color: var(--muted); margin-top: 8px; font-size: .78rem; }
.stats .note a { color: var(--gold-2); }
.stats .link, .setupacct .link { background: none; border: 0; color: var(--gold-2); text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; }
.stats .chartwrap { position: relative; margin: 4px 0 8px; }
.stats .legend { display: flex; gap: 14px; font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
.stats .legend span { display: inline-flex; align-items: center; gap: 5px; }
.stats .sw { width: 14px; height: 0; border-top: 2px solid; display: inline-block; }
.stats .sw.rating { border-color: #b8862a; }
.stats .sw.est { border-color: #3a86c4; border-top-style: dashed; }
.stats .chart { width: 100%; height: auto; display: block; background: var(--navy-2); border-radius: 6px; touch-action: none; }
.stats .chart .grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.stats .chart .ax { fill: var(--muted); font-size: 8px; }
.stats .chart .lbl { fill: var(--text); font-size: 9px; font-weight: 700; }
.stats .chart path.rating { fill: none; stroke: #b8862a; stroke-width: 2; stroke-linejoin: round; }
.stats .chart path.est { fill: none; stroke: #3a86c4; stroke-width: 1.5; stroke-dasharray: 4 3; }
.stats .chart .dot { stroke: var(--navy-2); stroke-width: 2; }
.stats .chart .dot.rating { fill: #b8862a; }
.stats .chart .dot.est { fill: #3a86c4; }
.stats .chart .cross { stroke: var(--text); stroke-width: 1; opacity: .5; }
.stats .tip { position: absolute; top: 28px; width: 170px; background: var(--navy-3); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: .75rem; line-height: 1.35; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.stats .games { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stats .games th { color: var(--muted); font-weight: 400; font-size: .75rem; text-align: left; padding: 2px 3px; }
.stats .games td { padding: 2px 3px; border-top: 1px solid rgba(255,255,255,.05); white-space: nowrap; }
.stats .games .opp { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.stats .games .opp small, .stats .games td small { color: var(--muted); }
.stats .games .rw { color: #3fb950; font-weight: 700; } .stats .games .rl { color: var(--bad); font-weight: 700; } .stats .games .rd { color: var(--muted); font-weight: 700; }
.stats .games .dp { color: #3fb950; } .stats .games .dm { color: var(--bad); }
.stats .code { background: var(--navy-2); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; letter-spacing: .04em; user-select: all; }
.stats .code { background: var(--navy-2); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; letter-spacing: .04em; user-select: all; }

/* ---------- Ton + Fokusmodus ---------- */
.chk { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .9rem; cursor: pointer; }
.chk input { accent-color: var(--gold); }
.focus-exit, .focus-status { display: none; }
body.focus { --sq: min(calc((100vw - 24px) / var(--k)), calc((100vh - 120px) / var(--k))); --sq: min(calc((100vw - 24px) / var(--k)), calc((100dvh - 120px) / var(--k))); }
body.focus .panel, body.focus .foot, body.focus .captured, body.focus .thinking { display: none !important; }
body.focus .layout { padding: 10px 12px; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; flex-direction: column; }
body.focus .play { gap: 6px; }
body.focus .player { min-height: 34px; }
body.focus .avatar { width: 28px; height: 28px; font-size: .8rem; }
body.focus .pinfo { font-size: .9rem; }
body.focus .focus-exit { display: block; position: fixed; top: 10px; right: 12px; z-index: 60; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--navy-2); color: var(--muted); font-size: 1rem; cursor: pointer; opacity: .75; }
body.focus .focus-exit:hover { opacity: 1; color: var(--text); }
body.focus .focus-status { display: block; margin-top: 8px; text-align: center; color: var(--gold-2); font-size: .9rem; min-height: 1.3em; }
@media (max-width: 900px) {
  body.focus { --sq: min(calc((100vw - 24px) / var(--k)), calc((100vh - 130px) / var(--k))); --sq: min(calc((100vw - 24px) / var(--k)), calc((100dvh - 130px) / var(--k))); }
}

/* ---------- Gegnerkader ---------- */
.sheet .bots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: min(52vh, 480px); overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.bot { display: flex; gap: 9px; align-items: flex-start; padding: 8px 9px; border-radius: 8px; background: var(--navy); cursor: pointer; border: 1px solid transparent; position: relative; }
.bot:has(input:checked) { border-color: var(--gold); background: #0f2236; }
.bot input { position: absolute; opacity: 0; pointer-events: none; }
.bot .av, .stats .av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-weight: 700; color: var(--navy); font-size: .85rem; flex: none; }
.stats .av { width: 20px; height: 20px; margin-right: 6px; vertical-align: -6px; overflow: hidden; }
.av svg, .avatar svg { width: 100%; height: 100%; display: block; }
.bot .av { width: 40px; height: 40px; overflow: hidden; }
.avatar { overflow: hidden; border-radius: 50%; }
.bot .bi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bot .bi b { font-weight: 500; display: flex; justify-content: space-between; gap: 6px; }
.bot .bi em { font-style: normal; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.bot .bi small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.bot .bi .rec { color: var(--gold-2); }
.bot.twin { grid-column: 1 / -1; }
.stats .games.bots .np td { color: var(--muted); }
@media (max-width: 900px) { .sheet .bots { grid-template-columns: 1fr; max-height: 46vh; } }

/* ---------- Zughilfe (beide Bretter) ---------- */
.hintlegend { flex: none; font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: -6px; }
.hintlegend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin: 0 2px 0 6px; }
.lg.good { background: #3fd27a; } .lg.meh { background: #f0b43c; } .lg.bad { background: #ff4d4d; } .lg.best { background: #fff; box-shadow: 0 0 0 2px #3fd27a; } .lg.hang { background: none; box-shadow: inset 0 0 0 2px #ff4d4d; }
.sq.tgt.q-good::after { background: rgba(40, 170, 90, .75); }
.sq.tgt.q-meh::after { background: rgba(230, 160, 30, .8); }
.sq.tgt.q-bad::after { background: rgba(220, 40, 40, .8); }
.sq.tgt.q-best::after { background: rgba(40, 170, 90, .9); box-shadow: 0 0 0 calc(var(--sq) * .05) #fff; }
.sq.tgt.cap.q-good::after { background: none; border-color: rgba(40, 170, 90, .8); }
.sq.tgt.cap.q-meh::after { background: none; border-color: rgba(230, 160, 30, .85); }
.sq.tgt.cap.q-bad::after { background: none; border-color: rgba(220, 40, 40, .85); }
.sq.tgt.cap.q-best::after { background: none; border-color: rgba(40, 170, 90, .95); box-shadow: inset 0 0 0 calc(var(--sq) * .04) #fff; }
.sq.hang::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--sq) * .06) rgba(220, 40, 40, .85); animation: hangpulse 1.4s ease-in-out infinite; z-index: 1; }
.sq.tip::before { content: ''; position: absolute; inset: 0; background: rgba(40, 170, 90, .35); animation: breathe 2.4s ease-in-out infinite; }
@keyframes hangpulse { 50% { opacity: .35; } }
@keyframes breathe { 50% { opacity: .35; } }
.lightbar { display: none; }

/* ---------- Leuchtbrett ----------
   Anthrazit-Rahmen mit Koordinaten, Felder als einzelne Kacheln mit Fugen, Hinweise als Licht unter der
   Kachel statt als Punkt. Lichtfarben: Gold = deine Auswahl, Violett = letzter Zug, Cyan = mögliche Ziele,
   Grün/Gelb/Rot = Zughilfe (Rot zusätzlich schraffiert, damit es ohne Farbsehen unterscheidbar bleibt). */
:root.lb { --k: 8.92; --bz: calc(var(--sq) * .34); --gap: max(1px, calc(var(--sq) * .03)); --frame: #15191f; --tl: #d3d8de; --td: #7f8a97;
  --led-sel: 255, 205, 110; --led-last: 170, 120, 255; --led-tgt: 90, 215, 255; --led-good: 60, 215, 120; --led-meh: 245, 180, 50; --led-bad: 255, 70, 70; }
.lb .board-wrap { width: max-content; }
.lb .board { gap: var(--gap); margin: var(--bz); background: #0b0e12; overflow: visible; border-radius: 2px;
  box-shadow: 0 0 0 var(--bz) var(--frame), 0 0 0 calc(var(--bz) + 1px) #2a313b, 0 18px 44px rgba(0, 0, 0, .55); }
.lb .sq { border-radius: calc(var(--sq) * .04); }
.lb .sq.l { background: var(--tl); }
.lb .sq.d { background: var(--td); }
/* Fenster der Kachel: feiner Innenrand wie eine Leuchtfläche */
.lb .sq { box-shadow: inset 0 0 0 calc(var(--sq) * .06) rgba(255, 255, 255, .07), inset 0 0 0 calc(var(--sq) * .07) rgba(0, 0, 0, .06); }
.lb .sq .coord { color: #6f7b88 !important; font-size: calc(var(--bz) * .42); font-weight: 500; }
.lb .sq .coord.f { right: 0; left: 0; bottom: calc(-1 * var(--bz)); height: var(--bz); line-height: var(--bz); text-align: center; }
.lb .sq .coord.r { left: calc(-1 * var(--bz)); top: 0; bottom: 0; width: var(--bz); display: grid; place-items: center; }
.lb .sq.last::before, .lb .sq.sel::before { border-radius: inherit; transition: box-shadow .35s, background .35s; }
.lb .sq.last::before { background: rgba(var(--led-last), .4); box-shadow: inset 0 0 calc(var(--sq) * .28) rgba(var(--led-last), 1); animation: ledon .45s ease-out; }
.lb .sq.sel::before { background: rgba(var(--led-sel), .6); box-shadow: inset 0 0 calc(var(--sq) * .3) rgba(var(--led-sel), 1), 0 0 calc(var(--sq) * .2) rgba(var(--led-sel), .7); z-index: 1; }
.lb .sq.chk::before { border-radius: inherit; background: rgba(var(--led-bad), .35); box-shadow: inset 0 0 calc(var(--sq) * .32) rgba(var(--led-bad), 1); }
.lb .sq.tgt::after { width: 22%; height: 22%; background: rgb(var(--led-tgt)); box-shadow: 0 0 calc(var(--sq) * .12) calc(var(--sq) * .03) rgba(var(--led-tgt), .85); }
.lb .sq.tgt.cap::after { width: auto; height: auto; inset: 0; transform: none; left: 0; top: 0; border: 0; border-radius: inherit; background: none; box-shadow: inset 0 0 0 calc(var(--sq) * .05) rgb(var(--led-tgt)), inset 0 0 calc(var(--sq) * .22) rgba(var(--led-tgt), .8); z-index: 1; }
/* Zughilfe: die ganze Kachel leuchtet (unter der Figur) */
.lb .sq.tgt[class*="q-"]::after { width: auto; height: auto; inset: 0; transform: none; left: 0; top: 0; border: 0; border-radius: inherit; z-index: 1; animation: ledon .4s ease-out; }
.lb .sq.tgt.q-good::after { background: rgba(var(--led-good), .6); box-shadow: inset 0 0 calc(var(--sq) * .3) rgba(var(--led-good), 1); }
.lb .sq.tgt.q-meh::after { background: rgba(var(--led-meh), .3); box-shadow: inset 0 0 0 calc(var(--sq) * .08) rgb(var(--led-meh)), inset 0 0 calc(var(--sq) * .2) rgba(var(--led-meh), .7); }
.lb .sq.tgt.q-bad::after { background: repeating-linear-gradient(135deg, rgba(var(--led-bad), .7) 0 calc(var(--sq) * .07), rgba(var(--led-bad), .3) calc(var(--sq) * .07) calc(var(--sq) * .14)); box-shadow: inset 0 0 calc(var(--sq) * .3) rgba(var(--led-bad), 1); }
.lb .sq.tgt.q-best::after { background: rgba(var(--led-good), .75); box-shadow: inset 0 0 0 calc(var(--sq) * .07) #fff, inset 0 0 calc(var(--sq) * .34) rgba(var(--led-good), 1), 0 0 calc(var(--sq) * .2) rgba(var(--led-good), .7); }
.lb .sq.hang::before { inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--sq) * .05) rgb(var(--led-bad)), inset 0 0 calc(var(--sq) * .26) rgba(var(--led-bad), .9); }
.lb .sq.tip::before { border-radius: inherit; background: rgba(var(--led-good), .3); box-shadow: inset 0 0 calc(var(--sq) * .26) rgba(var(--led-good), 1); }
@keyframes ledon { from { opacity: 0; } }
/* Lichtleiste im rechten Rahmen */
.lb .lightbar { display: block; position: absolute; top: var(--bz); right: calc(var(--bz) * .36); width: calc(var(--bz) * .26); height: calc(var(--sq) * 8 + 7 * var(--gap)); border-radius: 99px; background: #0b0e12; overflow: hidden; box-shadow: inset 0 0 0 1px #262d36; }
.lb .lightbar i { position: absolute; left: 0; right: 0; border-radius: 99px; transition: height .5s ease, top .5s ease, bottom .5s ease, background .3s; height: 0; bottom: 0; }
.lb .lightbar.me i { bottom: 0; top: auto; height: 50%; background: rgb(var(--led-sel)); box-shadow: 0 0 10px rgba(var(--led-sel), .8); }
.lb .lightbar.op i { top: 0; bottom: auto; height: 50%; background: rgb(var(--led-last)); box-shadow: 0 0 10px rgba(var(--led-last), .8); animation: breathe 1.8s ease-in-out infinite; }
.lb .lightbar.eval { background: #2b323c; }
.lb .lightbar.eval i { bottom: 0; top: auto; height: var(--fill, 50%); border-radius: 0; background: #eef1f4; box-shadow: 0 0 8px rgba(255, 255, 255, .5); }
@media (prefers-reduced-motion: reduce) { .sq.hang::before, .sq.tip::before, .lb .lightbar.op i { animation: none; } }

/* ---------- Nordlicht (Leuchtbrett + Effektebene js/nordlicht.js) ----------
   Farbwelt von Lichtbrecher: Nachthimmel #02040c, Türkis #38e1c8 (du), Violett #a77bff (Gegner), Gold #ffd38a.
   Polarlicht und Sterne liegen auf #nlSky hinter der Seite; Funken, Kometen und Blitze auf #nlFx darüber. */
.nl-sky, .nl-fx { display: none; }
:root.nl { --led-sel: 255, 211, 138; --led-last: 167, 123, 255; --led-tgt: 70, 235, 205; --led-good: 70, 240, 150; --frame: rgba(6, 10, 26, .5); --tl: rgba(190, 215, 255, .26); --td: rgba(4, 8, 24, .42); }
html.nl, html.nl body { background: #02040c; }
.fx .nl-sky { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fx .nl-fx { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.fx .layout, .fx .foot { position: relative; z-index: 1; }
.nl .board { background: rgba(2, 4, 12, .35); box-shadow: 0 0 0 var(--bz) var(--frame); }
/* Leuchtkante: zwei Schichten, nur die Deckkraft wird animiert (eine animierte box-shadow kostete die halbe Bildrate) */
.nl .board-wrap::before, .nl .board-wrap::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--sq) * 8 + 7 * var(--gap) + 2 * var(--bz)); border-radius: 4px; pointer-events: none; z-index: -1; will-change: opacity; transition: opacity .4s; }
.nl .board-wrap::before { box-shadow: 0 0 0 1.5px rgba(158, 255, 224, .65), 0 0 34px 6px rgba(56, 225, 200, .34), 0 0 90px rgba(56, 225, 200, .18); }
.nl .board-wrap::after { box-shadow: 0 0 0 1.5px rgba(201, 168, 255, .75), 0 0 34px 6px rgba(167, 123, 255, .4), 0 0 90px rgba(167, 123, 255, .22); animation: nlframe 9s ease-in-out infinite; }
@keyframes nlframe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.nl.fx-check .board-wrap::before { box-shadow: 0 0 0 2px rgba(255, 110, 110, .9), 0 0 40px 10px rgba(255, 60, 70, .45), 0 0 110px rgba(255, 40, 80, .3); }
.nl.fx-check .board-wrap::after { opacity: 0; animation: none; }
.fx .pc.fx-pop { animation: nlpop .42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes nlpop { 0% { transform: scale(1.35); filter: brightness(2.2) drop-shadow(0 0 calc(var(--sq) * .2) #fff); } 100% { transform: scale(1); } }
.nl .sq { box-shadow: inset 0 0 0 1px rgba(158, 255, 224, .09), inset 0 calc(var(--sq) * .5) calc(var(--sq) * .5) calc(var(--sq) * -.3) rgba(255, 255, 255, .04); }
.nl .sq .coord { color: rgba(158, 255, 224, .55) !important; text-shadow: 0 0 8px rgba(56, 225, 200, .6); }
.nl .pc.wp, .nl .pc.wn, .nl .pc.wb, .nl .pc.wr, .nl .pc.wq, .nl .pc.wk { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 calc(var(--sq) * .09) rgba(56, 225, 200, .85)); }
.nl .pc.bp, .nl .pc.bn, .nl .pc.bb, .nl .pc.br, .nl .pc.bq, .nl .pc.bk { filter: drop-shadow(0 0 1.2px rgba(220, 200, 255, 1)) drop-shadow(0 0 calc(var(--sq) * .1) rgba(167, 123, 255, .95)); }
.nl .captured .pc { filter: drop-shadow(0 0 3px rgba(158, 255, 224, .6)); }
.nl .pc.drag { transform: scale(1.14); }
.nl .sq.sel::before { box-shadow: inset 0 0 calc(var(--sq) * .32) rgba(var(--led-sel), 1), 0 0 calc(var(--sq) * .35) rgba(var(--led-sel), .75); animation: nlsel 1.1s ease-in-out infinite; }
@keyframes nlsel { 50% { box-shadow: inset 0 0 calc(var(--sq) * .22) rgba(var(--led-sel), .8), 0 0 calc(var(--sq) * .15) rgba(var(--led-sel), .45); } }
.nl .sq.last::before { box-shadow: inset 0 0 calc(var(--sq) * .3) rgba(var(--led-last), 1), 0 0 calc(var(--sq) * .22) rgba(var(--led-last), .55); }
.nl .sq.tgt::after { animation: nlorb 1.6s ease-in-out infinite; }
@keyframes nlorb { 50% { transform: translate(-50%, -50%) scale(.7); opacity: .7; } }
.nl .sq.tgt.cap::after, .nl .sq.tgt[class*="q-"]::after { animation: ledon .4s ease-out; }
.nl .sq.chk::before { animation: stchk .8s ease-in-out infinite; will-change: opacity; } /* nur Deckkraft: die Hintergrund-Animation kostete 61 → 18 fps */
.nl .lightbar { background: rgba(2, 4, 12, .7); box-shadow: inset 0 0 0 1px rgba(158, 255, 224, .25); }
.nl .lightbar.me i { background: linear-gradient(0deg, #38e1c8, #9effe0); box-shadow: 0 0 14px rgba(56, 225, 200, .9); }
.nl .lightbar.op i { background: linear-gradient(180deg, #a77bff, #c9a8ff); box-shadow: 0 0 14px rgba(167, 123, 255, .9); }
.nl .lightbar.eval i { background: linear-gradient(0deg, #9effe0, #fff); }
/* Seite: Glas statt Navy */
.nl .panel { background: rgba(8, 12, 30, .72); border: 1px solid rgba(160, 190, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nl .moves, .nl .review, .nl .stats, .nl .moveinfo { background: rgba(2, 4, 12, .55); }
.nl .actions button:not(.primary), .nl .nav button { background: rgba(255, 255, 255, .06); border: 1px solid rgba(160, 190, 255, .16); }
.nl .actions button:not(.primary):hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.nl .actions .primary { background: linear-gradient(135deg, #38e1c8, #8f7bff); color: #04101a; box-shadow: 0 8px 30px rgba(80, 140, 255, .3); }
.nl .phead h1 { background: linear-gradient(100deg, #9effe0 0%, #fff 45%, #c9a8ff 70%, #ffd38a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nlsheen 6s linear infinite; }
@keyframes nlsheen { to { background-position: 220% 0; } }
.nl .status, .nl .thinking { color: #9effe0; }
.nl .avatar.me { background: linear-gradient(135deg, #38e1c8, #8f7bff); }
.nl .clock { background: rgba(255, 255, 255, .07); }
.nl .clock.run { background: #9effe0; color: #02040c; box-shadow: 0 0 18px rgba(56, 225, 200, .6); }
.fx-soft .board-wrap::after, .fx-soft .pc.fx-pop, .fx-soft .sq.sel::before, .fx-soft .sq.tgt::after, .fx-soft .sq.chk::before, .fx-soft .phead h1 { animation: none; }

/* ---------- Art déco („Grand Hotel 1925“, Effektebene js/artdeco.js) ----------
   Schwarzer Lack, Elfenbein, Blattgold; Rahmen mit gestuften Goldlinien und Fächern in den Ecken,
   Felder mit Gold-Intarsie, Zielfelder als Rauten. Gold = du, Jade = Gegner, Zinnober = Gefahr. */
:root.deco { --k: 9.05; --bz: calc(var(--sq) * .5); --gap: 1px; --frame: #0c0b09; --tl: #ece2cb; --td: #141311;
  --led-sel: 240, 200, 100; --led-last: 90, 200, 160; --led-tgt: 225, 180, 80; --led-bad: 225, 80, 45; }
html.deco, html.deco body { background: #050403; }
.deco .board { background: #8a6a2c; border-radius: 0;
  box-shadow: 0 0 0 2px #0c0b09, 0 0 0 3.5px #d4af37, 0 0 0 calc(var(--bz) - 6px) #0c0b09, 0 0 0 calc(var(--bz) - 5px) #8a6a2c, 0 0 0 calc(var(--bz) - 2.5px) #0c0b09, 0 0 0 calc(var(--bz) - 1px) #e8c66a, 0 0 0 var(--bz) #0c0b09, 0 24px 60px rgba(0, 0, 0, .75); }
.deco .sq { border-radius: 0; }
.deco .sq.d { box-shadow: inset 0 0 0 calc(var(--sq) * .08) var(--td), inset 0 0 0 calc(var(--sq) * .08 + 1px) rgba(212, 175, 55, .55); }
.deco .sq.l { box-shadow: inset 0 0 0 calc(var(--sq) * .08) var(--tl), inset 0 0 0 calc(var(--sq) * .08 + 1px) rgba(150, 110, 40, .5); }
.deco .sq .coord { color: #c9a043 !important; font-family: 'Poiret One', 'DM Sans', sans-serif; font-weight: 400; font-size: calc(var(--bz) * .46); }
.deco .board-wrap::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--sq) * 8 + 7 * var(--gap) + 2 * var(--bz)); pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(0 20 20)' fill='none' stroke='%23d4af37' stroke-width='1.1'%3E%3Cg transform='translate(3 3)'%3E%3Cpath d='M0 9 A9 9 0 0 0 9 0'/%3E%3Cpath d='M0 15 A15 15 0 0 0 15 0'/%3E%3Cpath d='M0 21 A21 21 0 0 0 21 0'/%3E%3Cline x1='0' y1='0' x2='33.7' y2='4.7'/%3E%3Cline x1='0' y1='0' x2='31.3' y2='13.3'/%3E%3Cline x1='0' y1='0' x2='26.8' y2='20.9'/%3E%3Cline x1='0' y1='0' x2='20.9' y2='26.8'/%3E%3Cline x1='0' y1='0' x2='13.3' y2='31.3'/%3E%3Cline x1='0' y1='0' x2='4.7' y2='33.7'/%3E%3Crect x='0' y='0' width='4' height='4' transform='rotate(45 2 2)' fill='%23f3d98a' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top left / var(--bz) var(--bz) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(90 20 20)' fill='none' stroke='%23d4af37' stroke-width='1.1'%3E%3Cg transform='translate(3 3)'%3E%3Cpath d='M0 9 A9 9 0 0 0 9 0'/%3E%3Cpath d='M0 15 A15 15 0 0 0 15 0'/%3E%3Cpath d='M0 21 A21 21 0 0 0 21 0'/%3E%3Cline x1='0' y1='0' x2='33.7' y2='4.7'/%3E%3Cline x1='0' y1='0' x2='31.3' y2='13.3'/%3E%3Cline x1='0' y1='0' x2='26.8' y2='20.9'/%3E%3Cline x1='0' y1='0' x2='20.9' y2='26.8'/%3E%3Cline x1='0' y1='0' x2='13.3' y2='31.3'/%3E%3Cline x1='0' y1='0' x2='4.7' y2='33.7'/%3E%3Crect x='0' y='0' width='4' height='4' transform='rotate(45 2 2)' fill='%23f3d98a' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top right / var(--bz) var(--bz) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(180 20 20)' fill='none' stroke='%23d4af37' stroke-width='1.1'%3E%3Cg transform='translate(3 3)'%3E%3Cpath d='M0 9 A9 9 0 0 0 9 0'/%3E%3Cpath d='M0 15 A15 15 0 0 0 15 0'/%3E%3Cpath d='M0 21 A21 21 0 0 0 21 0'/%3E%3Cline x1='0' y1='0' x2='33.7' y2='4.7'/%3E%3Cline x1='0' y1='0' x2='31.3' y2='13.3'/%3E%3Cline x1='0' y1='0' x2='26.8' y2='20.9'/%3E%3Cline x1='0' y1='0' x2='20.9' y2='26.8'/%3E%3Cline x1='0' y1='0' x2='13.3' y2='31.3'/%3E%3Cline x1='0' y1='0' x2='4.7' y2='33.7'/%3E%3Crect x='0' y='0' width='4' height='4' transform='rotate(45 2 2)' fill='%23f3d98a' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom right / var(--bz) var(--bz) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(270 20 20)' fill='none' stroke='%23d4af37' stroke-width='1.1'%3E%3Cg transform='translate(3 3)'%3E%3Cpath d='M0 9 A9 9 0 0 0 9 0'/%3E%3Cpath d='M0 15 A15 15 0 0 0 15 0'/%3E%3Cpath d='M0 21 A21 21 0 0 0 21 0'/%3E%3Cline x1='0' y1='0' x2='33.7' y2='4.7'/%3E%3Cline x1='0' y1='0' x2='31.3' y2='13.3'/%3E%3Cline x1='0' y1='0' x2='26.8' y2='20.9'/%3E%3Cline x1='0' y1='0' x2='20.9' y2='26.8'/%3E%3Cline x1='0' y1='0' x2='13.3' y2='31.3'/%3E%3Cline x1='0' y1='0' x2='4.7' y2='33.7'/%3E%3Crect x='0' y='0' width='4' height='4' transform='rotate(45 2 2)' fill='%23f3d98a' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom left / var(--bz) var(--bz) no-repeat; }
.deco .board-wrap::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--sq) * 8 + 7 * var(--gap) + 2 * var(--bz)); pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s;
  box-shadow: 0 0 0 2px #e0502a, 0 0 40px 8px rgba(224, 80, 42, .45); }
.deco.fx-check .board-wrap::after { opacity: 1; }
.deco .pc.wp, .deco .pc.wn, .deco .pc.wb, .deco .pc.wr, .deco .pc.wq, .deco .pc.wk { filter: drop-shadow(0 calc(var(--sq) * .03) calc(var(--sq) * .03) rgba(0, 0, 0, .55)); }
.deco .pc.bp, .deco .pc.bn, .deco .pc.bb, .deco .pc.br, .deco .pc.bq, .deco .pc.bk { filter: drop-shadow(0 0 .7px #f3d98a) drop-shadow(0 0 .7px #f3d98a) drop-shadow(0 calc(var(--sq) * .03) calc(var(--sq) * .03) rgba(0, 0, 0, .6)); }
.deco .captured .pc { filter: drop-shadow(0 0 .6px #f3d98a); }
.deco .sq.last::before { background: rgba(var(--led-last), .2); box-shadow: inset 0 0 0 calc(var(--sq) * .05) rgba(var(--led-last), .95), inset 0 0 calc(var(--sq) * .22) rgba(var(--led-last), .5); }
.deco .sq.sel::before { background: rgba(var(--led-sel), .38); box-shadow: inset 0 0 0 calc(var(--sq) * .06) rgb(var(--led-sel)), 0 0 calc(var(--sq) * .28) rgba(var(--led-sel), .65); }
.deco .sq.tgt::after { width: 19%; height: 19%; border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); background: rgb(var(--led-tgt)); box-shadow: 0 0 0 2px rgba(12, 10, 6, .6), 0 0 calc(var(--sq) * .12) rgba(var(--led-tgt), .85); }
.deco .lightbar { background: #0c0b09; box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .5); border-radius: 0; }
.deco .lightbar i { border-radius: 0; }
.deco .lightbar.me i { background: linear-gradient(0deg, #b08a3e, #f3d98a); box-shadow: 0 0 10px rgba(240, 200, 100, .7); }
.deco .lightbar.op i { background: linear-gradient(180deg, #2f8f74, #8fe0c4); box-shadow: 0 0 10px rgba(90, 200, 160, .7); }
.deco .lightbar.eval { background: #1a1712; }
.deco .lightbar.eval i { background: linear-gradient(0deg, #e8dcc0, #fffaf0); }
/* Seite: Lack und Gold */
.deco .panel { background: rgba(10, 9, 7, .92); border: 1px solid rgba(212, 175, 55, .6); border-radius: 2px; box-shadow: inset 0 0 0 4px rgba(10, 9, 7, .92), inset 0 0 0 5px rgba(212, 175, 55, .28), 0 20px 50px rgba(0, 0, 0, .6); }
.deco .phead .kicker { color: #c9a043; letter-spacing: .3em; }
.deco .phead h1 { font-family: 'Poiret One', 'DM Sans', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: 1.55rem;
  background: linear-gradient(100deg, #b08a3e 0%, #f7e7b4 40%, #d4af37 60%, #fff3cf 80%, #b08a3e 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nlsheen 7s linear infinite; }
.deco .moves, .deco .review, .deco .stats, .deco .moveinfo { background: rgba(0, 0, 0, .45); border: 1px solid rgba(212, 175, 55, .14); border-radius: 2px; }
.deco .actions button:not(.primary), .deco .nav button { background: #0f0e0c; border: 1px solid rgba(212, 175, 55, .38); border-radius: 2px; white-space: nowrap; }
.deco .actions button:not(.primary):hover:not(:disabled) { background: #1c1912; border-color: rgba(212, 175, 55, .75); }
.deco .actions .primary { background: linear-gradient(180deg, #f3d98a, #c9a043); color: #1a1408; border-radius: 2px; font-family: 'Poiret One', 'DM Sans', sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
.deco .status, .deco .thinking { color: #f3d98a; }
.deco .avatar.me { background: linear-gradient(180deg, #f3d98a, #b08a3e); color: #1a1408; }
.deco .clock { background: #0f0e0c; border: 1px solid rgba(212, 175, 55, .35); border-radius: 2px; }
.deco .clock.run { background: #f3d98a; color: #1a1408; }
.fx-soft.deco .phead h1 { animation: none; }

/* ---------- Techno („Club“, Effektebene + Musik js/techno.js) ----------
   Schwarzer Raum, LED-Tanzfläche unter Glasfeldern, Laser in Rot/Weiß. Eisblau = du, Magentarot = Gegner.
   Der RGB-Rahmen und die BPM-Anzeige zeichnet js/techno.js (overlay). */
:root.tech { --k: 8.92; --gap: max(2px, calc(var(--sq) * .04)); --frame: rgba(0, 0, 0, .7); --tl: rgba(160, 175, 210, .2); --td: rgba(0, 0, 4, .55);
  --led-sel: 255, 255, 255; --led-last: 255, 60, 140; --led-tgt: 120, 220, 255; --led-good: 80, 255, 150; }
html.tech, html.tech body { background: #040208; }
.tech .board { background: rgba(0, 0, 0, .55); border-radius: 0; box-shadow: 0 0 0 var(--bz) var(--frame); }
.tech .sq { border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.tech .sq .coord { color: rgba(200, 220, 255, .55) !important; font-family: 'Orbitron', 'DM Sans', sans-serif; font-weight: 500; font-size: calc(var(--bz) * .36); }
.tech .pc.wp, .tech .pc.wn, .tech .pc.wb, .tech .pc.wr, .tech .pc.wq, .tech .pc.wk { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 calc(var(--sq) * .08) rgba(120, 220, 255, .9)); }
.tech .pc.bp, .tech .pc.bn, .tech .pc.bb, .tech .pc.br, .tech .pc.bq, .tech .pc.bk { filter: drop-shadow(0 0 1.2px #ffd0e4) drop-shadow(0 0 calc(var(--sq) * .09) rgba(255, 50, 120, .95)); }
.tech .captured .pc { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)); }
.tech .sq.sel::before { background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 2px #fff, 0 0 calc(var(--sq) * .3) rgba(255, 255, 255, .7); }
.tech .sq.last::before { background: rgba(var(--led-last), .25); box-shadow: inset 0 0 calc(var(--sq) * .28) rgba(var(--led-last), 1); }
.tech .sq.tgt::after { width: 18%; height: 18%; border-radius: 0; background: rgb(var(--led-tgt)); box-shadow: 0 0 calc(var(--sq) * .14) calc(var(--sq) * .03) rgba(var(--led-tgt), .9); }
.tech .lightbar { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); border-radius: 0; }
.tech .lightbar i { border-radius: 0; }
.tech .lightbar.me i { background: linear-gradient(0deg, #4cc9ff, #fff); box-shadow: 0 0 14px rgba(120, 220, 255, .9); }
.tech .lightbar.op i { background: linear-gradient(180deg, #ff2d7a, #ffb3cf); box-shadow: 0 0 14px rgba(255, 50, 120, .9); }
.tech .panel { background: rgba(4, 2, 10, .82); border: 1px solid rgba(255, 255, 255, .14); border-radius: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tech .phead .kicker { color: #ff2d7a; letter-spacing: .3em; }
.tech .phead h1 { font-family: 'Orbitron', 'DM Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.35rem; color: #fff; text-shadow: 0 0 12px rgba(255, 45, 122, .8), 0 0 28px rgba(120, 220, 255, .4); }
.tech .moves, .tech .review, .tech .stats, .tech .moveinfo { background: rgba(0, 0, 0, .55); border-radius: 0; }
.tech .actions button:not(.primary), .tech .nav button { background: #07050d; border: 1px solid rgba(255, 255, 255, .16); border-radius: 0; }
.tech .actions button:not(.primary):hover:not(:disabled) { border-color: #ff2d7a; box-shadow: 0 0 12px rgba(255, 45, 122, .4); }
.tech .actions .primary { background: #fff; color: #040208; border-radius: 0; font-family: 'Orbitron', 'DM Sans', sans-serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 0 22px rgba(255, 255, 255, .35); }
.tech .actions .primary:hover { background: #ff2d7a; color: #fff; }
.tech .status, .tech .thinking { color: #ff7fb0; }
.tech .avatar.me { background: #fff; color: #040208; }
.tech .clock { background: #07050d; border: 1px solid rgba(255, 255, 255, .16); border-radius: 0; font-family: 'Orbitron', 'DM Sans', sans-serif; }
.tech .clock.run { background: #fff; color: #040208; }
.tech.fx-check .board { box-shadow: 0 0 0 var(--bz) var(--frame), 0 0 0 calc(var(--bz) + 2px) #ff1a3c, 0 0 40px 10px rgba(255, 26, 60, .45); }

/* ---------- Konto ---------- */
.melogin { border: 1px solid rgba(255, 255, 255, .18); background: none; border-radius: 99px; padding: 0 9px; font-size: .75rem; color: var(--muted); cursor: pointer; margin-left: 4px; vertical-align: 1px; }
.melogin:hover { color: var(--text); border-color: var(--gold); }
.stats .acct { background: var(--navy-2); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.stats .acct .arow { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.stats .acct .arow small { color: var(--gold-2); margin-left: 4px; }
.stats .acct .amsg { color: var(--gold-2); }
.stats .acct .amerge { background: var(--navy); border-radius: 5px; padding: 6px 8px; }
.stats .aform { display: flex; flex-direction: column; gap: 7px; }
.stats .aform label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--muted); }
.stats .aform input { background: var(--navy); border: 1px solid var(--navy-3); border-radius: 5px; padding: 7px 8px; color: var(--text); font-size: .95rem; }
.stats .aform input:focus { outline: 1px solid var(--gold); }
.stats .aform button { border: 0; border-radius: 5px; padding: 7px 10px; background: var(--navy-3); color: var(--text); cursor: pointer; font-weight: 500; }
.stats .aform button.primary { background: var(--gold); color: var(--navy); }
.stats .aform button.danger { background: #7a2a24; color: #fff; }
.stats .aform p { margin: 0; }
.stats .games.admin .aact { white-space: nowrap; }

/* ---------- Training ---------- */
.actions .badge { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: var(--gold); color: var(--navy); font-size: .75rem; font-weight: 700; line-height: 1.4; }
.train { background: var(--navy); border-radius: 6px; padding: 10px 12px; font-size: .88rem; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.train .thead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.train .thead small { color: var(--muted); }
.train .tlead { margin: 0; }
.train .tag { display: inline-block; font-size: .72rem; padding: 1px 7px; border-radius: 99px; background: var(--navy-3); color: var(--gold-2); vertical-align: 1px; }
.train .tmsg { margin: 0; color: var(--gold-2); min-height: 1.4em; }
.train .tmsg .why { display: block; color: var(--muted); margin-top: 4px; }
.train .tbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.train .tbtns button, .train .tfoot button { border: 0; border-radius: 6px; padding: 7px 11px; background: var(--navy-3); color: var(--text); cursor: pointer; font-weight: 500; }
.train .tbtns button.primary { background: var(--gold); color: var(--navy); }
.train .tbtns button:disabled { opacity: .45; cursor: default; }
.train .tfoot button { background: none; color: var(--muted); padding: 0; text-decoration: underline; }
.train .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.train .kpis div { background: var(--navy-2); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; }
.train .kpis b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.train .kpis small { color: var(--muted); font-size: .72rem; }
.train .note { color: var(--muted); font-size: .8rem; margin: 0; }
.train .link { background: none; border: 0; color: var(--gold-2); text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; }
.fx .train { background: rgba(0, 0, 0, .45); }
/* Rätselkarte direkt unter die Statuszeile (vor Zugliste und Knöpfe), damit sie auf dem Handy beim Brett liegt */
.panel .phead { order: -4; } .panel .status { order: -3; } .panel .hintlegend { order: -2; } .panel .train { order: -1; }

/* ---------- Drohlinien (Zughilfe ab Wachposten) ---------- */
.arrows line.threat, .arrows marker.threat path { stroke: #ff4d3d; fill: #ff4d3d; }
.arrows line.threat { stroke-width: .14; stroke-dasharray: .32 .16; }
.arrows.threats { z-index: 5; opacity: 0; }
.arrows.threats.show { animation: threatfade 2.6s ease-out forwards; }
.arrows.threats line.threat { animation: threatdash .6s linear infinite; }
@keyframes threatfade { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes threatdash { to { stroke-dashoffset: -.48; } }
.lg.threat { background: none; height: 0; width: 14px; border-top: 2px dashed #ff4d3d; border-radius: 0; vertical-align: 3px; }
.fx .arrows line.threat, .fx .arrows marker.threat path { filter: drop-shadow(0 0 .06px #ff4d3d); }
@media (prefers-reduced-motion: reduce) { .arrows.threats line.threat { animation: none; } }

/* ---------- Zeitlupe des Wendepunkts ---------- */
.review .cinebox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.review .cinebtn { border: 0; border-radius: 6px; padding: 8px 12px; background: var(--gold); color: var(--navy); font-weight: 700; cursor: pointer; }
.review .cinebtn:hover { background: var(--gold-2); }
.review .cinebox small { color: var(--muted); }
.moveinfo .who.cine { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.moveinfo .cinectl { display: block; margin-top: 6px; }
.moveinfo .cinectl .showbest { margin-left: 0; margin-right: 6px; }
body.cine::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 35; background: radial-gradient(ellipse at 38% 50%, transparent 45%, rgba(0, 0, 0, .55) 100%); animation: cinein .8s ease-out; }
@media (min-width: 901px) {
  body.cine::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 3vh; background: #000; box-shadow: 0 97vh 0 0 #000; box-shadow: 0 97dvh 0 0 #000; pointer-events: none; z-index: 36; animation: cinein .8s ease-out; }
}
@keyframes cinein { from { opacity: 0; } }
.cinecap { position: absolute; left: 0; right: 0; top: calc(var(--bz) * 2 + var(--sq) * 8 + 7 * var(--gap, 0px) + 4px); z-index: 38;
  background: rgba(0, 0, 0, .86); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); color: #fff; border-radius: 8px; padding: 8px 12px; font-size: clamp(.8rem, calc(var(--sq) * .24), 1rem); line-height: 1.4; text-align: center; animation: cinein .4s ease-out; }
.cinecap b { color: var(--gold-2); }
.cinecap .cinectl { display: block; margin-top: 6px; }
.cinecap .showbest { border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; border-radius: 5px; padding: 3px 10px; font-size: .8rem; cursor: pointer; margin: 0 3px; }

/* ---------- Duell ---------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--navy); border-radius: 8px; padding: 4px; }
.modes label { display: block; cursor: pointer; }
.modes input { position: absolute; opacity: 0; pointer-events: none; }
.modes span { display: block; text-align: center; padding: 8px 6px; border-radius: 6px; font-weight: 500; color: var(--muted); }
.modes input:checked + span { background: var(--navy-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--gold); }
.modes input:focus-visible + span { outline: 2px solid var(--gold); }
.sheet.duel .botpane { display: none !important; }
.duelpane { display: flex; flex-direction: column; gap: 10px; }
.duelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duelbox { background: var(--navy); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.duelbox small { color: var(--muted); font-size: .8rem; line-height: 1.35; flex: 1; }
.duelbox input { background: var(--navy-2); border: 1px solid var(--navy-3); border-radius: 6px; padding: 8px; color: var(--text); font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.duelbox button { border: 0; border-radius: 6px; padding: 9px; background: var(--navy-3); color: var(--text); cursor: pointer; font-weight: 500; }
.duelbox button.primary { background: var(--gold); color: var(--navy); }
.duelstatus { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--gold-2); min-height: 1em; }
.duelstatus:empty { display: none; }
.duelstatus .bigcode { font-size: 2.6rem; font-weight: 700; letter-spacing: .25em; color: var(--text); font-variant-numeric: tabular-nums; user-select: all; }
.duelstatus .link, .duelresume .link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: .85rem; }
.duelresume { background: var(--navy); border-radius: 6px; padding: 8px 10px; color: var(--gold-2); margin: 0; }
.duelpane .note { color: var(--muted); font-size: .78rem; margin: 0; }
.duelbar { flex: none; order: -2; background: var(--navy); border: 1px solid var(--gold); border-radius: 6px; padding: 8px 10px; font-size: .88rem; color: var(--gold-2); }
.duelbar button { border: 0; border-radius: 5px; padding: 4px 10px; background: var(--gold); color: var(--navy); font-weight: 600; cursor: pointer; margin: 4px 4px 0 0; }
@media (max-width: 900px) { .duelgrid { grid-template-columns: 1fr; } }

/* ---------- Musik ---------- */
.nowplaying { flex: none; order: -3; margin: -6px 0 0; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bot .bi .mus { color: var(--gold-2); opacity: .8; }

/* ---------- Winter (Effektebene js/winter.js) ----------
   Eis und Schneeglas, Rahmen aus bereiftem Silber mit Schneehaube, Lichterkette zeichnet js/winter.js (overlay).
   Eisblau = du, Beerenrot = Gegner, Kerzengold = Höhepunkte. */
:root.winter { --k: 8.95; --bz: calc(var(--sq) * .42); --gap: max(2px, calc(var(--sq) * .03)); --frame: rgba(214, 228, 242, .9); --tl: rgba(235, 244, 255, .62); --td: rgba(84, 128, 172, .5);
  --led-sel: 255, 214, 120; --led-last: 255, 120, 140; --led-tgt: 150, 215, 255; --led-bad: 230, 50, 70; }
html.winter, html.winter body { background: #0b1a2e; }
.winter .board { background: rgba(160, 200, 235, .25); border-radius: 4px;
  box-shadow: 0 0 0 var(--bz) var(--frame), 0 0 0 calc(var(--bz) + 2px) rgba(255, 255, 255, .85), 0 18px 50px rgba(0, 10, 30, .6), inset 0 0 calc(var(--sq) * .6) rgba(255, 255, 255, .18); }
.winter .sq { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 calc(var(--sq) * .45) calc(var(--sq) * .45) calc(var(--sq) * -.35) rgba(255, 255, 255, .25); }
.winter .sq.l { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55), transparent 55%), var(--tl); }
.winter .sq.d { background: radial-gradient(circle at 70% 75%, rgba(200, 230, 255, .25), transparent 60%), var(--td); }
.winter .sq .coord { color: #4b6c8f !important; font-family: 'Mountains of Christmas', 'DM Sans', serif; font-weight: 700; font-size: calc(var(--bz) * .5); }
/* Schneehaube auf der oberen Rahmenkante */
.winter .board-wrap::before { content: ''; position: absolute; left: 2%; right: 2%; top: calc(var(--bz) * -.18); height: calc(var(--bz) * .62); pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 9% 100% at 8% 100%, #fff 60%, transparent 62%), radial-gradient(ellipse 12% 90% at 24% 100%, #f4f9ff 60%, transparent 62%), radial-gradient(ellipse 10% 110% at 41% 100%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 13% 85% at 58% 100%, #f4f9ff 60%, transparent 62%), radial-gradient(ellipse 9% 105% at 75% 100%, #fff 60%, transparent 62%), radial-gradient(ellipse 12% 90% at 92% 100%, #f4f9ff 60%, transparent 62%);
  filter: drop-shadow(0 2px 2px rgba(60, 90, 130, .35)); }
.winter.fx-check .board { box-shadow: 0 0 0 var(--bz) var(--frame), 0 0 0 calc(var(--bz) + 3px) #e0384c, 0 0 40px 10px rgba(224, 56, 76, .45), 0 18px 50px rgba(0, 10, 30, .6); }
.winter .pc.wp, .winter .pc.wn, .winter .pc.wb, .winter .pc.wr, .winter .pc.wq, .winter .pc.wk { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 calc(var(--sq) * .04) calc(var(--sq) * .05) rgba(20, 50, 90, .55)); }
.winter .pc.bp, .winter .pc.bn, .winter .pc.bb, .winter .pc.br, .winter .pc.bq, .winter .pc.bk { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 calc(var(--sq) * .04) calc(var(--sq) * .05) rgba(20, 50, 90, .6)); }
.winter .sq.sel::before { background: rgba(var(--led-sel), .35); box-shadow: inset 0 0 0 2px rgba(var(--led-sel), 1), 0 0 calc(var(--sq) * .3) rgba(var(--led-sel), .7); }
.winter .sq.last::before { background: rgba(var(--led-last), .22); box-shadow: inset 0 0 calc(var(--sq) * .25) rgba(var(--led-last), .9); }
.winter .sq.tgt::after { background: radial-gradient(circle, #fff 30%, rgba(var(--led-tgt), .9) 60%, transparent 70%); box-shadow: 0 0 calc(var(--sq) * .12) rgba(var(--led-tgt), .9); }
.winter .lightbar { background: rgba(10, 30, 55, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.winter .lightbar.me i { background: linear-gradient(0deg, #7cc4ff, #fff); }
.winter .lightbar.op i { background: linear-gradient(180deg, #ff6f86, #ffd0d8); }
/* Seite: bereiftes Glas */
.winter .panel { background: rgba(12, 32, 58, .72); border: 1px solid rgba(220, 235, 255, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.winter .phead h1 { font-family: 'Mountains of Christmas', 'DM Sans', serif; font-weight: 700; font-size: 1.9rem; color: #f2f8ff; text-shadow: 0 0 14px rgba(160, 210, 255, .7); }
.winter .phead .kicker { color: #ff8a9c; }
.winter .moves, .winter .review, .winter .stats, .winter .moveinfo { background: rgba(5, 18, 36, .55); }
.winter .actions button:not(.primary), .winter .nav button { background: rgba(255, 255, 255, .08); border: 1px solid rgba(220, 235, 255, .25); }
.winter .actions .primary { background: linear-gradient(180deg, #ff5a6e, #c8233d); color: #fff; box-shadow: 0 6px 20px rgba(200, 35, 61, .35); }
.winter .status, .winter .thinking { color: #bfe2ff; }
.winter .avatar.me { background: linear-gradient(180deg, #ffffff, #a9d4ff); color: #0b1a2e; }

/* ---------- Tinte & Pergament (Effektebene js/tinte.js) ----------
   Schachbuch-Druck: helle Felder Pergament, dunkle Felder schraffiert, Rahmen mit doppelter Tintenlinie und roter
   Rubrik; Schrift UnifrakturMaguntia (Titel, Koordinaten) und IM Fell English (Text, Zugliste als Handschrift). */
:root.tinte { --k: 8.9; --bz: calc(var(--sq) * .44); --gap: 0px; --frame: #ead7ad; --tl: #f3e6c6; --td: #c9ad7a;
  --led-sel: 155, 36, 22; --led-last: 120, 80, 30; --led-tgt: 42, 26, 13; }
html.tinte, html.tinte body { background: #d9c294; }
.tinte .board { background: #2a1a0d; border-radius: 0;
  box-shadow: 0 0 0 1.5px #2a1a0d, 0 0 0 calc(var(--bz) * .22) var(--frame), 0 0 0 calc(var(--bz) * .22 + 1.5px) #9b2416, 0 0 0 calc(var(--bz) - 3px) var(--frame), 0 0 0 calc(var(--bz) - 1.5px) #2a1a0d, 0 0 0 var(--bz) var(--frame), 0 12px 40px rgba(60, 35, 10, .45); }
.tinte .sq { border-radius: 0; box-shadow: none; }
.tinte .sq.l { background: var(--tl); }
.tinte .sq.d { background: repeating-linear-gradient(135deg, rgba(60, 38, 16, .55) 0 1.4px, transparent 1.4px 4.5px), var(--td); }
.tinte .sq .coord { color: #2a1a0d !important; font-family: 'UnifrakturMaguntia', serif; font-weight: 400; font-size: calc(var(--bz) * .5); }
.tinte .pc { filter: sepia(.35) saturate(.9) drop-shadow(0 1px 0 rgba(60, 40, 20, .35)); }
.tinte .pc.bp, .tinte .pc.bn, .tinte .pc.bb, .tinte .pc.br, .tinte .pc.bq, .tinte .pc.bk { filter: sepia(.5) drop-shadow(0 0 1px rgba(243, 230, 198, .95)) drop-shadow(0 1px 0 rgba(60, 40, 20, .35)); }
.tinte .sq.sel::before { background: rgba(155, 36, 22, .12); box-shadow: inset 0 0 0 calc(var(--sq) * .05) rgba(155, 36, 22, .85); }
.tinte .sq.last::before { background: rgba(120, 80, 30, .16); box-shadow: inset 0 0 0 1px rgba(60, 38, 16, .35); }
.tinte .sq.tgt::after { width: 16%; height: 16%; background: #2a1a0d; box-shadow: none; opacity: .75; }
.tinte .sq.tgt.cap::after { width: auto; height: auto; inset: 8%; transform: none; left: auto; top: auto; border: calc(var(--sq) * .04) solid rgba(42, 26, 13, .75); border-radius: 50%; background: none; box-shadow: none; }
.tinte.fx-check .board { box-shadow: 0 0 0 1.5px #2a1a0d, 0 0 0 var(--bz) var(--frame), 0 0 0 calc(var(--bz) + 3px) #9b2416, 0 12px 40px rgba(60, 35, 10, .45); }
.tinte .lightbar { background: #e6d2a6; box-shadow: inset 0 0 0 1px #2a1a0d; border-radius: 0; }
.tinte .lightbar i { border-radius: 0; }
.tinte .lightbar.me i { background: #2a1a0d; box-shadow: none; }
.tinte .lightbar.op i { background: #9b2416; box-shadow: none; animation: none; }
.tinte .lightbar.eval { background: #2a1a0d; }
.tinte .lightbar.eval i { background: #f3e6c6; box-shadow: none; }
/* Seite: Buchseite */
.tinte .panel { background: #f1e2bd; color: #2a1a0d; border: 1px solid #b08850; box-shadow: 0 10px 30px rgba(60, 35, 10, .35), inset 0 0 40px rgba(150, 110, 50, .25); font-family: 'IM Fell English', Georgia, serif; }
.tinte .phead .kicker { color: #9b2416; }
.tinte .phead h1 { font-family: 'UnifrakturMaguntia', serif; font-weight: 400; font-size: 2rem; color: #2a1a0d; }
.tinte .status, .tinte .thinking { color: #9b2416; }
.tinte .nowplaying, .tinte .hintlegend, .tinte .rating, .tinte .review .note, .tinte .stats .note { color: #6b5232; }
.tinte .player { color: #2a1a0d; }
.tinte .moves { background: transparent; border-top: 1px solid rgba(42, 26, 13, .3); border-bottom: 1px solid rgba(42, 26, 13, .3); border-radius: 0; font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 1.05rem; }
.tinte .moves li:nth-child(even) { background: transparent; }
.tinte .moves .n { color: #9b2416; font-style: normal; }
.tinte .moves .m:hover, .tinte .moves .m.cur { background: rgba(155, 36, 22, .1); outline-color: #9b2416; }
.tinte .moves .m.new { animation: tintewrite .7s steps(14) both; }
@keyframes tintewrite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tinte .review, .tinte .stats, .tinte .moveinfo, .tinte .train { background: rgba(255, 250, 235, .45); color: #2a1a0d; }
.tinte .actions button:not(.primary), .tinte .nav button { background: transparent; color: #2a1a0d; border: 1px solid rgba(42, 26, 13, .45); border-radius: 2px; font-family: 'IM Fell English', Georgia, serif; font-size: 1rem; }
.tinte .actions button:not(.primary):hover:not(:disabled) { background: rgba(155, 36, 22, .08); }
.tinte .actions .primary { background: #9b2416; color: #f3e6c6; border-radius: 2px; font-family: 'IM Fell English', Georgia, serif; font-size: 1.05rem; letter-spacing: .04em; }
.tinte .avatar.me { background: #2a1a0d; color: #f3e6c6; }
.tinte .clock { background: transparent; color: #2a1a0d; border: 1px solid #2a1a0d; border-radius: 2px; }
.tinte .clock.run { background: #2a1a0d; color: #f3e6c6; }
.tinte .melogin { color: #6b5232; border-color: rgba(42, 26, 13, .4); }
.tinte .foot { color: #6b5232; }

/* ---------- 8-Bit-Arcade (Effektebene js/arcade.js) ----------
   Röhrenbildschirm: Scanlines über allem (unter Dialogen), Pixelrahmen in Stufen, Felder mit Pixelkante,
   Pixelfiguren erzeugt js/arcade.js. Cyan = du, Pink = Gegner, Gelb = Punkte. Schrift Press Start 2P. */
:root.arcade { --k: 8.9; --bz: calc(var(--sq) * .44); --gap: 0px; --frame: #0d0d24; --tl: #3a3a7a; --td: #1c1c44;
  --led-sel: 255, 225, 77; --led-last: 255, 79, 154; --led-tgt: 60, 240, 255; --led-bad: 255, 40, 60; }
html.arcade, html.arcade body { background: #05040f; }
html.arcade body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 45;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45) 100%); }
.arcade .board { background: #000; border-radius: 0;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #3cf0ff, 0 0 0 var(--bz) var(--frame), 0 0 0 calc(var(--bz) + 4px) #ff4f9a, 0 0 30px rgba(60, 240, 255, .35); }
.arcade .sq { border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .1), inset -2px -2px 0 rgba(0, 0, 0, .35); }
.arcade .sq .coord { color: #8fa8ff !important; font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: calc(var(--bz) * .3); }
.arcade .pc { filter: drop-shadow(0 calc(var(--sq) * .04) 0 rgba(0, 0, 0, .7)); }
.arcade .captured .pc { filter: none; }
.arcade .sq.sel::before { background: rgba(var(--led-sel), .28); box-shadow: inset 0 0 0 4px rgb(var(--led-sel)); border-radius: 0; animation: arcblink .5s steps(2) infinite; }
@keyframes arcblink { 50% { box-shadow: inset 0 0 0 4px rgba(var(--led-sel), .3); } }
.arcade .sq.last::before { background: rgba(var(--led-last), .22); box-shadow: inset 0 0 0 3px rgba(var(--led-last), .8); border-radius: 0; }
.arcade .sq.tgt::after { width: 18%; height: 18%; border-radius: 0; background: rgb(var(--led-tgt)); box-shadow: none; }
.arcade.fx-check .board { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff2840, 0 0 0 var(--bz) var(--frame), 0 0 0 calc(var(--bz) + 4px) #ff2840, 0 0 40px rgba(255, 40, 60, .5); }
.arcade .lightbar { background: #000; border-radius: 0; box-shadow: inset 0 0 0 2px #3cf0ff; }
.arcade .lightbar i { border-radius: 0; }
.arcade .lightbar.me i { background: #3cf0ff; box-shadow: none; }
.arcade .lightbar.op i { background: #ff4f9a; box-shadow: none; animation: arcblink .5s steps(2) infinite; }
/* Seite: Automatengehäuse */
.arcade .panel { background: #0b0b1e; border-radius: 0; box-shadow: 0 0 0 4px #000, 0 0 0 8px #ffe14d, 0 0 0 12px #000; }
.arcade .phead .kicker { color: #ff4f9a; font-family: 'Press Start 2P', monospace; font-size: .6rem; letter-spacing: .1em; }
.arcade .phead h1 { font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: 1.05rem; line-height: 1.4; color: #ffe14d; text-shadow: 3px 3px 0 #ff4f9a; }
.arcade .status, .arcade .thinking { color: #3cf0ff; font-family: 'Press Start 2P', monospace; font-size: .62rem; line-height: 1.7; }
.arcade .moves, .arcade .review, .arcade .stats, .arcade .moveinfo, .arcade .train { background: #000; border-radius: 0; }
.arcade .moves { font-family: 'Press Start 2P', monospace; font-size: .62rem; line-height: 2; }
.arcade .actions button:not(.primary), .arcade .nav button { background: #000; border: 2px solid #3cf0ff; border-radius: 0; font-family: 'Press Start 2P', monospace; font-size: .56rem; line-height: 1.6; color: #fff; }
.arcade .actions button:not(.primary):hover:not(:disabled) { background: #3cf0ff; color: #000; }
.arcade .actions .primary { background: #ffe14d; color: #000; border-radius: 0; font-family: 'Press Start 2P', monospace; font-size: .7rem; box-shadow: 4px 4px 0 #ff4f9a; }
.arcade .avatar.me { background: #3cf0ff; color: #000; border-radius: 0; }
.arcade .avatar { border-radius: 0; }
.arcade .clock { background: #000; border: 2px solid #3cf0ff; border-radius: 0; font-family: 'Press Start 2P', monospace; font-size: .8rem; }
.arcade .clock.run { background: #3cf0ff; color: #000; }
.arcade .nowplaying { font-family: 'Press Start 2P', monospace; font-size: .5rem; color: #ffe14d; }

/* ---------- Startscreen (js/start.js) ----------
   Zustand html.start: Das echte Brett zeigt das Brett des Gegners, drumherum Leiter, Gegnerkarte und Dock.
   Mobil: Leiter + Karte über dem Brett, Dock darunter, alles ohne Scrollen (Brettgröße aus --st-h, setzt start.js).
   Desktop: Karte + Dock im Panel statt Zugliste/Aktionen, Leiter als Leiste unter dem Brett.
   Farben und Schriften kommen aus den Themenklassen auf <html> (Variablen --st-*). */
.st-ladder, .st-card, .st-dock, .st-banner, .st-stamp, .st-pulse { display: none; }
.t-short { display: none; }
html.start .st-ladder, html.start .st-card, html.start .st-dock { display: flex; }
html.start .st-banner:not([hidden]), html.start .st-stamp:not([hidden]), html.start .st-pulse:not([hidden]) { display: flex; }
html.start #oppCard, html.start #meCard { display: none; }
html.start { --st-bg: rgba(19, 41, 63, .94); --st-border: rgba(255, 255, 255, .08); --st-text: var(--text); --st-muted: var(--muted); --st-accent: var(--gold-2);
  --st-go-bg: var(--gold); --st-go-ink: var(--navy); --st-go-shadow: 0 5px 0 #8a6d37; --st-go-font: 'DM Sans', sans-serif; --st-go-size: 1.12rem; --st-go-case: none; --st-go-ls: 0;
  --st-name-font: 'DM Sans', sans-serif; --st-name-size: 1.45rem; --st-name-weight: 700; --st-name-case: none; --st-name-ls: 0; --st-font: 'DM Sans', sans-serif;
  --st-bubble: #fff7e0; --st-bubble-ink: #1b2430; --st-chip: rgba(255, 255, 255, .07); --st-chip-line: rgba(255, 255, 255, .16); --st-r: 14px;
  --st-ban-bg: rgba(6, 10, 18, .9); --st-ban-ink: #fff; --st-ban-accent: #ff6a5e; --st-bad: #ff3b3b; }
html.start.lb { --st-bg: rgba(21, 25, 31, .94); --st-accent: rgb(90, 215, 255); --st-go-bg: rgb(255, 205, 110); --st-go-ink: #15191f; --st-go-shadow: 0 5px 0 #a07a2c; }
html.start.nl { --st-bg: rgba(8, 12, 30, .66); --st-border: rgba(160, 190, 255, .18); --st-accent: #9effe0; --st-go-bg: linear-gradient(135deg, #38e1c8, #8f7bff); --st-go-ink: #04101a; --st-go-shadow: 0 6px 26px rgba(80, 140, 255, .45);
  --st-bubble: rgba(232, 255, 248, .96); --st-bubble-ink: #06202a; --st-ban-bg: rgba(4, 8, 24, .88); --st-ban-accent: #9effe0; }
html.start.deco { --st-bg: rgba(10, 9, 7, .9); --st-border: rgba(212, 175, 55, .55); --st-accent: #f3d98a; --st-go-bg: linear-gradient(180deg, #f3d98a, #c9a043); --st-go-ink: #1a1408; --st-go-shadow: 0 5px 0 #6e5520;
  --st-go-font: 'Poiret One', 'DM Sans', sans-serif; --st-go-case: uppercase; --st-go-ls: .14em; --st-name-font: 'Poiret One', 'DM Sans', sans-serif; --st-name-weight: 400; --st-name-size: 1.65rem;
  --st-bubble: #f4ead2; --st-bubble-ink: #1a1408; --st-chip: rgba(212, 175, 55, .06); --st-chip-line: rgba(212, 175, 55, .45); --st-r: 2px; --st-ban-bg: rgba(10, 9, 7, .92); --st-ban-accent: #f3d98a; }
html.start.tech { --st-bg: rgba(4, 2, 10, .82); --st-border: rgba(255, 255, 255, .14); --st-accent: #ff7fb0; --st-go-bg: #fff; --st-go-ink: #040208; --st-go-shadow: 0 0 24px rgba(255, 255, 255, .35);
  --st-go-font: 'Orbitron', 'DM Sans', sans-serif; --st-go-case: uppercase; --st-go-ls: .1em; --st-go-size: .95rem; --st-name-font: 'Orbitron', 'DM Sans', sans-serif; --st-name-size: 1.2rem; --st-name-case: uppercase; --st-name-ls: .04em;
  --st-bubble: #fff; --st-bubble-ink: #040208; --st-r: 0; --st-ban-bg: rgba(0, 0, 0, .9); --st-ban-accent: #ff2d7a; }
html.start.winter { --st-bg: rgba(12, 32, 58, .74); --st-border: rgba(220, 235, 255, .35); --st-accent: #bfe2ff; --st-go-bg: linear-gradient(180deg, #ff5a6e, #c8233d); --st-go-ink: #fff; --st-go-shadow: 0 6px 20px rgba(200, 35, 61, .4);
  --st-name-font: 'Mountains of Christmas', 'DM Sans', serif; --st-name-size: 1.8rem; --st-bubble: #f4f9ff; --st-bubble-ink: #0b1a2e; --st-ban-bg: rgba(8, 24, 46, .9); --st-ban-accent: #ff8a9c; }
html.start.tinte { --st-bg: rgba(241, 226, 189, .95); --st-border: #b08850; --st-text: #2a1a0d; --st-muted: #6b5232; --st-accent: #9b2416; --st-go-bg: #9b2416; --st-go-ink: #f3e6c6; --st-go-shadow: 0 4px 0 #5c150c;
  --st-go-font: 'IM Fell English', Georgia, serif; --st-go-size: 1.2rem; --st-name-font: 'UnifrakturMaguntia', serif; --st-name-weight: 400; --st-name-size: 1.75rem; --st-font: 'IM Fell English', Georgia, serif;
  --st-bubble: #fffaf0; --st-bubble-ink: #2a1a0d; --st-chip: rgba(42, 26, 13, .05); --st-chip-line: rgba(42, 26, 13, .4); --st-r: 3px; --st-ban-bg: rgba(243, 230, 198, .96); --st-ban-ink: #2a1a0d; --st-ban-accent: #9b2416; --st-bad: #b0201a; }
html.start.arcade { --st-bg: rgba(11, 11, 30, .94); --st-border: #3cf0ff; --st-accent: #3cf0ff; --st-go-bg: #ffe14d; --st-go-ink: #000; --st-go-shadow: 4px 4px 0 #ff4f9a; --st-go-font: 'Press Start 2P', monospace; --st-go-size: .78rem;
  --st-name-font: 'Press Start 2P', monospace; --st-name-weight: 400; --st-name-size: 1.02rem; --st-bubble: #fff6c9; --st-bubble-ink: #10102a; --st-chip: #000; --st-chip-line: #3cf0ff; --st-r: 0; --st-ban-bg: rgba(0, 0, 0, .9); --st-ban-accent: #ffe14d; }

/* Leiter */
.st-ladder { gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 3px 2px; flex: none; }
.st-ladder::-webkit-scrollbar { display: none; }
.st-rung { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; padding: 0; border: 2px solid transparent; background: var(--c); cursor: pointer; overflow: visible; opacity: .78; transition: opacity .2s, transform .2s; }
.st-rung svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.st-rung:hover { opacity: 1; }
.st-rung.on { opacity: 1; border-color: var(--st-accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 12px var(--st-accent); transform: scale(1.1); }
.st-rung:focus-visible, .st-card button:focus-visible, .st-dock button:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.st-check { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: #2fbf63; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }
.st-sep { flex: none; width: 1px; height: 26px; background: var(--st-chip-line); margin: 0 4px; }
.arcade .st-rung, .arcade .st-rung svg { border-radius: 0; }

/* Gegnerkarte */
.st-card { flex-direction: column; gap: 6px; color: var(--st-text); font-family: var(--st-font); }
.st-top { display: flex; align-items: center; gap: 8px; }
.st-kicker { flex: 1; min-width: 0; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--st-muted); font-family: 'DM Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-arrow { display: none; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--st-chip-line); background: var(--st-chip); color: var(--st-text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.st-arrow:hover { border-color: var(--st-accent); }
.st-sound { flex: none; border: 1px solid var(--st-chip-line); background: var(--st-chip); color: var(--st-text); border-radius: 99px; padding: 3px 10px; font-size: .75rem; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.st-sound[aria-pressed="false"] { color: var(--st-muted); }
.st-swipe { display: flex; flex-direction: column; gap: 6px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.st-hero { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.st-face { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 6px 18px rgba(0, 0, 0, .35); }
.st-face svg { width: 100%; height: 100%; display: block; }
.arcade .st-face { border-radius: 0; box-shadow: 0 0 0 3px #000, 0 0 0 5px #3cf0ff; }
.deco .st-face { box-shadow: 0 0 0 2px #0c0b09, 0 0 0 3.5px #d4af37; }
.tinte .st-face { box-shadow: 0 0 0 2px #2a1a0d; filter: sepia(.25); }
.st-bubble { position: relative; background: var(--st-bubble); color: var(--st-bubble-ink); border-radius: 14px; padding: 8px 12px; font-size: .92rem; line-height: 1.32; min-height: 3.6em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .25s; font-family: 'DM Sans', sans-serif; }
.st-hero::after { content: ''; position: absolute; left: 76px; top: 50%; border: 7px solid transparent; border-right-color: var(--st-bubble); transform: translateY(-50%); pointer-events: none; }
.st-bubble.pop { animation: stpop .35s ease-out; }
@keyframes stpop { from { opacity: 0; transform: translateY(4px); } }
.arcade .st-bubble, .tech .st-bubble { border-radius: 0; }
.tinte .st-bubble { font-family: 'IM Fell English', Georgia, serif; font-size: 1rem; box-shadow: inset 0 0 0 1px rgba(42, 26, 13, .3); }
.st-think { position: absolute; left: 50px; top: -2px; display: none; gap: 3px; padding: 4px 6px; border-radius: 99px; background: var(--st-bubble); z-index: 2; }
.st-think b { width: 5px; height: 5px; border-radius: 50%; background: var(--st-bubble-ink); animation: stdot 1s ease-in-out infinite; }
.st-think b:nth-child(2) { animation-delay: .15s; } .st-think b:nth-child(3) { animation-delay: .3s; }
@keyframes stdot { 50% { opacity: .2; transform: translateY(-2px); } }
.st-card.ponder .st-think { display: flex; }
.st-card.ponder .st-bubble { opacity: .45; }
.st-id { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.st-name { font-family: var(--st-name-font); font-size: var(--st-name-size); font-weight: var(--st-name-weight); text-transform: var(--st-name-case); letter-spacing: var(--st-name-ls); line-height: 1.15; color: var(--st-text); }
.arcade .st-name { color: #ffe14d; text-shadow: 3px 3px 0 #ff4f9a; }
.nl .st-name { background: linear-gradient(100deg, #9effe0 0%, #fff 45%, #c9a8ff 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.deco .st-name { background: linear-gradient(100deg, #b08a3e 0%, #f7e7b4 45%, #d4af37 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tech .st-name { color: #fff; text-shadow: 0 0 12px rgba(255, 45, 122, .8); }
.winter .st-name { color: #f2f8ff; text-shadow: 0 0 12px rgba(160, 210, 255, .7); }
.st-rate { font-size: .82rem; color: var(--st-muted); white-space: nowrap; }
.st-rate b { color: var(--st-accent); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.st-traits { list-style: none; display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; min-height: 24px; }
.st-traits li { flex: none; font-size: .76rem; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--st-chip-line); background: var(--st-chip); white-space: nowrap; }
.arcade .st-traits li, .tech .st-traits li, .deco .st-traits li { border-radius: 0; }
.st-extra { font-size: .78rem; color: var(--st-muted); min-height: 1.4em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-extra b { color: var(--st-text); }
.st-extra .st-grumble { font-style: italic; }
.st-jump { border: 1px dashed var(--st-chip-line); background: none; color: var(--st-text); border-radius: 99px; padding: 1px 9px; font-size: .76rem; cursor: pointer; font-family: inherit; }
.st-jump:hover { border-color: var(--st-accent); color: var(--st-accent); }
/* Wechseln und Anstupsen */
.st-card.in-r .st-swipe { animation: stinr .32s ease-out; }
.st-card.in-l .st-swipe { animation: stinl .32s ease-out; }
@keyframes stinr { from { transform: translateX(40px); opacity: 0; } }
@keyframes stinl { from { transform: translateX(-40px); opacity: 0; } }
.st-card.nudge .st-swipe { animation: stnudge .8s ease-in-out; }
@keyframes stnudge { 20% { transform: translateX(-16px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-4px); } }

/* Dock: Musik, Brett, der eine Knopf, Einstellungen, Zweitlinks */
.st-dock { flex-direction: column; gap: 6px; color: var(--st-text); font-family: var(--st-font); }
.st-row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.st-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; width: 22px; flex: none; }
.st-eq i { flex: 1; height: 100%; background: var(--st-accent); opacity: .55; transform-origin: bottom; animation: steq var(--beat, .5s) ease-in-out infinite alternate; }
.st-eq i:nth-child(1) { animation-delay: calc(var(--beat, .5s) * -.2); } .st-eq i:nth-child(2) { animation-delay: calc(var(--beat, .5s) * -.7); }
.st-eq i:nth-child(3) { animation-delay: calc(var(--beat, .5s) * -.45); } .st-eq i:nth-child(4) { animation-delay: calc(var(--beat, .5s) * -.9); } .st-eq i:nth-child(5) { animation-delay: calc(var(--beat, .5s) * -.1); }
.st-eq.live i { opacity: 1; }
@keyframes steq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.st-listen, .st-chip { border: 1px solid var(--st-chip-line); background: var(--st-chip); color: var(--st-text); border-radius: 99px; padding: 4px 12px; font-size: .8rem; cursor: pointer; white-space: nowrap; font-family: 'DM Sans', sans-serif; }
.st-listen small { color: var(--st-muted); margin-left: 2px; }
.st-listen[aria-pressed="true"] { border-color: var(--st-accent); color: var(--st-accent); }
.st-listen:disabled { opacity: .55; cursor: default; }
.st-chip { margin-left: auto; }
.st-listen:hover:not(:disabled), .st-chip:hover { border-color: var(--st-accent); }
.arcade .st-listen, .arcade .st-chip, .tech .st-listen, .tech .st-chip, .deco .st-listen, .deco .st-chip { border-radius: 0; }
.st-go { width: 100%; min-height: 56px; border: 0; border-radius: var(--st-r); background: var(--st-go-bg); color: var(--st-go-ink); box-shadow: var(--st-go-shadow); cursor: pointer;
  font-family: var(--st-go-font); font-size: var(--st-go-size); font-weight: 700; text-transform: var(--st-go-case); letter-spacing: var(--st-go-ls); transition: transform .12s, filter .12s; }
.st-go:hover { filter: brightness(1.08); }
.st-go:active { transform: translateY(2px); }
.deco .st-go, .tinte .st-go { font-weight: 400; }
.st-cfg { text-align: center; font-size: .8rem; color: var(--st-muted); font-family: 'DM Sans', sans-serif; }
.st-link, .st-links button { background: none; border: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; padding: 2px 0; }
.st-cfg .st-link { color: var(--st-text); }
.st-links { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; font-size: .82rem; color: var(--st-muted); font-family: 'DM Sans', sans-serif; }
.st-links button:hover, .st-link:hover { color: var(--st-accent); }
.st-links #btnTrain .badge { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: var(--st-accent); color: #000; font-size: .7rem; font-weight: 700; text-decoration: none; }
html.start .st-links #btnTrain .t-long { display: none; }
html.start .st-links #btnTrain .t-short { display: inline; }

/* Patzer auf dem Brett: ??-Stempel, pulsierendes Feld, Bauchbinde */
.st-stamp { position: absolute; z-index: 13; pointer-events: none; align-items: flex-start; justify-content: flex-end; }
.st-stamp b { width: 58%; height: 58%; margin: -14% -14% 0 0; border-radius: 50%; background: #e23b3b; color: #fff; display: grid; place-items: center; font: 800 calc(var(--s, 40px) * .28) 'DM Sans', sans-serif; letter-spacing: -.04em; box-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 255, 255, .85); transform: rotate(-10deg); }
.st-stamp.go b { animation: ststamp .38s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes ststamp { from { transform: scale(2.4) rotate(-30deg); opacity: 0; } }
.arcade .st-stamp b { border-radius: 0; font-family: 'Press Start 2P', monospace; font-size: calc(var(--s, 40px) * .2); background: #ff2840; }
.tinte .st-stamp b { background: #9b2416; font-family: 'UnifrakturMaguntia', serif; }
.st-pulse { position: absolute; z-index: 11; pointer-events: none; border-radius: 3px; box-shadow: inset 0 0 0 calc(var(--s, 40px) * .07) var(--st-bad); }
.st-pulse::before { content: ''; position: absolute; inset: 0; background: var(--st-bad); opacity: .2; animation: stpulse .9s ease-in-out infinite; border-radius: inherit; }
@keyframes stpulse { 50% { opacity: .55; } }
.st-banner { position: absolute; z-index: 14; left: calc(var(--bz) + var(--sq) * .3); right: calc(var(--bz) + var(--sq) * .3); bottom: calc(var(--bz) + var(--sq) * .35); flex-direction: column; align-items: center; gap: 2px; text-align: center;
  background: var(--st-ban-bg); color: var(--st-ban-ink); border-radius: 12px; padding: calc(var(--sq) * .18) calc(var(--sq) * .25); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); pointer-events: none;
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.st-banner.up { bottom: auto; top: calc(var(--bz) + var(--sq) * .35); transform: translateY(-10px); }
.st-banner.show { opacity: 1; transform: none; }
.st-banner small { font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--st-ban-accent); }
.st-banner b { font-size: clamp(1.05rem, calc(var(--sq) * .5), 1.7rem); line-height: 1.15; color: var(--st-ban-accent); font-family: var(--st-name-font); font-weight: var(--st-name-weight); }
.st-banner span { font-size: clamp(.78rem, calc(var(--sq) * .27), 1rem); line-height: 1.35; }
.arcade .st-banner { border-radius: 0; box-shadow: 0 0 0 3px #000, 0 0 0 5px #ffe14d; }
.arcade .st-banner b { font-size: clamp(.7rem, calc(var(--sq) * .3), 1rem); line-height: 1.5; }
.deco .st-banner { border-radius: 0; box-shadow: 0 0 0 1px #d4af37, 0 0 0 5px rgba(10, 9, 7, .92), 0 0 0 6px rgba(212, 175, 55, .5); }
.tinte .st-banner { border-radius: 2px; box-shadow: 0 0 0 1.5px #2a1a0d, 0 8px 24px rgba(60, 35, 10, .35); font-family: 'IM Fell English', Georgia, serif; }
.tech .st-banner { border-radius: 0; box-shadow: 0 0 0 1px #ff2d7a, 0 0 30px rgba(255, 45, 122, .4); }
/* Effekte sanft: keine Daueranimationen am Startscreen */
.fx-soft .st-eq i, .fx-soft .st-pulse::before, .fx-soft .st-think b { animation: none; }
.fx-soft .st-eq i { transform: scaleY(.6); }

/* Mobil (≤ 900 px): alles auf einem Bildschirm */
@media (max-width: 900px) {
  html.start { --sq: min(calc((100vw - 32px) / var(--k)), calc(var(--st-h, 9999px) / var(--k)), 72px); }
  html.start .layout { padding: 8px 16px 10px; gap: 0; }
  html.start .play { width: min(100%, 560px); gap: 6px; align-items: stretch; }
  html.start .board-wrap { align-self: center; }
  html.start .panel { display: none; }
  html.start .panel:has(#stats:not([hidden])) { display: flex; margin-top: 12px; }
  html.start .panel:has(#stats:not([hidden])) > :not(#stats) { display: none !important; }
  .st-card { background: var(--st-bg); border: 1px solid var(--st-border); border-radius: var(--st-r); padding: 8px 12px 6px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  html.start .foot { display: none; }
}
@media (max-width: 900px) and (max-height: 740px) {
  .st-rung { width: 30px; height: 30px; }
  .st-ladder { gap: 5px; padding: 2px; }
  .st-card { gap: 4px; padding: 6px 10px 4px; }
  .st-swipe { gap: 4px; }
  .st-hero { grid-template-columns: 56px 1fr; gap: 10px; }
  .st-hero::after { left: 60px; }
  .st-face { width: 56px; height: 56px; }
  .st-think { left: 38px; }
  .st-bubble { font-size: .84rem; padding: 6px 10px; min-height: 3.4em; }
  html.start { --st-name-size: 1.2rem; }
  html.start.arcade { --st-name-size: .85rem; }
  html.start.winter, html.start.tinte, html.start.deco { --st-name-size: 1.45rem; }
  .st-traits li { font-size: .7rem; padding: 2px 8px; }
  .st-dock { gap: 4px; }
  .st-go { min-height: 50px; }
  html.start .play { gap: 4px; }
  html.start .layout { padding-top: 6px; padding-bottom: 6px; }
}

/* Desktop: Karte + Dock im Panel, Leiter unter dem Brett, Pfeilknöpfe */
@media (min-width: 901px) {
  html.start .panel { width: 390px; gap: 14px; padding: 20px; }
  html.start .panel > :not(.phead):not(.st-card):not(.st-dock):not(#stats) { display: none !important; }
  html.start .panel .st-card, html.start .panel .st-dock { order: -4; }
  html.start .panel .phead { order: -5; }
  .st-arrow { display: block; }
  .st-sound { position: absolute; top: 20px; right: 20px; }
  .st-card { gap: 10px; }
  .st-swipe { gap: 10px; }
  .st-hero { grid-template-columns: 104px 1fr; gap: 16px; }
  .st-hero::after { left: 110px; }
  .st-face { width: 104px; height: 104px; }
  .st-think { left: 76px; }
  .st-bubble { -webkit-line-clamp: 5; min-height: 4.2em; font-size: .95rem; padding: 10px 14px; }
  html.start { --st-name-size: 1.7rem; }
  html.start.arcade { --st-name-size: 1.1rem; }
  html.start.winter, html.start.tinte, html.start.deco { --st-name-size: 2rem; }
  .st-extra { white-space: normal; }
  .st-traits { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
  .st-dock { gap: 10px; }
  .st-go { min-height: 58px; }
  html.start .play .st-ladder { justify-content: center; flex-wrap: wrap; padding: 8px 4px 0; overflow: visible; }
  .st-rung { width: 38px; height: 38px; }
}
/* Startscreen: Schach-Glühen nur über die Deckkraft animieren (die Hintergrund-Animation von .nl .sq.chk kostete
   auf 1280×800 rund zwei Drittel der Bildrate, 61 → 18 fps, und die Mattstellung steht hier mehrere Sekunden) */
html.start .sq.chk::before { animation: stchk .8s ease-in-out infinite; will-change: opacity; }
@keyframes stchk { 50% { opacity: .5; } }
.fx-soft.start .sq.chk::before { animation: none; }

/* ---------- Handy, Paket 1 (Leiste, Blätter, lesbare Schrift, Trefferflächen) ----------
   Desktop bleibt unverändert: Alles, was das Layout ändert, steht unter @media (max-width: 900px).
   Zustände setzt js/schach.js auf <html>: game (Partie läuft oder ist beendet, kein Startscreen/Rätsel), over (beendet). */
.mbar, .rothint, .st-plabel, .st-legal, .st-gear { display: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#btnSound .ico { width: 1.05em; height: 1.05em; vertical-align: -.18em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-sound { display: inline-flex; align-items: center; gap: 4px; }
.st-sound svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-jumpbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.st-toast { position: absolute; z-index: 16; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); width: min(86%, 320px); padding: 12px 14px; border-radius: 10px;
  background: rgba(6, 10, 18, .92); color: #fff; font: 500 .95rem/1.35 'DM Sans', sans-serif; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; }
.st-toast.show { opacity: 1; transform: translate(-50%, -50%); }
.st-go.pulse { animation: stgopulse 1.2s ease-out; }
@keyframes stgopulse { 0%, 100% { filter: none; } 25%, 70% { filter: brightness(1.25) drop-shadow(0 0 12px var(--st-accent)); transform: scale(1.02); } }

/* Blatt-Ebene: Desktop zentriert wie .modal, Handy als Bottom-Sheet */
.pswrap { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; }
.pswrap[hidden] { display: none; }
.psbg { position: absolute; inset: 0; background: rgba(5, 12, 20, .72); }
.pswrap.k-result .psbg { background: rgba(5, 12, 20, .3); }
.psheet { position: relative; background: var(--navy-2); color: var(--text); border-radius: 12px; width: min(480px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); font-family: 'DM Sans', sans-serif; overflow: hidden; }
.pshead { display: flex; align-items: center; gap: 6px; padding: 8px 6px 4px 16px; flex: none; }
.pshead h2 { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; outline: none; }
.psback { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 0; margin-left: -6px; border: 0; background: none; color: var(--gold-2); font: 500 .95rem 'DM Sans', sans-serif; cursor: pointer; }
.psback svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.psx { flex: none; width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.psx:hover, .psx:active { color: var(--text); background: rgba(255, 255, 255, .06); }
.psbody { padding: 4px 16px 12px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.psfoot { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 14px; flex: none; }
.psbtn { min-height: 48px; border-radius: 10px; border: 0; padding: 10px 14px; font: 700 1rem 'DM Sans', sans-serif; cursor: pointer; background: var(--navy-3); color: var(--text); }
.psbtn.primary { background: var(--gold); color: var(--navy); }
.psbtn.danger { background: none; color: #ffb3aa; box-shadow: inset 0 0 0 2px #e5675c; }
.psbtn.second { background: var(--navy-3); font-weight: 500; }
.psbtn.link { background: none; min-height: 44px; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.psbtn:disabled { opacity: .45; cursor: default; }
.pstext { font-size: 1rem; line-height: 1.45; color: var(--text); }
.psheet .stats { background: none; padding: 0; }
.psheet .train { background: none; padding: 0; font-size: .95rem; }
.psrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px; margin: 6px 0; border: 0; border-radius: 10px; background: var(--navy); color: var(--text); font: 500 1rem 'DM Sans', sans-serif; text-align: left; cursor: pointer; }
.psrow small { color: var(--muted); font-size: .8rem; font-weight: 400; }
.psrow:disabled { opacity: .5; cursor: default; }
.pssub { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.pstiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pstile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 64px; padding: 6px 2px; border: 0; border-radius: 10px; background: var(--navy); color: var(--text); font: 500 .8rem/1.15 'DM Sans', sans-serif; cursor: pointer; }
.pstile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--gold); background: #0f2236; }
.pstile em { font-style: normal; color: var(--gold-2); }
.pstile .sw { width: 30px; height: 30px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.sw-holz { background: conic-gradient(#ecdcbc 25%, #a98a5a 0 50%, #ecdcbc 0 75%, #a98a5a 0) 0 0 / 50% 50%; }
.sw-licht { background: conic-gradient(#d3d8de 25%, #7f8a97 0 50%, #d3d8de 0 75%, #7f8a97 0) 0 0 / 50% 50%, #15191f; }
.sw-nord { background: linear-gradient(160deg, #38e1c8, #8f7bff 60%, #0a1030); }
.sw-deco { background: linear-gradient(135deg, #0c0b09 45%, #d4af37 46% 54%, #ece2cb 55%); }
.sw-techno { background: linear-gradient(135deg, #040208 40%, #ff2d7a 41% 50%, #78dcff 51% 60%, #040208 61%); }
.sw-winter { background: linear-gradient(160deg, #f4f9ff, #a9d4ff 55%, #2b5c8f); }
.sw-tinte { background: repeating-linear-gradient(135deg, #c9ad7a 0 2px, #f3e6c6 2px 5px); }
.sw-arcade { background: conic-gradient(#3a3a7a 25%, #1c1c44 0 50%, #3a3a7a 0 75%, #1c1c44 0) 0 0 / 50% 50%; box-shadow: inset 0 0 0 2px #3cf0ff; border-radius: 0; }
.psline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-weight: 500; }
.psseg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; border-radius: 10px; background: var(--navy); }
.psseg button { min-width: 72px; min-height: 44px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 .95rem 'DM Sans', sans-serif; cursor: pointer; }
.psseg button[aria-pressed="true"] { background: var(--navy-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--gold); }
.psnote { color: var(--muted); font-size: .85rem; line-height: 1.4; margin-top: 6px; }
.psabout { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.psabout a { color: var(--gold-2); }
/* Ergebnis */
.rs { display: flex; flex-direction: column; gap: 6px; }
.rs-sub { color: var(--muted); font-size: .95rem; }
.rs-rating { font-size: 1.05rem; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.rs-quote { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.rs-face { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--navy); }
.rs-face svg { width: 100%; height: 100%; display: block; }
.rs-quote p { background: #fff7e0; color: #1b2430; border-radius: 12px; padding: 7px 11px; font-size: .92rem; line-height: 1.35; }

@media (max-width: 900px) {
  /* P1-1 Technik: kein Doppeltipp-Zoom, kein grauer Tipp-Schleier, eigene :active-Zustände, Safe-Area */
  button, .nav, .st-ladder, .mbar, .mbar button, .st-rung, select, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  button:active:not(:disabled) { filter: brightness(1.18); }
  .st-go:active { filter: brightness(1.1); }
  .play, .mbar { user-select: none; -webkit-user-select: none; }
  .board { -webkit-touch-callout: none; }
  select, .stats .aform input, .psheet input, .modal input:not(#duelCode) { font-size: 16px; }   /* unter 16 px zoomt Safari beim Antippen */
  .layout { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  html.start .layout { padding-top: calc(8px + env(safe-area-inset-top)); }

  /* Blätter unten am Rand, Daumenbereich */
  .pswrap, .modal { place-items: end center; padding: 0; }
  .psheet, .modal .sheet { width: 100%; max-width: 640px; border-radius: 16px 16px 0 0; max-height: 90vh; max-height: 90dvh; animation: psup .2s ease-out; }
  .pswrap.k-result .psheet { max-height: 60vh; max-height: 60dvh; }
  .psfoot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal .sheet { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); gap: 12px; overscroll-behavior: contain; }
  .modal .sheethead { position: sticky; top: -12px; z-index: 2; background: var(--navy-2); margin: -12px -16px 0; padding: 8px 6px 4px 16px; }
  .modal .sheet h2 { font-size: 1.15rem; outline: none; }
  .sheetx { width: 44px; height: 44px; font-size: 1.7rem; }
  .focuschk { display: none; }
  .modal .sheet .big { min-height: 48px; }

  /* P1-2 Lesbarkeit: Text in DM Sans, die Themen-Schrift bleibt Akzent (Name, Kicker, Hauptknopf, Uhr) */
  html.fx :is(#status, .thinking, .nowplaying, #moves, .actions button, .nav button, .mbar, .mbar button, .psheet, .sheet, .stats, .review, .moveinfo, .train, .hintlegend, #stCfg, .st-link, .st-links button, .duelbar, .cinecap) { font-family: 'DM Sans', -apple-system, sans-serif !important; font-style: normal; letter-spacing: normal; }
  html.arcade .thinking, html.arcade .nowplaying { font-size: .8rem; line-height: 1.4; }
  html.arcade .moves { font-size: .95rem; line-height: 1.5; }
  html.arcade .actions button:not(.primary), html.arcade .nav button { font-size: .85rem; }
  html.tinte .moves { font-size: .95rem; }
  #status { font-size: .95rem; line-height: 1.3; }
  html.start .sq .coord { display: none !important; }
  html.game .sq .coord { font-size: max(9px, calc(var(--sq) * .17)); }
  html.game.lb .sq .coord { font-size: max(9px, calc(var(--bz) * .42)); }
  html.game.deco .sq .coord { font-size: max(9px, calc(var(--bz) * .46)); }
  html.game.tech .sq .coord { font-size: max(9px, calc(var(--bz) * .36)); }
  html.game.winter .sq .coord, html.game.tinte .sq .coord { font-size: max(9px, calc(var(--bz) * .5)); }
  html.game.arcade .sq .coord { font-size: max(9px, calc(var(--bz) * .3)); }
  /* Kontrast: Tinte (Zweitlinks, Einstellungen, Wertung) und Nordlicht (Wertung) */
  html.start.tinte .st-dock { --st-muted: #4a3620; }
  html.start.tinte .st-links, html.start.tinte .st-cfg, html.start.tinte .st-legal { color: #3a2814; }
  html.tinte .rating, html.tinte .melogin { color: #4a3620; }
  html.nl .rating { color: #d3def0; text-shadow: 0 0 6px rgba(4, 8, 24, .9); }
  html.nl .melogin { color: #d3def0; border-color: rgba(211, 222, 240, .5); }

  /* P1-4 Spielbildschirm: Kopf (‹, Gegner), Brett nach Breite und Höhe, eigene Zeile, Status, feste Leiste */
  html.game {
    --chrome: calc(212px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    --sq: min(calc((100vw - 24px) / var(--k)), calc((100vh - var(--chrome)) / var(--k)), 72px);
    --sq: min(calc((100vw - 24px) / var(--k)), calc((100dvh - var(--chrome)) / var(--k)), 72px);
    --mb-bg: rgba(12, 27, 42, .97); --mb-ink: var(--text); --mb-line: rgba(255, 255, 255, .12); --mb-on: var(--gold-2);
  }
  html.game.lb { --mb-bg: rgba(21, 25, 31, .97); }
  html.game.nl { --mb-bg: rgba(8, 12, 30, .94); --mb-line: rgba(160, 190, 255, .2); --mb-on: #9effe0; }
  html.game.deco { --mb-bg: rgba(10, 9, 7, .97); --mb-ink: #f3d98a; --mb-line: rgba(212, 175, 55, .5); --mb-on: #f3d98a; }
  html.game.tech { --mb-bg: rgba(4, 2, 10, .95); --mb-line: rgba(255, 255, 255, .16); --mb-on: #ff7fb0; }
  html.game.winter { --mb-bg: rgba(12, 32, 58, .95); --mb-line: rgba(220, 235, 255, .35); --mb-on: #bfe2ff; }
  html.game.tinte { --mb-bg: #f1e2bd; --mb-ink: #2a1a0d; --mb-line: #b08850; --mb-on: #9b2416; }
  html.game.arcade { --mb-bg: #000; --mb-ink: #fff; --mb-line: #3cf0ff; --mb-on: #3cf0ff; }
  html.game .layout { padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 0; justify-content: flex-start; }
  html.game .play { gap: 4px; }
  html.game .player { min-height: 40px; gap: 8px; }
  html.game #oppCard { min-height: 44px; padding-left: 44px; }
  html.game .avatar { width: 34px; height: 34px; }
  html.game .clock { font-size: 1.05rem; padding: 3px 9px; min-width: 66px; }
  html.game #meLogin, html.game .foot, html.game .phead, html.game #reviewNav { display: none !important; }
  html.game .panel { width: calc(var(--sq) * var(--k)); margin-top: 4px; padding: 0; gap: 8px; border-radius: 0; background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html.game:not(.over) .panel > :not(#status):not(#duelBar):not(#hintLegend) { display: none !important; }
  html.game.over .panel > :not(#status):not(#duelBar):not(#moveInfo):not(#review) { display: none !important; }
  html.game #status { min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
  html.game.over #status { display: block; min-height: 0; -webkit-line-clamp: unset; }
  html.game .hintlegend { font-size: .75rem; margin-top: -4px; }
  html.game.tinte .panel { color: #2a1a0d; }
  html.game.tinte #status, html.game.tinte .thinking { color: #7a1a0f; }   /* ohne Panel steht der Text auf dem dunkleren Seitengrund */
  html.game .mbar { display: block; }
  .mb-play, .mb-review { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
    height: calc(56px + env(safe-area-inset-bottom)); padding: 0 max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    background: var(--mb-bg); border-top: 1px solid var(--mb-line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .25); }
  .mb-review { grid-template-columns: repeat(4, 1fr) 1.5fr; }
  html.game.over .mb-play, html.game:not(.over) .mb-review { display: none; }
  .mbar button { min-width: 44px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px 4px; border: 0; border-radius: 10px; background: none; color: var(--mb-ink); font: 500 12px/1.1 'DM Sans', sans-serif; cursor: pointer; }
  .mbar button:disabled { opacity: .36; cursor: default; }
  .mbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mbar svg circle { fill: currentColor; stroke: none; }
  #mbSound[aria-pressed="true"] .off, #mbSound[aria-pressed="false"] .on { display: none; }
  #mbSound[aria-pressed="true"] { color: var(--mb-on); }
  #mbResult { flex-direction: row; gap: 6px; font-size: 13px; }
  .mb-review button:not(#mbResult) svg { width: 24px; height: 24px; }
  .mb-back { position: fixed; z-index: 44; top: calc(6px + env(safe-area-inset-top)); left: max(2px, calc(50% - var(--sq) * var(--k) / 2 - 4px)); width: 44px; height: 44px; min-height: 44px !important; }
  .mb-back svg { width: 26px; height: 26px; }
  html.game .mb-back { color: var(--text); }
  html.game.tinte .mb-back { color: #2a1a0d; }
  /* Querformat in der Partie: in Paket 1 nur ein Hinweis */
  @media (orientation: landscape) and (max-height: 500px) {
    html.game .rothint { display: flex; position: fixed; inset: 0; z-index: 90; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
      background: rgba(6, 12, 22, .96); color: var(--text); font-family: 'DM Sans', sans-serif; }
    .rothint svg { width: 48px; height: 48px; fill: none; stroke: var(--gold-2); stroke-width: 1.6; stroke-linecap: round; transform: rotate(90deg); animation: rothint 2.4s ease-in-out infinite; }
    .rothint p { font-size: 1.2rem; font-weight: 700; }
    .rothint small { color: var(--muted); font-size: .95rem; }
  }

  /* P1-6 Startscreen: Vorschau-Etikett, Eigenschaften als Text, Trefferflächen ≥ 44 px, Einstellungs-Chip, Kleinzeile */
  html.start .st-plabel { display: block; align-self: flex-start; max-width: 100%; margin: 0 0 -2px max(0px, calc((100% - var(--sq) * var(--k)) / 2)); padding: 1px 8px; border-radius: 99px;
    background: var(--st-bg); color: var(--st-muted); font: 700 .72rem/1.25 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.start.arcade .st-plabel, html.start.tech .st-plabel, html.start.deco .st-plabel { border-radius: 0; }
  html.start.tinte .st-plabel { color: #3a2814; }
  .st-traits { min-height: 18px; gap: 0; }
  .st-traits li { border: 0 !important; background: none !important; padding: 0; font-size: .8rem; color: var(--st-muted); }
  .st-traits li + li::before { content: '·'; margin: 0 6px; }
  .st-ladder { position: relative; z-index: 3; padding-top: 7px; padding-bottom: 7px; margin: -4px 0; }
  .st-rung::after, .st-sound::after, .st-jump::after, .st-link::after, .st-links button::after, .st-arrow::after { content: ''; position: absolute; inset: -5px -3px; }
  .st-rung::after { inset: -4px -3px; }
  .st-sound, .st-jump, .st-link, .st-links button { position: relative; }
  .st-sound::after { inset: -9px -6px; }
  .st-top { position: relative; z-index: 2; }
  .st-sound { padding: 4px 10px; }
  .st-extra.jumps { white-space: normal; overflow: visible; line-height: 1.35; }
  .st-jumpbtns { gap: 8px; margin-top: 5px; flex-wrap: nowrap; }
  .st-jump { padding: 2px 10px; font-size: .78rem; line-height: 1.3; }
  .st-jump::after { inset: -11px -3px; }
  .st-cfg { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; align-self: center; min-height: 32px; padding: 0 14px; margin: 2px 0; border: 1px solid var(--st-chip-line); background: var(--st-chip); border-radius: 99px; color: var(--st-text); font-size: .82rem; }
  html.start.arcade .st-cfg, html.start.tech .st-cfg, html.start.deco .st-cfg { border-radius: 0; }
  .st-cfg .st-gear { display: block; width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .st-cfg .st-sepdot { display: none; }
  .st-cfg #stChange { position: absolute; inset: -7px 0; width: auto; height: auto; padding: 0; font-size: 0; color: transparent; border-radius: 99px; }
  .st-cfg #stChange::after { display: none; }
  .st-links { gap: 0 4px; }
  .st-links button { min-height: 44px; padding: 0 8px; }
  .st-links button::after { display: none; }
  html.start .st-legal { display: block; text-align: center; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); font: .78rem/1.4 'DM Sans', sans-serif; color: var(--st-muted); }
  .st-legal a, .st-legal .st-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .st-legal .st-link::after { display: none; }
}
@media (max-width: 900px) and (max-height: 740px) {
  /* Kleine Höhe (SE, Safari mit Leisten): Trefferflächen getrennt halten, Platz fürs Brett zurückholen */
  .st-ladder { padding-top: 7px; padding-bottom: 7px; margin: -5px 0 0; }
  .st-rung::after { inset: -7px -3px; }
  .st-cfg { min-height: 30px; margin: 0 0 4px; }
  .st-links button { min-height: 42px; }
  .st-swipe:has(.st-extra.jumps) .st-traits { display: none; }   /* Erstbesuch: die Sprung-Knöpfe statt der Eigenschaften */
  html.start .st-plabel { font-size: .64rem; line-height: 1.1; }
  .st-row { min-height: 28px; }
}
@keyframes psup { from { transform: translateY(24px); opacity: .4; } }
@keyframes rothint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .psheet, .modal .sheet { animation: none; } }