/* Hub palette so this reads as a sibling of the other game sites. */
:root {
  --bg: #0f1117; --bg-soft: #161923; --card: #1a1e2b; --card-hover: #212636;
  --line: #2a3042; --text: #e8eaf0; --muted: #969db4;
  --accent: #6ea8fe; --accent-warm: #f0b354;
  --good: #6ee7a8; --bad: #f08c8c; --mid: #f0d36e;
  --radius: 12px; --head: 48px; --tabh: 58px;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); overflow: hidden;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, input, select { font: inherit; color: inherit; }
input, select { font-size: 16px; }
button { cursor: pointer; }
#app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--head) 1fr auto; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 17px; letter-spacing: .02em; }
.brand svg { width: 24px; height: 24px; }
.ver { margin-left: auto; color: var(--muted); font-size: 11px; }
.tabs-top { display: none; gap: 4px; }
.tabs-top button { background: none; border: 0; padding: 8px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; }
.tabs-top button[aria-current="page"] { color: var(--text); background: var(--card); }

/* ---------- bottom tabs (phone) ---------- */
.tabs-bottom { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--bg-soft); padding-bottom: env(safe-area-inset-bottom); }
.tabs-bottom button { background: none; border: 0; height: var(--tabh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 600; transition: color .15s; }
.tabs-bottom button svg { width: 22px; height: 22px; }
.tabs-bottom button[aria-current="page"] { color: var(--accent-warm); }
.tabs-bottom button:active { transform: scale(.96); }

/* ---------- main: the table top (wood), the board in the middle ---------- */
main { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.map-col { position: relative; flex: none; padding: 7px 8px 9px; }
/* the board: a printed, framed board lying on the table, at the real board's landscape shape */
.map-wrap { position: relative; width: 100%; aspect-ratio: 1000 / 560; max-height: calc(100dvh - var(--head) - var(--tabh) - 110px); margin: 0 auto; overflow: hidden; background: #a3c4cf; border-radius: 3px;
  box-shadow: 0 0 0 1.5px #d9c48f, 0 0 0 5px #1f3346, 0 0 0 6px #0c151e, 0 8px 18px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4); }
body.at-table .map-wrap { max-height: calc(100dvh - var(--head) - var(--tabh) - 110px - var(--seats-h) - var(--mine-h)); }
#map { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; touch-action: none; }
.zoom-bar { position: absolute; left: 13px; bottom: 14px; display: grid; grid-template-columns: 34px 34px; grid-template-areas: "in fit" "out ."; gap: 5px; pointer-events: none; }
.zoom-bar .zoom { pointer-events: auto; }
#zoomIn { grid-area: in; } #zoomOut { grid-area: out; } #fitBtn { grid-area: fit; }
/* small walnut-and-brass knobs rather than app buttons */
.zoom { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #a8864a; background: linear-gradient(#4b3423, #2a1b10); color: #f1dfb4; display: grid; place-items: center; padding: 0; opacity: .88; box-shadow: inset 0 1px 0 rgba(255,235,190,.18), 0 2px 4px rgba(0,0,0,.5); }
.zoom svg { width: 17px; height: 17px; }
.zoom.fit { color: #bfa77a; opacity: .5; transition: color .2s, border-color .2s, opacity .2s; }
.zoom.fit.lit { color: #ffd98a; border-color: #e0b24f; opacity: .95; }
.panel-col { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 14px; scrollbar-width: thin; }
/* on the phone the helpers slide under your hand: fade the last few px so it reads as "more below", not cut off */
body.at-table .panel-col { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); }
@media (min-width: 900px) { body.at-table .panel-col { -webkit-mask-image: none; mask-image: none; } }
/* the empty discard spot: a faint card-shaped shadow on the wood, not a dashed app outline */
.decks .tbl-deck.is-empty, .decks .tbl-spot { border: 0; background: rgba(0,0,0,.16); box-shadow: inset 0 0 6px rgba(0,0,0,.25); }

@media (min-width: 900px) {
  :root { --head: 56px; }
  #app { grid-template-rows: var(--head) 1fr; }
  .tabs-top { display: flex; }
  .tabs-bottom { display: none; }
  /* the table: others across the far side, the board in the middle, you at the near edge; helpers in a slim side panel */
  main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "seats panel" "board panel" "mine panel"; padding: 8px 12px 0; column-gap: 14px; }
  .seats { grid-area: seats; }
  .map-col { grid-area: board; min-width: 0; min-height: 0; padding: 7px 6px; container-type: size; display: grid; place-items: center; }
  /* the board keeps its real shape: as big as fits the space, never stretched */
  .map-wrap, body.at-table .map-wrap { width: min(100cqw, 100cqh * 1000 / 560); height: auto; max-height: none; border-radius: 4px; }
  .mine { grid-area: mine; }
  .panel-col { grid-area: panel; max-height: 100%; padding: 6px 4px 14px; align-self: stretch; }
  /* zoom buttons sit in the board's own bottom-left corner (the board is centred in its space) */
  .zoom-bar { left: calc(50% - min(100cqw, 100cqh * 1000 / 560) / 2 + 8px); bottom: calc(50% - min(100cqw, 100cqh * 1000 / 560) * .28 + 8px); }
}

/* ---------- map ---------- */
/* the printed board: pale sea, continents in their own colours, dark printed borders */
#map .links line { stroke: #3e5868; stroke-width: 1.3; stroke-dasharray: 4 4; opacity: .7; }
#map .terr { stroke-width: .6; stroke: rgba(40,30,15,.35); cursor: pointer; transition: fill .35s ease, opacity .2s; fill-opacity: .93; }
#map .terr:hover { fill-opacity: 1; }
#map .terr.sel { fill-opacity: 1; }
#map .terr.dim { opacity: .42; }
#map .terr.tgt { fill-opacity: 1; animation: tgt 1.4s ease-in-out infinite; }
@keyframes tgt { 50% { fill-opacity: .55; } }
#map .inner path { stroke: #3a2c1c; stroke-width: 1.1; stroke-opacity: .85; fill: none; pointer-events: none; stroke-linejoin: round; }
#map .coast path { fill: none; stroke-width: 1.2; stroke-opacity: .95; pointer-events: none; transition: stroke-opacity .3s; stroke-linejoin: round; }
#map .hits path { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
#map .bgland { fill: #dcd2b9; stroke: #9c9077; stroke-width: .7; pointer-events: none; }
#map .contlab text { font: 800 13px Georgia, "Times New Roman", serif; text-anchor: middle; }
#map .contlab { pointer-events: none; }
#map .badge { cursor: pointer; }
/* armies: a glossy plastic piece in the owner's colour */
#map .badge circle.face { stroke: rgba(0,0,0,.55); stroke-width: 1.4; transition: fill .35s ease; }
#map .badge circle.shine { pointer-events: none; }
#map .badge circle.hit { fill: transparent; stroke: none; pointer-events: all; }
#map .badge text { font: 800 15px system-ui, sans-serif; text-anchor: middle; fill: #fff; pointer-events: none; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 1.6px; }
#map .badge text.n3 { font-size: 11.5px; letter-spacing: -.04em; }
#map .badge.dark text { fill: #15171d; stroke: rgba(255,255,255,.35); }
#map .badge.sel circle.face { stroke: #fff; stroke-width: 3; }
#map .badge.cap circle.face { stroke: #f7d774; stroke-width: 3.2; stroke-dasharray: 3 2; }
#map .badge.hidden { opacity: 0; }
#map .badge circle.pop { animation: pop .35s ease-out; }
@keyframes pop { 40% { r: 16px; } }
#map .names text { font: 700 8.5px system-ui, sans-serif; fill: #2a2015; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(250,244,228,.85); stroke-width: 2.2px; opacity: 0; transition: opacity .2s; }
#map.show-names .names text { opacity: 1; }
@media (min-width: 900px) { #map .names text { font-size: 10.5px; } }
#map .tag rect { stroke: rgba(255,255,255,.25); stroke-width: 1; }
#map .tag text { font: 750 11.5px system-ui, sans-serif; text-anchor: middle; fill: #0f1117; font-variant-numeric: tabular-nums; }
#map .tags { pointer-events: none; }
#map .arrow { stroke: #1b1b1b; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; opacity: .9; animation: march .6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -8; } }

/* ---------- panel building blocks ---------- */
.row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.cap { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.h { font-weight: 750; font-size: 17px; line-height: 1.2; }
.big { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.sep { height: 1px; background: var(--line); margin: 10px 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 14px; font-weight: 650; min-height: 40px; transition: background .12s, border-color .12s, transform .06s; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--card-hover); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0d1424; }
.btn.warm { background: var(--accent-warm); border-color: var(--accent-warm); color: #1d1405; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 40px; padding: 5px 12px; font-size: 13.5px; border-radius: 9px; }
.btn.block { width: 100%; }
/* small "?" dot; the invisible ring around it makes a finger-sized tap area without moving anything */
.q { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 700; background: none; padding: 0; vertical-align: 1px; margin-left: 4px; }
.q::after { content: ''; position: absolute; inset: -11px; }
.seg { display: flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 7px; padding: 6px 6px; min-height: 34px; font-size: 13.5px; font-weight: 650; color: var(--muted); min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: background .15s, color .15s; }
.seg button[aria-pressed="true"] { background: var(--card-hover); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 3px rgba(0,0,0,.35); }
.seg button:disabled { opacity: .35; }
#nPl button:first-child { flex: 1.9; }
.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stepper button { width: 40px; height: 40px; border: 0; background: var(--card); font-size: 18px; font-weight: 700; }
.stepper button:active { background: var(--card-hover); }
.stepper output { min-width: 42px; text-align: center; font-weight: 750; font-variant-numeric: tabular-nums; }
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 13px; transition: background .15s; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.set-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row label { flex: 1; min-width: 0; }
.set-row label.switch { flex: none; }
.set-row .seg { flex: 0 1 auto; }
.set-row .seg button { padding: 6px 10px; }
/* 16px: iPhone zooms the page on smaller fields. Own arrow so Safari doesn't draw its grey box. */
select { -webkit-appearance: none; appearance: none; background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23969db4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 8px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 30px 6px 10px; font-size: 16px; min-height: 40px; }

/* ---------- seats across the table (other players) ---------- */
:root { --seats-h: 0px; --mine-h: 0px; }
body.at-table { --seats-h: 46px; --mine-h: 78px; }
.seats { flex: none; height: var(--seats-h); display: flex; gap: 6px; justify-content: space-around; padding: 5px 8px 0; overflow-x: auto; scrollbar-width: none; }
.seats::-webkit-scrollbar { display: none; }
.opp { flex: 1 1 0; min-width: 64px; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: opacity .3s; }
.opp .tbl-plate, .me .tbl-plate { display: flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 17px; padding: 1px 7px; max-width: 100%; transition: border-color .3s, box-shadow .3s; }
.opp .tbl-plate i, .me .tbl-plate i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.opp.turn .tbl-plate, .me.turn .tbl-plate { border-color: var(--pc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 55%, transparent), 0 2px 4px rgba(0,0,0,.4); }
.opp.out { opacity: .38; }
.tbl-plate .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* five across a phone: tighter name plates so the names fit */
@media (max-width: 899px) { .seats:has(> .opp:nth-child(5)) .opp .tbl-plate { font-size: 10.5px; padding: 1px 4px; gap: 3px; } .seats:has(> .opp:nth-child(5)) .opp { min-width: 58px; } }
@media (max-width: 359px) { .seats { gap: 3px; padding-left: 4px; padding-right: 4px; } .seats:has(> .opp:nth-child(5)) .opp { min-width: 0; } .seats:has(> .opp:nth-child(5)) .opp .tbl-plate { font-size: 9.5px; letter-spacing: -.02em; padding: 1px 3px; gap: 2px; } .seats:has(> .opp:nth-child(5)) .opp .tbl-plate i { width: 6px; height: 6px; } .seats:has(> .opp:nth-child(5)) .seat-row { font-size: 8.5px; gap: 2px; } }
.seat-row { display: flex; align-items: center; gap: 4px; font-size: 10px; line-height: 1; color: #efe6d2; text-shadow: 0 1px 1px rgba(0,0,0,.6); white-space: nowrap; }
.backs { display: inline-flex; align-items: center; --card-w: 11px; }
.backs .tbl-card { margin-left: -6px; box-shadow: 0 1px 2px rgba(0,0,0,.5); } .backs .tbl-card:first-child { margin-left: 0; }
.backs b { margin-left: 3px; font-size: 10.5px; }
.st { font-variant-numeric: tabular-nums; }
/* crowded seats (app.js fitSeats): one card back with the count, then smaller print */
.seats.tight .backs .tbl-card:nth-child(n+2) { display: none; }
.seats.tighter .seat-row { font-size: 8.5px; gap: 2px; letter-spacing: -.02em; } .seats.tighter .backs b { font-size: 9px; margin-left: 2px; }

/* ---------- your place at the near edge ---------- */
.mine { flex: none; height: var(--mine-h); display: flex; align-items: flex-end; gap: 8px; padding: 0 10px 6px; position: relative; z-index: 2; }
.me { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 4px; align-self: stretch; justify-content: center; font-size: 10.5px; color: #efe6d2; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.hand { flex: 1; min-width: 0; --card-w: 46px; }
.hand.pick .rk-card { cursor: pointer; }
.decks { flex: none; display: flex; gap: 10px; align-items: flex-end; padding-bottom: 6px; --card-w: 32px; }
#deck .tbl-badge { font-size: 10px; line-height: 14px; min-width: 18px; right: -7px; bottom: -5px; }
/* unplaced armies: real pieces in your colour, with the count */
.tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1px; max-width: 74px; }
.rk-piece { width: 19px; height: 17px; filter: drop-shadow(0 0 .6px rgba(0,0,0,.95)) drop-shadow(1px 2px 1.5px rgba(0,0,0,.55)); }
.tray b { font-size: 13px; margin-left: 3px; color: #fff4d8; }

/* ---------- Risk territory cards (name, the territory's shape, the troop symbol) ---------- */
.rk-card { --card-paper: #f6efdc; --card-edge: rgba(60,40,10,.45); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--card-w) * .07) calc(var(--card-w) * .06); color: #2a2015; text-align: center; user-select: none; -webkit-user-select: none;
  background-image: linear-gradient(var(--card-paper), var(--card-paper)); box-shadow: inset 0 0 0 calc(var(--card-w) * .045) #f6efdc, inset 0 0 0 calc(var(--card-w) * .06) #8b6a3e, 0 1px 1px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.22); }
.rk-card.is-up { box-shadow: inset 0 0 0 calc(var(--card-w) * .045) #f6efdc, inset 0 0 0 calc(var(--card-w) * .06) #8b6a3e, 0 12px 16px rgba(0,0,0,.5), 0 3px 5px rgba(0,0,0,.3); }
.rk-nm { font: 800 calc(var(--card-w) * .145)/1.02 system-ui, sans-serif; letter-spacing: -.01em; max-height: 2.1em; overflow: hidden; padding-top: calc(var(--card-w) * .04); word-break: break-word; }
.rk-nm.long { font-size: calc(var(--card-w) * .118); letter-spacing: -.03em; }
.rk-shape { width: 74%; flex: 1; min-height: 0; margin: 2% 0; }
.rk-shape path { stroke-width: 1px; }
.rk-sym { width: 52%; flex: none; aspect-ratio: 34 / 30; color: #2a2015; margin-bottom: calc(var(--card-w) * .05); }
.rk-card.own .rk-nm { color: #1e6b45; }
.rk-card.own::before { content: ''; position: absolute; right: 8%; top: 7%; width: calc(var(--card-w) * .1); height: calc(var(--card-w) * .1); border-radius: 50%; background: #2f9a64; }
.rk-card.wild .rk-syms { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4%; width: 60%; }
.rk-card.wild .rk-syms svg { width: 100%; aspect-ratio: 34 / 30; }
.rk-lab { display: none; }
.tbl-back { --back: #7a2620; --ink: rgba(255, 226, 160, .28); }
.rk-turn { animation: rkturn .42s cubic-bezier(.3,.7,.3,1); }
@keyframes rkturn { 0% { transform: translate(var(--x, 0), calc(var(--y, 0px) - var(--up, 0px))) rotate(var(--r, 0deg)) perspective(400px) rotateY(90deg); } 100% { transform: translate(var(--x, 0), calc(var(--y, 0px) - var(--up, 0px))) rotate(var(--r, 0deg)) perspective(400px) rotateY(0); } }
.fx-still .rk-turn { animation: none; }
.fx-fast .rk-turn { animation-duration: .23s; }

/* phase box: a dark mat on the table */
.phase { background: rgba(22,25,35,.92); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.phase .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.phase .head .h { flex: 1; }
.odds { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.meter { height: 8px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; transition: width .3s ease, background .3s; }
/* real dice: red for the attack, ivory for the defence */
.dice { display: flex; gap: 6px; align-items: center; --die-size: 26px; }
.dice .tbl-die.lost { opacity: .4; }
.dice .vs { color: var(--muted); font-size: 12px; margin: 0 2px; }

@media (min-width: 900px) {
  body.at-table { --seats-h: 62px; --mine-h: 132px; }
  .seats { padding: 4px 0 0; gap: 14px; justify-content: space-around; }
  .opp { flex: 0 1 150px; gap: 5px; }
  .opp .tbl-plate, .me .tbl-plate { font-size: 13px; line-height: 20px; padding: 1px 10px; }
  .seat-row { font-size: 12px; gap: 8px; }
  .backs { --card-w: 16px; } .backs .tbl-card { margin-left: -9px; }
  .mine { padding: 0 6px 10px; gap: 18px; }
  .me { width: 110px; font-size: 12px; }
  .tray { max-width: 110px; } .rk-piece { width: 26px; height: 23px; } .tray b { font-size: 15px; }
  .hand { --card-w: 76px; }
  .decks { --card-w: 54px; gap: 16px; padding-bottom: 8px; }
  .dice { --die-size: 30px; }
}

/* tables */
table.t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.t th { text-align: left; font-weight: 650; color: var(--muted); font-size: 11.5px; padding: 4px 4px; border-bottom: 1px solid var(--line); }
table.t td { padding: 5px 4px; border-bottom: 1px solid rgba(42,48,66,.6); }
table.t td.r, table.t th.r { text-align: right; }
/* laptop side panel: table rows stay on one line */
@media (min-width: 900px) { .panel-col table.t { font-size: 12.5px; } .panel-col table.t td { white-space: nowrap; } .panel-col table.t th, .panel-col table.t td { padding-left: 3px; padding-right: 3px; } }
.pill { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 12px; font-weight: 700; color: #0f1117; }

/* log */
/* older lines fade out at the top instead of being sliced in half */
.log { font-size: 12.5px; color: var(--muted); max-height: 92px; overflow-y: auto; margin-top: 8px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px); }
.log div { padding: 1px 0; }
.log div:last-child { color: var(--text); }

/* sheet + toast */
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto; background: var(--bg-soft); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); z-index: 41; animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
@media (min-width: 900px) { .sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 480px; border-radius: 16px; border: 1px solid var(--line); animation: none; } }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + 14px); transform: translateX(-50%); background: var(--card-hover); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px; font-size: 14px; z-index: 50; max-width: 90vw; }
@media (min-width: 900px) { .toast { bottom: 24px; } }
.cover { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.seat { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--line); }
.seat { grid-template-columns: 14px 1fr minmax(0, 210px); }
.seat select { width: 100%; padding: 4px 30px 4px 10px; text-overflow: ellipsis; }
.seat i { width: 12px; height: 12px; border-radius: 50%; }
.inp { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 16px; min-width: 0; }
.code { font-size: 34px; font-weight: 800; letter-spacing: .18em; color: var(--accent-warm); line-height: 1.1; margin: 2px 0 4px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.dot.on { background: var(--good); }
.chart { width: 100%; height: 90px; display: block; }
@media (prefers-reduced-motion: reduce) { #map .terr.tgt, #map .arrow, .die.roll, .sheet, #map .badge circle.pop { animation: none; } }
/* sound & effects: Animations off = none; Fast = quicker */
.fx-still #map .terr.tgt, .fx-still #map .arrow, .fx-still .die.roll, .fx-still .sheet, .fx-still #map .badge circle.pop { animation: none; }
.fx-still #map .terr, .fx-still #map .badge circle.face { transition: none; }
.fx-fast .die.roll, .fx-fast #map .badge circle.pop { animation-duration: .19s; }
#map .fx-flood { pointer-events: none; fill-opacity: .82; }
.fx-set .fx-row { border-top: 0; padding: 9px 0; }
.fx-set .set-row:last-child { border-bottom: 0; }
.fx-set .fx-lab label { flex: none; }
.fx-set .switch input:checked + span { background: var(--accent); }
.fx-set .seg button { font-size: 13.5px; padding: 6px 10px; min-height: 34px; }
/* a turned phone: board on the left between the seats and your hand, helpers in a column on the right */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  /* the tabs move up into the header so the board gets the bar's height */
  #app { grid-template-rows: var(--head) 1fr; }
  .tabs-top { display: flex; } .tabs-bottom { display: none; }
  .tabs-top button { padding: 8px 11px; }
  .toast { bottom: 14px; }
  main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "seats panel" "board panel" "mine panel"; }
  .seats { grid-area: seats; }
  .map-col { grid-area: board; min-width: 0; min-height: 0; padding: 7px; container-type: size; display: grid; place-items: center; }
  .map-wrap, body.at-table .map-wrap { width: min(100cqw, 100cqh * 1000 / 560); height: auto; max-height: none; }
  .mine { grid-area: mine; }
  .panel-col { grid-area: panel; padding: 8px 8px 10px; }
  .phase .head { flex-wrap: wrap; row-gap: 6px; }
  /* zoom buttons in the board's own bottom-left corner (empty Pacific), as on the upright phone */
  .zoom-bar { left: calc(50% - min(100cqw, 100cqh * 1000 / 560) / 2 + 5px); bottom: calc(50% - min(100cqw, 100cqh * 1000 / 560) * .28 + 5px); }
  body.at-table { --seats-h: 42px; --mine-h: 66px; }
  .hand { --card-w: 38px; } .decks { --card-w: 27px; }
}
/* a small, short phone (iPhone SE size): a tighter table and a slightly smaller board, so the attack buttons stay in view */
@media (max-width: 899px) and (max-height: 600px) and (orientation: portrait) {
  body.at-table { --seats-h: 40px; --mine-h: 62px; }
  body.at-table .map-wrap { max-height: calc(100dvh - var(--head) - var(--tabh) - 186px - var(--seats-h) - var(--mine-h)); }
  .hand { --card-w: 36px; } .decks { --card-w: 25px; } .me { width: 62px; }
  .seats { padding-top: 3px; } .seat-row { font-size: 9.5px; }
  .phase { padding: 7px 10px; } .phase .head { margin-bottom: 3px; }
  /* the attack box: tighter lines so Roll / Blitz clear your hand */
  .phase .small { line-height: 1.25; } .phase .odds { row-gap: 0; } .phase .row.small { margin-bottom: 3px !important; }
  body.at-table .panel-col { padding-top: 6px; -webkit-mask-image: none; mask-image: none; }
}