/* Draventa web client: dark wood, parchment and gold, framed with the game's own UI kit (border-image). */

:root {
  --bg: #140e09;
  --wood-0: #1b120b;
  --wood-1: #2a1c12;
  --wood-2: #3b2818;
  --wood-3: #5a3d24;
  --gold: #e2b85a;
  --gold-hi: #f6d77a;
  --gold-lo: #9c7426;
  --parchment: #ecdcb4;
  --ink: #3a2410;
  --ink-soft: #6b4c2a;
  --text: #f3e6c8;
  --muted: #b9a582;
  --red: #d2533d;
  --red-deep: #7d160d;
  --green: #79b84e;
  --blue: #7fb6e6;
  --warn: #f0a33c;
  --navy: #0e1b2e;
  --font-head: "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
  --font-body: "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-w: 196px;
  --side-w: 304px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  font: 14px/1.42 var(--font-body);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(120, 82, 38, 0.35), transparent 60%),
    linear-gradient(rgba(16, 11, 7, 0.9), rgba(16, 11, 7, 0.95)),
    url("/keyart.jpg") center / cover fixed,
    var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; margin: 0; letter-spacing: 0.02em; }

a { color: var(--gold-hi); }
a:hover { color: #fff1c4; }

button { font: inherit; color: inherit; }

img.ico { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; flex: none; }
img.missing { visibility: hidden; }

.app { height: 100%; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.ok-text { color: var(--green); }
.warn-text { color: var(--warn); }
.frame-card .warn-text { color: #a5430c; }
.frame-card .muted { color: var(--ink-soft); }
.frame-card .ok-text { color: #3d7a1e; }

[hidden] { display: none !important; }

/* --- Kit frames ------------------------------------------------------------------------------------------------- */

.frame-window {
  border-style: solid;
  border-width: 40px;
  border-image: url("/kit/window.png") 132 fill / 40px stretch;
  background-color: transparent;
}

.frame-panel {
  border-style: solid;
  border-width: 20px;
  border-image: url("/kit/card-dark.png") 92 fill / 20px stretch;
}

.frame-card {
  color: var(--ink);
  border-style: solid;
  border-width: 18px;
  border-image: url("/kit/card.png") 74 fill / 18px stretch;
}

.frame-card-dark {
  border-style: solid;
  border-width: 16px;
  border-image: url("/kit/card-dark.png") 92 fill / 16px stretch;
}

/* --- Buttons ------------------------------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 6px;
  border-style: solid;
  border-width: 11px 17px;
  border-image: url("/kit/button-gold.png") 50 70 fill / 11px 17px stretch;
  background: none;
  color: #3a2208;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.6);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: filter 0.12s, transform 0.06s;
}
.btn:hover:not(:disabled) { filter: brightness(1.1) saturate(1.05); }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.94); }
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.btn:disabled { cursor: not-allowed; filter: grayscale(0.75) brightness(0.8); opacity: 0.6; }
.btn .btn-ico { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
.btn-green { border-image-source: url("/kit/button-green.png"); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.btn-red { border-image-source: url("/kit/button-red.png"); border-image-slice: 56 70 fill; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.btn-blue { border-image-source: url("/kit/button-blue.png"); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.btn-wood { border-image-source: url("/kit/button-wood.png"); color: var(--parchment); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.btn-sm { min-height: 32px; font-size: 12.5px; border-width: 8px 12px; border-image-width: 8px 12px; padding: 0 4px; }
.btn-sm .btn-ico { width: 17px; height: 17px; }
.btn-block { display: flex; width: 100%; }
.btn.busy { pointer-events: none; }
.btn.busy .btn-label::after { content: " …"; }

/* --- Shell ------------------------------------------------------------------------------------------------------------- */

.shell { display: grid; grid-template-rows: auto 1fr; height: 100vh; }

.topbar {
  position: relative;
  z-index: 5;
  background: linear-gradient(#3d2917, #23170d 70%, #1c120a);
  border-bottom: 2px solid var(--gold-lo);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 220, 140, 0.15);
  padding: 6px 14px 6px;
}

.top-main { display: flex; align-items: center; gap: 18px; min-height: 46px; }
.top-state { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crest {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #5b3b1c, #24170c);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px #24170c, 0 2px 8px rgba(0, 0, 0, 0.6);
}
.crest .ico { width: 28px; height: 28px; }
.state-words { min-width: 0; }
.state-name { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); }
.state-tier { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.top-stats { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.top-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 16px;
  background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(226, 184, 90, 0.35);
  font-size: 13px; white-space: nowrap;
}
.top-stat .ico { width: 22px; height: 22px; }
.top-stat.good { border-color: rgba(121, 184, 78, 0.5); }
.top-stat.warn { border-color: rgba(240, 163, 60, 0.7); color: #ffd28a; }
.top-stat.bad { border-color: rgba(210, 83, 61, 0.8); color: #ffb3a4; }
.top-stat .sep { color: var(--muted); }
.top-tools { display: flex; gap: 6px; margin-left: auto; }

.top-goods { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.goods { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.good {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 62px; height: 30px; padding: 0 4px;
  border-style: solid; border-width: 6px 12px; border-image: url("/kit/chip.png") 30 48 fill / 6px 12px stretch;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.good .good-ico { width: 20px; height: 20px; margin-left: -6px; }
.good.near { color: #ffd28a; }
.good.full { color: #ff9c86; }
.good.cap { opacity: 0.9; color: var(--muted); }
.top-notice { margin-top: 6px; }

.body { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--side-w); min-height: 0; }
.shell.wide .body { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
.shell.wide .side { display: none; }

.nav {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 8px;
  background: linear-gradient(90deg, rgba(20, 13, 8, 0.85), rgba(32, 21, 12, 0.75));
  border-right: 1px solid rgba(226, 184, 90, 0.25);
  overflow-y: auto;
}
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 2px 6px; min-height: 46px;
  border-style: solid; border-width: 8px 14px; border-image: url("/kit/chip.png") 30 48 fill / 8px 14px stretch;
  color: var(--parchment); text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: 14.5px;
  transition: filter 0.12s;
}
.nav-item:hover { filter: brightness(1.18); color: #fff; }
.nav-item.on { border-image-source: url("/kit/plate.png"); border-image-slice: 34 56 fill; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 245, 210, 0.7); }
.nav-ico { width: 30px; height: 30px; margin-left: -8px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.nav .badge { position: absolute; right: -6px; top: -6px; }

.badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: linear-gradient(#f6d77a, #c8962f); color: #3a2208;
  font: 700 11.5px/1 var(--font-body); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.badge-red { background: linear-gradient(#ff6b52, #a3200f); color: #fff; animation: pulse 1.2s ease-in-out infinite; }

.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.content { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 28px; }
.content.screen-map { padding: 0; overflow: hidden; }

.side { overflow-y: auto; padding: 12px 12px 20px 6px; display: flex; flex-direction: column; gap: 10px; }
.panel { padding: 2px; }
.panel-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(226, 184, 90, 0.25);
}
.panel-ico { width: 22px; height: 22px; }

/* --- Queue ------------------------------------------------------------------------------------------------------------ */

.queue, .armies { display: flex; flex-direction: column; gap: 8px; }
.qrow {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(226, 184, 90, 0.18);
  text-align: left; width: 100%;
}
.qrow-idle { cursor: pointer; border-style: dashed; transition: background 0.12s; }
.qrow-idle:hover { background: rgba(226, 184, 90, 0.08); }
.qpic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.qpic img { width: 40px; height: 40px; object-fit: contain; }
.qbody { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qkind { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 600; }
.qline { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qfoot { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.qtime-ico { width: 14px !important; height: 14px !important; }
.qgo { width: 18px; height: 18px; opacity: 0.6; }
.qcancel { align-self: center; }

.army-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(226, 120, 90, 0.25); }
.army-row.returning { border-color: rgba(226, 184, 90, 0.3); }
.army-main { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.army-ico { width: 32px; height: 32px; }

.bar {
  position: relative; height: 12px; overflow: hidden;
  border-radius: 7px; background: #0b0f17; border: 1px solid rgba(226, 184, 90, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
.bar-fill { height: 100%; width: 0; background: url("/kit/fill-gold.png") center / 100% 100%, linear-gradient(#f6d77a, #c8962f); border-radius: 6px; transition: width 0.9s linear; }
.bar-back .bar-fill { background: url("/kit/fill-green.png") center / 100% 100%, linear-gradient(#a6d76a, #4f8a2a); }

/* --- Advisor ----------------------------------------------------------------------------------------------------------- */

.notices { display: flex; flex-direction: column; gap: 8px; }
.notice-card { padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); border-left: 3px solid var(--blue); }
.notice-card.sev-warning { border-left-color: var(--warn); }
.notice-card.sev-urgent { border-left-color: var(--red); background: rgba(120, 20, 10, 0.25); }
.notice-head { display: flex; align-items: center; gap: 8px; }
.notice-ico, .notice-pic { width: 28px; height: 28px; object-fit: contain; }
.notice-title { font-weight: 700; font-size: 13.5px; }
.notice-state { margin: 4px 0 2px; font-size: 12.5px; }
.notice-result { margin: 0 0 4px; font-size: 12px; color: var(--muted); font-style: italic; }
.notice-advice { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--gold-hi); }

.notice { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; margin: 0 0 12px; font-size: 13.5px; }
.notice .ico { width: 22px; height: 22px; }
.notice-info { background: rgba(40, 80, 120, 0.3); border: 1px solid rgba(127, 182, 230, 0.4); }
.notice-warn { background: rgba(140, 80, 10, 0.32); border: 1px solid rgba(240, 163, 60, 0.6); color: #ffe0a8; }

/* --- Incoming banner --------------------------------------------------------------------------------------------------------- */

.banner-host:empty { display: none; }
.incoming {
  display: flex; align-items: center; gap: 12px; margin: 10px 22px 0; padding: 8px 14px;
  border-radius: 10px; border: 2px solid #f0b04a;
  background: linear-gradient(90deg, #8e1c12, #5e0f09 60%, #8e1c12);
  box-shadow: 0 0 22px rgba(220, 40, 20, 0.45), inset 0 0 18px rgba(0, 0, 0, 0.5);
}
.incoming-scout { background: linear-gradient(90deg, #1f4870, #10243c 60%, #1f4870); box-shadow: 0 0 18px rgba(80, 150, 230, 0.35); }
.incoming-ico { width: 40px; height: 40px; animation: pulse 1s ease-in-out infinite; }
.incoming-words { flex: 1; min-width: 0; }
.incoming-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #ffd9a0; text-transform: uppercase; letter-spacing: 0.1em; }
.incoming-text { font-size: 14px; }
.incoming-more { font-size: 12.5px; color: #ffd9a0; }

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* --- Screens ------------------------------------------------------------------------------------------------------------------- */

.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(226, 184, 90, 0.25); }
.screen-title { display: flex; align-items: center; gap: 10px; }
.screen-title h1 { font-size: 26px; color: var(--gold-hi); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); }
.screen-ico { width: 38px; height: 38px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.screen-extra { display: flex; align-items: center; gap: 10px; }
.head-note { color: var(--muted); font-size: 13px; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 4px;
  border-style: solid; border-width: 9px 14px; border-image: url("/kit/tab.png") 40 56 fill / 9px 14px stretch;
  background: none; color: #d9efe8; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
}
.tab:hover { filter: brightness(1.15); }
.tab.on { border-image-source: url("/kit/tab-on.png"); color: #3a2208; text-shadow: 0 1px 0 rgba(255, 240, 190, 0.6); }
.tab .tab-ico { width: 20px; height: 20px; }
.tab .badge { height: 18px; min-width: 18px; font-size: 11px; }

.group { margin-bottom: 22px; }
.group-title {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  font-size: 15px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.14em;
}
.group-title::before, .group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 184, 90, 0.5), transparent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 14px; }
.cards-wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: var(--muted); text-align: center; }
.empty-ico { width: 64px !important; height: 64px !important; opacity: 0.75; }

/* --- Building cards ------------------------------------------------------------------------------------------------------- */

.bcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: transform 0.12s, filter 0.12s; }
.bcard:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.bcard.locked .bpic img.pic { filter: grayscale(0.85) brightness(0.85); }
.bcard.flash { animation: flash 1.6s ease-out 2; }
@keyframes flash { 0% { filter: drop-shadow(0 0 0 rgba(246, 215, 122, 0)); } 30% { filter: drop-shadow(0 0 16px rgba(246, 215, 122, 1)); } 100% { filter: drop-shadow(0 0 0 rgba(246, 215, 122, 0)); } }

.bpic {
  position: relative; height: 128px; display: grid; place-items: center; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 70%, rgba(120, 150, 70, 0.45), rgba(70, 50, 25, 0.15) 70%);
}
.bpic img.pic { max-width: 100%; max-height: 124px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35)); }
.bpic .lvl { position: absolute; left: 4px; top: 4px; }
.bpic .dmg { position: absolute; right: 4px; top: 4px; padding: 2px 8px; border-radius: 10px; background: linear-gradient(#e0563e, #8e1c12); color: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.bpic .lock { position: absolute; right: 6px; top: 6px; }
.bpic .lock .ico { width: 26px; height: 26px; }
.lvl { display: inline-block; padding: 2px 9px; border-radius: 10px; background: linear-gradient(#f6d77a, #c8962f); color: #3a2208; font: 700 12px/1.4 var(--font-head); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); border: 1px solid #7a4f12; }

.bname h4 { font-size: 16.5px; color: var(--ink); }
.bview { font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.bnext { display: flex; flex-direction: column; gap: 6px; }
.bnext-head, .u-total-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 700; }
.bnext-stats { display: inline-flex; gap: 8px; text-transform: none; letter-spacing: 0; }
.bmax { display: flex; align-items: center; gap: 6px; color: var(--gold-lo); font-family: var(--font-head); font-weight: 700; }
.bjob { display: flex; flex-direction: column; gap: 4px; }
.bjob-title { font-weight: 700; font-size: 13px; color: #6a4a12; }
.bjob-left { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.bactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.bactions .btn:first-child:not(:only-child):not(.btn-wood) { flex: 1; }

.stat { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; white-space: nowrap; }
.stat .stat-ico, .stat-ico { width: 16px !important; height: 16px !important; }

.costs { display: flex; flex-wrap: wrap; gap: 5px; }
.cost {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 3px; border-radius: 13px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(226, 184, 90, 0.3);
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.cost .cost-ico { width: 22px; height: 22px; }
.cost.small { font-size: 12px; padding: 1px 7px 1px 2px; }
.cost.small .cost-ico { width: 18px; height: 18px; }
.cost.short { color: #ff9c86; border-color: rgba(210, 83, 61, 0.7); background: rgba(120, 20, 10, 0.35); }
.frame-card .cost { background: rgba(90, 60, 25, 0.1); border-color: rgba(90, 60, 25, 0.3); color: var(--ink); }
.frame-card .cost.short { color: #a8200f; border-color: rgba(168, 32, 15, 0.55); background: rgba(200, 50, 30, 0.12); }

.reqs { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.req { display: grid; grid-template-columns: 16px 1fr; column-gap: 5px; font-size: 12px; line-height: 1.3; }
.req-ico { width: 14px !important; height: 14px !important; margin-top: 1px; }
.req-what { font-weight: 700; color: #a5430c; }
.req-why { grid-column: 2; font-style: italic; color: var(--ink-soft); }
.side .req-what, .frame-card-dark .req-what, .modal .req-what { color: #ffb38a; }
.side .req-why, .frame-card-dark .req-why, .modal .req-why { color: var(--muted); }
.req.more { color: var(--ink-soft); font-size: 12px; }

/* --- Details, orders, placement --------------------------------------------------------------------------------------- */

.detail { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
.detail-pic { position: relative; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(ellipse at 50% 70%, rgba(120, 150, 70, 0.35), transparent 70%); min-height: 200px; }
.detail-pic img.pic { width: 210px; height: 210px; object-fit: contain; }
.detail-pic .lvl { position: absolute; left: 6px; top: 6px; }
.detail-main { display: flex; flex-direction: column; gap: 10px; }
.detail-reason { margin: 0; font-size: 15px; }
.detail-table { border-collapse: collapse; font-size: 13px; }
.detail-table th, .detail-table td { padding: 4px 12px 4px 0; text-align: left; }
.detail-table th { color: var(--gold); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.detail-block h4 { font-size: 13px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.prod-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.prod-arrow { width: 16px; height: 16px; opacity: 0.7; }
.flows { display: flex; flex-wrap: wrap; gap: 6px; }
.flow { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.flow .cost-ico { width: 20px; height: 20px; }

.orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.order { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 10px; align-items: center; }
.order.on { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(246, 215, 122, 0.35); border-radius: 10px; }
.order-pic .ico { width: 44px; height: 44px; }
.order-name { font-family: var(--font-head); font-weight: 700; color: var(--gold-hi); }
.order .btn, .order-now { grid-column: 1 / -1; justify-self: end; }
.order-now { font-size: 12px; color: var(--gold-hi); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

.plot { display: grid; grid-template-columns: auto minmax(200px, 1fr); gap: 18px; align-items: start; }
.plot-board { padding: 6px; border-radius: 8px; background: #2b1d10; border: 2px solid var(--gold-lo); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6); }
.plot-canvas { display: block; cursor: crosshair; image-rendering: auto; }
.plot-side { display: flex; flex-direction: column; gap: 10px; }
.plot-building { display: flex; align-items: center; gap: 10px; }
.plot-pic { width: 72px; height: 72px; object-fit: contain; }
.plot-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--gold-hi); }
.plot-reason { margin: 0; min-height: 20px; font-weight: 600; color: var(--green); }
.plot-reason.bad { color: #ff9c86; }
.plot-where { margin: 0; color: var(--muted); font-size: 13px; }

/* --- Tier ----------------------------------------------------------------------------------------------------------------- */

.tier-panel { max-width: 720px; padding: 6px 10px; }
.tier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tier-head h3 { font-size: 22px; color: var(--gold-hi); }
.tier-crown { width: 54px !important; height: 54px !important; }
.tier-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tier-cond { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); }
.tier-cond.met { border-left: 3px solid var(--green); }
.tier-cond.unmet { border-left: 3px solid var(--warn); }
.tier-ico { width: 24px !important; height: 24px !important; }
.tier-text { font-weight: 600; }
.tier-actions { display: flex; justify-content: flex-end; }

/* --- Research ------------------------------------------------------------------------------------------------------------------- */

.rcard-r { display: flex; flex-direction: column; gap: 6px; }
.rcard-r.locked { filter: saturate(0.75); }
.r-head { display: flex; align-items: center; gap: 10px; }
.r-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 210, 0.9), rgba(200, 170, 110, 0.5)); border: 2px solid #b48a3c; flex: none; }
.r-ico .ico { width: 32px; height: 32px; }
.r-head h4 { font-size: 16px; }
.era-chip { display: inline-block; margin-top: 2px; padding: 0 8px; border-radius: 9px; font-size: 11px; font-weight: 700; background: rgba(90, 60, 25, 0.15); color: var(--ink-soft); }
.era-chip.medieval { background: rgba(60, 90, 140, 0.18); color: #2c4c7a; }
.r-reason { margin: 0; font-size: 13px; color: var(--ink-soft); }
.r-stats { display: flex; gap: 10px; }
.done-list { display: flex; flex-wrap: wrap; gap: 6px; }
.done-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 14px; background: rgba(60, 100, 30, 0.3); border: 1px solid rgba(121, 184, 78, 0.45); font-size: 13px; }

/* --- Workforce ------------------------------------------------------------------------------------------------------------------- */

.wf { max-width: 820px; }
.wf-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.wf-rows { display: flex; flex-direction: column; gap: 10px; }
.wf-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }
.wf-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #4b3320, #1d130b); border: 2px solid var(--gold-lo); }
.wf-ico .ico { width: 36px; height: 36px; }
.wf-main { display: flex; flex-direction: column; gap: 6px; }
.wf-top, .wf-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wf-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--gold-hi); }
.wf-pct { font: 700 20px/1 var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; }
.wf-track { position: relative; height: 22px; border-radius: 11px; background: #0b0f17; border: 1px solid rgba(226, 184, 90, 0.6); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8); }
.wf-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: url("/kit/fill-gold.png") center / 100% 100%, linear-gradient(#f6d77a, #c8962f); pointer-events: none; }
.wf-range { position: absolute; inset: -4px 0; width: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wf-range:focus-visible + * { outline: none; }
.wf-track:focus-within { box-shadow: 0 0 0 2px var(--gold-hi), inset 0 1px 4px rgba(0, 0, 0, 0.8); }
.wf-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.wf-sum { margin-right: auto; font-weight: 700; }

/* --- Army ------------------------------------------------------------------------------------------------------------------------- */

.army-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ucard { display: flex; flex-direction: column; gap: 8px; }
.ucard.locked { filter: saturate(0.7); }
.u-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.u-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 210, 0.9), rgba(190, 150, 90, 0.55)); border: 2px solid #b48a3c; }
.u-ico .ico { width: 36px; height: 36px; }
.u-title h4 { font-size: 16px; }
.u-count { font: 700 26px/1 var(--font-head); color: #6a4a12; }
.u-stats { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(90, 60, 25, 0.1); }
.tag { display: inline-block; padding: 0 8px; border-radius: 9px; background: rgba(60, 90, 140, 0.25); font-size: 11.5px; font-weight: 700; }
.u-per { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.u-per .stat { margin-left: auto; }
.u-order { display: flex; flex-direction: column; gap: 6px; }
.u-order-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.u-totals { display: flex; flex-direction: column; gap: 5px; }
.u-totals > .cost { align-self: flex-start; }
.u-disband { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.train-now { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.train-now-ico { width: 44px !important; height: 44px !important; }

.stepper { display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden; border: 1px solid #8a6a36; background: rgba(10, 14, 24, 0.75); height: 32px; }
.step-btn { width: 30px; border: 0; background: linear-gradient(#5a3d24, #2a1c12); color: var(--gold-hi); font-size: 18px; font-weight: 700; cursor: pointer; }
.step-btn:hover:not(:disabled) { filter: brightness(1.25); }
.step-btn:disabled { opacity: 0.4; cursor: default; }
.step-n { width: 58px; border: 0; background: transparent; color: var(--text); text-align: center; font: 700 14px var(--font-body); -moz-appearance: textfield; appearance: textfield; }
.step-n::-webkit-outer-spin-button, .step-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.frame-card .stepper { background: rgba(255, 250, 235, 0.65); }
.frame-card .step-n { color: var(--ink); }

/* --- Map -------------------------------------------------------------------------------------------------------------------------- */

.map-screen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; height: 100%; }
.map-wrap { position: relative; min-width: 0; min-height: 0; background: #1e1a16; }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.map-canvas.dragging { cursor: grabbing; }
.map-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; background: rgba(15, 10, 6, 0.85); border: 1px solid var(--gold-lo); }
.map-tools { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.map-tool { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 35% 30%, #5b3b1c, #24170c); color: var(--gold-hi); font: 700 22px/1 var(--font-head); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.map-tool:hover { filter: brightness(1.2); }
.map-tool .ico { width: 26px; height: 26px; }
.map-legend { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.legend { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; background: rgba(15, 10, 6, 0.8); font-size: 12px; border: 1px solid rgba(226, 184, 90, 0.35); }
.legend::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.legend.own::before { background: linear-gradient(#f6d77a, #c8962f); }
.legend.other::before { background: #3a2718; border: 1px solid var(--gold); }
.legend.army::before { background: #ff7a5c; border-radius: 50%; }
.map-side { overflow-y: auto; margin: 8px; display: flex; flex-direction: column; gap: 10px; }
.map-side .screen-head { margin-bottom: 4px; }
.map-side .screen-title h1 { font-size: 21px; }
.map-card { display: flex; flex-direction: column; gap: 14px; }
.map-card-body { display: flex; flex-direction: column; gap: 10px; }
.map-card-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 20px 6px; }
.map-card-title { display: flex; align-items: center; gap: 10px; }
.map-card-title h3 { font-size: 19px; color: var(--gold-hi); }
.map-card-ico { width: 52px !important; height: 52px !important; }
.map-coords { text-transform: uppercase; letter-spacing: 0.08em; }
.map-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.map-facts .stat { font-size: 13.5px; }
.map-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.map-sub { font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-body); font-weight: 700; }
.map-armies { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(226, 184, 90, 0.25); }
.map-army { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; text-align: left; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(226, 184, 90, 0.2); background: rgba(0, 0, 0, 0.25); cursor: pointer; }
.map-army:hover { background: rgba(226, 184, 90, 0.1); }

/* --- Send ---------------------------------------------------------------------------------------------------------------------------- */

.send { display: flex; flex-direction: column; gap: 12px; }
.send-target { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.send-target .btn { margin-left: auto; }
.send-rows { display: flex; flex-direction: column; gap: 8px; }
.send-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(226, 184, 90, 0.2); }
.send-name { font-weight: 600; }
.send-quick { display: flex; gap: 4px; }
.send-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 10px; border-radius: 8px; background: rgba(226, 184, 90, 0.1); border: 1px solid rgba(226, 184, 90, 0.3); }
.send-foot .stat { font-size: 14px; font-weight: 600; }

/* --- Reports -------------------------------------------------------------------------------------------------------------------------- */

.reports { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; }
.report-list { display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 220px); overflow-y: auto; }
.report-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 10px; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; border: 1px solid transparent; background: rgba(0, 0, 0, 0.22); text-align: left; cursor: pointer; }
.report-item:hover { background: rgba(226, 184, 90, 0.08); }
.report-item.on { border-color: var(--gold); background: rgba(226, 184, 90, 0.14); }
.report-item.unread .report-title { font-weight: 800; color: #fff; }
.report-item.unread .report-mark { box-shadow: 0 0 0 3px rgba(246, 215, 122, 0.35); }
.report-ico { width: 32px !important; height: 32px !important; }
.report-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-mark { width: 10px; height: 10px; border-radius: 50%; }
.report-mark.won { background: var(--green); }
.report-mark.lost { background: var(--red); }
.report-detail { min-height: 300px; }
.report { display: flex; flex-direction: column; gap: 10px; }
.verdict { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(90deg, rgba(90, 140, 40, 0.45), rgba(20, 30, 10, 0.3)); border: 1px solid rgba(121, 184, 78, 0.6); }
.verdict.lost { background: linear-gradient(90deg, rgba(150, 30, 15, 0.5), rgba(30, 10, 5, 0.3)); border-color: rgba(210, 83, 61, 0.7); }
.verdict-ico { width: 54px !important; height: 54px !important; }
.verdict-text { font: 700 24px/1.1 var(--font-head); letter-spacing: 0.12em; color: var(--gold-hi); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side-card.winner { box-shadow: 0 0 0 2px rgba(246, 215, 122, 0.55); border-radius: 10px; }
.side-role { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); font-weight: 700; }
.side-state { font: 700 17px var(--font-head); margin-bottom: 6px; }
.troops { width: 100%; border-collapse: collapse; font-size: 13px; }
.troops th { text-align: right; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.troops td { padding: 3px 0; border-bottom: 1px solid rgba(226, 184, 90, 0.12); }
.troops .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; padding-left: 10px; }
.troops .lost, .lost { color: #ff9c86; }
.troop-name { display: flex; align-items: center; gap: 6px; }
.troop-ico { width: 22px !important; height: 22px !important; }
.report-sub { font-size: 12.5px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-body); font-weight: 700; margin-top: 4px; }
.report-row { display: flex; flex-wrap: wrap; gap: 6px; }
.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.phase { padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(226, 184, 90, 0.2); }
.phase-name { font-weight: 700; font-size: 13px; }
.chip-stat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 14px; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(226, 184, 90, 0.35); font-size: 13px; }
.chip-stat.bad { border-color: rgba(210, 83, 61, 0.7); color: #ffc2b4; }

/* --- Market ------------------------------------------------------------------------------------------------------------------------------- */

.market-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.trades { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.trade { display: flex; flex-direction: column; gap: 8px; }
.trade-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trade-seller { display: flex; align-items: center; gap: 6px; font: 700 15px var(--font-head); }
.trade-body { display: grid; grid-template-columns: auto 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.trade-arrow { width: 22px !important; height: 22px !important; margin-top: 26px; opacity: 0.7; }
.trade-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 700; margin-bottom: 4px; }
.trade-good { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.trade-good.big .trade-amt { font-size: 18px; }
.trade-good.short { color: #a8200f; }
.trade-ico { width: 26px !important; height: 26px !important; }
.trade-name { font-weight: 500; }
.trade-wants { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.want-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.want-row .btn { margin-left: auto; }
.want-row .or { width: 100%; }

.listing { max-width: 760px; display: flex; flex-direction: column; gap: 12px; padding: 4px 10px; }
.listing-title { font-size: 19px; color: var(--gold-hi); }
.listing-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.listing-label { width: 150px; font-weight: 700; color: var(--gold); font-size: 13px; }
.want-edit { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.listing-hints { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); }
.listing-hints p { margin: 0; }
.listing-actions { display: flex; justify-content: flex-end; }
.seg { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid #8a6a36; }
.seg-btn { padding: 6px 14px; border: 0; background: rgba(10, 14, 24, 0.75); color: var(--text); cursor: pointer; font-weight: 600; }
.seg-btn + .seg-btn { border-left: 1px solid #8a6a36; }
.seg-btn.on { background: linear-gradient(#f6d77a, #c8962f); color: #3a2208; }

.caravans { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.caravan { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.caravan-ico { width: 38px !important; height: 38px !important; }
.caravan-body { display: flex; flex-direction: column; gap: 3px; }
.caravan-kind { display: flex; gap: 8px; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 700; }
.caravan-line { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.caravan-left { font-weight: 700; color: var(--gold-hi); white-space: nowrap; }

/* --- Forms ---------------------------------------------------------------------------------------------------------------------------------- */

input, select {
  font: inherit; color: var(--text);
  background: rgba(10, 14, 24, 0.78); border: 1px solid #8a6a36; border-radius: 7px; padding: 8px 11px;
  outline: none; transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(246, 215, 122, 0.25); }
select option { background: #1b1410; color: var(--text); }
input.amount { width: 110px; }
select.good-select { min-width: 190px; }

.form { display: flex; flex-direction: column; gap: 12px; }
.form-title { font-size: 22px; color: var(--gold-hi); text-align: center; }
.form-sub { font-size: 15px; color: var(--gold); margin-top: 4px; }
.form-text { margin: 0; text-align: center; color: var(--text); }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.field-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 700; }
.field-hint { margin: 0; font-size: 12px; color: var(--muted); }
.field-hint.dev { color: #9fd0ff; }
.field-row { display: flex; gap: 10px; }
.form-error { padding: 8px 12px; border-radius: 8px; background: rgba(140, 20, 10, 0.45); border: 1px solid rgba(255, 110, 90, 0.6); color: #ffd6cc; font-size: 13.5px; }
.form-links { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 13.5px; color: var(--muted); }
.form-actions { display: flex; justify-content: space-between; gap: 10px; }

/* --- Sign-in and state founding ---------------------------------------------------------------------------------------------------- */

.auth, .splash { position: relative; min-height: 100vh; height: 100vh; display: grid; place-items: center; overflow: auto; padding: 24px; }
.auth-art { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 3, 0.25), rgba(10, 6, 3, 0.75)), url("/keyart.jpg") center / cover; z-index: 0; }
.auth-lang { position: fixed; top: 16px; right: 18px; z-index: 2; }
.auth-panel { position: relative; z-index: 1; width: min(460px, 94vw); padding: 0; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.7)); }
.auth-panel-wide { width: min(760px, 96vw); }
.auth-brand { text-align: center; margin: -6px 0 10px; }
.brand-mark { width: 74px; height: 74px; margin: 0 auto 4px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6a4520, #24170c); border: 3px solid var(--gold); box-shadow: 0 0 0 3px #24170c, 0 4px 14px rgba(0, 0, 0, 0.7); }
.brand-mark .ico { width: 48px; height: 48px; }
.brand-name { font: 700 34px/1.1 var(--font-head); letter-spacing: 0.22em; color: var(--gold-hi); text-shadow: 0 3px 4px rgba(0, 0, 0, 0.8), 0 0 18px rgba(246, 215, 122, 0.25); }
.brand-tag { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.splash-box { position: relative; z-index: 1; text-align: center; padding: 30px 40px; border-radius: 14px; background: rgba(15, 10, 6, 0.72); border: 1px solid rgba(226, 184, 90, 0.4); }
.splash-text { margin: 12px 0; }
.splash-text.failed { color: #ffb3a4; }
.code-input { letter-spacing: 0.3em; font-size: 20px; text-align: center; font-weight: 700; }

.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.region { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; background: none; text-align: center; transition: transform 0.12s, filter 0.12s; }
.region:hover { transform: translateY(-2px); filter: brightness(1.12); }
.region.on { filter: drop-shadow(0 0 10px rgba(246, 215, 122, 0.85)); }
.region.on .region-name { color: var(--gold-hi); }
.region-compass .ico { width: 46px; height: 46px; }
.region-name { font: 700 17px var(--font-head); }
.region-count { font-size: 12.5px; color: var(--muted); }
.region-tag { position: absolute; top: -10px; right: -6px; padding: 2px 8px; border-radius: 10px; background: linear-gradient(#a6d76a, #4f8a2a); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

.spinner { width: 28px; height: 28px; margin: 0 auto; border-radius: 50%; border: 3px solid rgba(226, 184, 90, 0.25); border-top-color: var(--gold-hi); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Modals and toasts ----------------------------------------------------------------------------------------------------------------- */

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(8, 5, 2, 0.68); backdrop-filter: blur(2px); animation: fade 0.14s ease-out; }
.modal-backdrop.out { opacity: 0; transition: opacity 0.15s; }
.modal { position: relative; width: min(560px, 94vw); max-height: 90vh; display: flex; flex-direction: column; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7)); animation: rise 0.16s ease-out; }
.modal-wide { width: min(900px, 96vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -12px 0 10px; }
.modal-title { font-size: 21px; color: var(--gold-hi); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); }
.modal-x { width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
.modal-x .ico { width: 34px; height: 34px; }
.modal-x:hover { filter: brightness(1.2); }
.modal-body { overflow: auto; min-height: 0; padding-right: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.confirm-text { margin: 0; font-size: 15px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0.4; } }

.toasts { position: fixed; z-index: 80; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, 90vw); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(#2e2014, #1a110a); border: 1px solid var(--gold-lo); box-shadow: var(--shadow); animation: rise 0.18s ease-out; transition: opacity 0.35s, transform 0.35s; }
.toast.out { opacity: 0; transform: translateX(20px); }
.toast-ico { width: 22px !important; height: 22px !important; margin-top: 1px; }
.toast-error { border-color: #d2533d; background: linear-gradient(#4a140c, #2a0a05); }
.toast-ok { border-color: #79b84e; }

/* --- Scrollbars ------------------------------------------------------------------------------------------------------------------------ */

* { scrollbar-width: thin; scrollbar-color: #8a6a36 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(#a07a3a, #6d4f22); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Narrower desktops (1024 and up) ----------------------------------------------------------------------------------------------- */

@media (max-width: 1260px) {
  :root { --nav-w: 70px; --side-w: 282px; }
  .nav-label { display: none; }
  .nav-item { justify-content: center; padding: 2px 0; }
  .nav-ico { margin-left: 0; }
  .state-name { max-width: 180px; }
  .top-stats { gap: 6px; }
  .top-stat { padding: 3px 8px 3px 5px; font-size: 12.5px; }
}

@media (max-width: 1100px) {
  :root { --side-w: 260px; }
  .content { padding: 14px 14px 24px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .trades { grid-template-columns: 1fr; }
  .reports { grid-template-columns: 270px minmax(0, 1fr); }
  .map-screen { grid-template-columns: minmax(0, 1fr) 290px; }
  .detail { grid-template-columns: 160px minmax(0, 1fr); }
  .detail-pic img.pic { width: 150px; height: 150px; }
  .state-tier { display: none; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .shell { height: auto; min-height: 100vh; }
  .body { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .side { grid-column: 1 / -1; }
  .plot { grid-template-columns: 1fr; }
  .sides { grid-template-columns: 1fr; }
}