/* ===== 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; }
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; }

/* ---- 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:180px; flex:0 0 180px;
  background:var(--rail);
  border-right:1px solid var(--line);
  padding:10px; display:flex; flex-direction:column; gap:6px;
  overflow-y:auto;
}
.rail-btn{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--stroke);
  color:var(--txt); text-align:left;
  padding:11px 12px; border-radius:8px;
  font-size:14px; 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:16px; width:20px; text-align:center; }

/* ---- 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); }

/* ---- Trade modal (our own are-you-sure) ---- */
#modal-backdrop{
  position:fixed; inset:0; z-index:100;
  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-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; }
.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;
  background:
    linear-gradient(rgba(6,6,8,.55), rgba(6,6,8,.72)),
    var(--bg) url("/img/login-bg.png") center/cover no-repeat;
  background-blend-mode:normal;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .6s;
}
#auth-screen.hide{ opacity:0; pointer-events:none; }
#auth-inner{
  width:100%; max-width:400px; padding:24px;
  display:flex; flex-direction:column; align-items:center;
}
#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;
}
#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; }
.brk-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.brk-title h3{ margin-bottom:2px; }
.brk-title span{ font-size:11.5px; color:var(--txt-dim); }
.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-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; }
.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:12px; left:50%; transform:translateX(-50%) translateY(-14px);
  z-index:500; width:max-content; max-width:min(620px, 94vw);
  background:rgb(9,9,11);
  border:1px solid rgb(46,46,54);
  border-radius:8px;
  padding:13px 24px; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
#announce.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#announce-name{
  font-size:9.5px; font-weight:800; letter-spacing:3.5px; text-transform:uppercase;
  color:rgb(128,128,138);
  margin-bottom:7px;
}
#announce-text{
  color:#fff; font-size:15px; font-weight:600; line-height:1.5;
  letter-spacing:.2px;
}
@media (max-width:640px){
  #announce{ padding:11px 16px; max-width:94vw; }
  #announce-text{ font-size:13.5px; }
}

/* ---- 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; }
#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); }

/* ---- 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:400;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* supreme notification: incoming wire */
#toast.grand{
  background:rgb(24,20,12);
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:15px; font-weight:800; letter-spacing:.4px;
  padding:16px 26px;
}

/* ---- 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); }
.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; }

/* ---- Rail tab image icons ---- */
.r-ico-pic{ width:20px; height:20px; object-fit:contain; vertical-align:middle; display:inline-block; }

/* ---- 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-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;
}
.inv-total span{ font-size:12px; font-weight:800; letter-spacing:1px; color:var(--txt-dim); }
.inv-total b{ font-size:20px; }
.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); }
.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; }
.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-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:60px; flex:0 0 60px; padding:8px 6px; }
  .rail-btn{ justify-content:center; padding:12px 0; }
  .rail-btn .r-label{ display:none; }
  .rail-btn .r-ico{ width:auto; font-size:18px; }
  #content{ padding:14px; }
  .chat-log{ height:50vh; min-height:220px; }
  .chat-name{ min-width:76px; max-width:90px; font-size:12px; }
  .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; }
  .inv-total{ padding:8px 10px; }
  .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; }
}