/* ==========================================================================
   Sunshine Arcade — home page
   ========================================================================== */

body.home { overflow-x: clip; }

.wrap {
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
}

/* ---------- Hero: the wordmark and the token, locked up side by side ---------- */

.hero { padding: clamp(36px, 6vw, 84px) 0 clamp(48px, 6.5vw, 92px); }

.lockup {
  --m: calc(min(1240px, 100vw - 40px) / 7.1);     /* base letter size */
  display: flex;
  align-items: center;
  gap: calc(var(--m) * .3);
  font-size: var(--m);
}

/* home.js sizes each line (width axis + font size) so both lines end flush. */
.wordmark {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 1em;
  font-weight: 900;
  line-height: .8;
  letter-spacing: -0.03em;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.word { display: block; white-space: nowrap; }
.word-top { color: var(--sun); font-stretch: 100%; }
.word-bottom { margin-top: .05em; font-stretch: 126%; }
.ch {
  display: inline-block;
  font-stretch: var(--s);
  transform-origin: 50% 80%;
  transition: opacity .3s ease-out;
  will-change: transform;
  cursor: pointer;
}
/* Held back until the font has loaded, so the letters don't jump when it swaps in. */
.wordmark { transition: opacity .5s ease-out; }
.wordmark.is-pending { opacity: 0; }
/* During the opening, letters rise from behind an invisible line under each word. */
.wordmark.is-intro .word { clip-path: inset(-1em -.5em -.06em -.5em); }

/* ---------- The token: a chunky two-faced coin with a real edge ---------- */

.coin {
  --size: calc(var(--m) * 1.62);
  --t: calc(var(--size) * .085);          /* thickness */
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
}
.coin:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; }

.coin-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.coin-face,
.coin-edge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.coin-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.coin-face svg { display: block; width: 100%; height: 100%; }
.coin-front { transform: translateZ(calc(var(--t) / 2)); }
.coin-back { transform: rotateX(180deg) translateZ(calc(var(--t) / 2)); }

/* A moving glint across both faces, driven by the tilt. */
.coin-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 47%, rgba(255, 255, 255, 0) 56%);
  background-size: 250% 250%;
  background-position: var(--glint, 60%) 50%;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.coin-edge {
  inset: 1.4%;
  background: var(--edge, #D99A14);
}
.coin-edge.rim { background: var(--ink); }

.coin-text {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 2.5px;
  fill: var(--ink);
}
.coin-reed { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.coin-dot { fill: var(--ink); }
.coin-text.night, .coin-dot.night { fill: var(--cream); }

/* ---------- The characters come alive (on the coin and in the footer) ---------- */

.coin .sun-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 22s linear infinite;
}
.coin .sun-face {
  transform-box: fill-box;
  transform-origin: center;
  animation: face-bob 3.4s ease-in-out infinite;
}
@keyframes face-bob { 50% { transform: translateY(-4px) rotate(-4deg); } }

.coin .eyes rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 5.2s infinite;
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94.5% { transform: scaleY(.12); }
}

.coin .moon-rock,
.body-moon .moon-rock {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: rock 4.8s ease-in-out infinite;
}
@keyframes rock {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(5deg) translateY(-3px); }
}
.coin .twinkle,
.body-moon .twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 2.6s ease-in-out infinite;
}
.twinkle:nth-of-type(2) { animation-delay: -.9s; animation-duration: 3.1s; }
.twinkle:nth-of-type(3) { animation-delay: -1.7s; animation-duration: 2.2s; }
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(.45) rotate(45deg); opacity: .55; }
}

/* ---------- Grid of games ---------- */

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 34px;
}

.card {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.card:focus-visible { outline: none; }
.card:focus-visible .thumb { outline: 3px solid var(--ink); outline-offset: 5px; }

.thumb {
  --line: var(--ink);
  --drop: var(--ink);
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c);
  border: 3px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--drop);
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), box-shadow .22s cubic-bezier(.3, 1.6, .5, 1);
  isolation: isolate;
}
.thumb canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .55;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.card:hover .thumb { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 12px 0 var(--drop); }
.grid li:nth-child(even) .card:hover .thumb { transform: translateY(-6px) rotate(1.2deg); }
.card:active .thumb,
.grid li:nth-child(even) .card:active .thumb {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--drop);
  transition-duration: .06s;
}

/* The "coming soon" card isn't a link: it doesn't lift or press, its screen just speeds up on hover. */
.card.is-soon { cursor: default; }
.card.is-soon:hover .thumb,
.card.is-soon:active .thumb,
.grid li:nth-child(even) .card.is-soon:hover .thumb {
  transform: none;
  box-shadow: 0 6px 0 var(--drop);
}
.card.is-soon:hover .info h2 { font-stretch: 122%; }

.info { padding: 18px 4px 0; }
.info h2 {
  font-size: clamp(24px, 2.5vw, 31px);
  font-weight: 900;
  font-stretch: 122%;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: font-stretch .3s cubic-bezier(.3, 1.6, .5, 1);
}
.card:hover .info h2 { font-stretch: 135%; }
.info p {
  margin-top: 8px;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 38ch;
  text-wrap: pretty;
}

/* ---------- Footer: a seaside sunset ----------
   A fixed little scene: the sky picks up where the page leaves off and warms
   towards the horizon; the sun dozes on the water, waves roll in, a boat bobs. */

.foot {
  --sky-1: var(--paper);
  --sky-2: #F9DCBF;
  --sky-3: #FDBC9C;
  --sky-4: #FF9A80;
  --sea-1: #8193EC;
  --sea-2: #5677E8;   --sea-hi-2: #A5B6FF;
  --sea-3: #3459D6;   --sea-hi-3: #7391F2;
  --sea-4: #2445B5;   --sea-hi-4: #4D6EDB;
  --sea-5: #183190;   --sea-hi-5: #3150BA;
  --halo-1: rgba(255, 243, 214, .62);
  --halo-2: rgba(255, 226, 190, .42);
  --halo-3: rgba(255, 210, 178, .28);
  --haze: rgba(255, 236, 214, .55);
  --beam: rgba(255, 255, 255, .17);
  --glint-a: var(--yellow);
  --glint-b: var(--pink);
  --glint-c: var(--cream);
  --foot-ink: var(--ink);
  --wave-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10C20 2 40 2 60 10S100 18 120 10S160 2 180 10S220 18 240 10V20H0Z'/%3E%3C/svg%3E");
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 6vw, 80px);
  text-align: center;
  color: var(--foot-ink);
  background-color: var(--sky-4);
  background-image: var(--grain), linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 70%, var(--sky-4) 100%);
}

.foot-stars {
  position: absolute;
  inset: 0 0 30% 0;
  pointer-events: none;
  opacity: 0;
}
.foot-stars i {
  position: absolute;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--cream);
  animation: twinkle-dot 3.2s ease-in-out infinite;
  animation-delay: var(--delay);
}
@keyframes twinkle-dot { 50% { opacity: .2; } }

.foot-copy {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: clamp(20px, 2.6vw, 30px);
  padding-top: clamp(72px, 10vw, 136px);
}
.foot-big {
  font-size: clamp(42px, 6.6vw, 88px);
  font-weight: 900;
  font-stretch: 140%;
  letter-spacing: -0.045em;
  line-height: .9;
  text-wrap: balance;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 22px;
}
/* Set in the display face so it belongs with the headline, just quieter. */
.foot-legal {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--foot-ink) 78%, transparent);
}
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px 12px 20px;
  font-size: 18px;
  font-weight: 800;
  font-stretch: 115%;
  color: var(--ink);
  text-decoration: none;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.foot-link span { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.foot-link:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.foot-link:hover span { transform: translate(3px, -3px); }
.foot-link:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }

/* ---- The scene ---- */

/* Layers, back to front: beams, halo, horizon haze, shooting star, sun/moon,
   gulls, sea (with its reflection), boat. */
.scene {
  --horizon: 55%;
  --S: clamp(130px, 15vw, 205px);          /* reference size for the scene */
  --B: calc(var(--S) * .88);               /* the sun (or moon) itself */
  --gap: calc(var(--S) * .1);              /* clear sky between it and the water */
  --cy: calc(var(--horizon) - var(--gap) - var(--B) / 2);   /* its centre */
  --boat: clamp(38px, 4.4vw, 62px);
  position: relative;
  isolation: isolate;
  height: clamp(320px, 35vw, 460px);
  margin-top: clamp(4px, 1.5vw, 18px);
  pointer-events: none;
}

/* A soft haze glowing along the horizon. */
.haze {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: calc(var(--horizon) - var(--S) * .5);
  height: calc(var(--S) * .5);
  background: linear-gradient(180deg, transparent, var(--haze));
}

/* Faint sunbeams, slowly turning. */
.beams {
  position: absolute;
  left: 50%;
  z-index: 1;
  top: var(--cy);
  width: calc(var(--S) * 5.2);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--beam) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 64%);
  mask: radial-gradient(circle, #000 14%, transparent 64%);
  animation: beams 140s linear infinite;
}
@keyframes beams { to { rotate: 360deg; } }

/* Soft rings of light around the sun. */
.halo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--cy);
  width: 0;
  height: 0;
}
.halo i {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: halo 7s ease-in-out infinite;
}
.halo i:nth-child(1) { width: calc(var(--S) * 1.32); height: calc(var(--S) * 1.32); background: var(--halo-1); }
.halo i:nth-child(2) { width: calc(var(--S) * 1.9); height: calc(var(--S) * 1.9); background: var(--halo-2); animation-delay: -1.2s; }
.halo i:nth-child(3) { width: calc(var(--S) * 2.7); height: calc(var(--S) * 2.7); background: var(--halo-3); animation-delay: -2.4s; }
@keyframes halo { 50% { transform: translate(-50%, -50%) scale(1.045); } }

/* Seagulls: flown by home.js. Each one beats its wings to climb, then glides and
   sinks a little, banking as it goes; the wing shape is redrawn every frame. */
.gulls { position: absolute; z-index: 5; inset: 0 0 calc(100% - var(--horizon)) 0; }
.gull {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--gw);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--foot-ink);
  stroke-width: 2.3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
  will-change: transform;
}
.gull path { vector-effect: non-scaling-stroke; }

.shooting {
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 18%;
  width: clamp(60px, 8vw, 110px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cream));
  opacity: 0;
  display: none;
}

/* The sun (or moon) hangs just above the water and slowly dozes off. */
.sky-body {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--horizon);
  width: var(--B);
  height: var(--B);
  transform: translate(-50%, calc(-100% - var(--gap)));
  animation: float 7.3s ease-in-out infinite alternate;
}
@keyframes float { to { translate: 0 3px; } }
.sky-body svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.body-sun .sun-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 50s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.body-sun .sun-face {
  transform-box: fill-box;
  transform-origin: 50% 70%;
  animation: doze-nod 9s ease-in-out infinite;
}
.body-sun .eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: doze-eyes 9s ease-in-out infinite;
}
@keyframes doze-eyes {
  0%, 28% { transform: scaleY(.62); }
  40%, 72% { transform: scaleY(.1); }
  77% { transform: scaleY(1.12); }
  85%, 100% { transform: scaleY(.62); }
}
@keyframes doze-nod {
  0%, 28% { transform: rotate(0deg) translateY(0); }
  44%, 70% { transform: rotate(7deg) translateY(4px); }
  76% { transform: rotate(-3deg) translateY(-6px); }
  86%, 100% { transform: rotate(0deg) translateY(0); }
}
.body-moon { display: none; }

.zzz {
  position: absolute;
  left: 78%;
  top: 0;
  font-weight: 900;
  font-stretch: 120%;
  color: var(--foot-ink);
  animation: doze-z 9s ease-in-out infinite;
}
@keyframes doze-z {
  0%, 38% { opacity: 0; }
  48%, 70% { opacity: 1; }
  78%, 100% { opacity: 0; }
}
.zzz i {
  position: absolute;
  font-style: normal;
  opacity: 0;
  animation: zzz 3s ease-in infinite;
}
.zzz i:nth-child(1) { font-size: clamp(14px, 1.5vw, 19px); animation-delay: 0s; }
.zzz i:nth-child(2) { font-size: clamp(17px, 2vw, 25px); animation-delay: 1s; }
.zzz i:nth-child(3) { font-size: clamp(21px, 2.5vw, 32px); animation-delay: 2s; }
@keyframes zzz {
  0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(2em, -2.4em) rotate(10deg); opacity: 0; }
}
@keyframes zzz-left {
  0% { transform: translate(0, 0) rotate(8deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-2em, -2.4em) rotate(-10deg); opacity: 0; }
}

/* The sea: layered waves rolling past, each with a light crest. */
.sea {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: var(--horizon);
  bottom: 0;
  overflow: hidden;
  border-top: 3px solid var(--ink);
  background: var(--sea-1);
}
.wave {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--top);
  bottom: 0;
  filter: drop-shadow(0 -2.5px 0 var(--hi));
  animation: swell-bob var(--bob) ease-in-out infinite alternate;
}
@keyframes swell-bob { from { translate: 0 -2px; } to { translate: 0 3px; } }
.wave i {
  --tw: 260px;
  --th: 14px;
  position: absolute;
  inset: 0;
  background: var(--c);
  -webkit-mask: var(--wave-tile) 0 0 / var(--tw) var(--th) repeat-x, linear-gradient(#000, #000) 0 calc(var(--th) - 1px) / 100% 100% no-repeat;
  mask: var(--wave-tile) 0 0 / var(--tw) var(--th) repeat-x, linear-gradient(#000, #000) 0 calc(var(--th) - 1px) / 100% 100% no-repeat;
  animation: wave var(--dur) linear infinite;
}
.wave:nth-of-type(1) i { --tw: 210px; --th: 10px; }
.wave:nth-of-type(3) i { --tw: 320px; --th: 17px; }
.wave:nth-of-type(4) i { --tw: 380px; --th: 21px; }
@keyframes wave {
  to {
    -webkit-mask-position: calc(var(--tw) * -1) 0, 0 calc(var(--th) - 1px);
    mask-position: calc(var(--tw) * -1) 0, 0 calc(var(--th) - 1px);
  }
}

/* The reflection: a simple column of strokes under the sun (rows built in
   home.js), widening towards the viewer. Each row sways and breathes a moment
   after the one above it, so a soft ripple keeps running down the column. */
.glint {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  bottom: 0;
  width: calc(var(--S) * 1.75);
  transform: translateX(-50%);
}
.glint-row {
  position: absolute;
  left: 50%;
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: flex;
  gap: max(5px, 7%);
  opacity: var(--o);
  translate: -50% 0;
  animation: glint-row 3.4s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
.glint-row i {
  flex: var(--f, 1);
  height: 100%;
  border-radius: 99px;
  background: var(--c);
}
@keyframes glint-row {
  from { translate: calc(-50% - var(--amp)) 0; scale: .86 1; }
  to { translate: calc(-50% + var(--amp)) 0; scale: 1.04 1; }
}

/* Little glints of light on the water. */
.glitter i {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: clamp(8px, .9vw, 12px);
  aspect-ratio: 1;
  background: var(--glint-c);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: glitter 3.6s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes glitter {
  0%, 60%, 100% { opacity: 0; transform: scale(.3); }
  75% { opacity: 1; transform: scale(1); }
}

/* A little sailboat bobbing on the horizon. */
.boat {
  position: absolute;
  z-index: 7;
  left: 18%;
  top: calc(var(--horizon) - var(--boat) * .82);
  width: var(--boat);
  height: var(--boat);
  overflow: visible;
  transform-origin: 50% 80%;
  animation: rock-boat 4.6s ease-in-out infinite alternate, heave 3.1s ease-in-out infinite alternate;
}
@keyframes rock-boat { from { rotate: -5deg; } to { rotate: 4deg; } }
@keyframes heave { from { translate: 0 -1px; } to { translate: 0 3px; } }
.boat path { stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.boat-sail { fill: var(--cream); }
.boat-jib { fill: var(--pink); }
.boat-mast { fill: none; }
.boat-flag { fill: var(--sun); }
.boat-hull { fill: var(--ink); }
.boat-lamp { fill: var(--yellow); opacity: 0; }

/* ---------- Moonlight theme (the coin landed on the moon) ---------- */

:root[data-theme="moon"] body.home { color: var(--cream); }
:root[data-theme="moon"] .word-top { color: var(--yellow); }
:root[data-theme="moon"] .info p { color: rgba(243, 237, 226, .68); }
:root[data-theme="moon"] .thumb { --line: var(--cream); --drop: #09081A; }
:root[data-theme="moon"] .card:focus-visible .thumb,
:root[data-theme="moon"] .coin:focus-visible { outline-color: var(--cream); }

:root[data-theme="moon"] .foot {
  --sky-2: #1A1C45;
  --sky-3: #232C64;
  --sky-4: #303E88;
  --sea-1: #2D3778;
  --sea-2: #232B66;   --sea-hi-2: #3B4790;
  --sea-3: #1A2152;   --sea-hi-3: #2C377A;
  --sea-4: #131941;   --sea-hi-4: #222B63;
  --sea-5: #0C1030;   --sea-hi-5: #19204F;
  --halo-1: rgba(214, 224, 255, .2);
  --halo-2: rgba(190, 205, 255, .13);
  --halo-3: rgba(170, 188, 255, .08);
  --haze: rgba(120, 140, 220, .22);
  --beam: rgba(214, 224, 255, .05);
  --glint-a: var(--cream);
  --glint-b: var(--yellow);
  --glint-c: var(--cream);
  --foot-ink: var(--cream);
}
:root[data-theme="moon"] .foot-stars { opacity: 1; }
:root[data-theme="moon"] .body-sun,
:root[data-theme="moon"] .gulls { display: none; }
:root[data-theme="moon"] .body-moon { display: block; filter: drop-shadow(0 0 14px rgba(255, 214, 120, .32)); }
/* The moon floats fully above the water (the sea never cuts through it); its glow follows. */
:root[data-theme="moon"] .scene { --B: calc(var(--S) * .82); }
:root[data-theme="moon"] .zzz { left: 2%; top: 10%; animation: none; opacity: 1; }
:root[data-theme="moon"] .zzz i { animation-name: zzz-left; }
:root[data-theme="moon"] .glint { width: calc(var(--S) * 1.25); }
:root[data-theme="moon"] .boat-lamp { opacity: 1; filter: drop-shadow(0 0 4px var(--yellow)) drop-shadow(0 0 10px var(--yellow)); animation: lamp 2.8s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: .65; } }
:root[data-theme="moon"] .boat-sail { fill: #D8DCF5; }
:root[data-theme="moon"] .shooting { display: block; animation: shoot 9s ease-in infinite; }
@keyframes shoot {
  0%, 86% { opacity: 0; transform: translate(0, 0) rotate(20deg); }
  89% { opacity: 1; }
  100% { opacity: 0; transform: translate(min(30vw, 320px), min(11vw, 116px)) rotate(20deg); }
}
:root[data-theme="moon"] .foot-link:focus-visible { outline-color: var(--cream); }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 26px; }
}

@media (max-width: 700px) {
  .wrap { width: min(1240px, 100% - 32px); }
  .lockup {
    --m: calc((100vw - 32px) / 5.3);
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  .coin { --size: min(34vw, 136px); order: -1; align-self: center; }
  .wordmark { letter-spacing: -0.015em; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .foot-big { font-size: 9.4vw; font-stretch: 125%; }
  .scene { height: 310px; --S: 118px; --boat: 34px; }
  .boat { left: 9%; }
}

@media (prefers-reduced-motion: reduce) {
  .foot-stars i, .body-sun .sun-rays, .body-sun .sun-face, .body-sun .eyes, .zzz, .zzz i,
  .glint-row, .glitter i, .wave, .wave i, .halo i, .beams, .sky-body, .boat, .boat-lamp, .shooting,
  .coin .sun-rays, .coin .sun-face, .coin .moon-rock, .coin .twinkle,
  .coin .eyes rect, .body-moon .moon-rock, .body-moon .twinkle { animation: none !important; }
  .gulls, .shooting { display: none !important; }
  .zzz i { opacity: 1; }
  .zzz i:nth-child(2) { transform: translate(.9em, -1.1em); }
  .zzz i:nth-child(3) { transform: translate(1.8em, -2.3em); }
}