/* The Reach of Solarao — Hour 0 client.
   Evolved from mockups/ (home_mockup.html's own token system): Cinzel
   display + Work Sans body, the forest-dark panel language. */
:root{
  --bg-canopy:#0c1710; --bg-app:#10190f; --bg-panel:#182417; --bg-panel-raised:#21301e;
  --bg-panel-hi:#2b3d26; --bg-card:#1b291a; --border-bark:#3a4f31; --border-bark-lit:#526e43;
  --text-primary:#eef4e8; --text-muted:#a9bd9c; --text-faint:#71876a;
  --accent-gold:#e3b34e; --accent-gold-dim:#8a6a2e; --accent-green:#8fd15a;
  --accent-blue:#6fc8e8; --hp:#e8636b; --hp-dim:#7a2e33; --danger:#e8636b;
  --shadow-deep:rgba(0,0,0,0.5);
}
*{ box-sizing:border-box; }
body{ margin:0; background:radial-gradient(ellipse 900px 500px at 50% -10%, rgba(143,209,90,0.10), transparent 60%), var(--bg-app);
  color:var(--text-primary); font-family:'Work Sans',-apple-system,sans-serif; font-size:15px; line-height:1.5; min-height:100vh; }
.shell{ max-width:1200px; margin:0 auto; padding:16px 16px 48px; display:flex; flex-direction:column; gap:14px; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 16px;
  background:linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel)); border:1px solid var(--border-bark); border-radius:10px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:1rem; color:var(--accent-gold); }
.brand .mark{ width:26px; height:26px; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #f0cf82, var(--accent-gold-dim)); border-radius:7px; font-size:14px; }
.chip{ display:flex; align-items:center; gap:7px; padding:4px 12px; background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); border-radius:999px; font-size:0.8rem; font-variant-numeric:tabular-nums; }
.chip b{ color:var(--accent-gold); }
.hp-wrap{ display:flex; align-items:center; gap:8px; min-width:200px; flex:1; max-width:320px; }
.hp-track{ flex:1; height:9px; border-radius:5px; background:var(--bg-canopy); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,0.5); }
.hp-track>span{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg, var(--hp-dim), var(--hp)); transition:width .3s ease; }
.hp-text{ font-variant-numeric:tabular-nums; font-weight:700; font-size:0.78rem; }

.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn{ padding:8px 18px; background:var(--bg-panel); border:1px solid var(--border-bark); border-radius:9px; color:var(--text-muted);
  font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:0.8rem; letter-spacing:0.05em; cursor:pointer; }
.tab-btn:hover{ border-color:var(--border-bark-lit); color:var(--text-primary); }
.tab-btn.active{ background:var(--bg-panel-hi); border-color:var(--accent-gold-dim); color:var(--accent-gold); }

.panel{ background:linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel)); border:1px solid var(--border-bark); border-radius:12px; box-shadow:0 8px 22px var(--shadow-deep); }
.panel-head{ padding:11px 14px 9px; border-bottom:1px solid var(--border-bark); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel-head h2{ margin:0; font-family:'Cinzel',Georgia,serif; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-green); }
.panel-body{ padding:12px 14px 14px; }

.grid-2{ display:grid; grid-template-columns:280px 1fr; gap:14px; align-items:start; }
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; } }

.list-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--border-bark); border-radius:9px; background:var(--bg-card); margin-bottom:7px; }
.list-row .meta{ font-size:0.8rem; min-width:0; }
.list-row .meta .name{ font-weight:700; }
.list-row .meta .sub{ color:var(--text-faint); font-size:0.72rem; }
.list-row .actions{ display:flex; gap:6px; flex-shrink:0; }
.list-row.locked{ opacity:.45; }
.skill-cell{ padding:8px 10px; border:1px solid var(--border-bark); border-radius:9px; background:var(--bg-card); cursor:pointer; margin-bottom:6px; display:flex; justify-content:space-between; font-size:0.8rem; }
.skill-cell:hover{ border-color:var(--border-bark-lit); }
.skill-cell.active{ border-color:var(--accent-gold-dim); background:var(--bg-panel-hi); }
.skill-cell .lvl{ font-variant-numeric:tabular-nums; color:var(--accent-gold); font-weight:700; }

button.act{ padding:6px 13px; background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); border-radius:8px; color:var(--text-primary); font-weight:600; font-size:0.76rem; cursor:pointer; }
button.act:hover{ border-color:var(--accent-gold); color:var(--accent-gold); }
button.act.primary{ background:linear-gradient(180deg, #3a5330, #2b3d26); border-color:var(--accent-gold-dim); color:var(--accent-gold); }
button.act.danger{ border-color:var(--hp-dim); color:var(--hp); }
button.act:disabled{ opacity:.4; cursor:default; }
input,select{ background:var(--bg-canopy); border:1px solid var(--border-bark); border-radius:8px; color:var(--text-primary); padding:7px 10px; font:inherit; font-size:0.82rem; }

.log{ font-size:0.78rem; max-height:280px; overflow-y:auto; display:flex; flex-direction:column-reverse; gap:5px; }
.log .entry{ padding:6px 9px; background:var(--bg-card); border:1px solid var(--border-bark); border-radius:8px; }
.log .entry.win{ border-color:#3f6b33; }
.log .entry.loss{ border-color:var(--hp-dim); }

.active-action{ display:flex; align-items:center; gap:10px; padding:6px 12px; background:var(--bg-panel-hi); border:1px solid var(--accent-gold-dim); border-radius:999px; font-size:0.78rem; }
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--accent-green); animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* Centering that survives tall content and phone viewports: a flex
   overlay that scrolls, with the modal on margin:auto (2026-09-01). */
.overlay{ position:fixed; inset:0; background:rgba(5,10,6,0.82); display:none; overflow-y:auto;
  padding:max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); z-index:50; }
.overlay.open{ display:flex; }
.modal{ margin:auto; width:min(480px, 92vw); max-height:85vh; overflow-y:auto; background:linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel)); border:1px solid var(--border-bark-lit); border-radius:14px; padding:22px; box-shadow:0 18px 50px var(--shadow-deep); }
.modal h2{ margin:0 0 8px; font-family:'Cinzel',Georgia,serif; color:var(--accent-gold); font-size:1.05rem; }
.modal.death h2{ color:var(--hp); }
.modal p{ color:var(--text-muted); font-size:0.85rem; }

.login-card{ max-width:420px; margin:10vh auto 0; }
.login-card .field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; font-size:0.8rem; color:var(--text-muted); }
.toast-area{ position:fixed; bottom:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:60; max-width:340px; }
.toast{ padding:9px 13px; background:var(--bg-panel-raised); border:1px solid var(--border-bark-lit); border-left:3px solid var(--accent-green); border-radius:9px; font-size:0.78rem; box-shadow:0 8px 22px var(--shadow-deep); }
.toast.err{ border-left-color:var(--danger); }
.muted{ color:var(--text-faint); font-size:0.75rem; }
.pill-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.pill{ padding:3px 11px; border:1px solid var(--border-bark); border-radius:999px; font-size:0.72rem; color:var(--text-muted); cursor:pointer; }
.pill.active{ border-color:var(--accent-gold-dim); color:var(--accent-gold); }

/* ---- Nav drawer — lifted from mockups/nav_drawer_mockup.html ---- */
:root{ --bg-drawer:#16211a; --bg-drawer-raised:#1e2c22;
  --red:#d9645f; --green:#6fb85a; --blue:#5f9ce8; --teal:#4bb8ab;
  --terracotta:#c47a4a; --violet:#a56fe0; --ivory:#e8e0c4; --slate:#8b93a8;
  --accent-record:#e3b34e; }
.ham{ font-size:1.25rem; cursor:pointer; padding:2px 10px; border:1px solid var(--border-bark); border-radius:8px; background:var(--bg-panel); }
.ham:hover{ border-color:var(--accent-gold-dim); color:var(--accent-gold); }
.drawer-overlay{ position:fixed; inset:0; background:rgba(4,8,5,0.6); z-index:40; display:none; }
.drawer-overlay.open{ display:block; }
.drawer{ position:fixed; top:0; left:0; bottom:0; width:340px; max-width:92vw; background:var(--bg-drawer); border-right:1px solid var(--border-bark); box-shadow:12px 0 40px var(--shadow-deep); display:none; flex-direction:column; overflow-x:hidden; z-index:45; }
.drawer.open{ display:flex; animation:slide-in .22s ease-out; }
@keyframes slide-in{ from{ transform:translateX(-100%);} to{ transform:translateX(0);} }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--border-bark); background:var(--bg-drawer-raised); flex-shrink:0; }
.drawer-header .brand{ font-size:0.92rem; }
.close-btn{ cursor:pointer; color:var(--text-faint); padding:2px 8px; }
.close-btn:hover{ color:var(--text-primary); }
.quick-row{ display:flex; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border-bark); }
.quick-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 0; background:var(--bg-panel); border:1px solid var(--border-bark); border-radius:9px; font-size:0.74rem; font-weight:600; cursor:pointer; }
.quick-btn:hover{ border-color:var(--accent-gold-dim); color:var(--accent-gold); }
.drawer-scroll{ flex:1; overflow-y:auto; padding:6px 0 14px; }
.group-label{ padding:12px 14px 6px; font-family:'Cinzel',Georgia,serif; font-size:0.64rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); }
.skill-row{ display:flex; align-items:center; gap:10px; padding:7px 14px; cursor:pointer; position:relative; }
.skill-row:hover{ background:rgba(255,255,255,0.03); }
.skill-row.active-skill{ background:linear-gradient(90deg, rgba(143,209,90,0.12), transparent); }
.skill-row .s-icon{ width:30px; height:30px; border-radius:8px; background:var(--bg-panel); border:1px solid var(--border-bark-lit); display:grid; place-items:center; font-size:15px; flex-shrink:0; }
.s-body{ flex:1; min-width:0; }
.s-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.s-name{ font-weight:600; font-size:0.8rem; }
.s-lvl{ font-size:0.68rem; color:var(--text-faint); font-variant-numeric:tabular-nums; flex-shrink:0; }
.s-bar{ height:4px; border-radius:2px; background:var(--bg-canopy); overflow:hidden; margin-top:4px; box-shadow:inset 0 1px 2px rgba(0,0,0,0.5); }
.s-bar>span{ display:block; height:100%; border-radius:2px; }
.s-next{ font-size:0.62rem; color:var(--text-faint); margin-top:2px; text-align:right; }
.rec-row{ display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; }
.rec-row:hover{ background:rgba(255,255,255,0.03); }
.rec-row .r-name{ flex:1; font-weight:600; font-size:0.8rem; }
.rec-row .caret{ color:var(--text-faint); font-size:0.85rem; }
.maxed .s-icon{ border-color:var(--accent-gold) !important; box-shadow:0 0 10px rgba(227,179,78,0.5); }
.maxed .s-bar>span{ background:var(--accent-gold) !important; }
.maxed .s-lvl{ color:var(--accent-gold); font-weight:700; }
.tier-chip{ display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border:1px solid var(--border-bark); border-radius:999px; font-size:0.7rem; margin:2px 4px 2px 0; }
.tier-chip.done{ border-color:var(--accent-gold-dim); color:var(--accent-gold); }

/* ---- Skill screen — ported from mockups/woodcutting_mockup.html ---- */
.skill-header{ padding:14px 16px; }
.skill-header-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; }
.skill-title{ display:flex; align-items:center; gap:10px; }
.skill-title .ico{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:19px; background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); }
.skill-title h1{ margin:0; font-family:'Cinzel',Georgia,serif; font-size:1.3rem; font-weight:600; }
.skill-title .sub{ font-size:0.72rem; color:var(--text-faint); }
.spill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.spill{ display:flex; flex-direction:column; padding:5px 12px; border-radius:8px; background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); min-width:88px; }
.spill .k{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); }
.spill .v{ font-variant-numeric:tabular-nums; font-weight:600; font-size:0.86rem; }
.spill.gold .v{ color:var(--accent-gold); }
.badge-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.sbadge{ font-size:0.68rem; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); color:var(--text-muted); display:flex; align-items:center; gap:5px; }
.sbadge .fill{ width:44px; height:4px; border-radius:3px; background:var(--bg-canopy); overflow:hidden; }
.sbadge .fill>span{ display:block; height:100%; background:var(--accent-gold); }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; padding:4px 16px 16px; }
.action-card{ position:relative; background:var(--bg-card); border:1px solid var(--border-bark); border-top:3px solid var(--border-bark-lit); border-radius:10px; padding:12px 12px 11px; transition:transform .15s ease, box-shadow .15s ease; }
.action-card.unlocked:hover{ transform:translateY(-2px); box-shadow:0 8px 18px var(--shadow-deep); }
.action-card.active{ border-top-color:var(--accent-green); box-shadow:0 0 0 1px rgba(143,209,90,0.35), 0 10px 22px var(--shadow-deep); }
.card-eyebrow{ font-size:0.64rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); text-align:center; }
.card-name{ font-weight:700; font-size:0.92rem; text-align:center; margin-top:1px; }
.card-sub{ font-size:0.68rem; color:var(--text-muted); text-align:center; margin-top:2px; font-variant-numeric:tabular-nums; }
.card-stage{ position:relative; height:64px; display:grid; place-items:center; margin:8px 0 4px; font-size:38px; }
.card-stage .glyph{ transform-origin:50% 100%; animation:card-sway 4.6s ease-in-out infinite; filter:drop-shadow(0 6px 8px rgba(0,0,0,0.35)); }
@keyframes card-sway{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }
.action-card.locked .card-stage .glyph{ animation:none; filter:grayscale(1) opacity(0.5); }
.action-card.locked .card-name, .action-card.locked .card-sub{ color:var(--text-faint); }
.card-io{ font-size:0.64rem; color:var(--text-faint); text-align:center; min-height:14px; }
.card-actions{ display:flex; gap:6px; margin-top:9px; }
.card-actions button{ flex:1; }
.lock-pill{ display:block; text-align:center; font-size:0.68rem; font-weight:700; padding:5px 0; border-radius:6px; background:rgba(217,122,99,0.15); color:#d97a63; border:1px solid rgba(217,122,99,0.35); margin-top:9px; }
.xp-pop{ position:absolute; left:50%; top:6px; transform:translateX(-50%); font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:0.92rem; color:var(--accent-gold); text-shadow:0 2px 5px rgba(0,0,0,0.6); animation:xp-rise 1.05s ease-out forwards; white-space:nowrap; pointer-events:none; z-index:5; }
@keyframes xp-rise{ 0%{ transform:translateX(-50%) translateY(0); opacity:0;} 15%{opacity:1;} 100%{ transform:translateX(-50%) translateY(-30px); opacity:0;} }
@media (prefers-reduced-motion: reduce){ .card-stage .glyph, .xp-pop{ animation:none !important; } }

/* ---- The live action loop: cycle bar + gain pops ---- */
.cycle-bar{ height:8px; border-radius:5px; background:var(--bg-canopy); overflow:hidden; box-shadow:inset 0 0 0 1px var(--border-bark); margin-top:9px; }
.cycle-bar>span{ display:block; height:100%; width:0%; border-radius:5px; background:linear-gradient(90deg, var(--accent-gold-dim), var(--accent-gold)); animation:cycle-fill linear infinite; }
@keyframes cycle-fill{ from{ width:0%; } to{ width:100%; } }
.gain-pop{ position:absolute; left:50%; top:-6px; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:7px 14px; background:var(--bg-panel-raised); border:1px solid var(--accent-gold-dim); border-radius:999px; box-shadow:0 10px 24px var(--shadow-deep); white-space:nowrap; z-index:8; animation:gain-rise 1.6s ease-out forwards; pointer-events:none; }
.gain-pop .big{ font-size:1.35rem; }
.gain-pop .txt{ font-size:0.78rem; font-weight:700; }
.gain-pop .xp{ color:var(--accent-gold); font-family:'Cinzel',Georgia,serif; }
@keyframes gain-rise{ 0%{ transform:translateX(-50%) translateY(10px); opacity:0; } 14%{ transform:translateX(-50%) translateY(-14px); opacity:1; } 82%{ transform:translateX(-50%) translateY(-14px); opacity:1; } 100%{ transform:translateX(-50%) translateY(-22px); opacity:0; } }

/* ---- Long-haul bars in the skill header (XP -> 126, Mastery -> 99) ---- */
.hbar-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
.hbar{ display:flex; align-items:center; gap:10px; flex:1; min-width:280px; }
.hbar .k{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--text-muted); white-space:nowrap; }
.hbar .track{ flex:1; height:8px; background:var(--bg-deep); border:1px solid var(--border-bark);
  border-radius:99px; overflow:hidden; }
.hbar .track>span{ display:block; height:100%; border-radius:99px; min-width:2px;
  background:linear-gradient(90deg, var(--accent-leaf), var(--accent-gold)); transition:width .4s ease; }
.hbar.mastery .track>span{ background:linear-gradient(90deg, #a56fe0, var(--accent-gold)); }
.hbar .v{ font-size:0.72rem; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- Per-action Mastery (Melvor-style, 2026-08-27) ---- */
.m-row{ display:flex; align-items:center; gap:7px; margin:6px 0 2px; }
.m-lvl{ font-family:'Cinzel',serif; font-size:0.7rem; font-weight:700; color:#a56fe0;
  letter-spacing:0.04em; white-space:nowrap; }
.m-track{ flex:1; height:5px; background:var(--bg-deep); border:1px solid var(--border-bark);
  border-radius:99px; overflow:hidden; display:block; }
.m-track>span{ display:block; height:100%; background:linear-gradient(90deg, #7a4fc0, #a56fe0);
  border-radius:99px; min-width:2px; transition:width .4s ease; }
.m-up{ background:var(--bg-panel-hi); border:1px solid #a56fe099; color:#a56fe0;
  border-radius:6px; font-size:0.62rem; line-height:1; padding:3px 6px; cursor:pointer; }
.m-up:hover{ background:#a56fe022; }
.hbar .track{ position:relative; }
.hbar .track .tick{ position:absolute; top:-2px; bottom:-2px; width:2px;
  background:var(--border-bark-lit); opacity:0.7; z-index:2; }
.hbar .track .tick.on{ background:var(--accent-gold); opacity:1; }

/* ---- Junk pops (fishing's failed slice) ---- */
.gain-pop.junk{ border-color:var(--border-bark); }
.gain-pop.junk .txt{ color:var(--text-faint); font-style:italic; font-weight:500; }

/* ---- Fishing screen (design: mockups/fishing_mockup.html) ---- */
.loc-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.loc-tab{ padding:8px 14px; border-radius:9px; background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit);
  font-size:0.8rem; font-weight:600; color:var(--text-muted); cursor:pointer; }
.loc-tab.active{ background:rgba(95,171,232,0.14); border-color:rgba(95,171,232,0.4); color:#5fabe8; }
.loc-tab.locked{ opacity:0.55; }
.odds-row{ display:flex; gap:14px; font-size:0.72rem; color:var(--text-muted); padding:8px 14px;
  border-top:1px solid var(--border-bark); align-items:center; }
.odds-row b{ color:var(--text-primary); font-variant-numeric:tabular-nums; }
.card-stage .bobber{ display:inline-block; animation:bob-float 1.8s ease-in-out infinite; }
@keyframes bob-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (prefers-reduced-motion: reduce){ .card-stage .bobber{ animation:none; } }

/* ---- Melvor-style Bank ---- */
.bank-toolbar{ display:flex; align-items:center; gap:10px; padding:10px 14px; flex-wrap:wrap; }
.bank-toolbar input{ flex:1; min-width:180px; background:var(--bg-deep); border:1px solid var(--border-bark);
  border-radius:8px; color:var(--text-primary); padding:7px 12px; font:inherit; font-size:0.82rem; }
.bank-toolbar .goldv{ color:var(--accent-gold); font-variant-numeric:tabular-nums; }
.cat-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.cat-tab{ padding:6px 12px; border-radius:8px; background:var(--bg-panel); border:1px solid var(--border-bark);
  font-size:0.72rem; font-weight:600; color:var(--text-muted); cursor:pointer; }
.cat-tab.active{ background:var(--bg-panel-hi); border-color:var(--accent-gold-dim); color:var(--accent-gold); }
.bank-layout{ display:grid; grid-template-columns:1fr 280px; gap:14px; align-items:start; }
@media (max-width:900px){ .bank-layout{ grid-template-columns:1fr; } }
.bank-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); gap:8px; padding:12px; }
.item-tile{ position:relative; aspect-ratio:1; display:grid; place-items:center; background:var(--bg-card, rgba(0,0,0,0.18));
  border:1px solid var(--border-bark); border-radius:9px; cursor:pointer; }
.item-tile:hover{ border-color:var(--border-bark-lit); }
.item-tile.sel{ border-color:var(--accent-gold); box-shadow:0 0 0 1px var(--accent-gold-dim); }
.item-tile .glyph{ font-size:1.5rem; }
.item-tile .qty{ position:absolute; right:4px; bottom:2px; font-size:0.62rem; font-weight:700;
  color:var(--accent-gold); font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(0,0,0,0.8); }
.item-tile .lockmark{ position:absolute; left:3px; top:2px; font-size:0.6rem; }
.bank-info .bank-sel-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bank-info .bank-sel-head .glyph{ font-size:2rem; }
.bank-info .bank-sel-head .name{ font-weight:700; }
.bank-info .bank-sel-head .sub{ font-size:0.72rem; color:var(--text-muted); }
.bank-sel-rows .r{ display:flex; justify-content:space-between; gap:8px; font-size:0.78rem;
  padding:5px 0; border-bottom:1px solid var(--border-bark); }
.bank-sel-rows .r span{ color:var(--text-muted); }
.bank-sel-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

/* ---- Bonfire panel ---- */
.bonfire-live{ font-size:0.85rem; margin-bottom:10px; }
.bonfire-live .xp{ color:var(--accent-gold); font-weight:700; }
.bonfire-row{ display:flex; gap:8px; flex-wrap:wrap; }
/* ---- Farming ---- */
.card-actions select{ background:var(--bg-deep); border:1px solid var(--border-bark);
  border-radius:7px; color:var(--text-primary); padding:5px 8px; font:inherit; font-size:0.72rem; max-width:150px; }

/* ---- Cooking Processes board ---- */
.proc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:12px; padding:12px 14px; }
.proc-card{ background:var(--bg-card, rgba(0,0,0,0.18)); border:1px solid var(--border-bark);
  border-top:3px solid var(--border-bark-lit); border-radius:10px; padding:12px; }
.proc-card.running{ border-top-color:var(--accent-gold); }
.proc-card.locked-proc{ opacity:0.92; }
.proc-title{ font-family:'Cinzel',serif; font-weight:700; font-size:0.8rem; }
.proc-sub{ font-size:0.68rem; color:var(--text-muted); margin:2px 0 6px; }
.proc-state{ font-size:0.8rem; margin:6px 0; }
.proc-bill{ margin:6px 0; }
.bill-row{ font-size:0.72rem; font-variant-numeric:tabular-nums; padding:1px 0; }
.bill-row.ok{ color:var(--accent-leaf, #6fb85a); }
.bill-row.no{ color:#d9645f; }
/* ---- fishing method toggle ---- */
.method-toggle{ display:flex; gap:6px; }
.method-btn{ padding:4px 12px; border-radius:7px; background:var(--bg-panel-hi);
  border:1px solid var(--border-bark-lit); font-size:0.7rem; font-weight:700;
  color:var(--text-muted); cursor:pointer; }
.method-btn.active{ background:rgba(95,171,232,0.2); border-color:rgba(95,171,232,0.5); color:#5fabe8; }
/* ---- combat monster cards ---- */
.monster-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px; }
.monster-card{ background:var(--bg-card, rgba(0,0,0,0.18)); border:1px solid var(--border-bark);
  border-radius:10px; padding:10px; text-align:center; }
.monster-card.boss{ border-color:var(--accent-gold-dim); }
.monster-card .m-glyph{ font-size:1.8rem; }
.monster-card .m-name{ font-weight:700; font-size:0.82rem; }
.monster-card .m-sub{ font-size:0.66rem; color:var(--text-muted); margin:2px 0 8px; }
.monster-card .card-actions{ justify-content:center; }

/* ---- Mining: rock HP + pickaxe strip ---- */
.tool-strip{ display:flex; align-items:center; gap:12px; }
.tool-strip .tool-ico{ font-size:1.8rem; }
.tool-strip .rockdmg{ color:var(--accent-gold); }
.rock-row{ display:flex; align-items:center; gap:7px; margin:6px 0 2px; }
.rock-row .k{ font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.rock-row .v{ font-size:0.68rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.rock-track{ flex:1; height:6px; background:var(--bg-deep); border:1px solid var(--border-bark);
  border-radius:99px; overflow:hidden; display:block; }
.rock-track>span{ display:block; height:100%; background:linear-gradient(90deg, #4bb8ab, #6fb85a);
  border-radius:99px; min-width:2px; transition:width .5s ease; }

/* ---- The four-tab combat page ---- */
.combat-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.combat-player{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.combat-player .k{ font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.combat-player select{ background:var(--bg-deep); border:1px solid var(--border-bark); border-radius:7px;
  color:var(--text-primary); padding:5px 8px; font:inherit; font-size:0.76rem; }
.hp-track.big{ width:140px; height:10px; background:var(--bg-deep); border:1px solid var(--border-bark);
  border-radius:99px; overflow:hidden; display:inline-block; }
.hp-track.big>span{ display:block; height:100%; background:linear-gradient(90deg,#d9645f,#e08a5f); }
.combat-layout{ display:grid; grid-template-columns:1fr 320px; gap:14px; margin-top:14px; align-items:start; }
@media (max-width:980px){ .combat-layout{ grid-template-columns:1fr; } }
.slayer-task .name{ font-weight:700; }
.seq-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.seq-chip{ background:var(--bg-card, rgba(0,0,0,0.18)); border:1px solid var(--border-bark);
  border-radius:9px; padding:6px 12px; font-size:0.76rem; font-weight:600; }
.seq-chip i{ font-style:normal; color:var(--text-muted); font-size:0.66rem; margin-left:4px; }
.seq-chip.boss{ border-color:var(--accent-gold-dim); color:var(--accent-gold); }
.seq-arrow{ color:var(--text-faint, #607f6f); }

/* ---- Melvor-style Shop cards ---- */
.shop-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:12px; padding:14px; }
.shop-card{ background:var(--bg-card, rgba(0,0,0,0.18)); border:1px solid var(--border-bark);
  border-radius:11px; padding:14px 12px; display:flex; flex-direction:column; align-items:center;
  gap:4px; text-align:center; transition:border-color .15s ease, transform .15s ease; }
.shop-card:hover{ border-color:var(--accent-gold-dim); transform:translateY(-2px); }
.shop-card .s-pic{ font-size:2.2rem; height:52px; display:grid; place-items:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.shop-card .s-name{ font-weight:700; font-size:0.82rem; line-height:1.25; }
.shop-card .s-sub{ font-size:0.64rem; color:var(--text-muted); }
.shop-card .s-price{ color:var(--accent-gold); font-weight:700; font-size:0.85rem;
  font-variant-numeric:tabular-nums; margin:4px 0 6px; }
.shop-card .act{ width:100%; }

/* ---- Shop: upgrade states ---- */
.shop-card.locked{ opacity:0.72; }
.shop-card .s-owned{ color:var(--accent-leaf, #6fb85a); font-weight:700; font-size:0.78rem; padding:7px 0; }
.shop-card .lock-pill{ margin-top:4px; }

/* ==== The Melvor-identical combat workspace (2026-08-27) ==== */
.mel-tabs .loc-tab{ flex:1; text-align:center; }
.area-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:12px; align-items:start; }
.area-card{ background:linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel)); border:1px solid var(--border-bark); border-radius:11px; overflow:hidden; }
.area-card.open{ grid-column:1 / -1; }
.area-head{ display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; }
.area-head:hover{ background:rgba(255,255,255,0.03); }
.area-art{ font-size:2rem; }
.area-title{ flex:1; } .area-title b{ font-family:'Cinzel',serif; font-size:0.95rem; }
.here-badge{ font-size:0.62rem; color:var(--accent-gold); margin-left:6px; }
.area-info{ font-size:0.68rem; color:var(--text-muted); white-space:nowrap; }
.diff-badge{ font-size:0.6rem; font-weight:700; padding:2px 8px; border-radius:99px; letter-spacing:0.05em; }
.diff-badge.easy{ background:#2c4a2c; color:#8fd07f; } .diff-badge.normal{ background:#4a3d1e; color:#e3b34e; }
.diff-badge.hard{ background:#4a2424; color:#e08a8a; } .diff-badge.elite{ background:#3a2450; color:#c59df0; }
.area-monsters{ border-top:1px solid var(--border-bark); padding:6px 14px 12px; }
.am-cols{ display:grid; grid-template-columns:60px 1fr 170px; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint, #607f6f); padding:6px 0; border-bottom:1px solid var(--border-bark); }
.am-row{ display:grid; grid-template-columns:60px 1fr 170px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border-bark); }
.am-row:last-child{ border-bottom:0; }
.am-art{ font-size:1.7rem; text-align:center; }
.am-meta b{ font-size:0.84rem; } .am-meta .muted{ font-size:0.68rem; }
.am-opts{ display:flex; flex-direction:column; gap:5px; }
.am-opts .act{ width:100%; }
.act.danger{ border-color:#a04040; color:#e08a8a; } .act.danger:hover{ background:#4a2424; }
.act.gold{ border-color:var(--accent-gold-dim); color:var(--accent-gold); }
/* live workspace */
.combat-live{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width:1000px){ .combat-live{ grid-template-columns:1fr; } }
.cpanel{ background:linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel)); border:1px solid var(--border-bark); border-radius:12px; }
.cpanel.player-side{ border-top:3px solid #6fb85a; }
.cpanel.enemy-side{ border-top:3px solid #d9645f; }
.cpanel-hp{ padding:12px 14px; border-bottom:1px solid var(--border-bark); }
.hp-line{ display:flex; justify-content:space-between; font-size:0.82rem; margin-bottom:6px; }
.big-track{ height:14px; background:var(--bg-deep); border:1px solid var(--border-bark); border-radius:99px; overflow:hidden; }
.big-track>span{ display:block; height:100%; transition:width .25s ease; }
.big-track.green>span{ background:linear-gradient(90deg,#4e8f3e,#6fb85a); }
.big-track.red>span{ background:linear-gradient(90deg,#a04040,#d9645f); }
.atimer{ height:5px; background:var(--bg-deep); border-radius:99px; overflow:hidden; margin-top:5px; }
.atimer>span{ display:block; height:100%; width:0; background:var(--accent-gold-dim); }
@keyframes atimer-fill{ from{ width:0; } to{ width:100%; } }
.cpanel-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; }
@media (max-width:640px){ .cpanel-cols{ grid-template-columns:1fr; } }
.ccol{ display:flex; flex-direction:column; gap:10px; }
.mini-panel{ background:rgba(0,0,0,0.18); border:1px solid var(--border-bark); border-radius:9px; }
.mini-head{ padding:7px 10px; border-bottom:1px solid var(--border-bark); font-family:'Cinzel',serif; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; display:flex; justify-content:space-between; align-items:center; }
.mini-body{ padding:9px 10px; }
.linky{ color:#5f9ce8; cursor:pointer; font-size:0.66rem; font-family:'Work Sans',sans-serif; text-transform:none; letter-spacing:0; }
.linky:hover{ text-decoration:underline; }
.stat-rows .srow{ display:flex; justify-content:space-between; font-size:0.74rem; padding:2px 0; }
.stat-rows .srow span{ color:var(--text-muted); }
.stat-rows hr{ border:0; border-top:1px solid var(--border-bark); margin:5px 0; }
.menu-icons{ display:flex; gap:6px; }
.micon{ width:34px; height:34px; display:grid; place-items:center; background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); border-radius:8px; font-size:1rem; cursor:pointer; }
.micon:hover{ border-color:var(--accent-gold-dim); }
.food-row{ display:flex; gap:6px; }
.food-row select{ flex:1; background:var(--bg-deep); border:1px solid var(--border-bark); border-radius:7px; color:var(--text-primary); padding:6px 8px; font:inherit; font-size:0.7rem; min-width:0; }
.equip-grid{ display:flex; flex-direction:column; gap:5px; align-items:center; }
.eq-row{ display:flex; gap:5px; justify-content:center; }
.eq-slot{ position:relative; width:40px; height:40px; display:grid; place-items:center; background:var(--bg-deep); border:1px solid var(--border-bark); border-radius:8px; font-size:1.15rem; cursor:pointer; }
.eq-slot:hover{ border-color:var(--accent-gold-dim); }
.eq-slot .ph{ opacity:0.28; font-size:0.95rem; }
.eq-slot .qty-badge{ position:absolute; right:-4px; bottom:-4px; background:#a04040; color:#fff; font-size:0.55rem; font-weight:700; border-radius:99px; padding:1px 5px; }
.set-row, .wg-sets{ display:flex; gap:5px; justify-content:center; flex-wrap:nowrap; }
.set-btn{ width:30px; height:26px; display:grid; place-items:center; border-radius:7px; border:1px solid var(--border-bark-lit); background:var(--bg-panel-hi); color:var(--text-muted); font-weight:700; font-size:0.72rem; cursor:pointer; }
.set-btn.active{ background:#2c4a2c; border-color:#6fb85a; color:#8fd07f; }
.set-btn.locked{ opacity:0.65; cursor:not-allowed; font-size:0.62rem; }
.style-col{ display:flex; flex-direction:column; gap:6px; }
.style-btn{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); border-radius:8px; color:var(--text-muted); font-weight:700; font-size:0.78rem; cursor:pointer; }
.style-btn.active{ background:#2c4a2c; border-color:#6fb85a; color:#d7ecc9; }
.style-btn .muted{ font-size:0.6rem; font-weight:500; }
.enemy-stage{ position:relative; text-align:center; padding:14px 12px 8px; min-height:150px; }
.en-name{ font-family:'Cinzel',serif; font-weight:700; font-size:1rem; }
.en-area{ font-size:0.68rem; }
.en-art{ font-size:3.6rem; margin:8px 0; filter:drop-shadow(0 8px 14px rgba(0,0,0,0.5)); }
.en-splats, .pv-splats{ position:absolute; inset:0; pointer-events:none; }
.pv-splats{ left:auto; width:30%; }
.splat{ position:absolute; top:36%; font-family:'Cinzel',serif; font-weight:700; font-size:1rem; animation:splat-rise .85s ease-out forwards; }
.splat.hit{ color:#e08a8a; } .splat.miss{ color:#8b93a8; }
@keyframes splat-rise{ 0%{ transform:translateY(6px); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(-26px); opacity:0; } }
.mirror-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 12px 12px; }
.autochk{ display:flex; gap:6px; align-items:center; justify-content:center; font-size:0.66rem; color:var(--text-muted); margin-top:8px; }
.drop-sect{ font-family:'Cinzel',serif; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent-gold); margin:10px 0 4px; }
.drop-row{ font-size:0.78rem; padding:3px 0; display:flex; gap:6px; align-items:center; }
.drop-row .muted{ margin-left:auto; }
/* raid sequence chips */
.seq-chips{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:10px 4px 4px; font-size:0.7rem; color:var(--text-muted); }
/* the Spellbook picker */
.spell-list{ max-height:52vh; overflow-y:auto; padding-right:4px; }
.spell-row{ position:relative; padding:6px 8px; border:1px solid transparent; border-radius:8px; cursor:pointer; font-size:0.8rem; }
.spell-row:hover{ background:var(--bg-panel-hi); }
.spell-row.locked{ opacity:0.55; cursor:not-allowed; }
.spell-row.selected{ background:#2c4a2c; border-color:#6fb85a; }
.spell-row .s-owned{ position:absolute; right:10px; top:8px; font-size:0.68rem; }
.rune-short{ color:#e06c5a; }
/* floating widget */
#fight-widget{ position:fixed; right:18px; bottom:18px; z-index:100; width:230px; background:linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel)); border:1px solid var(--border-bark-lit); border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,0.55); padding:10px 12px; }
#fight-widget .wg-row{ display:flex; justify-content:space-between; font-size:0.68rem; margin-top:6px; }
#fight-widget .wg-name{ font-weight:700; }
.wg-track{ height:8px; background:var(--bg-deep); border-radius:99px; overflow:hidden; margin-top:3px; }
.wg-track>span{ display:block; height:100%; width:100%; transition:width .25s ease; }
.wg-track.green>span{ background:#6fb85a; } .wg-track.red>span{ background:#d9645f; }
#fight-widget .wg-actions{ display:flex; justify-content:space-between; margin-top:9px; }

/* ---- combat polish (2026-08-27): respawn ring, monster cards, loot tiles ---- */
.respawn-ring{ width:110px; height:110px; margin:14px auto; border-radius:50%;
  border:7px solid transparent; border-top-color:#d9645f; border-right-color:#d9645f;
  border-bottom-color:#d9645f; animation:ring-spin 1.1s linear infinite; }
@keyframes ring-spin{ to{ transform:rotate(360deg); } }
.am-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
@media (max-width:900px){ .am-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .am-grid{ grid-template-columns:1fr; } }
.mon-card{ background:rgba(0,0,0,0.18); border:1px solid var(--border-bark); border-radius:10px;
  padding:12px 10px; text-align:center; display:flex; flex-direction:column; gap:4px; align-items:center; }
.mon-card .mon-art{ font-size:2.1rem; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.mon-card b{ font-size:0.82rem; }
.mon-card .muted{ font-size:0.66rem; }
.mon-card .mon-btns{ display:flex; gap:6px; width:100%; margin-top:6px; }
.mon-card .mon-btns .act{ flex:1; }
.mon-card.boss-card{ border-color:var(--accent-gold-dim); }
.loot-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(44px,1fr)); gap:6px; }
.loot-tile{ position:relative; aspect-ratio:1; display:grid; place-items:center;
  background:var(--bg-deep); border:1px solid var(--border-bark); border-radius:8px; font-size:1.2rem; }
.loot-tile .qty{ position:absolute; right:2px; bottom:1px; font-size:0.58rem; font-weight:700;
  color:var(--accent-gold); text-shadow:0 1px 3px rgba(0,0,0,0.8); }

.chk-lock{ cursor:help; font-size:0.85rem; }

/* ---- narrow-width polish (2026-08-31): phones and split panes ---- */
@media (max-width:640px){
  .topbar{ flex-wrap:wrap; gap:8px; padding:8px 10px; }
  .spill-row{ gap:6px; }
  .spill{ min-width:70px; padding:4px 8px; }
  .card-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; padding:4px 8px 10px; }
  .shop-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; padding:10px; }
  .loc-tabs{ gap:5px; }
  .loc-tab{ font-size:0.68rem; padding:5px 8px; }
  .panel-head{ flex-wrap:wrap; gap:4px; }
  .panel-head .muted{ font-size:0.64rem; }
  #fight-widget{ width:180px; right:8px; bottom:8px; padding:8px; }
  .modal{ max-width:94vw; padding:14px; }
  .mel-tabs .loc-tab{ flex:1 1 auto; text-align:center; }
  .hbar-row{ flex-direction:column; }
  .area-head{ flex-wrap:wrap; }
  .seq-chips{ font-size:0.64rem; }
}
@media (max-width:420px){
  .card-grid{ grid-template-columns:1fr 1fr; }
  .shop-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- hiscores (2026-08-31) ---------- */
.hs-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.hs-table th { text-align: left; padding: 6px 8px; color: var(--muted); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); }
.hs-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.hs-rank { color: var(--muted); width: 2.2em; }
.hs-val { text-align: right; font-variant-numeric: tabular-nums; }
.hs-me td { background: color-mix(in srgb, var(--accent, #6fb85a) 12%, transparent); font-weight: 600; }

/* ---------- CA cosmetic milestones (2026-08-31) ---------- */
.enemy-stage { position: relative; overflow: hidden; border-radius: 10px;
  transition: background 0.6s; }
.enemy-stage[class*="banner-"] .en-art { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.65)); }
.banner-sunscorched_banner { background: linear-gradient(180deg, #4a2a12 0%, #7a4416 55%, #b3722a 100%); }
.banner-thornmire_banner { background: linear-gradient(180deg, #14261a 0%, #23422a 55%, #3c5a33 100%); }
.banner-ironhollow_banner { background: linear-gradient(180deg, #23262e 0%, #3a4050 55%, #5b6474 100%); }
.banner-bramblewood_banner { background: linear-gradient(180deg, #2a2012 0%, #45351a 55%, #6b5426 100%); }
.banner-ashveil_banner { background: linear-gradient(180deg, #1c161f 0%, #35293a 55%, #544357 100%); }
.banner-duskmire_banner { background: linear-gradient(180deg, #10131f 0%, #1c2338 55%, #2c3a5c 100%); }
.banner-sundered_horizon_banner { background:
  linear-gradient(180deg, #170d24 0%, #3b1a4d 45%, #8a2f5e 80%, #d96a4a 100%); }

.kill-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.kill-fx span { position: absolute; left: 50%; top: 55%; width: 7px; height: 7px;
  border-radius: 50%; opacity: 0;
  animation: fx-burst 0.9s ease-out var(--dl, 0s) forwards; }
@keyframes fx-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
.fx-emberglow span { background: radial-gradient(circle, #ffd27a, #e8722a); box-shadow: 0 0 10px #e8722a; }
.fx-ember_burst span { background: radial-gradient(circle, #fff1b8, #ff6a2a); box-shadow: 0 0 12px #ff6a2a;
  animation-duration: 1.05s; }
.fx-frost_shatter span { background: linear-gradient(135deg, #eaf9ff, #7ac8e8); border-radius: 2px;
  width: 9px; height: 9px; box-shadow: 0 0 8px #9fd8f0;
  animation-name: fx-shard; }
@keyframes fx-shard {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 70px)) rotate(200deg); opacity: 0; }
}
.fx-void_rend { display: grid; place-items: center; }
.fx-void_rend span { position: static; width: 4px; height: 0; border-radius: 3px;
  background: linear-gradient(180deg, #d9b8ff, #6a2ae8, #12041f);
  box-shadow: 0 0 22px #8a4ae8; opacity: 0; animation: fx-rift 1.1s ease-in-out forwards; }
@keyframes fx-rift {
  0% { height: 0; opacity: 0; }
  35% { height: 78%; opacity: 1; width: 5px; }
  70% { height: 82%; opacity: 0.9; width: 14px; }
  100% { height: 0; opacity: 0; width: 2px; }
}
.fx-starfall span { top: -8px; left: calc(50% + var(--dx)); width: 4px; height: 12px;
  border-radius: 3px; background: linear-gradient(180deg, transparent, #fff8c8);
  box-shadow: 0 0 8px #ffec9e; animation-name: fx-fall; animation-duration: 1.2s; }
@keyframes fx-fall {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(150px); opacity: 0; }
}
.fx-ashen_sovereign span { background: radial-gradient(circle, #fff3d6, #e8a72a);
  box-shadow: 0 0 14px #ffcc55, 0 0 30px #b3722a; width: 8px; height: 8px;
  animation-duration: 1.25s; }
.fx-ashen_sovereign span:nth-child(3n) { background: radial-gradient(circle, #d8d8d8, #4a4a4a);
  box-shadow: 0 0 10px #8a8a8a; }

/* ---------- settings-driven display modes (2026-08-31) ---------- */
body.reduced-motion .kill-fx, body.reduced-motion .splat { display: none !important; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
  animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
body.high-contrast { filter: contrast(1.18) brightness(1.05); }
body.high-contrast .muted { color: #c8c8c8 !important; }
body.hide-overlay .mirror-stats, body.hide-overlay #pstats { display: none !important; }

/* ---------- bank multi-select (2026-08-31) ---------- */
.item-tile.msel { outline: 2px solid var(--accent, #6fb85a); outline-offset: -2px; }
.msel-mark { position: absolute; top: 2px; left: 4px; font-size: 0.7rem;
  color: var(--accent, #6fb85a); }

/* ---------- collection log silhouettes (2026-08-31) ---------- */
.clog-fog { opacity: 0.35; filter: grayscale(1) brightness(0.6); }

/* ---------- custom bank tabs (2026-08-31) ---------- */
.cat-tab.utab { border-style: dashed; }
.cat-tab.utab.active { border-style: solid; }

/* ---------- light theme (Settings 5 — 2026-08-31) ----------
   Same forest language, daylight palette: every root token remapped,
   plus the handful of hardcoded-gradient spots that need help. */
body.theme-light{
  --bg-canopy:#dfe8d4; --bg-app:#edf2e4; --bg-panel:#f6f9f0; --bg-panel-raised:#ffffff;
  --bg-panel-hi:#e5eeda; --bg-card:#fbfdf6; --border-bark:#b6c6a4; --border-bark-lit:#8fa878;
  --text-primary:#1f2a19; --text-muted:#48593e; --text-faint:#75886a;
  --accent-gold:#8f6516; --accent-gold-dim:#c9a34f; --accent-green:#3a7a1c;
  --accent-blue:#1d6d8c; --hp:#c23840; --hp-dim:#e5a7ab;
  --shadow-deep:rgba(70,90,55,0.16);
  background:radial-gradient(ellipse 900px 500px at 50% -10%, rgba(90,150,60,0.10), transparent 60%), var(--bg-app);
}
body.theme-light button.act.primary{ background:linear-gradient(180deg, #d8e8c8, #c5dcae); }
body.theme-light .toast{ background:#ffffff; color:var(--text-primary); border:1px solid var(--border-bark-lit); }
body.theme-light .modal, body.theme-light .drawer{ box-shadow:0 12px 40px rgba(60,80,45,0.25); }

/* ---------- colourblind palettes (Settings 8 — pinned v1 swaps) ----------
   The point is DISTINGUISHABILITY of the signal colours (green success /
   red HP-danger / gold currency), not artistic restraint. */
body.cb-deuteranopia, body.cb-protanopia{
  --accent-green:#4a90d9;             /* success reads blue        */
  --hp:#e0862f; --hp-dim:#8a5a26;     /* danger reads orange       */
  --danger:#e0862f;
}
body.cb-tritanopia{
  --accent-blue:#d16fb0;              /* magic/info reads pink     */
  --accent-green:#7dc94e;
}

/* ---------- level unlocks table (2026-09-01) ---------- */
.unlock-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.unlock-table th { text-align: left; padding: 5px 8px; color: var(--text-muted);
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-bark); }
.unlock-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-bark); }
.unlock-table tr.unlocked td { color: var(--accent-green); }

/* ---------- touch polish (2026-09-01) ---------- */
button.act, .cat-tab, .loc-tab, .item-tile, .pill, .rec-row, .skill-row, .ham {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }


/* ---------- title screen (2026-09-01) ---------- */
.home{ position:fixed; inset:0; overflow-y:auto; display:flex; flex-direction:column; z-index:5; }
.home-scene{ position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:linear-gradient(180deg, #0a1410 0%, #10231a 34%, #274423 62%, #563f1c 86%, #1b291a 100%); }
.home-sun{ position:absolute; left:50%; top:34%; width:340px; height:340px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(240,207,130,0.55), rgba(227,179,78,0.22) 40%, transparent 68%);
  border-radius:50%; filter:blur(2px); }
.home-hills{ position:absolute; left:-5%; right:-5%; height:46vh; bottom:0; border-radius:50% 50% 0 0 / 100% 100% 0 0; }
.home-hills.h1{ background:#22371f; bottom:-16vh; transform:scaleX(1.7) rotate(-2deg); opacity:.75; }
.home-hills.h2{ background:#1a2b18; bottom:-22vh; transform:scaleX(2.1) rotate(1.5deg); }
.home-hills.h3{ background:#121e11; bottom:-30vh; transform:scaleX(2.6); }
.home-grid{ display:grid; grid-template-columns:270px minmax(320px, 1fr) 300px; gap:20px;
  max-width:1180px; width:100%; margin:0 auto; padding:44px 20px 20px; flex:1; align-items:start; }
.home-brand{ text-align:center; padding-top:14px; }
.home-mark{ width:84px; height:84px; filter:drop-shadow(0 10px 26px rgba(0,0,0,0.55)); }
.home-brand h1{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:1.7rem; line-height:1.25;
  color:var(--accent-gold); margin:10px 0 4px; letter-spacing:0.04em; text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,0.6); }
.home-tagline{ color:var(--text-muted); font-size:0.86rem; margin:0 0 14px; font-style:italic; }
.home-chips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.home-status{ margin-top:16px; font-size:0.74rem; color:var(--text-faint); }
.home-status .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--text-faint); margin-right:5px; }
.home-status.ok .dot{ background:var(--accent-green); box-shadow:0 0 8px var(--accent-green); }
.home-status.ok{ color:var(--accent-green); }
.home-slot{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border-bark);
  border-radius:11px; background:var(--bg-card); margin-bottom:9px; }
.home-slot .art{ width:52px; height:52px; display:grid; place-items:center; font-size:1.5rem;
  background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); border-radius:10px; flex-shrink:0; }
.home-slot .meta{ flex:1; min-width:0; }
.home-slot .meta .nm{ font-weight:700; font-size:0.95rem; }
.home-slot .meta .st{ color:var(--text-muted); font-size:0.74rem; font-variant-numeric:tabular-nums; }
.home-slot .meta .st b{ color:var(--accent-gold); }
.home-slot button.go{ padding:9px 20px; background:linear-gradient(180deg,#3f6a30,#2b4a22);
  border:1px solid var(--accent-green); border-radius:9px; color:#eaf6df; font-weight:700;
  font-size:0.8rem; cursor:pointer; letter-spacing:0.03em; }
.home-slot button.go:hover{ filter:brightness(1.15); }
.home-slot .forget{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:0.9rem; }
.home-news-row{ display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid rgba(58,79,49,0.5); font-size:0.8rem; }
.home-news-row:last-child{ border-bottom:none; }
.home-news-row .rk{ color:var(--accent-gold); font-weight:700; min-width:1.6em; font-variant-numeric:tabular-nums; }
.home-strip{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; max-width:1180px; width:100%;
  margin:8px auto 0; padding:0 20px 26px; }
.home-strip>div{ background:linear-gradient(180deg,var(--bg-panel-raised),var(--bg-panel));
  border:1px solid var(--border-bark); border-radius:11px; padding:11px 14px;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; }
.home-strip .ic{ grid-row:1 / 3; font-size:1.35rem; }
.home-strip b{ font-size:0.78rem; }
.home-strip i{ color:var(--text-faint); font-size:0.68rem; font-style:normal; }
@media (max-width:980px){
  .home-grid{ grid-template-columns:1fr; max-width:560px; padding-top:26px; }
  .home-side{ order:3; }
  .home-strip{ grid-template-columns:repeat(2, 1fr); max-width:560px; }
}


/* ---------- welcome-back statement (2026-09-01) ---------- */
.wb-away{ text-align:center; font-size:1.02rem; margin:2px 0 4px; }
.wb-cap{ text-align:center; color:var(--accent-blue); font-size:0.74rem; margin:0 0 8px; }
.wb-lines{ display:flex; flex-direction:column; gap:7px; padding:8px 0; }
.wb-line{ text-align:center; font-size:0.92rem; }
.wb-line b{ color:var(--accent-gold); }
.wb-notes{ border-top:1px solid var(--border-bark); margin-top:8px; padding-top:9px;
  display:flex; flex-direction:column; gap:5px; text-align:center;
  color:var(--text-muted); font-size:0.78rem; }


/* ---------- live session hero (2026-09-01, the Melvor moment) ---------- */
.live-hero{ display:flex; align-items:center; gap:16px; padding:14px 18px;
  border-color:var(--accent-gold-dim); }
.live-hero .lh-art{ font-size:2.6rem; width:66px; height:66px; display:grid; place-items:center;
  background:var(--bg-panel-hi); border:1px solid var(--border-bark-lit); border-radius:12px; flex-shrink:0;
  animation:lh-bob 2.4s ease-in-out infinite; }
@keyframes lh-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
.live-hero .lh-main{ flex:1; min-width:0; }
.lh-eyebrow{ font-size:0.64rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-green); }
.lh-name{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:1.15rem; color:var(--accent-gold); }
.hero-bar{ height:10px; border-radius:6px; background:var(--bg-canopy); overflow:hidden; margin:7px 0 6px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.5); }
.hero-bar>span{ display:block; height:100%; border-radius:6px; width:0;
  background:linear-gradient(90deg, var(--accent-gold-dim), var(--accent-gold));
  animation:herofill linear infinite; }
@keyframes herofill{ from{ width:0 } to{ width:100% } }
.lh-stats{ display:flex; gap:14px; flex-wrap:wrap; font-size:0.78rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums; }
.lh-stats b{ color:var(--accent-gold); }
.lh-session{ margin-top:4px; font-size:0.72rem; font-variant-numeric:tabular-nums; }
.lh-session b{ color:var(--accent-green); }
.lh-stop{ flex-shrink:0; padding:10px 22px; }
@media (max-width:640px){ .live-hero{ flex-wrap:wrap; } .live-hero .lh-stop{ width:100%; } }


/* ---------- the item sheet (2026-09-01, reference-matched) ---------- */
.modal.isheet-modal{ width:min(880px, 96vw); }
.isheet{ display:grid; grid-template-columns:1fr 300px; gap:18px; }
.isheet-head{ display:flex; gap:16px; }
.isheet-art{ position:relative; width:118px; height:118px; flex-shrink:0; display:grid; place-items:center;
  background:var(--bg-canopy); border:1px solid var(--border-bark-lit); border-radius:14px; }
.isheet-art .glyph{ font-size:3.2rem; }
.isheet-art .q{ position:absolute; left:7px; bottom:6px; background:var(--bg-panel-hi);
  border:1px solid var(--border-bark-lit); border-radius:7px; padding:1px 8px; font-size:0.7rem;
  font-variant-numeric:tabular-nums; }
.isheet-art .sl{ position:absolute; right:7px; bottom:6px; background:#2c4a68; border-radius:7px;
  padding:1px 8px; font-size:0.7rem; font-weight:700; color:#cfe6f8; }
.isheet-art .lk{ position:absolute; right:7px; top:6px; font-size:0.8rem; }
.isheet-title h2{ font-size:1.35rem; letter-spacing:0.03em; }
.isheet-cat{ color:var(--accent-blue); font-size:0.85rem; margin:2px 0 8px; }
.isheet-desc{ color:var(--text-muted); font-size:0.85rem; margin:0 0 10px; max-width:46ch; }
.isheet-value b{ color:var(--accent-gold); }
.isheet-tabs{ display:flex; gap:6px; margin:16px 0 0; border-bottom:1px solid var(--border-bark); }
.itab{ background:none; border:none; border-bottom:2px solid transparent; color:var(--text-muted);
  padding:8px 14px; font:inherit; font-size:0.8rem; font-weight:600; cursor:pointer; letter-spacing:0.03em; }
.itab.active{ color:var(--accent-green); border-bottom-color:var(--accent-green); }
.isheet-body{ padding-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.is-section{ min-width:0; }
.is-h{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-faint);
  margin-bottom:5px; font-weight:700; }
.is-row{ display:flex; justify-content:space-between; gap:10px; padding:5px 0;
  border-bottom:1px solid rgba(58,79,49,0.45); font-size:0.8rem; }
.is-row:last-child{ border-bottom:none; }
.is-row b{ font-variant-numeric:tabular-nums; }
.is-row b.good{ color:var(--accent-green); }
.is-special{ background:var(--bg-card); border:1px solid var(--border-bark); border-radius:9px;
  padding:9px 11px; font-size:0.78rem; color:var(--accent-green); }
.is-panel{ background:var(--bg-card); border:1px solid var(--border-bark); border-radius:11px;
  padding:12px 14px; margin-bottom:12px; }
.isheet-qtyrow{ display:flex; gap:6px; margin:8px 0 10px; }
.isheet-qtyrow input{ width:4.5em; }
.isheet-sell{ width:100%; padding:11px; background:linear-gradient(180deg,#3f6a30,#2b4a22);
  border:1px solid var(--accent-green); border-radius:9px; color:#eaf6df; font-weight:700;
  font-size:0.82rem; cursor:pointer; letter-spacing:0.03em; }
.isheet-sell:hover{ filter:brightness(1.15); }
.isheet-tools{ display:flex; gap:6px; margin-top:10px; justify-content:center; }
@media (max-width:760px){ .isheet{ grid-template-columns:1fr; } .isheet-body{ grid-template-columns:1fr; } }

/* ---------- item requirement banner (2026-09-01, red/green, loud) ---------- */
.isheet-req{ display:inline-flex; align-items:center; gap:7px; margin:2px 0 8px;
  padding:6px 14px; border-radius:9px; font-size:0.88rem; font-weight:700; letter-spacing:0.02em; }
.isheet-req .have{ font-weight:500; font-size:0.76rem; opacity:0.85; }
.isheet-req.ok{ background:rgba(143,209,90,0.14); border:1px solid var(--accent-green); color:var(--accent-green); }
.isheet-req.no{ background:rgba(232,99,107,0.14); border:1px solid var(--hp); color:var(--hp); }
.is-row b.req-ok{ color:var(--accent-green); }
.is-row b.req-no{ color:var(--hp); }

/* golden-set badge rides the stat line (2026-09-01) */
.spill-row .sbadge{ border-radius:8px; }

/* level-bar fills smoothly; the rollover flashes gold (2026-09-01) */
#xplvl-fill{ transition:width .45s ease; }
#xplvl-fill.levelup{ background:linear-gradient(90deg, var(--accent-gold), #f0cf82) !important;
  box-shadow:0 0 12px var(--accent-gold); }