/* Family Quest launch kit: bold game shapes, familiar warm palette. */
.welcome-page { --launch-ink:#203f39; background:#f6f2e8; color:var(--launch-ink); min-height:100svh; overflow-x:hidden; }
.welcome-page [hidden] { display:none!important; }
.welcome-header { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1060px; padding:calc(24px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left)); margin:auto; }
.welcome-header button,.welcome-back { background:transparent; border:1px solid #24483f30; border-radius:24px; padding:11px 16px; font:inherit; color:inherit; cursor:pointer; min-height:44px; }
.welcome-shell { position:relative; z-index:1; width:min(760px,100%); margin:10px auto 0; padding:0 24px 30px; }
.launch-map { display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.launch-map span { opacity:.45; }
.launch-map .active { opacity:1; color:#246651; }
.launch-progress { height:8px; border-radius:20px; background:#203f3910; margin:12px 0 26px; overflow:hidden; }
.launch-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,#75a98b,#edbd52); transition:width .6s cubic-bezier(.2,.8,.2,1); }
.welcome-stage { position:relative; padding:30px; border:2px solid #203f391c; border-radius:30px; background:#fffdf6f5; box-shadow:0 8px 0 #203f390c,0 22px 65px #203f390b; animation:stage-enter .5s cubic-bezier(.2,.8,.2,1) both; }
.welcome-stage h1 { font-size:clamp(30px,6.2vw,52px); line-height:1.06; letter-spacing:-.055em; margin:10px 0 16px; max-width:100%; overflow-wrap:anywhere; }
.welcome-stage h1:focus { outline:none; }
.welcome-stage h2 { font-size:22px; margin:8px 0; }
.welcome-stage p { line-height:1.6; margin:10px 0 18px; }
.launch-kicker { font-size:11px; font-weight:900; letter-spacing:.14em; color:#6b786b; text-transform:uppercase; }
.launch-intro { text-align:center; }
.launch-hero { height:184px; position:relative; display:grid; place-items:center; isolation:isolate; margin:0 auto 12px; }
.launch-planet { position:absolute; width:158px; height:158px; border-radius:50%; background:linear-gradient(140deg,#f5d373,#edae57); box-shadow:inset -18px -12px 0 #bd632822,0 0 0 14px #f1c45320; animation:planet-bob 4s ease-in-out infinite; }
.launch-planet::after { content:""; position:absolute; inset:54px -34px; border:8px solid #689b824d; border-top-color:#366c57; border-radius:50%; transform:rotate(-25deg); z-index:-1; }
.launch-rocket { font-size:83px; display:block; animation:rocket-swoop 1s cubic-bezier(.22,1,.36,1) both,rocket-hover 3s 1s ease-in-out infinite; filter:drop-shadow(0 8px 0 #203f3920); }
.launch-tag { position:absolute; border:2px solid #203f39; background:#fffdf6; padding:6px 12px; border-radius:10px; font-weight:900; font-size:12px; transform:rotate(-9deg); left:9%; bottom:26px; box-shadow:3px 3px 0 #203f39; animation:tag-pop .5s .45s both; }
.launch-tag.right { left:auto; right:4%; bottom:auto; top:20px; transform:rotate(8deg); background:#cce8d4; animation-delay:.7s; }
.launch-stats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:20px 0; }
.launch-stats span { background:#f1eee2; border-radius:20px; padding:7px 13px; font-size:12px; font-weight:750; }
.welcome-stage .primary-button { min-height:54px; width:100%; justify-content:center; gap:10px; margin-top:12px; box-shadow:0 5px 0 #142f29; font-size:17px; }
.welcome-stage .primary-button:active { transform:translateY(3px); box-shadow:0 2px 0 #142f29; }
.welcome-stage .primary-button:disabled { opacity:.65; cursor:wait; }
.welcome-stage form { display:grid; gap:14px; }
.welcome-field { display:grid; gap:7px; font-weight:750; font-size:14px; }
.welcome-field input,.welcome-field select { width:100%; min-width:0; min-height:50px; border:1.5px solid #203f3933; border-radius:13px; padding:12px 14px; font:inherit; font-size:16px; background:white; color:#203f39; }
.welcome-field small,.welcome-hint { font-size:12px; font-weight:450; line-height:1.6; color:#596d64; }
.welcome-check { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; padding:10px 0; cursor:pointer; }
.welcome-check input { flex:none; width:22px; height:22px; margin:0; accent-color:#326e58; }
.welcome-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.welcome-panel { border:1.5px solid #203f3925; background:#fff; border-radius:19px; padding:18px; margin:14px 0; min-width:0; }
.welcome-panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.welcome-panel-head button { min-height:44px; padding:8px; background:transparent; border:0; color:#8b4037; text-decoration:underline; cursor:pointer; }
.welcome-pill { display:inline-block; padding:6px 11px; background:#dcecdf; border-radius:10px; font-size:12px; font-weight:800; }
.welcome-add { border:2px dashed #203f3933; border-radius:14px; background:transparent; color:#203f39; padding:13px; font:inherit; font-weight:750; min-height:48px; cursor:pointer; }
.welcome-add-actions { display:flex; flex-wrap:wrap; gap:10px; }
.welcome-avatar-options { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; }
.welcome-avatar-options button { width:46px; height:46px; padding:0; background:#f6f2e8; border:2px solid transparent; border-radius:13px; font-size:25px; cursor:pointer; }
.welcome-avatar-options button[aria-pressed=true] { border-color:#246651; background:#dcecdf; transform:rotate(-5deg); box-shadow:2px 3px 0 #246651; }
.welcome-category { display:flex; align-items:center; gap:10px; padding:9px 0; }
.welcome-category input[type=checkbox] { width:22px; height:22px; accent-color:#326e58; flex:none; }
.welcome-category input[type=text] { flex:1; min-width:0; min-height:46px; font-size:16px; padding:9px 12px; border:1px solid #203f392e; border-radius:12px; }
.recovery-code { display:block; font-family:ui-monospace,monospace; font-size:clamp(16px,3.8vw,24px); font-weight:750; padding:20px 12px; background:#203f39; color:#fff4c3; border-radius:16px; text-align:center; overflow-wrap:anywhere; user-select:all; line-height:1.7; }
.welcome-warning { background:#fff1cf; border-left:4px solid #e6b640; padding:13px 15px; border-radius:0 10px 10px 0; font-size:14px; }
.welcome-links { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:22px; }
.welcome-links a,.welcome-footer a { color:#285c4a; text-underline-offset:4px; min-height:44px; display:inline-flex; align-items:center; }
.welcome-footer { max-width:760px; padding:0 24px max(22px,env(safe-area-inset-bottom)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; color:#65756c; }
.launch-sky { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.launch-sky>i { position:absolute; font-style:normal; color:#e6b85a; font-size:35px; left:8%; top:18%; animation:star-drift 7s ease-in-out infinite; }
.launch-sky>i:nth-child(2) { left:88%; top:32%; color:#e97161; animation-delay:-2s; }
.launch-sky>i:nth-child(3) { left:4%; top:72%; color:#75a98b; animation-delay:-4s; }
.launch-sky>i:nth-child(4) { left:85%; top:76%; color:#5c8fb8; animation-delay:-1s; }
.launch-sky>i:nth-child(5) { left:75%; top:10%; animation-delay:-3s; }
.launch-sky>i:nth-child(6) { left:25%; top:90%; animation-delay:-5s; }
.launch-orbit { position:absolute; width:850px; height:850px; border:1px dashed #203f3912; border-radius:50%; top:10%; left:calc(50% - 425px); animation:orbit-spin 100s linear infinite; }
.demo-arena { position:relative; padding:24px; border:3px solid #203f39; border-radius:23px; margin:18px 0; background:linear-gradient(150deg,#def1e3,#fff1be); box-shadow:5px 6px 0 #203f39; overflow:hidden; text-align:center; }
.demo-arena::before { content:""; position:absolute; inset:-50%; background:repeating-conic-gradient(from 0deg,#fff7 0deg 8deg,transparent 8deg 25deg); opacity:0; pointer-events:none; }
.demo-arena.hit::before { animation:demo-rays 1.4s ease-out; }
.demo-arena>* { position:relative; }
.demo-avatar { font-size:54px; display:block; margin:10px; }
.demo-arena.hit .demo-avatar { animation:demo-impact .8s both; }
.demo-score { font-size:56px; font-weight:950; letter-spacing:-.06em; display:block; line-height:1; }
.demo-meter { height:15px; background:#203f3922; margin:18px 0; border:2px solid #203f39; border-radius:12px; overflow:hidden; }
.demo-meter i { display:block; height:100%; width:40%; background:#e9af36; transition:width .65s cubic-bezier(.2,.9,.3,1); }
.demo-caption { font-size:13px; display:block; line-height:1.6; margin:16px 0 0; min-height:44px; }
.demo-award { display:block; font-size:34px; font-weight:950; color:#254e3f; min-height:40px; }
.demo-arena.hit .demo-award { animation:reward-slam .65s both; }
.demo-dots { display:flex; gap:7px; justify-content:center; margin:16px; }
.demo-dots i { width:8px; height:8px; background:#203f3926; border-radius:50%; }
.demo-dots i.active { width:25px; background:#2f6854; }
.demo-points { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:16px 0; }
.demo-points button { min-width:48px; min-height:48px; padding:8px 12px; border:2px solid #203f39; border-radius:12px; background:#fff9e9; color:#203f39; font:inherit; font-size:16px; font-weight:850; cursor:pointer; touch-action:manipulation; }
.demo-points button[aria-pressed=true] { background:#203f39; color:#fff1be; box-shadow:0 3px 0 #e6b640; }
.launch-particle { position:fixed; left:50%; top:48%; width:12px; height:12px; background:var(--particle-color); pointer-events:none; border-radius:3px; z-index:50; animation:launch-burst 1s cubic-bezier(.12,.6,.25,1) forwards; }
.install-steps { padding-left:22px; line-height:1.7; }
.install-steps li { margin:10px 0; }
.launch-ready { font-size:85px; text-align:center; animation:tag-pop .7s both; }
/* Tutorial cinematics live in the dialog top layer, never in the scrolling card. */
dialog.tutorial-fx { --fx-accent:#f9d66d; --fx-secondary:#e97161; position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; border:0; padding:0; border-radius:0; overflow:hidden; overscroll-behavior:none; background:#102d29; color:#fff8df; color-scheme:dark; }
dialog.tutorial-fx[open] { animation:none; }
.tutorial-fx::backdrop { background:#102d29; }
.tutorial-fx-quest { --fx-accent:#a2efbe!important; --fx-secondary:#79c3ef!important; }
.tutorial-fx-super { --fx-accent:#f9d66d!important; --fx-secondary:#ba90f5!important; }
.tutorial-fx-launch { --fx-accent:#79c3ef!important; --fx-secondary:#a2efbe!important; }
.tfx-camera { position:absolute; inset:-28px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 45%,#315f51 0%,#163a32 38%,#0b2524 78%); animation:tfx-camera-impact .62s .46s both; }
.tutorial-fx-super .tfx-camera { background:radial-gradient(ellipse at 50% 45%,#624c65 0%,#303645 42%,#112a2a 80%); animation-name:tfx-super-impact; animation-duration:.85s; }
.tfx-grid { position:absolute; inset:-30%; background-image:linear-gradient(#a2efbe15 1px,transparent 1px),linear-gradient(90deg,#a2efbe15 1px,transparent 1px); background-size:60px 60px; transform:perspective(600px) rotateX(25deg); animation:tfx-grid-rush 2.5s ease-out both; }
.tfx-beams { position:absolute; width:180vmax; height:180vmax; left:calc(50% - 90vmax); top:calc(46% - 90vmax); background:repeating-conic-gradient(from -12deg,transparent 0deg 19deg,#c2f5b918 19deg 25deg,transparent 25deg 40deg); animation:tfx-beam-turn 3.5s .36s ease-out both; }
.tutorial-fx-super .tfx-beams { background:repeating-conic-gradient(from 5deg,transparent 0deg 15deg,#efc8ff20 15deg 24deg,transparent 24deg 40deg); }
.tfx-glow { position:absolute; inset:0; background:radial-gradient(circle at 50% 46%,#ffe99b80,transparent 65%); opacity:0; animation:tfx-single-glow .95s .43s both; }
.tfx-speed,.tfx-rings,.tfx-fragments { position:absolute; inset:0; pointer-events:none; }
.tfx-speed i { position:absolute; left:50%; top:46%; width:48vmax; height:3px; background:linear-gradient(90deg,transparent,var(--fx-accent)); transform-origin:0 50%; opacity:0; animation:tfx-speedline .72s var(--delay) cubic-bezier(.15,.65,.3,1) both; }
.tfx-rings i { position:absolute; width:200px; height:200px; top:calc(46% - 100px); left:calc(50% - 100px); border:5px solid var(--fx-accent); border-radius:50%; opacity:0; animation:tfx-shockwave 1.15s .45s cubic-bezier(.08,.6,.18,1) both; }
.tfx-rings i:nth-child(2) { border-width:2px; border-color:var(--fx-secondary); animation-delay:.58s; }
.tfx-rings i:nth-child(3) { border-width:10px; animation-delay:.72s; }
.tfx-fragments i { position:absolute; left:50%; top:46%; width:12px; height:18px; background:var(--color); font-style:normal; border-radius:2px; opacity:0; animation:tfx-fragment-flight 1.65s var(--delay) cubic-bezier(.05,.55,.2,1) both; }
.tfx-fragments i:nth-child(3n + 1) { background:none; font-size:26px; color:var(--color); width:26px; height:26px; }
.tfx-content { position:absolute; inset:28px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; padding:calc(26px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) calc(94px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); text-align:center; pointer-events:none; }
.tfx-kicker { margin:0; font-size:clamp(10px,2.8vw,13px); font-weight:850; letter-spacing:.17em; color:#cfdfcb; animation:tfx-label-in .35s .12s both; }
.tfx-emblem { width:clamp(80px,23vw,140px); height:clamp(80px,23vw,140px); display:grid; place-items:center; border:3px solid var(--fx-accent); border-radius:28%; background:#1b3d32; box-shadow:7px 8px 0 #071d1b,0 0 0 8px #f9d66d10; font-size:clamp(46px,14vw,85px); color:var(--fx-accent); animation:tfx-emblem-charge .92s both; }
.tutorial-fx-super .tfx-emblem { animation:tfx-super-charge 1.2s both; }
.tutorial-fx-launch .tfx-emblem { animation:tfx-rocket-launch 2s both; }
.tfx-title { display:block; margin:0; font-size:clamp(100px,34vw,250px); line-height:1; letter-spacing:-.07em; font-weight:1000; color:var(--fx-accent); text-shadow:0 7px 0 #092420,5px 10px 0 #092420; -webkit-text-stroke:2px #16342b; animation:tfx-title-slam .66s .42s both; }
.tutorial-fx-super .tfx-title { font-size:clamp(62px,22vw,174px); letter-spacing:-.065em; -webkit-text-stroke:1px #594323; }
.tutorial-fx-launch .tfx-title { font-size:clamp(100px,32vw,220px); }
.tfx-subtitle { margin:0; width:min(700px,100%); font-size:clamp(20px,6vw,42px); font-weight:950; line-height:1.07; letter-spacing:-.035em; text-wrap:balance; text-shadow:0 3px 0 #0b2524; animation:tfx-label-in .38s .76s both; }
.tfx-detail { margin:5px 0 0; width:min(520px,100%); color:#e6edda; font-size:clamp(13px,3.7vw,17px); line-height:1.45; animation:tfx-label-in .35s 1s both; }
.tfx-stamp { margin-top:12px; padding:9px 17px; background:var(--fx-accent); color:#183b2f; border:2px solid #183b2f; border-radius:8px; box-shadow:4px 4px 0 #071d1b; font-size:12px; font-weight:950; letter-spacing:.1em; transform:rotate(-7deg); animation:tfx-stamp-hit .45s 1.2s both; }
.tfx-slash { position:absolute; left:-15%; width:130%; height:18vh; background:var(--fx-accent); transform:rotate(-12deg); opacity:0; animation:tfx-slash .5s both; pointer-events:none; }
.tfx-slash-top { top:-7%; }
.tfx-slash-bottom { bottom:-7%; animation-direction:reverse; animation-delay:.12s; }
.tfx-controls { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:14px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); color:#d8e4d3; background:linear-gradient(transparent,#0b2524e8); }
.tfx-controls>span { font-size:9px; font-weight:800; letter-spacing:.09em; }
.tfx-skip { min-height:44px; padding:10px 16px; border:1px solid #d2ead35c; border-radius:24px; background:#193c32; color:#fff8df; font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.tfx-skip:focus-visible { outline:3px solid var(--fx-accent); outline-offset:4px; }
dialog.tutorial-fx.tfx-leaving[open] { animation:tfx-exit .3s ease-in forwards; pointer-events:none; }
.tutorial-fx.tfx-leaving::backdrop { animation:tfx-backdrop-exit .3s ease-in forwards; }
@keyframes tfx-camera-impact { 0%,100% { transform:none; } 12% { transform:translate(-12px,7px) rotate(-1deg) scale(1.025); } 26% { transform:translate(11px,-6px) rotate(.8deg); } 42% { transform:translate(-8px,4px); } 60% { transform:translate(5px,-2px); } 78% { transform:translate(-2px,1px); } }
@keyframes tfx-super-impact { 0%,100% { transform:none; } 10% { transform:translate(-16px,9px) rotate(-1.2deg) scale(1.04); } 22% { transform:translate(15px,-8px) rotate(1deg); } 36% { transform:translate(-11px,6px) rotate(-.6deg); } 52% { transform:translate(8px,-4px); } 68% { transform:translate(-4px,2px); } 84% { transform:translate(2px,-1px); } }
@keyframes tfx-grid-rush { from { opacity:0; transform:perspective(600px) rotateX(30deg) scale(.6); } 25% { opacity:1; } to { opacity:.5; transform:perspective(600px) rotateX(15deg) scale(1.3); } }
@keyframes tfx-beam-turn { from { opacity:0; transform:rotate(-28deg) scale(.6); } 15% { opacity:1; } to { opacity:.7; transform:rotate(35deg) scale(1.1); } }
@keyframes tfx-single-glow { from { opacity:0; } 25% { opacity:.6; } to { opacity:0; } }
@keyframes tfx-speedline { from { opacity:0; transform:rotate(var(--angle)) translateX(10px) scaleX(.1); } 20% { opacity:.8; } to { opacity:0; transform:rotate(var(--angle)) translateX(80vmax) scaleX(1.4); } }
@keyframes tfx-shockwave { from { opacity:.9; transform:scale(.15); } to { opacity:0; transform:scale(8); } }
@keyframes tfx-fragment-flight { from { opacity:1; transform:translate(0,0) rotate(0) scale(.1); } 15% { opacity:1; } to { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(1.1); } }
@keyframes tfx-emblem-charge { from { opacity:0; transform:scale(.1) rotate(-35deg); } 43% { opacity:1; transform:scale(.8) rotate(-9deg); } 58% { transform:scale(1.28) rotate(8deg); } 78% { transform:scale(.92) rotate(-4deg); } to { transform:none; opacity:1; } }
@keyframes tfx-super-charge { from { opacity:0; transform:scale(.15) rotate(-25deg); } 25% { opacity:1; transform:scale(.85) rotate(-8deg); } 38% { transform:scale(.95) rotate(8deg); } 48% { transform:scale(.78) rotate(-5deg); } 60% { transform:scale(1.5) rotate(10deg); } 80% { transform:scale(.9) rotate(-3deg); } to { transform:none; opacity:1; } }
@keyframes tfx-title-slam { from { opacity:0; transform:scale(3.4) rotate(-16deg) translateY(-40px); } 52% { opacity:1; transform:scale(.86) rotate(4deg); } 76% { transform:scale(1.07) rotate(-2deg); } to { opacity:1; transform:none; } }
@keyframes tfx-label-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes tfx-stamp-hit { from { opacity:0; transform:scale(2.5) rotate(-20deg); } 55% { opacity:1; transform:scale(.9) rotate(-4deg); } to { opacity:1; transform:rotate(-7deg); } }
@keyframes tfx-slash { 0% { opacity:1; transform:translateX(-90%) rotate(-12deg); } 60% { opacity:1; } 100% { opacity:0; transform:translateX(90%) rotate(-12deg); } }
@keyframes tfx-rocket-launch { from { opacity:0; transform:translate(-30vw,30vh) scale(.2) rotate(-35deg); } 40% { opacity:1; transform:translate(0,0) scale(1.15) rotate(8deg); } 62% { transform:translate(0,0) scale(1) rotate(-4deg); } to { opacity:0; transform:translate(45vw,-70vh) scale(.4) rotate(20deg); } }
@keyframes tfx-exit { to { opacity:0; transform:scale(1.08); } }
@keyframes tfx-backdrop-exit { to { opacity:0; } }
.tutorial-fx[data-reward-level] .tfx-camera { animation:reward-power-kick .42s .44s var(--reward-waves) both; }
.tutorial-fx[data-reward-level] .tfx-title { animation-name:reward-power-slam; }
.tutorial-fx .tfx-content { z-index:2; }
.tutorial-fx[data-reward-level="6"] .tfx-fragments i:nth-child(3n + 1) { font-size:34px; }
@media(max-height:600px) {
  .tfx-content { gap:5px; padding-top:20px; padding-bottom:76px; }
  .tfx-emblem { width:60px; height:60px; font-size:36px; border-radius:18px; }
  .tfx-title,.tutorial-fx-launch .tfx-title { font-size:min(25vh,120px); }
  .tutorial-fx-super .tfx-title { font-size:min(20vh,96px); }
  .tfx-subtitle { font-size:23px; }
  .tfx-kicker { font-size:9px; }
  .tfx-detail { font-size:12px; }
  .tfx-stamp { margin-top:5px; padding:5px 10px; font-size:10px; }
}
.welcome-page.calm *, .welcome-page.calm *::before,.welcome-page.calm *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@keyframes stage-enter { from { opacity:0; transform:translateY(20px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes planet-bob { 50% { transform:translateY(-8px) rotate(5deg); } }
@keyframes rocket-swoop { from { transform:translate(-160px,110px) rotate(-30deg) scale(.25); opacity:0; } to { transform:none; opacity:1; } }
@keyframes rocket-hover { 50% { transform:translate(6px,-8px) rotate(5deg); } }
@keyframes tag-pop { from { opacity:0; scale:.3; } 70% { scale:1.12; } to { opacity:1; scale:1; } }
@keyframes star-drift { 50% { transform:translateY(-18px) rotate(20deg); } }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@keyframes demo-impact { 20% { transform:scale(.8) rotate(-12deg); } 50% { transform:scale(1.28) rotate(10deg); } to { transform:none; } }
@keyframes reward-slam { from { transform:scale(2.1) rotate(-10deg); opacity:0; } 55% { transform:scale(.9) rotate(4deg); opacity:1; } to { transform:none; opacity:1; } }
@keyframes demo-rays { 15% { opacity:.75; } to { opacity:0; transform:rotate(65deg); } }
@keyframes launch-burst { from { transform:translate(0,0) rotate(0); opacity:1; } to { transform:translate(var(--dx),var(--dy)) rotate(var(--spin)); opacity:0; } }
@media(max-width:600px) {
  .welcome-header { padding:16px; align-items:flex-start; }
  .welcome-header .brand small { max-width:190px; font-size:10px; }
  .welcome-header button { font-size:11px; padding:9px 11px; white-space:nowrap; }
  .welcome-shell { padding:0 14px 25px; }
  .welcome-stage { padding:22px 18px; border-radius:23px; }
  .launch-map { font-size:9px; letter-spacing:0; gap:5px; }
  .welcome-grid { grid-template-columns:1fr; }
  .welcome-panel { padding:14px; }
  .welcome-footer { flex-direction:column; gap:0; align-items:center; text-align:center; }
  .welcome-header .brand { gap:7px; }
  .welcome-header .brand-mark { width:34px; height:34px; flex:none; }
  .launch-tag { left:0; } .launch-tag.right { right:0; }
  .demo-arena { padding:20px 14px; }
}
@media(prefers-reduced-motion:reduce) {
  .welcome-page *, .welcome-page *::before,.welcome-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}