/* Lizzy — English school, Voronezh. One gel world per screen; --bg0…--deep are rewritten by js/theme.js */
@font-face {
  font-family: "TikTok Sans"; font-style: normal; font-weight: 300 900; font-stretch: 75% 150%; font-display: swap;
  src: url(fonts/tiktok-sans-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "TikTok Sans"; font-style: normal; font-weight: 300 900; font-stretch: 75% 150%; font-display: swap;
  src: url(fonts/tiktok-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The palette (--bg0 … --deep) is NOT animated on :root. js/theme.js writes it onto the elements marked
   .themed — the sky, the views, the bars — and never onto an ancestor of the gel shapes: in WebKit an inherited
   variable that changes makes every descendant restyle, and the gel's SVG filters would run again each frame. */
.themed { --shade: color-mix(in srgb, var(--deep) 30%, transparent); }
:root {
  --bg0: #57bccd; --bg1: #3f93b3; --hi: #9af1f4; --lo: #58bfd3; --glow: #f4ffff; --deep: #0e4d63; --page: #06222c;
  --top: 62px;                     /* below the status bar */
  --bot: 34px;                     /* above the home indicator */
  --padT: 0px; --padB: 0px;        /* phones: how far the screen runs on above and below the visible area, under the browser's bars */
  --bleed: calc(var(--padT) + var(--padB));
  --pad: 24px;
  --ink: #fff;
  --ink2: color-mix(in srgb, #fff 80%, transparent);
  --spring: cubic-bezier(.3, 1.45, .5, 1);
  --out: cubic-bezier(.2, .9, .3, 1);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  overflow: hidden; background: #06222c;                 /* then set by js/theme.js */
  font-family: "TikTok Sans", -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2.5px solid #fff; outline-offset: 3px; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: 34px; line-height: 1.06; }
h2 { font-size: 26px; line-height: 1.1; }
p { text-wrap: pretty; }
.defs { position: absolute; width: 0; height: 0; }
svg { display: block; }

/* ───────────── phone ───────────── */
.phone {
  position: relative; flex: none; width: 390px; height: 844px; overflow: hidden; isolation: isolate; container-type: size;
  border-radius: 56px; background: #3f93b3;              /* then set by js/theme.js */
  box-shadow: 0 0 0 11px #060606, 0 0 0 12.5px #2b2b2b, 0 50px 90px -30px rgba(0, 0, 0, .65);
  transform: scale(var(--s, 1));
}
.status {
  position: absolute; z-index: 60; inset: 0 0 auto; height: 54px; padding: 6px 30px 0 46px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
  font: 600 16px/1 -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -.01em;
}
.status .island { position: absolute; left: 50%; top: 11px; width: 122px; height: 36px; margin-left: -61px; border-radius: 20px; background: #050505; }
.status .sys { display: flex; align-items: center; gap: 6px; }
.status svg { fill: currentColor; }
.homebar { position: absolute; z-index: 60; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #fff; opacity: .55; pointer-events: none; }

/* ───────────── backdrop: sky + drifting gel puffs ───────────── */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* the sky fills the whole phone box, including the parts that lie under the browser's bars on a phone */
.sky { position: absolute; inset: 0; background:
  radial-gradient(ellipse 135% 54% at 50% 47%, var(--bg0) 0, color-mix(in oklab, var(--bg0) 55%, var(--bg1)) 52%, var(--bg1) 100%); }
.citysky {
  position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
  background:
    radial-gradient(ellipse 140% 52% at 50% 55%, #ffdcc6 0%, #fbc4dc 24%, #d9b4f3 48%, #a9a9f6 72%, #8497f3 100%);
}
.phone[data-view="city"] .citysky { opacity: 1; }
.puff { position: absolute; height: auto; pointer-events: none; will-change: transform; overflow: visible;
  animation: drift var(--dur, 20s) ease-in-out var(--delay, 0s) infinite alternate; transition: opacity .8s ease; }
.phone[data-view="city"] .puff, .phone[data-view="chest"] .puff { opacity: .0; }
@keyframes drift { from { transform: translate3d(calc(var(--dx) * -1), calc(var(--dy) * -1), 0); } to { transform: translate3d(var(--dx), var(--dy), 0); } }

/* ───────────── mascot ───────────── */
.mascot {
  position: absolute; z-index: 2; left: 0; top: 0; width: 320px; height: 300px; transform-origin: 0 0;
  transform: translate(var(--mx, 35px), var(--my, 200px)) scale(var(--ms, 1));
  transition: transform .8s cubic-bezier(.34, 1.3, .44, 1), opacity .35s ease;
  pointer-events: none; will-change: transform;
}
.mascot.is-away { opacity: 0; transform: translate(var(--mx, 35px), calc(var(--my, 200px) + 40px)) scale(calc(var(--ms, 1) * .6)); }
.m-float, .m-breath, .m-fig { position: absolute; inset: 0; }
.m-float { animation: mfloat 3.4s ease-in-out infinite alternate; }
.m-breath { transform-origin: 50% 92%; animation: mbreath 2.9s ease-in-out infinite alternate; }
.m-fig { transform-origin: 50% 92%; }
.m-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-body, .m-tail { will-change: transform; }        /* cached layers: the gel filters run once, not per frame */
/* the tail is translucent, so the part behind the body is cut away (the box is exactly 320 × 300, same units as the art) */
.m-tailclip { position: absolute; inset: 0; clip-path: path(evenodd, "M-60 -60H380V360H-60Z M160 82C236 82 286 132 288 200C289 246 266 274 226 274L94 274C54 274 31 246 32 200C34 132 84 82 160 82Z"); }
.m-tail { transform-origin: 77% 83%; animation: mtail 2.3s ease-in-out infinite alternate; }
.m-shadow { position: absolute; left: 14%; right: 14%; bottom: -5%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--deep) 38%, transparent), transparent); }
.m-ink .ink, .m-ink path.ink { fill: none; stroke: #fff; stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
.m-ink .eye { fill: #fff; stroke: #fff; stroke-width: 4.4; stroke-linejoin: round; }
.m-ink .pupil { fill: var(--deep); }
.m-ink .brow { fill: none; stroke: #fff; stroke-width: 4.6; stroke-linecap: round; }
.m-ink .nose { fill: #fff; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.m-ink .mouth { fill: var(--deep); stroke: #fff; stroke-width: 4.4; stroke-linejoin: round; stroke-linecap: round; }
.m-ink .cheek { fill: url(#blush); }
@keyframes mfloat { from { transform: translate3d(0, -1.4%, 0); } to { transform: translate3d(0, 1.4%, 0); } }
@keyframes mbreath { from { transform: scale(1, 1); } to { transform: scale(1.012, 1.02); } }
@keyframes mtail { from { transform: rotate(-9deg); } to { transform: rotate(13deg); } }
.m-slot { display: block; flex: none; aspect-ratio: 320 / 300; width: var(--w, 200px); border-radius: 40%; }
.mini { display: block; }

/* ───────────── views ───────────── */
.view {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  padding: var(--top) var(--pad) calc(var(--bot) + 14px);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 22px, 0) scale(.985);
  transition: opacity .3s ease, transform .5s var(--out), visibility 0s .3s;
}
.view.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .4s ease .14s, transform .6s var(--out) .14s, visibility 0s; }
.view.out { transform: translate3d(0, -18px, 0) scale(.985); }
.view.on .rise { animation: rise .7s var(--spring) both; animation-delay: calc(var(--i, 0) * 75ms + .2s); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.96); } to { opacity: 1; transform: none; } }
.grow { flex: 1 1 0; min-height: 0; }
.center { text-align: center; }
.foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ───────────── shared components ───────────── */
.logo { font-weight: 900; font-stretch: 112%; font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.sub { color: var(--ink2); }

.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 60px; border-radius: 30px; font-size: 18px; font-weight: 750; letter-spacing: -.005em;
  color: var(--deep); background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--hi) 34%, #fff));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--deep) 34%, var(--bg1)), 0 22px 30px -16px color-mix(in srgb, var(--deep) 80%, transparent), inset 0 2px 0 #fff;
  transition: transform .18s var(--spring), box-shadow .18s ease, opacity .25s ease, filter .25s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--deep) 34%, var(--bg1)), 0 10px 16px -12px color-mix(in srgb, var(--deep) 80%, transparent), inset 0 2px 0 #fff; }
.btn[disabled] { opacity: .42; pointer-events: none; filter: saturate(.6); }
.btn.dark { color: #fff; background: var(--deep); box-shadow: 0 5px 0 color-mix(in srgb, var(--deep) 62%, #000), 0 18px 26px -16px color-mix(in srgb, var(--deep) 90%, transparent); }
.btn.dark:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--deep) 62%, #000); }
.btn.pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: pulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes pulse { to { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }

/* frosted gel: light from the left, a hairline rim all the way round (the 2-D twin of the SVG filter) */
.gel {
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .13) 62%);
  box-shadow: inset 9px 3px 15px -8px rgba(255, 255, 255, .85), inset 0 4px 9px -6px rgba(255, 255, 255, .4),
    inset 0 0 0 1px rgba(255, 255, 255, .2), 0 22px 34px -24px color-mix(in srgb, var(--deep) 85%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.icon-btn {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .2); box-shadow: inset 5px 2px 8px -4px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: transform .2s var(--spring), background-color .2s;
}
.icon-btn:active { transform: scale(.88); }
.icon-btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 10px; border-radius: 17px; font-size: 15px; font-weight: 700;
  background: rgba(255, 255, 255, .22); box-shadow: inset 5px 2px 8px -4px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .16); font-variant-numeric: tabular-nums; }
.chip svg { fill: #fff; }

.bubble {
  position: relative; padding: 13px 17px; border-radius: 22px; background: #fff; color: var(--deep);
  font-size: 16px; line-height: 1.3; font-weight: 600; box-shadow: 0 16px 26px -18px color-mix(in srgb, var(--deep) 85%, transparent);
  transform-origin: 0 60%;
}
.bubble::before { content: ""; position: absolute; left: -7px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: #fff; border-radius: 5px; transform: rotate(45deg); }
.bubble.down::before { left: 50%; top: auto; bottom: -7px; margin: 0 0 0 -9px; }
.bubble.pop { animation: bpop .5s var(--spring); }
@keyframes bpop { from { transform: scale(.82); opacity: .2; } to { transform: none; opacity: 1; } }

/* global chrome */
.snd { position: absolute; z-index: 55; right: 20px; top: calc(var(--top) - 4px); display: flex; gap: 8px; transition: opacity .3s ease, transform .4s var(--out); }
.snd .icon-btn { width: 40px; height: 40px; }
.snd .icon-btn[aria-pressed="false"] { opacity: .55; }
.snd .off { display: none; }
.snd [aria-pressed="false"] .on { display: none; }
.snd [aria-pressed="false"] .off { display: inline; }
.phone[data-view="lesson"] .snd { opacity: 0; pointer-events: none; transform: translateY(-10px); }

.tabs {
  position: absolute; z-index: 40; left: 50%; bottom: calc(var(--bot) + 10px); display: flex; gap: 4px; padding: 5px; border-radius: 34px;
  background: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 7px 2px 12px -6px rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 18px 30px -18px color-mix(in srgb, var(--deep) 90%, transparent);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .6s var(--spring), opacity .3s ease;
}
.phone[data-tabs] .tabs { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.phone[data-view="city"] .tabs { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .3); }
.tab { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 25px; font-size: 15px; font-weight: 700; color: #fff; transition: background-color .3s, color .3s, transform .2s var(--spring); }
.tab svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tab:active { transform: scale(.94); }
.tab[aria-current="true"] { background: #fff; color: var(--deep); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--deep) 90%, transparent); }
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd84a; box-shadow: 0 0 0 3px rgba(255, 216, 74, .35); animation: blink 1.2s ease-in-out infinite alternate; }
@keyframes blink { to { transform: scale(1.35); } }

#fx { position: absolute; inset: 0; z-index: 50; width: 100%; height: 100%; pointer-events: none; }
.toast {
  position: absolute; z-index: 58; left: 50%; top: calc(var(--top) + 52px); max-width: 300px; padding: 11px 18px; border-radius: 20px;
  background: #fff; color: var(--deep); font-size: 15px; font-weight: 650; text-align: center; box-shadow: 0 18px 30px -16px color-mix(in srgb, var(--deep) 90%, transparent);
  transform: translate(-50%, -24px) scale(.9); opacity: 0; pointer-events: none; transition: transform .45s var(--spring), opacity .25s ease;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.fly { position: absolute; z-index: 52; left: 0; top: 0; font-weight: 800; font-size: 20px; color: #fff; pointer-events: none; text-shadow: 0 2px 10px rgba(0, 0, 40, .28); }

/* ───────────── welcome ───────────── */
#v-welcome { align-items: center; text-align: center; }
#v-welcome .brand { align-self: flex-start; display: flex; flex-direction: column; gap: 4px; text-align: left; padding-top: 2px; }
#v-welcome .logo { font-size: 38px; }
#v-welcome .m-slot { --w: 258px; margin-top: 4px; }
#v-welcome h1 { margin-top: 26px; }
#v-welcome .lead { margin-top: 12px; max-width: 310px; font-size: 18px; color: var(--ink2); }
#v-welcome .foot { width: 100%; }
.hint { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink2); }
.hint svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────── level slider ───────────── */
#v-level { padding-left: 0; padding-right: 0; }
#v-level .top { padding: 0 20px; }
#v-level h1 { text-align: center; margin-top: 10px; font-size: 30px; }
#v-level .stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#v-level .m-slot { --w: 236px; }
.bigword { position: relative; flex: none; width: 100%; height: 84px; margin-top: 18px; }
.bigword span {
  position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-stretch: 84%; font-size: 82px; line-height: 1; letter-spacing: -.03em;
  white-space: nowrap; color: color-mix(in oklab, var(--bg1) 84%, var(--deep)); opacity: 0; will-change: transform, opacity;
}
.slider { flex: none; padding: 0 58px 6px; cursor: grab; touch-action: none; border-radius: 28px; }
.slider.is-drag { cursor: grabbing; }
.track { position: relative; height: 52px; }
.track::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px;
  background: color-mix(in srgb, var(--deep) 16%, transparent); box-shadow: inset 0 2px 3px color-mix(in srgb, var(--deep) 22%, transparent); }
.stop { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.thumb { position: absolute; left: -26px; top: 0; width: 52px; height: 52px; will-change: transform; }
.thumb-dot { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--hi) 40%, #fff));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--deep) 34%, var(--bg1)), 0 14px 18px -10px color-mix(in srgb, var(--deep) 90%, transparent); transition: transform .28s var(--spring); }
.is-drag .thumb-dot { transform: scale(1.12); }
.thumb path { fill: none; stroke: var(--deep); stroke-linecap: round; }
.thumb circle { fill: var(--deep); }
.labels { position: relative; height: 22px; margin-top: 8px; font-weight: 650; font-size: 15px; line-height: 22px; }
.labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; opacity: .45; }
#v-level .lv-note { height: 44px; margin: 14px 40px 0; text-align: center; font-size: 15.5px; color: var(--ink2); }
#v-level .foot { padding: 0 var(--pad); margin-top: 16px; }

/* ───────────── home ───────────── */
#v-home { gap: 14px; padding-bottom: calc(var(--bot) + 84px); }
.hbar { flex: none; height: 40px; display: flex; align-items: center; }
.hero { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.hero .m-slot { --w: clamp(92px, calc((100cqh - var(--bleed)) * .18), 180px); }
.hero .bubble { max-width: 300px; text-align: center; transform-origin: 50% 100%; }
.week { flex: none; padding: 14px 16px 15px; }
.week-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; font-weight: 750; font-size: 15px; }
.week-top span:last-child { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.week-top svg { fill: #fff; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; gap: 2px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; color: var(--ink2); }
.day i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.day.done i { background: rgba(255, 255, 255, .92); box-shadow: 0 3px 0 var(--shade); }
.day.today i { box-shadow: inset 0 0 0 2.5px #fff; }
.day.today { color: #fff; }
.day.just i { animation: stamp .6s var(--spring) both; }
@keyframes stamp { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

.lcard { flex: none; padding: 18px 18px 20px; }
.lc-top { display: flex; align-items: center; justify-content: space-between; }
.lc-top .meta { font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.lcard h2 { margin-top: 5px; }
.reward { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; padding: 9px 12px; border-radius: 18px; background: color-mix(in srgb, var(--deep) 12%, transparent); }
.reward .r-ico { flex: none; width: 42px; height: 42px; }
.reward b { display: block; font-size: 15.5px; font-weight: 750; line-height: 1.2; }
.reward span { display: block; font-size: 13.5px; color: var(--ink2); line-height: 1.25; }

/* ───────────── lesson ───────────── */
#v-lesson { padding-bottom: calc(var(--bot) + 14px); }
.lbar { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; }
.prog { position: relative; flex: 1; height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--deep) 16%, transparent); box-shadow: inset 0 2px 3px color-mix(in srgb, var(--deep) 20%, transparent); overflow: hidden; }
.prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 8px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--hi) 55%, #fff));
  transform-origin: 0 50%; transform: translateX(calc((var(--p, 0) - 1) * 100%)); transition: transform .7s var(--spring); }
.prog i::after { content: ""; position: absolute; right: 6px; top: 3px; width: 34%; max-width: 60px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 0 #fff; }
.prog b { position: absolute; top: 0; bottom: 0; width: 46px; left: -60px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lo) 60%, transparent), transparent); }
.prog.shine b { animation: shine .8s ease-out; }
@keyframes shine { to { left: 110%; } }
.hearts { flex: none; display: flex; gap: 4px; padding: 0 2px; }
.hearts i { display: block; transition: transform .3s var(--spring); }
.hearts svg { fill: #fff; filter: drop-shadow(0 2px 0 var(--shade)); transition: fill .3s ease, opacity .3s ease; }
.hearts i.lost svg { fill: color-mix(in srgb, var(--deep) 26%, transparent); filter: none; }
.hearts i.lost { transform: scale(.82); }
.hearts i.pop { animation: heartpop .55s ease; }
.hearts.low i:not(.lost) { animation: heartbeat .7s ease-in-out infinite; }
@keyframes heartpop { 0% { transform: scale(1); } 30% { transform: scale(1.5) rotate(-12deg); } 60% { transform: scale(.6) rotate(8deg); } 100% { transform: scale(.82); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.hintme { animation: hintme 1.1s ease-in-out infinite !important; }
@keyframes hintme { 0%, 100% { box-shadow: 0 4px 0 var(--shade), 0 0 0 0 rgba(255, 255, 255, .9); transform: none; } 50% { box-shadow: 0 4px 0 var(--shade), 0 0 0 9px rgba(255, 255, 255, 0); transform: translateY(-3px) scale(1.04); } }
.say { flex: none; display: flex; align-items: center; gap: 14px; margin-top: 14px; min-height: 112px; }
.say .m-slot { --w: 120px; }
.say .bubble { flex: 0 1 auto; font-size: 17px; }
.ex { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 6px 0 12px; }
.ex.leave { animation: exOut .26s ease-in forwards; }
.ex.enter { animation: exIn .55s var(--out) backwards; }
@keyframes exOut { to { opacity: 0; transform: translate3d(-36px, 0, 0); } }
@keyframes exIn { from { opacity: 0; transform: translate3d(44px, 0, 0); } to { opacity: 1; transform: none; } }

.key {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 20px; border-radius: 18px;
  font-size: 19px; font-weight: 700; line-height: 1.15; color: var(--deep); background: #fff; text-align: center;
  box-shadow: 0 4px 0 var(--shade), 0 14px 18px -14px color-mix(in srgb, var(--deep) 80%, transparent);
  transition: transform .18s var(--spring), box-shadow .18s ease, background-color .25s ease, color .25s ease, opacity .3s ease;
}
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shade); }
.key.sel { background: var(--deep); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--deep) 60%, #000); }
.key.ok { background: #d9f99a; color: #23480f; box-shadow: 0 4px 0 #8fc24a; animation: okpop .5s var(--spring); }
.key.bad { animation: shake .42s ease; }
.key.used { opacity: .38; pointer-events: none; box-shadow: 0 2px 0 var(--shade); }
.key.gone { opacity: .0; transform: scale(.7); pointer-events: none; }
.key.wide { display: flex; width: 100%; justify-content: flex-start; text-align: left; padding: 14px 20px; font-size: 18px; }
@keyframes okpop { 0% { transform: scale(.92); } 55% { transform: scale(1.09); } 100% { transform: none; } }
@keyframes shake { 20% { transform: translateX(-7px) rotate(-1.5deg); } 45% { transform: translateX(6px) rotate(1.5deg); } 70% { transform: translateX(-4px); } 100% { transform: none; } }

.sent { font-size: 30px; line-height: 1.5; font-weight: 800; letter-spacing: -.015em; text-align: center; text-wrap: balance; }
.gap { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width: 92px; height: 52px; margin: 0 6px; border-radius: 18px;
  background: color-mix(in srgb, var(--deep) 15%, transparent); box-shadow: inset 0 3px 4px color-mix(in srgb, var(--deep) 22%, transparent); transition: min-width .3s ease; }
.gap .key { min-height: 52px; }
.ru { text-align: center; font-size: 16px; color: var(--ink2); margin-top: -10px; }
.opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.opts.col { flex-direction: column; flex-wrap: nowrap; }

.match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.match .key { width: 100%; min-height: 58px; }
.match .key.ok { animation: okpop .5s var(--spring); opacity: .5; pointer-events: none; }

.prompt { text-align: center; font-size: 22px; font-weight: 750; line-height: 1.25; text-wrap: balance; }
.answer { position: relative; min-height: 128px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px 10px; padding: 6px 0;
  background: linear-gradient(transparent 60px, rgba(255, 255, 255, .45) 60px, rgba(255, 255, 255, .45) 62px, transparent 62px, transparent 124px, rgba(255, 255, 255, .45) 124px, rgba(255, 255, 255, .45) 126px, transparent 126px); }
.bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.slot { border-radius: 16px; background: color-mix(in srgb, var(--deep) 14%, transparent); box-shadow: inset 0 3px 4px color-mix(in srgb, var(--deep) 18%, transparent); }
.tile { min-height: 48px; padding: 8px 15px; border-radius: 16px; font-size: 18px; }

.play { position: relative; align-self: center; flex: none; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; color: var(--deep);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--hi) 40%, #fff)); box-shadow: 0 7px 0 color-mix(in srgb, var(--deep) 34%, var(--bg1)), 0 26px 34px -18px color-mix(in srgb, var(--deep) 90%, transparent);
  transition: transform .2s var(--spring), box-shadow .2s; }
.play:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--deep) 34%, var(--bg1)); }
.play svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.play::before, .play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #fff; opacity: 0; pointer-events: none; }
.play.speaking::before { animation: ring 1.1s ease-out infinite; }
.play.speaking::after { animation: ring 1.1s ease-out .45s infinite; }
@keyframes ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.play-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.slow { height: 40px; padding: 0 16px; border-radius: 20px; font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, .22); box-shadow: inset 5px 2px 8px -4px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .16); }
.slow:active { transform: scale(.94); }

.word { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 38px; font-weight: 850; letter-spacing: -.02em; }
.word .icon-btn { width: 42px; height: 42px; }
.pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pic { display: grid; place-items: center; aspect-ratio: 1.12; border-radius: 28px; transition: transform .2s var(--spring), background .3s; }
.pic svg { width: 86px; height: 86px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pic svg .f { fill: #fff; }
.pic:active { transform: scale(.95); }
.pic.ok { background: #d9f99a; box-shadow: 0 5px 0 #8fc24a; animation: okpop .5s var(--spring); }
.pic.ok svg { stroke: #23480f; } .pic.ok svg .f { fill: #23480f; }
.pic.bad { animation: shake .42s ease; }
.pic.used { opacity: .4; pointer-events: none; }

.deck { position: relative; flex: none; height: 250px; }
.card {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px 26px; border-radius: 32px; text-align: center;
  background: #fff; color: var(--deep); box-shadow: 0 6px 0 var(--shade), 0 30px 40px -26px color-mix(in srgb, var(--deep) 90%, transparent);
  touch-action: none; cursor: grab; will-change: transform; transition: transform .45s var(--spring), opacity .3s ease;
}
.card.drag { transition: none; cursor: grabbing; }
.card b { font-size: 25px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.card span { font-size: 15.5px; opacity: .62; font-weight: 550; }
.card .stamp { position: absolute; top: 18px; padding: 5px 13px; border-radius: 12px; font-size: 15px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; opacity: 0; border: 3px solid; }
.card .stamp.y { left: 18px; color: #3f8f1d; transform: rotate(-10deg); }
.card .stamp.n { right: 18px; color: #d8493a; transform: rotate(10deg); }
.tf { display: flex; justify-content: center; gap: 22px; }
.tf button { display: flex; align-items: center; gap: 9px; height: 58px; padding: 0 26px; border-radius: 29px; font-size: 18px; font-weight: 750; color: var(--deep); background: #fff;
  box-shadow: 0 5px 0 var(--shade); transition: transform .18s var(--spring), box-shadow .18s; }
.tf button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--shade); }
.tf svg { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.sheet {
  /* a floating card, never glued to the bottom edge: on a phone the browser's toolbar sits right below it */
  position: absolute; z-index: 5; left: 12px; right: 12px; bottom: calc(var(--bot) + 6px); padding: 20px 20px 18px; border-radius: 32px;
  background: #fff; color: var(--deep); box-shadow: 0 30px 50px -24px color-mix(in srgb, var(--deep) 90%, transparent);
  transform: translateY(calc(100% + var(--bot) + 60px)); transition: transform .55s cubic-bezier(.25, 1.25, .4, 1);
}
.sheet.on { transform: none; }
.sheet-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.sheet-top i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #d9f99a; }
.sheet-top svg { fill: none; stroke: #2c5f12; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sheet b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.sheet p { min-height: 22px; margin: 2px 0 16px 48px; font-size: 16px; opacity: .72; }
.sheet .xp { margin-left: auto; font-weight: 800; font-size: 16px; opacity: .6; font-variant-numeric: tabular-nums; }

.fail { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--top) var(--pad) calc(var(--bot) + 14px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s .35s; }
.fail .m-slot { --w: 210px; }
.fail h1 { margin-top: 26px; }
.fail .sub { margin-top: 10px; max-width: 300px; font-size: 18px; }
.fail .foot { width: 100%; }
.link { height: 44px; padding: 0 18px; font-size: 16px; font-weight: 700; color: var(--ink2); border-radius: 22px; }
.link:active { opacity: .6; }
#v-lesson > * { transition: opacity .3s ease; }
#v-lesson.failed > :not(.fail) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s .25s; }
#v-lesson.failed .fail { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s ease .15s, visibility 0s; }

/* ───────────── lesson done ───────────── */
#v-done { align-items: center; text-align: center; }
#v-done .m-slot { --w: 210px; margin-top: 30px; }
#v-done h1 { margin-top: 22px; }
#v-done .sub { margin-top: 8px; font-size: 18px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 26px; }
.stat { padding: 15px 6px 13px; border-radius: 24px; }
.stat b { display: block; font-size: 29px; font-weight: 850; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
#v-done .week { width: 100%; margin-top: 12px; }
#v-done .foot { width: 100%; }

/* ───────────── chest ───────────── */
#v-chest { padding: 0; }
#chestCv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: pointer; outline: none; }
.c-hint { position: absolute; left: 0; right: 0; top: calc(var(--top) + 64px); text-align: center; pointer-events: none; transition: opacity .35s ease, transform .5s var(--out); }
.c-hint h1 { font-size: 30px; }
.c-hint p { margin-top: 8px; font-size: 18px; color: var(--ink2); }
.c-hint.off { opacity: 0; transform: translateY(-14px); }
.c-reward { position: absolute; left: 0; right: 0; top: calc(var(--top) + 26px); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; opacity: 0; }
.c-reward.on { opacity: 1; }
.keyart { width: 122px; height: 122px; margin-bottom: 4px; transform: translateY(240px) scale(.2) rotate(-50deg); opacity: 0; }
.c-reward.on .keyart { animation: keyup 1.1s cubic-bezier(.2, 1.3, .35, 1) .15s both; }
.keyart svg { width: 100%; height: 100%; overflow: visible; animation: keybob 2.6s ease-in-out 1.3s infinite alternate; }
@keyframes keyup { 0% { transform: translateY(260px) scale(.2) rotate(-60deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes keybob { from { transform: translateY(-5px) rotate(-5deg); } to { transform: translateY(5px) rotate(5deg); } }
.c-reward > :not(.keyart) { opacity: 0; transform: translateY(16px); }
.c-reward.on > :not(.keyart) { animation: rise .6s var(--spring) both; animation-delay: calc(.85s + var(--i, 0) * 90ms); }
.c-reward { text-shadow: 0 2px 14px color-mix(in srgb, var(--deep) 55%, transparent); }
.c-reward h2 { margin-top: 6px; font-size: 30px; }
.c-reward p { margin-top: 8px; font-size: 17px; color: var(--ink2); }
#v-chest .foot { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--bot) + 14px); opacity: 0; transform: translateY(30px); transition: opacity .4s ease, transform .6s var(--spring); pointer-events: none; }
#v-chest .foot.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 1.5s; }

/* ───────────── city ───────────── */
#v-city { padding: 0; }
#cityCv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
#cityCv.drag { cursor: grabbing; }
.cbar { position: absolute; left: var(--pad); right: 120px; top: var(--top); pointer-events: none; transition: opacity .35s ease, transform .5s var(--out); }
/* a place is selected: the fog lifts so the whole building is visible; only a short soft edge stays at the very top */
.c-scrim.top { transition: opacity .4s ease; }
.phone[data-focus] .c-scrim.top { height: calc(var(--top) + 14px); background: linear-gradient(to bottom, var(--bg1), transparent); }
.phone[data-focus] .cbar, .phone[data-focus] .demo-pill { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.phone[data-view="city"][data-focus] .snd { opacity: 0; pointer-events: none; }
.cbar h1 { font-size: 28px; }
.cbar p { margin-top: 4px; font-size: 15px; font-weight: 650; color: var(--ink2); }
.pips { display: flex; gap: 5px; margin-top: 10px; }
.pips i { width: 22px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .32); transition: background-color .5s ease, transform .5s var(--spring); }
.pips i.on { background: #fff; }
.pips i.new { transform: scaleY(1.7); }
.pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* fog at the top and bottom: whatever the camera is looking at, the header and the tab bar sit on plain sky */
.c-scrim { position: absolute; left: 0; right: 0; pointer-events: none; }
.c-scrim.top { top: 0; height: calc(var(--top) + 178px); background: linear-gradient(to bottom, var(--bg1) 0, var(--bg1) calc(var(--top) + 20px), color-mix(in srgb, var(--bg1) 80%, transparent) calc(var(--top) + 96px), transparent 100%); }
.c-scrim.bot { bottom: 0; height: calc(var(--bot) + 176px); background: linear-gradient(to top, var(--bg1) 0, var(--bg1) calc(var(--bot) + 30px), color-mix(in srgb, var(--bg1) 70%, transparent) calc(var(--bot) + 96px), transparent 100%); }
/* nothing over the 3-D canvas uses backdrop-filter: re-blurring a WebGL layer every frame is what heats a phone */
.pin { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; margin: -34px 0 0 -17px; border-radius: 50%; pointer-events: auto;
  background: rgba(255, 255, 255, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 14px -8px rgba(28, 47, 124, .8);
  color: #2b3a8c; will-change: transform; transition: opacity .3s ease, scale .4s var(--spring); }
.pin svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pin.key { width: 48px; height: 48px; margin: -64px 0 0 -24px; color: #6b3f00; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(circle at 34% 28%, #fff6c4, #ffdb52 58%, #f7c22f); box-shadow: 0 10px 16px -8px rgba(110, 66, 0, .75), inset 0 0 0 2px rgba(255, 255, 255, .6);
  animation: keypin 1.4s ease-in-out infinite; }
.pin.key::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: keyring 1.4s ease-out infinite; }
.pin.key::after { content: ""; position: absolute; left: 50%; top: 100%; margin: 5px 0 0 -6px; border: 6px solid transparent; border-top: 8px solid #f7c22f; border-bottom: 0; }
@keyframes keypin { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes keyring { from { box-shadow: 0 0 0 0 rgba(255, 219, 82, .75); } to { box-shadow: 0 0 0 16px rgba(255, 219, 82, 0); } }
.pin.gone { opacity: 0; scale: 1.8; pointer-events: none; }
.pin.rattle { animation: pinrattle .34s ease; }
@keyframes pinrattle { 20% { rotate: -16deg; } 45% { rotate: 14deg; } 70% { rotate: -9deg; } 100% { rotate: 0deg; } }
.c-tip { position: absolute; left: 50%; bottom: calc(var(--bot) + 88px); padding: 11px 18px; border-radius: 22px; background: #fff; color: #1c2f7c; font-size: 15.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 16px 26px -14px rgba(28, 47, 124, .8); transform: translate(-50%, 20px) scale(.9); opacity: 0; pointer-events: none; transition: transform .5s var(--spring), opacity .3s ease; }
.c-tip.on { transform: translate(-50%, 0); opacity: 1; }
.c-help { position: absolute; left: 50%; bottom: calc(var(--bot) + 86px); display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 20px; white-space: nowrap;
  font-size: 14.5px; font-weight: 650; background: rgba(255, 255, 255, .26); box-shadow: inset 5px 2px 8px -4px rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .2);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: transform .5s var(--spring), opacity .3s ease; }
.c-help.on { transform: translate(-50%, 0); opacity: 1; }
.c-help svg { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.c-help .dot { fill: #fff; stroke: none; animation: helpswipe 1.8s ease-in-out infinite; }
@keyframes helpswipe { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.demo-pill { position: absolute; right: 20px; top: calc(var(--top) + 46px); height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .26); box-shadow: inset 5px 2px 8px -4px rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .2); transition: transform .2s var(--spring), opacity .3s; }
.demo-pill:active { transform: scale(.94); }
.place {
  position: absolute; z-index: 45; left: 12px; right: 12px; bottom: calc(var(--bot) + 6px); padding: 20px 20px 18px; border-radius: 32px; background: #fff; color: #1c2f7c;
  box-shadow: 0 30px 50px -24px rgba(28, 47, 124, .9); transform: translateY(calc(100% + var(--bot) + 60px)); transition: transform .6s cubic-bezier(.25, 1.25, .4, 1);
}
.place.on { transform: none; }
.place .eyebrow { color: #6b78c4; display: flex; align-items: center; gap: 6px; }
.place .eyebrow svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.place h2 { margin-top: 4px; font-size: 25px; }
.place .ru-name { margin-top: 2px; font-size: 15px; font-weight: 600; opacity: .6; }
.place .fact { margin-top: 12px; font-size: 16px; line-height: 1.38; opacity: .85; font-weight: 500; }
.phrase { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 14px 11px 11px; border-radius: 20px; background: #eef1ff; text-align: left; width: 100%; transition: transform .2s var(--spring); }
.phrase:active { transform: scale(.98); }
.phrase i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1c2f7c; color: #fff; }
.phrase svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.phrase b { display: block; font-size: 16.5px; font-weight: 750; line-height: 1.2; }
.phrase span { display: block; font-size: 13.5px; opacity: .6; line-height: 1.25; margin-top: 2px; }
.place .row { display: flex; gap: 10px; margin-top: 16px; }
.place .btn { height: 54px; font-size: 17px; }
.place .btn.dark { background: #1c2f7c; box-shadow: 0 5px 0 #101c52; }
.place .x { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #eef1ff; }
.place .x svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ───────────── real phones: the screen is the viewport ───────────── */
/* ───────────── real phones ─────────────
   Mobile Safari draws a page under its status bar and its floating toolbar only where the DOCUMENT itself
   continues there; a screen pinned to the visible area gets flat colour bands instead. So on a phone the page is
   an ordinary document, taller than the visible area by --padT above and --padB below, the app fills all of it,
   and js/app.js keeps it scrolled by --padT. The sky, the puffs, the city and the chest run on under the bars;
   everything you can read or press stays inside the visible area via --top / --bot. */
@media (max-width: 500px) {
  :root { --padT: 110px; --padB: 170px;
    --top: calc(var(--padT) + max(16px, env(safe-area-inset-top) + 8px)); --bot: calc(var(--padB) + max(16px, env(safe-area-inset-bottom))); }
  html { height: auto; overflow: visible; overscroll-behavior: none; }
  body { position: relative; display: block; height: calc(var(--padT) + 100dvh + var(--padB)); overflow: visible; }
  .phone { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--padT) + 100dvh + var(--padB)); border-radius: 0; box-shadow: none; transform: none; touch-action: none; }
  .status, .homebar { display: none; }
}
@media (max-width: 500px) and (max-height: 740px) {
  .say { min-height: 84px; margin-top: 8px; } .say .m-slot { --w: 90px; }
  .keyart { width: 88px; height: 88px; } .c-reward { top: calc(var(--top) + 8px); } .c-reward h2 { font-size: 26px; }
  #v-home .week { display: none; }
  #v-welcome .m-slot { --w: 210px; }
  #v-level .m-slot { --w: 190px; }
  #v-done .m-slot { --w: 160px; margin-top: 10px; }
  .deck { height: 210px; }
  .sent { font-size: 26px; }
}
@media (max-width: 360px) { :root { --pad: 18px; } .key { font-size: 17px; padding: 10px 15px; } .tile { padding: 8px 12px; font-size: 16.5px; } }
@media (prefers-reduced-motion: reduce) {
  .puff, .m-float, .m-breath, .m-tail, .hearts.low i, .hintme, .btn.pulse::after, .pin.key, .pin.key::before, .keyart svg, .c-help .dot { animation: none; }
  .view, .mascot, .sheet, .place { transition-duration: .01s; }
}