:root {
  --gold: #e3c15a;
  --gold-dark: #9c7a2c;
  --wood: #2b2117;
  --wood-light: #4a3826;
  --stone: #1b1a17;
  --text: #ecdfbf;
  --muted: #a89c80;
  --west: #ff4d3d;
  --east: #3ddc5a;
  --red: #c0392b;
  --green: #4caf50;
  --font: Georgia, "Times New Roman", "Palatino Linotype", serif;
  --ui: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07060a; color: var(--text); font-family: var(--ui); font-size: 14px; overflow: hidden; }
button, input, select { font: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.west { color: var(--west); }
.east { color: var(--east); }
.error { color: #ff7b6b; min-height: 18px; margin-top: 8px; font-size: 13px; }

.screen { position: absolute; inset: 0; }
#screen-login, #screen-lobby, #screen-draft {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #2e2a1c 0%, #15140f 45%, #06060a 100%);
  overflow: auto;
}
.title-art {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(circle at 18% 78%, #4b3416 0, transparent 22%),
    radial-gradient(circle at 82% 22%, #1b3b4d 0, transparent 24%),
    repeating-linear-gradient(115deg, transparent 0 34px, #0002 34px 36px);
}

/* Wooden / stone frame used for all panels */
.wood {
  position: relative;
  background: linear-gradient(#3a2d1f, #22190f);
  border: 3px solid #6b5230;
  outline: 2px solid #1a120a;
  box-shadow: 0 0 0 1px #8b6d3a inset, 0 18px 60px #000c, 0 0 0 6px #120c06;
  border-radius: 4px;
  color: var(--text);
}
.wood::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid #a8843f55; border-radius: 2px;
}
h1, h2, h3 { font-family: var(--font); color: var(--gold); margin: 0; text-shadow: 0 2px 0 #000, 0 0 18px #c9a24a44; letter-spacing: .04em; }
h1 { font-size: 46px; text-align: center; }
h2 { font-size: 22px; }

.btn {
  cursor: pointer; padding: 8px 16px; color: #f2e6c4; text-shadow: 0 1px 0 #000;
  background: linear-gradient(#5b4a32, #2f2416); border: 2px solid #7d6238; border-radius: 3px;
  box-shadow: 0 0 0 1px #000 inset, 0 2px 6px #0008; font-family: var(--font); letter-spacing: .03em;
}
.btn:hover { filter: brightness(1.2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; filter: none; }
.btn.gold { background: linear-gradient(#a98637, #6b501c); border-color: #e0bf62; color: #fff6d8; }
.btn.red { background: linear-gradient(#8a3a2b, #4a1d13); border-color: #b25b46; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.tiny { padding: 2px 8px; font-size: 12px; }

/* ---------- Login ---------- */
.login-box { width: min(560px, 94vw); padding: 28px 32px 22px; }
.subtitle { text-align: center; color: var(--muted); font-family: var(--font); margin: 4px 0 20px; letter-spacing: .2em; font-size: 12px; text-transform: uppercase; }
.login-box label { display: block; margin: 10px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.login-box input, .chat-box input, #chat-input, .settings input, .settings select, .settings-code input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; background: #100d09; color: var(--text);
  border: 1px solid #6b5230; border-radius: 2px; box-shadow: 0 0 0 1px #000 inset; outline: none;
}
.login-box input:focus { border-color: var(--gold); }
.row { display: flex; gap: 10px; margin-top: 14px; }
.row .btn { flex: 1; }
.room-list-head { margin-top: 18px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.room-list { margin-top: 6px; max-height: 150px; overflow: auto; border: 1px solid #4a3826; background: #100d09; }
.room-list .muted { padding: 8px; }
.room-row { display: flex; justify-content: space-between; padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #2b2117; }
.room-row:hover { background: #2b2117; }
.credits { margin-top: 18px; font-size: 11px; color: #7f745c; text-align: center; }
.credits a { color: inherit; text-decoration: underline; }
.credits a:hover { color: var(--muted); }
.credits .legal { margin-top: 6px; }

/* ---------- Lobby ---------- */
.lobby-frame { width: min(1100px, 96vw); max-height: 96vh; padding: 18px 22px; display: flex; flex-direction: column; }
.lobby-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #6b523066; padding-bottom: 10px; }
.lobby-head-right { display: flex; gap: 8px; }
#lobby-code { color: #fff; }
.lobby-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-top: 14px; min-height: 0; }
.lobby-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.team-col { background: #140f0a; border: 1px solid #4a3826; padding: 10px; }
.team-title { font-family: var(--font); font-size: 17px; margin-bottom: 8px; text-align: center; }
.team-west .team-title { color: var(--west); }
.team-east .team-title { color: var(--east); }
.slots { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.slot { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: #211a12; border: 1px solid #3f3122; min-height: 36px; }
.slot.empty { color: #6b6250; font-style: italic; }
.slot.ready { border-color: #4caf5088; box-shadow: 0 0 8px #4caf5033 inset; }
.slot .dot { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #000; flex: none; }
.slot .name { flex: 1; font-weight: bold; }
.slot .tag { font-size: 11px; color: var(--muted); }
.slot .status { font-size: 11px; letter-spacing: .06em; color: #7f745c; }
.slot.ready .status { color: #7fd27a; }
.slot .kick { cursor: pointer; color: #b25b46; font-size: 12px; }
.lobby-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.host-only { display: none; }
.is-host .host-only { display: inline-block; }
.chat-box { grid-column: 1 / -1; }
.chat-log { height: 120px; overflow: auto; background: #100d09; border: 1px solid #4a3826; padding: 6px 8px; font-size: 13px; }
.chat-log div { padding: 1px 0; }
.chat-log .sys { color: var(--muted); font-style: italic; }
.lobby-settings { background: #140f0a; border: 1px solid #4a3826; padding: 10px 12px; overflow: auto; max-height: 70vh; }
.settings-title { display: flex; align-items: center; gap: 6px; font-family: var(--font); color: var(--gold); margin-bottom: 8px; }
.settings { display: grid; grid-template-columns: 1fr; gap: 7px; font-size: 12px; }
.settings-code { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; }
.settings-code input { flex: 1; min-width: 0; margin: 0; padding: 3px 6px; font: 12px ui-monospace, Menlo, Consolas, monospace; }
.settings-code input:read-only { color: var(--muted); }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 1px; border-bottom: 1px solid #4a3826; margin-bottom: 10px; }
.settings-tabs .tab { background: none; border: 1px solid transparent; border-bottom: none; border-radius: 3px 3px 0 0; color: var(--muted); font-family: var(--font); font-size: 12px; padding: 4px 7px; margin-bottom: -1px; cursor: pointer; }
.settings-tabs .tab:hover { color: var(--text); }
.settings-tabs .tab.active { color: var(--gold); background: #1d160f; border-color: #4a3826; border-bottom: 1px solid #1d160f; }
.settings-tabs .badge { display: inline-block; min-width: 14px; margin-left: 4px; padding: 0 3px; border-radius: 7px; background: #6b5230; color: #f4e2b0; font: bold 9px/14px sans-serif; text-align: center; vertical-align: 1px; }
#btn-settings-reset { margin-left: auto; }
.settings label.moot { opacity: .45; }
.settings label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); }
.settings label span { flex: 1; }
.settings input[type=checkbox] { width: auto; margin: 0; }
.settings input[type=number] { width: 90px; padding: 3px 6px; margin: 0; }
.settings select { width: 170px; padding: 3px 6px; margin: 0; }
.settings.readonly input, .settings.readonly select { pointer-events: none; opacity: .7; }

/* ---------- Draft ---------- */
.draft-frame { width: min(1180px, 97vw); max-height: 96vh; padding: 16px 20px; display: flex; flex-direction: column; }
.draft-head { display: flex; align-items: center; gap: 16px; }
.draft-head h2 { flex: 1; }
.timer { font-family: var(--font); font-size: 26px; color: #fff; min-width: 64px; text-align: right; }
.race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.race-card { cursor: pointer; padding: 10px; background: #140f0a; border: 2px solid #4a3826; text-align: center; font-family: var(--font); position: relative; transition: transform .08s; }
.race-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.race-card.selected { border-color: #fff; box-shadow: 0 0 14px #e3c15a88; }
.race-card.banned { cursor: default; }
.race-card.banned > div { text-decoration: line-through; }
.race-card.taken { opacity: .5; cursor: default; }
.race-card .emblem { display: block; width: 60px; height: 60px; margin: 0 auto 6px; filter: drop-shadow(0 2px 3px #000c); }
.race-card:hover .emblem, .race-card.selected .emblem { filter: drop-shadow(0 0 6px #e3c15aaa); }
.race-card.banned .emblem { filter: grayscale(1); }
.race-card.banned::before { content: '✕'; position: absolute; left: 0; right: 0; top: 10px; font-size: 44px; line-height: 60px; color: #ff3b2f; text-decoration: none; opacity: .9; pointer-events: none; z-index: 1; text-shadow: 0 0 4px #000; }
.race-card.banned { opacity: .5; }
.race-card .owner { position: absolute; top: 4px; right: 6px; font-size: 10px; color: var(--muted); }
.draft-foot { display: flex; align-items: center; gap: 12px; }
#draft-status { flex: 1; color: var(--muted); }
.race-info { margin-top: 10px; background: #100d09; border: 1px solid #4a3826; padding: 10px; font-size: 12px; max-height: 220px; overflow: auto; }
.race-info h3 { font-size: 16px; margin-bottom: 4px; }
.race-info table { width: 100%; border-collapse: collapse; }
.race-info td { padding: 2px 6px; border-bottom: 1px solid #2b2117; vertical-align: top; }
.race-info td.c { text-align: right; white-space: nowrap; color: var(--gold); }

/* ---------- Game ---------- */
#screen-game { background: #000; cursor: default; user-select: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#game.tool-build { cursor: crosshair; }
#game.tool-strike { cursor: crosshair; }
#top-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 12px; background: linear-gradient(#2b2117, #150f0a); border-bottom: 2px solid #6b5230; box-shadow: 0 2px 8px #000a;
  font-family: var(--font); pointer-events: none;
}
#top-bar button { pointer-events: auto; }
/* The display-issue badge: shown once a piece of the picture failed to draw and was skipped (see reportDraw in game.js). */
#btn-issues { width: 22px; padding: 2px 0; font-weight: bold; color: #1a1208; background: linear-gradient(#ffcf5a, #e09a20); border-color: #8a5a10; }
#btn-issues.fresh { animation: issue-pulse 1s ease-in-out 3; }
@keyframes issue-pulse { 50% { box-shadow: 0 0 10px 3px #ffb030; } }
.issues-pop { position: absolute; top: 40px; right: 12px; width: 340px; max-height: 50vh; overflow: auto; pointer-events: auto; z-index: 30;
  background: linear-gradient(#2b2117, #1a130c); border: 2px solid #6b5230; border-radius: 6px; box-shadow: 0 6px 18px #000c; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.issues-pop h4 { margin: 0 0 6px; color: #ffcf5a; font-size: 14px; }
.issues-pop ul { margin: 6px 0; padding-left: 18px; }
.issues-pop .muted { color: var(--muted); font-size: 12px; }
.issues-actions { margin: 4px 0 6px; }
.top-left, .top-center, .top-right { display: flex; align-items: center; gap: 14px; min-width: 0; white-space: nowrap; }
.top-right { justify-content: flex-end; }
#round-label small { color: var(--muted); font-size: 11px; }
/* Narrow windows: tighter spacing, a smaller scoreboard, and below 900 px only the essentials. */
@media (max-width: 1280px) {
  #top-bar { padding: 0 8px; gap: 8px; }
  .top-left, .top-center, .top-right, .seat-row { gap: 8px; }
  .res { font-size: 14px; }
  .res .income { font-size: 11px; }
  .board { font-size: 9px; line-height: 9px; margin-left: 0; }
  .board th, .board td { padding: 0 2px; }
}
@media (max-width: 1100px) { .res small, #round-label small { display: none; } }
@media (max-width: 900px) { .board { display: none; } }
.score b { font-size: 16px; }
#clock { color: #fff; font-variant-numeric: tabular-nums; }
.res { display: flex; align-items: center; gap: 5px; font-size: 15px; color: #fff; }
#res-rows { flex-direction: column; gap: 1px; align-items: stretch; }
.seat-row { display: flex; align-items: center; gap: 14px; padding: 0 8px; border-radius: 4px; border: 1px solid transparent; }
.seat-row .emblem { width: 22px; height: 22px; margin-right: -6px; filter: drop-shadow(0 0 2px #000); }
body.two-seats #top-bar { height: 52px; }
body.two-seats #castle-bars { top: 58px; }
body.two-seats .seat-row { pointer-events: auto; cursor: pointer; opacity: .7; font-size: 13px; }
body.two-seats .seat-row .res { font-size: 13px; }
body.two-seats .seat-row .emblem { width: 20px; height: 20px; }
body.two-seats .seat-row:hover { opacity: .9; }
body.two-seats .seat-row.active { opacity: 1; background: #ffffff12; border-color: #e0bf6288; }
.res small { color: var(--muted); font-size: 11px; }
.res .income { color: #9fe89a; font-size: 12px; }
.ico { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #000; }
.ico-gold { background: radial-gradient(circle at 35% 35%, #fff2a8, #e0b62c 50%, #7d5c10); }
.ico-lumber { background: linear-gradient(135deg, #6a4a2a, #3a2612); border-radius: 2px; }
.ico-legend { background: radial-gradient(circle at 40% 40%, #d9a6ff, #7a2ecf 60%, #2c0e52); }
#castle-bars { position: absolute; top: 40px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; pointer-events: none; font-family: var(--font); font-size: 12px; }
.cbar { display: flex; align-items: center; gap: 6px; padding: 2px 8px; background: #000a; border-radius: 3px; }
#buff-label { position: absolute; top: 62px; left: 0; right: 0; text-align: center; pointer-events: none; font-family: var(--font); font-size: 12px; text-shadow: 0 1px 2px #000; }
body.two-seats #buff-label { top: 80px; }
@media (max-width: 900px) { .cbar .bar { width: 100px; } .cbar span { display: none; } }
.cbar .bar { width: 150px; height: 9px; background: #000a; border: 1px solid #6b5230; }
.cbar .bar i { display: block; height: 100%; background: linear-gradient(#ff8b7a, #b3271a); }
.cbar.east .bar i { background: linear-gradient(#8fe89a, #1f7a2e); }
#log { position: absolute; left: 12px; bottom: 200px; width: 460px; max-height: 40vh; overflow: hidden; pointer-events: none; font-size: 13px; text-shadow: 0 1px 2px #000, 0 0 4px #000; display: flex; flex-direction: column; justify-content: flex-end; }
#log div { padding: 1px 0; opacity: 1; transition: opacity 1s; }
#log div.fade { opacity: 0; }
#log .team0 { color: #ff9d92; } #log .team1 { color: #9fe8a8; } #log .sys { color: #e3c15a; } #log .chat { color: #fff; }
#chat-input-wrap { position: absolute; left: 12px; bottom: 180px; width: 460px; display: flex; gap: 6px; align-items: center; }
#chat-mode { font-size: 11px; color: var(--gold); width: 36px; }
#chat-input { margin: 0; }

#console {
  position: absolute; left: 0; right: 0; bottom: 0; height: 172px; display: grid; grid-template-columns: 270px 1fr 300px;
  background: linear-gradient(#3a2d1f, #1a130c); border-top: 3px solid #6b5230; box-shadow: 0 -3px 12px #000c;
}
.console-left { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; border-right: 2px solid #4a3826; }
#minimap { width: 248px; height: 130px; border: 2px solid #8b6d3a; box-shadow: 0 0 0 1px #000; background: #000; cursor: pointer; image-rendering: pixelated; }
.mini-buttons { display: flex; gap: 6px; }
.console-center { padding: 10px 14px; display: grid; grid-template-columns: 76px 1fr 220px; gap: 12px; align-items: start; }
.portrait { width: 76px; height: 76px; border: 2px solid #8b6d3a; background: #0c0a08; box-shadow: 0 0 0 1px #000; }
.sel-name { font-family: var(--font); font-size: 17px; color: var(--gold); }
.sel-hp { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.sel-hp .bar { width: 160px; height: 10px; background: #000; border: 1px solid #6b5230; }
.sel-hp .bar i { display: block; height: 100%; background: linear-gradient(#7fe07a, #2e8b2a); }
.sel-hp span { font-size: 12px; color: #fff; }
.sel-stats { font-size: 12px; color: var(--muted); line-height: 1.45; }
.sel-stats b { color: #fff; font-weight: normal; }
#sel-extra { font-size: 12px; color: var(--muted); line-height: 1.4; max-height: 130px; overflow: hidden; }
#sel-extra .prog { height: 8px; background: #000; border: 1px solid #6b5230; margin: 4px 0; }
#sel-extra .prog i { display: block; height: 100%; background: linear-gradient(#e3c15a, #9c7a2c); }
.console-right { padding: 8px 10px; border-left: 2px solid #4a3826; }
.command-card { display: grid; grid-template-columns: repeat(4, 62px); grid-template-rows: repeat(3, 44px); gap: 4px; }
/* Narrower windows (desktop only): the minimap and the command card always stay whole and the selection in the
   middle gives way: its text wraps and scrolls, the buffs and the carried items keep their own column, and below
   1400 px (then 1150 px) the minimap, the portrait and the command card step down a size. */
body:not(.touch) #console { grid-template-columns: 270px minmax(0, 1fr) auto; }
body:not(.touch) .console-center { min-width: 0; overflow: hidden; grid-template-columns: 76px minmax(0, 1fr) minmax(148px, 220px); }
body:not(.touch) #sel-info { min-width: 0; max-height: 150px; display: flex; flex-direction: column; }
body:not(.touch) .sel-stats { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5230 transparent; }
body:not(.touch) .sel-hp .bar { flex: 0 1 160px; min-width: 60px; }
body:not(.touch) .sel-hp span { white-space: nowrap; }
body:not(.touch) .sel-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1400px) {
  body:not(.touch) #console { grid-template-columns: 222px minmax(0, 1fr) auto; }
  body:not(.touch) #minimap { width: 204px; height: 107px; }
  body:not(.touch) .console-center { padding: 8px 10px; gap: 10px; grid-template-columns: 76px minmax(0, 1fr) minmax(144px, 180px); }
}
@media (max-width: 1150px) {
  body:not(.touch) .console-center { grid-template-columns: 56px minmax(0, 1fr) 144px; gap: 8px; }
  body:not(.touch) #sel-portrait { width: 56px; height: 56px; }
  body:not(.touch) #portrait { width: 52px; height: 52px; }
  body:not(.touch) .console-right { padding: 8px 8px; }
  body:not(.touch) .command-card { grid-template-columns: repeat(4, 54px); grid-template-rows: repeat(3, 44px); }
}
.cmd { position: relative; border: 2px solid #6b5230; background: #0c0a08; cursor: pointer; overflow: hidden; box-shadow: 0 0 0 1px #000; }
.cmd:hover { border-color: var(--gold); }
.cmd.active { border-color: #fff; box-shadow: 0 0 10px #e3c15a; }
.cmd.disabled { opacity: .4; cursor: default; }
.cmd canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmd .hk { position: absolute; right: 3px; top: 1px; font-size: 10px; color: #ffe08a; text-shadow: 0 0 3px #000, 0 0 3px #000; font-weight: bold; }
.cmd .cost { position: absolute; left: 2px; right: 2px; bottom: 1px; display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 11px; font-weight: 800; line-height: 1.1; text-shadow: 0 0 2px #000, 0 0 3px #000, 1px 1px 0 #000, -1px -1px 0 #000; }
.cmd .cost .g { color: #ffd23a; }
.cmd .cost .l { color: #5fe36a; }
.cmd .cost .lg { color: #c77dff; }
.cmd .cost .n { color: #fff; }
.cmd .wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; background: rgba(0, 0, 0, .35); }
.cmd .lbl { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 9px; text-align: center; color: #fff; text-shadow: 0 0 3px #000; white-space: nowrap; overflow: hidden; }
.tooltip { position: absolute; z-index: 20; width: 300px; padding: 10px 12px; background: #120e09f2; border: 2px solid #8b6d3a; box-shadow: 0 0 0 1px #000, 0 8px 30px #000; font-size: 12px; pointer-events: none; line-height: 1.4; }
.tooltip .tt-name { font-family: var(--font); color: var(--gold); font-size: 15px; }
.tooltip .tt-cost { color: #ffe08a; margin: 2px 0 6px; }
.tooltip .tt-cost .l { color: #5fe36a; }
.tooltip .tt-cost .lg { color: #c77dff; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000000aa; z-index: 30; }
.overlay-box { min-width: 420px; max-width: 640px; padding: 26px 30px; text-align: center; }
.overlay-box.small { min-width: 360px; }
.overlay-box h2 { font-size: 30px; margin-bottom: 10px; }
.overlay-actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; }
.menu-players { margin-top: 14px; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.menu-players .mp-title { font-weight: bold; margin-bottom: 4px; }
.menu-players .west .mp-title { color: #ff8d80; }
.menu-players .east .mp-title { color: #8fe89a; }
.menu-players .mp-row { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.menu-players .mp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-players .mp-name small { color: var(--muted); }
.menu-players .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.menu-players [data-add] { margin-top: 4px; }
.menu-players .mp-specs { grid-column: 1 / -1; }
.slot .host-btn { margin-left: 6px; padding: 0 6px; }
#btn-afk.on { background: #6b5a2a; color: #fff; }
.sound-mix { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.mix-row { display: grid; grid-template-columns: 110px 46px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; }
.mix-row .mix-name { text-align: left; color: var(--text); }
.mix-row .mix-val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.mix-row.off .mix-vol, .mix-row.off .mix-val { opacity: .4; }
.mix-row .mix-vol { width: 100%; accent-color: var(--gold); cursor: pointer; }
.menu-help p { font-size: 13px; color: var(--muted); line-height: 1.6; text-align: left; }
.menu-help a { color: var(--gold); }
.menu-tabs { justify-content: center; margin-bottom: 14px; }
.menu-tabs .tab { font-size: 13px; padding: 5px 14px; }
#game-menu .overlay-box { width: 600px; }
.menu-pane { min-height: 150px; }
.menu-pane > :first-child { margin-top: 0; }
.menu-pane .touch-switch { margin-top: 8px; }
.overlay .stats-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.overlay .stats-table td, .overlay .stats-table th { padding: 3px 8px; border-bottom: 1px solid #3f3122; text-align: left; }
/* The host paused the round: a plate in the middle of the map, the Resume button on it for the host. */
#pause-banner { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 22; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 26px; background: #1a130cf0; border: 1px solid #8b6d3a; box-shadow: 0 4px 18px #000c; color: var(--text); font-size: 13px; text-align: center; }
#pause-banner b { font-family: var(--font); font-size: 26px; color: var(--gold); letter-spacing: 2px; }
#pause-banner .btn { margin-top: 4px; }
.toast { position: absolute; left: 50%; top: 90px; transform: translateX(-50%); padding: 8px 16px; background: #2b1a14f0; border: 1px solid #b25b46; color: #ffb7a8; z-index: 40; font-size: 13px; pointer-events: none; }
.big-msg { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-family: var(--font); font-size: 42px; color: var(--gold); text-shadow: 0 3px 0 #000, 0 0 30px #e3c15a88; pointer-events: none; z-index: 25; text-align: center; }

.buffs { color: #ffd060; font-size: 12px; }
.board { border-collapse: collapse; font-size: 10px; line-height: 10px; color: #e8dcc0; pointer-events: auto; margin-left: 6px; }
.board th { font-weight: normal; color: #b8a880; padding: 0 4px; text-align: right; }
.board td { padding: 0 4px; text-align: right; font-variant-numeric: tabular-nums; }
.board td:first-child { text-align: left; font-weight: bold; }
.board tr.west td:first-child { color: #ff8d80; }
.board tr.east td:first-child { color: #8fe89a; }

.inventory { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; margin-top: 4px; }
.inv-slot { width: 44px; height: 32px; border: 1px solid #6b5230; background: #0c0a08; box-shadow: 0 0 0 1px #000; cursor: pointer; overflow: hidden; }
.inv-slot.empty { cursor: default; opacity: .5; }
.inv-slot canvas { width: 100%; height: 100%; display: block; }
.inv-slot:hover { border-color: var(--gold); }
.inv-slot { position: relative; }
.inv-slot .badge { position: absolute; right: 2px; bottom: 1px; font-size: 10px; line-height: 12px; padding: 0 3px; color: #ffe9a0; background: rgba(0,0,0,.7); border-radius: 3px; pointer-events: none; }
.item-popup { position: fixed; z-index: 60; padding: 8px 10px; background: linear-gradient(#2b2117, #150f0a); border: 1px solid #6b5230; border-radius: 4px; box-shadow: 0 4px 14px #000c; font-family: var(--font); white-space: nowrap; }
.item-popup .tt-name { margin-bottom: 6px; color: #ffe08a; }
.item-popup .g { color: #ffd23a; font-weight: 800; }
.item-popup .l { color: #5fe36a; font-weight: 800; }
.inv-slot .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); pointer-events: none; }

/* spectators and private games */
.options-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.login-box label.check, .check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; margin: 0; cursor: pointer; }
.check.inline { margin-left: 8px; }
.login-box .check input, .check input { display: inline-block; width: auto; margin: 0; box-shadow: none; accent-color: #c9a24a; }
.help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #8a7040; color: #c9a24a; font-size: 10px; font-weight: bold; cursor: help; position: relative; vertical-align: middle; margin-left: 4px; font-family: var(--font); text-transform: none; letter-spacing: 0; }
.help::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 130%; transform: translateX(-50%); width: 260px; padding: 8px 10px; background: #1a140c; color: var(--text); border: 1px solid #8a7040; border-radius: 3px; font-size: 12px; font-weight: normal; line-height: 1.35; text-align: left; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 20; box-shadow: 0 4px 14px #000a; }
.help:hover::after { opacity: 1; }
.btn .help { margin-left: 6px; }
.btn.dice { padding: 4px 6px; line-height: 0; }
.btn.dice svg { transition: transform .25s; }
.btn.dice:hover svg { transform: rotate(-18deg) scale(1.08); }
.spectators { margin-top: 10px; }
.spec-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; min-height: 20px; }
.spec-list .slot { padding: 4px 8px; min-height: 0; }
.spec-bar { margin-left: 12px; font-size: 12px; color: var(--muted); }
.spec-bar .btn.on { background: #6b5a2a; color: #fff; }
.seat-reqs { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 45; min-width: 300px; max-width: calc(100vw - 32px); padding: 6px 10px; background: #1a130cf2; border: 1px solid #8b6d3a; box-shadow: 0 3px 12px #000c; font-size: 13px; color: var(--text); }
#screen-game.hidden ~ .seat-reqs { top: 10px; } /* the lobby: above its frame */
.seat-reqs .sr-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.seat-reqs .sr-row > span { flex: 1; }
.seat-reqs .sr-head { border-bottom: 1px solid #4a3a22; margin-bottom: 2px; }
.slot .btn.on { background: #6b5a2a; color: #fff; }
.seat-reqs .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

.slot .name.rename { cursor: pointer; }
.slot .name.rename:hover { text-decoration: underline dotted; }
.tchip { display: inline; color: #fff; cursor: help; border-bottom: 1px dotted #8b6d3a; white-space: nowrap; }
.tchip .ti { margin-right: 4px; }
.tchip:hover { color: var(--gold); border-bottom-color: var(--gold); }
.ti { width: 24px; height: 24px; vertical-align: -7px; image-rendering: auto; }
.tooltip .tt-name .ti { width: 30px; height: 30px; vertical-align: -8px; }
.tooltip .tt-types .ti { width: 20px; height: 20px; vertical-align: -5px; }
.tooltip .up { color: #8fe89a; }
.tooltip .down { color: #ff8a7a; }
.tooltip .tt-types { border-collapse: collapse; margin: 6px 0 4px; width: 100%; }
.tooltip .tt-types th { text-align: left; font-weight: normal; color: var(--muted); font-size: 11px; padding: 0 6px 2px 0; border-bottom: 1px solid #3f3122; }
.tooltip .tt-types td { padding: 0 6px 0 0; white-space: nowrap; }
.tooltip .tt-types td:nth-child(2), .tooltip .tt-types td:nth-child(3), .tooltip .tt-types th:nth-child(2), .tooltip .tt-types th:nth-child(3) { text-align: right; padding-right: 0; padding-left: 10px; }
.tooltip .small { font-size: 11px; }
.sel-buffs { display: flex; flex-wrap: wrap; gap: 4px; }
.sel-buffs:not(:empty) { margin: 2px 0 6px; }
.sel-buffs .buff { position: relative; width: 26px; height: 26px; cursor: help; }
.sel-buffs .buff img { width: 26px; height: 26px; display: block; }
.sel-buffs .buff small { position: absolute; right: 1px; bottom: 0; font-size: 9px; line-height: 1; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000; }
.tooltip .tt-name .bi { width: 30px; height: 30px; vertical-align: -9px; margin-right: 4px; }
.achip { color: #e8dcc0; cursor: help; border-bottom: 1px dotted #8b6d3a; white-space: nowrap; }
.achip:hover { color: var(--gold); border-bottom-color: var(--gold); }
.uchip { color: #fff; cursor: help; border-bottom: 1px dotted #8b6d3a; }
.uchip:hover { color: var(--gold); border-bottom-color: var(--gold); }
.tooltip .tt-abil { margin-top: 6px; border-top: 1px solid #3f3122; padding-top: 4px; }
.tooltip .tt-abil b { color: #ffe08a; font-weight: normal; }

/* ============ Tutorial ============ */
.tut-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 4px; }
.tut-row .btn { flex: 0 0 auto; }
a.btn { text-decoration: none; display: inline-block; }
.tut-panel { position: absolute; left: 12px; top: 66px; width: 370px; max-width: calc(100vw - 24px); padding: 12px 14px 10px; z-index: 25; font-size: 14px; line-height: 1.45; box-shadow: 0 6px 24px #000c; }
body.two-seats .tut-panel { top: 84px; }
.tut-head { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font); color: var(--gold); font-size: 13px; margin-bottom: 6px; }
.tut-text b { color: #fff; }
.tut-text b.west { color: var(--west); } .tut-text b.east { color: var(--east); }
.tut-task { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 7px 9px; background: #00000055; border: 1px solid #6b5230; border-radius: 4px; color: #fff6d8; }
.tut-task .box { flex: 0 0 14px; height: 14px; margin-top: 3px; border: 2px solid var(--gold); border-radius: 3px; }
.tut-task.ok { border-color: #5fbf5a; }
.tut-task.ok .box { background: #5fbf5a; border-color: #5fbf5a; box-shadow: 0 0 8px #5fbf5a; }
.tut-progress { font-size: 12px; color: var(--gold); margin-top: 4px; }
.tut-progress:empty, .tut-hint:empty { display: none; }
.tut-hint { margin-top: 6px; font-size: 12.5px; color: #ffd98a; }
.tut-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tut-foot .muted { flex: 1; }
.tut-foot .btn.gold { margin-left: auto; }
.tut-done { font-family: var(--font); font-size: 20px; color: #8fe89a; margin: 2px 0 6px; }
kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid #8b6d3a; border-bottom-width: 2px; border-radius: 3px; background: #1a130c; color: #ffe08a; font: bold 11.5px var(--ui); text-align: center; line-height: 17px; }
.tut-hl { outline: 3px solid #ffd65a !important; outline-offset: 2px; animation: tut-pulse 1.1s ease-in-out infinite; }
@keyframes tut-pulse { 0%, 100% { box-shadow: 0 0 6px 2px #ffd65a88; } 50% { box-shadow: 0 0 18px 6px #ffd65acc; } }
#castle-bars.tut-hl, #res-rows.tut-hl { border-radius: 4px; }
.tut-menu-box { max-width: 620px; text-align: left; }
.tut-menu-box h2 { text-align: center; }
.tut-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; margin-top: 8px; }
.tut-lesson { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: #0000004d; border: 1px solid #6b5230; border-radius: 4px; color: var(--text); text-align: left; cursor: pointer; }
.tut-lesson:hover { border-color: var(--gold); background: #ffffff0d; }
.tut-lesson.current { border-color: var(--gold); }
.tut-lesson .n { flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #8b6d3a; color: var(--gold); font: bold 14px var(--font); }
.tut-lesson.done .n { border-color: #5fbf5a; color: #8fe89a; }
.tut-lesson b { display: block; font-family: var(--font); font-weight: normal; font-size: 15px; color: #fff6d8; }
.tut-lesson small { color: var(--muted); font-size: 12px; }
#tut-menu { z-index: 40; }
.tut-panel.compact { width: 290px; padding: 6px 10px 6px; font-size: 13px; opacity: .92; }
.tut-panel.compact .tut-text, .tut-panel.compact .tut-head .muted { display: none; }
.tut-panel.compact .tut-head { margin-bottom: 2px; font-size: 12px; }
.tut-panel.compact .tut-task { margin-top: 2px; padding: 4px 7px; }
.tut-panel.compact .tut-foot { margin-top: 4px; }

/* ---------------------------------------------------------------- touch layout
   Everything below applies only under body.touch (touch.js): phones and tablets, upright where wide enough. The desktop
   layout above is left exactly as it is. */
#touch-ui, .touch-help, .touch-only { display: none; }
body.touch .desk-help { display: none; }
body.touch .touch-help { display: block; }
body.touch .touch-only { display: inline-block; }
body.touch { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
body.touch #screen-game, body.touch #screen-game * { -webkit-user-select: none; user-select: none; }
body.touch #chat-input { -webkit-user-select: text; user-select: text; }
body.touch #screen-game { touch-action: none; } /* no browser zoom or scroll over the game: the map takes the gestures */
body.touch #t-sheet #console, body.touch #t-items, body.touch .tooltip, body.touch #game-menu .overlay-box, body.touch #chat-input-wrap { touch-action: pan-y; }
body.touch #touch-ui { display: block; }

/* Top: slimmer bar, compact castle bars, no scoreboard; the Menu sits in the action buttons. */
body.touch #top-bar { height: 30px; padding: 0 8px; gap: 8px; font-size: 13px; }
body.touch .top-left, body.touch .top-center, body.touch .top-right, body.touch .seat-row { gap: 8px; }
body.touch #btn-fullscreen { min-width: 38px; height: 26px; padding: 0 8px; font-size: 16px; line-height: 1; }
body.touch #btn-fullscreen.on { border-color: #fff; }
/* The same switch on the login and race-pick screens: a round button in the bottom right corner (the lobby has its own beside Copy link, the game its own in the top bar). */
body.touch #btn-fs-float { position: fixed; right: 10px; bottom: 10px; z-index: 50; width: 46px; height: 46px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; box-shadow: 0 0 0 1px #000, 0 3px 10px #000c; }
body.touch #btn-fs-float.on { border-color: #fff; }
#screen-game:not(.hidden) ~ #btn-fs-float, #screen-lobby:not(.hidden) ~ #btn-fs-float { display: none; }
body.touch #btn-fs-lobby { font-size: 16px; line-height: 1; }
body.touch #btn-fs-lobby.on { border-color: #fff; }
body.touch .board, body.touch #btn-menu, body.touch #round-label small, body.touch .res small { display: none; }
body.touch .res { font-size: 14px; }
body.touch #castle-bars { top: 33px; gap: 8px; font-size: 11px; }
body.touch .cbar span { display: none; }
body.touch .cbar .bar { width: 90px; }
body.touch #buff-label { top: 52px; font-size: 11px; }
body.touch.two-seats #castle-bars { top: 55px; }
body.touch.two-seats #buff-label { top: 74px; }
body.touch .toast { top: 116px; max-width: 80vw; }
body.touch .seat-reqs { top: 56px; font-size: 14px; }
body.touch .seat-reqs .btn { min-height: 32px; }
body.touch.two-seats .toast { top: 138px; }
body.touch #log { left: 8px; bottom: 68px; width: min(420px, 55vw); max-height: 24vh; font-size: 11px; }
body.touch #chat-input-wrap { left: 56px; right: 76px; width: auto; bottom: auto; top: 36px; z-index: 35; background: #120e09ee; padding: 6px 8px; border: 1px solid #6b5230; }
body.touch #chat-mode { font-size: 13px; width: 48px; padding: 6px 0; text-align: center; border: 1px solid #6b5230; }
body.touch #chat-input { font-size: 16px; }
#t-chat { display: none; }
body.touch #t-chat { display: flex; position: absolute; left: 8px; top: 36px; width: 42px; height: 38px; padding: 0; align-items: center; justify-content: center; color: var(--gold); z-index: 24; box-shadow: 0 0 0 1px #000, 0 3px 10px #000a; } /* someone to talk to: the bubble under the top bar opens chat */
body.touch #t-chat.hidden { display: none; }
#t-chat.unread::after { content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #e2463a; box-shadow: 0 0 0 1px #000; }

/* The action buttons: a column on the right edge, under the right thumb; panels open beside it, never over it. */
#t-rail { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 25; }
.t-btn { width: 60px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative;
  font-family: var(--font); font-size: 12px; color: var(--text); background: linear-gradient(#3a2d1f, #1a130c); border: 2px solid #8b6d3a; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 3px 8px #000a; padding: 0; }
.t-btn i { font-style: normal; font-size: 19px; line-height: 20px; color: var(--gold); }
.t-btn.on { border-color: #fff; box-shadow: 0 0 10px #e3c15a; }
.t-btn:disabled { opacity: .45; }
.t-btn small { position: absolute; top: 1px; right: 4px; font-size: 10px; color: #ffe08a; }
#t-strike i { color: #ffb040; }
/* Short screens (a phone in landscape with the browser bar showing): six buttons still fit under the top bar. */
@media (max-height: 400px) { body.touch #t-rail { gap: 5px; } body.touch .t-btn { height: 42px; } body.touch .t-btn i { font-size: 17px; line-height: 18px; } body.touch .t-btn span { font-size: 11px; } }

/* The selection chip: bottom left; a tap opens the details. */
#t-chip { position: absolute; left: 8px; bottom: 8px; height: 54px; max-width: calc(100vw - 100px); min-width: 150px; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 6px; z-index: 21;
  background: linear-gradient(#3a2d1fee, #1a130cee); border: 2px solid #8b6d3a; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 3px 8px #000a; }
#t-chip-pic { width: 40px; height: 40px; border: 1px solid #6b5230; background: #0c0a08; flex: none; }
.t-chip-text { min-width: 0; flex: 1; }
.t-chip-name { display: block; font-family: var(--font); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-chip-hp { height: 6px; margin-top: 4px; background: #000; border: 1px solid #6b5230; }
.t-chip-hp i { display: block; height: 100%; background: linear-gradient(#7fe07a, #2e8b2a); }
#t-chip-x { flex: none; width: 36px; height: 44px; background: none; border: none; color: var(--muted); font-size: 18px; }

/* The confirm bar for a target: under the castle bars. */
#t-confirm { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 26; max-width: calc(100vw - 16px);
  padding: 6px 8px 6px 14px; background: #120e09ee; border: 2px solid #8b6d3a; border-radius: 8px; box-shadow: 0 4px 14px #000c; font-family: var(--font); font-size: 15px; }
#t-confirm-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#t-confirm .btn { min-width: 52px; height: 42px; font-size: 20px; padding: 0 10px; }
body.touch.two-seats #t-confirm { top: 80px; }

/* One panel at a time, sliding over the bottom of the map; the console's parts live in it. */
#t-sheet { position: absolute; left: 0; right: 76px; bottom: 0; max-height: 72vh; display: none; flex-direction: column; z-index: 24;
  background: linear-gradient(#3a2d1f, #1a130c); border-top: 3px solid #6b5230; box-shadow: 0 -4px 16px #000c; }
body.touch[data-tsheet] #t-sheet { display: flex; }
#t-sheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid #4a3826; flex: none; }
#t-sheet-title { font-family: var(--font); font-size: 17px; color: var(--gold); margin-right: auto; }
#t-sheet-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#t-sheet-tools .btn, #t-sheet-close { min-height: 38px; }
#t-sheet-close { min-width: 44px; font-size: 16px; }
#t-body { display: flex; flex: 1 1 auto; min-height: 0; }
#t-sheet #console { position: static; height: auto; display: block; background: none; border: none; box-shadow: none; overflow-y: auto; min-height: 0; flex: 1 1 auto; padding: 6px 8px 10px; }
/* The detail strip: what the picked button is, and the big button that does it. */
#t-detail { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 8px 12px 10px 14px; border-right: 1px solid #4a3826; font-size: 13px; line-height: 1.4; }
.t-detail-text { flex: 1 1 auto; overflow-y: auto; min-height: 0; touch-action: pan-y; }
.t-detail-text .tt-name { font-family: var(--font); color: var(--gold); font-size: 16px; }
.t-detail-text .tt-cost { color: #ffe08a; margin: 2px 0 6px; }
.t-detail-text .tt-cost .l, .t-detail-text .l { color: #5fe36a; }
.t-detail-text .tt-cost .lg { color: #c77dff; }
.t-detail-text .muted { color: var(--muted); }
.t-detail-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 8px; flex: none; }
.t-why { color: #ff9a7a; font-size: 12px; margin-right: auto; }
#t-do { min-width: 120px; min-height: 46px; font-size: 17px; }
.t-detail-hint { margin: auto 0; color: var(--muted); text-align: center; font-size: 14px; line-height: 1.6; }
.cmd.picked { border-color: #fff; box-shadow: 0 0 12px #e3c15a; }
body.touch[data-tsheet="build"] #t-sheet #console, body.touch[data-tsheet="items"] #t-items { flex: none; }
body.touch[data-tsheet="info"] #t-body { flex-direction: column; overflow-y: auto; touch-action: pan-y; }
body.touch[data-tsheet="info"] #t-detail { flex: none; border-right: none; border-bottom: 1px solid #4a3826; max-height: 45vh; }
#t-sheet .console-left, #t-sheet .console-center, #t-sheet .console-right { display: none; border: none; padding: 0; }
#t-items { display: none; }
body.touch[data-tsheet="items"] #t-sheet #console { display: none; }
body.touch[data-tsheet="items"] #t-items { display: flex; }
body.touch[data-tsheet="build"] #t-sheet .console-right { display: block; }
body.touch[data-tsheet="map"] #t-sheet .console-left { display: flex; align-items: center; }
body.touch[data-tsheet="info"] #t-sheet #console { display: flex; gap: 12px; align-items: flex-start; }
body.touch[data-tsheet="info"] #t-sheet .console-center { display: grid; flex: 1; min-width: 0; }
body.touch[data-tsheet="info"] #t-sheet .console-right { display: block; flex: none; }
body.touch[data-tsheet="info"] #t-sheet .console-right:not(:has(.cmd:not(.empty))) { display: none; }
/* Build: big buttons, no hotkey letters. */
body.touch .command-card { grid-template-columns: repeat(4, 64px); grid-template-rows: repeat(3, 52px); gap: 6px; }
body.touch[data-tsheet="build"] .command-card { grid-template-columns: repeat(4, 72px); }
body.touch .cmd .hk { display: none; }
body.touch .cmd .cost { font-size: 12px; }
/* Details: portrait, name and stats, then buffs and the rest underneath. */
#t-sheet .console-center { grid-template-columns: 64px 1fr; gap: 6px 10px; }
#t-sheet .portrait { width: 64px; height: 64px; }
#t-sheet #sel-side { grid-column: 1 / -1; }
#t-sheet #sel-extra { max-height: none; }
#t-sheet .sel-stats, #t-sheet #sel-extra { font-size: 13px; }
#t-sheet .sel-hp .bar { width: min(220px, 40vw); }
#t-sheet #sel-extra .btn { min-height: 36px; margin: 2px 0; }
#t-sheet .sel-buffs .buff, #t-sheet .sel-buffs .buff img { width: 32px; height: 32px; }
/* Map: the minimap as large as the panel allows; a tap jumps there. */
#t-sheet #minimap { width: min(calc(100vw - 110px), calc((72vh - 70px) * 1.9)); height: auto; margin: 0 auto; }
#t-sheet .mini-buttons { display: none; }
/* Items: carried slots and the shop side by side. */
.t-items { gap: 18px; padding: 8px 14px 12px; overflow-y: auto; flex-wrap: wrap; }
.t-items-sec h4 { margin: 0 0 6px; font-family: var(--font); color: var(--gold); font-weight: normal; font-size: 14px; }
.t-items-sec .small { margin-top: 6px; }
.t-items .inventory { grid-template-columns: repeat(3, 60px); gap: 6px; }
.t-items .inv-slot { width: 60px; height: 46px; }
.t-items .t-shop { grid-template-rows: none; grid-auto-rows: 52px; }
/* Tooltips and the sell popup: readable and scrollable on a small screen. */
body.touch .tooltip { left: 8px !important; top: 36px !important; bottom: auto !important; width: min(340px, calc(100vw - 100px)); max-height: calc(100vh - 48px); overflow-y: auto; z-index: 40; pointer-events: auto; font-size: 13px; } /* held, not hovered: a fixed spot under the top bar */
body.touch .item-popup .btn { min-height: 40px; }
/* The Menu: fits the screen; bigger controls. */
body.touch #game-menu .overlay-box { min-width: 0; width: min(560px, 94vw); max-height: 92vh; overflow-y: auto; padding: 14px 18px; }
body.touch #game-menu h2 { font-size: 22px; margin-bottom: 4px; }
body.touch .menu-tabs { margin-bottom: 8px; }
body.touch .menu-pane { min-height: 130px; }
body.touch #game-menu .overlay-actions { margin-top: 10px; }
body.touch #game-menu .credits { margin-top: 8px; }
@media (max-height: 420px) { body.touch #game-menu h2 { display: none; } } /* a short phone: the tabs head the menu */
body.touch .mix-row { grid-template-columns: 110px 52px 1fr 40px; }
body.touch .mix-row .btn, body.touch #game-menu .overlay-actions .btn { min-height: 40px; }
.touch-switch select { grid-column: 2 / span 2; }
/* Too narrow upright and clearly wider sideways (body.turn, touch.js): ask to turn the device. */
#t-rotate { display: none; }
body.touch.turn #t-rotate { display: flex; position: absolute; inset: 0; z-index: 60; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #07060a; color: var(--text); font-family: var(--font); font-size: 18px; text-align: center; padding: 24px; }
body.touch.turn #t-rotate div { font-size: 54px; color: var(--gold); }
body.touch.turn #t-rotate .btn { margin-top: 10px; min-height: 44px; padding: 0 18px; font-size: 17px; } /* fullscreen holds a phone sideways where the browser lets it */
/* Login, lobby and race pick on a small screen: one scrolling column, compact rows. */
body.touch #screen-login, body.touch #screen-lobby, body.touch #screen-draft { align-items: flex-start; }
body.touch .lobby-frame, body.touch .draft-frame { width: 100vw; max-height: none; min-height: 100%; box-sizing: border-box; padding: 10px 12px; }
body.touch .lobby-body { display: block; }
body.touch .lobby-body > * { margin-bottom: 12px; }
body.touch .lobby-settings { max-height: none; }
body.touch .slot { padding: 5px 7px; }
body.touch .slot .btn { white-space: nowrap; min-height: 36px; }
body.touch .lobby-head { gap: 10px; }
body.touch .lobby-head .btn, body.touch .lobby-actions .btn { min-height: 40px; }
body.touch .settings input[type=number], body.touch .settings select { min-height: 32px; font-size: 16px; }
body.touch .settings input[type=checkbox] { transform: scale(1.3); }
body.touch .settings-tabs .tab { padding: 8px 10px; }
body.touch .chat-log { height: 90px; }
body.touch .race-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 8px 0; }
body.touch .race-card { padding: 6px; font-size: 13px; }
body.touch .race-card .emblem { width: 44px; height: 44px; margin-bottom: 3px; }
body.touch .race-card.banned::before { top: 4px; font-size: 36px; line-height: 44px; }
body.touch .race-card:hover { transform: none; }
body.touch .draft-foot .btn { min-height: 44px; }
body.touch .race-info { max-height: none; }
body.touch .login-box { margin: 10px auto; padding: 16px 20px 14px; }
body.touch .login-box input { font-size: 16px; }
body.touch .login-box .btn { min-height: 42px; }