@charset "UTF-8";

:root {
  --ink: #26312c;
  --soft: #64716a;
  --paper: #fffdf4;
  --cream: #fff8e6;
  --line: rgba(45, 67, 51, .13);
  --shadow: 0 20px 60px rgba(51, 74, 48, .18);
  --season: #4f9f5a;
  --season-bright: #8bd36f;
  --season-pale: #e9f8d8;
  --season-ink: #24542f;
  --sky: #dff6ef;
  --ground: #a9df77;
  --path: #f5df9d;
  --water: #86ddeb;
  --font-ui: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-display: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  background: var(--season-pale);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; touch-action: manipulation; }
button:focus-visible, canvas:focus-visible { outline: 3px solid var(--season-bright); outline-offset: 3px; }
kbd {
  min-width: 28px;
  display: inline-grid;
  place-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(45,67,51,.18);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: rgba(255,255,255,.7);
  color: var(--season-ink);
  font: 600 11px var(--font-ui);
}
::selection { background: var(--season-bright); color: var(--season-ink); }

.game-shell { position: relative; width: 100%; height: 100dvh; min-height: 560px; overflow: hidden; background: var(--sky); transition: background .5s ease; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.game-shell.season-spring { --season:#4f9f5a; --season-bright:#8bd36f; --season-pale:#e9f8d8; --season-ink:#24542f; --sky:#dff6ef; --ground:#a9df77; --path:#f5df9d; --water:#86ddeb; }
.game-shell.season-summer { --season:#dc8d26; --season-bright:#ffc84b; --season-pale:#fff0c4; --season-ink:#6b3b12; --sky:#c8f3ff; --ground:#7fd064; --path:#f0cc73; --water:#42c7df; }
.game-shell.season-autumn { --season:#d17f2f; --season-bright:#f6bd55; --season-pale:#fff0cf; --season-ink:#653815; --sky:#fff0cf; --ground:#e8ba5d; --path:#d69343; --water:#72c8ca; }
.game-shell.season-winter { --season:#4c86ad; --season-bright:#8fd3e8; --season-pale:#eefbff; --season-ink:#23465d; --sky:#e9fbff; --ground:#f4fbfd; --path:#c6dce7; --water:#a9deed; }

/* HUD */
.game-hud {
  position: absolute;
  top: 18px;
  left: max(18px, 3vw);
  right: max(18px, 3vw);
  z-index: 20;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 12px 9px 10px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: rgba(255,253,244,.83);
  box-shadow: 0 10px 32px rgba(48,68,51,.15);
  backdrop-filter: blur(16px);
}
.hud-brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.hud-brand__mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--season-ink); background: var(--season-pale); font-family: var(--font-display); font-size: 22px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--season) 22%, transparent); }
.hud-brand strong { display: block; color: var(--season-ink); font-family: var(--font-display); font-size: 19px; line-height: 1.1; letter-spacing: .08em; }
.hud-brand small { display: block; margin-top: 3px; color: var(--soft); font-size: 8px; letter-spacing: .18em; }
.season-tabs { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.season-tab { min-height: 42px; flex: 1 1 0; padding: 6px 11px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--soft); cursor: pointer; font-size: 12px; white-space: nowrap; transition: .2s ease; }
.season-tab span { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--tab-color); }
.season-tab:hover:not(:disabled) { background: color-mix(in srgb, var(--tab-color) 10%, transparent); color: var(--tab-color); }
.season-tab.is-active { border-color: color-mix(in srgb, var(--tab-color) 30%, transparent); background: color-mix(in srgb, var(--tab-color) 13%, #fff); color: var(--tab-color); font-weight: 700; }
.season-tab:disabled { opacity: .35; cursor: not-allowed; }
.hud-status { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.hud-pill { min-width: 70px; padding: 5px 10px; border-radius: 11px; background: var(--season-pale); text-align: center; }
.hud-pill b { display: block; color: var(--season-ink); font-family: var(--font-display); font-size: 16px; line-height: 1.1; }
.hud-pill small { display: block; margin-top: 2px; color: var(--soft); font-size: 8px; }
.hud-pill--stars b { color: #c98b13; }
.hud-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.55); color: var(--season-ink); cursor: pointer; }
.hud-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hud-icon.is-muted .sound-wave { display: none; }
.weather-chip { position: absolute; top: 98px; left: max(18px, 3vw); z-index: 19; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.68); color: var(--season-ink); box-shadow: 0 6px 18px rgba(48,68,51,.1); font-size: 11px; backdrop-filter: blur(10px); }
.weather-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--season); box-shadow: 0 0 0 4px var(--season-pale); }
.world-help { position: absolute; left: max(18px, 3vw); bottom: calc(22px + var(--safe-bottom)); z-index: 14; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--soft); font-size: 11px; box-shadow: 0 7px 20px rgba(48,68,51,.1); backdrop-filter: blur(10px); }
.interaction-prompt { border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; position: absolute; left: 50%; bottom: calc(32px + var(--safe-bottom)); z-index: 18; min-width: 230px; display: flex; align-items: center; gap: 11px; padding: 10px 16px 10px 10px; border: 1px solid rgba(255,255,255,.9); border-radius: 18px; background: rgba(255,253,244,.92); box-shadow: 0 16px 42px rgba(48,68,51,.2); transform: translateX(-50%); animation: prompt-in .25s ease both; }
.interaction-prompt:hover .interaction-prompt__key, .interaction-prompt:focus-visible .interaction-prompt__key { transform: scale(1.07); }
.interaction-prompt__key { transition: transform .16s ease; width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; background: var(--season); color: #fff; font-family: var(--font-display); font-size: 17px; box-shadow: 0 5px 14px color-mix(in srgb, var(--season) 28%, transparent); }
.interaction-prompt small { display: block; color: var(--soft); font-size: 9px; }
.interaction-prompt strong { display: block; color: var(--season-ink); font-size: 13px; }
@keyframes prompt-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Touch controls */
.touch-controls { position: absolute; inset: auto 16px calc(18px + var(--safe-bottom)); z-index: 25; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.joystick { position: relative; width: 106px; height: 106px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(255,253,244,.42); box-shadow: inset 0 0 0 1px rgba(45,67,51,.08), 0 12px 30px rgba(48,68,51,.14); pointer-events: auto; touch-action: none; backdrop-filter: blur(8px); }
.joystick::before, .joystick::after { content: ""; position: absolute; left: 25%; right: 25%; top: 50%; height: 1px; background: rgba(45,67,51,.08); }
.joystick::after { transform: rotate(90deg); }
.joystick__stick { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,253,244,.9); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(48,68,51,.18); transform: translate(-50%, -50%); }
.action-button { width: 74px; height: 74px; border: 0; border-radius: 50%; background: var(--season); color: #fff; font-family: var(--font-display); font-size: 25px; box-shadow: 0 12px 28px color-mix(in srgb, var(--season) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.4); pointer-events: auto; cursor: pointer; }
.action-button:active { transform: scale(.94); }

/* Menu */
.menu-screen { position: absolute; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); overflow: hidden; background: linear-gradient(110deg, rgba(255,250,229,.98) 0%, rgba(255,250,229,.93) 48%, rgba(214,246,225,.64) 100%); }
.menu-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 6vw, 96px); }
.menu-eyebrow { margin: 0 0 20px; color: var(--season-ink); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.menu-copy h1 { margin: 0; color: var(--season-ink); font-family: var(--font-display); font-size: clamp(74px, 10vw, 152px); font-weight: 500; line-height: .82; letter-spacing: .06em; }
.menu-copy h1 em { color: var(--season); font-style: normal; }
.menu-lead { max-width: 530px; margin: 30px 0 26px; color: #5d6d61; font-size: 16px; line-height: 1.95; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.primary-button, .secondary-button { min-height: 52px; padding: 12px 26px; border-radius: 999px; font-size: 15px; letter-spacing: .06em; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.primary-button { border: 0; background: var(--season); color: #fff; box-shadow: 0 13px 30px color-mix(in srgb, var(--season) 28%, transparent); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 17px 34px color-mix(in srgb, var(--season) 35%, transparent); }
.secondary-button { border: 1px solid color-mix(in srgb, var(--season) 28%, #fff); background: rgba(255,255,255,.62); color: var(--season-ink); }
.secondary-button:hover { transform: translateY(-2px); background: #fff; }
.score-rule { margin: 13px 0 0; color: var(--season-ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.menu-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; color: #6d7b70; font-size: 11px; }
.menu-controls span { display: inline-flex; align-items: center; gap: 6px; }
.menu-seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 590px; margin-top: 28px; }
.menu-season { position: relative; min-height: 82px; padding: 12px 10px; border: 1px solid color-mix(in srgb, var(--season-color) 25%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--season-color) 13%, #fff); color: var(--season-color); text-align: left; cursor: pointer; overflow: hidden; }
.menu-season::after { content: attr(data-count); position: absolute; right: 7px; bottom: -9px; color: color-mix(in srgb, var(--season-color) 18%, transparent); font-family: var(--font-display); font-size: 52px; line-height: 1; }
.menu-season strong { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 500; }
.menu-season small { display: block; margin-top: 2px; color: #6f786e; font-size: 9px; }
.menu-season:disabled { opacity: .42; cursor: not-allowed; }
.menu-season.is-current { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--season-color) 46%, transparent); }
.ai-disclosure { max-width: 640px; margin: 24px 0 0; padding-top: 13px; border-top: 1px solid rgba(45,67,51,.12); color: #7a857b; font-size: 9px; line-height: 1.7; }
.menu-art { position: relative; overflow: hidden; background: radial-gradient(circle at 55% 46%, rgba(255,255,255,.8), transparent 35%), linear-gradient(145deg, #dff5e4, #fff0cd 48%, #dcecff); }
.menu-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 50%, #000, transparent 72%); }
.menu-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(83,134,91,.22); border-radius: 50%; transform: translate(-50%, -50%); }
.menu-orbit--one { width: 58%; aspect-ratio: 1; animation: slow-spin 38s linear infinite; }
.menu-orbit--two { width: 39%; aspect-ratio: 1; border-style: dashed; animation: slow-spin-reverse 27s linear infinite; }
@keyframes slow-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes slow-spin-reverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
.menu-season-bloom { position: absolute; left: 50%; top: 50%; width: min(46vw, 480px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.bloom { position: absolute; width: 42%; height: 42%; display: grid; place-items: center; border-radius: 46% 54% 50% 50%; font-family: var(--font-display); font-size: clamp(29px, 4vw, 56px); box-shadow: 0 18px 38px rgba(60,86,58,.12), inset 0 1px 0 rgba(255,255,255,.75); }
.bloom--spring { left: 4%; top: 4%; background: #d7f0cb; color: #2f723e; transform: rotate(-9deg); }
.bloom--summer { right: 4%; top: 4%; background: #ffe49a; color: #8c5314; transform: rotate(8deg); }
.bloom--autumn { right: 4%; bottom: 4%; background: #f4cfa0; color: #87481f; transform: rotate(-6deg); }
.bloom--winter { left: 4%; bottom: 4%; background: #dbeef7; color: #315f79; transform: rotate(7deg); }
.bloom-core { position: absolute; left: 50%; top: 50%; width: 28%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fffdf4; color: var(--season); font-family: var(--font-display); font-size: clamp(34px, 5vw, 70px); box-shadow: 0 16px 40px rgba(56,82,59,.16); transform: translate(-50%, -50%); }
.menu-weather { position: absolute; inset: 0; pointer-events: none; }
.menu-weather--rain { background-image: repeating-linear-gradient(112deg, transparent 0 46px, rgba(100,189,217,.28) 47px 49px, transparent 50px 94px); opacity: .7; animation: rain-shift 2.4s linear infinite; }
.menu-weather--leaves { background-image: radial-gradient(ellipse at 25% 35%, rgba(221,134,55,.3) 0 4px, transparent 5px), radial-gradient(ellipse at 72% 21%, rgba(203,100,45,.24) 0 3px, transparent 4px), radial-gradient(ellipse at 66% 76%, rgba(226,166,62,.26) 0 4px, transparent 5px); background-size: 180px 160px, 230px 200px, 260px 220px; animation: leaf-drift 9s ease-in-out infinite alternate; }
.menu-weather--snow { background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px); background-size: 86px 92px, 132px 120px; animation: snow-drift 11s linear infinite; }
@keyframes rain-shift { to { background-position: 0 94px; } }
@keyframes leaf-drift { to { background-position: 22px 18px, -14px 25px, 12px -12px; } }
@keyframes snow-drift { to { background-position: 18px 92px, -22px 120px; } }

/* Mini-game overlay */
.mini-overlay { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: clamp(10px, 2vw, 24px); background: rgba(235,247,233,.66); backdrop-filter: blur(12px); }
.mini-panel { width: min(1120px, 96vw); max-height: 94dvh; display: flex; flex-direction: column; padding: 15px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,253,244,.96); box-shadow: 0 30px 100px rgba(48,70,48,.24); animation: card-in .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.mini-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 3px 5px 12px; }
.mini-head p { margin: 0 0 2px; color: var(--season); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.mini-head h2 { margin: 0; color: var(--season-ink); font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 500; }
.mini-head span { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--season-pale); color: var(--season-ink); font-size: 9px; }
.mini-close { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--soft); font-size: 24px; cursor: pointer; }
.mini-close:hover { color: var(--season-ink); background: var(--season-pale); }
.mini-canvas-wrap { min-height: 0; overflow: hidden; border-radius: 18px; background: var(--season-pale); }
#miniCanvas { display: block; width: 100%; height: auto; max-height: calc(94dvh - 155px); object-fit: contain; touch-action: none; cursor: pointer; }
.mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 5px 1px; color: var(--soft); font-size: 11px; }
.mini-progress { color: var(--season-ink); font-family: var(--font-display); font-size: 15px; white-space: nowrap; }

/* Completion overlays */
.chapter-overlay, .final-overlay { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(255,250,229,.75); backdrop-filter: blur(12px); }
.chapter-card, .final-card { width: min(520px, 94vw); padding: 34px; border: 1px solid rgba(255,255,255,.95); border-radius: 28px; background: #fffdf4; box-shadow: 0 30px 90px rgba(48,70,48,.2); text-align: center; animation: card-in .35s ease both; }
.chapter-seal { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 24px; background: var(--season-pale); color: var(--season); font-family: var(--font-display); font-size: 34px; }
.chapter-card > p:first-of-type, .final-card .menu-eyebrow { margin: 0 0 6px; color: var(--season); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.chapter-card h2, .final-card h2 { margin: 0 0 12px; color: var(--season-ink); font-family: var(--font-display); font-size: 30px; font-weight: 500; }
.chapter-stars { color: #e0a728; font-size: 28px; letter-spacing: .12em; }
.chapter-card > p:last-of-type, .final-card > p { margin: 12px 0 22px; color: var(--soft); font-size: 13px; line-height: 1.9; }
.chapter-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.final-score { margin: 18px 0; color: var(--season-ink); font-family: var(--font-display); font-size: 38px; }

.toast { position: absolute; left: 50%; bottom: calc(28px + var(--safe-bottom)); z-index: 100; max-width: 88vw; padding: 10px 18px; border-radius: 999px; background: rgba(255,253,244,.94); color: var(--season-ink); box-shadow: 0 15px 40px rgba(48,70,48,.2); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.noscript { position: fixed; inset: auto 15px 15px; z-index: 999; padding: 14px; border-radius: 12px; background: #fff; color: #702d24; text-align: center; }

@media (max-width: 900px) {
  .game-hud { gap: 9px; }
  .hud-brand small { display: none; }
  .season-tab { padding-inline: 7px; font-size: 10px; }
  .hud-pill { min-width: 58px; padding-inline: 8px; }
  .menu-screen { grid-template-columns: 1fr; }
  .menu-copy { justify-content: center; padding: clamp(28px, 8vw, 70px); background: linear-gradient(90deg, rgba(255,250,229,.92), rgba(255,250,229,.72)); }
  .menu-art { position: absolute; inset: 0; z-index: -1; opacity: .74; }
  .menu-copy h1 { font-size: clamp(72px, 17vw, 120px); }
  .menu-lead { max-width: 560px; }
}
@media (max-width: 640px) {
  .game-shell { min-height: 500px; }
  .game-hud { top: 8px; left: 8px; right: 8px; min-height: 54px; padding: 6px; border-radius: 17px; gap: 6px; }
  .hud-brand { gap: 0; }
  .hud-brand__mark { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
  .hud-brand > span:last-child { display: none; }
  .season-tabs { gap: 2px; }
  .season-tab { min-height: 38px; padding: 4px 5px; font-size: 9px; border-radius: 10px; }
  .season-tab span { width: 6px; height: 6px; margin-right: 3px; }
  .hud-status { gap: 4px; }
  .hud-pill { min-width: 48px; padding: 4px 6px; border-radius: 9px; }
  .hud-pill b { font-size: 13px; }
  .hud-pill small { font-size: 7px; }
  .hud-icon { width: 38px; height: 38px; border-radius: 11px; }
  .weather-chip { top: 71px; left: 9px; font-size: 9px; padding: 5px 9px; }
  .world-help { display: none; }
  .interaction-prompt { bottom: calc(122px + var(--safe-bottom)); min-width: 205px; padding: 8px 13px 8px 8px; }
  .interaction-prompt__key { width: 33px; height: 33px; }
  .touch-controls { inset: auto 12px calc(12px + var(--safe-bottom)); }
  .joystick { width: 94px; height: 94px; }
  .joystick__stick { width: 42px; height: 42px; }
  .action-button { width: 68px; height: 68px; font-size: 22px; }
  .menu-copy { padding: 28px 22px; }
  .menu-eyebrow { margin-bottom: 15px; font-size: 9px; }
  .menu-copy h1 { font-size: clamp(72px, 24vw, 108px); }
  .menu-lead { margin: 24px 0 20px; font-size: 13px; }
  .menu-actions .primary-button, .menu-actions .secondary-button { flex: 1 1 auto; min-height: 48px; padding-inline: 18px; font-size: 13px; }
  .menu-seasons { grid-template-columns: 1fr 1fr; margin-top: 19px; }
  .menu-season { min-height: 66px; }
  .menu-season strong { font-size: 21px; }
  .ai-disclosure { margin-top: 15px; font-size: 8px; }
  .mini-overlay { padding: 4px; }
  .mini-panel { width: 100%; max-height: 98dvh; padding: 9px; border-radius: 20px; }
  .mini-head { padding: 2px 3px 8px; }
  .mini-head h2 { font-size: 22px; }
  .mini-head p { font-size: 8px; }
  .mini-foot { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 7px; font-size: 9px; }
  .mini-progress { font-size: 12px; }
  #miniCanvas { max-height: calc(98dvh - 145px); }
  .chapter-card, .final-card { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 640px) {
  .season-tabs { overflow-x: auto; scrollbar-width: none; }
  .season-tabs::-webkit-scrollbar { display: none; }
  .season-tab small { display: none; }
}
.mini-start { min-height: 44px; padding: 9px 20px; border: 0; border-radius: 999px; background: var(--season); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; cursor: pointer; box-shadow: 0 9px 22px color-mix(in srgb, var(--season) 26%, transparent); }
.mini-start:hover { transform: translateY(-1px); filter: brightness(1.03); }
@media (max-width: 640px) { .mini-start { width: 100%; } }