:root {
  --bg: #1c1610;
  --panel: #2b2117;
  --panel2: #3a2c1d;
  --edge: #8a6a3a;
  --edge-dark: #4a3720;
  --text: #ece0c4;
  --muted: #b8a682;
  --gold: #e2bd62;
  --good: #8fdc7a;
  --bad: #ff8a7a;
  --link: #9fd3ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 Verdana, Geneva, sans-serif, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji'; overflow: hidden; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

.panel-bg {
  background-color: var(--panel);
  background-image: linear-gradient(rgba(20,14,8,.78), rgba(20,14,8,.78)), url(/assets/img/MiscFormTexture.png);
}
.screen { position: fixed; inset: 0; }

/* ---------- buttons ---------- */
button {
  background: linear-gradient(#5a442a, #3a2b1a); color: var(--text); border: 1px solid var(--edge);
  border-radius: 3px; padding: 6px 12px; cursor: pointer; min-height: 32px;
}
button:hover { border-color: var(--gold); color: #fff; }
button:active { background: #2a1f13; }
button.primary { background: linear-gradient(#8a6a32, #5c4420); color: #fff; }
button.small { padding: 3px 8px; min-height: 28px; font-size: 12px; }
button.toggle.on { border-color: var(--gold); color: var(--gold); }
button:disabled { opacity: .45; cursor: default; }
.icon-btn { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; }
.icon-btn img { width: 24px; height: 24px; image-rendering: pixelated; }
.icon-btn.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

input, select, textarea {
  background: #120d08; color: var(--text); border: 1px solid var(--edge-dark); border-radius: 3px; padding: 6px 8px; min-height: 32px;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--gold); }
textarea { line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }

/* ---------- dialogs ---------- */
.dialog {
  width: min(420px, calc(100vw - 32px)); margin: auto; padding: 20px;
  background: var(--panel2); border: 2px solid var(--edge); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 10px;
}
.dialog h1 { margin: 0; font: bold 32px/1.1 Georgia, serif; color: var(--gold); letter-spacing: 1px; text-align: center; }
.dialog h3 { margin: 0 0 4px; color: var(--gold); }
.dialog label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.dialog .row { display: flex; gap: 8px; flex-wrap: wrap; }
.dialog .row > * { flex: 1; }
.logo { width: 120px; align-self: center; }
.sub { margin: 0; text-align: center; color: var(--muted); }
.error { color: var(--bad); min-height: 1.2em; margin: 0; }
#screen-login { display: grid; place-items: center; }

/* ---------- top bars ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 6px 10px; flex-wrap: wrap;
  background: rgba(30,22,14,.92); border-bottom: 1px solid var(--edge); color: var(--gold);
}
.topbar .brand { font: bold 20px Georgia, serif; }
.topbar .spacer { flex: 1; }
.game-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; padding-top: max(6px, env(safe-area-inset-top)); }
#hud-name { font-weight: bold; }
/* the tile under the pointer: a fixed corner of the map (in the top bar its changing length made the bar shift) */
#hud-coords { position: absolute; left: 8px; top: 52px; z-index: 4; pointer-events: none; color: #e9dfc6; font-size: 12px;
  background: rgba(20, 15, 9, .72); border: 1px solid rgba(226, 189, 98, .25); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
#hud-coords:empty { display: none; }
/* desktop windows too narrow for everything in one row: drop your own name, stack the timers */
@media (max-width: 1280px) {
  .game-top { column-gap: 8px; }
  #hud-name { display: none; }
  #hud-game { max-width: 120px; }
  #hud-ticks { font-size: 11px; line-height: 1.15; display: flex; flex-direction: column; }
  .game-top #hud-ticks span + span::before { content: none; }
}

/* ---------- game ---------- */
#map { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; }
#minimap-wrap {
  position: absolute; right: 10px; top: 52px; z-index: 4; padding: 3px;
  background: var(--panel); border: 2px solid var(--edge); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
#minimap { display: block; width: 300px; height: 150px; image-rendering: pixelated; touch-action: none; cursor: pointer; }
#panel {
  position: absolute; left: 10px; bottom: 10px; z-index: 4; width: 360px; max-height: calc(100% - 70px);
  overflow-y: auto; border: 2px solid var(--edge); border-radius: 5px; padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
#panel .hint { color: var(--muted); margin: 0; }
#chat {
  position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 340px; height: 220px;
  border: 2px solid var(--edge); border-radius: 5px; padding: 8px;
}
#chat.collapsed { display: none; }
.sel-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.sel-head .glyph { width: 48px; height: 48px; image-rendering: pixelated; border: 1px solid var(--edge-dark); background: #000; object-fit: contain; }
.sel-head .title { font-weight: bold; color: var(--gold); font-size: 14px; }
.sel-head .owner { color: var(--muted); font-size: 12px; }
.stats { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 8px; font-size: 12px; margin-bottom: 8px; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; }
.cmds { display: flex; flex-wrap: wrap; gap: 4px; }
.cmds .sep { flex-basis: 100%; height: 4px; }
.group-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; max-height: 140px; overflow: auto; }
.group-list .item { display: flex; gap: 8px; align-items: center; padding: 2px 4px; cursor: pointer; border-radius: 3px; }
.group-list .item:hover { background: rgba(255,255,255,.06); }
.group-list img { width: 24px; height: 24px; image-rendering: pixelated; }
.sh-staffpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.sh-staffpick .hint { flex-basis: 100%; margin: 0; }
.sh-staffpick button.on { border-color: var(--gold); background: rgba(226, 189, 98, .18); }
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; margin-top: 10px; }   /* (clear of the city's action buttons above it) */
.build-grid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; font-size: 11px; }
.build-grid canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.build-grid .cost { color: var(--muted); font-size: 10px; }
.bar { height: 6px; background: #000; border: 1px solid var(--edge-dark); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); }
.mode-banner { background: rgba(226,189,98,.15); border: 1px solid var(--gold); color: var(--gold); padding: 4px 8px; border-radius: 3px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#toast {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 9; pointer-events: none;
  background: rgba(20,14,8,.92); border: 1px solid var(--edge); color: var(--text); padding: 6px 12px; border-radius: 4px; opacity: 0; transition: opacity .2s;
}
#toast.show { opacity: 1; }
#toast.err { color: var(--bad); border-color: var(--bad); }
#modal { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.5); display: grid; place-items: center; overflow: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
#modal .dialog { max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th, .table td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--edge-dark); }
.table th { color: var(--muted); font-weight: normal; }
.table input { width: 70px; min-height: 26px; padding: 2px 4px; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  #minimap-wrap { right: 6px; top: 48px; }
  #minimap { width: 150px; height: 75px; }
  #panel { left: 0; right: 0; bottom: 0; width: auto; max-height: 45vh; border-radius: 10px 10px 0 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #chat { left: 6px; right: 6px; width: auto; bottom: auto; top: 130px; height: 40vh; }
  #hud-coords { display: none; }
  .topbar { gap: 8px; }
}
.sel-head .deselect { margin-left: auto; align-self: flex-start; min-width: 32px; font-size: 16px; line-height: 1; }
.tile-list-head { display: flex; justify-content: space-between; align-items: center; color: var(--gold); font-size: 12px; margin: 4px 0; }
.group-list .item { min-height: 32px; }
.group-list .item.current { background: rgba(226,189,98,.18); outline: 1px solid var(--gold); }
.group-list .owner { color: var(--bad); font-size: 11px; }

/* settings dialog */
.dialog.wide { width: min(640px, calc(100vw - 32px)); }
.dialog h4 { margin: 10px 0 4px; color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.dialog label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); padding: 3px 0; cursor: pointer; }
.dialog label.check input { min-height: 0; width: 16px; height: 16px; flex: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--edge); padding-bottom: 6px; }
.tabs .tab.on { border-color: var(--gold); color: var(--gold); background: linear-gradient(#6a5030, #4a3820); }
.tab-page { min-height: 260px; }

/* ---------- chat UI ---------- */
.chatui { display: flex; flex-direction: column; min-height: 0; flex: 1; height: 100%; }
.chat-tabs { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; flex: none; scrollbar-width: thin; }
.ctab { white-space: nowrap; padding: 3px 8px; min-height: 28px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.ctab.on { border-color: var(--gold); color: var(--gold); background: linear-gradient(#6a5030, #4a3820); }
.ctab b { background: var(--bad); color: #000; border-radius: 8px; padding: 0 5px; font-size: 10px; }
.ctab .x { opacity: .6; padding: 0 2px; }
.ctab .x:hover { opacity: 1; color: var(--bad); }
.ctab.add { font-weight: bold; }
.chat-topic { font-size: 11px; color: var(--muted); padding: 2px 4px; border-bottom: 1px solid var(--edge-dark); }
.chat-log { flex: 1; overflow-y: auto; background: rgba(0,0,0,.4); border: 1px solid var(--edge-dark); padding: 6px; font-size: 12px; min-height: 60px; }
.chat-log .line { margin: 1px 0; overflow-wrap: anywhere; }
.chat-log .line.old { opacity: .6; }
.chat-log .from { color: var(--gold); font-weight: bold; cursor: pointer; }
.chat-log .sys { color: var(--muted); font-style: italic; }
.chat-log .alert { color: var(--bad); cursor: pointer; }
.chat-log .err { color: #ff9a8a; }        /* something you tried that did not work (GameScreen.logLine) */
.chat-log .news, .chat-log .announce { color: #ffe070; font-weight: bold; }
.chat-form { display: flex; gap: 6px; margin-top: 6px; }
.chat-form input { flex: 1; min-width: 0; }
.chan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 4px; }
#player-menu { position: fixed; z-index: 30; min-width: 180px; background: var(--panel2); border: 1px solid var(--edge); border-radius: 4px; padding: 4px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
#player-menu[hidden] { display: none; }
#player-menu .pm-title { color: var(--gold); font-weight: bold; padding: 4px 6px; }
#player-menu button { text-align: left; min-height: 32px; }
#chat .chatui { height: 100%; }

.chatbox { display: flex; flex-direction: column; min-height: 0; }

/* ---------- awards ---------- */
i.award {
  display: inline-block; width: var(--s); height: var(--s); vertical-align: middle; margin-left: 2px; flex: none;
  background: url(/assets/img/MiscAwardIcons12.png?v=42) no-repeat; background-size: var(--s) calc(var(--s) * 42);
  background-position: 0 calc(var(--s) * var(--i) * -1); image-rendering: pixelated;
}
.award-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.award-row.big { font-size: 14px; }
#lobby-user { cursor: pointer; }
.special-awards { display: flex; flex-direction: column; }

/* ---------- player options: popover (desktop) / bottom sheet (phones) ---------- */
#player-menu { position: fixed; z-index: 60; min-width: 220px; background: var(--panel2); border: 1px solid var(--edge); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 32px rgba(0,0,0,.6); }
#player-menu[hidden], #player-scrim[hidden] { display: none; }
#player-menu .pm-title { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; border-bottom: 1px solid rgba(226,189,98,.18); margin-bottom: 4px; color: var(--gold); flex-wrap: wrap; }
#player-menu .pm-title span { color: var(--muted); font-size: 12px; flex-basis: 100%; }
#player-menu .pm-title .flag { width: 20px; height: 12.5px; image-rendering: pixelated; }
#player-menu button { text-align: left; min-height: 34px; background: transparent; border: 0; border-radius: 6px; color: var(--text); padding: 6px 10px; }
#player-menu button:hover { background: rgba(226,189,98,.16); }
#player-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.45); }
#player-menu.sheet { left: 0; right: 0; bottom: 0; top: auto; border-radius: 16px 16px 0 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); max-height: 80vh; overflow: auto; animation: sheet-up .18s ease-out; }
#player-menu.sheet::before { content: ""; width: 40px; height: 4px; border-radius: 4px; background: rgba(226,189,98,.4); align-self: center; margin: 2px 0 6px; }
#player-menu.sheet button { min-height: 48px; font-size: 15px; }
#player-menu.sheet .pm-cancel { margin-top: 6px; text-align: center; border: 1px solid rgba(226,189,98,.3); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- in game: phones in landscape (side panel instead of bottom sheet) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .game-top { padding: 3px 8px; padding-left: max(8px, env(safe-area-inset-left)); gap: 8px; }
  .game-top button.small { min-height: 26px; padding: 2px 8px; }
  #hud-coords { display: none; }
  #minimap-wrap { right: max(6px, env(safe-area-inset-right)); top: 40px; }
  #minimap { width: 140px; height: 70px; }
  #panel {
    left: max(6px, env(safe-area-inset-left)); right: auto; top: 40px; bottom: auto; width: min(320px, 70%);
    max-height: calc(100% - 46px); border-radius: 10px; padding-bottom: 10px;
  }
  #chat { left: auto; right: max(6px, env(safe-area-inset-right)); top: 116px; bottom: 6px; width: min(320px, 40vw); height: auto; }
}

/* ---------- zoom buttons (pinch also zooms on touch screens) ---------- */
#zoom-ctl { position: absolute; z-index: 4; right: 10px; top: 214px; display: flex; flex-direction: column; border: 2px solid var(--edge); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
#zoom-ctl button { width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 0; font: bold 22px/1 Verdana, sans-serif; background: linear-gradient(#5a442a, #3a2b1a); }
#zoom-ctl button + button { border-top: 1px solid var(--edge); }
#minimap-wrap[hidden] + #zoom-ctl { top: 52px; }
#panel[hidden] { display: none; }
@media (max-width: 760px) {
  #zoom-ctl { top: 136px; right: 6px; }
  #zoom-ctl button { width: 44px; height: 44px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #zoom-ctl { top: auto; bottom: 10px; right: max(10px, env(safe-area-inset-right)); flex-direction: row; }
  #zoom-ctl button + button { border-top: 0; border-left: 1px solid var(--edge); }
}

/* city panel: clear all zoned (planned) facilities */
.clear-zones { display: block; width: 100%; margin-top: 8px; }

/* troops aboard a ship */
.group-list .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #8fc6ff; border: 1px solid rgba(143,198,255,.4); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* ---------- alliance dialog ---------- */
.alliance .al-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 46vh; overflow: auto; }
.alliance .al-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(226,189,98,.18); border-radius: 8px; }
.alliance .al-join { display: flex; gap: 6px; align-items: center; }
.alliance .al-join input { width: 110px; }
.alliance .al-create { display: flex; gap: 6px; flex-wrap: wrap; }
.alliance .al-create input { flex: 1; min-width: 120px; }
.alliance .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--gold); border: 1px solid rgba(226,189,98,.45); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.alliance .tag.pending { color: #8fc6ff; border-color: rgba(143,198,255,.45); }
.alliance .error:empty { display: none; }
button.danger { border-color: #a94a3a; color: #ffb4a6; }

/* About box wordmark (the original logo image spells the old name) */
.about-mark { align-self: center; font: 700 40px/1.1 Georgia, "Times New Roman", serif; letter-spacing: 2px; color: var(--gold, #e2bd62); text-shadow: 0 2px 0 #000; margin: 4px 0 8px; }

/* ---------- Revifact brand: Cinzel (SIL OFL, self-hosted in /fonts) ---------- */
@font-face { font-family: "Cinzel Decorative"; font-weight: 700; font-display: swap; src: url(/fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel Decorative"; font-weight: 900; font-display: swap; src: url(/fonts/cinzel-decorative-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap; src: url(/fonts/cinzel-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap; src: url(/fonts/cinzel-latin-700-normal.woff2) format("woff2"); }
.brand-lockup { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; }
.brand-emblem { width: 118px; height: 148px; filter: drop-shadow(0 6px 18px rgba(255, 140, 40, .28)) drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.dialog h1.brand-word {
  margin: 6px 0 0; font: 900 44px/1 "Cinzel Decorative", Georgia, serif; letter-spacing: 3px;
  background: linear-gradient(180deg, #fff3c4 0%, #ecc46c 38%, #b07c2c 72%, #f0cd78 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(255, 160, 60, .18));
}
.brand-tag { margin: 6px 0 0; font: 700 11px/1.2 Cinzel, Georgia, serif; letter-spacing: 2px; white-space: nowrap; text-transform: uppercase; color: #c9a868; }
.brand-tag::before, .brand-tag::after { content: ""; display: inline-block; width: 16px; height: 1px; background: linear-gradient(90deg, transparent, #c9a868); vertical-align: middle; margin: 0 7px; }
.brand-tag::after { background: linear-gradient(270deg, transparent, #c9a868); }
.brand-sub { margin: 6px 0 0; font: italic 400 15px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .5px; color: #e9d3a0; text-shadow: 0 1px 0 #000; }
.about-mark { font-family: "Cinzel Decorative", Georgia, serif; font-weight: 900; }
.wordmark-emblem { width: 24px; height: 30px; vertical-align: middle; margin: -4px 8px 0 0; }
@media (max-width: 760px), (max-height: 520px) {
  .brand-emblem { width: 90px; height: 112px; }
  .dialog h1.brand-word { font-size: 34px; }
  .brand-tag { letter-spacing: 1.2px; font-size: 10px; }
  .brand-tag::before, .brand-tag::after { display: none; }
  .brand-sub { font-size: 14px; }
  .wordmark-emblem { width: 19px; height: 24px; margin-right: 6px; }
}

/* ---------- login / sign-up ---------- */
#login-form[data-mode="login"] .signup-only, #login-form[data-mode="signup"] .login-only { display: none; }
#login-form .signup-only { display: flex; flex-direction: column; gap: 10px; }
#login-form p.switch.signup-only { display: block; }
#login-form[data-mode="login"] p.switch.signup-only { display: none; }
#login-form .fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
#login-form .switch { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
#login-form .legal { margin: -4px 0 0; text-align: center; font-size: 11px; }
#login-form a { color: var(--gold); }
#login-form .error:empty { display: none; }
#login-submit { width: 100%; min-height: 40px; font-weight: 700; }

/* taps fire immediately (no double-tap-to-zoom wait) on every control */
button, [data-act], [data-sel], a { touch-action: manipulation; }

/* ---------- install the app ---------- */
#login-form .install-link { background: none; border: 1px dashed rgba(226,189,98,.45); color: var(--gold); border-radius: 8px; min-height: 36px; font-size: 13px; }
#login-form .install-link[hidden] { display: none; }
.icon-only { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; }
#btn-fullscreen[hidden] { display: none; }
#install-bar { position: fixed; z-index: 70; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 12px; background: linear-gradient(#3a2c1c, #241a10); border: 1px solid rgba(226,189,98,.5); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: sheet-up .2s ease-out; }
#install-bar[hidden] { display: none; }
#install-bar img { border-radius: 8px; flex: none; }
#install-bar .ib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
#install-bar .ib-text b { color: var(--gold); }
#install-bar .ib-text span { font-size: 12px; color: var(--muted); }
#install-bar .ib-x { background: none; border: 0; color: var(--muted); font-size: 22px; min-height: 0; padding: 0 4px; }
#ios-install { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
#ios-install[hidden] { display: none; }
#ios-install .ios-card { width: min(420px, 100%); background: var(--panel2, #2a2016); border: 1px solid rgba(226,189,98,.4); border-radius: 16px; padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px; animation: sheet-up .2s ease-out; }
#ios-install img { border-radius: 12px; }
#ios-install h3 { margin: 0; font-family: "Cinzel", Georgia, serif; color: var(--gold); }
#ios-install ol { margin: 4px 0 8px; padding-left: 20px; line-height: 1.6; }
#ios-install .ios-share { width: 18px; height: 18px; vertical-align: -3px; color: #4ea3ff; }
#ios-install button { width: 100%; min-height: 42px; }
/* keep the install bar clear of the lobby's bottom tabs on phones, and out of the way in a game */
@media (max-width: 760px) { body:has(#screen-lobby:not([hidden])) #install-bar { bottom: calc(62px + env(safe-area-inset-bottom)); } }
body:has(#screen-game:not([hidden])) #install-bar { display: none; }
/* narrow phones: keep the game's top bar to two rows (buttons + full-screen icon on one line) */
@media (max-width: 480px) {
  .game-top { column-gap: 5px; }
  .game-top button.small { padding-left: 7px; padding-right: 7px; }
}

/* ---------- player name colours by account level (original lobby scheme) ---------- */
.lv-free { color: #f3e9d2 !important; }
.lv-full { color: #d4a52a !important; }       /* Full Access: dark yellow */
.lv-citizen { color: #5ea8ff !important; }    /* Citizen: blue */
.lv-gentry { color: #2fd3c2 !important; }     /* Gentry: teal */
.lv-noble { color: #ff4436 !important; }      /* Noble: bright red */
.lv-royal { color: #87462f !important; }      /* Royal: maroon, the original skins' PlayerRoyalColor #800000 lifted to read on dark panels */
.lv-imperial { color: #4fd36b !important; }   /* Imperial: green */
.lv-admin {                                   /* Admins: black text outlined in yellow */
  color: #000 !important; font-weight: 700;
  text-shadow: -1px -1px 0 #ffd21f, 1px -1px 0 #ffd21f, -1px 1px 0 #ffd21f, 1px 1px 0 #ffd21f, 0 -1px 0 #ffd21f, 0 1px 0 #ffd21f, -1px 0 0 #ffd21f, 1px 0 0 #ffd21f, 0 0 4px rgba(255, 210, 31, .6);
}

/* Glowing Name (Shop). The Sweep: a white glare slides across the name from its first letter to its last (1.2 s),
   waits a second, and goes again, over the name's own colour (currentColor) with a soft halo; the rainbow's is drawn
   in shop.js. Staff names (black, outlined in yellow) take it too, their outline drawn behind the painted name
   so the glare shows inside the letters. The Pulse: below. Still for those who turn motion off. */
.nc-glow:not(.lv-admin):not(.nc-rainbow) {
  background: linear-gradient(110deg, currentColor 0 42%, #fff 50%, currentColor 58% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .28));
  animation: nc-glow 2.2s ease-in-out infinite;
}
@keyframes nc-glow { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.lv-admin.nc-glow {
  background: linear-gradient(110deg, #000 0 40%, #fff 50%, #000 60% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* (the outline as shadows behind the whole painted name, so it stays outside the letters and the glare shows) */
  text-shadow: none;
  filter: drop-shadow(1px 0 0 #ffd21f) drop-shadow(-1px 0 0 #ffd21f) drop-shadow(0 1px 0 #ffd21f) drop-shadow(0 -1px 0 #ffd21f) drop-shadow(0 0 2px rgba(255, 210, 31, .6));
  animation: nc-glow 2.2s ease-in-out infinite;
}
/* the Pulse: the name glows brighter and softer (a halo from its own letters, so any colour, the rainbow too) */
.nc-pulse:not(.lv-admin) { animation: nc-pulse 2.4s ease-in-out infinite; }
@keyframes nc-pulse {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .15)) brightness(1); }
  50% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)) brightness(1.25); }
}
.lv-admin.nc-pulse { animation: nc-glow-admin 2.4s ease-in-out infinite; }
@keyframes nc-glow-admin {
  0%, 100% { text-shadow: -1px -1px 0 #ffd21f, 1px -1px 0 #ffd21f, -1px 1px 0 #ffd21f, 1px 1px 0 #ffd21f, 0 -1px 0 #ffd21f, 0 1px 0 #ffd21f, -1px 0 0 #ffd21f, 1px 0 0 #ffd21f, 0 0 4px rgba(255, 210, 31, .6); }
  50% { text-shadow: -1px -1px 0 #fff3a8, 1px -1px 0 #fff3a8, -1px 1px 0 #fff3a8, 1px 1px 0 #fff3a8, 0 -1px 0 #fff3a8, 0 1px 0 #fff3a8, -1px 0 0 #fff3a8, 1px 0 0 #fff3a8, 0 0 12px rgba(255, 236, 140, 1); }
}
/* the Shop dashboard (Super Admins) */
.sa-open { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.sa-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.sa-card { background: rgba(0,0,0,.25); border: 1px solid var(--edge, #4a3d2a); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.sa-card b { font-size: 18px; }
.sa-owners { font-size: 12px; } .sa-owners b { font-size: 12px; }
.sa-scroll { overflow-x: auto; max-width: 100%; }
.sa-table input[type=number] { width: 7em; } .sa-table input[name=bonus] { width: 10em; }
.sa-dollar { margin-right: 2px; }
.sa-table input[type=checkbox], .sa-ref input[type=checkbox] { width: 18px; height: 18px; min-height: 0; }
.sa-ref { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.sa-ref input[type=number] { width: 6em; }
.sa-actions { gap: 8px; margin: 8px 0 14px; }
.sh-invite { background: rgba(0,0,0,.2); border: 1px solid var(--edge, #4a3d2a); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.sh-invite-link { gap: 6px; margin: 6px 0; }
.sh-invite-link input { flex: 1; min-width: 0; }
.ref-note { color: var(--gold, #d4a52a) !important; }
.sh-glows { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.sh-glow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; min-width: 0; }
.sh-glow.on { outline: 2px solid var(--gold, #d4a52a); }
.sh-glow-demo { font-size: 16px; font-weight: 700; }

.sel-type { display: block; width: 100%; margin: 6px 0 2px; }

/* ---------- in-game chat window: movable, resizable, per-channel player list ---------- */
#chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#chat .cw-body { flex: 1; min-height: 0; display: flex; }
#chat .cw-players { display: none; width: 160px; flex: none; flex-direction: column; min-height: 0; border-right: 1px solid var(--edge-dark, #000); background: rgba(0, 0, 0, .18); }
#chat.show-players .cw-players { display: flex; }
#chat .cw-ptitle { flex: none; padding: 4px 6px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid rgba(226, 189, 98, .12); }
#chat .cw-plist { flex: 1; min-height: 0; overflow: auto; padding: 2px; }
#chat .cw-chat { flex: 1; min-width: 0; min-height: 0; padding: 6px; display: flex; flex-direction: column; }
#chat .who { display: flex; align-items: center; gap: 3px; padding: 2px 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; cursor: pointer; min-height: 22px; font-size: 12px; }
#chat .who:hover { background: rgba(226, 189, 98, .12); }
#chat .who.sel { background: rgba(226, 189, 98, .22); }
#chat .who .flag { width: 16px; height: 10px; flex: none; margin-right: 3px; image-rendering: pixelated; }
#chat .who .wname { flex: none; font-weight: 600; }
#chat .who .wclan { min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: 3px; color: #c9a6ff; font-size: 11px; }
.who-empty { padding: 8px; font-size: 12px; color: var(--muted); }

@media (max-width: 760px), (max-height: 520px) {
  #chat .cw-players { width: 40%; max-width: 170px; }
  #chat .who { min-height: 30px; }
}

/* ---------- chat docking: the stage (map, minimap, zoom, panel) shrinks to make room ---------- */
#game-stage { position: absolute; inset: 0; }
.dock-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dock-ico .f { fill: currentColor; stroke: none; opacity: .85; }
#dock-menu { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 2px; padding: 5px; min-width: 200px; background: var(--panel2, #2a2016);
  border: 1px solid var(--edge, #6b5330); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .6); }
#dock-menu[hidden] { display: none; }
#dock-menu button { display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 0; border-radius: 6px; color: var(--text); padding: 7px 10px; min-height: 36px; }
#dock-menu button:hover, #dock-menu button.on { background: rgba(226, 189, 98, .16); }
#dock-menu button.on { color: var(--gold); }

/* players pane width (draggable divider) */
#chat .cw-players { width: var(--cw-pw, 160px); }
#chat .cw-split { display: none; flex: none; width: 6px; margin: 0 -3px; z-index: 2; cursor: col-resize; touch-action: none; position: relative; }
#chat.show-players .cw-split { display: block; }
#chat .cw-split::after { content: ""; position: absolute; top: 50%; left: 2px; width: 2px; height: 36px; margin-top: -18px; border-radius: 2px; background: rgba(226, 189, 98, .35); }
#chat .cw-split:hover::after { background: rgba(226, 189, 98, .8); }

/* hover card for a player row */
#who-card { position: fixed; z-index: 75; max-width: 320px; padding: 9px 11px; background: var(--panel2, #2a2016); border: 1px solid var(--edge, #6b5330);
  border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .6); pointer-events: none; font-size: 13px; }
#who-card[hidden] { display: none; }
#who-card .wc-head { display: flex; align-items: center; gap: 7px; font-size: 15px; }
#who-card .flag { width: 22px; height: 14px; image-rendering: pixelated; }
#who-card .wc-sub { color: var(--muted); margin: 3px 0 2px; }
#who-card .wc-awards { display: grid; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(226, 189, 98, .18); }
#who-card .wc-awards div { display: flex; align-items: center; gap: 7px; }
#player-menu .pm-awards { display: flex; flex-wrap: wrap; gap: 3px; flex-basis: 100%; }

/* ---------- world map (zoomable, tap to jump) ---------- */
#minimap-wrap { position: absolute; }
#btn-worldmap { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; min-height: 0; padding: 0; display: grid; place-items: center;
  border-radius: 6px; background: rgba(20, 14, 8, .82); border: 1px solid var(--edge); color: var(--gold); }
#worldmap { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: rgba(11, 8, 5, .97); }
#worldmap[hidden] { display: none; }
#worldmap .wm-head { display: flex; align-items: center; gap: 10px; flex: none; padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
  background: rgba(30, 22, 14, .95); border-bottom: 1px solid var(--edge); color: var(--gold); }
#worldmap .wm-head .spacer { flex: 1; }
#worldmap .wm-hint { color: var(--muted); font-size: 12px; }
#worldmap .wm-x { font-size: 18px; line-height: 1; padding: 2px 10px; }
#worldmap .wm-chips { display: flex; gap: 6px; align-items: center; flex: none; overflow-x: auto; padding: 6px max(10px, env(safe-area-inset-left)); scrollbar-width: none; border-bottom: 1px solid rgba(226, 189, 98, .15); }
#worldmap .wm-chips[hidden] { display: none; }
#worldmap .wm-lbl { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-left: 4px; }
#worldmap .wm-chip { flex: none; min-height: 30px; padding: 3px 10px; border-radius: 15px; font-size: 12px; background: rgba(0, 0, 0, .35); }
#worldmap .wm-chip.mine { border: 1px solid #ffd23f; color: #ffe9a0; }
#worldmap .wm-chip.ally { border: 1px solid #4fd36b; color: #bff5c9; }
#worldmap .wm-canvas { flex: 1; min-height: 0; width: 100%; touch-action: none; cursor: crosshair; display: block; }
@media (max-width: 760px), (max-height: 520px) { #worldmap .wm-hint { display: none; } }

/* ---------- alliance permissions ---------- */
.alliance .al-perms { display: grid; gap: 4px; margin: 6px 0; }
.alliance .al-grants { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ally-note { color: #bff5c9 !important; }

.barracks-req { margin: 2px 0 8px; }
.barracks-status { flex-wrap: wrap; align-items: center; }

/* ---------- market window ---------- */
.market { min-width: min(560px, 86vw); }
.market .mk-status.warn { color: #ffb36b; }
.market section { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.market .mk-table { width: 100%; border-collapse: collapse; }
.market .mk-table th, .market .mk-table td { padding: 3px 6px; text-align: left; border-bottom: 1px solid rgba(226,189,98,.12); white-space: nowrap; }
.market .mk-table input { width: 100%; min-width: 70px; max-width: 130px; }
.market .mk-offer-list tr { cursor: pointer; }
.market .mk-offer-list tr.sel { background: rgba(226,189,98,.16); }
.market .mk-est { margin: 0; color: var(--gold); min-height: 1em; }
.market .mk-lines { margin: 4px 0; padding-left: 18px; }
.market .mk-bar { display: inline-block; width: 80px; height: 6px; background: rgba(0,0,0,.4); border-radius: 3px; vertical-align: middle; margin: 0 6px; overflow: hidden; }
.market .mk-bar i { display: block; height: 100%; background: var(--gold); }
.market .mk-in { padding: 4px 0; border-bottom: 1px solid rgba(226,189,98,.12); }
.market .tag { font-size: 10px; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(226,189,98,.45); border-radius: 4px; padding: 0 4px; }
.mk-open { display: block; width: 100%; margin: 8px 0 12px; }
.mk-need { margin: -6px 0 10px !important; color: #ffb36b !important; }
@media (max-width: 760px) { .market .mk-table th, .market .mk-table td { padding: 3px 3px; } .market .mk-table input { min-width: 60px; } }
/* the market window needs room for its tables */
#modal .dialog:has(.market) { width: min(660px, calc(100vw - 24px)); max-width: none; }
.market { min-width: 0; }
.market .tabs { flex-wrap: wrap; }

/* ---------- training window (barracks / shipyard) ---------- */
#modal .dialog:has(.bk) { width: min(640px, calc(100vw - 20px)); max-width: none; }
.bk { display: flex; flex-direction: column; gap: 8px; }
.bk h4 { margin: 6px 0 0; }
.bk-head { display: flex; align-items: baseline; gap: 10px; }
.bk-head h3 { margin: 0; }
.bk-now { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(226,189,98,.18); }
.bk-now img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.bk-now > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-prog { display: block; height: 7px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; }
.bk-prog i { display: block; height: 100%; background: linear-gradient(90deg, #a07a36, #e2bd62); }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.bk-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 8px; min-height: 0; border-radius: 10px; text-align: center;
  background: rgba(0,0,0,.28); border: 1px solid rgba(226,189,98,.2); color: var(--text); }
.bk-card:hover { border-color: rgba(226,189,98,.55); }
.bk-card.on { border-color: var(--gold); background: rgba(226,189,98,.14); box-shadow: 0 0 0 1px var(--gold) inset; }
.bk-card img { width: 48px; height: 48px; image-rendering: pixelated; }
.bk-name { font-weight: 700; color: var(--gold); }
.bk-stats { display: grid; gap: 2px; width: 100%; }
.bk-stat { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 5px; font-size: 10px; }
.bk-stat i { font-style: normal; color: var(--muted); text-align: right; }
.bk-stat b { height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; }
.bk-stat u { display: block; height: 100%; background: #c9a868; }
.bk-cost { font-size: 11px; color: var(--muted); }
.bk-traits { margin: 0; min-height: 1em; }
.bk-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bk-size { display: flex; flex-direction: column; gap: 3px; }
.bk-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
.bk-stepper button { min-width: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 0; font-size: 18px; }
.bk-stepper input { width: 90px; border: 0; border-radius: 0; text-align: center; font-size: 15px; min-height: 38px; }
.bk-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.bk .chip { min-height: 34px; padding: 4px 12px; border-radius: 17px; font-size: 12px; }
.bk-req { margin: 0; }
.bk-req .short, .bk-now .short { color: #ff8a6b; font-weight: 700; }
.bk-train { display: flex; flex-direction: column; gap: 2px; }
.bk-train input { width: 100%; accent-color: #e2bd62; min-height: 28px; }
.bk-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.bk-scale i { font-style: normal; }
.bk-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bk .pill { min-height: 34px; padding: 4px 14px; border-radius: 17px; background: rgba(0,0,0,.3); }
.bk .pill.on { background: rgba(226,189,98,.22); border-color: var(--gold); color: var(--gold); }
.bk-seg { display: inline-flex; border: 1px solid var(--edge); border-radius: 17px; overflow: hidden; }
.bk-seg button { min-height: 34px; padding: 4px 12px; border: 0; border-radius: 0; background: rgba(0,0,0,.3); }
.bk-seg button.on { background: rgba(226,189,98,.22); color: var(--gold); }
.bk-queue { display: flex; gap: 6px; flex-wrap: wrap; min-height: 30px; align-items: center; }
.bk-q { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 6px; border-radius: 16px; background: rgba(0,0,0,.3); border: 1px solid rgba(226,189,98,.25); font-size: 12px; }
.bk-q img { width: 22px; height: 22px; image-rendering: pixelated; }
.bk-q button { min-height: 0; width: 22px; height: 22px; padding: 0; border-radius: 50%; line-height: 1; }
.bk-workers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-workers input { width: 100px; }
.bk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-actions button { min-height: 44px; font-weight: 700; }
@media (max-width: 760px) {
  .bk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bk-card { padding: 8px 4px 6px; }
  .bk-card img { width: 40px; height: 40px; }
  .bk-stats, .bk-cost { display: none; }
}
.bk .bk-workers { flex-direction: row; justify-content: flex-start; align-items: center; }
.bk h4 .hint { text-transform: none; letter-spacing: 0; font-weight: normal; margin-left: 6px; }
.bk .bk-size { align-items: flex-start; }

/* ---------- chat channel tabs along the bottom (original ChatTabSet), hanging from the input row ---------- */
.chatui .chat-tabs { order: 10; padding: 0; margin-top: -1px; gap: 2px; align-items: flex-start; border-top: 1px solid var(--edge, #6b5330); }
.chatui .chat-tabs .ctab { border-top: 0; border-radius: 0 0 7px 7px; min-height: 26px; padding: 2px 9px 4px; }
.chatui .chat-tabs .ctab.on { box-shadow: inset 0 -2px 0 var(--gold); margin-top: -1px; padding-top: 3px; }
.a2 .chatui .chat-tabs { padding: 0; }
.a2 .chatui .chat-tabs .ctab { border-top: 0; border-radius: 0 0 7px 7px; }

/* ---------- announcement overlay ---------- */
#announce { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(5, 3, 1, .72); backdrop-filter: blur(2px); }
#announce[hidden] { display: none; }
#announce .an-card { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 14px; border: 2px solid var(--gold, #e2bd62);
  background: linear-gradient(#3a2b1a, #22180e); box-shadow: 0 0 0 4px rgba(226, 189, 98, .15), 0 20px 50px rgba(0, 0, 0, .7); padding: 20px 22px 18px; animation: an-pop .22s ease-out; }
@keyframes an-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
#announce .an-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#announce .an-top svg { width: 34px; height: 34px; flex: none; color: var(--gold, #e2bd62); }
#announce h2 { margin: 0; font: 700 20px/1.2 Cinzel, Georgia, serif; letter-spacing: 1px; color: var(--gold, #e2bd62); }
#announce .an-meta { color: var(--muted); font-size: 12px; }
#announce .an-text { margin: 6px 0 16px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
#announce .an-count { color: var(--muted); font-size: 12px; text-align: center; margin: -8px 0 10px; }
#announce button { width: 100%; min-height: 44px; font-weight: 700; font-size: 15px; }
.adm-announce { display: flex; flex-direction: column; gap: 8px; }
.adm-announce textarea { width: 100%; resize: vertical; font: inherit; padding: 8px; border-radius: 8px; }

/* ---------- dockable windows: chat and the selection panel (client/dock.js) ---------- */
.dockwin { display: flex; flex-direction: column; overflow: hidden; }
.dockwin .dw-head { display: flex; align-items: center; gap: 6px; flex: none; padding: 3px 4px 3px 6px; background: rgba(0, 0, 0, .3);
  border-bottom: 1px solid var(--edge-dark, #000); cursor: move; user-select: none; touch-action: none; }
.dockwin .dw-head .spacer { flex: 1; }
.dockwin .dw-grip { width: 8px; height: 14px; flex: none; opacity: .6; background: radial-gradient(circle, #e2bd62 1px, transparent 1.4px) 0 0 / 4px 4px; }
.dockwin .dw-title { font-weight: bold; color: var(--gold); font-size: 12px; letter-spacing: .5px; }
.dockwin .dw-head button { min-height: 22px; padding: 1px 8px; font-size: 11px; }
.dockwin .dw-dock { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; }
.dockwin .cw-x { font-size: 15px; line-height: 1; padding: 0 7px; }
.dockwin:not([data-dock="float"]) .dw-head { cursor: default; }
.dockwin:not([data-dock="float"]) .dw-grip { display: none; }
.dockwin:not([data-dock="float"]) { border-radius: 0; box-shadow: none; min-width: 0; min-height: 0; max-width: none; }
.dockwin[data-dock="left"] { border-width: 0 2px 0 0; }
.dockwin[data-dock="right"] { border-width: 0 0 0 2px; }
.dockwin[data-dock="bottom"] { border-width: 2px 0 0; }
.dockwin .dw-resize { display: none; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; z-index: 3; opacity: .75;
  background: linear-gradient(135deg, transparent 0 45%, #e2bd62 45% 52%, transparent 52% 64%, #e2bd62 64% 71%, transparent 71% 83%, #e2bd62 83% 90%, transparent 90%); }
.dockwin .dw-resize:hover { opacity: 1; }
@media (min-width: 761px) and (min-height: 521px) { .dockwin[data-dock="float"] .dw-resize { display: block; } }
.dockwin .dw-edge { display: none; position: absolute; z-index: 3; touch-action: none; }
.dockwin:not([data-dock="float"]) .dw-edge { display: block; }
.dockwin[data-dock="bottom"] .dw-edge { left: 0; right: 0; top: -6px; height: 14px; cursor: ns-resize; }
.dockwin[data-dock="left"] .dw-edge { top: 0; bottom: 0; right: -6px; width: 14px; cursor: ew-resize; }
.dockwin[data-dock="right"] .dw-edge { top: 0; bottom: 0; left: -6px; width: 14px; cursor: ew-resize; }
.dockwin .dw-edge i { position: absolute; inset: 0; margin: auto; border-radius: 3px; background: rgba(226, 189, 98, .6); }
.dockwin[data-dock="bottom"] .dw-edge i { width: 44px; height: 4px; }
.dockwin[data-dock="left"] .dw-edge i, .dockwin[data-dock="right"] .dw-edge i { width: 4px; height: 44px; }
.dockwin .dw-edge:hover i { background: var(--gold); }

/* the selection panel as a window: chrome on top, contents scroll */
#screen-game #panel { display: flex; flex-direction: column; padding: 0; overflow: visible; }
#screen-game #panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; overscroll-behavior: contain; }
#screen-game #panel .dw-title { font-size: 11px; opacity: .85; }

/* floating windows sit clear of docked ones */
#screen-game #panel[data-dock="float"] { left: calc(10px + var(--dock-l, 0px)); bottom: calc(10px + var(--dock-b, 0px)); }
#screen-game #chat[data-dock="float"] { right: calc(10px + var(--dock-r, 0px)); bottom: calc(10px + var(--dock-b, 0px)); }

/* ---------- phones: bigger handles, sheet feel ---------- */
@media (max-width: 760px), (max-height: 520px) {
  .dockwin .dw-head { padding: 4px 6px; min-height: 34px; }
  .dockwin .dw-head button { min-height: 28px; padding: 2px 10px; font-size: 12px; }
  .dockwin[data-dock="bottom"] .dw-edge { top: -14px; height: 30px; }
  .dockwin[data-dock="bottom"] .dw-edge i { width: 56px; height: 5px; background: rgba(226, 189, 98, .8); }
  .dockwin[data-dock="left"] .dw-edge { right: -11px; width: 24px; }
  .dockwin[data-dock="right"] .dw-edge { left: -11px; width: 24px; }
  .dockwin[data-dock="left"] .dw-edge i, .dockwin[data-dock="right"] .dw-edge i { width: 5px; height: 56px; background: rgba(226, 189, 98, .8); }
  .dockwin[data-dock="bottom"] { border-radius: 14px 14px 0 0; box-shadow: 0 -6px 20px rgba(0, 0, 0, .45); }
  #screen-game #panel[data-dock="float"] { left: var(--dock-l, 0px); right: var(--dock-r, 0px); bottom: var(--dock-b, 0px); }
  #screen-game #panel-body { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #screen-game #panel[data-dock="left"] #panel-body { padding-left: max(10px, env(safe-area-inset-left)); }
  #screen-game #chat[data-dock="right"], #screen-game #panel[data-dock="right"] { padding-right: env(safe-area-inset-right); }
  #screen-game #chat[data-dock="left"] { padding-left: env(safe-area-inset-left); }
}
@media (max-height: 520px) and (orientation: landscape) {
  #screen-game #panel[data-dock="float"] { left: calc(max(6px, env(safe-area-inset-left)) + var(--dock-l, 0px)); right: auto; bottom: auto; top: calc(var(--topbar-h, 40px) + 4px); }
}

/* the game bar stays above floating windows */
.game-top { z-index: 7; }
/* let the resize handles reach past the window edge (bigger touch target); contents clip themselves */
.dockwin { overflow: visible; }
.dockwin .dw-head { border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#chat .cw-body { overflow: hidden; }

/* divider between windows docked to the same side */
.dw-split { position: absolute; z-index: 6; width: 12px; margin-left: -6px; cursor: col-resize; touch-action: none; }
.dw-split.h { width: auto; height: 12px; margin: -6px 0 0; cursor: row-resize; }
.dw-split i { position: absolute; inset: 0; margin: auto; width: 4px; height: 44px; border-radius: 3px; background: rgba(226, 189, 98, .55); }
.dw-split.h i { width: 44px; height: 4px; }
.dw-split:hover i { background: var(--gold); }
.dw-split::before { content: ""; position: absolute; inset: 0 5px; background: rgba(226, 189, 98, .18); }
.dw-split.h::before { inset: 5px 0; }
@media (max-width: 760px), (max-height: 520px) {
  .dw-split { width: 24px; margin-left: -12px; }
  .dw-split.h { height: 24px; margin-top: -12px; }
  .dw-split i { background: rgba(226, 189, 98, .8); width: 5px; height: 52px; }
  .dw-split.h i { width: 52px; height: 5px; }
}
.dock-ico .h { fill: currentColor; stroke: none; opacity: .25; }

/* ---------- map text overlay (original Map Text Overlay) ---------- */
#map-overlay { position: absolute; z-index: 3; left: 10px; top: calc(var(--topbar-h, 40px) + 6px); max-width: calc(100% - 340px); pointer-events: none;
  display: flex; flex-direction: column; gap: 1px; font: 700 13px/1.35 Verdana, Geneva, sans-serif; }
#map-overlay .ov-line { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; overflow-wrap: anywhere;
  transition: opacity .8s; animation: ov-in .2s ease-out; }
#map-overlay .ov-line.fade { opacity: 0; }
@keyframes ov-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px), (max-height: 520px) { #map-overlay { max-width: calc(100% - 175px); font-size: 12px; } }
.chatui .chat-map { display: inline-grid; place-items: center; color: var(--muted); }
.chatui .chat-map[hidden] { display: none; }
.chatui .chat-map svg { width: 20px; height: 20px; }
.chatui .chat-map.on { color: var(--gold); background: rgba(226, 189, 98, .18); }

/* multi-select count, fatigue readouts */
#panel .hint.sel-count { margin-bottom: 10px; }
#panel .hint.fat-note { margin: 8px 0 0; }
.fat-note.bad b, .fatigue-box .bad { color: #ff8a6a; }
.fat-note.good, .fatigue-box .good { color: #8fd18f; }
.fatigue-box { margin: 6px 0 8px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .22); font-size: 12px; }
.fatigue-box .fb-row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.fatigue-box .fb-row.sub { padding-left: 10px; color: var(--muted); }
.fatigue-box .fb-row[data-sel] { cursor: pointer; }
.fatigue-box .fb-row[data-sel]:hover span:first-child { text-decoration: underline; }
#panel .fatigue-box .hint { margin: 4px 0 0; }
#panel .hint.bad { color: #ff8a6a; }
#panel .hint.good { color: #8fd18f; }

/* good / meh / bad stat colours, survey button, spacing under "Select all" */
#panel .stats dd.lv-good { color: #6fd36f; }
#panel .stats dd.lv-meh { color: #e8c547; }
#panel .stats dd.lv-bad { color: #ff6b5a; }
#panel .survey-btn { display: block; width: 100%; margin: 6px 0 10px; }
#panel .sel-type { margin-bottom: 10px; }

/* rename in place */
.sel-head .sel-name { min-width: 0; flex: 1; }
.sel-head .title-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sel-head .title-row .title { overflow-wrap: anywhere; }
.rename-btn { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.rename-btn svg { width: 15px; height: 15px; }
.rename-btn:hover, .rename-btn:focus-visible { color: var(--gold); background: rgba(226, 189, 98, .15); }
.rename-form { display: flex; gap: 4px; flex: 1; min-width: 0; }
.rename-form input { flex: 1; min-width: 0; }
@media (pointer: coarse) { .rename-btn { width: 34px; height: 34px; } .rename-btn svg { width: 18px; height: 18px; } }

/* ---------- Edit Flag ---------- */

.fe-top { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
/* the Flag Editor (Shop): a 16 x 10 grid to draw on, its tools and the flag at its real size */
.fd-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.fd-grid { width: min(320px, 100%); aspect-ratio: 16 / 10; image-rendering: pixelated; border: 2px solid var(--edge-dark, #000); box-shadow: 0 2px 8px rgba(0,0,0,.4); touch-action: none; cursor: crosshair; flex: none; }
.fd-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fd-real2 { width: 32px !important; height: 20px !important; }
.fd-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.fd-tools [aria-pressed="true"] { outline: 2px solid var(--gold); }
@media (max-width: 560px) { .fd-top { flex-direction: column; } .fd-side { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.fe-big { width: 160px; height: 100px; image-rendering: pixelated; border: 2px solid var(--edge-dark, #000); box-shadow: 0 2px 8px rgba(0,0,0,.4); flex: none; }
.fe-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fe-real { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.fe-real canvas { width: 16px; height: 10px; image-rendering: pixelated; }
.fe-row { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.fe-row > span { width: 64px; flex: none; color: var(--muted); font-size: 12px; }
.fe-sws { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; flex: 1; }
.fe-sw { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid rgba(0,0,0,.6); border-radius: 4px; background: var(--sw); cursor: pointer; }
.fe-sw.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.fe-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; max-height: 210px; overflow-y: auto; padding: 4px; background: rgba(0,0,0,.25); border-radius: 6px; }
.fe-d { padding: 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; cursor: pointer; display: grid; place-items: center; }
.fe-d canvas { width: 32px; height: 20px; image-rendering: pixelated; }
.fe-d:hover { background: rgba(226,189,98,.12); }
.fe-d.on { border-color: var(--gold); background: rgba(226,189,98,.2); }
@media (max-width: 520px) {
  .fe-big { width: 112px; height: 70px; }
  .fe-row { flex-direction: column; align-items: stretch; gap: 3px; }
  .fe-sws { grid-template-columns: repeat(8, 1fr); }
  .fe-designs { max-height: 34vh; }
}

/* ---------- Rankings (lobby) ---------- */
#lobby-rankings { min-height: 0; }
.rk { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; width: 100%; min-height: 0; height: 100%; }
.rk-nav { overflow-y: auto; min-height: 0; padding-right: 4px; }
.rk-nav h4 { margin: 8px 0 4px; color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.rk-nav h4:first-child { margin-top: 0; }
.rk-item { display: block; width: 100%; text-align: left; padding: 5px 8px; margin: 1px 0; border: 0; border-radius: 5px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 12px; }
.rk-item:hover { background: rgba(226, 189, 98, .1); }
.rk-item.on { background: rgba(226, 189, 98, .22); color: var(--gold); font-weight: bold; }
.rk-mobile { display: none; }
.rk-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.rk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.rk-head h3 { margin: 0; color: var(--gold); font-size: 15px; }
.rk-table-wrap { overflow-y: auto; min-height: 0; flex: 1; border-radius: 6px; background: rgba(0, 0, 0, .2); }
.rk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rk-table th { position: sticky; top: 0; background: #2a2114; color: var(--muted); font-weight: normal; text-align: left; padding: 5px 8px; }
.rk-table td { padding: 4px 8px; border-top: 1px solid rgba(255, 255, 255, .05); }
.rk-table .rk-val { text-align: right; font-variant-numeric: tabular-nums; }
.rk-table .rk-pos { width: 36px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rk-table tr.top1 .rk-pos { color: #f4c542; font-weight: bold; }
.rk-table tr.top2 .rk-pos { color: #d0d4dc; font-weight: bold; }
.rk-table tr.top3 .rk-pos { color: #d9925a; font-weight: bold; }
.rk-table tr.me td { background: rgba(226, 189, 98, .16); }
.rk-name { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rk-name:hover > span { text-decoration: underline; }
.rk-name canvas.flag { width: 16px; height: 10px; image-rendering: pixelated; }
.rk-tag { color: var(--muted); }
.rk-empty { padding: 16px 4px; }
.rk-foot { margin: 6px 0 0; font-size: 11px; }
@media (max-width: 760px) {
  .rk { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .rk-nav { display: none; }
  .rk-mobile { display: block; }
  .rk-mobile select { width: 100%; padding: 8px; font-size: 15px; }
  .rk-table { font-size: 13px; }
  .rk-table td { padding: 7px 8px; }
}

/* iOS home-screen app with the translucent status bar: in portrait the page box comes out one status-bar
   height short of the screen, leaving an empty strip at the bottom. 100vh is the full screen there. */
@supports (-webkit-touch-callout: none) {   /* iOS only */
  @media (display-mode: standalone), (display-mode: fullscreen) {
    html, body { height: 100vh; }
    .screen { bottom: auto; height: 100vh; }
  }
}

/* ---------- minimap window: below the top bar by default, movable (grip) and resizable (corner) ---------- */
#minimap-wrap { top: calc(var(--topbar-h, 40px) + 6px); right: max(8px, env(safe-area-inset-right)); }
#minimap-wrap .mm-grip, #minimap-wrap .mm-size { position: absolute; z-index: 1; width: 26px; height: 26px; min-height: 0; padding: 0; display: grid; place-items: center;
  border-radius: 6px; background: rgba(20, 14, 8, .82); border: 1px solid var(--edge); color: var(--gold); touch-action: none; opacity: .75; }
#minimap-wrap .mm-grip { top: 5px; left: 5px; cursor: move; }
#minimap-wrap .mm-size { bottom: 5px; left: 5px; cursor: nesw-resize; }
#minimap-wrap .mm-grip svg, #minimap-wrap .mm-size svg { width: 15px; height: 15px; }
#minimap-wrap:hover .mm-grip, #minimap-wrap:hover .mm-size, #minimap-wrap.dragging .mm-grip, #minimap-wrap.dragging .mm-size { opacity: 1; }
#minimap-wrap.dragging { box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgba(0, 0, 0, .6); }
@media (pointer: coarse) {
  #minimap-wrap .mm-grip, #minimap-wrap .mm-size, #btn-worldmap { width: 30px; height: 30px; opacity: 1; }
}
/* zoom buttons live at the bottom-right of the map, out of the minimap's way wherever it is */
#zoom-ctl, #minimap-wrap[hidden] + #zoom-ctl { top: auto; bottom: 10px; right: max(10px, env(safe-area-inset-right)); }

/* minimap zoom: small - / + at the bottom-right corner */
#minimap-wrap .mm-zoom { position: absolute; z-index: 1; right: 5px; bottom: 5px; display: flex; border: 1px solid var(--edge); border-radius: 6px; overflow: hidden;
  background: rgba(20, 14, 8, .82); opacity: .75; }
#minimap-wrap:hover .mm-zoom { opacity: 1; }
#minimap-wrap .mm-zoom button { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--gold);
  font: bold 15px/1 Verdana, sans-serif; display: grid; place-items: center; }
#minimap-wrap .mm-zoom button + button { border-left: 1px solid var(--edge); }
#minimap-wrap .mm-zoom button:disabled { opacity: .35; cursor: default; }
#minimap-wrap .mm-zoom button:not(:disabled):hover { background: rgba(226, 189, 98, .2); }
@media (pointer: coarse) { #minimap-wrap .mm-zoom { opacity: 1; } #minimap-wrap .mm-zoom button { width: 28px; height: 28px; font-size: 17px; } }

/* Channels window: join / leave toggles */
.chan-picker .chan-tog { position: relative; }
.chan-picker .chan-tog.on { background: rgba(226, 189, 98, .25); border-color: var(--gold); color: var(--gold); font-weight: bold; }
.chan-picker .chan-tog.on::after { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #6fd36f; }
.chan-picker .chan-tog.busy { opacity: .55; }
.chan-picker .chan-grid { margin-bottom: 6px; }

/* iOS: never inflate text on its own (it did after rotating to landscape, blowing up the chat) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* on-screen keyboard open: the screen is only the visible area above it (see fitKeyboard in app.js) */
html.kb-open .screen { top: var(--app-top, 0px); bottom: auto; height: var(--app-h, 100%); }

/* ---------- Notes (lobby page and in-game window) ---------- */
#lobby-notes { min-height: 0; }
.notes { width: 100%; height: 100%; min-height: 0; }
.nt { display: grid; grid-template-columns: 170px minmax(220px, 1fr) minmax(0, 1.4fr); gap: 10px; height: 100%; min-height: 0; }
.nt-boards { overflow-y: auto; min-height: 0; }
.nt-boards h4 { margin: 0 0 4px; color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.nt-board { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 6px 8px; margin: 1px 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.nt-board:hover { background: rgba(226, 189, 98, .1); }
.nt-board.on { background: rgba(226, 189, 98, .22); color: var(--gold); font-weight: bold; }
.nt-badge { min-width: 18px; padding: 1px 5px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; text-align: center; }
.nt-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.nt-pickwrap { display: none; }
.nt-tabs { display: flex; gap: 2px; margin-bottom: 6px; flex: none; }
.nt-tabs button { flex: 1; min-height: 28px; padding: 3px 4px; font-size: 12px; border-radius: 5px; }
.nt-tabs button.on { background: rgba(226, 189, 98, .25); color: var(--gold); border-color: var(--gold); }
.nt-list { flex: 1; min-height: 0; overflow-y: auto; border-radius: 6px; background: rgba(0, 0, 0, .2); }
.nt-row { display: block; width: 100%; text-align: left; padding: 6px 8px 6px calc(8px + var(--depth, 0) * 14px); border: 0; border-bottom: 1px solid rgba(255, 255, 255, .05);
  border-radius: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.nt-row:hover { background: rgba(226, 189, 98, .08); }
.nt-row.on { background: rgba(226, 189, 98, .18); }
.nt-row .nt-subj { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-row.unread .nt-subj { font-weight: bold; color: var(--gold); }
/* unread marker on notes and boards: a small red circle with a white "!" */
.nt-new { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; margin-right: 6px; border-radius: 50%; background: #d8402f;
  color: #fff; font: bold 11px/1 Verdana, sans-serif; font-style: normal; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.nt-board > span { display: inline-flex; align-items: center; min-width: 0; }
.nt-row .nt-meta { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-row .nt-meta em { font-style: normal; color: #8fc3e0; }
.nt-re { font-style: normal; color: var(--muted); margin-right: 4px; }
.nt-empty, .nt-pickone { padding: 14px 10px; }
.nt-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; flex: none; }
.nt-bar .danger { margin-left: auto; }
.nt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nt-head h3 { margin: 0; color: var(--gold); font-size: 15px; overflow-wrap: anywhere; }
.nt-back { display: none; }
.nt-info { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 8px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .2); font-size: 12px; }
.nt-info dt { color: var(--muted); }
.nt-info dd { margin: 0; overflow-wrap: anywhere; }
.nt-body { flex: 1; min-height: 60px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, .25); line-height: 1.5; }
.nt-compose { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }
.nt-compose label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 12px; }
.nt-compose label[hidden] { display: none; }
.nt-compose textarea { resize: vertical; min-height: 120px; font: inherit; padding: 8px 10px; }
.nt-count { margin-left: auto; }
/* unread count on the Notes buttons */
.tab-badge { display: inline-block; margin-left: 5px; min-width: 16px; padding: 0 5px; border-radius: 8px; background: #d8402f; color: #fff; font: bold 10px/16px Verdana, sans-serif; text-align: center; vertical-align: 1px; }
.tab-badge[hidden] { display: none; }
/* in a game: a window over the map */
#notes-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
#notes-overlay[hidden] { display: none; }
.nt-win { display: flex; flex-direction: column; width: min(1100px, 100%); height: min(720px, 100%); background: var(--panel2, #2a2016); border: 2px solid var(--edge, #6b5330); border-radius: 10px; box-shadow: 0 12px 36px rgba(0, 0, 0, .7); }
.nt-win-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid rgba(226, 189, 98, .2); color: var(--gold); }
.nt-win-body { flex: 1; min-height: 0; padding: 10px; }
/* phones: one pane at a time (boards as a dropdown, then the list, then the note) */
@media (max-width: 760px) {
  .nt { grid-template-columns: 1fr; }
  .nt-boards { display: none; }
  .nt-pickwrap { display: block; margin-bottom: 6px; }
  .nt-pickwrap select { width: 100%; padding: 8px; font-size: 15px; }
  .nt[data-pane=list] .nt-reader, .nt[data-pane=note] .nt-listcol { display: none; }
  .nt-back { display: inline-block; }
  .nt-row { padding-top: 9px; padding-bottom: 9px; }
  #notes-overlay { padding: max(6px, env(safe-area-inset-top)) 6px 6px; }
  .nt-win { height: 100%; }
}

/* ---------- Clan page: My Clan / All Clans (original Clan List) ---------- */
.cl-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex: none; }
.cl-tabs button { min-height: 32px; padding: 4px 14px; border-radius: 6px; }
.cl-tabs button.on { background: rgba(226, 189, 98, .25); color: var(--gold); border-color: var(--gold); font-weight: bold; }
.cl-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: rgba(0, 0, 0, .35); font-size: 11px; }
#lobby-clan { flex-direction: column; min-height: 0; }
.cl-browser { flex: 1; min-height: 0; display: flex; }
.cl-wrap { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 12px; width: 100%; min-height: 0; }
.cl-listcol { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.cl-search { flex: none; }
.cl-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.cl-card { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(226, 189, 98, .15); background: rgba(0, 0, 0, .2); color: var(--text); font: inherit; cursor: pointer; }
.cl-card[hidden] { display: none; }
.cl-card:hover { border-color: rgba(226, 189, 98, .45); }
.cl-card.on { border-color: var(--gold); background: rgba(226, 189, 98, .16); }
.cl-card .cl-name { display: block; font-weight: bold; color: var(--gold); }
.cl-card .cl-name em { font-style: normal; font-weight: normal; font-size: 11px; color: #8fd18f; margin-left: 4px; }
.cl-card .cl-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #6fd36f; margin-right: 4px; vertical-align: 0; }
.cl-detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cl-pick { padding: 16px 4px; }
.cl-head { display: flex; gap: 10px; align-items: flex-start; flex: none; }
.cl-head h3 { margin: 0 0 2px; color: var(--gold); font-size: 17px; }
.cl-head .hint { margin: 0; }
.cl-head a { color: #8fc3e0; overflow-wrap: anywhere; }
.cl-back { display: none; }
.cl-dtabs { display: flex; gap: 4px; margin: 10px 0 6px; flex: none; }
.cl-dtabs button { min-height: 28px; padding: 3px 14px; border-radius: 6px; }
.cl-dtabs button.on { background: rgba(226, 189, 98, .25); color: var(--gold); border-color: var(--gold); }
.cl-table-wrap { flex: 1; min-height: 0; overflow-y: auto; border-radius: 6px; background: rgba(0, 0, 0, .2); }
.cl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cl-table th { position: sticky; top: 0; background: #2a2114; text-align: left; padding: 0; color: var(--muted); font-weight: normal; }
.cl-table th > button, .cl-table th > .cl-th { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 0; background: transparent; color: var(--muted); text-align: left; font: inherit; min-height: 0; }
.cl-table th .cl-sort { cursor: pointer; }
.cl-table th .cl-sort:hover { color: var(--text); }
.cl-table th .cl-sort.on { color: var(--gold); }
.cl-table th .cl-sort.on::after { content: " \25BE"; }
.cl-table td { padding: 5px 8px; border-top: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.cl-rank { width: 28px; color: var(--muted); text-align: center; }
.cl-date { color: var(--muted); white-space: nowrap; }
.cl-who { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex-wrap: wrap; }
.cl-who:hover > span:not(.dot) { text-decoration: underline; }
.cl-who canvas.flag { width: 16px; height: 10px; image-rendering: pixelated; }
.cl-score { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin: 0 0 6px; overflow-y: auto; min-height: 0; }
.cl-score div { padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, .22); }
.cl-score dt { color: var(--muted); font-size: 11.5px; }
.cl-score dd { margin: 2px 0 0; font-size: 16px; font-weight: bold; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .cl-wrap { grid-template-columns: 1fr; }
  .cl-wrap[data-pane=list] .cl-detail, .cl-wrap[data-pane=detail] .cl-listcol { display: none; }
  .cl-back { display: inline-block; }
  .cl-card { padding: 11px 12px; }
  .cl-table .cl-date { display: none; }
  .cl-score { grid-template-columns: 1fr 1fr; }
}

/* ---------- emoji picker (chat bar) ---------- */
.chatui .chat-emoji, .chatui .chat-pic { display: inline-grid; place-items: center; color: var(--muted); }
.chatui .chat-pic[hidden] { display: none; }
.chatui .chat-emoji svg, .chatui .chat-pic svg { width: 20px; height: 20px; }
.chatui .chat-emoji:hover, .chatui .chat-emoji.on, .chatui .chat-pic:hover { color: var(--gold); }
.emoji-pop { position: fixed; z-index: 80; display: flex; flex-direction: column; background: var(--panel2, #2a2016); border: 1px solid var(--edge, #6b5330);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .6); overflow: hidden; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.emoji-pop[hidden] { display: none; }
.ep-tabs { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid rgba(226, 189, 98, .15); flex: none; overflow-x: auto; scrollbar-width: none; }
.ep-tabs button { flex: 1; min-width: 32px; min-height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 18px; cursor: pointer; }
.ep-tabs button:hover { background: rgba(226, 189, 98, .15); }
.ep-body { flex: 1; overflow-y: auto; padding: 4px 6px 8px; }
.ep-sec h5 { margin: 6px 2px 2px; color: var(--muted); font: bold 10px Verdana, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
.ep-grid button { height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 21px; line-height: 1; cursor: pointer; }
.ep-grid button:hover { background: rgba(226, 189, 98, .18); }
@media (pointer: coarse) { .ep-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); } .ep-grid button { height: 40px; font-size: 24px; } }

/* several kinds of facility selected: breakdown by kind (tap to narrow) */
.fac-kinds { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.fac-kind { min-height: 28px; padding: 3px 10px; border-radius: 14px; font-size: 12px; }
.fac-kind:hover { border-color: var(--gold); color: var(--gold); }
@media (pointer: coarse) { .fac-kind { min-height: 34px; padding: 5px 12px; } }

/* city panel: delete city */
#panel .del-city { display: block; width: 100%; margin-top: 8px; }
#panel .hint.del-city-hint { margin-top: 8px; }

/* ---------- in-game Community window (Notes / Clan / Rankings / Admin) ---------- */
#community-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
#community-overlay[hidden] { display: none; }
.cm-head { gap: 8px; }
.cm-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.cm-tabs button { min-height: 30px; padding: 3px 14px; border-radius: 6px; white-space: nowrap; }
.cm-tabs button.on { background: rgba(226, 189, 98, .25); color: var(--gold); border-color: var(--gold); font-weight: bold; }
.cm-body { display: flex; min-height: 0; overflow: hidden; }
.cm-body > * { flex: 1; min-height: 0; min-width: 0; }
.cm-body > .page { display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.cm-body .page h2 { color: var(--gold); margin: 0; font: bold 18px Georgia, serif; }
.cm-body .page h3 { color: var(--gold); margin: 8px 0 4px; font-size: 14px; }
.cm-body .page h4 { color: var(--muted); margin: 8px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.cm-body .page .adm-card { background: var(--well, rgba(0,0,0,.25)); border: 1px solid var(--line, rgba(226,189,98,.18)); border-radius: 8px; }
@media (max-width: 760px) {
  #community-overlay { padding: max(6px, env(safe-area-inset-top)) 6px 6px; }
  #community-overlay .nt-win { height: 100%; }
}

/* Artifacts window: tap an artifact for a 3x3 map preview */
.art-table tr.art-row { cursor: pointer; }
.art-table tr.art-row:hover td { background: rgba(226, 189, 98, .08); }
.art-table tr.art-row.on td { background: rgba(226, 189, 98, .18); }
.art-preview { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 10px; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.art-preview[hidden] { display: none; }
.art-preview canvas { width: 216px; height: 216px; flex: none; image-rendering: pixelated; border: 2px solid var(--edge, #6b5330); border-radius: 4px; background: #000; }
.art-preview h4 { margin: 0 0 6px; color: var(--gold); font-size: 15px; text-transform: none; letter-spacing: 0; }
.art-preview dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; font-size: 12.5px; }
.art-preview dt { color: var(--muted); }
.art-preview dd { margin: 0; }
@media (max-width: 520px) {
  .art-preview { flex-direction: column; align-items: center; }
  .art-preview canvas { width: min(216px, 70vw); height: min(216px, 70vw); }
}
.art-table a { color: var(--gold); }

/* troop panel: Pickup / Drop artifact */
#panel .art-hold { display: block; width: 100%; margin: 6px 0; border-color: var(--gold); color: var(--gold); }

/* troop groups: buttons over the map for the groups that are set, and the "save as group" row */
#group-bar { position: absolute; left: max(10px, env(safe-area-inset-left)); top: calc(var(--topbar-h, 40px) + 6px); z-index: 4; display: flex; gap: 4px; }
#game-stage:has(#group-bar:not([hidden])) #map-overlay { top: calc(var(--topbar-h, 40px) + 44px); }
#group-bar[hidden] { display: none; }
#group-bar button { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 6px; font: bold 14px/1 Georgia, serif; color: var(--gold); background: rgba(20, 14, 6, .82); border: 1px solid rgba(226, 189, 98, .55); cursor: pointer; }
#group-bar button:hover { background: rgba(60, 44, 16, .9); }
#panel .grp-row { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin: 6px 0; }
#panel .grp-row .hint { margin: 0 4px 0 0; }
#panel .grp-row .grp { min-width: 26px; padding: 2px 0; }
#panel .grp-row .grp.on { border-color: var(--gold); color: var(--gold); background: rgba(226, 189, 98, .18); }
/* Find (original Find window): kind, Owned / Allied / Non-Allied / All, a tree by type, ID/Name or x,y */
.find-kinds { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 8px; }
.find-kinds label { display: inline-flex; align-items: center; gap: 4px; }
.find-whose { display: flex; gap: 3px; margin-bottom: 6px; }
.find-whose button { flex: 1; min-height: 28px; padding: 2px 6px; border-radius: 6px 6px 0 0; }
.find-whose button.on { background: rgba(226, 189, 98, .25); color: var(--gold); border-color: var(--gold); font-weight: bold; }
.find-tree { height: min(46vh, 380px); overflow: auto; padding: 4px; border: 1px solid rgba(226, 189, 98, .3); border-radius: 4px; background: rgba(0, 0, 0, .3); font-size: 13px; }
.find-tree .hint { margin: 6px; }
.find-branch > summary { cursor: pointer; padding: 3px 4px; font-weight: bold; color: var(--gold); list-style-position: inside; }
.find-branch > div { margin-left: 18px; border-left: 1px dotted rgba(226, 189, 98, .35); }
.find-item { padding: 3px 8px; cursor: pointer; border-radius: 3px; user-select: none; }
.find-item:hover { background: rgba(226, 189, 98, .1); }
.find-item.on { background: rgba(226, 189, 98, .3); color: #fff; }
.find-sub { color: var(--muted); font-size: 12px; }
.find-owner { color: #e8a060; }
.find-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.find-bottom .find-q { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 180px; margin: 0; }
.find-bottom .find-q input { flex: 1; min-width: 0; }
.find-xy { display: none; gap: 8px; }
.find-xy label { display: flex; align-items: center; gap: 4px; margin: 0; }
.find-xy input { width: 80px; }
.find-mode-xy .find-xy { display: flex; }
.find-mode-xy .find-q, .find-mode-xy .find-whose { display: none; }
.find-close { display: inline-flex; align-items: center; gap: 5px; margin: 0; white-space: nowrap; }
.keys-help { max-height: 65vh; overflow: auto; }
.keys-help h4 { margin: 10px 0 4px; color: var(--gold); }
.keys-help td:first-child { white-space: nowrap; width: 1%; padding-right: 14px; }
.keys-help kbd { display: inline-block; padding: 1px 6px; border: 1px solid rgba(226, 189, 98, .45); border-bottom-width: 2px; border-radius: 4px; font: 12px/1.4 ui-monospace, Consolas, monospace; background: rgba(0, 0, 0, .3); }
.modal .row2, dialog .row2, .row2 { display: flex; gap: 10px; }
.row2 label { flex: 1; }
.dialog .find-kinds label, .dialog .find-close, .dialog .find-q, .dialog .find-xy label { flex-direction: row; align-items: center; color: var(--text); cursor: pointer; }
.dialog .find-kinds input, .dialog .find-close input { min-height: 0; width: 16px; height: 16px; flex: none; margin: 0; }

/* after a box-select: take the other kind (troops / facilities) in the same box */
#panel .box-swap { display: block; width: 100%; margin: 0 0 8px; border-color: var(--gold); color: var(--gold); }

/* finished / closed games and watchers: look-only notice over the map */
#view-banner { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--topbar-h, 40px) + 6px); z-index: 4; max-width: min(560px, calc(100% - 340px)); padding: 6px 14px; border-radius: 6px;
  background: rgba(60, 20, 10, .88); border: 1px solid #c86040; color: #ffd8c0; font-size: 13px; text-align: center; pointer-events: none; }
@media (max-width: 760px) { #view-banner { max-width: calc(100% - 20px); top: auto; bottom: 8px; font-size: 12px; } }

/* Artifacts window: alliance, last-seen and go-there link */
.art-table .art-team, .art-table .art-last { color: var(--muted); font-size: 12px; }
.art-table .art-go { white-space: nowrap; }

/* markers: on the survey panel and in Find */
#panel .mk-panel { margin-top: 8px; }
#panel .mk-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid rgba(226, 189, 98, .2); }
#panel .mk-row > div { flex: 1; min-width: 0; }
#panel .mk-row .hint { margin: 0; font-size: 11px; }
.find-mk-acts { display: none; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.find-mode-mk .find-mk-acts { display: flex; }
.find-mode-mk .find-whose { display: none; }

/* verified staff badge (Super Admins) */
i.verified { display: inline-block; width: var(--s, 14px); height: var(--s, 14px); margin: 0 2px; vertical-align: -2px; flex: none; }
i.verified svg { display: block; width: 100%; height: 100%; }
i.vip { display: inline-block; width: calc(var(--s, 14px) * 1.7); height: var(--s, 14px); margin: 0 2px; vertical-align: -2px; flex: none; }
i.vip svg { display: block; width: 100%; height: 100%; }

/* AFK: the Zz badge and the chat bar toggle */
i.afk { display: inline-block; width: var(--s, 14px); height: var(--s, 14px); margin: 0 2px; vertical-align: -2px; flex: none; }
i.afk svg { display: block; width: 100%; height: 100%; }
.chat-form .chat-afk { width: auto; min-width: 34px; padding: 0 6px; font: bold 11px/1 Verdana, sans-serif; letter-spacing: .5px; color: var(--muted); }
.chat-form .chat-afk.on { color: #cfe0ff; background: #3b4a66; border-color: #8fb0e8; }

/* GIFs: the /giphy picker over the chat input, and GIFs in chat lines */
.chatui { position: relative; }
.gif-picker { position: absolute; left: 6px; right: 6px; bottom: 74px; z-index: 30; max-height: min(320px, 60vh); display: flex; flex-direction: column;
  background: var(--panel, #2b2117); border: 1px solid var(--edge, #6b5330); border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .55); }
.gif-picker[hidden] { display: none; }
.gif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; font-size: 12px; }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; padding: 0 8px; overflow: auto; }
.gif-grid button { padding: 0; border: 2px solid transparent; border-radius: 4px; background: #000; cursor: pointer; height: 80px; overflow: hidden; }
.gif-grid button:hover, .gif-grid button:focus-visible { border-color: var(--gold); }
.gif-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-picker .hint { padding: 0 8px; }
.gif-foot { padding: 4px 8px 6px; font-size: 10px; color: var(--muted); text-align: right; letter-spacing: .5px; }
.chat-gif { margin: 3px 0 2px; }
.chat-gif img { display: block; max-width: min(100%, 240px); height: auto; border-radius: 4px; }
/* pictures in chat (chat.js): a bigger preview, click for full size; the chat lights up while one is dragged over */
.chat-pic-msg img { max-width: min(100%, 320px); cursor: zoom-in; background: rgba(0, 0, 0, .25); }
.chatui.chat-drop { outline: 2px dashed var(--gold, #e2bd62); outline-offset: -4px; background: rgba(226, 189, 98, .08); }
.pic-view { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; background: rgba(0, 0, 0, .85); cursor: zoom-out; }
.pic-view img { max-width: 100%; max-height: calc(100% - 50px); object-fit: contain; border-radius: 4px; box-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.pic-view a { color: #e9dfc6; }

/* moderators: delete a chat line (shown on hover; always on touch screens) */
.chat-log .line { position: relative; }
.chat-log .line-del { display: none; margin-left: 6px; padding: 0 3px; height: 16px; vertical-align: -3px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.chat-log .line-del svg { width: 14px; height: 14px; display: block; }
.chat-log .line:hover .line-del, .chat-log .line-del:focus-visible { display: inline-block; }
.chat-log .line-del:hover { color: #ff6b5a; }
@media (pointer: coarse) { .chat-log .line-del { display: inline-block; opacity: .55; } }
.chat-log .line.deleted i { color: var(--muted); }

/* Work Crews window: saved crews */
.crew-saved { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; margin: 4px 0 8px; }
.crew-saved label { flex: 1; min-width: 160px; }

/* Work Crews: every column fits, no sideways scroll */
.crew-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.crew-table th:first-child, .crew-table td:first-child { width: 26%; }
.crew-table th, .crew-table td { padding: 2px 3px; }
.crew-table td:first-child { font-size: 12px; overflow-wrap: anywhere; }
.crew-table input { width: 100%; min-width: 0; min-height: 28px; padding: 3px 4px; font-size: 12.5px; text-align: right; -moz-appearance: textfield; }
.crew-table input::-webkit-outer-spin-button, .crew-table input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* moderator delete button: floats over the right end of the line, so showing it never moves the text */
.chat-log .line-del { display: inline-block !important; position: absolute; right: 2px; top: 0; margin: 0; padding: 1px 3px; height: auto;
  visibility: hidden; background: var(--panel, #2b2117); border-radius: 3px; }
.chat-log .line:hover .line-del, .chat-log .line-del:focus-visible { visibility: visible; }
@media (pointer: coarse) { .chat-log .line-del { visibility: visible; opacity: .6; position: static; margin-left: 6px; background: none; } }
@media (max-width: 520px) {
  .crew-table th:first-child, .crew-table td:first-child { width: 21%; font-size: 11px; }
  .crew-table th { font-size: 10.5px; }
  .crew-table th, .crew-table td { padding: 2px 1px; }
  .crew-table input { padding: 2px 2px; font-size: 11.5px; }
}
.crew-name-row { display: flex; gap: 6px; align-items: center; margin: -2px 0 8px; }
.crew-name-row[hidden] { display: none; }
.crew-name-row input { flex: 1; min-width: 0; }

/* in-page "Are you sure?" (browser confirm() is blocked on many phones / installed apps) */
#ask-confirm { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
#ask-confirm[hidden] { display: none; }
#ask-confirm .ac-box { width: min(380px, 100%); padding: 16px 18px; background: var(--panel2, #3a2c1d); border: 2px solid var(--edge, #6b5330); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
#ask-confirm p { margin: 0 0 14px; line-height: 1.4; }
#ask-confirm .ac-btns { display: flex; gap: 8px; justify-content: flex-end; }
#ask-confirm .ac-btns button { min-width: 90px; min-height: 36px; }

/* a hidden Super Admin, as other Super Admins see them */
.who.hidden-sa { opacity: .55; font-style: italic; }

/* ---------- Support tickets (Community > Support) ---------- */
.sp { --sp-line: rgba(226, 189, 98, .22); display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 12px; height: 100%; min-height: 420px; }
.sp section { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: rgba(0, 0, 0, .22); border: 1px solid var(--sp-line); border-radius: 8px; }
.sp-side { padding: 10px; gap: 8px; }
.sp-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-side-head h2 { margin: 0; color: var(--gold); font: bold 18px Georgia, serif; }
.sp-newbtn { display: inline-flex; align-items: center; gap: 6px; }
.sp-newbtn svg { width: 14px; height: 14px; }
.sp-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-filters[hidden] { display: none; }
.sp-filters button { min-height: 28px; padding: 2px 10px; border-radius: 14px; font-size: 12px; }
.sp-filters button.on { background: rgba(226, 189, 98, .25); color: var(--gold); border-color: var(--gold); font-weight: bold; }
.sp-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; line-height: 17px; text-align: center; }
.sp-search { width: 100%; }
.sp-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.sp-none { color: var(--muted); text-align: center; margin: 24px 8px; }
.sp-item { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 9px 10px; text-align: left; border: 1px solid var(--sp-line); border-radius: 6px; background: rgba(255, 255, 255, .03); cursor: pointer; color: var(--text); }
.sp-item:hover { background: rgba(226, 189, 98, .08); }
.sp-item.on { border-color: var(--gold); background: rgba(226, 189, 98, .14); }
.sp-item-top { display: flex; align-items: center; gap: 6px; }
.sp-subj { flex: 1; min-width: 0; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-item.unread .sp-subj { color: #fff; }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; background: #4aa3ff; flex: none; }
.sp-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: var(--muted); }
.sp-ago { margin-left: auto; }
.sp-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: bold; white-space: nowrap; }
.sp-pill.st-open { background: rgba(232, 165, 42, .2); color: #f0b84a; border: 1px solid rgba(232, 165, 42, .5); }
.sp-pill.st-answered { background: rgba(80, 200, 120, .16); color: #6fd38f; border: 1px solid rgba(80, 200, 120, .45); }
.sp-pill.st-closed { background: rgba(160, 160, 160, .14); color: #b8b0a0; border: 1px solid rgba(160, 160, 160, .35); }
.sp-main { padding: 0; overflow: hidden; }
.sp-empty { margin: auto; max-width: 420px; padding: 32px 20px; text-align: center; color: var(--muted); }
.sp-empty svg { width: 64px; height: 64px; color: var(--gold); opacity: .8; }
.sp-empty h3 { color: var(--gold); margin: 10px 0 6px; font: bold 18px Georgia, serif; }
.sp-empty p { margin: 0 0 16px; line-height: 1.5; }
.sp-detail-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--sp-line); }
.sp-detail-head h3 { margin: 0; color: var(--gold); font-size: 16px; overflow-wrap: anywhere; }
.sp-title { flex: 1; min-width: 0; }
.sp-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.sp-meta a { color: var(--gold); }
.sp-back { display: none; }
.sp-ticket { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sp-thread { flex: 1; min-height: 120px; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.sp-msg { max-width: min(640px, 88%); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--sp-line); background: rgba(255, 255, 255, .04); align-self: flex-start; }
.sp-msg.from-staff { align-self: flex-end; background: rgba(74, 163, 255, .1); border-color: rgba(74, 163, 255, .35); }
.sp-msg header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.sp-msg time { margin-left: auto; color: var(--muted); font-size: 11px; }
.sp-staff { padding: 0 6px; border-radius: 8px; background: #2f6fb0; color: #fff; font-size: 10.5px; font-weight: bold; letter-spacing: .3px; }
.sp-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.sp-reply { border-top: 1px solid var(--sp-line); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.sp-reply textarea { width: 100%; resize: vertical; min-height: 64px; }
.sp-reply .hint { margin: 0; }
.sp-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sp-actions button { min-height: 34px; }
.sp-new { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; overflow: auto; }
.sp-new .sp-detail-head { margin: 0 -14px; }
.sp-new label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.sp-new textarea { resize: vertical; }
.sp-new .hint { margin: 0; }
#lobby-support > .sp, #lobby-ideas > .sp, #lobby-guide > .sp, .cm-body > .sp { flex: 1; }
/* Help (client/help.js): topics | the page */
.hp .hp-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.hp .hp-group { margin: 10px 4px 4px; font: bold 12px Georgia, serif; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); }
.hp .hp-group:first-child { margin-top: 2px; }
.hp .hp-item { text-align: left; min-height: 30px; padding: 4px 10px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.hp .hp-item:hover { background: rgba(226, 189, 98, .08); }
.hp .hp-item.on { border-color: var(--gold); background: rgba(226, 189, 98, .14); color: #fff; }
.hp .hp-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hp .hp-body { flex: 1; overflow: auto; padding: 12px 16px 20px; line-height: 1.55; }
.hp .hp-body h4 { margin: 18px 0 6px; color: var(--gold); font: bold 15px Georgia, serif; }
.hp .hp-body p { margin: 0 0 10px; }
.hp .hp-body ul, .hp .hp-body ol { margin: 0 0 10px; padding-left: 22px; }
.hp .hp-body li { margin: 3px 0; }
.hp .hp-body a { color: var(--gold); }
.hp .hp-body kbd { padding: 0 5px; border: 1px solid var(--sp-line); border-radius: 4px; background: rgba(255, 255, 255, .06); font: 12px monospace; }
.hp .hp-body table { margin: 6px 0 12px; }
.hp .hp-body .help-pic { float: right; max-width: 40%; margin: 0 0 8px 12px; image-rendering: pixelated; border-radius: 4px; }
.hp .hp-stats { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--sp-line); border-radius: 8px; background: rgba(0, 0, 0, .25); }
.hp .hp-stats .hp-glyph { flex: none; width: 72px; height: 72px; image-rendering: pixelated; }
.hp .hp-stats dl { flex: 1; margin: 0; }
@media (max-width: 760px) { .hp .hp-body .help-pic { float: none; display: block; max-width: 100%; margin: 6px 0; } }
/* Suggestions (client/ideas.js): Support's two panes, with vote buttons */
.ix-item { flex-direction: row; align-items: center; gap: 10px; }
.ix-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ix-vote { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 44px; min-height: 44px; padding: 3px 0; border-radius: 8px; border: 1px solid var(--sp-line); background: rgba(255, 255, 255, .04); color: var(--muted); cursor: pointer; }
.ix-vote svg { width: 16px; height: 16px; }
.ix-vote b { font-size: 13px; line-height: 1.1; color: var(--text); }
.ix-vote:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.ix-vote.on { background: rgba(226, 189, 98, .22); border-color: var(--gold); color: var(--gold); }
.ix-vote.on b { color: var(--gold); }
.ix-vote:disabled { cursor: default; opacity: .75; }
.ix-vote.big { width: 52px; min-height: 52px; }
.ix-c { display: inline-flex; align-items: center; gap: 3px; }
.ix-c svg { width: 12px; height: 12px; }
.ix-n { font-size: 11px; opacity: .8; }
.sp-pill.ix-accepted { background: rgba(80, 200, 120, .16); color: #6fd38f; border: 1px solid rgba(80, 200, 120, .45); }
.sp-pill.ix-rejected { background: rgba(220, 90, 70, .16); color: #ff9c8a; border: 1px solid rgba(220, 90, 70, .45); }
.ix-text { line-height: 1.5; }
.ix-verdict { padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.ix-verdict .sp-body { margin-top: 4px; }
.ix-verdict.ix-accepted { background: rgba(80, 200, 120, .1); border: 1px solid rgba(80, 200, 120, .45); }
.ix-verdict.ix-accepted b { color: #6fd38f; }
.ix-verdict.ix-rejected { background: rgba(220, 90, 70, .1); border: 1px solid rgba(220, 90, 70, .45); }
.ix-verdict.ix-rejected b { color: #ff9c8a; }
.ix-decide { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed rgba(74, 163, 255, .45); border-radius: 8px; background: rgba(74, 163, 255, .06); }
.ix-decide label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.ix-decide textarea { resize: vertical; }
.ix-accept { border-color: #3f9a5f !important; color: #8fe0a8 !important; }
.ix-h { margin: 6px 0 0; color: var(--gold); font-size: 13px; }
.sp-msg.ix-comment { max-width: 100%; align-self: stretch; }
.ix-del { margin-left: 4px; min-height: 0; padding: 0 6px; line-height: 18px; background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.ix-del:hover { color: #ff9c8a; }
.ideas .sp-detail-head { align-items: center; }
@media (max-width: 760px) {
  .sp { grid-template-columns: 1fr; min-height: 0; }
  .sp[data-pane=list] .sp-main, .sp[data-pane=detail] .sp-side { display: none; }
  .sp-back { display: inline-block; }
  .sp-msg { max-width: 94%; }
  .sp-detail-head { padding: 10px; }
  .sp-thread { padding: 10px; }
}

/* Settings > Game Options > Restart */
.restart-box { padding: 8px 10px; border: 1px solid rgba(255, 107, 90, .35); border-radius: 6px; background: rgba(255, 107, 90, .06); }
.restart-box p { margin: 0 0 8px; }
.danger-btn { border-color: #c8503c !important; color: #ffb4a6 !important; }
.danger-btn:hover:not(:disabled) { background: rgba(200, 80, 60, .2) !important; }

/* ---------- new-player tutorial: Games page invitation and first-login prompt ---------- */
.tut-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 10px 14px; border-radius: 8px;
  background: rgba(61, 90, 42, .35); border: 1px solid rgba(140, 200, 100, .45); }
.tut-banner[hidden] { display: none; }
.tut-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.4; }
.tut-banner-text b { color: #cfe8b0; font-size: 14px; }
.tut-banner .primary { flex: none; white-space: nowrap; }
.games-side .tut-side { border-color: rgba(140, 200, 100, .6); color: #cfe8b0; }
.tut-prompt h3 { margin: 0 0 8px; }
.tut-prompt p { margin: 0 0 10px; line-height: 1.5; }
.tut-prompt ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.6; }
.tut-prompt-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.tut-prompt-actions .primary { min-width: 170px; }
@media (max-width: 760px) {
  .tut-banner { flex-direction: column; align-items: stretch; }
  .tut-prompt-actions button { flex: 1; }
}

i.graduate { display: inline-block; width: var(--s, 14px); height: var(--s, 14px); margin: 0 2px; vertical-align: -2px; flex: none; }
i.graduate svg { display: block; width: 100%; height: 100%; }
i.ghostbane, i.hollowslayer, i.finalblow { display: inline-block; width: var(--s, 14px); height: var(--s, 14px); margin: 0 2px; vertical-align: -2px; flex: none; }
i.ghostbane svg, i.hollowslayer svg, i.finalblow svg { display: block; width: 100%; height: 100%; }

/* ---------- tutorial coach ---------- */
.coach { position: absolute; z-index: 9; top: calc(var(--topbar-h, 40px) + 8px); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 340px));
  min-width: 300px; padding: 12px 14px 12px; border-radius: 10px; background: rgba(28, 21, 13, .96); border: 2px solid #c9a24a;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55); color: #f3e9d2; }
.coach h3 { margin: 6px 0 4px; color: #ffd65a; font: bold 17px Georgia, serif; }
.coach p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.coach p b { color: #ffe9a8; }
.coach-top { display: flex; align-items: center; gap: 8px; }
.coach-count { font-size: 11px; color: #c9b48a; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.coach-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.coach-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fc45a, #ffd65a); border-radius: 3px; transition: width .4s ease; }
.coach-ico { width: 26px; height: 26px; min-height: 0; padding: 4px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: #c9b48a; cursor: pointer; }
.coach-ico:hover { border-color: #6b5330; color: #fff; }
.coach-ico svg { width: 100%; height: 100%; display: block; }
.coach-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.coach-gap { flex: 1; }
.coach-actions .primary { min-width: 120px; min-height: 36px; font-weight: bold; }
.coach-skip { opacity: .75; }
.coach-prog { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.coach-prog li { display: flex; align-items: center; gap: 6px; color: #c9b48a; }
.coach-prog li i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #8a7550; }
.coach-prog li.ok { color: #b8e08a; }
.coach-prog li.ok i { background: #6fbf3f; border-color: #6fbf3f; }
.coach-prog li span { font-size: 11px; color: #8fc45a; }
.coach.coach-min { width: auto; min-width: 0; padding: 0; border-width: 1px; }
.coach-pill { padding: 7px 14px; border: 0; background: transparent; color: #ffd65a; font-weight: bold; cursor: pointer; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; }
@keyframes coach-yay { 0% { border-color: #8fc45a; box-shadow: 0 0 0 0 rgba(143, 196, 90, .8); } 60% { box-shadow: 0 0 0 14px rgba(143, 196, 90, 0); } 100% { border-color: #c9a24a; } }
.coach.coach-yay { animation: coach-yay 1s ease-out; }
/* the pointer at a button: a pulsing ring and a bouncing arrow with a label (never takes clicks) */
.coach-ring { position: fixed; z-index: 10000; display: none; pointer-events: none; border: 3px solid #ffd65a; border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(255, 214, 90, .25), 0 0 18px rgba(255, 214, 90, .6); animation: coach-pulse 1.1s ease-in-out infinite; }
@keyframes coach-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .75; } }
.coach-arrow { position: fixed; z-index: 10001; display: none; pointer-events: none; flex-direction: column; align-items: center; transform: translate(-50%, -100%);
  animation: coach-bob .8s ease-in-out infinite alternate; }
.coach-arrow svg { width: 30px; height: 30px; fill: #ffd65a; stroke: #3a2508; stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.coach-arrow-label { margin-bottom: 2px; padding: 3px 10px; border-radius: 6px; background: rgba(30, 20, 8, .94); border: 1.5px solid #ffd65a; color: #ffe9a8;
  font: bold 13px Verdana, sans-serif; white-space: nowrap; }
.coach-arrow.up { transform: translate(-50%, 0); flex-direction: column-reverse; }
.coach-arrow.up svg { transform: rotate(180deg); }
.coach-arrow.up .coach-arrow-label { margin: 2px 0 0; }
@keyframes coach-bob { from { margin-top: 0; } to { margin-top: -8px; } }
.coach-arrow.up { animation-name: coach-bob-up; }
@keyframes coach-bob-up { from { margin-top: 0; } to { margin-top: 8px; } }
@media (max-width: 760px), (max-height: 520px) {
  .coach { width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); min-width: 0; padding: 9px 11px; top: calc(var(--topbar-h, 40px) + 4px);
    left: calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2); }
  .coach h3 { font-size: 15px; margin: 4px 0 2px; }
  .coach p { font-size: 13px; margin-bottom: 6px; }
}
/* graduation dialog */
.tut-done { text-align: center; }
.tut-badge { display: flex; justify-content: center; margin: 4px 0 8px; }
.tut-done .tut-prompt-actions { justify-content: center; }
.tut-banner.tut-banner-done { display: none; }
@media (max-width: 760px), (max-height: 520px) {
  .tut-banner.tut-banner-done { display: flex; justify-content: center; padding: 0; margin: 0; background: none; border: 0; }
  .tut-banner-done .link { background: none; border: 0; color: #cfe8b0; text-decoration: underline; padding: 4px 8px; font-size: 13px; }
}

/* ---------- right-click tile menu (desktop): what's on the tile (15 to a column), then tile actions ---------- */
.stack-menu { position: fixed; z-index: 9000; display: flex; flex-direction: column; gap: 1px; padding: 4px; min-width: 200px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); font-size: 12px; }
.stack-menu .sm-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 1), auto); gap: 1px 6px; }
.stack-menu .sm-acts { display: flex; flex-direction: column; gap: 1px; }
.stack-menu .sm-sep { height: 1px; margin: 3px 2px; background: var(--edge-dark); }
.stack-menu .sm-acts button { padding-left: 10px; }
.stack-menu button:disabled { color: var(--muted); opacity: .6; cursor: default; }
.stack-menu button:disabled:hover { background: none; }
.stack-menu button { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 190px; padding: 3px 8px 3px 4px; background: none;
  border: 0; border-radius: 4px; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.stack-menu button:hover, .stack-menu button:focus-visible { background: var(--panel2); outline: none; }
.stack-menu button.on { box-shadow: inset 2px 0 0 var(--gold); }
.stack-menu img, .stack-menu .sm-noimg { width: 22px; height: 22px; flex: none; object-fit: contain; }
.stack-menu .sm-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack-menu .sm-name i { color: var(--muted); font-style: normal; }
.stack-menu .sm-size { color: var(--gold); font-variant-numeric: tabular-nums; }
/* the troop orders in the right-click menu (original TroopPopupMenu): submenus that open on hover */
.stack-menu .sm-sub { position: relative; }
.stack-menu .sm-pop { display: none; position: absolute; left: 100%; top: -4px; flex-direction: column; gap: 1px; min-width: 190px; padding: 4px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); z-index: 1; }
.stack-menu.flip .sm-pop { left: auto; right: 100%; }
.stack-menu .sm-sub:hover > .sm-pop, .stack-menu .sm-sub:focus-within > .sm-pop { display: flex; }
.stack-menu .sm-sub:hover > .sm-subhead { background: var(--panel2); }
.stack-menu .sm-check { flex: none; width: 12px; height: 12px; position: relative; }
.stack-menu .sm-check.on::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.stack-menu .sm-arrow { flex: none; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
/* split and merge windows */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; }
.split-grid label { display: flex; flex-direction: column; gap: 4px; }
.split-grid input { width: 100%; }
.split-steps { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
.split-steps label { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; margin: 0; }
.merge-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; margin: 6px 0; }
.merge-list label { display: flex; flex-direction: row; margin: 0; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.merge-list label:hover { background: var(--panel2); }
.merge-list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merge-list b { color: var(--gold); font-weight: normal; font-variant-numeric: tabular-nums; }
/* troop panel buttons: they share the panel's width evenly and wrap to a new row when it's narrow */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 4px; margin: 6px 0; }
.cmd-grid .icon-btn { width: 100%; height: 40px; }
.cmd-grid .cmd-wide { grid-column: span 2; height: 40px; }
#panel .disband-btn { display: block; width: 100%; margin: 12px 0 6px; background: #8a2a1e; border-color: #c8503c; color: #ffe2dc; }
#panel .disband-btn:hover { background: #a3342a; border-color: #e0634e; }

/* ---------- the game's top bar on phones (upright or sideways): one row you swipe sideways ----------
   (on desktop .gt-scroll is invisible to layout). Where there's more to see, that edge fades into the bar
   with a small chevron. */
.gt-scroll { display: contents; }
@media (max-width: 1280px), (max-height: 520px) {
  .game-top { flex-wrap: nowrap; padding-left: 0; padding-right: 0; }
  .game-top .gt-scroll { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
    padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .game-top .gt-scroll::-webkit-scrollbar { display: none; }
  .game-top .gt-scroll > * { flex: none; white-space: nowrap; }
  .game-top .gt-scroll > .spacer { flex: 1 0 4px; }
  .game-top::before, .game-top::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30px; pointer-events: none; z-index: 1;
    opacity: 0; transition: opacity .15s; background-repeat: no-repeat; }
  .game-top::before { left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M7 3 2 8l5 5' fill='none' stroke='%23e2bd62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.75'/%3E%3C/svg%3E"), linear-gradient(to right, rgba(30,22,14,1) 30%, rgba(30,22,14,0));
    background-size: 9px 14px, 100% 100%; background-position: 4px 50%, 0 0; }
  .game-top::after { right: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M3 3l5 5-5 5' fill='none' stroke='%23e2bd62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.75'/%3E%3C/svg%3E"), linear-gradient(to left, rgba(30,22,14,1) 30%, rgba(30,22,14,0));
    background-size: 9px 14px, 100% 100%; background-position: calc(100% - 4px) 50%, 0 0; }
  .game-top.more-l::before, .game-top.more-r::after { opacity: 1; }
}

/* Super Admin Game Config */
.gc { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; }
.gc .gc-wide { grid-column: 1 / -1; }
.gc h4 { margin: 8px 0 0; }
.gc label:not(.check) { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.gc .gc-arts, .gc .gc-days { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.gc .gc-arts > .hint { flex-basis: 100%; }
.gc .gc-sched { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 14px; }
.gc .gc-sched[hidden] { display: none; }
.gc .gc-mode { display: flex; flex-direction: column; gap: 4px; }
.gc .gc-hours[hidden] { display: none; }
.gc .gc-win { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px 12px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--edge-dark); }
.gc .gc-win .gc-days { grid-column: 1 / -1; }
.gc .gc-hours > .small { margin-top: 8px; }
.gc .gc-danger { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--edge-dark); }
.gd-admin { display: flex; flex-wrap: wrap; gap: 6px; }

/* chat: Load earlier messages, at the top of a channel's history */
.chat-more { display: block; margin: 2px auto 8px; padding: 3px 12px; font-size: 12px; background: none; border: 1px solid var(--edge-dark); border-radius: 12px; color: var(--muted); cursor: pointer; }
.chat-more:hover { color: var(--gold); border-color: var(--edge); }

/* notes: previous / next note in the reader's header */
.nt-steps { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.nt-steps .nt-step { min-width: 32px; font-size: 18px; line-height: 1; padding: 2px 8px; }
.nt-steps .hint { font-size: 12px; white-space: nowrap; }
/* who last attacked a city, facility or troop (original "Attacker/Damage", in red) */
.stats .attacked { color: #ff8a7a; }

/* Battle Log */
.bl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.bl-bar .bl-who { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.bl-filters { display: inline-flex; gap: 4px; }
.bl-filters .on { border-color: var(--gold); color: var(--gold); }
.bl-bar .bl-order { margin: 0; }
.bl-list { max-height: 60vh; overflow-y: auto; border-radius: 6px; background: rgba(0, 0, 0, .2); padding: 4px; font-size: 13px; }
.bl-row { display: flex; gap: 10px; padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, .05); line-height: 1.35; }
.bl-row[data-x] { cursor: pointer; }
.bl-row[data-x]:hover { background: var(--panel2); }
.bl-when { flex: none; width: 112px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bl-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bl-row.kill .bl-text { color: #9fe08a; }
.bl-row.loss .bl-text { color: #ff9a8a; }
@media (max-width: 760px) { .bl-row { flex-direction: column; gap: 1px; } .bl-when { width: auto; font-size: 11px; } }

/* market: time left on an order */
.market .mk-eta { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.market .mk-eta.warn { color: #ffb08a; }

/* ---------- Map Workshop: the Maps page (maps.js) ---------- */
.maps-ws { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.maps-ws .spacer { flex: 1; }
.mw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mw-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.mw-newbtn { margin-left: 8px; }          /* next to the tabs, where it is seen */
.maps-ws button.on, #map-editor button.on { border-color: var(--gold); color: #fff; background: linear-gradient(#7a5a30, #4a3720); }
.mw-main { min-height: 0; overflow: auto; flex: 1; }
.mw-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; font-size: 12px; }
.mw-bar select { margin-left: 4px; }
.mw-intro { margin: 0 0 10px; }
.mw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mw-empty { grid-column: 1 / -1; }
.mw-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; text-align: left; overflow: hidden; background: rgba(0,0,0,.25); border-radius: 6px; min-height: 0; }
.mw-card img, .mw-card .mw-nopic { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; image-rendering: pixelated; background: #0c2230; }
.mw-cap { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.mw-cap b { color: var(--gold); font-size: 14px; }
.mw-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; font-size: 12px; }
.mw-chip { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; border: 1px solid rgba(226,189,98,.45); color: var(--gold); border-radius: 4px; padding: 0 5px; }
.mw-chip.approved { color: var(--good); border-color: rgba(143,220,122,.5); }
.mw-chip.rejected, .mw-chip.hidden { color: var(--bad); border-color: rgba(255,138,122,.5); }
.mw-chip.draft { color: var(--muted); border-color: var(--edge-dark); }
.mw-votes { display: inline-flex; align-items: center; gap: 4px; font-weight: bold; }
.mw-votes.on { color: var(--gold); }
/* the upvote mark: a small triangle */
.mw-up { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; }
.mw-vote .mw-up { margin-right: 6px; }
.mw-detail { display: flex; flex-direction: column; gap: 10px; }
.mw-dhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mw-dhead h3 { margin: 0; color: var(--gold); font: bold 18px Georgia, serif; }
.mw-top { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }
.mw-pic { padding: 0; border-radius: 6px; overflow: hidden; background: #0c2230; min-height: 0; }
.mw-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; image-rendering: pixelated; }
.mw-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mw-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mw-descr { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }
.mw-stats .stats { grid-template-columns: auto 1fr; }
.mw-reason { border: 1px solid rgba(255,138,122,.5); background: rgba(255,138,122,.08); border-radius: 6px; padding: 8px 10px; }
.mw-review { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border: 1px dashed var(--edge); border-radius: 6px; }
.mw-detail h4 { margin: 6px 0 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.mw-comments { display: flex; flex-direction: column; gap: 8px; }
.mw-comment { background: rgba(0,0,0,.2); border-radius: 6px; padding: 6px 10px; }
.mw-comment p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mw-comment button.link { background: none; border: 0; min-height: 0; padding: 0 0 0 8px; color: var(--muted); font-size: 11px; text-decoration: underline; }
.mw-say { display: flex; gap: 8px; align-items: flex-end; }
.mw-say textarea { flex: 1; resize: vertical; }
#modal .dialog.mw-dialog { width: min(520px, calc(100vw - 24px)); max-width: none; }
#modal .dialog.mw-dialog textarea { width: 100%; }
#modal .dialog.mw-dialog input[type=file] { flex: 1 1 200px; min-width: 0; width: auto; height: auto; font-size: 12px; }
#modal .dialog.mw-dialog label.check { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
@media (max-width: 700px) { .mw-top { grid-template-columns: 1fr; } }

/* ---------- Map Workshop editor (mapeditor.js), full screen ---------- */
#map-editor { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; background: var(--bg); }
.me-top { display: flex; align-items: center; gap: 6px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); border-bottom: 1px solid var(--edge-dark); background: var(--panel); flex-wrap: wrap; }
.me-top .spacer { flex: 1; }
.me-title { color: var(--gold); font: bold 16px Georgia, serif; }
.me-status { color: var(--muted); font-size: 12px; }
.me-status.bad { color: var(--bad); }
.me-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr) 260px; grid-template-rows: minmax(0, 1fr); }
.me-body.ro { grid-template-columns: minmax(0, 1fr) 260px; }
.me-tools, .me-side { overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); }
.me-tools { border-right: 1px solid var(--edge-dark); }
.me-side { border-left: 1px solid var(--edge-dark); }
.me-pal { display: grid; grid-template-columns: 1fr; gap: 4px; }
.me-terr { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; min-height: 0; text-align: left; }
.me-terr canvas { width: 28px; height: 28px; border-radius: 3px; flex: none; }
.me-toolrow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.me-size { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.me-help { font-size: 11px; margin: 0; }
.me-map { position: relative; min-width: 0; min-height: 0; }
.me-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.me-body.ro .me-canvas { cursor: grab; }
.me-hover { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,.6); font-size: 12px; pointer-events: none; }
.me-mini { width: 100%; height: auto; aspect-ratio: 2 / 1; image-rendering: pixelated; border: 1px solid var(--edge-dark); cursor: pointer; touch-action: none; }
.me-stats { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.me-stats .stats { grid-template-columns: auto 1fr; margin: 0; }
.me-stats h4 { margin: 6px 0 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.me-probs { border: 1px solid rgba(255,138,122,.5); background: rgba(255,138,122,.08); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.me-probs b { color: var(--bad); }
.me-probs ul, .me-warns { margin: 4px 0 0; padding-left: 18px; }
.me-warns { color: #f0c674; font-size: 12px; }
.me-ok { color: var(--good); margin: 0; font-weight: bold; }
.me-res { display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 6px; }
.me-res i { height: 8px; background: rgba(0,0,0,.35); border-radius: 4px; overflow: hidden; }
.me-res i b { display: block; height: 100%; background: var(--gold); }
.me-res em { font-style: normal; text-align: right; color: var(--muted); }
.me-mix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.me-mix li { display: flex; align-items: center; gap: 5px; }
.me-mix li i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.me-mix li span { margin-left: auto; color: var(--muted); }
/* phones: the map on top and the tools in a strip under it (the stats show on the map's page) */
@media (max-width: 760px) {
  .me-body, .me-body.ro { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .me-tools { order: 2; border-right: 0; border-top: 1px solid var(--edge-dark); flex-direction: row; flex-wrap: wrap; max-height: 34vh; padding: 6px; gap: 6px; }
  .me-pal { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); width: 100%; }
  .me-terr { justify-content: center; padding: 3px; }
  .me-terr span, .me-help { display: none; }
  .me-toolrow { grid-template-columns: repeat(4, auto); }
  .me-side { order: 3; display: none; }
  .me-map { order: 1; }
}

/* ---------- rows that scroll sideways (swipe.js): a fade and a chevron at an edge with more to see ---------- */
.sw-hint { position: sticky; z-index: 3; flex: none; align-self: stretch; width: 26px; min-height: 18px; pointer-events: none;
  opacity: 0; transition: opacity .15s; background-repeat: no-repeat; background-size: 9px 14px, 100% 100%; }
.sw-l { left: 0; margin-right: -26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M7 3 2 8l5 5' fill='none' stroke='%23e2bd62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(to right, rgba(30,22,14,.97) 35%, rgba(30,22,14,0));
  background-position: 3px 50%, 0 0; }
.sw-r { right: 0; margin-left: -26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M3 3l5 5-5 5' fill='none' stroke='%23e2bd62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(to left, rgba(30,22,14,.97) 35%, rgba(30,22,14,0));
  background-position: calc(100% - 3px) 50%, 0 0; }
.sw-more-l > .sw-l, .sw-more-r > .sw-r { opacity: 1; }
.sw-hint { display: none; }
.sw-on > .sw-hint { display: block; }

/* ---------- lobby tour (lobbytour.js): a ring round each part of the lobby and a card beside it ---------- */
.lt-ring { position: fixed; z-index: 9000; display: none; pointer-events: none; border: 3px solid #ffd65a; border-radius: 10px;
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 214, 90, .6); transition: left .2s, top .2s, width .2s, height .2s; }
.lt-card { position: fixed; z-index: 9001; width: min(340px, calc(100vw - 20px)); padding: 12px 14px; border-radius: 10px;
  background: var(--panel2); border: 1px solid var(--gold); box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
.lt-card h3 { margin: 2px 0 6px; color: var(--gold); font: bold 16px Georgia, serif; }
.lt-card p { margin: 0 0 10px; line-height: 1.5; }
.lt-count { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.lt-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lt-gap { flex: 1; }

/* weather over the map (weather.js): above the terrain, under everything else, never takes clicks */
.weather-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
/* the Halloween Event's games tab (lobby.js): shown only while there is one */
[data-gtab].gtab-event { color: #ff9a3c; }
[data-gtab].gtab-event[hidden] { display: none; }
/* the Halloween event's bar (hollow.js): over the top of the map */
.hollow-bar { position: absolute; z-index: 4; top: calc(var(--topbar-h, 40px) + 6px); left: 50%; transform: translateX(-50%); width: max-content; max-width: max(300px, min(640px, calc(100% - 680px)));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 5px 12px;
  border: 1px solid #7a2a1a; border-radius: 8px; background: rgba(18, 8, 22, .86); color: #f0dcc8; font-size: 12px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.hollow-bar[hidden] { display: none; }
.hollow-bar:hover, .hollow-bar:focus-visible { border-color: #ff9a3c; }
.hollow-bar .hb-name { font: bold 13px Georgia, serif; color: #ff9a3c; letter-spacing: .4px; }
.hollow-bar .hb-hp { position: relative; width: 110px; height: 12px; border: 1px solid #5a1010; border-radius: 3px; background: #200608; overflow: hidden; }
.hollow-bar .hb-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#c8323c, #7a1018); }
.hollow-bar .hb-hp em { position: relative; display: block; text-align: center; font: bold 10px/12px sans-serif; font-style: normal; color: #fff; text-shadow: 0 0 2px #000; }
.hollow-bar .hb-win { color: #9be36b; } .hollow-bar .hb-lost { color: #ff6a5a; }
.hollow-bar .hb-graves, .hollow-bar .hb-me { color: #cbb8d8; }
#game-stage:has(#view-banner:not([hidden])) .hollow-bar { top: calc(var(--topbar-h, 40px) + 48px); }
.hb-board tr.me td { background: rgba(255, 154, 60, .14); }
@media (max-width: 760px) { .hollow-bar { top: auto; bottom: 8px; left: 8px; right: 64px; transform: none; width: auto; max-width: none; gap: 2px 8px; padding: 4px 8px; font-size: 11px; } .hollow-bar .hb-hp { width: 70px; } .hollow-bar .hb-graves { display: none; } }

/* ---------- chat: replies and @mentions ---------- */
.chat-log .line-acts { position: absolute; right: 2px; top: 0; display: inline-flex; gap: 2px; visibility: hidden; background: var(--panel, #2b2117); border-radius: 3px; }
.chat-log .line:hover .line-acts, .chat-log .line-acts:focus-within { visibility: visible; }
.chat-log .line-acts .line-del { position: static; visibility: inherit; background: none; }
.chat-log .line-reply { display: inline-block; padding: 1px 3px; min-height: 0; height: auto; border: 0; background: none; color: var(--muted); cursor: pointer; }
.chat-log .line-reply svg { width: 14px; height: 14px; display: block; }
.chat-log .line-reply:hover { color: var(--gold); }
@media (pointer: coarse) { .chat-log .line-acts { visibility: visible; position: static; margin-left: 6px; background: none; opacity: .6; vertical-align: -3px; } }
/* reactions under a message (chat.js reactionsHtml) */
.chat-log .line-rx { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 3px; }
.chat-log .rx-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 0; height: 24px; padding: 0 7px; border-radius: 12px; border: 1px solid rgba(226, 189, 98, .25);
  background: rgba(255, 255, 255, .05); color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; }
.chat-log .rx-chip b { font-size: 11.5px; font-weight: bold; color: var(--muted); }
.chat-log .rx-chip:hover { border-color: rgba(226, 189, 98, .6); }
.chat-log .rx-chip.on { background: rgba(74, 163, 255, .16); border-color: rgba(74, 163, 255, .6); }
.chat-log .rx-chip.on b { color: #9ccaff; }
.chat-log .rx-more { color: var(--muted); padding: 0 5px; }
.chat-log .rx-more svg { width: 15px; height: 15px; display: block; }
@media (pointer: coarse) { .chat-log .rx-chip { height: 28px; padding: 0 9px; } }
/* the message a reply answers, above it */
.chat-log .line-quote { display: block; max-width: 100%; margin: 0 0 1px 2px; padding: 0 0 0 8px; min-height: 0; border: 0; border-left: 2px solid rgba(226, 189, 98, .5);
  background: none; color: var(--muted); font-size: 11.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.chat-log .line-quote:hover { color: var(--text); }
.chat-log .line-quote b { font-weight: bold; }
/* @tags, and lines that tag you */
.chat-log .tag { color: #9fd3ff; font-weight: bold; }
.chat-log .tag.me { color: #1c1610; background: var(--gold); border-radius: 3px; padding: 0 3px; }
.chat-log .line.mention { background: rgba(226, 189, 98, .1); box-shadow: inset 3px 0 0 var(--gold); }
.chat-log .line.flash { animation: chat-flash 1.4s ease-out; }
@keyframes chat-flash { 0%, 30% { background: rgba(226, 189, 98, .35); } 100% { background: transparent; } }
.chat-tabs .ctab b.at { background: var(--gold); color: #1c1610; }
/* replying to: a bar above the chat box */
.chat-replying { display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 10px; margin-bottom: 3px; font-size: 12px; color: var(--muted);
  border-left: 3px solid var(--gold); background: rgba(226, 189, 98, .08); border-radius: 3px; }
.chat-replying span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-replying b { color: var(--text); }
.chat-replying button { min-height: 22px; padding: 0 7px; }
/* @ suggestions */
.chat-mentions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.chat-mentions button { min-height: 26px; padding: 2px 9px; font-size: 12px; }
.chat-mentions button.on { border-color: var(--gold); color: #fff; }

/* phones held sideways with the keyboard up (app.js fitKeyboard): only a sliver shows above the keyboard, so
   the chat being typed in fills it (recent lines and the box), over everything else, until the keyboard goes */
html.kb-tight .chatui:focus-within { position: fixed; z-index: 3000; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100%) !important;
  padding: 4px max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left)); background: var(--bg); }
html.kb-tight .chatui:focus-within .chat-log { flex: 1; min-height: 0; }
html.kb-tight .chatui:focus-within .chat-tabs, html.kb-tight .chatui:focus-within .chat-topic,
html.kb-tight .chatui:focus-within .chat-btn:not(.chat-emoji):not(.chat-pic) { display: none; }
/* (the window holding that chat comes above the top bar and everything else) */
html.kb-tight .dockwin:focus-within, html.kb-tight .win:focus-within { z-index: 3000 !important; }

/* /kbdebug readout (phones) */
#kb-debug { position: fixed; z-index: 99999; left: 4px; top: calc(var(--app-top, 0px) + 4px); max-width: calc(100vw - 8px); padding: 3px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, .8); color: #7fff7f; font: 11px/1.3 monospace; pointer-events: none; }

/* award announcements in #Global: a Congratulate button with the number of cheers */
.chat-log .award-line { color: var(--gold); font-style: normal; }
.chat-log .cheer-btn { margin-left: 6px; min-height: 0; padding: 0 7px; font-size: 11px; border-radius: 10px; vertical-align: 1px; font-style: normal; }
.chat-log .cheer-btn b { margin-left: 3px; color: var(--gold); }
.chat-log .cheer-btn.on, .chat-log .cheer-btn:disabled { opacity: .75; cursor: default; }
/* a chat line about a place (a troop lost, a rumour...): click it to look there */
.chat-log .line[data-goto] { cursor: pointer; }
.chat-log .line[data-goto]:hover { text-decoration: underline; }

/* minimap: a close button at its top-right (the world map button moves left of it), and a button to bring it back */
#minimap-wrap .mm-close { position: absolute; z-index: 1; top: 5px; right: 5px; width: 26px; height: 26px; min-height: 0; padding: 0; display: grid; place-items: center;
  border-radius: 6px; background: rgba(20, 14, 8, .82); border: 1px solid var(--edge); color: var(--text); font-size: 18px; line-height: 1; }
#minimap-wrap .mm-close:hover { color: #fff; border-color: var(--gold); }
#minimap-wrap #btn-worldmap { right: 36px; }
@media (pointer: coarse) { #minimap-wrap .mm-close { width: 30px; height: 30px; } #minimap-wrap #btn-worldmap { right: 40px; } }
#btn-minimap-show { position: absolute; z-index: 3; top: calc(var(--topbar-h, 40px) + 8px); right: max(10px, env(safe-area-inset-right)); }

/* Assign Workers / Set Work Hours windows (as the original's splitter and slider), and the panel's Max */
.wk-slide, .hr-row input[type=range] { width: 100%; margin: 6px 0 4px; accent-color: var(--gold); height: 28px; }
.wk-btns { display: flex; gap: 8px; margin: 2px 0 6px; }
.wk-gap { flex: 1; }
.hr-row { display: flex; align-items: center; gap: 12px; }
.hr-row input[type=range] { flex: 1; }
.hr-val { min-width: 84px; text-align: right; color: var(--gold); }
.wk-in { display: flex; gap: 4px; }
.wk-in input { flex: 1; min-width: 0; }
.wk-in button { flex: none; padding: 2px 8px; }
.wk-more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wk-more button { flex: 1 1 140px; }

/* troop Supplies row (original Supplies menu) */
#panel .supplies { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
#panel .supplies span { color: var(--muted, #aaa); margin-right: 2px; }
#panel .supplies button { flex: 1 1 0; min-width: 44px; }

/* old address: where the game lives now */
.moved-bar { position: fixed; z-index: 9000; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); width: min(720px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--gold); border-radius: 8px;
  background: rgba(20, 16, 10, .96); color: #f1e6cc; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); font-size: 14px; }
.moved-bar span { flex: 1; }
.moved-bar a { color: var(--gold); font-weight: 600; }

/* a map spot in a chat message ([x, y]): click to go there */
.chat-log .coord-link { display: inline; min-height: 0; padding: 0 2px; border: 0; background: none; color: var(--gold); font: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.chat-log .coord-link:hover { color: #fff1c4; }

/* top bar: the game you are in, and the countdowns to the next production tick and population cycle */
#hud-game { color: var(--gold); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
#hud-ticks { font-variant-numeric: tabular-nums; white-space: nowrap; color: #d8cfb8; font-size: 13px; flex: none; }
#hud-ticks span + span::before { content: ' · '; color: var(--muted); }
#hud-ticks .hud-wx.wx-sun { color: #f0c75a; }
#hud-ticks .hud-wx.wx-rain { color: #8fc1ff; }
#hud-ticks .hud-wx.wx-snow { color: #eef4ff; }
.wx-amount { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 6px 24px; }
.wx-amount .wx-row { display: flex; align-items: center; gap: 10px; }
.wx-amount input[type=range] { flex: 1; max-width: 260px; }
.wx-amount b { min-width: 3em; color: var(--gold); }
#hud-game { flex: none; }
#hud-time { font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 1240px) { #hud-time { display: none; } }
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  #hud-game { max-width: 110px; }
  #hud-name { display: none; }                         /* you know who you are: room for the game */
  #hud-ticks { font-size: 11px; line-height: 1.15; display: flex; flex-direction: column; }
  .game-top #hud-ticks span + span::before { content: none; }
  #hud-time { display: none; }
}

/* City History / Player History graphs */
.h-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.h-bar label { display: flex; gap: 6px; align-items: center; }
.h-graph svg { width: 100%; height: auto; display: block; background: rgba(0, 0, 0, .25); border: 1px solid rgba(226, 189, 98, .25); border-radius: 6px; }
.h-graph .h-grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.h-graph .h-ylab { fill: var(--muted); font-size: 11px; text-anchor: end; dominant-baseline: middle; }
.h-graph .h-xlab { fill: var(--muted); font-size: 11px; }
.h-graph .h-line { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; }
.h-graph .h-area { fill: rgba(226, 189, 98, .12); stroke: none; }
.h-graph .h-dot { fill: var(--gold); }
.h-stats { margin-top: 8px; }
.h-stats .up { color: #7fd47f; } .h-stats .down { color: #ff8a7a; }

/* small button rows in the side panel (Follow / Stop Following) */
.row-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

/* the Game window: news and the reference tables */
#hud-game { cursor: pointer; }
#hud-game:hover { text-decoration: underline; }
.news-log { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow: auto; }
.news-log li { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.news-log li .hint { display: inline-block; min-width: 64px; }
.ref-scroll { max-width: 100%; overflow-x: auto; }
.ref-table td, .ref-table th { white-space: nowrap; }
.ref-table td.hint { white-space: normal; min-width: 160px; }
.ref-list li { margin: 4px 0; }

.tab-page > dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.tab-page > dl dt { color: var(--muted); }
.tab-page > dl dd { margin: 0; }

/* the City Governor */
.gov-box { margin: 8px 0; padding: 8px 10px; border: 1px solid rgba(226, 189, 98, .25); border-radius: 6px; background: rgba(0, 0, 0, .18); }
.gov-box.on { border-color: rgba(226, 189, 98, .55); }
.gov-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.gov-head > span { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gov-box .hint { margin: 6px 0 0; }
.gov-log { margin: 6px 0 0; padding-left: 18px; font-size: 12px; }
.gov-log li { margin: 2px 0; }
.gov-pin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.gov-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 8px 0; }
.gov-style { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; cursor: pointer; }
.gov-style input { position: absolute; opacity: 0; pointer-events: none; }
.gov-style span { font-size: 12px; color: var(--muted); }
.gov-style.on { border-color: var(--gold); background: rgba(226, 189, 98, .1); }

/* the top-left corner of the map, stacked so nothing overlaps: the tile coordinates, then the troop group
   buttons, then the map text (chat and news). Phones have no coordinates box. */
#hud-coords { top: calc(var(--topbar-h, 40px) + 6px); }
#group-bar { top: calc(var(--topbar-h, 40px) + 32px); }
#map-overlay { top: calc(var(--topbar-h, 40px) + 32px); }
#game-stage:has(#group-bar:not([hidden])) #map-overlay { top: calc(var(--topbar-h, 40px) + 70px); }
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  #group-bar { top: calc(var(--topbar-h, 40px) + 6px); }
  #map-overlay { top: calc(var(--topbar-h, 40px) + 6px); }
  #game-stage:has(#group-bar:not([hidden])) #map-overlay { top: calc(var(--topbar-h, 40px) + 44px); }
}

/* What Needs Me? */
.nt-board.nt-needs { border-left: 3px solid var(--gold); font-weight: bold; }
.nd-title { margin: 6px 0; }
.nd-list { display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.nd-item { display: flex; gap: 8px; padding: 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; background: rgba(0, 0, 0, .2); }
.nd-dot { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: #7fb0d4; }
.nd-item.urgent .nd-dot { background: #ff6b5b; } .nd-item.warn .nd-dot { background: #e2bd62; }
.nd-item.urgent { border-color: rgba(255, 107, 91, .45); }
.nd-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nd-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-hide { opacity: .7; }
.nt-needs-page .nt-reader { display: block; }
@media (max-width: 760px) { .nt-needs-page .nt-reader { display: none; } }
/* the catch-up report */
.cu-table td.up { color: #7fd47f; } .cu-table td.down { color: #ff8a7a; }
.cu-list { margin: 4px 0 8px; padding-left: 18px; max-height: 22vh; overflow: auto; }
.cu-list li { margin: 2px 0; }
.cu-good { color: #7fd47f; } .cu-bad { color: #ff8a7a; }

/* alliances: each alliance's members */
.al-members { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; }
.al-member { color: var(--muted); }
.al-member.pending { font-style: italic; opacity: .75; }
.al-others { max-height: 30vh; overflow: auto; }

/* note attachments: pictures and Work Crew settings */
.nt-attach { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.nt-attach-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btnlike { display: inline-flex; align-items: center; cursor: pointer; padding: 4px 10px; border: 1px solid rgba(226, 189, 98, .45); border-radius: 4px; }
.nt-files { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 4px; font-size: 12px; }
.nt-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; }
.nt-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.nt-img { padding: 0; border: 1px solid rgba(255, 255, 255, .15); border-radius: 4px; background: none; cursor: zoom-in; }
.nt-img img { display: block; max-width: min(260px, 100%); max-height: 200px; object-fit: contain; }
.nt-crew { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid rgba(226, 189, 98, .35); border-radius: 6px; min-width: 200px; }
.nt-full { max-width: 100%; max-height: 75vh; object-fit: contain; align-self: center; }
.nt-clip { display: inline-block; width: 10px; height: 12px; border: 2px solid var(--muted); border-radius: 6px 6px 6px 6px; vertical-align: -2px; opacity: .8; }

/* governor mark (as on the map): gold G, ringed white when set by hand */
.gov-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: #e2bd62; color: #2a1c06; font: bold 10px/1 sans-serif; border: 1px solid rgba(40, 28, 8, .8); vertical-align: -3px; }
.gov-mark.hand { border: 2px solid #fff; }

/* phones held sideways: the tutorial card stays narrow enough to leave the map in view */
@media (max-height: 520px) and (orientation: landscape) {
  .coach { width: min(560px, calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .coach p { margin-bottom: 4px; }
}
/* touch: a long press or drag on the map, minimap or game buttons pans and selects; it never starts selecting
   text or opens the phone's copy/look up menu (chat messages and text fields can still be selected) */
#screen-game, #screen-game canvas, .coach, .coach-arrow { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#screen-game input, #screen-game textarea, #screen-game [contenteditable], #screen-game .chat-log {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Settings > Keys */
.keys-table td:first-child { width: 55%; }
.keys-table td:last-child { text-align: right; white-space: nowrap; }
.keys-table kbd, .keys-help kbd { display: inline-block; min-width: 1.4em; padding: 1px 6px; border: 1px solid rgba(226, 189, 98, .5); border-bottom-width: 2px; border-radius: 4px; font: 12px/1.4 ui-monospace, monospace; text-align: center; }
.key-wait { color: var(--gold); font-style: italic; }

/* ---------- the Shop ---------- */
.shop .sh-wrap { max-width: 860px; margin: 0 auto; padding: 4px 4px 24px; }
.shop h3 { margin: 18px 0 8px; color: var(--gold); }
.sh-balance { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(226, 189, 98, .45); border-radius: 10px; background: rgba(226, 189, 98, .08); }
.sh-balance b { display: block; font-size: 20px; }
.sh-balance .hint { display: block; }
/* a relic: a small faceted gem drawn in CSS */
.sh-relic { display: inline-block; width: 18px; height: 18px; flex: none; background: linear-gradient(135deg, #b9f3ff 0%, #4fb6e8 45%, #2a6fb0 55%, #8fe0ff 100%);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); filter: drop-shadow(0 0 3px rgba(120, 210, 255, .6)); }
.sh-relic.big { width: 34px; height: 34px; }
.sh-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sh-pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; text-align: center; }
.sh-pack b { font-size: 18px; }
.sh-pack button { margin-top: 6px; min-width: 90px; }
.sh-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sh-item { padding: 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.sh-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh-price { color: var(--gold); white-space: nowrap; }
.sh-form input { flex: 1; min-width: 0; }
.sh-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.sh-swatch { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: none; color: inherit; text-align: left; overflow: hidden; }
.sh-swatch.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.sh-swatch i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.sh-swatch i.lv { background: conic-gradient(#e2bd62, #9fd0ff, #b0e07a, #e2bd62); }
.sh-swatch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sh-ledger td:last-child { text-align: right; white-space: nowrap; }
.sh-ledger .up { color: #7ddc7d; } .sh-ledger .down { color: #e88; }

.sh-legal { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }