:root{--ink:#f5efe6;--dim:#b9ae9f;--panel:#16151bf0;--panel2:#22202acc;--line:#4a4352;--acc:#ff8a3d;--acc2:#ffd166;--hp:#4cd27e;--bat:#4cb3ff;--bal:#ffb547;--bad:#ff5a4f;--font:'Noto Sans Thai','Space Grotesk',system-ui,sans-serif;--pix:'Press Start 2P',monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0d0c12;color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent}
#view{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
body.smooth #view{image-rendering:auto}
#fx{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
.screen{position:fixed;inset:0;z-index:6;display:none;align-items:center;justify-content:center}
.screen.show{display:flex}
#loading{background:radial-gradient(ellipse at 50% 40%,#2a2333,#0d0c12)}
.load-box{width:min(420px,86vw);text-align:center}
.logo-sm{font-family:var(--pix);font-size:14px;letter-spacing:2px;margin-bottom:22px}
.logo-sm b,.logo b{color:var(--acc);margin-left:.4em;font-weight:400}
.bar{height:10px;border:2px solid #fff3;padding:2px}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .2s}
#load-text{color:var(--dim);font-size:14px}
#title{background:linear-gradient(90deg,#0d0c12e8 0%,#0d0c12a0 42%,transparent 70%);justify-content:flex-start}
.title-wrap{padding:0 7vw;max-width:640px}
.kicker{font-family:var(--pix);font-size:10px;letter-spacing:3px;color:var(--acc2)}
.logo{font-family:var(--pix);font-weight:400;font-size:clamp(26px,4.6vw,54px);line-height:1.25;margin:18px 0 14px;text-shadow:4px 4px 0 #0008}
.logo b{display:block;margin:0}
.tagline{font-size:16px;line-height:1.8;color:#e6dccf;margin:0 0 26px;max-width:520px}
.menu{display:grid;gap:10px;max-width:340px}
.btn{border:2px solid #fff3;background:#1b1922d9;border-radius:4px;padding:12px 18px;text-align:left;font-weight:600;transition:transform .1s,border-color .1s,background .1s;box-shadow:3px 3px 0 #0006}
.btn:hover,.btn:focus-visible{border-color:var(--acc);transform:translate(-1px,-1px);outline:none}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#1a0f07}
.btn.big{font-size:17px}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.title-foot{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.chip{border:1px solid #fff4;background:#0008;color:var(--ink);border-radius:30px;padding:7px 13px;font-size:12.5px;text-decoration:none}
.chip[aria-pressed=false]{opacity:.6}
/* HUD */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#hud>*{pointer-events:auto}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:12px 16px;background:linear-gradient(#0d0c12d0,transparent)}
.wave{font-family:var(--pix);font-size:11px;letter-spacing:1px;color:var(--acc2);white-space:nowrap}
.order{display:flex;gap:6px;flex:1;justify-content:center;overflow:hidden}
.order span{display:flex;align-items:center;gap:6px;font-size:11.5px;padding:5px 9px;border-radius:4px;background:#0009;border:1px solid #fff2;white-space:nowrap}
.order span i{width:10px;height:10px;border-radius:2px;display:block}
.order span.now{border-color:var(--acc);background:#3b2414cc}
.order span.foe{color:#ffb4ad}
#enemy-tags{position:absolute;inset:0;pointer-events:none}
.etag{position:absolute;transform:translate(-50%,-100%);width:118px;pointer-events:auto;cursor:pointer;text-align:center}
.etag strong{display:block;font-size:12px;text-shadow:1px 1px 0 #000;margin-bottom:3px;white-space:nowrap}
.etag .mini{height:6px;background:#0009;border:1px solid #0008;margin-top:2px}.etag .mini i{display:block;height:100%}
.etag.target strong{color:var(--acc2)}
.etag.target:before{content:'▼';position:absolute;top:-18px;left:50%;transform:translateX(-50%);color:var(--acc2);animation:bob .6s infinite alternate}
.etag .st{font-size:10.5px;color:var(--bal);height:14px}
@keyframes bob{to{transform:translate(-50%,-5px)}}
.hud-bottom{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;padding:12px 16px 16px;background:linear-gradient(transparent,#0d0c12e6 40%)}
.party{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-self:end}
.pcard{background:var(--panel);border:2px solid var(--line);border-radius:6px;padding:10px 11px;position:relative;box-shadow:3px 3px 0 #0007;cursor:pointer;text-align:left}
.pcard.now{border-color:var(--acc);box-shadow:0 0 0 3px #ff8a3d55,3px 3px 0 #0007}
.pcard.down{opacity:.45}
.pcard.pick{border-color:var(--acc2);animation:pulse .8s infinite alternate}
@keyframes pulse{to{box-shadow:0 0 0 4px #ffd16677}}
.pcard h3{margin:0 0 6px;font-size:14px;display:flex;align-items:center;gap:7px}
.pcard h3 .sw{display:flex;gap:2px}.pcard h3 .sw i{width:9px;height:9px;border-radius:2px;display:block;border:1px solid #fff3}
.pcard h3 small{margin-left:auto;font-size:10.5px;color:var(--dim);font-weight:400}
.meter{display:grid;grid-template-columns:30px 1fr 50px;align-items:center;gap:6px;font-size:10.5px;color:var(--dim);margin:3px 0}
.meter .track{height:8px;background:#000a;border:1px solid #fff1}.meter .track i{display:block;height:100%;transition:width .35s}
.meter b{font-weight:600;color:var(--ink);text-align:right;font-family:'Space Grotesk',monospace}
.pcard .st{display:flex;gap:4px;flex-wrap:wrap;min-height:17px;margin-top:4px}
.pcard .st span{font-size:10px;border-radius:3px;padding:1px 5px;background:#ffffff14;color:#ffd9b5}
.command{background:var(--panel);border:2px solid var(--line);border-radius:6px;padding:12px;box-shadow:3px 3px 0 #0007;align-self:end;min-height:200px}
.link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-family:var(--pix);font-size:9px;color:var(--acc2);margin-bottom:10px}
.link-bar{height:9px;background:#000a;border:1px solid #fff2}.link-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b86bff,#ff6bd5,#ffd166);transition:width .4s}
.link b{font-size:9px}
.cmd-who{font-size:12px;color:var(--dim);margin:0 0 8px}.cmd-who b{color:var(--ink)}
.cmds{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cmds .btn{font-size:14px;padding:10px 12px}
.cmds .btn small{display:block;font-weight:400;font-size:11px;color:var(--dim);margin-top:2px}
.cmds .btn.primary small{color:#3a210f}
.cmds.list{grid-template-columns:1fr}
.cmds .btn.link-ready{border-color:#ff6bd5;background:linear-gradient(90deg,#4b1d53,#2c1a3b);animation:glow 1s infinite alternate}
@keyframes glow{to{box-shadow:0 0 14px #ff6bd5aa}}
.skill-fact{font-size:11px;line-height:1.6;color:#d8c9b6;border-top:1px dashed #fff2;margin-top:6px;padding-top:6px}
.hint{font-size:12.5px;color:var(--dim);line-height:1.7;margin:4px 0 0}
.back{margin-top:8px;font-size:12px;background:none;border:0;color:var(--dim);text-decoration:underline}
.banner{position:absolute;top:66px;left:50%;transform:translateX(-50%);background:#0d0c12e8;border:2px solid var(--acc);padding:10px 22px;border-radius:4px;text-align:center;box-shadow:4px 4px 0 #0008;animation:drop .25s ease}
.banner small{display:block;font-family:var(--pix);font-size:9px;color:var(--acc2);letter-spacing:1px;margin-bottom:5px}
.banner strong{font-size:20px}
@keyframes drop{from{transform:translate(-50%,-14px);opacity:0}}
.fact{position:absolute;left:16px;top:70px;width:min(340px,80vw);background:#f5efe6;color:#231c14;border-radius:6px;padding:12px 14px;box-shadow:4px 4px 0 #0009;animation:slide .3s ease;font-size:13px;line-height:1.7}
.fact small{display:block;font-family:var(--pix);font-size:8px;letter-spacing:1px;color:#b2511a;margin-bottom:6px}
@keyframes slide{from{transform:translateX(-20px);opacity:0}}
/* floating numbers */
.num{position:absolute;transform:translate(-50%,-50%);font-family:var(--pix);font-size:16px;color:#fff;text-shadow:2px 2px 0 #000,-1px -1px 0 #000;animation:up 1s ease forwards;white-space:nowrap}
.num.heal{color:var(--hp)}.num.bal{color:var(--bal);font-size:11px}.num.miss{color:#9fd3ff;font-size:12px}.num.big{font-size:22px;color:var(--acc2)}
@keyframes up{0%{opacity:0;margin-top:8px}15%{opacity:1}100%{opacity:0;margin-top:-46px}}
/* modal */
.modal{position:fixed;inset:0;z-index:9;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-box{position:relative;background:#18161e;border:2px solid var(--line);border-radius:8px;max-width:980px;width:100%;max-height:88vh;overflow:auto;padding:26px;box-shadow:6px 6px 0 #0009}
.modal-box h2{font-family:var(--pix);font-size:15px;font-weight:400;color:var(--acc2);margin:0 0 18px;line-height:1.6}
.x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;color:var(--dim)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.rcard{border:1px solid var(--line);border-radius:6px;padding:14px;background:#211e28}
.rcard h3{margin:0;font-size:16px}.rcard .role{font-size:12px;color:var(--acc)}
.rcard .sw{display:flex;gap:4px;margin:10px 0 4px}.rcard .sw i{width:26px;height:16px;border-radius:3px;border:1px solid #fff3}
.rcard .cn{font-size:11.5px;color:var(--dim);margin:0 0 10px;line-height:1.6}
.rcard dl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 10px}.rcard dl div{background:#0006;border-radius:4px;padding:6px}
.rcard dt{font-size:10px;color:var(--dim)}.rcard dd{margin:2px 0 0;font-weight:600;font-size:13px}
.rcard ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7}.rcard li b{color:var(--acc2)}
.rcard li span{display:block;color:var(--dim);font-size:11.5px}
.rcard .src{font-size:10.5px;color:#8f8597;margin-top:8px;word-break:break-all;line-height:1.6}
.rcard .src a{color:#c9a4ff}
.modal-box p,.modal-box li{font-size:14px;line-height:1.8;color:#ddd2c4}
.result{text-align:center}.result .big{font-family:var(--pix);font-size:20px;color:var(--acc2);margin:10px 0 18px}
.facts{text-align:left;margin:16px auto;max-width:640px}
@media (max-width:900px){
  .hud-bottom{grid-template-columns:1fr;gap:8px;padding:8px}
  .party{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pcard{padding:7px}.pcard h3{font-size:12px}.pcard h3 small{display:none}.meter{grid-template-columns:24px 1fr 34px;font-size:9.5px}
  .command{min-height:0}
  .order{display:none}
  .title-wrap{padding:0 6vw}
  #title{background:linear-gradient(#0d0c12d8,#0d0c12a0 60%,transparent)}
  .fact{top:auto;bottom:330px}
}