/* もしも君がRPGの主人公なら — bright fantasy UI, mobile first */
:root{
  --ink:#2a2140;--ink2:#4a4060;--muted:#6a6080;--paper:#fff8ec;--line:#e8dcc4;
  --gold:#ffc93c;--pink:#ff6b9a;--sky:#7ad0ff;--mint:#5fd3a8;--violet:#8b5cf6;
  --cc:#e0503a;--cs:#ffe3dc;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:radial-gradient(ellipse 120% 70% at 50% 0%,#5b3fa8 0,#2a2140 70%);color:var(--ink);font-family:var(--sans);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{display:block}
.ic{width:100%;height:100%}

/* twinkling sky */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:var(--w,transparent);transition:background-color .8s ease}
.sky:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 120% 70% at 50% 0%,rgba(255,255,255,.14),rgba(20,12,40,.55) 75%)}
html[data-world=village]{--w:#3a63b8}html[data-world=forest]{--w:#1f6a4c}html[data-world=cave]{--w:#2a1f4a}html[data-world=field]{--w:#8a6a22}
html[data-world=town]{--w:#2f6496}html[data-world=valley]{--w:#4c6a88}html[data-world=night]{--w:#141a3e}html[data-world=ruins]{--w:#8a4c2a}
html[data-world=castle]{--w:#5a3fa0}html[data-world=result]{--w:var(--wc,#5b3fa8)}
html[data-mood=danger] .sky{background-color:#7a1f2e}
.sky i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.6;animation:tw 3s ease-in-out infinite}
.sky i:nth-child(1){left:8%;top:10%}.sky i:nth-child(2){left:82%;top:6%;animation-delay:.6s}.sky i:nth-child(3){left:60%;top:22%;animation-delay:1.2s}
.sky i:nth-child(4){left:22%;top:34%;animation-delay:1.8s}.sky i:nth-child(5){left:92%;top:40%;animation-delay:.3s}.sky i:nth-child(6){left:40%;top:4%;animation-delay:2.2s}
@keyframes tw{50%{opacity:.15;transform:scale(.6)}}

.app{position:relative;z-index:1;width:100%;max-width:560px;margin:0 auto;overflow-x:clip;padding:12px 14px calc(14px + env(safe-area-inset-bottom))}
.screen{display:none}
.screen.is-active{display:block;animation:scr .3s ease both}
@keyframes scr{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bounce{animation:bnc .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes bnc{0%{transform:scale(1)}35%{transform:translateY(-6px) scale(1.04,.96)}70%{transform:scale(.98,1.03)}100%{transform:none}}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:58px;padding:0 20px;border:3px solid var(--ink);border-radius:18px;font-size:18px;font-weight:900;letter-spacing:.04em;transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)!important}
.btn-go{background:linear-gradient(180deg,#ffdd6b,#ffb020);box-shadow:0 6px 0 var(--ink);color:var(--ink)}
.btn-next{background:var(--ink);color:#fff;box-shadow:0 5px 0 #000;min-height:54px}
.btn-x{background:#000;color:#fff;border-color:#000;box-shadow:0 5px 0 #555}
.btn-sub{background:#fff;color:var(--ink);box-shadow:0 5px 0 var(--ink);font-size:16px;min-height:54px}
.btn-mini{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:76px;padding:0 12px;border:2.5px solid var(--ink);border-radius:14px;background:#fff;font-size:14px;font-weight:900;box-shadow:0 3px 0 var(--ink)}
.btn-mini:active{transform:translateY(3px);box-shadow:none}
.btn-mini:disabled{opacity:.4;box-shadow:none;cursor:default}
.btn-link{display:block;margin:2px auto 0;min-height:44px;padding:0 10px;border:0;background:none;color:#fff;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.bubble{position:relative;margin:0;padding:12px 16px;border-radius:18px;background:#fff;border:3px solid var(--ink);box-shadow:0 5px 0 rgba(0,0,0,.25);font-size:15px;font-weight:800;line-height:1.65}
.bubble b{color:#e0503a}
.bubble.big{font-size:16.5px}

/* ---------- title ---------- */
#s-title{text-align:center;padding-top:8px;color:#fff}
.badge-top{display:inline-block;margin:6px 0 8px;padding:3px 14px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:13px;font-weight:900;border:2.5px solid var(--ink)}
.logo{margin:0;line-height:1.1;text-shadow:0 4px 0 var(--ink)}
.l1{display:block;font-size:24px;font-weight:900}
.l2{display:block;font-size:clamp(34px,10.5vw,50px);font-weight:900;letter-spacing:.02em}
.l2 b{color:var(--gold)}
.title-stage{position:relative;margin:10px auto 6px;max-width:420px}
.ts-heroes{display:flex;justify-content:center;align-items:flex-end;gap:6px;height:118px}
.th{position:relative;display:block;width:31%;max-width:118px;padding:6px 6px 0;border-radius:18px 18px 0 0;background:var(--c);border:3px solid var(--ink);border-bottom:0;animation:thIn .5s cubic-bezier(.3,1.6,.5,1) both}
.th-1{max-width:130px;width:35%;transform:translateY(-8px);animation-delay:.08s}.th-2{animation-delay:.16s}
.th em{position:absolute;left:50%;top:-12px;transform:translateX(-50%);padding:0 8px;border-radius:99px;background:var(--ink);color:#fff;font-style:normal;font-size:12px;font-weight:900;white-space:nowrap}
@keyframes thIn{from{opacity:0;transform:translateY(24px) scale(.8)}}
.title-party{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:-6px 0 8px;padding-top:4px;border-top:4px solid var(--ink)}
.tp-guide{width:124px;animation:float 3s ease-in-out infinite}
.tp-buddy{width:70px}
#t-piko{width:58px}
@keyframes float{50%{transform:translateY(-8px)}}
#t-bubble{max-width:420px;margin:0 auto 16px;color:var(--ink)}
.btn-start,#btn-start{max-width:420px;margin:0 auto;min-height:64px;font-size:21px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 6px 0 var(--ink),0 0 0 8px rgba(255,201,60,.35)}}
.challenge{display:flex;align-items:center;gap:10px;max-width:420px;margin:4px auto 8px;padding:8px 12px;border-radius:16px;background:#fff;border:3px solid var(--ink);color:var(--ink);text-align:left;box-shadow:0 5px 0 rgba(0,0,0,.25);animation:bnc .6s cubic-bezier(.3,1.7,.5,1)}
.challenge p{margin:0;font-size:14px;font-weight:800;line-height:1.55}
.challenge p b{display:block;color:#e0503a}
.ch-hero{flex:0 0 64px;width:64px}
.notes{list-style:none;max-width:420px;margin:16px auto 0;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.12);font-size:13px;text-align:left;color:#f2ecff}
.notes li{padding:2px 0 2px 20px;position:relative}
.notes li:before{content:'✦';position:absolute;left:2px;color:var(--gold)}

/* ---------- intro ---------- */
.intro{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:24px;text-align:center}
.intro-guide{width:150px;cursor:pointer;animation:float 3s ease-in-out infinite}
.intro .bubble{max-width:440px;cursor:pointer}
.intro-party{display:flex;gap:18px;align-items:flex-end}
.intro-party div{width:72px}
.intro-party .intro-hero{position:relative;width:86px}
.intro-hero svg,.sp-me.unknown svg{filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,.6));opacity:.85}
.intro-hero b,.sp-me b{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:26px;font-weight:900;color:var(--ink)}
.intro small{font-size:13px;color:var(--muted)}
#i-piko{width:58px}
#btn-depart{max-width:420px}

/* ---------- play ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.step{display:flex;flex-direction:column;align-items:center;margin:0;line-height:1.15;color:#fff}
.step b{font-size:21px;font-weight:900;text-shadow:0 3px 0 var(--ink)}
.step span{font-size:12.5px;font-weight:800;color:var(--gold)}
.map{position:relative;margin:10px 0 8px;height:44px}
.map-path{position:absolute;left:0;right:0;top:10px;width:100%;height:24px}
.map-path path{stroke:rgba(255,255,255,.55)}
.map ol{position:relative;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0 2px;height:44px;align-items:center}
.map li{width:34px;height:34px;display:grid;place-items:center}
.map .node{display:block;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.35);border:2.5px solid rgba(255,255,255,.6);transition:all .3s}
.map li:last-child .node{width:30px;height:30px;border:0;background:none}
.map li.done .node{width:30px;height:30px;padding:3px;background:#fff;border:2.5px solid var(--ink)}
.map li.here .node{width:40px;height:40px;border:0;background:none;animation:float 1.6s ease-in-out infinite}
.hud{display:grid;gap:6px;padding:8px 10px;border-radius:16px;background:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.h-story{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.h-item{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:900}
.h-ic{width:20px;height:20px;flex:0 0 auto}
.hearts{display:inline-flex;gap:2px}
.hearts i{width:12px;height:12px;border-radius:3px;background:#eee;border:2px solid var(--ink);transform:rotate(45deg) scale(.8)}
.hearts i.on{background:#ff6b6b}
.bond{display:inline-block;width:56px;height:10px;border-radius:99px;border:2px solid var(--ink);background:#f2ecf8;overflow:hidden}
.bond i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--violet));transition:width .4s}
.h-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hs{position:relative;display:grid;grid-template-columns:18px 1fr;grid-template-areas:"ic n" "v v" "bar bar";align-items:center;gap:0 4px;padding:3px 5px;border-radius:10px;background:#f8f4ff}
.hs-ic{grid-area:ic;width:18px;height:18px}
.hs-n{grid-area:n;font-size:11px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs b{grid-area:v;font-size:17px;font-weight:900;line-height:1.1}
.hs-bar{grid-area:bar;height:5px;border-radius:9px;background:#e6def5;overflow:hidden}
.hs-bar i{display:block;height:100%;border-radius:9px;background:var(--violet);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.hs-act .hs-bar i{background:#ff9f43}.hs-int .hs-bar i{background:#3aa3e6}.hs-luck .hs-bar i{background:#2fbf8a}.hs-ally .hs-bar i{background:var(--pink)}
.hs.up{background:#fff3c4;animation:glow .7s ease}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(255,201,60,.9)}100%{box-shadow:0 0 0 10px rgba(255,201,60,0)}}
.hs-pop{position:absolute;right:4px;top:-12px;font-style:normal;font-size:13px;font-weight:900;color:#e0503a;animation:pop 1.1s ease both;text-shadow:0 2px 0 #fff}
@keyframes pop{0%{transform:translateY(8px) scale(.6);opacity:0}25%{transform:translateY(-2px) scale(1.2);opacity:1}100%{transform:translateY(-10px);opacity:0}}

.scene{margin-top:10px;border-radius:22px;background:var(--paper);border:3px solid var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.3);overflow:hidden}
.scene.enter{animation:sIn .35s cubic-bezier(.2,.9,.3,1.1) both}
.scene.enter-back{animation:sBack .3s ease both}
.scene.shake{animation:shake .4s ease}
@keyframes sIn{from{transform:translateX(50px) rotate(2deg);opacity:0}to{transform:none;opacity:1}}
@keyframes sBack{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.scene-bg{position:relative;aspect-ratio:2/1;max-height:250px;width:100%;border-bottom:3px solid var(--ink);overflow:hidden}
.scene-bg .bg-art{position:absolute;inset:0;width:100%;height:100%}
.scene-actor{position:absolute;right:3%;bottom:5%;width:31%;animation:actIn .5s cubic-bezier(.3,1.5,.5,1) both .1s}
.scene-actor .actor{width:100%;height:auto;animation:float 2.6s ease-in-out infinite}
.scene-actor.foe .actor{animation:menace 1.2s ease-in-out infinite}
.scene-actor.jump{animation:aJump .5s cubic-bezier(.3,1.6,.5,1)}
.scene-actor.hit{animation:aHit .45s ease}
@keyframes actIn{from{opacity:0;transform:translateX(40%) scale(.7)}}
@keyframes menace{50%{transform:scale(1.06) rotate(-3deg)}}
@keyframes aJump{40%{transform:translateY(-14%) rotate(6deg)}}
@keyframes aHit{25%,75%{transform:translateX(-6%)}50%{transform:translateX(6%)}}
.scene-party{position:absolute;left:2%;bottom:3%;width:64%;display:flex;align-items:flex-end;gap:1%}
.sp-guide{width:34%}.sp-me{position:relative;width:32%}.sp-buddy{width:20%}#p-piko{width:16%}
.sp-me svg{filter:drop-shadow(0 3px 0 rgba(0,0,0,.2))}
.sp-me.morph{animation:morph .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes morph{0%{transform:scale(.4) rotate(-200deg);filter:brightness(3)}60%{transform:scale(1.2)}100%{transform:none}}
.r-morph{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:4px 10px 4px 4px;border-radius:999px;background:#fff1c4;border:2px solid var(--ink);font-size:14px;font-weight:800;width:max-content;max-width:100%;animation:chip .45s cubic-bezier(.3,1.7,.5,1) both}
.r-morph b{color:#e0503a}
.m-ic{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--ink);overflow:hidden}
.mood{padding:1px 10px;border-radius:99px;background:#e9f9ef;border:2px solid var(--ink);font-size:12px;font-weight:900;white-space:nowrap;transition:background .3s}
.mood[data-m=danger]{background:#ff6b6b;color:#fff;animation:pinch .8s ease-in-out infinite}
.mood[data-m=tired]{background:#ffe1c4}.mood[data-m=warm]{background:#ffe2ee}.mood[data-m=rich]{background:#fff1c4}
.bump{animation:bump .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{40%{transform:scale(1.3)}}
.hearts i.lost{animation:lost .6s ease both}
@keyframes lost{0%{background:#ff6b6b;transform:rotate(45deg) scale(1.3)}100%{transform:rotate(45deg) scale(.8)}}
.fly{position:fixed;z-index:50;display:inline-flex;align-items:center;gap:3px;padding:3px 10px 3px 5px;border-radius:999px;border:2.5px solid var(--ink);font-size:15px;font-weight:900;pointer-events:none;box-shadow:0 3px 0 rgba(0,0,0,.3);white-space:nowrap}
.fly .ic{width:20px;height:20px}
html[data-pinch="1"] .scene-bg:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 4px #ff6b6b,inset 0 0 40px rgba(255,80,80,.35);pointer-events:none;animation:pinch 1s ease-in-out infinite}
@keyframes pinch{50%{opacity:.4}}
.scene-body{padding:12px 14px 14px}
.lead{margin:0 0 4px;padding:4px 10px;border-radius:10px;background:#fff1c4;font-size:13.5px;font-weight:800;color:#8a5a00}
.q{margin:0 0 12px;font-size:clamp(18px,5.2vw,21px);font-weight:900;line-height:1.55;outline:0}
.choices{display:grid;gap:9px}
.choice{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:10px 12px;border:3px solid var(--ink);border-radius:16px;background:#fff;text-align:left;font-size:16px;font-weight:800;line-height:1.45;box-shadow:0 4px 0 var(--ink);transition:transform .1s,box-shadow .1s,background .15s,opacity .2s;animation:cIn .3s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d)}
@keyframes cIn{from{transform:translateX(-40px) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.choice.from-r{animation-name:cInR}
@keyframes cInR{from{transform:translateX(40px) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
.choice:hover:not(:disabled){background:#fff7dd;box-shadow:0 4px 0 var(--ink),0 0 0 4px rgba(255,201,60,.45)}
.choice:hover{background:#fff7dd}
.choice:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.ch-key{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:900}
.ch-t{flex:1;min-width:0}
.choice.picked{background:#ffe680;transform:scale(1.03);box-shadow:0 0 0 5px rgba(255,201,60,.7),0 4px 0 var(--ink);animation:boing .4s cubic-bezier(.3,1.8,.5,1)}
.choice.picked .ch-key{background:#e0503a}
.choice.dim{opacity:.3;transform:translateY(6px) scale(.95);transition:opacity .25s,transform .3s}
@keyframes boing{0%{transform:scale(1)}40%{transform:scale(1.07) rotate(-1deg)}100%{transform:scale(1.03)}}
.react{padding:12px;border-radius:16px;background:#fff;border:3px dashed var(--ink)}
.r-text{margin:0 0 8px;font-size:16px;font-weight:800;line-height:1.7}
.r-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 6px;border-radius:999px;border:2px solid var(--ink);background:#f8f4ff;font-size:13px;font-weight:900;animation:chip .4s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--d)}
.chip .ic{width:18px;height:18px}
.chip.good{background:#dff7e9}.chip.bad{background:#ffe1e1}.chip.key{background:#fff1c4}
.c-act{background:#ffe9d2}.c-int{background:#dcefff}.c-luck{background:#dff7ec}.c-ally{background:#ffe2ee}
@keyframes chip{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------- reveal ---------- */
.reveal{display:flex;flex-direction:column;align-items:center;gap:14px;min-height:74vh;justify-content:center;text-align:center;cursor:pointer}
.rv-guide{width:150px}
.rv-cards{position:relative;width:200px;height:150px}
.rv-cards span{position:absolute;left:50%;top:0;width:120px;height:140px;margin-left:-60px;padding:8px;border-radius:16px;border:3px solid var(--ink);background:var(--c);box-shadow:0 5px 0 rgba(0,0,0,.3);animation:shuffle 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * .24s);opacity:0}
@keyframes shuffle{0%{opacity:0;transform:translateX(-60px) rotate(-12deg)}20%,40%{opacity:1;transform:none}60%,100%{opacity:0;transform:translateX(60px) rotate(12deg)}}

/* ---------- surprise event ---------- */
.event{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(20,12,40,.72);overflow-y:auto}
.ev-card{position:relative;width:100%;max-width:420px;padding:16px;border-radius:24px;background:var(--paper);border:4px solid var(--ink);box-shadow:0 0 0 5px var(--gold),0 10px 0 5px rgba(0,0,0,.4);text-align:center}
.event.pop .ev-card{animation:evIn .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes evIn{0%{transform:scale(.3) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.ev-tag{display:inline-block;margin:0 0 4px;padding:2px 14px;border-radius:99px;background:#e0503a;color:#fff;font-size:14px;font-weight:900;animation:pinch .7s ease-in-out 3}
.ev-art{width:46%;max-width:170px;margin:0 auto}
.ev-art svg{width:100%;height:auto}
.event.pop .ev-art{animation:aJump .6s cubic-bezier(.3,1.6,.5,1) .3s both}
.ev-title{margin:4px 0;font-size:21px;font-weight:900;line-height:1.4}
.ev-text{margin:0 0 8px;font-size:15px;font-weight:700;text-align:left}
.ev-react{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:#fff;border:2.5px dashed var(--ink);font-size:15px;font-weight:800;text-align:left}
.ev-card .r-chips{justify-content:center}
.ev-text,.ev-react,.ev-title{word-break:auto-phrase;text-wrap:pretty}
#s-reveal.flash:after{content:'';position:fixed;inset:0;z-index:30;background:#fff;animation:flash .25s ease-out both}
@keyframes flash{from{opacity:0}to{opacity:1}}
.confetti{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall 2.4s cubic-bezier(.3,.6,.5,1) both}
.confetti i.round{border-radius:50%;width:12px;height:12px}
.confetti i.st{background:none!important;width:auto;height:auto;font-style:normal}
.confetti i.st:before{content:'★';font-size:18px}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x),105vh) rotate(var(--r));opacity:.9}}

/* ---------- hero card ---------- */
.card{position:relative;padding:16px 16px 18px;border-radius:26px;background:linear-gradient(180deg,var(--cs),#fff 55%);border:4px solid var(--ink);box-shadow:0 0 0 6px var(--cc),0 10px 0 6px rgba(0,0,0,.35);text-align:center;overflow:hidden}
.card.flip{animation:flip .6s cubic-bezier(.3,1.2,.5,1) both}
@keyframes flip{from{transform:perspective(900px) rotateY(80deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
.card:before{content:'';position:absolute;left:50%;top:40px;width:420px;height:420px;margin-left:-210px;border-radius:50%;background:repeating-conic-gradient(var(--cs) 0 10deg,transparent 10deg 20deg);opacity:.9;animation:spin 40s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.card>*{position:relative}
.c-game{margin:0;font-size:12.5px;font-weight:900;letter-spacing:.06em;color:var(--ink2)}
.c-stage{position:relative;width:250px;max-width:100%;margin:4px auto 0}
.c-hero{position:relative;width:170px;margin:0 auto}
.c-hero.pose{animation:pose .9s cubic-bezier(.3,1.6,.5,1) .25s both}
@keyframes pose{0%{transform:translateY(30px) scale(.6);opacity:0}45%{transform:translateY(-18px) scale(1.1) rotate(-6deg);opacity:1}70%{transform:rotate(3deg)}100%{transform:none}}
.c-guide{position:absolute;left:-6px;bottom:0;width:78px;z-index:1;animation:float 2.6s ease-in-out infinite}
.c-sub{position:absolute;right:-56px;bottom:0;width:80px;opacity:.95}
.c-kicker{margin:2px 0 0;font-size:14px;font-weight:900;color:var(--muted)}
.c-class{margin:0;font-size:clamp(40px,12vw,56px);font-weight:900;line-height:1.15;color:var(--cc);text-shadow:0 4px 0 #fff,0 6px 0 rgba(0,0,0,.12)}
.c-mixed{margin:4px 0 0;font-size:13px;font-weight:800;color:var(--ink2)}
.c-catch{margin:4px 0 8px;font-size:14.5px;font-weight:800}
.c-title{display:inline-flex;flex-direction:column;align-items:center;margin:0 0 12px;padding:6px 16px;border-radius:14px;background:var(--ink);color:#fff}
.c-rare{font-size:13px;letter-spacing:.1em;color:var(--gold)}
.c-title b{font-size:15.5px}
.c-stats{display:grid;gap:6px;margin:0 0 12px;text-align:left}
.c-stats div{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px}
.c-stats dt{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:900}
.c-stats dt .ic{width:20px;height:20px}
.c-stats dd{display:flex;align-items:center;gap:8px;margin:0}
.cs-bar{flex:1;height:14px;border-radius:99px;border:2.5px solid var(--ink);background:#fff;overflow:hidden}
.cs-bar i{display:block;height:100%;width:0;background:var(--cc);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.c-stats b{width:28px;font-size:17px;font-weight:900;text-align:right}
.c-stats .top dt{color:var(--cc)}
.c-info{display:grid;gap:8px;margin:0 0 12px;text-align:left}
.c-info div{padding:8px 12px;border-radius:14px;background:#fff;border:2.5px solid var(--ink)}
.c-info dt{font-size:12px;font-weight:900;color:var(--muted)}
.c-info dd{margin:0;font-size:15px;font-weight:800;line-height:1.55}
.ci-move{background:var(--cs)!important}
.ci-move dd{font-size:18px;color:var(--cc)}
.c-h{margin:0 0 6px;font-size:15px;font-weight:900}
.c-reasons{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;text-align:left}
.c-reasons li{padding:8px 12px;border-radius:12px;background:#fff;border:2.5px solid var(--ink);animation:rIn .4s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d)}
@keyframes rIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.c-reasons b{display:block;font-size:15px}
.c-reasons small{display:block;font-size:12px;font-weight:800;color:var(--cc)}
.c-comment{margin:0 0 6px;font-size:14.5px;font-weight:700;line-height:1.8;text-align:left}
.c-note{margin:0;font-size:11.5px;color:var(--muted);text-align:left}
.c-invite{display:block;margin:4px auto 10px;padding:8px 16px;border-radius:999px;background:var(--cc);color:#fff;font-size:16px;font-weight:900;width:max-content;max-width:100%}
.compare{padding:12px;border-radius:20px;background:#fff;border:3px solid var(--ink);text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.25);animation:bnc .6s cubic-bezier(.3,1.7,.5,1) .6s both}
.compare h3{margin:0 0 6px;font-size:17px;font-weight:900}
.vs-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.vs-row figure{margin:0;padding:6px;border-radius:16px;background:var(--c);border:2.5px solid var(--ink)}
.vs-row svg{width:80%;margin:0 auto}
.vs-row figcaption{font-size:12px;font-weight:800}
.vs-row figcaption b{display:block;font-size:17px}
.vs{font-size:22px;font-weight:900;color:#e0503a;text-shadow:0 2px 0 var(--ink)}
.vs-text{margin:8px 0 0;font-size:14.5px;font-weight:800;text-align:left}
.vs-text b{display:block;font-size:12px;color:var(--muted)}
.btn-challenge{flex-direction:column;gap:0;background:linear-gradient(180deg,#ff8fb3,#ff5c8f);color:#fff;box-shadow:0 5px 0 var(--ink);min-height:64px;line-height:1.3;padding:6px 14px}
.btn-challenge small{font-size:11.5px;font-weight:800;opacity:.95}
.cbox{display:grid;gap:8px;padding:10px;border-radius:16px;background:#fff;border:2.5px solid var(--ink)}
.cbox pre{margin:0;white-space:pre-wrap;word-break:break-all;font-family:var(--sans);font-size:13px;font-weight:700}
.cbox .help{color:var(--muted);margin:0}

.actions{display:grid;gap:10px;margin-top:20px}
.help{margin:-4px 0 0;font-size:12px;color:#f2ecff;text-align:center}
.preview{border-radius:12px;background:#fff;border:2.5px solid var(--ink)}
.preview summary{min-height:44px;padding:10px 14px;font-size:13.5px;font-weight:900;cursor:pointer}
.preview pre{margin:0;padding:0 14px 12px;white-space:pre-wrap;word-break:break-all;font-family:var(--sans);font-size:13px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{margin:0;min-height:1.6em;font-size:13.5px;font-weight:800;color:var(--gold);text-align:center;word-break:break-all}
.saved{text-align:center}
.saved img{width:100%;max-width:320px;border-radius:16px;border:3px solid var(--ink)}
.foot{position:relative;z-index:1;margin:0 auto;padding:8px 16px calc(18px + env(safe-area-inset-bottom));max-width:560px;text-align:center;font-size:11.5px;color:#cfc4ec}

/* Japanese line breaks */
.q,.r-text,.bubble,.ch-t,.c-comment,.c-info dd,.c-catch,.c-reasons b{word-break:auto-phrase;text-wrap:pretty}

@media (max-width:360px){
  .app{padding-left:10px;padding-right:10px}
  .choice{font-size:15px;min-height:56px}
  .h-stats{gap:4px}.hs{padding:3px 4px}.hs-n{font-size:10px}.hs b{font-size:15px}
  .row{grid-template-columns:1fr}
  .c-stats div{grid-template-columns:86px 1fr}
  .ts-heroes{height:100px}
  .c-sub{right:-44px;width:66px}
}
/* PC: the scene and the status sit side by side, the card is roomy */
@media (min-width:900px){
  .app{max-width:1000px;padding-top:28px}
  #s-title,#s-intro{max-width:560px;margin:0 auto}
  #s-play.is-active{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-areas:"top top" "map map" "hud scene";column-gap:24px;align-items:start}
  .topbar{grid-area:top}.map{grid-area:map}.hud{grid-area:hud;position:sticky;top:20px}.scene{grid-area:scene;margin-top:0}
  .h-stats{grid-template-columns:1fr 1fr}
  .hs b{font-size:22px}
  .q{font-size:23px}
  #s-result.is-active{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:28px;align-items:start}
  .actions{position:sticky;top:20px;margin-top:0}
  .actions .row{grid-template-columns:1fr}
  .scene-bg{max-height:300px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .rv-cards span{opacity:1}
  .rv-cards span:not(:last-child){display:none}
  .th{animation:none}
  .confetti,.fly{display:none}
}

/* ---------- portal into the world (tap to skip) ---------- */
.portal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(20,12,40,.0);cursor:pointer;overflow:hidden}
.portal.go{animation:pBg .75s ease both}
.portal i{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:6px solid var(--gold);box-shadow:0 0 30px var(--gold)}
.portal.go i{animation:ring .75s cubic-bezier(.4,0,.2,1) both}
.portal.go i:nth-child(2){border-color:var(--pink);animation-delay:.08s}
.portal.go i:nth-child(3){border-color:var(--sky);animation-delay:.16s}
.portal-guide{position:relative;width:120px}
.portal.go .portal-guide{animation:pGuide .75s cubic-bezier(.4,0,.2,1) both}
@keyframes pBg{0%{background:rgba(20,12,40,0)}40%{background:rgba(20,12,40,.85)}100%{background:rgba(255,255,255,.9)}}
@keyframes ring{from{transform:scale(.2);opacity:1}to{transform:scale(18);opacity:0}}
@keyframes pGuide{0%{transform:scale(.4) rotate(-20deg);opacity:0}40%{transform:scale(1.2);opacity:1}100%{transform:scale(3) translateY(-30px);opacity:0}}