:root {
  --bg: #1e170f; --panel: #2c3e50; --panel2: #34495e; --accent: #2980b9; --accent2: #e67e22;
  --text: #ecf0f1; --muted: #95a5a6; --danger: #c0392b; --ok: #27ae60; --radius: 8px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; }
a { color: #5dade2; text-decoration: none; }
a:hover { text-decoration: underline; }
button { background: var(--accent); color: #fff; border: 0; padding: 8px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
button:hover { filter: brightness(1.12); }
button:disabled { opacity: .5; cursor: default; }
button.secondary { background: var(--panel2); }
button.danger { background: var(--danger); }
button.small { padding: 4px 8px; font-size: 12px; }
button.active { outline: 2px solid #f1c40f; }
input, select, textarea { width: 100%; padding: 7px 8px; margin: 4px 0 10px; border: 1px solid #46617a; border-radius: 6px;
  background: #1f2d3a; color: var(--text); font: inherit; }
input[type=checkbox] { width: auto; margin: 0 6px 0 0; }
input[type=color] { padding: 2px; height: 34px; }
input[type=file] { padding: 4px; }
label { display: block; color: #bdc3c7; font-size: 12px; margin-top: 6px; }
label.inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin: 8px 0; }
h1, h2, h3 { margin: 0 0 10px; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.error { color: #ff8a80; min-height: 1.2em; margin: 6px 0; font-size: 13px; }
.card { background: var(--panel); border-radius: var(--radius); padding: 18px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.center-page { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.center-page .card { width: 100%; max-width: 420px; }
.page { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.page header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.page header h1 { flex: 1; font-size: 22px; margin: 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tabs button { flex: 1; background: var(--panel2); }
.tabs button.active { background: var(--accent); outline: none; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.row > button { flex: 0 0 auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #3d566e; }
.list li.clickable { cursor: pointer; }
.list li:hover { background: rgba(255,255,255,.04); }
.list li.selected { background: rgba(41,128,185,.25); }
.list li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-list li { flex-wrap: wrap; }
.campaign-list li .grow { min-width: 150px; }
.badge { font-size: 11px; padding: 2px 6px; border-radius: 10px; background: var(--panel2); color: #dfe6e9; white-space: nowrap; }
.badge.gm { background: var(--accent2); color: #fff; }
.badge.online { background: var(--ok); color: #fff; }
.badge.admin { background: #8e44ad; color: #fff; }
.name-site-vip,.name-site-admin{display:inline-block;font-weight:800!important;color:transparent!important;background-size:200% auto;background-clip:text;-webkit-background-clip:text;animation:name-flare 3s linear infinite}
.name-site-vip{background-image:linear-gradient(100deg,#b88436,#ffeab1,#d7a64a,#fff5c8,#b88436)}
.name-site-admin{background-image:linear-gradient(100deg,#ad1d18,#ffb06c,#ff2920,#ffe0a0,#ad1d18)}
@keyframes name-flare{to{background-position:200% center}}
@media(prefers-reduced-motion:reduce){.name-site-vip,.name-site-admin{animation:none;background-position:45% center}}
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; border: 1px solid rgba(255,255,255,.4); }
.member-picture{width:26px;height:26px;object-fit:cover;border-radius:50%;flex:none}
.section { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.code { font-family: Consolas, monospace; font-size: 18px; letter-spacing: .15em; background: #1f2d3a; padding: 6px 10px; border-radius: 6px; display: inline-block; }
.hint { font-size: 12px; color: var(--muted); }

/* ---- Map app layout (docs/UI.md) ----
 * Top bar across; the main menu rail down the left; the map fills the rest. Panels slide over the map from
 * the rail; the nation bar (game mode) sits above the map; tools bottom left; chat and the turn button
 * bottom right. */
:root { --gold: #d4a84b; --gold2: #f3d58a; --chrome: #141d26; --chrome2: #1b2632; --line: #2e3e4f; --rail-w: 64px; --panel-w: 400px; --top-h: 46px; }
#app { position: fixed; inset: 0; display: grid; grid-template-rows: var(--top-h) 1fr; grid-template-columns: var(--rail-w) 1fr; }
#topbar { position: relative; grid-column: 1 / 3; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0;
  background: linear-gradient(#1f2b38, var(--chrome)); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(212,168,75,.35); z-index: 8; }
#topbar a.back { width: var(--rail-w); flex: none; text-align: center; font-size: 18px; color: var(--muted); }
#topbar a.back:hover { color: var(--gold2); text-decoration: none; }
#topbar h1 { font: 600 16px Georgia, 'Times New Roman', serif; letter-spacing: .02em; color: var(--gold2); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Campaign name and the ready-up bar share the left half (the bell sits in the middle). */
#titleWrap { flex: 1; min-width: 0; max-width: calc(50% - 110px); display: flex; align-items: center; gap: 10px; }
#titleWrap h1 { flex: 0 1 auto; min-width: 40px; }
#presence { margin-left: auto; display: flex; gap: 4px; }
#presence .avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--panel2); border: 2px solid transparent; }
#presence .avatar.gm { border-color: var(--accent2); }
#presence .avatar img,#membersList .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
#membersList .avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:11px;font-weight:700;color:#fff;background:#405c54;border:2px solid #698075;overflow:hidden}
#presence .avatar,#membersList .avatar,.cav{overflow:hidden}
@property --avatar-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
#presence .avatar.site-vip,#membersList .avatar.site-vip,.cav.site-vip{border:2px solid transparent;background:linear-gradient(#74521e,#74521e) padding-box,conic-gradient(from var(--avatar-angle),#a66d23,#ffe8a2,#bd8332,#fff4c5,#a66d23) border-box!important;box-shadow:0 0 0 1px #8e652a,0 0 11px rgba(255,207,94,.85);animation:avatar-shimmer 3s linear infinite}
#presence .avatar.site-admin,#membersList .avatar.site-admin,.cav.site-admin{border:2px solid transparent;background:linear-gradient(#9e2118,#9e2118) padding-box,conic-gradient(from var(--avatar-angle),#9a120d,#ff9b51,#ed251b,#ffe0a0,#9a120d) border-box!important;box-shadow:0 0 0 1px #8f1b15,0 0 12px rgba(255,62,34,.9);animation:avatar-shimmer 1.8s linear infinite}
@keyframes avatar-shimmer{to{--avatar-angle:360deg}}
@media(prefers-reduced-motion:reduce){#presence .avatar.site-vip,#membersList .avatar.site-vip,.cav.site-vip,#presence .avatar.site-admin,#membersList .avatar.site-admin,.cav.site-admin{animation:none}}
.topactions { display: flex; gap: 4px; }
.topactions button { font-size: 14px; padding: 4px 8px; }
/* View as player (GM): the switch, its nation menu, and a gold frame round the map while it is on. */
#viewAsWrap { position: relative; }
#btnViewAs.viewing { background: var(--gold); color: #1a1206; font-weight: 700; display: flex; align-items: center; gap: 6px; }
#btnViewAs .flag { height: 14px; border-radius: 2px; }
#viewAsMenu { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; max-height: 70vh; overflow: auto; z-index: 20; padding-bottom: 4px;
  background: var(--panel); border: 1px solid #46617a; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#viewAsMenu .vhead { padding: 8px 12px; border-bottom: 1px solid #3d566e; font-size: 12px; color: var(--muted); }
#viewAsMenu .vhead strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 2px; }
#viewAsMenu .vitem { display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 0; background: transparent; text-align: left; font-size: 13px; }
#viewAsMenu .vitem:hover { background: var(--panel2); }
#viewAsMenu .vitem.on { box-shadow: inset 3px 0 0 var(--gold); background: rgba(212,168,75,.1); }
#viewAsMenu .vitem .flag { height: 14px; width: 21px; object-fit: cover; border-radius: 2px; }
#viewAsMenu .vitem .vdot { width: 21px; height: 14px; border-radius: 2px; flex: none; }
#viewAsMenu .vitem .hint { font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app.viewas #stagewrap::after { content: ''; position: absolute; inset: 0; border: 3px solid var(--gold); pointer-events: none; z-index: 6; }
#app.viewas #stagewrap::before { content: attr(data-viewas); position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  background: var(--gold); color: #1a1206; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 0 0 8px 8px; white-space: nowrap; top: 0; }

/* Main menu rail */
#rail { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 4px;
  background: linear-gradient(90deg, var(--chrome), var(--chrome2)); border-right: 1px solid #000; box-shadow: 1px 0 0 rgba(212,168,75,.2);
  overflow-y: auto; scrollbar-width: none; z-index: 7; }
#rail::-webkit-scrollbar { display: none; }
#rail button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px; background: transparent;
  border: 1px solid transparent; border-radius: 8px; color: #b9c4cf; font-size: 10px; letter-spacing: .02em; }
/* Menu icons: the user's art, one cell each of assets/tabs.png (scripts/build-tabs.js), picked by --n. Inline in text
   (hints that name a panel) they sit on the line at about the text's height. */
.ti { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -.35em; background: url(/assets/tabs.png?v=1) 0 0 / 1100% 100% no-repeat;
  background-position-x: calc(var(--n, 0) * 10%); }
#rail button .ti { width: 32px; height: 32px; vertical-align: 0; filter: saturate(.75) brightness(.92); transition: filter .12s, transform .12s; }
#rail button:hover .ti, #rail button.on .ti { filter: drop-shadow(0 0 4px rgba(243,213,138,.35)); }
#rail button:hover .ti { transform: translateY(-1px); }
#rail button:hover { background: rgba(255,255,255,.06); color: #fff; filter: none; }
#rail button.on { background: rgba(212,168,75,.16); border-color: rgba(212,168,75,.55); color: var(--gold2); }
#rail button.on::before { content: ''; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--gold); }
#rail button .rbadge { position: absolute; top: 2px; right: 6px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; padding: 0 3px; }
#rail hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
#rail .railgap { flex: 1; min-height: 6px; }

#main { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#stagewrap { position: relative; flex: 1; min-height: 0; }
#stage { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
#stage canvas { display: block; touch-action: none; }

/* Nation bar: flag, name and resources of the viewed nation */
#nationbar { flex: none; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; background: rgba(16,23,31,.96);
  border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(212,168,75,.18); z-index: 6; min-width: 0; }
.nb-nation { display: flex; align-items: center; gap: 7px; flex: none; padding-right: 10px; border-right: 1px solid var(--line); height: 100%; }
.nb-nation .flag { height: 20px; max-width: 34px; }
.nb-nation b { font: 600 14px Georgia, serif; color: #f0e6cc; white-space: nowrap; }
.nb-nation select { width: auto; margin: 0; padding: 3px 6px; font: 600 13px Georgia, serif; background: #1b2632; color: #f0e6cc; border-color: var(--line); }
.nb-res { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; height: 100%; }
.nb-res::-webkit-scrollbar { display: none; }
.nbr { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: transparent; color: var(--text);
  font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; border: 1px solid transparent; }
.nbr:hover { background: rgba(255,255,255,.07); border-color: var(--line); filter: none; }
.nbr img { width: 18px; height: 18px; }
.nbr .reskey { margin: 0; }
.nbr b { font-weight: 600; }
.nbr small { font-size: 11px; color: var(--muted); }
.nbr small.up { color: #2ecc71; } .nbr small.down { color: #e74c3c; }
.nbr.short b { color: #ff9f80; }
.nbr.main { padding: 3px 9px; }
.nbr.main b { font-size: 14px; }
.nb-sep { flex: none; width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* Panels over the map, opened from the rail */
#sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: min(var(--panel-w), 100%); display: flex; flex-direction: column; z-index: 5;
  background: linear-gradient(180deg, #223140, #1c2835); border-right: 1px solid #000; box-shadow: 6px 0 24px rgba(0,0,0,.45); }
#sidebar[hidden] { display: none; }
.panelhead { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(212,168,75,.25);
  background: linear-gradient(#2a3a4b, #213040); flex: none; }
.panelhead .ti { width: 26px; height: 26px; vertical-align: 0; }
.panelhead h2 { flex: 1; margin: 0; font: 600 16px Georgia, serif; letter-spacing: .04em; color: var(--gold2); text-transform: uppercase; }
#panelClose { background: transparent; font-size: 20px; padding: 0 8px; color: var(--muted); }
#panelClose:hover { color: #fff; }
#sidebar .panel { display: none; overflow: auto; padding: 10px 12px 24px; flex: 1; min-height: 0; }
#sidebar .panel.active { display: block; }
#sidebar .panel.panel-fill.active { display: flex; flex-direction: column; }
#sidebar .panel.panel-fill #logList { flex: 1; overflow: auto; }

/* Boxes: the building block of panels */
.box { background: rgba(10,16,22,.35); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
.box > h4, .box h4 { margin: 0 0 8px; font: 600 12px 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); display: flex; align-items: center; gap: 6px; }
.box h4 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.box h4 .headbtns { margin-left: auto; display: flex; gap: 4px; }
.box .sub { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 0 4px; }
.box > :last-child { margin-bottom: 0; }
.story-art { display: inline-block; width: 48px; height: 48px; flex: none; background: url('/assets/story-documents.png') no-repeat; background-size: 400% 400%; image-rendering: pixelated; }
.story-art--rail { width: 32px; height: 32px; filter: saturate(.8) brightness(.95); }
.story-art--journal { background-position: 0 0; }
.story-art--private { background-position: 0 66.6667%; }
.story-art--stolen { background-position: 33.3333% 66.6667%; }
.story-art--government { background-position: 33.3333% 0; }
.story-art--statement, .story-art--diplomatic-note { background-position: 0 33.3333%; }
.story-art--newspaper, .story-art--news { background-position: 100% 100%; }
.story-art--report, .story-art--briefing { background-position: 66.6667% 100%; }
.story-art--announcement { background-position: 66.6667% 33.3333%; }
.story-art--world-event { background-position: 100% 0; }
.story-heading { display: flex; align-items: flex-start; gap: 9px; min-width: 0; margin-bottom: 7px; }
.story-heading > div { min-width: 0; }
.story-heading h3 { margin-top: 2px; overflow-wrap: anywhere; }
.journal-entry h3 { margin: 5px 0 8px; color: var(--gold2); font: 600 17px Georgia, serif; }
.journal-entry p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 8px; }
.journal-meta { color: var(--muted); font-size: 11px; }
.journal-entry a { display: inline-block; margin: 2px 0 8px; }
#journalList > h3, #journalStolen > h3 { margin: 15px 0 8px; font: 600 19px Georgia, serif; }
.government-list { margin: 4px 0; padding-left: 19px; }
.government-list li { margin: 7px 0; }
.government-list p, #governmentView .box > p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.government-row { display: flex; gap: 5px; align-items: center; margin: 0 0 7px; }
.government-row input { min-width: 0; flex: 1; }
.government-detail { flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 7px; }
.government-detail input, .government-detail select { flex: 1 1 130px; min-width: 0; }
#governmentStatus { margin: 5px 0 10px; }
.news-badge { color: #e1a445; font-size: 12px; margin-left: auto; }
.news-post h3 { margin: 5px 0 9px; color: var(--gold2); font: 600 18px Georgia, serif; }
.news-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.news-private { border-left: 3px solid var(--gold); background: rgba(212,168,75,.08); padding: 8px 10px; margin-top: 10px; }
.news-private .news-body { margin-top: 6px; }
#newsTargets { max-height: 190px; overflow: auto; margin: 6px 0; padding: 6px; border: 1px solid var(--line); border-radius: 5px; }
#newsMore { margin-bottom: 20px; }
.toolrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 6px 0; }
.toolrow > * { flex: 0 1 auto; }
.toolrow select, .toolrow input { width: auto; margin: 0; padding: 4px 6px; }
.toolrow input[type=number] { width: 80px; }
label.tight { margin: 0; display: flex; flex-direction: column; gap: 2px; }
label.tight select, label.tight input { margin: 0; }
.subtabs { display: flex; gap: 4px; margin: 0 0 10px; padding: 3px; background: rgba(0,0,0,.25); border-radius: 8px; }
.subtabs button { flex: 1; background: transparent; padding: 6px; font-size: 12px; color: #b9c4cf; border-radius: 6px; }
.subtabs button.on { background: rgba(212,168,75,.18); color: var(--gold2); box-shadow: inset 0 0 0 1px rgba(212,168,75,.45); }

/* Map tools, bottom left */
#hud { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; align-items: center; z-index: 3; flex-wrap: wrap; max-width: calc(100% - 330px); }
#app.panel-open #hud { left: calc(min(var(--panel-w), 100%) + 10px); }
.hudgroup { display: flex; gap: 2px; align-items: center; padding: 3px; background: rgba(16,23,31,.92); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 3px 12px rgba(0,0,0,.4); }
.hudgroup button { background: transparent; font-size: 14px; padding: 4px 8px; min-width: 30px; }
.hudgroup button:hover { background: rgba(255,255,255,.08); }
.hudgroup .badge { background: transparent; min-width: 40px; text-align: center; }
#rendererLabel { opacity: .5; }
#modeHud { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(26,37,48,.95);
  padding: 8px 12px; border-radius: 6px; display: none; z-index: 4; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); }
#modeHud.show { display: block; }

/* Bottom right dock: chat and the turn widget */
#chatDock .dockrow { display: flex; align-items: flex-end; gap: 10px; }
#turnWidget { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 170px; padding: 8px 10px; border-radius: 12px;
  background: linear-gradient(#26364a, #18222d); border: 1px solid rgba(212,168,75,.55); box-shadow: 0 6px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
#turnWidget[hidden] { display: none; }
.tw-info { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.tw-info b { font: 600 15px Georgia, serif; color: var(--gold2); letter-spacing: .03em; }
.tw-info span { font-size: 12px; color: #cfd8e0; }
.tw-deadline:empty { display: none; }
.tw-info .tw-deadline { font-size: 11px; color: var(--muted); }
.tw-info .tw-deadline.overdue { color: #ff9f80; font-weight: 600; }
.tw-main { font: 700 14px Georgia, serif; letter-spacing: .06em; text-transform: uppercase; padding: 9px 14px; border-radius: 8px;
  background: linear-gradient(#c0392b, #8e2a20); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.tw-main.ready-btn { background: linear-gradient(#d68a2a, #a35f12); }
.tw-main.battle-btn { background: linear-gradient(#b03a2e, #7b241c); }
.tw-info .tw-phase { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.tw-info .tw-phase:empty { display: none; }
.tw-info .tw-phase.move { color: #9fd3a8; }
.tw-info .tw-phase.battle { color: #ff8f7a; }
/* Phase change banner over the map (phased turns) */
#phaseBanner { position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; text-align: center;
  padding: 14px 34px; border-radius: 10px; background: rgba(16,22,30,.88); border: 1px solid rgba(212,168,75,.6); box-shadow: 0 10px 40px rgba(0,0,0,.6);
  font: 700 26px Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gold2); animation: phaseIn 3.2s ease forwards; }
#phaseBanner[hidden] { display: none; }
#phaseBanner small { display: block; margin-top: 4px; font: 400 13px system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #cfd8e0; }
#phaseBanner.battle { border-color: rgba(231,76,60,.75); color: #ff8f7a; }
@keyframes phaseIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* Selection bar: what can be done with several selected units (corps) */
#selBar { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 6px; align-items: center;
  padding: 6px 10px; border-radius: 8px; background: rgba(26,37,48,.95); border: 1px solid var(--line); white-space: nowrap; max-width: calc(100% - 20px); }
#selBar[hidden] { display: none; }
#selBar select { max-width: 160px; }
.corpslist .corps { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); }
.corpslist .corps:first-child { border-top: 0; }
.corpslist .corps b { flex: 1 1 auto; }
.tw-main.ready-btn.done { background: linear-gradient(#2e9e5b, #1d6e3e); }
#turnWidget.allready #btnEndTurn { animation: twPulse 1.6s ease-in-out infinite; }
@keyframes twPulse { 50% { box-shadow: 0 0 0 4px rgba(46,204,113,.45), inset 0 1px 0 rgba(255,255,255,.2); } }
.tw-sub { font-size: 11px; color: var(--muted); text-align: center; }
.tw-sub.all { color: #7ee2a8; font-weight: 600; }

/* Selection card: the panel of whatever is selected, docked bottom left above the tools */
#popup { position: absolute; left: 10px; bottom: 60px; width: 320px; max-width: calc(100% - 20px); max-height: calc(100% - 80px); overflow: auto;
  background: linear-gradient(#22303f, #1a2531); border: 1px solid rgba(212,168,75,.45); border-radius: 10px; padding: 12px; z-index: 4; display: none; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
#app.panel-open #popup { left: calc(min(var(--panel-w), 100%) + 10px); }
#popup h3 { font: 600 15px Georgia, serif; color: #f0e6cc; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

#readyBar { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 14px; background: rgba(0,0,0,.25);
  border: 1px solid #0f1720; overflow-x: auto; scrollbar-width: none; }
#readyBar[hidden] { display: none; }
#readyBar::-webkit-scrollbar { display: none; }
#readyBar.all { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
#readyBar .rcount { font-size: 11px; color: var(--muted); white-space: nowrap; padding-right: 2px; }
#readyBar.all .rcount { color: #7ee2a8; font-weight: 700; }
.rchip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px; background: transparent; border: 1px solid transparent;
  border-radius: 6px; cursor: default; color: var(--text); font-size: 11px; line-height: 1; }
.rchip.can { cursor: pointer; }
.rchip.can:hover { background: rgba(255,255,255,.08); }
.rchip .flag { height: 16px; max-width: 30px; opacity: .55; filter: grayscale(.6); transition: opacity .2s, filter .2s; }
.rchip .rdot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; opacity: .55; border: 1px solid rgba(0,0,0,.6); }
.rchip.ready .flag, .rchip.ready .rdot { opacity: 1; filter: none; }
.rchip .ricon { position: relative; display: inline-flex; }
.rchip .chk { position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 9px;
  font-weight: 900; display: none; align-items: center; justify-content: center; border: 1px solid #0f1720; }
.rchip.ready .chk { display: flex; }
.rchip.mine { border-color: #3d566e; padding-right: 7px; }
.rchip.mine:not(.ready) { border-color: var(--accent2); animation: readyNudge 2.4s ease-in-out infinite; }
.rchip.mine.ready { border-color: var(--ok); }
.rchip .rlabel { white-space: nowrap; font-weight: 600; margin-left: 5px; }
@keyframes readyNudge { 50% { box-shadow: 0 0 0 2px rgba(230,126,34,.35); } }
/* Phones: the rail becomes a tab bar along the bottom, panels take the whole map, the selection card spans the width. */
@media (max-width: 760px) {
  :root { --top-h: 44px; }
  #app { grid-template-columns: 1fr; grid-template-rows: var(--top-h) 1fr 56px; }
  #topbar { padding-right: 8px; gap: 6px; }
  #topbar a.back { width: 34px; }
  #titleWrap { flex: 1; max-width: none; }
  #titleWrap h1 { display: none; }
  #presence { display: none; }
  #rail { grid-row: 3; grid-column: 1; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 4px; border-right: 0; border-top: 1px solid #000; }
  #rail button { flex: 0 0 60px; }
  #rail hr, #rail .railgap { display: none; }
  #rail button.on::before { left: 8px; right: 8px; top: -4px; bottom: auto; width: auto; height: 3px; }
  #main { grid-column: 1; }
  #sidebar { width: 100%; }
  #app.panel-open #hud, #app.panel-open #popup { left: 10px; }
  #hud { max-width: calc(100% - 20px); }
  #rendererLabel { display: none; }
  #popup { width: auto; right: 10px; bottom: 56px; max-height: 55%; }
  #turnWidget { min-width: 0; padding: 6px 8px; }
  .tw-main { padding: 7px 10px; font-size: 12px; }
  #chatToggle { padding: 7px 11px; }
}
.log .ev.roll { color: #f1c40f; }
.log .ev.combat { color: #ff9f80; }
.log .ev.turn { color: #f9c74f; }
.log .ev.history { display: flex; align-items: flex-start; gap: 6px; }
.log .ev.history .grow { flex: 1; }
.log .ev.history.reverted { opacity: .55; text-decoration: line-through; }
.log .ev.history .badge { flex: none; }
.sprite { display: inline-block; vertical-align: middle; }
.spritegrid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 60vh; overflow: auto; background: #1f2d3a; padding: 8px; border-radius: 6px; }
.spritegrid .cell { width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 5px; cursor: pointer; background: rgba(0,0,0,.28); }
.spritegrid .cell:hover { border-color: #5dade2; }
.spritegrid .cell.selected { border-color: #f1c40f; }
.coloricon { grid-template-columns: 84px 1fr; }
#addForm .coloricon { grid-template-columns: 1fr; }   /* the sidebar is too narrow for two columns */
.field { display: block; color: #bdc3c7; font-size: 12px; margin-top: 6px; }
.iconrow { display: flex; align-items: center; gap: 5px; min-height: 40px; margin: 4px 0 6px; flex-wrap: wrap; }
.iconrow .sprite { background-color: rgba(0,0,0,.25); border-radius: 4px; }
label.filebtn { display: inline-block; margin: 0; padding: 4px 8px; font-size: 12px; border-radius: 6px; cursor: pointer; background: var(--panel2); color: var(--text); }
label.filebtn:hover { filter: brightness(1.15); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 8px; }
details.sub { margin: 6px 0; }
details.sub > summary { cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 0; user-select: none; list-style-position: inside; }
details.sub > summary .hint { text-transform: none; letter-spacing: 0; }
/* Game layer */
#turnLabel.turn { background: rgba(241,196,15,.18); color: #f9c74f; border: 1px solid rgba(241,196,15,.5); }
.nationhead { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 15px; flex-wrap: wrap; }
.pools { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.pools div { background: var(--panel2); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; }
.pools b { font-size: 16px; }
.delta { font-size: 11px; } .delta.up, .num.up { color: #2ecc71; } .delta.down, .num.down { color: #e74c3c; }
.treasury { width: 100%; border-collapse: collapse; font-size: 13px; }
.treasury td, .treasury th { padding: 3px 4px; border-bottom: 1px solid #3d566e; text-align: left; }
.treasury th { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.treasury .num { text-align: right; font-variant-numeric: tabular-nums; }
.resicon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; image-rendering: auto; }
.reskey { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(255,255,255,.25); }
.hintlist { margin: 4px 0 0 16px; padding: 0; font-size: 12px; color: var(--muted); }
.rel { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.rel.war { background: rgba(231,76,60,.25); color: #ff9f80; }
.rel.peace { background: rgba(255,255,255,.08); color: var(--muted); }
.rel.alliance { background: rgba(46,204,113,.22); color: #7ee2a8; }
/* Heroes: a 2:3 portrait in an oval golden ring whose light runs round it */
@property --hero-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes hero-spin { to { --hero-a: 360deg; } }
.herocard { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; }
.hero-portrait { flex: 0 0 auto; width: 84px; aspect-ratio: 2 / 3; border-radius: 50%; padding: 4px;
  background: conic-gradient(from var(--hero-a), #6e4f0e, #d4af37 20%, #fff6c8 28%, #d4af37 36%, #8a6a1a 60%, #f5d76e 80%, #6e4f0e);
  animation: hero-spin 3.2s linear infinite; box-shadow: 0 0 12px rgba(245, 215, 110, .35); }
.hero-oval { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #18212b; display: flex; align-items: center; justify-content: center; }
.hero-oval img, .hero-oval canvas { width: 100%; height: 100%; object-fit: cover; }
.hero-initials { font: 700 22px Georgia, serif; color: #f5e6b8; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.hero-initials small { font-size: 14px; color: #d4af37; }
.hero-info { flex: 1; min-width: 0; }
.hero-role { font-weight: 600; }
.hero-stars { color: #f5d76e; letter-spacing: 1px; font-size: 15px; margin: 1px 0 4px; }
.herocard.travelling .hero-portrait, .herocard.captured .hero-portrait { filter: grayscale(.6) brightness(.8); }
.herosend { display: inline-flex; gap: 4px; align-items: center; }
.herosend select { width: auto; margin: 0; padding: 3px 6px; }
.herolist { display: grid; gap: 4px; }
.heroitem { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--panel2); padding: 4px 8px; width: 100%; }
.hero-mini { width: 26px; height: 39px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: #18212b; box-shadow: 0 0 0 2px #d4af37; color: #f5d76e; }
.hero-mini img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero-portrait { animation: none; } }

/* Phase 5: turn reports, deadline countdown, captured places */
.badge.turn.overdue { background: #7a2e2e; color: #ffd9d9; }
.badge.province { background: rgba(20,30,25,.85); color: #e8f0ea; font-style: italic; }
.deadline-quick { flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.deadline-quick .hint { flex: 0 0 auto; }
.deadline-quick button.small { padding: 2px 8px; font-size: 11px; }
.captured { font-size: 12px; margin: 4px 0; }
.captured.up { color: #2ecc71; } .captured.down { color: #e74c3c; }
.treasury tr.me td { background: rgba(255,255,255,.05); }
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .report-cols { grid-template-columns: 1fr; } }
.report .tabs.small { flex-wrap: wrap; }
.report .tabs.small button { flex: 0 1 auto; padding: 4px 8px; font-size: 12px; }
.hintlist li.up { color: #2ecc71; } .hintlist li.down { color: #e74c3c; }
.diplo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid #3d566e; font-size: 12px; line-height: 1.2; }
.diplo button.small { padding: 2px 6px; font-size: 11px; }
.diplo .grow { flex: 1; min-width: 120px; }
.site { margin-bottom: 6px; }
.buildlist { max-height: 60vh; overflow: auto; }
.modal .card.wide.research-card-modal { width: min(2400px, calc(100vw - 24px)); max-width: none; height: min(1400px, calc(100dvh - 24px)); max-height: none; display: flex; flex-direction: column; overflow: hidden; background: #17291e; border: 1px solid #607557; }
.research-card-modal h2 { color: #ebdfb4; }
.research-card-modal #techHint { max-width: none; line-height: 1.3; }
.techtree { display: flex; flex: 1; min-height: 0; overflow: hidden; margin-top: 7px; border: 1px solid #526d52; background: radial-gradient(circle at 50% 20%, #24412e, #101f17 72%); }
.tech-branch-rail { flex: 0 0 150px; overflow: hidden; z-index: 4; background: #1b3023; border-right: 2px solid #88966c; box-shadow: 5px 0 14px #050c0799; }
.tech-rail-head, .tech-year { height: 38px; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 15px; letter-spacing: .06em; color: #e9dcb6; background: linear-gradient(#2c4533, #1b3023); border-bottom: 2px solid #9f9f7b; }
.tech-rail-head { position: sticky; top: 0; z-index: 5; text-transform: uppercase; font-size: 11px; color: #b4c5bb; }
.tech-rail-row { display: flex; align-items: center; padding: 8px; color: #d7dbc7; font-family: Georgia, serif; font-size: 14px; border-bottom: 1px solid #4c674d; background: #1b3023; }
.tech-tree-scroll { flex: 1; min-width: 0; overflow: auto; scrollbar-color: #9a9f7b #122519; }
.tech-timeline { position: relative; width: max-content; min-width: 100%; --tech-column-width: 255px; }
.tech-years, .tech-lane { display: grid; grid-template-columns: repeat(var(--tech-years), var(--tech-column-width)); }
.tech-years { position: sticky; top: 0; z-index: 5; }
.tech-year { gap: 5px; border-right: 1px solid #5d7757; }
.tech-year.current { color: #ffe2a0; border-bottom-color: #e7b955; }
.tech-year small { align-self: end; margin-bottom: 5px; font: 9px 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.tech-lane { border-bottom: 1px solid #426046; background: linear-gradient(180deg, #456b3928, transparent 28%); }
.tech-lane:nth-of-type(even) { background-color: #ffffff05; }
.tech-year-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 10px; border-right: 1px solid #ffffff12; }
.tech-links { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.tech-links path { fill: none; stroke: #c7d2b5; stroke-width: 2; opacity: .62; stroke-linejoin: round; }
.tech-links path.complete { stroke: #95d876; opacity: .85; }
.tech-node { position: relative; z-index: 1; width: 231px; min-height: 80px; display: grid; grid-template-columns: 45px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 6px; padding: 5px 6px; border: 2px solid #b0a16d; border-radius: 8px; color: #f7efda; background: linear-gradient(140deg, #4b452c, #243525 34%, #17281d 90%); box-shadow: inset 0 0 0 1px #ffffff25, 0 3px 8px #0009; outline: none; }
.tech-node:hover, .tech-node:focus-visible, .tech-node:focus-within { border-color: #ffe6a0; box-shadow: 0 0 0 2px #f4ce7644, 0 5px 14px #000b; }
.tech-node.done { border-color: #69bf62; background: linear-gradient(135deg, #305a2d, #172c22 42%, #10251c); }
.tech-node.active { border-color: #d9c274; background: linear-gradient(135deg, #557243, #27442c 48%, #19331f); }
.tech-node.queued { border-color: #d6ba5b; }
.tech-node.locked { border-color: #607261; color: #bbc9ba; background: linear-gradient(135deg, #314236, #17291d); }
.tech-icon { grid-row: 1 / 3; width: 43px; height: 43px; display: grid; place-items: center; overflow: hidden; border: 2px solid #d9c58e; border-radius: 50%; background: radial-gradient(circle, #f2dfab, #8a6c38); box-shadow: 0 0 0 2px #071517, inset 0 0 8px #fff9; }
.tech-node.locked .tech-icon { border-color: #87908e; filter: saturate(.55); }
.tech-icon img { width: 35px; height: 35px; object-fit: contain; }
.tech-node-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tech-node-title { font-family: Georgia, serif; font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.tech-node-meta { margin-top: 3px; font-size: 10px; color: #c7d1bc; }
.tech-node-status { grid-column: 2; justify-self: start; padding: 1px 5px; border-radius: 3px; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: #f2dfae; background: #0006; }
.tech-node.done .tech-node-status { color: #aee9a3; }
.tech-node.active .tech-node-status { color: #f4dfa8; }
.tech-node-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; }
.tech-node-actions button.small { font-size: 10px; line-height: 1; padding: 3px 6px; }
.tech-node-progress { grid-column: 1 / -1; height: 3px; background: #0c1d11; border-radius: 3px; overflow: hidden; }
.tech-node-progress i { display: block; height: 100%; background: #d9c274; }
.tech-tooltip { position: fixed; z-index: 50; width: min(300px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid #d0b775; border-radius: 7px; color: #f7eed7; background: #172a1c; box-shadow: 0 12px 30px #000c; pointer-events: none; font-size: 12px; line-height: 1.4; }
.tech-tooltip strong { color: #ffe6aa; font-family: Georgia, serif; font-size: 15px; }
.tech-tooltip p { margin: 6px 0; }
.tech-tooltip-heading { margin-top: 8px; color: #a7d6ad; font-weight: 700; }
.tech-tooltip ul { margin: 5px 0 0; padding-left: 18px; }
.tech-tooltip-needs { margin-top: 8px; padding-top: 7px; border-top: 1px solid #ffffff30; color: #b6c3c0; }
@media (max-width: 700px) { .tech-branch-rail { flex-basis: 94px; } .tech-rail-row { font-size: 11px; padding: 5px; } .tech-timeline { --tech-column-width: 245px; } .tech-node { width: 219px; } }
.progress { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin: 4px 0; }
.progress i { display: block; height: 100%; background: #f1c40f; }
.qalist { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; }
.qalist .section { grid-column: 1 / -1; margin: 10px 0 2px; }
.qa { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--panel2); text-align: left; font-size: 12px; line-height: 1.15; border: 1px solid transparent; min-height: 36px; }
.qa img { width: 40px; height: 27px; flex: none; }
.qa.active { border-color: #f1c40f; background: rgba(241,196,15,.18); }
#popup .sprite { display: block; margin: 0 auto 6px; }
.flag { display: inline-block; height: 14px; width: auto; max-width: 28px; vertical-align: middle; border: 1px solid rgba(0,0,0,.6); border-radius: 2px; background: #000; object-fit: cover; }
.flag.big { height: 22px; max-width: 44px; }
.flagpreview { width: 120px; height: 80px; background: #1f2d3a; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.flagpreview img { max-width: 100%; max-height: 100%; }
.flaggrid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 40vh; overflow: auto; background: #1f2d3a; padding: 8px; border-radius: 6px; }
.flaggrid .cell { width: 92px; cursor: pointer; border: 2px solid transparent; border-radius: 5px; padding: 4px; text-align: center; font-size: 11px; color: var(--muted); }
.flaggrid .cell img { width: 80px; height: 53px; object-fit: cover; display: block; margin: 0 auto 3px; border-radius: 3px; }
.flaggrid .cell:hover { border-color: #5dade2; }
.flaggrid .cell.selected { border-color: #f1c40f; color: var(--text); }
.keygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.keygrid .k { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.keygrid .k img { width: 66px; height: 45px; image-rendering: auto; flex: none; }
.vis { font-size: 10px; padding: 1px 5px; border-radius: 8px; background: #1f5f8b; color: #dff3ff; white-space: nowrap; }
#popup .row { margin-top: 6px; }
#popup .stat { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 1px 0; }
#popup .actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
#popup img.icon { max-width: 100%; max-height: 140px; border-radius: 6px; display: block; margin-bottom: 6px; }
#popup .notes { font-size: 12px; white-space: pre-wrap; margin: 6px 0 0; color: #dfe6e9; }
#emptyMap { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
#emptyMap.show { display: flex; }
#emptyMap .card { pointer-events: auto; max-width: 360px; text-align: center; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 20; padding: 12px; }
.modal.open { display: flex; }
.modal .card { width: 100%; max-width: 460px; max-height: 92vh; overflow: auto; position: relative; }
.modal .close { position: absolute; top: 8px; right: 10px; background: transparent; font-size: 20px; padding: 2px 8px; }
.modal .card.wide { max-width: 820px; }
.statswrap { overflow: auto; max-height: 62vh; margin-top: 8px; border: 1px solid #3d566e; border-radius: 6px; }
.stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats th, .stats td { padding: 3px 4px; text-align: center; border-bottom: 1px solid #3d566e; white-space: nowrap; }
.stats th { position: sticky; top: 0; background: #1f2d3a; font-size: 12px; color: #bdc3c7; z-index: 1; }
.stats th.name, .stats td.name { text-align: left; }
.stats tr.cat td { background: rgba(255,255,255,.05); font-weight: 600; text-align: left; padding: 8px 6px 4px; }
.stats tr.changed td.name { color: #f9c74f; }
.stats .pm { display: inline-flex; align-items: center; gap: 2px; }
.stats .pm button { padding: 0 7px; font-size: 14px; line-height: 22px; min-width: 22px; }
.stats .pm input { width: 46px; padding: 2px 4px; margin: 0; text-align: center; font-size: 13px; -moz-appearance: textfield; }
.stats .pm input::-webkit-outer-spin-button, .stats .pm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stats .pm.chg input { border-color: #f39c12; color: #f9c74f; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #1a2530; border: 1px solid #46617a;
  padding: 10px 14px; border-radius: 6px; z-index: 30; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
.log { font-size: 13px; }
.log .ev { padding: 4px 0; border-bottom: 1px solid #3d566e; }
.log .ev.system { color: var(--muted); font-style: italic; }
.log .who { font-weight: 700; color: #5dade2; }
.log .when { font-size: 11px; color: var(--muted); margin-left: 4px; }
/* Railways: cut sections listed in the railway popup */
.railcuts { display: grid; gap: 4px; margin: 6px 0 2px; }
.railcut { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.railcut > span { flex: 1; min-width: 0; }

/* ---- Notification centre (top centre) ---- */
#notifWrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; }
#notifBtn { position: relative; padding: 2px 8px; display: inline-flex; align-items: center; }
#notifIcon { width: 26px; height: 26px; display: block; }
#notifBtn.has { background: #7d5a17; }
#notifBtn #notifCount:not(:empty) { margin-left: 5px; background: var(--danger); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700; }
#notifBtn.ring { animation: notifRing .9s ease; }
@keyframes notifRing { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
#notifPanel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--panel); border: 1px solid #46617a; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#notifPanel .nhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #3d566e; position: sticky; top: 0; background: var(--panel); }
.nitem { display: flex; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #3d566e; align-items: flex-start; }
.nitem.needs { background: rgba(241, 196, 15, .08); }
.nitem.new { box-shadow: inset 3px 0 0 #f1c40f; }
.nitem .nicon { font-size: 18px; line-height: 1.2; }
.nitem .nbody { flex: 1; min-width: 0; }
.nitem .ntext { font-size: 13px; }
.nitem .nsub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nitem .nacts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.nitem .ndismiss { background: transparent; color: var(--muted); padding: 0 4px; font-size: 16px; }

/* ---- Chat window (bottom right; docs/COMMS.md) ---- */
#chatDock { position: fixed; right: 16px; bottom: 16px; z-index: 15; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
#chatDock > * { pointer-events: auto; }
#chatToggle { display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.45); border-radius: 20px; padding: 6px 14px 6px 10px; background: var(--panel2); }
#chatToggle.active { background: #3b5570; }
#chatToggle.has { background: #7d5a17; }
#chatIcon { width: 24px; height: 24px; display: block; }
#chatBadge { background: var(--danger); border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700; }
#chatWin { width: min(680px, calc(100vw - 32px)); height: min(540px, calc(100vh - 140px)); display: flex; flex-direction: column;
  background: var(--chrome2); border: 1px solid rgba(212,168,75,.55); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
#chatWin.big { width: min(960px, calc(100vw - 32px)); height: min(720px, calc(100vh - 120px)); }
#chatWin[hidden] { display: none; }
.chat-top { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px; border-bottom: 1px solid rgba(212,168,75,.35); background: linear-gradient(#26364a, #18222d); }
#chatHead { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
#chatHead .ct { font: 600 14px Georgia, serif; color: var(--gold2); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatHead .cs { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-top button.icon { background: transparent; color: #b9c4cf; padding: 2px 7px; font-size: 16px; line-height: 1; border-radius: 6px; }
.chat-top button.icon:hover { background: rgba(255,255,255,.08); color: #fff; }
#chatSideBtn { display: none; }
.chat-main { flex: 1; display: flex; min-height: 0; position: relative; }
#chatSide { width: 196px; flex: none; overflow-y: auto; scrollbar-width: thin; padding: 6px; background: var(--chrome); border-right: 1px solid #000; box-shadow: 1px 0 0 rgba(212,168,75,.15); }
#chatSide .sh { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding: 8px 8px 3px; display: flex; justify-content: space-between; align-items: baseline; }
#chatSide .sh .hint { font-weight: 400; letter-spacing: 0; text-transform: none; }
.crow, .prow { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; color: #cfd8e0;
  padding: 5px 8px; border-radius: 6px; font-size: 13px; line-height: 1.2; }
.crow:hover, .prow:hover { background: rgba(255,255,255,.06); color: #fff; }
.crow.on, .prow.on { background: rgba(212,168,75,.16); color: var(--gold2); box-shadow: inset 2px 0 0 var(--gold); }
.prow.picked { background: rgba(41,128,185,.22); box-shadow: inset 0 0 0 1px var(--accent); }
.crow .cic { width: 24px; text-align: center; font-size: 15px; flex: none; }
.clab { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csub .flag { height: 10px; vertical-align: -1px; margin-right: 2px; }
.cnt { background: var(--danger); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 10px; font-weight: 700; line-height: 16px; flex: none; }
.prow .tick { color: var(--accent); font-weight: 700; }
.cav { width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.cav.gap { visibility: hidden; height: 1px; }
.cav img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cav.mini { width: 16px; height: 16px; font-size: 8px; }
.cav.big { width: 44px; height: 44px; font-size: 16px; margin: 0 3px; }
.pdot { position: absolute; left: 26px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: #5d6d7e; border: 2px solid var(--chrome); }
.pdot.on { background: var(--ok); }
.chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#chatPick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(41,128,185,.14); border-bottom: 1px solid rgba(41,128,185,.4); font-size: 12px; }
#chatPick[hidden] { display: none; }
#chatPick .chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chrome); border: 1px solid; border-radius: 10px; padding: 1px 4px 1px 8px; font-size: 12px; }
#chatPick .chip button { background: transparent; padding: 0 3px; font-size: 13px; color: var(--muted); }
#chatPick input { width: 150px; margin: 0; padding: 4px 8px; font-size: 12px; }
#chatBody { flex: 1; overflow-y: auto; scrollbar-width: thin; padding: 6px 12px; }
.cmore { text-align: center; margin: 4px 0 8px; }
.cday { text-align: center; margin: 10px 0 6px; }
.cday span { font-size: 11px; color: var(--muted); background: var(--chrome); padding: 2px 10px; border-radius: 9px; }
.cnew { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; color: var(--accent2); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cnew::before, .cnew::after { content: ''; flex: 1; border-top: 1px solid currentColor; opacity: .6; }
.cmsg { display: flex; align-items: flex-end; gap: 8px; margin: 1px 0; font-size: 13px; }
.cmsg:not(.cont) { margin-top: 8px; }
.cmsg.own { flex-direction: row-reverse; }
.cmsg .bubble { max-width: 80%; min-width: 60px; background: rgba(255,255,255,.07); border-radius: 12px 12px 12px 4px; padding: 5px 22px 4px 10px; position: relative; }
.cmsg.own .bubble { padding: 5px 10px 4px 22px; }
.cmsg.cont .bubble { border-radius: 4px 12px 12px 4px; }
.cmsg.own .bubble { background: rgba(212,168,75,.17); border: 1px solid rgba(212,168,75,.3); border-radius: 12px 12px 4px 12px; }
.cmsg.own.cont .bubble { border-radius: 12px 4px 4px 12px; }
.cmsg .who { font-weight: 700; font-size: 12px; display: block; margin-bottom: 1px; }
.cmsg .text { white-space: pre-wrap; word-wrap: break-word; line-height: 1.35; }
.cmsg .text a { color: #9ccbee; }
.cmsg .when { display: block; text-align: right; color: var(--muted); font-size: 10px; margin-top: 2px; }
.cmsg .ticks { margin-left: 4px; letter-spacing: -2px; color: #8aa; }
.cmsg .ticks.all { color: var(--gold2); }
.cmsg.roll, .cmsg.announce { align-items: flex-start; }
.cmsg.roll .line { color: #f1c40f; padding: 4px 0; }
.cmsg.roll .who { display: inline; margin-right: 4px; }
.cmsg.roll .when, .cmsg.sys .when, .cmsg.announce .when { display: inline; margin-left: 6px; }
.cmsg.sys { display: block; text-align: center; color: var(--muted); font-style: italic; font-size: 12px; margin-top: 6px; }
.cmsg.announce .line { flex: 1; background: rgba(230,126,34,.12); border-left: 3px solid var(--accent2); padding: 5px 10px; border-radius: 4px; }
.cmsg.announce .who { display: inline; }
.seenby { display: flex; justify-content: flex-end; gap: 2px; margin: 2px 0 2px; }
.chat-empty { text-align: center; margin-top: 30px; padding: 0 20px; }
.chat-empty .cavs { margin-bottom: 8px; }
#chatTyping { min-height: 16px; font-size: 11px; color: var(--muted); font-style: italic; padding: 0 14px; }
/* The ⋯ menu by a message, deleted messages, GIFs, the report bar, the GIF picker */
.cmsg .cmenu { position: absolute; top: 2px; right: 2px; background: transparent; color: var(--muted); padding: 0 5px; font-size: 14px; line-height: 1; border-radius: 4px; opacity: 0; }
.cmsg.own .cmenu { right: auto; left: 2px; }
.cmsg:hover .cmenu, .cmsg .cmenu:focus { opacity: 1; }
.cmsg .cmenu:hover { background: rgba(255,255,255,.1); color: #fff; }
.cmsg.announce .line { position: relative; }
.cmsg .text.del { color: var(--muted); font-style: italic; }
.cmsg .cgif { display: block; margin: 2px 0; }
.cmsg .cgif img { display: block; max-width: 240px; max-height: 240px; width: 100%; border-radius: 8px; background: #000; }
.cmsg.gif .bubble { padding: 4px; }
.cmsg.gif .when { padding: 0 6px 2px; }
#chatMenu { position: absolute; z-index: 5; min-width: 160px; background: var(--chrome2); border: 1px solid rgba(212,168,75,.45); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.55); padding: 4px; display: flex; flex-direction: column; }
#chatMenu[hidden] { display: none; }
#chatMenu button { background: transparent; color: #e6ecf1; text-align: left; padding: 6px 10px; border-radius: 5px; font-size: 13px; }
#chatMenu button:hover { background: rgba(255,255,255,.08); }
#chatReport { padding: 8px 10px; background: rgba(192,57,43,.12); border-bottom: 1px solid rgba(192,57,43,.4); font-size: 12px; }
#chatReport[hidden] { display: none; }
#chatReport blockquote { margin: 6px 0; padding: 4px 8px; border-left: 3px solid var(--muted); color: var(--muted); font-style: italic; white-space: pre-wrap; }
#chatReport textarea { width: 100%; margin: 4px 0; resize: vertical; font-size: 12px; }
#chatReport .racts { display: flex; gap: 6px; }
#chatGifs { border-top: 1px solid rgba(212,168,75,.2); background: var(--chrome); display: flex; flex-direction: column; max-height: 55%; }
#chatGifs[hidden] { display: none; }
#chatGifs .ghead { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; color: var(--gold2); }
#chatGifs .ghead input { flex: 1; margin: 0; padding: 4px 8px; font-size: 12px; }
#chatGifs .ghead .icon { background: transparent; color: #b9c4cf; padding: 2px 6px; font-size: 16px; }
#chatGifGrid { flex: 1; overflow-y: auto; scrollbar-width: thin; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; padding: 0 8px 6px; min-height: 60px; }
#chatGifGrid .gtile { padding: 0; background: #000; border-radius: 6px; overflow: hidden; aspect-ratio: 1; }
#chatGifGrid .gtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
#chatGifGrid .gtile:hover { outline: 2px solid var(--gold); }
#chatGifGrid .hint { grid-column: 1 / -1; text-align: center; margin: 12px 0; }
#chatGifs .gfoot { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; }
#chatSend #chatGif { background: transparent; color: #b9c4cf; font: 700 11px/1 Georgia, serif; letter-spacing: .05em; padding: 0 6px; height: 34px; border: 1px solid var(--line); border-radius: 6px; }
#chatSend #chatGif:hover, #chatSend #chatGif.on { color: var(--gold2); border-color: var(--gold); }
#chatSend { display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px 8px; border-top: 1px solid rgba(212,168,75,.2); }
#chatSend textarea { flex: 1; margin: 0; resize: none; min-height: 34px; max-height: 120px; line-height: 1.3; padding: 7px 10px; font-size: 13px; }
#chatSend button { height: 34px; }
#chatReadOnly { padding: 8px 12px; margin: 0; border-top: 1px solid rgba(212,168,75,.2); }

/* Conversation controls: independent drafts, mentions, replies and history navigation. */
.chat-pane { min-height: 0; }
#chatTools { padding: 6px 8px; border-bottom: 1px solid rgba(212,168,75,.2); }
#chatSearchForm, .chat-tool-row { display: flex; align-items: center; gap: 6px; }
#chatSearchForm input { min-width: 0; margin: 0; padding: 5px 8px; }
.chat-tool-row { margin-top: 5px; flex-wrap: wrap; }
#chatNotifyMode { width: auto; flex: 1; min-width: 100px; margin: 0; font-size: 12px; padding: 4px; }
#chatFind { max-height: 45%; overflow-y: auto; padding: 8px; border-bottom: 1px solid var(--gold); }
#chatFindResults button { display: block; width: 100%; margin-top: 5px; text-align: left; background: var(--panel); font-size: 12px; overflow-wrap: anywhere; }
#chatFindResults span { display: block; margin-top: 4px; }
#chatNewGroup, #chatPickDone { width: 100%; margin: 4px 0; }
#chatJump { align-self: center; flex-shrink: 0; margin: 3px; }
#chatReply, #chatOutgoing { padding: 6px 10px; background: var(--chrome); border-top: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
#chatReply { display: flex; align-items: center; gap: 8px; }
#chatReply span { flex: 1; }
#chatReply button { padding: 4px 8px; }
#chatOutgoing { max-height: 100px; overflow-y: auto; }
#chatOutgoing button { padding: 4px 8px; margin-left: 4px; font-size: 12px; }
.chat-quote { display: block; max-width: 100%; background: rgba(0,0,0,.18); border-left: 3px solid var(--gold); padding: 5px 8px; margin-bottom: 5px; text-align: left; font-size: 12px; overflow-wrap: anywhere; }
.mention { border-radius: 3px; padding: 0 2px; color: #b7deff; background: rgba(41,128,185,.25); }
.mention.mine { color: #ffe0a0; background: rgba(212,168,75,.3); }
#chatMentionBadge { color: #ffe0a0; font-size: 12px; }
#chatMentions { max-height: 180px; overflow-y: auto; background: var(--chrome); border-top: 1px solid var(--gold); }
#chatMentions button { display: block; width: 100%; text-align: left; background: transparent; padding: 8px 12px; font-size: 12px; }
#chatMentions button[aria-selected=true], #chatMentions button:hover { background: var(--panel2); }
.chat-pin { display: block; font-size: 10px; color: var(--gold2); }
.chat-highlight { outline: 2px solid var(--gold); outline-offset: 2px; }
.cmsg.roll .line { position: relative; padding-right: 34px; min-width: 0; }
.cmsg .bubble, .cmsg.announce .line { padding-right: 34px; }
.cmsg.own .bubble { padding-left: 34px; }
.cmsg .cmenu { opacity: .65; min-width: 30px; min-height: 30px; }
#chatMenu { max-height: calc(100% - 8px); overflow-y: auto; }
#chatMenu button { min-height: 36px; }
#chatMenu button:focus-visible, #chatMentions button:focus-visible { outline: 2px solid var(--gold); }
#chatSend textarea { min-width: 0; }
@media (pointer: coarse) {
  .cmsg .cmenu { opacity: 1; min-width: 36px; min-height: 36px; }
  .crow, .prow, #chatMenu button, #chatNewGroup, #chatPickDone { min-height: 44px; }
}
.log .ev.announce { color: #f5b041; }

/* ---- Trade dialog (docs/COMMS.md, Trades): my offer against theirs, a slider for every stock ---- */
.modal .card.trade { max-width: 880px; }
.tr-parties { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 4px 0 10px; }
.tr-party { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tr-party.right { flex-direction: row-reverse; text-align: right; }
.tr-party select { margin: 0; padding: 5px 8px; }
.tr-party b { font: 600 16px Georgia, serif; }
.tr-who { font: 600 12px Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gold2); margin-bottom: 3px; }
.tr-flag { width: 60px; height: 40px; border-radius: 4px; background: var(--chrome); display: flex; overflow: hidden; box-shadow: 0 0 0 1px rgba(212,168,75,.45), 0 3px 8px rgba(0,0,0,.4); flex: none; }
.tr-flag img { width: 100%; height: 100%; object-fit: cover; }
.tr-arrows { font-size: 28px; color: var(--gold); }
.tr-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.tr-summary > div { background: rgba(212,168,75,.1); border: 1px solid rgba(212,168,75,.35); border-radius: 8px; padding: 6px 10px; font-size: 13px; min-height: 36px; }
.tr-summary b { color: var(--gold2); margin-right: 4px; }
.tr-summary .muted { font-style: italic; }
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-col { background: var(--chrome); border: 1px solid #000; border-radius: 8px; padding: 4px 6px 8px; max-height: 44vh; overflow-y: auto; scrollbar-width: thin; }
.tr-col .sh { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding: 8px 6px 3px; }
.tr-row { display: grid; grid-template-columns: 22px minmax(70px, 1fr) 44px minmax(60px, 1.3fr) 62px; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; font-size: 12px; }
.tr-row.on { background: rgba(212,168,75,.15); }
.tr-row.none { opacity: .45; }
.tr-row .resicon { margin: 0; width: 20px; height: 20px; vertical-align: 0; }
.tr-row .tr-emoji { font-size: 15px; text-align: center; }
.tr-row .tr-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-row .tr-have { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-row.over .tr-have, .tr-row.over input[type=number] { color: #f5b7b1; }
.tr-row input[type=range] { width: 100%; margin: 0; accent-color: var(--gold); cursor: pointer; }
.tr-row input[type=number] { width: 100%; margin: 0; padding: 3px 6px; font-size: 12px; text-align: right; }
.tr-foot { margin-top: 10px; }
.tr-when { display: flex; flex-wrap: wrap; gap: 0 18px; }
.tr-when label.inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 4px 0; }
.tr-when input[type=number] { width: 56px; margin: 0 4px; padding: 3px 6px; display: inline-block; }
.tr-foot #tradeNote { margin: 6px 0; }
.tr-send { display: flex; align-items: center; gap: 12px; }
.tr-send .hint { flex: 1; margin: 0; }
@media (max-width: 760px) {
  .tr-cols, .tr-summary, .tr-parties { grid-template-columns: 1fr; }
  .tr-party.right { flex-direction: row; text-align: left; }
  .tr-arrows { display: none; }
  .tr-col { max-height: none; }
  .tr-send { flex-direction: column; align-items: stretch; }
}

/* Unit popup: strengths and weaknesses (docs/UNITS.md) */
details.matchups { margin: 4px 0; }
details.matchups .good { color: #82e0aa; }
details.matchups .bad { color: #f5b7b1; }

/* ---- Panels and windows (docs/UI.md) ---- */
.box > .section:first-child { margin-top: 0; color: var(--gold); letter-spacing: .08em; font-weight: 600; }
.cardclose { position: sticky; top: 0; float: right; margin: -6px -6px 0 6px; background: transparent; color: var(--muted); font-size: 18px; padding: 0 6px; line-height: 1.2; z-index: 1; }
.cardclose:hover { color: #fff; }
/* Nation panel */
.nationcard .nationhead { margin: 0 0 8px; font: 600 17px Georgia, serif; color: #f0e6cc; }
.nationcard .nationhead .grow { flex: 1; }
.pools div { background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.restiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.restile { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.04); font-size: 12px; font-variant-numeric: tabular-nums; }
.restile .resicon { margin: 0; }
/* Goods and unrest (Nation panel, town panel): the war economy slider and each town's unrest against the critical mark. */
.goodsbox .wareco { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 12px; }
.goodsbox .wareco b { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.goodsbox .wareco input[type=range] { flex: 1; }
.unrestlist { display: flex; flex-direction: column; gap: 3px; }
.unrestrow { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 6px; border: 0; border-radius: 6px; background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.unrestrow:hover { background: rgba(255,255,255,.09); }
.unrestrow.critical { background: rgba(192,57,43,.22); }
.unrestrow b { min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.unrestbar { position: relative; flex: 0 0 70px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.unrestbar.wide { flex: 1 1 auto; margin: 0 6px; align-self: center; }
.unrestbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #e6b44c, #e67e22 60%, #c0392b); }
.unrestbar s { position: absolute; top: -1px; bottom: -1px; width: 2px; background: #fff; opacity: .7; text-decoration: none; }
.unrestbar.critical i { animation: unrestpulse 1.2s ease-in-out infinite alternate; }
@keyframes unrestpulse { from { opacity: .65; } to { opacity: 1; } }
.restile .reskey { margin: 0 2px; }
.restile .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cfd8e0; }
.restile b { font-weight: 600; }
.restile .delta { min-width: 28px; text-align: right; }
.restile.empty b { color: #ff9f80; }
/* Production panel */
.site { border-bottom: 1px solid var(--line); padding: 5px 0; margin: 0; }
.site:last-child { border-bottom: 0; }
.sitehead { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sitehead .grow { flex: 1; min-width: 0; }
.site.full .sitehead b { color: #cfd8e0; }
.pips { display: inline-flex; gap: 3px; flex: none; }
.pips i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid #5d7286; background: transparent; }
.pips i.on { background: var(--gold); border-color: var(--gold); }
.qitem { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0 2px 14px; border-left: 2px solid rgba(212,168,75,.4); margin: 3px 0 0 4px; }
.qitem .grow { flex: 1; }
.qitem button.small { padding: 0 6px; }
/* Settings window: page list on the left */
.modal .card.xwide { max-width: 940px; height: min(720px, 92vh); display: flex; flex-direction: column; overflow: hidden; }
.setlayout { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px 1fr; gap: 14px; }
.setnav { display: flex; flex-direction: column; gap: 2px; overflow: auto; padding-right: 10px; border-right: 1px solid var(--line); }
.setnav .navhead { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 10px 0 4px 6px; }
.setnav .navhead:first-child { margin-top: 0; }
.setnav button { text-align: left; background: transparent; color: #cfd8e0; padding: 6px 10px; font-size: 13px; }
.setnav button:hover { background: rgba(255,255,255,.06); }
.setnav button.on { background: rgba(212,168,75,.16); color: var(--gold2); box-shadow: inset 3px 0 0 var(--gold); }
.setpages { overflow: auto; min-height: 0; padding-right: 4px; }
.setpages h3 { font: 600 18px Georgia, serif; color: var(--gold2); margin: 0 0 10px; }
.rulesave { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; margin-top: 12px; background: var(--panel); border-top: 1px solid var(--line); }
.rules-off { background: rgba(230,126,34,.12); border-left: 3px solid var(--accent2); padding: 6px 10px; border-radius: 4px; }
.ruletable { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.ruletable th { text-align: left; font-size: 12px; font-weight: 600; color: #bdc3c7; padding: 2px 6px 2px 0; }
.ruletable thead th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ruletable td { padding: 2px 4px; }
.ruletable input { margin: 0; }
@media (max-width: 760px) {
  .modal .card.xwide { height: 92vh; }
  .setlayout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .setnav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 6px; }
  .setnav .navhead { display: none; }
  .setnav button { flex: none; }
}
/* Phones (after the notification and chat rules they override) */
@media (max-width: 760px) {
  #btnViewAs .vname { display: none; }
  #viewAsMenu { position: fixed; top: 52px; right: 8px; }
  #notifWrap { position: static; transform: none; flex: none; }
  #notifPanel { position: fixed; top: 52px; left: 50%; }
  #chatDock { bottom: 66px; right: 8px; }
  #chatWin, #chatWin.big { position: fixed; left: 8px; right: 8px; top: calc(var(--top-h) + 6px); bottom: 136px; width: auto; height: auto; }
  #chatSideBtn { display: inline-flex; }
  #chatBig { display: none; }
  #chatSide { position: absolute; left: 0; top: 0; bottom: 0; width: 230px; display: none; z-index: 2; box-shadow: 4px 0 16px rgba(0,0,0,.5); }
  #chatWin.show-side #chatSide { display: block; }
}

.login-brand{display:block;width:min(100%,340px);margin:2px auto 9px}.login-brand img{width:100%;height:auto;display:block}