/* あなた、何世代？ — renewal: travel through the eras with "ときまる" (mobile first) */
:root{
  --ink:#1d2340;--ink2:#454a63;--muted:#5f6480;--bg:#f6f3ec;--card:#fff;--line:#e3e1d8;
  --s:#c8553d;--s-soft:#fbe6dc;--h:#2f80c7;--h-soft:#dcecfa;--r:#7c5cc4;--r-soft:#ebe4fa;--gold:#f2b705;
  --zone:#f6f3ec;--zone2:#efe9dc;--accent:var(--ink);--accent-soft:#eceef5;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
}
html[data-zone=s],html[data-era=s]{--zone:#fdf0e6;--zone2:#f6d9c6}
html[data-zone=h],html[data-era=h]{--zone:#eaf3fc;--zone2:#cfe3f6}
html[data-zone=r],html[data-era=r]{--zone:#f2eefc;--zone2:#ddd2f6}
html[data-era=sh]{--zone:#fbefe9;--zone2:#d8e6f6}
html[data-era=hr]{--zone:#ecf1fc;--zone2:#e0d6f7}
html[data-era=sr]{--zone:#fbefe9;--zone2:#e0d6f7}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);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}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.ic{display:block;width:100%;height:100%}

/* sky: the background colour follows the era zone of the journey */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 90% 60% at 50% 0%,var(--zone2),transparent 70%),linear-gradient(180deg,var(--zone),var(--bg));transition:background .6s}

.app{position:relative;z-index:1;width:100%;max-width:560px;margin:0 auto;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.screen{display:none}
.screen.is-active{display:block;animation:scr .28s ease both}
@keyframes scr{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* guide character */
.host-art{width:96px;flex:0 0 auto}
.host-art .chara{display:block;width:100%;height:auto;overflow:visible}
.host-art.jump .ch-body{animation:jump .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes jump{0%{transform:translateY(0) scale(1,1)}35%{transform:translateY(-8px) scale(.96,1.05)}70%{transform:translateY(0) scale(1.04,.96)}100%{transform:none}}
.ch-body{transform-origin:70px 130px}
.chara .fx-bob{animation:bob 1.6s ease-in-out infinite}
.chara .fx-pop{animation:fxpop .45s cubic-bezier(.3,1.6,.5,1) both;transform-origin:120px 20px}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes fxpop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.bubble{position:relative;margin:0;padding:10px 14px;border-radius:16px;background:#fff;border:2px solid var(--ink);font-size:14.5px;font-weight:700;line-height:1.6;box-shadow:0 6px 0 rgba(29,35,64,.12)}
.bubble b{color:var(--h)}
.bubble.pop{animation:bpop .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes bpop{from{transform:scale(.92)}to{transform:none}}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 20px;border:0;border-radius:18px;font-size:17px;font-weight:800;letter-spacing:.04em;transition:transform .12s,box-shadow .2s,background .2s}
.btn:active{transform:translateY(3px);box-shadow:none!important}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 5px 0 #0c1027}
.btn-sub{min-height:52px;background:#fff;border:2px solid var(--ink);color:var(--ink);font-size:15px;box-shadow:0 4px 0 rgba(29,35,64,.18)}
.btn-x{background:#000;color:#fff;box-shadow:0 5px 0 #444}
.x-mark{font-size:20px}
.btn-friend{flex-direction:column;gap:0;min-height:62px;background:linear-gradient(90deg,var(--s),var(--h),var(--r));color:#fff;box-shadow:0 5px 0 rgba(29,35,64,.35)}
.btn-friend small{font-size:12px;font-weight:700;opacity:.92}
.btn-mini{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:72px;padding:0 12px;border:2px solid var(--ink);border-radius:14px;background:#fff;font-size:14px;font-weight:800;box-shadow:0 3px 0 rgba(29,35,64,.18)}
.btn-mini:disabled{opacity:.35;cursor:default;box-shadow:none}
.btn-link{display:block;margin:6px auto 0;min-height:44px;padding:0 10px;border:0;background:none;font-size:14px;font-weight:800;color:var(--h);text-decoration:underline;text-underline-offset:4px}

/* ---------- title ---------- */
#screen-title{position:relative;padding-top:6px;text-align:center}
.parade{display:flex;gap:10px;width:max-content;margin:0 0 4px;animation:parade 26s linear infinite}
.parade span{display:block;width:38px;height:38px;flex:0 0 auto;opacity:.9;animation:bob 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.17s)}
@keyframes parade{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#screen-title .parade-wrap{overflow:hidden;margin:0 -16px}
.eras{display:flex;justify-content:center;gap:8px;margin:8px 0 6px}
.eras span{padding:2px 12px;border-radius:999px;font-size:13px;font-weight:800;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.e-s{background:var(--s)}.e-h{background:var(--h)}.e-r{background:var(--r)}
.logo{margin:0;line-height:1.12}
.logo span{display:block;font-size:22px;font-weight:800;color:var(--ink2)}
.logo .big{font-size:clamp(48px,15vw,68px);font-weight:900;letter-spacing:.02em;background:linear-gradient(90deg,var(--s),var(--h) 50%,var(--r));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{display:inline-block;margin-top:6px;padding:2px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;letter-spacing:.12em}
.host{display:flex;align-items:center;gap:10px}
.host-title{margin:14px auto 16px;max-width:420px;text-align:left}
.host-title .host-art{width:110px}
.host-title .bubble:before{content:'';position:absolute;left:-10px;top:50%;width:14px;height:14px;background:#fff;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.btn-start{max-width:420px;margin:0 auto;font-size:20px;min-height:62px}
.btn-start:not(:active){animation:breath 2.4s ease-in-out infinite}
@keyframes breath{50%{box-shadow:0 5px 0 #0c1027,0 0 0 6px rgba(242,183,5,.35)}}
.rules{list-style:none;margin:16px auto 4px;padding:10px 14px;max-width:420px;text-align:left;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:14px;font-size:13px;color:var(--ink2)}
.rules li{padding:2px 0 2px 22px;position:relative}
.rules li:before{content:'✓';position:absolute;left:2px;color:var(--h);font-weight:900}

/* ---------- play ---------- */
.play-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.progress-txt{display:flex;flex-direction:column;align-items:center;margin:0;line-height:1.15}
.progress-txt b{font-size:22px;font-weight:900;letter-spacing:.04em}
.progress-txt span{font-size:12.5px;font-weight:800;color:var(--muted)}
.track{margin:10px 0 8px}
.track ol{display:flex;align-items:center;justify-content:space-between;list-style:none;margin:0;padding:0 4px;position:relative}
.track ol:before{content:'';position:absolute;left:10px;right:10px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,var(--s),var(--h),var(--r));opacity:.35}
.track li{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px}
.track li i{display:block;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #c9c6bb;transition:all .3s}
.track li.z-s.done i{background:var(--s);border-color:var(--s)}.track li.z-h.done i{background:var(--h);border-color:var(--h)}.track li.z-r.done i{background:var(--r);border-color:var(--r)}
.track li.here i{width:20px;height:20px;border-color:var(--ink);background:var(--gold);box-shadow:0 0 0 5px rgba(242,183,5,.3);animation:here 1.4s ease-in-out infinite}
@keyframes here{50%{box-shadow:0 0 0 9px rgba(242,183,5,.1)}}
.track li.goal i{width:auto;height:auto;border:0;background:none;font-style:normal;font-size:16px;color:var(--gold);text-shadow:0 1px 0 var(--ink)}
.stage{position:relative;display:grid;grid-template-columns:1fr;gap:8px}
.scene{position:relative;height:52px;border-radius:14px;background:linear-gradient(90deg,var(--zone2),var(--zone));border:2px solid rgba(29,35,64,.12);overflow:hidden}
.zone{position:absolute;left:12px;top:50%;transform:translateY(-50%);margin:0;font-size:12.5px;font-weight:900;color:var(--ink2);z-index:1}
.scene-props{position:absolute;right:8px;top:0;bottom:0;display:flex;align-items:center;gap:6px}
.sp{display:block;width:36px;height:36px;animation:propin .5s cubic-bezier(.3,1.5,.5,1) both,bob 2.2s ease-in-out .5s infinite}
.sp1{animation-delay:.08s,.7s}.sp2{animation-delay:.16s,.9s}
@keyframes propin{from{transform:translateY(30px) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.host-play .host-art{width:64px}
.host-play .bubble{flex:1;font-size:14px;padding:8px 12px}
.host-play .bubble:before{content:'';position:absolute;left:-9px;top:50%;width:12px;height:12px;background:#fff;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.meter{display:grid;gap:3px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.9);border:1px solid var(--line)}
.m-row{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;font-size:12px;font-weight:900}
.m-row b{display:block;height:9px;border-radius:99px;background:#efede6;overflow:hidden}
.m-row i{display:block;height:100%;width:33%;border-radius:99px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.m-s span{color:var(--s)}.m-s i{background:var(--s)}
.m-h span{color:var(--h)}.m-h i{background:var(--h)}
.m-r span{color:var(--r)}.m-r i{background:var(--r)}
.meter.hit-s .m-s b,.meter.hit-h .m-h b,.meter.hit-r .m-r b{animation:hit .4s ease}
@keyframes hit{50%{box-shadow:0 0 0 3px rgba(242,183,5,.6);transform:scaleY(1.4)}}

.qwrap{perspective:900px;margin-top:10px}
.qcard{padding:16px 14px 14px;border-radius:22px;background:#fff;border:2px solid var(--ink);box-shadow:0 6px 0 rgba(29,35,64,.15)}
.qcard.in-slide{animation:inSlide .32s cubic-bezier(.2,.9,.3,1.1) both}
.qcard.in-flip{animation:inFlip .38s cubic-bezier(.2,.8,.3,1) both;transform-origin:50% 50%}
.qcard.in-zoom{animation:inZoom .32s cubic-bezier(.3,1.4,.5,1) both}
.qcard.in-drop{animation:inDrop .38s cubic-bezier(.3,1.4,.5,1) both}
.qcard.in-back{animation:inBack .3s ease both}
@keyframes inSlide{from{transform:translateX(60px) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
@keyframes inFlip{from{transform:rotateY(-70deg);opacity:0}to{transform:none;opacity:1}}
@keyframes inZoom{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes inDrop{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes inBack{from{transform:translateX(-50px);opacity:0}to{transform:none;opacity:1}}
.q-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.q-icon{width:40px;height:40px;flex:0 0 auto}
.q-topic{margin:0;padding:1px 10px;border-radius:999px;background:var(--zone2);font-size:12.5px;font-weight:900;color:var(--ink2)}
.q-text{margin:0 0 12px;font-size:clamp(19px,5.4vw,22px);font-weight:900;line-height:1.5;outline:0}
.choices{display:grid;gap:9px}
.choice{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:8px 12px 8px 8px;border:2px 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 rgba(29,35,64,.18);transition:transform .12s,box-shadow .12s,background .15s,opacity .2s}
.qcard[class*=in-] .choice{animation:cin .3s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
@keyframes cin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.choice:hover{background:#fffaf0}
.choice:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(29,35,64,.18)}
.c-ic{display:block;width:44px;height:44px;flex:0 0 auto;padding:3px;border-radius:12px;background:var(--zone)}
.c-t{flex:1;min-width:0}
.c-key{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#efede6;font-size:12px;font-weight:900;color:var(--ink2)}
.choice.picked{background:#fff5d6;animation:boing .34s cubic-bezier(.3,1.8,.5,1);box-shadow:0 0 0 4px rgba(242,183,5,.55),0 4px 0 rgba(29,35,64,.18)}
.choice.picked .c-key{background:var(--gold);color:var(--ink)}
.choice.away{opacity:.4;transform:scale(.97)}
@keyframes boing{0%{transform:scale(1)}40%{transform:scale(1.05) rotate(-1deg)}70%{transform:scale(.98)}100%{transform:scale(1)}}
.fly-layer{position:fixed;inset:0;pointer-events:none;z-index:50}
.flyer{position:fixed;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:900;color:#fff;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.f-s{background:var(--s)}.f-h{background:var(--h)}.f-r{background:var(--r)}

/* ---------- thinking & drum roll ---------- */
.think{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:72vh;text-align:center;cursor:pointer}
.host-art.big{width:170px}
.think-bubble{font-size:17px}
.roulette{display:flex;gap:8px}
.roulette span{padding:8px 16px;border-radius:14px;border:2px solid var(--ink);background:#fff;font-size:18px;font-weight:900;color:var(--ink2);transition:transform .2s,background .2s,color .2s}
.roulette.spin span{animation:ro .45s steps(1) infinite}
.roulette.spin .ro-h{animation-delay:.15s}.roulette.spin .ro-r{animation-delay:.3s}
@keyframes ro{0%{background:var(--gold);color:var(--ink);transform:translateY(-4px)}33%,100%{background:#fff;transform:none}}
.roulette.land-s .ro-s,.roulette.land-sh .ro-s,.roulette.land-sr .ro-s{background:var(--s);color:#fff;transform:scale(1.15)}
.roulette.land-h .ro-h,.roulette.land-sh .ro-h,.roulette.land-hr .ro-h{background:var(--h);color:#fff;transform:scale(1.15)}
.roulette.land-r .ro-r,.roulette.land-hr .ro-r,.roulette.land-sr .ro-r{background:var(--r);color:#fff;transform:scale(1.15)}
.btn-skip{margin-top:6px}

/* ---------- result ---------- */
#app[data-era=s]{--accent:var(--s);--accent-soft:var(--s-soft)}
#app[data-era=h]{--accent:var(--h);--accent-soft:var(--h-soft)}
#app[data-era=r]{--accent:var(--r);--accent-soft:var(--r-soft)}
#app[data-era=sh]{--accent:#8f5f7f;--accent-soft:#f3e8ef}
#app[data-era=hr]{--accent:#5568c4;--accent-soft:#e7e8fa}
#app[data-era=sr]{--accent:#a15b8e;--accent-soft:#f5e6f0}
.res-card{position:relative;overflow:hidden;padding:12px 16px 18px;border-radius:26px;background:#fff;border:2px solid var(--ink);box-shadow:0 8px 0 rgba(29,35,64,.15);text-align:center}
.burst{position:absolute;left:50%;top:92px;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:repeating-conic-gradient(var(--accent-soft) 0 12deg,transparent 12deg 24deg);opacity:.9;animation:spinb 30s linear infinite;pointer-events:none}
@keyframes spinb{to{transform:rotate(360deg)}}
.res-hero{position:relative;height:170px;margin:0 auto;width:min(300px,100%)}
.res-chara{position:absolute;left:50%;top:6px;width:140px;margin-left:-70px}
.res-props span{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px}
.res-big.long{font-size:clamp(30px,9vw,42px)}
.res-card.reveal .res-props span{animation:orbitIn .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes orbitIn{from{opacity:0;transform:scale(.2)}}
.res-kicker{position:relative;margin:4px 0 0;font-size:13px;font-weight:900;color:var(--muted);letter-spacing:.08em}
.res-title{position:relative;margin:2px 0 0;font-size:clamp(19px,5.6vw,24px);font-weight:900;line-height:1.4}
.res-big{position:relative;margin:4px 0 2px;font-size:clamp(40px,13vw,58px);font-weight:900;line-height:1.15;color:var(--accent);text-shadow:0 4px 0 var(--accent-soft)}
.res-card.reveal .res-big{animation:bigIn .55s .1s cubic-bezier(.3,1.6,.5,1) both}
@keyframes bigIn{from{transform:scale(.3) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.res-label{position:relative;margin:0;font-size:15px;font-weight:800;color:var(--ink2)}
.res-label strong{font-size:22px;color:var(--accent)}
.conf{position:relative;height:12px;margin:8px auto 14px;max-width:320px;border-radius:99px;background:#efede6;overflow:hidden;border:1.5px solid var(--ink)}
.conf i{display:block;height:100%;width:0;background:var(--accent);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.res-shares{position:relative;display:grid;gap:6px;margin:0 0 16px;text-align:left}
.res-shares div{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px}
.res-shares dt{font-size:13px;font-weight:900}
.res-shares dd{position:relative;margin:0;height:22px;border-radius:99px;background:#f1efe8;overflow:hidden}
.res-shares dd i{display:block;height:100%;border-radius:99px}
.res-shares dd b{position:absolute;right:8px;top:0;font-size:12.5px;line-height:22px}
.sh-s dt{color:var(--s)}.sh-s i{background:var(--s-soft);box-shadow:inset 0 0 0 1.5px var(--s)}
.sh-h dt{color:var(--h)}.sh-h i{background:var(--h-soft);box-shadow:inset 0 0 0 1.5px var(--h)}
.sh-r dt{color:var(--r)}.sh-r i{background:var(--r-soft);box-shadow:inset 0 0 0 1.5px var(--r)}
.res-h{position:relative;margin:0 0 8px;font-size:15px;font-weight:900}
.reasons{position:relative;list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;text-align:left}
.reasons li{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;background:#fff;border:2px solid var(--ink);box-shadow:0 3px 0 rgba(29,35,64,.12)}
.res-card.reveal .reasons li{animation:rsIn .4s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
@keyframes rsIn{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.rs-ic{width:44px;height:44px;flex:0 0 auto;padding:3px;border-radius:12px}
.rs-s .rs-ic{background:var(--s-soft)}.rs-h .rs-ic{background:var(--h-soft)}.rs-r .rs-ic{background:var(--r-soft)}
.rs-t{min-width:0}
.rs-topic{display:block;font-size:11.5px;font-weight:800;color:var(--muted)}
.reasons b{display:block;font-size:15.5px;line-height:1.45}
.reasons small{display:block;font-size:12px;font-weight:800}
.rs-s small{color:var(--s)}.rs-h small{color:var(--h)}.rs-r small{color:var(--r)}
.res-comment{position:relative;margin:0 0 10px;font-size:14.5px;line-height:1.85;text-align:left;color:var(--ink2)}
.res-note{position:relative;margin:0;font-size:11.5px;line-height:1.7;text-align:left;color:var(--muted)}

/* share */
.share{display:grid;gap:10px;margin-top:16px}
.share-help{margin:-2px 0 0;font-size:12px;color:var(--muted);text-align:center}
.preview{border:1px solid var(--line);border-radius:12px;background:#fff}
.preview summary{min-height:44px;padding:10px 14px;font-size:13.5px;font-weight:800;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;color:var(--ink2)}
.share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{margin:0;font-size:13.5px;font-weight:800;text-align:center;color:var(--ink);word-break:break-all}
.card-wrap{text-align:center}
.card-wrap img{width:100%;max-width:340px;border-radius:14px;border:2px solid var(--ink)}

.foot{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:6px 16px calc(18px + env(safe-area-inset-bottom));text-align:center;font-size:11.5px;color:var(--muted)}
.foot p{margin:2px 0}
.foot a{display:inline-block;padding:10px 4px;color:var(--muted)}

/* Japanese line breaks at phrase boundaries */
.q-text,.res-title,.bubble,.c-t,.reasons b,.res-comment,.rules li{word-break:auto-phrase;text-wrap:pretty}
.q-text,.res-title{text-wrap:balance}

@media (max-width:360px){
  .app{padding-left:12px;padding-right:12px}
  #screen-title .parade-wrap{margin:0 -12px}
  .choice{font-size:15px;min-height:58px}
  .c-ic{width:38px;height:38px}
  .host-title .host-art{width:90px}
  .host-title .bubble{font-size:13.5px}
  .share-row{grid-template-columns:1fr}
  .roulette span{padding:6px 12px;font-size:16px}
  .scene-props .sp2{display:none}
}
/* PC: wider stage, game column stays compact */
@media (min-width:900px){
  .app{max-width:980px;padding-top:24px}
  #screen-title{max-width:560px;margin:0 auto}
  #screen-title .parade-wrap{margin:0 -210px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
  #screen-play.is-active{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-areas:"top top" "track track" "stage q";column-gap:28px}
  .play-top{grid-area:top}.track{grid-area:track}
  .stage{grid-area:stage;align-content:start;position:sticky;top:20px}
  .qwrap{grid-area:q;margin-top:0}
  .scene{height:120px}
  .scene-props{left:0;right:0;justify-content:space-around;top:30px}
  .sp{width:52px;height:52px}
  .zone{top:16px;transform:none}
  .host-play{flex-direction:column;align-items:center;text-align:center}
  .host-play .host-art{width:150px}
  .host-play .bubble{width:100%}
  .host-play .bubble:before{left:50%;top:-9px;transform:translateX(-50%) rotate(135deg)}
  .qcard{padding:24px 24px 20px}
  .q-text{font-size:24px}
  #screen-result.is-active{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:28px;align-items:start}
  .share{margin-top:0;position:sticky;top:20px}
  .think{min-height:70vh}
  .host-art.big{width:220px}
  .foot{max-width:980px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .parade{width:auto;flex-wrap:wrap;justify-content:center}
  .parade .dup{display:none}
}