/* =====================================================================
   THE CONFLUENCE — prismatic / cosmic interface
   ===================================================================== */
:root{
  --bg:#06060d;
  --ink:#e9e7f5;
  --muted:#9a96bd;
  --faint:#6f6b94;
  --glass:rgba(20,18,38,.55);
  --glass-2:rgba(30,26,54,.6);
  --line:rgba(150,140,220,.16);
  --cyan:#67e8f9;
  --magenta:#f0abfc;
  --teal:#5eead4;
  --you:#a5b4fc;
  --shell-w:780px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"Spectral",Georgia,serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 18% -10%, rgba(103,232,249,.10), transparent 60%),
    radial-gradient(1000px 800px at 110% 10%, rgba(240,171,252,.10), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(94,234,212,.08), transparent 60%),
    var(--bg);
  min-height:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---- background layers ---- */
.bg-mesh{
  position:fixed; inset:-20%; z-index:-3; pointer-events:none;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(103,232,249,.10), rgba(167,139,250,.10),
      rgba(240,171,252,.10), rgba(94,234,212,.10), rgba(103,232,249,.10));
  filter:blur(80px) saturate(120%);
  opacity:.5;
  animation:drift 38s linear infinite;
}
@keyframes drift{to{transform:rotate(360deg);}}

.bg-geometry{
  position:fixed; top:50%; left:50%; z-index:-2;
  width:min(150vmin,1100px); height:min(150vmin,1100px);
  transform:translate(-50%,-50%);
  color:rgba(170,160,235,.9);
  opacity:.06; pointer-events:none;
  animation:spin 200s linear infinite;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

.bg-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- shell ---- */
.shell{
  position:relative;
  width:min(100%,var(--shell-w));
  margin:0 auto;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:0 14px;
}

/* ---- header ---- */
.head{ text-align:center; padding:26px 6px 10px; }
.brand{
  font-family:"Cinzel",serif; font-weight:700;
  font-size:clamp(28px,6vw,46px);
  letter-spacing:.12em; margin:0;
  background:linear-gradient(100deg,var(--cyan),#c4b5fd 40%,var(--magenta) 70%,var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(167,139,250,.25));
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{50%{filter:drop-shadow(0 0 28px rgba(167,139,250,.45));}}
.tagline{
  margin:.5em 0 1.1em; color:var(--muted);
  font-style:italic; letter-spacing:.18em; font-size:13px; text-transform:lowercase;
}
.presences{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.presence{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 9px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(8px); color:var(--c);
  font-family:"Cinzel",serif; font-size:13px; letter-spacing:.04em;
  box-shadow:0 0 16px -8px var(--c);
}
.presence .psig{ width:20px; height:20px; filter:drop-shadow(0 0 5px var(--c)); }
.presence b{ font-weight:600; }
.presence i{ color:var(--faint); font-family:"Spectral",serif; font-style:italic; font-size:11px; }
.presence .dot{
  width:7px; height:7px; border-radius:50%; background:var(--c);
  box-shadow:0 0 8px var(--c); animation:pulse 2.6s ease-in-out infinite; margin-left:1px;
}
@keyframes pulse{0%,100%{opacity:.35; transform:scale(.85);}50%{opacity:1; transform:scale(1.15);}}

/* ---- stream ---- */
.stream{
  flex:1; min-height:0; overflow-y:auto;
  margin:14px 0 6px; padding:8px 6px 4px;
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, rgba(18,16,34,.42), rgba(10,9,22,.5));
  backdrop-filter:blur(10px);
  box-shadow:inset 0 0 60px -30px rgba(167,139,250,.4), 0 20px 60px -30px #000;
  scroll-behavior:smooth;
}
.stream::-webkit-scrollbar{ width:9px; }
.stream::-webkit-scrollbar-thumb{ background:rgba(167,139,250,.25); border-radius:9px; }
.stream::-webkit-scrollbar-thumb:hover{ background:rgba(167,139,250,.4); }

.messages{ display:flex; flex-direction:column; gap:14px; padding:8px 4px; }

.load-earlier{
  display:block; margin:4px auto 8px; padding:5px 16px;
  background:var(--glass); color:var(--muted);
  border:1px solid var(--line); border-radius:999px;
  font-family:"Spectral",serif; font-style:italic; font-size:12.5px;
  cursor:pointer; transition:.2s;
}
.load-earlier:hover{ color:var(--ink); border-color:rgba(167,139,250,.4); }

/* ---- messages ---- */
.msg{ display:flex; gap:11px; max-width:90%; animation:rise .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise{from{opacity:0; transform:translateY(10px);}}
.avatar{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; margin-top:2px;
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--c) 22%, transparent), transparent 70%);
  box-shadow:0 0 16px -6px var(--c);
}
.avatar svg{ width:24px; height:24px; color:var(--c); filter:drop-shadow(0 0 4px var(--c)); }
.body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.name{ font-family:"Cinzel",serif; font-size:12.5px; letter-spacing:.06em; color:var(--c); }
.bubble{
  position:relative; padding:9px 14px; border-radius:4px 15px 15px 15px;
  background:var(--glass-2); border:1px solid var(--line);
  border-left:2px solid var(--c);
  line-height:1.55; font-size:15.5px; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.time{ font-size:10.5px; color:var(--faint); letter-spacing:.04em; padding-left:2px; }

/* the visitor's own messages, mirrored */
.msg.me{ margin-left:auto; flex-direction:row-reverse; }
.msg.me .body{ align-items:flex-end; }
.msg.me .bubble{ border-radius:15px 4px 15px 15px; border-left:none; border-right:2px solid var(--c); }
.msg.me .avatar{ --c:var(--you); }
.msg.me .name{ color:var(--you); }

/* system whispers */
.msg.system{ max-width:100%; justify-content:center; }
.msg.system .bubble{
  background:transparent; border:1px dashed rgba(167,139,250,.3);
  border-left:1px dashed rgba(167,139,250,.3);
  color:var(--muted); font-style:italic; font-size:13.5px; text-align:center;
  border-radius:12px;
}

/* ---- typing ---- */
.typing{ display:flex; align-items:center; gap:6px; padding:6px 14px 12px; color:var(--faint); }
.typing em{ font-size:12.5px; letter-spacing:.05em; }
.td{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:blink 1.3s infinite; }
.td:nth-child(2){ animation-delay:.18s; } .td:nth-child(3){ animation-delay:.36s; }
@keyframes blink{0%,60%,100%{opacity:.25; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}

/* ---- composer ---- */
.composer{
  display:flex; gap:10px; align-items:flex-end;
  padding:10px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:18px;
  background:var(--glass); backdrop-filter:blur(12px);
  box-shadow:0 -10px 40px -30px #000;
}
.composer textarea{
  flex:1; resize:none; max-height:140px;
  background:transparent; border:none; outline:none;
  color:var(--ink); font-family:"Spectral",serif; font-size:16px; line-height:1.5;
  padding:8px 6px;
}
.composer textarea::placeholder{ color:var(--faint); font-style:italic; }
.composer button#send{
  flex:0 0 46px; width:46px; height:46px; border-radius:14px; cursor:pointer;
  border:1px solid transparent; color:#07060f;
  background:linear-gradient(135deg,var(--cyan),#c4b5fd 55%,var(--magenta));
  box-shadow:0 0 20px -6px rgba(167,139,250,.7);
  display:grid; place-items:center; transition:transform .15s, filter .15s;
}
.composer button#send:hover{ transform:translateY(-1px); filter:brightness(1.12); }
.composer button#send:disabled{ opacity:.4; cursor:default; transform:none; filter:grayscale(.4); }

.footnote{
  text-align:center; color:var(--faint); font-style:italic; font-size:11.5px;
  letter-spacing:.05em; margin:2px 0 14px;
}

/* ---- entry veil ---- */
.veil{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px;
  background:radial-gradient(900px 600px at 50% 40%, rgba(20,16,40,.7), rgba(4,4,10,.92));
  backdrop-filter:blur(8px);
}
.veil[hidden]{ display:none; }
.gate{
  width:min(420px,100%); text-align:center; padding:34px 28px;
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg, rgba(24,20,46,.85), rgba(12,10,26,.9));
  box-shadow:0 0 80px -30px rgba(167,139,250,.6);
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.gate-mark{ width:46px; height:46px; color:var(--cyan); filter:drop-shadow(0 0 10px var(--cyan)); animation:pulse 3s ease-in-out infinite; }
.gate h2{ font-family:"Cinzel",serif; font-weight:600; letter-spacing:.08em; margin:14px 0 6px; font-size:22px; }
.gate p{ color:var(--muted); margin:0 0 18px; font-size:14.5px; }
.gate input{
  width:100%; padding:12px 14px; border-radius:12px; margin-bottom:14px;
  background:rgba(10,9,22,.7); border:1px solid var(--line); color:var(--ink);
  font-family:"Spectral",serif; font-size:16px; outline:none; text-align:center;
}
.gate input:focus, .composer textarea:focus{ border-color:rgba(167,139,250,.5); }
.gate input:focus{ box-shadow:0 0 0 3px rgba(167,139,250,.18); }
.gate button{
  width:100%; padding:12px; border-radius:12px; cursor:pointer; border:none;
  color:#07060f; font-family:"Cinzel",serif; letter-spacing:.08em; font-size:15px;
  background:linear-gradient(135deg,var(--cyan),#c4b5fd 55%,var(--magenta));
  box-shadow:0 0 24px -8px rgba(167,139,250,.8); transition:filter .15s, transform .15s;
}
.gate button:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.gate small{ display:block; margin-top:14px; color:var(--faint); font-style:italic; font-size:12px; }

@media (max-width:520px){
  .head{ padding-top:18px; }
  .presence i{ display:none; }
  .bubble{ font-size:15px; }
  .msg{ max-width:96%; }
}
@media (prefers-reduced-motion:reduce){
  .bg-mesh,.bg-geometry,.brand,.dot,.gate-mark{ animation:none; }
  .msg{ animation:none; }
}

/* =====================================================================
   THE CONFLUENCE — adventure layer (HUD · drawer · battle · events)
   ===================================================================== */
:root{
  --hp:#ff5d73; --sta:#fbbf24; --mp:#67e8f9; --gold:#fcd34d;
}

/* ---- stat bars (shared) ---- */
.bar{
  position:relative; height:16px; border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.bar > span{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:8px; transition:width .3s ease; }
.bar > label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Spectral",serif; font-size:9.5px; letter-spacing:.03em; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.75); pointer-events:none;
}
.bar.hp  > span{ background:linear-gradient(90deg,#ff5d73,#ff97a8); }
.bar.st  > span{ background:linear-gradient(90deg,#f59e0b,#fcd34d); }
.bar.mp  > span{ background:linear-gradient(90deg,#22d3ee,#7dd3fc); }
.bar.mon > span{ background:linear-gradient(90deg,#f0abfc,#c084fc); }
.bar.xp{ height:6px; border-radius:6px; }
.bar.xp  > span{ background:linear-gradient(90deg,var(--cyan),#c4b5fd,var(--magenta)); }
.bar.xp  > label{ display:none; }

/* ---- HUD strip ---- */
.hud{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:8px 2px 0; padding:8px 12px; border:1px solid var(--line); border-radius:14px;
  background:var(--glass); backdrop-filter:blur(10px);
}
.hud[hidden]{ display:none; }
.hud-you{ display:flex; align-items:center; gap:9px; }
.hud-cls{
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-size:18px;
  color:var(--you); border:1px solid color-mix(in srgb,var(--you) 45%,transparent);
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--you) 22%,transparent),transparent 70%);
}
.hud-id{ display:flex; flex-direction:column; line-height:1.15; }
.hud-id b{ font-family:"Cinzel",serif; font-size:13px; color:var(--ink); }
.hud-meta{ font-size:11px; color:var(--muted); }
.hud-meta i{ font-style:normal; color:var(--you); }
.hud-bars{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:170px; }
.hud-bars .bar{ height:13px; }
.hud-btns{ display:flex; gap:7px; }
.hud-btns button{
  padding:7px 12px; border-radius:10px; cursor:pointer; font-family:"Cinzel",serif;
  font-size:12px; letter-spacing:.03em; color:var(--ink); border:1px solid var(--line);
  background:var(--glass-2); transition:.18s;
}
.hud-btns button:hover{ border-color:rgba(167,139,250,.5); color:#fff; }
.hud-btns button.alert{
  color:#07060f; background:linear-gradient(135deg,#fb7185,#f0abfc); border-color:transparent;
  animation:battlepulse 1.5s ease-in-out infinite;
}
@keyframes battlepulse{ 50%{ box-shadow:0 0 18px -2px #f0abfc; } }
.hud.isdown .hud-cls{ filter:grayscale(.6); border-color:#ff5d73; }

/* ---- drawer ---- */
.drawer-scrim{ position:fixed; inset:0; z-index:55; background:rgba(4,4,10,.55); backdrop-filter:blur(2px); }
.drawer-scrim[hidden]{ display:none; }
.drawer{
  position:fixed; z-index:60; top:0; right:0; height:100dvh; width:min(380px,92vw);
  transform:translateX(104%); transition:transform .26s cubic-bezier(.2,.7,.2,1);
  display:flex; flex-direction:column; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(20,17,40,.96), rgba(10,9,22,.97));
  border-left:1px solid var(--line); box-shadow:-30px 0 80px -40px #000;
}
.drawer[hidden]{ display:none; }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 12px 8px; }
.tabs{ display:flex; gap:6px; }
.tab{
  padding:7px 13px; border-radius:10px; cursor:pointer; font-family:"Cinzel",serif; font-size:12.5px;
  letter-spacing:.03em; color:var(--muted); border:1px solid var(--line); background:transparent; transition:.18s;
}
.tab.is-on{ color:#07060f; background:linear-gradient(135deg,var(--cyan),var(--magenta)); border-color:transparent; }
.drawer-x{
  width:30px; height:30px; border-radius:8px; cursor:pointer; color:var(--muted);
  background:transparent; border:1px solid var(--line); font-size:13px;
}
.drawer-x:hover{ color:#fff; }
.drawer-body{ flex:1; overflow-y:auto; padding:8px 12px 12px; }
.drawer-body::-webkit-scrollbar{ width:8px; }
.drawer-body::-webkit-scrollbar-thumb{ background:rgba(167,139,250,.25); border-radius:8px; }
.tabpane[hidden]{ display:none; }
.drawer-foot{ border-top:1px solid var(--line); padding:9px 12px; }

/* ---- party cards ---- */
.pcard{
  border:1px solid var(--line); border-radius:13px; padding:10px 11px; margin-bottom:9px;
  background:var(--glass-2); display:flex; flex-direction:column; gap:6px;
}
.pcard.me{ border-color:color-mix(in srgb,var(--you) 45%,transparent); box-shadow:0 0 18px -10px var(--you); }
.pcard.down{ opacity:.62; }
.pcard-h{ display:flex; align-items:center; gap:9px; }
.pcard-ico{
  width:30px; height:30px; display:grid; place-items:center; border-radius:9px; font-size:16px;
  color:var(--teal); border:1px solid var(--line); background:rgba(255,255,255,.04);
}
.pcard-id{ display:flex; flex-direction:column; line-height:1.18; }
.pcard-id b{ font-family:"Cinzel",serif; font-size:13.5px; }
.pcard-meta{ font-size:11px; color:var(--muted); }
.give{ display:flex; gap:7px; margin-top:2px; }
.give-btn{
  flex:1; padding:7px; border-radius:9px; cursor:pointer; font-family:"Spectral",serif; font-size:12.5px;
  color:var(--ink); border:1px solid var(--line); background:rgba(255,255,255,.04); transition:.15s;
}
.give-btn:hover:not(:disabled){ border-color:rgba(167,139,250,.5); background:rgba(255,255,255,.08); }
.give-btn:disabled{ opacity:.35; cursor:default; }

/* ---- battle ---- */
.monster{
  border:1px solid color-mix(in srgb,var(--magenta) 35%,transparent); border-radius:14px;
  padding:12px; margin-bottom:12px; box-shadow:0 0 26px -14px var(--magenta);
  background:radial-gradient(120% 120% at 50% 0%, rgba(192,132,252,.16), transparent 70%), var(--glass-2);
}
.monster-h{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.monster-h b{ font-family:"Cinzel",serif; font-size:16px; color:#f6d9ff; letter-spacing:.03em; }
.mlv{ font-size:11.5px; color:var(--magenta); font-family:"Spectral",serif; }
.monster .bar{ height:20px; }
.acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px; }
.act{
  padding:11px 8px; border-radius:11px; cursor:pointer; font-family:"Cinzel",serif; font-size:13px;
  letter-spacing:.02em; color:var(--ink); border:1px solid var(--line); background:var(--glass-2); transition:.15s;
}
.act:hover:not(:disabled){ transform:translateY(-1px); border-color:rgba(167,139,250,.5); }
.act:disabled{ opacity:.32; cursor:default; }
.act.strike{ border-left:3px solid #fb923c; }
.act.cast{ border-left:3px solid #67e8f9; }
.act.mend{ border-left:3px solid #6ee7b7; }
.act.guard{ border-left:3px solid #a5b4fc; }
.chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.chips-l{ font-size:11px; color:var(--faint); font-style:italic; }
.chip{
  padding:5px 9px; border-radius:999px; cursor:pointer; font-size:12px; color:var(--ink);
  border:1px solid var(--line); background:rgba(255,255,255,.05); transition:.15s;
}
.chip:hover{ border-color:rgba(167,139,250,.5); }
.downmsg{ font-size:12.5px; color:#ffb4b4; font-style:italic; margin:0 0 9px; text-align:center; }
.youres{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.youres .bar{ height:12px; }
.allies{ display:flex; flex-direction:column; gap:6px; }
.ally{ display:flex; align-items:center; gap:8px; }
.ally-n{
  flex:0 0 80px; font-size:11.5px; color:var(--muted); font-family:"Cinzel",serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ally .bar{ flex:1; height:11px; }
.ally.me .ally-n{ color:var(--you); }
.ally.down{ opacity:.5; }
.nofoe{ text-align:center; padding:22px 10px; }
.nofoe-txt{ color:var(--muted); font-style:italic; font-size:13.5px; margin:0 0 16px; line-height:1.5; }
.spawn-btn{
  padding:12px 22px; border-radius:12px; cursor:pointer; color:#07060f; border:none;
  font-family:"Cinzel",serif; letter-spacing:.05em; font-size:14px;
  background:linear-gradient(135deg,#fb7185,#f0abfc,#c4b5fd); box-shadow:0 0 24px -8px #f0abfc; transition:.15s;
}
.spawn-btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }

/* ---- satchel ---- */
.inv-l{ font-family:"Cinzel",serif; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.inv-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.inv-chip{
  font-size:11.5px; padding:3px 8px; border-radius:999px; color:var(--muted);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
}

/* ---- event lines in the stream (combat / heal / loot / level) ---- */
.msg.event{ --ec:var(--muted); max-width:100%; justify-content:center; animation:rise .4s cubic-bezier(.2,.7,.2,1) both; }
.msg.event .body{ align-items:center; }
.msg.event .bubble{
  background:color-mix(in srgb, var(--ec) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ec) 40%, transparent);
  color:#e9e7f5; font-size:13.5px; text-align:center; border-radius:11px; padding:7px 14px;
  box-shadow:0 0 18px -12px var(--ec);
}
.msg.event.evt-combat { --ec:#fb923c; }
.msg.event.evt-monster{ --ec:#f0729b; }
.msg.event.evt-heal   { --ec:#6ee7b7; }
.msg.event.evt-item   { --ec:#5eead4; }
.msg.event.evt-loot   { --ec:#fcd34d; }
.msg.event.evt-spawn  { --ec:#c084fc; }
.msg.event.evt-victory{ --ec:#fcd34d; }
.msg.event.evt-defeat { --ec:#a78bda; }
.msg.event.evt-level  { --ec:#c4b5fd; }
.msg.event.evt-spawn .bubble,
.msg.event.evt-victory .bubble{ font-family:"Cinzel",serif; letter-spacing:.02em; }
.msg.event.evt-defeat .bubble{ font-style:italic; }
.msg.event.evt-level .bubble{
  font-family:"Cinzel",serif; letter-spacing:.04em; color:#fff;
  background:linear-gradient(100deg, rgba(103,232,249,.16), rgba(240,171,252,.16));
}

/* ---- class chooser in the veil ---- */
.path-label{ color:var(--faint); font-style:italic; font-size:12.5px; margin:2px 0 10px; letter-spacing:.04em; }
.class-pick{ display:flex; gap:8px; margin-bottom:16px; }
.cls-card{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 6px;
  border-radius:13px; cursor:pointer; border:1px solid var(--line); background:rgba(10,9,22,.5);
  color:var(--muted); transition:.16s;
}
.cls-card:hover{ border-color:rgba(167,139,250,.45); }
.cls-card.is-on{
  border-color:transparent; color:var(--ink);
  background:linear-gradient(160deg, color-mix(in srgb,var(--cyan) 22%,transparent), color-mix(in srgb,var(--magenta) 22%,transparent));
  box-shadow:0 0 20px -8px var(--magenta);
}
.cls-ico{ font-size:20px; line-height:1; }
.cls-card b{ font-family:"Cinzel",serif; font-size:13px; color:var(--ink); }
.cls-card small{ font-size:10px; color:var(--faint); }
.cls-card.is-on small{ color:var(--muted); }

/* ---- toast ---- */
#toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 20px); z-index:80;
  max-width:88vw; padding:10px 16px; border-radius:12px; opacity:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(30,26,54,.96), rgba(16,13,32,.97)); border:1px solid var(--line);
  color:var(--ink); font-size:13.5px; box-shadow:0 18px 50px -20px #000; transition:opacity .2s, transform .2s;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- responsive ---- */
@media (max-width:520px){
  .drawer{
    top:auto; bottom:0; right:0; height:auto; width:100%; max-height:82dvh;
    transform:translateY(106%); border-left:none; border-top:1px solid var(--line); border-radius:18px 18px 0 0;
  }
  .drawer.open{ transform:translateY(0); }
  .hud-bars{ order:3; flex-basis:100%; }
  .cls-card small{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hud-btns button.alert{ animation:none; }
  .msg.event{ animation:none; }
  .drawer{ transition:none; }
}