/* Age of Steam – "display board" theme. Parchment panels, red numbered section bands,
   wooden disks and cube grids modelled on the physical components. */
:root {
  --paper: #f3eadb; --paper-2: #e9dec6; --paper-3: #dccfb2; --paper-edge: #b79a6e;
  --ink: #2d2117; --ink-2: #5b4a36; --ink-3: #8a7558;
  --red: #b23a2c; --red-2: #8d2a20; --gold: #d8a93a; --gold-2: #b98b27;
  --teal: #1f7d72; --teal-2: #2a9d8f; --green: #5a9a4b; --ok: #3f8f49; --warn: #c7731d;
  --dark-board: #4b3a2b; --dark-board-2: #3d2f22;
  --table: #3b2817;
  --font-display: 'Josefin Sans', 'Trebuchet MS', sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Crimson Pro', Georgia, serif;
  --shadow: 0 2px 6px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18);
  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: flex; flex-direction: column; background: var(--paper-2); color: var(--ink); font-family: var(--font-body); font-size: 14.5px; line-height: 1.35; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.muted { color: var(--ink-3); }
a { color: var(--red); }
h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; margin: 0; font-weight: 700; }

/* ---------- controls ---------- */
button { font: 600 13px var(--font-body); color: var(--ink); background: linear-gradient(#fbf6ea, #ecdfc6); border: 1.5px solid var(--paper-edge); border-radius: 5px; padding: 6px 11px; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.18); text-transform: uppercase; letter-spacing: .04em; }
button:hover:not(:disabled) { border-color: var(--ink-2); background: linear-gradient(#fffaf0, #f1e6cf); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: linear-gradient(#c8463a, var(--red)); border-color: var(--red-2); color: #fff6e6; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
button.primary:hover:not(:disabled) { background: linear-gradient(#d04d40, #a8352a); }
button.danger { background: linear-gradient(#8a8a8a, #5f5f5f); border-color: #444; color: #fff; }
button.small { padding: 3px 8px; font-size: 11.5px; }
button.on, button.small.on { background: linear-gradient(#2fa797, var(--teal)); border-color: #155f57; color: #fff; }
input, select { font: 14px var(--font-body); color: var(--ink); background: #fffaf0; border: 1.5px solid var(--paper-edge); border-radius: 5px; padding: 6px 8px; }
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
input[type=number] { width: 72px; }
label { cursor: pointer; }
code.link { background: #fffaf0; border: 1px dashed var(--paper-edge); padding: 3px 8px; border-radius: 4px; user-select: all; font-size: 12.5px; }

/* ---------- top bar ---------- */
#topbar { display: flex; align-items: center; gap: 18px; padding: 0 14px; height: 44px; background: linear-gradient(#2a1d13, #1a120b); color: #f3eadb; border-bottom: 3px solid var(--gold-2); box-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 5; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; color: #f3eadb; }
.brand .loco { width: 28px; height: 20px; }
#topinfo { font-size: 14px; color: #d9c9a8; display: flex; gap: 10px; align-items: center; }
#topinfo b { color: #fff; font-weight: 600; }
#topinfo a { color: var(--gold); text-decoration: none; font-weight: 600; }
#topuser { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
#topuser button { padding: 3px 9px; font-size: 11px; background: linear-gradient(#4a3826, #33251a); color: #f3eadb; border-color: #6b5338; }
.conn { width: 8px; height: 8px; border-radius: 50%; background: #777; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.conn.on { background: #63d66a; box-shadow: 0 0 6px #63d66a; }

#main { flex: 1; min-height: 0; display: flex; }
.view { flex: 1; min-height: 0; min-width: 0; }

/* ---------- board panels (the "display boards") ---------- */
.panel { background: var(--paper); background-image: var(--paper-noise); border: 2px solid var(--paper-edge); border-radius: 6px; box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(0,0,0,.2); display: flex; flex-direction: column; min-height: 0; }
.panel > .band { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: linear-gradient(#c04535, var(--red)); color: #fbf1dc; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid var(--red-2); border-radius: 3px 3px 0 0; }
.panel > .band.gold { background: linear-gradient(#e4b64a, var(--gold)); color: #3a2a10; border-color: var(--gold-2); }
.panel > .band.brown { background: linear-gradient(#5c4834, var(--dark-board)); border-color: #2d2117; }
.panel > .band .num { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; background: #fbf1dc; color: var(--red); border-radius: 50%; font-size: 11px; }
.panel > .band .spacer { flex: 1; }
.panel > .band small { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; opacity: .9; }
.panel > .body { padding: 8px 10px; min-height: 0; }
.subhead { font-family: var(--font-accent); font-style: italic; font-size: 15px; color: var(--ink-2); }

/* wooden disk */
.disk { --c: #888; display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: middle; flex: none;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), rgba(255,255,255,0) 48%), var(--c);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.45); }
.disk.lg { width: 22px; height: 22px; }
.cube { --c: #888; display: inline-block; width: 14px; height: 14px; border-radius: 2px; vertical-align: middle; flex: none; background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,0) 50%), var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.4); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.chip::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 0 25%, #c43a2d 27% 100%); box-shadow: 0 0 0 1.5px #7a221b inset; }

/* ---------- lobby ---------- */
#lobby { overflow: auto; padding: 26px 32px 40px; background: url(img/lobby-bg.jpg) right center / cover no-repeat fixed, var(--paper-2); }
#lobby .wrap { max-width: 740px; margin: 0; display: grid; gap: 14px; }
#lobby .panel { box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(30,20,10,.28); }
#lobby .panel .body { padding: 12px 14px; }
.hero { padding: 6px 0 12px; }
.hero h1 { font-size: 40px; letter-spacing: .14em; color: var(--ink); text-shadow: 0 1px 0 #fff8ea, 0 2px 10px rgba(255,250,235,.8); line-height: 1; }
.hero h1 span { color: var(--red); }
.hero .sub { font-family: var(--font-accent); font-style: italic; font-size: 19px; color: var(--ink-2); margin-top: 6px; text-shadow: 0 1px 6px rgba(255,250,235,.9); }
.hero .rule { width: 180px; height: 3px; background: linear-gradient(90deg, var(--red), var(--gold)); margin-top: 10px; border-radius: 2px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gamelist { display: grid; gap: 8px; }
.gameitem { display: flex; gap: 12px; align-items: center; background: #fffaf0; border: 1px solid var(--paper-edge); border-radius: 6px; padding: 10px 12px; }
.gameitem .title { font-weight: 700; font-size: 15px; }
.badge { display: inline-block; font-family: var(--font-display); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; background: var(--paper-3); color: var(--ink-2); vertical-align: middle; }
.badge.playing { background: var(--teal); color: #fff; }
.badge.finished { background: #777; color: #fff; }
.badge.lobby { background: var(--gold); color: #3a2a10; }
.seat { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #fffaf0; border: 1px solid var(--paper-edge); border-radius: 6px; margin-bottom: 6px; }
.colorpick { display: flex; gap: 5px; }
.colorpick .disk { width: 18px; height: 18px; cursor: pointer; outline: 2px solid transparent; outline-offset: 1px; }
.colorpick .disk.sel { outline-color: var(--ink); }
.colorpick .disk.taken { opacity: .25; cursor: not-allowed; }
.howto { margin: 0; padding-left: 18px; line-height: 1.55; }

/* ---------- game layout ---------- */
#game { display: flex; min-height: 0; }
#left { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
#boardwrap { flex: 1; position: relative; min-height: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.08), rgba(0,0,0,.25)), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 23px), linear-gradient(#4a3320, #35241a); }
#board { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#board.dragging { cursor: grabbing; }
#boardtools { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; align-items: center; background: rgba(243,234,219,.92); border: 1.5px solid var(--paper-edge); padding: 5px; border-radius: 6px; box-shadow: var(--shadow); }
#boardtools button { width: 30px; height: 30px; padding: 0; font-size: 15px; }
#boardtools label { font-size: 12px; display: flex; gap: 4px; align-items: center; padding: 0 6px; color: var(--ink-2); }
#boardhint { position: absolute; bottom: 10px; left: 10px; right: 10px; pointer-events: none; display: flex; gap: 8px; flex-wrap: wrap; }
#boardhint span { display: inline-block; background: rgba(45,33,23,.88); color: #f3eadb; padding: 6px 12px; border-radius: 5px; font-size: 13px; border: 1px solid var(--gold-2); }
#boardhint span:empty { display: none; }

/* bottom tray: goods board + tracks */
#tray { flex: none; background: var(--paper-2); border-top: 3px solid var(--paper-edge); box-shadow: 0 -3px 10px rgba(0,0,0,.25); position: relative; z-index: 2; }
#trayhandle { position: absolute; top: -26px; right: 12px; }
#trayhandle button { padding: 2px 10px; font-size: 11px; border-radius: 5px 5px 0 0; border-bottom: none; }
#traybody { display: flex; gap: 8px; padding: 8px; flex-wrap: wrap; align-items: stretch; max-height: 420px; overflow: auto; }
#tray.collapsed #traybody { display: none; }
#traybody .panel { flex: none; }
.goods-panel .body { display: flex; gap: 8px; padding: 6px 8px 8px; }
.goods-half { border-radius: 5px; padding: 4px 4px 5px; display: flex; gap: 2px; align-items: flex-start; }
.goods-half.light { background: #fbf5e7; border: 1px solid #cdb995; color: var(--ink); }
.goods-half.dark { background: linear-gradient(var(--dark-board), var(--dark-board-2)); border: 1px solid #2b2016; color: #f1e4cb; }
.goods-col { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 22px; }
.goods-col.letter { margin-left: 2px; }
.goods-col .num { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1; height: 18px; display: flex; align-items: center; }
.nchex.sm { width: 20px; height: 20px; font-size: 11px; box-shadow: inset 0 0 0 2px #5a3b1e; }
.nchex.sm.placed { box-shadow: inset 0 0 0 2px #5a3b1e, 0 0 0 1.5px var(--ok); }
.goods-col .city { font-size: 8px; line-height: 1; height: 9px; white-space: nowrap; overflow: hidden; max-width: 26px; text-overflow: ellipsis; opacity: .85; letter-spacing: -.02em; }
.goods-col .city.ok { color: var(--ok); font-weight: 700; }
.goods-half.dark .goods-col .city.ok { color: #8be08f; }
.gbox { width: 20px; height: 20px; border-radius: 3px; border: 1px dashed rgba(0,0,0,.35); background: rgba(255,255,255,.35); position: relative; }
.goods-half.dark .gbox { border-color: rgba(255,255,255,.35); background: rgba(0,0,0,.2); }
.gbox.cube, .goods-half.dark .gbox.cube { border-style: solid; border-color: rgba(0,0,0,.45); background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0) 50%), var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 1px rgba(0,0,0,.4); }
.gbox.target { cursor: pointer; border: 2px solid var(--gold); box-shadow: 0 0 0 2px rgba(216,169,58,.35); }
.gbox.target:hover { background: rgba(216,169,58,.35); }
.gbox.chosen { border: 2px solid var(--gold); opacity: .85; }
.goods-sep { width: 1px; background: rgba(0,0,0,.15); margin: 0 2px; }
.dice { display: inline-flex; gap: 3px; align-items: center; }
.dice-side { font-size: 10px; opacity: .75; margin: 0 1px 0 4px; }
.dice-side:first-child { margin-left: 0; }
.goods-none { font-size: 10px; opacity: .7; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); margin-right: 3px; white-space: nowrap; }
.slink { margin-top: 4px; align-items: center; gap: 6px; }
.die { width: 18px; height: 18px; border-radius: 4px; background: #fffaf0; border: 1px solid #8a7558; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 2px; box-shadow: 0 1px 1px rgba(0,0,0,.35); }
.die i { width: 4px; height: 4px; border-radius: 50%; background: #2d2117; place-self: center; opacity: 0; }
.die[data-v="1"] i:nth-child(5), .die[data-v="3"] i:nth-child(5), .die[data-v="5"] i:nth-child(5) { opacity: 1; }
.die[data-v="2"] i:nth-child(1), .die[data-v="2"] i:nth-child(9), .die[data-v="3"] i:nth-child(1), .die[data-v="3"] i:nth-child(9),
.die[data-v="4"] i:nth-child(1), .die[data-v="4"] i:nth-child(3), .die[data-v="4"] i:nth-child(7), .die[data-v="4"] i:nth-child(9),
.die[data-v="5"] i:nth-child(1), .die[data-v="5"] i:nth-child(3), .die[data-v="5"] i:nth-child(7), .die[data-v="5"] i:nth-child(9),
.die[data-v="6"] i:nth-child(1), .die[data-v="6"] i:nth-child(3), .die[data-v="6"] i:nth-child(4), .die[data-v="6"] i:nth-child(6), .die[data-v="6"] i:nth-child(7), .die[data-v="6"] i:nth-child(9) { opacity: 1; }

.nc-panel .body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px 8px; padding: 8px 10px; }
.nctile { display: flex; gap: 6px; align-items: center; font-size: 11px; line-height: 1.2; }
.nchex { --c: #888; width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; background: var(--c); color: #fff; clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); box-shadow: inset 0 0 0 3px #5a3b1e; }
.nchex.lighttext { color: #2d2117; }
.nctile.placed .nchex { filter: drop-shadow(0 0 2px var(--ok)); }
.ncinfo b { text-transform: capitalize; }
.ncinfo .where { color: var(--ok); font-weight: 600; }

.tracks-panel { flex: 1 1 500px !important; min-width: 420px; max-width: 760px; }
.tracks-panel.compact { flex: 1 1 380px !important; min-width: 380px; }
.goods-panel { flex: 0 0 auto !important; }
.tracks-panel .body { padding: 4px 8px 6px; }
.tracks-panel svg { width: 100%; height: auto; display: block; }

/* ---------- right column ---------- */
#side { width: 430px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--paper-2); border-left: 3px solid var(--paper-edge); min-height: 0; overflow: hidden; }
#side.room { overflow: auto; }
#side .panel.flex { flex: 1; min-height: 120px; }
#side .panel.flex > .body { flex: 1; overflow: auto; min-height: 0; }
.seq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 6px 8px 8px; }
.seq span { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase; text-align: center; padding: 3px 2px; border-radius: 3px; border: 1px solid var(--paper-edge); color: var(--ink-3); background: #fffaf0; line-height: 1.1; }
.seq span b { display: block; font-size: 10px; color: var(--ink-2); }
.seq span.cur { background: var(--red); color: #fff; border-color: var(--red-2); }
.seq span.cur b { color: #fbe3b8; }
.seq span.done { opacity: .55; }
.turntrack { display: flex; align-items: center; gap: 4px; padding: 0 10px 6px; font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.turntrack i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--paper-edge); background: #fffaf0; display: inline-block; }
.turntrack i.done { background: var(--paper-3); }
.turntrack i.cur { background: radial-gradient(circle at 35% 30%, #ff9a8e, #c43a2d 60%); border-color: #7a221b; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.turntrack i.end { border-radius: 3px; width: 16px; }
.turntrack span.lbl { font-family: var(--font-display); font-size: 9.5px; text-transform: uppercase; }

.phase-panel .body { font-size: 14px; }
.phase-panel .you { font-family: var(--font-accent); font-style: italic; font-size: 16px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.phase-panel .you b { font-style: normal; font-family: var(--font-body); color: var(--ink); }
.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.actbtn { text-align: left; padding: 6px 8px; text-transform: none; letter-spacing: 0; font-weight: 500; display: flex; gap: 8px; align-items: flex-start; }
.actbtn .ring { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-3); flex: none; display: flex; align-items: center; justify-content: center; }
.actbtn b { display: block; font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.actbtn small { color: var(--ink-3); font-size: 11.5px; line-height: 1.2; display: block; }
.actbtn.taken { opacity: .6; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--paper-edge); border-radius: 5px; background: #fffaf0; }
.stepper button { border: none; box-shadow: none; background: transparent; width: 30px; padding: 4px 0; font-size: 16px; }
.stepper b { min-width: 28px; text-align: center; font-size: 16px; }
details.help { margin-top: 8px; font-size: 13px; }
details.help summary { cursor: pointer; color: var(--red); font-family: var(--font-accent); font-style: italic; font-size: 14.5px; }
details.help .txt { margin-top: 4px; color: var(--ink-2); line-height: 1.45; }

.tileopts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; max-height: 230px; overflow: auto; }
.tileopt { background: #fffaf0; border: 2px solid var(--paper-edge); border-radius: 6px; padding: 3px; cursor: pointer; text-align: center; font-size: 11px; color: var(--ink-2); font-weight: 600; }
.tileopt:hover { border-color: var(--teal); }
.tileopt.sel { border-color: var(--red); background: #fff1e4; }
.tileopt svg { display: block; margin: 0 auto 1px; }
.route { font-size: 13px; margin-top: 6px; }

table.players { width: 100%; border-collapse: collapse; font-size: 13px; }
table.players th { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 2px 4px; font-weight: 700; border-bottom: 1px solid var(--paper-edge); }
table.players td { padding: 4px 4px; border-bottom: 1px solid #e3d6ba; vertical-align: middle; }
table.players tr.current td { background: #fff3cf; }
table.players tr.current td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
table.players tr.elim td { opacity: .45; text-decoration: line-through; }
table.players .pname { font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
table.players td.num { text-align: right; font-variant-numeric: tabular-nums; }
.actrow { display: flex; gap: 4px; padding: 6px 8px 8px; border-top: 1px solid var(--paper-edge); margin-top: 4px; }
.actrow .slot { flex: 1; text-align: center; font-family: var(--font-display); font-size: 8.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); line-height: 1.1; }
.actrow .ring { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink-3); margin: 0 auto 2px; display: flex; align-items: center; justify-content: center; background: #fffaf0; }
.actrow .ring .disk { width: 16px; height: 16px; }

.tabs { display: flex; gap: 3px; padding: 6px 8px 0; }
.tabs button { padding: 3px 9px; font-size: 11px; border-radius: 5px 5px 0 0; }
.log { font-size: 12.5px; }
.log div { padding: 2px 4px 2px 6px; border-bottom: 1px dotted #d8c9a8; }
.log div.hd { color: var(--red); font-family: var(--font-display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding-top: 6px; }
.log div.new { background: #fff3cf; }
.log .t { color: var(--ink-3); font-size: 10.5px; margin-right: 3px; }
.logfilters { display: flex; gap: 4px; align-items: center; padding: 6px 8px 4px; font-size: 11px; flex-wrap: wrap; }
.chat { font-size: 13.5px; }
.chat div { padding: 2px 4px; }
.chat b { color: var(--red); }
.chatrow { display: flex; gap: 6px; padding: 6px 8px 8px; }
.chatrow input { flex: 1; }
.rules { font-size: 13px; line-height: 1.5; }
.rules ul { margin: 4px 0 8px; padding-left: 18px; }
.rules b { font-family: var(--font-display); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--red); }

.score { width: 100%; border-collapse: collapse; font-size: 14px; }
.score td, .score th { padding: 5px 6px; border-bottom: 1px solid var(--paper-edge); text-align: right; }
.score td:first-child, .score th:first-child { text-align: left; }
.score th { font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; color: var(--ink-3); }
.score tr.winner td { color: var(--red-2); font-weight: 700; background: #fff3cf; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff6e6; padding: 10px 18px; border-radius: 6px; border: 2px solid var(--red-2); box-shadow: var(--shadow); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 20; font-weight: 600; }
#toast.show { opacity: 1; }

@media (max-width: 1450px) {
  #side { width: 400px; }
  .goods-col { width: 20px; }
  .gbox { width: 18px; height: 18px; }
  .nchex.sm { width: 18px; height: 18px; font-size: 10px; }
  .tracks-panel { flex-basis: 380px !important; min-width: 380px; }
}
@media (max-width: 1000px) {
  #lobby { padding: 18px 14px 30px; background-position: 70% center; }
  #lobby .wrap { max-width: none; }
  .hero h1 { font-size: 30px; }
  #game { flex-direction: column; overflow: auto; }
  #left { flex: none; height: 62vh; }
  #side { width: 100%; border-left: none; border-top: 3px solid var(--paper-edge); overflow: auto; }
  #side .panel.flex { min-height: 260px; }
  #traybody { height: auto; flex-wrap: wrap; }
  .tracks-panel { min-width: 0; width: 100%; }
}

table.players small.red { color: var(--red); font-weight: 700; margin-left: 2px; font-size: 10px; }

/* account modal */
#modal { position: fixed; inset: 0; background: rgba(30,20,10,.55); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 20px; }
.modalbox { width: 560px; max-width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow); }
.modalbox h4 { font-size: 11.5px; color: var(--ink-2); margin-top: 6px; }
.modalbox .body { padding: 12px 14px; }
hr.sep { border: none; border-top: 1px dashed var(--paper-edge); margin: 12px 0; }
#topuser .warn { display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); color: #3a2a10; font-weight: 800; font-size: 11px; margin-left: 2px; cursor: help; }
.panel.hint { background: #fff3cf; }
.panel.hint .body { padding: 8px 14px; font-size: 13.5px; }

/* game over overlay */
#modal.gameover { background: linear-gradient(rgba(30,20,10,.45), rgba(30,20,10,.6)), url(img/lobby-bg.jpg) center / cover no-repeat fixed; }
#modal.gameover .modalbox { width: 860px; }
.gowin { font-family: var(--font-accent); font-style: italic; font-size: 22px; color: var(--ink-2); margin: 2px 0 10px; }
.gowin b { font-style: normal; font-family: var(--font-display); color: var(--red); letter-spacing: .06em; text-transform: uppercase; font-size: 20px; }
table.score.go td { font-size: 15px; }
table.score.go td.rank { font-family: var(--font-display); color: var(--ink-3); width: 24px; }
table.score.go td.pl { text-align: left; font-weight: 700; }
table.score.go td.total { font-family: var(--font-display); font-size: 20px; }
table.score.go small { color: var(--ink-3); font-size: 11px; }
.crown { color: var(--gold-2); font-size: 18px; }
table.gostats { width: 100%; border-collapse: collapse; font-size: 13px; }
table.gostats th { font-family: var(--font-display); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--paper-edge); }
table.gostats th:first-child { text-align: left; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
table.gostats td { text-align: right; padding: 3px 6px; border-bottom: 1px solid #e3d6ba; font-variant-numeric: tabular-nums; }

/* hall of fame */
.hof { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hof h4 { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
table.score.lb td { font-size: 13.5px; padding: 3px 6px; }
table.score.lb td.rank { color: var(--ink-3); width: 20px; }
table.score.lb td.pl { text-align: left; font-weight: 600; }
.result { padding: 5px 0; border-bottom: 1px dashed var(--paper-edge); font-size: 13px; }
.result .res { display: inline-block; margin: 2px 6px 0 0; padding: 1px 6px; border-radius: 10px; background: #fff8ea; border: 1px solid var(--paper-edge); }
.result .res.win { background: #fff3cf; border-color: var(--gold-2); }
@media (max-width: 1000px) { .hof { grid-template-columns: 1fr; } }

table.players.admin td, table.players.admin th { font-size: 12.5px; }

table.players td.pos { color: var(--ok); font-weight: 600; }
table.players td.neg { color: var(--red); font-weight: 700; }
table.players .ord { display: inline-block; width: 14px; color: var(--ink-3); font-size: 11px; font-family: var(--font-display); }
.warnmark { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: 10px; margin-left: 3px; cursor: help; vertical-align: middle; }
.legend { font-size: 11.5px; color: var(--ink-3); padding: 6px 8px 0; line-height: 1.35; }
.railroad { font-size: 13px; background: #fff8ea; border: 1px solid var(--paper-edge); border-radius: 5px; padding: 6px 8px; margin: 8px 0 2px; line-height: 1.45; }
.railroad .pos { color: var(--ok); } .railroad .neg { color: var(--red); }
.undo-vote { flex: none; }
.undo-vote .body { font-size: 13.5px; }
.undo-vote ul { margin: 6px 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.undo-vote .votes { gap: 6px; margin-top: 6px; }
.undo-vote .vote { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--paper-edge); border-radius: 10px; background: #fffaf0; color: var(--ink-3); font-size: 12.5px; }
.undo-vote .vote.yes { color: var(--ok); border-color: var(--ok); font-weight: 600; }