/* ============================================================================
   Outlaw Desert western frontier RPG theme.
   Dark frontier shell with brass, iron, sage and river-blue accents.
   ============================================================================ */
:root, .theme-frontier {
  --bg:#120f0a; --bg2:#19140e; --panel:#241b13; --panel2:#302318; --panel3:#3a2a1b;
  --line:#d6a15a38; --line2:#e0b36a66;
  --text:#f7ecd7; --muted:#d8b779; --dim:#8f7655;
  --accent:#d6a15a; --accent2:#5aa08a; --gold:#f0c66f;
  --green:#78b96c; --red:#c75b3b; --blue:#5b9caf; --purple:#9b6fae; --cyan:#62b6b2; --pink:#c66b75;
  --energy:#5b9caf; --nerve:#c75b3b; --happy:#f0c66f; --life:#78b96c; --food:#c77f3b; --water:#62b6b2;
  --radius:6px; --shadow:0 8px 22px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(214,161,90,.35), 0 10px 24px rgba(0,0,0,.35);
  --font-body:'Roboto Slab',Georgia,serif;
  --font-heading:'Rye',Georgia,serif;
  --btn-clip:none;
  --btn-clip-sm:none;
  --panel-clip:none;
  --input-clip:none;
}
.theme-noir {
  --bg:#0b0f0c; --bg2:#11160f; --panel:#1a2017; --panel2:#202719; --panel3:#2b311f;
  --line:#c49a5433; --line2:#d2b06b5c;
  --text:#efe5d0; --muted:#bfa978; --dim:#6f765f;
  --accent:#c79a4b; --accent2:#7f9b70; --gold:#e0ba68;
  --green:#86a866; --red:#b85a3b; --blue:#648a92; --purple:#8b7561; --cyan:#74a79b; --pink:#b87867;
  --energy:#648a92; --nerve:#b85a3b; --happy:#e0ba68; --life:#86a866; --food:#b47a42; --water:#74a79b;
  --radius:6px; --shadow:0 8px 24px rgba(0,0,0,.72);
  --glow:0 0 0 1px rgba(199,154,75,.34), 0 12px 28px rgba(0,0,0,.42);
  --font-body:'Roboto Slab',Georgia,serif;
  --font-heading:'Rye',Georgia,serif;
  --btn-clip:none;
  --btn-clip-sm:none;
  --panel-clip:none;
  --input-clip:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);background:
  linear-gradient(rgba(18,15,10,0.92), rgba(18,15,10,0.94)),
  linear-gradient(135deg, rgba(214,161,90,.12), transparent 36%, rgba(90,160,138,.10) 70%, transparent),
  url('../img/grime-bg.jpg') center/cover fixed,
  var(--bg);color:var(--text);font-size:16px;line-height:1.55;min-height:100vh}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.13) 3px, rgba(0,0,0,0.13) 5px);
  z-index: 9999;
  opacity: 0.7;
}
body.admin-mode{--accent:#e8554e;--accent2:#ff7a73;--gold:#e8554e}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.8rem;margin:0 0 .8rem;font-weight:700;letter-spacing:0;font-family:var(--font-heading);text-transform:uppercase;color:var(--accent);text-shadow:0 1px 0 #000}
h2{font-size:1.2rem;color:#fff;margin:0 0 .5rem;font-weight:600;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:0}
h3{font-size:1rem;color:var(--accent);margin:0 0 .5rem;font-weight:600;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:0}
hr{border:0;border-top:1px solid var(--line);margin:1rem 0}
.small{font-size:.78rem}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.green{color:var(--green)} .red{color:var(--red)} .gold{color:var(--gold)} .blue{color:var(--blue)} .cyan{color:var(--cyan)}
.icon{width:18px;height:18px;fill:currentColor;vertical-align:middle;flex-shrink:0}
.ui-jpg-icon{object-fit:cover;border-radius:4px;background:#05070a;border:1px solid rgba(255,255,255,.1);box-sizing:border-box;display:inline-block}
.brand-logo.ui-jpg-icon{object-fit:cover;border-radius:8px;border-color:var(--line2)}
.center{text-align:center} .mt{margin-top:14px} .mb{margin-bottom:14px}
small.hint{color:var(--muted);font-size:.78rem}

/* ---------------- Top bar ---------------- */
.topbar{display:flex;align-items:center;gap:16px;padding:0 18px;height:56px;
  background:linear-gradient(180deg,#2c2118,#17120d);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;box-shadow:0 2px 16px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.25rem;color:#fff;letter-spacing:0;white-space:nowrap;font-family:var(--font-heading);text-transform:uppercase}
.brand-logo{width:30px;height:30px;fill:var(--accent);filter:drop-shadow(0 2px 5px rgba(0,0,0,.8))}
.brand-text{font-weight:900;text-shadow:0 1px 0 #000}
.brand-accent{color:var(--accent)}
.mobile-menu-btn{display:none}
.mobile-user-chip{display:none}
.mobile-nav-shade,.mobile-nav-drawer{display:none}
.topsearch{position:relative;flex:1;max-width:340px}
.topsearch .search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--muted)}
.topsearch input{width:100%;background:#17110b;border:1px solid var(--line);color:var(--text);padding:8px 12px 8px 32px;border-radius:20px;font-size:.85rem}
.topsearch input:focus{outline:none;border-color:var(--accent)}
.wallet{display:flex;gap:8px;align-items:center;margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);
  border-radius:20px;padding:5px 12px;font-size:.82rem;white-space:nowrap;color:var(--text)}
button.chip{font-family:var(--font-body);cursor:pointer}
.chip .icon{width:15px;height:15px}
.chip.city{color:var(--gold,#c9a227)} .chip.city .icon{fill:var(--gold,#c9a227)}
.chip.city .chip-lbl{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.rank{color:var(--accent);gap:7px}
.chip-rank{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;line-height:1}
.chip-rank .chip-amt{font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-xp{position:relative;width:100%;min-width:44px;height:5px;border-radius:6px;background:#070a10;border:1px solid var(--line);overflow:hidden}
.chip-xp-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#a5852a,var(--accent))}
.chip.cash{color:var(--green)} .chip.cash .icon{fill:var(--green)}
.chip.pts{color:var(--accent)} .chip.pts .icon{fill:var(--accent)}
.chip.pet{color:var(--gold);border-color:rgba(104,190,116,.32);padding:3px 10px 3px 4px}
.chip-pet-img{width:24px;height:24px;border-radius:50%;object-fit:contain;background:#080604;border:1px solid rgba(104,190,116,.34);flex:0 0 auto}
.chip-pet-img.icon-fallback{display:inline-flex;align-items:center;justify-content:center}
.chip-pet-img.icon-fallback .icon{width:14px;height:14px}
.chip.mail{position:relative} .chip.mail.has-mail{border-color:var(--accent)}
.chip.mail b{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;border-radius:10px;font-size:.62rem;padding:0 5px;line-height:1.5}
.chip.admin{color:var(--red)} .chip.admin .icon{fill:var(--red)}
.chip.user{padding:3px 12px 3px 4px}
.chip.user.donator{border-color:var(--accent);box-shadow:var(--glow)}
.avatar-xs{width:24px;height:24px;border-radius:50%;background:#0a0e16;object-fit:cover}
.pname{font-weight:600;color:#fff}

/* ---------------- Status bars ---------------- */
.statusbar{display:flex;gap:14px;padding:9px 18px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:56px;z-index:55}
.bar{flex:1;min-width:130px}
.bar-label{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;display:flex;justify-content:space-between;margin-bottom:3px}
.bar-num{color:var(--text);font-weight:600;letter-spacing:0;text-transform:none}
.bar-track{height:10px;background:#070a10;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;transition:width .6s ease;border-radius:6px}
.bar.bar-low .bar-track{border-color:rgba(240,198,111,.76);box-shadow:0 0 8px rgba(240,198,111,.22)}
.bar.bar-empty .bar-track{border-color:rgba(199,91,59,.86);box-shadow:0 0 9px rgba(199,91,59,.26)}
.bar.bar-low .bar-timer{color:var(--gold)}
.bar.bar-empty .bar-timer,.bar-timer.empty{color:var(--red)}
.b-happy{background:linear-gradient(90deg,#a5852a,var(--happy))}
.b-life{background:linear-gradient(90deg,#2f7d4a,var(--life))}
.b-food{background:linear-gradient(90deg,#8a5421,var(--food))}
.b-water{background:linear-gradient(90deg,#1f8694,var(--water))}

/* ---------------- Shell ---------------- */
.shell{display:grid;grid-template-columns:210px minmax(0,1fr) 270px;gap:0;align-items:start;min-height:calc(100vh - 56px - 41px)}
body.rail-collapsed .shell{grid-template-columns:210px minmax(0,1fr)}
body.rail-collapsed .rail{display:none}
.sidebar{background:linear-gradient(180deg,rgba(36,25,16,.98),rgba(16,12,8,.98));border-right:1px solid var(--line);padding:10px 8px 20px;position:sticky;top:97px;height:calc(100vh - 97px);overflow-y:auto}
.sidebar-tools{padding:0 0 8px}
.sidebar-search{display:flex;align-items:center;gap:7px;height:36px;padding:0 9px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.22)}
.sidebar-search .icon{width:18px;height:18px;object-fit:cover;border-radius:5px;opacity:.85}
.sidebar-search input{width:100%;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:.78rem;outline:none}
.sidebar-search input::placeholder{color:var(--dim)}
.nav-group{margin-bottom:8px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.028);overflow:hidden}
.nav-group-title{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;border:0;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.08));color:var(--muted);cursor:pointer;text-align:left;padding:8px}
.nav-group-icon{width:28px;height:22px;object-fit:cover;border-radius:5px;border:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.nav-group-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nav-group-name{font-size:.64rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.05}
.nav-group-count{font-size:.56rem;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.nav-group-items{padding:4px}
.nav-item{display:flex;align-items:center;gap:8px;margin:1px 0;padding:7px 8px;color:var(--text);font-size:.8rem;border:1px solid transparent;border-radius:7px;min-width:0}
.nav-item .icon{width:18px;height:18px;object-fit:cover;border-radius:5px;opacity:.86;flex:0 0 auto}
.nav-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.06);text-decoration:none}
.nav-item:hover .icon{opacity:1}
.nav-item.active{background:linear-gradient(90deg,rgba(214,161,90,.20),rgba(214,161,90,.045));border-color:rgba(214,161,90,.45);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.nav-item.active .icon{opacity:1}
.nav-item.logout{color:var(--muted)}
.nav-item.is-hidden,.nav-group.is-hidden{display:none}
.content{padding:22px 24px;min-width:0}
.rail{padding:16px 14px;position:sticky;top:97px;height:calc(100vh - 97px);overflow-y:auto}
.has-quickbar .sidebar,.has-quickbar .rail{top:161px;height:calc(100vh - 161px)}

/* ---------------- Right rail ---------------- */
.rail-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:14px}
.rail-card h3{display:flex;align-items:center;gap:7px;font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:9px}
.rail-card h3 .icon{width:15px;height:15px;fill:var(--accent)}
.rail-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;padding:4px 0}
.rail-character{background:linear-gradient(180deg,rgba(55,36,20,.94),rgba(24,17,11,.96));border-color:rgba(207,169,92,.35)}
.rail-char-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rail-char-head .avatar-sm{width:46px;height:46px;border-radius:8px;object-fit:cover;border:1px solid var(--line2);flex:0 0 auto}
.rail-char-copy{min-width:0;flex:1}
.rail-char-copy strong{display:block;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-char-copy span{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}
.rail-char-links{display:grid;gap:3px;text-align:right}
.rail-xp{margin:4px 0 12px;height:auto;overflow:visible;background:transparent;border-radius:0}
.rail-xp-row{display:flex;justify-content:space-between;gap:8px;font-size:.7rem;color:var(--muted);margin-bottom:3px}
.rail-xp-next{margin:4px 0 0;font-size:.66rem}
.rail-xp-bar{height:16px;background:#030201;border:1px solid rgba(255,225,138,.58);border-radius:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.72),0 0 10px rgba(214,161,90,.18)}
.rail-xp-bar>div{background:linear-gradient(90deg,#3ee28b,#d6a15a,#fff0a2);box-shadow:0 0 14px rgba(255,225,138,.70);min-width:6px}
.rail-statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.rail-statgrid span{min-width:0;text-align:center;border:1px solid rgba(207,169,92,.18);background:rgba(0,0,0,.22);border-radius:7px;padding:6px 3px;font-size:.78rem;font-weight:800;color:var(--gold)}
.rail-statgrid b{display:block;font-size:.58rem;color:var(--muted);font-weight:800;margin-bottom:2px}
.rail-power{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);margin:10px 0 8px;padding:7px 0;font-size:.78rem;color:var(--muted)}
.rail-power strong{color:var(--gold);font-size:.95rem}
.rail-power-stack{display:grid;grid-template-columns:1fr auto;row-gap:4px}
.rail-power-stack span:last-of-type,.rail-power-stack strong:last-child{color:#f7ecd7;font-size:.9rem}
.rail-buffs{display:flex;gap:5px;flex-wrap:wrap;min-height:20px}
.rail-buff{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 7px;font-size:.65rem;font-weight:800;border:1px solid rgba(207,169,92,.22);background:rgba(0,0,0,.20);color:var(--muted)}
.rail-buff-timed{color:#f0d28b}
.rail-buff-gear{color:#8fd694;border-color:rgba(104,190,116,.30)}
.rail-buff-level{color:#9bc4ff;border-color:rgba(95,145,210,.34)}
.rail-companion h3{justify-content:space-between}
.rail-companion-row{display:grid;grid-template-columns:56px 1fr;gap:9px;align-items:center;color:var(--text);text-decoration:none}
.rail-companion-row:hover{text-decoration:none}
.rail-companion-img{width:56px;height:48px;border-radius:7px;object-fit:contain;background:#090604;border:1px solid rgba(104,190,116,.32)}
.rail-companion-img.icon-fallback{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05)}
.rail-companion-img.icon-fallback .icon{width:28px;height:28px}
.rail-companion-copy{min-width:0}
.rail-companion-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-companion-copy span{display:block;color:var(--muted);font-size:.7rem;margin:1px 0 4px}
.rail-companion-copy i{display:block;height:6px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.rail-companion-copy i b{display:block;height:100%;background:linear-gradient(90deg,#68be74,#f0c66f)}
.rail-companion-care{display:grid;gap:5px;margin-top:8px}
.rail-companion-care span{display:grid;grid-template-columns:42px 28px 1fr;align-items:center;gap:5px;font-size:.64rem;color:var(--muted)}
.rail-companion-care span>b{text-align:right;color:var(--text)}
.rail-companion-care i,.rail-companion-xp i{display:block;height:6px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.rail-companion-care i>b,.rail-companion-xp i>b{display:block;height:100%;background:linear-gradient(90deg,#68be74,#f0c66f)}
.rail-companion-care i.water>b{background:linear-gradient(90deg,#62b6b2,#9fdce0)}
.rail-companion-care i.loyal>b{background:linear-gradient(90deg,#d6a15a,#78b96c)}
.rail-companion-xp{margin-top:8px;font-size:.64rem;color:var(--muted)}
.rail-companion-xp span{display:block;margin-bottom:4px}
.rail-companion-xp i>b{background:linear-gradient(90deg,#5b9caf,#f0c66f)}
.rail-companion-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.rail-empty-companion{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;color:var(--muted);font-size:.78rem}
.rail-empty-companion .icon{width:32px;height:28px;object-fit:cover;border-radius:6px}
.rail-empty-companion .small{grid-column:2}
.rail-user{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;color:var(--text)}
.rail-user:hover{background:var(--panel2);text-decoration:none}
.rail-user span:nth-child(2){flex:1;font-size:.82rem}
.rail-event{font-size:.78rem;padding:5px 8px;border-radius:5px;margin-bottom:5px;background:var(--panel2);border-left:3px solid var(--line2)}
.rail-event.rail-success{border-left-color:var(--green)}
.rail-event.rail-error{border-left-color:var(--red)}
.banner-slot{background:linear-gradient(135deg,#2d2116,#17312d);text-align:center;border-color:var(--line2)}
.banner-art{margin:2px auto 6px} .banner-logo{width:40px;height:40px;fill:var(--accent);filter:drop-shadow(0 0 8px rgba(240,168,48,.4))}
.banner-copy{margin-bottom:9px} .banner-copy b{display:block;color:#fff} .banner-copy span{font-size:.76rem;color:var(--muted)}

/* ---------------- Footer ---------------- */
.footer{border-top:1px solid var(--line);background:var(--bg2);padding:12px 0;margin-top:auto}
.footer-inner{max-width:1300px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-nav{display:flex;gap:16px}
.footer-nav a{color:var(--muted);font-size:.82rem}

/* ---------------- Panels / cards ---------------- */
.panel{background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--line2);border-radius:var(--radius);clip-path:var(--panel-clip);padding:20px;margin-bottom:18px;position:relative;box-shadow:var(--shadow)}
.panel::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:none}
.panel>h2:first-child{border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:13px;display:flex;align-items:center;gap:8px;font-family:var(--font-heading);text-transform:uppercase;color:var(--accent)}
.panel>h2 .icon{fill:var(--accent)}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.hero{background:linear-gradient(120deg,#1a2233,#241c33 70%);border:1px solid var(--line2);border-radius:var(--radius);padding:22px;margin-bottom:18px;position:relative;overflow:hidden}
.hero:after{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(240,168,48,.18),transparent 70%)}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--accent);color:var(--text);
  padding:8px 15px;clip-path:var(--btn-clip);border-radius:var(--radius);
  cursor:pointer;font-size:.9rem;font-weight:600;font-family:var(--font-heading);text-transform:uppercase;transition:.15s;text-decoration:none;box-shadow:var(--glow)}
.btn:hover{background:var(--accent);color:#17110b;text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.45)}
.btn .icon{width:15px;height:15px;fill:currentColor}
.btn-primary{background:var(--gold);color:#000;border-color:var(--gold);box-shadow:0 0 15px rgba(252,238,10,0.5)}
.btn-primary:hover{background:#fff;color:#000;box-shadow:0 0 25px #fff}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 15px rgba(255,0,60,0.5)}
.btn-green{background:var(--green);color:#000;border-color:var(--green);box-shadow:0 0 15px rgba(57,255,20,0.5)}
.btn-ghost{background:transparent;box-shadow:none;border-color:var(--line2)}
.btn-ghost:hover{background:var(--line2);color:var(--text)}
.btn-sm{padding:5px 10px;font-size:.8rem;clip-path:var(--btn-clip-sm)}
.btn:disabled,.btn.disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---------------- Tables ---------------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px}
tbody tr:hover td{background:rgba(255,255,255,.025)}
table.tight th,table.tight td{padding:6px 8px;font-size:.82rem}

/* ---------------- Stat blocks / misc ---------------- */
.statline{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.statline:last-child{border:0}
.statline .v{font-weight:700;color:#fff}
.tag{display:inline-block;font-size:.68rem;padding:2px 8px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);color:var(--muted)}
.tag.green{color:var(--green);border-color:var(--green)} .tag.gold{color:var(--gold);border-color:var(--gold)}
.tag.red{color:var(--red);border-color:var(--red)} .tag.blue{color:var(--blue);border-color:var(--blue)}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:600}

/* ---------------- Flash ---------------- */
.flash{padding:11px 15px;border-radius:8px;margin-bottom:14px;border:1px solid;display:flex;gap:8px}
.flash-info{background:rgba(74,144,217,.12);border-color:var(--blue);color:#bcd9f5}
.flash-success{background:rgba(70,196,110,.12);border-color:var(--green);color:#bdf0cf}
.flash-error{background:rgba(232,85,78,.12);border-color:var(--red);color:#f3c4c2}
.flash-warn{background:rgba(240,168,48,.12);border-color:var(--accent);color:#f0e0b0}

/* ---------------- Forms ---------------- */
label{display:block;margin:12px 0 4px;font-size:.78rem;color:var(--muted)}
input,select,textarea{width:100%;background:rgba(36,27,19,.92);border:1px solid var(--line2);color:var(--text);
  padding:10px 12px;border-radius:var(--radius);font-size:1rem;font-family:var(--font-body);clip-path:var(--input-clip);color-scheme:dark}
input:focus,select:focus,textarea:focus{outline:none;background:rgba(48,35,24,.98);box-shadow:0 0 15px rgba(214,161,90,.38);border-color:var(--accent)}
select{background-color:#241b13;color:#f7ecd7}
select option,select optgroup{background-color:#1a130d;color:#f7ecd7}
select option:checked{background-color:#8a5d2f;color:#fff}
select option:disabled{color:#8f7655}
.form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}

/* ---------------- Auth (guest) ---------------- */
.guest-bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 500px at 70% 0%, rgba(240,168,48,.08), transparent),
  radial-gradient(700px 500px at 0% 100%, rgba(169,107,214,.10), transparent)}
.auth-wrap{max-width:440px;margin:7vh auto;padding:0 16px}
.auth-card{background:linear-gradient(180deg,var(--panel),#11161f);border:1px solid var(--line2);border-radius:14px;padding:30px;box-shadow:var(--shadow)}
.auth-card h1{text-align:center}

/* ---------------- Item / entity cards ---------------- */
.item-card{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:13px;text-align:center;transition:.15s}
.item-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.item-card .ico{width:100%;aspect-ratio:4/3;margin:0 0 10px;border-radius:6px;overflow:hidden;background:#05070a;border:1px solid rgba(0,0,0,0.5);box-shadow:inset 0 0 15px rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;position:relative}
.item-card .ico svg{width:48px;height:48px;fill:var(--accent);filter:drop-shadow(0 0 4px var(--accent))}
.item-card .ico img, .item-card .ico .ent-img{width:100% !important;height:100% !important;object-fit:contain;border:none !important;border-radius:0;box-shadow:none !important;margin:0 !important;background:none !important;padding:8px;box-sizing:border-box}
.item-card .ico .icon-fallback{width:100% !important;height:100% !important;border:none !important;border-radius:0;box-shadow:none !important;margin:0 !important;background:none !important}
.item-name{font-weight:600;color:#fff;font-size:.85rem}
.item-cat{font-size:.7rem;color:var(--muted)}
.rarity-common{} .rarity-uncommon{border-color:var(--green)} .rarity-rare{border-color:var(--blue)}
.rarity-epic{border-color:var(--purple)} .rarity-legendary{border-color:var(--accent);box-shadow:var(--glow)}

/* ---------------- Progress ---------------- */
.progress-wide{height:10px;background:#070a10;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.progress-wide>div{height:100%;background:linear-gradient(90deg,#a5852a,var(--accent))}
.cd{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}
.cd-ring{--cd-pct:1;display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--cd-pct) * 1turn),rgba(255,255,255,.10) 0),
             radial-gradient(circle at center,var(--panel2) 58%,transparent 60%);
  color:var(--text);font-size:.66rem;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 10px rgba(214,161,90,.14)}
.cd-ring.red{--accent:var(--red)}
.cd-ring.gold{--accent:var(--gold)}
.cd-ring.small{min-width:34px;height:34px;font-size:.58rem}

/* ---------------- Avatars ---------------- */
.avatar{width:96px;height:96px;border-radius:12px;background:#0a0e16;border:1px solid var(--line2);object-fit:cover}
.avatar-sm{width:48px;height:48px;border-radius:9px;background:#0a0e16;object-fit:cover}
.profile-head{display:flex;gap:18px;align-items:center}

/* ---------------- Map ---------------- */
.map-wrap{position:relative;background:#0a0e16;border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
.map-wrap svg{display:block;width:100%;height:auto}
.map-node{cursor:pointer}
.map-pin{position:absolute;transform:translate(-50%,-100%);text-align:center}
.map-pin .dot{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #0a0e16;box-shadow:0 0 8px var(--accent);margin:0 auto}
.map-pin .lbl{font-size:.68rem;color:var(--text);background:rgba(10,14,22,.8);padding:1px 5px;border-radius:4px;white-space:nowrap}

/* ---------------- Responsive ---------------- */
@media (max-width:1100px){ .shell{grid-template-columns:190px minmax(0,1fr)} .rail{display:none} }
@media (max-width:760px){ .shell{grid-template-columns:1fr} .sidebar{position:static;height:auto;display:flex;flex-wrap:wrap}
  .nav-group{display:flex;flex-wrap:wrap;width:100%} .nav-group-title{width:100%} .statusbar{position:static;top:auto} }

/* ============================================================================
   GRAPHICS PASS - richer cards, gradients, hero sheen, badges, entrance fx
   (appended; frontier palette + existing CSS variables preserved)
   ============================================================================ */

/* ---- Entity images & icon fallback ---- */
.ent-img{width:40px;height:40px;border-radius:9px;object-fit:contain;background:#090604;
  border:1px solid var(--line2);box-shadow:0 2px 6px rgba(0,0,0,.4);flex-shrink:0}
.ent-img.lg{width:64px;height:64px;border-radius:11px}
.ent-img.sm{width:28px;height:28px;border-radius:7px}
.icon-fallback{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:9px;background:linear-gradient(135deg,var(--panel3),var(--panel2));
  border:1px solid var(--line2);flex-shrink:0}
.icon-fallback svg,.icon-fallback .icon{width:22px;height:22px;fill:var(--accent)}
.icon-fallback.lg{width:64px;height:64px} .icon-fallback.lg svg,.icon-fallback.lg .icon{width:34px;height:34px}
.icon-fallback.sm{width:28px;height:28px} .icon-fallback.sm svg,.icon-fallback.sm .icon{width:16px;height:16px}

/* ---- Section-header illustration symbols ---- */
.section-il{width:34px;height:34px;flex-shrink:0;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.section-il.lg{width:48px;height:48px}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.section-head h2{margin:0}

/* ---- Card elevation & hover ---- */
.panel{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; position:relative;}
.panel::after{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--line2);transition:.18s ease;border-radius:var(--radius) 0 0 var(--radius)}
.panel:hover::after{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.panel:hover{border-color:var(--line2);box-shadow:0 8px 28px rgba(0,0,0,.72),0 0 15px rgba(214,161,90,.14)}
.rail-card{transition:border-color .18s ease,box-shadow .18s ease; border-left: 2px solid var(--line2)}
.rail-card:hover{border-color:var(--line2);box-shadow:0 4px 16px rgba(0,0,0,.6); border-left-color:var(--accent)}

/* ---- Richer item cards by rarity (gradient + glow) ---- */
.item-card{position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--panel3),var(--panel2) 60%,#121826);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.item-card:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.05),transparent 45%);opacity:.8}
.item-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.item-card .ico,.item-card .ent-img,.item-card .icon-fallback{position:relative;z-index:1}
.rarity-uncommon{background:linear-gradient(165deg,rgba(70,196,110,.14),var(--panel2) 55%,#121826);border-color:rgba(70,196,110,.5)}
.rarity-rare{background:linear-gradient(165deg,rgba(74,144,217,.16),var(--panel2) 55%,#121826);border-color:rgba(74,144,217,.55)}
.rarity-epic{background:linear-gradient(165deg,rgba(169,107,214,.18),var(--panel2) 55%,#121826);border-color:rgba(169,107,214,.6)}
.rarity-legendary{background:linear-gradient(165deg,rgba(240,168,48,.2),var(--panel2) 55%,#121826);border-color:rgba(240,168,48,.7)}
.rarity-uncommon:hover{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 16px rgba(70,196,110,.18)}
.rarity-rare:hover{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 16px rgba(74,144,217,.2)}
.rarity-epic:hover{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 18px rgba(169,107,214,.22)}
.rarity-legendary:hover{box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 22px rgba(240,168,48,.28)}

/* ---- Hero with animated gradient sheen ---- */
.hero{background:linear-gradient(120deg,var(--panel),var(--panel3) 70%);background-size:200% 200%;
  animation:hero-pan 18s ease infinite;box-shadow:var(--shadow);border-left: 4px solid var(--accent)}
.hero:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(214,161,90,.13) 48%,transparent 60%);
  background-size:280% 100%;animation:hero-sheen 7s ease-in-out infinite}
.hero>*{position:relative;z-index:1}
@keyframes hero-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes hero-sheen{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.hero,.hero:before{animation:none}}

/* ---- Badges / pills ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:20px;
  background:var(--panel3);border:1px solid var(--line2);color:var(--muted);line-height:1.4}
.badge .icon{width:12px;height:12px}
.badge.green{background:rgba(70,196,110,.14);border-color:var(--green);color:#9be6b3}
.badge.gold{background:rgba(240,168,48,.14);border-color:var(--gold);color:#f4d896}
.badge.red{background:rgba(232,85,78,.14);border-color:var(--red);color:#f3b3b0}
.badge.blue{background:rgba(74,144,217,.14);border-color:var(--blue);color:#aecdf0}
.badge.purple{background:rgba(169,107,214,.14);border-color:var(--purple);color:#d4b3ec}
.badge.cyan{background:rgba(57,198,214,.14);border-color:var(--cyan);color:#a5e7ef}
.pill.green{background:rgba(70,196,110,.16);color:#9be6b3}
.pill.gold{background:rgba(240,168,48,.16);color:#f4d896}
.pill.red{background:rgba(232,85,78,.16);color:#f3b3b0}
.pill.blue{background:rgba(74,144,217,.16);color:#aecdf0}
.pill.dim{background:var(--panel3);color:var(--muted)}

/* ---- Big-number stat block ---- */
.stat-bignum{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14px 12px;border-radius:var(--radius);
  background:linear-gradient(165deg,var(--panel2),#121826);border:1px solid var(--line);
  transition:border-color .18s ease,transform .18s ease}
.stat-bignum:hover{border-color:var(--line2);transform:translateY(-2px)}
.stat-bignum .n{font-size:1.7rem;font-weight:800;line-height:1.1;color:#fff;
  letter-spacing:.3px;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,var(--accent2));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.stat-bignum .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-top:5px}
.stat-bignum.green .n{background:linear-gradient(180deg,#fff,var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-bignum.red .n{background:linear-gradient(180deg,#fff,var(--red));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-bignum.blue .n{background:linear-gradient(180deg,#fff,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- Entrance transitions ---- */
@keyframes uc-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes uc-fade-in{from{opacity:0}to{opacity:1}}
.content>.panel,.content>.hero,.content>.grid,.content>.flash{animation:uc-fade-up .34s ease both}
.content>.panel:nth-child(2){animation-delay:.05s}
.content>.panel:nth-child(3){animation-delay:.1s}
.content>.panel:nth-child(4){animation-delay:.14s}
.item-card,.stat-bignum{animation:uc-fade-in .3s ease both}
.flash{animation:uc-fade-up .3s ease both}
@media (prefers-reduced-motion:reduce){
  .content>.panel,.content>.hero,.content>.grid,.content>.flash,.item-card,.stat-bignum,.flash{animation:none}
}

/* ---- Buttons: subtle gloss on primary variants ---- */
.btn-primary,.btn-green,.btn-danger{position:relative;overflow:hidden}
.btn-primary:before,.btn-green:before,.btn-danger:before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.btn-primary:hover,.btn-green:hover,.btn-danger:hover{box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* Prominent admin entry in sidebar */
.nav-item.nav-admin{margin:6px 8px;border:1px solid var(--red);border-radius:7px;color:#ff9b95;background:rgba(232,85,78,.08)}
.nav-item.nav-admin .icon{fill:var(--red)}
.nav-item.nav-admin:hover{background:rgba(232,85,78,.18)}

/* ---------------- Admin workbench ---------------- */
body.admin-mode{--accent:#d6a15a;--accent2:#8f6541;--gold:#f0c66f}
.admin-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;overflow:hidden}
.admin-hero-main{display:grid;grid-template-columns:74px minmax(0,1fr);gap:16px;align-items:center}
.admin-hero-icon{width:74px;height:62px;border-radius:8px;overflow:hidden;border:1px solid var(--line2);background:#080604;box-shadow:var(--glow)}
.admin-hero-img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.admin-hero h1{margin:0 0 5px}
.admin-hero p{max-width:900px;margin:0}
.admin-hero-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.admin-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;min-width:min(520px,100%)}
.admin-metric{background:rgba(0,0,0,.24);border:1px solid rgba(214,161,90,.24);border-radius:8px;padding:9px 10px;min-width:0}
.admin-metric span{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-metric b{display:block;color:var(--text);font-size:1.18rem;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums}
.admin-stat-card{min-height:86px}
.admin-module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.admin-module-card{border:1px solid rgba(214,161,90,.20);border-radius:8px;background:rgba(0,0,0,.20);padding:10px;min-width:0}
.admin-module-head{display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:center;margin-bottom:8px}
.admin-module-icon{width:42px;height:34px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.10)}
.admin-module-head strong{display:block;color:var(--text);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-module-head span{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase}
.admin-module-links{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.admin-module-links a{display:flex;align-items:center;gap:5px;min-width:0;padding:5px 6px;border-radius:6px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.04);color:var(--muted);font-size:.72rem}
.admin-module-links a:hover{background:rgba(214,161,90,.11);color:var(--text);text-decoration:none}
.admin-module-links .icon{width:16px;height:16px;object-fit:cover;border-radius:4px}
.admin-timer-list{display:grid;gap:6px}
.admin-timer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border:1px solid rgba(214,161,90,.18);border-radius:7px;background:rgba(0,0,0,.18);color:var(--text)}
.admin-timer-row:hover{text-decoration:none;border-color:var(--line2);background:rgba(214,161,90,.08)}
.admin-timer-row b{display:block;font-size:.76rem;color:var(--gold)}
.admin-timer-row small{display:block;color:var(--muted);font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:390px}
.admin-timer-row strong{font-variant-numeric:tabular-nums;color:var(--text)}
.admin-tabs{display:block}
.admin-tabbar{display:flex;gap:6px;flex-wrap:wrap;padding:6px;border:1px solid rgba(214,161,90,.16);border-radius:9px;background:rgba(0,0,0,.18);margin-bottom:12px}
.admin-tabbar-wide{max-height:184px;overflow:auto}
.admin-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(214,161,90,.18);background:rgba(255,255,255,.035);color:var(--muted);border-radius:7px;padding:7px 9px;font-family:var(--font-body);font-weight:800;font-size:.74rem;cursor:pointer;min-height:38px}
.admin-tab:hover{color:var(--text);border-color:var(--line2);background:rgba(214,161,90,.08)}
.admin-tab.active{color:#100b06;background:linear-gradient(180deg,var(--gold),#c79545);border-color:var(--gold);box-shadow:0 0 12px rgba(240,198,111,.18)}
.admin-tab-icon{width:22px;height:18px;object-fit:cover;border-radius:4px;border:1px solid rgba(0,0,0,.18)}
.admin-tab b{display:inline-grid;place-items:center;min-width:19px;height:19px;border-radius:999px;background:rgba(0,0,0,.22);color:inherit;font-size:.65rem}
.admin-tab-panel{display:none}
.admin-tab-panel.active{display:block}
.admin-tab-note{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px dashed rgba(214,161,90,.22);border-radius:7px;padding:8px 10px;margin-bottom:12px;background:rgba(0,0,0,.14)}
.admin-tab-note strong{color:var(--gold)}
.admin-tab-note span{color:var(--muted);font-size:.76rem;text-align:right}
.adm-field{margin-bottom:4px}
.adm-field label{display:block;font-size:.72rem;font-weight:800;color:var(--text);letter-spacing:.3px;margin-bottom:3px}
.adm-field .adm-hint{display:block;font-size:.68rem;color:var(--muted);margin-top:3px;line-height:1.35}
.adm-field input,.adm-field select,.adm-field textarea{width:100%}
.adm-imgprev{margin-bottom:5px}.adm-thumb{width:58px;height:58px;border-radius:6px;object-fit:contain;background:#090604;border:1px solid var(--line)}
.adm-clear{display:inline-flex;gap:4px;align-items:center;font-size:.7rem;color:var(--muted);margin-top:3px}
.adm-imgpick{width:100%;margin-bottom:4px}.adm-uploadrow{display:flex;flex-direction:column;gap:2px;margin-bottom:3px}
.admin-editor-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.admin-ledger-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px) auto;gap:12px;align-items:end;margin-bottom:12px}
.admin-ledger-head h2{margin:0 0 3px}
.admin-ledger-search{display:flex;align-items:center;gap:8px;margin:0;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.22);padding:0 10px;height:42px}
.admin-ledger-search .icon{width:18px;height:18px;object-fit:cover;border-radius:4px}
.admin-ledger-search input{border:0;background:transparent;box-shadow:none;padding:0;min-width:0}
.admin-ledger-search input:focus{box-shadow:none;background:transparent}
.admin-ledger-count{min-width:82px;border:1px solid rgba(214,161,90,.22);border-radius:8px;background:rgba(0,0,0,.18);padding:7px 10px;text-align:center}
.admin-ledger-count b{display:block;color:var(--gold);font-size:1.08rem}
.admin-ledger-count span{display:block;color:var(--muted);font-size:.62rem;text-transform:uppercase}
.table-scroll{overflow:auto;border:1px solid rgba(214,161,90,.12);border-radius:8px}
.admin-table th,.admin-table td{white-space:nowrap}
.admin-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.admin-guide-card{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 9px;border:1px solid rgba(214,161,90,.20);border-radius:8px;background:rgba(0,0,0,.18);padding:10px;color:var(--text)}
.admin-guide-card:hover{text-decoration:none;background:rgba(214,161,90,.08);border-color:var(--line2)}
.admin-guide-icon{grid-row:1/3;width:42px;height:34px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.10)}
.admin-guide-card strong{font-size:.88rem}
.admin-guide-card span{color:var(--muted);font-size:.72rem;line-height:1.35}
.admin-pacing-panel{position:relative}
.timer-jumpbar{margin-bottom:14px}
.timer-jumpbar a.admin-tab{text-decoration:none}
.admin-pacing-title{display:flex;align-items:center;gap:8px;margin:18px 0 10px;color:var(--gold)}
.admin-pacing-title:first-of-type{margin-top:8px}
.timer-control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:12px}
.timer-card{border:1px solid rgba(214,161,90,.22);border-radius:8px;background:linear-gradient(180deg,rgba(35,22,13,.78),rgba(11,8,5,.78));padding:11px;display:grid;gap:10px;min-width:0}
.timer-card-head{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:start}
.timer-card-icon{width:48px;height:42px;object-fit:cover;border-radius:7px;border:1px solid rgba(255,255,255,.10);background:#070503}
.timer-card h3{margin:0 0 3px;font-size:1rem;color:var(--text)}
.timer-card p{margin:0;color:var(--muted);font-size:.73rem;line-height:1.35}
.timer-mode-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center}
.timer-mode-row label,.timer-slider label{font-size:.68rem;text-transform:uppercase;color:var(--muted);font-weight:900;letter-spacing:.04em}
.timer-mode-row select{height:36px}
.timer-range-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.timer-slider{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:6px 8px;align-items:center;border:1px solid rgba(214,161,90,.13);border-radius:7px;padding:8px;background:rgba(0,0,0,.16)}
.timer-slider label{grid-column:1/3;display:flex;justify-content:space-between;gap:10px;align-items:center}
.timer-slider output{color:var(--gold);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;font-size:.74rem}
.timer-slider input[type=range]{width:100%;accent-color:var(--gold)}
.timer-slider input[type=number]{height:32px;padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums}
.timer-card.is-fixed [data-random-block]{opacity:.42}
.timer-card.is-random [data-fixed-block]{opacity:.42}
.timer-card-foot{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.06);padding-top:8px}
.timer-card-foot span{color:var(--gold);font-weight:900;font-size:.76rem;font-variant-numeric:tabular-nums}
.timer-card-foot a{font-size:.72rem;font-weight:900}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.cfg-card{border:1px solid rgba(214,161,90,.20);border-radius:8px;background:rgba(0,0,0,.18);padding:10px;display:grid;gap:7px}
.cfg-card.is-hidden{display:none}
.cfg-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.cfg-card-head strong{color:var(--text);font-size:.82rem;line-height:1.25}
.cfg-card code{font-size:.68rem;color:var(--gold);background:rgba(0,0,0,.22);border:1px solid rgba(214,161,90,.14);border-radius:5px;padding:3px 5px;width:max-content;max-width:100%;white-space:normal}
.cfg-context{display:grid;gap:2px;border-top:1px solid rgba(255,255,255,.06);padding-top:6px}
.cfg-context a{font-size:.72rem;font-weight:800}
.cfg-context span{color:var(--muted);font-size:.68rem;line-height:1.35}
@media (max-width:900px){
  .admin-hero{grid-template-columns:1fr}
  .admin-hero-main{grid-template-columns:54px minmax(0,1fr)}
  .admin-hero-icon{width:54px;height:48px}
  .admin-ledger-head{grid-template-columns:1fr}
  .admin-ledger-search{width:100%}
  .admin-ledger-count{text-align:left;width:max-content}
  .admin-tabbar{flex-wrap:nowrap;overflow:auto}
  .admin-tab{flex:0 0 auto}
  .admin-tab-note{display:block}
  .admin-tab-note span{display:block;text-align:left;margin-top:4px}
  .timer-control-grid{grid-template-columns:1fr}
  .timer-range-pair{grid-template-columns:1fr}
  .timer-slider{grid-template-columns:minmax(0,1fr) 70px}
  .cfg-grid{grid-template-columns:1fr}
}

/* ============ The Wire - messenger dock + DM windows ============ */
#wire-dock{position:fixed;right:18px;bottom:18px;z-index:200;font-size:13px}
#wire-launch{position:relative;display:flex;align-items:center;gap:6px;background:linear-gradient(180deg,var(--accent2),var(--accent));color:#241803;border:0;border-radius:24px;padding:9px 15px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#wire-launch .wire-ico{font-size:1.1rem}
#wire-launch .wire-ico-img{width:22px;height:22px;border-radius:6px;object-fit:cover;display:block}
#wire-unread{position:absolute;top:-6px;left:-6px;background:var(--red);color:#fff;border-radius:10px;font-size:.66rem;padding:1px 6px}
/* Unread-message alert: the launcher flashes orange<->brown and a label bubble appears above it. */
@keyframes wireFlash{
  0%,100%{background:linear-gradient(180deg,#ffb347,#e8871e);color:#241803}
  50%{background:linear-gradient(180deg,#6b3f1a,#3e2410);color:#f5e6cf}
}
#wire-launch.has-unread{animation:wireFlash 1.1s ease-in-out infinite}
#wire-unread-label{position:absolute;right:0;bottom:calc(100% + 8px);white-space:nowrap;max-width:70vw;overflow:hidden;text-overflow:ellipsis;background:#4a2c14;color:#f5e6cf;border:1px solid var(--accent,#c9a227);border-radius:10px;padding:7px 12px;font-size:.8rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.5);pointer-events:none}
#wire-unread-label[hidden]{display:none}
#wire-panel{position:absolute;right:0;bottom:54px;width:280px;max-height:60vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6);overflow:hidden}
.wire-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:linear-gradient(180deg,#1d2536,#141b29);border-bottom:1px solid var(--line)}
.wire-head b{color:#fff}
#wire-close{cursor:pointer;color:var(--muted)}
.wire-status{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
.wire-status select,.wire-status input{padding:5px 8px;font-size:.8rem}
.wire-contacts{overflow-y:auto;flex:1}
.wire-contact{position:relative;display:flex;align-items:center;gap:9px;padding:8px 11px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.03)}
.wire-contact:hover{background:var(--panel2)}
.wire-av{width:30px;height:30px;border-radius:7px;background:#0a0e16;flex-shrink:0}
.wire-c-name{display:flex;flex-direction:column;line-height:1.2;color:#fff;flex:1;min-width:0}
.wire-c-name small{color:var(--muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wire-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.wire-online{background:var(--green);box-shadow:0 0 6px var(--green)} .wire-away{background:var(--accent)} .wire-busy{background:var(--red)} .wire-offline{background:#566}
.wire-badge{background:var(--red);color:#fff;border-radius:10px;font-size:.66rem;padding:1px 6px}
.wire-empty{padding:16px;color:var(--muted);text-align:center;font-size:.82rem}
.wire-foot{padding:8px 11px;border-top:1px solid var(--line);font-size:.76rem}
.wire-foot a{color:var(--muted)}
.wire-win{position:fixed;bottom:18px;width:250px;height:330px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:10px 10px 0 0;box-shadow:0 10px 30px rgba(0,0,0,.6);z-index:201}
.wire-win.wire-min{height:42px}
.wire-win-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(180deg,#1d2536,#141b29);border-bottom:1px solid var(--line);cursor:pointer;border-radius:10px 10px 0 0}
.wire-win-head span{color:#fff;flex:1;font-weight:600}
.wire-win-btns i{font-style:normal;cursor:pointer;margin-left:6px;color:var(--muted)}
.wire-win-msgs{flex:1;overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:5px}
.wire-min .wire-win-msgs,.wire-min .wire-win-form{display:none}
.wm{max-width:80%;padding:6px 9px;border-radius:9px;font-size:.82rem;line-height:1.35}
.wm-me{align-self:flex-end;background:linear-gradient(180deg,var(--accent2),var(--accent));color:#241803}
.wm-them{align-self:flex-start;background:var(--panel3);color:var(--text)}
.wire-win-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.wire-win-input{flex:1;padding:6px 9px;font-size:.82rem}
@media(max-width:760px){#wire-panel{width:84vw} .wire-win{display:none}}

/* Banner ad slot + ad-free upsell */
.adbanner{display:flex;align-items:center;gap:12px;max-width:1300px;margin:0 auto;padding:8px 20px;background:repeating-linear-gradient(45deg,#15110a,#15110a 12px,#1a1409 12px,#1a1409 24px);border-top:1px dashed var(--line2);font-size:.82rem}
.adbanner-tag{background:var(--muted);color:#0a0e16;font-weight:700;font-size:.64rem;padding:2px 6px;border-radius:4px}
.adbanner-copy{color:var(--muted);flex:1}
.adbanner-cta{color:var(--accent);font-weight:600}
/* mount cards */
.car-card{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:12px}

/* Messenger window buttons: bigger, clearly clickable hit targets */
.wire-win-btns{display:flex;gap:2px;align-items:center}
.wire-win-btns i{font-style:normal;cursor:pointer;padding:3px 7px;border-radius:5px;color:var(--muted);user-select:none;line-height:1}
.wire-win-btns i:hover{background:rgba(255,255,255,.12);color:#fff}
#wire-close{cursor:pointer;padding:2px 8px;border-radius:5px}
#wire-close:hover{background:rgba(255,255,255,.12);color:#fff}

/* FIX: the panel's display:flex overrode the [hidden] attribute, so close could not hide it. */
#wire-panel[hidden]{display:none!important}
.wire-win[hidden]{display:none!important}

/* ============================================================
   Scene headers - cinematic per-page backdrops (scene_header()).
   Makes each screen read as a place in the city, not a bare title.
   ============================================================ */
.scene{position:relative;display:flex;align-items:flex-end;min-height:124px;
  padding:24px 22px;margin-bottom:18px;border:1px solid var(--line2);border-radius:var(--radius);
  overflow:hidden;background:#0f131c center/cover no-repeat;box-shadow:var(--shadow)}
.scene-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.75) 52%,rgba(0,0,0,.25) 100%),
             linear-gradient(0deg,rgba(0,0,0,.85),transparent 70%);box-shadow: inset 0 0 40px rgba(0,0,0,1)}
.scene-body{position:relative;z-index:1;width:100%}
.scene-tag{display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--accent2);
  background:rgba(240,168,48,.12);border:1px solid rgba(240,168,48,.42);padding:3px 11px;border-radius:20px}
.scene-title{margin:.45rem 0 0;font-size:1.75rem;line-height:1.08;letter-spacing:.3px;
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.scene-sub{margin:.4rem 0 0;color:var(--text);opacity:.84;max-width:64ch;font-size:.92rem;
  text-shadow:0 1px 10px rgba(0,0,0,.85)}
.scene-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.scene-chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--text);
  background:rgba(6,8,12,.5);border:1px solid var(--line2);padding:5px 11px;border-radius:8px;
  backdrop-filter:blur(3px)}
.scene-chip .icon{width:14px;height:14px;fill:var(--accent)}
.scene-chip b{color:var(--accent2);font-weight:800}
@media (max-width:640px){.scene{min-height:96px;padding:16px 14px}.scene-title{font-size:1.32rem}.scene-sub{font-size:.85rem}}

/* ---- Status-bar regen timers + refill icons (app.js drives .bar-timer) ---- */
.bar-label{justify-content:flex-start;align-items:center;gap:6px}
.bar-timer{font-size:.6rem;color:var(--dim);font-weight:600;text-transform:none;letter-spacing:0;white-space:nowrap}
.bar-timer.full{color:var(--green)}
.bar-refill{margin-left:auto;display:inline-flex;align-items:center;opacity:.55;color:var(--accent2);transition:.15s}
.bar-refill:hover{opacity:1;transform:scale(1.14)}
.bar-refill .icon{width:13px;height:13px;fill:var(--accent2)}

/* ---- Legacy action hubs are hidden; the custom quickbar replaces them. ---- */
.mobile-hub{display:none}

/* ---- Collapsible sidebar groups ---- */
.nav-group-title{font-family:var(--font-body)}
.nav-group-title:hover{color:var(--text);border-color:rgba(214,161,90,.18)}
.nav-group-title:hover .nav-group-name{color:var(--text)}
.nav-caret{transition:transform .18s ease;font-size:1.05rem;line-height:1;opacity:.6;font-weight:400;flex:0 0 auto}
.nav-group.open>.nav-group-title .nav-caret{transform:rotate(90deg)}
.nav-group:not(.open)>.nav-group-items{display:none}
.sidebar.searching .nav-group>.nav-group-items{display:block}
.sidebar.searching .nav-group-title .nav-caret{transform:rotate(90deg)}

/* ---- Player quickbar ---- */
.quickbar{position:sticky;top:97px;z-index:54;background:linear-gradient(180deg,#21170f,#120d08);
  border-bottom:1px solid var(--line);box-shadow:0 5px 18px rgba(0,0,0,.38);padding:7px 14px}
.quickbar-main{display:flex;align-items:flex-start;gap:10px}
.quickbar-slots{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px;flex:1;min-width:0;max-width:none;
  overflow:visible;padding:1px 0 3px}
.quick-slot{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 11px 0 8px;border:1px solid var(--line);
  border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.28));color:var(--text);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);overflow:hidden;flex:0 0 auto;max-width:190px}
.quick-slot:hover,.quick-slot.drag-over{border-color:var(--accent);text-decoration:none;box-shadow:0 0 0 1px rgba(214,161,90,.22), inset 0 0 16px rgba(214,161,90,.10)}
.quick-slot.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(214,161,90,.22),rgba(0,0,0,.22))}
.quick-slot.empty{display:none}
.quick-img,.quick-img .quick-icon{width:24px;height:24px;display:block;flex:0 0 auto}
.quick-icon{object-fit:cover;border-radius:6px}
.quick-label{position:static;display:inline-block;max-width:120px;font-size:.68rem;font-weight:800;color:#f0e6d2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-num{position:static;flex:0 0 auto;font-size:.58rem;font-weight:900;color:var(--muted);min-width:9px;text-align:center}
.quickbar-tools{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto}
.quickbar-btn{height:34px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.24);
  color:var(--text);font-family:var(--font-heading);font-size:.65rem;font-weight:900;text-transform:uppercase;cursor:pointer;padding:0 9px}
.quickbar-btn:hover,.quickbar-btn[aria-pressed="true"]{border-color:var(--accent);background:rgba(214,161,90,.12)}
.quickbar-btn .icon{width:18px;height:18px;object-fit:cover;border-radius:5px}
.quickbar.editing .quick-slot{cursor:grab}
.quickbar.editing .quick-slot.empty{display:inline-flex;opacity:.55}
.quickbar.editing .quick-slot.selected{outline:2px solid var(--accent);outline-offset:1px}
.quickbar-palette{margin-top:7px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(0,0,0,.20);padding:8px}
.quickbar-palette-head{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.quickbar-palette-head input{width:260px;max-width:32vw;height:34px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.25);color:var(--text);padding:7px 9px;font:inherit;font-size:.8rem}
.quickbar-status{font-size:.72rem;color:var(--muted);margin-left:auto;white-space:nowrap}
.quickbar-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:230px;overflow:auto}
.quick-option{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;gap:1px 7px;align-items:center;text-align:left;
  min-height:42px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:rgba(255,255,255,.035);color:var(--text);padding:5px;cursor:grab}
.quick-option:hover{border-color:var(--accent);background:rgba(214,161,90,.10)}
.quick-option.is-hidden{display:none}
.quick-option-icon{grid-row:1/3;width:28px;height:28px;object-fit:cover;border-radius:5px}
.quick-option span{font-size:.74rem;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-option small{font-size:.56rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Inline list filter (travel destinations etc.) ---- */
.list-filter{width:100%;max-width:280px;margin:0 0 10px;padding:7px 11px;border:1px solid var(--line2);
  border-radius:8px;background:var(--panel2);color:var(--text);font:inherit;font-size:.85rem}
.list-filter:focus{outline:none;border-color:var(--accent)}

/* ---- Rider bar + always-on action dock ---- */
.riderbar{display:flex;align-items:center;gap:12px;padding:8px 18px;background:linear-gradient(180deg,#20170f,#15100b);border-bottom:1px solid var(--line);position:sticky;top:97px;z-index:54;box-shadow:0 4px 16px rgba(0,0,0,.28)}
.has-riderbar .sidebar,.has-riderbar .rail{top:142px;height:calc(100vh - 142px)}
.rider-objective{display:flex;align-items:center;gap:10px;min-width:220px;max-width:390px;color:var(--text);text-decoration:none}
.rider-objective:hover{text-decoration:none;color:#fff}
.rider-objective-img{width:38px;height:38px;border-radius:8px;object-fit:cover;border:1px solid var(--line2)}
.rider-objective-copy{display:flex;flex-direction:column;min-width:0;line-height:1.18}
.rider-objective-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;color:#fff}
.rider-kicker{font-size:.62rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800}
.rider-metrics{display:flex;align-items:center;gap:7px;margin-left:auto}
.rider-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.035);color:var(--text);text-decoration:none;font-size:.72rem;min-height:32px}
.rider-chip:hover,.rider-chip.hot{border-color:var(--accent);text-decoration:none;box-shadow:0 0 0 1px rgba(214,161,90,.16)}
.rider-chip .icon{width:16px;height:16px}.rider-chip b{color:var(--gold)}.rider-chip span{color:var(--muted)}
.rider-sound-chip{cursor:pointer;font-family:var(--font-body)}
.rider-actions{display:flex;align-items:center;gap:10px}
.rider-actions.split-actions{display:grid;grid-template-columns:repeat(3,max-content);align-items:center}
.rider-action-group{position:relative;display:flex;align-items:center;gap:4px;padding:3px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(0,0,0,.12)}
.rider-action-group::before{content:attr(data-zone);position:absolute;left:8px;top:-9px;padding:0 5px;border-radius:999px;background:#1c140d;color:var(--muted);font-size:.48rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.rider-zone-1{box-shadow:inset 0 0 0 1px rgba(201,162,39,.10)}
.rider-zone-2{box-shadow:inset 0 0 0 1px rgba(80,154,210,.12)}
.rider-zone-3{box-shadow:inset 0 0 0 1px rgba(92,176,121,.12)}
.rider-action{width:50px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.18);color:var(--muted);font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;text-decoration:none;cursor:pointer;font-family:var(--font-body)}
.rider-action:hover,.rider-action.active{border-color:var(--accent);color:var(--text);text-decoration:none;background:rgba(214,161,90,.10)}
.rider-action .icon{width:23px;height:20px;object-fit:cover;border-radius:5px}
.rider-action-thumb{width:31px;height:21px;object-fit:cover;border-radius:5px;border:1px solid rgba(255,255,255,.10);display:block}
.rider-action.muted{opacity:.72}
.rider-sound{padding:0}
.snd-toggle{right:18px;bottom:86px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--text);padding:7px 10px;font-family:var(--font-body);box-shadow:var(--shadow)}
.snd-toggle .snd-icon{width:24px;height:24px;object-fit:cover;border-radius:7px;display:block}
.snd-toggle [data-sound-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.snd-toggle.muted{opacity:.65}
.mobile-hub.action-dock{display:flex;position:fixed;left:50%;right:auto;bottom:12px;z-index:62;transform:translateX(-50%);width:min(620px,calc(100vw - 28px));background:rgba(25,20,14,.94);border:1px solid var(--line2);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.55);overflow:hidden;backdrop-filter:blur(4px)}
.mobile-hub.action-dock.split-dock{width:min(900px,calc(100vw - 28px));gap:6px;padding:5px;overflow:hidden}
.dock-zone{position:relative;display:flex;align-items:stretch;gap:2px;flex:1;min-width:0;padding:12px 3px 3px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.035)}
.dock-zone::before{content:attr(data-zone);position:absolute;left:7px;top:2px;color:var(--muted);font-size:.47rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.split-dock .mh-item{border-radius:7px}
.mobile-hub.action-dock .mh-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px 6px;color:var(--muted);text-decoration:none;font-size:.58rem;font-weight:800;letter-spacing:.35px;text-transform:uppercase}
.mobile-hub.action-dock .mh-img{width:42px;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--line);background:rgba(0,0,0,.3);display:block}
.mobile-hub.action-dock .mh-thumb{width:100%;height:100%;object-fit:cover;display:block}
.mobile-hub.action-dock .mh-item.active{color:var(--accent2)}
.mobile-hub.action-dock .mh-item.active .mh-img{border-color:var(--accent);box-shadow:0 0 0 1px rgba(214,161,90,.24)}
.mobile-hub.action-dock.outlaw-dock{background:rgba(30,16,12,.96)}
.mobile-hub.action-dock.outlaw-dock .mh-item.active{color:#f0c66f}
.has-riderbar{padding-bottom:92px}
.has-riderbar .footer{margin-bottom:82px}
@media(max-width:1100px){.rider-actions{display:none}.rider-objective{max-width:none}.rider-metrics{margin-left:0}}
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .topbar{height:auto;min-height:46px;padding:6px 8px;gap:6px;align-items:center;flex-wrap:wrap}
  .brand{font-size:.95rem;gap:6px;min-width:0;flex:1 1 auto}
  .brand-logo{width:26px;height:26px}
  .mobile-menu-btn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 9px;border:1px solid var(--line2);border-radius:8px;
    background:rgba(0,0,0,.22);color:var(--text);font-family:var(--font-heading);font-size:.68rem;text-transform:uppercase;letter-spacing:0;cursor:pointer}
  .mobile-menu-btn .icon{width:18px;height:18px}
  .mobile-user-chip{display:inline-flex;align-items:center;gap:5px;height:32px;max-width:132px;padding:3px 8px 3px 3px;
    border:1px solid var(--line2);border-radius:999px;background:rgba(0,0,0,.24);color:var(--text);text-decoration:none;min-width:0}
  .mobile-user-chip:hover{text-decoration:none;border-color:var(--accent)}
  .mobile-user-chip.donator{border-color:var(--accent);box-shadow:var(--glow)}
  .mobile-user-chip .avatar-xs{width:24px;height:24px;flex:0 0 auto}
  .mobile-user-chip span{min-width:0;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;font-weight:900;color:#fff}
  .mobile-user-chip b{font-size:.56rem;color:var(--muted);white-space:nowrap}
  .mobile-nav-shade{display:block;position:fixed;inset:0;z-index:190;background:rgba(4,3,2,.62);backdrop-filter:blur(2px)}
  .mobile-nav-shade[hidden]{display:none}
  .mobile-nav-drawer{display:flex;position:fixed;top:0;bottom:0;left:0;z-index:200;width:min(336px,calc(100vw - 36px));
    transform:translateX(-105%);transition:transform .18s ease;background:linear-gradient(180deg,#261b11,#120d08);
    border-right:1px solid var(--line2);box-shadow:18px 0 46px rgba(0,0,0,.65);padding:10px;flex-direction:column;gap:10px}
  body.mobile-nav-open .mobile-nav-drawer{transform:translateX(0)}
  body.mobile-nav-open{overflow:hidden}
  .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .mobile-nav-title{display:flex;align-items:center;gap:7px;font-family:var(--font-heading);color:var(--accent);text-transform:uppercase;font-size:.92rem}
  .mobile-nav-title .icon{width:22px;height:22px}
  .mobile-nav-close{width:34px;height:34px;border-radius:8px;border:1px solid var(--line2);background:rgba(0,0,0,.26);color:var(--text);font-size:1.35rem;line-height:1;cursor:pointer}
  .mobile-nav-search input{height:38px;padding:8px 10px;font-size:.9rem;background:rgba(0,0,0,.22)}
  .mobile-nav-groups{overflow:auto;padding:0 2px 12px;display:flex;flex-direction:column;gap:10px}
  .mobile-nav-group{border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.03);padding:8px}
  .mobile-nav-group h3{display:flex;align-items:center;gap:6px;margin:0 0 7px;font-size:.68rem;color:var(--muted);letter-spacing:.07em}
  .mobile-nav-group-icon{width:19px;height:16px;object-fit:cover;border-radius:4px;border:1px solid rgba(255,255,255,.08)}
  .mobile-nav-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .mobile-nav-item{display:flex;align-items:center;gap:7px;min-height:36px;padding:7px;border-radius:7px;background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.055);color:var(--text);text-decoration:none;font-size:.74rem;font-weight:800;min-width:0}
  .mobile-nav-item:hover,.mobile-nav-item.active{text-decoration:none;border-color:var(--accent);background:rgba(214,161,90,.12)}
  .mobile-nav-item .icon{width:22px;height:22px;object-fit:cover;border-radius:5px}
  .mobile-nav-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-nav-item.is-hidden,.mobile-nav-group.is-hidden{display:none}
  .topsearch{display:none}
  .wallet{order:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1 0 100%;margin-left:0;gap:5px;max-width:100%;overflow:hidden;padding-bottom:1px}
  .chip{min-width:0;justify-content:center;overflow:hidden;font-size:.66rem;padding:4px 6px;gap:4px}
  .chip .icon{width:13px;height:13px}
  .wallet .chip.cash{grid-column:span 2}
  .wallet .chip.city{grid-column:span 2}
  .wallet .chip.rank{grid-column:span 2}
  .wallet .chip.pet{grid-column:span 2}
  .wallet .chip-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wallet .chip.mail,.wallet .chip.admin{padding-inline:5px}
  .wallet .chip.user{display:none}
  .rail-toggle-chip{display:none!important}
  .chip.user .pname{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .statusbar{position:static;top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px 8px}
  .bar{min-width:0}
  .bar-label{font-size:.55rem;gap:4px;min-width:0;overflow:hidden}
  .bar-num,.bar-timer{font-size:.56rem;white-space:nowrap}
  .bar-track{height:7px}
  .quickbar{display:none}
  .shell{display:block;min-height:0}
  body.rail-collapsed .shell{display:block;grid-template-columns:none}
  .sidebar,.has-riderbar .sidebar,.has-quickbar .sidebar,.rail,.has-riderbar .rail,.has-quickbar .rail{display:none!important}
  .content{padding:12px 10px 18px}
  .panel{padding:12px;margin-bottom:12px;border-radius:8px}
  .scene{min-height:auto;padding:14px 12px;margin-bottom:12px}
  .scene-title{font-size:1.28rem;line-height:1.05}
  .scene-sub{font-size:.78rem;max-width:100%}
  .scene-chips{gap:6px}
  .scene-chip{font-size:.64rem;padding:4px 7px}
  .riderbar{position:static;top:auto;align-items:stretch;flex-direction:column;padding:8px 10px}
  .rider-objective{display:none}
  .rider-metrics{width:100%;justify-content:space-between;gap:5px}
  .rider-chip{flex:1;justify-content:center}.has-riderbar .sidebar,.has-riderbar .rail{top:auto;height:auto}
  .rider-chip{font-size:.62rem;min-height:30px;padding:4px 5px}
  .rider-chip .icon{width:14px;height:14px}
  .rider-actions.split-actions{display:flex;width:100%;gap:7px;overflow-x:auto;padding:6px 0 2px}
  .rider-action-group{flex:0 0 auto}
  .rider-action{width:44px;height:38px;font-size:.5rem}
  .rider-action-thumb{width:28px;height:18px}
  .mobile-hub.action-dock{left:0;right:0;bottom:0;transform:none;width:100%;border-left:0;border-right:0;border-bottom:0;border-radius:0}
  .mobile-hub.action-dock.split-dock{width:100%;gap:4px;padding:4px;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scroll-snap-type:x mandatory}
  .dock-zone{gap:1px;padding:12px 1px 2px}
  .dock-zone::before{left:4px;font-size:.41rem}
  .mobile-hub.action-dock.split-dock .dock-zone{flex:0 0 calc(100vw - 10px);scroll-snap-align:start}
  .mobile-hub.action-dock .mh-item{font-size:.5rem;letter-spacing:.16px;padding:6px 1px 5px}
  .mobile-hub.action-dock .mh-img{width:34px;height:22px}
  .riderbar,.mobile-hub.action-dock{display:none!important}
  .has-riderbar{padding-bottom:0}.has-riderbar .footer{display:none}
}
@media(max-width:360px){
  .mobile-user-chip{max-width:84px;padding-right:6px}
  .mobile-user-chip span{max-width:42px}
  .mobile-user-chip b{display:none}
  .mobile-menu-btn span{display:none}
}

/* Button in-flight state (paired with the submit handler in app.js): feedback + blocks double-submit. */
.btn.is-busy{opacity:.6;pointer-events:none;cursor:progress}
.btn.is-busy::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.45em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn.is-busy::after{animation:none}}

/* Toasts from the AJAX action layer (app.js). */
#uc-toasts{position:fixed;right:14px;bottom:14px;z-index:1200;display:flex;flex-direction:column;gap:8px;max-width:340px}
.uc-toast{cursor:pointer;font-size:.86rem;line-height:1.35;color:var(--text,#f3e7c9);background:var(--panel,#241a12);border:1px solid var(--line2,#6b5235);border-left:4px solid var(--muted,#888);border-radius:8px;padding:9px 12px;box-shadow:0 6px 22px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.uc-toast.on{opacity:1;transform:none}
.uc-toast.uc-success{border-left-color:var(--green,#3c8a3c)}
.uc-toast.uc-error{border-left-color:var(--red,#b4472b)}
.uc-toast.uc-warn{border-left-color:var(--accent,#c9a227)}
.uc-toast.uc-info{border-left-color:var(--blue,#6b8fb4)}
@media(max-width:640px){#uc-toasts{left:10px;right:10px;bottom:10px;max-width:none}}
@media(prefers-reduced-motion:reduce){.uc-toast{transition:opacity .25s}}

/* Wanted posters — reusable aged-paper "REWARD" card (wanted / bounty / profile). Physical object: hardcoded paper tones in both modes. */
.poster-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:18px}
.wposter{position:relative;background:#e8dcc0;color:#2a1c0e;border-radius:3px;padding:14px 12px 12px;box-shadow:0 5px 16px rgba(0,0,0,.5);border:1px solid #b89b6a;text-align:center;transform:rotate(var(--tilt,0deg));transition:transform .12s}
.wposter:hover{transform:rotate(0deg) scale(1.02);z-index:2}
.wposter::before{content:"";position:absolute;inset:5px;border:2px solid #7a5a2e;border-radius:2px;pointer-events:none}
.wposter .wp-top{font-family:'Rye',var(--font-serif,serif);font-size:1.15rem;letter-spacing:2px;line-height:1}
.wposter .wp-sub{font-family:'Roboto Slab',serif;font-size:.6rem;letter-spacing:3px;margin:3px 0 9px;color:#5a3e1c}
.wposter .wp-mug{width:100%;height:118px;object-fit:cover;filter:sepia(.55) contrast(1.05);border:2px solid #7a5a2e;background:#d8c69e;display:block}
.wposter .wp-mug.icon-fallback{display:flex;align-items:center;justify-content:center}
.wposter .wp-name{font-family:'Rye',var(--font-serif,serif);font-size:.98rem;margin:9px 0 3px;word-break:break-word;line-height:1.1}
.wposter .wp-reward{font-family:'Roboto Slab',serif;font-size:.64rem;letter-spacing:1px;color:#5a3e1c}
.wposter .wp-reward b{display:block;font-family:'Rye',var(--font-serif,serif);font-size:1.2rem;color:#7a2e12;letter-spacing:1px}
.wposter .wp-status{font-family:'Roboto Slab',serif;font-size:.58rem;letter-spacing:1px;text-transform:uppercase;margin-top:5px;color:#4a3418}
.wposter .wp-status.hot{color:#7a2e12}
.wposter .btn{margin-top:9px}