:root {
  --bg: #14110f; --bg2: #1e1a17; --bg3: #2a2420; --line: #3b332d;
  --text: #ece4d6; --muted: #a39786; --gold: #c9a45c; --gold2: #e6c987;
  --red: #c0463a; --green: #5e9c4a; --blue: #4d7fb0;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; cursor: pointer; min-height: 40px; }
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: linear-gradient(#d4b06a, #a98543); color: #1a1408; border-color: #e6c987; font-weight: 700; }
button.small { padding: 4px 10px; min-height: 30px; font-size: .85rem; }
button.danger { border-color: var(--red); color: #f0a49b; }
input, select { background: #0f0d0b; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-height: 40px; width: 100%; }
label { display: block; margin: 10px 0; font-size: .9rem; color: var(--muted); }
label input { margin-top: 4px; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; margin: .2em 0 .4em; color: var(--gold2); letter-spacing: .02em; }
.muted { color: var(--muted); }
.error { color: #f0a49b; }
.screen { min-height: 100%; }

.home-card, .lobby-card { max-width: 460px; margin: 0 auto; padding: 28px 18px 40px; }
.home-card h1 { font-size: 2.1rem; text-align: center; margin-top: 26px; }
.home-card .sub { text-align: center; color: var(--muted); margin-bottom: 22px; }
.home-card button.primary { width: 100%; margin-top: 6px; }
.or { text-align: center; color: var(--muted); margin: 14px 0; }
.join-row { display: flex; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; }
.back-hub { color: var(--muted); text-decoration: none; font-size: .9rem; }
.hint { margin-top: 26px; color: var(--muted); font-size: .9rem; }

.lobby-head { display: flex; justify-content: space-between; align-items: center; }
.code { font-family: monospace; letter-spacing: .25em; background: var(--bg3); padding: 2px 10px; border-radius: 8px; }
.players { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.players li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; }
.players li .nm { flex: 1; }
.players li img { width: 28px; height: 28px; }
.tag { font-size: .72rem; padding: 1px 7px; border-radius: 10px; background: var(--bg3); color: var(--muted); }
.host-tools, .lobby-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.house-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.house-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font-size: .85rem; }
.house-btn img { width: 44px; height: 44px; }
.house-btn.mine { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.house-btn.taken { opacity: .5; }
.small-note { font-size: .8rem; }

/* Spiel */
.game { display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--bg2); border-bottom: 1px solid var(--line); }
.top-info { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.top-info span { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-wild { display: flex; gap: 2px; align-items: center; }
.wild-pip { width: 9px; height: 16px; border-radius: 3px; background: var(--bg3); border: 1px solid var(--line); }
.wild-pip.on { background: #7fb2e6; border-color: #b8d6f2; }
.wild-pip.now { background: #d9f0ff; }
.icon-btn { width: 40px; padding: 0; font-size: 1.1rem; }
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.map { flex: 1; min-height: 0; background: #0b0d10; position: relative; touch-action: none; overflow: hidden; }
.board-svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
.map-tools { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.map-tools button { width: 38px; padding: 0; background: rgba(30, 26, 23, .9); }
.panel { background: var(--bg2); border-top: 2px solid var(--gold); max-height: 46dvh; overflow-y: auto; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .main { flex-direction: row; }
  .panel { width: 400px; max-height: none; border-top: 0; border-left: 2px solid var(--gold); }
  .map-tools { right: 410px; }
}
.panel h3 { margin: 0 0 6px; font-size: 1.05rem; }
.panel .row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }
.panel .grow { flex: 1; }
.panel p { margin: 6px 0; }
.panel .me-turn { color: var(--gold2); }
.panel .waiting { color: var(--muted); }
.panel .waiting b { color: var(--text); }
.dots::after { content: ''; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* Karte */
.rlabel { fill: #f3ead6; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: 2.5px; pointer-events: none; font-family: system-ui, sans-serif; }
.tok-num { fill: #fff; stroke: #000; stroke-width: 2.5px; paint-order: stroke; font-weight: 700; pointer-events: none; }
.edge { stroke: rgba(255, 255, 255, .18); stroke-width: 2; }
.edge-wet { stroke: rgba(120, 170, 220, .25); stroke-dasharray: 5 5; }
.region .shape { fill: rgba(255, 255, 255, 0.001); stroke: none; }
.region.k-port .shape { fill: rgba(70, 110, 150, .25); stroke: rgba(200, 225, 255, .5); stroke-width: 1.5; }
.region:hover .shape { fill: rgba(255, 255, 255, .07); }
.rlabel.sea { fill: #cfe3f5; font-style: italic; letter-spacing: .04em; opacity: .85; }
.region { cursor: default; }
.region.selectable, .region.target { cursor: pointer; }
.region.selectable .shape { stroke: var(--gold2); stroke-width: 3; fill: rgba(240, 200, 90, .14); }
.region.selected .shape { stroke: #fff; stroke-width: 4; filter: drop-shadow(0 0 6px #fff); }
.region.target .shape { stroke: #7fe06a; stroke-width: 3.5; stroke-dasharray: 8 4; fill: rgba(127, 224, 106, .16); }
.region.danger .shape { stroke: #ff6a5a; stroke-width: 3.5; fill: rgba(255, 106, 90, .16); }
.unit.routed { opacity: .6; }
.order-ring { fill: rgba(0, 0, 0, .55); stroke-width: 3; }
.flash { fill: none; stroke: #fff; stroke-width: 5; animation: fl 1.4s ease-out forwards; pointer-events: none; }
@keyframes fl { from { opacity: 1; } to { opacity: 0; transform-origin: center; } }
.region-over { pointer-events: none; }

/* Befehle / Karten */
.order-tray { display: flex; flex-wrap: wrap; gap: 6px; }
.order-btn { padding: 2px; width: 54px; height: 54px; position: relative; }
.order-btn img { width: 100%; height: 100%; }
.order-btn.used { opacity: .3; }
.order-btn.special::after { content: '★'; position: absolute; right: 2px; top: -2px; color: var(--gold2); font-size: .9rem; text-shadow: 0 0 3px #000; }
.plan-list { display: grid; gap: 4px; margin: 8px 0; }
.plan-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.plan-row.sel { border-color: #fff; }
.plan-row img { width: 34px; height: 34px; }
.plan-row .rn { flex: 1; }
.cards { display: flex; flex-wrap: wrap; gap: 8px; }
.hcard { width: 96px; padding: 0; background: none; border: 2px solid transparent; border-radius: 8px; min-height: 0; text-align: center; }
.hcard img { width: 100%; display: block; border-radius: 6px; }
.hcard.sel { border-color: var(--gold2); }
.hcard.dim { opacity: .4; }
.hcard small { display: block; color: var(--muted); font-size: .7rem; }
.combat { background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; }
.combat .vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.combat .side b { font-size: 1.5rem; display: block; }
.combat .side .brk { font-size: .72rem; color: var(--muted); }
.combat .crest { width: 34px; height: 34px; }
.units-list { display: grid; gap: 4px; }
.unit-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--bg3); border-radius: 8px; border: 1px solid var(--line); }
.unit-row img { width: 30px; height: 30px; }
.unit-row .grow { flex: 1; }
.unit-row select { width: auto; min-height: 34px; padding: 4px 8px; max-width: 55%; }
.unit-row input[type=checkbox] { width: 20px; min-height: 20px; }
.muster-reg { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 8px 0; }
.muster-reg h4 { margin: 0 0 4px; font-size: .95rem; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--line); font-size: .8rem; }
.chip button { min-height: 0; padding: 0 4px; border: 0; background: none; }

/* Sheet */
.sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet-box { background: var(--bg2); width: 100%; max-width: 720px; max-height: 88dvh; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; border: 1px solid var(--line); }
@media (min-width: 900px) { .sheet { align-items: center; } .sheet-box { border-radius: 14px; } }
.sheet-head { display: flex; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); gap: 6px; }
.tabs { flex: 1; display: flex; gap: 4px; overflow-x: auto; }
.tabs button { padding: 6px 10px; min-height: 34px; font-size: .88rem; white-space: nowrap; }
.tabs button.on { background: var(--gold); color: #1a1408; border-color: var(--gold2); }
.sheet-body { padding: 12px 14px 22px; overflow-y: auto; }
.house-row { display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--bg3); border-left: 6px solid #888; border-radius: 8px; margin-bottom: 8px; }
.house-row img { width: 42px; height: 42px; }
.house-row .grow { flex: 1; min-width: 0; }
.house-row small { color: var(--muted); display: block; }
.stat { display: inline-flex; align-items: center; gap: 3px; margin-right: 10px; font-size: .88rem; }
.stat img { width: 16px; height: 16px; }
.track { margin: 10px 0 16px; }
.track h4 { margin: 0 0 6px; color: var(--gold2); font-weight: 600; }
.track-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.track-slot { width: 52px; text-align: center; font-size: .72rem; color: var(--muted); }
.track-slot img { width: 40px; height: 40px; display: block; margin: 0 auto 2px; }
.track-slot .st { color: var(--gold2); }
.log { font-size: .86rem; display: grid; gap: 3px; }
.log div { padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, .03); }
.log .rd { color: var(--gold); margin-top: 6px; font-size: .75rem; background: none; }
.rules { font-size: .9rem; line-height: 1.45; }
.rules h4 { color: var(--gold2); margin: 12px 0 2px; }
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .82); z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; }
.lightbox img { max-width: min(92vw, 380px); max-height: 74dvh; border-radius: 12px; }
.toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); background: #3a1c18; border: 1px solid var(--red); color: #ffd2cc; padding: 8px 14px; border-radius: 10px; z-index: 40; max-width: 92vw; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.toast.ok { background: #1c331a; border-color: var(--green); color: #cfe9c6; }
.banner { text-align: center; padding: 14px 8px; }
.banner h2 { font-size: 1.5rem; }
.rank { text-align: left; margin: 10px auto; max-width: 320px; }

.combat .ability { font-size: .75rem; color: var(--muted); margin-top: 4px; }
.combat .note { font-size: .8rem; margin-top: 3px; color: var(--gold, #e6c565); }
.panel .col { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }

/* Tischchat */
.chat-toggle { position: relative; }
.chat-toggle .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #c0392b; color: #fff; font-size: .7rem; line-height: 18px; text-align: center; padding: 0 4px; }
.chat { position: fixed; z-index: 60; right: 10px; bottom: 10px; width: min(380px, calc(100vw - 20px)); height: min(520px, 70vh); display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--gold); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.chat[hidden] { display: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.chat-log { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.chat .msg { background: var(--bg3); border-radius: 10px; padding: 5px 9px; max-width: 88%; align-self: flex-start; }
.chat .msg.mine { align-self: flex-end; background: #3a3020; }
.chat .msg.whisper { border: 1px dashed var(--gold); }
.chat .msg small { display: block; color: var(--muted); font-size: .7rem; }
.chat-quick { display: flex; gap: 4px; overflow-x: auto; padding: 4px 8px; border-top: 1px solid var(--line); }
.chat-quick button { white-space: nowrap; min-height: 30px; padding: 3px 9px; }
.chat-send { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-send select { width: 38%; flex: none; }
.chat-send input { flex: 1; min-width: 0; }

/* Aufgedeckte Gebote */
.reveal { position: fixed; z-index: 55; left: 50%; top: 64px; transform: translateX(-50%); width: min(360px, calc(100vw - 20px)); cursor: pointer; }
.reveal[hidden] { display: none; }
.reveal-box { background: var(--bg2); border: 1px solid var(--gold); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.reveal-box h3 { margin: 0 0 6px; }
.reveal .bid-row { display: flex; align-items: center; gap: 10px; padding: 4px 2px; opacity: 0; animation: bidin .4s ease forwards; }
.reveal .bid-row b { font-size: 1.3rem; color: var(--gold2); min-width: 1.5em; text-align: right; }
.reveal .crest { width: 28px; height: 28px; }
.reveal .verdict { margin: 8px 0 0; opacity: 0; animation: bidin .4s ease forwards; }
.reveal .verdict.good { color: #7fd28a; } .reveal .verdict.bad { color: #e07a70; }
@keyframes bidin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.ctable { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: .82rem; }
.ctable th { font-weight: normal; padding: 2px 4px; text-align: center; vertical-align: bottom; }
.ctable th small { color: var(--muted); display: block; }
.ctable td { text-align: center; padding: 2px 4px; border-top: 1px solid var(--line); }
.ctable td.lab { text-align: left; color: var(--muted); }
.ctable tr.total td { font-size: 1.25rem; font-weight: bold; color: var(--gold2); }
.combat .verdict-line { margin-top: 6px; font-weight: bold; color: var(--gold2); }

.rule-sec { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; padding: 4px 10px; }
.rule-sec summary { cursor: pointer; padding: 6px 0; font-family: Georgia, serif; color: var(--gold2); }
.rule-sec p { margin: .5em 0; white-space: pre-line; font-size: .9rem; }

/* Phasenleiste und Zugreihenfolge */
.phasebar { display: flex; align-items: center; gap: 10px; padding: 4px 10px; background: var(--bg2); border-bottom: 1px solid var(--line); font-size: .78rem; }
.pb-steps { display: flex; gap: 10px; overflow-x: auto; flex: 1 1 0; min-width: 0; scrollbar-width: none; }
.pb-steps::-webkit-scrollbar { display: none; }
.pb-group { display: flex; align-items: center; gap: 4px; flex: none; }
.pb-label { color: var(--gold2); font-family: Georgia, serif; margin-right: 2px; }
.pb-step { padding: 2px 8px; border-radius: 10px; background: var(--bg3); color: var(--muted); white-space: nowrap; }
.pb-step.done { opacity: .55; }
.pb-step.skip { opacity: .3; text-decoration: line-through; }
.pb-step.now { background: var(--gold); color: #1b1408; font-weight: bold; box-shadow: 0 0 8px rgba(201,164,92,.6); }
.pb-order { display: flex; gap: 4px; flex: none; }
.pb-house { display: flex; align-items: center; gap: 1px; padding: 1px 4px 1px 3px; border-radius: 10px; background: var(--bg3); border: 1px solid transparent; }
.pb-house b { font-size: .65rem; color: var(--muted); margin-right: 2px; }
.pb-house .crest { width: 22px; height: 22px; }
.pb-house.me { border-color: var(--line); }
.pb-house.active { border-color: var(--gold2); box-shadow: 0 0 8px rgba(230,201,135,.7); animation: pbpulse 1.4s ease-in-out infinite; }
.pb-tok { width: 16px; height: 16px; margin-left: 1px; }
.pb-tok.used { opacity: .35; filter: grayscale(1); }
@keyframes pbpulse { 50% { box-shadow: 0 0 2px rgba(230,201,135,.3); } }
@media (max-width: 700px) { .phasebar { flex-direction: column; align-items: stretch; gap: 4px; } .pb-order { justify-content: center; } }

/* Westeros-Karten */
.wreveal { position: fixed; inset: 0; z-index: 54; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); cursor: pointer; }
.wreveal[hidden] { display: none; }
.wbox { background: var(--bg2); border: 1px solid var(--gold); border-radius: 14px; padding: 12px 16px; max-width: min(720px, 96vw); max-height: 92vh; overflow-y: auto; text-align: center; box-shadow: 0 10px 50px #000; }
.wcards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.wcard { width: 190px; max-width: 42vw; display: flex; flex-direction: column; gap: 4px; align-items: center; opacity: 0; animation: bidin .5s ease forwards; }
.wcard .wimg { width: 100%; border-radius: 8px; }
.wcard .wnum { font-family: Georgia, serif; color: var(--gold2); font-size: 1.1rem; }
.wcard small { font-size: .72rem; }
@media (max-width: 700px) { .wcards { flex-wrap: nowrap; gap: 6px; } .wcard { width: 30vw; max-width: none; } .wcard small { font-size: .62rem; } .wbox { padding: 10px 8px; } }

/* ---- Erweiterungen: Karten, Leisten, Verlauf, Wiederholung, Zeitlimit, Ziehen ---- */
.hc-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; padding-left: 8px; border-left: 4px solid var(--line); }
.hc-head .crest { width: 26px; height: 26px; }
.hc-head .tag { margin-left: auto; }
.hc-row .hcard { width: 78px; position: relative; }
.hc-row .hcard.dim { opacity: .42; filter: grayscale(.7); }
.gone-mark { position: absolute; left: 4px; right: 4px; top: 38%; background: rgba(0,0,0,.72); color: #e7c56a; font-size: .68rem; border-radius: 4px; padding: 1px 0; transform: rotate(-12deg); }
.track.big { margin: 0 0 16px; }
.ladder { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; }
.rung { position: relative; flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(#182033, #0f1522); transition: transform .5s, box-shadow .5s; }
.rung .pos { font: 700 1.05rem var(--serif, serif); color: #e7c56a; }
.rung .flag { width: 46px; height: auto; }
.rung .hn { font-size: .74rem; text-align: center; line-height: 1.1; }
.rung .tok { width: 30px; height: 30px; position: absolute; right: -4px; top: -10px; filter: drop-shadow(0 2px 3px #000); }
.rung .tok.used { filter: grayscale(1) brightness(.6); }
.rung .stars { color: #e7c56a; font-size: .8rem; letter-spacing: 1px; }
.rung .stars.none { color: var(--muted); }
.rung.me { border-color: #e7c56a; box-shadow: 0 0 10px rgba(231,197,106,.35); }
.rung .mv { position: absolute; left: 4px; top: 4px; font-size: .68rem; font-weight: 700; }
.rung .mv.up { color: #6fd08c; } .rung .mv.down { color: #e4766a; }
.rung.up { animation: rung-up .9s ease-out; } .rung.down { animation: rung-down .9s ease-out; }
@keyframes rung-up { from { transform: translateX(40px); box-shadow: 0 0 14px #6fd08c; } to { transform: none; } }
@keyframes rung-down { from { transform: translateX(-40px); box-shadow: 0 0 14px #e4766a; } to { transform: none; } }
.wild-track { display: flex; gap: 3px; }
.wcell { flex: 1; text-align: center; padding: 6px 0; border: 1px solid var(--line); border-radius: 6px; font-size: .8rem; color: var(--muted); background: #0f1522; }
.wcell.past { background: #2a3550; color: #cbd5e8; }
.wcell.now { background: #c9a24a; color: #1a1408; font-weight: 700; }
.wcell.max { border-color: #b3473d; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { padding: 4px 11px; min-height: 30px; border-radius: 16px; font-size: .82rem; }
.chip.on { background: var(--gold); color: #1a1408; border-color: var(--gold2); }
.hist .rd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hist .rd .replay { margin-left: 4px; }
.hist .lg { padding: 2px 0 2px 8px; border-left: 3px solid transparent; }
.hist .c-combat { border-left-color: #b3473d; } .hist .c-bids { border-left-color: #c9a24a; }
.hist .c-westeros { border-left-color: #5b8fd6; } .hist .c-orders { border-left-color: #8a6fc9; }
.hist .c-moves { border-left-color: #4f9a6a; } .hist .c-power { border-left-color: #999; }
.replaybar { position: absolute; left: 8px; top: 8px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(8,11,18,.94); border: 1px solid #c9a24a; max-width: calc(100% - 16px); }
@media (min-width: 900px) { .replaybar { max-width: calc(100% - 440px); } }
.replaybar[hidden] { display: none; }
.rp-title { display: flex; flex-direction: column; line-height: 1.15; text-align: center; }
.rp-stats { display: flex; gap: 6px; width: 100%; justify-content: center; font-size: .78rem; }
.rp-st { display: inline-flex; align-items: center; gap: 3px; }
.rp-st .crest { width: 16px; height: 16px; }
.top-timer { font-variant-numeric: tabular-nums; color: #e7c56a; }
.top-timer.low { color: #ff8577; animation: tpulse 1s infinite; }
.top-timer.mine { font-weight: 700; }
@keyframes tpulse { 50% { opacity: .55; } }
.timer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.timer-sel select { padding: 4px 8px; }
.menu-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.menu-list button { text-align: left; }
.danger { border-color: #b3473d !important; }
.linkish { background: none; border: 0; color: var(--gold2); text-decoration: underline; padding: 6px 0; }
.drag-ghost { position: fixed; z-index: 90; width: 54px; height: 54px; margin: -27px 0 0 -27px; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.7)); transform: rotate(-6deg); }
.order-btn.dragging { opacity: .35; }
.order-btn { touch-action: none; cursor: grab; }
.plan-row img.placed { cursor: grab; touch-action: none; }
.board-svg.drop-mode .region.selectable .shape { fill: rgba(231,197,106,.16); }
.order-ring.hidden-order { fill: rgba(10,12,18,.65); }
.raven-fly { position: fixed; top: 28%; left: -80px; z-index: 80; pointer-events: none; animation: raven-fly 2.4s ease-in-out forwards; }
@keyframes raven-fly { 0% { transform: translate(0, 0) scale(.8); } 50% { transform: translate(55vw, -70px) scale(1.15) rotate(-6deg); } 100% { transform: translate(115vw, 30px) scale(.9); } }
.cb-rest { margin-top: 6px; font-size: .7rem; }
.cb-rest em { display: block; font-style: normal; color: var(--muted); margin-bottom: 2px; }
.chips-mini { display: flex; flex-wrap: wrap; gap: 3px; }
.mini { min-height: 0; padding: 1px 6px; font-size: .78rem; border-radius: 6px; line-height: 1.35; }
.mini i { font-style: normal; font-size: .62rem; margin-left: 2px; }
.small-note { font-size: .78rem; }
@media (max-width: 700px) { .cb-rest { display: none; } .cb-box.open .cb-rest { display: block; } }

/* ---- Endbildschirm ---- */
.endscreen { position: fixed; inset: 0; z-index: 60; background: rgba(4,6,10,.82); display: flex; align-items: center; justify-content: center; padding: 12px; overflow-y: auto; }
.endscreen[hidden] { display: none; }
.endbox { width: 100%; max-width: 640px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px 22px 18px; background: rgba(8,11,18,.98); border: 20px solid transparent; border-image: var(--f-modal) 24 fill / 20px stretch; background-clip: padding-box; animation: endin .6s ease-out; }
@keyframes endin { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.endhead { display: flex; align-items: center; gap: 16px; }
.endflag { width: 74px; height: auto; filter: drop-shadow(0 6px 10px #000); }
.endhead h2 { margin: 2px 0; font-size: clamp(1.2rem, 4.5vw, 1.7rem); }
.endhead p { margin: 0; }
.endtable { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: .92rem; }
.endtable th { text-align: center; color: var(--gold); font-family: var(--serif); font-weight: 600; padding: 4px 3px; border-bottom: 1px solid #3a3526; }
.endtable td { text-align: center; padding: 6px 3px; border-bottom: 1px solid #1c2230; }
.endtable td.nm { text-align: left; }
.endtable td.nm span { vertical-align: middle; }
.endtable .ef { width: 20px; height: auto; margin-right: 8px; vertical-align: middle; }
.endtable td.rk { color: var(--gold2); font-weight: 700; }
.endtable tr.winner td { background: rgba(210,170,92,.13); }
.endtable tr.me td.nm b::after { content: ' (du)'; font-weight: 400; color: var(--muted); }
.endchart { width: 100%; height: auto; background: rgba(0,0,0,.25); border-radius: 8px; }
.endchart-box h4 { margin: 12px 0 4px; }
.endactions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.house-row .hflagimg { width: 34px; height: auto; flex: none; filter: drop-shadow(0 2px 3px #000); }