/* Jellyworks site, shared by the game page and the engine page.
   Layout: the game's launcher, scrolled. The game page is the light Free Build look on warm paper (floating white
   cards, pebble pills, Fredoka and Lexend); the engine turns to night and the editor's own type, the way the dark
   "Make a game" card sits beside "Build an island". */
:root {
  --paper: #F4EFEA;
  --paper-2: #FBF8F4;
  --card: #FFFFFF;
  --ink: #3E4458;
  --ink-soft: #5D6478;
  --line: rgba(62, 68, 88, 0.13);
  --sea: #6FB3B1;
  --sea-soft: #DCEFEC;
  --sea-deep: #2F7F7A;
  --sea-glass: #9BD1CA;
  --on-sea: #12302F;
  /* The JellyDrop logo's own teal, deep enough at its middle to carry white text: the selected tabs and the teal button. */
  --jelly: #148D8C;
  --jelly-top: #34B5AF;
  --apricot: #F0A983;
  --lantern: #FFD7A8;
  --night: #263171;
  --night-deep: #1B2357;
  --night-ink: #EEF0F2;
  --night-soft: #C3C8E6;
  --pane: #141519;

  --display: 'Fredoka', ui-rounded, 'Nunito', system-ui, sans-serif;
  --body: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --tech: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --hand: 'Patrick Hand', 'Segoe Print', 'Comic Sans MS', cursive;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --soft: 0 14px 40px rgba(62, 68, 88, 0.16);
  --ease: cubic-bezier(.2, .9, .25, 1);
  --bounce: cubic-bezier(.3, 1.4, .5, 1);
  /* Cursors: the Jellyworks set, drawn inline so they show at once (the system draws them, so they never lag). */
  --c-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237FD6CC'/%3E%3Cstop offset='.55' stop-color='%233FA79E'/%3E%3Cstop offset='1' stop-color='%232B7873'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 3.5 L5 23.5 L10.2 18.9 L13.6 26.4 L17.2 24.8 L13.9 17.6 L20.8 17.4 Z' transform='translate%281 1.4%29' fill='%231E2236' fill-opacity='.22' stroke='%231E2236' stroke-opacity='.22' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M5 3.5 L5 23.5 L10.2 18.9 L13.6 26.4 L17.2 24.8 L13.9 17.6 L20.8 17.4 Z' fill='%233E4458' stroke='%23FFFFFF' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 4, default;
  --c-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237FD6CC'/%3E%3Cstop offset='.55' stop-color='%233FA79E'/%3E%3Cstop offset='1' stop-color='%232B7873'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 3.5 L5 23.5 L10.2 18.9 L13.6 26.4 L17.2 24.8 L13.9 17.6 L20.8 17.4 Z' transform='translate%281 1.4%29' fill='%231E2236' fill-opacity='.22' stroke='%231E2236' stroke-opacity='.22' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M5 3.5 L5 23.5 L10.2 18.9 L13.6 26.4 L17.2 24.8 L13.9 17.6 L20.8 17.4 Z' fill='url%28%23j%29' stroke='%23FFFFFF' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M7.2 8.2 L7.2 13.6' stroke='%23FFFFFF' stroke-opacity='.85' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 4, pointer;
  --c-turn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237FD6CC'/%3E%3Cstop offset='.55' stop-color='%233FA79E'/%3E%3Cstop offset='1' stop-color='%232B7873'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16.8' cy='17.4' r='12' fill='%231E2236' fill-opacity='.22'/%3E%3Ccircle cx='16' cy='16' r='12' fill='%23FFFFFF'/%3E%3Ccircle cx='16' cy='16' r='10.6' fill='%23FFFFFF' stroke='%233E4458' stroke-opacity='.18' stroke-width='1'/%3E%3Cg fill='none' stroke='%233E4458' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 13.6a6.2 6.2 0 0 1 10.6-2.4'/%3E%3Cpath d='M21.6 7.9v3.6h-3.6'/%3E%3Cpath d='M21.8 18.4a6.2 6.2 0 0 1-10.6 2.4'/%3E%3Cpath d='M10.4 24.1v-3.6h3.6'/%3E%3C/g%3E%3C/svg%3E") 16 16, grab;
  --c-turning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237FD6CC'/%3E%3Cstop offset='.55' stop-color='%233FA79E'/%3E%3Cstop offset='1' stop-color='%232B7873'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='16.8' cy='17.6' rx='12.4' ry='11' fill='%231E2236' fill-opacity='.22'/%3E%3Cellipse cx='16' cy='16' rx='12.4' ry='11.2' fill='%23FFFFFF'/%3E%3Cellipse cx='16' cy='16' rx='10.8' ry='9.6' fill='url%28%23j%29'/%3E%3Cg transform='translate%2816 16%29 scale%281.02 .9%29 translate%28-16 -16%29'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 13.6a6.2 6.2 0 0 1 10.6-2.4'/%3E%3Cpath d='M21.6 7.9v3.6h-3.6'/%3E%3Cpath d='M21.8 18.4a6.2 6.2 0 0 1-10.6 2.4'/%3E%3Cpath d='M10.4 24.1v-3.6h3.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 16 16, grabbing;
  --c-water: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237FD6CC'/%3E%3Cstop offset='.55' stop-color='%233FA79E'/%3E%3Cstop offset='1' stop-color='%232B7873'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='16' cy='27' rx='8.6' ry='2.6' fill='none' stroke='%23FFFFFF' stroke-width='3.4'/%3E%3Cellipse cx='16' cy='27' rx='8.6' ry='2.6' fill='none' stroke='%233FA79E' stroke-width='1.6'/%3E%3Cpath d='M16 2.8 C16 2.8 10 10.2 10 14.6 A6 6 0 0 0 22 14.6 C22 10.2 16 2.8 16 2.8 Z' transform='translate%28.8 1.2%29' fill='%231E2236' fill-opacity='.22'/%3E%3Cpath d='M16 2.8 C16 2.8 10 10.2 10 14.6 A6 6 0 0 0 22 14.6 C22 10.2 16 2.8 16 2.8 Z' fill='url%28%23j%29' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M13.3 12.4 a3.4 3.4 0 0 1 1.4-2.6' fill='none' stroke='%23FFFFFF' stroke-opacity='.9' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") 16 27, pointer;
  --c-stir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237FD6CC'/%3E%3Cstop offset='.55' stop-color='%233FA79E'/%3E%3Cstop offset='1' stop-color='%232B7873'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='16' cy='25.6' rx='12.2' ry='3.6' fill='none' stroke='%23FFFFFF' stroke-width='3.4'/%3E%3Cellipse cx='16' cy='25.6' rx='12.2' ry='3.6' fill='none' stroke='%233FA79E' stroke-width='1.6'/%3E%3Cpath d='M16 13.4 C12 13.4 8.6 16.2 8.6 18.8 C8.6 21.6 12 22.6 16 22.6 C20 22.6 23.4 21.6 23.4 18.8 C23.4 16.2 20 13.4 16 13.4 Z' fill='url%28%23j%29' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17.4 a4 2 0 0 1 3-1.8' fill='none' stroke='%23FFFFFF' stroke-opacity='.9' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") 16 22, grabbing;
  --c-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='j' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237FD6CC'/%3E%3Cstop offset='.55' stop-color='%233FA79E'/%3E%3Cstop offset='1' stop-color='%232B7873'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='14.4' r='9' fill='%231E2236' fill-opacity='.22'/%3E%3Cpath d='M19.8 20.2 L27 27.4' stroke='%23FFFFFF' stroke-width='6.4' stroke-linecap='round'/%3E%3Cpath d='M19.8 20.2 L27 27.4' stroke='%233FA79E' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='13.2' cy='13.2' r='8.6' fill='%23FFFFFF' fill-opacity='.92' stroke='%23FFFFFF' stroke-width='2.6'/%3E%3Ccircle cx='13.2' cy='13.2' r='8.6' fill='none' stroke='%233E4458' stroke-width='2'/%3E%3Cpath d='M13.2 9.4v7.6M9.4 13.2h7.6' stroke='%233E4458' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") 13 13, zoom-in;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Things waiting to slide in from a side never widen the page. */
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; text-wrap: balance; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
/* The cursor says what a press will do: the arrow, jelly over anything clickable, and the island's own (below). */
html { cursor: var(--c-arrow); }
a[href], button, [role="button"], [role="radio"], [role="tab"], summary, label[for], select { cursor: var(--c-hand); }
button:disabled, [aria-disabled="true"] { cursor: var(--c-arrow); }
input, textarea { cursor: text; }
canvas.live-island { cursor: var(--c-turn); translate: 0 -15.4%; }
canvas.live-island[data-cursor="water"] { cursor: var(--c-water); }
canvas.live-island[data-cursor="turning"] { cursor: var(--c-turning); }
canvas.live-island[data-cursor="zoom"] { cursor: var(--c-zoom); }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 12px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 34em; }
.sec { padding-block: 104px; }
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: 44px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head h2 .line, .sec-head .lede .line { display: block; }
/* The engine page's first heading stands a little further off the three points under it. */
#ways.sec-head { margin-bottom: 64px; }
.sec-head h2, .big { font-size: clamp(34px, 4.4vw, 54px); }

/* Pebble buttons, as in the Free Build: dark ink for the one thing to do, quiet for the rest. */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 26px; font: 500 16px var(--body); text-decoration: none; white-space: nowrap; transition: transform 0.12s ease, box-shadow 0.24s ease, background-color 0.48s ease, color 0.48s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.96); transition-duration: 0.06s; }
.btn svg { flex: none; }
.btn-steam, .btn-primary { background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px rgba(62, 68, 88, 0.25); }
.btn-steam:hover, .btn-primary:hover { box-shadow: 0 14px 34px rgba(62, 68, 88, 0.3); }
.btn-quiet { background: rgba(62, 68, 88, 0.08); color: var(--ink); }
.btn-teal { background: linear-gradient(180deg, var(--jelly-top), var(--jelly) 55%); color: #fff; text-shadow: 0 1px 2px rgba(6, 60, 60, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 30px rgba(20, 141, 140, 0.35); }
.btn-teal:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 34px rgba(20, 141, 140, 0.45); }
.dark .btn-steam, .dark .btn-primary { background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.dark .btn-quiet { background: rgba(255, 255, 255, 0.12); color: var(--night-ink); }

/* ───────── Nav ───────── */
.nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 24px; height: 76px; }
/* The game's glossy word logo on its own (the "o" is the jelly drop), sized by the font size. */
.brand { display: inline-flex; align-items: center; line-height: 1; text-decoration: none; font-size: 24px; }
/* The picture's "y" hangs below the line: drop it a touch so the letters sit centred. */
.brand .wl { display: block; height: 1.4em; width: auto; max-width: none; flex: none; position: relative; top: 0.08em; user-select: none; -webkit-user-drag: none; transition: filter 1.4s ease; }
/* On dark and blue grounds the deep blue "Jelly" disappears: the logo turns all white there. */
.dark .brand .wl, .hero[data-time="night"] .brand .wl, .shore-foot .brand .wl { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(10, 20, 50, 0.25)); }
.nav-links { display: flex; gap: 6px; margin-left: auto; }
.nav-links a { padding: 8px 14px; border-radius: 18px; font-size: 15px; font-weight: 400; text-decoration: none; opacity: 0.85; transition: background-color 0.24s ease, opacity 0.24s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; background: rgba(62, 68, 88, 0.08); }
.dark .nav-links a:hover, .dark .nav-links a[aria-current="page"] { background: rgba(255, 255, 255, 0.1); }
.nav .btn { height: 42px; padding: 0 18px; font-size: 14px; }
.nav .btn .short { display: none; }
.menu-btn { display: none; }

/* ───────── Game page hero: the island at four times of day ───────── */
.hero { position: relative; background-color: #DEDAD7; color: var(--ink); transition: background-color 1.4s ease, color 1.4s ease; overflow: hidden; }
.hero[data-time="golden"] { background-color: #E3C0A0; }
.hero[data-time="blue"] { background-color: #BAABCF; }
.hero[data-time="night"] { background-color: #2A3375; color: var(--night-ink); }
/* With the live island running, the page takes the exact flat backdrop the island is drawn on (src/hero/main.ts),
   so the canvas has no edge at any window size; it eases over about as long as the island's own change of light. */
.hero:has(.stage-frame.live) { background-color: #DEDDDF; transition: background-color 4.5s cubic-bezier(.3, .6, .4, 1), color 1.4s ease; }
.hero:has(.stage-frame.live)[data-time="golden"] { background-color: #E6C2A7; }
.hero:has(.stage-frame.live)[data-time="blue"] { background-color: #AFA0CD; }
.hero:has(.stage-frame.live)[data-time="night"] { background-color: #1E2762; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: center; gap: 24px; padding-block: 32px 96px; }
.explore-m { display: none; }

/* Back to the top: on phones, a round button that rises in at the bottom right once the page's end is in view. */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 64px); z-index: 40; display: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: 0 10px 28px rgba(62, 68, 88, 0.22); opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity 0.3s ease, translate 0.42s var(--bounce); }
.to-top svg { rotate: -90deg; }
.to-top.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:active { scale: 0.92; }
@media (max-width: 680px) { .to-top { display: grid; } }

/* ───────── The reel: close views of islands people make, in one strip that drifts past on its own ───────── */
.reel { overflow: hidden; padding-block: 40px 72px; margin-block: -32px -32px; pointer-events: none; }
.reel-track { display: flex; gap: 20px; width: max-content; padding-inline: 10px; animation: reel 84s linear infinite; }
.reel figure { flex: none; margin: 0; height: clamp(220px, 27vw, 400px); aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #E8E2DC; box-shadow: 0 14px 36px rgba(62, 68, 88, 0.14); }
.reel img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The track holds the pictures twice over; moving it by half its width lands on the same picture, so the loop never jumps. */
@keyframes reel { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .reel { overflow-x: auto; pointer-events: auto; }
  .reel-track { animation: none; }
}

/* ───────── Things appear as you scroll to them: a rise and a fade (or a pop, or a slide in from a side), in turn within a group ───────── */
.js [data-reveal] { opacity: 0; translate: 0 30px; transition: opacity 0.7s var(--ease), translate 0.9s var(--ease), scale 0.8s var(--bounce); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-reveal="pop"] { translate: 0 0; scale: 0.86; }
.js [data-reveal="left"] { translate: -36px 0; }
.js [data-reveal="right"] { translate: 36px 0; }
.js [data-reveal].in { opacity: 1; translate: 0 0; scale: 1; }
/* The tool tabs: the pill rises, each tab pops into it in turn, then a glint runs across to say they are there to press. */
.js .tour-tabs[data-reveal]:not(.in) button { opacity: 0; }
.tour-tabs.in button { animation: tab-pop 0.62s var(--bounce) backwards; animation-delay: calc(var(--i, 0) * 70ms + 220ms); }
@keyframes tab-pop { from { opacity: 0; scale: 0.5; } to { opacity: 1; scale: 1; } }
.tour-tabs::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(127, 214, 204, 0.4) 47%, rgba(255, 255, 255, 0.95) 51%, rgba(127, 214, 204, 0.4) 55%, transparent 64%) no-repeat; background-size: 250% 100%; background-position: 200% 0; }
.tour-tabs.in::after { animation: tab-glint 1.6s cubic-bezier(.45, 0, .2, 1) 1s forwards; }
@keyframes tab-glint { to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; translate: 0 0; scale: 1; }
  .tour-tabs::after { display: none; }
}

/* ───────── Zoom for the live island: a pill at its right, shown only while the pointer is over the island ───────── */
.zoombar { position: absolute; right: -6px; top: 42%; z-index: 3; display: none; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 26px; background: rgba(255, 255, 255, 0.88); color: var(--ink); box-shadow: var(--soft); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; translate: 8px -50%; pointer-events: none; transition: opacity 0.24s ease, translate 0.32s var(--ease); }
.stage-frame.live + .zoombar { display: flex; }
.stage-frame.live:hover + .zoombar, .zoombar:hover, .zoombar:has(:focus-visible), .zoombar.held { opacity: 1; translate: 0 -50%; pointer-events: auto; }
.zb-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; transition: background-color 0.2s ease, transform 0.12s ease; }
.zb-btn:hover { background: rgba(62, 68, 88, 0.08); }
.zb-btn:active { transform: scale(0.9); }
.zb-track { position: relative; width: 38px; height: 120px; outline: none; cursor: var(--c-hand); touch-action: none; }
.zb-track::before, .zb-fill { content: ''; position: absolute; left: 50%; width: 6px; translate: -50% 0; border-radius: 3px; }
.zb-track::before { top: 6px; bottom: 6px; background: rgba(62, 68, 88, 0.14); }
.zb-fill { bottom: 6px; height: calc(var(--z, 0) * (100% - 12px)); background: var(--sea); }
.zb-thumb { position: absolute; left: 50%; bottom: calc(6px + var(--z, 0) * (100% - 12px)); width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--sea), 0 3px 8px rgba(62, 68, 88, 0.25); translate: -50% 50%; transition: scale 0.16s var(--bounce); }
.zb-track:hover .zb-thumb, .zoombar.held .zb-thumb { scale: 1.15; }
.zb-track:focus-visible .zb-thumb { box-shadow: 0 0 0 2px var(--sea), 0 0 0 6px rgba(79, 169, 163, 0.35); }

/* ───────── The trailer: a video frame with a big white play button; the video opens over the page ───────── */
.trailer-band { padding-block: 0 152px; }
.trailer-pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: var(--night); box-shadow: 0 24px 60px rgba(38, 49, 113, 0.22), 0 4px 14px rgba(38, 49, 113, 0.12); color: #fff; font: inherit; }
.trailer-pic > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform 0.96s var(--ease); }
.trailer-pic::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(18, 22, 58, 0) 40%, rgba(18, 22, 58, 0.42) 100%); pointer-events: none; }
.trailer-pic:hover > img:first-child { transform: scale(1.03); }
.trailer-logo { position: absolute; left: 4.5%; bottom: 6%; z-index: 1; width: clamp(130px, 19%, 220px); height: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(10, 14, 40, 0.35)); }
.trailer-play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: clamp(96px, 12.5vw, 148px); aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 18px 50px rgba(10, 14, 40, 0.38); translate: -50% -50%; transition: transform 0.32s var(--bounce), box-shadow 0.32s var(--ease); }
/* The triangle's middle sits on the circle's: its path is drawn centred on its own centroid. */
.trailer-play svg { width: 40%; height: 40%; }
.trailer-pic:hover .trailer-play { transform: scale(1.07); box-shadow: 0 22px 60px rgba(10, 14, 40, 0.45); }
.trailer-pic:active .trailer-play { transform: scale(0.94); }
.trailer-box { width: min(1200px, 94vw); max-width: none; padding: 0; border: 0; border-radius: 18px; overflow: visible; background: #000; }
.trailer-box::backdrop { background: rgba(14, 16, 34, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.trailer-box[open] { animation: trailer-in 0.42s var(--ease); }
@keyframes trailer-in { from { opacity: 0; transform: scale(0.96) translateY(10px); } }
.trailer-frame { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; }
.trailer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.trailer-close { position: absolute; right: 0; top: -54px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer; }
@keyframes bob-down { 0%, 60%, 100% { translate: 0 0; } 22% { translate: 0 6px; } 38% { translate: 0 -2px; } 48% { translate: 0 1px; } }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.hero .btn-steam, .hero .btn-quiet, .hero .nav-links a { transition: transform 0.12s ease, box-shadow 0.24s ease, background-color 1.4s ease, color 1.4s ease; }
.hero[data-time="night"] .btn-steam { background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.hero[data-time="night"] .btn-quiet { background: rgba(255, 255, 255, 0.14); color: var(--night-ink); }
.hero[data-time="night"] .nav-links a:hover { background: rgba(255, 255, 255, 0.1); }
.hero h1 { font-size: clamp(46px, 4.6vw, 66px); letter-spacing: -0.01em; }
.hero h1 .line { display: block; white-space: nowrap; }
.hero .lede { color: inherit; opacity: 0.82; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.stage { position: relative; left: clamp(0px, calc((100vw - 1100px) * 0.3), 112px); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.stage-frame { position: relative; width: 186%; max-width: 186%; aspect-ratio: 1600 / 1100; margin: -5% -43% -26%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); mask-composite: intersect; }
.stage-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.4s ease; user-select: none; -webkit-user-drag: none; }
.stage-frame img.on { opacity: 1; }
.stage-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
/* The live island (hero/hero.js) fades in over the pictures once it has drawn; then the pictures go, and the drawn
   ripples step aside for real ones. */
.stage-frame canvas.live-island { opacity: 0; transition: opacity 1.2s ease; }
.stage-frame.live canvas.live-island { opacity: 1; }
.stage-frame.live img, .stage-frame.live img.on { opacity: 0; transition: opacity 0s 1.3s; }
.stage-frame.live #ripples { display: none; }
.touch-hint { position: absolute; left: 50%; top: 47%; transform: translate(-50%, 0); padding: 7px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.88); color: var(--ink); font-size: 13px; font-weight: 400; box-shadow: 0 6px 20px rgba(62, 68, 88, 0.12); pointer-events: none; transition: opacity 0.48s ease, transform 0.48s ease; animation: hint-bob 2.4s ease-in-out infinite; }
.touch-hint.gone { opacity: 0; transform: translate(-50%, 8px); animation: none; }
@keyframes hint-bob { 50% { transform: translate(-50%, -4px); } }

/* The Sky bar under the island: a clock like the game's, the four times, and sound. */
.skybar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: -44px; }
.clock { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 14px; border-radius: 23px; background: rgba(255, 255, 255, 0.86); color: var(--ink); font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; box-shadow: 0 6px 20px rgba(62, 68, 88, 0.12); }
.clock svg { color: #D98F3E; }
.hero[data-time="night"] .clock svg, .hero[data-time="blue"] .clock svg { color: #6D73A8; }
.times { display: flex; padding: 4px; border-radius: 23px; background: rgba(236, 232, 228, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(62, 68, 88, 0.1); transition: background-color 1.4s ease; }
.hero[data-time="night"] .times { background: rgba(48, 58, 128, 0.82); }
.hero[data-time="golden"] .times { background: rgba(240, 214, 190, 0.85); }
.hero[data-time="blue"] .times { background: rgba(204, 192, 222, 0.85); }
.times button { height: 38px; padding: 0 18px; border: 0; border-radius: 19px; background: transparent; color: inherit; font-size: 15px; font-weight: 400; opacity: 0.78; transition: background-color 0.24s ease, opacity 0.24s ease, transform 0.12s ease; }
.times button:hover { opacity: 1; }
.times button:active { transform: scale(0.95); }
.times button[aria-checked="true"] { background: var(--card); color: var(--ink); opacity: 1; font-weight: 500; box-shadow: 0 1px 4px rgba(62, 68, 88, 0.15); }
.times button { position: relative; }
.clock { display: none; }
.times button { display: inline-flex; align-items: center; gap: 7px; }
.times .t-ico { width: 18px; height: 18px; }
.round { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.86); color: var(--ink); box-shadow: 0 6px 20px rgba(62, 68, 88, 0.12); transition: transform 0.12s ease; }
.round:active { transform: scale(0.92); }
.round .on-ico { display: none; }
.round[aria-pressed="true"] .on-ico { display: block; }
.round[aria-pressed="true"] .off-ico { display: none; }

/* ───────── Shape it, Build it, Bring it to life ───────── */
section { position: relative; }
#ways { scroll-margin-top: 48px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.trio > div { display: grid; align-content: start; gap: 14px; min-width: 0; }
.trio svg { width: 56px; height: 56px; color: var(--sea-deep); margin-left: -4px; transition: transform 0.32s var(--bounce); }
.trio > div:hover svg { transform: translateY(-4px) rotate(-4deg); }
.trio h3 { font-size: 30px; }
.trio p { color: var(--ink-soft); font-size: 17px; }

/* ───────── The tool tour: real Free Build screenshots ───────── */
.tour-tabs { position: relative; display: flex; gap: 8px; padding: 8px; margin: 0 auto 26px; width: max-content; max-width: 100%; border-radius: 34px; background: var(--card); box-shadow: var(--soft); overflow-x: auto; scrollbar-width: none; }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs button { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 26px; background: transparent; font-size: 16.5px; font-weight: 400; transition: background-color 0.15s ease, transform 0.12s ease; }
.tour-tabs button:hover { background: rgba(62, 68, 88, 0.06); translate: 0 -1px; }
.tour-tabs button svg { width: 22px; height: 22px; }
.tour-tabs button:active { transform: scale(0.95); }
.tour-tabs button[aria-selected="true"] { background: linear-gradient(180deg, var(--jelly-top), var(--jelly) 55%); color: #fff; text-shadow: 0 1px 2px rgba(6, 60, 60, 0.35); font-weight: 500; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(20, 141, 140, 0.3); }
.tour-tabs button[aria-selected="true"] svg { animation: settle 0.32s var(--bounce); }
@keyframes settle { 0% { transform: translateY(-3px) scale(1.05); } 45% { transform: translateY(1px) scale(0.94, 1.06); } 100% { transform: none; } }
.shot { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #E8E2DC; aspect-ratio: 1440 / 900; box-shadow: 0 30px 80px rgba(62, 68, 88, 0.2), 0 0 0 1px rgba(62, 68, 88, 0.06); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.015); z-index: 0; transition: opacity 0.3s ease 0.5s, transform 0.96s var(--ease) 0.5s; }
.shot img.on { opacity: 1; transform: none; z-index: 1; transition: opacity 0.48s ease, transform 0.96s var(--ease); }
.shot-cap { max-width: 46em; margin: 30px auto 0; text-align: center; font-size: 20px; font-weight: 400; line-height: 1.5; color: var(--ink); min-height: 3em; text-wrap: balance; }
.shot-cap.swap { animation: cap-in 0.32s var(--ease); }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } }

/* ───────── Water ───────── */
.water { position: relative; background: #8FD3CC; overflow: hidden; }
.water-pic { position: relative; aspect-ratio: 2400 / 1000; min-height: 540px; max-height: 820px; width: 100%; }
.water-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.water-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
.water-hint { top: auto; bottom: 28px; left: auto; right: max(28px, env(safe-area-inset-right, 0px)); transform: none; animation: none; }
.water-hint.gone { transform: translateY(8px); }
.water-over { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.water-over .wrap { max-width: none; padding-block: 3% 0; padding-left: max(40px, 6.5vw, env(safe-area-inset-left, 0px)); }
.water-over .water-card { pointer-events: auto; }
.water-card { max-width: 500px; display: grid; gap: 12px; padding: 26px 28px; border-radius: 24px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--soft); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.water-card h2 { font-size: clamp(28px, 3vw, 38px); }
.water-card p { color: var(--ink-soft); font-size: 16px; text-wrap: pretty; }

/* ───────── Residents: a granted wish leads to a postcard ───────── */
#residents { padding-top: 80px; }
.folk-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.folk-copy { display: grid; gap: 28px; min-width: 0; }
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 160px)); gap: 18px; }
.look { display: grid; justify-items: center; gap: 10px; font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.look img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 62%; box-shadow: 0 10px 28px rgba(62, 68, 88, 0.18); transition: transform 0.24s var(--bounce); }
.look:hover img { transform: translateY(-5px) rotate(-3deg); }

.wish-flow { position: relative; min-width: 0; padding-top: 8px; }
.wishes { position: relative; z-index: 2; width: 330px; max-width: 100%; padding: 6px 20px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--soft); transform: rotate(-1.5deg); }
.wish { display: grid; gap: 5px; padding: 14px 0 0; }
.wish b { font: 500 19px var(--display); }
.wish small { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 13px; }
.wish small i { width: 9px; height: 9px; border-radius: 50%; }
.task { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; font-weight: 400; }
.task .box { width: 18px; height: 18px; flex: none; border: 1.5px solid rgba(62, 68, 88, 0.35); border-radius: 5px; display: grid; place-items: center; }
.task.done .box { background: var(--sea); border-color: var(--sea); color: var(--on-sea); }
.task.done span:not(.box) { text-decoration: line-through; text-decoration-color: rgba(62, 68, 88, 0.4); color: var(--ink-soft); }
.task em { margin-left: auto; font-style: normal; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.granted { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px 5px 9px; border-radius: 13px; background: #FCE8DD; color: #9A5634; font-size: 13px; font-weight: 500; }
.granted svg { color: var(--apricot); }

/* A hand-drawn dotted arrow from the wish to the postcard; its dots drift along it. */
.wish-arrow { position: absolute; z-index: 1; left: 300px; top: 26px; width: 240px; height: 190px; overflow: visible; }
.wish-arrow path { fill: none; stroke: var(--apricot); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.wish-arrow .trail { stroke-dasharray: 0.1 11; animation: march 1.6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -11.1; } }
@keyframes march-m { to { stroke-dashoffset: -22.1; } }
.arrow-note { position: absolute; z-index: 1; right: 0; top: 26px; font: 400 32px var(--hand); color: #C27650; transform: rotate(6deg); white-space: nowrap; }

.postcard { position: relative; z-index: 2; width: min(100%, 640px); margin: 44px 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 18px; border-radius: 10px; background: #FFFDF9; box-shadow: 0 30px 70px rgba(62, 68, 88, 0.2), 0 3px 8px rgba(62, 68, 88, 0.08); transform: rotate(2deg); transition: transform 0.48s var(--bounce); }
.postcard:hover { transform: rotate(0.5deg) translateY(-6px); }
.postcard .pic { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; }
.postcard .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.postcard .back { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 6px 4px 4px 24px; border-left: 1px dashed rgba(62, 68, 88, 0.22); min-width: 0; }
/* A real postage stamp: a little picture (sky, a wave and a jelly drop) on white paper with punched edges, a touch
   crooked, with a soft shadow; the postmark lands on its corner with wavy cancel lines trailing off. */
.stamp { align-self: flex-end; margin: 2px 2px 6px 0; transform: rotate(3deg); filter: drop-shadow(0 2px 3px rgba(62, 68, 88, 0.18)); }
.stamp-paper { display: block; width: 64px; padding: 6px; background: #fff;
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 2.6px, #0000 96%, #000) -4px -4px / 8px 8px round border-box;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 2.6px, #0000 96%, #000) -4px -4px / 8px 8px round border-box; }
.stamp-paper svg { display: block; width: 100%; height: auto; border-radius: 1px; }
.postmark { position: absolute; right: 44px; top: 30px; z-index: 1; width: 78px; height: 78px; border: 1.5px solid rgba(47, 127, 122, 0.55); border-radius: 50%; display: grid; place-items: center; color: rgba(47, 127, 122, 0.72); font: 500 10px/1.15 var(--body); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; transform: rotate(-14deg); pointer-events: none; }
.postmark .cancel { position: absolute; right: 79px; top: 22px; width: 64px; height: auto; opacity: 0.8; }
.note { font: 400 24px/1.35 var(--hand); color: #4A5070; }
.sign { margin-top: auto; font: 400 26px var(--hand); color: var(--sea-deep); }
.lines { display: grid; gap: 16px; margin-top: 4px; }
.lines i { height: 1px; background: rgba(62, 68, 88, 0.14); }
.postcard-cap { margin-top: 26px; font-size: 15px; color: var(--ink-soft); text-align: right; }
/* Side by side, the wish sits a little lower beside the postcard (its arrow and note move with it); the postcard stays put. */
@media (min-width: 981px) {
  .wishes { margin-top: 36px; }
  .wish-arrow, .arrow-note { top: 62px; }
  .postcard { margin-top: 8px; }
}

/* ───────── Community: the browser, with the Share dialog laid over its corner ───────── */
.community { background: #D6E9E9; padding-block: 104px; }
/* The rest is up to your imagination: one line, with more room round it than the other headings. */
.sec.imagine { padding-top: 56px; }
.imagine .sec-head { max-width: none; margin-bottom: 120px; }
@media (max-width: 680px) { .sec.imagine { padding-top: 24px; } .imagine .sec-head { margin-bottom: 72px; } }
/* The JellyDrop page's thesis: on the plain page, with a heading a step above the others, and a thin teal rule
   halfway down to the rows below. */
/* The rule's own margins are the gap to the rows, matching the section's top space on every screen. */
.sec.statement { padding-bottom: 0; }
.teal-rule { height: 2px; margin: 104px 0; border: 0; border-radius: 1px; background: var(--jelly); opacity: 0.55; }
.js .teal-rule[data-reveal] { translate: none; scale: 0 1; transform-origin: center; }
.js .teal-rule[data-reveal].in { scale: 1; opacity: 0.55; }.statement .sec-head { max-width: 1040px; }
.statement .sec-head h2 { font-size: clamp(40px, 5.2vw, 68px); }
.comm-stage { position: relative; max-width: 1060px; margin: 0 auto; padding: 0 0 15% 0; }
.comm-stage figure { margin: 0; overflow: hidden; }
.comm-main { border-radius: 18px; box-shadow: 0 30px 80px rgba(47, 90, 86, 0.22), 0 0 0 1px rgba(62, 68, 88, 0.06); }
/* The screenshot ends in a band of the page's cream, so the Share dialog floats over that and never over the islands. */
.comm-main img { width: 100%; aspect-ratio: 2000 / 2058; object-fit: cover; }
.comm-float { position: absolute; right: -5%; bottom: 0; width: 42%; border-radius: 20px; box-shadow: 0 30px 70px rgba(47, 90, 86, 0.3); transform: rotate(1.5deg); transition: transform 0.48s var(--bounce); }
.comm-float:hover { transform: rotate(0deg) translateY(-6px); }
.comm-float img { width: 100%; }
.comm-points { margin-top: 64px; }
.more-tools { row-gap: 56px; }

/* ───────── Night bands (the engine strip, the engine page) ───────── */
.dark { background: var(--night); color: var(--night-ink); }
.dark .lede { color: var(--night-soft); }
.dark .lede b { font-weight: 500; color: var(--night-ink); }
.engine-strip { overflow: hidden; }
.engine-strip .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; min-height: 640px; padding-block: 96px; }
.strip-pic { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.strip-pic > img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 50%, rgba(0, 0, 0, 0.12) 76%, rgba(0, 0, 0, 0.1) 100%); mask-image: linear-gradient(to right, #000 0, #000 50%, rgba(0, 0, 0, 0.12) 76%, rgba(0, 0, 0, 0.1) 100%); }
.night-pic { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, transparent 100%); }
.night-pic img { width: 100%; aspect-ratio: 1600 / 1000; object-fit: cover; }
/* A one-off badge on the Game Creator band: the logo with GAME ENGINE in lantern gold on night glass. */
/* A one-off GAME ENGINE badge on the Game Creator band: a white plate with deep teal lettering. */
/* Stuck on the picture's bottom left corner at a tilt, like a sticker: a thick white die-cut edge, a tight shadow where it
   lifts off the picture, and a little wiggle when you point at it. */
.engine-badge { position: absolute; z-index: 2; left: max(28px, env(safe-area-inset-left, 0px), calc((100vw - 1240px) / 2 + 16px)); bottom: 72px; display: block; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.engine-badge:hover { transform: scale(1.04); }
/* Just the logo on the picture, a little bigger, with a soft shadow so it holds against the night. */
.engine-badge img { display: block; width: clamp(220px, 21vw, 320px); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); }
.engine-strip .copy { position: relative; left: clamp(0px, calc((100vw - 1100px) * 0.4), 84px); display: grid; gap: 22px; justify-items: start; }
.engine-strip h2 { font-size: clamp(32px, 3.8vw, 48px); }

/* ───────── The end: the wisp ───────── */
.end { background: var(--paper); text-align: center; }
.end .wrap { position: relative; display: grid; justify-items: center; gap: 22px; padding-block: 120px 96px; }
.drop { position: relative; width: 120px; height: 120px; }
.drop img { position: relative; z-index: 1; width: 120px; animation: bob 3.6s ease-in-out infinite; }
.drop i { position: absolute; left: 50%; bottom: 12px; width: 70px; height: 18px; margin-left: -35px; border: 1.5px solid rgba(79, 169, 163, 0.5); border-radius: 50%; animation: ring 3.6s ease-out infinite; }
.drop i:nth-child(2) { animation-delay: 1.2s; }
.drop i:nth-child(3) { animation-delay: 2.4s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes ring { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.2); opacity: 0; } }
.end h2 { font-size: clamp(32px, 4vw, 48px); max-width: 16em; }
.end .lede { margin: 0 auto; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.links a { text-decoration-color: rgba(62, 68, 88, 0.3); text-underline-offset: 4px; }
.links a:hover { color: var(--ink); }
footer { border-top: 1px solid var(--line); background: var(--paper); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--ink-soft); }
footer .brand { font-size: 19px; }
footer nav { display: flex; gap: 18px; }
footer nav a { text-decoration: none; }
footer nav a:hover { color: var(--ink); }

/* The Steam pill floats bottom right once the hero is gone, where Live in it sits in the Free Build. */
.float-cta { position: fixed; z-index: 20; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none; transition: opacity 0.24s ease, transform 0.32s var(--bounce); }
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.float-cta { height: 56px; padding: 0 26px 0 22px; font-size: 16px; overflow: hidden; box-shadow: 0 14px 36px rgba(62, 68, 88, 0.35); }
.float-cta svg { color: var(--apricot); transition: transform 0.24s var(--bounce), color 0.24s ease; animation: beat 2.6s ease-in-out infinite; }
.float-cta:hover svg { transform: scale(1.25); color: var(--lantern); }
.float-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.26), transparent); transform: skewX(-20deg); animation: shine 5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes shine { 0%, 72% { left: -60%; } 100% { left: 130%; } }
@keyframes beat { 0%, 62%, 100% { scale: 1; } 70% { scale: 1.28; } 78% { scale: 0.94; } 86% { scale: 1.14; } }
.heart-pop { position: fixed; z-index: 40; pointer-events: none; display: block; }
.heart-pop svg { display: block; }
.float-cta.show.hide-end { opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none; }

/* ───────── Engine page ───────── */
.e-hero { position: relative; overflow: hidden; }
/* No stacking context on the wrap, so the nav (and its language menu) can rise above the editor pictures. */
.e-hero .wrap { position: relative; }
.e-hero .head { position: relative; z-index: 1; }
/* The logo, big and bold, with the words under it on the left; the editor fills the right, fading out of the band. */
.e-hero .head { display: grid; gap: 22px; justify-items: start; align-content: center; max-width: 520px; min-height: 760px; margin: 8px 0 0; padding-bottom: 72px; text-align: left; }
.e-hero .jd-logo { width: min(500px, 100%); height: auto; margin: 0 0 4px -2%; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.35)); animation: logo-in 1s var(--bounce) both; }
.e-shot { position: absolute; z-index: 1; right: -3vw; top: calc(50% + 220px); transform: translateY(-50%); width: clamp(600px, 56vw, 1040px); border-radius: 22px; overflow: hidden; box-shadow: -24px 34px 90px rgba(0, 0, 0, 0.45); }
/* A second, bigger view sits behind it, running off the top and right of the band; the front one hides its lower part. */
.e-shot.two { z-index: 0; right: -7vw; top: 124px; transform: none; width: clamp(680px, 56vw, 1060px); border-radius: 22px; box-shadow: none; }
.e-shot img { display: block; width: 100%; height: auto; }
.e-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--night) 0, rgba(38, 49, 113, 0) 30%), linear-gradient(to top, var(--night) 0, rgba(38, 49, 113, 0) 24%); pointer-events: none; }
/* The top arrives in turn as the page opens: the logo pops, the headline rises line by line, the words and the button
   follow, the story graph slides in from the right and the editor rises in front of it; then both drift gently. */
.e-hero h1 .l1, .e-hero h1 .l2 { display: block; animation: e-rise 0.9s var(--ease) both; }
.e-hero h1 .l1 { animation-delay: 0.18s; }
.e-hero h1 .l2 { animation-delay: 0.3s; }
.e-hero .lede { animation: e-rise 0.9s var(--ease) 0.46s both; }
.e-hero .cta-row { animation: e-pop 0.7s var(--bounce) 0.62s both; }
.e-hero .btn-teal svg { animation: bob-down 1.9s var(--ease) 1.6s infinite; }
.e-shot.two { animation: e-slide 1.2s var(--ease) 0.3s both, e-float 9s ease-in-out 1.6s infinite; }
.e-shot:not(.two) { animation: e-lift 1.1s var(--ease) 0.5s both, e-float 7s ease-in-out 1.7s infinite reverse; }
@keyframes e-rise { from { opacity: 0; translate: 0 26px; } }
@keyframes e-pop { from { opacity: 0; scale: 0.8; } }
@keyframes e-slide { from { opacity: 0; translate: 90px 0; } }
@keyframes e-lift { from { opacity: 0; translate: 0 70px; scale: 0.96; } }
@keyframes e-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes logo-in { from { opacity: 0; scale: 0.86; translate: 0 14px; } }
.e-hero h1 { font-size: clamp(38px, 4.2vw, 58px); }

.rows { display: grid; gap: 120px; }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row:nth-child(even) .row-copy { order: 2; }
.row-copy { display: grid; gap: 16px; min-width: 0; }
.row-copy h3 { font-size: clamp(28px, 3vw, 38px); }
.row-copy p { color: var(--ink-soft); }
.row-copy ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; font-weight: 400; }
.row-copy li { display: flex; gap: 10px; align-items: baseline; }
.row-copy li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sea); transform: translateY(-2px); }
/* Side by side, the words keep a clear gap from their picture: narrower, and pushed to the far side when on the right. */
@media (min-width: 981px) {
  /* Titles keep their line; only the body text sits as an even block, a little narrower, its lines balanced. */
  .row-copy { max-width: 480px; }
  .row-copy h3 { white-space: nowrap; }
  .row-copy p { max-width: 370px; text-wrap: balance; }
  .row:nth-child(even) .row-copy { justify-self: end; }
}
.app-shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--paper-2); box-shadow: 0 30px 70px rgba(30, 34, 60, 0.28), 0 0 0 1px rgba(62, 68, 88, 0.12); }
.app-shot img { width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; }
.app-shot .badge { position: absolute; right: 16px; bottom: 16px; padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.app-shot.placeholder { aspect-ratio: 1440 / 900; display: grid; place-items: center; color: #9AA0B2; font: 500 14px var(--mono); }

.grid6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 44px; }
.feature { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
.feature span { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; color: var(--sea-deep); }
.feature span svg { width: 34px; height: 34px; }
.feature h3 { font: 600 20px var(--display); }
.feature p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }

/* ───────── Narrow screens ───────── */
@media (min-width: 1100px) {
  .shot-cap { white-space: nowrap; min-height: 0; }
}
@media (max-width: 1180px) {
  .comm-float { right: 0; }
}
@media (max-width: 980px) {
  .e-hero .head { max-width: none; min-height: 0; margin-top: 24px; padding-bottom: 0; justify-items: center; text-align: center; }
  .e-hero .jd-logo { width: min(560px, 82vw); margin-left: 0; }
  .e-hero .cta-row { justify-content: center; }
  .e-hero .lede { display: none; }
  .e-shot { position: relative; top: auto; right: auto; transform: none; width: calc(100% - 32px); margin: 44px auto 0; border-radius: 16px; }
  .e-shot::after { background: linear-gradient(to top, var(--night) 0, rgba(38, 49, 113, 0) 32%); }
  .e-shot.two { display: none; }
  .js [data-reveal="left"], .js [data-reveal="right"] { translate: 0 30px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: 8px 56px; }
  .hero h1 .line { white-space: normal; display: inline; }
  .stage { left: 0; }
  .stage-frame { width: 140%; max-width: 140%; margin: -14% -20% -12%; }
  .nav { gap: 8px; }
  .nav .btn { margin-left: auto; }
  .menu-btn { display: grid; place-content: center; gap: 4px; flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(62, 68, 88, 0.08); color: inherit; transition: background-color 0.24s ease, transform 0.12s ease; }
  .menu-btn:active { transform: scale(0.92); }
  .menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.24s var(--ease), opacity 0.2s ease; }
  .nav.open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.open .menu-btn span:nth-child(2) { opacity: 0; }
  .nav.open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .dark .menu-btn, .hero[data-time="night"] .menu-btn { background: rgba(255, 255, 255, 0.14); }
  /* The page links drop down from the menu button as a small floating card. */
  .nav-links { position: absolute; top: 68px; right: 0; z-index: 30; flex-direction: column; gap: 2px; width: min(280px, 100%); margin: 0; padding: 8px; border-radius: 20px; background: var(--card); box-shadow: 0 18px 50px rgba(30, 34, 60, 0.24); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(0.97); transform-origin: top right; transition: opacity 0.2s ease, transform 0.24s var(--ease), visibility 0s linear 0.24s; }
  .nav.open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.2s ease, transform 0.32s var(--bounce), visibility 0s; }
  .nav .nav-links a { padding: 13px 16px; border-radius: 14px; font-size: 16px; color: var(--ink); opacity: 1; }
  .nav .nav-links a:hover, .nav .nav-links a[aria-current="page"], .dark .nav .nav-links a:hover, .dark .nav .nav-links a[aria-current="page"], .hero[data-time] .nav .nav-links a:hover { background: rgba(62, 68, 88, 0.06); }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Stacked one under another, each point appears as it scrolls into view, in order: no side-by-side stagger. */
  .js .trio > [data-reveal] { transition-delay: 0ms; }
  .folk-grid, .row, .row:nth-child(even), .ways { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .row:nth-child(even) .row-copy { order: 0; }
  .rows { gap: 80px; }
  .teal-rule { margin: 72px 0; }
  .grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wishes { margin: 0 auto; }
  .wish-flow { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 6px; }
  .wish-flow > .wishes, .wish-flow > .postcard { grid-column: 1 / -1; }
  .wish-arrow { position: relative; left: auto; top: auto; display: block; width: 92px; height: 86px; margin: 0 0 -6px; transform: rotate(14deg); }
  .wish-arrow path { stroke: #E0875D; stroke-width: 9; }
  .wish-arrow .trail { stroke-dasharray: 0.1 22; animation-name: march-m; }
  .arrow-note { position: static; display: block; font-size: 30px; margin-top: 18px; transform: rotate(-4deg); }
  .postcard { margin: 20px auto 0; }
  .postcard-cap { text-align: center; }
  .comm-stage { padding: 0; }
  .comm-stage .comm-float { position: relative; right: auto; width: 90%; margin: -11% auto 0; }
  #residents { padding-top: 56px; }
  .engine-strip .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 0 72px; gap: 0; }
  .strip-pic { position: relative; left: 0; width: 100%; height: 380px; }
  .engine-badge { top: 22px; bottom: auto; left: auto; right: max(22px, env(safe-area-inset-right, 0px)); }
  .engine-badge img { width: 150px; }
  .strip-pic > img { -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .sec, .community { padding-block: 72px; }
  .lede { font-size: 17px; }
  .brand { font-size: 21px; }
  .nav .btn { height: 40px; padding: 0 14px; font-size: 13.5px; }
  .nav .btn svg { display: none; }
  .hero-copy .btn-steam { display: none; }
  /* The hero's buttons leave its top (the Steam pill is in the bar): Explore sits on the line below the island instead. */
  .hero-copy .cta-row { display: none; }
  .explore-m { display: flex; justify-content: center; position: relative; z-index: 3; margin: -98px 0 56px; }
  .trailer-band { padding-bottom: 88px; }
  .trailer-pic { border-radius: 18px; }
  .trailer-play { width: 84px; box-shadow: 0 12px 34px rgba(10, 14, 40, 0.4); }
  .trailer-logo { width: 104px; left: 16px; bottom: 14px; }
    .explore-m .btn { padding: 0 22px 0 26px; }
  /* A down arrow that bobs: a dip, a little overshoot back, a settle, then a rest before the next. */
  .explore-m .bob { color: #fff; rotate: 90deg; animation: bob-down 1.9s var(--ease) infinite; }
  .trio > div { grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; }
  .trio svg { grid-column: 1; grid-row: 1 / span 2; width: 60px; height: 60px; margin: 0; }
  .trio h3, .trio p { grid-column: 2; }
  .trio h3 { font-size: 24px; align-self: center; }
  #tools > .wrap { padding-top: 56px; border-top: 1px solid var(--line); }
  #tools > .wrap { margin-inline: auto; }
  .clock { display: none; }
  .skybar { flex-wrap: nowrap; gap: 10px; margin-top: 4px; }
  .times button { display: grid; place-items: center; width: 52px; height: 42px; padding: 0; }
  .times .t-ico { display: block; }
  .times .t-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tour-tabs { width: 100%; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; border-radius: 24px; overflow: visible; }
  .tour-tabs button { border-radius: 20px; }
  .tour-tabs button { height: 40px; padding: 0 12px 0 10px; gap: 6px; font-size: 14px; }
  .tour-tabs button svg { width: 18px; height: 18px; }
  .shot { border-radius: 12px; }
  .shot-cap { font-size: 16px; }
  .water { background: var(--paper); }
  .water-pic { aspect-ratio: auto; min-height: 0; height: 380px; }
  .water-pic img { object-position: 78% 50%; }
  .water-hint { display: none; }
  .water-over { position: relative; display: block; }
  .water-over .wrap { padding-block: 0 48px; margin-top: -56px; padding-left: var(--gutter-l); }
  .postcard { grid-template-columns: minmax(0, 1fr); transform: rotate(-1.5deg); }
  .postcard .pic { aspect-ratio: 16 / 10; }
  .postcard .back { border-left: 0; border-top: 1px dashed rgba(62, 68, 88, 0.25); padding: 16px 4px 4px; }
  .grid6 { grid-template-columns: minmax(0, 1fr); }
  .float-cta { left: 50%; right: auto; transform: translate(-50%, 16px); }
  .float-cta.show { transform: translate(-50%, 0); }
  .float-cta.show.hide-end { transform: translate(-50%, 16px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ───────── The ending: the load screen's jelly drop floating on a calm water line, full width ───────── */
.shore { position: relative; height: clamp(560px, 46vw, 680px); background: var(--paper); overflow: hidden; }
.shore-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
.shore.short { height: clamp(480px, 39vw, 580px); }
.shore-copy { position: relative; z-index: 1; display: grid; gap: 34px; justify-items: start; padding-block: 96px 0; pointer-events: none; }
.shore-copy > * { pointer-events: auto; }
.shore-copy h2 { font-size: clamp(34px, 4.6vw, 68px); max-width: none; }
.shore-copy .lede { max-width: 26em; }
.shore-copy .lede .line { display: block; }
.shore { -webkit-user-select: none; user-select: none; }
.shore-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border: 0; background: transparent; color: rgba(255, 255, 255, 0.86); font-size: 14px; }
.shore-foot .wrap { color: inherit; }
.shore-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px)); }
.shore-foot .brand { font-size: 19px; }
@media (max-width: 680px) {
  .shore { height: 640px; }
  .shore.short { height: 560px; }
  .shore-copy { padding-block: 64px 0; justify-items: center; text-align: center; }
  .shore-copy .btn { margin-top: 4px; }
}
@media (max-width: 380px) {
  .nav .btn .long { display: none; }
  .nav .btn .short { display: inline; }
}

/* ───────── Language menu (built by i18n.js): a round flag and the language's own name, top right ───────── */
/* Desktop: the last thing in the bar, at the very top right; just the flag until it opens. */
.lang-pick { position: relative; flex: none; order: 10; margin-left: -12px; }
.lang-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 15px; font-weight: 400; white-space: nowrap; opacity: 0.88; transition: background-color 0.24s ease, opacity 0.24s ease, transform 0.12s ease; }
.lang-btn:hover, .lang-pick.open .lang-btn { opacity: 1; background: rgba(62, 68, 88, 0.08); }
.dark .lang-btn:hover, .dark .lang-pick.open .lang-btn, .hero[data-time="night"] .lang-btn:hover, .hero[data-time="night"] .lang-pick.open .lang-btn { background: rgba(255, 255, 255, 0.1); }
.lang-btn:active { transform: scale(0.94); }
.lang-btn .lang-name, .lang-btn .chev { display: none; }
.lang-btn .flag { width: 24px; height: 24px; transition: transform 0.32s var(--bounce); }
.lang-btn:hover .flag { transform: scale(1.1) rotate(-6deg); }
/* Flags are round pebbles with a soft gloss, like the jelly in the logo. */
.flag { position: relative; display: block; flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(62, 68, 88, 0.14), 0 1px 3px rgba(62, 68, 88, 0.2); }
.flag svg { display: block; width: 100%; height: 100%; }
.flag::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 44%), linear-gradient(to top, rgba(20, 24, 40, 0.16), rgba(20, 24, 40, 0) 55%); }
.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; display: grid; gap: 2px; min-width: 214px; padding: 8px; border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 18px 50px rgba(30, 34, 60, 0.24); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(0.96); transform-origin: top right; transition: opacity 0.2s ease, transform 0.24s var(--ease), visibility 0s linear 0.24s; }
.lang-pick.open .lang-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.2s ease, transform 0.34s var(--bounce), visibility 0s; }
.lang-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font-size: 15.5px; font-weight: 400; text-align: left; transition: background-color 0.2s ease; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(62, 68, 88, 0.06); outline-offset: -3px; }
.lang-menu button[aria-checked="true"] { background: var(--sea-soft); font-weight: 500; }
.lang-menu .flag { width: 24px; height: 24px; transition: transform 0.32s var(--bounce); }
.lang-menu button:hover .flag { transform: scale(1.12) rotate(-6deg); }
.lang-menu .tick { margin-left: auto; color: var(--sea-deep); opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.36s var(--bounce); }
.lang-menu [aria-checked="true"] .tick { opacity: 1; transform: none; }
.lang-pick.open .lang-menu button { animation: lang-in 0.36s var(--ease) both; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes lang-in { from { opacity: 0; translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .lang-pick.open .lang-menu button { animation: none; } }
/* Phones and narrow windows: a round flag button beside the Wishlist pill, its card dropping from the bar's right. */
@media (max-width: 980px) {
  .nav .lang-pick { position: static; order: 0; margin-left: auto; }
  .nav .lang-pick ~ .btn { margin-left: 0; }
  .lang-btn { background: rgba(62, 68, 88, 0.08); opacity: 1; }
  .dark .lang-btn, .hero[data-time="night"] .lang-btn { background: rgba(255, 255, 255, 0.14); }
  .lang-menu { top: 68px; right: 0; width: min(260px, 100%); }
  .lang-menu button { padding: 12px 14px; font-size: 16px; }
}

/* ───────── Type for each language ───────── */
/* Chinese and Japanese: the Latin letters keep the site's faces, the rest falls to a matching local face. */
:root:lang(ja) {
  --display: 'Fredoka', 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', ui-rounded, sans-serif;
  --body: 'Lexend', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
  --hand: 'Patrick Hand', 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
}
:root:lang(zh-Hans) {
  --display: 'Fredoka', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --body: 'Lexend', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --hand: 'Patrick Hand', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
:lang(ja) :is(h1, h2, h3), :lang(zh-Hans) :is(h1, h2, h3) { line-height: 1.28; }
:lang(ja) body, :lang(zh-Hans) body { line-height: 1.75; }
/* Japanese breaks lines between phrases, not inside words. */
:lang(ja) body { line-break: strict; word-break: auto-phrase; }
/* Long German, Dutch and French words may break in running text, never in a heading. */
:lang(de) :is(p, li, dd), :lang(nl) :is(p, li, dd), :lang(fr) :is(p, li, dd) { hyphens: auto; }
:lang(de) :is(h1, h2, h3), :lang(nl) :is(h1, h2, h3) { overflow-wrap: break-word; }
/* The flag shares the phone bar, so the Wishlist pill takes its short label sooner (other languages run longer). */
@media (max-width: 520px) { .nav .btn .long { display: none; } .nav .btn .short { display: inline; } }
/* If a language's short label still doesn't fit the phone bar, the Wishlist pill becomes a round heart (i18n.js sets .tight). */
.nav.tight .btn-steam { width: 42px; padding: 0; justify-content: center; border-radius: 50%; }
.nav.tight .btn-steam span { display: none; }
.nav.tight .btn-steam svg { display: block; }
/* Phones: the hand-written note above the postcard wraps when a language says it in more words. */
@media (max-width: 980px) { .arrow-note { white-space: normal; max-width: min(240px, calc(100vw - 140px)); line-height: 1.05; } }