/* THE RAID — single-screen arena UI (glass pills over the battlefield) */
:root{
  --bg:#0b0303; --glass:rgba(24,6,4,.58); --glass-2:rgba(24,6,4,.8); --line:rgba(255,255,255,.16); --line-2:rgba(255,255,255,.28);
  --ink:#f5e9df; --ink-soft:#cfb0a6; --ember:#ff6a2a; --ember-deep:#d9411f; --ember-soft:#ffb07a; --blood:#c8301c; --gold:#f2c46b; --heal:#8fd39a; --cyan:#6fd3ff;
  --panel:#170806; --panel-2:#22100c; --pline:#3a1b14; --shadow:0 30px 70px -30px rgba(0,0,0,.85);
  --ui:"Chakra Petch",system-ui,sans-serif; --mono:"IBM Plex Mono",Menlo,Consolas,monospace; --boss:"Cinzel",Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;height:100vh;overflow:hidden;background:var(--bg);color:var(--ink);font:500 15px/1.45 var(--ui);-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stage{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden;background:#1a0705;isolation:isolate}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{z-index:0}#fx{z-index:1;pointer-events:none}
.atmos{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 100% at 50% 50%,rgba(0,0,0,0) 45%,rgba(6,1,1,.55) 100%)}
.overlay{position:absolute;z-index:5}

/* brand */
.brandbar{top:14px;left:14px;display:flex;align-items:center;gap:10px;pointer-events:none}
.brandbar svg{width:38px;height:38px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.brandbar h1{margin:0;font:700 1.15rem/1 var(--ui);letter-spacing:.12em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.brandbar .net{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font:700 .62rem/1 var(--ui);letter-spacing:.08em;color:#ffe9dc;background:var(--glass);border:1px solid var(--line);padding:4px 9px;border-radius:999px}
.brandbar .net i{width:7px;height:7px;border-radius:50%;background:#00E10B;box-shadow:0 0 0 3px rgba(0,225,11,.25)}
.brandbar .net.demo i{background:var(--gold);box-shadow:0 0 0 3px rgba(242,196,107,.25)}
.brandbar .net.wait i{background:#9aa;box-shadow:0 0 0 3px rgba(150,170,170,.25)}

/* buttons */
.glassbtn{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);color:#fff;font:700 .78rem/1 var(--ui);letter-spacing:.04em;padding:10px 12px;border-radius:11px;display:inline-flex;align-items:center;gap:7px;transition:background .15s,border-color .15s,transform .08s}
.glassbtn:hover{background:var(--glass-2);border-color:var(--line-2)}
.glassbtn:active{transform:translateY(1px)}
.glassbtn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.glassbtn svg{width:15px;height:15px}
.btn-primary{border:1.5px solid rgba(255,255,255,.5);background:linear-gradient(180deg,#ff7a3a,#d9411f);color:#2a0c04;font:800 .82rem/1 var(--ui);letter-spacing:.06em;padding:12px 16px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 14px 34px -10px rgba(255,106,42,.85);transition:filter .15s,transform .08s;text-decoration:none}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary:active{transform:translateY(1px)}
.topright{top:14px;right:14px;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 28px)}

/* stats (under the brand) */
.statrow{top:66px;left:14px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 28px)}
.stat{background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;padding:6px 10px;display:flex;align-items:baseline;gap:6px;position:relative;overflow:hidden}
.stat b{font:500 .95rem/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums}
.stat b.hot{color:var(--gold);text-shadow:0 0 12px rgba(242,196,107,.6)}
.stat span{font:700 .52rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.stat .meter{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.stat .meter u{display:block;height:100%;background:linear-gradient(90deg,#ffb35a,#ff6a2a);transform-origin:left}

/* Elden-style boss bar (bottom) */
.bossbar{left:50%;bottom:96px;transform:translateX(-50%);width:min(820px,74vw);pointer-events:none}
.bossbar .row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:7px;padding:0 4px}
.bossbar .kick{font:600 .56rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ember-soft);margin-bottom:5px;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.bossbar .name{font:700 clamp(17px,2vw,27px)/1 var(--boss);letter-spacing:.18em;color:#f4e7d3;text-shadow:0 2px 8px rgba(0,0,0,.95),0 0 22px rgba(255,120,50,.35);white-space:nowrap}
.bossbar .read{font:500 .7rem/1.5 var(--mono);color:#e6d5c2;text-align:right;text-shadow:0 1px 6px rgba(0,0,0,.95);white-space:nowrap}
.bossbar .read b{color:#fff;font-weight:500}
.bossbar .read b.pct{font:700 1.15rem/1.2 var(--mono);color:#fff;text-shadow:0 0 0 #000,0 2px 8px rgba(0,0,0,.95)}
.bossbar .read .phase{font:700 .56rem/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.erbar{position:relative;height:15px;background:#050202;border:1px solid #f6f1ea;box-shadow:0 0 0 2px #050202,0 0 0 3px rgba(255,255,255,.4),0 10px 30px rgba(0,0,0,.8)}
.erbar:before,.erbar:after{content:"";position:absolute;top:50%;width:10px;height:10px;background:#050202;border:1px solid #f6f1ea;transform:translateY(-50%) rotate(45deg);box-shadow:0 0 0 2px #050202,0 0 0 3px rgba(255,255,255,.4)}
.erbar:before{left:-9px}.erbar:after{right:-9px}
.erbar i{position:absolute;top:0;bottom:0;left:0;transform-origin:left}
.erbar .ghost{background:#e0301c;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .4s}
.erbar .fill{background:linear-gradient(180deg,#ffffff 0%,#ece6dc 55%,#d9d1c6 100%);transition:transform .15s ease-out}
.erbar .heal{background:rgba(120,230,140,.85);opacity:0;transition:opacity .4s}
.erbar .marks b{position:absolute;top:4px;bottom:4px;width:1px;background:#fff;mix-blend-mode:difference;opacity:.75}
.erbar .marks b.big{top:0;bottom:0;width:2px;opacity:1}
.ticklabels{position:relative;height:12px;margin-top:5px}
.ticklabels span{position:absolute;transform:translateX(-50%);font:600 .56rem/1 var(--mono);letter-spacing:.06em;color:#f6f1ea;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 2px #000}
.ticklabels span:first-child{transform:none}.ticklabels span:last-child{transform:translateX(-100%)}

/* CA bar */
.cabar{left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:11px;width:max-content;max-width:calc(100% - 20px);background:linear-gradient(180deg,#ff7a3a,#d9411f);color:#2a0c04;border:1.5px solid rgba(255,255,255,.55);border-radius:14px;padding:11px 16px;cursor:pointer;box-shadow:0 16px 40px -12px rgba(255,106,42,.85);font-family:var(--ui)}
.cabar:hover{filter:brightness(1.06)}
.cabar:active{transform:translateX(-50%) translateY(1px)}
.cabar .calabel{font-weight:800;font-size:.64rem;letter-spacing:.16em;opacity:.85;flex:none}
.cabar .caval{font:700 1.02rem/1.2 var(--mono);word-break:break-all;text-align:center}
.cabar .cacopy{flex:none;font-weight:800;font-size:.72rem;background:rgba(42,12,4,.22);border-radius:9px;padding:6px 11px;white-space:nowrap}

/* banner + toast */
.banner{position:absolute;left:0;right:0;top:34%;z-index:4;text-align:center;pointer-events:none;opacity:0}
.banner.show{animation:bannerIn 3.4s ease forwards}
@keyframes bannerIn{0%{opacity:0;transform:scale(.92);filter:blur(6px)}12%{opacity:1;transform:scale(1);filter:blur(0)}80%{opacity:1}100%{opacity:0;transform:scale(1.03)}}
.banner .big{font:900 clamp(28px,6vw,80px)/1 var(--boss);letter-spacing:.2em;color:#fff1d6;text-shadow:0 0 40px rgba(255,140,60,.8),0 0 4px #ff6a2a}
.banner .sub{font:600 clamp(12px,1.4vw,17px)/1.3 var(--ui);color:var(--gold);margin-top:10px;letter-spacing:.08em}
.banner.kill .big{color:#ffe9b0;text-shadow:0 0 60px rgba(255,200,90,.9)}
.banner.crush .big{color:#ff6a5a;text-shadow:0 0 44px rgba(255,60,40,.85),0 0 4px #7a0f08;letter-spacing:.24em}
.banner.crush .sub{color:#ffd6cf}
.toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,16px);z-index:40;background:var(--panel-2);border:1px solid var(--gold);color:var(--ink);padding:10px 16px;font:600 .78rem/1 var(--ui);border-radius:10px;opacity:0;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* sheets (pop-ups) */
#scrim{position:fixed;inset:0;z-index:20;background:rgba(5,1,1,.62);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
#scrim.on{display:flex}
.sheet{width:100%;max-width:520px;max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--pline);border-radius:18px;box-shadow:var(--shadow);padding:20px 22px 24px;position:relative}
.sheet.wide{max-width:760px}
.sheet .closebar{position:absolute;top:14px;right:14px}
.sheet .closebar button{background:var(--panel-2);border:1px solid var(--pline);color:var(--ink-soft);width:30px;height:30px;border-radius:9px;font-size:1rem;line-height:1}
.sheet h2{margin:0 0 4px;font:700 1.2rem/1.2 var(--ui);letter-spacing:.06em;display:flex;align-items:center;gap:9px;color:#fff}
.sheet .lede{color:var(--ink-soft);margin:0 0 16px;font-size:.86rem}
.sheet h3{margin:18px 0 8px;font:700 .62rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ember-soft)}
.rule{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--panel-2);border:1px solid var(--pline);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.rule .ic{width:34px;height:34px;color:var(--gold)}
.rule b{display:block;font:700 .84rem/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:3px}
.rule p{margin:0;font-size:.84rem;color:var(--ink-soft)}
.rule .fx{font:500 .72rem/1.5 var(--mono);color:var(--ink);margin-top:5px}
.rule .fx em{font-style:normal;color:var(--ember-soft)}
.rule.heal .fx em{color:var(--heal)}
table.t{width:100%;border-collapse:collapse;font:500 .76rem/1.3 var(--mono)}
table.t th,table.t td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--pline);white-space:nowrap}
table.t th{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
table.t tr:last-child td{border-bottom:0}
table.t td.g{color:var(--gold)}table.t td.e{color:var(--ember-soft)}
table.t tr.giant td{background:rgba(120,30,12,.35)}
table.t .sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.tw{overflow-x:auto}
.lootstrip{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--panel-2);border:1px solid var(--pline);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.lootstrip .k{display:block;font:700 .52rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.lootstrip b{font:500 1.5rem/1 var(--mono);color:var(--gold);text-shadow:0 0 18px rgba(242,196,107,.35)}
.lootstrip small{font-size:.75rem;color:var(--ink-soft);margin-left:5px}
.lootstrip .split-line{font:500 .72rem/1.5 var(--mono);color:var(--ink)}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb li{display:grid;grid-template-columns:24px 1fr auto auto;gap:10px;align-items:center;background:var(--panel-2);border:1px solid var(--pline);border-radius:11px;padding:8px 12px}
.lb li:nth-child(1){border-color:#E8B84B}
.lb .r{font:700 .9rem/1 var(--ui);color:var(--ink-soft);text-align:center}
.lb li:nth-child(1) .r{color:#E8B84B}.lb li:nth-child(2) .r{color:#c9c9c9}.lb li:nth-child(3) .r{color:#c08a57}
.lb .a{font:500 .8rem/1.2 var(--mono);color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .a small{display:block;font:700 .55rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
.lb .d{font:500 .8rem/1 var(--mono);color:var(--ember-soft);text-align:right}
.lb .s{font:500 .72rem/1 var(--mono);color:var(--gold);text-align:right;min-width:70px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.kv div{background:var(--panel-2);border:1px solid var(--pline);border-radius:11px;padding:10px 12px}
.kv .k{font:700 .55rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.kv .v{font:500 1rem/1.2 var(--mono);color:var(--gold);margin-top:5px}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.bosscard{border:1px solid var(--pline);background:var(--panel-2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:5px;min-width:0}
.bosscard canvas{width:100%;height:76px;display:block;border-radius:8px;background:#2a1109}
.bosscard .st{font:700 .52rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.bosscard b{font:700 .74rem/1.2 var(--ui);letter-spacing:.04em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bosscard .hpv{font:500 .68rem/1 var(--mono);color:var(--ink-soft)}
.bosscard.slain .st{color:var(--heal)}.bosscard.now{border-color:var(--ember)}.bosscard.now .st{color:var(--ember-soft)}.bosscard.locked{opacity:.5}.bosscard.world{border-color:var(--cyan)}.bosscard.world .st{color:var(--cyan)}
.countdown{display:flex;gap:8px;margin-top:6px}
.countdown div{text-align:center;border:1px solid var(--pline);background:var(--panel-2);padding:8px 10px;min-width:60px;border-radius:10px}
.countdown b{display:block;font:500 1.4rem/1 var(--mono);color:#fff}
.countdown span{font:700 .5rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:5px}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.links a{text-decoration:none;color:#fff;border:1px solid var(--pline);background:var(--panel-2);border-radius:10px;padding:10px 13px;font:700 .76rem/1 var(--ui);letter-spacing:.04em}
.links a:hover{border-color:var(--ember)}
.links a.p{background:linear-gradient(180deg,#ff7a3a,#d9411f);color:#2a0c04;border-color:rgba(255,255,255,.4)}
.cabox{display:flex;align-items:center;gap:8px;border:1px solid var(--pline);background:var(--bg);padding:8px 8px 8px 12px;border-radius:10px}
.cabox code{font:500 .78rem/1.3 var(--mono);color:var(--ink);word-break:break-all;flex:1}
.disc{font:500 .66rem/1.4 var(--mono);color:var(--ink-soft);margin-top:16px;opacity:.8}

@media (prefers-reduced-motion:reduce){.banner.show{animation-duration:.01s}.feed li{animation:none}}
@media (max-width:720px){
  .topright .glassbtn .lbl{display:none}.topright .glassbtn{padding:10px}.btn-primary{padding:10px 12px}
  .statrow{top:70px}
  .bossbar{width:calc(100% - 28px);bottom:86px}.bossbar .name{font-size:16px}.bossbar .read{font-size:.6rem}
  .cabar{padding:9px 12px;gap:8px}.cabar .caval{font-size:.78rem}.cabar .calabel{display:none}
  .brandbar h1{font-size:1rem}
}