/* ============================================================
   CATAN — Aussehen
   ============================================================ */
:root {
  --sea-1: #0d3a56;
  --sea-2: #071e2e;
  --ink: #f2ece0;
  --ink-dim: #b6c2cd;
  --ink-soft: #8d9dab;
  --gold: #eac877;
  --gold-2: #c1934189;
  --gold-line: rgba(234, 200, 119, .35);
  --panel: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  --panel-line: rgba(255, 255, 255, .11);
  --shadow: 0 20px 44px rgba(0, 0, 0, .40);
  --radius: 18px;
  --brick: #c1603c; --wood: #3f7a46; --wool: #9dbb63; --grain: #e0ae3a; --ore: #7b8798;
  --ok: #7fd08a; --bad: #e8674f;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, #16618d 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 110%, #0a3550 0%, transparent 55%),
    linear-gradient(175deg, var(--sea-1), var(--sea-2) 70%);
  background-attachment: fixed;
  overflow: hidden;
}
h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; letter-spacing: .3px; margin: 0; }
button { font: inherit; color: inherit; }
input { font: inherit; }
[hidden] { display: none !important; }
kbd { background: rgba(255,255,255,.12); border: 1px solid var(--panel-line); border-radius: 5px; padding: 0 6px; font-size: 12px; }

/* ---------------- Buttons ---------------- */
.btn {
  --bg1: rgba(255, 255, 255, .14); --bg2: rgba(255, 255, 255, .06);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 6px 16px rgba(0, 0, 0, .22);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.995); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.gold {
  background: linear-gradient(180deg, #f7dd9f, #cb9c48);
  color: #2a1d08; border-color: rgba(255, 235, 190, .55); font-weight: 650;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn.gold:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(226, 178, 86, .32); }
.btn.gold:disabled { background: rgba(234, 200, 119, .13); color: rgba(255, 240, 205, .55); border-color: rgba(234, 200, 119, .22); text-shadow: none; }
.btn.gold svg { color: #2a1d08; }
.btn.ghost { background: rgba(255, 255, 255, .04); }
.btn.big { padding: 12px 18px; font-size: 16px; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.full { width: 100%; }
.btn.icon { width: 40px; padding: 9px 0; }
.btn.icon.off { opacity: .5; }

/* ---------------- Ressourcen-Icons ---------------- */
.res { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; color: var(--ink); }
.res svg { width: 100%; height: 100%; display: block; }
.res.brick { color: #eda780; } .res.wood { color: #86cf90; } .res.wool { color: #d7e9a8; }
.res.grain { color: #f5d488; } .res.ore { color: #c3cfdd; }

/* ---------------- Setup-Bildschirm ---------------- */
.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; overflow: auto; z-index: 30; }
.setup-card {
  width: min(940px, 100%);
  padding: 30px 34px 34px;
  border-radius: 26px;
  border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(12, 42, 62, .92), rgba(6, 24, 37, .95));
  box-shadow: var(--shadow), 0 0 0 1px rgba(234, 200, 119, .10);
  backdrop-filter: blur(9px);
  animation: rise .45s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.crest { display: flex; justify-content: center; margin-bottom: -28px; }
.hexlogo { width: 76px; height: 76px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.setup-card h1 { text-align: center; font-size: clamp(28px, 4vw, 44px); font-weight: 600; }
.setup-card h1 span { color: var(--gold); }
.setup-card .sub { text-align: center; color: var(--ink-dim); margin: 8px auto 26px; max-width: 60ch; }
.setup-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; }
@media (max-width: 780px) { .setup-grid { grid-template-columns: 1fr; } }
.sg-col h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin-bottom: 12px; }
.picks { display: flex; flex-direction: column; gap: 10px; }
.seat {
  display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 10px;
  padding: 10px; border-radius: 14px; border: 1px solid var(--panel-line);
  background: var(--panel); transition: opacity .2s, filter .2s;
}
.seat.off { opacity: .5; grid-template-columns: 1fr; }
.seat-add {
  padding: 11px; border-radius: 11px; cursor: pointer; font-size: 13.5px;
  border: 1px dashed var(--panel-line); background: rgba(255, 255, 255, .03); color: var(--ink-soft);
}
.seat-add:hover { color: var(--ink); border-color: var(--gold-line); background: rgba(234, 200, 119, .07); }
.seat.off .seat-add { display: block; width: 100%; text-align: center; }
.seat-color {
  padding: 9px 8px; border-radius: 10px; cursor: pointer; font-weight: 650;
  color: #14100a; border: 1px solid rgba(0, 0, 0, .35);
  background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 70%, #000));
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.seat-name {
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--panel-line);
  background: rgba(0, 0, 0, .28); color: var(--ink); min-width: 0;
}
.seat-name:focus { outline: 2px solid var(--gold-line); }
.segmented { display: inline-flex; padding: 3px; gap: 3px; border-radius: 11px; background: rgba(0, 0, 0, .3); border: 1px solid var(--panel-line); }
.segmented button { padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--ink-dim); }
.segmented button.sel { background: linear-gradient(180deg, #f0d391, #c99a46); color: #2a1d08; font-weight: 650; }
.segmented button:not(.sel):hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.segmented.mini button { padding: 6px 9px; font-size: 13px; }
.fld { display: block; margin-bottom: 16px; }
.fld > span { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 7px; letter-spacing: .04em; }
.seedrow { display: flex; gap: 8px; }
.seedrow input { flex: 1; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--panel-line); background: rgba(0, 0, 0, .3); color: var(--ink); }
.tip { font-size: 12.5px; color: var(--ink-soft); margin: -6px 0 16px; }

/* ---------------- App-Layout ---------------- */
.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(4, 20, 32, .78), rgba(4, 20, 32, .35));
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 34px; height: 34px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.brand b { display: block; font-family: Georgia, serif; font-size: 19px; letter-spacing: .12em; }
.brand small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .22em; color: var(--gold); }
.turninfo { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.turninfo .who { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 16px; white-space: nowrap; }
.turninfo .who .dot, .pc-name .dot { width: 12px; height: 12px; border-radius: 4px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.turninfo .phase { color: var(--ink-dim); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turninfo .round { font-size: 12px; color: var(--ink-soft); border: 1px solid var(--panel-line); padding: 2px 8px; border-radius: 20px; }
.top-actions { display: flex; gap: 8px; }

/* Würfel */
.dicebox { display: flex; align-items: center; gap: 6px; min-width: 118px; justify-content: center; }
.dicebox:empty { display: none; }
.dicebox .die { width: 34px; height: 34px; display: block; }
.dicebox .die svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.dicebox .die svg .face { fill: #f6f1e6; stroke: #7d6a45; stroke-width: 3; }
.dicebox .die svg circle { fill: #2b2a28; }
.dicebox .die:first-child svg circle { fill: #b8382c; }
.dicebox .sum { font-family: Georgia, serif; font-size: 21px; color: var(--gold); margin-left: 4px; }
.dicebox.roll .die { animation: tumble .5s cubic-bezier(.2, .9, .3, 1.2); }
.dicebox.roll .die:nth-child(2) { animation-delay: .06s; }
@keyframes tumble { 0% { transform: rotate(-25deg) translateY(-14px) scale(.8); } 60% { transform: rotate(8deg) translateY(2px); } 100% { transform: none; } }

.layout {
  min-width: 0;
  display: grid; grid-template-columns: 268px minmax(0, 1fr) 342px;
  gap: 14px; padding: 14px; min-height: 0;
}
.col { display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; overflow: auto; scrollbar-width: thin; }
.panel { min-width: 0; }
.col::-webkit-scrollbar { width: 8px; }
.col::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }

.panel {
  border-radius: var(--radius);
  border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(17, 50, 72, .80), rgba(8, 30, 45, .86));
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
  padding: 12px;
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 10px; }
.panel-head span { font-family: Georgia, serif; font-size: 15px; letter-spacing: .05em; }
.panel-head em { font-style: normal; font-size: 12px; color: var(--gold); }
.subhead { margin: 14px 2px 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); }

/* ---------------- Spielerkarten ---------------- */
.players { display: flex; flex-direction: column; gap: 10px; }
.pcard {
  position: relative; padding: 10px 11px 14px; border-radius: 14px;
  border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 26%, transparent), rgba(0, 0, 0, .18));
  overflow: hidden;
}
.pcard.active { border-color: var(--gold-line); box-shadow: 0 0 0 1px var(--gold-line), 0 10px 24px rgba(0, 0, 0, .35); }
.pcard.winner { border-color: var(--gold); }
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pc-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; }
.pc-name .bot { font-style: normal; font-size: 9.5px; letter-spacing: .1em; background: rgba(0, 0, 0, .4); color: var(--ink-dim); padding: 2px 5px; border-radius: 5px; margin-left: 4px; }
.pc-vp { font-family: Georgia, serif; font-size: 24px; line-height: 1; color: var(--gold); text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.pc-mat { display: flex; gap: 10px; margin: 8px 0 6px; font-size: 12.5px; color: var(--ink-dim); }
.pc-mat span { display: inline-flex; align-items: center; gap: 4px; }
.pc-mat span svg { width: 15px; height: 15px; }
.pc-mat .cards .back { font-style: normal; display: inline-block; background: repeating-linear-gradient(135deg, #6b4f2a, #6b4f2a 3px, #7d5c31 3px, #7d5c31 6px); border-radius: 3px; padding: 0 5px; color: #ffeec6; }
.pc-badges { display: flex; gap: 6px; min-height: 20px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 7px; border-radius: 20px; background: rgba(255, 255, 255, .10); border: 1px solid var(--panel-line); }
.badge svg { width: 13px; height: 13px; }
.badge.gold { background: linear-gradient(180deg, rgba(245, 217, 152, .35), rgba(201, 154, 70, .22)); color: var(--gold); border-color: var(--gold-line); }
.badge.muted { color: var(--ink-soft); }
.pc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, .35); }
.pc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pc), var(--gold)); transition: width .4s ease; }

/* ---------------- Brett ---------------- */
.board-wrap {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), inset 0 0 60px rgba(0, 0, 0, .35);
  background: #0a2c44;
  min-height: 320px;
}
canvas#board { position: absolute; inset: 0; display: block; touch-action: manipulation; }
.board-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 7px 16px; border-radius: 22px; font-size: 13px; white-space: nowrap;
  background: rgba(4, 18, 28, .72); border: 1px solid var(--panel-line);
  backdrop-filter: blur(6px); color: var(--ink-dim); pointer-events: none;
  transition: opacity .25s, background .25s, color .25s;
}
.board-hint:empty { opacity: 0; }
.board-hint.warn { background: rgba(120, 30, 20, .85); color: #ffd9cf; border-color: rgba(255, 140, 110, .4); }

/* ---------------- Hand ---------------- */
.resrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.rescard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 6px; border-radius: 11px; border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .22));
  transition: transform .2s, opacity .2s;
}
.rescard .glyph { width: 24px; height: 24px; }
.rescard .glyph svg { width: 100%; height: 100%; }
.rescard.brick { border-color: rgba(237, 167, 128, .35); } .rescard.brick .glyph { color: #eda780; }
.rescard.wood { border-color: rgba(134, 207, 144, .35); } .rescard.wood .glyph { color: #86cf90; }
.rescard.wool { border-color: rgba(215, 233, 168, .35); } .rescard.wool .glyph { color: #d7e9a8; }
.rescard.grain { border-color: rgba(245, 212, 136, .35); } .rescard.grain .glyph { color: #f5d488; }
.rescard.ore { border-color: rgba(195, 207, 221, .35); } .rescard.ore .glyph { color: #c3cfdd; }
.rescard b { font-size: 14px; }
.rescard.empty { opacity: .35; }
.armyline { margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.devrow { display: flex; flex-wrap: wrap; gap: 7px; }
.devcard {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 68px; padding: 7px 4px 5px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--gold-line); background: linear-gradient(180deg, rgba(245, 217, 152, .16), rgba(0, 0, 0, .28));
}
.devcard svg { width: 20px; height: 20px; color: var(--gold); }
.devcard b { font-size: 13px; }
.devcard small { font-size: 9.5px; color: var(--ink-soft); text-align: center; }
.devcard.can:hover { transform: translateY(-2px); filter: brightness(1.15); }
.devcard.locked { opacity: .45; cursor: not-allowed; }

/* ---------------- Aktionen ---------------- */
.primary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hintbox { font-size: 13px; color: var(--ink-dim); padding: 8px 10px; border-left: 2px solid var(--gold-line); background: rgba(255, 255, 255, .04); border-radius: 0 10px 10px 0; }
.buildgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.build {
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; gap: 2px 8px;
  align-items: center; text-align: left; padding: 9px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--panel-line); background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(0, 0, 0, .2));
  transition: transform .12s, filter .15s, border-color .15s;
}
.build:hover:not(.off) { transform: translateY(-1px); filter: brightness(1.14); }
.build.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line), 0 8px 20px rgba(0, 0, 0, .35); background: linear-gradient(180deg, rgba(245, 217, 152, .22), rgba(0, 0, 0, .22)); }
.build.off { opacity: .38; cursor: not-allowed; }
.build .bi { grid-row: span 2; }
.build .bi svg { width: 22px; height: 22px; color: var(--gold); }
.build .bl { font-size: 13.5px; font-weight: 600; }
.build .bc { display: flex; gap: 5px; }
.cost { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; color: var(--ink-dim); }
.cost i { font-style: normal; margin-right: 3px; }
.tradebar { display: flex; gap: 8px; flex-wrap: wrap; }
.tradebar .btn { flex: 1; font-size: 13px; padding: 8px 10px; }
.ratios { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ratios small { color: var(--ink-soft); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ratio { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; padding: 2px 7px; border-radius: 8px; background: rgba(0, 0, 0, .28); border: 1px solid var(--panel-line); }

/* ---------------- Protokoll ---------------- */
.logpanel { flex: 1; min-height: 140px; display: flex; flex-direction: column; }
.log { overflow: auto; font-size: 12.6px; line-height: 1.45; flex: 1; padding-right: 4px; }
.logline { padding: 3px 8px; border-radius: 7px; color: var(--ink-dim); }
.logline:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.logline.k-turn { color: var(--ink); border-left: 2px solid var(--gold-line); margin-top: 5px; }
.logline.k-build { color: #cdeed4; }
.logline.k-trade { color: #cfe3ff; }
.logline.k-dev { color: #f0dcae; }
.logline.k-bad { color: #ffc2b3; }
.logline.k-road, .logline.k-army { color: var(--gold); }
.logline.k-win { color: #fff; background: linear-gradient(90deg, rgba(234, 200, 119, .35), transparent); font-weight: 700; }
.logline.k-gain { color: #bfe6c8; }

/* ---------------- Dialoge ---------------- */
.modal-root {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px;
  background: rgba(3, 14, 22, .62); backdrop-filter: blur(6px);
  animation: fade .18s ease both;
}
@keyframes fade { from { opacity: 0; } }
.modal-box {
  width: min(460px, 100%); max-height: 88dvh; overflow: auto;
  padding: 22px 24px 24px; border-radius: 20px;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(13, 44, 65, .97), rgba(6, 24, 37, .98));
  box-shadow: var(--shadow);
  animation: rise .3s cubic-bezier(.2, .8, .25, 1) both;
}
.modal-box.wide { width: min(720px, 100%); }
.modal-box h3 { font-size: 21px; margin-bottom: 14px; }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.muted { color: var(--ink-soft); font-size: 13px; margin: 0; }
.small { font-size: 11.5px; }
.sub { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-top: 4px; }
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.pickres {
  display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--panel-line); background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(0, 0, 0, .22));
  transition: transform .12s, filter .15s, border-color .15s;
}
.pickres svg { width: 19px; height: 19px; }
.pickres span { font-size: 13px; }
.pickres b { margin-left: auto; font-size: 13px; color: var(--gold); }
.pickres:hover:not(.off) { transform: translateY(-1px); filter: brightness(1.15); }
.pickres.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line); }
.pickres.off { opacity: .34; cursor: not-allowed; }
.pickres .dot { width: 14px; height: 14px; border-radius: 5px; }
.amount { display: flex; align-items: center; gap: 6px; }
.amount small { color: var(--ink-soft); font-size: 11.5px; margin-right: 4px; }
.amt { width: 32px; height: 30px; border-radius: 9px; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, .07); cursor: pointer; }
.amt.sel { background: linear-gradient(180deg, #f0d391, #c99a46); color: #2a1d08; font-weight: 700; }
.amt:disabled { opacity: .3; cursor: not-allowed; }
.steppers { display: flex; flex-direction: column; gap: 7px; }
.stepline { display: grid; grid-template-columns: 22px 1fr auto 34px auto auto; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 11px; background: rgba(0, 0, 0, .22); border: 1px solid var(--panel-line); }
.stepline .res { width: 20px; height: 20px; }
.stepline .name { font-size: 13.5px; }
.step { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, .08); cursor: pointer; }
.step:disabled { opacity: .28; cursor: not-allowed; }
.stepline .cnt { text-align: center; font-size: 15px; min-width: 20px; }
.victims { display: flex; flex-direction: column; gap: 8px; }
.victim { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--panel-line); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 30%, transparent), rgba(0, 0, 0, .2)); }
.victim:hover { filter: brightness(1.15); }
.victim .dot { width: 14px; height: 14px; border-radius: 5px; }
.victim span { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.picked { display: flex; gap: 5px; font-size: 22px; }
.btnrow { display: flex; gap: 10px; margin-top: 6px; }
.btnrow .btn { flex: 1; }
.offer { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 17px; padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--gold-line); }
.offer span { color: var(--ink-soft); font-size: 13px; }
.offer .res { width: 26px; height: 26px; }
.score { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.score th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); padding-bottom: 8px; }
.score td { padding: 8px 6px; border-top: 1px solid rgba(255, 255, 255, .08); }
.score td:first-child { display: flex; align-items: center; gap: 8px; }
.score .dot { width: 12px; height: 12px; border-radius: 4px; }
.score tr.win td { color: var(--gold); font-weight: 650; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
@media (max-width: 640px) { .rules { grid-template-columns: 1fr; } }
.rules h4 { color: var(--gold); font-size: 14px; margin-bottom: 5px; }
.rules p, .rules ol { margin: 0; font-size: 13.2px; color: var(--ink-dim); }
.rules ol { padding-left: 18px; }
.rules table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rules td { padding: 5px 6px; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---------------- Schmal ---------------- */
.top-actions .btn { white-space: nowrap; }
@media (max-width: 1000px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  .turninfo { order: 3; flex-basis: 100%; }
  .dicebox { min-width: 0; }
  .brand b { font-size: 17px; }
}
@media (max-width: 1120px) {
  body { overflow: auto; }
  .app { height: auto; }
  .layout { grid-template-columns: 1fr; }
  .col { overflow: visible; }
  .board-wrap { height: min(72dvh, 640px); }
  .col.left { order: 2; }
  .board-wrap { order: 1; }
  .col.right { order: 3; }
  .logpanel { min-height: 120px; max-height: 260px; }
}