/* Roll Quests — fantasy cartoon UI (bold outlines, parchment/wood panels, gold trim) */
@font-face{font-family:'Cinzel Decorative';font-weight:700;font-display:swap;src:url(../assets/fonts/CinzelDecorative-700.woff2) format('woff2');}
@font-face{font-family:'Cinzel Decorative';font-weight:900;font-display:swap;src:url(../assets/fonts/CinzelDecorative-900.woff2) format('woff2');}
@font-face{font-family:'Cinzel';font-weight:700;font-display:swap;src:url(../assets/fonts/Cinzel-700.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-weight:400 900;font-display:swap;src:url(../assets/fonts/Nunito-700.woff2) format('woff2');}
:root{
  --navy:#14143a; --navy2:#1c1b4d; --yellow:#ffd23f; --pink:#ff3e7f; --cyan:#3ee6ff; --green:#5cff8f; --blue:#1d6fd8; --ink:#f4f4ff;
  --outline:#160f1f; --parch:#f6e7c1; --parch2:#e8d29f; --wood:#6b3f1d; --wood2:#8a5528; --gold:#f2c14e; --gold2:#b8862a;
  --display:'Cinzel Decorative','Cinzel',Georgia,serif; --head:'Cinzel',Georgia,serif; --body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#07071a;color:var(--ink);font-family:var(--body);overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
button{font-family:inherit;color:inherit}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1c1b4d 0%,#07071a 75%)}
#stage{position:relative;overflow:hidden;background:#000;box-shadow:0 0 0 2px #000,0 10px 60px rgba(0,0,0,.6);user-select:none;-webkit-user-select:none}
.screen{position:absolute;inset:0;overflow:hidden}
.fade{position:absolute;inset:0;background:#07071a;pointer-events:none;opacity:0;transition:opacity .28s ease;z-index:900}
.fade.on{opacity:1;pointer-events:all}
.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hidden{display:none!important}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:.19rem solid var(--outline);border-radius:.8rem;padding:.55em 1.1em;
  font-family:var(--head);font-weight:700;font-size:1.05rem;letter-spacing:.02em;cursor:pointer;color:#2a1600;
  background:linear-gradient(#ffe68a,#ffd23f 45%,#e0a92a);box-shadow:inset 0 .15rem 0 rgba(255,255,255,.6),inset 0 -.25rem 0 rgba(0,0,0,.18),0 .3rem 0 var(--outline);
  transition:transform .08s ease,filter .12s ease,box-shadow .08s ease;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn:hover{filter:brightness(1.08) saturate(1.1);transform:translateY(-.08rem)}
.btn:active{transform:translateY(.22rem);box-shadow:inset 0 .15rem 0 rgba(255,255,255,.5),0 .08rem 0 var(--outline)}
.btn:focus-visible{outline:.2rem solid var(--cyan);outline-offset:.15rem}
.btn.navy{background:linear-gradient(#34337a,#1c1b4d 55%,#121133);color:var(--ink);text-shadow:0 1px 0 #000}
.btn.pink{background:linear-gradient(#ff8db2,#ff3e7f 55%,#c71f5a);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.btn.green{background:linear-gradient(#b6ffcf,#5cff8f 50%,#2fbf62);color:#062a12}
.btn.small{font-size:.85rem;padding:.35em .8em;border-radius:.6rem}
.btn[disabled],.btn.disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed;transform:none}
.iconbtn{width:2.6rem;height:2.6rem;padding:0;border-radius:50%;font-size:1.15rem}

/* ---------- panels ---------- */
.parch{background:radial-gradient(ellipse at 30% 20%,#fff6dc 0%,var(--parch) 45%,var(--parch2) 100%);color:#2b1a0b;border:.22rem solid var(--outline);border-radius:1rem;
  box-shadow:inset 0 0 0 .3rem #c99a45,inset 0 0 0 .45rem var(--outline),inset 0 0 2.2rem rgba(140,90,30,.35),0 .4rem 0 rgba(0,0,0,.45)}
.navyp{background:linear-gradient(#25245e,#1c1b4d 40%,#14143a);color:var(--ink);border:.22rem solid var(--outline);border-radius:1rem;
  box-shadow:inset 0 0 0 .2rem var(--gold),inset 0 0 0 .32rem var(--outline),0 .35rem 0 rgba(0,0,0,.5)}
.wood{background:linear-gradient(#a8692f,#8a5528 40%,#6b3f1d);border:.22rem solid var(--outline);border-radius:.8rem;box-shadow:inset 0 .15rem 0 rgba(255,220,160,.35),0 .3rem 0 rgba(0,0,0,.5);color:#fff3d6}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:900;letter-spacing:.01em}
.goldtext{color:var(--yellow);text-shadow:0 .12rem 0 var(--outline),0 -.06rem 0 var(--outline),.1rem 0 0 var(--outline),-.1rem 0 0 var(--outline),0 .25rem .4rem rgba(0,0,0,.5)}

/* ---------- HUD (top-left; keep top-center clear) ---------- */
.hud{position:absolute;left:.7rem;top:.7rem;z-index:50;display:flex;gap:.6rem;align-items:center;padding:.45rem .8rem .45rem .5rem;min-width:15rem;max-width:22rem}
.hud .avatar{width:3.1rem;height:3.1rem;border-radius:50%;border:.18rem solid var(--outline);background:#2f2c6e center/cover;overflow:hidden;flex:none;box-shadow:0 0 0 .14rem var(--gold)}
.hud .avatar img{width:160%;margin:-8% 0 0 -35%}
.hud .meta{flex:1;min-width:0}
.hud .nm{font-family:var(--head);font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .ttl{font-size:.7rem;color:var(--cyan);margin-top:-.1rem}
.hud .row{display:flex;align-items:center;gap:.45rem;font-size:.78rem;margin-top:.2rem}
.belt{display:inline-flex;align-items:center;height:.8rem;width:4.2rem;border:.12rem solid var(--outline);border-radius:.15rem;background:var(--ink);position:relative;flex:none}
.belt.blue{background:var(--blue)}
.belt .bar{position:absolute;right:.35rem;top:0;bottom:0;width:1.7rem;background:#000;display:flex;gap:.12rem;align-items:stretch;justify-content:flex-start;padding:0 .12rem}
.belt .bar i{width:.18rem;background:#fff;display:block}
.xpbar{flex:1;height:.55rem;border:.12rem solid var(--outline);border-radius:.4rem;background:#0b0b26;overflow:hidden}
.xpbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#9bf5ff)}
.coins{display:inline-flex;align-items:center;gap:.25rem;font-weight:800;color:var(--yellow)}
.coin{display:inline-block;width:.95em;height:.95em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3a8,#ffd23f 50%,#c9921a);border:.1rem solid var(--outline);vertical-align:-.12em}
.topright{position:absolute;right:.7rem;top:.7rem;z-index:60;display:flex;gap:.45rem}

/* ---------- title ---------- */
.title .hot{position:absolute;border-radius:.9rem;cursor:pointer;transition:box-shadow .15s ease,transform .1s ease,background .15s;background:rgba(255,255,255,0);border:0}
.title .hot:hover,.title .hot:focus-visible{box-shadow:0 0 0 .2rem rgba(255,240,170,.9),0 0 1.8rem .5rem rgba(255,210,63,.65);background:rgba(255,255,255,.08);outline:none}
.title .hot:active{transform:scale(.97);background:rgba(0,0,0,.12)}
.title .hot.off{cursor:not-allowed;background:rgba(10,10,30,.55)}
.title .hot.off:hover{box-shadow:none}
.title .hot .nosave{position:absolute;left:0;right:0;bottom:-1.4rem;text-align:center;font-size:.75rem;color:#fff;text-shadow:0 1px 2px #000}
.title .ver{position:absolute;left:.6rem;bottom:.4rem;font-size:.65rem;opacity:.7;text-shadow:0 1px 2px #000}
.title .alpha{position:absolute;right:.8rem;bottom:.7rem;font-family:var(--head);font-size:.8rem;padding:.25rem .6rem;border-radius:.5rem;background:var(--pink);border:.15rem solid var(--outline);color:#fff;transform:rotate(-3deg)}
.title .pbtns{display:none}
.title .blur{display:none}

/* ---------- hub ---------- */
.artbox{position:absolute;inset:0}
.artbox>img.bgimg{object-fit:cover}
.hot2{position:absolute;cursor:pointer;border-radius:1rem;background:transparent;border:0;padding:0;transition:background .15s, box-shadow .15s}
.hot2:hover,.hot2:focus-visible{background:rgba(255,230,140,.13);box-shadow:0 0 0 .18rem rgba(255,226,120,.85),0 0 1.4rem rgba(255,210,63,.5);outline:none}
.sign{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--head);font-weight:700;font-size:.9rem;padding:.22rem .7rem;pointer-events:none;animation:signbob 3s ease-in-out infinite}
.sign.top{top:-.6rem}.sign.mid{top:40%}.sign.bot{bottom:.2rem}
@keyframes signbob{50%{transform:translateX(-50%) translateY(-.2rem)}}
.sign .dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--pink);margin-left:.35rem;border:.1rem solid var(--outline);vertical-align:.05rem;animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.35)}}
.hub .coachnpc{position:absolute;left:57.5%;top:40%;height:33%;pointer-events:none;filter:drop-shadow(0 .4rem .3rem rgba(0,0,0,.45))}
.dock{position:absolute;left:50%;transform:translateX(-50%);bottom:.7rem;display:flex;gap:.45rem;z-index:40;padding:.45rem}
.dock .btn{font-size:.85rem;padding:.45em .75em;flex-direction:column;gap:.1rem;min-width:5.6rem}
.dock .btn .ic{font-size:1.25rem;line-height:1}
.nextq{position:absolute;right:.8rem;bottom:5.6rem;z-index:41;max-width:19rem;padding:.6rem .8rem;cursor:pointer}
.nextq small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#7a4a12;font-weight:800}
.nextq b{font-family:var(--head);font-size:1rem}
.hub .hubbg{display:none}

/* ---------- panel screens ---------- */
.pscreen{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(5,5,20,.55);backdrop-filter:blur(2px)}
.pwin{position:relative;width:min(92%,62rem);height:86%;display:flex;flex-direction:column;padding:1.1rem 1.3rem 1rem}
.pwin .phead{display:flex;align-items:center;gap:.8rem;margin:-.1rem 0 .7rem;padding-right:3rem}
.pwin .phead h2{font-size:1.65rem;color:#3b1f05}
.pwin .phead .sub{font-size:.85rem;color:#6b4a22;font-weight:700}
.pwin .close{position:absolute;right:.8rem;top:.8rem}
.pbody{flex:1;overflow:auto;padding:.2rem .3rem .4rem;-webkit-overflow-scrolling:touch}
.pbody::-webkit-scrollbar{width:.6rem}.pbody::-webkit-scrollbar-thumb{background:#b88a40;border-radius:.4rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.8rem}
.card{position:relative;background:linear-gradient(#fffaf0,#f3e2b8);border:.18rem solid var(--outline);border-radius:.8rem;padding:.7rem .8rem;color:#2b1a0b;box-shadow:0 .25rem 0 rgba(0,0,0,.25)}
.card h3{font-family:var(--head);font-size:1.05rem}
.card p{margin:.3rem 0;font-size:.88rem;line-height:1.35}
.card.locked{filter:grayscale(.9);opacity:.6}
.card.done{background:linear-gradient(#f0ffe9,#cfeec0)}
.pin{position:absolute;top:-.55rem;left:50%;width:1rem;height:1rem;margin-left:-.5rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff9aba,#ff3e7f 60%,#a3123f);border:.12rem solid var(--outline)}
.quest{cursor:pointer;transition:transform .12s}
.quest:hover{transform:translateY(-.15rem) rotate(-.4deg)}
.quest .meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:800;padding:.12rem .45rem;border-radius:.4rem;border:.12rem solid var(--outline);background:#fff;color:#2b1a0b}
.tag.boss{background:var(--pink);color:#fff}
.tag.stripe{background:#111;color:#fff}
.tag.done{background:var(--green)}
.tag.warn{background:#ffe7a0}
.cork{background:radial-gradient(circle at 20% 30%,#c89a62,#a87943 60%,#8b5e30);border-radius:.6rem;border:.2rem solid var(--outline);padding:1.1rem .9rem;box-shadow:inset 0 0 1.5rem rgba(0,0,0,.35)}
.tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem}
.tab{font-size:.8rem;font-weight:800;padding:.3rem .65rem;border-radius:.5rem;border:.14rem solid var(--outline);background:#fff4d6;color:#3b2408;cursor:pointer}
.tab.on{background:var(--navy2);color:var(--yellow)}
.catchip{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:900;padding:.08rem .45rem;border-radius:1rem;border:.12rem solid var(--outline);color:#111}
.mbadge{display:inline-block;font-size:.68rem;font-weight:900;padding:.08rem .45rem;border-radius:.4rem;border:.12rem solid var(--outline)}
.mbadge.Bronze{background:linear-gradient(#f0b27a,#b8732f);color:#2a1100}
.mbadge.Silver{background:linear-gradient(#ffffff,#b9c2d0);color:#1a1d24}
.mbadge.Gold{background:linear-gradient(#fff3a0,#f2c14e 60%,#c48a1c);color:#3a2500}
.mbar{height:.6rem;border-radius:.4rem;border:.12rem solid var(--outline);background:#3a2a14;overflow:hidden;margin:.35rem 0 .15rem}
.mbar>i{display:block;height:100%;background:linear-gradient(90deg,#ffd23f,#fff09a)}
.tip{font-size:.8rem;border-left:.25rem solid var(--cyan);padding:.15rem .5rem;margin:.3rem 0;background:rgba(62,230,255,.08)}
.tip.lock{border-color:#999;color:#7b6a55;font-style:italic}
.cols{display:flex;gap:1rem;height:100%}

/* ---------- speech / coach ---------- */
.speech{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);width:min(94%,52rem);display:flex;gap:1rem;align-items:flex-end;z-index:600;pointer-events:auto}
.speech .portrait{flex:none;width:9rem;height:10rem;position:relative}
.speech .portrait img{position:absolute;bottom:-1.2rem;left:-1rem;height:15rem;filter:drop-shadow(0 .3rem .3rem rgba(0,0,0,.5))}
.speech .bubble{flex:1;padding:.9rem 1.1rem 2.6rem;min-height:7.5rem;position:relative}
.speech .who{font-family:var(--head);font-weight:700;color:#7a3d0c;font-size:.95rem;margin-bottom:.2rem}
.speech .txt{font-size:1.08rem;line-height:1.4;font-weight:700}
.speech .next{position:absolute;right:.8rem;bottom:.6rem}
.dim{position:absolute;inset:0;background:rgba(5,5,20,.62);z-index:500}
.spot{position:relative;z-index:550!important;box-shadow:0 0 0 .3rem var(--cyan),0 0 2rem .6rem rgba(62,230,255,.55)!important;border-radius:.8rem}

/* ---------- battle ---------- */
.battle .arena{position:absolute;inset:0}
.battle .arena img.bgimg{transition:filter .3s}
.battle .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.5) 100%);pointer-events:none}
.battle.flurry .vignette{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(160,0,60,.45) 100%)}
.battle.noanim .fighter{transition:none!important}
/* fighters: outer = position/pose (slides), .fx = hit animations, img = idle */
.fighter{position:absolute;bottom:45%;height:41%;pointer-events:none;transform-origin:50% 100%;transition:left .55s cubic-bezier(.3,1.3,.5,1),right .55s cubic-bezier(.3,1.3,.5,1),transform .55s cubic-bezier(.3,1.2,.5,1),bottom .55s;z-index:5}
.fighter .fx{height:100%;position:relative;transform-origin:50% 100%}
.fighter img{height:100%;display:block;filter:drop-shadow(0 .5rem .35rem rgba(0,0,0,.45));animation:idle 1.6s ease-in-out infinite;transform-origin:50% 100%}
.fighter.hero{left:21%}
.fighter.opp{right:19%}
.fighter.opp.boss{height:48%}
.fighter.opp.boss.imp{height:38%}
@keyframes idle{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1.5%) scaleY(.985)}}
.fighter .shadow{position:absolute;left:10%;right:10%;bottom:-3%;height:7%;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(4px);z-index:-1}
/* poses (from YOUR point of view) */
.battle[data-pose="guard-t"] .fighter.hero{left:30%;transform:rotate(9deg)}
.battle[data-pose="guard-t"] .fighter.opp{right:31%;transform:translateY(2%) rotate(70deg)}
.battle[data-pose="guard-b"] .fighter.hero{left:31%;transform:translateY(2%) rotate(-70deg)}
.battle[data-pose="guard-b"] .fighter.opp{right:33%;transform:rotate(-9deg)}
.battle[data-pose="top"] .fighter.hero{left:44%;transform:translateY(4%) rotate(24deg);z-index:6}
.battle[data-pose="top"] .fighter.opp{right:34%;transform:translateY(5%) rotate(80deg)}
.battle[data-pose="bottom"] .fighter.hero{left:33%;transform:translateY(5%) rotate(-80deg)}
.battle[data-pose="bottom"] .fighter.opp{right:40%;transform:translateY(4%) rotate(-24deg);z-index:6}
.battle[data-pose="back-t"] .fighter.hero{left:41%;transform:rotate(12deg);z-index:4}
.battle[data-pose="back-t"] .fighter.opp{right:39%;transform:translateY(6%) rotate(-6deg) scale(.95);z-index:6}
.battle[data-pose="back-b"] .fighter.hero{left:39%;transform:translateY(6%) rotate(6deg) scale(.95);z-index:6}
.battle[data-pose="back-b"] .fighter.opp{right:41%;transform:rotate(-12deg);z-index:4}
/* hit animations */
.fx.lunge-r{animation:lungeR .45s ease}
.fx.lunge-l{animation:lungeL .45s ease}
@keyframes lungeR{35%{transform:translateX(30%) rotate(5deg)}}
@keyframes lungeL{35%{transform:translateX(-30%) rotate(-5deg)}}
.fx.shake{animation:shake .45s ease}
@keyframes shake{20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-3%)}80%{transform:translateX(3%)}}
.fx.hurt{animation:hurt .45s ease}
@keyframes hurt{25%{transform:translateX(0) scale(1.06,.92) rotate(-3deg)}60%{transform:scale(.97,1.03)}}
.fx.windup{animation:windup .6s ease}
@keyframes windup{40%{transform:translateX(8%) rotate(4deg) scale(1.03)}}
.fx.breath{animation:breath .9s ease}
@keyframes breath{50%{transform:scale(1.04,1.07)}}
.fx.flash img{filter:drop-shadow(0 0 .6rem #fff) brightness(2.2) saturate(.2)}
.battle.hitstop img,.battle.hitstop .fx{animation-play-state:paused!important}
.fighter.tap .fx{animation:tapdown .9s ease forwards}
@keyframes tapdown{100%{transform:translateY(6%) rotate(-6deg) scale(.95);opacity:.8}}
.fighter img.imp-bounce{animation:impjit .5s steps(2) infinite}
@keyframes impjit{0%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(2%,-2%) rotate(3deg)}}
.tellmark{position:absolute;left:50%;top:-14%;transform:translateX(-50%) scale(0);font-family:var(--display);font-weight:900;font-size:2.6rem;color:var(--pink);-webkit-text-stroke:.14rem var(--outline);transition:transform .2s;z-index:3}
.fighter.telling .tellmark{transform:translateX(-50%) scale(1);animation:tellpulse .5s ease-in-out infinite alternate}
.fighter.telling img{filter:drop-shadow(0 0 .9rem rgba(255,62,127,.9)) drop-shadow(0 .5rem .35rem rgba(0,0,0,.45))}
@keyframes tellpulse{to{transform:translateX(-50%) scale(1.25)}}
.battle[data-pose="guard-t"] .tellmark,.battle[data-pose="top"] .tellmark{transform:translateX(-50%) rotate(-75deg) scale(0)}
.battle[data-pose="guard-t"] .fighter.telling .tellmark,.battle[data-pose="top"] .fighter.telling .tellmark{transform:translateX(-50%) rotate(-75deg) scale(1);animation:none}
/* screen juice */
.battle.shake-sm{animation:scrShake .3s linear}
.battle.shake-big{animation:scrShakeB .4s linear}
@keyframes scrShake{25%{transform:translate(.25rem,-.15rem)}50%{transform:translate(-.25rem,.15rem)}75%{transform:translate(.15rem,.1rem)}}
@keyframes scrShakeB{15%{transform:translate(.6rem,-.35rem)}35%{transform:translate(-.55rem,.3rem)}55%{transform:translate(.35rem,.25rem)}75%{transform:translate(-.25rem,-.15rem)}}
.impact{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:28}
.impact.white{background:radial-gradient(circle at 62% 45%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%)}
.impact.pink{background:radial-gradient(circle at 35% 45%,rgba(255,62,127,.6),rgba(255,62,127,0) 60%)}
.impact.go{animation:impactfx .28s ease-out}
@keyframes impactfx{0%{opacity:1}100%{opacity:0}}
.dmgnum{position:absolute;font-family:var(--display);font-weight:900;font-size:2.4rem;z-index:30;pointer-events:none;animation:dmgup 1s ease-out forwards}
.dmgnum.y{color:var(--yellow);-webkit-text-stroke:.12rem var(--outline)}
.dmgnum.p{color:var(--pink);-webkit-text-stroke:.12rem var(--outline)}
.dmgnum.g{color:var(--green);-webkit-text-stroke:.12rem var(--outline)}
@keyframes dmgup{0%{transform:translateY(0) scale(.6);opacity:0}15%{transform:translateY(-.5rem) scale(1.25);opacity:1}100%{transform:translateY(-4rem) scale(1);opacity:0}}
.ftag{position:absolute;left:50%;top:30%;transform:translateX(-50%);z-index:31;pointer-events:none;font-family:var(--head);font-weight:700;font-size:1.25rem;color:#fff;-webkit-text-stroke:.06rem var(--outline);text-shadow:0 .15rem 0 var(--outline);white-space:nowrap;animation:ftag 1.5s ease-out forwards}
.ftag.good{color:var(--green)}
.ftag.bad{color:#ff8db2}
@keyframes ftag{0%{opacity:0;transform:translate(-50%,.8rem) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-1.6rem)}}
/* panels */
.bpanel{position:absolute;top:.7rem;z-index:20;padding:.5rem .8rem;width:min(30%,21rem)}
.bpanel.me{left:.7rem}
.bpanel.them{right:.7rem;text-align:right}
.bpanel .nm{font-family:var(--head);font-weight:700;font-size:1rem}
.bpanel .style{font-size:.72rem;font-weight:800;color:var(--cyan);text-transform:uppercase;letter-spacing:.06em}
.bar{position:relative;height:1rem;border:.16rem solid var(--outline);border-radius:.5rem;background:#0b0b26;overflow:hidden;margin-top:.3rem}
.bar>i{position:absolute;left:0;top:0;bottom:0;transition:width .45s ease}
.bar.heart>i{background:linear-gradient(#ff8db2,#ff3e7f)}
.bar.energy>i{background:linear-gradient(#b6ffcf,#5cff8f)}
.bar.oheart>i{background:linear-gradient(#ffe68a,#ffb21a)}
.them .bar>i{left:auto;right:0}
.bar span{position:absolute;inset:0;font-size:.68rem;font-weight:900;line-height:.75rem;text-align:center;color:#fff;text-shadow:0 1px 1px #000}
.bar.energy.gassed{animation:gasflash .6s infinite}
@keyframes gasflash{50%{box-shadow:0 0 .8rem var(--pink)}}
.lbl{display:flex;justify-content:space-between;font-size:.66rem;font-weight:800;margin-top:.2rem;opacity:.9}
.lbl .gasl{color:var(--pink)}
.chips{display:flex;gap:.3rem;margin-top:.3rem;flex-wrap:wrap}
.them .chips{justify-content:flex-end}
.chip{font-size:.66rem;font-weight:900;padding:.08rem .4rem;border-radius:.4rem;border:.12rem solid var(--outline);background:#2f2c6e}
.chip.grit{background:#7a3d0c;color:#ffe2a8}
.chip.gas{background:var(--pink)}
.chip.oss{background:var(--yellow);color:#2a1600}
.shield{position:absolute;left:50%;top:50%;width:115%;height:95%;transform:translate(-50%,-50%);border-radius:50%;border:.25rem solid rgba(140,230,255,.85);background:radial-gradient(circle at 40% 30%,rgba(200,250,255,.35),rgba(62,230,255,.1) 60%,rgba(62,230,255,.25));box-shadow:0 0 2rem rgba(62,230,255,.6);z-index:2;transition:opacity .4s}
.shield svg{position:absolute;inset:0;width:100%;height:100%}
.shield .ck{opacity:0;transition:opacity .3s}
.shield.c1 .ck1,.shield.c2 .ck1,.shield.c2 .ck2{opacity:1}
.shield.broken{opacity:0}
.pips{display:inline-flex;gap:.2rem;vertical-align:middle}
.pips i{width:.65rem;height:.65rem;border-radius:50%;border:.12rem solid var(--outline);background:#333}
.pips i.on{background:var(--cyan)}
.bbar{position:absolute;right:.7rem;top:7.6rem;z-index:26;display:flex;flex-direction:column;gap:.4rem}
.bbar .btn{font-size:.78rem;padding:.35em .6em}
/* position track */
.ptrack{position:absolute;left:50%;transform:translateX(-50%);bottom:36.5%;width:min(58%,44rem);padding:.3rem .7rem .35rem;z-index:22}
.plabel{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:.8rem;margin-bottom:.15rem}
.plabel b{font-family:var(--head);font-size:.9rem;color:var(--yellow)}
.plabel .ph{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.plabel .ph.good{color:var(--green)}
.plabel .ph.bad{color:#ff8db2}
.tnodes{position:relative;display:grid;grid-template-columns:repeat(11,1fr);align-items:center;height:1.9rem}
.tnodes:before{content:'';position:absolute;left:4%;right:4%;top:.45rem;height:.3rem;border-radius:.2rem;background:linear-gradient(90deg,#ff3e7f,#7a5cff 45%,#c9c9ff 50%,#5cb8ff 55%,#5cff8f)}
.tn{position:relative;display:flex;flex-direction:column;align-items:center;gap:.12rem}
.tn i{width:.7rem;height:.7rem;border-radius:50%;background:#15143d;border:.14rem solid #c9c9ff;z-index:1;margin-top:.12rem}
.tn span{font-size:.55rem;font-weight:900;text-transform:uppercase;opacity:.7;letter-spacing:.02em}
.tn.under span{color:#ffb3cb}
.tn.over span{color:#b6ffcf}
.tn.cur span{opacity:1}
.tmark{position:absolute;top:-.05rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--yellow);border:.18rem solid var(--outline);box-shadow:0 0 .7rem var(--yellow);transition:left .55s cubic-bezier(.3,1.4,.5,1);z-index:2}
/* combo */
.combo{position:absolute;left:.7rem;bottom:36.5%;z-index:22;padding:.3rem .6rem;text-align:center;min-width:6.5rem;transition:box-shadow .2s}
.combo .cl{font-family:var(--head);font-size:.7rem;letter-spacing:.1em;color:var(--cyan)}
.combo .cpips{display:flex;gap:.2rem;justify-content:center;margin:.15rem 0}
.combo .cpips i{width:.8rem;height:.8rem;border-radius:.2rem;border:.12rem solid var(--outline);background:#15143d;transform:skewX(-12deg);transition:background .2s}
.combo .cpips i.on{background:linear-gradient(var(--yellow),#ff9f3f)}
.combo .cx{font-size:.75rem;font-weight:900;color:var(--yellow);min-height:.9rem}
.combo.hot{box-shadow:0 0 0 .14rem var(--yellow),0 0 1.4rem rgba(255,210,63,.6)}
/* his move */
.sitbox{position:absolute;left:50%;transform:translateX(-50%);bottom:18.5%;width:min(70%,52rem);padding:.45rem .9rem .5rem;z-index:25;min-height:4.4rem;transition:box-shadow .2s}
.sitbox.threat{box-shadow:0 0 0 .14rem rgba(255,62,127,.7),0 .4rem 1rem rgba(0,0,0,.4)}
.sitbox.mine{box-shadow:0 0 0 .14rem rgba(92,255,143,.7),0 .4rem 1rem rgba(0,0,0,.4)}
.sitbox .who{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow);font-weight:900}
.sitbox.mine .who{color:var(--green)}
.sitbox .tell{display:flex;align-items:center;gap:.4rem;font-size:1rem;color:#ff8db2;font-weight:900;margin:.1rem 0}
.sitbox .tell.hidden{display:none}
.sitbox .tell .eye{width:1.2rem;height:1.2rem;flex:none}
.sitbox .tell .eye svg{width:100%;height:100%}
.sitbox .txt{font-size:1rem;font-weight:700;line-height:1.3;min-height:1.3rem}
.sitbox .txt.pending:after{content:'...';opacity:.6;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.timer{height:.5rem;border-radius:.3rem;background:#0b0b26;border:.12rem solid var(--outline);margin-top:.35rem;overflow:hidden}
.timer i{display:block;height:100%;background:linear-gradient(90deg,#ffb21a,var(--yellow));width:100%}
.timer.urgent i{background:linear-gradient(90deg,var(--pink),#ff8db2)}
.timer.urgent{animation:gasflash .4s infinite}
/* hand of moves */
.hand{position:absolute;left:50%;transform:translateX(-50%);bottom:1.2%;width:96%;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem var(--gx);z-index:25}
.hand{--gx:.45rem}
.hand .mv{width:calc(100% / var(--cols, 5) - var(--gx))}
.hand.dealt .mv{animation:deal .35s ease backwards}
.hand.dealt .mv:nth-child(2){animation-delay:.03s}.hand.dealt .mv:nth-child(3){animation-delay:.06s}.hand.dealt .mv:nth-child(4){animation-delay:.09s}.hand.dealt .mv:nth-child(5){animation-delay:.12s}.hand.dealt .mv:nth-child(n+6){animation-delay:.15s}
@keyframes deal{from{transform:translateY(1.2rem);opacity:0}}
.mv{position:relative;display:flex;align-items:center;gap:.45rem;text-align:left;border:.18rem solid var(--outline);border-radius:.7rem;padding:.35rem .5rem .35rem .4rem;min-height:3.3rem;cursor:pointer;
  background:linear-gradient(#2c2b6a,#1c1b4d 60%,#15143d);color:var(--ink);font-weight:800;font-size:.88rem;line-height:1.1;box-shadow:inset 0 .12rem 0 rgba(255,255,255,.15),0 .25rem 0 var(--outline);transition:transform .08s,filter .12s,box-shadow .08s}
.mv:hover{filter:brightness(1.25);transform:translateY(-.12rem)}
.mv:active{transform:translateY(.2rem);box-shadow:0 .06rem 0 var(--outline)}
.mv .k{position:absolute;left:-.3rem;top:-.35rem;width:1.05rem;height:1.05rem;border-radius:.3rem;background:var(--yellow);color:#2a1600;border:.1rem solid var(--outline);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:900}
.mv .ic{flex:none;width:2rem;height:2rem;border-radius:50%;border:.14rem solid var(--outline);background:var(--cc);color:#15143d;display:flex;align-items:center;justify-content:center}
.mv .ic svg{width:70%;height:70%}
.mv .nm{flex:1;min-width:0}
.mv .nm small{display:block;font-size:.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:var(--cc);opacity:.9;margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv .cost{flex:none;min-width:1.25rem;height:1.25rem;border-radius:50%;background:#5cff8f;color:#062a12;border:.1rem solid var(--outline);font-size:.68rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.mv .lv{position:absolute;right:-.2rem;top:-.55rem;transform:scale(.8)}
.mv .chainy{position:absolute;right:.3rem;bottom:-.45rem;font-size:.5rem;font-weight:900;background:var(--yellow);color:#2a1600;border:.08rem solid var(--outline);border-radius:.3rem;padding:0 .25rem;letter-spacing:.05em}
.mv.glow{animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 .2rem var(--cyan),0 0 1.6rem .3rem rgba(62,230,255,.7),0 .25rem 0 var(--outline)}}
.mv.crossed{opacity:.4;pointer-events:none}
.mv.crossed:after{content:'';position:absolute;left:4%;right:4%;top:50%;height:.22rem;background:var(--cyan);transform:rotate(-4deg);border-radius:.2rem;box-shadow:0 0 .5rem var(--cyan)}
.mv.right{background:linear-gradient(#5cff8f,#2fbf62);color:#062a12}
.mv.right small{color:#062a12}
.mv.wrong{background:linear-gradient(#ff8db2,#ff3e7f);color:#fff}
.mv.should{box-shadow:0 0 0 .2rem var(--green),0 .25rem 0 var(--outline)}
.hand.locked .mv{pointer-events:none}
.hand.jitter .mv{animation:jit .18s steps(2) 4}
@keyframes jit{0%{transform:translate(-.3rem,.1rem) rotate(-1deg)}100%{transform:translate(.3rem,-.1rem) rotate(1deg)}}
.banner{position:absolute;left:0;right:0;top:34%;z-index:80;text-align:center;pointer-events:none;font-family:var(--display);font-weight:900;font-size:3.6rem;animation:bannerIn 1.3s ease forwards}
.banner.pink{color:var(--pink);-webkit-text-stroke:.15rem var(--outline);text-shadow:0 .3rem 0 var(--outline)}
.banner.yellow{color:var(--yellow);-webkit-text-stroke:.15rem var(--outline);text-shadow:0 .3rem 0 var(--outline)}
.banner.cyan{color:var(--cyan);-webkit-text-stroke:.15rem var(--outline);text-shadow:0 .3rem 0 var(--outline)}
@keyframes bannerIn{0%{transform:translateX(-60%) skewX(-10deg);opacity:0}20%{transform:translateX(0) skewX(0);opacity:1}80%{transform:translateX(0);opacity:1}100%{transform:translateX(60%);opacity:0}}
/* in-fight coaching popup */
.coachpop{position:absolute;left:50%;margin-left:-30rem;bottom:18.5%;width:60rem;z-index:40;padding:.6rem .85rem 2.6rem;animation:popin .25s ease;font-size:.9rem}
.coachpop.out{animation:popout .2s ease forwards}
@keyframes popin{from{transform:translateY(1rem) scale(.95);opacity:0}}
@keyframes popout{to{transform:translateY(1rem);opacity:0}}
.coachpop .cph{font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#7a3d0c;margin-bottom:.15rem}
.coachpop.bad .cph{color:#a3123f}
.coachpop.good .cph{color:#2a6b3a}
.coachpop .row{display:flex;gap:.5rem;align-items:flex-start;margin:.2rem 0}
.coachpop .ico{flex:none;width:1.45rem;height:1.45rem;border-radius:50%;border:.12rem solid var(--outline);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem}
.coachpop .ico.x{background:var(--pink);color:#fff}
.coachpop .ico.v{background:var(--green);color:#062a12}
.coachpop h4{margin:0;font-family:var(--head);font-size:.82rem;color:#7a3d0c}
.coachpop p{margin:.05rem 0 0;line-height:1.3;font-weight:600}
.coachpop .special{font-weight:900;color:#a3123f;margin-bottom:.15rem}
.coachpop .taunt{font-style:italic;font-weight:800;margin-bottom:.15rem}
.coachpop .xpnote{font-size:.74rem;font-weight:800;color:#2a6b3a;margin-top:.2rem}
.coachpop .go{position:absolute;right:.6rem;bottom:.5rem}
.coachpop .cpbar{position:absolute;left:.85rem;bottom:1.05rem;width:40%;height:.3rem;border-radius:.2rem;background:rgba(0,0,0,.15);overflow:hidden}
.coachpop .cpbar i{display:block;height:100%;width:100%;background:#7a3d0c;transition:width linear}
.coachpop.good{width:40rem;margin-left:-20rem}
.coachpop .rows2{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem}
/* portrait */

/* ---------- modal / toasts ---------- */
.modal{position:absolute;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(5,5,20,.6);animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.modal .mwin{width:min(92%,40rem);max-height:90%;overflow:auto;padding:1.2rem 1.4rem;text-align:center;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.modal h2{font-size:1.6rem;color:#3b1f05;margin-bottom:.4rem}
.modal p{font-size:1rem;line-height:1.4;margin:.4rem 0}
.modal .btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.9rem}
.modal input{font:inherit;font-size:1.1rem;padding:.5rem .7rem;border:.18rem solid var(--outline);border-radius:.6rem;width:80%;text-align:center;background:#fffaf0}
.toasts{position:absolute;right:.8rem;top:5rem;z-index:850;display:flex;flex-direction:column;gap:.4rem;align-items:flex-end;pointer-events:none}
.toast{padding:.5rem .8rem;font-weight:800;font-size:.9rem;animation:toastin .35s ease;max-width:20rem}
.toast.out{animation:toastout .35s ease forwards}
@keyframes toastin{from{transform:translateX(120%)}}
@keyframes toastout{to{transform:translateX(120%);opacity:0}}
.scroll{background:linear-gradient(#fff4d4,#f0d79c);border:.22rem solid var(--outline);border-radius:.4rem;position:relative;padding:1.3rem 1.4rem;color:#2b1a0b}
.scroll:before,.scroll:after{content:'';position:absolute;left:-.8rem;right:-.8rem;height:1.1rem;border-radius:.6rem;background:linear-gradient(#b07a3a,#7a4a1a);border:.18rem solid var(--outline)}
.scroll:before{top:-.7rem}.scroll:after{bottom:-.7rem}
.newmove .label{font-family:var(--head);font-size:.85rem;color:#7a3d0c;letter-spacing:.12em;text-transform:uppercase}
.newmove h2{font-size:2rem!important;margin:.2rem 0 .4rem}
.newmove .when{font-size:1.1rem;font-weight:700;line-height:1.4}

/* results */
.results .grow{text-align:left;margin:.6rem 0}
.results .growrow{display:grid;grid-template-columns:9rem 1fr 5.5rem;white-space:nowrap;gap:.5rem;align-items:center;font-size:.85rem;font-weight:800;margin:.3rem 0}
.results .growrow .mbar{margin:0}
.results .growrow .mbar>i{transition:width 1.2s ease .3s}
.results .big{font-size:2.1rem!important}
.results .gritbox{display:flex;align-items:center;gap:.6rem;justify-content:center;background:#3a1d08;color:#ffe2a8;border:.18rem solid var(--outline);border-radius:.7rem;padding:.5rem .8rem;margin:.6rem 0;font-weight:800}
.results .gritbox .stk{display:flex;gap:.2rem}
.results .gritbox .stk i{width:.8rem;height:1.2rem;border-radius:.2rem;background:#5a3a1a;border:.1rem solid #000}
.results .gritbox .stk i.on{background:linear-gradient(#ffd23f,#ff8a1f)}
.results .hint{font-style:italic;font-weight:700;color:#4b2a6b;background:rgba(155,77,255,.1);border-left:.3rem solid #9b4dff;padding:.4rem .7rem;text-align:left;margin:.5rem 0}
.rewardline{display:flex;gap:1rem;justify-content:center;font-weight:900;font-size:1.05rem;flex-wrap:wrap}

/* travel */
.travel .pan{position:absolute;inset:-2% 0 -2% 0;background-size:auto 104%;background-repeat:repeat-x;animation:pan linear forwards}
@keyframes pan{from{background-position:0 50%}to{background-position:-30% 50%}}
.travel .walker{position:absolute;left:12%;bottom:9%;height:42%;animation:walkin 1.2s ease-out}
.travel .walker img{height:100%;animation:walk .5s ease-in-out infinite;filter:drop-shadow(0 .5rem .3rem rgba(0,0,0,.4))}
@keyframes walk{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4%) rotate(1.5deg)}}
@keyframes walkin{from{transform:translateX(-120%)}}
.snow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.snow i{position:absolute;top:-5%;width:.45rem;height:.45rem;border-radius:50%;background:#fff;opacity:.85;animation:fall linear infinite}
@keyframes fall{to{transform:translate(-6rem,110vh)}}
.loccard{position:absolute;left:50%;top:22%;transform:translateX(-50%);padding:.7rem 1.6rem;text-align:center;animation:pop .4s ease}
.loccard small{display:block;font-family:var(--head);color:#7a3d0c;letter-spacing:.15em;font-size:.8rem}
.loccard h2{font-size:1.9rem;color:#3b1f05}
.travel .prog{position:absolute;left:12%;right:12%;bottom:3%;height:.6rem;border-radius:.4rem;background:rgba(0,0,0,.45);border:.14rem solid var(--outline);overflow:hidden}
.travel .prog i{display:block;height:100%;background:var(--yellow);width:0;animation:grow linear forwards}
@keyframes grow{to{width:100%}}
.travel .evt{position:absolute;left:50%;top:44%;transform:translateX(-50%);padding:.6rem 1rem;font-weight:800;text-align:center;animation:pop .3s ease;max-width:80%}
.coinpop{position:absolute;font-size:2rem;animation:coinfly 1s ease-out forwards}
@keyframes coinfly{to{transform:translateY(-5rem);opacity:0}}

/* map */
.map .region{position:absolute;border-radius:1.2rem;cursor:pointer;border:0;background:transparent;padding:0}
.map .region:hover{background:rgba(255,255,255,.08)}
.map .lockbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--head);font-size:.8rem;padding:.25rem .6rem;text-align:center;line-height:1.15}
.map .lockbadge small{display:block;font-family:var(--body);font-size:.66rem;font-weight:800;opacity:.85}
.map .region.locked{cursor:default}
.map .region.locked:after{content:'';position:absolute;inset:0;border-radius:1.2rem;background:rgba(20,20,58,.28)}
.map .region.open .lockbadge{background:linear-gradient(#ffe68a,#ffd23f);color:#2a1600;animation:pulsebig 1.6s infinite}
@keyframes pulsebig{50%{box-shadow:0 0 0 .25rem rgba(255,255,255,.7),0 0 1.6rem rgba(255,210,63,.8)}}
.map .back{position:absolute;left:.8rem;bottom:.8rem;z-index:5}

/* promotion */
.promo{background:#05051a}
.promo .bgimg{filter:brightness(.35) saturate(.8)}
.promo .row{position:absolute;left:0;right:0;bottom:4%;height:34%;align-items:flex-end;display:flex;justify-content:center;gap:2%;opacity:0;animation:fadein 1s ease 1s forwards;opacity:1}
.promo .row img{height:100%;max-width:17%;object-fit:contain;object-position:bottom;filter:brightness(.55) drop-shadow(0 .3rem .3rem #000)}
.promo .center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:90%}
.promo .bigbelt{width:min(60%,26rem);height:3.2rem;margin:1rem auto;border:.25rem solid var(--outline);border-radius:.4rem;background:var(--ink);position:relative;overflow:hidden;box-shadow:0 .4rem 0 rgba(0,0,0,.5)}
.promo .bigbelt .blk{position:absolute;right:12%;top:0;bottom:0;width:22%;background:#000}
.promo .bigbelt.tie{background:var(--blue);transition:background 1.2s ease}
.promo .wave{position:absolute;inset:0;background:linear-gradient(100deg,transparent 0%,rgba(62,230,255,.0) 30%,rgba(62,180,255,.75) 50%,rgba(29,111,216,.0) 70%,transparent 100%);transform:translateX(-120%);pointer-events:none}
.promo .wave.go{animation:wave 2.2s ease-in-out}
@keyframes wave{to{transform:translateX(120%)}}
.promo .say{font-family:var(--display);font-size:2.4rem;color:var(--yellow);text-shadow:0 .2rem 0 #000}
.promo .stats{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;font-weight:800;margin:.6rem 0 1rem}
.promo .stats b{display:block;font-size:1.6rem;color:var(--cyan)}
.fadeup{animation:fadeup .8s ease both}
@keyframes fadeup{from{transform:translateY(1rem);opacity:0}}

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


/* ---------- phones: landscape only ---------- */
#rotate{display:none;position:fixed;inset:0;z-index:5000;background:radial-gradient(ellipse at center,#24225e 0%,#07071a 80%);color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;font-family:var(--body)}
#rotate h2{font-family:var(--head);color:#ffd23f;font-size:24px;margin:0;text-shadow:0 2px 0 #000}
#rotate p{margin:0;font-size:16px;font-weight:700;max-width:280px;line-height:1.4;opacity:.9}
#rotate svg{width:120px;height:120px;animation:rotphone 2.2s ease-in-out infinite}
@keyframes rotphone{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
body.need-rotate #rotate{display:flex}
body.need-rotate #app{visibility:hidden}
.fsbtn{position:absolute;z-index:60;width:2.6rem;height:2.6rem;padding:0;display:flex;align-items:center;justify-content:center}
.fsbtn svg{width:60%;height:60%}
/* compact = phone in landscape: bigger touch targets */
.compact .mv{min-height:4rem;font-size:.98rem}
.compact .mv .ic{width:2.3rem;height:2.3rem}
.compact .mv .nm small{font-size:.66rem}
.compact .mv .k{display:none}
.compact .hand{--gx:.5rem;row-gap:.55rem;bottom:1.5%}
.battle.hand2 .sitbox,.battle.hand2 .coachpop{bottom:20%}
.compact .battle.hand2 .sitbox,.compact .battle.hand2 .coachpop{bottom:25.5%}
.compact .battle.hand2 .ptrack,.compact .battle.hand2 .combo{bottom:44%}
.compact .battle.hand2 .fighter{bottom:53%;height:33%}
.compact .battle.hand2 .bbar{bottom:28%}
.compact .sitbox{bottom:21%}
.compact .coachpop{bottom:21%}
.compact .bbar{top:auto;bottom:24%;gap:.6rem}
.compact .bbar .btn{font-size:.95rem;min-height:3.3rem;min-width:3.6rem;padding:.4em .7em}
.compact .ptrack{bottom:40%}
.compact .combo{bottom:40%}
.compact .fighter{bottom:48%;height:33%}
.compact .fighter.opp.boss{height:37%}
.compact .fighter.opp.boss.imp{height:30%}
.compact .iconbtn{min-width:3.4rem;min-height:3.4rem}
.compact .speech .next,.compact .coachpop .go,.compact .modal .btn{min-height:3.2rem}
.compact .bpanel{width:27%;padding:.35rem .6rem;top:.5rem}
.compact .bpanel .lbl{margin-top:.1rem}
.compact .bar{height:.9rem;margin-top:.2rem}
.compact .coachpop,.compact .coachpop.good{left:1rem;margin-left:0;width:calc(100% - 9.5rem)}

/* ===== v0.2: gear, items, white belt trainers ===== */
.gicon{width:2.1rem;height:2.1rem;border-radius:.45rem;display:block;flex:none}
.gicon.big{width:4.6rem;height:4.6rem;border-radius:.7rem}
.gearrow{display:flex;gap:.2rem;flex-wrap:wrap;margin-top:.3rem}
.gearrow .gicon{width:1.45rem;height:1.45rem;border-radius:.3rem}
.bpanel .gearrow{margin-top:.25rem}
.bpanel .gearrow .gicon{width:1.3rem;height:1.3rem}
.cicon{width:2.4rem;height:2.4rem;flex:none;filter:drop-shadow(0 .1rem 0 rgba(0,0,0,.35))}
.gearcard,.conscard{display:flex;gap:.7rem;align-items:flex-start}
.gearcard .gtxt,.conscard .gtxt{flex:1;min-width:0}
.gearcard .gtxt h3,.conscard .gtxt h3{margin-bottom:.15rem}
.gearcard.owned{background:linear-gradient(#f0ffe9,#cfeec0)}
.conscard .cicon{width:3.6rem;height:3.6rem;padding:.4rem;border-radius:.7rem;background:var(--navy2);border:.14rem solid var(--outline)}
.tag.side{background:var(--cyan);color:#06222a;margin-bottom:.2rem}
.habits{margin:.25rem 0 .4rem 1rem;font-size:.78rem;line-height:1.3}
.sech{font-family:var(--head);font-size:1.05rem;margin:.8rem 0 .4rem}
.sech small{font-family:var(--body,inherit);font-size:.75rem;font-weight:800;opacity:.75;margin-left:.4rem}
.pstats{display:flex;gap:.6rem;flex-wrap:wrap}
.pstats>div{flex:1 1 7rem;background:#fff4d6;border:.16rem solid var(--outline);border-radius:.6rem;padding:.4rem .6rem;font-size:.75rem;font-weight:800;text-align:center}
.pstats b{display:block;font-family:var(--head);font-size:1.25rem;color:#3b2408}
.pstats .totalxp{background:linear-gradient(#fff3a0,#f2c14e)}
.slots{display:flex;gap:.45rem;flex-wrap:wrap}
.slot{width:4.6rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.65rem;font-weight:800}
.slot .gicon{width:3.4rem;height:3.4rem}
.slot .empty{width:3.4rem;height:3.4rem;border-radius:.5rem;border:.16rem dashed rgba(59,36,8,.45);background:rgba(255,255,255,.35)}
.fuelnote{font-size:.85rem;font-weight:700;color:#2a6b3a}
.snackdrop{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.5rem auto 0;font-weight:800;font-size:.95rem}
.snackdrop small{font-size:.7rem;background:var(--pink);color:#fff;border-radius:.3rem;padding:.05rem .35rem;margin-left:.3rem}
.snackdrop .cicon{width:2.2rem;height:2.2rem}
.itempop{position:absolute;right:6.6rem;top:7.6rem;z-index:40;display:flex;flex-direction:column;gap:.35rem;padding:.55rem;min-width:13rem}
.itempop.hidden{display:none}
.itempop .iph{font-family:var(--head);font-weight:700;font-size:.95rem;color:var(--yellow)}
.itempop .iph small{display:block;font-family:inherit;font-size:.68rem;color:var(--cyan);font-weight:800}
.itempop .ibtn{display:flex;align-items:center;gap:.5rem;text-align:left;justify-content:flex-start}
.itempop .ibtn small{display:block;font-size:.68rem;opacity:.85}
.itempop .ibtn .cicon{width:1.8rem;height:1.8rem}
.compact .itempop{top:auto;bottom:24%;right:7.5rem}
.compact .itempop .ibtn{min-height:2.8rem}

/* ===== v0.3: attributes, breakthroughs, progress XP ===== */
.ptbadge{display:inline-flex;align-items:center;justify-content:center;min-width:1.2rem;height:1.2rem;padding:0 .25rem;margin-left:.3rem;border-radius:.6rem;background:var(--pink);color:#fff;font-size:.72rem;font-weight:900;border:.12rem solid var(--outline);vertical-align:middle;animation:tellpulse .7s ease-in-out infinite alternate}
.hudpts{font-size:.7rem;font-weight:900;color:var(--pink);margin-top:-.05rem}
.attrsec{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ptleft{font-family:var(--body);font-size:.78rem;font-weight:900;padding:.08rem .45rem;border-radius:.4rem;border:.12rem solid var(--outline);background:#fff}
.ptleft.has{background:var(--pink);color:#fff}
.attrsec .respec{margin-left:auto;font-size:.72rem}
.attrs{display:flex;flex-direction:column;gap:.35rem}
.attr{display:grid;grid-template-columns:minmax(10rem,1.4fr) auto minmax(7rem,1fr) auto;align-items:center;gap:.6rem;background:#fff4d6;border:.16rem solid var(--outline);border-radius:.6rem;padding:.3rem .6rem}
.attr .an b{font-family:var(--head);font-size:.95rem;display:block}
.attr .an small{font-size:.7rem;font-weight:700;opacity:.8}
.attr .anow{font-size:.75rem;font-weight:800;color:#2a6b3a}
.apips{display:flex;gap:.18rem}
.apips i{width:.7rem;height:.9rem;border-radius:.2rem;border:.12rem solid var(--outline);background:rgba(255,255,255,.6)}
.apips i.on{background:var(--yellow)}
.attr .btn{min-width:2.4rem;font-size:1.1rem;padding:.1em .5em}
.compact .attr .btn{min-height:2.6rem;min-width:3rem}
.breakthroughs{margin-top:.6rem;text-align:left}
.breakthroughs h3{font-family:var(--head);font-size:1.05rem;text-align:center;color:#7a3d0c}
.breakthroughs h3 small{display:block;font-family:var(--body);font-size:.72rem;font-weight:800;color:#2b1a0b;opacity:.8}
.btlist{max-height:13rem;overflow:auto}
.results .growrow.bt{grid-template-columns:8.5rem 1fr 9rem}
.growrow.bt.up{background:linear-gradient(90deg,rgba(255,210,63,.45),transparent);border-radius:.4rem}
.lvup{color:#a3123f}
.xpm{font-size:.7rem;font-weight:900;background:#2a6b3a;color:#fff;border-radius:.3rem;padding:.05rem .3rem;margin-left:.2rem;vertical-align:middle}
.lvlup{text-align:center}
.lvlup .label{font-size:.8rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#a3123f}
.lvlup .ptline{font-size:1.05rem}