/* ===== Build a Syndicate - panel shell styling ===== */
:root{
  --bg:        rgb(12,12,14);
  --header:    rgb(18,18,22);
  --card:      rgb(20,20,24);
  --card-h:    rgb(30,30,36);
  --rail:      rgb(16,16,20);
  --stroke:    rgb(8,8,10);
  --line:      rgb(40,40,48);
  --txt:       rgb(238,238,242);
  --txt-dim:   rgb(150,150,160);
  --accent:    rgb(196,58,58);   /* the ONE brand accent */
  --gold:      rgb(224,180,72);
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* scroll everywhere, scrollBARS nowhere — wheel/touch/keys still scroll every
   pane, but no device ever shows the grey rails again */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; display:none; }
html,body{ height:100%; width:100%; max-width:100%; overflow:hidden; }
body{
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background:var(--bg); color:var(--txt);
  -webkit-user-select:none; user-select:none;
  overflow:hidden;
}
#app{ height:100vh; width:100%; max-width:100vw; overflow:hidden; display:flex; flex-direction:column; }
/* mobile URL bars shrink the REAL viewport below 100vh — dvh tracks it, so
   the bottom of every tab stays visible instead of clipping behind the bar */
@supports (height:100dvh){ #app{ height:100dvh; } }

/* ---- HUD ---- */
#hud{
  height:68px; flex:0 0 68px;
  background:var(--header);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 20px; overflow:hidden;
}
/* brand truncates gracefully — never pushes the badges off-screen */
.brand{
  font-weight:800; letter-spacing:1px; font-size:15px;
  flex:0 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* badges never shrink, always fully visible and pinned right */
.badges{ display:flex; gap:14px; flex:0 0 auto; }
.badge{
  display:flex; align-items:center; gap:9px;
  background:var(--card); border:1px solid var(--line);
  height:46px; padding:0 14px; border-radius:8px;
  font-weight:700; font-size:15px; min-width:84px; justify-content:center;
}
.badge .glyph{ font-weight:900; }
.badge.cash .glyph{ color:#7bd88f; font-size:26px; line-height:1; }
.badge.gold .glyph{ color:var(--gold); }

/* ---- Body: rail + panel ---- */
#body{ flex:1; display:flex; min-height:0; }

#rail{
  width:240px; flex:0 0 240px;
  background:var(--rail);
  border-right:1px solid var(--line);
  padding:12px 10px; display:flex; flex-direction:column; gap:10px;
  overflow-y:auto;
}
.rail-btn{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--stroke);
  color:var(--txt); text-align:left;
  padding:15px 16px; border-radius:9px;
  font-size:16px; font-weight:600; cursor:pointer;
  transition:background .12s;
}
.rail-btn:hover{ background:var(--card-h); }
.rail-btn.active{ background:var(--card-h); color:#fff; }
.rail-btn .r-ico{ font-size:24px; width:32px; text-align:center; }
.rail-btn{ position:relative; }
.rail-dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:#e05252; margin-left:auto;
  box-shadow:0 0 7px rgba(224,82,82,.9);
  animation:rail-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes rail-dot-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ---- Panel (content shell) ---- */
#panel{ flex:1; display:flex; flex-direction:column; min-width:0; }
#panel-header{
  height:52px; flex:0 0 52px;
  background:var(--header); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
}
#panel-title{ font-weight:700; font-size:16px; }
#panel-close{
  width:34px; height:34px; border-radius:8px;
  background:var(--card); border:1px solid var(--stroke);
  color:var(--txt); font-weight:800; font-size:15px; cursor:pointer;
}
#panel-close:hover{ background:var(--accent); color:#fff; }

#content{ flex:1; overflow-y:auto; padding:18px; }

/* ---- Reusable content pieces ---- */
.section-title{ font-size:18px; font-weight:800; margin-bottom:6px; }
.section-sub{ color:var(--txt-dim); font-size:13px; margin-bottom:16px; line-height:1.5; }
.tile{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:16px; margin-bottom:12px;
}
.tile h3{ font-size:15px; margin-bottom:6px; }
.tile p{ color:var(--txt-dim); font-size:13px; line-height:1.5; margin-bottom:12px; }
.big-num{ font-size:30px; font-weight:800; }
.big-num.gold{ color:var(--gold); }

.btn{
  background:var(--accent); color:#fff; border:none;
  padding:12px 18px; border-radius:8px;
  font-weight:700; font-size:14px; cursor:pointer;
  transition:filter .12s;
}
.btn:hover{ filter:brightness(1.1); }
.btn.secondary{ background:var(--card-h); border:1px solid var(--line); }
/* Placeholders were washing out against dark inputs — hold them readable everywhere. */
input::placeholder, textarea::placeholder{ color:rgba(238,238,242,.5); opacity:1; }

/* ---- Trade modal (our own are-you-sure) ---- */
#modal-backdrop{
  /* must outrank the DM overlay (450) and the announcement (500) — it's a confirm layer */
  position:fixed; inset:0; z-index:700;
  background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
#modal-backdrop.show{ display:flex; }
#modal-card{
  width:100%; max-width:380px;
  background:var(--header); border:1px solid var(--line);
  border-radius:10px; padding:18px;
}
#modal-title{ font-size:16px; font-weight:800; margin-bottom:14px; }
.modal-item{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; margin-bottom:14px;
}
#modal-ico{
  width:56px; height:56px; object-fit:contain; flex-shrink:0;
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px; padding:4px;
}
#modal-name{ font-weight:800; font-size:15px; }
#modal-unit{ color:var(--txt-dim); font-size:12.5px; margin-top:3px; }
.modal-qty-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.modal-qty-label{ font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim); }
.modal-stepper{ display:flex; align-items:center; gap:6px; }
.modal-stepper button{
  width:44px; height:44px; border-radius:8px;
  background:var(--card); border:1px solid var(--line);
  color:var(--txt); font-size:20px; font-weight:800; cursor:pointer;
}
.modal-stepper button:hover{ background:var(--card-h); }
#modal-max{ width:auto; padding:0 12px; font-size:12px; font-weight:800; letter-spacing:1px; }
#modal-qty{
  width:64px; height:44px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  color:var(--txt); font-size:16px; font-weight:800; font-family:inherit;
}
#modal-qty:focus{ outline:none; border-color:var(--accent); }
.modal-total-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:12px 14px; margin-bottom:16px;
}
.modal-total-row > span{ font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim); }
#modal-total{ font-size:20px; font-weight:800; }
/* custom-body modals (rank picker, forms, previews) need the same gap the fixed sections carry */
#modal-custom{ margin-bottom:16px; }
.modal-btns{ display:flex; gap:10px; }
.modal-btns .btn{ flex:1; padding:13px 0; font-size:14px; }

/* profile picture picker grid */
#modal-pfp-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:10px; margin-bottom:16px;
}
.pfp-choice{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:8px; cursor:pointer; aspect-ratio:1;
}
.pfp-choice img{ width:100%; height:100%; object-fit:contain; display:block; }
.pfp-choice:hover{ background:var(--card-h); }
.pfp-choice.active{ border-color:var(--accent); background:var(--card-h); }

/* ---- Settings ---- */
.set-now{
  font-size:12px; letter-spacing:1px; color:var(--txt-dim);
  margin-bottom:12px;
}
.set-now b{ color:var(--gold); font-size:13px; letter-spacing:0; }
.set-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.set-row .btn{ padding:10px 14px; font-size:13px; }
.set-vol-row{
  display:flex; align-items:center; gap:12px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:8px; padding:12px 14px;
}
.set-vol-label{ font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim); }
.set-vol-val{ font-size:13px; font-weight:800; min-width:42px; text-align:right; }
#set-vol{
  flex:1; height:6px;
  accent-color:var(--accent);
  cursor:pointer;
}

/* ---- AUTH SCREEN (loading -> login/register -> gates) ---- */
#auth-screen{
  position:fixed; inset:0; z-index:300;
  /* the alley art is already near-black — a light veil keeps the card readable
     without burying the scene (33KB JPEG, full 1920px) */
  background:
    linear-gradient(rgba(6,6,8,.28), rgba(6,6,8,.55)),
    var(--bg) url("/img/login-bg.jpg") center/cover no-repeat;
  background-blend-mode:normal;
  /* Rev 38: the gate SCROLLS — first viewport is the untouched login, the
     crawlable landing copy (#auth-about) lives below the fold */
  overflow-y:auto;
  opacity:1; transition:opacity .6s;
}
#auth-screen.hide{ opacity:0; pointer-events:none; }
#auth-viewport{
  min-height:100vh; min-height:100dvh; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative;
}
#auth-inner{
  width:100%; max-width:400px; padding:24px;
  display:flex; flex-direction:column; align-items:center;
}
#auth-scroll-cue{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:8.5px; font-weight:800; letter-spacing:3px; color:rgba(224,180,72,.5);
  pointer-events:none;
}
#auth-scroll-cue span{ font-size:12px; animation:cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
/* THE CITY BELOW (Rev 38) — landing copy under the login viewport */
#auth-about{
  max-width:780px; margin:0 auto; padding:34px 20px 90px;
  background:linear-gradient(180deg, rgba(8,8,11,.55), rgba(8,8,11,.86) 30%);
  border-radius:16px 16px 0 0;
}
#auth-about h2{
  font-size:15px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin:26px 0 10px; text-shadow:0 1px 8px rgba(0,0,0,.8);
}
#auth-about h2:first-child{ margin-top:0; }
#auth-about > p{
  font-size:13px; line-height:1.75; color:rgba(238,238,242,.82);
}
#auth-about > p b{ color:var(--txt); }
#auth-feats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.af-card{
  display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; gap:2px 12px;
  background:rgba(16,16,21,.72); border:1px solid rgba(255,255,255,.07); border-radius:12px;
  padding:12px 14px;
}
.af-card img{ grid-row:1 / 3; width:40px; height:40px; object-fit:contain; align-self:center; }
.af-card b{ font-size:12.5px; letter-spacing:.4px; }
.af-card span{ font-size:11px; line-height:1.5; color:var(--txt-dim); }
#auth-faq details{
  background:rgba(16,16,21,.72); border:1px solid rgba(255,255,255,.07); border-radius:10px;
  padding:10px 14px; margin-bottom:8px;
}
#auth-faq summary{
  cursor:pointer; font-size:12.5px; font-weight:800; color:var(--txt);
  list-style:none; position:relative; padding-right:18px;
}
#auth-faq summary::after{ content:"+"; position:absolute; right:0; top:0; color:var(--gold); font-weight:900; }
#auth-faq details[open] summary::after{ content:"–"; }
#auth-faq summary::-webkit-details-marker{ display:none; }
#auth-faq p{ font-size:11.5px; line-height:1.65; color:var(--txt-dim); margin-top:8px; }
#auth-about-links{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:26px;
}
#auth-about-links a{
  font-size:11px; font-weight:700; letter-spacing:.5px; color:rgba(238,238,242,.75);
  background:rgba(16,16,21,.72); border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:7px 14px; text-decoration:none; transition:border-color .15s, color .15s;
}
#auth-about-links a:hover{ color:var(--gold); border-color:rgba(224,180,72,.4); }
#auth-about-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:30px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);
  font-size:10.5px; color:rgba(238,238,242,.45);
}
#auth-about-foot a{ color:var(--gold); text-decoration:none; font-weight:700; }
#auth-about-foot a:hover{ text-decoration:underline; }
@media (max-width:640px){
  #auth-feats{ grid-template-columns:1fr; }
  #auth-about{ padding:26px 14px 110px; }
}
#auth-title{
  font-size:34px; font-weight:800; letter-spacing:5px;
  color:var(--txt); text-align:center; line-height:1.2;
}
#auth-sub{
  font-size:11px; font-weight:800; letter-spacing:4px;
  color:var(--gold); margin-top:10px;
}
/* B . E . T . A — the headliner: gold, wide-set, flanked by fading hairlines */
#auth-beta{
  margin-top:20px;
  display:flex; align-items:center; gap:16px;
  font-size:14px; font-weight:800; letter-spacing:9px; text-indent:9px;
  color:var(--gold);
  text-shadow:0 0 22px rgba(212,175,55,.4), 0 1px 2px rgba(0,0,0,.8);
}
#auth-beta::before, #auth-beta::after{
  content:""; height:1px; width:52px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.55));
}
#auth-beta::after{
  background:linear-gradient(270deg, transparent, rgba(212,175,55,.55));
}
#auth-beta-sub{
  margin-top:9px; max-width:360px;
  font-size:10.5px; font-weight:600; letter-spacing:1.1px; line-height:1.6;
  color:var(--txt-dim); text-align:center; text-transform:uppercase;
}
#auth-card{
  width:100%; margin-top:28px;
  background:rgba(14,14,17,.92); border:1px solid var(--line);
  border-radius:10px; padding:18px;
  display:flex; flex-direction:column; gap:10px;
}
#auth-card input{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:13px 14px; color:var(--txt);
  font-size:14px; font-family:inherit;
}
#auth-card input:focus{ outline:none; border-color:var(--accent); }
#auth-card .btn{ padding:13px 0; font-size:14px; }
#auth-msg{ font-size:12.5px; font-weight:700; min-height:16px; }
#auth-msg.err{ color:rgb(235,120,120); }
#auth-req{ font-size:11px; color:var(--txt-dim); }
#auth-gate{ width:100%; max-width:340px; margin-top:34px; text-align:center; }
#auth-gate-label{
  font-size:12px; font-weight:800; letter-spacing:3px;
  color:var(--gold); margin-bottom:12px;
}
#auth-bar{
  height:10px; background:rgba(14,14,17,.9);
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
#auth-bar-fill{
  height:100%; width:0%;
  background:var(--accent);
  transition:width 3s linear;
}
#auth-bar-fill.go{ width:100%; }
@media (max-width:640px){
  #auth-title{ font-size:24px; letter-spacing:3px; }
}

/* ---- ARMY ---- */
.unit-meta{
  font-size:10px; font-weight:800; letter-spacing:1px;
  color:var(--gold); margin-bottom:8px;
}
.q-list{ display:flex; flex-direction:column; gap:8px; }
.q-row{
  display:flex; align-items:center; gap:12px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:8px; padding:10px 12px;
}
.q-ico{
  width:44px; height:44px; object-fit:contain; flex-shrink:0;
  background:var(--card); border:1px solid var(--stroke); border-radius:8px; padding:3px;
}
.q-info{ flex:1; min-width:0; }
.q-info b{ display:block; font-size:14px; }
.q-info span{ font-size:12px; color:var(--txt-dim); }
.q-count{ color:var(--gold); font-weight:800; }
.q-cap{
  float:right; font-size:10px; font-weight:800; letter-spacing:1.5px;
  color:var(--txt-dim);
}
.q-bar{
  height:6px; margin-top:7px;
  background:var(--card); border:1px solid var(--stroke); border-radius:4px;
  overflow:hidden;
}
.q-bar-fill{
  height:100%; width:0%;
  background:var(--accent);
  transition:width 1s linear;
}
.q-cancel{ flex-shrink:0; padding:8px 14px; font-size:12.5px; }
/* the rush rail: gold lives in TEXT + FILL only — the border stays house stroke (L4) */
.q-rush-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--stroke);
}
.q-rush-eta{
  font-size:10.5px; font-weight:800; letter-spacing:1.5px;
  color:var(--txt-dim); text-transform:uppercase;
}
/* Rev 30.2 — the khaki fill read CHEAP; this is the store-button's quiet-burn
   language on a small control: dark walnut laminate, gold TEXT with a soft
   halo, slow ember breathe (tempt, never nag), machined inner highlight.
   Border stays house stroke — S1: a gold border on an interactive is what
   actually reads cheap. prefers-reduced-motion keeps the resting glow. */
.btn.q-rush{
  flex-shrink:0; padding:10px 18px; font-size:12.5px; font-weight:900; letter-spacing:1.6px;
  color:var(--gold);
  background:linear-gradient(180deg, rgb(36,31,21), rgb(24,21,14));
  border:1px solid var(--stroke); border-radius:10px;
  text-shadow:0 0 12px rgba(224,180,72,.30);
  box-shadow:0 0 14px rgba(224,180,72,.12), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -6px 14px rgba(0,0,0,.35);
  animation:qRushBreathe 3.4s ease-in-out infinite;
  transition:filter .12s;
}
.btn.q-rush:hover{ filter:brightness(1.18); }
.btn.q-rush img.gold-ico.gi-qrush{ width:15px; height:15px; vertical-align:-2px; margin:0 3px 0 1px; }
@keyframes qRushBreathe{
  0%,100%{ box-shadow:0 0 10px rgba(224,180,72,.10), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -6px 14px rgba(0,0,0,.35); }
  50%{ box-shadow:0 0 22px rgba(224,180,72,.24), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -6px 14px rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion: reduce){
  .btn.q-rush{ animation:none; }
}
.brk-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.brk-title{ flex:1; min-width:0; }
.brk-title h3{ margin-bottom:2px; }
.brk-title span{ font-size:11.5px; color:var(--txt-dim); }
.brk-power{
  flex-shrink:0; text-align:right;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:8px; padding:7px 12px;
}
.brk-power span{
  display:block; font-size:9px; font-weight:800; letter-spacing:1.5px;
  color:var(--txt-dim); margin-bottom:2px;
}
.brk-power b{ font-size:17px; color:rgb(235,120,120); }
.eq-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:8px; padding:8px 10px; margin-bottom:6px;
}
.eq-ico{
  width:38px; height:38px; object-fit:contain; flex-shrink:0;
  background:var(--card); border:1px solid var(--stroke); border-radius:6px; padding:2px;
}
.eq-info{ flex:1; min-width:0; }
.eq-info b{ font-size:13px; }
.eq-info span{ display:block; font-size:11.5px; color:var(--txt-dim); margin-top:2px; }
.eq-info .eq-gain{ color:rgb(235,120,120); font-weight:800; }
.eq-btns{ display:flex; gap:6px; flex-shrink:0; }
.eq-btns .btn{
  width:40px; height:40px; padding:0;
  font-size:18px; font-weight:800; line-height:1;
}
.eq-btns .btn[disabled]{ opacity:.35; cursor:default; }
/* deployed-row actions are TEXT buttons — the 40px square rule above would crush them */
.reinf-btns{ display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.reinf-btns .btn{ padding:9px 14px; font-size:13px; font-weight:700; white-space:nowrap; }
.eq-none{ color:var(--txt-dim); font-size:12.5px; }

/* ---- GAME CREATOR: rainbow name ---- */
@keyframes rainbow-name {
  0%   { color:rgb(235, 90, 90); }
  20%  { color:rgb(235, 190, 80); }
  40%  { color:rgb(120, 216, 143); }
  60%  { color:rgb(110, 190, 235); }
  80%  { color:rgb(190, 120, 235); }
  100% { color:rgb(235, 90, 90); }
}
.rainbow{ animation:rainbow-name 3s linear infinite; font-weight:800; }

/* ---- Announcement banner (10s, near the very top, center) ---- */
#announce{
  position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-16px);
  z-index:500; width:max-content; max-width:min(640px, 94vw);
  background:linear-gradient(180deg, rgb(26,26,31), rgb(16,16,20));
  border:1px solid rgb(58,58,68);
  border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  padding:13px 26px; text-align:left;
  display:flex; align-items:center; gap:14px;
  opacity:0; pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
#announce-pfp{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--gold); object-fit:cover; /* the sanctioned gold spot — Naru likes this one */
}
.announce-body{ text-align:center; flex:1; }
#announce.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#announce-name{
  font-size:9.5px; font-weight:800; letter-spacing:4px; text-transform:uppercase;
  color:rgb(155,155,168);
  padding-bottom:9px; margin-bottom:10px;
  border-bottom:1px solid rgb(48,48,58);
}
#announce-text{
  color:#fff; font-size:15.5px; font-weight:600; line-height:1.55;
  letter-spacing:.2px;
}
@media (max-width:640px){
  #announce{ padding:13px 20px; max-width:94vw; border-radius:10px; }
  #announce-text{ font-size:14px; }
}

/* ---- DM screen (the Creator's line — fullscreen) ---- */
#dm-screen{
  position:fixed; inset:0; z-index:450;
  background:rgba(6,6,8,.94);
  display:none; align-items:center; justify-content:center;
  padding:18px;
}
#dm-screen.show{ display:flex; }
#dm-intro{ text-align:center; max-width:420px; width:100%; }
#dm-intro-text{
  font-size:16px; font-weight:800; letter-spacing:.5px;
  color:var(--gold); margin-bottom:18px;
}
#dm-intro-bar{
  height:8px; background:var(--card); border:1px solid var(--line);
  border-radius:5px; overflow:hidden;
}
#dm-intro-fill{ height:100%; width:0%; background:var(--gold); transition:width 3s linear; }
#dm-intro-fill.go{ width:100%; }
#dm-chat{
  width:100%; max-width:660px; height:min(78vh, 640px);
  background:var(--header); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; overflow:hidden;
}
#dm-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
  font-size:16px; font-weight:800;
}
#dm-log{ flex:1; overflow-y:auto; padding:14px 16px; }
.dm-row{ padding:7px 0; border-bottom:1px solid rgb(28,28,32); }
.dm-row:last-child{ border-bottom:none; }
.dm-row .chat-name{ display:block; margin-bottom:2px; }
/* the Creator's wire: portrait + name line + text below — its own class, so
   the friends-DM bubble rules can never collapse it again (the old .dm-row
   name-over-text collision) */
.wire-row{
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0; border-bottom:1px solid rgb(28,28,32);
}
.wire-row:last-child{ border-bottom:none; }
.wire-ava{
  width:30px; height:30px; border-radius:50%; object-fit:cover;
  flex:0 0 30px; margin-top:1px;
}
.wire-body{ flex:1; min-width:0; }
.wire-body .chat-name{
  display:block; margin:0 0 3px; padding:0;
  min-width:0; max-width:none; text-align:left;
}
.wire-body .chat-text{ display:block; margin:0; word-wrap:break-word; }
#dm-input-row{ flex:0 0 auto; padding:12px 14px; border-top:1px solid var(--line); }
#dm-end{ padding:9px 16px; font-size:13px; }

/* ---- Console ---- */
.con-text{ width:100%; resize:vertical; min-height:56px; }
.con-results{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.con-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:8px; padding:10px 12px;
}
.con-info{ flex:1; min-width:0; }
.con-info b{ font-size:14px; }
.con-info span{ display:block; color:var(--txt-dim); font-size:11.5px; margin-top:2px; }
.con-row .btn{ padding:8px 14px; font-size:12.5px; flex-shrink:0; }
.con-row .btn[disabled]{ opacity:.4; cursor:default; }
.con-picked{
  margin:12px 0 8px; font-size:12.5px; color:var(--txt-dim);
}
.con-picked b{ color:var(--gold); }
.con-on{ color:rgb(120,216,143); }
.con-off{ color:var(--txt-dim); }
.con-tag{
  float:right; font-size:9px; font-weight:800; letter-spacing:1.5px;
}
.con-ban{
  background:rgba(196,58,58,.14); border:1px solid rgba(196,58,58,.5);
  color:rgb(235,120,120); border-radius:6px;
  padding:8px 12px; margin-bottom:10px;
  font-size:12px; font-weight:800; letter-spacing:.5px;
}
.con-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:8px;
}
.con-stat{
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:8px; padding:8px 10px;
}
.con-stat span{
  display:block; font-size:8.5px; font-weight:800; letter-spacing:1.2px;
  color:var(--txt-dim); margin-bottom:3px;
}
.con-stat b{ font-size:14px; }
.con-sub{ font-size:11.5px; color:var(--txt-dim); margin:8px 0 4px; }
.con-head{
  font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--txt-dim); margin:14px 0 8px;
  border-bottom:1px solid var(--line); padding-bottom:5px;
}
.con-line{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.con-line span{ flex:1; font-size:13px; font-weight:600; }
.con-line span em{ color:var(--txt-dim); font-style:normal; font-size:11px; }
.con-lab{ font-weight:700; }
.con-mini{
  width:30px; height:30px; object-fit:contain; flex-shrink:0;
  background:var(--bg); border:1px solid var(--stroke); border-radius:6px; padding:2px;
}
.con-num{
  flex:0 0 auto !important; width:110px; min-width:0 !important;
  text-align:right; padding:9px 11px; font-size:13px;
}
.con-hint{ font-size:11px; color:var(--txt-dim); margin-top:8px; }
@media (max-width:640px){
  .con-grid{ grid-template-columns:repeat(2, 1fr); }
  .con-num{ width:88px; }
}

/* ---- Reward (center screen: cash / gold granted) ---- */
#reward{
  position:fixed; inset:0; z-index:520;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
#reward.show{ opacity:1; pointer-events:auto; cursor:pointer; }
#reward-card{
  text-align:center; padding:30px 46px;
  background:linear-gradient(180deg, rgb(26,26,31), rgb(15,15,19));
  border:1px solid rgb(58,58,68);
  border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.7);
  transform:scale(.9);
  transition:transform .35s cubic-bezier(.2,1.2,.3,1);
}
#reward.show #reward-card{ transform:scale(1); }
#reward-label{
  font-size:9.5px; font-weight:800; letter-spacing:4px; text-transform:uppercase;
  color:rgb(155,155,168);
  padding-bottom:12px; margin-bottom:16px;
  border-bottom:1px solid rgb(48,48,58);
}
#reward-ico{
  width:96px; height:96px; object-fit:contain;
  display:block; margin:0 auto 12px;
}
#reward-amt{
  font-size:38px; font-weight:800; line-height:1.1;
  letter-spacing:.5px;
}
#reward-amt.cash{ color:#7bd88f; }
#reward-amt.gold{ color:var(--gold); }
#reward-sub{
  margin-top:6px;
  font-size:10px; font-weight:800; letter-spacing:3px;
  color:var(--txt-dim);
}
@media (max-width:640px){
  #reward-card{ padding:24px 32px; }
  #reward-ico{ width:76px; height:76px; }
  #reward-amt{ font-size:30px; }
}

/* ---- Kick / ban notice ---- */
#kick-screen{
  /* terminal state — sits above everything, incl. the nation picker (900) */
  position:fixed; inset:0; z-index:940;
  background:rgba(6,6,8,.96);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#kick-card{
  width:100%; max-width:440px; text-align:center;
  background:rgb(9,9,11); border:1px solid rgb(46,46,54);
  border-radius:10px; padding:26px 24px;
}
#kick-label{
  font-size:9.5px; font-weight:800; letter-spacing:3.5px; text-transform:uppercase;
  color:rgb(128,128,138); margin-bottom:12px;
}
#kick-msg{
  color:#fff; font-size:15px; font-weight:600; line-height:1.55;
  margin-bottom:20px;
}
#kick-ok{ width:100%; padding:13px 0; }

/* ---- Rankings ---- */
.rank-toggle{ display:flex; gap:8px; margin-bottom:12px; }
.rank-toggle .btn{ flex:1; padding:11px 0; font-size:14px; }
.rank-me{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(180deg, rgb(26,26,31), rgb(16,16,20));
  border:1px solid rgb(58,58,68); border-radius:10px;
  padding:14px 16px; margin-bottom:12px;
}
.rank-me-num{ font-size:26px; font-weight:800; color:var(--gold); min-width:64px; }
.rank-me-info{ flex:1; min-width:0; }
.rank-me-info span{ display:block; font-size:9.5px; font-weight:800; letter-spacing:2px; color:var(--txt-dim); }
.rank-me-info b{ font-size:16px; }
.rank-list{ display:flex; flex-direction:column; gap:6px; }
.rank-row{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px;
}
.rank-num{
  font-size:15px; font-weight:800; color:var(--txt-dim);
  min-width:34px; text-align:center; flex-shrink:0;
}
.rank-pfp, .rank-flag{
  width:40px; height:40px; object-fit:contain; flex-shrink:0;
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px; padding:2px;
}
.rank-info{ flex:1; min-width:0; }
.rank-info b{ font-size:14px; }
.rank-info span{ display:block; font-size:11.5px; color:var(--txt-dim); margin-top:1px; }
.rank-synd{ color:var(--gold); }
.rank-power{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:15px; font-weight:800;
}
.rank-power img{ width:26px; height:26px; object-fit:contain; }

/* top 3 — static medal fills (the old border-color shimmer burned style+paint
   every frame AND put an animated gold border on a card edge — L4 violation) */
.rank-top{ border-width:1px; }
.rank-top1{ border-color:var(--line); background:linear-gradient(180deg, rgba(224,180,72,.10), var(--card)); }
.rank-top1 .rank-num{ color:rgb(224,180,72); }
.rank-top2{ border-color:var(--line); background:linear-gradient(180deg, rgba(200,206,220,.08), var(--card)); }
.rank-top2 .rank-num{ color:rgb(210,214,226); }
.rank-top3{ border-color:var(--line); background:linear-gradient(180deg, rgba(196,127,72,.09), var(--card)); }
.rank-top3 .rank-num{ color:rgb(214,150,96); }

/* ---- Chat syndicate tag + leader title ---- */
.chat-synd{
  font-size:10px; font-weight:800; letter-spacing:.3px;
  color:var(--gold); padding:1px 6px;
  border:1px solid rgba(224,180,72,.4); border-radius:4px;
  background:rgba(224,180,72,.1);
}
.chat-leader{
  font-size:10px; font-weight:800; letter-spacing:.3px;
  color:rgb(235,120,120); padding:1px 6px;
  border:1px solid rgba(196,58,58,.45); border-radius:4px;
  background:rgba(196,58,58,.14);
}
.chat-vip{
  font-size:10px; font-weight:800; letter-spacing:.5px;
  color:var(--gold); padding:1px 6px;
  border:1px solid rgba(224,180,72,.4); border-radius:4px;
  background:rgba(224,180,72,.1);
}

.con-ban-tag{ color:rgb(235,120,120); }
/* Tabs sorter: grip drags, name stretches, arrows stay compact */
.tab-sort-row{ display:flex; align-items:center; gap:8px; }
.tab-sort-name{ flex:1; font-size:13px; color:var(--txt); }
.tab-sort-tag{ font-size:10.5px; color:var(--txt-dim); font-style:normal; margin-left:6px; }
.tab-sort-row .btn{ padding:6px 12px; font-size:12px; flex-shrink:0; }
.tab-sort-row .btn[disabled]{ opacity:.35; cursor:default; }
.tab-drag{
  cursor:grab; touch-action:none; user-select:none;
  font-size:16px; color:var(--txt-dim);
  padding:4px 10px; margin:-4px 0;
  border-radius:6px; flex-shrink:0;
}
.tab-drag:hover{ color:var(--gold); background:var(--card-h); }
.tab-sort-row{ transition:transform .12s ease; }
.tab-sort-row.dragging{
  opacity:.9; background:var(--card-h);
  border:1px solid var(--line); border-radius:8px; /* L4: never gold on an edge */
  position:relative; z-index:5;
  transition:none; /* the dragged row follows the finger raw — no easing lag */
}
.tab-sort-row.dragging .tab-drag{ cursor:grabbing; color:var(--gold); }
/* Identity tile: tight forensic line groups + a scroll cap on big alt-webs */
.con-id-lines{ display:flex; flex-direction:column; gap:2px; }
.con-id-lines .con-sub{ margin:0; }
.con-related{ max-height:300px; overflow-y:auto; padding-right:4px; }
.con-row .con-info b .con-on,
.con-row .con-info b .con-off,
.con-row .con-info b .con-ban-tag{ font-size:10px; margin-left:8px; letter-spacing:.5px; }
#auth-creator-msg{
  font-size:12px; color:var(--txt);
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px;
}
#auth-creator-msg b{ color:var(--gold); }

/* ---- Deletion: danger controls + the disabled-account screen ---- */
.tile-danger{ border-color:rgba(196,58,58,.5); }
/* Danger = darker than the normal crimson button, white text, hot border.
   NEVER low-contrast text on a filled button — it has to read instantly. */
.btn-danger{
  background:rgb(112,20,20); color:#fff;
  border:1px solid rgb(224,90,90);
}
.btn-danger:hover{ background:rgb(146,26,26); filter:none; }
#disabled-overlay{
  position:fixed; inset:0; z-index:930;
  background:rgba(8,8,10,.94);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#disabled-card{
  max-width:440px; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:26px; text-align:center;
  display:flex; flex-direction:column; gap:14px;
}
#disabled-head{
  font-size:13px; font-weight:800; letter-spacing:3px; color:rgb(235,120,120);
}
#disabled-card p{ font-size:13px; color:var(--txt-dim); line-height:1.5; margin:0; }
#disabled-card p b{ color:var(--txt); }
#disabled-btns{ display:flex; gap:10px; justify-content:center; }

/* ---- Banned gate: the appeal box ---- */
#auth-appeal{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px; text-align:left;
}
#auth-appeal-head{
  font-size:11px; font-weight:800; letter-spacing:2px; color:var(--accent);
}
#auth-appeal p{ font-size:12px; color:var(--txt-dim); margin:0; }
#auth-appeal textarea{
  background:var(--card); color:var(--txt);
  border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font-size:13px; font-family:inherit;
  resize:vertical; min-height:64px; width:100%;
}
#auth-appeal textarea:focus{ outline:none; border-color:var(--gold); }

/* ================= JOBS — THE LEDGER ================= */
.jobs-wrap{display:flex;flex-direction:column;gap:14px}

/* ---- Zone 1: Ledger header ---- */
.ledger{position:relative;padding:18px 20px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ledger::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(620px 180px at 85% -20%, rgba(196,58,58,.10), transparent 70%),
  repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px)}
.ledger-top{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ledger-kicker{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--txt-dim)}
.ledger-rank{font-size:30px;font-weight:900;letter-spacing:.04em;line-height:1.1;color:var(--txt);margin-top:2px}
.ledger-rank-sub{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--txt-dim);margin-top:3px}
.ledger-take{text-align:right}
.ledger-take-label{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--txt-dim)}
.ledger-take-num{display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:40px;font-weight:900;line-height:1.05;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(224,180,72,.22)}

/* ---- Milestone rail (carved channel: visible at 0% by construction) ---- */
.rail{position:relative;margin-top:26px}
.rail-track{position:relative;height:12px;margin:0 8px;border-radius:999px;background:rgb(28,28,33);box-shadow:inset 0 0 0 1px rgb(50,50,60),inset 0 2px 5px rgba(0,0,0,.65)}
.rail-fill{position:absolute;left:0;top:0;bottom:0;min-width:6px;border-radius:999px;background:linear-gradient(90deg,rgb(150,112,38),var(--gold));box-shadow:0 0 12px rgba(224,180,72,.45)}
.rail-spark{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:var(--gold);box-shadow:0 0 14px 4px rgba(224,180,72,.5);z-index:3}
.rail-tick{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:rgb(30,30,36);border:2px solid var(--line);z-index:2}
.rail-tick.done{background:var(--gold);border-color:rgb(12,12,14);box-shadow:0 0 10px rgba(224,180,72,.55)}
.rail-tick.next{background:var(--card);border-color:var(--gold);animation:tickPulse 1.6s ease-in-out infinite}
@keyframes tickPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,180,72,.45)}50%{box-shadow:0 0 0 7px rgba(224,180,72,0)}}
.rail-tip{display:none;position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;background:rgb(8,8,10);border:1px solid var(--line);border-radius:6px;padding:6px 10px;z-index:6}
.rail-tip b{display:block;font-size:11px;font-weight:800;color:var(--txt)}
.rail-tip span{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--gold)}
.rail-tick:hover .rail-tip{display:block}
.rail-ends{display:flex;justify-content:space-between;margin:10px 4px 0;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--txt-dim)}
.rail-next{margin-top:12px;font-size:12px;letter-spacing:.04em;color:var(--txt-dim)}
.rail-next b{color:var(--txt);font-weight:800}
.rail-next-gap{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-weight:800;color:var(--gold)}
.rail-max{font-weight:800;letter-spacing:.12em;color:var(--gold)}

/* ---- Crew strip: operators run the jobs; hire up to five ---- */
.crew-strip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:12px; border-top:1px solid rgb(38,38,44);
  flex-wrap:wrap;
}
.crew-info{ display:flex; flex-direction:column; gap:6px; }
.crew-label{ font-size:10.5px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim); }
.crew-count{ color:var(--gold); margin-left:6px; }
.crew-slots{ display:flex; gap:6px; }
.op-slot{
  width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgb(24,24,28); border:1px solid var(--line);
}
.op-slot.idle{ color:var(--gold); }
.op-slot.busy{ color:rgb(235,120,120); animation:opSlotPulse 1.6s ease-in-out infinite; }
.op-slot.empty{ color:rgb(70,70,78); }
@keyframes opSlotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.crew-full{ font-size:11px; font-weight:800; letter-spacing:1.2px; color:var(--gold); }
#crew-hire{ font-size:12.5px; }

/* ---- Zone 2: The Board ---- */
.board{display:flex;flex-direction:column;gap:10px}
/* the art layer renders at its NATIVE 700px scale, pinned right — cover
   was upscaling it across ultrawide rows into a blurry stretched band.
   The frames' pure-black left halves melt into the card on any width. */
.job-row{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;min-height:78px;padding:14px 16px;background-color:var(--card);background-size:auto,700px auto;background-position:right center;background-repeat:no-repeat;border:1px solid var(--line);border-left-width:3px;border-radius:10px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.job-row.open:hover{border-left-color:var(--accent);box-shadow:0 0 18px rgba(0,0,0,.5)}
.job-num{font-size:26px;font-weight:900;line-height:1;color:rgba(255,255,255,.16);font-variant-numeric:tabular-nums}
.job-main{min-width:0}
.job-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:800;color:var(--txt)}
.job-scar,.job-nextchip{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--gold);border:1px solid rgba(224,180,72,.4);border-radius:999px;padding:2px 8px}
.job-nextchip{animation:chipGlow 1.6s ease-in-out infinite}
.job-livechip{font-size:9px;font-weight:800;letter-spacing:.14em;color:rgb(255,140,140);background:rgba(196,58,58,.16);border:1px solid rgba(196,58,58,.5);border-radius:999px;padding:2px 8px;animation:chipGlow 1.2s ease-in-out infinite}
.job-livechip.gold{color:rgb(24,18,8);background:var(--gold);border-color:var(--gold);animation:none}
@keyframes chipGlow{0%,100%{opacity:1}50%{opacity:.55}}
.job-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--txt-dim)}
.job-pay{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--gold)}
.job-dur{font-weight:600}
.job-needs{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--gold);border:1px solid rgba(224,180,72,.45);border-radius:999px;padding:2px 8px}
.job-needs.ok{color:var(--txt-dim);border-color:var(--line)}
.job-needs.miss{color:rgb(228,124,124);border-color:rgba(196,58,58,.55)}
.job-act{display:flex;flex-direction:column;align-items:flex-end;gap:6px;justify-self:end}
.job-act .btn.job-run{min-width:112px;font-weight:800;letter-spacing:.06em}
.job-act .btn:disabled{opacity:.4;cursor:default;pointer-events:none;filter:saturate(.4)}
.job-act-sub{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}

/* ---- Active op: hero-scale, alive ---- */
.job-row.active{min-height:110px;padding:18px 16px;border-color:rgba(196,58,58,.55);border-left-color:var(--accent);animation:opBreathe 2.4s ease-in-out infinite;background-size:auto,auto,700px auto}
@keyframes opBreathe{0%,100%{box-shadow:0 0 0 1px rgba(196,58,58,.22),0 0 30px rgba(196,58,58,.14),inset 0 0 70px rgba(196,58,58,.05)}50%{box-shadow:0 0 0 1px rgba(196,58,58,.34),0 0 42px rgba(196,58,58,.26),inset 0 0 70px rgba(196,58,58,.08)}}
.job-row.active .job-num{color:rgba(196,58,58,.55)}
.job-row.ready{animation:none;box-shadow:0 0 0 1px rgba(196,58,58,.35),0 0 34px rgba(196,58,58,.22)}
.job-count{font-size:clamp(30px,5vw,38px);font-weight:900;line-height:1;letter-spacing:.02em;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(224,180,72,.3)}
.btn.job-collect{padding:12px 26px;font-size:14px;font-weight:900;letter-spacing:.06em;animation:collectPulse 1.2s ease-in-out infinite}
@keyframes collectPulse{0%,100%{box-shadow:0 0 0 0 rgba(196,58,58,.5)}50%{box-shadow:0 0 0 9px rgba(196,58,58,0)}}
.job-opbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.06)}
.job-opbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgb(150,112,38),var(--gold));box-shadow:0 0 10px rgba(224,180,72,.55);animation-name:opFill;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes opFill{from{width:0}to{width:100%}}

/* ---- Locked / next-up: the tease ---- */
.job-row.locked{filter:saturate(.55)}
.job-row.locked .job-name,.job-row.nextup .job-name{color:rgba(238,238,242,.6)}
.job-row.locked .job-pay,.job-row.nextup .job-pay{color:rgba(224,180,72,.7)}
.job-lock{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.job-lock-line{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--txt-dim)}
.job-lock-line svg{opacity:.7;flex:none}
.job-lock-amt{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:var(--txt)}
.job-lock-bar{width:130px;height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.job-lock-bar i{display:block;height:100%;min-width:3px;background:linear-gradient(90deg,rgb(150,112,38),var(--gold));box-shadow:0 0 8px rgba(224,180,72,.5)}

/* ---- 360px ---- */
@media (max-width:480px){
  .ledger{padding:14px 14px 16px}
  .ledger-rank{font-size:22px}
  .ledger-take-num{font-size:26px}
  .rail-track{height:10px;margin:0 6px}
  .rail-tick{width:12px;height:12px}
  .rail-tip{display:none!important}
  .job-row{grid-template-columns:34px 1fr;gap:10px;padding:12px;min-height:0}
  .job-row.active{padding:12px;min-height:0}
  .job-num{font-size:18px}
  .job-name{font-size:14px}
  .job-count{font-size:26px}
  .job-act{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%;border-top:1px solid rgba(255,255,255,.06);padding-top:10px}
  .job-act .btn.job-run,.job-act .btn.job-collect{width:100%}
  .job-lock{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .job-lock-bar{width:96px}
}

/* ---- Store: Syndicate V.I.P hero + THE GOLD SHELF ---- */
/* Rev 28.4 "criminally tempting": the V.I.P card burns. A living-flame glow
   on an IRREGULAR clock (single keyframe with uneven stops — two competing
   box-shadow animations would override each other), ember heat rising from
   the card's floor, and a specular sheen that sweeps like light off a gold
   case. All GLOWS and fills — never a gold border, L4 stands. */
.store-vip-card{
  position:relative; overflow:hidden;
  display:flex; gap:20px; align-items:center;
  background:
    radial-gradient(120% 90% at 50% 132%, rgba(216,106,38,.17), transparent 62%),
    radial-gradient(80% 60% at 12% -12%, rgba(224,180,72,.08), transparent 55%),
    linear-gradient(160deg, rgb(27,25,30), rgb(17,16,20) 55%, rgb(21,17,15));
  border:1px solid var(--line); border-radius:12px;
  padding:20px; max-width:900px;
  animation:vip-fire 3.2s ease-in-out infinite;
}
@keyframes vip-fire{
  0%,100%{ box-shadow:0 0 12px rgba(224,180,72,.12), 0 0 28px rgba(222,120,46,.07), 0 10px 30px rgba(0,0,0,.45); }
  22%    { box-shadow:0 0 20px rgba(224,180,72,.34), 0 0 46px rgba(222,120,46,.16), 0 10px 30px rgba(0,0,0,.45); }
  41%    { box-shadow:0 0 15px rgba(224,180,72,.22), 0 0 38px rgba(222,120,46,.11), 0 10px 30px rgba(0,0,0,.45); }
  63%    { box-shadow:0 0 22px rgba(224,180,72,.40), 0 0 56px rgba(222,120,46,.20), 0 10px 30px rgba(0,0,0,.45); }
  82%    { box-shadow:0 0 16px rgba(224,180,72,.26), 0 0 40px rgba(222,120,46,.12), 0 10px 30px rgba(0,0,0,.45); }
}
/* the sheen: a light streak crossing the laminate every few seconds */
.store-vip-card::after{
  content:""; position:absolute; top:-60%; bottom:-60%; left:-34%; width:34%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,224,150,.05) 42%, rgba(255,230,160,.12) 50%, rgba(255,224,150,.05) 58%, transparent 100%);
  transform:rotate(12deg) translateX(-160%);
  animation:vip-sheen 5.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes vip-sheen{
  0%,52%{ transform:rotate(12deg) translateX(-160%); }
  76%,100%{ transform:rotate(12deg) translateX(360%); }
}
.store-vip-art{
  width:clamp(84px,18vh,150px); max-width:34vw; height:auto; flex-shrink:0;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(224,150,60,.20));
  animation:vip-art-float 4.6s ease-in-out infinite;
}
@keyframes vip-art-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.store-vip-main{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.store-vip-kicker{ font-size:10px; font-weight:800; letter-spacing:2.4px; color:var(--txt-dim); }
.store-vip-title{
  font-size:28px; font-weight:900; letter-spacing:1px; color:var(--gold); line-height:1;
  text-shadow:0 0 18px rgba(224,180,72,.35), 0 2px 4px rgba(0,0,0,.6);
}
.store-vip-price{ font-size:16px; font-weight:800; color:var(--txt); }
.store-vip-price span{ color:var(--txt-dim); font-weight:600; font-size:12px; }
.store-perk{ font-size:12.5px; color:var(--txt); }
.store-perk b{ color:var(--gold); }
.store-vip-active{ font-size:12px; font-weight:800; letter-spacing:.4px; color:var(--gold); }
.store-vip-note{ font-size:10.5px; color:var(--txt-dim); }

/* THE GOLD SHELF — 4 packs, one row on desktop, 2x2 on phones. Art heights
   ride vh clamps so the whole tab fits ANY viewport with zero scrolling. */
.gold-shelf-head{
  max-width:900px; margin:14px 0 8px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.gold-shelf-title{ font-size:11px; font-weight:800; letter-spacing:2.2px; color:var(--gold); }
.gold-shelf-bal{ font-size:11px; color:var(--txt-dim); font-weight:700; }
.gold-shelf-bal b{ color:var(--gold); }
.gold-shelf{ max-width:900px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.gold-shelf .tile{ grid-column:1/-1; }
.gold-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:5px;
  text-align:center; min-width:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
/* temptation on approach: the pack lifts and warms — a GLOW, never a border */
.gold-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 24px rgba(224,150,60,.18);
}
.gold-card-art{
  width:clamp(56px,13vh,150px); max-width:80%; aspect-ratio:1/1; height:auto; object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transition:transform .18s ease;
}
.gold-card:hover .gold-card-art{ transform:scale(1.06); }
/* accessibility courtesy: a player who asked their OS for less motion gets a
   still (but still glowing) store */
@media (prefers-reduced-motion: reduce){
  .store-vip-card, .store-vip-card::after, .store-vip-art{ animation:none; }
  .store-vip-card{ box-shadow:0 0 16px rgba(224,180,72,.22), 0 0 40px rgba(222,120,46,.10); }
}
.gold-card-name{ font-size:10.5px; font-weight:800; letter-spacing:1.1px; color:var(--txt); text-transform:uppercase; }
.gold-card-amt{ font-size:17px; font-weight:900; color:var(--gold); display:flex; align-items:center; gap:5px; }
.gold-card-chips{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:16px; }
.gold-chip{
  font-size:9px; font-weight:800; letter-spacing:.6px; color:var(--gold);
  border:1px solid rgba(224,180,72,.28); border-radius:999px; padding:2px 7px;
}
.gold-card .btn{ width:100%; margin-top:auto; }
/* the global .gold-ico is a 36px HUD mark — inside the shelf it rides the text */
.gold-card-amt img.gold-ico{ width:20px; height:20px; }
.gold-shelf-bal img.gold-ico{ width:16px; height:16px; vertical-align:-3px; }
/* short desktop windows (1280x800 class): compress the column, never scroll */
@media (max-height:840px){
  .store-vip-card{ padding:14px 16px; }
  .store-vip-main{ gap:5px; }
  .store-vip-title{ font-size:24px; }
  .store-perk{ font-size:11.5px; }
  .store-vip-art{ width:clamp(72px,15vh,120px); }
  .store-vip-card .btn{ padding:8px 14px; font-size:13px; }
  .store-vip-note{ font-size:10px; }
  .gold-shelf-head{ margin:10px 0 6px; }
  .gold-card{ padding:8px; gap:4px; }
  .gold-card-art{ width:clamp(48px,11vh,110px); }
  .gold-card .btn{ padding:7px 10px; font-size:12.5px; }
}
@media (max-width:740px){
  .gold-shelf{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
}
@media (max-width:560px){
  .store-sub{ display:none; }
  /* phones: the glow + gold title carry the V.I.P presence — the art and the
     footnote are the two things a 375px column can't afford */
  .store-vip-art{ display:none; }
  .store-vip-note{ display:none; }
  .store-vip-card{ padding:10px 12px; gap:8px; }
  .store-vip-title{ font-size:20px; }
  .store-vip-price{ font-size:14px; }
  .store-vip-main{ gap:4px; }
  .store-perk{ font-size:10.5px; }
  .store-vip-card .btn{ padding:8px 12px; font-size:12.5px; }
  .gold-shelf-head{ margin:8px 0 5px; }
  .gold-card{ padding:6px; gap:3px; }
  .gold-card-art{ width:clamp(44px,9vh,80px); }
  .gold-card-name{ font-size:9.5px; letter-spacing:.8px; }
  .gold-card-amt{ font-size:14px; }
  .gold-card-amt img.gold-ico{ width:16px; height:16px; }
  .gold-chip{ font-size:8px; padding:2px 5px; }
  .gold-card .btn{ padding:6px; font-size:11.5px; }
}
/* SE-class short phones: the chips row is the one luxury that goes */
@media (max-width:560px) and (max-height:700px){
  .gold-card-chips{ display:none; }
  .gold-card-art{ width:clamp(40px,8vh,64px); }
  .store-perk{ font-size:10px; }
  .store-vip-main{ gap:3px; }
}

/* ---- SUPPORT (Rev 21): the Creator's line ---- */
/* the Support tabs signal in BLUE — the red dot means war, this means mail */
.rail-btn[data-tab="support"] .rail-dot,
.rail-btn[data-tab="modsupport"] .rail-dot{
  background:#3f9bff; box-shadow:0 0 8px rgba(63,155,255,.9);
}
.sup-dot{
  width:10px; height:10px; border-radius:50%; flex:0 0 10px; display:inline-block;
}
.sup-dot.open{ background:#e0c04a; box-shadow:0 0 6px rgba(224,192,74,.65); }
.sup-dot.fresh{ background:#39d353; box-shadow:0 0 6px rgba(57,211,83,.65); }
.sup-dot.closed{ background:#e05252; box-shadow:0 0 6px rgba(224,82,82,.55); }
.sup-legend{ font-size:10px; color:var(--txt-dim); display:flex; align-items:center; gap:5px; margin-bottom:8px; }
.sup-legend .sup-dot{ width:8px; height:8px; flex:0 0 8px; }
.sup-choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
.sup-choices .sup-choice{ font-size:12px; padding:8px 6px; }
#sup-body{ width:100%; margin-bottom:8px; }
.sup-row{ border:1px solid var(--line); border-radius:10px; background:var(--card); margin-bottom:6px; overflow:hidden; }
.sup-row-head{ display:flex; align-items:center; gap:9px; padding:9px 11px; cursor:pointer; }
.sup-row-head:hover{ background:var(--card-h); }
.sup-row-info{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.sup-row-info b{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sup-row-info span{ font-size:10.5px; color:var(--txt-dim); }
.sup-detail{ padding:0 11px 10px; display:flex; flex-direction:column; gap:7px; }
.sup-body{
  font-size:12px; color:var(--txt); background:rgba(0,0,0,.25);
  border-radius:8px; padding:8px 10px; white-space:pre-wrap; word-break:break-word;
}
.sup-reply{
  font-size:12px; color:var(--txt); background:rgba(63,155,255,.08);
  border-left:2px solid rgba(63,155,255,.5); border-radius:0 8px 8px 0;
  padding:7px 10px; white-space:pre-wrap; word-break:break-word;
}
.sup-reply-tag{
  display:block; font-size:9px; font-weight:800; letter-spacing:1.4px;
  color:var(--gold); margin-bottom:3px;
}
.sup-noreply{ font-size:11px; color:var(--txt-dim); font-style:italic; }
.ms-contact{ font-size:10px; font-weight:800; letter-spacing:.8px; color:var(--gold); }
.ms-actions{ display:flex; gap:6px; }

/* ---- ADMIN STEP-UP GATE (Rev 22) ---- */
#admin-gate{
  position:fixed; inset:0; z-index:400;
  display:none; align-items:center; justify-content:center;
  background:rgba(4,4,6,.92); backdrop-filter:blur(3px);
}
#admin-gate.show{ display:flex; }
#admin-gate-card{
  width:min(340px, calc(100vw - 32px));
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:26px 22px; display:flex; flex-direction:column; gap:12px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
#admin-gate-title{ font-size:13px; font-weight:900; letter-spacing:4px; color:#e05252; }
#admin-gate-sub{ font-size:12px; color:var(--txt-dim); }
#admin-gate-pin{
  background:rgba(0,0,0,.4); color:var(--txt); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; font-size:20px; letter-spacing:6px;
  text-align:center; width:100%;
}
#admin-gate-msg{ font-size:11px; color:var(--gold); min-height:14px; }
#admin-gate-card .btn{ width:100%; }

/* the gates: Support button pinned to the LEFT edge of the login screen */
#auth-support-btn{
  /* fixed, not absolute (Rev 38) — the gate scrolls now; corners stay pinned */
  position:fixed; left:16px; bottom:16px; z-index:5;
  display:flex; align-items:center; gap:8px;
  background:rgba(20,20,24,.82); color:var(--txt);
  border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer;
}
#auth-support-btn:hover{ background:var(--card-h); }
#auth-support-btn img{ width:22px; height:22px; }
#auth-support{
  position:fixed; left:16px; bottom:64px; z-index:6;
  width:min(340px, calc(100vw - 32px));
  /* keyboard-open / tiny viewports: scroll inside the panel, never clip the top */
  max-height:calc(100vh - 90px); overflow-y:auto;
  background:rgba(16,16,20,.96); border:1px solid var(--line); border-radius:12px;
  padding:14px; display:flex; flex-direction:column; gap:8px; text-align:left;
}
#auth-support-title{ font-size:11px; font-weight:800; letter-spacing:2px; color:var(--gold); }
#auth-support-choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
#auth-support-choices .asup-c{
  background:var(--card); color:var(--txt); border:1px solid var(--line);
  border-radius:8px; padding:8px 6px; font-size:11.5px; font-weight:700; cursor:pointer;
}
/* selection reads crimson, never a gold edge (S1) */
#auth-support-choices .asup-c.active{
  border-color:rgba(196,58,58,.75); background:rgba(196,58,58,.14);
  box-shadow:0 0 10px rgba(196,58,58,.25);
}
#auth-support input, #auth-support textarea{
  background:rgba(0,0,0,.35); color:var(--txt); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font-size:12.5px; width:100%; resize:vertical;
}
#auth-support-msg{ font-size:11px; color:var(--gold); min-height:14px; }
#auth-support-row{ display:flex; gap:6px; }
@media (max-width:560px){
  #auth-support-btn{ left:10px; bottom:10px; padding:8px 11px; }
  #auth-support{ left:10px; bottom:56px; width:min(340px, calc(100vw - 20px)); }
  /* lift the centered auth card off the Support button's corner — the
     register-mode card cleared it by only 8px on a 667px phone */
  #auth-inner{ padding-bottom:64px; }
}

/* ---- Syndicate: browse ---- */
.synd-toprow{ display:flex; gap:8px; margin-bottom:12px; }
.synd-toprow .bank-input{ flex:1; min-width:0; }
.synd-toprow .btn{ flex-shrink:0; padding:12px 18px; }
.synd-sorts{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.synd-sort-label{
  font-size:9.5px; font-weight:800; letter-spacing:1.8px;
  color:var(--txt-dim); margin-right:4px;
}
.synd-sorts .btn{ flex:0 0 auto; padding:8px 16px; font-size:12.5px; }
.synd-list{ display:flex; flex-direction:column; gap:8px; }
.synd-card{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; cursor:pointer;
  transition:border-color .12s;
}
.synd-card:hover{ border-color:var(--accent); }
.synd-flag{ width:48px; height:48px; object-fit:contain; flex-shrink:0; }
.synd-cardinfo{ flex:1; min-width:0; }
.synd-cardname{ font-weight:800; font-size:15px; }
.synd-cardmeta{ font-size:11.5px; color:var(--txt-dim); margin-top:2px; }
.synd-card .btn{ flex-shrink:0; padding:9px 16px; font-size:13px; }

/* preview + create modal bits */
.synd-prev{ text-align:center; }
.synd-prev-flag{ width:90px; height:90px; object-fit:contain; margin-bottom:8px; }
.synd-prev-name{ font-size:19px; font-weight:800; }
.synd-prev-desc{ font-size:13px; color:var(--txt-dim); margin:6px 0 12px; line-height:1.5; }
.synd-prev-grid{ display:flex; gap:10px; }
.synd-prev-grid > div{ flex:1; background:var(--bg); border:1px solid var(--stroke); border-radius:8px; padding:8px; }
.synd-prev-grid span{ display:block; font-size:9px; font-weight:800; letter-spacing:1.2px; color:var(--txt-dim); margin-bottom:3px; }
.synd-prev-grid b{ font-size:14px; }
.synd-flag-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(58px, 1fr));
  gap:8px; max-width:420px;
}
.flag-choice{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:6px; cursor:pointer; aspect-ratio:1;
}
.flag-choice img{ width:100%; height:100%; object-fit:contain; }
.flag-choice:hover{ background:var(--card-h); }
.flag-choice.active{ border-color:var(--accent); background:var(--card-h); }
/* the create modal is narrow — 3 across there is fine */
#modal-custom .synd-flag-grid{ grid-template-columns:repeat(3, 1fr); max-width:none; }
.rank-grid{ display:flex; flex-direction:column; gap:8px; }
.rank-grid .btn{ padding:11px 0; }

/* ---- Syndicate: home ---- */
.synd-hero{
  display:flex; align-items:center; gap:16px;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; margin-bottom:12px;
}
.synd-hero-flag{ width:80px; height:80px; object-fit:contain; flex-shrink:0; }
.synd-hero-main{ flex:1; min-width:0; }
.synd-hero-name{ font-size:22px; font-weight:800; letter-spacing:.5px; }
.synd-hero-sub{ font-size:12px; color:var(--gold); font-weight:700; margin:3px 0 8px; }
.synd-hero-stats{ display:flex; flex-wrap:wrap; gap:8px; }
.synd-hero-stats span{
  font-size:11px; font-weight:800; letter-spacing:.5px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:6px; padding:5px 10px;
}
/* stacked section labels down the single scrolling page */
.synd-block-label{
  font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--txt-dim); margin:18px 0 8px;
  border-bottom:1px solid var(--line); padding-bottom:6px;
}
.synd-block-label:first-of-type{ margin-top:2px; }
.synd-block-label .q-cap{ float:right; letter-spacing:1px; }
.sm-list{ display:flex; flex-direction:column; gap:6px; }
.sm-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:8px; padding:9px 11px;
}
.sm-avwrap{ position:relative; flex-shrink:0; }
.sm-pfp{ width:38px; height:38px; object-fit:contain; display:block; background:var(--card); border:1px solid var(--stroke); border-radius:8px; padding:2px; }
.sm-dot{
  position:absolute; bottom:-2px; right:-2px;
  width:12px; height:12px; border-radius:50%;
  border:2px solid var(--card);
}
.sm-dot.on{ background:rgb(120,216,143); }
.sm-dot.off{ background:rgb(120,120,130); }
.sm-info{ flex:1; min-width:0; }
.sm-info b{ font-size:13.5px; }
.sm-info b em{ color:var(--txt-dim); font-style:normal; font-weight:600; }
.sm-info span{ display:block; font-size:11px; color:var(--txt-dim); margin-top:2px; }
.sm-row .btn{ flex-shrink:0; padding:7px 12px; font-size:12px; }
.rt-bar{ height:8px; background:var(--bg); border:1px solid var(--stroke); border-radius:5px; overflow:hidden; margin:8px 0 4px; }
.rt-fill{ height:100%; background:var(--gold); transition:width .3s; }
.rt-cost{ font-size:11.5px; color:var(--txt-dim); margin-bottom:10px; }
#reinf-unit{ flex:0 0 auto; min-width:0; }

/* ---- Toast ---- */
#toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--card-h); border:1px solid var(--line);
  padding:12px 18px; border-radius:8px; font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:92vw; text-align:center; z-index:950; /* above every overlay incl. the nation picker (900) — status is never hidden */
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* two-line event notice (wire received, training complete) — same language as the broadcast */
#toast.big{
  background:linear-gradient(180deg, rgb(26,26,31), rgb(16,16,20));
  border:1px solid rgb(58,58,68);
  border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  padding:14px 30px;
  width:max-content; max-width:min(620px, 94vw);
}
.toast-label{
  font-size:9.5px; font-weight:800; letter-spacing:4px; text-transform:uppercase;
  color:rgb(155,155,168);
  padding-bottom:8px; margin-bottom:9px;
  border-bottom:1px solid rgb(48,48,58);
}
.toast-msg{
  color:#fff; font-size:15px; font-weight:600; line-height:1.5;
  letter-spacing:.2px;
}
@media (max-width:640px){
  #toast.big{ padding:11px 16px; }
  .toast-msg{ font-size:13.5px; }
}

/* ---- BANK ---- */
.bank-id-card{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; margin-bottom:12px;
}
.bank-pfp{
  width:64px; height:64px; flex-shrink:0; object-fit:contain;
  background:var(--bg); border:1px solid var(--stroke); border-radius:10px; padding:4px;
}
.bank-id-main{ flex:1; min-width:0; }
.bank-balances{ display:flex; gap:10px; flex-shrink:0; }
.bank-bal{
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:8px; padding:8px 14px; text-align:right;
}
.bank-bal span{ display:block; font-size:9px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim); margin-bottom:2px; }
.bank-bal b{ font-size:15px; }
.bank-bal b.gold{ color:var(--gold); }
.vault-cap{ font-size:14px; font-weight:700; color:var(--txt-dim); }
/* the vault door art stands behind the tile at NATIVE scale, pinned right —
   same law as job cards: never cover-stretch fixed-width art */
.vault-tile{
  background-image:
    linear-gradient(90deg, rgba(20,20,24,.97) 0%, rgba(20,20,24,.9) 48%, rgba(20,20,24,.55) 100%),
    url("/img/bank-vault.jpg");
  background-size:auto, 1100px auto;
  background-position:right center;
  background-repeat:no-repeat;
}
.vault-lvl{ font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--gold); margin-left:8px; }
/* fullness bar: carved channel + gold fill — the vault reads at a glance */
.vault-fill{
  height:12px; margin:10px 0 5px;
  background:rgb(28,28,33); border-radius:999px; overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.04);
}
.vault-fill-bar{
  height:100%; min-width:6px; border-radius:999px;
  background:linear-gradient(90deg, rgb(150,112,38), var(--gold));
  box-shadow:0 0 10px rgba(224,180,72,.35);
  transition:width .5s ease;
}
.vault-fill-note{ font-size:10px; font-weight:800; letter-spacing:1.2px; color:var(--txt-dim); margin-bottom:12px; }
/* global ranking chip — pinned to the profile card's top right */
.pp-rank{
  margin-left:auto; align-self:flex-start;
  font-size:9.5px; font-weight:800; letter-spacing:1.2px; color:var(--gold);
  border:1px solid rgba(224,180,72,.4); border-radius:999px; padding:2px 8px;
  white-space:nowrap;
}
.vi-collect{ display:flex; align-items:center; gap:10px; }
.vi-btn{ padding:4px 14px; font-size:11px; }
.vi-btn[disabled]{ opacity:.4; cursor:default; }
.vault-upgrade{ margin-top:12px; padding-top:10px; border-top:1px solid var(--stroke); }
.vault-up-note{ font-size:12px; color:var(--txt-dim); margin:0 0 8px; }
.vault-interest{
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px;
  padding:10px 14px; margin:12px 0;
  display:flex; flex-direction:column; gap:6px;
}
.vi-row{ display:flex; align-items:center; justify-content:space-between; }
.vi-row span{ font-size:10px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim); }
.vi-row b{ font-size:13px; }
.gold-txt{ color:var(--gold); }
.bank-actions{ margin-bottom:10px; }
.bank-actions .btn[disabled]{ opacity:.4; cursor:default; }
.bank-move, .wire-form{ display:flex; gap:8px; flex-wrap:wrap; }
.bank-input{
  flex:1; min-width:120px;
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:12px 13px; color:var(--txt); font-size:14px; font-weight:700; font-family:inherit;
}
.bank-input:focus{ outline:none; border-color:var(--accent); }
.wire-cur{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.wire-cur-btn{ flex:0 0 auto; }
#wire-send{ margin-left:auto; padding:12px 26px; }

/* ---- Gold icon (transparent PNG) ---- */
.gold-ico{
  display:inline-block;
  vertical-align:middle;
  object-fit:contain;
  width:36px; height:36px;
}
.gold-ico.gold-ico-lg{ width:64px; height:64px; }
.badge.gold .gold-ico{ width:34px; height:34px; }

/* ---- Green cash mark ($) — the one currency symbol, used everywhere cash shows ---- */
.cash-mark{ color:#7bd88f; font-weight:900; }
.cash-mark.cash-mark-lg{ margin-right:5px; }
.cash-mark.cash-mark-sm{ margin-right:2px; }

/* ---- World map (territories) ---- */
.map-stage{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#0a0a0e; margin-bottom:12px;
}
.map-stage img{ display:block; width:100%; }
.map-hot{
  position:absolute; transform:translate(-50%,-50%);
  background:rgba(10,10,14,.78); border:1px solid var(--line);
  color:var(--txt); border-radius:8px; padding:7px 12px;
  font-size:13px; font-weight:800; cursor:pointer; text-align:center;
  font-family:inherit; transition:background .12s;
}
.map-hot:hover{ background:rgba(38,34,20,.94); }
.map-hot small{ display:block; font-size:11px; font-weight:700; color:var(--txt-dim); margin-top:2px; }
.map-open{ color:var(--gold); }
.map-flag{ width:14px; height:14px; object-fit:contain; display:inline-block; vertical-align:-2px; }
.map-flag-lg{ width:22px; height:22px; }
.map-back{ margin-bottom:10px; padding:9px 14px; font-size:13px; }
.map-banner{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:11px 14px; margin-bottom:12px; font-size:13.5px;
}
.map-capline{ color:var(--txt-dim); font-size:12.5px; margin-bottom:10px; }
.map-cities{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.map-city-head{ display:flex; align-items:center; gap:8px; font-size:15px; }
.map-city-sub{ color:var(--txt-dim); font-size:12.5px; margin-top:4px; }
.map-bonus{ color:var(--gold); font-weight:800; }
.map-city-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; }
.map-holder{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
.map-holder .map-flag{ width:18px; height:18px; }
.tier-chip{ font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px; letter-spacing:.5px; }
.tier-1{ background:rgba(120,120,130,.15); color:rgb(175,175,185); border:1px solid rgba(120,120,130,.4); }
.tier-2{ background:rgba(110,140,190,.15); color:rgb(150,180,225); border:1px solid rgba(110,140,190,.4); }
.tier-3{ background:rgba(196,58,58,.18); color:rgb(235,120,120); border:1px solid rgba(196,58,58,.45); }
.tier-4{ background:rgba(212,175,55,.15); color:var(--gold); border:1px solid rgba(212,175,55,.45); }
@media (max-width:640px){
  .map-hot{ font-size:11px; padding:5px 8px; }
  .map-hot small{ font-size:10px; }
}

/* ---- Nationality picker (blocks the game until roots are chosen) ---- */
#nation-overlay{
  position:fixed; inset:0; z-index:900;
  background:rgba(5,5,8,.92);
  display:flex; align-items:center; justify-content:center; padding:20px;
  overflow-y:auto;
}
.np-box{ width:100%; max-width:560px; text-align:center; }
.np-box h2{ font-size:22px; letter-spacing:2px; margin-bottom:8px; }
.np-box p{ color:var(--txt-dim); font-size:13.5px; margin-bottom:18px; }
.np-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:14px; }
.np-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 12px; color:var(--txt); cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:border-color .12s, background .12s;
}
.np-card:hover{ border-color:var(--gold); background:var(--card-h); }
.np-card img{ width:84px; height:auto; }
.np-card b{ font-size:15px; }
.np-card span{ font-size:11.5px; color:var(--txt-dim); }
@media (max-width:480px){ .np-grid{ grid-template-columns:1fr; } }

/* ---- War map: country zones, city dots, intel panel ---- */
.map-zone{
  position:absolute; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%;
  background:rgba(224,82,82,.14); border:2px solid #e05252; /* crimson ring — matches the map art */
  cursor:pointer; padding:0;
}
.map-zone:hover{ background:rgba(224,82,82,.35); }
.map-zone-name{
  position:absolute; bottom:135%; left:50%; transform:translateX(-50%);
  color:var(--gold); /* gold reads best against the dark ocean */
  font-size:13.5px; font-weight:900; letter-spacing:1.5px; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.8);
  pointer-events:none;
}
.map-zone:hover .map-zone-name{ color:#fff; }
/* state name floats over the art — a semi-opaque chip so it never fights a
   dot or another state's label for legibility (the readable data is the board) */
.map-state-head{
  position:absolute; transform:translate(-50%,-100%);
  text-align:center; pointer-events:none; z-index:3;
  background:rgba(10,10,13,.66); border:1px solid rgba(224,82,82,.35);
  border-radius:6px; padding:3px 9px;
  backdrop-filter:blur(2px);
}
.map-state-head b{
  display:block; color:#e86a6a; font-size:11px; font-weight:900;
  letter-spacing:1.2px; white-space:nowrap;
}
.map-state-head small{
  display:block; color:var(--gold); font-size:9.5px; font-weight:800;
  white-space:nowrap; margin-top:1px;
}
.map-dot{
  position:absolute; transform:translate(-50%,-50%);
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:inherit; z-index:2;
}
.map-dot:hover, .map-dot-sel{ z-index:5; }
.map-dot-b{
  width:14px; height:14px; border-radius:50%;
  background:#c43a3a; border:2px solid #121215;
  box-shadow:0 0 0 2px rgba(196,58,58,.25), 0 1px 4px rgba(0,0,0,.6);
  transition:transform .1s ease;
}
.map-dot:hover .map-dot-b{ transform:scale(1.25); }
.map-dot-mine .map-dot-b{ background:var(--gold); box-shadow:0 0 0 2px rgba(212,175,55,.35), 0 1px 4px rgba(0,0,0,.6); }
.map-dot-sel .map-dot-b{ outline:2px solid #fff; outline-offset:1px; }
/* city names ride the dots ALWAYS (Naru 2026-07-16: no hover hunting) —
   hover/selection lifts that dot's label above its neighbors and brightens it */
.map-dot-label{
  font-size:10px; font-weight:800; color:#fff;
  background:rgba(10,10,14,.92); border-radius:5px; padding:2px 7px;
  white-space:nowrap; opacity:.94;
  transition:opacity .1s ease; pointer-events:none;
}
.map-dot:hover .map-dot-label,
.map-dot-sel .map-dot-label{ opacity:1; }
.map-intel{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  margin-bottom:12px; overflow:hidden;
}
.map-row{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; border-bottom:1px solid var(--line);
  padding:10px 14px; color:var(--txt); cursor:pointer; font-family:inherit; text-align:left;
}
.map-row:last-child{ border-bottom:none; }
.map-row:hover{ background:var(--card-h); }
.map-row-static{ cursor:default; }
.map-row-static:hover{ background:none; }
.map-row-flag{ width:26px; height:auto; flex-shrink:0; }
.map-row-name{ font-weight:800; font-size:13.5px; flex-shrink:0; }
.map-home-tag{ color:var(--gold); font-style:normal; font-size:10.5px; letter-spacing:1px; }
.map-row-info{ margin-left:auto; color:var(--txt-dim); font-size:12.5px; display:flex; align-items:center; gap:6px; }
.map-citypanel{ margin-bottom:12px; }
.map-city-state{ color:var(--txt-dim); font-size:11.5px; font-weight:700; letter-spacing:.5px; }
.map-city-actions{ display:flex; gap:8px; margin-top:12px; }
.map-city-actions .btn{ flex:1; padding:11px 0; font-size:13.5px; }

/* attack/spy quantity rows in the modal */
.au-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.au-row label{ flex:1; font-size:13px; font-weight:700; text-align:left; }
.au-row label em{ color:var(--txt-dim); font-style:normal; font-weight:600; font-size:11.5px; }
.au-row .bank-input{ flex:0 0 90px; min-width:90px; }

/* ---- Battle reports ---- */
.battle-list{ display:flex; flex-direction:column; gap:6px; }
.battle-row{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--card); border:1px solid var(--stroke); border-radius:8px;
  padding:10px 14px; color:var(--txt); cursor:pointer; font-family:inherit; text-align:left;
}
.battle-row:hover{ background:var(--card-h); }
.battle-kind{ font-size:16px; flex-shrink:0; }
.battle-main{ font-size:13px; min-width:0; }
.battle-main em{ color:var(--txt-dim); font-style:normal; }
.battle-main small{ display:block; color:var(--txt-dim); font-size:11px; margin-top:2px; }
.battle-res{ margin-left:auto; font-size:11px; font-weight:800; letter-spacing:1px; padding:3px 9px; border-radius:6px; flex-shrink:0; }
.battle-win{ background:rgba(123,216,143,.15); color:#7bd88f; border:1px solid rgba(123,216,143,.4); }
.battle-loss{ background:rgba(196,58,58,.18); color:rgb(235,120,120); border:1px solid rgba(196,58,58,.45); }
.battle-units{ display:flex; flex-wrap:wrap; gap:6px; }
.battle-units span{
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:4px 8px; font-size:12px; font-weight:700;
}
.battle-units span em{ color:rgb(235,120,120); font-style:normal; }

/* ---- Battle report detail (Tribal Wars anatomy) ---- */
.br-result{
  text-align:center; font-size:19px; font-weight:900; letter-spacing:3px;
  border-radius:8px; padding:9px 0; margin-bottom:10px;
}
.br-result.br-win{ background:rgba(123,216,143,.12); color:#7bd88f; border:1px solid rgba(123,216,143,.45); }
.br-result.br-loss{ background:rgba(196,58,58,.14); color:rgb(235,120,120); border:1px solid rgba(196,58,58,.5); }
.br-head{ text-align:center; font-size:14px; margin-bottom:10px; }
.br-head small{ display:block; color:var(--txt-dim); font-size:11.5px; margin-top:3px; }
.br-powers{ display:flex; justify-content:space-between; font-size:11px; font-weight:800; letter-spacing:1px; margin-bottom:4px; }
.br-p-us{ color:#7bd88f; }
.br-p-them{ color:rgb(235,120,120); }
.br-bar{
  height:12px; border-radius:6px; overflow:hidden;
  background:rgba(196,58,58,.55); border:1px solid var(--stroke); margin-bottom:4px;
}
.br-bar-us{ height:100%; background:#3f9d5c; }
.br-luck{ text-align:center; color:var(--txt-dim); font-size:11px; font-weight:700; margin-bottom:10px; }
.br-side{ border-radius:8px; padding:8px 10px; margin-bottom:8px; border:1px solid var(--stroke); }
.br-side.br-us{ background:rgba(63,157,92,.08); border-color:rgba(123,216,143,.3); }
.br-side.br-them{ background:rgba(196,58,58,.08); border-color:rgba(196,58,58,.32); }
.br-side-title{ font-size:10.5px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim); margin-bottom:6px; }
.br-us .br-side-title{ color:#7bd88f; }
.br-them .br-side-title{ color:rgb(235,120,120); }
.br-cols, .br-unit{
  display:grid; grid-template-columns:1fr 52px 52px 52px;
  align-items:center; gap:4px; text-align:right;
}
.br-cols{ font-size:9.5px; font-weight:800; letter-spacing:1px; color:var(--txt-dim); margin-bottom:3px; }
.br-cols span:first-child{ text-align:left; }
.br-unit{ font-size:12.5px; font-weight:700; padding:3px 0; }
.br-u-name{ display:flex; align-items:center; gap:7px; text-align:left; font-weight:800; }
.br-u-name img{ width:26px; height:26px; object-fit:contain; background:var(--bg); border-radius:5px; border:1px solid var(--stroke); }
.br-lost{ color:rgb(235,120,120); }
.br-left{ color:#7bd88f; }
.br-none{ color:var(--txt-dim); font-size:12px; }
.br-note{ text-align:center; color:var(--gold); font-size:12.5px; font-weight:700; margin-top:6px; }
.br-gear{ color:var(--txt-dim); font-weight:600; }
.br-gear .br-lost{ color:#e05252; }

/* ---- Q&A + poll popups ---- */
#qa-pop, #poll-pop{
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  z-index:860; width:min(440px, 94vw);
}
.qa-card{
  background:linear-gradient(180deg, rgb(26,26,31), rgb(14,14,18));
  border:1px solid rgb(58,58,68); border-radius:14px;
  padding:16px 18px; text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.7);
}
.qa-pfp{ width:52px; height:52px; border-radius:50%; border:2px solid rgb(58,58,68); object-fit:cover; margin-bottom:6px; }
.qa-title{ font-size:10.5px; font-weight:800; letter-spacing:3px; color:var(--gold); margin-bottom:6px; }
.qa-q{ font-size:15px; font-weight:800; margin-bottom:12px; }
.qa-card textarea{ width:100%; }
.qa-btns{ display:flex; gap:8px; margin-top:10px; }
.qa-btns .btn{ flex:1; padding:12px 0; font-size:14px; }
.poll-timer{ height:5px; border-radius:3px; background:var(--card); margin-top:12px; overflow:hidden; }
.poll-timer-fill{ height:100%; width:100%; background:var(--gold); }
.pr-row{ display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12px; font-weight:800; }
.pr-row > span{ width:34px; text-align:left; letter-spacing:1px; }
.pr-row > b{ width:34px; text-align:right; }
.pr-bar{ flex:1; height:14px; border-radius:7px; background:var(--card); overflow:hidden; border:1px solid var(--stroke); }
.pr-fill{ height:100%; }
.pr-yes{ background:#3f9d5c; }
.pr-no{ background:#c43a3a; }

/* admin console archives */
.con-archive{ margin-top:8px; max-height:340px; overflow-y:auto; }
.qa-arch{
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px;
  padding:10px 12px; margin-bottom:8px; font-size:13px;
}
.qa-arch > small{ display:block; color:var(--txt-dim); font-size:10.5px; margin:2px 0 6px; }
.qa-ans{ font-size:12.5px; padding:4px 0; border-top:1px solid var(--stroke); }
.qa-ans span{ color:var(--gold); font-weight:800; margin-right:6px; }
.qa-ans-none{ color:var(--txt-dim); }

/* ---- Map city popover (click a dot, act right there) ---- */
.map-pop{
  position:absolute; z-index:6; width:236px;
  background:rgba(11,11,15,.97); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; text-align:left;
  transform:translate(16px, -24px);
  box-shadow:0 14px 40px rgba(0,0,0,.75);
}
.map-pop.map-pop-left{ transform:translate(calc(-100% - 16px), -24px); }
.map-pop.map-pop-up{ transform:translate(16px, calc(-100% + 10px)); }
.map-pop.map-pop-left.map-pop-up{ transform:translate(calc(-100% - 16px), calc(-100% + 10px)); }
.map-pop-head{ display:flex; align-items:center; gap:8px; font-size:14.5px; }
.map-pop-sub{ color:var(--txt-dim); font-size:10.5px; font-weight:800; letter-spacing:.5px; margin:2px 0 6px; }
.map-pop-line{ font-size:11.5px; color:var(--txt-dim); margin-top:4px; line-height:1.45; }
.map-pop-line .map-holder{ font-size:12px; }
.map-pop-btns{ display:flex; gap:8px; margin-top:10px; }
.map-pop-btns .btn{ flex:1; padding:9px 0; font-size:12.5px; }
@media (max-width:640px){ .map-pop{ width:200px; } }

/* army recruit cards: badges get their own row — no more wrapping soup */
.unit-badges{ display:flex; gap:6px; flex-wrap:wrap; margin:5px 0 4px; }

/* ---- Friends + cozy DMs ---- */
.fr-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px;
  padding:8px 10px; margin-bottom:6px;
}
.fr-pfp{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.fr-avwrap{ position:relative; flex-shrink:0; display:inline-flex; }
.fr-avwrap .sm-dot{ position:absolute; right:-1px; bottom:-1px; }
.fr-info{ flex:1; min-width:0; }
.fr-info b{ font-size:13.5px; display:block; }
.fr-info span{ font-size:11px; color:var(--txt-dim); }
.fr-btns{ display:flex; gap:8px; flex-shrink:0; align-items:center; }
.fr-btns .btn, .fr-add{ padding:9px 0; font-size:12.5px; min-width:74px; text-align:center; }
.fr-add{ min-width:80px; }
.fr-tag{ font-size:10.5px; font-weight:800; letter-spacing:1px; color:#7bd88f; flex-shrink:0; }
.fr-tag-dim{ color:var(--txt-dim); }
.fr-results{ margin-top:10px; }
.dm-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.dm-peer-pfp{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.dm-peer b{ display:block; font-size:15px; }
.dm-peer span{ font-size:10px; font-weight:800; letter-spacing:1px; }
.dm-log{
  height:52vh; min-height:260px; overflow-y:auto;
  background:var(--bg); border:1px solid var(--stroke); border-radius:12px;
  padding:14px; margin-bottom:10px;
  display:flex; flex-direction:column; gap:8px;
}
.dm-row{ display:flex; justify-content:flex-start; } /* every message reads left to right */
.dm-bubble{
  max-width:82%; background:var(--card); border:1px solid var(--stroke);
  border-radius:4px 14px 14px 14px; padding:8px 12px 7px;
}
.dm-mine .dm-bubble{
  background:rgba(96,130,190,.18); /* bluish holder for your own words */
  border-color:rgba(110,140,190,.35);
}
.dm-who{ font-size:10px; font-weight:800; letter-spacing:.8px; color:var(--gold); margin-bottom:2px; text-transform:uppercase; }
.dm-mine .dm-who{ color:rgb(150,180,225); }
.dm-text{ font-size:13.5px; line-height:1.45; overflow-wrap:break-word; }
.dm-time{ font-size:9.5px; color:var(--txt-dim); margin-top:3px; }
.dm-more{ align-self:center; padding:7px 16px; font-size:11.5px; margin-bottom:4px; }
@media (max-width:640px){ .dm-bubble{ max-width:88%; } .fr-btns .btn{ padding:8px 10px; font-size:11.5px; } }

/* ---- Rail tab image icons ---- */
.r-ico-pic{
  width:32px; height:32px; object-fit:contain; vertical-align:middle; display:inline-block;
  /* lift off the dark card so the artwork reads clean at small size */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* ---- HOME hero (the boss's war room) ---- */
.home-hero{
  background-color:rgb(8,8,10);
  background-image:url("/img/home-bg.png");
  background-size:cover; background-position:center 20%;
  border:1px solid var(--line); border-radius:12px;
  min-height:52vh; margin-bottom:14px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
}
.home-hero-inner{ width:100%; padding:18px; }
/* title block over the scene */
.home-title-block{ padding:34px 24px 0; text-align:center; }
.home-kicker{
  font-size:10px; font-weight:800; letter-spacing:4px;
  color:var(--gold); margin-bottom:8px;
}
.home-title{
  font-size:30px; font-weight:800; letter-spacing:6px;
  color:var(--txt); line-height:1.15;
}
.home-quote{
  margin-top:10px;
  font-size:13.5px; font-style:italic; font-weight:600;
  color:var(--txt-dim); letter-spacing:.4px;
}
/* ID card floating over the scene */
.id-card{
  display:flex; align-items:center; gap:16px;
  background:rgba(10,10,13,.82);
  border:1px solid var(--line); border-radius:12px;
  padding:16px 18px;
}
.id-pfp{
  position:relative; flex-shrink:0;
  width:88px; height:88px; padding:5px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  cursor:pointer;
}
.id-pfp img{ width:100%; height:100%; object-fit:contain; display:block; }
.id-pfp-edit{
  position:absolute; bottom:-1px; left:-1px; right:-1px;
  background:rgba(10,10,12,.82); color:var(--txt-dim);
  font-size:9px; font-weight:800; letter-spacing:1.5px;
  padding:3px 0; text-align:center;
  border-radius:0 0 10px 10px;
}
.id-pfp:hover .id-pfp-edit{ background:var(--accent); color:#fff; }
.id-main{ min-width:0; flex:1; }
.id-name{ font-size:20px; font-weight:800; color:var(--txt); letter-spacing:.5px; }
.id-serial{
  font-size:10px; font-weight:800; letter-spacing:2px;
  color:var(--txt-dim); margin:3px 0 10px;
}
.id-serial b{ color:var(--gold); font-size:14px; letter-spacing:1.5px; }
.id-stats{ display:flex; gap:10px; }
.id-stat{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line);
  border-radius:7px; padding:5px 12px 5px 7px;
  font-size:14px; font-weight:800;
}
.id-stat img{ width:24px; height:24px; object-fit:contain; }
.id-right{ text-align:right; flex-shrink:0; }
.id-cash-label{
  font-size:10px; font-weight:800; letter-spacing:2px;
  color:var(--txt-dim); margin-bottom:4px;
}
.home-cash{ font-size:34px; font-weight:800; line-height:1.05; }
/* quick-nav row under the hero */
.home-nav{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px;
}
.home-nav-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  color:var(--txt); font-weight:700; font-size:14px; font-family:inherit;
  padding:15px 0; cursor:pointer;
  transition:background .12s, border-color .12s;
}
.home-nav-btn:hover{ background:var(--card-h); border-color:var(--accent); }
.hn-ico{ font-size:16px; font-weight:900; color:var(--gold); }
.home-nav-btn[data-tab="bank"] .hn-ico{ color:#7bd88f; }
.home-nav-btn[data-tab="blackmarket"] .hn-ico{ color:var(--accent); }
.hn-ico-img{ width:20px; height:20px; object-fit:contain; }

/* ---- Black Market ---- */
.market-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
}
.market-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:14px;
  display:flex; flex-direction:column; gap:10px;
}
.market-ico{
  height:120px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px;
}
.market-ico img{ max-width:90%; max-height:90%; object-fit:contain; }
.market-name{ font-weight:800; font-size:15px; }
.market-desc{ color:var(--txt-dim); font-size:12.5px; line-height:1.45; flex:1; }
.market-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-top:2px;
}
.market-price{ font-weight:800; font-size:18px; }
.market-buy{ padding:8px 16px; font-size:13px; }
.btn-disabled{ opacity:.45; }
.empty-state{ text-align:center; padding:40px 16px; }
.empty-state h3{ font-size:16px; margin-bottom:8px; }

/* category headers inside the market */
.market-cat{
  font-size:14px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--txt-dim); margin:18px 0 10px;
  border-bottom:1px solid var(--line); padding-bottom:6px;
}
.market-cat:first-of-type{ margin-top:4px; }

/* stat badges: ATK red / DEF blue-gray / INT gold */
.stat-badge{
  display:inline-block; font-size:11px; font-weight:800;
  padding:2px 7px; border-radius:5px; vertical-align:middle;
  margin-left:6px; letter-spacing:.4px;
}
.stat-badge.stat-atk{ background:rgba(196,58,58,.18);  color:rgb(235,120,120); border:1px solid rgba(196,58,58,.45); }
.stat-badge.stat-def{ background:rgba(110,140,190,.15); color:rgb(150,180,225); border:1px solid rgba(110,140,190,.4); }
.stat-badge.stat-int{ background:rgba(224,180,72,.14);  color:var(--gold);      border:1px solid rgba(224,180,72,.4); }

/* owned count chip on market cards */
.market-ico{ position:relative; }
.own-chip{
  position:absolute; top:6px; right:6px;
  background:var(--card-h); border:1px solid var(--line);
  color:var(--txt); font-size:11px; font-weight:800;
  padding:2px 7px; border-radius:5px;
}

/* ---- Inventory ---- */
.inv-kicker{ font-size:10.5px; font-weight:800; letter-spacing:1.5px; color:var(--gold); margin-bottom:6px; }
.inv-totals{ display:flex; gap:10px; margin-bottom:14px; }
.inv-total{
  flex:1; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.inv-total span{ font-size:12px; font-weight:800; letter-spacing:1px; color:var(--txt-dim); }
.inv-total b{ font-size:20px; }
.inv-total-sub{ flex-basis:100%; font-style:normal; font-size:10px; color:var(--txt-dim); margin-top:2px; }
.inv-total.stat-atk b{ color:rgb(235,120,120); }
.inv-total.stat-def b{ color:rgb(150,180,225); }
.inv-total.stat-int b{ color:var(--gold); }
.army-deployed-note{ color:var(--txt-dim); font-size:12.5px; margin:-6px 0 14px; }
.rt-lv{
  font-size:11px; font-weight:800; letter-spacing:1px; margin-left:8px;
  background:rgba(212,175,55,.15); color:var(--gold);
  border:1px solid rgba(212,175,55,.45); border-radius:6px; padding:2px 8px;
}
.tr-eta{ color:var(--gold); }
.inv-list{ display:flex; flex-direction:column; gap:8px; }
.inv-row{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px;
}
.inv-ico{
  width:52px; height:52px; object-fit:contain; flex-shrink:0;
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px; padding:4px;
}
.inv-info{ flex:1; min-width:0; }
.inv-name{ font-weight:800; font-size:14px; }
.inv-sub{ color:var(--txt-dim); font-size:12.5px; margin-top:3px; }
.inv-sell{ flex-shrink:0; padding:8px 14px; font-size:13px; }

/* ---- Chat ---- */
.chat-log{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:12px; margin-bottom:12px;
  height:55vh; min-height:280px; max-height:600px;
  overflow-y:auto;
}
.chat-row{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; border-bottom:1px solid rgb(28,28,32);
}
.chat-row:last-child{ border-bottom:none; }
/* your own lines get a whisper of gold FILL (no border — L4) */
.chat-row.chat-mine{ background:rgba(224,180,72,.06); border-radius:6px; }
.chat-ava{
  width:38px; height:38px; flex-shrink:0;
  object-fit:contain;
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px;
  padding:2px;
}
.chat-body{ flex:1; min-width:0; }
.chat-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.chat-time{ color:var(--txt-dim); font-size:10.5px; font-weight:700; flex-shrink:0; }
.chat-name{
  color:var(--accent); font-weight:800; font-size:13px;
  line-height:1.35;
}
.chat-stat{
  font-size:10px; font-weight:800; letter-spacing:.5px;
  padding:1px 6px; border-radius:4px;
}
.chat-stat.stat-atk{ background:rgba(196,58,58,.18);  color:rgb(235,120,120); border:1px solid rgba(196,58,58,.45); }
.chat-stat.stat-int{ background:rgba(224,180,72,.14);  color:var(--gold);      border:1px solid rgba(224,180,72,.4); }
.chat-text{
  color:var(--txt); font-size:13px;
  line-height:1.4; word-break:break-word;
}
.chat-input-row{ display:flex; gap:8px; }
.chat-input{
  flex:1; background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:11px 12px;
  color:var(--txt); font-size:14px; font-family:inherit;
}
.chat-input:focus{ outline:none; border-color:var(--accent); }

/* ---- MOBILE: rail collapses to an icon strip ---- */
@media (max-width: 640px){
  .brand{ font-size:12px; }
  #rail{ width:72px; flex:0 0 72px; padding:8px 6px; }
  .rail-btn{ justify-content:center; padding:14px 0; }
  .rail-btn .r-label{ display:none; }
  .rail-btn .r-ico{ width:auto; font-size:26px; }
  .rail-dot{ position:absolute; top:7px; right:7px; margin-left:0; }
  #content{ padding:14px; }
  .chat-log{ height:50vh; min-height:220px; }
  .chat-name{ min-width:76px; max-width:90px; font-size:12px; }
  .chat-time{ font-size:9.5px; }
  .chat-text{ font-size:12px; }
  .market-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
  .market-ico{ height:96px; }
  .inv-totals{ gap:8px; flex-wrap:wrap; }
  .inv-total{ padding:8px 10px; flex:1 1 40%; }
  .inv-total b{ font-size:16px; }
  .inv-ico{ width:44px; height:44px; }
  .inv-sub{ font-size:11.5px; }
  .home-hero{ min-height:340px; }
  .home-cash{ font-size:22px; }
  .home-title-block{ padding:22px 14px 0; }
  .home-title{ font-size:20px; letter-spacing:3.5px; }
  .home-quote{ font-size:12px; }
  .r-ico-pic{ width:22px; height:22px; }
  .id-card{ flex-wrap:wrap; gap:12px; padding:12px 14px; }
  .id-pfp{ width:64px; height:64px; }
  .id-name{ font-size:16px; }
  .id-right{ text-align:left; width:100%; }
  .home-nav{ grid-template-columns:repeat(2, 1fr); }
  .chat-ava{ width:32px; height:32px; }
}

/* ---- Job descriptions (the row's middle breathes again) ---- */
.job-desc{ font-size:12px; color:var(--txt-dim); margin-top:6px; max-width:640px; line-height:1.45; }

/* ---- clickable identities ---- */
.chat-row.chat-click{ cursor:pointer; }
.chat-row.chat-click:hover{ background:rgba(255,255,255,.03); border-radius:6px; }
.rank-row.rank-click{ cursor:pointer; }
.rank-row.rank-click:hover{ background:var(--card-h); }

/* ---- universal player profile ---- */
.pp-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.pp-pfp{ width:56px; height:56px; border-radius:10px; border:1px solid var(--line); }
.pp-id{ display:flex; flex-direction:column; gap:3px; }
.pp-id b{ font-size:17px; }
.pp-id span{ font-size:10.5px; font-weight:800; letter-spacing:1px; }
.pp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.pp-grid > div{ background:rgb(24,24,28); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.pp-grid span{ display:block; font-size:9.5px; font-weight:800; letter-spacing:1.2px; color:var(--txt-dim); margin-bottom:3px; }
.pp-grid b{ font-size:13px; }
.pp-flag{ width:16px; height:11px; vertical-align:-1px; margin-right:3px; }
.pp-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.pp-btns .btn{ flex:1; min-width:120px; font-size:12px; }

/* ---- syndicate profile card ---- */
.sv-gf{ display:flex; align-items:center; gap:10px; background:rgba(224,180,72,.07); border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:10px; cursor:pointer; }
.sv-gf img{ width:40px; height:40px; border-radius:8px; }
.sv-gf span{ display:block; font-size:9.5px; font-weight:800; letter-spacing:1.2px; color:var(--gold); }
.sv-gf b{ font-size:14px; }
.sv-gf em{ margin-left:auto; font-style:normal; font-size:11px; color:var(--txt-dim); }
.sv-mems{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; max-height:180px; overflow-y:auto; }
.sv-mem{ display:flex; align-items:center; gap:6px; background:rgb(24,24,28); border:1px solid var(--line); border-radius:8px; padding:4px 8px; cursor:pointer; color:var(--txt); font-size:11.5px; }
.sv-mem img{ width:20px; height:20px; border-radius:5px; }
.sv-mem:hover{ background:var(--card-h); }

/* ---- group chats ---- */
.grp-note{ font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--txt-dim); background:rgb(24,24,28); border:1px solid var(--line); border-radius:8px; padding:7px 10px; margin-bottom:8px; }
.grp-members{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.grp-mem{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--txt-dim); background:rgb(24,24,28); border:1px solid var(--line); border-radius:6px; padding:2px 8px; }
.grp-mem img{ width:16px; height:16px; border-radius:4px; }
.grp-ico{ width:34px; height:34px; border-radius:8px; background:rgb(24,24,28); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:var(--gold); flex-shrink:0; }
.gc-list{ max-height:220px; overflow-y:auto; margin-top:6px; }
.gc-row{ display:flex; align-items:center; gap:8px; padding:6px 2px; font-size:13px; cursor:pointer; }
.gc-row img{ width:22px; height:22px; border-radius:5px; }

/* ---- admin: the city tonight ---- */
.con-counts{ display:flex; gap:10px; }
.con-count{ flex:1; background:rgb(24,24,28); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.con-count span{ display:block; font-size:9.5px; font-weight:800; letter-spacing:1.4px; color:var(--txt-dim); margin-bottom:4px; }
.con-count b{ font-size:22px; }

/* ---- battle report: the haul ---- */
.br-loot{ color:var(--gold); font-weight:700; }

/* ---- war status bar: top-center live countdowns ---- */
#warbar{
  position:fixed; top:60px; left:50%; transform:translateX(-50%);
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  z-index:300; pointer-events:none; max-width:92vw;
}
.wb-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(180deg, rgb(26,26,31), rgb(19,19,23));
  border:1px solid var(--line); border-radius:9px;
  padding:6px 12px; font-size:11.5px; box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.wb-chip i{ font-style:normal; font-size:12px; }
.wb-chip b{ font-weight:800; letter-spacing:.4px; }
.wb-chip em{ font-style:normal; font-weight:800; color:var(--gold); min-width:46px; text-align:right; }
.wb-in{ border-color:rgba(196,58,58,.55); }
.wb-in b{ color:rgb(235,120,120); }
.wb-in em{ color:rgb(235,120,120); }
.wb-reinf b{ color:rgb(150,180,225); }
@media (max-width:700px){ #warbar{ top:54px; } .wb-chip{ font-size:10.5px; padding:5px 9px; } }

/* ---- syndicate turf chips (income -> Syndicate Bank) ---- */
.synd-cities{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.synd-cities-label{ font-size:9.5px; font-weight:800; letter-spacing:1.2px; color:var(--gold); }
.synd-city-chip{
  font-size:11px; color:var(--txt-dim);
  background:rgb(24,24,28); border:1px solid var(--line); border-radius:6px; padding:2px 8px;
}
.synd-city-chip b{ color:var(--gold); }

/* ---- Map: family strip, legend, state intel board, march progress ---- */
.map-family{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  background:linear-gradient(180deg, rgb(26,26,31), rgb(19,19,23));
  border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; margin-bottom:10px; font-size:11px; letter-spacing:.6px; font-weight:700;
  color:var(--txt-dim);
}
.map-family b{ color:var(--txt); margin-left:4px; }
.map-family .gold-txt{ color:var(--gold); }
.map-legend{
  display:flex; flex-wrap:wrap; gap:14px; margin:8px 2px 10px;
  font-size:10.5px; letter-spacing:.5px; color:var(--txt-dim);
}
.map-legend span{ display:inline-flex; align-items:center; gap:6px; }
.lg-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.lg-mine{ background:var(--gold); }
.lg-enemy{ background:rgb(224,82,82); }
.lg-npc{ background:rgb(110,110,120); }
.lg-open{ background:transparent; border:1.5px dashed rgb(110,110,120); }
.mi-state{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:10px;
}
.mi-state-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:8px; border-bottom:1px solid rgb(34,34,40); margin-bottom:6px;
}
.mi-state-head b{ font-size:12px; letter-spacing:1.4px; }
.mi-state-head span{ font-size:11px; color:var(--txt-dim); display:inline-flex; align-items:center; gap:6px; }
/* city rows v2 — the holder is the star: flag badge, allegiance-colored
   family name, income chip. Card rows, not hairline lists. */
.mi-city{
  display:flex; align-items:center; gap:12px;
  background:rgb(24,24,29); border:1px solid rgb(31,31,37); border-radius:11px;
  padding:10px 12px; margin-top:8px;
}
.mi-city.mi-mine{ background:linear-gradient(90deg, rgba(224,180,72,.07), rgb(24,24,29) 55%); }
.mi-city.mi-enemy{ background:linear-gradient(90deg, rgba(196,58,58,.08), rgb(24,24,29) 55%); }
.mi-flag{
  width:44px; height:44px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgb(18,18,22); overflow:hidden;
}
.mi-flag img{ width:100%; height:100%; object-fit:cover; }
.mi-flag span{ font-size:9px; font-weight:900; letter-spacing:1px; color:rgb(120,120,130); }
.mi-flag-mine{ box-shadow:inset 0 0 0 1px rgba(224,180,72,.55), 0 0 10px rgba(224,180,72,.15); }
.mi-flag-enemy{ box-shadow:inset 0 0 0 1px rgba(196,58,58,.6), 0 0 10px rgba(196,58,58,.15); }
.mi-flag-npc{ box-shadow:inset 0 0 0 1px rgb(40,40,48); }
.mi-flag-open{ border:1.5px dashed rgb(70,70,80); background:transparent; }
.mi-info{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.mi-cityname{ font-size:14.5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mi-income{
  font-size:10px; font-weight:800; letter-spacing:.4px; color:var(--gold);
  background:rgba(224,180,72,.08); border-radius:999px; padding:2px 8px;
  display:inline-flex; align-items:center; gap:3px;
}
.mi-holder{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mi-holder b{ font-size:13.5px; letter-spacing:.3px; }
.mi-holder em{ font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:1.6px; color:var(--txt-dim); }
.mi-holder-mine b{ color:var(--gold); }
.mi-holder-mine em{ color:rgba(224,180,72,.75); }
.mi-holder-enemy b{ color:rgb(224,110,110); }
.mi-holder-npc b, .mi-holder-open b{ color:rgb(150,150,160); font-weight:700; }
.mi-intel{ font-size:10.5px !important; color:rgb(120,120,130) !important; }
.mi-yours{ font-style:normal; font-size:9px; font-weight:800; letter-spacing:1px; color:var(--gold); }
.mi-btns{ display:flex; gap:6px; flex-shrink:0; flex-direction:column; }
.mi-btns .btn{ padding:8px 12px; font-size:12px; display:flex; align-items:center; gap:6px; }
.mi-btns .btn i{ font-style:normal; font-size:11px; font-weight:800; letter-spacing:.6px; }
@media (max-width:560px){
  .mi-flag{ width:36px; height:36px; }
  .mi-btns .btn i{ display:none; }
  .mi-btns{ flex-direction:row; }
}
.mr-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid rgb(28,28,32);
}
.mr-row:last-child{ border-bottom:none; }
.mr-ico{ font-size:15px; width:26px; text-align:center; flex-shrink:0; }
.mr-bar{
  height:4px; background:rgb(28,28,33); border-radius:3px; overflow:hidden;
  margin-top:5px; box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.mr-fill{ display:block; height:100%; width:2%; background:linear-gradient(90deg, rgb(148,108,38), var(--gold)); border-radius:3px; transition:width 1s linear; }
.mr-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.mr-side > b{ color:var(--gold); font-size:13px; }
.map-row-count{ display:block; font-style:normal; font-size:10px; color:var(--txt-dim); margin-top:2px; }
@media (max-width:700px){
  .mi-btns .btn{ padding:6px 9px; }
  .map-family{ gap:8px; font-size:10px; }
}

/* ---- Research Tree ---- */
.cap-of{ font-style:normal; font-size:13px; color:var(--txt-dim); font-weight:700; margin-left:1px; }
.rt-tree{ display:flex; flex-direction:column; align-items:center; gap:0; }
.rt-tier{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.rt-link{ width:2px; height:22px; background:linear-gradient(180deg, rgba(224,180,72,.5), rgba(224,180,72,.15)); }
.rt-node{
  width:150px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:12px 10px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.rt-node b{ font-size:13px; }
.rt-node-sub{ font-size:10px; color:var(--txt-dim); letter-spacing:.3px; }
.rt-node-ico{ position:relative; width:52px; height:52px; }
.rt-node-ico img{ width:52px; height:52px; object-fit:contain; }
.rt-node-lock{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,11,.62); border-radius:8px; font-size:18px;
}
.rt-node-done{ border-color:rgba(224,180,72,.5); background:linear-gradient(180deg, rgba(224,180,72,.08), var(--card)); }
.rt-node-locked{ opacity:.62; }
.rt-node-locked img{ filter:grayscale(1) brightness(.7); }
.rt-node-ready{ border-color:rgba(224,180,72,.35); }
.rt-node-tag{ font-size:9px; font-weight:800; letter-spacing:.8px; color:var(--txt-dim); }
.rt-done-tag{ color:var(--gold); }
.rt-node .btn{ padding:6px 10px; font-size:12px; width:100%; }
.rt-buy{ font-weight:800; }
/* locked unit cards in the Army recruit grid */
.unit-locked{ opacity:.72; }
.unit-locked .market-ico img{ filter:grayscale(.85) brightness(.75); }
.unit-lock-badge{
  position:absolute; top:4px; left:4px; font-size:15px;
  background:rgba(8,8,11,.7); border-radius:6px; padding:1px 4px;
}

/* ---- Unit picker (reinforcements, garrison, HQ station) ---- */
.up-label{ font-size:10px; font-weight:800; letter-spacing:1.4px; color:var(--txt-dim); margin:2px 0 6px; }
.unit-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.up-tile{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:76px; padding:8px 4px 6px;
  background:rgb(24,24,28); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; font-family:inherit; color:var(--txt); transition:border-color .1s ease, background .1s ease;
}
.up-tile img{ width:34px; height:34px; object-fit:contain; }
.up-name{ font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70px; }
.up-free{ font-size:11px; font-weight:800; color:var(--gold); }
.up-free em{ font-style:normal; font-weight:600; color:var(--txt-dim); font-size:9.5px; }
.up-tile:hover{ background:var(--card-h); }
/* selection = the house crimson, carved and quiet — never a gold border (L4) */
.up-tile.active{
  border-color:rgba(196,58,58,.75);
  background:rgb(28,22,24);
  box-shadow:0 0 14px rgba(196,58,58,.22), inset 0 0 0 1px rgba(196,58,58,.28);
}
.up-tile.up-empty{ opacity:.5; }
.up-tile.up-empty .up-free{ color:var(--txt-dim); }

/* ---- Live-version reload overlay ---- */
#update-overlay{
  position:fixed; inset:0; z-index:980;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,11,.92); backdrop-filter:blur(3px);
}
.uo-box{ text-align:center; }
.uo-title{ font-size:15px; font-weight:900; letter-spacing:2px; color:var(--gold); margin-bottom:8px; }
.uo-sub{ font-size:13px; color:var(--txt-dim); }

/* ==================== THE CASINO ==================== */
/* Hero: the hall itself. Full-bleed backdrop under a readability gradient —
   a blurred-dark render, so cover is safe here (not pixel-pinned art). */
.casino-hero{
  position:relative; border-radius:12px; border:1px solid var(--line);
  padding:46px 22px 42px; margin-bottom:12px; text-align:center; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,10,13,.62) 0%, rgba(10,10,13,.35) 45%, rgba(10,10,13,.78) 100%),
    url('/img/casino/bg.jpg') center 38% / cover no-repeat;
  box-shadow:0 18px 40px rgba(0,0,0,.45) inset, 0 2px 14px rgba(0,0,0,.5);
}
.casino-kicker{
  font-size:9.5px; font-weight:800; letter-spacing:2.6px; color:var(--txt-dim);
  text-transform:uppercase; margin-bottom:10px;
}
.casino-title{
  display:inline-block; position:relative;
  font-size:30px; font-weight:900; letter-spacing:9px; color:var(--gold);
  text-shadow:0 0 18px rgba(224,180,72,.35), 0 2px 2px rgba(0,0,0,.8);
  padding:0 18px;
}
.casino-title::before,.casino-title::after{
  content:""; position:absolute; top:50%; width:64px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(224,180,72,.7));
}
.casino-title::before{ right:100%; }
.casino-title::after{ left:100%; transform:scaleX(-1); }
.casino-sub{
  margin-top:10px; font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(238,238,242,.75); text-shadow:0 1px 2px rgba(0,0,0,.9);
}

/* The game floor — one open table, the rest wait for the pit boss */
.casino-floor{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:12px;
}
.game-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 10px 12px; text-align:center; color:var(--txt);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.game-card img{ width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.game-card b{ font-size:12px; font-weight:900; letter-spacing:1.6px; }
.game-card span{ font-size:9px; font-weight:800; letter-spacing:1.2px; color:var(--txt-dim); }
.game-card.game-live{
  cursor:pointer; border-color:rgba(196,58,58,.75);
  background:linear-gradient(180deg, rgba(196,58,58,.10), rgba(20,20,24,1) 62%);
  box-shadow:0 0 16px rgba(196,58,58,.16), inset 0 0 0 1px rgba(196,58,58,.18);
  transition:filter .12s;
}
.game-card.game-live:hover{ filter:brightness(1.12); }
.game-card.game-live span{ color:var(--gold); }
.game-card.game-closed{ opacity:.45; }
.game-card.game-closed img{ filter:grayscale(.9) drop-shadow(0 4px 8px rgba(0,0,0,.55)); }

/* The machine */
.slot-cab{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(196,58,58,.08), transparent 55%),
    linear-gradient(180deg, rgb(24,24,29), rgb(17,17,21));
  border:1px solid var(--line); border-radius:14px; padding:18px 16px 16px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.slot-marquee{
  text-align:center; font-size:13px; font-weight:900; letter-spacing:4px;
  color:var(--gold); text-shadow:0 0 14px rgba(224,180,72,.35);
  margin-bottom:14px; text-transform:uppercase;
}
.slot-marquee span{ color:rgba(224,180,72,.55); font-size:11px; }
.slot-reels{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  max-width:460px; margin:0 auto 14px;
}
/* Carved window (S4 channel recipe): dark well, inner ring, pill glass */
.slot-window{
  position:relative; height:116px; border-radius:12px; overflow:hidden;
  background:rgb(10,10,13);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05);
  border:1px solid rgb(34,34,41);
}
.slot-strip{ will-change:transform; }
.slot-cell{ height:116px; display:flex; align-items:center; justify-content:center; }
.slot-cell img{ width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(0,0,0,.6)); }
.slot-window .slot-shade{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent 26%, transparent 74%, rgba(0,0,0,.55));
}
.slot-window.slot-motion .slot-strip{ filter:blur(1.3px); }
.slot-window.slot-hit{
  border-color:rgba(224,180,72,.0);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05), 0 0 18px rgba(224,180,72,.28);
  animation:slotHit 1.4s ease-out;
}
@keyframes slotHit{
  0%{ transform:scale(1); } 12%{ transform:scale(1.04); } 26%{ transform:scale(.99); } 40%{ transform:scale(1.02); } 60%{ transform:scale(1); }
}
.slot-banner{
  text-align:center; font-size:12.5px; letter-spacing:.6px; color:var(--txt-dim);
  min-height:20px; margin-bottom:12px;
}
.slot-banner b{ color:var(--txt); }
.slot-banner.slot-win{ color:var(--gold); font-weight:800; letter-spacing:1.2px; }
.slot-banner.slot-win b{ color:var(--gold); }
.slot-banner.slot-jackpot{ text-shadow:0 0 14px rgba(224,180,72,.5); }
.slot-banner.slot-push{ color:rgba(238,238,242,.8); }
.slot-banner.slot-loss{ color:rgb(200,110,110); }
.slot-banner.slot-loss b{ color:rgb(200,110,110); }
/* Chips: crimson selection state (S1) — never gold edges */
.slot-chips{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.bet-chip{
  background:rgb(26,26,31); border:1px solid var(--line); color:var(--txt);
  border-radius:999px; padding:10px 16px; font-weight:800; font-size:12.5px;
  letter-spacing:.6px; cursor:pointer; transition:filter .12s;
}
.bet-chip:hover{ filter:brightness(1.15); }
.bet-chip.active{
  border-color:rgba(196,58,58,.75); background:rgb(30,22,23);
  box-shadow:0 0 12px rgba(196,58,58,.22), inset 0 0 0 1px rgba(196,58,58,.35);
}
.bet-chip:disabled{ opacity:.45; cursor:default; }
.slot-pull{
  display:block; width:100%; max-width:460px; margin:0 auto 10px;
  padding:15px 0; font-size:14px; letter-spacing:2.2px; font-weight:900;
  animation:pullBreathe 2.6s ease-in-out infinite;
}
.slot-pull:disabled{ animation:none; filter:saturate(.55) brightness(.8); cursor:default; }
@keyframes pullBreathe{
  0%,100%{ box-shadow:0 0 0 rgba(196,58,58,0); }
  50%{ box-shadow:0 0 18px rgba(196,58,58,.35); }
}
.slot-balance{
  text-align:center; font-size:10.5px; font-weight:800; letter-spacing:1.6px;
  color:var(--txt-dim); text-transform:uppercase;
}
.slot-balance b{ color:var(--gold); font-size:12px; letter-spacing:.8px; }
.slot-rules p{ margin-bottom:0; }
.slot-rules b{ color:var(--txt); }
/* Paytable */
.slot-pays .q-cap{ font-weight:600; }
.pay-row{
  display:flex; align-items:center; gap:12px;
  background:rgb(24,24,29); border:1px solid rgb(32,32,39);
  border-radius:10px; padding:8px 12px; margin-top:8px;
}
.pay-syms{ display:flex; gap:4px; align-items:center; min-width:92px; }
.pay-syms img{ width:26px; height:26px; object-fit:contain; }
.pay-syms.pay-any{ font-size:10px; font-weight:900; letter-spacing:1.4px; color:var(--txt-dim); }
.pay-name{ flex:1; font-size:12.5px; color:var(--txt-dim); }
.pay-mult{ font-size:14px; color:var(--gold); letter-spacing:.6px; }
.pay-row.pay-jackpot{ background:linear-gradient(90deg, rgba(224,180,72,.10), rgb(24,24,29) 55%); }
.pay-row.pay-jackpot .pay-name{ color:var(--gold); font-weight:800; }
.pay-row.pay-push .pay-mult{ color:var(--txt); font-size:12px; }

@media (max-width:560px){
  .casino-floor{ grid-template-columns:repeat(2, 1fr); }
  .casino-title{ font-size:22px; letter-spacing:6px; }
  .slot-window,.slot-cell{ height:88px; }
  .slot-cell img{ width:58px; height:58px; }
  .slot-reels{ gap:8px; }
}

/* ---- THE CAGE (chips wallet + exchange) ---- */
.chip-ico{ object-fit:contain; vertical-align:-3px; }
.chip-ico-sm{ width:18px; height:18px; margin-right:5px; }
.chip-ico-lg{ width:44px; height:44px; }
.cage-tile .q-cap{ font-weight:600; }
.cage-wallet{
  display:flex; align-items:center; gap:12px;
  background:rgb(24,24,29); border:1px solid rgb(32,32,39);
  border-radius:10px; padding:10px 14px; margin-bottom:10px;
}
/* the HEADLINE wallet at the very top of the casino (Rev 21.3 — chips first).
   Own classes on purpose: never share styled classes across surfaces (S7). */
.casw{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:12px 16px; margin-bottom:12px;
}
.casw-label{ font-size:10px; font-weight:800; letter-spacing:2px; color:var(--txt-dim); }
.casw-stack{ display:inline-flex; align-items:center; gap:9px; }
.casw-stack b{ font-size:21px; letter-spacing:.4px; color:var(--gold); }
.casw-stack.casw-red b{ color:rgb(224,110,110); }
.casw-worth{ font-size:11px; color:var(--txt-dim); margin-left:auto; }
@media (max-width:560px){
  .casw{ gap:12px; padding:10px 12px; }
  .casw-stack b{ font-size:17px; }
  .casw-worth{ flex-basis:100%; margin-left:0; }
}
.cage-nums b{ display:block; font-size:16px; color:var(--gold); letter-spacing:.6px; }
.cage-nums span{ font-size:11px; color:var(--txt-dim); }
.cage-form{ display:flex; gap:8px; flex-wrap:wrap; }
.cage-form .bank-input{ flex:1; min-width:140px; }
.bet-chip em{
  display:block; font-style:normal; font-size:9px; font-weight:700;
  letter-spacing:.8px; color:var(--txt-dim); margin-top:2px;
}
.bet-chip.active em{ color:rgba(238,238,242,.75); }

/* paytable v2: premium-pair rows + the honest bottom line */
.pay-blank{ width:26px; height:26px; border-radius:6px; border:1px dashed rgb(44,44,52); }
.pay-row.pay-pair .pay-mult{ font-size:12.5px; }
.pay-row.pay-push .pay-name{ color:rgb(150,150,160); }

/* ---- two-chip cage toggle + gift book + Latest Gambles ---- */
.chip-ico-md{ width:30px; height:30px; }
.cage-kind{ display:flex; gap:8px; margin-bottom:10px; }
.cage-kind-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgb(26,26,31); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:10px 8px; cursor:pointer; transition:filter .12s;
}
.cage-kind-btn:hover{ filter:brightness(1.12); }
.cage-kind-btn b{ font-size:11.5px; letter-spacing:1.4px; }
.cage-kind-btn em{ font-style:normal; font-size:10px; color:var(--txt-dim); }
.cage-kind-btn.active{
  border-color:rgba(196,58,58,.75); background:rgb(30,22,23);
  box-shadow:0 0 12px rgba(196,58,58,.22), inset 0 0 0 1px rgba(196,58,58,.35);
}
.gift-book{ display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; }
.gift-friend{
  display:flex; align-items:center; gap:10px;
  background:rgb(24,24,29); border:1px solid rgb(32,32,39); border-radius:10px;
  padding:8px 12px; color:var(--txt); cursor:pointer; text-align:left; transition:filter .12s;
}
.gift-friend:hover{ filter:brightness(1.15); }
.gift-friend img{ width:34px; height:34px; border-radius:8px; }
.gift-friend b{ flex:1; font-size:13.5px; }
.gift-friend span{ font-size:9px; font-weight:800; letter-spacing:1px; }
/* the ticker */
.gamble-tile .q-cap{ font-weight:600; }
.gamble-row{
  display:flex; align-items:center; gap:10px;
  background:rgb(24,24,29); border:1px solid rgb(32,32,39);
  border-radius:10px; padding:7px 10px; margin-top:8px;
}
.gamble-pfp{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line); }
.gamble-who{
  background:none; border:none; color:var(--txt); cursor:pointer;
  text-align:left; padding:0; min-width:92px;
}
.gamble-who b{ display:block; font-size:12.5px; }
.gamble-who span{ font-size:9.5px; color:var(--txt-dim); letter-spacing:.6px; }
.gamble-who:hover b{ text-decoration:underline; }
.gamble-mid{ flex:1; display:flex; flex-direction:column; gap:2px; font-size:11.5px; }
.gamble-stake{ font-size:10px; color:var(--txt-dim); letter-spacing:.4px; }
.gamble-take{ font-size:12px; font-weight:800; letter-spacing:.4px; white-space:nowrap; }
.gr-win{ color:var(--gold); }
.gr-loss{ color:rgb(150,150,160); font-weight:600; }
@media (max-width:560px){
  .gamble-who{ min-width:70px; }
  .gamble-mid{ font-size:10.5px; }
}

/* THE TEASE — two matching reels lock in, the third rides long under a pulse */
.slot-window.slot-tease{
  animation:slotTease .55s ease-in-out infinite alternate;
}
@keyframes slotTease{
  from{ box-shadow:inset 0 3px 10px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05), 0 0 6px rgba(224,180,72,.12); }
  to{   box-shadow:inset 0 3px 10px rgba(0,0,0,.85), inset 0 0 0 1px rgba(224,180,72,.28), 0 0 22px rgba(224,180,72,.4); }
}

/* ---- STATE OF WAR strip + the rally drum (crimson, L4-clean) ---- */
.war-strip{
  background:linear-gradient(180deg, rgba(196,58,58,.14), rgba(20,20,24,.9) 70%);
  border:1px solid rgba(196,58,58,.55); border-radius:12px;
  padding:12px 14px; margin-bottom:12px;
  box-shadow:0 0 18px rgba(196,58,58,.12);
}
.war-strip-title{ font-size:11px; font-weight:900; letter-spacing:2.4px; color:rgb(224,110,110); margin-bottom:8px; }
.war-strip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.war-enemy{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:rgb(24,20,21); border:1px solid rgba(196,58,58,.45); border-radius:999px;
  padding:6px 12px; color:var(--txt); transition:filter .12s;
}
.war-enemy:hover{ filter:brightness(1.15); }
.war-enemy img{ width:20px; height:20px; border-radius:4px; }
.war-enemy b{ font-size:12.5px; }
.war-enemy span{ font-size:8.5px; font-weight:900; letter-spacing:1.4px; color:rgb(224,110,110); }
.rally-box{ margin-top:10px; background:rgb(22,19,20); border:1px solid rgba(196,58,58,.35); border-radius:10px; padding:10px 12px; }
.rally-head{ font-size:12px; font-weight:800; letter-spacing:1px; color:var(--txt); }
.rally-head b{ color:rgb(224,110,110); }
.rally-note{ font-size:11.5px; color:var(--txt-dim); margin-top:4px; font-style:italic; }
.rally-row{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.rally-eta{ font-size:10px; font-weight:800; letter-spacing:1.2px; color:var(--txt-dim); flex:1; }
.rally-join{ animation:pullBreathe 2.6s ease-in-out infinite; }

/* ---- Relations tab ---- */
.rel-row{
  display:flex; align-items:center; gap:10px;
  background:rgb(24,24,29); border:1px solid rgb(32,32,39); border-radius:10px;
  padding:8px 10px; margin-top:8px; cursor:pointer;
}
.rel-row:first-child{ margin-top:0; }
.rel-gf{ width:28px; height:28px; border-radius:6px; border:1px solid var(--line); }
.rel-mine{ font-size:8.5px; font-weight:900; letter-spacing:1.2px; color:var(--gold); }
.rel-status-war{ color:rgb(224,110,110); font-weight:800; letter-spacing:1px; font-size:10px; }
.rel-status-ally{ color:var(--gold); font-weight:800; letter-spacing:1px; font-size:10px; }
.rel-war-row{ border-color:rgba(196,58,58,.45); }
.rel-acts{ display:flex; gap:6px; flex-wrap:wrap; }
.rel-acts .btn{ padding:7px 10px; font-size:11px; }
.rel-con-ico{ font-size:20px; width:32px; text-align:center; }
.rel-rally-note{ border-color:rgba(196,58,58,.45); font-size:12.5px; }
@media (max-width:560px){ .rel-acts .btn{ padding:6px 8px; font-size:10px; } }

/* ---- shared battle report card in chat ---- */
.chat-battle{
  margin-top:6px; border-radius:10px; padding:8px 12px;
  background:rgb(23,23,28); border:1px solid rgb(34,34,41);
  border-left:3px solid var(--line);
}
.chat-battle.cb-win{ border-left-color:rgba(224,180,72,.7); }
.chat-battle.cb-loss{ border-left-color:rgba(196,58,58,.7); }
.cb-verdict{ font-size:9.5px; font-weight:900; letter-spacing:2px; }
.cb-win .cb-verdict{ color:var(--gold); }
.cb-loss .cb-verdict{ color:rgb(224,110,110); }
.cb-place{ font-size:12.5px; font-weight:800; margin-top:2px; }
.cb-sides{ font-size:11px; color:var(--txt-dim); margin-top:1px; }
.cb-stats{ font-size:10px; color:var(--txt-dim); margin-top:4px; letter-spacing:.3px; }

/* ---- kills ranking sub-line + slots payline ---- */
.rank-kills-sub{ display:block; font-size:9px; color:var(--txt-dim); letter-spacing:.4px; font-weight:600; }
.slot-reels{ position:relative; }
.slot-reels::after{
  content:""; position:absolute; left:-4px; right:-4px; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(224,180,72,.28) 12%, rgba(224,180,72,.28) 88%, transparent);
  pointer-events:none; z-index:3;
}

/* ---- weapon tile picker (contracts, ally shipments) — icons, never dropdowns ---- */
.wep-label{
  font-size:9.5px; font-weight:800; letter-spacing:1.8px; color:var(--txt-dim);
  margin:10px 0 8px; text-transform:uppercase;
}
.wep-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  max-height:264px; overflow-y:auto; margin-bottom:10px;
}
.wep-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:rgb(24,24,29); border:1px solid rgb(34,34,41); border-radius:10px;
  padding:10px 6px 8px; color:var(--txt); cursor:pointer; transition:filter .12s;
}
.wep-tile:hover{ filter:brightness(1.15); }
.wep-tile img{ width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.wep-tile b{ font-size:10.5px; text-align:center; line-height:1.2; }
.wep-tile span{ font-size:9px; color:var(--txt-dim); }
.wep-tile.active{
  border-color:rgba(196,58,58,.75); background:rgb(30,22,23);
  box-shadow:0 0 12px rgba(196,58,58,.22), inset 0 0 0 1px rgba(196,58,58,.35);
}
.wep-count{
  position:absolute; top:4px; right:5px;
  font-size:8.5px; font-weight:900; color:var(--gold);
  background:rgba(0,0,0,.55); border-radius:999px; padding:1px 5px;
}
.wep-sum{
  font-size:11.5px; color:var(--txt-dim); text-align:center;
  background:rgb(24,24,29); border:1px solid rgb(32,32,39); border-radius:8px;
  padding:8px 10px; margin-bottom:4px;
}
.wep-sum b{ color:var(--gold); }

/* ==================== HOME v2 — full-bleed scene + civil ID card ==================== */
/* /img/home-bg.jpg is a DROP-IN SLOT: swap the file, zero rewiring. */
.home-full{
  margin:-18px;                       /* swallow #content padding — the scene owns the tab */
  min-height:calc(100% + 36px);       /* fill the tab EXACTLY — the card centers, no scroll */
  padding:30px 22px;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
  background:
    linear-gradient(180deg, rgba(8,8,11,.78) 0%, rgba(8,8,11,.30) 38%, rgba(8,8,11,.66) 78%, rgba(8,8,11,.88) 100%),
    url("/img/home-bg.jpg") center 32% / cover no-repeat rgb(8,8,10);
}
.cc-synd-ico{ width:17px; height:17px; }
/* THE CIVIL ID — laminated card on the table */
.civil-card{
  position:relative; overflow:hidden;
  width:100%; max-width:660px; margin:0 auto;
  background:linear-gradient(155deg, rgb(31,31,37) 0%, rgb(24,24,29) 55%, rgb(20,20,25) 100%);
  border:1px solid rgb(48,48,56); border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.civil-card::after{ /* registry watermark pressed into the laminate */
  content:"BAS"; position:absolute; right:-8px; top:34px;
  font-size:110px; font-weight:900; letter-spacing:8px;
  color:rgba(238,238,242,.028); pointer-events:none; line-height:1;
}
.cc-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px;
  background:rgba(10,10,14,.55);
  border-bottom:1px solid rgba(224,180,72,.28);
}
.cc-head span{ font-size:8.5px; font-weight:800; letter-spacing:2.2px; color:var(--txt-dim); }
.cc-head b{ font-size:10.5px; font-weight:900; letter-spacing:2.6px; color:var(--gold); }
.cc-head .cc-no{ color:var(--txt); letter-spacing:1.6px; }
.cc-body{ display:flex; gap:18px; padding:16px; }
.cc-photo-col{ display:flex; flex-direction:column; gap:10px; align-items:center; flex-shrink:0; }
.cc-photo{
  position:relative; width:104px; height:104px; padding:5px;
  background:rgb(16,16,20); border:1px solid rgb(48,48,56); border-radius:10px;
  cursor:pointer; transition:filter .12s;
}
.cc-photo:hover{ filter:brightness(1.15); }
.cc-photo img{ width:100%; height:100%; border-radius:7px; object-fit:cover; }
.cc-edit{
  position:absolute; left:5px; right:5px; bottom:5px;
  font-size:8px; font-weight:900; letter-spacing:2px; color:var(--txt);
  background:rgba(10,10,14,.72); border-radius:0 0 7px 7px; padding:3px 0; text-align:center;
}
.cc-field{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cc-field span{ font-size:8px; font-weight:800; letter-spacing:1.8px; color:var(--txt-dim); }
.cc-field b{ font-size:13.5px; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-opid b{ color:var(--gold); font-size:14px; letter-spacing:.8px; }
.cc-opid{ align-items:center; text-align:center; }
.cc-fields{ flex:1; display:flex; flex-direction:column; gap:12px; min-width:0; }
.cc-name b{ font-size:19px; letter-spacing:.4px; }
.cc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px 16px; }
.cc-wide{ grid-column:1 / -1; }
.cc-cash{ color:var(--gold); }
.cc-ico{ width:15px; height:15px; }
.cc-flag{ width:20px; height:14px; object-fit:cover; border-radius:2px; }
.cc-mrz{
  padding:8px 16px 9px;
  border-top:1px dashed rgb(44,44,52);
  font-family:"Consolas","Courier New",monospace;
  font-size:11px; letter-spacing:3px; color:rgba(238,238,242,.34);
  white-space:nowrap; overflow:hidden;
}
@media (max-width:560px){
  .home-full{ padding:26px 12px 20px; }
  .home-title{ font-size:23px; letter-spacing:4px; }
  .cc-body{ flex-direction:column; align-items:center; gap:12px; }
  .cc-fields{ width:100%; }
  .cc-name{ text-align:center; align-items:center; }
  .cc-grid{ grid-template-columns:1fr; }
  .civil-card::after{ font-size:70px; }
}

/* ---- THE MUSTER (rally v2): who committed what, in soldiers not words ---- */
.muster-board{
  margin-top:10px; background:rgb(18,15,16); border:1px solid rgba(196,58,58,.25);
  border-radius:10px; padding:8px 10px;
}
.muster-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 2px; border-bottom:1px solid rgba(196,58,58,.12);
}
.muster-row:last-child{ border-bottom:none; }
.muster-row > b{ font-size:12px; min-width:110px; }
.muster-units{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; }
.muster-unit{
  display:inline-flex; align-items:center; gap:4px;
  background:rgb(26,22,23); border:1px solid rgb(40,34,36); border-radius:999px;
  padding:3px 9px 3px 4px; font-size:11.5px; font-weight:800;
}
.muster-unit img{ width:22px; height:22px; object-fit:contain; }
.muster-none{ font-size:11px; color:var(--txt-dim); margin:0; }
.muster-total{ border-top:1px solid rgba(196,58,58,.3); margin-top:2px; padding-top:8px; }
.muster-total > b{ color:rgb(224,110,110); letter-spacing:.6px; font-size:11px; }
.rally-eta{ font-size:11px; font-weight:900; letter-spacing:1.2px; color:rgb(224,110,110); }

/* profile: the syndicate cell is a door, not a label */
.pp-synd-link{
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  background:rgb(24,24,28); border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  color:var(--txt); font-family:inherit; transition:filter .12s;
}
.pp-synd-link:hover{ filter:brightness(1.2); }
.pp-synd-link span{ font-size:10.5px; font-weight:800; letter-spacing:1px; color:var(--txt-dim); }
.pp-synd-link b{ display:flex; align-items:center; gap:6px; font-size:13px; }
.pp-synd-link i{ font-style:normal; color:var(--txt-dim); margin-left:auto; }
.pp-synd-flag{ width:20px; height:20px; border-radius:4px; object-fit:cover; }

/* share section v2 — its own carved footer, no collisions */
.br-share{
  margin-top:14px; padding-top:12px;
  border-top:1px dashed rgb(44,44,52);
}
.br-share-label{
  font-size:8.5px; font-weight:800; letter-spacing:2.2px; color:var(--txt-dim);
  margin-bottom:8px; text-align:center;
}
.br-share-btns{ display:flex; gap:8px; }
.br-share-btns .btn{ flex:1; padding:10px 0; font-size:12px; }
/* shared battle cards open like real reports */
.chat-battle.cb-click{ cursor:pointer; transition:filter .12s, border-color .12s; }
.chat-battle.cb-click:hover{ filter:brightness(1.18); }
.cb-open{
  margin-top:6px; font-size:8.5px; font-weight:900; letter-spacing:1.8px;
  color:var(--txt-dim);
}
.cb-click:hover .cb-open{ color:var(--gold); }

/* ---- REEL DRUMS v2: seamless loop phase + clunk-stop phase ---- */
/* border-box made the window CONTENT 2px shorter than the cells — +2px
   heights below keep content exactly one cell tall (JS measures cells too) */
.slot-window{ height:118px; }
.slot-cell{ height:116px; }
@keyframes slotLoop{
  from{ transform:translateY(0); }
  to{ transform:translateY(calc(var(--loop, 696) * -1px)); }
}
.slot-strip.spin-loop{
  animation:slotLoop var(--loopMs, 480ms) linear infinite;
  will-change:transform;
}
@media (max-width:560px){
  .slot-window, .slot-window.slot-tease{ height:90px; }
  .slot-cell{ height:88px; }
}

/* ---- name-your-stake row + the on-the-line readout ---- */
.slot-custom{ max-width:460px; margin:0 auto 10px; }
.slot-custom .wep-label{ text-align:center; margin-top:2px; }
.slot-custom-row{ display:flex; gap:8px; align-items:stretch; }
.slot-bet-kind{ flex:1.4; margin-bottom:0; }
.slot-bet-kind .cage-kind-btn{ padding:8px 6px; }
.slot-custom-row .bank-input{ flex:1; min-width:90px; }
.slot-custom-row .btn{ padding:10px 12px; font-size:12px; white-space:nowrap; }
.slot-stake{
  text-align:center; font-size:10.5px; font-weight:800; letter-spacing:1.6px;
  color:var(--txt-dim); text-transform:uppercase; margin-bottom:10px;
}
.slot-stake b{ color:var(--txt); letter-spacing:.6px; }
.slot-stake em{ font-style:normal; color:var(--gold); }
@media (max-width:560px){
  .slot-custom-row{ flex-wrap:wrap; }
  .slot-bet-kind{ flex-basis:100%; }
}

/* LOCKED-IN LAW: text controls never get flex-squeezed below their content.
   The stake row now wraps — toggle owns line one, input breathes on line two. */
.slot-custom-row{ flex-wrap:wrap; }
.slot-custom-row .slot-bet-kind{ flex:1 1 100%; }
.slot-custom-row .bank-input{ flex:1 1 auto; min-width:150px; }
.slot-custom-row .btn{ flex:0 0 auto; padding:10px 16px; }

/* the exchange row — buttons carry chip art, input keeps its room (text-clip law) */
.cage-exch{ flex-wrap:wrap; }
.cage-exch .bank-input{ flex:1 1 100%; min-width:150px; }
.cage-exch .btn{ flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; }

/* the exchange, spelled out — two labeled convert cards */
.cage-exch-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.exch-btn{
  flex:1 1 240px; display:grid;
  grid-template-columns:auto auto auto 1fr; grid-template-rows:auto auto;
  align-items:center; column-gap:6px; row-gap:1px;
  padding:10px 14px; text-align:left;
}
.exch-btn img{ grid-row:1 / span 2; }
.exch-arrow{ grid-row:1 / span 2; color:var(--txt-dim); font-size:12px; }
.exch-btn b{ grid-column:4; font-size:12.5px; letter-spacing:.4px; }
.exch-btn em{ grid-column:4; font-style:normal; font-size:10px; color:var(--txt-dim); }

/* wallet as CURRENCY: chip icon + count pairs, like the HUD money */
.cage-wallet{ flex-wrap:wrap; row-gap:4px; }
.cage-stacks{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cage-stack{ display:inline-flex; align-items:center; gap:9px; }
.cage-stack b{ font-size:19px; letter-spacing:.4px; color:var(--gold); }
.cage-stack:last-child b{ color:rgb(224,110,110); }
.cage-wallet .cage-nums{ flex-basis:100%; }
.cage-wallet .cage-nums span{ font-size:11px; color:var(--txt-dim); }

/* battle report breathing room — blocks never touch */
.br-result{ margin-bottom:10px; }
.br-head{ margin-bottom:12px; }
.br-powers{ margin-bottom:6px; }
.br-luck{ margin:6px 0 12px; }
.br-side{ margin-top:12px; }
.br-side + .br-note, .br-note.br-gear{ margin:10px 2px; }
.br-note{ margin-top:10px; line-height:1.5; }
.br-share{ margin-top:16px; }

/* ---- WORLDS (Rev 23): login selector + the Worlds tab ---- */
/* Login-screen world selection — defaults to World 1. Selection is CRIMSON
   (S1 law): red border + darkened fill + soft glow + hairline inset ring.
   Gold stays text-only. */
#auth-worlds{ margin:2px 0 10px; }
#auth-worlds-label{
  font-size:10px; letter-spacing:2.6px; color:var(--txt-dim);
  margin:0 2px 6px; text-align:left;
}
#auth-worlds-row{ display:flex; gap:8px; flex-wrap:wrap; }
.aw-btn{
  flex:1; min-width:110px; padding:10px 12px; cursor:pointer;
  background:rgb(22,22,26); color:var(--txt);
  border:1px solid rgb(52,52,60); border-radius:10px;
  font-size:13px; letter-spacing:.6px; white-space:nowrap;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.aw-btn:hover{ border-color:rgba(196,58,58,.45); }
.aw-btn.active{
  border-color:rgba(196,58,58,.75);
  background:rgb(28,22,24);
  box-shadow:0 0 14px rgba(196,58,58,.22), inset 0 0 0 1px rgba(196,58,58,.28);
}

/* The Worlds tab — one card per open world. Current world wears the crimson
   selection state; names are gold TEXT (never gold borders, L4). */
#worlds-list{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.world-card{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border-radius:12px;
  background:rgb(22,22,26); border:1px solid rgb(48,48,56);
}
.world-card.here{
  border-color:rgba(196,58,58,.75);
  background:rgb(28,22,24);
  box-shadow:0 0 14px rgba(196,58,58,.22), inset 0 0 0 1px rgba(196,58,58,.28);
}
.world-card .wc-ico{ width:40px; height:40px; flex:0 0 auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.world-card .wc-body{ flex:1; min-width:150px; }
.world-card .wc-name{ font-size:16px; letter-spacing:.6px; color:var(--gold); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.world-card .wc-orig{
  font-size:9px; letter-spacing:2px; color:var(--txt-dim);
  border:1px solid rgba(224,180,72,.28); border-radius:999px; padding:2px 8px;
}
.world-card .wc-sub{ font-size:12px; color:var(--txt-dim); margin-top:3px; line-height:1.45; }
.world-card .wc-here{
  font-size:10px; letter-spacing:2.2px; color:rgb(224,110,110); white-space:nowrap;
}
.world-card .wc-enter{ flex:0 0 auto; white-space:nowrap; }

/* ---- WORLD CONTROL + WORLD RESET (Rev 24) ---- */
/* The reset countdown banner — crimson, pulsing, impossible to miss.
   z 510: above the announce layer (500), below every modal (700). */
#world-reset-banner{
  position:fixed; top:56px; left:50%; transform:translateX(-50%);
  z-index:510; padding:10px 22px; border-radius:10px;
  background:linear-gradient(180deg, rgb(48,14,16), rgb(26,8,10));
  border:1px solid rgba(196,58,58,.8);
  box-shadow:0 6px 26px rgba(0,0,0,.6), 0 0 18px rgba(196,58,58,.35);
  color:rgb(240,120,120); font-size:13px; letter-spacing:2.4px;
  white-space:nowrap; max-width:94vw; overflow:hidden; text-overflow:ellipsis;
  animation:wr-pulse 1s ease-in-out infinite;
}
@keyframes wr-pulse{
  0%,100%{ box-shadow:0 6px 26px rgba(0,0,0,.6), 0 0 12px rgba(196,58,58,.25); }
  50%{ box-shadow:0 6px 26px rgba(0,0,0,.6), 0 0 26px rgba(196,58,58,.5); }
}
/* Worlds-tab card chip while its reset counts down */
.wc-resetchip{
  font-size:9.5px; letter-spacing:1.8px; color:rgb(240,120,120);
  border:1px solid rgba(196,58,58,.55); border-radius:999px; padding:2px 9px;
  animation:wr-pulse 1s ease-in-out infinite;
}
.wc-resetchip b{ color:rgb(240,140,140); }
/* Console World Control rows — status is TEXT color, never a border (L4) */
.cw-row{ flex-wrap:wrap; row-gap:6px; }
.cw-row .con-info b{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cw-live{ font-size:9.5px; letter-spacing:2px; color:var(--gold); }
.cw-off{ font-size:9.5px; letter-spacing:2px; color:var(--txt-dim); }
.cw-armed{
  font-size:9.5px; letter-spacing:2px; color:rgb(240,120,120);
  animation:wr-pulse 1s ease-in-out infinite; border-radius:999px;
}
.cw-anchor{ font-size:9.5px; letter-spacing:2px; color:var(--txt-dim); white-space:nowrap; }
.cw-row .btn{ white-space:nowrap; flex:0 0 auto; }
.cw-warn{
  color:rgb(240,130,130); font-size:12.5px; line-height:1.55;
  margin:0 0 10px; letter-spacing:.3px;
}

/* ---- CREDENTIALS + RECOVER ACCESS (Rev 25) ---- */
/* The dossier credential line — the password is a row of dots, never a value.
   Gold is text only (L4); the "encrypted" tag is a faint gold-alpha chip. */
.cred-block{ margin-top:4px; }
.cred-pw{ display:flex; align-items:center; gap:10px; margin:6px 0 4px; flex-wrap:wrap; }
.cred-dots{ letter-spacing:3px; color:var(--txt-dim); font-size:15px; user-select:none; }
.cred-lock{
  font-size:9px; letter-spacing:1.6px; color:var(--gold);
  border:1px solid rgba(224,180,72,.28); border-radius:999px; padding:2px 8px; white-space:nowrap;
}
.cred-recover{ margin-top:8px; }
.cred-warn{
  color:rgb(224,180,72); font-size:12px; line-height:1.55;
  margin:0 0 10px; letter-spacing:.2px;
}
/* The one-time reveal — big, monospace, unmistakable, on a carved dark panel */
.cred-done{ text-align:center; }
.cred-done-h{ font-size:10px; letter-spacing:2.4px; color:var(--txt-dim); margin-bottom:10px; }
.cred-done-pw{
  font-family:"SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size:24px; letter-spacing:2px; color:var(--gold);
  background:rgb(18,18,22); border:1px solid rgb(52,52,60); border-radius:10px;
  padding:14px 16px; margin:0 0 12px; word-break:break-all;
  box-shadow:inset 0 0 0 1px rgba(224,180,72,.14);
  user-select:all;
}

/* ---- BARRACKS EQUIP v2 (Rev 26): the armed-ratio meter row ---- */
/* The old row let `.eq-info span{display:block}` stretch the stat badge into
   a giant hollow bar — every new inline bit below explicitly overrides that
   base rule (it must stay for the transit/legacy .eq-row users). */
.eq-info .eq-name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.eq-info .eq-name b{ font-size:13px; }
.eq-info .eq-name .stat-badge{ display:inline-flex; align-items:center; width:auto; margin-top:0; flex:0 0 auto; }
.eq-info .eq-name .eq-each{
  font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.3px;
  color:rgb(235,120,120); white-space:nowrap;
}
/* the meter: carved channel + fill (S4 recipe). Crimson while partial,
   GOLD when every soldier is armed — "full" reads at a glance. */
.eq-info .eq-meter{
  position:relative; height:16px; margin-top:7px; border-radius:999px;
  background:rgb(15,15,18);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.045);
  overflow:hidden;
}
.eq-info .eq-meter-fill{
  position:absolute; top:0; left:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgb(110,34,36), rgb(196,58,58));
  transition:width .35s ease;
}
.eq-info .eq-meter.full .eq-meter-fill{
  background:linear-gradient(90deg, rgb(150,104,30), rgb(224,180,72));
}
.eq-info .eq-meter-txt{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  margin-top:0; font-size:9px; font-weight:800; letter-spacing:1.8px;
  color:rgb(242,228,208); text-shadow:0 1px 2px rgba(0,0,0,.85);
}
.eq-info .eq-counts{ display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.eq-info .eq-chip{
  display:inline-flex; align-items:center; gap:5px; margin-top:0; width:auto;
  font-size:9.5px; font-weight:700; letter-spacing:1.2px; color:var(--txt);
  background:rgb(26,26,31); border:1px solid rgb(50,50,58);
  border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.eq-info .eq-chip b{ color:var(--gold); font-size:11px; }
.eq-info .eq-chip.dim{ color:var(--txt-dim); }
.eq-info .eq-chip.dim b{ color:var(--txt); }
.eq-info .eq-add-now{
  display:inline; margin-top:0; width:auto;
  font-size:10.5px; font-weight:800; letter-spacing:.3px; color:rgb(235,120,120); white-space:nowrap;
}
.eq-info .eq-hint{ display:inline; margin-top:0; width:auto; font-size:10.5px; color:var(--txt-dim); }
/* category dividers inside a squad tile */
.eq-cat{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:9.5px; font-weight:800; letter-spacing:2.2px; color:var(--txt-dim);
  margin:12px 2px 7px; flex-wrap:wrap;
}
.eq-cat b{ color:var(--txt); letter-spacing:1px; font-size:10px; }
.eq-cat b.eq-cat-full{ color:var(--gold); }
.eq-cat em{ font-style:normal; font-size:9.5px; letter-spacing:.8px; }
/* squad header chips: dim = none armed, white = some, gold = everyone */
.brk-chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
.brk-chip{
  font-size:9.5px; font-weight:700; letter-spacing:1.1px; color:var(--txt-dim);
  border:1px solid rgb(50,50,58); border-radius:999px; padding:2px 9px; white-space:nowrap;
}
.brk-chip.some{ color:var(--txt); }
.brk-chip.full{ color:var(--gold); border-color:rgba(224,180,72,.3); }
.brk-note{ font-size:9.5px; color:var(--txt-dim); letter-spacing:.6px; }
.brk-power em{ display:block; font-style:normal; font-size:9px; color:var(--txt-dim); margin-top:2px; white-space:nowrap; }
/* phones: the meter row keeps full width, buttons drop to their own line */
@media (max-width:560px){
  .eq-row{ flex-wrap:wrap; }
  .eq-row .eq-info{ flex:1 1 calc(100% - 50px); }
  .eq-row .eq-btns{ margin-left:auto; }
}

/* ---- HOW YOUR ARMY WORKS (Rev 27; hero card Rev 28.1) ----
   S3 hero recipe: left-dark gradient OVER the war-room art, art right-pinned
   at NATIVE scale (S2 — never cover). /img/army-guide.jpg is a drop-in slot. */
.army-guide{
  background-image:
    linear-gradient(90deg, rgba(14,14,17,.97) 0%, rgba(14,14,17,.92) 52%, rgba(14,14,17,.42) 100%),
    url('/img/army-guide.jpg');
  background-repeat:no-repeat, no-repeat;
  background-position:left center, right center;
  background-size:auto, 1100px auto;
}
.army-guide h3{ margin-bottom:8px; }
.army-guide .ag-row{
  display:flex; align-items:flex-start; gap:10px;
  max-width:660px; /* the copy owns the dark left; the boss owns the right */
  font-size:12px; line-height:1.55; color:var(--txt-dim);
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.army-guide .ag-row:last-child{ border-bottom:none; padding-bottom:0; }
.army-guide .ag-row b{ color:var(--txt); }
/* phones: a 375px column can't afford the scene — clean text card only */
@media (max-width:560px){
  .army-guide{ background-image:linear-gradient(90deg, rgba(14,14,17,.97), rgba(14,14,17,.94)); }
  .army-guide .ag-row{ max-width:none; }
}

/* ---- THE FAMILY'S DISCORD (Rev 28.2) ---- */
/* Login gate: pinned bottom-RIGHT, mirroring the Support button on the left */
#auth-discord-btn{
  position:fixed; right:16px; bottom:16px; z-index:5;
  display:flex; align-items:center; gap:8px;
  background:rgba(20,20,24,.82); color:var(--txt);
  border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background .15s, border-color .15s;
}
#auth-discord-btn:hover{ background:var(--card-h); border-color:rgba(196,58,58,.45); }
#auth-discord-btn img{ width:22px; height:22px; border-radius:5px; }
/* Home: the invitation card under the civil ID — same laminate language */
.home-discord{
  display:flex; align-items:center; gap:14px;
  max-width:660px; width:100%; margin:14px auto 0; /* Rev 31.1: centered under the ID card */
  background:linear-gradient(180deg, rgb(24,24,29), rgb(18,18,22));
  border:1px solid rgb(52,52,60); border-radius:12px;
  padding:12px 16px; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:border-color .15s, transform .15s;
}
.home-discord:hover{ border-color:rgba(196,58,58,.55); transform:translateY(-1px); }
.home-discord img{ width:40px; height:40px; border-radius:9px; flex:0 0 auto; }
.home-discord .hd-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.home-discord .hd-body b{ color:var(--txt); font-size:13px; letter-spacing:1.6px; }
.home-discord .hd-body em{ font-style:normal; font-size:11px; color:var(--txt-dim); line-height:1.4; }
.home-discord .hd-go{
  flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:1.6px;
  color:var(--gold); white-space:nowrap;
}
/* Settings: the .btn class on an anchor needs its inline-flex manners */
a.discord-btn{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; white-space:nowrap;
}
a.discord-btn img{ width:20px; height:20px; border-radius:5px; }

/* ---- SEO pitch line on the gates (Rev 28.3) — real crawlable copy ---- */
#auth-pitch{
  max-width:520px; margin:10px auto 0;
  font-size:11.5px; line-height:1.6; color:var(--txt-dim);
  letter-spacing:.3px;
}

/* ---- THE STORE RAIL BUTTON BURNS (Rev 28.5) ----
   The rail is persistent chrome — this is the hero card's QUIET cousin:
   a slow ember breathe + a rare sheen pass, keyed on [data-tab="store"] so
   it survives every rail rebuild and every re-sort. Glow, never a border. */
.rail-btn[data-tab="store"]{
  overflow:hidden; /* the dot is a flex child — nothing to clip */
  /* LAW (found live): overflow:hidden on a FLEX CHILD zeroes its automatic
     minimum size — in the overflowing rail column this button became the one
     item allowed to crush below its content (32px vs its siblings' 60).
     flex-shrink:0 restores full size no matter how full the rail gets. */
  flex-shrink:0;
  background:
    radial-gradient(120% 100% at 50% 150%, rgba(216,106,38,.13), transparent 62%),
    linear-gradient(160deg, rgb(30,28,33), rgb(21,20,24));
  animation:store-tab-fire 4.2s ease-in-out infinite;
}
@keyframes store-tab-fire{
  0%,100%{ box-shadow:0 0 9px rgba(224,180,72,.12), 0 0 20px rgba(222,120,46,.06); }
  28%    { box-shadow:0 0 12px rgba(224,180,72,.24), 0 0 26px rgba(222,120,46,.11); }
  47%    { box-shadow:0 0 10px rgba(224,180,72,.15), 0 0 22px rgba(222,120,46,.07); }
  71%    { box-shadow:0 0 14px rgba(224,180,72,.28), 0 0 30px rgba(222,120,46,.13); }
}
.rail-btn[data-tab="store"]::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-24%; width:26%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,224,150,.05) 40%, rgba(255,230,160,.13) 50%, rgba(255,224,150,.05) 60%, transparent 100%);
  transform:rotate(14deg) translateX(-180%);
  animation:store-tab-sheen 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes store-tab-sheen{
  0%,68%{ transform:rotate(14deg) translateX(-180%); }
  84%,100%{ transform:rotate(14deg) translateX(560%); }
}
.rail-btn[data-tab="store"]:hover{
  background:
    radial-gradient(120% 100% at 50% 140%, rgba(216,106,38,.20), transparent 65%),
    linear-gradient(160deg, rgb(31,28,32), rgb(22,20,24));
  box-shadow:0 0 14px rgba(224,180,72,.30), 0 0 32px rgba(222,120,46,.14);
}
.rail-btn[data-tab="store"] .r-ico-pic{
  filter:drop-shadow(0 0 8px rgba(224,150,60,.35));
  transition:transform .18s ease;
}
.rail-btn[data-tab="store"]:hover .r-ico-pic{ transform:scale(1.12); }
@media (prefers-reduced-motion: reduce){
  .rail-btn[data-tab="store"], .rail-btn[data-tab="store"]::after{ animation:none; }
  .rail-btn[data-tab="store"]{ box-shadow:0 0 10px rgba(224,180,72,.16), 0 0 22px rgba(222,120,46,.07); }
}

/* ---- REV 30: PRESTIGE — the gilded name + the velvet room ---- */
/* Gilded names: STATIC gold text only (L4 — no animation, no card borders).
   One class per surface — the Rev 16 collision law: never reuse a styled
   class across chat / ticker / rankings / profile. */
.chat-name.chat-gild{ color:var(--gold); }
.gw-gild{ color:var(--gold); }
.rk-gild{ color:var(--gold); }
.pp-gild{ color:var(--gold); }

/* The Velvet Room floor card: a MEMBER door, not a closed table — full color,
   deep velvet fill, gold text; the glow is gold, the border stays house line */
.game-card.game-velvet{
  cursor:pointer; font:inherit;
  background:linear-gradient(180deg, rgba(224,180,72,.07), rgb(26,22,30) 62%);
  box-shadow:0 0 14px rgba(224,180,72,.10);
  transition:filter .12s;
}
.game-card.game-velvet:hover{ filter:brightness(1.12); }
/* owned: the door knows you — a warmer OUTER glow only. The VIP-hero ruling
   (Rev 30.1): glows and fills, never a gold edge ring on an interactive tile */
.game-card.game-velvet.velvet-open{
  box-shadow:0 0 22px rgba(224,180,72,.22);
}
.game-card.game-velvet b{ color:var(--gold); }
.game-card.game-velvet span{ color:rgba(224,180,72,.62); }
.game-card.game-velvet img{ filter:drop-shadow(0 4px 10px rgba(224,180,72,.18)); }

/* Velvet stakes on the chip rail: plum felt, gold count — selection stays
   CRIMSON (S1), re-asserted so the velvet fill never eats the active state */
.bet-chip.bet-velvet{ background:rgb(30,25,33); color:var(--gold); }
.bet-chip.bet-velvet em{ color:rgba(224,180,72,.55); }
.bet-chip.bet-velvet.active{
  border-color:rgba(196,58,58,.75); background:rgb(30,22,23);
  box-shadow:0 0 12px rgba(196,58,58,.22), inset 0 0 0 1px rgba(196,58,58,.35);
}
/* selected velvet caption brightens like every other active chip (4.5:1 law) */
.bet-chip.bet-velvet.active em{ color:rgba(238,238,242,.75); }

/* Velvet pulls in the ticker: tinted felt row + a tiny members chip */
.gamble-row.gamble-velvet{ background:rgb(28,24,31); }
.gv-chip{
  font-style:normal; font-size:8px; font-weight:900; letter-spacing:1.4px;
  color:rgba(224,180,72,.75);
}

/* GOLD SPENDS row under the shelf: slim, chip-height, text-chip recipe
   (faint gold-alpha pill border on a TEXT-CHIP is the sanctioned S1 shape) */
.prestige-row{
  max-width:900px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px;
}
.prestige-title{
  font-size:10px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim);
}
.prestige-buy{
  font-size:10.5px; font-weight:800; letter-spacing:.8px; color:var(--gold);
  background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; cursor:pointer; transition:filter .12s;
}
.prestige-buy:hover{ filter:brightness(1.2); background:rgba(224,180,72,.06); }
.prestige-buy.prestige-owned, .prestige-buy:disabled{
  color:rgba(224,180,72,.45); cursor:default;
}
/* short desktop windows: the row rides the same compression as the shelf */
@media (max-height:840px){
  .prestige-row{ margin-top:8px; gap:8px; }
  .prestige-buy{ padding:4px 10px; font-size:10px; }
}
/* MEASURED LAW (Rev 30.1): phones (<=560w) and short windows (<=760h) hold
   ZERO spare store pixels — a real-browser sum found 390x844 at exactly 0
   before this row existed. The row goes entirely (the chips-row precedent);
   phone gn purchases live on the OWN-PROFILE card, velvet on the casino card */
@media (max-width:560px){
  .prestige-row{ display:none; }
}
@media (max-height:760px){
  .prestige-row{ display:none; }
}

/* ---- REV 31: gold-finish on jobs + street reputation ---- */
/* The job FINISH button: the q-rush laminate language, no breathe — an
   active job row already carries the crimson op glow; two animations fight.
   Gold in text + icon only, house stroke border (S1). */
.btn.job-rush{
  margin-top:6px; padding:7px 12px; font-size:11px; font-weight:900; letter-spacing:1.2px;
  color:var(--gold);
  background:linear-gradient(180deg, rgb(36,31,21), rgb(24,21,14));
  border:1px solid var(--stroke); border-radius:9px;
  text-shadow:0 0 10px rgba(224,180,72,.25);
  box-shadow:0 0 10px rgba(224,180,72,.10), inset 0 1px 0 rgba(255,255,255,.05);
  transition:filter .12s;
}
.btn.job-rush:hover{ filter:brightness(1.18); }
.btn.job-rush img.gold-ico{ width:13px; height:13px; vertical-align:-2px; margin:0 2px; }

/* Street reputation strip in the ledger — the complimentary power line */
.ledger-rep{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--stroke);
  font-size:10px; font-weight:800; letter-spacing:1.2px; color:var(--txt-dim);
}
.ledger-rep b{ color:var(--gold); font-size:11.5px; letter-spacing:.8px; }
.ledger-rep span{ font-weight:600; letter-spacing:.4px; text-transform:none; }
.ledger-rep .cash-mark-sm{ width:11px; height:11px; vertical-align:-1px; }

/* ---- REV 31.1: chat card polish + THE GILDED TREATMENT + no INF ---- */
/* Base card, professionalized: every chip shares one pill spec and one
   text line; the head aligns center so nothing floats off-baseline. */
.chat-head{ gap:7px; row-gap:4px; }
.chat-stat, .chat-vip, .chat-synd, .chat-leader{
  padding:2px 8px; border-radius:999px; font-size:9.5px;
  letter-spacing:.8px; line-height:1.35;
}
.chat-time{ font-size:10px; opacity:.8; }
.chat-name{ font-size:13.5px; letter-spacing:.2px; }
/* THE GILDED BADGE — the one FILLED chip on the card; solid gold reads a
   rank above the outlined V.I.P (text-chip shape, sanctioned) */
.chat-gilded-badge{
  font-size:9.5px; font-weight:900; letter-spacing:1.1px; line-height:1.35;
  color:rgb(26,21,10); padding:2px 9px; border-radius:999px;
  background:linear-gradient(180deg, rgb(238,200,96), rgb(204,158,56));
  box-shadow:0 0 10px rgba(224,180,72,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
/* THE GILDED CARD — the whole row wears the gold: a warm sweep fill off the
   portrait, gold name (chat-gild), ivory message text, gilded time. Fills and
   text only; the portrait ring rides the sanctioned portrait-ring exception. */
.chat-row.chat-row-gilded{
  background:linear-gradient(90deg, rgba(224,180,72,.11), rgba(224,180,72,.04) 55%, transparent);
  border-radius:8px; padding-left:8px; padding-right:8px;
}
.chat-row.chat-row-gilded .chat-ava{
  border-color:rgba(224,180,72,.38);
  box-shadow:0 0 10px rgba(224,180,72,.16);
}
.chat-row.chat-row-gilded .chat-text{ color:rgb(238,228,202); }
.chat-row.chat-row-gilded .chat-time{ color:rgba(224,180,72,.6); opacity:1; }
/* gilded + own-row: the sweep wins over the flat mine fill, no double-paint */
.chat-row.chat-mine.chat-row-gilded{ background:linear-gradient(90deg, rgba(224,180,72,.14), rgba(224,180,72,.05) 55%, rgba(224,180,72,.02)); }

/* ---- REV 31.2: THE CREATOR'S AURA ---- */
/* The Creator's card is the ONE surface that moves through the spectrum —
   the rainbow-name precedent extended to the whole card. Fills + glows only
   (no colored border); slow 9s drift so it reads POWER, not carnival. */
.chat-row-creator{
  border-radius:10px; padding:9px 10px;
  background:linear-gradient(100deg,
    rgba(196,58,58,.17), rgba(150,70,215,.13) 28%, rgba(224,180,72,.15) 54%,
    rgba(70,130,210,.12) 78%, rgba(196,58,58,.17));
  background-size:300% 100%;
  animation:creatorAura 9s ease-in-out infinite;
}
@keyframes creatorAura{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
.chat-row-creator .chat-ava{
  border-color:rgba(255,255,255,.28);
  animation:creatorAvaGlow 9s ease-in-out infinite;
}
@keyframes creatorAvaGlow{
  0%,100%{ box-shadow:0 0 15px rgba(196,58,58,.55); }
  33%{ box-shadow:0 0 15px rgba(160,90,225,.55); }
  66%{ box-shadow:0 0 15px rgba(224,180,72,.55); }
}
.chat-row-creator .chat-name.rainbow{
  font-size:14px; letter-spacing:.4px;
  text-shadow:0 0 12px rgba(255,255,255,.20);
}
.chat-row-creator .chat-text{ color:rgb(241,239,247); font-weight:600; }
.chat-row-creator .chat-time{ color:rgba(255,255,255,.55); opacity:1; }
/* THE CREATOR badge: the spectrum in a chip — dark text on drifting light */
.chat-creator-badge{
  font-size:9.5px; font-weight:900; letter-spacing:1.2px; line-height:1.35;
  color:rgb(18,15,22); padding:2px 9px; border-radius:999px;
  background:linear-gradient(90deg, rgb(233,120,120), rgb(188,124,236), rgb(238,200,96), rgb(122,168,233), rgb(233,120,120));
  background-size:300% 100%;
  animation:creatorAura 9s ease-in-out infinite;
  box-shadow:0 0 12px rgba(188,124,236,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
@media (prefers-reduced-motion: reduce){
  .chat-row-creator, .chat-row-creator .chat-ava, .chat-creator-badge{ animation:none; }
}

/* ---- REV 31.3: chip LEGIBILITY + the gilded shelf card + better buttons ---- */
/* Naru: "I barely can read it" — chips step up a size, text brightens,
   fills strengthen. Overrides the 31.1 spec (later in file wins). */
.chat-stat, .chat-vip, .chat-synd, .chat-leader{
  font-size:10.5px; padding:2.5px 9px; letter-spacing:.6px; font-weight:800;
}
.chat-stat.stat-atk{ color:rgb(246,152,152); background:rgba(196,58,58,.24); border-color:rgba(196,58,58,.6); }
.chat-vip{ color:rgb(240,204,116); background:rgba(224,180,72,.16); border-color:rgba(224,180,72,.52); }
.chat-synd{ color:rgb(240,204,116); background:rgba(224,180,72,.14); border-color:rgba(224,180,72,.5); }
.chat-leader{ color:rgb(242,146,146); background:rgba(196,58,58,.18); border-color:rgba(196,58,58,.55); }

/* The gilded SHELF CARD: name + what-it-does + a real button — no more
   naked pill. Gold in text/fills; card border stays house line (L4). */
.prestige-card{
  flex:1 1 100%; max-width:900px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:linear-gradient(90deg, rgba(224,180,72,.08), transparent 58%), var(--card);
  border:1px solid var(--line); border-radius:12px; padding:10px 14px;
}
.prestige-info{ min-width:0; }
.prestige-info b{
  display:block; color:var(--gold); font-size:12.5px; font-weight:900;
  letter-spacing:1.4px; text-shadow:0 0 10px rgba(224,180,72,.2);
}
.prestige-info span{
  display:block; color:var(--txt-dim); font-size:11px; margin-top:3px;
  letter-spacing:.2px; line-height:1.4;
}
/* the buy button: the rush laminate — gold text, walnut fill, house stroke */
.btn.prestige-buy{
  flex-shrink:0; padding:10px 16px; font-size:11.5px; font-weight:900; letter-spacing:1.4px;
  color:var(--gold);
  background:linear-gradient(180deg, rgb(36,31,21), rgb(24,21,14));
  border:1px solid var(--stroke); border-radius:10px;
  text-shadow:0 0 10px rgba(224,180,72,.28);
  box-shadow:0 0 12px rgba(224,180,72,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transition:filter .12s;
}
.btn.prestige-buy:hover{ filter:brightness(1.18); background:linear-gradient(180deg, rgb(36,31,21), rgb(24,21,14)); }
.btn.prestige-buy img.gold-ico{ width:14px; height:14px; vertical-align:-2px; margin:0 2px; }
.prestige-owned-chip{
  flex-shrink:0; font-size:10px; font-weight:900; letter-spacing:1.2px;
  color:rgba(224,180,72,.6); padding:6px 12px;
  border:1px solid rgba(224,180,72,.2); border-radius:999px;
}
/* profile-card gilding: the same laminate + the what-it-does line under it */
.btn.pp-gild-buy{
  color:var(--gold);
  background:linear-gradient(180deg, rgb(36,31,21), rgb(24,21,14));
  border:1px solid var(--stroke);
  font-weight:900; letter-spacing:1.2px;
  text-shadow:0 0 10px rgba(224,180,72,.28);
  box-shadow:0 0 12px rgba(224,180,72,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn.pp-gild-buy:hover{ filter:brightness(1.18); }
.btn.pp-gild-buy img.gold-ico{ width:14px; height:14px; vertical-align:-2px; margin:0 3px; }
.pp-gild-sub{ font-size:10.5px; color:var(--txt-dim); margin-top:6px; line-height:1.45; }
/* short desktop: the card compresses with the rest of the store column */
@media (max-height:840px){
  .prestige-card{ padding:8px 12px; }
  .prestige-info span{ font-size:10px; margin-top:2px; }
  .btn.prestige-buy{ padding:8px 12px; font-size:10.5px; }
}

/* ---- REV 31.5: THE GILDED SHINE — foil, not paint ---- */
/* Naru: "a bit of a shine, more polished, not hard on the eye." The flat
   saturated gold becomes METALLIC FOIL: a champagne gradient clipped into
   the letters with a slow 7s sheen sweep. Solid gold stays as the fallback
   (unsupported clip = the old look, never an invisible name). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .chat-gild, .gw-gild, .rk-gild, .pp-gild, .wire-gild, .dm-gild{
    background:linear-gradient(100deg,
      rgb(208,166,78) 0%, rgb(244,220,148) 20%, rgb(255,244,198) 28%,
      rgb(236,198,108) 38%, rgb(202,158,64) 58%, rgb(236,202,118) 84%, rgb(208,166,78) 100%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:gildSheen 7s ease-in-out infinite;
  }
}
@keyframes gildSheen{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
/* the card calms a stop — the shine carries the status now, not the fill */
.chat-row.chat-row-gilded{
  background:linear-gradient(90deg, rgba(224,180,72,.075), rgba(224,180,72,.028) 55%, transparent);
}
.chat-row.chat-mine.chat-row-gilded{
  background:linear-gradient(90deg, rgba(224,180,72,.10), rgba(224,180,72,.04) 55%, rgba(224,180,72,.015));
}
.chat-row.chat-row-gilded .chat-ava{
  border-color:rgba(224,180,72,.3);
  box-shadow:0 0 8px rgba(224,180,72,.13);
}
.chat-row.chat-row-gilded .chat-text{ color:rgb(235,229,212); }
.chat-row.chat-row-gilded .chat-time{ color:rgba(224,180,72,.5); }
/* the badge goes satin: lighter face, soft top light, quieter halo — and
   the same slow sheen so badge and name breathe together */
.chat-gilded-badge{
  color:rgb(32,25,12);
  background:linear-gradient(100deg, rgb(230,196,110), rgb(246,226,160) 30%, rgb(214,172,76) 60%, rgb(238,208,124));
  background-size:220% 100%;
  animation:gildSheen 7s ease-in-out infinite;
  box-shadow:0 0 8px rgba(224,180,72,.20), inset 0 1px 0 rgba(255,255,255,.45);
}
@media (prefers-reduced-motion: reduce){
  .chat-gild, .gw-gild, .rk-gild, .pp-gild, .wire-gild, .dm-gild, .chat-gilded-badge{ animation:none; }
}

/* ---- REV 31.6: the card effects reach EVERY chat surface ---- */
/* fallback gold for the new foil leaves (clip-unsupported browsers) */
.wire-gild, .dm-gild{ color:var(--gold); }
/* THE WIRE (the Creator's line): the same two cards, wire-scoped classes */
.wire-row.wire-row-creator{
  border-radius:10px; padding:8px 10px;
  background:linear-gradient(100deg,
    rgba(196,58,58,.17), rgba(150,70,215,.13) 28%, rgba(224,180,72,.15) 54%,
    rgba(70,130,210,.12) 78%, rgba(196,58,58,.17));
  background-size:300% 100%;
  animation:creatorAura 9s ease-in-out infinite;
}
.wire-row.wire-row-creator .wire-ava{
  border-color:rgba(255,255,255,.28);
  animation:creatorAvaGlow 9s ease-in-out infinite;
}
.wire-row.wire-row-creator .chat-text{ color:rgb(241,239,247); font-weight:600; }
.wire-row.wire-row-gilded{
  border-radius:10px; padding:8px 10px;
  background:linear-gradient(90deg, rgba(224,180,72,.075), rgba(224,180,72,.028) 55%, transparent);
}
.wire-row.wire-row-gilded .wire-ava{
  border-color:rgba(224,180,72,.3);
  box-shadow:0 0 8px rgba(224,180,72,.13);
}
.wire-row.wire-row-gilded .chat-text{ color:rgb(235,229,212); }
/* friend-DM + group bubbles: warm gilded felt, foiled name, gilded clock */
.dm-row.dm-gilded .dm-bubble{
  background:linear-gradient(135deg, rgba(224,180,72,.13), rgba(224,180,72,.05));
}
.dm-row.dm-gilded .dm-text{ color:rgb(235,229,212); }
.dm-row.dm-gilded .dm-time{ color:rgba(224,180,72,.55); }
@media (prefers-reduced-motion: reduce){
  .wire-row.wire-row-creator, .wire-row.wire-row-creator .wire-ava{ animation:none; }
}

/* ---- REV 32: UNIT PROGRAMS — the I..V drill tracks ---- */
.up-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:10px; margin-top:10px;
}
.up-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px;
}
.up-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.up-head img{
  width:38px; height:38px; object-fit:contain;
  background:var(--bg); border:1px solid var(--stroke); border-radius:8px; padding:2px;
}
.up-head b{ font-size:13.5px; letter-spacing:.3px; }
.up-sub{ margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.8px; color:var(--txt-dim); }
.up-track{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:7px 0; border-top:1px solid rgb(30,30,36);
}
.up-label{
  flex:0 0 64px; font-size:9.5px; font-weight:900; letter-spacing:1.4px;
  color:var(--txt-dim);
}
.up-pips{ display:flex; gap:4px; }
/* the ladder itself: dim brass slots, CRIMSON when earned (S1 — selection
   and achievement live in crimson; gold stays text/fills elsewhere) */
.up-pip{
  min-width:22px; text-align:center;
  font-size:9px; font-weight:900; letter-spacing:.5px; line-height:1.5;
  color:rgba(238,238,242,.35); background:rgb(24,24,29);
  border:1px solid var(--stroke); border-radius:5px; padding:1px 4px;
}
.up-pip-on{
  color:rgb(240,150,150); background:rgba(196,58,58,.2);
  border-color:rgba(196,58,58,.55);
}
.up-eff{ font-size:11px; color:var(--txt-dim); }
.up-eff b{ color:var(--gold); font-size:12px; }
.up-maxed{
  margin-left:auto; font-size:9.5px; font-weight:900; letter-spacing:1.2px;
  color:var(--gold); padding:4px 10px;
  border:1px solid rgba(224,180,72,.28); border-radius:999px;
}
.btn.up-buy{ margin-left:auto; padding:7px 12px; font-size:11px; font-weight:800; letter-spacing:.6px; }
.btn.up-buy .cash-mark-sm{ width:11px; height:11px; vertical-align:-1px; }
/* ---- REV 39: UNIT PROGRAMS IN THE TREE ---- */
/* the pip strip a researched node wears — its levels at a glance, tap to drill */
.rt-progs{
  display:flex; flex-direction:column; gap:3px; align-items:center;
  background:rgba(0,0,0,.28); border:1px solid var(--stroke); border-radius:8px;
  padding:5px 10px; cursor:pointer; font:inherit; color:var(--txt-dim);
  transition:border-color .15s, filter .15s;
}
.rt-progs:hover{ filter:brightness(1.3); }
.rt-progs-on{ border-color:rgba(196,58,58,.7); box-shadow:0 0 10px rgba(196,58,58,.16), inset 0 0 0 1px rgba(196,58,58,.25); }
.rt-pr{ display:flex; align-items:center; gap:3px; }
.rt-pr-lab{ font-style:normal; font-size:8px; font-weight:900; letter-spacing:.6px; width:22px; text-align:right; color:var(--txt-dim); }
.rp-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.13); }
.rp-dot.on{ background:var(--gold); box-shadow:0 0 6px rgba(224,180,72,.55); }
/* the unfolded drill card — sits in the tree under its soldier's tier */
.rt-prog-detail{
  margin:10px auto; max-width:540px; position:relative;
  background:var(--card); border:1px solid rgba(196,58,58,.4); border-left:3px solid rgba(196,58,58,.75);
  border-radius:12px; padding:14px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.rt-prog-close{
  position:absolute; top:9px; right:11px; width:24px; height:24px;
  background:rgba(255,255,255,.08); border:none; border-radius:50%;
  color:var(--txt); font-size:11px; line-height:1; cursor:pointer; padding:0;
}
.rt-prog-close:hover{ background:rgba(196,58,58,.45); }
@media (max-width:640px){
  .rt-prog-detail{ max-width:100%; }
  .rt-progs{ padding:4px 8px; }
}
.up-mark{ font-style:normal; font-size:9px; font-weight:900; color:var(--gold); letter-spacing:.5px; }
@media (max-width:560px){
  .up-grid{ grid-template-columns:1fr; }
  .up-label{ flex-basis:56px; }
  .btn.up-buy{ flex-basis:100%; margin-left:0; }
}

/* ---- REV 32.1: the ID card's GLOBAL RANK — gold, the prestige number ---- */
.cc-field .cc-rank{ color:var(--gold); }

/* ---- REV 33: THE WEED FARM ---- */
/* REV 36: the grow-room art is now the FULL farm backdrop (.farm-view below),
   not just a banner. The hero is only the title/season header floating on that
   shared backdrop — no boxed banner, no second copy of the image. */
.farm-hero{
  position:relative; margin-bottom:4px;
  background:none; border:none; box-shadow:none; min-height:auto; overflow:visible;
}
.farm-hero-inner{ padding:16px 14px 8px; }
/* REV 36 — FULL-FARM BACKDROP: the grow-room art covers the ENTIRE tab cleanly.
   A relative wrapper paints the image on a ::before spanning the whole farm view;
   a light vertical scrim keeps it visible while the translucent tiles/cards give
   text its contrast, so the art breathes through everything. */
.farm-view{ position:relative; isolation:isolate; border-radius:14px; padding:12px; }
.farm-view::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(8,8,11,.45) 0%, rgba(8,8,11,.30) 25%, rgba(8,8,11,.50) 60%, rgba(8,8,11,.72) 100%),
    url('/img/farm/bg.jpg') center top / cover no-repeat;
  box-shadow:inset 0 0 0 1px var(--line), 0 16px 40px rgba(0,0,0,.55);
}
.farm-view > *{ position:relative; z-index:1; }
.farm-view .tile{ background:rgba(13,13,17,.60); border-color:rgba(255,255,255,.08); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.farm-view .fm-row{ background:rgba(20,20,26,.74); border-color:rgba(255,255,255,.06); }
.farm-view .fp-card{ background:rgba(18,18,23,.70); border-color:rgba(255,255,255,.06); }
.farm-view .fp-card.fp-ready{ background:linear-gradient(180deg, rgba(90,190,90,.18), rgba(18,18,23,.74)); }
.farm-view .farm-kicker, .farm-view .fs-year, .farm-view .fs-next{ text-shadow:0 1px 6px rgba(0,0,0,.9); }
.farm-kicker{
  font-size:10px; font-weight:800; letter-spacing:2.5px; color:rgba(238,238,242,.6);
}
.farm-title{
  font-size:30px; font-weight:900; letter-spacing:5px; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.8); margin:2px 0 10px;
}
.farm-season{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fs-chip{
  font-size:10.5px; font-weight:900; letter-spacing:1.6px;
  padding:3px 11px; border-radius:999px; border:1px solid var(--stroke);
}
.fs-spr{ color:rgb(150,225,150); background:rgba(90,190,90,.16); }
.fs-sum{ color:var(--gold); background:rgba(224,180,72,.16); }
.fs-aut{ color:rgb(235,160,90); background:rgba(215,130,60,.16); }
.fs-win{ color:rgb(150,200,235); background:rgba(100,160,220,.16); }
.fs-year{ font-size:11px; font-weight:800; letter-spacing:1.2px; color:rgba(238,238,242,.75); }
.fs-next{ font-size:11px; color:rgba(238,238,242,.6); }
.fs-next b{ color:var(--gold); font-weight:800; }
/* market + stash rows */
.fm-list{ display:flex; flex-direction:column; gap:8px; }
.fm-row{
  display:flex; align-items:center; gap:12px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:10px; padding:8px 12px; margin-top:0;
}
.fm-ico{ width:42px; height:42px; object-fit:contain; flex-shrink:0; }
.fm-info{ flex:1; min-width:0; }
.fm-info b{ display:block; font-size:13px; }
.fm-info span{ font-size:10.5px; color:var(--txt-dim); letter-spacing:.3px; }
.fm-price{ text-align:right; flex-shrink:0; }
.fm-price b{ display:block; font-size:15px; letter-spacing:.3px; }
.fm-price span{ font-size:9px; font-weight:800; letter-spacing:1px; }
.fm-hot b{ color:rgb(150,225,150); } .fm-hot span{ color:rgba(150,225,150,.8); }
.fm-mid b{ color:var(--gold); } .fm-mid span{ color:rgba(224,180,72,.7); }
.fm-cold b{ color:rgb(235,120,120); } .fm-cold span{ color:rgba(235,120,120,.8); }
/* plots */
.fp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.fp-card{
  background:var(--bg); border:1px solid var(--stroke); border-radius:12px;
  padding:12px; display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center; min-height:168px;
}
.fp-card.fp-ready{ background:linear-gradient(180deg, rgba(90,190,90,.10), var(--bg) 70%); }
.fp-num{ font-size:9px; font-weight:900; letter-spacing:1.6px; color:var(--txt-dim); }
.fp-ico{ width:64px; height:64px; object-fit:contain; }
.fp-card b{ font-size:12.5px; }
.fp-soil{ font-size:10.5px; color:var(--txt-dim); font-style:italic; padding:18px 0; }
.fp-count{ font-size:13px; font-weight:800; color:var(--gold); }
.fp-bar{ width:100%; height:6px; background:var(--card); border:1px solid var(--stroke); border-radius:4px; overflow:hidden; }
.fp-bar i{ display:block; height:100%; background:rgb(90,170,90); }
.btn.fp-harvest{ background:rgb(60,140,60); }
.btn.fp-harvest:hover{ background:rgb(70,160,70); }
.fs-act{ display:flex; gap:6px; flex-shrink:0; }
.fs-act .btn{ padding:7px 10px; font-size:10.5px; }
/* the strain picker modal */
.fp-picker{ display:flex; flex-direction:column; gap:6px; max-height:56vh; overflow-y:auto; }
.fp-pick{
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--bg); border:1px solid var(--stroke); border-radius:10px;
  padding:8px 10px; cursor:pointer; color:var(--txt); text-align:left;
  transition:filter .12s; font:inherit;
}
.fp-pick:hover{ filter:brightness(1.2); }
.fp-pick img{ width:36px; height:36px; object-fit:contain; }
.fpp-name{ font-weight:800; font-size:12.5px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fpp-meta{ flex:1; font-size:10.5px; color:var(--txt-dim); }
.fpp-cost{ font-weight:800; font-size:12px; color:var(--txt); }
.fp-pick-broke .fpp-cost{ color:rgb(235,120,120); }
@media (max-width:640px){
  .farm-view{ padding:8px; }
  .farm-hero-inner{ padding:12px 8px 6px; }
  .farm-title{ font-size:22px; letter-spacing:3px; }
  /* plots can never collapse to one stretched column on phones (was the mobile break) */
  .fp-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .fp-card{ min-height:150px; }
  /* stash: the SELL buttons drop to a full-width row under the info, never crowd it */
  .fm-row{ flex-wrap:wrap; }
  .fm-info span{ display:none; }
  .fs-act{ flex-basis:100%; margin-left:0; margin-top:4px; }
  .fs-act .btn{ flex:1; }
  .fpp-meta{ display:none; }
}

/* ---- REV 37: PLAYER CONTRACTS ---- */
/* the Don's office is the full backdrop; the draft desk + signed papers float on it */
.contract-view{ position:relative; isolation:isolate; border-radius:14px; padding:12px; }
.contract-view::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(6,6,9,.55) 0%, rgba(6,6,9,.42) 25%, rgba(6,6,9,.60) 62%, rgba(6,6,9,.84) 100%),
    url('/img/contract/bg.jpg') center 30% / cover no-repeat;
  box-shadow:inset 0 0 0 1px var(--line), 0 16px 40px rgba(0,0,0,.55);
}
.contract-view > *{ position:relative; z-index:1; }
.contract-view .tile{ background:rgba(12,12,16,.66); border-color:rgba(255,255,255,.07); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
/* letterhead hero: centered, the title flanked by gold hairlines (S6 recipe) */
.contract-hero{ padding:20px 14px 10px; text-align:center; }
.ctr-kicker{ font-size:10px; font-weight:800; letter-spacing:2.5px; color:rgba(238,238,242,.6); text-shadow:0 1px 6px rgba(0,0,0,.9); }
.ctr-title{
  font-size:30px; font-weight:900; letter-spacing:6px; color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.85); margin:2px 0 6px;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.ctr-title::before, .ctr-title::after{ content:""; flex:0 1 140px; height:1px; }
.ctr-title::before{ background:linear-gradient(90deg, transparent, rgba(224,180,72,.6)); }
.ctr-title::after{ background:linear-gradient(90deg, rgba(224,180,72,.6), transparent); }
.ctr-sub{ font-size:11.5px; color:rgba(238,238,242,.72); max-width:540px; line-height:1.5; text-shadow:0 1px 6px rgba(0,0,0,.9); margin:0 auto; }
/* the draft desk */
.ctr-draft h3{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.ctr-recip{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 12px; }
.ctr-recip label{ font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--txt-dim); }
/* the mobster finder: input + a floating 3-card result stack */
.ctr-who-wrap{ position:relative; flex:1; min-width:200px; max-width:320px; display:block; }
.ctr-who-wrap .bank-input{ width:100%; }
.ctr-finds{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:6; display:flex; flex-direction:column; gap:4px; }
.ctr-find-row{
  display:flex; align-items:center; gap:9px; padding:7px 9px; cursor:pointer;
  background:rgba(14,14,19,.97); border:1px solid rgba(255,255,255,.1); border-radius:9px;
  transition:filter .12s, border-color .12s;
}
.ctr-find-row:hover{ filter:brightness(1.28); border-color:rgba(196,58,58,.55); }
.ctr-find-row img{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--stroke); flex-shrink:0; }
.ctr-find-info{ flex:1; min-width:0; }
.ctr-find-info b{ display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctr-find-info span{ font-size:10px; color:var(--txt-dim); letter-spacing:.3px; }
.ctr-find-none{
  padding:7px 9px; background:rgba(14,14,19,.95); border:1px solid rgba(255,255,255,.08);
  border-radius:9px; font-size:11px; color:var(--txt-dim); font-style:italic;
}
/* picked mobster chip — selection reads crimson (S1), never gold edges (L4) */
.ctr-picked{
  display:inline-flex; align-items:center; gap:8px; padding:4px 8px 4px 4px;
  background:rgba(0,0,0,.35); border:1px solid rgba(196,58,58,.55); border-radius:999px;
  box-shadow:0 0 12px rgba(196,58,58,.12);
}
.ctr-picked img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.ctr-picked b{ font-size:12px; }
.ctr-picked i{ font-style:normal; font-size:10.5px; color:var(--txt-dim); }
.ctr-unpick{
  background:rgba(255,255,255,.1); border:none; color:var(--txt); border-radius:50%;
  width:20px; height:20px; cursor:pointer; font-size:11px; line-height:1; padding:0;
}
.ctr-unpick:hover{ background:rgba(196,58,58,.45); }
.ctr-sides{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:start; }
.ctr-swap{ align-self:center; font-size:20px; color:var(--gold); font-weight:900; padding-top:24px; }
.ctr-side{ background:rgba(0,0,0,.30); border:1px solid var(--stroke); border-radius:10px; padding:10px; }
.ctr-side-h{ font-size:10.5px; font-weight:900; letter-spacing:1.4px; text-align:center; padding-bottom:8px; }
.ctr-side-give .ctr-side-h{ color:rgb(235,150,150); }
.ctr-side-get .ctr-side-h{ color:rgb(150,225,150); }
.ctr-urow{ display:flex; align-items:center; gap:8px; padding:4px 0; }
.ctr-uico{ width:26px; height:26px; object-fit:contain; flex-shrink:0; }
.ctr-uname{ flex:1; font-size:11.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctr-own{ font-size:10px; color:var(--txt-dim); flex-shrink:0; }
.ctr-uqty, .ctr-cash{ width:74px; text-align:right; padding:5px 8px; flex-shrink:0; -moz-appearance:textfield; appearance:textfield; }
/* the native number spinner sat ON the right-aligned digits — gone (type to set) */
.ctr-uqty::-webkit-outer-spin-button, .ctr-uqty::-webkit-inner-spin-button,
.ctr-cash::-webkit-outer-spin-button, .ctr-cash::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ctr-cashrow .ctr-uname{ font-weight:800; }
.ctr-note{ width:100%; margin:12px 0 10px; }
.ctr-draw{ width:100%; letter-spacing:1.5px; }
/* the signed paper */
.ctr-papers{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.ctr-paper{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,252,242,.5), transparent 60%),
    radial-gradient(140% 120% at 50% 100%, rgba(120,95,50,.14), transparent 55%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 27px, rgba(0,0,0,.05) 27px 28px),
    linear-gradient(180deg, #efe9db, #e5decb);
  color:#2a2620; border-radius:8px; padding:16px 18px; position:relative; overflow:hidden;
  border:1px solid #c9bd9c; box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 0 60px rgba(120,95,50,.08);
}
.ctr-p-lh{
  text-align:center; font-family:Georgia,'Times New Roman',serif; font-size:9px;
  letter-spacing:3px; color:#9a8d6d; padding-bottom:6px; margin-bottom:8px;
  border-bottom:3px double rgba(90,80,60,.3);
}
.ctr-p-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(0,0,0,.15); padding-bottom:8px; margin-bottom:10px; }
.ctr-p-id{ font-family:Georgia,'Times New Roman',serif; font-weight:700; letter-spacing:2px; font-size:13px; color:#4a3f2a; }
.ctr-seal{ font-size:10px; font-weight:900; letter-spacing:1.5px; padding:3px 10px; border-radius:4px; border:1px solid; }
.ctr-seal-pend{ color:#8a6d1e; border-color:#c8a94a; background:rgba(200,169,74,.14); }
.ctr-seal-done{ color:#7a1414; border-color:#a12222; background:rgba(161,34,34,.12); box-shadow:0 0 0 3px rgba(161,34,34,.08); }
.ctr-seal-torn{ color:#6a6a6a; border-color:#9a9a9a; background:rgba(120,120,120,.1); }
.ctr-p-pre{ font-family:Georgia,serif; font-size:12.5px; line-height:1.6; color:#3a3327; }
.ctr-p-bid{ color:#7a6f55; font-size:11px; }
.ctr-p-terms{ margin:12px 0; padding:10px 12px; background:rgba(0,0,0,.045); border-left:3px solid #b99a3e; border-radius:4px; }
.ctr-term{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:3px 0; }
.ctr-term-who{ color:#5a5040; font-style:italic; }
.ctr-term-what{ font-weight:800; text-align:right; color:#2a2620; }
.ctr-term-x{ text-align:center; font-size:10.5px; letter-spacing:1.5px; color:#9a8d6d; font-weight:800; padding:4px 0; }
.ctr-p-note{ font-family:Georgia,serif; font-style:italic; font-size:12px; color:#5a5040; margin:8px 0; }
.ctr-p-sigs{ display:flex; gap:20px; margin-top:14px; flex-wrap:wrap; }
.ctr-sig{ flex:1; min-width:130px; text-align:center; }
.ctr-sig-line{ display:block; height:22px; border-bottom:1.5px solid rgba(58,51,39,.35); margin-bottom:3px; }
.ctr-sig-ink{ display:block; font-family:'Segoe Script','Brush Script MT','Snell Roundhand',cursive; font-size:23px; color:#161628; border-bottom:1.5px solid #3a3327; padding-bottom:1px; margin-bottom:3px; line-height:1.1; transform:rotate(-2deg); }
.ctr-sig-cap{ font-size:9.5px; letter-spacing:1px; color:#8a7d5d; text-transform:uppercase; }
.ctr-sig-done .ctr-sig-cap{ color:#a12222; font-weight:800; }
.ctr-p-acts{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.ctr-p-acts .btn{ flex:1; min-width:130px; }
.ctr-act-sign{ background:#1e7a3e; }
.ctr-act-sign:hover{ background:#249048; }
.ctr-wait{ flex:1; font-size:11.5px; color:#7a6f55; font-style:italic; align-self:center; min-width:130px; }
.ctr-status-ripped, .ctr-status-expired{ opacity:.72; filter:grayscale(.35); }
/* the Commission's wax seal — executed accords only (pure CSS, no asset) */
.ctr-wax{
  position:absolute; right:16px; bottom:14px; width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d24a4a, #a11f1f 55%, #7c1414 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.22), inset 0 -3px 8px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; transform:rotate(-12deg); z-index:2;
}
.ctr-wax b{
  font-family:Georgia,serif; color:rgba(255,236,226,.92); font-size:14px; letter-spacing:1px;
  border:1.5px solid rgba(255,236,226,.5); border-radius:50%;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
}
.ctr-status-executed{ padding-bottom:60px; }
/* rubber ghost-stamp across torn / expired paper */
.ctr-stamp{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2; }
.ctr-stamp span{
  font-weight:900; font-size:30px; letter-spacing:6px; text-transform:uppercase;
  color:rgba(120,30,30,.30); border:4px solid rgba(120,30,30,.26);
  padding:6px 20px; border-radius:6px; transform:rotate(-14deg);
}
@media (max-width:640px){
  .contract-view{ padding:8px; }
  .ctr-title{ font-size:22px; letter-spacing:3px; gap:10px; }
  .ctr-title::before, .ctr-title::after{ flex-basis:44px; }
  .ctr-stamp span{ font-size:20px; letter-spacing:3px; border-width:3px; }
  .ctr-who-wrap{ max-width:100%; }
  .ctr-wax{ width:52px; height:52px; right:12px; bottom:12px; }
  .ctr-wax b{ width:36px; height:36px; font-size:12px; }
  .ctr-sides{ grid-template-columns:1fr; }
  .ctr-swap{ padding-top:0; transform:rotate(90deg); text-align:center; }
  .ctr-term{ flex-direction:column; gap:1px; }
  .ctr-term-what{ text-align:left; }
}

/* ---- REV 33.1: RESEARCH TREE POLISH — one system, three clear states ---- */
.rt-tree{ margin-top:6px; }
.rt-node{
  border-radius:12px; transition:transform .15s, filter .15s;
}
.rt-node:hover{ transform:translateY(-2px); filter:brightness(1.12); }
/* DONE: quiet, settled — the past */
.rt-node-done{ opacity:.92; }
.rt-node-done .rt-node-ico img{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.rt-done-tag{ color:rgb(150,225,150); letter-spacing:1px; }
/* READY: the ONE thing to do next — crimson selection glow (S1) */
.rt-node-ready{
  border-color:rgba(196,58,58,.6) !important;
  box-shadow:0 0 16px rgba(196,58,58,.16), inset 0 0 0 1px rgba(196,58,58,.2);
}
/* LOCKED: dim, waiting */
.rt-node-locked{ opacity:.5; }
.rt-node-locked .rt-node-ico img{ filter:grayscale(.8); }
.rt-node-sub{ letter-spacing:.6px; }
.rt-lv{ float:right; font-size:10px; font-weight:800; letter-spacing:1.5px; color:var(--txt-dim); }
.rt-bar{ height:8px; border-radius:5px; }
.rt-fill{ border-radius:5px; background:linear-gradient(90deg, rgba(196,58,58,.7), rgb(196,58,58)); }
/* programs section rides the same rhythm as the tree */
.up-card{ transition:transform .15s, filter .15s; }
.up-card:hover{ transform:translateY(-1px); filter:brightness(1.08); }

/* ==================== REV 40: THE CITY (operation overview) ==================== */
/* Aspect-locked 3:2 scene so the % pins track the art on every screen; the art
   itself is a drop-in file swap at /img/city/bg.jpg (stand-in until the
   commissioned district scene lands). Full-panel bg = Rev 36 law: cover layer +
   scrim + translucent content. Pin selection = crimson per S1, never gold edges. */
.city-view{ position:relative; isolation:isolate; }
.city-scene{
  position:relative; width:min(100%, calc(72vh * 1.5)); margin:0 auto;
  aspect-ratio:3/2; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(8,8,11,.34) 0%, rgba(8,8,11,.14) 30%, rgba(8,8,11,.30) 68%, rgba(8,8,11,.58) 100%),
    url('/img/city/bg.jpg') center / cover no-repeat #0b0b0f;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
/* the two view switchers, stacked clean at the scene's bottom-left */
.city-views{ position:absolute; left:10px; bottom:10px; z-index:3; display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.city-viewbtn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:rgba(13,13,17,.82); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:7px 14px; cursor:pointer;
  color:#eee; font:inherit; font-size:11.5px; font-weight:800; letter-spacing:.6px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  box-shadow:0 4px 14px rgba(0,0,0,.55); white-space:nowrap;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.city-viewbtn:hover{
  border-color:rgba(196,58,58,.75); background:rgba(26,12,12,.88);
  box-shadow:inset 0 0 0 1px rgba(196,58,58,.22), 0 4px 18px rgba(160,30,30,.35);
}
.city-viewbtn.hold{ opacity:.55; cursor:default; }
.city-viewbtn.hold:hover{
  border-color:rgba(255,255,255,.12); background:rgba(13,13,17,.82);
  box-shadow:0 4px 14px rgba(0,0,0,.55);
}
.city-card.hold{ opacity:.55; cursor:default; }
.city-card.hold:hover, .city-card.hold:active{ border-color:rgba(255,255,255,.07); background:rgba(18,18,23,.85); }
.city-pin{
  position:absolute; transform:translate(-50%,-50%); z-index:2;
  display:flex; align-items:center; gap:6px;
  background:rgba(13,13,17,.80); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:5px 9px 5px 5px; cursor:pointer;
  color:#eee; font:inherit;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  box-shadow:0 4px 14px rgba(0,0,0,.55);
  transition:border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.city-pin:hover{
  border-color:rgba(196,58,58,.75); background:rgba(26,12,12,.88);
  box-shadow:inset 0 0 0 1px rgba(196,58,58,.22), 0 4px 18px rgba(160,30,30,.35);
  transform:translate(-50%,-50%) scale(1.04);
}
.city-pin-ico{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.city-pin-name{ font-size:11px; font-weight:800; letter-spacing:.4px; white-space:nowrap; }
.city-pin-badge{
  font-size:9.5px; font-weight:800; letter-spacing:1px; color:var(--gold);
  border:1px solid rgba(224,180,72,.4); border-radius:999px; padding:2px 7px;
  background:rgba(24,20,10,.72); white-space:nowrap; flex-shrink:0;
}
.city-list{ display:none; }
.city-card{
  display:flex; align-items:center; gap:8px; text-align:left;
  background:rgba(18,18,23,.85); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:8px; cursor:pointer; color:#eee; font:inherit;
  transition:border-color .15s, background .15s;
}
.city-card:hover, .city-card:active{ border-color:rgba(196,58,58,.75); background:rgba(26,12,12,.88); }
.city-card-ico{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.city-card-name{ font-size:11.5px; font-weight:800; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){
  .city-scene{ width:100%; border-radius:12px; }
  /* icon-only pins on phones — the district list below carries names + numbers */
  .city-pin{ padding:4px; gap:0; }
  .city-pin-name{ display:none; }
  .city-pin .city-pin-badge{ display:none; }
  .city-pin-ico{ width:24px; height:24px; }
  .city-views{ left:6px; bottom:6px; gap:4px; }
  .city-viewbtn{ padding:5px 10px; font-size:10.5px; }
  .city-viewbtn .city-pin-badge{ display:none; }
  .city-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:10px; }
}