:root{--abyss:#070d18;--deep:#0c1626;--panel:rgba(9,17,31,.9);--ink:#39e6d0;--gold:#e9c46a;--coral:#ff5d5d;--text:#e8edf5;--dim:#9db0c8;--line:rgba(57,230,208,.45);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:var(--text);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{touch-action:manipulation;cursor:pointer}
#app{position:fixed;inset:0;margin:auto;max-width:520px;overflow:hidden;background:var(--abyss)}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .5s}
#bg.on{opacity:1}
#screen{position:absolute;inset:0;z-index:2}
#fx{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0}
#fx.flash{animation:fl .55s ease-out}
@keyframes fl{0%{opacity:.85}100%{opacity:0}}
#app.shake{animation:sh .35s}
@keyframes sh{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,3px)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:block;width:100%;min-height:48px;padding:10px 14px;border-radius:10px;border:1px solid rgba(157,176,200,.4);background:rgba(16,28,48,.92);text-align:left;font-weight:600}
.btn small{display:block;font-weight:400;color:var(--dim);font-size:.8rem;line-height:1.3;margin-top:2px}
.btn:active:not(:disabled){transform:scale(.98);background:rgba(30,52,84,.95)}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,.box:focus-visible,.tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn.primary{background:linear-gradient(180deg,#14a899,#0b7d73);border-color:var(--ink);color:#fff;text-align:center}
.btn.primary small{color:#d6fff9}
.btn.big{font-size:1.15rem;min-height:60px}
.btn.small{width:auto;min-height:44px;min-width:60px;padding:6px 10px;text-align:center;flex:none;font-size:.85rem}
.hudbtn{position:absolute;top:calc(var(--safe-t) + 10px);right:10px;z-index:5;width:44px;height:44px;border-radius:10px;border:1px solid rgba(157,176,200,.45);background:rgba(7,13,24,.72);font-size:1.15rem}
.hudbtn.inline{position:static;flex:none}

/* title */
.title{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px calc(var(--safe-b) + 22px);background:linear-gradient(180deg,rgba(7,13,24,.15) 30%,rgba(7,13,24,.92) 72%)}
.title small{color:var(--ink);letter-spacing:.13em;font-size:.72rem;font-weight:700}
.title h1,.end h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.6rem,13vw,3.5rem);line-height:1;margin:.3rem 0 1.1rem;text-shadow:0 2px 18px #000,0 0 26px rgba(57,230,208,.35)}
.tbtns{display:grid;gap:10px}.tbtns .btn{text-align:center}
.ttag{color:var(--dim);font-size:.8rem;text-align:center;margin:.9rem 0 0}

/* story */
.story{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 12px calc(var(--safe-b) + 14px);background:linear-gradient(180deg,transparent 45%,rgba(7,13,24,.72) 100%)}
.views{position:absolute;top:calc(var(--safe-t) + 18px);left:12px;background:rgba(7,13,24,.72);border-radius:20px;padding:3px 12px;font-size:.82rem;color:var(--gold);font-weight:600}
.portrait{align-self:flex-start;width:112px;height:140px;margin:0 0 -6px 4px;border:2px solid var(--line);border-radius:10px;background-size:cover;background-position:center 15%;display:none;box-shadow:0 8px 24px #000}
.portrait.on{display:block;animation:rise .22s ease-out}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.box{display:block;position:relative;z-index:2;width:100%;min-height:128px;max-height:52vh;overflow:auto;padding:12px 15px 24px;text-align:left;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:1.03rem;line-height:1.5;box-shadow:0 0 24px rgba(0,0,0,.6)}
.box.narr{font-family:Georgia,"Times New Roman",serif;font-size:1.06rem;color:#e3e8f0}
.box.narr .tx{font-style:normal}
.np{display:block;font-weight:800;font-size:.86rem;letter-spacing:.03em;margin-bottom:3px}
.tx{display:block}
.more{position:absolute;right:13px;bottom:6px;color:var(--ink);opacity:0;font-size:.8rem}
.box.ready .more{opacity:1;animation:bob 1s infinite}
@keyframes bob{50%{transform:translateY(3px)}}
.choices{display:grid;gap:9px}
.choice{background:rgba(9,17,31,.94);border-color:var(--gold);animation:rise .22s ease-out}
.choice small{color:var(--gold)}
.card{position:absolute;inset:0;z-index:6;width:100%;border:0;background:rgba(3,6,12,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.card small{color:var(--ink);letter-spacing:.3em;font-weight:700}
.card b{font:700 2rem/1.12 Georgia,"Times New Roman",serif}
.card i{color:var(--dim);font-size:.82rem;margin-top:16px}

/* modal + system window */
.veil{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,5,10,.68)}
.win{width:100%;max-height:calc(100% - 20px);overflow:auto;padding:16px;border-radius:8px;display:grid;gap:10px;animation:pop .17s ease-out}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.win.sys{background:linear-gradient(180deg,rgba(8,26,50,.97),rgba(6,14,28,.98));border:1px solid #4aa6ff;box-shadow:0 0 22px rgba(74,166,255,.5),inset 0 0 22px rgba(74,166,255,.12)}
.win h2{margin:0;font-size:1.02rem;letter-spacing:.12em;color:#9fd2ff;text-align:center;padding-bottom:7px;border-bottom:1px solid rgba(74,166,255,.4)}
.win p{margin:0}
.win small{color:var(--dim)}
.win input{width:100%;min-height:48px;padding:10px;background:#050c18;border:1px solid #4aa6ff;border-radius:6px;font-size:1.1rem}
.win.paper{background:#e9dfc4;color:#2c2317;border:1px solid #8a7446;border-radius:4px;box-shadow:0 10px 40px #000}
.logbook p{font:italic 1.03rem/1.5 Georgia,"Times New Roman",serif;margin:0 0 .8em}
.who span{color:var(--dim);font-size:.85rem;display:block}
.mini{display:flex;gap:8px;flex-wrap:wrap;font-size:.84rem;color:#cfe2f7;justify-content:space-between}
.mini.col{flex-direction:column;align-items:center;font-size:1.02rem;font-weight:700}
.statrow{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid rgba(74,166,255,.2)}
.statrow .sl{flex:1;font-weight:600}.statrow small{display:block;font-weight:400;font-size:.76rem}
.statrow b{font-size:1.2rem;color:var(--ink);min-width:26px;text-align:right}
.plus{width:44px;height:44px;min-height:44px;padding:0;text-align:center;font-size:1.3rem;background:#0b7d73;border-color:var(--ink);flex:none}
.pts{text-align:center;color:var(--gold)}
.list{display:grid;gap:7px;max-height:48vh;overflow:auto}
.item{display:flex;gap:9px;align-items:center;padding:7px 8px;border:1px solid rgba(157,176,200,.25);border-radius:8px;background:rgba(0,0,0,.25)}
.item>div{flex:1;min-width:0}.item b{display:block;font-size:.92rem}.item small{display:block;font-size:.76rem;line-height:1.3}
.item .ic{font-size:1.4rem;flex:none}
.item.rare{border-color:#4aa6ff}.item.epic{border-color:#c084fc}.item.locked{opacity:.65}
.crate{display:flex;flex-direction:column;align-items:center;width:100%;padding:22px;font-size:4.6rem;background:none;border:1px dashed rgba(157,176,200,.5);border-radius:10px;animation:bob 1.1s infinite}
.crate small{font-size:.85rem}
.crate.gold{border-color:var(--gold);box-shadow:0 0 22px rgba(233,196,106,.45)}.crate.silver{border-color:#dfe9ff}
.bigitem{display:grid;gap:4px;text-align:center;padding:14px;border-radius:8px;border:1px solid rgba(157,176,200,.4)}
.bigitem span{font-size:3.1rem}.bigitem.rare{border-color:#4aa6ff}.bigitem.epic{border-color:#c084fc;box-shadow:0 0 20px rgba(192,132,252,.45)}
.signart{height:170px;border-radius:8px;background-size:cover;background-position:center 20%}

/* toasts */
#toasts{position:absolute;top:calc(var(--safe-t) + 62px);left:12px;right:12px;z-index:16;display:grid;gap:6px;pointer-events:none}
.toast{background:rgba(6,14,28,.95);border:1px solid #4aa6ff;border-radius:8px;padding:8px 11px;font-size:.84rem;animation:rise .2s ease-out;transition:opacity .35s}
.toast.ach{border-color:var(--gold)}.toast.gift{border-color:var(--ink)}.toast.gone{opacity:0}

/* bars */
.bar{flex:1;height:10px;background:rgba(255,255,255,.14);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;transition:width .25s}
.bar.hp i{background:linear-gradient(90deg,#d83a3a,#ff7b6b)}.bar.ink i{background:linear-gradient(90deg,#14a899,var(--ink))}.bar.hype i{background:linear-gradient(90deg,#b8862e,var(--gold))}
.hrow{display:flex;align-items:center;gap:8px;font-size:.78rem}
.hrow span{width:34px;color:var(--dim);font-weight:700}.hrow b{min-width:58px;text-align:right;font-variant-numeric:tabular-nums}

/* combat */
.combat{position:absolute;inset:0;display:flex;flex-direction:column;padding-bottom:calc(var(--safe-b) + 8px);background:var(--abyss)}
.arena{position:relative;flex:1;min-height:120px;background-size:cover;background-position:center 25%;background-color:#101a2c}
.arena.hurt{animation:ahit .22s}
@keyframes ahit{30%{filter:brightness(1.8) saturate(.4);transform:translateX(5px)}70%{transform:translateX(-4px)}}
.etop{position:absolute;top:0;left:0;right:0;padding:calc(var(--safe-t) + 8px) 12px 18px;background:linear-gradient(180deg,rgba(0,0,0,.82),transparent)}
.ename{font-weight:800;margin-bottom:4px;text-shadow:0 1px 4px #000}.ename small{color:var(--gold);font-weight:600;margin-left:6px}
.intent{position:absolute;right:10px;bottom:10px;padding:5px 11px;border-radius:7px;background:rgba(7,13,24,.88);border:1px solid rgba(157,176,200,.5);font-size:.85rem;font-weight:700}
.intent.danger{border-color:var(--coral);color:#ffc0b8;animation:pulse .8s infinite}
@keyframes pulse{50%{box-shadow:0 0 14px var(--coral)}}
.float{position:absolute;font-weight:900;font-size:1.6rem;color:#fff;text-shadow:0 2px 4px #000,0 0 8px #000;animation:fup .9s ease-out forwards;pointer-events:none;transform:translateX(-50%)}
.float.crit{color:var(--gold);font-size:2.2rem}.float.heal{color:#8dffe9;font-size:1.1rem}.float.bleed{color:#ff9c9c;font-size:1.1rem}.float.hurtp{color:#ff7b6b}
@keyframes fup{to{transform:translate(-50%,-46px);opacity:0}}
.obolbar{min-height:42px;padding:6px 12px;font-size:.84rem;line-height:1.3;background:#0a1322;border-top:1px solid var(--line);color:#d9e3f0}
.hudp{display:grid;gap:4px;padding:7px 12px}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 8px}
.act{padding:7px 4px;min-height:54px;text-align:center;font-size:.92rem}
.act small{font-size:.72rem}
.act.blade{border-color:#a7b8cc}.act.ink{border-color:var(--ink);background:rgba(10,60,62,.9)}.act.feint{border-color:var(--gold)}.act.guard{border-color:#4aa6ff}
.crewlist{grid-column:1/-1;display:grid;gap:6px;max-height:38vh;overflow:auto}
.act.crew{text-align:left;padding:7px 10px}.act.crew small{font-size:.76rem}
.act.back{grid-column:1/-1}

/* crawl + hub */
.crawl,.hub,.barn{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:calc(var(--safe-t) + 8px) 10px calc(var(--safe-b) + 10px);background:rgba(4,8,16,.62)}
.chead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chead b{display:block;font-size:.98rem;text-shadow:0 1px 4px #000}.chead small{color:#cfdcec;font-size:.78rem}
.cbars{display:grid;gap:4px}
.grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(11,1fr);gap:2px;width:100%;margin:auto;max-width:min(100%,calc((100dvh - 190px)*.82))}
.tile{border:0;padding:0;border-radius:4px;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,5vw,24px);position:relative}
.tile.fog{background:rgba(0,0,0,.72)}
.tile.wall{background:rgba(20,26,38,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.tile.floor{background:rgba(120,200,210,.2);box-shadow:inset 0 0 0 1px rgba(160,240,240,.28)}
.tile.exit{background:rgba(233,196,106,.35)}
.tk.foe,.tk.elite{animation:bob 1.2s infinite}
.tk.ev{animation:pulse2 1s infinite}
@keyframes pulse2{50%{transform:scale(1.25)}}
.me{width:90%;aspect-ratio:1;border-radius:50%;border:2px solid var(--ink);background-size:cover;background-position:center 15%;box-shadow:0 0 10px var(--ink)}
.cfoot{display:flex;gap:6px}.cfoot .btn{text-align:center;padding:8px 4px;font-size:.88rem}
.hub{background:linear-gradient(180deg,rgba(4,8,16,.35),rgba(4,8,16,.82) 45%);overflow:auto}
.standing{padding:9px 12px;border:1px solid var(--gold);border-radius:10px;background:rgba(7,13,24,.82)}
.standing small{display:block;color:var(--gold);letter-spacing:.1em;font-size:.7rem;font-weight:700}
.standing b{font-size:1.45rem;display:block;line-height:1.2}.standing span{color:var(--dim);font-size:.8rem}
.hubacts{display:grid;gap:7px;margin-top:auto}

/* barnacles */
.hull{position:relative;flex:1;border-radius:10px;background:repeating-linear-gradient(0deg,#2b3a4a 0 34px,#25323f 34px 68px);border:2px solid #455a70;overflow:hidden;touch-action:none}
.barnacle{position:absolute;width:62px;height:62px;border-radius:50%;border:3px solid #cfc7ae;background:radial-gradient(circle,#1a140c 18%,#a89d7c 22%,#6f6750 70%);box-shadow:0 2px 6px #000}

/* end */
.end{position:absolute;inset:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:calc(var(--safe-t) + 26px) 20px calc(var(--safe-b) + 20px);background:rgba(4,8,16,.74);justify-content:flex-end}
.end>small{color:var(--ink);letter-spacing:.2em;font-weight:700;font-size:.74rem}
.end h1{margin:0}
.end p{margin:0;color:#d4deea}
.capcard{padding:13px;border:1px solid var(--gold);border-radius:10px;background:rgba(7,13,24,.9);display:grid;gap:2px}
.capcard b{font-size:1.25rem}.capcard span{color:var(--dim);font-size:.84rem}
.capcard ul{margin:8px 0 0;padding-left:18px;font-size:.93rem}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* auto-battle + loot */
.act.stance{min-height:58px}.act.stance.on{background:rgba(11,125,115,.85);border-color:var(--ink)}
.act.stance small{font-size:.68rem;line-height:1.15}
.act.speed{grid-column:1/-1;min-height:44px;text-align:center;font-size:.82rem;font-weight:500}
.dtitle{grid-column:1/-1;font-weight:800;color:var(--gold);text-align:center;padding:2px 0 4px}
.always{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--dim);min-height:44px}
.always input{width:22px;height:22px;min-height:0}
.perk{border-color:#4aa6ff}
.bigitem .vs{color:#cfe2f7}.bigitem .vs b{color:var(--ink);display:inline}
.bigitem b{color:#fff}.bigitem.common b{color:#e8edf5}.bigitem.rare b,.item.rare b{color:#7fbfff}.bigitem.epic b,.item.epic b{color:#d6a8ff}.bigitem.legend b,.item.legend b{color:var(--gold)}
.bigitem.legend,.item.legend{border-color:var(--gold);box-shadow:0 0 20px rgba(233,196,106,.45)}
.hintline{font-size:.86rem;line-height:1.35}

/* minesweeper */
.swgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);gap:4px;width:100%;margin:auto;max-width:min(100%,calc((100dvh - 170px)*.83))}
.sw{border:0;padding:0;border-radius:5px;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;font-size:clamp(17px,5.6vw,25px);font-weight:800;color:#fff}
.sw.closed{background:linear-gradient(160deg,#10263f,#091626);box-shadow:inset 0 0 0 1px rgba(100,160,220,.2);opacity:.72}
.sw.closed.near{opacity:1;background:linear-gradient(160deg,#1c5270,#0f3148);box-shadow:inset 0 0 0 1px rgba(57,230,208,.55)}
.sw.goal{box-shadow:inset 0 0 0 2px var(--gold)}
.sw.open{background:rgba(200,225,235,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sw.exit{background:rgba(233,196,106,.4)}.sw.beat{opacity:.65}
.sw.n1{color:#7fc4ff}.sw.n2{color:#7dffb0}.sw.n3{color:#ffb86b}.sw.n4{color:#ff8b8b}.sw.n5,.sw.n6,.sw.n7,.sw.n8{color:#e7a6ff}
.sweep{background:rgba(4,8,16,.74)}

/* team battles */
.combat .arena{flex:1 1 44%}
.tp{display:inline-block;font-size:.66rem;font-weight:800;color:#0a1322;border-radius:4px;padding:1px 6px;vertical-align:1px}
.pips{display:flex;gap:4px;margin-top:4px}.pips u{width:12px;height:12px;border-radius:50%;background:var(--gold);text-decoration:none}.pips u.x{background:#333}
.mecard{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(7,13,24,.9);border:1px solid var(--line)}
.mecard>i{width:52px;height:52px;flex:none;border-radius:8px;background-size:cover;background-position:center 15%}
.mb{flex:1;min-width:0}.mb .ename{margin:0 0 3px;font-size:.9rem}.mb small{font-size:.74rem;color:var(--dim)}
.acts{grid-template-columns:repeat(2,1fr);padding:6px 8px 0}
.mv{border-left:6px solid;padding:6px 8px;min-height:62px;font-size:.92rem}
.mv small{font-size:.72rem;line-height:1.2}
.mv em{font-style:normal;font-weight:800}.mv em.up{color:#7dffb0}.mv em.dn{color:#ff9c9c}
.row3{grid-column:1/-1;display:flex;gap:6px}.row3 .btn{flex:1;min-height:44px;text-align:center;padding:6px 4px;font-size:.86rem}
.act.sign{border-color:var(--ink);background:rgba(10,60,62,.9)}
.mem{display:flex;gap:9px;align-items:center;text-align:left;padding:6px 8px}
.mem>i,.thumb{width:44px;height:44px;flex:none;border-radius:8px;background-size:cover;background-position:center 15%}
.mem span{min-width:0}.mem small{font-size:.76rem}
.tbar{display:flex;gap:5px}
.tm{flex:1;min-width:0;display:grid;gap:2px;text-align:center;font-size:.7rem}
.tm>i{height:44px;border-radius:7px;background-size:cover;background-position:center 15%;border:1px solid var(--line)}
.tm.down>i{filter:grayscale(1) brightness(.5)}
.tm .bar{display:block;height:6px}.tm .bar u{display:block;height:100%;background:linear-gradient(90deg,#d83a3a,#ff7b6b);text-decoration:none}
.tm small{color:#d4deea}
.win h3{margin:.3rem 0 .1rem;font-size:.86rem;color:var(--gold)}
.gn{font-size:.8rem;color:var(--dim)}
.scroll{overflow:auto;max-height:62vh;display:grid;gap:5px}
.dpic{height:150px;border-radius:8px;background-size:cover;background-position:center 18%}
.btn.war{border-color:var(--coral);background:rgba(70,18,22,.92)}
.hub .btn{min-height:44px;padding:6px 12px}
.bigitem .rl{color:var(--gold);font-weight:700}
.item em{font-style:normal;color:var(--gold)}
.item.uncommon{border-color:#5fd38a}.item.legend{border-color:var(--gold)}
.bigitem.uncommon{border-color:#5fd38a}.bigitem.rare{border-color:#4aa6ff}
.bigitem.legend b{color:var(--gold)}
.item>.thumb{flex:none;width:44px}
.cfoot .btn{flex:1 1 0;width:auto;min-width:0}
.cfoot #cauto{flex:2 1 0;white-space:nowrap}
.cfoot #cship{flex:0 0 52px}

/* teaching */
.goal{padding:6px 10px;border:1px solid var(--gold);border-radius:8px;background:rgba(7,13,24,.88);font-size:.86rem;line-height:1.3;font-weight:600}
.goal small{display:block;color:var(--gold);font-size:.64rem;letter-spacing:.12em;font-weight:800}
.howto h3{margin:.5rem 0 .1rem;color:#9fd2ff}.howto p{font-size:.92rem;line-height:1.4}
.howto .up,.obolbar .up{color:#7dffb0}.howto .dn{color:#ff9c9c}
.obolbar.coach{background:#2a2108;border-top-color:var(--gold);font-size:.92rem;color:#fff4d4}
.pulse{animation:cpulse 1s infinite;border-color:var(--gold)!important}
@keyframes cpulse{50%{box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold)}}
.trow{display:grid;grid-template-columns:62px 1fr 1fr;gap:6px;align-items:center;padding:6px;border:1px solid rgba(157,176,200,.2);border-radius:7px;font-size:.78rem}
.trow small{display:block;color:var(--dim);font-size:.66rem}
.tbtns{gap:8px}
.obolbar .dn{color:#ff9c9c}

/* Final Fantasy style battle */
.ff{position:absolute;inset:0;display:flex;flex-direction:column;background:#04070f;padding-bottom:var(--safe-b)}
.order{display:flex;gap:4px;padding:calc(var(--safe-t) + 4px) 6px 4px;background:#04070f;min-height:38px}
.order i{width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center 15%;border:2px solid #dfe7ff;flex:none}
.order i.foe{border-color:#ff7b6b}.order i:first-child{width:36px;height:36px;box-shadow:0 0 10px var(--gold);border-color:var(--gold)}
.field{position:relative;flex:1;min-height:150px;background-size:cover;background-position:center;background-color:#101a2c;overflow:hidden}
.field::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,15,.35),rgba(4,7,15,.6))}
.spr{position:absolute;padding:0;background:none;border:0;display:flex;flex-direction:column;align-items:center;transition:filter .2s}
.spr img,.pcard{display:block;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.7))}
.pcard{border-radius:10px;background-size:cover;background-position:center 15%;border:2px solid rgba(255,255,255,.6);box-sizing:border-box}
.spr.foe{width:30%;left:calc(3% + var(--i) * 25%);top:calc(6% + (var(--i) * 2 % 2) * 20%)}
.foes.n1 .spr.foe{width:44%;left:8%;top:12%}
.foes.n2 .spr.foe{width:34%;left:calc(2% + var(--i) * 27%);top:calc(8% + var(--i) * 26%)}
.foes.n3 .spr.foe:nth-child(3){left:10%;top:48%}.foes.n3 .spr.foe:nth-child(2){left:30%;top:4%}.foes.n3 .spr.foe:nth-child(1){left:2%;top:8%}
.spr.foe.boss{width:62%;left:0;top:4%}
.spr.hero{width:24%;right:calc(4% + (var(--i) * 1) * 7%);top:calc(6% + var(--i) * 21%)}
.spr.hero img{transform:scaleX(-1)}
.sbar{display:block;width:80%;height:5px;background:rgba(0,0,0,.65);border-radius:3px;overflow:hidden;margin-top:-2px;position:relative;z-index:1}
.sbar u{display:block;height:100%;background:#ff7b6b;text-decoration:none;transition:width .25s}
.spr.hero .sbar u{background:#7dffb0}
.smark{position:absolute;top:0;left:0;font-style:normal;font-size:1.2rem}.smark .up{color:#7dffb0}.smark .dn{color:#ff9c9c}
.spr.turn::before{content:"▼";position:absolute;top:-16px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:.9rem;animation:bob .6s infinite;z-index:2}
.spr.turn img,.spr.turn .pcard{filter:drop-shadow(0 0 8px var(--gold))}
.spr.dead{filter:grayscale(1) brightness(.45);opacity:.55}
.spr.foe.dead{opacity:0;transition:opacity .6s}
.spr.pickable{cursor:pointer;animation:cpick .9s infinite}
@keyframes cpick{50%{filter:drop-shadow(0 0 12px #fff) brightness(1.25)}}
.spr.hit{animation:shit .32s}
@keyframes shit{20%{transform:translateX(-7px);filter:brightness(2.4)}60%{transform:translateX(6px)}}
.spr.lunge-l{animation:lungeL .4s}.spr.lunge-r{animation:lungeR .4s}
@keyframes lungeL{45%{transform:translateX(-46px) scale(1.05)}}
@keyframes lungeR{45%{transform:translateX(46px) scale(1.05)}}
.spr.cheer{animation:cheer .6s 3}
@keyframes cheer{40%{transform:translateY(-16px)}}
.spr.die{animation:sdie .6s forwards}
@keyframes sdie{to{transform:translateY(10px) scale(.9);opacity:0}}
.ff .float{position:absolute;transform:translateX(-50%);z-index:4}
.ffmsg{min-height:38px;padding:5px 10px;font-size:.84rem;line-height:1.25;background:#0a1140;border-top:2px solid #dfe7ff;color:#fff}
.ffmsg.coach{background:#2a2108;border-top-color:var(--gold);color:#fff4d4}
.ffmsg .up{color:#7dffb0}.ffmsg .dn{color:#ff9c9c}
.ffpanel{display:grid;grid-template-columns:1.05fr 1fr;gap:5px;padding:5px;background:linear-gradient(180deg,#14236f,#070c34);min-height:176px;max-height:44vh}
.cmds{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start;min-width:0;overflow:auto}
.cmds .who{grid-column:1/-1;font-weight:800;font-size:.82rem;display:flex;gap:6px;align-items:center;color:#fff}
.cmd{min-height:44px;padding:4px;text-align:center;background:rgba(10,18,70,.9);border:1.5px solid #cfd8ff;border-radius:6px;font-size:.92rem}
.cmd.lim{background:linear-gradient(180deg,#9b6a10,#5c3d05);border-color:var(--gold);font-size:.74rem}
.crow{grid-column:1/-1;display:flex;gap:3px}
.btn.mini{min-height:36px;padding:2px;font-size:.7rem;text-align:center;font-weight:600;background:rgba(10,18,70,.9);border-color:rgba(207,216,255,.5)}
.btn.mini.wide{grid-column:1/-1}
.sklist{grid-column:1/-1;display:grid;gap:3px;max-height:150px;overflow:auto}
.sk{min-height:44px;padding:4px 7px;border-left:5px solid #cfd8ff;background:rgba(10,18,70,.9);font-size:.84rem;border-radius:5px}
.sk small{font-size:.68rem;line-height:1.15}
.sk em{font-style:normal}.sk em.up{color:#7dffb0}.sk em.dn{color:#ff9c9c}
.plist{display:grid;gap:3px;align-content:start;min-width:0}
.pl{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:3px 5px;border:1px solid rgba(207,216,255,.3);border-radius:5px;font-size:.72rem;background:rgba(4,7,30,.5)}
.pl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .n{font-variant-numeric:tabular-nums;font-weight:700}.pl .n small{font-size:.62rem;color:#b9c6ea}
.pl .bar{grid-column:1/-1;height:3px;margin-top:1px;flex:none}
.pl.on{border-color:var(--gold);background:rgba(233,196,106,.16)}
.pl.ko{opacity:.5}
.bar.mp i{background:#5aa9ff}.bar.lb i{background:var(--gold)}.bar.lb.full{box-shadow:0 0 6px var(--gold)}
.cmds .tp{font-size:.6rem}

.door{height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:24px;background:rgba(4,8,16,.72)}
.door small{color:var(--ink);letter-spacing:.14em;font-weight:700;font-size:.72rem}.door h1{font:700 2.5rem/1.05 Georgia,serif;margin:0}.door p{margin:0}
.door input{min-height:54px;padding:12px;font-size:1.15rem;background:#050c18;border:1px solid var(--ink);border-radius:8px;color:#fff}
.dmsg{min-height:1.5em;color:var(--gold);font-weight:600}
.rk{font-style:normal;font-weight:900;font-size:.68rem;padding:0 3px;border-radius:3px;background:#555;color:#fff}.rk.rD{background:#3a7d44}.rk.rC{background:#2f6fd0}.rk.rB{background:#8a4fd0}.rk.rA{background:#c9832a}.rk.rS{background:#e9c46a;color:#000}
.bar.ki i{background:#fff27a}
.spr.aura img,.spr.aura .pcard{filter:drop-shadow(0 0 7px #ffe066) drop-shadow(0 0 16px #ffb300);animation:auraP .5s infinite alternate}
@keyframes auraP{to{filter:drop-shadow(0 0 12px #fff27a) drop-shadow(0 0 24px #ff9d00)}}
.cmd.sur{grid-column:1/-1;background:linear-gradient(180deg,#b88a10,#6b4c05);border-color:#ffe066;animation:cpulse 1s infinite}
.sealin{grid-column:1/-1;text-align:center;font-size:.86rem;font-weight:700;color:var(--gold);min-height:22px}
.sealk{grid-column:1/-1;font-size:.64rem;color:#c9d6f5;line-height:1.25}
.sk.card-Trap{border-left-color:#c084fc}.sk.card-Spell{border-left-color:#5fd38a}.sk.card-Summon{border-left-color:#ff8a4a}
.cmd{min-height:40px}