:root {
  --pink: #ff3cac;
  --hot: #ff5fa2;
  --cyan: #2ef2ff;
  --yellow: #ffd23f;
  --cream: #fff3b0;
  --ink: #12052b;
  --horizon: 30%;                      /* 海面占画面高度 */
  --sun: min(50vw, 46vh);
  --fs: clamp(56px, min(11vw, 15.5vh), 170px);
  --bld-front: #2a0d52;
  --bld-back: #6a1c86;
  --palm: #12052b;
  --mx: 0;
  --my: 0;
  --f-num: "Anton", "Impact", "Haettenschweiler", sans-serif;
  --f-cn: "ZCOOL QingKe HuangYou", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-osd: "VT323", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: #0b0320;
  color: #fff;
  font-family: var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
}

body.night {
  --bld-front: #0c0424;
  --bld-back: #2a1158;
  --palm: #04010c;
}

/* ───────────── 场景 ───────────── */
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.sky { position: absolute; inset: 0; transition: opacity 1.8s ease; }
.sky-day {
  background: linear-gradient(to bottom,
    #170843 0%, #3b1073 18%, #8b1a86 38%, #e0307f 54%, #ff6a6a 64%, #ffb056 70%, #ffb056 100%);
}
.sky-night {
  opacity: 0;
  background: linear-gradient(to bottom,
    #03010b 0%, #0b0428 25%, #22094f 48%, #5a1480 62%, #b3237f 70%, #b3237f 100%);
}
body.night .sky-night { opacity: 1; }

#stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.horizon-glow {
  position: absolute;
  left: 50%;
  bottom: var(--horizon);
  width: 140vmax;
  height: 46vh;
  transform: translate(-50%, 50%);
  background: radial-gradient(closest-side, rgba(255, 214, 130, .6), rgba(255, 120, 120, .22) 55%, transparent);
  transition: opacity 1.8s ease;
  pointer-events: none;
}
body.night .horizon-glow { opacity: .35; }

.par {
  transform: translate3d(calc(var(--mx) * var(--k) * -14px), calc(var(--my) * var(--k) * -7px), 0);
  will-change: transform;
}

/* 云 */
.clouds { position: absolute; inset: 0; }
.clouds i {
  position: absolute;
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255, 190, 210, .55) 30%, rgba(255, 220, 180, .7) 55%, transparent);
  animation: drift 90s linear infinite;
}
.clouds i:nth-child(1) { top: 20%; left: -10%; width: 46vw; animation-duration: 120s; }
.clouds i:nth-child(2) { top: 31%; left: 48%; width: 38vw; height: 5px; animation-duration: 95s; animation-delay: -30s; }
.clouds i:nth-child(3) { top: 43%; left: 8%; width: 30vw; height: 9px; animation-duration: 140s; animation-delay: -60s; }
.clouds i:nth-child(4) { top: 52%; left: 60%; width: 44vw; height: 6px; animation-duration: 110s; animation-delay: -12s; }
.clouds i:nth-child(5) { top: 12%; left: 55%; width: 26vw; height: 4px; opacity: .6; animation-duration: 160s; animation-delay: -80s; }
@keyframes drift {
  from { transform: translateX(-60vw); }
  to { transform: translateX(110vw); }
}

/* 太阳 */
.sun-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(var(--horizon) - var(--sun) * .2);
  width: var(--sun);
  margin-left: calc(var(--sun) / -2);
}
.sun-halo {
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 90, .55), rgba(255, 80, 150, .22) 55%, transparent 72%);
  animation: breathe 6s ease-in-out infinite;
  transition: filter 1.8s ease;
}
body.night .sun-halo { filter: hue-rotate(200deg) saturate(.7); }
.sun {
  --s1: calc(var(--sun) * .052);
  --s2: calc(var(--sun) * .085);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(#fff86e 0%, #ffc843 30%, #ff7a5c 55%, #ff3c96 78%, #c8229e 100%);
  -webkit-mask-image:
    linear-gradient(#000 0 46%, transparent 46%),
    repeating-linear-gradient(to bottom, #000 0 var(--s1), transparent var(--s1) var(--s2));
  mask-image:
    linear-gradient(#000 0 46%, transparent 46%),
    repeating-linear-gradient(to bottom, #000 0 var(--s1), transparent var(--s1) var(--s2));
  -webkit-mask-composite: source-over;
  mask-composite: add;
  animation: sun-rise 2.4s cubic-bezier(.2, .8, .2, 1) both, stripes 2.6s linear infinite;
}
.sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(#f4fbff 0%, #bfe9ff 35%, #b9a7ff 65%, #ff8fd6 100%);
  opacity: 0;
  transition: opacity 1.8s ease;
}
body.night .sun::after { opacity: 1; }
@keyframes stripes {
  to { -webkit-mask-position: 0 0, 0 var(--s2); mask-position: 0 0, 0 var(--s2); }
}
@keyframes sun-rise {
  from { transform: translateY(46%); }
  to { transform: none; }
}
@keyframes breathe {
  50% { transform: scale(1.07); opacity: .82; }
}

/* 拖横幅的小飞机 */
.plane {
  position: absolute;
  top: 15%;
  left: 0;
  color: #1a0740;
  width: clamp(190px, 26vw, 360px);
  animation: fly 46s linear 3s infinite both;
}
.plane svg { display: block; width: 100%; height: auto; overflow: visible; }
.plane .banner { transform-origin: 206px 30px; animation: flutter 1.6s ease-in-out infinite; }
@keyframes fly {
  0% { transform: translateX(-40vw); }
  62%, 100% { transform: translateX(120vw); }
}
@keyframes flutter {
  50% { transform: skewY(3deg) scaleX(.985); }
}

/* 天际线 */
#skyline {
  position: absolute;
  left: 0;
  bottom: calc(var(--horizon) - 1px);
  width: 100%;
  height: max(13.75vw, 120px);
}
#skyline .b-back { fill: var(--bld-back); opacity: .55; transition: fill 1.8s ease; }
#skyline .b-front { fill: var(--bld-front); transition: fill 1.8s ease; }
#skyline .win { opacity: .55; transition: opacity 1.8s ease; }
body.night #skyline .win { opacity: 1; }
#skyline .tw { animation: twinkle 5s steps(1) infinite; }
#skyline .sign { animation: neon-flicker 7s linear infinite; }
@keyframes twinkle {
  0%, 100% { visibility: visible; }
  45%, 70% { visibility: hidden; }
}

/* 海 */
.ocean {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--horizon);
  background: linear-gradient(#ff8a66 0%, #e23d83 9%, #8a1a86 34%, #3a0f6b 66%, #170640 100%);
  border-top: 2px solid rgba(255, 233, 190, .75);
}
.ocean::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#a82a8a 0%, #4a1378 14%, #1c0a4a 45%, #080218 100%);
  opacity: 0;
  transition: opacity 1.8s ease;
}
body.night .ocean::before { opacity: 1; }
#water { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 棕榈树 */
.palms {
  position: absolute;
  bottom: -2vh;
  height: 96vh;
  width: calc(96vh * 420 / 900);
  color: var(--palm);
  overflow: visible;
  transition: color 1.8s ease;
}
#palms-l { left: -3vw; }
#palms-r { right: -3vw; transform: translate3d(calc(var(--mx) * var(--k) * -14px), calc(var(--my) * var(--k) * -7px), 0) scaleX(-1); }
.palms .crown { animation: sway 7s ease-in-out infinite alternate; }
.palms .frond { animation: frond 4.6s ease-in-out infinite alternate; }
@keyframes sway {
  from { transform: rotate(-2.2deg); }
  to { transform: rotate(2.6deg); }
}
@keyframes frond {
  from { transform: rotate(-1.6deg); }
  to { transform: rotate(2deg); }
}

/* ───────────── 前景内容 ───────────── */
.stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.8vh, 20px);
  padding: 0 clamp(12px, 3vw, 40px) 64px;
  text-align: center;
}

.bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: max(14px, env(safe-area-inset-top));
}
.osd {
  font-family: var(--f-osd);
  font-size: clamp(17px, 2.3vh, 24px);
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 2px 0 rgba(46, 242, 255, .7), -2px 0 rgba(255, 60, 172, .7);
  white-space: nowrap;
}
.osd-dot {
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-right: .5em;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 10px #ff3b3b;
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.controls { display: flex; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--cyan);
  border-radius: 99px;
  background: rgba(18, 5, 43, .72);
  color: #eaffff;
  font: 400 17px/1 var(--f-cn);
  letter-spacing: .12em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(46, 242, 255, .35), inset 0 0 10px rgba(46, 242, 255, .18);
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: translateY(1px) scale(.97); }
.chip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.chip[aria-pressed="true"] {
  border-color: var(--pink);
  background: rgba(255, 60, 172, .28);
  box-shadow: 0 0 20px rgba(255, 60, 172, .65), inset 0 0 12px rgba(255, 60, 172, .35);
}
.chip-ico { font-size: 18px; line-height: 1; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 4px; background: currentColor; border-radius: 1px; }
.chip[aria-pressed="true"] .eq i { animation: eq .7s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s !important; }
.eq i:nth-child(3) { animation-delay: -.5s !important; }
.eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { to { height: 14px; } }

/* 标题 */
.title { position: relative; margin-top: clamp(0px, 1vh, 12px); }
.kicker {
  font: 400 clamp(13px, 2.1vh, 20px)/1 var(--f-num);
  letter-spacing: .62em;
  margin-right: -.62em;
  color: var(--cream);
  text-shadow: 0 0 12px rgba(255, 210, 63, .7);
}
h1 {
  position: relative;
  display: inline-block;
  font-size: clamp(84px, min(17vw, 19vh), 210px);
  line-height: .98;
  font-weight: 400;
}
/* 官方 Logo：光晕呼吸 + 一道扫光 */
h1.logo {
  --lh: min(27vh, 30vw);
  display: block;
  width: calc(var(--lh) * 980 / 744);
  height: var(--lh);
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
  animation: pop-in 1.2s cubic-bezier(.2, 1.4, .3, 1) both;
}
h1.logo img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .55))
    drop-shadow(0 0 22px rgba(255, 110, 190, .75))
    drop-shadow(0 10px 30px rgba(18, 5, 43, .6));
  animation: logo-glow 4.5s ease-in-out infinite;
}
h1.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%) 130% 0 / 320% 100% no-repeat;
  -webkit-mask: url("assets/gta6-logo.svg") center / contain no-repeat;
  mask: url("assets/gta6-logo.svg") center / contain no-repeat;
  mix-blend-mode: screen;
  animation: logo-sweep 5.5s ease-in-out 1.4s infinite;
  pointer-events: none;
}
@keyframes logo-glow {
  50% {
    filter:
      drop-shadow(0 0 3px rgba(255, 255, 255, .8))
      drop-shadow(0 0 38px rgba(255, 150, 120, .95))
      drop-shadow(0 10px 30px rgba(18, 5, 43, .6));
  }
}
@keyframes logo-sweep {
  0% { background-position: 130% 0; }
  45%, 100% { background-position: -30% 0; }
}
.vi {
  display: block;
  font-family: "Monoton", var(--f-num);
  letter-spacing: .04em;
  padding: 0 .12em;
  background: linear-gradient(#fff9c9 8%, #ffd23f 34%, #ff5fa2 62%, #c53dff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 95, 162, .75)) drop-shadow(.035em .035em 0 rgba(18, 5, 43, .85));
  animation: pop-in 1.2s cubic-bezier(.2, 1.4, .3, 1) both;
}
.script {
  position: absolute;
  right: -.42em;
  bottom: -.02em;
  font: 400 .34em/1 "Mr Dafoe", "Brush Script MT", cursive;
  color: #eaffff;
  white-space: nowrap;
  transform: rotate(-8deg);
  text-shadow: 0 0 6px #fff, 0 0 16px var(--cyan), 0 0 34px var(--cyan), 0 0 60px #1aa5ff;
  animation: neon-flicker 6s linear 1.4s infinite both;
}
.sub {
  margin-top: clamp(4px, 1vh, 10px);
  font: 400 clamp(17px, 2.9vh, 28px)/1.2 var(--f-cn);
  letter-spacing: .34em;
  margin-right: -.34em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(18, 5, 43, .7), 0 0 16px rgba(255, 60, 172, .8);
}
.sub b { color: var(--yellow); font-weight: 400; }
@keyframes pop-in {
  from { transform: scale(.6) rotate(-4deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes neon-flicker {
  0%, 18%, 20%, 22%, 52%, 54%, 100% { opacity: 1; }
  19%, 21%, 53% { opacity: .35; }
}

/* 倒计时 */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: clamp(8px, 1.5vw, 22px);
  font-size: var(--fs);
  animation: rise-in 1s .35s cubic-bezier(.2, .9, .3, 1) both;
}
.unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .1em .2em .09em;
  border: 2px solid var(--pink);
  border-radius: .12em;
  background:
    linear-gradient(rgba(255, 255, 255, .07), transparent 40%),
    rgba(20, 5, 44, .8);
  box-shadow:
    .05em .05em 0 rgba(46, 242, 255, .85),
    0 0 26px rgba(255, 60, 172, .6),
    inset 0 0 26px rgba(255, 60, 172, .28);
}
.unit::before {                      /* 翻页牌中缝 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(.1em + .54em);
  height: 2px;
  background: rgba(8, 1, 22, .55);
  z-index: 2;
  pointer-events: none;
}
.unit-s { border-color: var(--cyan); box-shadow: .05em .05em 0 rgba(255, 60, 172, .9), 0 0 26px rgba(46, 242, 255, .5), inset 0 0 26px rgba(46, 242, 255, .22); }
.digits { display: flex; font-family: var(--f-num); line-height: 1; }
.digit {
  position: relative;
  width: .56em;
  height: 1.08em;
  overflow: hidden;
}
.digit span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(#fffbe0 12%, #ffe066 38%, #ff9a4d 64%, #ff4fa0 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.unit-s .digit span { background-image: linear-gradient(#ffffff 12%, #c9fbff 40%, #2ef2ff 70%, #5a8bff 96%); }
.digit span.in { animation: d-in .42s cubic-bezier(.2, .9, .3, 1.2) both; }
.digit span.out { animation: d-out .42s cubic-bezier(.5, 0, .8, .4) both; }
@keyframes d-in {
  from { transform: translateY(-105%); }
  to { transform: none; }
}
@keyframes d-out {
  to { transform: translateY(105%); }
}
.label {
  font: 400 max(14px, .17em)/1 var(--f-cn);
  letter-spacing: .5em;
  margin-right: -.5em;
  padding: .25em 0 .35em;
  color: var(--cream);
  text-shadow: 0 0 10px rgba(255, 210, 63, .8);
}
@keyframes rise-in {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
body.final .unit { animation: alarm 1s ease-in-out infinite; }
@keyframes alarm {
  50% { box-shadow: .05em .05em 0 rgba(46, 242, 255, .85), 0 0 60px rgba(255, 60, 172, 1), inset 0 0 40px rgba(255, 60, 172, .6); }
}

/* 已发售 */
.released[hidden], .countdown[hidden], .local[hidden], .road-wrap[hidden] { display: none; }
.released { animation: pop-in .9s cubic-bezier(.2, 1.4, .3, 1) both; }
.released h2 {
  font: 400 clamp(72px, min(24vw, 26vh), 260px)/1.05 var(--f-cn);
  letter-spacing: .08em;
  margin-right: -.08em;
  background: linear-gradient(#fffbe0 10%, #ffe066 36%, #ff7a5c 62%, #ff3cac 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(.03em .03em 0 #2ef2ff) drop-shadow(0 0 26px rgba(255, 60, 172, .9));
}
.released-sub {
  display: inline-block;
  padding: .25em .7em .25em .9em;
  border-radius: 10px;
  background: rgba(18, 5, 43, .78);
  font: 400 clamp(17px, min(4vh, 5.4vw), 40px)/1.3 var(--f-cn);
  letter-spacing: .22em;
  color: #eaffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, .7), 0 0 18px var(--cyan);
  box-shadow: 0 0 0 2px var(--cyan), 0 0 22px rgba(46, 242, 255, .5);
}
.released-since {
  margin-top: 14px;
  font: 400 clamp(20px, 3vh, 28px)/1 var(--f-osd);
  letter-spacing: .1em;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(18, 5, 43, .9), 0 0 12px rgba(18, 5, 43, .9);
}

/* 信息区 */
.meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(680px, 100%);
  animation: rise-in 1s .6s cubic-bezier(.2, .9, .3, 1) both;
}
.unlock, .local {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(18, 5, 43, .72);
  font-size: clamp(13px, 1.9vh, 16px);
  line-height: 1.5;
  color: #f3e9ff;
}
.unlock b { color: var(--yellow); font-weight: 700; letter-spacing: .03em; }
.tag {
  padding: 1px 9px;
  border-radius: 6px;
  background: var(--pink);
  color: #fff;
  font: 400 15px/1.5 var(--f-cn);
  letter-spacing: .12em;
}
.road-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  font: 400 15px/1 var(--f-osd);
  letter-spacing: .04em;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(18, 5, 43, .9);
  white-space: nowrap;
}
.road {
  position: relative;
  flex: 1;
  height: 14px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 243, 176, .8) 0 10px, transparent 10px 22px) center / 100% 2px no-repeat,
    #1a0838;
  box-shadow: 0 0 0 2px rgba(255, 60, 172, .7), 0 0 14px rgba(255, 60, 172, .5);
}
.road-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, rgba(46, 242, 255, .15), rgba(255, 60, 172, .65));
}
.car {
  position: absolute;
  left: 0;
  bottom: 8px;
  margin-left: -44px;
  filter: drop-shadow(0 0 6px rgba(255, 60, 172, .9));
  animation: car-bob .5s ease-in-out infinite alternate;
}
@keyframes car-bob { to { transform: translateY(-1.5px); } }
.hint {
  font: 400 15px/1 var(--f-cn);
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 0 rgba(18, 5, 43, .9);
}

/* 底部跑马灯 */
.ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: calc(36px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  background: rgba(10, 2, 26, .82);
  border-top: 2px solid var(--pink);
  box-shadow: 0 -4px 22px rgba(255, 60, 172, .45);
}
.track {
  display: inline-flex;
  white-space: nowrap;
  font: 400 16px/34px var(--f-cn);
  letter-spacing: .14em;
  color: var(--cream);
  animation: marquee 48s linear infinite;
}
.track span { padding-right: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 烟花 / CRT 覆盖层 */
#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.crt {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(6, 0, 20, .55) 100%);
}
.crt::after {
  content: "";
  position: absolute;
  inset: -100px;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(4) infinite;
}
@keyframes grain {
  25% { transform: translate(-30px, 20px); }
  50% { transform: translate(25px, -35px); }
  75% { transform: translate(-15px, -20px); }
}

/* ───────────── 手机 ───────────── */
@media (max-width: 640px) {
  :root {
    --sun: min(86vw, 44vh);
    --horizon: 27%;
  }
  .osd { font-size: 17px; }
  .osd .osd-play { display: none; }
  .chip { padding: 0 11px; font-size: 16px; min-height: 40px; }
  h1.logo { --lh: min(19.5vh, 48vw); }
  .script { right: -.3em; }
  .sub { letter-spacing: .2em; margin-right: -.2em; }
  .countdown {
    grid-template-columns: repeat(3, 1fr);
    width: min(100%, 420px);
    gap: 10px;
    font-size: min(19vw, 11.5vh);
  }
  .unit { padding-left: 0; padding-right: 0; }
  .unit-d {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: .08em;
    font-size: 1.62em;
  }
  .unit-d::before { top: calc(.1em + .54em); }
  .unit-d .label { font-size: .3em; padding: 0; }
  .palms { height: 56vh; width: calc(56vh * 420 / 900); bottom: -3vh; }
  #palms-l { left: -14vw; }
  #palms-r { right: -14vw; }
  .plane { top: 9%; }
  .road-wrap { font-size: 14px; gap: 8px; margin-top: 12px; }
  .track { font-size: 15px; }
}

@media (max-height: 560px) and (min-width: 641px) {
  :root { --fs: clamp(48px, 20vh, 120px); }
  h1.logo { --lh: 26vh; }
  .hint { display: none; }
}

/* ───────────── 减少动态 ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .par, #palms-r { transform: none; }
  #palms-r { transform: scaleX(-1); }
  .plane { transform: translateX(58vw); }
  .track { transform: none; }
  .ticker { overflow-x: auto; }
}