/* Little Astronaut — styles. Sizes use vmin/vh so it scales on any tablet. */
:root {
  --bg1: #0b1033;
  --ink: #ffffff;
  --accent: #ffd60a;
  --pink: #ef476f;
  --cyan: #4cc9f0;
  --card: rgba(255, 255, 255, .94);
  --card-ink: #1d1b4f;
  --fuel: #fb8500;
  --oxygen: #4cc9f0;
  --boost: #ffd60a;
  font-family: 'Fredoka', ui-rounded, 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; touch-action: manipulation; overscroll-behavior: none; }
body {
  color: var(--ink);
  background: radial-gradient(ellipse at 70% 15%, #2e2c72 0%, #0b1033 55%, #04061a 100%);
  background-color: var(--bg1);
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
svg { display: block; }
.emo-img { display: block; width: 1em; height: 1em; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.emo-img.inline { display: inline-block; vertical-align: -.18em; }
.mini-group .emo-img { width: 1.1em; height: 1.1em; }
.obj .emo-img, .choice .emo .emo-img, .mascot .emo-img, .g-icon .emo-img { width: 1.15em; height: 1.15em; }

#sky { position: fixed; inset: 0; pointer-events: none; }
.star-dot {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle var(--d) ease-in-out infinite alternate; animation-delay: var(--dl);
}
@keyframes twinkle { from { opacity: .15; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.active { display: block; animation: fadein .45s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.hidden { display: none !important; }

/* ---------- Title ---------- */
.title-wrap { height: 100%; display: flex; align-items: center; justify-content: center; gap: 6vw; padding: 0 5vw; }
.title-art { position: relative; width: 42vmin; height: 42vmin; flex: none; }
.title-planet { position: absolute; inset: 0; animation: float 5s ease-in-out infinite; }
.title-rocket { position: absolute; width: 12vmin; left: 50%; top: 50%; margin: -12vmin 0 0 -6vmin; animation: orbit 6s linear infinite; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(26vmin) rotate(90deg); }
  to { transform: rotate(360deg) translateX(26vmin) rotate(90deg); }
}
.logo {
  margin: 0; font-size: 12vmin; line-height: .95; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); text-shadow: 0 .8vmin 0 #e85d04, 0 1.6vmin 3vmin rgba(0,0,0,.5);
}
.play-btn {
  width: 22vmin; height: 22vmin; border-radius: 50%; flex: none;
  background: var(--pink); color: #fff; display: grid; place-items: center;
  box-shadow: 0 1.4vmin 0 #b5174a, 0 0 0 1.4vmin rgba(255,255,255,.15);
  animation: pulse 1.6s ease-in-out infinite;
}
.play-btn svg { width: 55%; height: 55%; }
.play-btn:active { transform: translateY(1vmin); box-shadow: 0 .4vmin 0 #b5174a; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6vmin); } }

/* ---------- Map ---------- */
#map-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-sun {
  position: absolute; width: 46vmin; height: 46vmin; left: -31vmin; top: 50%; transform: translateY(-50%);
}
.map-sun .sun-rays { transform-origin: 50px 50px; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-planet {
  position: absolute; width: var(--s); height: var(--s);
  transform: translate(-50%, -50%);
  animation: bob 4s ease-in-out infinite; animation-delay: var(--fd);
}
.map-planet .mp-art { position: absolute; inset: 0; filter: drop-shadow(0 0 1.6vmin rgba(255,255,255,.18)); }
.map-planet .mp-art svg { width: 100%; height: 100%; }
.map-planet .mp-name {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .2vmin;
  font-size: 2.7vmin; font-weight: 700; white-space: nowrap; color: rgba(255,255,255,.88);
  text-shadow: 0 .3vmin .6vmin rgba(0,0,0,.6);
}
.map-planet .mp-badge {
  position: absolute; right: -1vmin; top: -1vmin; font-size: 4.5vmin;
  filter: drop-shadow(0 .3vmin .4vmin rgba(0,0,0,.5)); animation: pulse 2s ease-in-out infinite;
}
.map-planet.done .mp-art { filter: drop-shadow(0 0 2.2vmin rgba(255,214,10,.55)); }
.map-planet.home .mp-name { color: #9ef01a; }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -1.2vmin; } }
.boing { animation: boing .5s ease !important; }
@keyframes boing {
  0% { scale: 1; } 30% { scale: 1.25; } 55% { scale: .92; } 80% { scale: 1.06; } 100% { scale: 1; }
}
.map-rocket {
  position: absolute; width: 6.5vmin; height: 13vmin; transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: transform .25s ease; pointer-events: none; z-index: 5;
  filter: drop-shadow(0 0 1vmin rgba(255,255,255,.35));
}
.map-rocket.moving { transition: left 1.4s cubic-bezier(.45,.05,.4,1), top 1.4s cubic-bezier(.45,.05,.4,1), transform .25s ease; }
.map-rocket .flame { opacity: 0; transition: opacity .2s; }
.map-rocket.moving .flame { opacity: 1; animation: flicker .12s infinite alternate; }
.sticker-bar {
  position: absolute; left: 50%; bottom: 2.5vh; transform: translateX(-50%);
  display: flex; gap: 1.4vmin; padding: 1.2vmin 2vmin; border-radius: 99px;
  background: rgba(255,255,255,.08); border: .3vmin solid rgba(255,255,255,.15);
}
.sticker-bar .mini { width: 5.5vmin; height: 5.5vmin; opacity: .22; filter: grayscale(1); transition: all .4s; }
.sticker-bar .mini.got { opacity: 1; filter: none; }
.sticker-bar svg { width: 100%; height: 100%; }

/* ---------- Corner / hold buttons ---------- */
.corner-btn {
  position: absolute; width: 8vmin; height: 8vmin; border-radius: 50%;
  display: grid; place-items: center; font-size: 4vmin;
  background: rgba(255,255,255,.1); border: .3vmin solid rgba(255,255,255,.2);
  z-index: 20; opacity: .6;
}
.corner-btn span { position: relative; z-index: 1; }
.corner-btn::after {
  content: ''; position: absolute; inset: -.6vmin; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
          mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.corner-btn.holding { opacity: 1; }
#btn-parent { right: 2vmin; top: 2vmin; }
#btn-home-flight { left: 2vmin; top: 2vmin; }

/* ---------- Flight ---------- */
#screen-flight { background: linear-gradient(#04061a, #11134a); }
#warp { position: absolute; inset: 0; width: 100%; height: 100%; }
.flight-target {
  position: absolute; left: 50%; top: 40%; width: 60vmin; height: 60vmin;
  transform: translate(-50%, -50%) scale(.04); opacity: 0;
}
.flight-target.approach { transition: transform 2.3s cubic-bezier(.5,0,.8,.5), opacity .6s; transform: translate(-50%, -50%) scale(1); opacity: 1; }
.flight-target svg { width: 100%; height: 100%; }
.flight-rocket {
  position: absolute; left: 50%; bottom: 6vh; width: 14vmin; height: 29vmin; transform: translateX(-50%);
  transition: bottom 1.4s cubic-bezier(.5,0,.3,1), transform .9s ease, opacity .9s;
  z-index: 3;
}
.flight-rocket .flame { opacity: .25; transform-origin: 30px 96px; }
.flight-rocket.launch { bottom: 30vh; animation: shake .09s linear infinite; }
.flight-rocket.launch .flame { opacity: 1; animation: flicker .1s infinite alternate; transform: scaleY(1.6); }
.flight-rocket.land { transform: translateX(-50%) scale(.2); opacity: 0; }
@keyframes flicker { from { transform: scaleY(1.2); } to { transform: scaleY(1.8); } }
@keyframes shake { 0% { margin-left: -.3vmin; } 50% { margin-left: .3vmin; } 100% { margin-left: -.3vmin; } }
.countdown {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-size: 34vmin; font-weight: 700; color: var(--accent); opacity: 0;
  text-shadow: 0 1vmin 0 #e85d04, 0 0 6vmin rgba(255,214,10,.5); z-index: 4; white-space: nowrap;
}
.countdown.small { font-size: 16vmin; }
.countdown.show { opacity: 1; }
.countdown.pop { animation: countpop .9s ease; }
@keyframes countpop { 0% { transform: translate(-50%, -50%) scale(.3); } 35% { transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -50%) scale(1); } }

/* ---------- Planet screen ---------- */
#screen-planet { background: linear-gradient(var(--sky1, #0b1033), var(--sky2, #2a2d4a)); }
.ground {
  position: absolute; left: -30vw; right: -30vw; bottom: -58vh; height: 85vh; border-radius: 50%;
  background:
    radial-gradient(circle at 22% 18%, var(--ground2) 0 2.4vmin, transparent 2.6vmin),
    radial-gradient(circle at 60% 10%, var(--ground2) 0 3.4vmin, transparent 3.6vmin),
    radial-gradient(circle at 78% 22%, var(--ground2) 0 2vmin, transparent 2.2vmin),
    radial-gradient(circle at 40% 26%, var(--ground2) 0 1.5vmin, transparent 1.7vmin),
    var(--ground);
  box-shadow: 0 -2vmin 8vmin rgba(255,255,255,.12), inset 0 3vmin 6vmin rgba(255,255,255,.15);
}
.astro { position: absolute; left: 3vw; bottom: 9vh; font-size: 15vmin; animation: float 3.5s ease-in-out infinite; pointer-events: none; }
.planet-deco {
  position: absolute; right: 2.5vw; top: 15vh; width: 15vmin; height: 15vmin; opacity: 0;
  transition: opacity .6s; pointer-events: none; animation: float 6s ease-in-out infinite;
}
.planet-deco.show { opacity: .95; }
.planet-deco svg { width: 100%; height: 100%; }

.topbar {
  position: absolute; left: 0; right: 0; top: 0; height: 13vh; z-index: 10;
  display: flex; align-items: center; gap: 2vw; padding: 0 2vmin;
}
.topbar .corner-btn { position: relative; flex: none; }
.gauges { flex: 1; display: flex; justify-content: center; gap: 2.5vw; }
.gauge { display: flex; align-items: center; gap: 1vmin; }
.g-icon { font-size: 5vmin; width: 6.5vmin; height: 6.5vmin; display: grid; place-items: center; }
.g-icon.o2 { display: flex; align-items: baseline; justify-content: center; padding-top: 1.2vmin; font-size: 3.2vmin; font-weight: 700; border-radius: 50%; background: var(--oxygen); color: #05324a; }
.g-icon.o2 sub { font-size: .6em; line-height: 0; vertical-align: baseline; }
.g-bar {
  position: relative; width: 15vw; height: 4.6vmin; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.14); border: .4vmin solid rgba(255,255,255,.55);
}
.g-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; transition: width 1s cubic-bezier(.3,1.4,.5,1); }
.g-bar b {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2vmin; letter-spacing: .1em;
  color: rgba(255,255,255,.85); text-shadow: 0 .2vmin .4vmin rgba(0,0,0,.6);
}
.g-fuel .g-bar i { background: linear-gradient(90deg, #f77f00, #fcbf49); }
.g-oxygen .g-bar i { background: linear-gradient(90deg, #00b4d8, #90e0ef); }
.g-boost .g-bar i { background: linear-gradient(90deg, #ffbe0b, #fff3b0); }
.gauge.full .g-bar i { width: 100%; }
.gauge.full .g-bar { border-color: #fff; box-shadow: 0 0 2vmin rgba(255,255,255,.5); }
.gauge.full .g-icon { animation: boing .6s ease; }

.speak-btn {
  flex: none; width: 10vmin; height: 10vmin; border-radius: 50%; font-size: 5vmin;
  background: var(--card); box-shadow: 0 .8vmin 0 rgba(0,0,0,.25); display: grid; place-items: center;
}
.speak-btn:active { transform: translateY(.6vmin); box-shadow: 0 .2vmin 0 rgba(0,0,0,.25); }

/* intro */
.intro {
  position: absolute; inset: 13vh 0 0 0; z-index: 8; display: none;
  flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 8vw 6vh;
}
.intro.show { display: flex; }
.intro-planet { width: 44vmin; height: 44vmin; animation: zoomin .9s cubic-bezier(.3,1.5,.5,1); }
.intro-planet svg { width: 100%; height: 100%; }
.intro h2 { margin: 1vh 0 0; font-size: 9vmin; color: var(--accent); text-shadow: 0 .6vmin 0 rgba(0,0,0,.35); }
.intro p {
  margin: 1vh 0 0; font-size: 4vmin; max-width: 80vw; padding: 1.4vmin 3vmin; border-radius: 3vmin;
  background: rgba(0,0,0,.35);
}
@keyframes zoomin { from { transform: scale(.1) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* question */
.question {
  position: absolute; inset: 13vh 0 0 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; padding-bottom: 4vh;
}
.question.enter .q-stage, .question.enter .q-text { animation: slidein .5s ease both; }
@keyframes slidein { from { transform: translateY(-3vh); opacity: 0; } to { transform: none; opacity: 1; } }
.q-text {
  margin: 0; min-height: 6vh; font-size: 3.8vmin; font-weight: 700; text-align: center; padding: .8vmin 3vmin;
  border-radius: 99px; background: rgba(0,0,0,.28); max-width: 86vw;
}
.q-stage {
  flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 2vw;
  padding: 1vh 14vw;
}
.mascot { position: relative; font-size: 15vmin; animation: float 3s ease-in-out infinite; }
.mascot .bubble {
  position: absolute; right: -6vmin; top: -3vmin; width: 8vmin; height: 8vmin; border-radius: 50%;
  background: var(--card); color: var(--card-ink); font-size: 5.5vmin; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 .5vmin 0 rgba(0,0,0,.2);
}
.group { display: grid; grid-template-columns: repeat(var(--cols, 5), auto); gap: 1vmin 1.4vmin; justify-content: center; }
.group.boxed { padding: 1.5vmin 2vmin; border-radius: 3vmin; background: rgba(255,255,255,.1); border: .35vmin dashed rgba(255,255,255,.35); }
.op { font-size: 10vmin; font-weight: 700; color: var(--accent); text-shadow: 0 .5vmin 0 rgba(0,0,0,.35); }
.obj {
  position: relative; font-size: var(--os, 9vmin); line-height: 1.1; width: calc(var(--os) * 1.25); height: calc(var(--os) * 1.25);
  display: grid; place-items: center; border-radius: 50%;
  animation: popin .4s cubic-bezier(.3,1.6,.5,1) both;
}
.obj.counted { background: rgba(255,214,10,.28); box-shadow: 0 0 0 .5vmin rgba(255,214,10,.8); }
.obj.counted::after {
  content: attr(data-n); position: absolute; right: -.6vmin; top: -.6vmin; min-width: 4.4vmin; height: 4.4vmin; padding: 0 .8vmin;
  border-radius: 99px; background: var(--pink); color: #fff; font-size: 3vmin; font-weight: 700; display: grid; place-items: center;
  font-family: 'Fredoka', system-ui, sans-serif; animation: popin .3s ease both;
}
.obj.wiggle { animation: wiggle .4s ease; }
@keyframes popin { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 75% { rotate: 12deg; } }

.q-choices { display: flex; gap: 4vw; justify-content: center; align-items: center; }
.choice {
  width: 25vmin; height: 25vmin; border-radius: 4.5vmin; background: var(--card); color: var(--card-ink);
  display: grid; place-items: center; box-shadow: 0 1.2vmin 0 rgba(0,0,0,.28);
  animation: popin .45s cubic-bezier(.3,1.6,.5,1) both; transition: transform .12s, opacity .3s, filter .3s;
}
.q-choices.two .choice { width: 36vmin; }
.choice:active { transform: translateY(.8vmin) scale(.97); box-shadow: 0 .4vmin 0 rgba(0,0,0,.28); }
.choice svg { width: 78%; height: 78%; }
.choice .digit { font-size: 17vmin; font-weight: 700; line-height: 1; text-shadow: 0 .6vmin 0 rgba(0,0,0,.12); }
.choice .emo { font-size: 15vmin; line-height: 1; }
.choice .emo.big { font-size: 19vmin; }
.choice .emo.small { font-size: 7vmin; }
.mini-group { display: grid; grid-template-columns: repeat(var(--cols), auto); gap: .6vmin 1vmin; font-size: 5.2vmin; line-height: 1.15; }
.choice.wrong { animation: shake2 .45s ease; opacity: .3; filter: grayscale(1); pointer-events: none; }
.choice.right { animation: boing .6s ease; box-shadow: 0 0 0 1.2vmin var(--accent), 0 0 7vmin var(--accent); }
.choice.dim { opacity: .35; pointer-events: none; }
@keyframes shake2 { 0%, 100% { translate: 0; } 20% { translate: -2vmin; } 40% { translate: 2vmin; } 60% { translate: -1.4vmin; } 80% { translate: 1.4vmin; } }

/* ---------- Effects ---------- */
.spark {
  position: fixed; z-index: 60; pointer-events: none; font-size: 5vmin;
  transform: translate(-50%, -50%); animation: spark 1s ease-out forwards;
}
@keyframes spark {
  from { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); opacity: 0; }
}
.confetti {
  position: fixed; top: -3vh; width: 1.6vmin; height: 2.6vmin; border-radius: .4vmin; z-index: 60; pointer-events: none;
  animation: fall 2.5s linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(var(--rot)); } }

/* ---------- Reward ---------- */
.reward-wrap, .final-wrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
.sticker-big { position: relative; width: 44vmin; height: 44vmin; display: grid; place-items: center; }
.sticker-big .rays {
  position: absolute; inset: -14vmin; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,214,10,.28) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
          mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: spin 14s linear infinite;
}
.sticker-face {
  position: relative; width: 100%; height: 100%; border-radius: 50%; padding: 3vmin;
  background: radial-gradient(circle, #2e2c72, #14123d); border: 1.6vmin solid var(--accent);
  box-shadow: 0 0 0 1vmin #e85d04, 0 2vmin 5vmin rgba(0,0,0,.5);
  animation: zoomin 1s cubic-bezier(.3,1.5,.5,1);
}
.sticker-face svg { width: 100%; height: 100%; }
.reward-title { margin: 1vh 0 0; font-size: 8vmin; color: var(--accent); text-shadow: 0 .6vmin 0 #e85d04; }
.reward-gauges { display: flex; gap: 2vw; }
.pill { padding: 1vmin 2.4vmin; border-radius: 99px; font-size: 3vmin; font-weight: 700; color: #1d1b4f; animation: popin .5s both; }
.pill sub { font-size: .65em; }
.pill.fuel { background: #fcbf49; animation-delay: .4s; }
.pill.oxygen { background: #90e0ef; animation-delay: .7s; }
.pill.boost { background: #fff3b0; animation-delay: 1s; }
.next-btn {
  width: 16vmin; height: 16vmin; border-radius: 50%; background: var(--pink); display: grid; place-items: center;
  box-shadow: 0 1.2vmin 0 #b5174a; opacity: .4; transition: opacity .3s;
}
.next-btn svg { width: 45%; height: 80%; transform: rotate(45deg); }
.next-btn.ready { opacity: 1; animation: pulse 1.3s ease-in-out infinite; }
#btn-final { opacity: 1; animation: pulse 1.3s ease-in-out infinite; }

/* ---------- Final ---------- */
.medal { font-size: 26vmin; line-height: 1; animation: zoomin 1s cubic-bezier(.3,1.5,.5,1), float 3s 1s ease-in-out infinite; }
.final-title { margin: 0; font-size: 10vmin; color: var(--accent); text-shadow: 0 .8vmin 0 #e85d04; }
.final-stickers { display: flex; gap: 1.6vmin; }
.final-stickers span { width: 9vmin; height: 9vmin; animation: popin .5s both; }
.final-stickers span:nth-child(n) { animation-delay: calc(var(--i, 0) * .1s); }
.final-stickers svg { width: 100%; height: 100%; }

/* ---------- Parent panel ---------- */
.parent { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.7); display: grid; place-items: center; }
.parent-card {
  width: min(92vw, 620px); background: #1d1b4f; border-radius: 20px; padding: 24px 28px;
  border: 2px solid rgba(255,255,255,.15); font-size: 18px; user-select: text;
}
.parent-card h3 { margin: 0 0 14px; font-size: 24px; color: var(--accent); }
.parent-card .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.parent-card .row.end { border: 0; padding-top: 16px; }
.parent-card .hint { opacity: .75; font-size: 15px; line-height: 1.4; }
.seg { display: flex; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255,255,255,.2); }
.seg button { padding: 10px 16px; font-size: 16px; }
.seg button.on { background: var(--cyan); color: #05324a; font-weight: 700; }
.parent-card .danger, .parent-card .primary { padding: 10px 18px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.parent-card .danger { background: #e63946; }
.parent-card .primary { background: var(--accent); color: #1d1b4f; }

/* ---------- Rotate hint ---------- */
.rotate {
  position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: #0b1033; text-align: center; font-size: 6vw; padding: 8vw;
}
.rotate-icon { font-size: 22vw; animation: turn 2s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { .rotate { display: flex; } }

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