/* Tsumida Games: the game pages (public/games/<slug>/index.html, served at tsumida.ai/games/<slug>/).
   Loaded AFTER games.css, which keeps the look (tokens, the top bar's picker, the store badges, kickers, h2, tiles,
   price rows, the tax line, the footer). This file is only what a game page adds: the hero with its live chill zone,
   the video frame, the three steps, the chill zone notes, the promises, the strip of the other games.
   The page's accent comes in on <body class="gp" style="--g;--gd;--gb">. The hub's own stage classes (.stage,
   .world, .an) are never used here, so a change to the hub's playground can never move a game page.
   Painted scenes size with container query units (cqw of the painting), never vw. */

/* ---- the top bar: home to the hub on the left, the language picker on the right */
.gp .top { padding-top:16px }
.gp .home { display:block; width:128px; flex:none; transition:transform .15s }
.gp .home img { width:100%; height:auto; filter:drop-shadow(0 5px 8px rgba(90,58,46,.18)) }
.gp .home:hover { transform:rotate(-2deg) scale(1.03) }
.gp .home:focus-visible { outline:3px solid var(--red); outline-offset:4px; border-radius:12px }

/* ---- the hero, stacked the way the hub stacks its own: the name row on top (the logo and the search line on the
   left, the line, the difficulty and the badges on the right, so the badges are in the first view), then the chill
   zone at the full width of the page, because the zone IS the page. A phone stacks name, zone, badges */
.gp .sky { padding-bottom:60px }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name buy" "zone zone"; column-gap:44px; row-gap:26px; align-items:end; margin:14px 0 0 }
.hero .kanji { position:absolute; left:-6px; top:-8px; font-size:120px; font-weight:800; line-height:1; letter-spacing:.04em; color:var(--g); opacity:.1; pointer-events:none; white-space:nowrap; z-index:0 }
.hero .name { grid-area:name; align-self:end; margin:0; position:relative; z-index:1; font-size:inherit; font-weight:inherit }
.hero .name .logo { display:block; width:min(260px,100%); height:auto; margin:0 0 10px -6px; filter:drop-shadow(0 12px 16px rgba(90,58,46,.2)) }
.hero .name .line { display:block; font-size:clamp(27px,2.7vw,36px); line-height:1.08; letter-spacing:-.025em; font-weight:900; color:var(--ink); text-wrap:balance }
.hero .buy { grid-area:buy; align-self:end; position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-end; text-align:right }
.hero .buy .sub { margin:0 0 14px; font-size:17px; max-width:40ch; text-wrap:pretty }
.hero .buy .diff { margin:0 0 16px }
.hero .zonewrap { grid-area:zone; min-width:0 }
/* a squarer painting (Cats & Arrows) would stand taller than the screen at the full width: hold every zone to about
   the hub's playground height and centre it */
.hero .zone { max-width:calc(740px * var(--wa,3/2)); margin:0 auto }
.hero .stores .store { min-width:0; text-align:left }

/* ---- the chill zone: the game's own painting with its animals on it. `.zone` is the frame, `.zw` the painting at
   its own proportions (--wa on .zone, e.g. 1760/1240); every animal is placed in % of the painting and sized in cqw
   of it, so it holds at any width. A phone crops the sides and the zone pans sideways (--sa: the zone's shape there) */
.zone { --night:rgba(8,18,40,.38); position:relative; aspect-ratio:var(--wa,3/2); border:2.5px solid var(--ink); border-radius:30px; overflow:hidden; background:var(--gb); box-shadow:0 12px 0 var(--line), 0 24px 40px rgba(47,42,58,.12); user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent }
.zw { position:absolute; inset:0; container-type:inline-size }
.zw .bg { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; object-fit:cover }
.zw .veil { position:absolute; inset:0; background:var(--night); z-index:1; pointer-events:none }
.zone .night-only { display:none } .zone.is-night .night-only { display:block } .zone.is-night .day-only { display:none }
.zone-hint { display:block; margin:16px 0 0; color:var(--muted); font-size:13px; font-weight:800; line-height:1.4; text-align:center; text-wrap:balance }
.zone-hint svg { display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-right:6px } .zone-hint .ph { display:none }
.zone-hint .ph i { font-style:normal; display:inline-block; margin-left:5px; animation:hintnudge 1.2s ease-in-out infinite alternate }
.zone-hint.done .ph { opacity:0; transition:opacity .4s }
@keyframes hintnudge { from{transform:translateX(-2px)} to{transform:translateX(3px)} }

/* steam: soft puffs that rise off the water (any warm water: .puffs with --x --y --w --h in % of the painting) */
.puffs { position:absolute; left:var(--x); bottom:var(--y); width:var(--w,20%); height:var(--h,30%); pointer-events:none; z-index:1 }
.puffs i { position:absolute; bottom:0; width:24%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,250,.7) 0%,rgba(255,255,250,.3) 45%,rgba(255,255,250,0) 70%); filter:blur(3px); opacity:0; animation:puff 5.5s ease-out infinite }
.puffs i:nth-child(1) { left:10% } .puffs i:nth-child(2) { left:36%; animation-delay:1.1s } .puffs i:nth-child(3) { left:60%; animation-delay:2.2s }
.puffs i:nth-child(4) { left:24%; animation-delay:3.3s; width:20% } .puffs i:nth-child(5) { left:48%; animation-delay:4.4s; width:28% }
@keyframes puff { 0%{opacity:0;transform:translate(0,0) scale(.5)} 18%{opacity:.9} 60%{opacity:.5} 100%{opacity:0;transform:translate(10%,-230%) scale(1.7)} }

/* ---- the animals. One <button class="pet"> each, placed by --x (left) and --y (bottom) in % of the painting,
   --w its width in cqw, --z its depth (default 2: over the painting and the night veil, so they stay bright at
   night the way the games draw them). game.js wraps its pictures into .sp (the body: bob, wobble...) > .fr (the
   frames). What it does is in data attributes (see game.js): data-do (always), data-tap (a tap), data-every (now
   and then). --face:-1 mirrors a drawing; --t is a walk's or drift's period, --dx/--dy its reach, --d a delay
   (negative = start part way, so two of a kind never move in step) */
.pet { --turn:f-none 1s; position:absolute; left:var(--x,0); bottom:var(--y,0); width:var(--w,10cqw); z-index:var(--z,2); border:0; padding:0; margin:0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; font:inherit; color:inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent }
.pet .sp { display:block; position:relative; transform-origin:50% 100%; scale:var(--face,1) 1 }
.pet .fr { display:block; position:relative }
.pet img { width:100%; height:auto; display:block; filter:drop-shadow(0 .5cqw .7cqw rgba(47,42,58,.22)); -webkit-user-drag:none }
.pet .fr img + img, .pet > img + img { position:absolute; left:0; top:0; opacity:0 }
.pet:focus-visible { outline:3px solid var(--red); outline-offset:4px; border-radius:30% }
.pet.hit { z-index:6 }
/* in the water: whatever goes below the button's bottom edge (the waterline) is hidden, so a dip or a sink goes UNDER */
.pet.wet { clip-path:inset(-300% -200% 0 -200%) }
/* a name over its head on hover or a tap (<span class="nm" data-i18n="...">) */
.pet .nm { position:absolute; left:50%; bottom:100%; translate:-50% 4px; white-space:nowrap; font-weight:900; font-size:clamp(11px,1.5cqw,16px); color:var(--ink); background:#fff; border:2px solid var(--ink); border-radius:999px; padding:2px 9px; opacity:0; transition:opacity .2s, translate .2s; pointer-events:none; z-index:5; box-shadow:0 2px 0 var(--line) }
.pet:hover .nm, .pet.hit .nm { opacity:1; translate:-50% 0 }
/* a speech bubble: any number of <span class="say" data-i18n="...">; each tap shows the next, the last one repeats.
   --sx moves it sideways (default centred over the head: -50%) */
.pet .say { position:absolute; left:50%; bottom:100%; translate:var(--sx,-50%) -6px; width:max-content; max-width:max(150px,30cqw); background:#fff; color:var(--ink); border:2.5px solid var(--ink); border-radius:16px; padding:7px 12px 8px; font-weight:800; font-size:clamp(12px,1.55cqw,16px); line-height:1.25; text-align:left; box-shadow:0 4px 0 var(--line); opacity:0; scale:.85; transform-origin:50% 100%; transition:opacity .18s, scale .18s; pointer-events:none; z-index:7 }
.pet .say.on { opacity:1; scale:1 }
/* a little extra the pet carries (a basket, a hole, a ring...): <i class="..."> children are left where they are */

/* what it always does (data-do): ONE body motion, plus a path or a frame habit */
.pet[data-do~="bob"] .sp { animation:b-bob var(--bt,3.2s) ease-in-out var(--d,0s) infinite alternate }
.pet[data-do~="wobble"] .sp { animation:b-wobble var(--bt,2.6s) ease-in-out var(--d,0s) infinite alternate }
.pet[data-do~="waddle"] .sp { animation:b-waddle var(--bt,.5s) ease-in-out var(--d,0s) infinite alternate }
.pet[data-do~="breathe"] .sp { animation:b-breathe var(--bt,2.8s) ease-in-out var(--d,0s) infinite alternate }
.pet[data-do~="hop"] .sp { animation:b-hop var(--bt,.42s) cubic-bezier(.3,0,.2,1) var(--d,0s) infinite alternate }
.pet[data-do~="dance"] .sp { animation:b-dance var(--bt,1.1s) ease-in-out var(--d,0s) infinite }
.pet[data-do~="peek"] .sp { animation:b-peek var(--bt,2.6s) ease-in-out var(--d,0s) infinite alternate }
.pet[data-do~="peek"] { clip-path:inset(-300% -200% 0 -200%) }
/* walk: out --dx (and --dy) and back over --t, turning round at each end, trotting, its two frames (first + .alt) stepping */
.pet[data-do~="walk"], .pet[data-do~="swim"] { --turn:f-turn var(--t,16s) linear var(--d,0s) infinite; animation:p-there var(--t,16s) linear var(--d,0s) infinite }
.pet[data-do~="walk"] .sp { animation:b-trot var(--bt,.18s) ease-in-out infinite alternate, var(--turn) }
.pet[data-do~="walk"] .fr img:first-child { animation:fr-a var(--st,.36s) steps(1) infinite } .pet[data-do~="walk"] .fr img.alt { animation:fr-b var(--st,.36s) steps(1) infinite }
/* swim: the same out and back, bobbing instead of trotting */
.pet[data-do~="swim"] .sp { animation:b-bob var(--bt,1.6s) ease-in-out infinite alternate, var(--turn) }
/* float: drifts --dx (and --dy) and back, slowly, never turning (an otter on its back, a duck, a yuzu) */
.pet[data-do~="float"] { animation:p-drift var(--t,9s) ease-in-out var(--d,0s) infinite alternate }
.pet[data-do~="float"]:not([data-do~="bob"]):not([data-do~="wobble"]):not([data-do~="peek"]) .sp { animation:b-bob var(--bt,3.6s) ease-in-out var(--d,0s) infinite alternate }
/* (float + peek: drifts sitting low in the water, --peek of it under, like Capybara Onsen's yuzu; the peek rule above does it) */
/* blink: the .alt frame shows for a moment every few seconds (eyes shut, a wink) */
.pet[data-do~="blink"] .fr img.alt { animation:fr-blink var(--bk,4.6s) steps(1) var(--d,0s) infinite }
/* hide: not there until its data-every move brings it (a seal zipping past) */
.pet[data-do~="hide"] { opacity:0; pointer-events:none }

@keyframes f-none { }
@keyframes b-bob { from{transform:translateY(0) rotate(-1.5deg)} to{transform:translateY(-5%) rotate(1.5deg)} }
@keyframes b-wobble { from{transform:rotate(-3.5deg)} to{transform:rotate(3.5deg)} }
@keyframes b-waddle { from{transform:rotate(-6deg)} to{transform:rotate(6deg)} }
@keyframes b-breathe { from{transform:scale(1,1)} to{transform:scale(1.02,1.045)} }
@keyframes b-hop { from{transform:translateY(0) scale(1.04,.96)} to{transform:translateY(-22%) scale(.97,1.05)} }
@keyframes b-dance { 0%,100%{transform:translateY(0) rotate(-9deg)} 25%{transform:translateY(-16%) rotate(0)} 50%{transform:translateY(0) rotate(9deg)} 75%{transform:translateY(-16%) rotate(0)} }
@keyframes b-trot { from{transform:translateY(0)} to{transform:translateY(-5%)} }
@keyframes b-peek { from{transform:translateY(var(--peek,36%))} to{transform:translateY(calc(var(--peek,36%) - 4%))} }
@keyframes p-there { 0%{translate:0 0} 48%,50%{translate:var(--dx,20cqw) var(--dy,0px)} 98%,100%{translate:0 0} }
@keyframes p-drift { from{translate:0 0} to{translate:var(--dx,3cqw) var(--dy,0px)} }
@keyframes f-turn { 0%,47.5%{scale:var(--face,1) 1} 49.5%,97.5%{scale:calc(var(--face,1) * -1) 1} 99.5%,100%{scale:var(--face,1) 1} }
@keyframes fr-a { 0%{opacity:1} 50%{opacity:0} }
@keyframes fr-b { 0%{opacity:0} 50%{opacity:1} }
@keyframes fr-blink { 0%,100%{opacity:0} 93%{opacity:1} }

/* the moves (data-tap, data-every): one-shot. game.js puts .moving and .m-<move> on the pet for the move's length
   (MOVES in game.js; keep the two in step), and shows the frame for it (an <img data-on="move ..."> or, for a tap,
   <img class="tap">). A walker's path and its turn hold still while it moves */
.pet.moving { animation-play-state:paused }
.pet.m-jump .sp { animation:m-jump .7s cubic-bezier(.3,1.4,.5,1) 1, var(--turn) paused }
.pet.m-spin .sp { animation:m-spin .8s ease-in-out 1, var(--turn) paused }
.pet.m-twirl .sp { animation:m-twirl 1s ease-in-out 1, var(--turn) paused }
.pet.m-shake .sp { animation:m-shake .28s ease-in-out 5 alternate, var(--turn) paused }
.pet.m-nod .sp { animation:m-nod .45s ease-in-out 2, var(--turn) paused }
.pet.m-show .sp { animation:m-nod .8s ease-in-out 2, var(--turn) paused }
.pet.m-dip .sp { animation:m-dip 1.3s ease-in-out 1, var(--turn) paused }
.pet.m-sink .sp { animation:m-sink 3.4s ease-in-out 1, var(--turn) paused }
.pet.m-pop .sp { animation:m-pop 2.4s ease-in-out 1, var(--turn) paused }
.pet.m-slide .sp { animation:m-slide 1.9s ease-in-out 1, var(--turn) paused }
.pet.m-zip { animation:m-zip 2.8s cubic-bezier(.4,0,.2,1) 1; pointer-events:auto }
.pet.swap .fr img { opacity:0 !important } .pet.swap .fr img.on { opacity:1 !important }
@keyframes m-jump { 0%{transform:translateY(0) scale(1,1)} 20%{transform:translateY(4%) scale(1.12,.86)} 55%{transform:translateY(-70%) scale(.94,1.1) rotate(-8deg)} 100%{transform:translateY(0) scale(1,1)} }
@keyframes m-spin { to{transform:rotate(360deg)} }
@keyframes m-twirl { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(200deg) scale(1.12)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes m-shake { from{transform:rotate(-10deg) scale(1.04)} to{transform:rotate(10deg) scale(1.04)} }
@keyframes m-nod { 0%,100%{transform:rotate(0) translateY(0)} 50%{transform:rotate(-4deg) translateY(3%)} }
@keyframes m-dip { 0%{transform:translateY(0)} 35%{transform:translateY(var(--dip,34%)) scale(.94)} 60%{transform:translateY(var(--dip,34%)) scale(.94)} 100%{transform:translateY(0)} }
@keyframes m-sink { 0%{transform:translateY(0)} 20%{transform:translateY(var(--sink,14%))} 80%{transform:translateY(var(--sink,14%))} 100%{transform:translateY(0)} }
@keyframes m-pop { 0%{transform:translateY(var(--peek,36%))} 25%{transform:translateY(2%)} 75%{transform:translateY(2%)} 100%{transform:translateY(var(--peek,36%))} }
@keyframes m-slide { 0%{transform:translateX(0)} 40%{transform:translateX(var(--sx,9cqw)) rotate(6deg)} 60%{transform:translateX(var(--sx,9cqw)) rotate(6deg)} 100%{transform:translateX(0)} }
@keyframes m-zip { 0%{opacity:0;translate:0 0;rotate:-5deg} 12%{opacity:1} 88%{opacity:1} 100%{opacity:0;translate:var(--zx,8cqw) 0;rotate:5deg} }
/* ripples round a dip (game.js adds two <i class="ring"> to a pet that dips) and bubbles over a sink (three <i class="bub">) */
.pet .ring { position:absolute; left:50%; bottom:0; width:130%; height:24%; translate:-50% 50%; border:2px solid rgba(255,255,255,.85); border-radius:50%; opacity:0; pointer-events:none }
.pet.m-dip .ring { animation:ripple 1.2s ease-out 1 } .pet.m-dip .ring + .ring { animation-delay:.25s }
.pet .bub { position:absolute; bottom:30%; width:10%; aspect-ratio:1; border-radius:50%; border:2px solid #fff; background:rgba(255,255,255,.45); opacity:0; pointer-events:none; z-index:3 }
.pet .bub.b1 { left:30% } .pet .bub.b2 { left:52%; width:7% } .pet .bub.b3 { left:68%; width:12% }
.pet.m-sink .bub { animation:bubble 1.4s ease-out infinite } .pet.m-sink .bub.b2 { animation-delay:.4s } .pet.m-sink .bub.b3 { animation-delay:.8s }
@keyframes ripple { 0%{opacity:.9;scale:.6} 100%{opacity:0;scale:1.9} }
@keyframes bubble { 0%{opacity:0;transform:translateY(0) scale(.6)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-140%) scale(1.1)} }
/* the zone holds still off screen and for anyone who asked for less motion */
.zone.paused *, .zone.paused *::before, .zone.paused *::after, .zone.paused { animation-play-state:paused !important }
@media (prefers-reduced-motion: reduce) {
  .zone *, .zone *::before, .zone *::after, .zone, .zone-hint i { animation:none !important; transition:none !important }
  .pet[data-do~="hide"] { opacity:1; pointer-events:auto }
  .puffs i { opacity:.45 }
}

/* a phrase that must not break inside (a Japanese or Thai word the browser would split): <span class="nw"> in words.js */
.nw { display:inline-block }
/* Japanese paragraphs break by phrase where the browser knows how (Chrome's auto-phrase) and never leave a lone
   "す。" on a last line (text-wrap:pretty, Chrome and Safari 26) */
html[lang="ja"] .gp :is(.sub,.step p,.note p,.vow p,.reel li) { word-break:auto-phrase; text-wrap:pretty }
/* every Japanese line breaks by phrase, headings included (ひと風 / 呂 in an h2 at 390 px) */
html[lang="ja"] .gp { word-break:auto-phrase }
/* Chinese: the last character and its 。 never sit alone on a line (价 / 格。 under the prices at 390 px) */
html[lang^="zh"] .gp { text-wrap-style:pretty } html[lang^="zh"] .gp h2 { text-wrap-style:balance }
/* no Japanese line starts with ー or a small kana */
:lang(ja) body { line-break:strict }
/* Korean breaks between words, never inside one (블록퍼/즐 at 390 px) */
html[lang="ko"] .gp { word-break:keep-all }
/* Thai and the CJK scripts read badly letter-spaced: the kickers and the difficulty label close up */
html[lang="th"] .gp .kicker, html[lang="th"] .gp .diff, html[lang="ja"] .gp .kicker, html[lang="ko"] .gp .kicker, html[lang^="zh"] .gp .kicker { letter-spacing:.04em }

/* ---- sections */
.gp section { padding:72px 0 }
.gp section.well { background:linear-gradient(180deg,var(--bg),var(--well)); border-top:2.5px solid var(--line); border-bottom:2.5px solid var(--line) }
.gp .kicker { color:var(--gd) }
.gp section > .wrap > .sub { margin-bottom:0 }

/* the video: a phone-shaped frame. It plays muted when scrolled into view, a tap gives it sound; with no play.mp4
   (or no video at all) the poster stays and the sound button never shows */
.reel { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:56px; align-items:center; max-width:880px; margin:0 auto }
.clip { position:relative; background:var(--ink); border:2.5px solid var(--ink); border-radius:46px; padding:9px; box-shadow:0 14px 0 var(--line), 0 28px 44px rgba(47,42,58,.18); transform:rotate(-2deg) }
.clip video, .clip img { display:block; width:100%; height:auto; aspect-ratio:var(--va,600/1304); object-fit:cover; border-radius:37px; background:#1e1b26 }
.clip .snd { position:absolute; right:22px; bottom:22px; width:48px; height:48px; border-radius:50%; background:#fff; color:var(--ink); border:2.5px solid var(--ink); box-shadow:0 4px 0 rgba(23,20,34,.5); display:none; place-items:center; cursor:pointer; padding:0 }
.clip.live .snd { display:grid } .clip .snd svg { width:24px; height:24px } .clip .snd .on { display:none } .clip.loud .snd .on { display:block } .clip.loud .snd .off { display:none }
.clip .snd:focus-visible { outline:3px solid var(--red); outline-offset:3px }
.clip .tag { position:absolute; left:50%; bottom:-18px; translate:-50% 0; white-space:nowrap; background:var(--g); color:#fff; border:2.5px solid var(--ink); border-radius:999px; padding:5px 14px; font-size:13px; font-weight:900; box-shadow:0 4px 0 var(--gd); text-shadow:0 1px 0 rgba(0,0,0,.15); display:none }
.clip.live:not(.loud) .tag { display:block }
.reel .words h2 { margin-bottom:12px } .reel .words .sub { margin:0 }
.reel ul { margin:20px 0 0; padding:0; list-style:none; display:grid; gap:10px }
.reel li { display:flex; gap:10px; align-items:flex-start; font-weight:700; color:var(--ink); font-size:16px; line-height:1.45 }
.reel li::before { content:""; flex:none; width:12px; height:12px; margin-top:6px; border-radius:50%; background:var(--g); border:2px solid var(--ink) }

/* how to play: three steps, each with a real screenshot */
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:38px 0 0; padding:0; list-style:none }
.step { position:relative; background:var(--card); border:2.5px solid var(--ink); border-radius:28px; padding:24px 22px 26px; box-shadow:0 8px 0 var(--line); text-align:center }
.shot { display:block; width:min(220px,80%); height:auto; aspect-ratio:600/1304; object-fit:cover; object-position:50% 0; margin:0 auto 18px; border:2.5px solid var(--ink); border-radius:24px; background:#fff; box-shadow:0 12px 22px rgba(47,42,58,.18) }
.step .n { position:absolute; left:16px; top:16px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--g); color:#fff; font-weight:900; font-size:18px; border:2.5px solid var(--ink); box-shadow:0 3px 0 var(--gd); text-shadow:0 1px 0 rgba(0,0,0,.15) }
.step b { display:block; font-size:20px; line-height:1.2; letter-spacing:-.01em; margin:0 0 6px; text-wrap:balance }
.step p { margin:0; color:var(--muted); font-size:15px; line-height:1.55 }

/* the chill zone: what you do there, beside a screenshot of it */
.chill { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:52px; align-items:center; margin:38px 0 0 }
.chill .pic { position:relative }
.chill .pic .shot { width:100%; margin:0; transform:rotate(2deg) }
.chill .pic .stk { position:absolute; left:-30px; bottom:-26px; width:120px; height:auto; transform:rotate(-8deg); filter:drop-shadow(0 10px 12px rgba(47,42,58,.25)); pointer-events:none }
.notes { display:grid; gap:16px }
.note { background:var(--card); border:2.5px solid var(--ink); border-radius:24px; padding:18px 22px 20px; box-shadow:0 6px 0 var(--line) }
.note b { display:block; font-size:19px; letter-spacing:-.01em; margin:0 0 4px; text-wrap:balance }
.note p { margin:0; color:var(--muted); font-size:15px; line-height:1.6 } .note p b { display:inline; font-size:inherit; color:var(--ink) }

/* promises and price */
.vows { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:36px 0 0; padding:0; list-style:none }
.vow { background:var(--card); border:2.5px solid var(--ink); border-radius:22px; padding:18px 14px 20px; text-align:center; box-shadow:0 6px 0 var(--line) }
.vow .ic { width:52px; height:52px; margin:0 auto 10px; border-radius:50%; background:var(--gb); border:2.5px solid var(--ink); display:grid; place-items:center } .vow .ic svg { width:26px; height:26px }
.vow b { display:block; font-size:16px; line-height:1.2; margin:0 0 4px; text-wrap:balance } .vow p { margin:0; color:var(--muted); font-size:13px; line-height:1.5 }
.gp .tiers { margin-top:34px }
.gp .wrap.narrow { max-width:760px }

/* more games: the others' animals, each a link to its page (never a count in the words) */
.others { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin:34px 0 0; padding:0; list-style:none }
.others a { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; height:100%; text-decoration:none; color:var(--ink); background:var(--gb,#fff); border:2.5px solid var(--ink); border-radius:22px; padding:12px 8px 12px; box-shadow:0 6px 0 var(--line); font-weight:900; font-size:14px; line-height:1.2; text-align:center; transition:transform .15s }
.others a:hover { transform:translateY(-3px) rotate(-1deg) } .others a:focus-visible { outline:3px solid var(--red); outline-offset:3px }
.others img { width:78%; height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(47,42,58,.22)) }
.allgames { display:flex; justify-content:center; margin:28px 0 0 }
.allgames a { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink); text-decoration:none; font-weight:900; font-size:15px; border:2.5px solid var(--ink); border-radius:16px; padding:11px 20px; box-shadow:0 5px 0 var(--line); transition:transform .12s }
.allgames a:hover { transform:translateY(-2px) } .allgames a:focus-visible { outline:3px solid var(--red); outline-offset:3px }

/* footer: the hub's, plus Discord */
.gp footer.wrap > div a { white-space:nowrap }

/* a narrow desktop (the page fills the window, 22 px gutters): the corgi sticker beside the chill shot stays inside */
@media (min-width:901px) and (max-width:1100px) { .chill .pic .stk { left:-10px } }

/* ---- phones and small tablets */
@media (max-width:900px) {
  .gp .home { width:112px }
  .gp .sky { padding-bottom:48px }
  .hero { grid-template-columns:minmax(0,1fr); grid-template-areas:"name" "zone" "buy"; row-gap:18px; align-items:center; text-align:center; margin-top:6px }
  .hero .kanji { left:50%; translate:-50% 0; top:-4px; font-size:96px }
  .hero .name .logo { width:min(232px,62%); margin:0 auto 8px }
  .hero .name .line { font-size:clamp(23px,6.4vw,29px) }
  .hero .buy { align-items:stretch; text-align:center }
  .hero .buy .stores { order:-1; margin:0 0 20px }   /* a phone sees the badges in its first view, right under the zone */
  .hero .buy .sub { margin:0 auto 14px; font-size:16px; max-width:44ch }
  .hero .buy .diff { justify-content:center; margin:0 }
  .hero .stores { display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .hero .store { justify-content:center; text-align:left; padding:10px 8px; gap:8px; font-size:13px; white-space:nowrap } .hero .store svg { width:20px; height:20px }
  .hero .zone { max-width:none }
  .zone { border-radius:22px; box-shadow:0 8px 0 var(--line) }
  .zone-hint { margin-top:14px; font-size:12px }
  .gp section { padding:52px 0 }
  .reel { grid-template-columns:minmax(0,1fr); gap:40px; text-align:center }
  .reel .clip { width:min(270px,74%); margin:0 auto }
  .reel ul { justify-items:center; text-align:left }
  .steps { grid-template-columns:minmax(0,1fr); gap:14px; margin-top:28px }
  .step { display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr); gap:16px; align-items:center; text-align:left; padding:14px 16px 14px 14px; border-radius:24px }
  .step .shot { width:100%; margin:0; border-radius:16px; box-shadow:0 6px 12px rgba(47,42,58,.16) }
  .step .n { left:-8px; top:-8px; width:32px; height:32px; font-size:15px }
  .step b { font-size:17px } .step p { font-size:14px; line-height:1.5 }
  .chill { grid-template-columns:minmax(0,1fr); gap:30px; margin-top:28px }
  .chill .pic { width:min(240px,64%); margin:0 auto }
  .chill .pic .stk { width:86px; left:-34px; bottom:-18px }
  .vows { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px } .vow { padding:14px 10px 16px } .vow:last-child:nth-child(odd) { grid-column:1 / -1 }
  .others { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px } .others a { font-size:12.5px; border-radius:18px; padding:10px 6px }
}

/* ---- phones only: the zone is squarer than the painting (--sa), crops the sides and pans sideways, with the swipe
   hint under it. A small tablet (641 to 900) shows the whole painting at its own shape, no pan, no hint */
@media (max-width:640px) {
  .zone { aspect-ratio:var(--sa,1.05); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain }
  .zone::-webkit-scrollbar { display:none }
  .zw { position:relative; inset:auto; height:100%; width:auto; aspect-ratio:var(--wa,3/2) }
  .zone-hint .ph { display:block; margin-top:3px }
}