*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08090f;--s:#0f1220;--s2:#141828;--s3:#181e30;
  --bd:#1c2340;--bd2:#252d48;
  --gold:#e0a020;--gold2:#c08018;
  --teal:#30b898;--red:#d04858;--purple:#8050c0;
  --blue:#4080d0;--green:#38a858;--amber:#c07828;
  --muted:#384068;--muted2:#506090;--text:#b8c8e0;
  --fn:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",Roboto,sans-serif;
}
html,body{height:100%;margin:0;padding:0;overflow:hidden}
body{background:var(--bg);font-family:var(--fn);font-size:16px;color:var(--text)}
.app{background:var(--bg);overflow:hidden;display:grid;grid-template-rows:40px 1fr;height:100vh;height:100dvh}
.nav{background:var(--s);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.logo{font-size:16px;font-weight:500;color:var(--gold);letter-spacing:.05em}
.nav-tabs{display:flex;gap:2px}
.ntab{padding:4px 10px;border-radius:3px;border:none;background:transparent;color:var(--muted2);font-size:16px;cursor:pointer;font-family:var(--fn);transition:.15s;touch-action:manipulation}
.ntab:hover{color:var(--text)}
.ntab.on{background:var(--s3);color:var(--gold);border:1px solid var(--bd2)}
.nav-r{display:flex;gap:8px;align-items:center;font-size:16px}
.ns{text-align:right}
.ns-v{font-size:16px;font-weight:500;color:var(--gold)}
.ns-l{font-size:16px;color:var(--muted)}
.boost-badge{font-size:16px;color:var(--teal);background:rgba(48,184,152,.12);border:1px solid rgba(48,184,152,.3);padding:2px 5px;border-radius:2px;white-space:nowrap;cursor:default}
.boost-badge.expired{color:var(--muted);background:transparent;border-color:var(--bd);cursor:pointer}

.body{display:grid;grid-template-columns:210px 1fr 180px;overflow:hidden;height:100%}

/* ── LEFT BUILD ── */
.left{background:var(--s);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden}
.phd{font-size:16px;font-weight:500;color:var(--gold);padding:7px 10px 5px;border-bottom:1px solid var(--bd);letter-spacing:.05em;background:var(--s2)}
.party-row{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:6px 8px;border-bottom:1px solid var(--bd)}
.pslot{border:1px solid var(--bd2);border-radius:3px;padding:5px 4px;text-align:center;cursor:pointer;background:var(--s2);transition:.15s;position:relative;touch-action:manipulation}
.pslot:hover{border-color:var(--teal)}
.pslot.sel{border-color:var(--gold);border-width:1.5px}
.pslot-icon{font-size:18px;margin-bottom:2px}
.pslot-name{font-size:16px;font-weight:500;color:var(--text)}
.pslot-role{font-size:16px;color:var(--muted2)}
.pslot-badge{font-size:16px;color:var(--muted);margin-top:2px}
.job-picker{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:5px 8px;border-bottom:1px solid var(--bd);max-height:80px;overflow-y:auto}
.jp{border:1px solid var(--bd);border-radius:2px;padding:3px 2px;cursor:pointer;text-align:center;background:var(--bg);transition:.15s;font-size:16px;color:var(--muted2);touch-action:manipulation}
.jp:hover{border-color:var(--gold);color:var(--text)}
.jp.on{border-color:var(--teal);color:var(--teal);background:rgba(48,184,152,.06)}
.jp-icon{font-size:16px;display:block;margin-bottom:1px}
.gam-sec{flex:1;overflow:hidden;display:flex;flex-direction:column;padding:6px 8px}
.sec-lbl{font-size:16px;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.gam-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.gr{display:flex;align-items:center;gap:3px;background:var(--s2);border:1px solid var(--bd);border-radius:2px;padding:3px 5px}
.gr.forced{background:rgba(255,200,50,.07);border-color:rgba(255,180,30,.35);}
.gr-num{width:13px;height:13px;border-radius:50%;background:var(--bd2);font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--muted2);flex-shrink:0}
.gr-cat{font-size:16px;padding:1px 3px;border-radius:1px;border:1px solid;flex-shrink:0}
.gc-ex{border-color:var(--teal);color:var(--teal)}.gc-fi{border-color:var(--red);color:var(--red)}.gc-re{border-color:var(--purple);color:var(--purple)}
.gr-if{font-size:16px;color:var(--blue);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-then{font-size:16px;color:var(--green);flex:1;min-width:0}
.gr-del{font-size:16px;color:var(--red);cursor:pointer;flex-shrink:0;touch-action:manipulation}
.gam-add{width:100%;padding:3px;background:transparent;border:1px dashed var(--bd);border-radius:2px;color:var(--muted);font-size:16px;cursor:pointer;font-family:var(--fn);touch-action:manipulation}
.gam-add:hover{border-color:var(--teal);color:var(--teal)}
.gam-form{background:var(--bg);border:1px solid var(--bd2);border-radius:3px;padding:8px;margin-top:3px;display:none;flex-direction:column;gap:6px}
.gam-form.open{display:flex}
.gf-row{display:flex;flex-direction:column;gap:1px}
.gf-lbl{font-size:16px;color:var(--muted2)}
.gf-sel{background:var(--s);border:1px solid var(--bd2);color:var(--text);padding:3px 5px;border-radius:2px;font-size:16px;font-family:var(--fn)}
.gf-cat{display:flex;gap:2px;margin-bottom:2px}
.gf-catbtn{flex:1;padding:3px;border:1px solid var(--bd2);border-radius:2px;background:transparent;color:var(--muted2);font-size:16px;cursor:pointer;font-family:var(--fn);touch-action:manipulation}
.gf-catbtn.on{border-color:var(--teal);color:var(--teal);background:rgba(48,184,152,.08)}
.gf-btns{display:flex;gap:3px}
.gf-ok{flex:1;padding:4px;background:var(--teal);border:none;border-radius:2px;color:#08090f;font-size:16px;cursor:pointer;font-family:var(--fn);font-weight:500;touch-action:manipulation}
.gf-cancel{padding:4px 6px;background:transparent;border:1px solid var(--bd);border-radius:2px;color:var(--muted2);font-size:16px;cursor:pointer;font-family:var(--fn);touch-action:manipulation}
.send-sec{padding:6px 8px;border-top:1px solid var(--bd)}
.mode-row{display:flex;gap:2px;margin-bottom:5px}
.mb{flex:1;padding:4px 2px;border:1px solid var(--bd2);border-radius:2px;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;font-family:var(--fn);transition:.15s;touch-action:manipulation}
.mb.mg.on{border-color:var(--gold);color:var(--gold);background:rgba(224,160,32,.06)}
.mb.ms.on{border-color:var(--teal);color:var(--teal);background:rgba(48,184,152,.06)}
.mb.mp.on{border-color:var(--purple);color:var(--purple);background:rgba(128,80,192,.06)}
.xbtn{width:100%;padding:12px;font-size:16px;font-weight:700;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#08090f;border:none;border-radius:6px;cursor:pointer;letter-spacing:.04em;transition:.15s;touch-action:manipulation}
.xbtn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 14px rgba(224,160,32,.3)}
.xbtn:disabled{background:var(--s3);color:var(--muted);cursor:not-allowed;transform:none;box-shadow:none}
.cd-row{margin-top:4px;display:flex;align-items:center;gap:6px}
.cd-bw{flex:1;height:2px;background:var(--bd);border-radius:1px;overflow:hidden}
.cd-bf{height:100%;background:var(--gold);border-radius:1px;width:0;transition:width .1s}
.cd-t{font-size:16px;color:var(--muted);min-width:38px;text-align:right}

/* ── CENTER MAP ── */
.center{display:flex;flex-direction:column;overflow:hidden}
.mhdr{background:var(--s);border-bottom:1px solid var(--bd);padding:4px 10px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.floor-prog{display:flex;align-items:center;gap:8px}
.fl{font-size:16px;color:var(--teal);min-width:44px}
.floor-pips{display:flex;gap:2px;align-items:center}
.floor-pip{width:7px;height:7px;border-radius:1px;background:var(--bd);transition:background .3s}
.floor-pip.done{background:var(--muted)}
.floor-pip.cur{background:var(--gold)}
.floor-pip.boss{background:var(--red)}
.mhs{display:flex;gap:10px}
.mh{text-align:center}
.mh-v{font-size:16px;font-weight:600;color:var(--gold)}
.mh-l{font-size:16px;color:var(--muted)}
.mwrap{position:relative;flex:1;overflow:hidden;background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(20,32,80,.11) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(20,32,80,.11) 40px),radial-gradient(ellipse at 50% 40%,rgba(12,24,60,.5) 0%,transparent 70%),#060810}
canvas#mc{position:absolute;top:0;left:0}
#sl{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.cov{position:absolute;inset:0;background:rgba(6,8,18,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:30;opacity:0;transition:opacity .2s;pointer-events:none}
.cov.show{opacity:1}
.cov-ttl{font-size:16px;font-weight:500;color:var(--red);letter-spacing:.08em}
.cov-vs{display:flex;align-items:center;gap:14px}
.cov-ch{display:flex;flex-direction:column;align-items:center;gap:3px}
.cov-ico{font-size:26px;animation:cfloat .5s ease-in-out infinite alternate}
@keyframes cfloat{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.cov-nm{font-size:16px;color:var(--text)}
.cov-hp{font-size:16px;color:var(--muted2)}
.cov-vstxt{font-size:16px;color:var(--muted)}
.cov-bar{width:160px;height:5px;background:var(--bd);border-radius:3px;overflow:hidden}
.cov-fill{height:100%;border-radius:3px;background:var(--red);animation:atkAnim .3s ease-in-out infinite alternate}
@keyframes atkAnim{from{opacity:.6}to{opacity:1}}
.cov-res{font-size:16px;font-weight:500;padding:3px 10px;border-radius:2px;opacity:0;transition:opacity .3s;border:1px solid}
.cov-res.show{opacity:1}
.cov-res.win{color:var(--teal);border-color:var(--teal);background:rgba(48,184,152,.08)}
.cov-res.lose{color:var(--red);border-color:var(--red);background:rgba(208,72,88,.08)}
.pbar{background:var(--s);border-top:1px solid var(--bd);padding:4px 10px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.pt{font-size:16px;color:var(--text)}
.pspd{display:flex;align-items:center;gap:5px}
.pspd span{font-size:16px;color:var(--muted)}
.pspd input{width:60px;accent-color:var(--teal)}
.pspd-v{font-size:16px;color:var(--teal);min-width:16px}
.log{height:220px;overflow-y:auto;padding:4px 10px;background:#050710;border-top:1px solid var(--bd);flex-shrink:0}
.ll{font-size:16px;line-height:1.8;font-family:"Courier New",Consolas,monospace}
.ll.rw{color:var(--gold)}.ll.cb{color:var(--red)}.ll.tp{color:var(--amber)}.ll.rs{color:var(--green)}.ll.ok{color:var(--teal)}.ll.ai{color:var(--blue)}.ll.dd{color:#ff7080}.ll.art{color:var(--purple)}

/* ── RIGHT STATUS ── */
.right{background:var(--s);border-left:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden}
.party-status{padding:6px 8px;display:flex;flex-direction:column;gap:3px;border-bottom:1px solid var(--bd);flex:1;overflow-y:auto}
.pc{border:1px solid var(--bd);border-radius:4px;padding:5px 6px;background:var(--s2);transition:.15s}
.pc.fighting{border-color:rgba(208,72,88,.5);background:rgba(208,72,88,.05)}
.pc.resting{border-color:rgba(56,168,88,.3)}
.pc.dead{opacity:.3;filter:grayscale(.8)}
.pc-top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.pc-ico{font-size:16px}
.pc-nm{font-size:16px;font-weight:500;color:var(--text)}
.pc-rl{font-size:16px;color:var(--muted);margin-left:auto}
.pc-st{font-size:16px;font-weight:500;padding:1px 4px;border-radius:1px;border:1px solid;margin-left:3px}
.st-ex{border-color:var(--teal);color:var(--teal)}.st-fi{border-color:var(--red);color:var(--red);animation:stbl .5s infinite alternate}
@keyframes stbl{from{opacity:.6}to{opacity:1}}
.st-re{border-color:var(--green);color:var(--green)}.st-de{border-color:var(--muted);color:var(--muted)}.st-ai{border-color:var(--blue);color:var(--blue)}
.hp-row{display:flex;align-items:center;gap:6px}
.hp-bw{flex:1;height:3px;background:var(--bd);border-radius:2px;overflow:hidden}
.hp-bf{height:100%;border-radius:2px;transition:width .4s}
.hp-hi{background:var(--teal)}.hp-mi{background:var(--amber)}.hp-lo{background:var(--red)}
.hp-t{font-size:16px;color:var(--muted);min-width:22px;text-align:right}
.gam-active{font-size:16px;color:var(--blue);margin-top:2px;min-height:10px}
.art-slots{display:flex;gap:2px;margin-top:3px;flex-wrap:wrap}
.art-slot{height:14px;padding:0 3px;border-radius:2px;border:1px solid var(--bd);font-size:16px;display:flex;align-items:center;gap:1px;background:var(--bg);color:var(--muted);white-space:nowrap;max-width:68px;overflow:hidden}
.art-slot.common{border-color:var(--muted2);color:var(--muted2)}
.art-slot.rare{border-color:var(--teal);color:var(--teal)}
.art-slot.epic{border-color:var(--purple);color:var(--purple);animation:stbl .8s infinite alternate}
.runstats{padding:6px 8px}
.rs{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid #0d1020}
.rs-l{font-size:16px;color:var(--muted)}
.rs-v{font-size:16px;font-weight:500}
.rs-v.g{color:var(--gold)}.rs-v.t{color:var(--teal)}.rs-v.r{color:var(--red)}

@keyframes fup{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-64px) scale(.8)}}
.ft{position:absolute;font-size:28px;font-weight:700;pointer-events:none;animation:fup 1.2s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.9);letter-spacing:.02em}
/* ── DAMAGE POPUPS (position:fixed, always visible) ── */
@keyframes dmgpop{0%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-44px) scale(.85)}}
@keyframes dmgpop-lg{0%{opacity:1;transform:translate(-50%,0) scale(1.1)}30%{opacity:1;transform:translate(-50%,-18px) scale(1.05)}100%{opacity:0;transform:translate(-50%,-72px) scale(.8)}}
@keyframes dmgpop-ail{0%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-38px)}}
@keyframes bossdown{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
.dmg-pop{position:fixed;pointer-events:none;z-index:9999;font-size:84px;font-weight:900;text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.8);animation:dmgpop 1.2s ease-out forwards;white-space:nowrap;font-family:var(--fn);letter-spacing:.02em}
.dmg-pop.lg{font-size:108px;animation:dmgpop-lg 1.5s ease-out forwards}
.dmg-pop.ail{font-size:60px;font-weight:800;animation:dmgpop-ail 1.1s ease-out forwards}
#bossDown{position:fixed;left:50%;top:38%;pointer-events:none;z-index:9998;display:none;font-size:40px;font-weight:900;letter-spacing:.06em;text-align:center;white-space:nowrap;text-shadow:0 0 40px currentColor,0 2px 14px rgba(0,0,0,.95)}
.sp{position:absolute;background:rgba(6,8,18,.94);border:1px solid var(--bd2);border-radius:7px 7px 7px 0;padding:5px 11px;font-size:16px;font-weight:500;color:var(--text);pointer-events:none;white-space:nowrap;animation:spin .2s ease-out;max-width:130px}
@keyframes spin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.evb{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:var(--s2);border:0.5px solid var(--bd2);border-radius:2px;padding:3px 10px;font-size:16px;color:var(--gold);pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
.evb.show{opacity:1}
.env-bar{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:rgba(6,8,18,.88);border:0.5px solid var(--bd2);border-radius:2px;padding:2px 8px;font-size:16px;color:var(--muted2);pointer-events:none;white-space:nowrap;letter-spacing:.04em}

/* ── INVENTORY PANEL ── */
#invPanel{display:none;padding:6px 4px;overflow-y:auto;max-height:260px}
#invPanel.show{display:block}
.inv-hdr{font-size:16px;color:var(--muted2);letter-spacing:.08em;padding:2px 4px 5px;border-bottom:1px solid var(--bd2);margin-bottom:4px}
.inv-empty{font-size:16px;color:var(--muted2);text-align:center;padding:18px 0}
.inv-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:3px;border:1px solid var(--bd2);background:var(--s2);margin-bottom:3px}
.inv-ico{font-size:17px;min-width:22px;text-align:center}
.inv-info{flex:1;min-width:0}
.inv-name{font-size:16px;color:var(--text);font-weight:600}
.inv-desc{font-size:16px;color:var(--muted2)}
.inv-use{padding:3px 8px;font-size:16px;border:1px solid var(--teal);background:transparent;color:var(--teal);border-radius:2px;cursor:pointer;font-family:var(--fn);transition:.15s}
.inv-use:hover{background:rgba(48,184,152,.12)}
.inv-use:disabled{opacity:.35;cursor:not-allowed}
/* ── TITLE SCREEN ── */
.title-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;gap:0;overflow:hidden}
.title-screen.hidden{display:none}
.ts-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(28,35,64,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(28,35,64,.25) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.ts-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 45%,rgba(224,160,32,.07) 0%,transparent 60%),radial-gradient(ellipse at 65% 55%,rgba(48,184,152,.05) 0%,transparent 50%);pointer-events:none}
.ts-icons{display:flex;gap:18px;margin-bottom:28px;font-size:26px;position:relative;z-index:1}
.ts-icon{animation:cfloat 2s ease-in-out infinite alternate}
.ts-logo{font-size:52px;font-weight:700;color:var(--gold);letter-spacing:.12em;margin-bottom:6px;text-shadow:0 0 40px rgba(224,160,32,.45);position:relative;z-index:1}
.ts-sub{font-size:16px;color:var(--muted2);letter-spacing:.25em;text-transform:uppercase;margin-bottom:10px;position:relative;z-index:1}
.ts-desc{font-size:16px;color:var(--muted);text-align:center;line-height:1.8;margin-bottom:28px;max-width:300px;position:relative;z-index:1}
.ts-boost{font-size:16px;color:var(--teal);background:rgba(48,184,152,.1);border:1px solid rgba(48,184,152,.3);padding:4px 12px;border-radius:2px;margin-bottom:20px;letter-spacing:.05em;position:relative;z-index:1}
.ts-boost.hidden{display:none}
.ts-start{padding:14px 52px;background:linear-gradient(135deg,var(--gold2),var(--gold));border:none;border-radius:4px;color:#08090f;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:.12em;transition:.2s;font-family:var(--fn);position:relative;z-index:1;touch-action:manipulation}
.ts-start:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(224,160,32,.4)}
.ts-best{font-size:16px;color:var(--muted);margin-top:16px;letter-spacing:.06em;position:relative;z-index:1}

/* ── RESULT SCREEN ── */
.result-screen{position:fixed;inset:0;background:rgba(8,9,15,.93);display:flex;align-items:center;justify-content:center;z-index:150;opacity:0;transition:opacity .35s;pointer-events:none}
.result-screen.show{opacity:1;pointer-events:all}
.res-inner{background:var(--s);border:1px solid var(--bd2);border-radius:8px;padding:24px 28px;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:280px;position:relative;animation:rsin .35s ease-out}
@keyframes rsin{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.res-outcome{font-size:16px;letter-spacing:.2em;text-transform:uppercase;padding:3px 10px;border-radius:2px;border:1px solid}
.res-outcome.clear{color:var(--teal);border-color:var(--teal);background:rgba(48,184,152,.08)}
.res-outcome.failed{color:var(--red);border-color:var(--red);background:rgba(208,72,88,.08)}
.res-outcome.timeout{color:var(--amber);border-color:var(--amber);background:rgba(192,120,40,.08)}
.res-rank{font-size:68px;font-weight:700;line-height:1;letter-spacing:.05em}
.res-floor-txt{font-size:16px;color:var(--muted2);letter-spacing:.1em}
.res-newbest{font-size:16px;color:var(--gold);letter-spacing:.12em;animation:stbl .5s infinite alternate;display:none}
.res-newbest.show{display:block}
.res-div{width:100%;height:1px;background:var(--bd);margin:2px 0}
.res-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.res-stat{display:flex;justify-content:space-between;align-items:center;padding:4px 7px;background:var(--s2);border-radius:2px;border:1px solid var(--bd)}
.res-sl{font-size:16px;color:var(--muted)}
.res-sv{font-size:16px;font-weight:500}
.res-sv.g{color:var(--gold)}.res-sv.r{color:var(--red)}.res-sv.t{color:var(--teal)}.res-sv.a{color:var(--amber)}.res-sv.p{color:var(--purple)}
.res-lost{font-size:16px;color:var(--red);text-align:center;display:none}
.res-lost.show{display:block}
.res-btns{display:flex;gap:8px;width:100%;margin-top:4px}
.res-btn{flex:1;padding:11px;border-radius:3px;border:none;font-size:16px;font-weight:500;cursor:pointer;font-family:var(--fn);transition:.15s;touch-action:manipulation}
.res-btn-main{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#08090f}
.res-btn-main:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(224,160,32,.35)}
.res-btn-sub{background:transparent;border:1px solid var(--bd2) !important;color:var(--muted2)}
.res-btn-sub:hover{border-color:var(--teal) !important;color:var(--teal)}

/* ── MOBILE NAV ── */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:52px;background:var(--s);border-top:1px solid var(--bd);z-index:50}
.mob-nav-inner{display:flex;height:100%}
.mob-tab{flex:1;border:none;background:transparent;color:var(--muted2);font-family:var(--fn);font-size:16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;touch-action:manipulation;transition:.15s}
.mob-tab-ico{font-size:17px}
.mob-tab.on{color:var(--gold)}

/* ── MOBILE RESPONSIVE ── */
@media(max-width:700px){
  .app{height:calc(100vh - 52px);height:calc(100dvh - 52px);border-radius:0}
  .mob-nav{display:block;padding-bottom:env(safe-area-inset-bottom)}
  .nav-tabs{display:none}
  .body{grid-template-columns:1fr;position:relative;overflow:hidden}
  .left,.center,.right{position:absolute;inset:0;display:none;width:100%}
  .left.mob-show{display:flex;flex-direction:column}
  .center.mob-show{display:flex;flex-direction:column}
  .right.mob-show{display:flex;flex-direction:column;overflow-y:auto}
  .xbtn{min-height:44px;font-size:16px}
  .gf-sel{font-size:16px}
  .ts-logo{font-size:38px}
  .ts-icons{font-size:22px;gap:12px;margin-bottom:20px}
  .ts-start{padding:14px 40px}
  .res-inner{margin:16px;min-width:unset;width:calc(100% - 32px);padding:20px 18px}
  .res-rank{font-size:56px}
  .boost-badge{display:none}
  /* 横スクロール抑制 */
  html,body{overflow-x:hidden}
  /* iOSフォームズームを防止 */
  input,textarea,select{font-size:16px}
}

/* ── AILMENT BADGES ── */
.ailment-row{display:flex;gap:2px;flex-wrap:wrap;margin-top:2px}
.ab{font-size:16px;padding:1px 3px;border-radius:1px;border:1px solid;white-space:nowrap}
.ab-poison{border-color:#50c030;color:#50c030}
.ab-curse{border-color:#8050c0;color:#8050c0;animation:stbl .7s infinite alternate}
.ab-bleed{border-color:#d04858;color:#d04858;animation:stbl .4s infinite alternate}
.ab-sleep{border-color:#4080d0;color:#4080d0}
.ab-slow{border-color:#c07828;color:#c07828}

/* ── JOB CONFIRM DIALOG ── */
.jconfirm{position:fixed;inset:0;background:rgba(8,9,15,.88);display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;transition:opacity .2s;pointer-events:none}
.jconfirm.show{opacity:1;pointer-events:all}
.jcbox{background:var(--s);border:1px solid var(--bd2);border-radius:6px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:260px;max-width:320px;animation:rsin .25s ease-out}
.jctitle{font-size:16px;font-weight:500;color:var(--text)}
.jcdesc{font-size:16px;color:var(--muted);line-height:1.7}
.jcbtns{display:flex;gap:8px}
.jcbtn{flex:1;padding:10px;border-radius:3px;border:none;font-size:16px;font-weight:500;cursor:pointer;font-family:var(--fn);transition:.15s;touch-action:manipulation}
.jcbtn-ok{background:var(--teal);color:#08090f}
.jcbtn-ok:hover{background:#38d8b0}
.jcbtn-cancel{background:transparent;border:1px solid var(--bd2) !important;color:var(--muted2)}
.jcbtn-cancel:hover{border-color:var(--text) !important;color:var(--text)}
.gam-reset{width:100%;padding:3px;background:transparent;border:1px dashed var(--amber);border-radius:2px;color:var(--amber);font-size:16px;cursor:pointer;font-family:var(--fn);margin-bottom:2px;touch-action:manipulation}
.gam-reset:hover{background:rgba(192,120,40,.08)}
/* ── SKILL DISPLAY ── */
.skill-slots{display:flex;gap:2px;flex-wrap:wrap;margin-top:3px}
.skill-slot{height:14px;padding:0 3px;border-radius:2px;border:1px solid var(--bd);font-size:16px;display:flex;align-items:center;gap:1px;background:var(--bg);color:var(--muted);white-space:nowrap;max-width:80px;overflow:hidden;cursor:default}
.skill-slot.inherited{border-color:var(--gold);color:var(--gold)}
.skill-slot.passive{border-style:dashed}
.lv-badge{font-size:16px;color:var(--teal);padding:1px 3px;border-radius:1px;border:1px solid rgba(48,184,152,.4);margin-left:auto;white-space:nowrap}
.xp-bar{height:2px;background:var(--bd);border-radius:1px;overflow:hidden;margin-top:2px}
.xp-fill{height:100%;background:var(--teal);border-radius:1px;transition:width .3s}

/* ── TIMELINE ── */
.right{background:var(--s);border-left:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden}
.timeline{flex:1;overflow-y:auto;padding:4px 6px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}
.tl-entry{display:flex;align-items:flex-start;gap:6px;padding:3px 5px;border-radius:3px;border-left:2px solid var(--bd2);background:rgba(15,18,32,.4);animation:tlin .15s ease-out;flex-shrink:0}
@keyframes tlin{from{opacity:0;transform:translateX(5px)}to{opacity:1;transform:translateX(0)}}
.tl-win{border-left-color:var(--teal)}.tl-lose{border-left-color:var(--red)}
.tl-treasure{border-left-color:var(--gold)}.tl-trap{border-left-color:var(--amber)}
.tl-rest{border-left-color:var(--green)}.tl-event{border-left-color:var(--purple)}
.tl-boss-win{border-left-color:var(--gold);background:rgba(224,160,32,.05)}
.tl-dead{border-left-color:#555;opacity:.55}.tl-floor{border-left-color:var(--blue);background:rgba(64,128,208,.07)}
.tl-explore{border-left-color:var(--muted)}.tl-skill{border-left-color:var(--purple)}
.tl-ico{font-size:16px;flex-shrink:0;width:16px;text-align:center;margin-top:1px;line-height:1.3}
.tl-body{flex:1;min-width:0}
.tl-char{font-size:16px;color:var(--muted2);display:flex;align-items:center;gap:2px;margin-bottom:1px}
.tl-char-ico{font-size:16px}
.tl-msg{font-size:16px;color:var(--text);line-height:1.4}
.tl-stats{padding:5px 8px;border-top:1px solid var(--bd);flex-shrink:0}
.tls-row{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid #0d1020}
.tls-l{font-size:16px;color:var(--muted)}.tls-v{font-size:16px;font-weight:500}
.tls-v.g{color:var(--gold)}.tls-v.r{color:var(--red)}.tls-v.t{color:var(--teal)}

/* ── SPRITE / ENGAGE ── */
.ch-sprite{position:absolute;text-align:center;width:40px;pointer-events:none;transition:filter .2s}
.ch-sprite.engage{filter:drop-shadow(0 0 12px #d04858) drop-shadow(0 0 4px #ff2040)}
.ch-sprite.dead{opacity:.25;filter:grayscale(1)}
.sp-ico{font-size:26px;display:block;transition:transform .1s}
.ch-sprite.engage .sp-ico{animation:sp-pulse .35s infinite alternate}
@keyframes sp-pulse{from{transform:scale(1)}to{transform:scale(1.22)}}
.engage-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--red);animation:ering .4s infinite alternate;pointer-events:none}
@keyframes ering{from{opacity:.4;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}

/* ── LOG ENHANCED ── */
.log{height:220px;overflow-y:auto;padding:4px 10px;background:#050710;border-top:1px solid var(--bd);flex-shrink:0}
.ll{font-size:16px;line-height:1.8;font-family:"Courier New",Consolas,monospace}
.ll .tag{font-size:16px;padding:0 4px;border-radius:2px;border:1px solid;margin-right:4px;font-weight:700}
.tag-combat{border-color:var(--red);color:var(--red)}.tag-treasure{border-color:var(--gold);color:var(--gold)}
.tag-trap{border-color:var(--amber);color:var(--amber)}.tag-skill{border-color:var(--purple);color:var(--purple)}
.tag-rest{border-color:var(--green);color:var(--green)}.tag-ok{border-color:var(--teal);color:var(--teal)}
.tag-dead{border-color:#d04858;color:#ff6080}.tag-boss{border-color:var(--gold);color:var(--gold)}

/* ── COMBAT EFFECTS ── */
#flashOverlay{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:22}
@keyframes redFlash{0%{opacity:.6}100%{opacity:0}}
@keyframes goldFlash{0%{opacity:.5}100%{opacity:0}}
@keyframes whiteFlash{0%{opacity:.65}100%{opacity:0}}
.flash-red{background:rgba(208,40,56,.75);animation:redFlash .5s ease-out forwards}
.flash-gold{background:rgba(224,160,32,.6);animation:goldFlash .55s ease-out forwards}
.flash-white{background:rgba(200,220,255,.55);animation:whiteFlash .5s ease-out forwards}
@keyframes purpleFlash{0%{opacity:.6}100%{opacity:0}}
.flash-purple{background:rgba(160,60,240,.65);animation:purpleFlash .55s ease-out forwards}
#combatBanner{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;z-index:24;font-size:36px;font-weight:700;letter-spacing:.14em;text-shadow:0 0 32px currentColor;white-space:nowrap}
@keyframes cBann{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}9%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}16%{transform:translate(-50%,-50%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
.cBann-show{animation:cBann 1.5s ease-out forwards}
.sparkle{position:absolute;pointer-events:none;font-size:18px;animation:spark 1s ease-out forwards}
@keyframes spark{0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}100%{opacity:0;transform:translateY(-54px) scale(.2) rotate(200deg)}}
.skill-banner{position:absolute;pointer-events:none;font-size:20px;font-weight:700;letter-spacing:.06em;animation:fup 1.4s ease-out forwards;text-shadow:0 0 12px currentColor}
#announceOverlay{position:fixed;top:56px;left:50%;transform:translateX(-50%);background:rgba(8,9,15,.94);border:1px solid var(--gold);border-radius:6px;padding:10px 22px;font-size:16px;font-weight:600;color:var(--gold);letter-spacing:.04em;z-index:9999;opacity:0;transition:opacity .4s;pointer-events:none;text-align:center;max-width:88vw;box-shadow:0 4px 24px rgba(224,160,32,.25)}
#announceOverlay.show{opacity:1}
#nWallet{color:var(--teal)}
#nWallet.low{color:var(--red)!important}
.retreat-ok{color:var(--teal)}.retreat-ng{color:var(--red)}

/* ── PARTY STATUS BAR ── */
.party-hbar{height:150px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:4px 6px;background:var(--s);border-top:2px solid var(--bd);flex-shrink:0}
.phb-char{background:var(--s2);border:1px solid var(--bd2);border-radius:4px;padding:4px 5px;display:flex;flex-direction:column;gap:2px;transition:.2s;position:relative;overflow:hidden}
.phb-char.fighting{border-color:rgba(208,72,88,.65);background:rgba(208,72,88,.06);animation:phbFight .65s ease-in-out infinite alternate}
@keyframes phbFight{from{box-shadow:inset 0 0 6px rgba(208,72,88,.2)}to{box-shadow:inset 0 0 14px rgba(208,72,88,.55)}}
.phb-char.dead{opacity:.32;filter:grayscale(1);border-color:var(--bd)}
.phb-char.resting{border-color:rgba(56,168,88,.4)}
.phb-top{display:flex;align-items:center;gap:6px;flex-shrink:0}
.phb-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1.5px solid var(--bd2);font-size:16px;flex-shrink:0;transition:.2s}
.phb-char.fighting .phb-ico{border-color:var(--red);background:rgba(208,72,88,.15)}
.phb-char.dead .phb-ico{border-color:var(--muted)}
.phb-info{flex:1;min-width:0}
.phb-name{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.phb-lv{font-size:16px;color:var(--muted2);line-height:1.2}
.phb-bars{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.phb-bar-row{display:flex;align-items:center;gap:3px}
.phb-bar-bg{flex:1;height:4px;background:rgba(20,24,40,.9);border-radius:2px;overflow:hidden}
.phb-bar-fill{height:100%;border-radius:2px;transition:width .4s ease-out}
.phb-hp-hi{background:var(--teal)}
.phb-hp-mi{background:var(--amber)}
.phb-hp-lo{background:var(--red)}
.phb-hp-crit{background:var(--red);animation:phbBlink .45s infinite alternate}
@keyframes phbBlink{from{opacity:.35}to{opacity:1}}
.phb-xp{background:var(--blue)}
.phb-bar-lbl{font-size:16px;color:var(--muted);min-width:24px;text-align:right;line-height:1;font-family:"Courier New",monospace}
.phb-hp-txt{font-size:16px;font-weight:700;color:var(--text);line-height:1.4;padding:1px 0}
.phb-hp-txt strong{font-size:16px}
.phb-hp-vals{font-size:16px;color:var(--muted2);font-weight:400}
.phb-ailments{display:flex;gap:2px;flex-wrap:wrap;min-height:10px;align-items:center}
.phb-ail{font-size:16px;padding:1px 3px;border-radius:2px;font-weight:700;line-height:1;border:1px solid}
.phb-ail.poison{color:#c872f8;border-color:rgba(200,114,248,.5);background:rgba(200,114,248,.1)}
.phb-ail.bleed{color:var(--red);border-color:rgba(208,72,88,.5);background:rgba(208,72,88,.1)}
.phb-ail.curse{color:var(--purple);border-color:rgba(128,80,192,.5);background:rgba(128,80,192,.1)}
.phb-ail.sleep{color:var(--blue);border-color:rgba(64,128,208,.5);background:rgba(64,128,208,.1)}
.phb-ail.slow{color:var(--muted2);border-color:var(--bd2);background:var(--bd)}
.phb-engage{position:absolute;top:3px;right:4px;font-size:16px;font-weight:800;color:var(--red);letter-spacing:.06em;animation:phbEngage .55s infinite alternate;text-shadow:0 0 6px rgba(208,72,88,.8)}
@keyframes phbEngage{from{opacity:.25}to{opacity:1}}

/* ── MODE SELECT OVERLAY ── */
.mode-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9999;display:flex;align-items:center;justify-content:center}
.mode-box{background:var(--s);border:2px solid var(--bd2);border-radius:12px;padding:26px 32px;min-width:290px;max-width:340px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.7)}
.mode-title{font-size:16px;font-weight:700;color:var(--gold);margin-bottom:10px;letter-spacing:.04em}
.mode-stats{font-size:16px;color:var(--text);margin-bottom:18px;line-height:1.9;background:var(--s2);border:1px solid var(--bd);border-radius:6px;padding:8px 12px;text-align:left}
.mode-stats span{color:var(--gold);font-weight:700}
.mode-btns{display:flex;gap:10px;justify-content:center}
.mode-btn{padding:10px 18px;border:none;border-radius:7px;font-size:16px;font-weight:700;cursor:pointer;transition:.15s;font-family:var(--fn)}
.mode-btn-play{background:var(--gold);color:#000}
.mode-btn-skip{background:var(--s2);border:1.5px solid var(--bd2);color:var(--text)}
.mode-btn:hover{filter:brightness(1.18);transform:translateY(-1px)}
/* ── SKIP BUTTON ── */
.skip-btn{padding:3px 10px;border:1px solid var(--bd2);border-radius:4px;background:var(--s2);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;font-family:var(--fn);transition:.15s}
.skip-btn:hover{border-color:var(--gold);color:var(--gold)}
/* ── FLOOR TRANSITION ── */
@keyframes ftrans-num{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#floorTransition{position:fixed;inset:0;pointer-events:none;z-index:500;display:none;align-items:center;justify-content:center}
#floorTransition.show{display:flex}
.ftrans-bg{position:absolute;inset:0;background:rgba(6,8,18,.88);animation:fa .5s ease-in-out forwards}
@keyframes fa{0%{opacity:0}25%{opacity:1}80%{opacity:1}100%{opacity:0}}
.ftrans-body{position:relative;text-align:center;animation:ftrans-num .5s ease-out forwards;left:50%;top:50%;transform:translate(-50%,-50%)}
.ftrans-from{font-size:22px;color:var(--muted2);opacity:.7;font-weight:700}
.ftrans-arr{font-size:16px;color:var(--gold);margin:4px 0}
.ftrans-to{font-size:72px;font-weight:900;color:var(--gold);text-shadow:0 0 50px var(--gold),0 0 20px rgba(224,160,32,.6);letter-spacing:.04em}
/* ── ENEMY ANNOUNCE ── */
@keyframes ea-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes ea-out{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-60%)}}
#enemyAnnounce{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);pointer-events:none;z-index:400;display:none;background:rgba(6,8,18,.94);border:1.5px solid var(--gold);border-radius:10px;padding:16px 28px;text-align:center;min-width:230px;box-shadow:0 8px 40px rgba(0,0,0,.7)}
#enemyAnnounce.show{display:block;animation:ea-in .4s ease-out forwards}
#enemyAnnounce.hiding{animation:ea-out .4s ease-in forwards}
.ea-lbl{font-size:16px;color:var(--muted2);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.ea-icon{font-size:52px;line-height:1.2;margin:4px 0}
.ea-name{font-size:26px;font-weight:700;color:var(--text);margin:4px 0 2px}
.ea-hint{font-size:16px;color:var(--muted2);margin-top:4px;line-height:1.7}
/* ── BOSS WARNING ── */
@keyframes bwarn{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.2)}25%{opacity:1;transform:translate(-50%,-50%) scaleX(1.06)}55%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
#bossWarning{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:45;display:none;font-size:30px;font-weight:900;letter-spacing:.14em;text-align:center;white-space:nowrap;color:#ff2040;text-shadow:0 0 30px #ff2040,0 0 80px rgba(208,32,64,.4),0 2px 10px rgba(0,0,0,.9)}
#bossWarning.show{display:block;animation:bwarn 2s ease-in-out forwards}
/* ── BOSS DARK OVERLAY ── */
#bossDark{position:absolute;inset:0;background:rgba(6,8,18,.48);pointer-events:none;z-index:7;opacity:0;transition:opacity .6s}
#bossDark.on{opacity:1}

/* ── TOWN PAGE ── */
.town-app{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.town-body{flex:1;display:grid;grid-template-columns:260px 1fr;gap:0;overflow:hidden;height:calc(100vh - 40px)}
.town-left{background:var(--s);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden}
.town-right{display:flex;flex-direction:column;overflow-y:auto;padding:14px}
.town-section{background:var(--s);border:1px solid var(--bd);border-radius:6px;padding:12px;margin-bottom:12px}
.town-sec-title{font-size:16px;font-weight:700;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;border-bottom:1px solid var(--bd);padding-bottom:6px}
.go-dungeon-btn{width:100%;padding:14px;font-size:16px;font-weight:700;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#08090f;border:none;border-radius:6px;cursor:pointer;letter-spacing:.06em;transition:.2s;touch-action:manipulation;margin-top:4px}
.go-dungeon-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 28px rgba(224,160,32,.4)}
.go-dungeon-btn:disabled{background:var(--s3);color:var(--muted);cursor:not-allowed;transform:none}
.wallet-disp{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--s2);border-radius:4px;border:1px solid var(--bd);margin-bottom:8px}
.wallet-lbl{font-size:16px;color:var(--muted)}
.wallet-val{font-size:16px;font-weight:700;color:var(--gold)}
.wallet-val.low{color:var(--red)}
@media(max-width:700px){
  .town-body{grid-template-columns:1fr}
  .town-left{max-height:50vh}
}

/* ── ENEMY MAP OVERLAY ── */
.enem-ov{position:absolute;transform:translate(-50%,-100%);background:rgba(6,8,18,.93);border:1.5px solid rgba(248,60,80,.55);border-radius:7px;padding:4px 8px;pointer-events:none;text-align:center;min-width:70px;white-space:nowrap;z-index:15;box-shadow:0 2px 12px rgba(0,0,0,.7)}
.enem-ov-icon{font-size:16px;line-height:1.2}
.enem-ov-name{font-size:16px;color:#f85870;font-weight:700;margin:1px 0}
.enem-ov-bar-bg{height:5px;background:rgba(30,30,50,.8);border-radius:3px;margin:2px 0;width:60px}
.enem-ov-bar-fill{height:100%;border-radius:3px;transition:width .4s ease-out}
.enem-ov-stats{font-size:16px;color:rgba(200,210,240,.8)}

/* ── TOUCH UX ── */
button,.xbtn,.s-btn,.eq-btn,.merge-btn,.res-btn,.res-next-btn,.ctab,.vtab,.stab{touch-action:manipulation}
@media(hover:none){
  button:not(:disabled):active,.xbtn:active{transform:scale(0.96);transition:transform 0.05s}
}

/* ── Global Footer (Phase L8) ── */
.global-footer {
  margin-top: 20px;
  padding: 10px 14px;
  text-align: center;
  font-size: 16px;
  color: rgba(128,128,160,.65);
  border-top: 1px solid rgba(180,140,60,.15);
  background: rgba(0,0,0,.02);
}
.global-footer a {
  color: rgba(128,128,160,.85);
  text-decoration: none;
  margin: 0 8px;
}
.global-footer a:hover {
  color: var(--hud-accent, #ff8fa3);
  text-decoration: underline;
}