/* Soul Crash – "Maple" interface, ported from the Zenonia Idle UI:
   navy-slate window frames with a lime title, cyan tabs, light content panels and slots, frosted-glass HUD,
   round icon buttons with badges, flat pill buttons. Loaded after fb.css: it overrides the Android 9-slice art. */
@font-face{font-family:"Barlow";src:url("../assets/font/Prs-Barlow-Medium.ttf");font-weight:500}
@font-face{font-family:"Barlow";src:url("../assets/font/Prs-Barlow-SemiBold.ttf");font-weight:600}
@font-face{font-family:"Barlow";src:url("../assets/font/Prs-Barlow-Bold.ttf");font-weight:700 900}
@font-face{font-family:"BarlowC";src:url("../assets/font/Prs-BarlowCondensed-Bold.ttf");font-weight:700 900}
:root{
  --f:"Barlow","Segoe UI",Arial,sans-serif;--fc:"BarlowC","Arial Narrow",var(--f);
  --frame1:#4b5967;--frame2:#2a343e;--edge:#161c23;--title:#e3f26a;--cy1:#5ad3ea;--cy2:#23a6c8;--cyb:#1b87a7;
  --lime1:#b9dc3c;--lime2:#83ac17;--gray1:#8e98a1;--gray2:#69737d;--panel:#e8ecef;--panel2:#f4f6f7;--slot1:#e6eaed;--slot2:#d2d8dd;
  --mink:#3c4650;--mink2:#6b7680;--mink3:#9aa4ad;
  --glass:rgba(16,22,30,.72);--glassb:rgba(255,255,255,.16);
  font-family:var(--f);
}
html,body{font-family:var(--f);font-weight:600}
body{background:radial-gradient(1100px 700px at 50% 40%,#16202a,#04070a)}
#stage{background:#0b1016;box-shadow:0 0 0 2px #1d2630,0 20px 80px #000}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--lime2);border-image:none;border-radius:8px;min-width:84px;padding:7px 16px;
  font:800 14px/1.1 var(--f);letter-spacing:.04em;text-transform:uppercase;color:#223000;text-shadow:0 1px 0 rgba(255,255,255,.45);
  background:linear-gradient(180deg,#d6f05a,var(--lime1) 45%,var(--lime2));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 0 #4c6a08,0 4px 8px rgba(0,0,0,.4);transition:filter .1s,transform .1s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 #4c6a08}
.btn.gold{border-image:none;border-color:#c98e12;color:#3b2500;background:linear-gradient(180deg,#ffe27a,#ffc233 45%,#e49a10);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 #8a5a05,0 4px 8px rgba(0,0,0,.4)}
.btn.red{border-image:none;border-color:#a8262d;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4);background:linear-gradient(180deg,#ff7b73,#e0414a 45%,#b82a33);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 #6a1418,0 4px 8px rgba(0,0,0,.4)}
.btn.grey{border-image:none;border-color:#3a434b;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6);background:linear-gradient(180deg,#68737e,#4a545d 45%,#363e46);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 #262d33,0 4px 8px rgba(0,0,0,.4)}
.btn.green{border-image:none;border-color:var(--cyb);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);background:linear-gradient(180deg,#7fe0f2,var(--cy1) 45%,var(--cy2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 #11627b,0 4px 8px rgba(0,0,0,.4)}
.btn.big{font-size:19px;padding:10px 30px;border-radius:10px}
.btn.off{opacity:.45;pointer-events:none;filter:grayscale(.6)}
.xbtn{width:22px;height:22px;background:none;border-radius:50%;color:#aab4bd;font-size:0;position:relative}
.xbtn:before{content:"✕";font:700 14px/22px var(--f);position:absolute;inset:0;text-align:center}
.xbtn:hover{color:#fff;background:rgba(255,255,255,.12)}

/* ---------------------------------------------------------------- HUD (top) */
#hud{height:46px;gap:8px;padding:0 12px;background:linear-gradient(180deg,rgba(10,15,21,.92),rgba(10,15,21,.7));border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hp{height:30px;padding:0 6px 0 4px;border:1px solid var(--glassb);border-image:none;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.35);font:800 15px var(--fc);letter-spacing:.02em;color:#f1f6fa;text-shadow:0 1px 2px #000}
.hp img{height:24px;margin:0 0 0 -2px}
.hp b{min-width:48px;font-weight:800}
.hp .plus{width:20px;height:20px;margin:0 0 0 2px;border:1px solid var(--lime2);border-image:none;border-radius:50%;background:linear-gradient(180deg,#d6f05a,var(--lime2));font:900 15px/17px var(--f);color:#223000;text-align:center;text-shadow:none;font-size:15px}
.hp .plus:after{content:""}
.hp.stone{padding:0 10px 0 4px;gap:2px}.hp.stone img{height:22px}
#hud .set{width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid var(--glassb);font-size:16px;color:#dfe8ee}
#hud .set:hover{background:rgba(255,255,255,.2)}

/* quest helper + combat power plates (top-right of the scene) */
.plate{position:absolute;right:14px;width:208px;z-index:3;border-radius:7px;border:1px solid var(--glassb);background:var(--glass);box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);color:#fff}
.plate .pt1{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 2px;font:900 11px var(--fc);letter-spacing:.14em;color:var(--title);text-transform:uppercase}
.plate .pt1 i{font-style:normal;background:rgba(255,255,255,.16);color:#fff;border-radius:9px;padding:0 7px;font-size:11px;letter-spacing:0}
.plate .pt2{padding:0 10px 8px;font:600 12.5px/1.3 var(--f);color:#e7eef3}
.plate .pt2 b{color:#ffe27a}
.plate .pbar{height:4px;margin:6px 0 0;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}.plate .pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--cy1),var(--cy2))}
.plate.cp{border-color:rgba(255,214,120,.35);background:linear-gradient(180deg,rgba(60,42,12,.78),rgba(24,16,6,.78))}
.plate.cp .pt1{color:#ffcf6a}.plate.cp .num{padding:0 10px 6px;font:900 30px/1 var(--fc);color:#fff;text-align:right;text-shadow:0 2px 0 #000,0 0 14px rgba(255,190,60,.55)}

/* the street fills the whole stage; HUD bars float over it */
#scene{top:0;height:720px}#scv{height:720px}
#lcol,#rcol{display:none}
#bottom{background:linear-gradient(180deg,#0e141b,#070a0e)}
#friends{background:rgba(0,0,0,.28)}
/* ---------------------------------------------------------------- scene side icons: round glass buttons */
.icol{gap:14px}
#lcol{left:16px;top:16px}#rcol{right:16px;top:158px}
.ib{width:84px;font:700 12px/1.05 var(--f);letter-spacing:.02em;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000}
.ib img{height:50px;width:50px;object-fit:contain;padding:7px;margin:0 auto 4px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.28),rgba(20,28,38,.78) 62%);border:1px solid rgba(255,255,255,.3);box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35);filter:none;transition:.12s}
.ib:hover img{border-color:var(--cy1);box-shadow:0 0 0 2px rgba(90,211,234,.45),0 3px 10px rgba(0,0,0,.5)}
.ib .bd{right:14px;top:-5px;min-width:19px;height:19px;border-radius:10px;background:linear-gradient(180deg,#ff6a62,#d02a34);font:800 11px/19px var(--f);padding:0 5px;box-shadow:0 0 0 2px #fff,0 2px 4px rgba(0,0,0,.5)}

/* ---------------------------------------------------------------- bottom bar */
#bottom{height:140px;background:linear-gradient(180deg,#0e141b,#070a0e);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -8px 22px rgba(0,0,0,.45)}
#bottom:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cy2) 20%,var(--cy1) 50%,var(--cy2) 80%,transparent);opacity:.7}
#pcard{left:12px;top:10px;height:62px;width:560px;gap:12px}
#pcard .pp{width:60px;height:60px;border-radius:8px;box-shadow:0 0 0 2px var(--lime1),0 0 0 3px var(--edge),0 3px 8px rgba(0,0,0,.5);background:#0e141b}
#pcard .pp i{font:900 11px var(--fc);background:linear-gradient(180deg,#ff6a62,#c0262f);padding:0 6px;border-radius:0 7px 0 0;letter-spacing:.04em}
#pcard .pn{font:900 20px var(--f);letter-spacing:.01em;color:#fff;text-shadow:0 2px 3px #000}
#pcard .xb{height:7px;margin:3px 0 5px;border-radius:4px;background:#080c10;box-shadow:inset 0 1px 2px #000,0 0 0 1px rgba(255,255,255,.1)}
#pcard .xb i{background:linear-gradient(90deg,var(--lime2),var(--lime1) 60%,#ecff8a);box-shadow:0 0 8px rgba(185,220,60,.6)}
#pcard .ps{gap:20px}#pcard .ps small{font:700 10px var(--f);color:#8fa0ad;letter-spacing:.06em;text-transform:uppercase}#pcard .ps b{font:800 15px var(--fc);color:#fff}#pcard .ps em{color:#8fa0ad}
#pcard .wr{font:900 15px var(--fc);color:var(--title);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 3px #000;margin-top:4px}
#mainnav{right:16px;top:8px;gap:8px}
#mainnav button{width:98px;height:68px;padding-top:44px;font:800 12px var(--f);letter-spacing:.1em;text-transform:uppercase;color:#c5d0d9;text-shadow:0 1px 2px #000}
#mainnav button img{top:-6px;height:44px;width:44px;object-fit:contain;padding:6px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.3),rgba(20,28,38,.82) 62%);border:1px solid rgba(255,255,255,.3);box-shadow:0 3px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35);filter:none;transform:translateX(-50%)}
#mainnav button:hover{filter:none;color:#fff}#mainnav button:hover img{border-color:var(--cy1)}
#mainnav button.on{color:var(--title)}#mainnav button.on img{filter:none;border-color:var(--title);box-shadow:0 0 0 2px rgba(227,242,106,.4),0 3px 10px rgba(0,0,0,.55);transform:translateX(-50%) scale(1.06)}
#friends{height:62px;background:rgba(0,0,0,.35);border-top:1px solid rgba(255,255,255,.08);gap:8px}
#friends .ar{width:30px;height:40px;border-radius:6px;background:linear-gradient(180deg,#7b8691,#47515a);border:1px solid #262d33;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);font:900 13px var(--f);color:#fff}
#friends .ar:hover{filter:brightness(1.15)}
.fsl{width:132px;height:48px;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--glassb);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.fsl:hover{border-color:var(--cy1)}
.fsl.on{border-color:var(--lime1);box-shadow:inset 0 0 0 1px rgba(185,220,60,.5),0 0 12px rgba(185,220,60,.25)}
.fsl canvas{border-radius:5px;background:#0e141b}
.fsl b{font:800 11px var(--fc);color:var(--title)}
.fsl u{background:var(--lime1);box-shadow:0 0 0 2px #10161d,0 0 6px var(--lime1)}
.fsl span{font:700 12px var(--f);color:#e7eef3}
.fsl.nf{background:none;border:1px dashed rgba(255,255,255,.22);box-shadow:none}.fsl.nf span{color:#7e8d99;font-size:10px}

/* ---------------------------------------------------------------- floating windows */
#dock{width:500px;right:24px;top:54px;bottom:148px;animation:slide .16s}
.win{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 7px 7px;border:1px solid var(--edge);border-image:none;border-radius:8px;
  background:linear-gradient(180deg,var(--frame1),var(--frame2) 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.6);filter:none;color:var(--mink)}
.win .tb{height:32px;margin:0;padding:0 3px;gap:7px;background:none;cursor:move}
.win .tb img{height:22px;margin:0;filter:drop-shadow(0 1px 1px #000)}
.win .tb h2{font:900 14px var(--f);letter-spacing:.03em;color:var(--title);text-transform:uppercase;text-shadow:0 1px 0 #000}
.win .x{margin:0}
.win .body{background:var(--panel);border:1px solid #c4cbd1;border-radius:5px;box-shadow:inset 0 1px 0 #fff;padding:10px;color:var(--mink);scrollbar-width:thin;scrollbar-color:#9aa4ad transparent}
.vtabs{left:-58px;top:44px;gap:4px}
.vtabs button{width:58px;height:54px;padding-top:32px;border:1px solid #333c45;border-image:none;border-radius:6px 0 0 6px;font:700 10px var(--f);letter-spacing:.04em;color:#cfd6dc;text-shadow:0 1px 0 rgba(0,0,0,.4);background:linear-gradient(180deg,#6c7680,#4b545d)}
.vtabs button img{top:4px;height:26px}
.vtabs button:hover{filter:brightness(1.12)}
.vtabs button.on{border-image:none;color:#fff;border-color:var(--cyb);background:linear-gradient(180deg,var(--cy1),var(--cy2))}
.htabs{gap:3px;margin:0 0 4px}
.htabs button{height:26px;padding:0 4px;border:1px solid #333c45;border-bottom:0;border-image:none;border-radius:5px 5px 0 0;font:700 12px var(--f);letter-spacing:.02em;color:#cfd6dc;text-shadow:0 1px 0 rgba(0,0,0,.4);background:linear-gradient(180deg,#6c7680,#4b545d)}
.htabs button:hover{filter:brightness(1.12)}
.htabs button.on{border-image:none;color:#fff;border-color:var(--cyb);background:linear-gradient(180deg,var(--cy1),var(--cy2))}
.win .banner-book{height:34px;margin:-2px -2px 8px;padding:0 12px;border-radius:5px;background:linear-gradient(180deg,#5a6875,#3b4651);font:900 16px var(--f);letter-spacing:.05em;color:var(--title);text-transform:uppercase;text-shadow:0 1px 0 #000}
.win .banner-book img{height:34px;margin:0}

/* light content: slots, details, pills, stats, lists */
.igrid{gap:5px}
.cell{border:1px solid #c1c8ce;border-image:none;border-radius:5px;background:linear-gradient(180deg,var(--slot1),var(--slot2));box-shadow:inset 0 1px 0 #f7f9fa}
.cell:hover{filter:none;border-color:#7fcde3}
.cell.sel{border:1px solid #39b3d4;border-image:none;background:linear-gradient(180deg,#e2f6fb,#c6ecf5);box-shadow:0 0 0 2px #fff,0 0 0 3px #39b3d4}
.cell.eq:after{background:var(--cy2);color:#fff;box-shadow:0 0 0 2px #fff}
.cell .st{color:#e0a000;text-shadow:0 0 2px #fff}
.cell .ct{color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.cell .pr{background:rgba(35,48,60,.86);color:#ffe27a;font:800 10px var(--fc)}
.cell.lock:before{filter:drop-shadow(0 0 2px #000)}
.detail{margin-top:8px;padding:9px 12px;border-radius:5px;background:var(--panel2);box-shadow:none;border:1px solid #d3d9de}
.detail h3{font:900 15px var(--f);color:#2d3842;text-transform:uppercase;letter-spacing:.02em}
.detail .sub{color:var(--mink2);font-size:12.5px}
.win .muted,.dlg .muted{color:var(--mink2)}.win .gold,.dlg .gold{color:#cf8f00}.win .cy,.dlg .cy{color:#1b87a7}.win .grn,.dlg .grn{color:#3a9a2a}.win .redt,.dlg .redt{color:#d4414a}
.pill{padding:3px 10px;border-radius:13px;background:#fff;box-shadow:none;border:1px solid #c8d0d6;font:700 12px var(--f);color:var(--mink)}
.sec{margin:10px 0 4px;font:900 12px var(--fc);letter-spacing:.12em;color:#4d5862;text-transform:uppercase;border-bottom:1px solid #d3d9de;padding-bottom:3px}
.stat{border-top:1px dashed #d6dce1;font:700 13px var(--f);color:var(--mink)}
.stat .bar{background:#d8dee3;box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.stat .pp{width:24px;height:24px;border-radius:50%;border:1px solid var(--lime2);background:linear-gradient(180deg,#d6f05a,var(--lime2));color:#223000;font:900 17px/21px var(--f)}
table.lb th{color:var(--mink3);font:800 10px var(--fc);letter-spacing:.12em}
table.lb td{border-top:1px solid #dfe4e8;color:var(--mink)}table.lb tr.me td{background:#e3f6c0;color:#2a3a00;font-weight:800}
.slotbox{font:700 11px var(--f);color:var(--mink)}
.slotbox canvas{border-radius:6px;background:linear-gradient(180deg,var(--slot1),var(--slot2));box-shadow:inset 0 0 0 1px #c1c8ce}
.slotbox.sel canvas{box-shadow:inset 0 0 0 2px #39b3d4,0 0 8px rgba(57,179,212,.5)}
.skopt{padding:8px 12px;border-radius:5px;background:var(--panel2);box-shadow:none;border:1px solid #d3d9de;color:var(--mink)}
.skopt.on{border-color:#39b3d4;background:#e2f6fb;box-shadow:0 0 0 1px #39b3d4}
.win .body h2,.win .body h3{color:#2d3842}
.win input.txt,.dlg input.txt{background:#fff;color:var(--mink);box-shadow:none;border:1px solid #b9c2c9;border-radius:5px}

/* ---------------------------------------------------------------- modal dialogs */
#modal{background:rgba(4,8,12,.78)}
.dlg{overflow-x:hidden;padding:12px 16px 14px;border:1px solid var(--edge);border-image:none;border-radius:9px;background:linear-gradient(180deg,var(--panel),#dfe4e8);color:var(--mink);
  box-shadow:0 0 0 7px #3a4651,0 0 0 8px var(--edge),0 18px 50px rgba(0,0,0,.65);animation:pop .18s}
.dtb{display:flex;align-items:center;margin:-12px -16px 12px;padding:0 8px 0 16px;height:34px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--frame1),var(--frame2));box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.dtb b{flex:1;font:900 14px var(--f);letter-spacing:.05em;color:var(--title);text-transform:uppercase;text-shadow:0 1px 0 #000}
.dtb .x{position:relative;right:auto;top:auto;margin:0;width:22px;height:22px;background:none;border:0;box-shadow:none}
.dtb .x:before{color:#aab4bd;font-size:14px;line-height:22px}.dtb .x:hover:before{color:#fff}
.dlg h2{color:#2d3842;font-family:var(--f)}
.dlg>.x{right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:#c9d1d7;border:1px solid #9aa4ad}
.dlg>.x:before{font-size:13px;line-height:24px;color:#4d5862}
.say{background:#fff;color:var(--mink);box-shadow:none;border:1px solid #c8d0d6;font:600 14px/1.45 var(--f)}
.act h2{color:#2d3842;text-shadow:none}
.act .face{background:linear-gradient(#f4f7f8,#cdd5db);box-shadow:inset 0 0 0 1px #c1c8ce}
.act .obj{color:var(--mink)}
.rw .rtitle{color:#4d5862;font:900 12px var(--fc);letter-spacing:.12em}
.ritem{color:var(--mink);font:700 11px var(--f)}
.ritem canvas{background:linear-gradient(180deg,var(--slot1),var(--slot2));box-shadow:inset 0 0 0 1px #c1c8ce}
.stg .sn{width:64px;height:64px;border:1px solid #c1c8ce;border-image:none;border-radius:7px;background:linear-gradient(180deg,var(--slot1),var(--slot2));box-shadow:inset 0 1px 0 #fff;color:var(--mink);font:900 18px var(--fc)}
.stg .sn small{color:var(--mink3)}
.stg .sn:hover{border-color:#39b3d4}
.stg .sn.done{border-image:none;background:linear-gradient(180deg,#e2f6fb,#bfe9f4);border-color:#39b3d4;color:#1b6f88}
.stg .sn.boss{border-image:none;background:linear-gradient(180deg,#ff8a82,#d1424b);border-color:#a8262d;color:#fff}
.wmap{border-radius:8px;box-shadow:inset 0 0 0 3px #3a4651,inset 0 0 60px rgba(20,28,38,.55)}
.wmap .node .im{box-shadow:0 0 0 3px #fff,0 0 0 5px #3a4651,0 6px 14px rgba(0,0,0,.55)}
.wmap .node .nm{font:900 14px var(--f);color:#1d2a35;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.wmap .node .lv{font:700 11px var(--f);color:#3c4a56}
#toast div{background:var(--glass);padding:8px 20px;border-radius:7px;box-shadow:0 6px 16px rgba(0,0,0,.5);border:1px solid var(--glassb);border-left:3px solid var(--cy1);font:700 14px var(--f);color:#fff}
.res .ttl{font-family:var(--f)}
.rrow{background:var(--panel2);box-shadow:none;border:1px solid #d3d9de;color:var(--mink);font:700 14px var(--f)}

/* ---------------------------------------------------------------- chat */
#chat{background:linear-gradient(rgba(10,15,21,.4),rgba(10,15,21,.72))!important;border:1px solid transparent!important;border-radius:7px!important;box-shadow:none!important;font-family:var(--f)!important;font-size:13px!important}
#chat:hover,#chat.focus{background:var(--glass)!important;border-color:var(--glassb)!important;}
#chat .cl2{height:96px!important;-webkit-mask-image:linear-gradient(transparent,#000 28%);mask-image:linear-gradient(transparent,#000 28%)}
#home.dockopen .plate{display:none}
#chat .ch{color:var(--title)!important;font-family:var(--fc)!important}
#chat input{background:rgba(0,0,0,.4)!important;border-color:rgba(255,255,255,.2)!important}

/* ---------------------------------------------------------------- battle HUD */
#bbar{background:linear-gradient(180deg,rgba(14,20,27,.94),rgba(6,9,13,.98));border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -8px 22px rgba(0,0,0,.5)}
#bbar:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cy2) 20%,var(--cy1) 50%,var(--cy2) 80%,transparent);opacity:.7}
#bcard .pt{border-radius:8px;box-shadow:0 0 0 2px var(--cy1),0 0 0 3px var(--edge);background:#0e141b}
#benemy .pt{border-radius:8px;box-shadow:0 0 0 2px #ff6a62,0 0 0 3px var(--edge);background:#0e141b}
#bcard .inf,#benemy{font-family:var(--f)}
#bright button{border:1px solid var(--glassb);border-image:none;border-radius:50%;background:var(--glass);color:#fff;}
.cmd .lbl{font-family:var(--fc);font-style:normal;letter-spacing:.1em;text-transform:uppercase}

/* ---------------------------------------------------------------- title + creation */
#title .tagline{font-family:var(--fc);letter-spacing:.34em}
.ctitle{font-family:var(--fc);text-shadow:0 3px 0 #000,0 0 18px rgba(90,211,234,.5)}
.crow{border-radius:7px;background:none;box-shadow:0 0 0 1px var(--edge),0 4px 10px rgba(0,0,0,.45)}
.crow .cl{background:linear-gradient(180deg,var(--frame1),var(--frame2));font:900 14px var(--f);color:var(--title);text-shadow:0 1px 0 #000}
.crow .cv{background:linear-gradient(180deg,#e8ecef,#d4dade)}
.crow .cv b{font:900 19px var(--fc);color:var(--mink)}
.arr{background:linear-gradient(180deg,#d6f05a,var(--lime2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px var(--lime2),0 2px 4px rgba(0,0,0,.35);color:#223000}
.cgender{background:linear-gradient(180deg,#e8ecef,#d4dade);box-shadow:0 0 0 1px var(--edge),0 4px 10px rgba(0,0,0,.45)}
.cgender .gh{background:linear-gradient(180deg,var(--frame1),var(--frame2));color:var(--title);font-family:var(--f)}
.cgender .gb button{background:#c1c8ce;box-shadow:inset 0 0 0 1px #9aa4ad;color:#fff}
.cgender .gb button.m.on{background:linear-gradient(180deg,#7fe0f2,var(--cy2));box-shadow:inset 0 0 0 2px #fff,0 0 10px rgba(35,166,200,.7)}
.cgender .gb button.f.on{background:linear-gradient(180deg,#ff9aa8,#d6405e);box-shadow:inset 0 0 0 2px #fff,0 0 10px rgba(214,64,94,.7)}
.cname label{color:#cfe4ee;font-family:var(--f)}
.chint{color:#8fa6b5}
input.txt{background:#fff;color:var(--mink);border:1px solid #b9c2c9;box-shadow:none;font-family:var(--f)}
#loading .ld-title{font-family:var(--fc)}
.win .banner-book{display:none}
.btn.big{border-width:1px}
.win.pop{animation:wpop .16s ease-out}
@keyframes wpop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.ib .bd,.qb .bang{animation:pulse 1.1s infinite alternate}
.ib:hover{transform:translateY(-2px)}
#mainnav button.on:after{content:"";position:absolute;left:50%;bottom:-6px;width:30px;height:3px;margin-left:-15px;border-radius:2px;background:var(--title);box-shadow:0 0 8px var(--title)}
#dock{z-index:8}

/* quest helper + combat power live in the top bar now so the street stays clear */
.plate{position:absolute!important;top:6px!important;right:auto;height:34px;width:auto;z-index:6;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:17px;}
.plate.q{left:392px;width:430px}
.plate.cp{left:834px;min-width:130px}
.plate .ql{font:900 11px var(--fc);letter-spacing:.14em;color:var(--title);text-transform:uppercase;white-space:nowrap}
.plate .qt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 12.5px var(--f);color:#e7eef3}
.plate .qt b{color:#ffe27a}
.plate.q i{font-style:normal;font:800 11px var(--fc);background:rgba(255,255,255,.16);color:#fff;border-radius:9px;padding:0 7px}
.plate.cp{background:linear-gradient(180deg,rgba(80,56,14,.85),rgba(34,22,6,.85))}
.plate.cp .ql{color:#ffcf6a}.plate .num{font:900 20px var(--fc);color:#fff;text-shadow:0 1px 0 #000,0 0 10px rgba(255,190,60,.55);padding:0}
#home.dockopen .plate{display:flex}

/* ---------------------------------------------------------------- street player: target HUD, action menu, profile / duel / trade dialogs */
#tgt{position:absolute;left:50%;top:54px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;min-width:300px;padding:6px 12px 6px 6px;border-radius:12px;border:1px solid rgba(227,242,106,.55);
  background:linear-gradient(180deg,rgba(20,28,38,.88),rgba(10,15,21,.9));box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);animation:wpop .16s ease-out}
#tgt .tg-av{all:unset;cursor:pointer;width:58px;height:58px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px var(--lime1),0 0 0 3px #10161d;position:relative;flex:none;transition:.12s}
#tgt .tg-av:hover{box-shadow:0 0 0 2px var(--title),0 0 14px rgba(227,242,106,.7);transform:scale(1.04)}
#tgt .tg-av:after{content:"▾";position:absolute;right:2px;bottom:0;font:900 13px var(--f);color:#fff;text-shadow:0 1px 2px #000}
#tgt .tg-av canvas{display:block;width:58px;height:58px}
#tgt .tg-i{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
#tgt .tg-n{font:900 18px var(--f);color:#fff;text-shadow:0 2px 3px #000;letter-spacing:.01em}
#tgt .tg-l{font:600 12px var(--f);color:#c5d0d9;white-space:nowrap}
#tgt .tg-r{font:800 12px var(--fc);font-style:normal;color:var(--title);letter-spacing:.06em}
#tgt .tg-x{all:unset;cursor:pointer;width:22px;height:22px;text-align:center;font:700 14px/22px var(--f);color:#8fa0ad;border-radius:50%;align-self:flex-start}
#tgt .tg-x:hover{background:rgba(255,255,255,.14);color:#fff}
#tgt .tg-menu{position:absolute;left:6px;top:calc(100% + 6px);min-width:196px;padding:6px;border-radius:9px;border:1px solid var(--edge);background:linear-gradient(180deg,var(--frame1),var(--frame2) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:3px}
#tgt .tg-menu button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;font:800 14px var(--f);color:#e7eef3;letter-spacing:.03em;background:rgba(255,255,255,.06)}
#tgt .tg-menu button i{font-style:normal;width:22px;text-align:center;font-size:16px}
#tgt .tg-menu button:hover{background:linear-gradient(180deg,var(--cy1),var(--cy2));color:#fff}
.pf{display:flex;gap:16px;min-width:620px}.pf-port{width:230px;height:230px;border-radius:8px;background:linear-gradient(#f4f7f8,#cdd5db);box-shadow:inset 0 0 0 1px #c1c8ce;flex:none;overflow:hidden}.pf-port canvas{display:block}
.pf-info{flex:1;min-width:0}.pf-name{font:900 26px var(--f);color:#2d3842}.pf-sub{font:600 13px var(--f);color:var(--mink2);margin-bottom:6px}.pf-sub b{color:#cf8f00}
.pf-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.pf-row{display:grid;grid-template-columns:54px 1fr 46px;gap:8px;align-items:center;padding:3px 0;font:800 12px var(--f);color:var(--mink)}.pf-row b{text-align:right}
.pf-bar{height:9px;border-radius:5px;background:#d8dee3;box-shadow:inset 0 1px 2px rgba(0,0,0,.18);overflow:hidden}.pf-bar i{display:block;height:100%;border-radius:5px}
.pf-eq{font:600 13px var(--f);color:var(--mink);margin:2px 0}
.dl{display:flex;align-items:center;justify-content:center;gap:26px;margin:6px 0 12px}.dl-s{display:flex;flex-direction:column;align-items:center;gap:3px;font:700 13px var(--f);color:var(--mink)}.dl-s b{font:900 17px var(--f);color:#2d3842}
.dl-av{width:84px;height:84px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px #fff,0 0 0 3px #3a4651}.dl-av canvas{display:block}
.dl-vs{font:900 38px var(--fc);color:#d4414a;text-shadow:0 2px 0 #fff;font-style:italic}
.dl-note{text-align:center;font:600 13px/1.5 var(--f);color:var(--mink);max-width:440px;margin:0 auto 4px}
.td{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 10px}.td-p{text-align:center}.td-t{font:900 12px var(--fc);letter-spacing:.12em;color:#4d5862;text-transform:uppercase;margin-bottom:4px}
.td-box{min-width:170px;padding:12px 14px;border-radius:7px;background:#fff;border:1px solid #c8d0d6;font:800 16px var(--f);color:var(--mink)}.td-box input{width:80px;padding:3px 6px;border-radius:4px;border:1px solid #b9c2c9;font:800 16px var(--f);text-align:right}
.td-ar{font:900 28px var(--f);color:#39b3d4}

/* ---------------------------------------------------------------- world map / road map window */
#wm{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;background:rgba(4,8,12,.9)}
.wm-win{width:1236px;height:680px;display:flex;flex-direction:column;padding:0 7px 7px;border:1px solid var(--edge);border-radius:9px;background:linear-gradient(180deg,var(--frame1),var(--frame2) 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 50px rgba(0,0,0,.7);animation:wpop .2s ease-out}
.wm-tb{height:38px;display:flex;align-items:center;justify-content:center;position:relative}
.wm-tb b{font:900 17px var(--f);letter-spacing:.12em;color:var(--title);text-shadow:0 1px 0 #000}
.wm-x{all:unset;position:absolute;right:4px;top:6px;cursor:pointer;width:26px;height:26px;text-align:center;font:700 16px/26px var(--f);color:#aab4bd;border-radius:50%}.wm-x:hover{background:rgba(255,255,255,.14);color:#fff}
.wm-back{all:unset;position:absolute;left:4px;top:5px;cursor:pointer;padding:5px 14px;border-radius:6px;font:800 13px var(--f);color:#223000;background:linear-gradient(180deg,#d6f05a,var(--lime2));box-shadow:0 2px 0 #4c6a08}.wm-back:hover{filter:brightness(1.1)}
.wm-back.hidden{display:none}
.wm-body{flex:1;min-height:0;display:flex;gap:8px}
.wm-map{position:relative;flex:1;min-width:0;border-radius:6px;overflow:hidden;background:#0b1320;box-shadow:inset 0 0 0 2px #10161d,0 0 0 1px rgba(255,255,255,.12)}
.wm-map canvas{display:block;cursor:grab;touch-action:none}
.wm-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0b1320;color:#e8d49a;font:800 18px var(--fc);letter-spacing:.2em;text-transform:uppercase}.wm-load.hidden{display:none}
.wm-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:4px 14px;border-radius:12px;background:rgba(10,16,26,.72);border:1px solid rgba(214,190,130,.4);font:700 12px var(--f);color:#e8dcc0;pointer-events:none;white-space:nowrap}
.wm-recenter{all:unset;position:absolute;right:16px;top:16px;cursor:pointer;width:34px;height:34px;border-radius:50%;text-align:center;font:700 20px/34px var(--f);color:#ffe9a0;background:rgba(16,22,34,.8);border:1px solid rgba(214,190,130,.6);box-shadow:0 2px 8px rgba(0,0,0,.5)}.wm-recenter:hover{background:rgba(40,52,70,.95)}
.wm-side{width:330px;flex:none;border-radius:6px;background:var(--panel);border:1px solid #c4cbd1;box-shadow:inset 0 1px 0 #fff;padding:12px 14px;overflow:auto;display:flex;flex-direction:column;gap:7px;color:var(--mink)}
.ws-head{display:flex;gap:10px;align-items:center}.ws-ico canvas{display:block;border-radius:9px;box-shadow:0 0 0 2px #fff,0 0 0 3px #3a4651}
.ws-act{font:900 12px var(--fc);letter-spacing:.18em;color:#cf8f00}.ws-name{font:900 22px/1.05 var(--f);color:#2d3842}
.ws-desc{font:600 13.5px/1.45 var(--f);padding:9px 11px;border-radius:6px;background:#fff;border:1px solid #d3d9de}
.ws-pills{display:flex;flex-wrap:wrap;gap:5px}.ws-pills .pill.ok{background:#e3f6c0;border-color:#9bc94a;color:#2a3a00}.ws-pills .pill.bad{background:#fde4e4;border-color:#e0868a;color:#8a1d22}
.ws-sec{font:900 11.5px var(--fc);letter-spacing:.14em;color:#4d5862;border-bottom:1px solid #d3d9de;padding-bottom:2px;margin-top:2px}
.ws-dots{display:flex;gap:6px}.ws-dots i{width:22px;height:22px;border-radius:50%;background:#d8dee3;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}.ws-dots i.on{background:#2f9a4a;box-shadow:0 0 0 2px #bfe8a8}.ws-dots i.boss{border-radius:6px}
.ws-boss{display:flex;gap:10px;align-items:center}.ws-bp canvas{display:block;border-radius:8px}.ws-boss b{font:900 15px var(--f)}
.ws-foes{display:flex;flex-direction:column;gap:5px}.ws-foe{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:4px 6px;border-radius:6px;background:#fff;border:1px solid #d3d9de}.ws-foe canvas{grid-row:1/3;border-radius:6px;display:block}.ws-foe b{font:800 14px var(--f)}.ws-foe span{font:600 12px var(--f);color:var(--mink2)}
.ws-tip{margin-top:auto;padding:8px 10px;border-radius:6px;background:#fff7dc;border:1px solid #ecd68a;font:600 12px/1.4 var(--f);color:#6b5a1d}.ws-tip b{color:#b67f00;margin-right:4px}
.ws-btns{display:flex;gap:8px;align-items:center;justify-content:center}.ws-btns .btn.big{flex:1;padding:9px 10px;font-size:16px}.ws-btns .btn{min-width:0}

/* ---------------------------------------------------------------- story mode */
#story{z-index:28;background:#04050b;user-select:none}
#story #stcv{position:absolute;inset:0;width:1280px;height:720px}
#story .st-top{position:absolute;right:14px;top:12px;display:flex;gap:8px;z-index:3}
#story .stb{font:700 12px var(--fc);letter-spacing:.12em;color:#e8d9b4;background:rgba(10,8,18,.66);border:1px solid #8a6a32;border-radius:4px;padding:6px 11px;cursor:pointer}
#story .stb:hover{background:rgba(40,28,12,.85);color:#fff}#story .stb.on{background:#7a5718;color:#fff;border-color:#e8c26a}
#story .st-box{position:absolute;left:100px;right:100px;bottom:16px;min-height:128px;padding:28px 44px 18px;background:linear-gradient(rgba(14,10,22,.93),rgba(8,6,14,.96));border:2px solid #b98f45;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 5px rgba(185,143,69,.28),0 14px 40px #000c,inset 0 0 40px rgba(0,0,0,.6);z-index:2}
#story .st-box:before,#story .st-box:after{content:"\2766";position:absolute;color:#b98f45;font-size:18px;top:-12px;background:#0a0710;padding:0 6px;line-height:20px}
#story .st-box:before{left:22px}#story .st-box:after{right:22px;transform:scaleX(-1)}
#story .st-name{position:absolute;left:34px;top:-21px;padding:4px 22px 5px;font:700 20px/1.1 "Palatino Linotype","Book Antiqua",Georgia,serif;letter-spacing:.07em;color:#fff;background:linear-gradient(#2a1d3e,#150f22);border:2px solid var(--c,#fff);border-radius:3px;text-shadow:0 0 12px var(--c),0 1px 2px #000;box-shadow:0 4px 14px #000a}
#story .st-text{font:500 23px/1.45 "Palatino Linotype","Book Antiqua",Georgia,serif;color:#f3ead4;text-shadow:0 1px 2px #000;min-height:66px;white-space:pre-wrap}
#story .st-text .h{visibility:hidden}
#story .st-box.narr{left:170px;right:170px;background:linear-gradient(rgba(8,8,16,.82),rgba(4,4,10,.88));border-color:#6a5a38}
#story .st-box.narr .st-text{font-style:italic;color:#d9d2bd;text-align:center}
#story .st-next{position:absolute;right:28px;bottom:10px;color:#e8c26a;font-size:15px;animation:stbob 1s ease-in-out infinite}
@keyframes stbob{50%{transform:translateY(5px)}}
#story .st-choice{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(rgba(0,0,0,.35),rgba(0,0,0,.72));z-index:4;animation:stfade .3s}
@keyframes stfade{from{opacity:0}}
#story .st-choice .p{font:italic 600 26px/1.35 "Palatino Linotype",Georgia,serif;color:#f3e6bf;text-align:center;max-width:860px;margin-bottom:10px;text-shadow:0 2px 10px #000}
#story .co{width:840px;max-width:92%;text-align:left;font:600 21px/1.35 "Palatino Linotype",Georgia,serif;color:#f3ead4;background:linear-gradient(90deg,rgba(40,28,14,.94),rgba(18,12,26,.94));border:2px solid #8a6a32;border-radius:3px;padding:14px 22px 14px 18px;cursor:pointer;transition:transform .12s,border-color .12s,background .12s;box-shadow:0 6px 20px #000a}
#story .co b{display:inline-block;width:30px;height:30px;margin-right:14px;text-align:center;color:#1a0f04;background:#d9b25a;border-radius:50%;font:800 16px/30px var(--fc)}
#story .co:hover{transform:translateX(8px);border-color:#ffe08a;background:linear-gradient(90deg,rgba(90,62,20,.96),rgba(30,20,40,.96))}
#story .st-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(rgba(0,0,0,.25),rgba(0,0,0,.7))}
#story .st-card.on{opacity:1}
#story .st-card .k{font:700 18px var(--fc);letter-spacing:.5em;color:#d9b25a;margin-bottom:10px;text-shadow:0 2px 8px #000}
#story .st-card .t{font:700 68px/1.1 "Palatino Linotype","Book Antiqua",Georgia,serif;letter-spacing:.06em;color:#fff6dc;text-shadow:0 0 30px rgba(255,200,100,.55),0 4px 12px #000;text-align:center}
#story .st-card i{display:block;width:420px;height:2px;margin-top:18px;background:linear-gradient(90deg,transparent,#d9b25a,transparent)}
#story .st-card.small .t{font-size:46px}#story .st-card.small{background:linear-gradient(transparent 30%,rgba(0,0,0,.6) 50%,transparent 70%)}
#story .st-pause{position:absolute;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:8}
#story .st-pause .dlg{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:300px;text-align:center}
#story .st-pause h3{margin:0 0 6px;font:700 26px var(--fc);letter-spacing:.2em;color:#e8c26a}
#story .st-panel{position:absolute;z-index:6;color:#f3ead4;font-family:"Palatino Linotype","Book Antiqua",Georgia,serif}
#story .hm{display:flex;align-items:center;gap:12px;justify-content:center;font:700 12px var(--fc);letter-spacing:.2em;color:#b9a77a}
#story .hm .bar{position:relative;width:300px;height:8px;border-radius:4px;background:linear-gradient(90deg,#b8322a,#6a4a4a 50%,#d9b25a)}
#story .hm .bar i{position:absolute;top:-6px;width:4px;height:20px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 10px #fff}
#story .ht{text-align:center;font-style:italic;color:#cdbf98;margin:8px 0 0;font-size:15px}#story .ht b{color:#ffe08a}
#story .st-panel.menu{right:46px;top:34px;bottom:34px;width:640px;padding:24px 28px;background:linear-gradient(rgba(16,12,26,.9),rgba(8,6,14,.94));border:2px solid #b98f45;border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 6px rgba(185,143,69,.22),0 18px 60px #000d;display:flex;flex-direction:column}
#story .menu .k{font:700 14px var(--fc);letter-spacing:.5em;color:#d9b25a;text-align:center}
#story .menu h1{margin:6px 0 6px;text-align:center;font-size:36px;letter-spacing:.04em;color:#fff3d4;text-shadow:0 0 22px rgba(255,190,90,.4)}
#story .menu .sub{text-align:center;font-style:italic;color:#bfb08a;font-size:14px;margin-bottom:14px}
#story .menu .list{flex:1;overflow:auto;margin:14px 0 10px;display:flex;flex-direction:column;gap:12px;padding-right:4px}
#story .chc{display:flex;border:1px solid #7a5e2c;border-radius:3px;background:rgba(0,0,0,.35);overflow:hidden;min-height:150px}
#story .chc .art{width:200px;flex:none;background-size:cover;background-position:center;box-shadow:inset -30px 0 30px -10px rgba(8,6,14,.95)}
#story .chc .in{padding:12px 16px;flex:1}#story .chc small{font:700 11px var(--fc);letter-spacing:.3em;color:#d9b25a}
#story .chc h2{margin:2px 0;font-size:25px;color:#fff3d4}#story .chc .pl{font-size:12px;color:#a99a72;letter-spacing:.05em}
#story .chc p{margin:8px 0;font-size:14px;line-height:1.4;color:#d6cba9}
#story .chc .meta{display:flex;gap:14px;font:700 11px var(--fc);letter-spacing:.18em;color:#8fd0a0;margin-bottom:8px}#story .chc .meta span+span{color:#a99a72}
#story .chc .acts{display:flex;gap:8px;justify-content:flex-start}
#story .chc.locked{opacity:.55;filter:grayscale(.7);min-height:96px}
#story .menu>.acts{display:flex;justify-content:center}
#story .st-panel.sum{left:50%;top:50%;transform:translate(-50%,-50%);width:760px;padding:30px 40px;background:linear-gradient(rgba(16,12,26,.94),rgba(8,6,14,.97));border:2px solid #b98f45;border-radius:4px;box-shadow:0 0 0 6px rgba(185,143,69,.22),0 20px 70px #000;text-align:center}
#story .sum .k{font:700 14px var(--fc);letter-spacing:.5em;color:#d9b25a}#story .sum h1{margin:4px 0 16px;font-size:46px;color:#fff3d4;text-shadow:0 0 24px rgba(255,190,90,.45)}
#story .sum .ch{margin:14px auto;max-width:600px;text-align:left}#story .sum .chr{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid rgba(185,143,69,.2);font-size:15px;color:#d6cba9}#story .sum .chr em{color:#e8c26a;font-style:normal;width:18px;flex:none}
#story .sum .rw{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}#story .sum .rw b{padding:5px 14px;background:rgba(217,178,90,.14);border:1px solid #8a6a32;border-radius:3px;color:#ffe08a;font:700 14px var(--fc);letter-spacing:.1em}
#story .sum .nx{margin:14px 0;color:#a99a72}#story .sum .nx small{display:block;font:700 11px var(--fc);letter-spacing:.3em}#story .sum .nx b{font-size:22px;color:#e8dcc0}#story .sum .nx i{display:block;font-size:12px;color:#8a7a52}
#story .sum .acts{display:flex;justify-content:center;margin-top:8px}

/* ---------------------------------------------------------------- character creator (same Maple look as the in-game windows, on the City Lobby art) */
#title .cz-pill{position:absolute;z-index:3;font:800 13px var(--f);letter-spacing:.08em;color:#e6edf2;background:var(--glass);border:1px solid var(--glassb);border-radius:18px;padding:8px 16px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.4)}
#title .cz-pill:hover{background:rgba(40,52,64,.85);color:#fff}
#title .cz-back{left:16px;top:12px}
#title .cz-title{position:absolute;left:0;top:10px;width:760px;text-align:center;z-index:2;pointer-events:none}
#title .cz-title small{display:block;font:800 12px var(--f);letter-spacing:.5em;color:var(--title);text-shadow:0 1px 0 #000;margin-bottom:2px}
#title .cz-title b{font:900 34px/1 var(--fc);letter-spacing:.08em;color:#fff;text-shadow:0 2px 0 #000,0 0 22px rgba(90,211,234,.45)}
#title .cz-tag{position:absolute;left:375px;top:604px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:5px 16px;background:var(--glass);border:1px solid var(--glassb);border-radius:16px;box-shadow:0 3px 10px rgba(0,0,0,.45);z-index:2;white-space:nowrap}
#title .cz-tag b{font:800 17px var(--f);color:#fff;max-width:200px;overflow:hidden;text-overflow:ellipsis}
#title .cz-tag i{font:900 12px var(--fc);font-style:normal;color:#223000;background:linear-gradient(180deg,#d6f05a,var(--lime2));border-radius:9px;padding:2px 8px}
#title .cz-win{position:absolute;right:34px;top:54px;width:468px;bottom:92px;z-index:2;display:flex;flex-direction:column;padding:0 7px 7px;border:1px solid var(--edge);border-radius:8px;background:linear-gradient(180deg,var(--frame1),var(--frame2));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 36px rgba(0,0,0,.6)}
#title .cz-tb{height:34px;display:flex;align-items:center;padding:0 6px}
#title .cz-tb h2{margin:0;font:900 14px var(--f);letter-spacing:.06em;color:var(--title);text-transform:uppercase;text-shadow:0 1px 0 #000}
#title .cz-body{flex:1;background:var(--panel);border:1px solid #c4cbd1;border-radius:5px;box-shadow:inset 0 1px 0 #fff;padding:12px 14px;color:var(--mink);display:flex;flex-direction:column;gap:8px}
#title .cz-g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:2px}
#title .cz-g button{height:38px;border-radius:7px;border:1px solid #b9c2c9;background:linear-gradient(180deg,#f4f6f7,#dde2e6);font:800 14px var(--f);letter-spacing:.06em;color:var(--mink2);cursor:pointer;transition:filter .1s}
#title .cz-g button:hover{filter:brightness(1.05)}
#title .cz-g button.on.m{background:linear-gradient(180deg,#7fe0f2,var(--cy1) 45%,var(--cy2));border-color:var(--cyb);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:0 0 0 2px rgba(90,211,234,.35)}
#title .cz-g button.on.f{background:linear-gradient(180deg,#ffb0c8,#ff7fa6 45%,#e0527f);border-color:#b83a62;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:0 0 0 2px rgba(255,127,166,.35)}
#title .cz-row{display:flex;align-items:center;height:42px;border-radius:6px;background:linear-gradient(180deg,var(--slot1),var(--slot2));border:1px solid #c4cbd1;box-shadow:inset 0 1px 0 #fff}
#title .cz-row .cl{display:block;overflow:visible;width:92px;padding-left:12px;font:800 12px var(--f);letter-spacing:.12em;color:var(--mink2)}
#title .cz-row .cv{flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 8px}
#title .cz-row .cv b{font:900 19px var(--fc);color:var(--mink);min-width:40px;text-align:center}
#title .cz-row .arr{width:30px;height:30px;font-size:12px}
#title .cz-row .sw{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px #9aa4ad;margin:0 -8px 0 6px}
#title .cz-name{display:grid;grid-template-columns:92px 1fr;align-items:center;margin-top:4px}
#title .cz-name label{padding-left:12px;font:800 12px var(--f);letter-spacing:.12em;color:var(--mink2)}
#title .cz-name .txt{width:100%;height:38px;padding:0 12px;font:700 16px var(--f)}
#title .cz-btns{display:flex;gap:10px;justify-content:center;margin-top:auto}
#title .cz-foot{padding-top:7px;display:flex;justify-content:center}
#title .cz-foot .btn{width:100%}
#title .cz-bar{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;padding:0 24px;background:linear-gradient(rgba(10,16,24,.0),rgba(10,16,24,.88) 40%);font:600 12px/1.35 var(--f);color:#a9b8c4;z-index:1}
#story .chc{flex:none}
#story .menu .list{scrollbar-width:thin;scrollbar-color:#8a6a32 transparent}

/* ---------------------------------------------------------------- progression windows: Soul Core, Gear, Mastery, Ascension, Endless Tower */
.pg-chip{display:inline-block;margin:2px 3px 2px 0;padding:2px 8px;border-radius:10px;background:#dfe6ec;border:1px solid #b9c2c9;color:#2d6b3a;font:800 11px var(--f);white-space:nowrap}
.pg-chip.neg{color:#1b87a7}.pg-chip.epic{background:#4b3a7a;color:#ffe9a0;border-color:#8a6ad8}
.pg-tot{display:flex;flex-wrap:wrap;margin:2px 0}
.pg-core{position:relative;height:206px;margin:-2px 0 4px;background:radial-gradient(ellipse at 50% 52%,#3a3466 0,#1b1a30 60%,#10101e);border-radius:8px;box-shadow:inset 0 0 0 1px #4a4478,inset 0 0 30px #000}
.pg-ring{position:absolute;left:50%;top:0;width:260px;height:206px;margin-left:-130px}
.pg-heart{position:absolute;left:50%;top:100px;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#b48cff 38%,#5a3ad8 72%,#1a0f50);box-shadow:0 0 28px #8a5aff,0 0 60px rgba(138,90,255,.5);animation:pgpulse 2.4s ease-in-out infinite}
@keyframes pgpulse{50%{box-shadow:0 0 40px #b48cff,0 0 80px rgba(180,140,255,.7);transform:scale(1.07)}}
.pg-sock{position:absolute;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 30%,#3a3a5c,#14142a);border:2px solid #6a5ad0;box-shadow:0 0 10px rgba(106,90,208,.5);cursor:pointer;transition:transform .1s}
.pg-sock:hover{transform:scale(1.08)}.pg-sock u{width:14px;height:14px;border-radius:50%;border:2px dashed #8a7ae0;opacity:.7}
.pg-sock.lock{border-color:#3a3a4a;box-shadow:none;cursor:default;opacity:.6}.pg-sock.lock b{font-size:17px}
.pg-sock.ready{border-color:#ffe27a;box-shadow:0 0 16px #ffe27a;animation:pgready 1s ease-in-out infinite}
@keyframes pgready{50%{box-shadow:0 0 26px #fff6c0}}
.pg-sock canvas{width:46px;height:46px}
.pg-sumrow{margin-bottom:6px}.pg-res{font:700 11px var(--f);color:#6b7680;padding:4px 8px;border-radius:5px;background:#dfe4e8;margin-bottom:4px}.pg-res.on{background:linear-gradient(90deg,#fff3c0,#ffe27a);color:#5a3a00}
.pg-gear{border:1px solid #c4cbd1;border-radius:7px;background:linear-gradient(180deg,#f4f6f7,#e2e7ea);margin-bottom:8px;overflow:hidden}
.pg-gear .gh{display:flex;justify-content:space-between;padding:4px 10px;background:linear-gradient(180deg,#5a6875,#3b4651);color:var(--title);font:800 11px var(--f);letter-spacing:.08em}.pg-gear .gh span{color:#dbe6ee}
.pg-gear .gb{display:flex;align-items:center;gap:10px;padding:8px 10px}.pg-gear .pic{width:84px;flex:none}.pg-gear .gp{width:84px;height:auto}
.pg-gear .gi{flex:1}.pg-gear h4{margin:0 0 4px;font:800 14px var(--f);color:#2d3842}
.pg-set{padding:6px 10px;border-radius:6px;background:#e4e9ec;border:1px solid #c4cbd1;margin-bottom:5px;display:flex;flex-direction:column;font-size:12px;color:#6b7680}.pg-set b{color:#3c4650;font-size:13px}
.pg-set.on{background:linear-gradient(90deg,#fff7d0,#f3f6d8);border-color:#d9c25a}.pg-set.on b{color:#7a5a00}
.btn.small{min-width:72px;padding:5px 10px;font-size:11px;line-height:1.2}.btn.small small{font-size:10px;font-weight:700;text-transform:none}
.pg-mas{border:1px solid #c4cbd1;border-left:5px solid var(--c);border-radius:6px;background:linear-gradient(180deg,#f4f6f7,#e2e7ea);padding:8px 10px;margin-bottom:8px}.pg-mas.cur{box-shadow:0 0 0 2px var(--c)}
.pg-mas .mh{display:flex;align-items:center;gap:8px;font:900 15px var(--f);color:#2d3842}.pg-mas .mh span{margin-left:auto;font-size:13px;color:#6b7680}.pg-mas .mh em{font:800 9px var(--f);font-style:normal;letter-spacing:.1em;padding:2px 6px;border-radius:8px;background:var(--c);color:#1a1a2a}
.pg-mas .mb{height:8px;border-radius:4px;background:#cfd6dc;margin:6px 0;overflow:hidden}.pg-mas .mb i{display:block;height:100%;background:var(--c);filter:saturate(1.2) brightness(.92)}.pg-mas .mx{font-size:11px;color:#6b7680;margin:2px 0}
.pg-asc .ah{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.pg-asc .ah small,.pg-tw .th small{display:block;font:800 9px var(--f);letter-spacing:.14em;color:#6b7680}.pg-asc .ah b,.pg-tw .th b{font:900 18px var(--fc);color:#2d3842}
.pg-up{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #c4cbd1;border-radius:6px;background:#eef1f3;margin-bottom:5px}.pg-up .ui{flex:1}.pg-up .ui b{display:block;font:800 13px var(--f);color:#2d3842}.pg-up .ui small{font-size:11px;color:#6b7680}.pg-up .ur{font-size:9px;letter-spacing:1px;color:#cf8f00}
.pg-tw .th{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.pg-run{padding:10px;border-radius:8px;background:linear-gradient(180deg,#2a3040,#1a1e2a);color:#e6edf2}.pg-run .rh{display:flex;justify-content:space-between;align-items:baseline}.pg-run .rh b{font:900 22px var(--fc);color:var(--title)}.pg-run .rh span{font-size:11px;color:#a9b8c4;letter-spacing:.1em}
.pg-run .hpb{position:relative;height:16px;border-radius:8px;background:#0a0d14;margin:8px 0;overflow:hidden}.pg-run .hpb i{display:block;height:100%;background:linear-gradient(90deg,#3ad06a,#a8e83a)}.pg-run .hpb em{position:absolute;inset:0;text-align:center;font:800 11px/16px var(--f);font-style:normal;color:#fff;text-shadow:0 1px 1px #000}
.pg-run .bo{margin:4px 0}.pg-run .muted{color:#a9b8c4}
.pg-ms{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.pg-ms>div{position:relative;display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:6px;background:#eef1f3;border:1px solid #c4cbd1;font-size:11px;color:#6b7680}.pg-ms b{font:900 16px var(--fc);color:#2d3842;min-width:28px}.pg-ms .got{background:#e3f2dc;border-color:#9fcf8a}.pg-ms i{margin-left:auto;color:#3a9a2a;font-style:normal}
.pg-boons{display:flex;gap:10px;justify-content:center;margin:8px 0}
.pg-boon{flex:1;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:14px 10px;min-height:120px;border-radius:9px;border:2px solid #7a8794;background:linear-gradient(180deg,#46525e,#2a343e);color:#fff;cursor:pointer;transition:transform .12s,border-color .12s}
.pg-boon:hover{transform:translateY(-4px);border-color:var(--title)}.pg-boon small{font:800 9px var(--f);letter-spacing:.16em;color:#a9b8c4}.pg-boon b{font:900 17px var(--fc);color:var(--title)}.pg-boon span{font-size:12px;color:#e6edf2}
.pg-boon.r1{border-color:#8a6ad8;background:linear-gradient(180deg,#5a3a9a,#2a1a5a)}.pg-boon.r1 small{color:#ffe9a0}
.pg-ml{margin:4px 0;padding:4px 8px;border-radius:5px;background:#fff3c0;border:1px solid #d9c25a;color:#5a3a00;font:700 12px var(--f);text-align:center}
/* the lobby chat keeps its frosted-glass blur (it is a small area, so the cost is tiny; every other blur stays off for FPS) */


/* ---------------------------------------------------------------- frosted glass (Settings -> Frosted glass UI); html.glass is toggled by the setting */
html.glass #chat{backdrop-filter:blur(var(--gb,3px)) saturate(1.15)}
html.glass .win{background:linear-gradient(180deg,rgba(75,89,103,.66),rgba(42,52,62,.74) 70%);backdrop-filter:blur(var(--gb,3px)) saturate(1.25)}
html.glass .win .body{background:rgba(232,236,239,.95)}
html.glass #hud{background:linear-gradient(180deg,rgba(10,15,21,.62),rgba(10,15,21,.4));backdrop-filter:blur(var(--gb,3px)) saturate(1.2)}
html.glass .plate{backdrop-filter:blur(var(--gb,3px))}
html.glass .win .vtabs button,html.glass .win .htabs button{backdrop-filter:blur(var(--gb,3px))}
html.glass .dlg{background:linear-gradient(180deg,rgba(232,236,239,.9),rgba(223,228,232,.92));backdrop-filter:blur(var(--gb,3px)) saturate(1.2);box-shadow:0 0 0 7px rgba(58,70,81,.8),0 0 0 8px var(--edge),0 18px 50px rgba(0,0,0,.65)}
html.glass .dtb{background:linear-gradient(180deg,rgba(75,89,103,.72),rgba(42,52,62,.8))}
html.glass #modal{background:rgba(4,8,12,.32)}
html.glass .dlg{background:linear-gradient(180deg,rgba(232,236,239,.78),rgba(223,228,232,.82))}
html.glass .dtb{background:linear-gradient(180deg,rgba(75,89,103,.62),rgba(42,52,62,.7))}
/* world map: the window frame and the side panel go frosted. The map canvas itself stays solid, and the lobby behind is paused while the map is open. */
html.glass #wm{background:rgba(4,8,12,.3)}
html.glass .wm-win{background:linear-gradient(180deg,rgba(75,89,103,.68),rgba(42,52,62,.76) 70%);backdrop-filter:blur(var(--gb,3px)) saturate(1.2)}
html.glass .wm-side{background:rgba(232,236,239,.93)}

/* ---------------------------------------------------------------- scene transfer loading screen (preload.js) */
#xfer{position:absolute;inset:0;z-index:95;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at 50% 45%,rgba(22,32,44,.97),rgba(4,7,11,.99));opacity:0;transition:opacity .2s;pointer-events:all}
#xfer.on{opacity:1}#xfer.hidden{display:none}
#xfer .xf-logo{font:900 14px var(--fc);letter-spacing:.7em;color:var(--title);opacity:.8;text-shadow:0 0 14px rgba(227,242,106,.4)}
#xfer .xf-title{font:900 34px var(--fc);letter-spacing:.1em;color:#fff;text-transform:uppercase;text-shadow:0 2px 0 #000,0 0 24px rgba(90,211,234,.4)}
#xfer .xf-bar{width:360px;height:8px;border-radius:5px;background:#0a0f16;box-shadow:inset 0 1px 2px #000,0 0 0 1px rgba(255,255,255,.14);overflow:hidden}
#xfer .xf-bar i{display:block;height:100%;width:8%;border-radius:5px;background:linear-gradient(90deg,var(--cy2),var(--cy1),#bff4ff);box-shadow:0 0 12px var(--cy1);transition:width .25s}
#xfer .xf-tip{max-width:520px;text-align:center;font:600 13px/1.4 var(--f);color:#9fb0bd}

/* ---------------------------------------------------------------- title / login screen (login.js) */
#title{background:#eef3f9}
#lgcv{position:absolute;inset:0;width:1280px;height:720px}
.lg-chip{position:absolute;right:18px;top:14px;padding:5px 14px;border-radius:15px;background:rgba(255,255,255,.7);border:1px solid rgba(90,140,220,.5);font:800 12px var(--f);letter-spacing:.08em;color:#1d4a9a;z-index:3;box-shadow:0 3px 10px rgba(40,80,160,.25)}.lg-chip.hidden{display:none}
.lg-panel{position:absolute;left:50%;top:385px;width:372px;margin-left:-186px;padding:18px 24px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(232,240,252,.76));border:1px solid rgba(110,150,220,.55);box-shadow:0 14px 40px rgba(40,80,160,.28),inset 0 1px 0 #fff;backdrop-filter:blur(var(--gb,3px));display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .45s,transform .45s;z-index:3;color:#1b3a78}
.lg-panel.on{opacity:1;transform:none;pointer-events:auto}
.lg-panel.shake{animation:lgshake .38s}@keyframes lgshake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.lg-title,.lg-hello{text-align:center;font:900 14px var(--fc);letter-spacing:.34em;color:#2a56b0}.lg-hello{letter-spacing:.06em;font-size:15px;font-family:var(--f);font-weight:700}.lg-hello b{color:#143a8a}
.lg-f{display:flex;flex-direction:column;gap:3px}.lg-f span{font:800 10px var(--f);letter-spacing:.16em;text-transform:uppercase;color:#5a76b0}
.lg-f input{height:38px;border-radius:8px;border:1px solid #9db6e0;background:rgba(255,255,255,.92);padding:0 12px;font:600 15px var(--f);color:#1b3a78;outline:none;width:100%;box-sizing:border-box;box-shadow:inset 0 1px 3px rgba(40,80,160,.15)}
.lg-f input:focus{border-color:#3d8aff;box-shadow:0 0 0 3px rgba(61,138,255,.25)}
.lg-pw{position:relative}.lg-pw input{padding-right:42px}.lg-pw button{position:absolute;right:4px;top:4px;width:30px;height:30px;border:0;border-radius:6px;background:none;cursor:pointer;font-size:16px;opacity:.6}.lg-pw button:hover{opacity:1;background:rgba(61,138,255,.12)}
.lg-rem{display:flex;gap:8px;align-items:center;font:600 12px var(--f);color:#4a68a8;cursor:pointer}
.lg-err{min-height:15px;text-align:center;font:700 12px var(--f);color:#c42a3a}
.lg-btn{height:42px;border:0;border-radius:9px;cursor:pointer;font:900 15px var(--fc);letter-spacing:.2em;color:#fff;text-shadow:0 1px 0 rgba(0,40,100,.45);background:linear-gradient(180deg,#5ad3ff,#2f8aee 55%,#2468c8);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 #1a4a9a,0 6px 14px rgba(40,100,200,.4);transition:filter .12s,transform .1s}
.lg-btn:hover{filter:brightness(1.08)}.lg-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 0 #1a4a9a}.lg-btn:disabled{opacity:.7;cursor:wait}
.lg-btn.alt{background:linear-gradient(180deg,#f4f8ff,#d3e0f6);color:#2a56b0;text-shadow:none;box-shadow:inset 0 1px 0 #fff,0 3px 0 #9db6e0,0 6px 12px rgba(40,80,160,.2)}
.lg-save{text-align:center;margin:-4px 0 2px;font:700 12px var(--f);color:#5a76b0}
.lg-off{text-align:center;font:600 11px var(--f);color:#6f86b4}.lg-link{color:#2a6ae0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-align:center;font:700 12px var(--f)}.lg-link:hover{color:#143a8a}
.lg-foot{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:600 10px var(--f);color:rgba(60,90,150,.7);z-index:3}

/* ---------------------------------------------------------------- boot loading screen: same look as the title / login screen */
#loading{background:#eef3f9 url(../assets/login/bg.png) center/cover no-repeat;gap:10px}
#loading .ld-logo{width:540px;max-width:70vw;filter:drop-shadow(0 6px 14px rgba(40,90,180,.25))}
#loading .ld-subimg{width:268px;max-width:36vw;margin-top:-2px;margin-bottom:10px}
#loading .ld-bar{width:380px;height:8px;border-radius:5px;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 3px rgba(40,80,160,.3),0 0 0 1px rgba(110,150,220,.5);overflow:hidden}
#loading .ld-bar i{background:linear-gradient(90deg,#5ad3ff,#2f8aee 60%,#2468c8);box-shadow:0 0 10px rgba(61,138,255,.6)}
#loading #ldtxt{color:#4a68a8;font:700 12px var(--f);letter-spacing:.08em}