/* ============================================================
D_fusion design system — Cinematic Galaxy × Neon Starship
loaded after the original styles, overrides presentation only
============================================================ */
:root{
--cy:#47f0ff;--mg:#ff4fd8;--gd:#ffd25a;--gd2:#f2a93b;--navy:#0b1140;--deep:#02030f;
--bg:#02030f;--gold:#ffd25a;--cyan:#47f0ff;--pink:#ff4fd8;
--font:'Exo 2',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
--disp:'Exo 2','Smiley Sans',"PingFang SC",sans-serif;
--zh:'Smiley Sans',"PingFang SC","Microsoft YaHei",sans-serif;
--hud:'Chakra Petch','Exo 2',sans-serif;
--read:'Nunito','Exo 2',"PingFang SC",sans-serif;
--cham:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
html,body{background:#02030f;font-family:var(--font)}
body{font-weight:600}
#backdrop{filter:blur(12px) saturate(1.15) brightness(.34);inset:-20px}
#app{background:#02030f;box-shadow:0 0 0 1px rgba(71,240,255,.12),0 0 90px rgba(0,0,0,.8)}
#app::after{background:repeating-linear-gradient(0deg,rgba(150,220,255,.025) 0 1px,transparent 1px 3px)}
/* ---------- typography ---------- */
h2,h3,.grad,.gradc,.lvbadge .n,.mission .t,.btn,.topbar .t,.node .nm,.card .cap,.lcard .word,.tcard b,.gcard b,.hubhead h2,.subtitle,.result h2,.bubble,.prompt .tx,.lyrics div,.bookc b,.badge b,.ccard b,.wchip b,.task b,.toast span,.combo,.tword,.cd-grid button,.chips button,.bline span,.tiles button,.spellw span,.slots span,.lt.lw span,.ast,.ltr,.neb .cap,.topt,.tb .tx,.tkcard b,.tdone b{font-family:var(--disp);font-weight:800;letter-spacing:.02em}
.zh{font-family:var(--zh);font-weight:400;letter-spacing:.06em}
.orb,.pill,.mission .k,.lvbadge .k,.node .num,.tk,.hudlbl,.sect,.tcard .keys,.key,.met,.tkcard .num,.tb small,.cpn{font-family:var(--hud);font-weight:700;letter-spacing:.06em}
.rtext,.lcard .sent,.bubble,.tb .tx{font-family:var(--read);font-weight:800}
.rzh,.bubble .zh,.drawer .sheet,.page p,.tb .tz{font-family:"PingFang SC","Hiragino Sans GB",system-ui,sans-serif}
.grad,.gold-t{background:linear-gradient(180deg,#fffbe6 0%,#ffe08a 35%,#f2a93b 70%,#c46d12 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 rgba(90,40,0,.85)) drop-shadow(0 0 16px rgba(255,180,70,.35))}
.gradc{background:linear-gradient(180deg,#ffffff 0%,#c8f8ff 40%,#47f0ff 75%,#2a8cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #0d2a72) drop-shadow(0 0 14px rgba(71,240,255,.45))}
.subtitle{font-family:var(--hud)!important;font-weight:600;letter-spacing:.42em!important;font-size:clamp(10px,1.6vh,14px)!important;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#c6f3ff;filter:none;text-shadow:0 0 12px rgba(71,240,255,.85)}
.subtitle .zh{display:block;margin-top:4px;-webkit-text-fill-color:transparent;background:linear-gradient(180deg,#fffbe6,#ffe08a 40%,#f2a93b 75%,#c46d12);-webkit-background-clip:text;background-clip:text;font-family:var(--zh)!important;font-size:clamp(20px,3.6vh,32px)!important;letter-spacing:.1em!important;filter:drop-shadow(0 2px 0 #5a2600) drop-shadow(0 0 14px rgba(255,180,70,.45))}
/* ============ PREMIUM BUTTONS ============ */
#app .btn{--c:18px;--hex:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% 50%,calc(100% - var(--c)) 100%,var(--c) 100%,0 50%);--hex2:polygon(calc(var(--c) - 1px) 0,calc(100% - var(--c) + 1px) 0,100% 50%,calc(100% - var(--c) + 1px) 100%,calc(var(--c) - 1px) 100%,0 50%);position:relative;isolation:isolate;min-height:56px;padding:0 calc(var(--c) + 18px);border-radius:0;gap:10px;
background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
color:#2a1200;font-family:'Exo 2',var(--zh);font-weight:800;font-size:clamp(15px,2.4vh,19px);text-transform:uppercase;letter-spacing:.16em;text-shadow:0 1px 0 rgba(255,240,200,.65);white-space:nowrap;
filter:drop-shadow(0 0 14px rgba(255,190,80,.35)) drop-shadow(0 9px 12px rgba(0,0,0,.6));transition:transform .08s ease-out,filter .2s;animation:none}
#app .btn::before,#app .btn::after{content:"";position:absolute;z-index:-1;pointer-events:none;border:0;border-radius:0;animation:none;-webkit-mask:none;mask:none;opacity:1}
#app .btn::before{inset:0;clip-path:var(--hex);background:linear-gradient(180deg,#fff7d9 0%,#f3cd6b 16%,#a8701c 46%,#5c3a0b 54%,#e7b553 80%,#fff0c0 100%)}
#app .btn::after{inset:2.5px;clip-path:var(--hex2);
background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%) no-repeat -150% 0/60% 100%,
linear-gradient(90deg,transparent,#47f0ff,transparent) no-repeat 50% calc(100% - 4px)/34% 2px,
radial-gradient(120% 90% at 50% -10%,rgba(255,255,255,.75),rgba(255,255,255,0) 45%),
linear-gradient(180deg,#ffe7a0 0%,#ffc84a 34%,#ec9420 66%,#b65e0c 100%)}
#app .btn small{font-family:var(--zh);font-weight:400;letter-spacing:.1em;font-size:.68em;opacity:.8;text-transform:none}
#app .btn [class^=i-]{width:1em;height:1em}
#app .btn:active{transform:translateY(2px) scale(.985);filter:drop-shadow(0 0 6px rgba(71,240,255,.9)) drop-shadow(0 0 18px rgba(255,200,90,.55)) drop-shadow(0 3px 5px rgba(0,0,0,.6))}
#app .btn:active::after{background:linear-gradient(90deg,transparent,#47f0ff,transparent) no-repeat 50% calc(100% - 4px)/50% 2px,radial-gradient(120% 90% at 50% 120%,rgba(255,255,255,.3),transparent 50%),linear-gradient(180deg,#c6740f 0%,#eb9a28 40%,#ffc24a 100%)}
#app .btn.pulse::after{animation:dfSheen 3.6s ease-in-out infinite}
@keyframes dfSheen{0%,55%{background-position:-150% 0,50% calc(100% - 4px),0 0,0 0}100%{background-position:250% 0,50% calc(100% - 4px),0 0,0 0}}
/* secondary: navy glass + gold engraving */
#app .btn.ghost,#app .btn.holo,#app .btn.cyan{color:#ffdf8c;text-shadow:0 0 10px rgba(255,200,90,.35),0 1px 0 rgba(0,0,0,.6);min-height:50px;font-size:clamp(13px,2.1vh,16px);filter:drop-shadow(0 0 12px rgba(71,240,255,.28)) drop-shadow(0 8px 12px rgba(0,0,0,.6))}
#app .btn.ghost::before,#app .btn.holo::before,#app .btn.cyan::before{background:linear-gradient(180deg,#fff2c6,#c8973d 30%,#5d4416 52%,#d9b264 76%,#fff1c4)}
#app .btn.ghost::after,#app .btn.holo::after,#app .btn.cyan::after{background:linear-gradient(90deg,transparent,#47f0ff,transparent) no-repeat 50% calc(100% - 4px)/30% 2px,radial-gradient(100% 80% at 50% -20%,rgba(120,200,255,.3),transparent 55%),linear-gradient(180deg,#1f2a6e 0%,#0d1443 55%,#070a2c 100%);box-shadow:inset 0 0 18px rgba(71,240,255,.16)}
#app .btn.ghost small,#app .btn.holo small,#app .btn.cyan small{color:#cfe3ff}
#app .btn.ghost:active::after,#app .btn.holo:active::after,#app .btn.cyan:active::after{background:linear-gradient(90deg,transparent,#47f0ff,transparent) no-repeat 50% calc(100% - 4px)/50% 2px,linear-gradient(180deg,#070a2c,#18235f)}
#app .btn:disabled,#app .btn.dis{color:#7b819c;text-shadow:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
#app .btn:disabled::before,#app .btn.dis::before{background:linear-gradient(180deg,#8d93a8,#4b5068 50%,#8d93a8)}
#app .btn:disabled::after,#app .btn.dis::after{background:linear-gradient(180deg,#3a3f58,#23263a)}
/* icon buttons: gold ring + lens */
#app .iconbtn,#app .spk{position:relative;isolation:isolate;width:44px;height:44px;border-radius:50%;color:#ffd25a;font-size:18px;
background:conic-gradient(from 210deg,#fff6d6,#c58b2c,#5a3a0c,#f3cf78,#fff6d6,#a8701c,#fff6d6)!important;box-shadow:0 6px 12px rgba(0,0,0,.55),0 0 12px rgba(255,200,90,.25)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:transform .08s}
#app .iconbtn::before,#app .spk::before{content:"";position:absolute;inset:3px;border-radius:50%;z-index:-1;background:radial-gradient(90% 70% at 50% 0%,rgba(150,220,255,.35),transparent 55%),linear-gradient(180deg,#1d2766,#070a2c);box-shadow:inset 0 0 10px rgba(71,240,255,.35)}
#app .iconbtn [class^=i-],#app .spk [class^=i-]{filter:drop-shadow(0 0 5px rgba(255,200,90,.6))}
#app .spk{width:54px;height:54px;font-size:24px;color:var(--cy)}
#app .spk [class^=i-]{filter:drop-shadow(0 0 6px var(--cy))}
#app .iconbtn:active,#app .spk:active{transform:translateY(2px);box-shadow:0 0 0 3px rgba(71,240,255,.5),0 0 18px var(--cy)!important}
/* HUD chips */
#app .pill{--c:9px;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);border-radius:0;padding:6px 14px 6px 11px;font-size:15px;color:#eef6ff;
background:linear-gradient(180deg,rgba(38,52,130,.85),rgba(8,12,44,.92));box-shadow:inset 0 0 0 1px rgba(71,240,255,.5),inset 0 2px 0 rgba(255,210,90,.0);-webkit-backdrop-filter:none;backdrop-filter:none}
#app .pill [class^=i-]{filter:drop-shadow(0 0 5px rgba(255,200,90,.7))}
#app .pill.on{box-shadow:inset 0 0 0 1.5px var(--gd)}
/* ---------- panels ---------- */
.glass,.drawer .sheet,.tpanel{background:linear-gradient(90deg,var(--gd),rgba(255,210,90,0)) no-repeat 18px 0/45% 2px,linear-gradient(180deg,rgba(32,46,122,.80),rgba(7,11,40,.90))!important;
box-shadow:inset 0 0 0 1px rgba(71,240,255,.38),inset 0 0 26px rgba(71,240,255,.07),0 16px 34px rgba(0,0,0,.45)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.glass{border-radius:18px}
.glass::after,.card::after,.holo::after{--hc:rgba(71,240,255,.75)}
.drawer .sheet{border-radius:22px 22px 0 0}
.drawer h3{font-family:var(--disp);font-weight:900;font-style:italic;letter-spacing:.06em;color:#ffe08a}
.toggle{background:linear-gradient(180deg,#151c4d,#0a0f33)!important;box-shadow:inset 0 0 0 1.5px rgba(200,170,90,.6)!important}
.toggle.on{background:linear-gradient(180deg,#ffe7a0,#ec9420)!important}
/* ---------- topbar ---------- */
.topbar .t{font-family:var(--disp);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.08em;font-size:18px;background:linear-gradient(180deg,#fffbe6,#ffe08a 45%,#f2a93b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.topbar .t small{font-family:var(--zh);font-style:normal;text-transform:none;letter-spacing:.1em;-webkit-text-fill-color:#a9c4ff;font-weight:400}
.prog{height:10px!important;border-radius:0!important;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);background:rgba(255,255,255,.10)!important;box-shadow:none!important;overflow:visible}
.prog b{border-radius:0!important;background:linear-gradient(90deg,#47f0ff,#9a7bff 55%,#ffd25a)!important;box-shadow:0 0 12px #47f0ff!important}
/* ---------- prompt / bubbles ---------- */
.prompt .av{box-shadow:0 0 0 2px #e7b553,0 0 0 4px rgba(7,10,44,.9),0 0 16px rgba(255,200,90,.45)!important;background:radial-gradient(circle at 50% 30%,#2b3a8a,#0b1140)!important}
.prompt.talking .av{box-shadow:0 0 0 2px #fff3c4,0 0 0 4px rgba(71,240,255,.8),0 0 22px var(--cy)!important}
.prompt .tx .zh{font-family:var(--zh);color:#a9c4ff}
.bubble{background:linear-gradient(180deg,#ffffff,#e9efff);color:#141a46;border-radius:18px;box-shadow:0 0 0 1.5px rgba(255,255,255,.6),0 0 0 4px rgba(71,240,255,.25),0 14px 30px rgba(0,0,0,.45)}
.bubble .who{border-radius:0;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%);background:linear-gradient(180deg,#ffe7a0,#ec9420);color:#2a1200;font-family:var(--hud);letter-spacing:.14em;font-size:12px;padding:2px 14px}
.bubble::after{border-top-color:#e9efff}
.castpop .bubble::after{border-left-color:#f1f5ff}
/* ---------- word cards ---------- */
.card{border:2px solid transparent!important;border-radius:20px!important;
background:radial-gradient(90% 70% at 50% 0%,rgba(120,200,255,.20),transparent 60%) padding-box,linear-gradient(180deg,#1b2566,#0a0f36) padding-box,linear-gradient(160deg,#eef3ff,#56627e 45%,#c9d4ea 78%,#ffffff) border-box!important;
box-shadow:0 12px 26px rgba(0,0,0,.45)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.card::after{display:none}
.card .cap{color:#fff4d6}
.card .cap .zh{color:#a9c4ff}
.card.right{background:radial-gradient(80% 70% at 50% 40%,rgba(255,210,110,.55),transparent 70%) padding-box,linear-gradient(180deg,#3a2a6e,#140f3a) padding-box,linear-gradient(160deg,#fff6d6,#c58b2c 40%,#5a3a0c 55%,#f3cf78 80%,#fff6d6) border-box!important;
box-shadow:0 0 0 2px rgba(255,226,138,.35),0 0 34px rgba(255,190,80,.85),0 14px 26px rgba(0,0,0,.45)!important;transform:scale(1.05) rotate(-1.5deg)}
.card.right .cap{color:#fff6c2;text-shadow:0 0 12px rgba(255,180,60,.9)}
.tcard,.gcard,.bookc,.badge,.hship,.ccard,.wchip,.task,.abc button,.scard{border:1.5px solid transparent!important;
background:linear-gradient(90deg,var(--gd),rgba(255,210,90,0)) no-repeat 16px 0/40% 2px padding-box,radial-gradient(110% 80% at 50% 0%,rgba(90,140,255,.22),transparent 60%) padding-box,linear-gradient(160deg,rgba(26,38,104,.95),rgba(7,11,40,.96)) padding-box,linear-gradient(160deg,rgba(255,240,200,.9),rgba(120,90,40,.6) 40%,rgba(71,240,255,.55) 75%,rgba(255,240,200,.7)) border-box!important;
box-shadow:0 12px 24px rgba(0,0,0,.45)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.tcard .tk{color:var(--cy);font-family:var(--hud)}
.sect{color:var(--cy);letter-spacing:.32em;text-shadow:0 0 10px rgba(71,240,255,.6)}
.sect::after{content:"";display:block;height:1px;margin-top:6px;background:linear-gradient(90deg,rgba(71,240,255,.6),rgba(255,210,90,.4),transparent)}
/* fly-in for every card-like element */
.card,.tcard,.gcard,.bookc,.scard,.tkcard,.wchip,.ccard,.badge,.task,.abc button,.mc,.bubble2,.topt{animation:dfFly .55s cubic-bezier(.2,.9,.25,1.15) backwards}
.card:nth-child(2),.tcard:nth-child(2),.gcard:nth-child(2),.bookc:nth-child(2),.scard:nth-child(2),.tkcard:nth-child(2),.mc:nth-child(2),.topt:nth-child(2){animation-delay:.06s}
.card:nth-child(3),.tcard:nth-child(3),.gcard:nth-child(3),.bookc:nth-child(3),.scard:nth-child(3),.tkcard:nth-child(3),.mc:nth-child(3),.topt:nth-child(3){animation-delay:.12s}
.card:nth-child(4),.tcard:nth-child(4),.gcard:nth-child(4),.bookc:nth-child(4),.scard:nth-child(4),.tkcard:nth-child(4),.mc:nth-child(4),.topt:nth-child(4){animation-delay:.18s}
.card:nth-child(n+5),.tcard:nth-child(n+5),.gcard:nth-child(n+5),.bookc:nth-child(n+5),.scard:nth-child(n+5),.tkcard:nth-child(n+5),.mc:nth-child(n+5){animation-delay:.24s}
@keyframes dfFly{from{opacity:0;transform:translateY(46px) perspective(600px) rotateX(38deg) scale(.86)}to{opacity:1;transform:none}}
.shake{animation:dfShake .42s!important}
@keyframes dfShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-9px) rotate(-2deg)}40%,60%{transform:translateX(9px) rotate(2deg)}}
/* ---------- screen transition (warp) ---------- */
.screen{animation:dfWarpIn .6s cubic-bezier(.16,.84,.24,1)}
@keyframes dfWarpIn{from{opacity:0;transform:scale(1.14)}60%{opacity:1}to{opacity:1;transform:none}}
#df-flash{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(220,245,255,.9),rgba(120,200,255,.35) 30%,transparent 65%)}
#df-flash.go{animation:dfFlash .55s ease-out}
@keyframes dfFlash{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
/* ---------- scene layers ---------- */
.scene-bg{animation:dfKen 38s ease-in-out infinite alternate;will-change:transform}
@keyframes dfKen{from{transform:scale(1.06) translate3d(-1.2%,0,0)}to{transform:scale(1.12) translate3d(1.2%,-1%,0)}}
.title-screen.v2 .scene-bg{filter:blur(10px) brightness(.45);animation:none;transform:scale(1.12)}
.df-neb{position:absolute;inset:-12%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
background:radial-gradient(38% 26% at 12% 18%,rgba(123,60,255,.55),transparent 70%),radial-gradient(40% 24% at 92% 46%,rgba(255,63,168,.32),transparent 70%),radial-gradient(50% 26% at 40% 104%,rgba(26,168,255,.35),transparent 70%)}
.df-horizon{position:absolute;left:0;right:0;height:2px;z-index:1;background:linear-gradient(90deg,transparent,var(--mg),var(--gd),var(--cy),var(--mg),transparent);box-shadow:0 0 22px 5px rgba(255,140,200,.4)}
.df-gridwrap{position:absolute;left:0;right:0;bottom:0;overflow:hidden;z-index:1;pointer-events:none;-webkit-mask:linear-gradient(transparent,#000 45%);mask:linear-gradient(transparent,#000 45%)}
.df-grid{position:absolute;left:-60%;right:-60%;top:0;height:200%;transform-origin:50% 0;
background:repeating-linear-gradient(90deg,rgba(71,240,255,.30) 0 1.5px,transparent 1.5px 46px),repeating-linear-gradient(0deg,rgba(255,79,216,.26) 0 1.5px,transparent 1.5px 40px);
transform:perspective(260px) rotateX(64deg);animation:dfGrid 2.2s linear infinite;will-change:transform}
@keyframes dfGrid{from{transform:perspective(260px) rotateX(64deg) translate3d(0,0,0)}to{transform:perspective(260px) rotateX(64deg) translate3d(0,40px,0)}}
[data-depth]{will-change:translate}
/* ---------- characters ---------- */
.chr{transform-origin:50% 100%;animation:dfBreathe 3.4s ease-in-out infinite}
.chr.alt{animation-duration:3.9s;animation-delay:-1.3s}
@keyframes dfBreathe{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-1.5%) scale(1.012,.988)}50%{transform:translateY(-1.6%) scale(.992,1.016)}}
.chr.hop{animation:dfHop .62s cubic-bezier(.3,1.6,.5,1)}
@keyframes dfHop{0%{transform:none}30%{transform:translateY(-14%) scale(.96,1.06) rotate(-3deg)}60%{transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
.castpop img,.host-img,.lineup img,.hubhead img{transform-origin:50% 100%}
.df-talk{transition:rotate .06s linear,scale .06s linear}
/* ---------- title ---------- */
.title-screen.v2 .title-wrap{z-index:4}
.df-logo{position:relative;display:inline-block;line-height:0}
.df-logo::after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:url(img/logo.webp) center/contain no-repeat;mask:url(img/logo.webp) center/contain no-repeat;
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:dfLogoSheen 4.5s ease-in-out infinite}
@keyframes dfLogoSheen{0%,40%{background-position:160% 0}100%{background-position:-60% 0}}
.title-screen.v2 .logo{filter:drop-shadow(0 0 20px rgba(110,200,255,.55)) drop-shadow(0 8px 0 rgba(0,0,0,.35))}
.ttstage{-webkit-mask-image:none!important;mask-image:none!important;overflow:visible}
.ttstage>img{opacity:0}
.df-stage{position:absolute;inset:0}
.df-stage .df-horizon{top:58%}
.df-stage .df-gridwrap{top:58%}
.df-planet{position:absolute;pointer-events:none}
.df-planet.p1{left:-9%;top:4%;width:30%;max-width:170px;filter:drop-shadow(0 0 24px rgba(255,190,120,.55));animation:dfFloat 9s ease-in-out infinite}
.df-planet.p2{right:-6%;top:24%;width:22%;max-width:130px;filter:drop-shadow(0 0 20px rgba(80,180,255,.7));animation:dfFloat 11s ease-in-out infinite reverse}
@keyframes dfFloat{50%{transform:translateY(-8px) rotate(3deg)}}
.df-crew{position:absolute;left:0;right:0;bottom:3%;height:88%;display:flex;justify-content:center;align-items:flex-end}
.df-mem{position:relative;height:100%;width:32%;max-width:220px;display:flex;justify-content:center;align-items:flex-end}
.df-mem img{position:relative;z-index:2;height:78%;max-width:140%;object-fit:contain;filter:drop-shadow(0 0 2px rgba(255,255,255,.7)) drop-shadow(0 0 16px rgba(120,200,255,.5)) drop-shadow(0 16px 16px rgba(0,0,0,.55))}
.df-mem.lead img{height:94%}
.df-mem.lead{z-index:3;margin:0 -5%}
.df-pad{position:absolute;left:4%;right:4%;bottom:-9%;aspect-ratio:1;border-radius:50%;border:2px solid var(--cy);transform:scaleY(.26);transform-origin:50% 100%;
box-shadow:0 0 18px var(--cy),inset 0 0 18px rgba(71,240,255,.6);background:radial-gradient(closest-side,rgba(71,240,255,.4),transparent)}
.df-pad.g{border-color:var(--gd);box-shadow:0 0 18px var(--gd),inset 0 0 18px rgba(255,210,90,.6);background:radial-gradient(closest-side,rgba(255,210,90,.4),transparent)}
.df-beam{position:absolute;left:8%;right:8%;bottom:3%;height:70%;z-index:1;overflow:hidden;background:linear-gradient(0deg,rgba(71,240,255,.38),transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent)}
.df-beam::after{content:"";position:absolute;left:0;right:0;height:3px;background:rgba(200,250,255,.9);box-shadow:0 0 10px #47f0ff;animation:dfScan 2.6s linear infinite}
.df-mem.lead .df-beam{background:linear-gradient(0deg,rgba(255,210,90,.36),transparent)}
@keyframes dfScan{from{bottom:0;opacity:1}to{bottom:100%;opacity:0}}
.df-fly{position:absolute;z-index:3;pointer-events:none;width:120px;left:0;top:0;animation:dfFly1 11s linear infinite}
.df-fly img{width:100%;display:block;filter:drop-shadow(0 0 12px rgba(120,220,255,.85))}
.df-fly::before{content:"";position:absolute;right:92%;top:52%;width:150px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(170,235,255,.95))}
@keyframes dfFly1{0%{transform:translate3d(-180px,140px,0) rotate(-8deg);opacity:0}6%{opacity:1}42%{transform:translate3d(calc(var(--w,400px) + 60px),20px,0) rotate(-8deg);opacity:1}43%,100%{transform:translate3d(calc(var(--w,400px) + 60px),20px,0);opacity:0}}
.title-screen.v2 .title-actions{gap:14px 16px;z-index:4}
.title-screen.v2 .title-actions .btn{min-height:60px}
.title-screen.v2 .title-actions .btn.holo{min-height:48px}
.ldbar{display:none}
@media (orientation:landscape) and (max-height:820px){
.title-screen.v2{display:grid;grid-template-columns:44% 56%;grid-template-rows:1fr auto auto 1fr}
.title-screen.v2 .title-wrap{grid-column:1;grid-row:2;padding-top:0!important}
.title-screen.v2 .title-actions{grid-column:1;grid-row:3;flex-direction:column!important;align-items:center}
.title-screen.v2 .ttstage{grid-column:2;grid-row:1/5;height:100%}
.title-screen.v2 .logo{height:clamp(60px,24vh,170px)!important}
.df-stage .df-horizon,.df-stage .df-gridwrap{top:66%}
.df-planet.p1{left:auto;right:4%;top:2%;width:16%}
.df-planet.p2{display:none}
.subtitle .zh{white-space:nowrap;font-size:clamp(14px,4.6vh,24px)!important}
}
/* ---------- map ---------- */
.map-head{z-index:6}
.map-inner svg.path path:first-child{stroke:#47f0ff;stroke-opacity:.22;filter:blur(3px)}
.map-inner svg.path path:last-child{stroke:#ffd25a;stroke-width:3.5;stroke-dasharray:3 10;animation:dfDash 1.6s linear infinite}
@keyframes dfDash{to{stroke-dashoffset:-26}}
.node .pl::before{border:2px solid rgba(255,210,90,.85)!important;box-shadow:0 0 14px rgba(255,210,90,.6),inset 0 0 10px rgba(255,210,90,.35)!important}
.node.lock .pl::before{border-color:rgba(160,175,210,.45)!important;box-shadow:none!important}
.node.cur .pl::after{border:1.5px dashed rgba(71,240,255,.85)!important;animation:spin 9s linear infinite!important;box-shadow:0 0 16px rgba(71,240,255,.35)}
.node .num{clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%);border-radius:0!important;background:linear-gradient(180deg,#ffe08a,#e8921c)!important;color:#2a1200!important;box-shadow:none!important}
.node .nm{text-shadow:0 2px 6px #000}
.node .gm{font-family:var(--hud);letter-spacing:.08em;color:#ffcf7a}
.node .lockic{color:#e6ecff}
.node.cur .pl img,.node.cur .pl canvas.pl3d{animation:dfPulseP 2.4s ease-in-out infinite}
@keyframes dfPulseP{50%{filter:drop-shadow(0 0 24px rgba(255,210,90,.9)) brightness(1.08)}}
.df-shatter{position:absolute;inset:0;pointer-events:none;z-index:5}
.df-shatter .lk{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);color:#e6ecff;animation:dfLockPop .5s ease-in forwards}
.df-shatter .lk i{width:100%;height:100%}
.df-shatter b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;background:linear-gradient(135deg,#fff,#9aa6c8 50%,#4b5670);clip-path:polygon(50% 0,100% 40%,70% 100%,0 70%);animation:dfShard .9s cubic-bezier(.2,.7,.3,1) .35s forwards;opacity:0}
@keyframes dfLockPop{0%{transform:translate(-50%,-50%) scale(1)}60%{transform:translate(-50%,-50%) scale(1.25) rotate(-8deg)}100%{transform:translate(-50%,-50%) scale(.2);opacity:0}}
@keyframes dfShard{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
.dock{background:linear-gradient(90deg,var(--gd),rgba(255,210,90,0)) no-repeat 18px 0/40% 2px,linear-gradient(180deg,rgba(32,46,122,.88),rgba(7,11,40,.95))!important;box-shadow:inset 0 0 0 1px rgba(71,240,255,.38),0 10px 30px rgba(0,0,0,.5)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:18px!important}
.dock button.on{background:linear-gradient(180deg,rgba(255,210,90,.18),rgba(255,210,90,.04))!important;box-shadow:inset 0 0 0 1px rgba(255,210,90,.6)!important}
.dock button.on small{color:#ffe08a!important}
.dock button small{font-family:var(--zh)!important;font-weight:400!important;letter-spacing:.06em}
/* ---------- mission banner / results / feedback ---------- */
.mission .k{color:var(--cy);letter-spacing:.42em;text-shadow:0 0 10px var(--cy)}
.mission .t{font-style:italic;font-weight:900}
.result h2{font-family:var(--disp)!important;font-weight:900;font-style:italic;letter-spacing:.05em;font-size:clamp(34px,6vh,52px)}
.df-stats{display:flex;gap:22px;padding:10px 20px;margin:6px 0;text-align:center}
.df-stats b{display:block;font-size:26px;color:var(--gd);text-shadow:0 0 12px rgba(255,200,90,.6)}
.df-stats small{font-family:var(--zh);font-size:12px;color:#a9c4ff}
.combo,.plus{display:none!important}
.df-ring{position:fixed;z-index:65;pointer-events:none;width:140px;height:140px;margin:-70px;border-radius:50%;border:3px solid rgba(255,230,150,.95);box-shadow:0 0 26px rgba(255,210,120,.9),inset 0 0 22px rgba(255,210,120,.6);animation:dfRing .65s cubic-bezier(.1,.8,.3,1) forwards}
.df-ring.cy{border-color:rgba(160,245,255,.95);box-shadow:0 0 26px rgba(71,240,255,.9),inset 0 0 22px rgba(71,240,255,.6)}
@keyframes dfRing{from{transform:scale(.25);opacity:1}to{transform:scale(1.9);opacity:0}}
.df-pop{position:fixed;z-index:66;pointer-events:none;transform:translate(-50%,-50%);font-family:'Exo 2';font-weight:900;font-style:italic;font-size:30px;white-space:nowrap;color:#fff6c2;text-shadow:0 0 14px #ffb648,0 3px 0 #8a3a00;animation:dfPopUp .95s cubic-bezier(.2,1.4,.4,1) forwards}
.df-pop small{font-family:var(--hud);font-style:normal;font-size:16px;color:#7ff6ff;text-shadow:0 0 10px #47f0ff;margin-left:4px}
@keyframes dfPopUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.4)}25%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}70%{opacity:1;transform:translate(-50%,-130%) scale(1)}100%{opacity:0;transform:translate(-50%,-170%) scale(.95)}}
.df-word{position:absolute;left:0;right:0;top:38%;z-index:62;text-align:center;pointer-events:none;font-family:'Exo 2';font-weight:900;font-style:italic;letter-spacing:.05em;font-size:clamp(38px,8vh,64px);
background:linear-gradient(180deg,#fffbe6 0%,#ffe08a 35%,#f2a93b 70%,#c46d12 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5a2600) drop-shadow(0 0 18px rgba(255,180,70,.8));animation:dfWord 1s cubic-bezier(.2,1.5,.4,1) forwards}
.df-word.cy{background:linear-gradient(180deg,#fff,#c8f8ff 45%,#47f0ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #0d2a72) drop-shadow(0 0 18px rgba(71,240,255,.8))}
@keyframes dfWord{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.12)}45%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.05) translateY(-20px)}}
.df-combo{position:absolute;right:14px;top:calc(150px + env(safe-area-inset-top));z-index:61;pointer-events:none;text-align:right;animation:dfCombo 1.3s ease-out forwards}
.df-combo b{display:block;font-family:var(--hud);font-weight:700;font-style:italic;font-size:34px;line-height:1;background:linear-gradient(180deg,#fff,#ffd25a 50%,#ff7a2e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #6a2400) drop-shadow(0 0 12px rgba(255,150,60,.75))}
.df-combo small{font-family:var(--zh);font-size:12px;color:#ffdca0;letter-spacing:.14em}
@keyframes dfCombo{0%{opacity:0;transform:translateX(30px) scale(.7)}15%{opacity:1;transform:translateX(0) scale(1.1)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
#app.df-hot::before{content:"";position:absolute;inset:0;z-index:54;pointer-events:none;box-shadow:inset 0 0 60px rgba(255,170,60,.45),inset 0 0 0 2px rgba(255,210,90,.35);animation:dfHot 1.2s ease-in-out infinite}
@keyframes dfHot{50%{opacity:.45}}
#app.df-bad::before{content:"";position:absolute;inset:0;z-index:54;pointer-events:none;box-shadow:inset 0 0 70px rgba(255,60,90,.55);animation:dfBad .45s ease-out forwards}
@keyframes dfBad{to{opacity:0}}
.screen.df-quake{animation:dfQuake .35s}
@keyframes dfQuake{20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}}
/* ---------- typing ---------- */
.key{border-radius:8px!important;background:linear-gradient(180deg,#2a356f,#121a4a)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(160,190,255,.22),inset 0 -3px 0 var(--fc,rgba(71,240,255,.6)),0 3px 6px rgba(0,0,0,.5)!important}
.key.t{background:linear-gradient(180deg,#ffffff,var(--fc) 50%)!important;color:#04102a!important;box-shadow:0 0 0 2px #fff6d6,0 0 0 4px rgba(255,210,90,.85),0 0 24px var(--fc)!important}
.kb{background:linear-gradient(90deg,var(--gd),rgba(255,210,90,0)) no-repeat 16px 0/40% 2px,linear-gradient(180deg,rgba(32,46,122,.78),rgba(7,11,40,.9));box-shadow:inset 0 0 0 1px rgba(71,240,255,.35);border-radius:16px;padding:8px 6px}
.met{font-size:26px;color:#fff;text-shadow:0 0 10px #47f0ff,0 0 3px #000,0 0 2px #000;width:66px;height:66px;margin:-33px 0 0 -33px}
.met::before{border-radius:0!important;background:url(img/w_asteroid.webp) center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 0 10px rgba(255,140,60,.7)) brightness(.85)}
.met::after{top:-62px;width:18px;height:70px;margin-left:-9px;background:linear-gradient(0deg,rgba(255,190,80,.85),rgba(255,90,40,.25) 60%,transparent);filter:blur(2px)}
.met.lo{color:#ffe08a;text-shadow:0 0 12px #ffd25a,0 0 3px #000}
.met.lo::before{box-shadow:none!important;filter:drop-shadow(0 0 14px #ffd25a) drop-shadow(0 0 4px #fff) brightness(1)}
div.base{height:64px!important;border-radius:0!important;background:url(img/ship_rear.webp) center bottom/auto 92% no-repeat,radial-gradient(60% 100% at 50% 100%,rgba(71,240,255,.45),transparent 70%)!important;box-shadow:none!important;filter:drop-shadow(0 0 14px rgba(71,240,255,.7))}
div.base.hit{filter:drop-shadow(0 0 18px rgba(255,60,90,.9)) hue-rotate(-40deg)}
.laser line{filter:drop-shadow(0 0 6px #47f0ff) drop-shadow(0 0 14px #ffd25a)}
.shield i{background:linear-gradient(180deg,#bff8ff,#47f0ff)!important;clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);border-radius:0!important}
/* ---------- reader / pages ---------- */
.rtext span.hl{background:linear-gradient(180deg,#fff3b0,#ffc84a)!important;color:#2a1200!important;box-shadow:0 0 14px rgba(255,200,90,.6)}
.bookc img{box-shadow:0 0 0 1.5px rgba(255,230,170,.6),0 10px 20px rgba(0,0,0,.5)}
.page .hd b,.page h2{font-style:italic}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.df-fly{display:none}}
/* undo the original `.ttstage img{inset:0;width/height:100%}` for our stage layers */
.ttstage .df-stage img,.ttstage .df-stage canvas.pl3d{inset:auto;height:auto;object-fit:contain;object-position:50% 50%}
.ttstage .df-planet{position:absolute;aspect-ratio:1}
.ttstage .df-mem img{position:relative;width:auto;height:78%;max-width:112%}
.ttstage .df-mem.lead img{height:94%}
.ttstage .df-fly img{position:static;width:100%}
/* ================= layout hygiene pass: nothing may sit on text or characters ================= */
/* speaker tag sits inside the bubble (never overhangs text above it) */
.bubble .who{position:static!important;display:table;margin:0 0 6px;top:auto;left:auto}
/* bubbles keep a clear gap from the character they belong to; tail points at it */
.castpop{gap:20px!important;align-items:center}
.castpop .bubble{margin-bottom:0}
/* holo foil stays under the card's text */
.tcard2 .tc-body,.tcard2 .tc-rar{z-index:5}
.tcard2.lock .tc-holo,.tcard2.lock .tc-glare{display:none}
/* orbit labels get their own row space */
.orbit-slots{row-gap:30px;padding-bottom:26px}
/* dock fits on narrow phones without hiding labels */
.dock button{min-width:0!important;padding-left:1px;padding-right:1px}
@media (max-width:380px){.dock button small{font-size:9px}.dock button .mi{width:24px;height:24px}}
/* falling meteors/asteroids appear below the question panel, never over it */
.blaster{overflow:hidden}
/* title stage: crew pads never spill onto the buttons */
.title-screen.v2 .ttstage{overflow:hidden}
.df-crew{bottom:6%}
.df-pad{bottom:-6%}
/* intro: planet decor lives beside the host, away from the title text */
.intro-planet{top:auto!important;bottom:36%;right:-64px!important;width:168px!important;height:168px!important}
/* map ship parks beside the current planet */
.ship{width:124px!important;height:64px!important;margin:-32px 0 0 -62px!important}
.ship .shipimg{width:100%!important;height:100%!important}
/* text lines get breathing room so stacked labels never touch */
.bookc b{display:block;line-height:1.22}.bookc small{display:block;line-height:1.3}
.gcard b,.tkcard b{line-height:1.2}.gcard small,.tkcard small{line-height:1.35}
.lvbadge .n{line-height:1.12}
/* ---------- HOME button (logo) ---------- */
.i-home{--m:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 2.6 1.8 11.2l1.5 1.8L5 11.6V21h5.6v-5.6h2.8V21H19v-9.4l1.7 1.4 1.5-1.8z%22/%3E%3C/svg%3E")}
.df-home{position:relative;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s,filter .15s}
.df-home:active{transform:translateY(2px) scale(.94);filter:brightness(1.25) drop-shadow(0 0 10px #47f0ff)}
.map-head .df-home{display:flex;align-items:center;gap:6px;height:48px;padding:0 10px 0 4px;border-radius:14px;
background:linear-gradient(180deg,rgba(38,52,130,.75),rgba(8,12,44,.85));box-shadow:inset 0 0 0 1px rgba(255,210,90,.55),0 6px 14px rgba(0,0,0,.45)}
.map-head .df-home img{height:40px!important;width:auto;max-width:none;filter:drop-shadow(0 0 8px rgba(110,200,255,.55))}
.map-head .df-home .i-home{color:#ffd25a;width:16px;height:16px}
.map-head{padding-left:max(10px,env(safe-area-inset-left))}
.topbar .df-home{width:44px;height:44px}
.df-home.float{position:absolute;z-index:45;left:calc(12px + env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top))}
.df-home .i-home{width:20px;height:20px}
.bubwrap{margin-top:16px}
.result .lineup{margin-top:16px}
.lineup img{height:88%!important}.lineup img:nth-child(2){height:100%!important}
/* reward toast with no free space: shown as a short modal moment over a dimmed scrim (content behind is not pressed) */
.df-scrim{position:absolute;inset:0;z-index:79;background:rgba(2,3,15,.72);animation:dfScrim 3.2s ease forwards;pointer-events:none}
@keyframes dfScrim{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}
/* memory grid never taller than its arena (prompt stays clear) */
.arena{container-type:size}
.mem{width:min(100%,66cqh);margin:0 auto}
/* characters keep a gap from the question panel while they breathe */
.dress{margin-top:14px;height:calc(100% - 14px)!important}
.robot{margin-top:12px;height:calc(100% - 12px)!important}
.robot .scan{z-index:0}.robot img{position:relative;z-index:1}
.boss{margin:22px auto 10px}.boss .aura{inset:-14px}
.crocket{margin-top:14px}
.opts .card:has(.i-speaker){padding-right:46px!important}
.chant .disc{width:min(46vw,210px,30vh)}
.result .lineup{height:clamp(110px,calc(100dvh - 430px),40dvh)!important}
/* intro host fills its own stage only (never climbs onto the title text) */
.host-stage{min-height:120px}
.host-img{position:absolute;left:0;right:0;bottom:0;margin:0 auto;height:100%!important;width:100%!important;max-width:none!important;object-fit:contain;object-position:50% 100%}
/* title: crew sits in front of the fly-by ship; ship never crosses a character */
.df-crew{z-index:2}.df-fly{z-index:1!important}
/* scaled (short landscape) mode: title uses the stacked layout */
html.df-scaled .title-screen.v2{display:flex!important;flex-direction:column}
html.df-scaled .title-screen.v2 .title-actions{flex-direction:row!important}
html.df-scaled .df-stage .df-horizon,html.df-scaled .df-stage .df-gridwrap{top:58%}
.boss .aura{z-index:-1}
.wchip span:has(>.crocket){margin-bottom:16px}
.df-scrim.short{animation:dfScrim 2s ease forwards}
.castpop.df-modal{z-index:81}
.bubble .who{transform:none!important;margin:0 0 8px!important}
/* scaled short-landscape: keep the home control ≥38px real size */
html.df-scaled #app .topbar .df-home,html.df-scaled #app .df-home.float{width:calc(40px / var(--dfs,1));height:calc(40px / var(--dfs,1))}
html.df-scaled #app .df-home .i-home{width:calc(18px / var(--dfs,1));height:calc(18px / var(--dfs,1))}
html.df-scaled #app .map-head .df-home{height:calc(42px / var(--dfs,1))}
html.df-scaled #app .map-head .df-home img{height:calc(34px / var(--dfs,1))!important}
/* answer grids never wider than the screen (Starts With etc. on 360–390px phones) */
#app .opts.c3{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:min(640px,100%)}
#app .opts.c4{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
#app .opts .card{min-width:0}
#app .opts .card .pic-img{max-width:100%;height:auto}
/* boss aura: spin the gradient inside a fixed circle so its box never grows over the title */
#app .boss .aura{animation:none;background:none;overflow:hidden;inset:-14px}
#app .boss .aura::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#ff5a3c00,#ff8a1f,#ff5a3c00 30%,#ffd05a,#ff5a3c00 60%,#ff6fd2,#ff5a3c00);animation:spin 3s linear infinite}
/* cast pop-in: grow in place instead of sliding up through the screen */
@keyframes dfCastIn{from{opacity:0;transform:scale(.86)}}
#app .castpop{animation-name:dfCastIn;animation-duration:.3s;transform-origin:85% 50%}
@keyframes dfCastOut{to{opacity:0;transform:scale(.9)}}
#app .castpop.out{animation:dfCastOut .3s forwards}
/* Mac / desktop window: bigger WONDERNAUTS home logo */
@media (min-width:900px) and (min-height:580px){#app .map-head .df-home{height:62px;padding:0 14px 0 8px;border-radius:16px}#app .map-head .df-home img{height:54px!important}#app .map-head .df-home .i-home{width:20px;height:20px}
#app .topbar .df-home,#app .df-home.float{width:52px;height:52px}#app .df-home .i-home{width:24px;height:24px}}
/* ---- pass 3: short screens ---- */
@media (max-height:700px){#app .kbwrap .hands{display:none}}
html.df-scaled #app .topbar .df-home,html.df-scaled #app .df-home.float{width:calc(37px / var(--dfs,1));height:calc(37px / var(--dfs,1))}
html.df-scaled #app .orbit-slots{max-width:400px;margin:0 auto;row-gap:22px;padding-bottom:20px}
html.df-scaled #app .tray button{width:56px;height:56px}
html.df-scaled #app .grid5{width:250px!important;height:250px!important}
html.df-scaled #app .arrows{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,56px)}
/* size game: big/medium/small planets shrink together on narrow phones */
#app .card[data-s]{flex:0 1 auto;min-width:0}
#app .card[data-s] img{max-width:100%;height:auto!important;aspect-ratio:1}
/* result fits 360x640 */
.result .lineup{height:clamp(100px,calc(100dvh - 490px),40dvh)!important}
/* map header fits 360px */
@media (max-width:380px){#app .map-head{gap:4px}#app .map-head .df-home{padding:0 6px 0 3px;gap:3px}#app .map-head .df-home img{height:32px!important}
#app .map-head .df-home .i-home{width:14px;height:14px}#app .map-head .pill{padding-left:7px;padding-right:7px}#app .map-head .iconbtn{flex:none;width:38px;height:38px}}
/* jump game: answer pictures sit on (not over) their rock; rocks fit narrow phones */
#app .rock{width:min(118px,24vw);margin-left:calc(min(118px,24vw) / -2)}
#app .rock .pic-img{width:min(84px,20vw)!important;height:min(84px,20vw)!important;margin-top:calc(min(84px,20vw) * -.8)}
/* title stage planets: Saturn top-left, Neptune top-right (the stage img reset had stacked them both at the left) */
.ttstage .df-stage img.df-planet.p1{left:-9%;right:auto;top:2%;bottom:auto}
.ttstage .df-stage img.df-planet.p2{right:-5%;left:auto;top:6%;bottom:auto}
.df-credit{margin:14px 4px 6px;font-size:11px;line-height:1.5;color:rgba(200,215,255,.6);text-align:center}
.page .df-credit{margin-bottom:96px}
/* wide (Mac / iPad landscape): orbit slots sized by height so the planet tray stays on screen */
#app .orbit-slots{max-width:min(100%,calc((100cqh - 170px) * 1.75));margin-left:auto;margin-right:auto}
/* wide: finger-guide hands shrink so the word/picture above the keyboard keeps its room */
@media (min-width:900px){#app .kbwrap .hands{max-width:min(700px,calc((100dvh - 580px) * 2.17))}}
/* same rules for the 3D planet canvases (planets v2 swaps ![]()
for