:root{
  --ink:#14100d; --ink2:#1d1814; --paper:#efe3c8; --paper2:#cbb98f; --verm:#e2572b; --verm2:#ff8a4d;
  --gold:#f2c14e; --hp:#d9483b; --hp2:#f28b6b; --chakra:#3f8de0; --stam:#e0b23f; --good:#6fbf73;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:radial-gradient(1200px 700px at 50% -10%,#3a2a20 0%,#14100d 60%);color:var(--paper);font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
#app{height:100%;padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
.screen{display:none;height:100%;overflow:auto}
.screen.active{display:block}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:.06em;margin:0}
h3{font-size:14px;text-transform:uppercase;color:var(--paper2);margin:18px 0 8px;border-bottom:1px solid #ffffff18;padding-bottom:6px}
h3 small{color:var(--verm2);font-weight:400;margin-left:6px}
button{font:inherit;cursor:pointer}
.btn{border:1px solid #ffffff30;background:#2a221c;color:var(--paper);padding:10px 16px;border-radius:8px;transition:transform .12s,background .12s,box-shadow .12s}
.btn:hover:not(:disabled){transform:translateY(-1px);background:#3a2e25}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:linear-gradient(#f0663a,#c4431c);border-color:#ffb08a55;color:#fff;font-weight:700;text-shadow:0 1px 0 #0006;box-shadow:0 4px 18px #e2572b40}
.btn.primary:hover:not(:disabled){background:linear-gradient(#ff7a4d,#d34a20)}
.btn.ghost{background:transparent;padding:6px 10px}
.hint{color:var(--paper2);font-size:13px;margin-left:10px}

/* auth */
#screen-auth.active{display:grid;place-items:center}
.auth-card{width:min(400px,92vw);background:linear-gradient(#251d17,#191410);border:1px solid #ffffff22;border-radius:14px;padding:26px;box-shadow:0 20px 60px #000a}
.logo{text-align:center;margin-bottom:18px}
.logo-kanji{display:block;font-size:64px;color:var(--verm);text-shadow:0 0 30px #e2572b88;line-height:1}
.logo h1{font-size:26px;margin-top:6px}.logo h1 em{color:var(--verm);font-style:normal}.logo h1 b{color:var(--gold)}
.logo p{margin:6px 0 0;color:var(--paper2);font-size:13px}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tabs button{flex:1;background:#00000030;border:1px solid #ffffff1a;color:var(--paper2);padding:8px;border-radius:8px}
.tabs button.on{background:#e2572b22;border-color:var(--verm);color:var(--paper)}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--paper2);margin-bottom:12px}
input{display:block;width:100%;margin-top:5px;padding:11px 12px;border-radius:8px;border:1px solid #ffffff26;background:#0f0c0a;color:var(--paper);font:inherit;font-size:16px}
input:focus{outline:2px solid var(--verm);outline-offset:1px}
.msg{min-height:20px;color:#ff9a86;font-size:13px;margin:10px 0 0;text-align:center}
#auth-go{width:100%;margin-top:4px}

/* lobby */
.topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #ffffff14;background:#0e0b09b0;position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.brand{font-family:Georgia,serif;font-weight:700;letter-spacing:.1em;flex:1;color:var(--verm2)}.brand span{color:var(--paper)}
.conn{font-size:12px;color:var(--paper2)}.conn.ok{color:var(--good)}
.lobby-grid{display:grid;grid-template-columns:280px 1fr;gap:16px;padding:16px;max-width:1000px;margin:0 auto}
@media(max-width:760px){.lobby-grid{grid-template-columns:1fr}}
.panel{background:linear-gradient(#211a15,#181310);border:1px solid #ffffff1a;border-radius:12px;padding:16px}
.me{text-align:center}
#portrait{width:100%;max-width:220px;background:radial-gradient(circle at 50% 30%,#4a3524,#1a1410);border-radius:10px;border:1px solid #ffffff1c}
.me h2{margin:10px 0 4px}
.tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.tag{font-size:11px;padding:3px 8px;border-radius:99px;border:1px solid #ffffff30;text-transform:uppercase;letter-spacing:.06em}
.stats{display:grid;gap:4px;text-align:left;font-size:12px}
.stat{display:grid;grid-template-columns:78px 1fr 26px;gap:6px;align-items:center;color:var(--paper2)}
.stat i{display:block;height:6px;border-radius:4px;background:#ffffff14;overflow:hidden}.stat i b{display:block;height:100%;background:linear-gradient(90deg,var(--verm),var(--gold))}
.record{margin-top:12px;font-size:13px;color:var(--paper2)}.record strong{color:var(--gold)}
.kit{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.chip{font-size:11px;padding:3px 7px;border-radius:6px;background:#ffffff10;border:1px solid #ffffff18}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.players,.board{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.players li,.board li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:#ffffff08;border:1px solid #ffffff10}
.players li .nm{flex:1;font-weight:700}.players li .rt{color:var(--paper2);font-size:12px}
.players li.self .nm::after{content:" (you)";color:var(--paper2);font-weight:400}
.board li{font-size:14px}.board li span:first-child{flex:1}.board li span:last-child{color:var(--gold)}
#toasts{position:fixed;right:14px;bottom:calc(14px + var(--safe-b));display:grid;gap:8px;z-index:50;max-width:min(340px,90vw)}
.toast{background:#241b15;border:1px solid var(--verm);border-radius:10px;padding:12px 14px;box-shadow:0 10px 30px #000a;animation:pop .25s ease-out}
.toast .btns{display:flex;gap:8px;margin-top:8px}.toast.err{border-color:#ff6b6b}
@keyframes pop{from{transform:translateY(10px) scale(.96);opacity:0}}

/* battle */
#screen-battle.active{display:flex;flex-direction:column;background:#0b0806;overflow:hidden}
.stage-wrap{position:relative;flex:1;min-height:0;display:grid;place-items:center;background:#000}
#stage{width:100%;height:100%;display:block}
.frame{position:relative;width:min(100%,calc((100dvh - 96px) * 16 / 9));aspect-ratio:16/9;container-type:inline-size}
#hud{position:absolute;inset:0;pointer-events:none}
.stage-fit{position:absolute}

.plate.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px #f2c14e55}
.plate .nm{font-family:Georgia,serif;font-weight:700;font-size:clamp(11px,2.1cqw,16px);letter-spacing:.04em}
.plate .sub{color:var(--paper2);font-size:11px;margin-bottom:5px}
.bar{position:relative;height:11px;border-radius:6px;background:#00000080;overflow:hidden;margin-top:4px;border:1px solid #ffffff18}
.bar i{position:absolute;inset:0 auto 0 0;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.bar i.ghost{background:#fff8;transition:width .9s .25s ease-out}
.bar.hp i.fill{background:linear-gradient(90deg,var(--hp),var(--hp2))}
.bar.ck i.fill{background:linear-gradient(90deg,#2f6fbe,var(--chakra))}
.bar.st i.fill{background:linear-gradient(90deg,#b98a25,var(--stam))}
.bar.small{height:7px}
.bar span{position:absolute;right:6px;top:-1px;font-size:9px;line-height:11px;color:#fff;text-shadow:0 1px 2px #000}
.chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;min-height:20px}.plate.right .chips{justify-content:flex-end}
.schip{font-size:10px;padding:2px 6px;border-radius:5px;border:1px solid #ffffff30;background:#0009}
.schip.debuff{border-color:#ff7b6b;color:#ffb0a4}.schip.buff{border-color:#7bd88f;color:#b6f0c1}.schip.form{border-color:var(--gold);color:var(--gold)}
.center-top{position:absolute;top:8px;left:50%;transform:translateX(-50%);text-align:center;width:min(22%,200px)}
#round-tag{font-family:Georgia,serif;letter-spacing:.2em;font-size:12px;color:var(--paper2)}
#order{display:flex;gap:6px;justify-content:center;margin:5px 0}
#order i{width:22px;height:22px;border-radius:50%;border:2px solid #ffffff44;background:#241b15;font:700 10px/18px Georgia;font-style:normal}
#order i.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px #f2c14e88}
.timer{height:5px;border-radius:4px;background:#00000090;overflow:hidden}.timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--good),var(--gold),var(--verm))}
#banner{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:Georgia,serif;font-size:clamp(26px,6vw,64px);font-weight:700;letter-spacing:.14em;text-shadow:0 4px 0 #000,0 0 30px #000;opacity:0;transform:scale(1.4)}
#banner.show{animation:banner 1.5s ease-out forwards}
@keyframes banner{0%{opacity:0;transform:scale(1.5)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.98)}}
#log{position:absolute;left:10px;bottom:8px;width:min(46%,420px);max-height:96px;overflow:hidden;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;text-shadow:0 1px 3px #000}
#log div{background:#0b0806bb;padding:2px 8px;border-radius:5px;border-left:3px solid var(--verm);animation:pop .2s}
#log div.p1{border-left-color:#5aa9ff}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px;background:linear-gradient(#1a1410,#0e0b09);border-top:1px solid #ffffff1c;min-height:84px}
.act{position:relative;min-width:132px;text-align:left;padding:8px 12px;border-radius:9px;border:1px solid #ffffff30;background:linear-gradient(#2d241d,#1f1813);color:var(--paper)}
.act:hover:not(:disabled){border-color:var(--verm2);box-shadow:0 0 14px #e2572b55;transform:translateY(-2px)}
.act:disabled{opacity:.38;cursor:not-allowed}
.act b{display:block;font-size:14px}.act small{color:var(--paper2);font-size:11px;display:block}
.act .ty{position:absolute;right:8px;top:8px;width:9px;height:9px;border-radius:50%}
.act.form{border-color:var(--gold);background:linear-gradient(#3b2d14,#231a0c)}
.act .why{color:#ff9a86}
.wait{align-self:center;color:var(--paper2);font-style:italic}
.result{position:absolute;inset:0;display:grid;place-items:center;background:#000c;z-index:20;text-align:center}
.result.hidden{display:none}
.result h2{font-size:clamp(40px,9vw,90px);margin-bottom:6px}.result .win{color:var(--gold)}.result .lose{color:#8fa0b8}
.result p{margin:4px 0;color:var(--paper2)}.result .btn{margin-top:18px}

/* life-sim */
.age{color:var(--gold);font-size:13px;margin-bottom:6px}
.main-tabs{margin-bottom:6px}
.pane[hidden]{display:none}
.draft{max-width:920px;margin:0 auto;padding:28px 16px;text-align:center}
#screen-draft.active,#screen-dead.active{display:block}
.dots{display:flex;gap:8px;justify-content:center;margin:12px 0 18px}.dots i{width:12px;height:12px;border-radius:50%;border:2px solid #ffffff44}.dots i.done{background:var(--verm);border-color:var(--verm)}.dots i.now{border-color:var(--gold);box-shadow:0 0 10px #f2c14e88}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{text-align:left;padding:16px;border-radius:12px;border:1px solid #ffffff26;background:linear-gradient(#2a211a,#1a1410);color:var(--paper);transition:transform .15s,border-color .15s,box-shadow .15s}
.card:hover{transform:translateY(-4px);border-color:var(--verm2);box-shadow:0 10px 30px #e2572b40}
.card h4{margin:0 0 6px;font-family:Georgia,serif;font-size:18px;color:var(--gold)}.card p{margin:0 0 10px;color:var(--paper2);font-size:13px;font-style:italic}
.card ul{margin:0;padding-left:18px;font-size:13px}.card li{margin:2px 0}
.card.village{border-top:4px solid var(--vc,#888)}
.train-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-bottom:10px}
.train-stats button{padding:8px;border-radius:8px;border:1px solid #ffffff22;background:#ffffff08;color:var(--paper);text-align:left}
.train-stats button.on{border-color:var(--verm);background:#e2572b22}.train-stats button b{display:block;font-size:12px;color:var(--paper2);font-weight:400}
.seg{display:flex;gap:4px}.seg button{padding:8px 12px;border-radius:8px;border:1px solid #ffffff22;background:#ffffff08;color:var(--paper)}.seg button.on{border-color:var(--gold);color:var(--gold)}
label.inline{display:flex;gap:6px;align-items:center;text-transform:none;letter-spacing:0;margin:0;font-size:13px}label.inline input{width:auto;margin:0}
.rank-box{padding:12px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff14;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.rank-box .grow{flex:1;min-width:200px}.rank-box small{color:var(--paper2);display:block}.rank-box .block{color:#ff9a86}
.missions{display:grid;gap:8px}
.mission{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff12}.mission .tier{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font:700 16px Georgia;background:#e2572b33;border:1px solid var(--verm)}
.mission .grow{flex:1}.mission small{color:var(--paper2);display:block;font-size:12px}.mission.locked{opacity:.5}
.result .line{color:var(--gold);margin:3px 0}
@media(max-width:560px){.mission{flex-wrap:wrap}}

#screen-draft.active,#screen-dead.active{display:flex;align-items:center}
.draft{width:100%;min-height:min(640px,100%);display:flex;flex-direction:column;justify-content:center}
.draft h2{font-size:clamp(26px,5vw,40px)}
.card{padding:22px 20px;min-height:200px}.card h4{font-size:21px}.card p{font-size:14px;margin-bottom:14px}.card ul{font-size:14px}
.card li::marker{color:var(--verm)}
.obit .logo-kanji{font-size:72px;color:#8fa0b8;text-shadow:none}.obit p{margin:6px 0}.obit .btn{margin:18px auto 0}

.act.item{border-color:#6fbf73;background:linear-gradient(#1f2d22,#151f17)}
.war{margin-top:14px;padding:12px;border-radius:10px;border:1px solid #ff6b6b66;background:linear-gradient(#2d1512,#1b0f0d);display:grid;gap:6px}.war b{color:#ff9a86}.war .score{font:700 20px Georgia}.war small{color:var(--paper2)}
.war select{padding:8px;border-radius:8px;background:#0f0c0a;color:var(--paper);border:1px solid #ffffff26;font:inherit}
.players li .front{color:#ff9a86;font-weight:700;margin-right:4px}

/* many-fighter plates */
.plates{position:absolute;top:8px;width:27%;display:flex;flex-direction:column;gap:4px}.plates.left{left:8px}.plates.right{right:8px;text-align:right}
.plate{padding:5px 8px;background:linear-gradient(#1b1410ee,#100c0acc);border:1px solid #ffffff26;border-radius:9px;font-size:clamp(8px,1.4cqw,12px);transition:opacity .4s,transform .4s}
.plate.me{padding:7px 9px}.plate.minor{opacity:.9;padding:3px 7px}.plate.minor .nm{font-size:clamp(9px,1.5cqw,12px)}.plate.gone{opacity:0;transform:scale(.9)}.plate.dead{opacity:.45;filter:grayscale(.8)}
.plate.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px #f2c14e55}
.plate .nm{font-family:Georgia,serif;font-weight:700;font-size:clamp(11px,2cqw,15px);letter-spacing:.04em}.plate .sub{color:var(--paper2);font-size:10px;margin-bottom:3px}
.targets{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;width:100%}.toggles{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%;justify-content:center}
.btn.tog{border-color:var(--tc);color:var(--tc);padding:6px 10px;font-size:13px}.btn.tog.on{background:color-mix(in srgb,var(--tc) 22%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--tc) 60%,transparent)}
.actions{align-items:flex-start}
/* scenes */
#screen-scene.active{display:block}.scene{max-width:900px;margin:0 auto;padding:22px 16px 60px}
.scene h2{font-size:clamp(22px,4vw,32px);margin-bottom:6px}.scene .text{color:var(--paper);line-height:1.5;margin:10px 0 16px;font-size:16px}
.choices{display:grid;gap:10px}.choice{text-align:left;padding:14px 16px;border-radius:10px;border:1px solid #ffffff2a;background:linear-gradient(#2a211a,#1a1410);color:var(--paper);font-size:15px;transition:transform .12s,border-color .12s}.choice:hover{transform:translateX(4px);border-color:var(--verm2)}
.prev{color:var(--paper2);font-style:italic;font-size:14px;margin:0 0 10px;border-left:3px solid var(--verm);padding-left:10px}
.step{color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.quiz{display:grid;gap:14px}.q{padding:12px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff12}.q b{display:block;margin-bottom:8px}.q label{display:block;text-transform:none;letter-spacing:0;font-size:14px;margin:4px 0;color:var(--paper);cursor:pointer}.q input{display:inline;width:auto;margin:0 8px 0 0}
.map{position:relative;height:430px;border-radius:12px;background:radial-gradient(circle at 50% 30%,#3a2a20,#16100c);border:1px solid #ffffff1c;overflow:hidden;margin-bottom:12px}
.map svg{position:absolute;inset:0;width:100%;height:100%}.node{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;border:2px solid #ffffff33;background:#241b15;color:var(--paper2);font:700 12px Georgia;display:grid;place-items:center;transition:transform .12s}
.node.reach{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px #f2c14e88;cursor:pointer;animation:pulse 1.4s infinite}.node.reach:hover{transform:translate(-50%,-50%) scale(1.15)}.node.visited{background:#3a2a1c;border-color:var(--verm);color:var(--verm2)}.node.cur{background:var(--verm);color:#fff}
@keyframes pulse{50%{box-shadow:0 0 22px #f2c14ecc}}
.notice{padding:10px 12px;border-left:3px solid var(--gold);background:#f2c14e12;margin-bottom:10px;border-radius:6px}
.result-card{padding:18px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff18}.result-card .line{margin:6px 0}.result-card.bad{border-color:#ff6b6b66}.result-card.good{border-color:#6fbf7366}
/* draft */
.npc{padding:16px;border-radius:12px;border:1px solid #ffffff26;background:linear-gradient(#2a211a,#1a1410);text-align:left;margin-bottom:14px}.npc h3{margin:0 0 4px;border:0;font-size:22px;color:var(--gold);text-transform:none}.npc .meta{color:var(--paper2);font-size:13px;margin-bottom:10px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;text-align:left}.cat{padding:10px 12px;border-radius:9px;border:1px solid #ffffff2a;background:#ffffff08;color:var(--paper);transition:all .12s}.cat:hover:not(:disabled){border-color:var(--verm2);transform:translateY(-2px)}.cat:disabled{opacity:.4}.cat b{display:block;font-size:12px;color:var(--paper2);font-weight:400;text-transform:uppercase;letter-spacing:.06em}.cat span{font-size:20px;font-weight:700}
.picked{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.picked .chip b{color:var(--gold)}
.villages{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.village{padding:18px 10px;border-radius:12px;border:1px solid #ffffff26;border-top:4px solid var(--vc);background:#ffffff08;color:var(--paper);font-family:Georgia,serif;font-size:18px}.village:hover{transform:translateY(-3px)}
/* tab content */
.sec{margin-bottom:18px}.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.card2{padding:12px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff14;display:flex;flex-direction:column;gap:6px}.card2 b{font-size:15px}.card2 small{color:var(--paper2);font-size:12px}.card2 .btn{margin-top:auto;padding:7px 10px;font-size:13px}.card2.ok{border-color:#6fbf7355}.card2.lock{opacity:.55}
.slot{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;background:#ffffff08;border:1px solid #ffffff14;margin-bottom:6px}.slot span{flex:1}
.pillrow{display:flex;gap:6px;flex-wrap:wrap}.pill{padding:3px 9px;border-radius:99px;border:1px solid #ffffff2a;font-size:12px}
.bars{display:grid;gap:3px;font-size:12px;color:var(--paper2)}.member{padding:12px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff14;margin-bottom:8px}.member.dead{opacity:.5}
.rel{display:grid;grid-template-columns:70px 1fr 28px;gap:6px;align-items:center;font-size:11px;color:var(--paper2)}.rel i{display:block;height:5px;border-radius:3px;background:#ffffff14;overflow:hidden}.rel i b{display:block;height:100%;background:linear-gradient(90deg,#3f8de0,#6fbf73)}
.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:60}.modal .box{width:min(520px,92vw);background:linear-gradient(#251d17,#191410);border:1px solid var(--verm);border-radius:14px;padding:22px;text-align:center}.modal .choices{margin-top:14px}