:root{
  --bg:#06070b;--panel:rgba(10,12,18,.82);--panel2:rgba(19,22,31,.88);--line:rgba(255,193,91,.26);
  --gold:#ffbd57;--gold2:#ff7a37;--cyan:#68e6ff;--red:#ff526e;--green:#62f5aa;--text:#f7f2e8;--muted:#a8a4a0;
}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#020307;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}button{font:inherit;color:inherit}button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
[hidden]{display:none!important}
#app{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1a1620,#05060a 65%,#020204)}
#game-shell{position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));aspect-ratio:16/9;overflow:hidden;background:#080a10;box-shadow:0 0 80px #000}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
#scanlines{pointer-events:none;position:absolute;inset:0;opacity:.09;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.13) 4px)}
#vignette{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 180px 55px rgba(0,0,0,.78)}
.hud{position:absolute;z-index:5;border:1px solid var(--line);background:linear-gradient(145deg,rgba(18,20,28,.88),rgba(7,8,13,.8));backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.25)}
#topbar{top:1.5%;left:1.25%;right:1.25%;height:7.2%;display:flex;align-items:center;justify-content:space-between;padding:0 1.2%;clip-path:polygon(0 0,98.5% 0,100% 28%,100% 100%,1.5% 100%,0 72%)}
.brand-mini{display:flex;align-items:center;gap:.7rem}.sigil{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--gold);color:var(--gold);transform:rotate(45deg)}.sigil::first-letter{transform:rotate(-45deg)}.brand-mini b{font-size:clamp(10px,.78vw,15px);letter-spacing:.15em}.brand-mini small{display:block;color:var(--muted);font-size:clamp(6px,.48vw,10px);letter-spacing:.17em;margin-top:2px}.mission-status{font-size:clamp(8px,.62vw,13px);letter-spacing:.15em;color:#ddd;display:flex;align-items:center;gap:.7rem}.mission-status .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.top-actions{display:flex;gap:.5rem}.hud-btn{border:1px solid rgba(255,180,77,.35);background:rgba(5,6,10,.65);padding:.55rem .8rem;font-size:clamp(7px,.55vw,11px);letter-spacing:.08em;cursor:pointer}.hud-btn:hover{border-color:var(--gold);background:rgba(255,151,55,.12)}
#party-panel{left:1.25%;top:10%;width:17%;padding:1%;}.eyebrow,.modal-kicker,.kicker{font-size:clamp(7px,.55vw,11px);letter-spacing:.25em;color:var(--gold);font-weight:800}.party-member{display:grid;grid-template-columns:34px 1fr;gap:.6rem;align-items:center;margin-top:.72rem}.party-portrait{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);font-weight:900;background:linear-gradient(145deg,var(--hero),#141722);box-shadow:0 0 18px color-mix(in srgb,var(--hero) 45%,transparent)}.party-meta{min-width:0}.party-meta div{display:flex;justify-content:space-between;font-size:clamp(7px,.55vw,11px);letter-spacing:.07em}.mini-hp{height:4px;background:#242730;margin-top:5px}.mini-hp i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#e5ff89)}.party-member.down{opacity:.45;filter:grayscale(1)}
#quest-panel{right:1.25%;top:10%;width:19%;padding:1.1%}#quest-panel strong{display:block;margin-top:.6rem;font-size:clamp(12px,1vw,20px);text-transform:uppercase}#quest-panel p{margin:.35rem 0 .7rem;color:var(--muted);font-size:clamp(8px,.65vw,13px);line-height:1.45}.progress-track{height:6px;background:#20232b}.progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold2),var(--gold));box-shadow:0 0 12px var(--gold2)}#quest-panel small{float:right;margin-top:.35rem;color:#d6d2cc}
#combat-feed{position:absolute;z-index:6;right:2%;top:31%;width:22%;pointer-events:none;text-align:right}.feed-item{font-size:clamp(7px,.58vw,12px);letter-spacing:.07em;margin:.35rem 0;animation:feed 3.4s forwards;color:#ddd}.feed-item b{color:var(--gold)}@keyframes feed{0%{opacity:0;transform:translateX(15px)}10%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
#bottom-hud{left:1.25%;right:1.25%;bottom:1.6%;height:12%;display:grid;grid-template-columns:30% 1fr 23%;align-items:center;padding:1% 1.2%;clip-path:polygon(1% 0,99% 0,100% 28%,100% 100%,0 100%,0 28%)}
.player-core{display:flex;align-items:center;gap:.8rem}.avatar-orb{--hero:#ff9d4a;width:56px;height:56px;border-radius:50%;border:2px solid var(--hero);background:radial-gradient(circle at 40% 30%,#fff 0 4%,var(--hero) 5% 20%,#1a1c26 21% 68%,#05060a 70%);box-shadow:0 0 25px color-mix(in srgb,var(--hero) 55%,transparent);position:relative}.avatar-orb::after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;font-size:24px}.core-bars{flex:1}.name-row{display:flex;justify-content:space-between;font-size:clamp(8px,.68vw,13px);letter-spacing:.11em}.name-row span{color:var(--gold)}.bar{height:16px;background:#161922;margin-top:5px;position:relative;border:1px solid rgba(255,255,255,.1);overflow:hidden}.bar i{display:block;height:100%;transition:width .18s}.bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(6px,.45vw,9px);font-weight:800;text-shadow:0 1px 4px #000}.bar.hp i{background:linear-gradient(90deg,#8c1939,var(--red))}.bar.energy i{background:linear-gradient(90deg,#17617f,var(--cyan))}
#skill-bar{display:flex;justify-content:center;gap:clamp(6px,.55vw,12px)}.skill{position:relative;width:clamp(48px,4.2vw,82px);aspect-ratio:1;border:1px solid rgba(255,184,83,.42);background:linear-gradient(145deg,#242938,#0c0d13);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:.15s}.skill:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 0 20px rgba(255,164,71,.25)}.skill .glyph{font-size:clamp(18px,1.65vw,32px);filter:drop-shadow(0 3px 6px #000)}.skill kbd{position:absolute;left:4px;top:3px;font-size:clamp(6px,.46vw,9px);color:var(--gold);font-family:inherit}.skill small{position:absolute;bottom:3px;left:3px;right:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(5px,.38vw,8px);text-align:center}.skill .cooldown{position:absolute;inset:0;background:rgba(2,3,6,.75);display:grid;place-items:center;font-size:clamp(11px,1vw,20px);font-weight:900}.skill.ready{box-shadow:inset 0 0 18px rgba(104,230,255,.14)}
.run-stats{display:flex;justify-content:flex-end;gap:1.8rem;text-align:right}.run-stats small{display:block;color:var(--muted);font-size:clamp(6px,.45vw,9px);letter-spacing:.16em}.run-stats b{font-size:clamp(12px,1.15vw,22px);font-variant-numeric:tabular-nums}
.overlay-screen{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:rgba(3,4,8,.76);backdrop-filter:blur(12px)}
#menu-screen{background:radial-gradient(circle at 20% 35%,rgba(255,98,46,.17),transparent 38%),radial-gradient(circle at 72% 48%,rgba(85,225,255,.13),transparent 42%),linear-gradient(130deg,#07080d,#11101b 55%,#07090d)}.menu-backdrop{position:absolute;inset:-15%;opacity:.65;background:conic-gradient(from 25deg at 50% 50%,transparent,#341e21,transparent,#172532,transparent);filter:blur(70px);animation:rotatebg 16s linear infinite}@keyframes rotatebg{to{transform:rotate(360deg)}}.menu-grid{position:relative;width:88%;display:grid;grid-template-columns:1.05fr .95fr;gap:7%;align-items:center}.menu-copy{padding-left:2%}.kicker{color:var(--cyan)}.menu-copy h1{font-size:clamp(52px,7.2vw,138px);line-height:.78;margin:3% 0 4%;letter-spacing:-.055em;text-shadow:0 8px 40px #000}.menu-copy h1 span{color:var(--gold);font-size:.68em;letter-spacing:.03em}.menu-copy p{max-width:700px;color:#c1bec1;font-size:clamp(11px,1vw,19px);line-height:1.65}.feature-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}.feature-pills span{border:1px solid rgba(104,230,255,.24);background:rgba(104,230,255,.055);padding:.5rem .7rem;color:#b9eff9;font-size:clamp(7px,.55vw,11px);letter-spacing:.12em}.class-select-panel{border:1px solid var(--line);padding:5%;background:linear-gradient(145deg,rgba(25,26,35,.86),rgba(5,6,10,.78));box-shadow:0 30px 90px #000}.panel-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:3%}.panel-heading span{font-size:clamp(12px,1.1vw,21px);font-weight:900;letter-spacing:.14em}.panel-heading small{color:var(--muted);font-size:clamp(7px,.55vw,11px)}#class-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.class-card{--hero:#fff;min-height:clamp(95px,8.2vw,155px);border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,color-mix(in srgb,var(--hero) 10%,#131621),#08090e);padding:6%;cursor:pointer;text-align:left;position:relative;overflow:hidden;transition:.2s}.class-card::after{content:attr(data-glyph);position:absolute;right:-3%;bottom:-22%;font-size:clamp(60px,6vw,115px);opacity:.09;color:var(--hero)}.class-card:hover,.class-card.selected{transform:translateY(-3px);border-color:var(--hero);box-shadow:0 10px 30px color-mix(in srgb,var(--hero) 18%,transparent)}.class-card.selected::before{content:'SELECTED';position:absolute;right:7px;top:6px;color:var(--hero);font-size:clamp(6px,.42vw,9px);letter-spacing:.14em}.class-card b{display:block;color:var(--hero);font-size:clamp(11px,.95vw,18px);letter-spacing:.08em}.class-card small{display:block;margin-top:.35rem;color:#aaa;font-size:clamp(7px,.52vw,10px);line-height:1.35}.primary-btn,.secondary-btn{width:100%;border:1px solid var(--gold2);padding:clamp(10px,1vw,18px);margin-top:.8rem;font-weight:900;letter-spacing:.12em;cursor:pointer}.primary-btn{background:linear-gradient(90deg,#8c2d1c,#d65428);box-shadow:inset 0 1px rgba(255,255,255,.15)}.primary-btn:hover{filter:brightness(1.16);box-shadow:0 0 28px rgba(255,113,49,.28)}.secondary-btn{background:rgba(4,5,9,.6);border-color:rgba(255,173,69,.35)}.secondary-btn:hover{border-color:var(--gold)}.menu-footer{position:absolute;left:3%;right:3%;bottom:2%;display:flex;justify-content:space-between;color:#777;font-size:clamp(6px,.48vw,10px);letter-spacing:.15em}.modal-card{width:min(520px,72%);border:1px solid var(--line);border-left:4px solid var(--gold2);background:linear-gradient(145deg,rgba(17,18,25,.98),rgba(5,6,9,.98));padding:3.5%;box-shadow:0 40px 100px #000}.modal-card.wide{width:min(940px,82%)}.modal-card h2{font-size:clamp(28px,3vw,58px);margin:.5rem 0 1.2rem;line-height:1}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.control-grid article{border:1px solid rgba(255,255,255,.1);padding:1rem;background:#0a0c12}.control-grid b{display:block;color:var(--gold);font-size:12px;letter-spacing:.1em}.control-grid span{display:block;color:#b4b2b1;margin-top:.35rem;font-size:12px}.manual-copy{color:#aaa;line-height:1.6}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:1.2rem 0;border:1px solid rgba(255,255,255,.08)}.result-stats div{padding:1rem;text-align:center;border-right:1px solid var(--line)}.result-stats div:last-child{border:0}.result-stats small{display:block;color:#aaa;font-size:10px;letter-spacing:.12em}.result-stats b{display:block;color:var(--gold2);font-size:28px;margin-top:.4rem}.result-card{width:min(680px,76%)}
#toast{position:absolute;z-index:30;left:50%;top:13%;transform:translate(-50%,-15px);opacity:0;background:rgba(7,9,14,.92);border:1px solid var(--line);border-left:3px solid var(--gold);padding:.8rem 1.2rem;font-size:clamp(8px,.68vw,13px);letter-spacing:.1em;pointer-events:none;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}
#touch-ui{display:none;position:absolute;z-index:12;inset:0;pointer-events:none}#stick-base{position:absolute;left:5%;bottom:18%;width:115px;height:115px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.28);pointer-events:auto;touch-action:none}#stick-knob{position:absolute;left:34px;top:34px;width:46px;height:46px;border-radius:50%;background:rgba(255,184,82,.75);box-shadow:0 0 20px rgba(255,137,50,.35)}.touch-actions{position:absolute;right:4%;bottom:16%;width:210px;height:180px;pointer-events:auto}.touch-actions button{position:absolute;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(14,17,24,.8);font-weight:900;touch-action:none}.touch-actions button[data-touch=skill3]{right:70px;top:0}.touch-actions button[data-touch=skill2]{right:0;top:58px}.touch-actions button[data-touch=skill1]{right:132px;top:58px}.touch-actions .attack{right:65px;bottom:0;width:75px;height:75px;background:rgba(189,62,26,.8);border-color:var(--gold2)}
body.menu-open .hidden-during-menu{opacity:0;pointer-events:none}
@media (pointer:coarse),(max-width:820px){#touch-ui{display:block}.top-actions .hud-btn:nth-child(1),.top-actions .hud-btn:nth-child(2){display:none}#party-panel{width:24%}#quest-panel{width:25%}.run-stats{gap:.7rem}.menu-grid{width:92%;grid-template-columns:1fr 1fr;gap:3%}.menu-copy p{font-size:9px}.class-select-panel{padding:3%}.class-card{min-height:82px}.control-grid{grid-template-columns:1fr 1fr}.hud-btn{padding:.4rem}.brand-mini .sigil{display:none}}