/* Emberbound — shared design system.
 * Merges the game-client mockup's ornamented "nw" glass panels + gold trim with the
 * login mockup's purple accent, so login, character select and the HUD are one look. */
:root{
  /* surfaces */
  --bg:#05070d; --panel:#12172aee; --panel2:#0c1020ee; --panel3:#0e1424;
  --line:#2a3350; --line2:#3a476e; --edge:#20283e;
  /* ink */
  --ink:#e9edf7; --dim:#9aa6c4; --faint:#6b779a;
  /* accents */
  --gold:#e0a44c; --gold2:#ffd38a; --gold3:#8a6a2e;
  --acc:#b98cff; --acc2:#dcc4ff;
  /* vitals */
  --hp:#e0556b; --mp:#3fa0e6; --stam:#7fe0a0; --xp:#8fd34a;
  --good:#5bd06a; --warn:#ffd23f; --bad:#e0556b;
  /* elements */
  --fire:#ff6b35; --water:#3fa0e6; --electric:#ffd23f; --earth:#9a7b4f;
  --wind:#7fe0c0; --arcane:#c07fe0; --holy:#ffe6a0; --dark:#8a6bd0; --energy:#cfe4ea;
  --physical:#d9d2c4;
  /* rarity */
  --r-common:#9aa6c4; --r-uncommon:#5bd06a; --r-rare:#3fa0e6; --r-epic:#c07fe0; --r-legend:#e0a44c;
  --ui:"Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);overflow:hidden;user-select:none;
  font-family:var(--ui);font-size:13px;line-height:1.45}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
.hidden{display:none!important}
.muted{color:var(--faint)}
.gold{color:var(--gold)}

/* ---------------------------------------------------------------- ornamented panel */
.nw{position:relative;background:linear-gradient(var(--panel),var(--panel2));
  border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 14px 34px -18px #000, inset 0 1px 0 #ffffff0a, inset 0 0 30px #0006}
.nw::before,.nw::after{content:"";position:absolute;width:12px;height:12px;
  border:2px solid var(--gold3);opacity:.8;pointer-events:none}
.nw::before{left:4px;top:4px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.nw::after{right:4px;bottom:4px;border-left:none;border-top:none;border-radius:0 0 4px 0}

/* panel header */
.ph{display:flex;align-items:center;gap:6px;padding:7px 10px 6px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--edge)}
.ph .dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 8px currentColor}
.ph .dot.red{background:var(--bad)}
.ph .sp{margin-left:auto;color:var(--dim);letter-spacing:.06em}

/* ---------------------------------------------------------------- buttons */
.btn{background:var(--panel3);border:1px solid var(--line);border-radius:8px;
  padding:8px 14px;cursor:pointer;transition:border-color .15s,transform .1s,background .15s}
.btn:hover{border-color:var(--gold);background:#141b2e}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;filter:grayscale(.4);cursor:not-allowed}
.btn.prime{background:linear-gradient(150deg,var(--gold2),var(--gold));color:#1a1206;
  border-color:#6b551f;font-weight:600;letter-spacing:.04em;
  box-shadow:0 8px 24px -12px var(--gold), inset 0 0 0 1px #6b551f}
.btn.prime:hover{filter:brightness(1.06);border-color:#6b551f}
.btn.ghost{background:transparent}
.btn.danger{border-color:#5a2630;color:#f0a0ad}
.btn.danger:hover{border-color:var(--bad);background:#25141a}
.btn.on{border-color:var(--gold);background:#241d10;color:var(--gold2)}
.btn.sm{padding:4px 9px;border-radius:6px;font-size:12px}
.iconbtn{width:28px;height:28px;display:grid;place-items:center;background:#0c1120;
  border:1px solid var(--line);border-radius:6px;cursor:pointer}
.iconbtn:hover{border-color:var(--gold);color:var(--gold2)}

/* the gold sweep used on primary CTAs */
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(100deg,transparent,#ffffff59,transparent);
  transform:translateX(-160%);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,62%{transform:translateX(-160%)}86%,100%{transform:translateX(320%)}}

/* ---------------------------------------------------------------- bars */
.bar{position:relative;height:10px;border-radius:5px;background:#0a0e1a;
  border:1px solid #0006;overflow:hidden;box-shadow:inset 0 1px 2px #000a}
.bar>i{display:block;height:100%;width:0;transition:width .18s ease-out}
.bar.hp>i{background:linear-gradient(180deg,#ff7a88,var(--hp))}
.bar.mp>i{background:linear-gradient(180deg,#7fc4ff,var(--mp))}
.bar.st>i{background:linear-gradient(180deg,#b6f5cf,var(--stam))}
.bar.xp>i{background:linear-gradient(180deg,#c7ef7a,var(--xp))}
.bar .txt{position:absolute;inset:0;display:flex;justify-content:space-between;
  align-items:center;padding:0 6px;font-size:9px;letter-spacing:.04em;
  text-shadow:0 1px 2px #000,0 0 3px #000}
.bar.lg{height:16px;border-radius:8px}
.bar.sm{height:6px}

/* ---------------------------------------------------------------- rarity */
.rr{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.rr.common{box-shadow:inset 0 0 0 1.5px var(--r-common)}
.rr.uncommon{box-shadow:inset 0 0 0 1.5px var(--r-uncommon),0 0 10px -4px var(--r-uncommon)}
.rr.rare{box-shadow:inset 0 0 0 1.5px var(--r-rare),0 0 10px -4px var(--r-rare)}
.rr.epic{box-shadow:inset 0 0 0 1.5px var(--r-epic),0 0 10px -4px var(--r-epic)}
.rr.legend{box-shadow:inset 0 0 0 1.5px var(--r-legend),0 0 12px -3px var(--r-legend)}

/* item slot — shared by equipment, bags, crafting */
.slotcell{position:relative;aspect-ratio:1;background:#0b0f1c;border:1px solid var(--line);
  border-radius:8px;display:grid;place-items:center;cursor:pointer}
.slotcell:hover{border-color:var(--gold)}
.slotcell img{width:86%;height:86%;object-fit:contain;image-rendering:pixelated}
.slotcell .q{position:absolute;right:3px;bottom:1px;font-size:10px;font-weight:600;
  text-shadow:0 0 4px #000,0 1px 0 #000}
.slotcell.empty{border-style:dashed;border-color:#26304c}
.slotcell .ph-icon{font-size:18px;opacity:.35}

/* ---------------------------------------------------------------- overlays */
.tip{position:fixed;z-index:300;max-width:260px;padding:8px 10px;pointer-events:none;
  background:#0b1020f2;border:1px solid var(--line2);border-radius:8px;
  box-shadow:0 18px 40px -20px #000;font-size:12px;opacity:0;transition:opacity .12s}
.tip.on{opacity:1}
.tip b{display:block;color:var(--gold2);margin-bottom:2px}
.tip .t{color:var(--dim);font-size:11px}
#toast{position:fixed;left:50%;bottom:60px;transform:translateX(-50%) translateY(12px);
  z-index:250;padding:10px 18px;background:#0b1020f2;border:1px solid var(--line2);
  border-radius:10px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.bad{border-color:#5a2630;color:#f0a0ad}

/* scrollbars — an EVEN width on purpose: a centred fixed-width panel inside a scrolling
   container splits the leftover space in half, and an odd gutter puts every 9-sliced frame on
   a half pixel, which resamples its border art into a soft edge. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#232c46;border-radius:9px;border:2px solid transparent;
  background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#33406a;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}