@font-face{font-family:'Cinzel';font-weight:700;src:url(../assets/fonts/cinzel-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Cinzel';font-weight:900;src:url(../assets/fonts/cinzel-900.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Spectral';font-weight:400;src:url(../assets/fonts/spectral-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Spectral';font-weight:600;src:url(../assets/fonts/spectral-600.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;src:url(../assets/fonts/spectral-400i.woff2) format('woff2');font-display:swap}
:root{
  --bg:#07090f; --panel:#101722; --panel2:#0b1119; --line:#2a4056;
  --gold:#e9c85c; --goldhi:#ffe9a3; --golddk:#8a6d1f; --txt:#d8e2ec; --dim:#8fa2b3;
  --hp:#57d977; --mana:#62cfe8; --rare:#5aa7f0; --epic:#c06df0; --danger:#ff6a4d;
}
*{box-sizing:border-box;margin:0}
html{font-size:17px}
body{
  background:
    radial-gradient(1200px 600px at 50% -100px,#14283a55,transparent),
    radial-gradient(900px 500px at 80% 110%,#3a276022,transparent),
    var(--bg);
  color:var(--txt);font-family:'Spectral',serif;min-height:100vh}
nav{display:flex;gap:6px;padding:12px 18px;background:#05070bdd;border-bottom:1px solid var(--line);position:sticky;top:0;flex-wrap:wrap;z-index:10;backdrop-filter:blur(4px)}
nav button{background:linear-gradient(#141d2a,#0b1119);border:1px solid var(--line);color:var(--dim);padding:9px 20px;cursor:pointer;font-size:.82rem;font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;border-radius:2px}
nav button.on{color:var(--goldhi);border-color:var(--golddk);box-shadow:0 0 12px #e9c85c33,inset 0 0 8px #e9c85c22}
.screen{display:none;padding:30px 24px;max-width:1200px;margin:0 auto}
.screen.on{display:block}
h1{font-family:'Cinzel',serif;font-size:2rem;font-weight:900;letter-spacing:6px;color:var(--gold);text-shadow:0 0 24px #e9c85c55,0 2px 0 #000;text-align:center}
h1 .flourish{display:block;font-size:.9rem;color:var(--golddk);letter-spacing:0}
.sub{color:var(--dim);font-size:.85rem;margin:6px 0 26px;text-align:center;font-style:italic}
.panel{position:relative;background:linear-gradient(#121a26,#0c121b);border:1px solid var(--line);padding:22px;box-shadow:inset 0 0 40px #00000088,0 4px 18px #000a}
.panel::before{content:"";position:absolute;inset:5px;border:1px solid #2a405644;pointer-events:none}
.panel::after{content:"◆";position:absolute;top:-11px;left:50%;transform:translateX(-50%);color:var(--golddk);background:var(--bg);padding:0 8px;font-size:12px}
.panel h2{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:var(--gold);letter-spacing:3px;text-align:center;margin-bottom:16px}
.panel h2::after{content:"";display:block;margin:8px auto 0;width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--golddk),transparent)}
.row{display:flex;gap:20px;flex-wrap:wrap}.row>*{flex:1;min-width:300px}
.btn{display:block;width:100%;margin-top:14px;padding:14px;font-family:'Cinzel',serif;font-weight:900;letter-spacing:3px;font-size:1.05rem;color:#241a05;cursor:pointer;border:1px solid #f4dc8a;border-radius:2px;background:linear-gradient(#ffe9a3,#d9b545 55%,#b8922e);box-shadow:0 0 16px #e9c85c44,inset 0 1px 0 #fff8;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:linear-gradient(#18222f,#0d141d);color:var(--dim);border-color:var(--line);box-shadow:none;font-weight:700}
.note{font-size:.85rem;color:var(--dim);margin-top:12px;line-height:1.6}

/* ---- icon sockets (engraved) ---- */
.sock{position:relative;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#233246,#0b111a 68%);
  border:2px solid #3b5471;
  box-shadow:inset 0 3px 8px #000c, inset 0 -2px 4px #ffffff10, 0 2px 6px #000a;
  display:flex;align-items:center;justify-content:center}
.sock::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid #00000088;pointer-events:none}
.sock img{width:58%;height:58%;filter:drop-shadow(0 2px 2px #000c) brightness(.92)}
.sock.gold{border-color:var(--gold);box-shadow:inset 0 3px 8px #000c,0 0 14px #e9c85c55}
.sock.gold img{filter:drop-shadow(0 0 6px #e9c85c88)}

/* ---- textured bars ---- */
.tbar{position:relative;height:18px;border:1px solid #000;box-shadow:0 1px 3px #000a,inset 0 0 4px #000}
.tbar>img.bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tbar .fill{position:absolute;top:2px;left:2px;bottom:2px;overflow:hidden}
.tbar .fill img{height:100%;width:auto;min-width:400px;display:block}

/* ---- login ---- */
.login-wrap{max-width:480px;margin:0 auto}
.bigchoice{display:flex;flex-direction:column;gap:4px}
.charcard{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);background:linear-gradient(90deg,#16202e,#0d141d);margin-bottom:10px;cursor:pointer}
.charcard:hover{border-color:var(--golddk);box-shadow:0 0 10px #e9c85c22}
.charcard .pic{width:56px;height:56px;border:1px solid var(--golddk);overflow:hidden;position:relative;background:#0b1119}
.charcard .pic img{width:100%;height:100%;object-fit:cover}
.charcard b{font-family:'Cinzel',serif;letter-spacing:1px;font-size:1rem}
.charcard .cd{color:var(--dim);font-size:.85rem}
.charcard .lvl{margin-left:auto;color:var(--gold);font-family:'Cinzel',serif}
input.pin{width:100%;padding:12px;font-size:1.2rem;letter-spacing:12px;text-align:center;background:#060a10;border:1px solid var(--line);color:var(--goldhi);border-radius:2px;font-family:monospace;margin-top:10px}
input.pin::placeholder{letter-spacing:2px;font-size:.9rem;font-family:'Spectral',serif;color:var(--dim)}
input.nm{width:100%;padding:12px;font-size:1.05rem;background:#060a10;border:1px solid var(--line);color:var(--txt);border-radius:2px;font-family:'Spectral',serif;margin-bottom:12px}
.classpick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 4px}
.classpick .cp{text-align:center;cursor:pointer;padding:10px 4px;border:1px solid var(--line);background:#0b1119}
.classpick .cp.sel{border-color:var(--gold);box-shadow:0 0 10px #e9c85c33}
.classpick .sock{width:56px;height:56px;margin:0 auto 8px}
.classpick small{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:1px;color:var(--dim)}
.classpick .sel small{color:var(--goldhi)}
.loginlink{color:var(--mana);font-size:.9rem;text-align:center;margin-top:14px;cursor:pointer}
.formerr{color:var(--danger);font-size:.85rem;margin-top:8px;text-align:center;min-height:1.1em}
.shake{animation:shakeX .4s}
@keyframes shakeX{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}100%{transform:translateX(0)}}
input.err{border-color:var(--danger)!important;box-shadow:0 0 8px #ff6a4d55}
.btn.disabled{opacity:.4;cursor:not-allowed;filter:none;box-shadow:none}

/* ---- lobby ---- */
.member{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);margin-bottom:10px;background:linear-gradient(90deg,#141d2a,#0c121b)}
.member.you{border-color:var(--golddk)}
.ava{width:48px;height:48px;border:1px solid var(--golddk);overflow:hidden;background:#0b1119;flex:none}
.ava img{width:100%;height:100%;object-fit:cover}
.member .nm{font-family:'Cinzel',serif;font-weight:700;font-size:1rem;letter-spacing:1px}
.member .cls{font-size:.82rem;color:var(--dim)}
.member .lv{margin-left:auto;color:var(--gold);font-family:'Cinzel',serif;font-size:1rem}
.ready{font-size:.7rem;color:var(--hp);border:1px solid #57d97766;padding:2px 8px;letter-spacing:1px;background:#57d97711}
.ready.readyoff{color:var(--dim);border-color:var(--line);background:transparent}
.readybtn{font-size:.7rem;padding:4px 10px;letter-spacing:1px;cursor:pointer;background:#18222f;border:1px solid var(--line);color:var(--dim);font-family:'Cinzel',serif}
.readybtn.on{color:var(--hp);border-color:#57d97766;background:#57d97711}
.joincode{font-family:'Cinzel',serif;letter-spacing:3px;color:var(--goldhi);text-align:center;margin:10px 0}
.joinin{display:flex;gap:8px;margin-bottom:14px}
.joinin input{flex:1;padding:10px;background:#060a10;border:1px solid var(--line);color:var(--txt);text-transform:uppercase;letter-spacing:2px;text-align:center;font-family:'Spectral',serif}
.joinin button{padding:0 18px;background:#18222f;border:1px solid var(--line);color:var(--gold);cursor:pointer;font-family:'Cinzel',serif}
.npcline{font-style:italic;color:var(--mana);font-size:.85rem;margin:-6px 0 14px;text-align:center}
.pct{color:var(--dim);font-size:.85rem;text-align:right;margin-top:8px}
.dungeon{border:1px solid var(--line);padding:14px 16px;margin-bottom:12px;cursor:pointer;position:relative;background:linear-gradient(90deg,#182333,#0d141d)}
.dungeon:hover{border-color:var(--golddk)}
.dungeon.locked{opacity:.4;cursor:default}
.dungeon.sel{border-color:var(--gold);box-shadow:0 0 10px #e9c85c33}
.dungeon .dn{font-family:'Cinzel',serif;color:var(--goldhi);font-weight:700;letter-spacing:1px;font-size:1.05rem}
.dungeon .dd{font-size:.85rem;color:var(--dim);margin-top:3px}
.dungeon .mech{font-size:.8rem;color:var(--mana);margin-top:5px;font-style:italic}
.dungeon .lock{position:absolute;right:14px;top:14px;font-size:1.2rem}
.chat{height:180px;overflow-y:auto;background:#060a10;border:1px solid var(--line);padding:10px;font-size:.9rem;margin-bottom:8px}
.chat .who{color:var(--gold);font-family:'Cinzel',serif;font-size:.8rem}
.chat p{margin-bottom:6px}
.chat .sys{color:var(--dim);font-style:italic}
.chatin{display:flex;gap:8px}
.chatin input{flex:1;padding:10px;background:#060a10;border:1px solid var(--line);color:var(--txt);font-family:'Spectral',serif;font-size:.95rem}
.chatin button{padding:0 18px;background:#18222f;border:1px solid var(--line);color:var(--gold);cursor:pointer;font-family:'Cinzel',serif}

/* ---- skill tree ---- */
.ctabs{display:flex;justify-content:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.ctabs button{display:flex;align-items:center;gap:8px;background:linear-gradient(#141d2a,#0b1119);border:1px solid var(--line);color:var(--dim);padding:8px 18px;cursor:pointer;font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;font-size:.8rem;border-radius:2px}
.ctabs button img{width:22px;height:22px;filter:drop-shadow(0 1px 2px #000c) brightness(.8)}
.ctabs button.on{color:var(--goldhi);border-color:var(--golddk);box-shadow:0 0 12px #e9c85c33,inset 0 0 8px #e9c85c22}
.ctabs button.on img{filter:drop-shadow(0 0 5px #e9c85c88)}
.treebox{position:relative;margin:0 auto;max-width:920px;height:880px}
.treebox svg{position:absolute;inset:0;width:100%;height:100%}
.tnode{position:absolute;width:80px;height:80px;transform:translate(-50%,-50%);cursor:pointer}
.tnode .sock{width:100%;height:100%}
.tnode.owned .sock{border-color:var(--gold);box-shadow:inset 0 3px 8px #000c,0 0 16px #e9c85c66}
.tnode.owned .sock img{filter:drop-shadow(0 0 6px #e9c85caa)}
.tnode.avail .sock{border-color:var(--hp);box-shadow:inset 0 3px 8px #000c,0 0 12px #57d97744}
.tnode.locked .sock{filter:grayscale(1) brightness(.45)}
.tnode.capstone{width:100px;height:100px}
.tnode.capstone .sock{background:radial-gradient(circle at 38% 30%,#332a46,#0b111a 68%)}
.tnode:hover{z-index:30}
.tnode .lbl{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:1px;color:var(--dim);text-align:center}
.tnode.owned .lbl{color:var(--goldhi)}
.tnode .pips{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);display:flex;gap:3px}
.pip{width:9px;height:9px;border-radius:50%;border:1px solid var(--golddk);background:#0a0f16}
.pip.f{background:var(--gold);box-shadow:0 0 5px var(--gold)}
.tip{display:none;position:absolute;z-index:40;top:calc(100% + 30px);left:50%;transform:translateX(-50%);width:240px;background:#04070c;border:1px solid var(--golddk);padding:12px;font-size:.85rem;text-align:left;box-shadow:0 6px 20px #000c}
.tnode.up .tip{top:auto;bottom:calc(100% + 14px)}
.tnode:hover .tip{display:block}
.tip b{color:var(--gold);font-family:'Cinzel',serif;letter-spacing:1px}
.tip .cd{color:var(--mana)}.tip .req{color:var(--danger)}
.treehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 30px}
.pts{font-family:'Cinzel',serif;color:var(--gold);font-size:1.1rem}
.pts small{color:var(--dim);font-family:'Spectral',serif}

/* ---- character ---- */
.doll{display:grid;grid-template-columns:88px 1fr 88px;gap:14px;align-items:center;justify-items:center;padding:10px 0}
.slotcol{display:flex;flex-direction:column;gap:16px}
.slot{width:76px;height:76px;position:relative;cursor:pointer;
  background:url(../assets/menus/slot_empty.png) center/cover;
  border:2px solid var(--line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 12px #000c}
.slot img.ic{width:60%;height:60%;filter:drop-shadow(0 2px 2px #000c)}
.slot small{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:.6rem;color:var(--dim);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.slot.rare{border-color:var(--rare);box-shadow:inset 0 0 12px #000c,0 0 10px #5aa7f044}
.slot.epic{border-color:var(--epic);box-shadow:inset 0 0 12px #000c,0 0 10px #c06df044}
.slot.common{border-color:#8fa2b388}
.slot .tip{top:calc(100% + 20px);width:220px}
.slot:hover .tip{display:block}
.tip .iname{font-family:'Cinzel',serif;letter-spacing:1px}
.tip .iname.rare{color:var(--rare)}.tip .iname.epic{color:var(--epic)}.tip .iname.common{color:#cfd8e0}
.tip .cmp{color:var(--hp)}
.hero-stage{width:230px;height:300px;border:1px solid var(--golddk);background:radial-gradient(circle at 50% 30%,#233a52,#0a0f16 75%);box-shadow:inset 0 0 40px #000;position:relative}
.hero-stage canvas{position:absolute;inset:0}
.stat{display:flex;justify-content:space-between;font-size:1rem;padding:8px 2px;border-bottom:1px solid #1c2a3a}
.stat b{color:var(--goldhi);font-family:'Cinzel',serif}
.xpbar{margin-top:14px}
.equipped-arts{display:flex;gap:14px;margin-top:6px}
.equipped-arts .sock{width:54px;height:54px}
.equipped-arts .kb{position:absolute;bottom:-4px;right:-4px}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.card{border:2px solid var(--golddk);background:url(../assets/menus/frame_background.png) center/cover;padding:14px;text-align:center;position:relative;border-radius:8px;box-shadow:0 6px 18px #000a,inset 0 0 60px #000000cc}
.card::before{content:"";position:absolute;inset:6px;border:1px solid #e9c85c33;border-radius:5px;pointer-events:none}
.card.locked{border-color:var(--line)}
.card canvas{width:100%;height:130px;display:block}
.card .cn{color:var(--goldhi);font-family:'Cinzel',serif;font-weight:900;letter-spacing:2px;font-size:1rem;text-shadow:0 1px 3px #000}
.card .lore{font-size:.85rem;color:#b8c4cf;font-style:italic;margin:8px 0;text-shadow:0 1px 2px #000}
.card .pw{font-size:.9rem;color:var(--mana);border-top:1px solid #2a405688;padding-top:8px;text-shadow:0 1px 2px #000}
.card .ps{font-size:.85rem;color:var(--hp);text-shadow:0 1px 2px #000}
.card.locked .cn{color:var(--dim)}
.eq{position:absolute;top:8px;right:8px;font-size:.65rem;color:#241a05;background:linear-gradient(#ffe9a3,#d9b545);padding:2px 7px;font-family:'Cinzel',serif;font-weight:700;border-radius:2px;z-index:2}

/* ---- HUD ---- */
.hudwrap{position:relative;height:620px;background:radial-gradient(ellipse at 50% 45%,#1c2b33,#0b1218);border:1px solid var(--line);overflow:hidden}
.hudwrap::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px #000c}
.pf{position:absolute;left:14px;width:250px;background:#0a121bd8;border:1px solid var(--line);padding:8px;font-size:.9rem;display:flex;gap:10px;align-items:center}
.pf .port{width:52px;height:52px;flex:none;border:2px solid var(--gold);overflow:hidden;position:relative;box-shadow:0 0 8px #e9c85c33}
.pf .port img{width:100%;height:100%;object-fit:cover}
.pf.arcanist .port{border-color:var(--epic);box-shadow:0 0 8px #c06df044}
.pf .bars{flex:1;min-width:0}
.pf .nm{font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;font-size:.9rem}
.pf .agg{color:var(--danger);font-size:.72rem;font-weight:700;float:right}
.pf .tbar{height:14px;margin-top:4px}
.pf .tbar.mp{height:9px}
.stacks{display:flex;gap:4px;margin-top:4px}
.stacks i{width:16px;height:16px;border:1px solid var(--line);background:#132030;display:block;font-style:normal;font-size:.6rem;color:var(--mana);text-align:center;line-height:15px}
.bossbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:42%;background:#0a121be8;border:2px solid var(--golddk);padding:10px 16px;text-align:center;box-shadow:0 0 24px #000d,inset 0 0 20px #0008}
.bossbar::before{content:"";position:absolute;inset:3px;border:1px solid #e9c85c2c;pointer-events:none}
.bossbar::after{content:"◆";position:absolute;top:-13px;left:50%;transform:translateX(-50%);color:var(--gold);background:#0a121b;padding:0 10px;font-size:14px}
.bossbar .bn{font-family:'Cinzel',serif;font-weight:900;letter-spacing:2px;color:var(--goldhi);font-size:1.05rem;text-shadow:0 1px 3px #000}
.bossbar .tbar{height:18px;margin-top:7px}
.bossbar .ph{font-size:.78rem;color:var(--mana);margin-top:4px;letter-spacing:1px}
.castbar{position:absolute;top:118px;left:50%;transform:translateX(-50%);width:34%;background:#0a121bd8;border:1px solid var(--danger);padding:6px 10px;font-size:.85rem;color:var(--danger);font-weight:600}
.castbar .b{height:8px;background:#000;margin-top:4px}.castbar .b i{display:block;height:100%;width:45%;background:var(--danger)}
.artbar{position:absolute;bottom:0;left:0;right:0;height:96px;background:linear-gradient(transparent,#05070bcc 40%,#05070b);border-top:1px solid #2a405644}
.arts{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:16px;align-items:flex-end}
.art{width:64px;height:64px;position:relative}
.art .sock{width:100%;height:100%}
.art small{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:.66rem;color:var(--dim);white-space:nowrap;font-family:'Cinzel',serif;letter-spacing:1px}
.kb{position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:linear-gradient(#ffe9a3,#c9a53d);color:#241a05;font-family:'Cinzel',serif;font-weight:900;font-size:.72rem;display:flex;align-items:center;justify-content:center;border:1px solid #f4dc8a;border-radius:3px;box-shadow:0 1px 3px #000c;z-index:3}
.cdov{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#000c 0 58%,transparent 58%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem;font-weight:600;z-index:2}
.art.chain{width:80px;height:80px}
.art.chain .sock{border-color:var(--gold);box-shadow:inset 0 3px 8px #000c,0 0 24px #e9c85c99;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:inset 0 3px 8px #000c,0 0 38px #e9c85ccc}}
.dmg{position:absolute;font-weight:900;text-shadow:2px 2px 3px #000;font-family:'Cinzel',serif}
.telegraph{position:absolute;width:220px;height:110px;border:2px solid #ff6a4d99;border-radius:50%;background:radial-gradient(ellipse,#ff6a4d2c,#ff6a4d08);left:44%;top:46%}
.joy{position:absolute;bottom:34px;left:44px;width:110px;height:110px;border:2px solid #ffffff2c;border-radius:50%}
.joy i{position:absolute;left:34px;top:34px;width:42px;height:42px;background:#ffffff3c;border-radius:50%}
.mobiletag{position:absolute;top:10px;right:12px;font-size:.75rem;color:var(--dim)}