/* Tsumida Games: the shared look of tsumida.ai/games (index, support, privacy, terms).
   Sticker art on cream paper: 2.5px ink borders, hard shadows, one accent per game (--g). */
:root {
  --bg:#fff8ee; --bg2:#ffefd9; --card:#fffdf8; --well:#fbf1e3; --line:#ecdfcf;
  --ink:#2f2a3a; --muted:#7a6f80; --faint:#b9aebd;
  --red:#e0534a; --red-deep:#b83a2e; --heart:#ff6b8a; --coin:#f5c542; --coin-deep:#d19a1b; --leaf:#7cc47f;
  --g:#ff9d3c; --gd:#d97b1e; --gb:#fff3e0;
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased }
a { color:var(--red-deep); text-underline-offset:3px }
img { max-width:100%; height:auto; display:block }
.wrap { max-width:1080px; margin:0 auto; padding:0 22px }
b, strong { font-weight:800 }

/* top bar */
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 0 0 }
.brand { display:flex; align-items:center; gap:10px; white-space:nowrap; text-decoration:none; color:var(--ink); font-weight:900; font-size:19px; letter-spacing:-.01em }
.brand img { width:44px; height:44px; border-radius:13px; border:2.5px solid var(--ink); background:#fff; box-shadow:0 5px 0 var(--line) }
.brand small { display:block; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; margin-top:1px }
.top nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 18px }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.lang select { -webkit-appearance:none; appearance:none; font:inherit; font-weight:800; font-size:14px; color:var(--ink); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232f2a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; border:2.5px solid var(--ink); border-radius:14px; padding:8px 34px 8px 14px; box-shadow:0 4px 0 var(--line); cursor:pointer }
.lang select:focus-visible { outline:3px solid var(--red); outline-offset:3px }
.top nav a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:800 } .top nav a:hover, .top nav a.on { color:var(--ink) }

/* hero: the logo and the playground */
.sky { background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); position:relative; overflow:hidden; padding-bottom:44px }
/* the logo hangs over the top of the stage like a billboard (about a fifth of the stage's height) */
.title { margin:14px auto -13.3%; width:min(640px,86vw); position:relative; z-index:3; pointer-events:none }
/* the studio seal sits just right of the cat's face on the logo */
.title .seal { position:absolute; left:43%; top:9%; width:9%; pointer-events:auto; transform:rotate(8deg); transition:transform .2s } .title .seal:hover { transform:rotate(0) scale(1.06) }
.title .seal img { width:100%; height:auto; border-radius:22%; border:2.5px solid var(--ink); box-shadow:0 4px 0 rgba(90,58,46,.25); background:#fff } .title img { width:100%; height:auto; filter:drop-shadow(0 14px 18px rgba(90,58,46,.22)) }

/* the stage is one painting (lagoon | onsen | swamp) in a card; `.world` keeps the painting's own
   proportions so every animal's % position holds at any width (phones crop the sides) */
.stage { position:relative; aspect-ratio:1536/1024; border:2.5px solid var(--ink); border-radius:32px; overflow:hidden; background:#a9d6cd; 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 }
.world { position:absolute; top:0; left:50%; height:100%; aspect-ratio:1536/1024; transform:translateX(-50%); container-type:inline-size }
.world .bg { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none }
.water { position:absolute; pointer-events:none; z-index:2; border-radius:50% }
.pool { position:absolute; left:68%; bottom:3%; width:32%; height:auto; pointer-events:none }
.pool.back { z-index:0 }
.pool.front { z-index:2; clip-path:inset(64% 0 0 0) }   /* the lower water and the rim, drawn over the hippos so they sit IN the pool */

.an { position:absolute; border:0; padding:0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; font:inherit; color:inherit; touch-action:manipulation; z-index:1 }
.an .sp { display:block; width:100%; position:relative }
.an img { width:100%; height:auto; display:block; filter:drop-shadow(0 6px 8px rgba(47,42,58,.22)) }
.an .i1, .an .i2 { position:absolute; left:0; top:0; opacity:0 }
.an .nm { position:absolute; left:50%; bottom:104%; transform:translate(-50%,6px); white-space:nowrap; font-weight:900; font-size:clamp(11px,1.3cqw,16px); color:var(--ink); opacity:0; transition:opacity .2s,transform .2s; pointer-events:none; text-shadow:0 0 6px #fff,0 0 12px #fff,0 2px 0 #fff; z-index:5 }
.an:hover .nm, .an.hit .nm { opacity:1; transform:translate(-50%,0) }
.an:focus-visible { outline:3px solid var(--red); outline-offset:6px; border-radius:30% }
.an.hit { z-index:4 }

/* the lagoon (left): a penguin wobbles on the ice shelf and now and then (or on a click) belly-flops off it, swims a circle through the
   open water facing the way he goes, and hops back up where he started (Carson 2026-10-16: "have him swim in a circle to return back to
   the original location"; the old slide went out and came straight back, backwards); a seal zips through the water
   (the big penguin that stood on the onsen deck in front of the tub was removed 2026-10-12, Carson: he served no purpose) */
.an.peng .sp { transform-origin:50% 100%; animation:waddle .5s ease-in-out infinite alternate }
.an.peng.p2 { left:3%; bottom:48%; width:5cqw; animation-delay:.25s }
.an.peng.p2 .sp { animation-delay:.25s }
.an.peng.slide .sp { animation:swimloop 4.2s ease-in-out 1 }
.an.peng.slide .i0 { opacity:0 } .an.peng.slide .i1 { opacity:1 }
@keyframes waddle { from{transform:rotate(-6deg)} to{transform:rotate(6deg)} }
@keyframes swimloop { 0%{transform:translate(0,0) rotate(0) scaleX(1)} 10%{transform:translate(2cqw,.4cqw) rotate(8deg) scaleX(1)} 30%{transform:translate(6.5cqw,1.1cqw) rotate(4deg) scaleX(1)} 42%{transform:translate(8.6cqw,1.8cqw) rotate(-8deg) scaleX(1)} 50%{transform:translate(7.6cqw,2.2cqw) rotate(0) scaleX(-1)} 70%{transform:translate(3.6cqw,2.1cqw) rotate(0) scaleX(-1)} 84%{transform:translate(.6cqw,1.3cqw) rotate(10deg) scaleX(-1)} 92%{transform:translate(0,.2cqw) rotate(0) scaleX(1)} 100%{transform:translate(0,0) rotate(0) scaleX(1)} }
.an.seal { left:3%; bottom:37%; width:5.5cqw; opacity:0; pointer-events:none; z-index:1 }   /* the open water between the floes (the lower floe is the dance floor) */
.an.seal.go { animation:sealzip 2.8s cubic-bezier(.4,0,.2,1) 1; pointer-events:auto }
.an.seal.hit .i0 { opacity:0 } .an.seal.hit .i1 { opacity:1 }
@keyframes sealzip { 0%{opacity:0;transform:translateX(0) rotate(-5deg)} 12%{opacity:1} 88%{opacity:1} 100%{opacity:0;transform:translateX(8cqw) rotate(5deg)} }

/* the onsen's steam: soft puffs rise off the water, drift, grow and fade into the scene (the painting's own wisps were painted out) */
.steam { position:absolute; left:40%; bottom:44%; width:20%; height:30%; pointer-events:none; z-index:2 }
.steam i { position:absolute; bottom:0; width:22%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,250,.75) 0%,rgba(255,255,250,.35) 45%,rgba(255,255,250,0) 70%); filter:blur(3px); opacity:0; animation:rise 5.5s ease-out infinite }
.steam i:nth-child(1) { left:18% } .steam i:nth-child(2) { left:40%; animation-delay:1.1s } .steam i:nth-child(3) { left:58%; animation-delay:2.2s }
.steam i:nth-child(4) { left:30%; animation-delay:3.3s; width:18% } .steam i:nth-child(5) { left:50%; animation-delay:4.4s; width:26% }
@keyframes rise { 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 onsen (middle): the capybara soaks in the tub, the panda sits on the deck and wobbles, the turtle skates the deck now and then */
.an.capy { left:41.5%; bottom:27%; width:9cqw; z-index:1 }
.an.capy .sp { animation:soak 3.2s ease-in-out infinite alternate }
.an.capy .ring { position:absolute; left:50%; bottom:0; width:130%; height:24%; transform:translateX(-50%); border:2px solid rgba(255,255,255,.8); border-radius:50%; opacity:0; pointer-events:none }
.an.capy.hit .sp { animation:dip 1.3s ease-in-out 1 }
.an.capy.hit .ring { animation:ripple 1.2s ease-out 1 } .an.capy.hit .ring.r2 { animation-delay:.25s }
@keyframes soak { from{transform:translateY(0) rotate(-1.5deg)} to{transform:translateY(-5%) rotate(1.5deg)} }
@keyframes dip { 0%{transform:translateY(0)} 35%{transform:translateY(34%) scale(.94)} 60%{transform:translateY(34%) scale(.94)} 100%{transform:translateY(0)} }
@keyframes ripple { 0%{opacity:.9;transform:translateX(-50%) scale(.6)} 100%{opacity:0;transform:translateX(-50%) scale(1.9)} }
.an.panda { left:19%; bottom:43%; width:8.5cqw; z-index:3 }   /* the original panda, clutching a bamboo stalk (Panda Garden's bamboo art laid under his right paw) */
.an.panda .sp { transform-origin:50% 100%; animation:wobble 2.6s ease-in-out infinite alternate }
.an.panda.hit .sp { animation:wobblehard .28s ease-in-out 5 alternate }
@keyframes wobble { from{transform:rotate(-3.5deg)} to{transform:rotate(3.5deg)} }
@keyframes wobblehard { from{transform:rotate(-10deg) scale(1.04)} to{transform:rotate(10deg) scale(1.04)} }
.an.turtle { left:29%; bottom:45.5%; width:4.8cqw; z-index:3; animation:skate 11s ease-in-out infinite }   /* the lawn in front of the fence, under the banner */
.an.turtle img { animation:face 11s steps(1) infinite }   /* only the drawing turns round, so the flag always reads the right way */
.an.turtle .flag { animation:flagside 11s steps(1) infinite }   /* the pole is stuck on his SHELL: it jumps to the mirrored side on the same clock as the flip (facing left with the pole at 22% it stood on his eye, Carson 2026-10-12) */
.an.turtle .sp { animation:roll .3s ease-in-out infinite alternate }
.an.turtle.hit, .an.turtle.hit img, .an.turtle.hit .flag { animation-play-state:paused } .an.turtle.hit .sp { animation:spin .7s ease-in-out 1 }
/* the banner: "No Wifi Needed!" on a cloth strung between two poles ABOVE the garden fence (the painting's rail is 25% down, x 22%
   to 60%), in the bamboo, so it covers no animal; a cat sits on the rail at the foot of each pole holding it (the cats are z 3, in
   front of the cloth's bottom corners). z 2: over the painting, under the title and the animals. A phone opens on the onsen, so it
   is the first thing seen there; the rest of the promise is on the flags and the perks under the stage, nothing is said twice */
.banner { position:absolute; left:22%; top:18.5%; width:38%; z-index:2; display:block; text-decoration:none; color:var(--ink); text-align:center }
.banner .pole { position:absolute; top:-1.2cqw; width:3px; height:11cqw; background:#8a6240; border-radius:2px; z-index:0 } .banner .pole.l { left:-1px } .banner .pole.r { right:-1px }
.banner .pole::after { content:""; position:absolute; left:-3px; top:-5px; width:9px; height:9px; border-radius:50%; background:#d97b1e; border:2px solid var(--ink) }
.banner .cloth { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:.7cqw; background:#fffdf8; border:2.5px solid var(--ink); border-radius:4px 4px 1.8cqw 1.8cqw; padding:1cqw 1.6cqw 1.1cqw; box-shadow:0 .5cqw 0 rgba(90,58,46,.22), 0 1cqw 1.6cqw rgba(47,42,58,.14); animation:drape 4.5s ease-in-out infinite alternate; transform-origin:50% 0 }
.banner svg { width:clamp(18px,3.6cqw,40px); height:auto; flex:none; color:var(--red) }
.banner b { font-size:clamp(15px,3.6cqw,40px); line-height:1; letter-spacing:-.02em; font-weight:900; white-space:nowrap }
.banner:hover .cloth { background:#fff } .banner:focus-visible { outline:3px solid var(--red); outline-offset:6px; border-radius:12px }
@keyframes drape { from{transform:skewX(-.8deg)} to{transform:skewX(.8deg)} }   /* as calm as the flags (Carson: motion sickness) */
/* on a small painting (phones) the line breaks in two and grows; the cloth starts a little further right so it clears the panda,
   who stands a little further left; the cats keep the foot of their poles */
@container (max-width:700px) { .banner { left:25%; width:36%; top:18.5% } .banner .cloth { padding:1.4cqw 1.4cqw 1.6cqw; flex-wrap:wrap; row-gap:0 } .banner b { font-size:20px; line-height:1.05 } .banner b .l2 { display:block } .banner svg { width:22px }
  .world .an.cat.c1 { left:20% } .world .an.cat.c3 { left:61.5% } .world .an.panda { left:16.5%; bottom:41% }
  .world .an.turtle { left:48%; bottom:7.2%; width:4.8cqw; animation:skatephone 11s ease-in-out infinite } .world .an.turtle .flag { --fh:5.4cqw } .world .an.turtle .flag b { left:auto; right:0; border-radius:10px 0 0 10px; padding:4px 9px 5px 13px; transform-origin:100% 50% }   /* phone: the turtle SKATES THE DECK FRONT, where the big penguin stood: the right half, from the capybara to the pond, with the flip and the pole on his shell as on desktop, the cloth streaming LEFT so it stays over the deck and never reaches the pond (Carson: "let that boy skate"; on the lawn under the banner the cloth had nowhere to go but his face) */
  .world .an.capy .flag { --fx:100%; --fy:4%; --fh:2.6cqw } .world .an.hippo.h1 .flag { --fx:-324%; --fy:-70%; --fh:2.4cqw }   /* the price flag starts further right and flies LOW, across the tub's rim, so it runs under the turtle loop and not through it; the hippo's pole stands on the deck's front edge at x 47%, its cloth lying along the LEFT half of that edge (x 9% to 47%, inside the first view), left of the skating turtle and under the troupe's feet */
  .world .an.monkey { left:55%; top:9.5%; width:7.5cqw } .an.monkey .flag { --fx:-12%; --fy:14%; --fh:3.6cqw } }   /* bigger on a phone; the pole stands on the banner's top edge just left of him, so the cloth ends clear of his face */

/* the little flags: five animals each carry one with a promise on it (free to 50, no ads, no data, 1.99 USD for them all, perfect for flights) */
.an .flag { position:absolute; left:var(--fx,58%); bottom:var(--fy,78%); width:0; height:0; pointer-events:none; z-index:2 }
.an .flag .pole { position:absolute; left:0; bottom:0; width:2.5px; height:var(--fh,4.2cqw); background:#5a3d24; border-radius:2px }
.an .flag .pole::after { content:""; position:absolute; left:-2px; top:-4px; width:6.5px; height:6.5px; border-radius:50%; background:var(--fd) }
.an .flag b { position:absolute; left:2px; bottom:calc(var(--fh,4.2cqw) - 2.3cqw); background:var(--fc); color:var(--ft); border:2px solid var(--fd); border-radius:0 10px 10px 0; padding:4px 13px 5px 9px; font-size:clamp(14px,1.9cqw,23px); line-height:1.2; font-weight:900; white-space:nowrap; transform-origin:0 50%; box-shadow:0 2px 0 rgba(47,42,58,.18); animation:flutter .75s ease-in-out infinite alternate }
.an.turtle .flag { --fx:22%; --fy:60% }
.an.capy .flag { --fx:70%; --fy:78% }
.an.hippo.h1 .flag { --fx:34%; --fy:78% }   /* the left hippo, nearer the middle; flies left over the lawn; outside his .sp, so it stays up while he sinks */
.an .flag b .l2 { display:block }
/* every flag is one size, the price flag's (Carson); the capybara's carries the whole price on two lines */
.an.monkey .flag { --fx:-8%; --fy:12%; --fh:2.9cqw }   /* planted on the banner's top edge just left of him, flying LEFT along the top of the cloth, in the strip under the logo; the cloth ends clear of his face (at 22% it covered his eye, Carson) */
.an.monkey .flag b { left:auto; right:0; border-radius:10px 0 0 10px; padding:4px 9px 5px 13px; transform-origin:100% 50% }

/* the hippo's flag flies to the left of the pole so longer translations stay inside the stage;
   the panda's does too, out over the lagoon, so it never crosses the turtle and the rabbit on the lawn */
.an.hippo.h1 .flag b { left:auto; right:0; border-radius:10px 0 0 10px; padding:4px 9px 5px 13px; transform-origin:100% 50% }
/* on a small painting (phones) there is no room over the lagoon: the panda's flag flies right on a tall pole, above the turtle's */

@keyframes skate { 0%{transform:translateX(0)} 47%{transform:translateX(6cqw)} 50%{transform:translateX(6cqw)} 97%{transform:translateX(0)} 100%{transform:translateX(0)} }   /* short: with the flags at full size its flag must never reach the price flag */
@keyframes skatephone { 0%{transform:translateX(0)} 47%{transform:translateX(14cqw)} 50%{transform:translateX(14cqw)} 97%{transform:translateX(0)} 100%{transform:translateX(0)} }   /* phones: the right half of the deck front, from under the capybara to the pond's edge */
@keyframes face { 0%{transform:scaleX(1)} 48.5%{transform:scaleX(-1)} 98.5%{transform:scaleX(1)} }
@keyframes flagside { 0%{left:22%} 48.5%{left:78%} 98.5%{left:22%} }   /* the shell's side, mirrored with `face` */
@keyframes roll { from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(-3%) rotate(2deg)} }
@keyframes flutter { from{transform:skewY(-3.2deg) scaleX(.968)} to{transform:skewY(3.2deg) scaleX(1)} }   /* 20% calmer (Carson: motion sickness) */
@keyframes spin { to{transform:rotate(360deg)} }

/* the troupe: six penguins on the lower floe (x 0 to 13%, its top at 19 to 30% up), two rows of three, dancing on the same beat
   with a little offset each, swapping to the happy face on the off-beat; a click and they all jump. Swipe-left reward on a phone */
.an.troupe { left:.3%; bottom:18%; width:13cqw; height:9.5cqw; z-index:1 }
.an.troupe .d { position:absolute; width:3.9cqw; display:block } .an.troupe .d .sp { transform-origin:50% 100%; animation:dance 1.1s ease-in-out infinite }
.an.troupe .d .i1 { animation:offbeat 1.1s steps(1) infinite }
.an.troupe .d1 { left:2%; bottom:44% } .an.troupe .d2 { left:31%; bottom:46% } .an.troupe .d3 { left:60%; bottom:43% }
.an.troupe .d4 { left:14%; bottom:2% } .an.troupe .d5 { left:44%; bottom:0 } .an.troupe .d6 { left:72%; bottom:3% }
.an.troupe .d2 .sp, .an.troupe .d2 .i1, .an.troupe .d5 .sp, .an.troupe .d5 .i1 { animation-delay:-.55s }   /* the middle two dance the counter-step */
.an.troupe .d3 .sp, .an.troupe .d4 .sp, .an.troupe .d3 .i1, .an.troupe .d4 .i1 { animation-delay:-.15s }
.an.troupe.hit .d .sp { animation:catjump .7s cubic-bezier(.3,1.4,.5,1) 1 } .an.troupe.hit .d .i1 { animation:none; opacity:1 }
.an.troupe .nm { bottom:96% }
@keyframes 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 offbeat { 0%{opacity:0} 50%{opacity:1} }

/* the turtles: eight walk one big slow loop, nose to tail, on the lawn in front of the baobab (centre x 92%, 56% up), turning
   round at each end (the drawing flips on the back half) with a little waddle; no fence (Carson). A tap and they all jump.
   Swipe-right reward. (The class is still .pen.) */
.an.pen { left:80%; bottom:51%; width:16cqw; height:8cqw; z-index:1; --rx:8.4cqw; --ry:2.85cqw; --ox:1; --oy:1 }   /* loop centre x 88%, clear of the cattails below */   /* loop centre x 88%, 50% bigger than before (Carson) */
.an.pen .t { position:absolute; left:calc(50% - 1.5cqw); bottom:30%; width:3cqw; display:block; z-index:2; animation:loop 16s linear infinite, tdepth 16s step-end infinite }
.an.pen .t .w { display:block; transform-origin:50% 100%; animation:twaddle .45s ease-in-out infinite alternate }
.an.pen .t img { animation:tface 16s steps(1) infinite }
.an.pen .t2, .an.pen .t2 img { animation-delay:-2s } .an.pen .t3, .an.pen .t3 img { animation-delay:-4s } .an.pen .t4, .an.pen .t4 img { animation-delay:-6s } .an.pen .t5, .an.pen .t5 img { animation-delay:-8s } .an.pen .t6, .an.pen .t6 img { animation-delay:-10s } .an.pen .t7, .an.pen .t7 img { animation-delay:-12s } .an.pen .t8, .an.pen .t8 img { animation-delay:-14s }
.an.pen.hit .t .w, .an.pen.hit .bun .sp { animation:catjump .7s cubic-bezier(.3,1.4,.5,1) 1 }
/* the rabbit lives inside the turtle group so they share one depth order: turtles on the front half of the loop draw over it, the
   back half under it, so it is never on top of a nearer turtle. It runs on the turtles' own 16 s clock, so the timing is fixed:
   a turtle passes the loop's left end on every even second and the rabbit leaps the lane there only on the odd ones, high, on top
   (Carson: it looked like it was stepping on them). Path in loop units (--rx, --ry; --ox/--oy shrink its outside walk on a phone) */
.an.pen .bun { position:absolute; left:calc(50% - 1.7cqw); bottom:30%; width:3.4cqw; display:block; z-index:3; animation:rabbitloop 16s linear infinite, bundepth 16s step-end infinite }
.an.pen .bun .sp { animation:hop .42s cubic-bezier(.3,0,.2,1) infinite alternate }
@keyframes tdepth { 0%{z-index:4} 50%{z-index:2} 100%{z-index:4} }
@keyframes bundepth { 0%{z-index:3} 5.3125%{z-index:6} 7.8125%{z-index:3} 53.75%{z-index:6} 57.1875%{z-index:3} 100%{z-index:3} }   /* on top only while in the air */
/* the loop: an ellipse in eight steps, counter-clockwise on screen (along the front left to right, back along the rear smaller) */
@keyframes loop {
  0%   { transform:translate(calc(var(--rx) * -1),0) scale(.95) }
  12.5%{ transform:translate(calc(var(--rx) * -.71),calc(var(--ry) * .71)) scale(1) }
  25%  { transform:translate(0,var(--ry)) scale(1.04) }
  37.5%{ transform:translate(calc(var(--rx) * .71),calc(var(--ry) * .71)) scale(1) }
  50%  { transform:translate(var(--rx),0) scale(.95) }
  62.5%{ transform:translate(calc(var(--rx) * .71),calc(var(--ry) * -.71)) scale(.9) }
  75%  { transform:translate(0,calc(var(--ry) * -1)) scale(.87) }
  87.5%{ transform:translate(calc(var(--rx) * -.71),calc(var(--ry) * -.71)) scale(.9) }
  100% { transform:translate(calc(var(--rx) * -1),0) scale(.95) } }
@keyframes tface { 0%{transform:scaleX(1)} 50%{transform:scaleX(-1)} }
@keyframes twaddle { from{transform:rotate(-3deg)} to{transform:rotate(3deg)} }

/* phones: the painting is ~410 px wide there, so both rewards grow to read once swiped to; the loop lies on the lawn BELOW the
   baobab's foot (at 57% up it ran across the trunk, Carson), a little flatter, with the price flag passing under it */
@container (max-width:700px) {
  .an.troupe { width:19cqw; height:13cqw; bottom:16% } .an.troupe .d { width:6cqw }
  .an.pen { left:calc(89% - 12cqw); bottom:48.5%; width:24cqw; height:11cqw; --rx:9cqw; --ry:2.6cqw; --ox:.97; --oy:.4 } .an.pen .t { width:3.6cqw; left:calc(50% - 1.8cqw) }
}


/* the rabbit hops along the moss in the garden */
@keyframes rabbitloop {
  0.0%{transform:translate(calc(var(--rx) * -1.55 * var(--ox)),calc(var(--ry) * 0 * var(--oy))) scaleX(1)}
  5.3125%{transform:translate(calc(var(--rx) * -1.5 * var(--ox)),calc(var(--ry) * 0 * var(--oy))) scaleX(1)}
  6.25%{transform:translate(calc(var(--rx) * -1),calc(var(--ry) * 0 - 6.5cqw)) scaleX(1)}
  7.0%{transform:translate(calc(var(--rx) * -0.11),calc(var(--ry) * 0 - 6cqw)) scaleX(1)}
  7.8125%{transform:translate(calc(var(--rx) * -0.11),calc(var(--ry) * 0)) scaleX(1)}
  13.75%{transform:translate(calc(var(--rx) * -0.25),calc(var(--ry) * 0)) scaleX(1)}
  18.75%{transform:translate(calc(var(--rx) * -0.05),calc(var(--ry) * 0.1)) scaleX(1)}
  25.0%{transform:translate(calc(var(--rx) * 0),calc(var(--ry) * 0.1)) scaleX(1)}
  31.25%{transform:translate(calc(var(--rx) * 0.3),calc(var(--ry) * 0)) scaleX(1)}
  37.5%{transform:translate(calc(var(--rx) * 0.3),calc(var(--ry) * 0)) scaleX(1)}
  37.625%{transform:translate(calc(var(--rx) * 0.3),calc(var(--ry) * 0)) scaleX(-1)}
  43.75%{transform:translate(calc(var(--rx) * 0),calc(var(--ry) * 0.1)) scaleX(-1)}
  50.0%{transform:translate(calc(var(--rx) * 0.05),calc(var(--ry) * 0)) scaleX(-1)}
  53.75%{transform:translate(calc(var(--rx) * 0.12),calc(var(--ry) * 0)) scaleX(-1)}
  54.6875%{transform:translate(calc(var(--rx) * 0.12),calc(var(--ry) * 0 - 6cqw)) scaleX(-1)}
  55.9375%{transform:translate(calc(var(--rx) * -1),calc(var(--ry) * 0 - 6.5cqw)) scaleX(-1)}
  57.1875%{transform:translate(calc(var(--rx) * -1.5 * var(--ox)),calc(var(--ry) * 0 * var(--oy))) scaleX(-1)}
  65.0%{transform:translate(calc(var(--rx) * -1.55 * var(--ox)),calc(var(--ry) * 0 * var(--oy))) scaleX(-1)}
  71.875%{transform:translate(calc(var(--rx) * -1.8 * var(--ox)),calc(var(--ry) * 1.3 * var(--oy))) scaleX(-1)}
  80.0%{transform:translate(calc(var(--rx) * -1.8 * var(--ox)),calc(var(--ry) * 1.3 * var(--oy))) scaleX(-1)}
  88.125%{transform:translate(calc(var(--rx) * -1.95 * var(--ox)),calc(var(--ry) * 0.4 * var(--oy))) scaleX(-1)}
  94.0%{transform:translate(calc(var(--rx) * -1.95 * var(--ox)),calc(var(--ry) * 0.4 * var(--oy))) scaleX(-1)}
  94.125%{transform:translate(calc(var(--rx) * -1.95 * var(--ox)),calc(var(--ry) * 0.4 * var(--oy))) scaleX(1)}
  100.0%{transform:translate(calc(var(--rx) * -1.55 * var(--ox)),calc(var(--ry) * 0 * var(--oy))) scaleX(1)} }

/* the swamp (bottom right): two hippos chill in the waterhole, one sinks to its eyes now and then, both chomp when clicked; the monkey swings in the baobab */
.an.hippo { z-index:1 }
.an.hippo.h1 { left:74.5%; bottom:10.5%; width:8.5cqw } .an.hippo.h2 { left:85%; bottom:11.5%; width:7.5cqw }
.an.hippo .sp { animation:soak 2.8s ease-in-out infinite alternate } .an.hippo.h2 .sp { animation-delay:1.1s }
.an.hippo.sunk .i0 { opacity:0 } .an.hippo.sunk .i2 { opacity:1 }
.an.hippo.sunk .sp { animation:sink 3.4s ease-in-out 1 }
.an.hippo.hit .i0, .an.hippo.hit .i2 { opacity:0 } .an.hippo.hit .i1 { opacity:1 }
.an.hippo.hit .sp { animation:chomp .5s ease-in-out 2 }
.an.hippo .bub { position:absolute; bottom:32%; 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 }
.an.hippo .b1 { left:30% } .an.hippo .b2 { left:52%; width:7% } .an.hippo .b3 { left:68%; width:12% }
.an.hippo.sunk .bub { animation:bubble 1.4s ease-out infinite } .an.hippo.sunk .b2 { animation-delay:.4s } .an.hippo.sunk .b3 { animation-delay:.8s }
@keyframes sink { 0%{transform:translateY(0)} 20%{transform:translateY(14%)} 80%{transform:translateY(14%)} 100%{transform:translateY(0)} }
@keyframes chomp { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12,.92) translateY(3%)} }
@keyframes bubble { 0%{opacity:0;transform:translateY(0) scale(.6)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-140%) scale(1.1)} }
.an.monkey { left:53.5%; top:12.8%; width:5cqw; z-index:3 }   /* sits on the banner's top edge at its right end (the logo's letters end at ~9.5%) */
.an.monkey .sp { transform-origin:50% 100%; animation:catbob 1.9s ease-in-out infinite alternate }
.an.monkey.hit .sp { animation:catjump .7s cubic-bezier(.3,1.4,.5,1) 1 }
@keyframes swing { from{transform:rotate(-7deg)} to{transform:rotate(7deg)} }
@keyframes swinghard { from{transform:rotate(-22deg)} to{transform:rotate(22deg)} }

/* the corgi: free rein, trots a loop round the lawn behind the tub and down past the swamp; two walk frames swap as he goes */
.an.corgi { left:20%; bottom:45%; width:6.5cqw; z-index:4; animation:corgirun 22s linear infinite }
/* the two walk frames take turns: exactly one is ever showing, so the other never ghosts through */
.an.corgi .i0 { animation:corgistepA .36s steps(1) infinite } .an.corgi .i1 { animation:corgistep .36s steps(1) infinite }
.an.corgi .sp { animation:trot .18s ease-in-out infinite alternate }
.an.corgi.hit { animation-play-state:paused } .an.corgi.hit .i0, .an.corgi.hit .i1 { opacity:0; animation:none } .an.corgi.hit .i2 { opacity:1 }
.an.corgi.hit .sp { animation:catjump .7s cubic-bezier(.3,1.4,.5,1) 1 }
@keyframes corgistep { 0%{opacity:0} 50%{opacity:1} }
@keyframes corgistepA { 0%{opacity:1} 50%{opacity:0} }
@keyframes trot { from{transform:translateY(0)} to{transform:translateY(-5%)} }
@keyframes corgirun {
  0%{transform:translate(0,0) scaleX(1)} 24%{transform:translate(40cqw,-1cqw) scaleX(1)}
  32%{transform:translate(47cqw,9cqw) scaleX(1)} 33%{transform:translate(47cqw,9cqw) scaleX(-1)}
  45%{transform:translate(38cqw,18cqw) scaleX(-1)} 46%{transform:translate(38cqw,18cqw) scaleX(1)}
  52%{transform:translate(45cqw,24cqw) scaleX(1)} 53%{transform:translate(45cqw,24cqw) scaleX(-1)}
  80%{transform:translate(2cqw,20cqw) scaleX(-1)} 92%{transform:translate(-2cqw,4cqw) scaleX(-1)}
  93%{transform:translate(-2cqw,4cqw) scaleX(1)} 100%{transform:translate(0,0) scaleX(1)} }

/* the cats: they bound around the whole place for no reason at all; a click and they jump */
.an.cat { z-index:3 }
.an.cat.c1 { left:17.5%; bottom:65.5%; width:6.5cqw }   /* the two cats sit on the lawn at the foot of the banner's poles, at the bottom of the fence (Carson: up on the rail they crowded the top) */
.an.cat.c3 { left:60.5%; bottom:65.5%; width:6.5cqw }
.an.cat.c2 { left:70%; bottom:72%; width:4.5cqw }     /* the cat tree's lower platform */
.an.cat .sp { animation:catbob 1.6s ease-in-out infinite alternate } .an.cat.c3 .sp { animation-delay:.8s }
@keyframes catbob { from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(-6%) rotate(2deg)} }
.an.cat.hit .sp { animation:catjump .7s cubic-bezier(.3,1.4,.5,1) 1 }
@keyframes hop { from{transform:translateY(0) scale(1.04,.96)} to{transform:translateY(-22%) scale(.97,1.05)} }
@keyframes catjump { 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 catrun { 0%{transform:translateX(0) scaleX(1)} 40%{transform:translateX(24cqw) scaleX(1)} 45%{transform:translateX(24cqw) scaleX(-1)} 90%{transform:translateX(0) scaleX(-1)} 100%{transform:translateX(0) scaleX(1)} }
@keyframes catrun2 { 0%{transform:translateX(0) scaleX(-1)} 40%{transform:translateX(-4cqw) scaleX(-1)} 50%{transform:translateX(-4cqw) scaleX(1)} 90%{transform:translateX(0) scaleX(1)} 100%{transform:translateX(0) scaleX(-1)} }
@keyframes catrun3 { 0%{transform:translateX(0) scaleX(1)} 40%{transform:translateX(8cqw) scaleX(1)} 48%{transform:translateX(8cqw) scaleX(-1)} 92%{transform:translateX(0) scaleX(-1)} 100%{transform:translateX(0) scaleX(1)} }

/* the molehill (Mole Picnic; Carson 2026-10-16: "just have him like occasionally show up in 3 different spots and look around"):
   the mole is underground most of the time. The page script moves him to one of three holes on the lawn (--mx/--my: by the lantern,
   by the stepping stones, above the hippo pond) and adds .out: the hole opens, he comes up, looks one way, then the other, drops back
   and the hole closes (4.2 s). He only takes clicks while he is up; a click then and he waves. The basket stays by the lantern.
   The hole is the bottom edge of .sp, which clips: he rides up and down inside it on .up, the ellipse under it is the hole's mouth */
.an.mole { left:var(--mx,69.5%); bottom:var(--my,46%); width:7cqw; z-index:2; pointer-events:none }
.an.mole.out { pointer-events:auto }
.an.mole .sp { overflow:hidden }
.an.mole .up { display:block; position:relative; transform:translateY(102%) }
.an.mole .look { display:block; position:relative; transform-origin:50% 100% }
.an.mole .hole { position:absolute; left:6%; right:6%; bottom:-8%; height:17%; border-radius:50%; background:#4a2c1c; border:2px solid var(--ink); box-shadow:inset 0 3px 0 rgba(0,0,0,.3); opacity:0; transform:scale(.2) }
.an.mole.out .hole { animation:holeopen 4.2s ease-in-out 1 both }
.an.mole.out .up { animation:moleout 4.2s ease-in-out 1 both }
.an.mole.out .look { animation:molelook 4.2s ease-in-out 1 both }
.an.mole.hit .i0 { opacity:0 } .an.mole.hit .i1 { opacity:1 }
.basket { position:absolute; left:75.5%; bottom:45.3%; width:4.1cqw; z-index:2; pointer-events:none }
.basket img { width:100%; height:auto; display:block; filter:drop-shadow(0 6px 8px rgba(47,42,58,.22)) }
@keyframes holeopen { 0%{opacity:0;transform:scale(.2)} 8%,92%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.2)} }
@keyframes moleout { 0%,8%{transform:translateY(102%)} 20%{transform:translateY(30%)} 24%{transform:translateY(34%)} 76%{transform:translateY(32%)} 88%,100%{transform:translateY(102%)} }
@keyframes molelook { 0%,30%{transform:scaleX(1) rotate(0)} 34%,46%{transform:scaleX(1) rotate(-7deg)} 50%,52%{transform:scaleX(-1) rotate(0)} 56%,68%{transform:scaleX(-1) rotate(-7deg)} 72%,100%{transform:scaleX(1) rotate(0)} }
/* the otters (Otter Buddies; Carson 2026-10-16: "add an extra otter to the left, so there's 2 and they're holding hands floating
   around"): two float on their backs side by side, the left one drawn mirrored so their paws meet in the middle, and drift round
   the lagoon's open water between the two floes (left 2.5 to 6.5%, bottom 33 to 35%, under the penguin's swim: never onto the penguin's floe or the lawn).
   They bob together, blink at their own times, a heart pops over them every 7 s; a click and they twirl, each its own way */
.an.otter { left:3.5%; bottom:33%; width:8.3cqw; z-index:1; animation:otterdrift 26s ease-in-out infinite }
.an.otter .pair { display:flex; position:relative; animation:soak 3.6s ease-in-out -1.2s infinite alternate }
.an.otter .sp { width:5.1cqw; flex:none }
.an.otter .o1 { margin-right:-1.9cqw; z-index:1; transform:rotate(9deg) } .an.otter .o2 { transform:rotate(-9deg) } .an.otter .o1 img { transform:scaleX(-1) }
.an.otter .i1 { animation:blink 4.6s steps(1) infinite } .an.otter .o2 .i1 { animation-delay:-2.3s }
.an.otter .heart { position:absolute; left:50%; top:-1.4cqw; width:2.1cqw; margin-left:-1.05cqw; opacity:0; animation:otterheart 7s ease-in-out infinite; pointer-events:none }
.an.otter .heart svg { display:block; width:100% }
.an.otter.hit .o1 { animation:spinback .9s ease-in-out 1 } .an.otter.hit .o2 { animation:spin .9s ease-in-out 1 }
.an.otter.hit .i0, .an.otter.hit .i1 { opacity:0; animation:none } .an.otter.hit .i2 { opacity:1 }
@keyframes spinback { to{transform:rotate(-360deg)} }
@keyframes otterdrift { 0%,100%{transform:translate(0,0) rotate(0)} 25%{transform:translate(3cqw,-.6cqw) rotate(3deg)} 50%{transform:translate(1.8cqw,-1.3cqw) rotate(-2deg)} 75%{transform:translate(-1cqw,-.8cqw) rotate(-4deg)} }
@keyframes otterheart { 0%,62%{opacity:0;transform:translateY(0) scale(.3)} 68%{opacity:1;transform:translateY(-10%) scale(1.15)} 74%{transform:translateY(-25%) scale(1)} 88%{opacity:1;transform:translateY(-70%) scale(1)} 96%,100%{opacity:0;transform:translateY(-90%) scale(.9)} }
@keyframes blink { 0%,100%{opacity:0} 93%{opacity:1} }
.stagewrap { position:relative }
/* phones: a quiet caption under the painting says it pans sideways; it fades once it has been dragged */
.swipe { display:none }
@media (max-width:900px) {
  .swipe { display:flex; align-items:center; justify-content:center; gap:8px; margin:20px 0 -14px; pointer-events:none;
    color:var(--muted); font-size:clamp(10px,3.2vw,12px); font-weight:700; line-height:1.3; letter-spacing:.02em; text-align:center; text-wrap:balance; transition:opacity .4s }
  .swipe i { font-style:normal; display:inline-block; animation:nudge 1.2s ease-in-out infinite alternate } .swipe i:last-child { animation-direction:alternate-reverse } .swipe .sep { opacity:.6 }
  .swipe-done .swipe { opacity:0 }
}
@keyframes nudge { from{transform:translateX(-3px)} to{transform:translateX(3px)} }
@media (prefers-reduced-motion: reduce) { .an.mole { pointer-events:auto } .an.mole .up { transform:translateY(32%) } .an.mole .hole { opacity:1; transform:none } .steam i { opacity:.5 } .stage *, .stage *::before, .swipe i { animation:none !important } .an.seal { opacity:1; pointer-events:auto } }
/* the perks: the promise in one row under the painting */
.perks { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; margin:28px 0 0; padding:0; list-style:none }
.perks li { display:inline-flex; align-items:center; gap:7px; background:#fff; border:2.5px solid var(--ink); border-radius:999px; padding:7px 15px; font-size:14px; font-weight:800; box-shadow:0 4px 0 var(--line); white-space:nowrap }
.perks li.hot { background:var(--red); color:#fff; box-shadow:0 4px 0 var(--red-deep); text-shadow:0 1px 0 rgba(0,0,0,.15) } .perks svg { width:18px; height:18px; flex:none }
@media (max-width:900px) { .perks { margin-top:30px; gap:7px 8px } .perks li { font-size:13px; padding:6px 12px } }

/* sections */
section { padding:70px 0 }
.kicker { color:var(--red); font-weight:900; font-size:13px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 8px }
h2 { font-size:clamp(28px,4vw,42px); line-height:1.08; letter-spacing:-.025em; margin:0 0 12px; font-weight:900 }
.sub { color:var(--muted); font-size:18px; max-width:62ch; margin:0 }
.center { text-align:center } .center .sub { margin:0 auto }

/* the games */
.games { display:grid; gap:34px; margin:40px 0 0 }
.game { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:center; background:var(--gb); border:2.5px solid var(--ink); border-radius:32px; padding:34px 36px; box-shadow:0 12px 0 var(--line), 0 24px 40px rgba(47,42,58,.10); position:relative; overflow:hidden; scroll-margin-top:24px }
.game.flip .words { order:2 } .game.flip .shots { order:1 }
.game .kanji { position:absolute; top:18px; right:26px; font-size:44px; font-weight:800; color:var(--g); opacity:.35; letter-spacing:.1em; line-height:1 }
.game.flip .kanji { right:auto; left:26px }
.game .logo { width:min(300px,100%); margin:0 0 14px -4px }
/* difficulty, out of five, under the logo (the cards run easiest first): five outlined stars, the first --n of them gold */
.diff { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; line-height:1 }
.diff .stars { position:relative; flex:none; width:120px; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.7 5.6 6.1.8-4.5 4.3 1.1 6.1L12 16.9l-5.4 2.9 1.1-6.1-4.5-4.3 6.1-.8z' fill='%23fff' stroke='%232f2a3a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat-x }
.diff .stars::after { content:""; position:absolute; left:0; top:0; height:100%; width:calc(var(--n) * 24px); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.7 5.6 6.1.8-4.5 4.3 1.1 6.1L12 16.9l-5.4 2.9 1.1-6.1-4.5-4.3 6.1-.8z' fill='%23f5c542' stroke='%232f2a3a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat-x }
/* the game's name is a text heading (its logo inside, the name for search engines in .vh) linking to the game's own page; the hook under it keeps the old h3 look */
.game .gname { margin:0; line-height:0; font-size:inherit }
.game .gname a { display:block; border-radius:18px } .game .gname a:focus-visible { outline:3px solid var(--red); outline-offset:4px }
.game .gname .logo { transition:transform .15s } .game .gname a:hover .logo { transform:rotate(-1.5deg) scale(1.02) }
.game .hook { font-size:clamp(24px,3vw,34px); line-height:1.08; letter-spacing:-.02em; margin:0 0 12px; font-weight:900; color:var(--ink); max-width:none }
.game p { color:var(--muted); margin:0 0 22px; max-width:50ch } .game p b { color:var(--ink) }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0; list-style:none }
.chips li { background:#fff; border:2px solid var(--ink); border-radius:999px; padding:5px 12px; font-size:13px; font-weight:800; box-shadow:0 3px 0 var(--line) }
.chips li.g { background:var(--g); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.15) }
.stores { display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.store { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; text-decoration:none; font-weight:800; padding:11px 16px 11px 13px; border-radius:16px; font-size:14px; line-height:1.15; border:2.5px solid var(--ink); box-shadow:0 5px 0 #171422; transition:transform .12s }
.store:hover { transform:translateY(-2px) } .store.soon { cursor:default; opacity:.8 } .store.soon:hover { transform:none }
.store small { display:block; font-size:11px; font-weight:600; opacity:.8 } .store svg { width:24px; height:24px; flex:none }
.more { font-size:14px; font-weight:800; margin-left:4px }
.game .more { display:inline-block; margin:16px 0 0 2px; font-size:15px; font-weight:900; color:var(--gd); text-decoration:none } .game .more:hover { text-decoration:underline }
.shots { position:relative; display:flex; gap:14px; align-items:flex-end; justify-content:center; min-height:420px }
.phone { width:31%; border:2.5px solid var(--ink); border-radius:26px; box-shadow:0 14px 26px rgba(47,42,58,.22); background:#fff; transition:transform .25s; aspect-ratio:600/1304; object-fit:cover }
.phone:hover { transform:translateY(-8px) } .phone.mid { width:36%; z-index:2; margin-bottom:18px } .phone.tilt-l { transform:rotate(-4deg) } .phone.tilt-r { transform:rotate(4deg) }
.phone.tilt-l:hover { transform:rotate(-4deg) translateY(-8px) } .phone.tilt-r:hover { transform:rotate(4deg) translateY(-8px) }
.art { width:31%; aspect-ratio:4/5; object-fit:cover; border:2.5px solid var(--ink); border-radius:22px; box-shadow:0 14px 26px rgba(47,42,58,.22); background:#fff; margin-bottom:40px; transition:transform .25s }
.art.tilt-l { transform:rotate(-4deg) } .art.tilt-r { transform:rotate(4deg) }
.shots .an { position:absolute; width:130px; filter:drop-shadow(0 10px 12px rgba(47,42,58,.25)); z-index:3; pointer-events:none }
.shots .an.big { width:136px } .shots .an.small { width:117px }
.shots .an.bl { left:-6px; bottom:-8px; transform:rotate(-6deg) } .shots .an.br { right:-6px; bottom:-8px; transform:rotate(6deg) }
.game .support { font-size:14px; font-weight:800; margin-top:14px; display:inline-block }

/* the formula */
.trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:36px 0 0 } .trio.four { grid-template-columns:repeat(4,minmax(0,1fr)) }
.tile { background:var(--card); border:2.5px solid var(--ink); border-radius:26px; padding:24px 24px 26px; box-shadow:0 8px 0 var(--line) }
.tile .n { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--red); color:#fff; font-weight:900; border:2.5px solid var(--ink); box-shadow:0 3px 0 var(--red-deep); margin-bottom:14px; font-size:17px }
.tile b { display:block; font-size:19px; margin-bottom:6px; letter-spacing:-.01em; text-wrap:balance }   /* box titles are one short line (Carson); the detail goes in the text */ .tile p { margin:0; color:var(--muted); font-size:15px }
.tile .ic { width:54px; height:54px; margin:0 auto 12px; border-radius:50%; background:var(--well); border:2.5px solid var(--ink); display:grid; place-items:center } .tile .ic svg { width:28px; height:28px }
.tile.rooms { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr)); gap:18px; align-items:center }
.tile.rooms .room { background:var(--well); border:2px solid var(--ink); border-radius:18px; padding:14px 16px; box-shadow:0 3px 0 var(--line) } .tile.rooms .room b { font-size:16px } .tile.rooms .room p { font-size:14px }

/* price */
.wrap.narrow { max-width:760px }
.tiers { display:grid; gap:12px; margin:24px 0 0 }
.tier { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; background:var(--card); border:2.5px solid var(--ink); border-radius:20px; padding:16px 20px; box-shadow:0 6px 0 var(--line) }
.tier b { display:block; font-size:17px } .tier span { color:var(--muted); font-size:14px }
.tag { font-weight:900; font-size:18px; background:var(--well); border:2px solid var(--ink); border-radius:999px; padding:6px 14px; white-space:nowrap }
.tag.free { background:var(--leaf); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.15) }
.tag.usd { background:var(--coin); }
.tax { color:var(--muted); font-size:13px; line-height:1.6; margin:14px 0 0 }
.simple { color:var(--muted); font-size:15px; line-height:1.7; margin:22px 0 0 } .simple b { color:var(--ink) }
.side { display:grid; gap:18px }
.box { background:var(--card); border:2.5px solid var(--ink); border-radius:26px; padding:22px 24px; box-shadow:0 10px 24px rgba(47,42,58,.10) }
.box h3 { margin:0 0 10px; font-size:20px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px }
.box p { color:var(--muted); margin:0 0 10px; font-size:15px } .box p:last-child { margin:0 } .box p b { color:var(--ink) }
.hearts { display:flex; gap:5px } .hearts svg { width:26px; height:26px }
.coins { display:flex; gap:4px } .coins i { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ffe58a,var(--coin) 60%,var(--coin-deep)); border:2px solid var(--ink); display:inline-block }
.box ul { margin:0; padding-left:20px; color:var(--muted); font-size:15px } .box li { margin:4px 0 } .box li b { color:var(--ink) }

/* languages + promises */
.langs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; max-width:960px; margin:30px auto 0; padding:0; list-style:none }
.langs li { background:#fff; border:2.5px solid var(--ink); border-radius:16px; padding:12px 8px; font-weight:800; font-size:16px; text-align:center; box-shadow:0 5px 0 var(--line) } .langs li small { display:block; font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.promises { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:34px 0 0 }
.promise { background:var(--card); border:2.5px solid var(--ink); border-radius:22px; padding:18px 16px 20px; text-align:center; box-shadow:0 6px 0 var(--line) }
.promise .ic { width:54px; height:54px; margin:0 auto 10px; border-radius:50%; background:var(--well); border:2.5px solid var(--ink); display:grid; place-items:center } .promise .ic svg { width:28px; height:28px }
.promise b { display:block; font-size:16px; margin-bottom:4px } .promise p { margin:0; color:var(--muted); font-size:13px }

/* discord */
#discord { padding-top:10px }
.disc { position:relative; background:#eef0ff; border:2.5px solid var(--ink); border-radius:30px; padding:34px 28px 36px; box-shadow:0 10px 0 var(--line) }
.disc h2 { margin-top:4px } .disc .sub { max-width:520px; margin-left:auto; margin-right:auto; text-wrap:balance }
.disc .mascot { position:absolute; right:-18px; top:-46px; width:112px; transform:rotate(8deg); filter:drop-shadow(0 10px 12px rgba(47,42,58,.25)); pointer-events:none }
.join { display:inline-flex; align-items:center; gap:10px; margin-top:22px; background:#5865f2; color:#fff; text-decoration:none; font-weight:900; font-size:17px; border:2.5px solid var(--ink); border-radius:18px; padding:13px 24px; box-shadow:0 6px 0 #3c45c9; transition:transform .12s }
.join svg { width:26px; height:26px } .join:hover { transform:translateY(-2px) } .join:focus-visible { outline:3px solid var(--red); outline-offset:3px }
@media (max-width:640px) { .disc { padding:30px 18px 30px } .disc .mascot { width:84px; right:-6px; top:-40px } }

/* band + footer */
.band { margin:40px 0 0 }
.band .in { display:flex; flex-wrap:wrap; gap:18px 24px; align-items:center; justify-content:space-between; background:var(--gb,#fff3e0); border:2.5px solid var(--ink); border-radius:28px; padding:26px 30px; box-shadow:0 10px 0 var(--line) }
.band h3 { margin:0 0 4px; font-size:24px; font-weight:900; letter-spacing:-.01em; color:var(--ink) } .band p { margin:0; color:var(--muted); font-size:15px }
.band .pill { 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 }
.band .pill:hover { transform:translateY(-2px) } .band .pill:focus-visible { outline:3px solid var(--red); outline-offset:3px }
footer { color:var(--faint); font-size:14px; padding:56px 0 60px; display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between }
footer.wrap { padding-block:56px 64px; align-items:center }
footer.wrap > div { display:flex; flex-wrap:wrap; row-gap:8px; min-width:0 }   /* the links sit tag to tag, so without this a long language (fr, de) cannot wrap and the phone page scrolls sideways */
footer .made { display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--faint); font-weight:700 } footer .made img { width:24px; height:24px; border-radius:7px; border:1.5px solid var(--ink) }
.top:has(> .lang:only-child) { justify-content:flex-end }   /* .wrap's padding shorthand would zero it otherwise */
footer a { color:var(--muted); text-decoration:none; font-weight:800; margin-right:16px } footer a:hover { color:var(--ink) }

/* text pages (support, privacy, terms) */
.page { max-width:760px; margin:0 auto; padding:0 22px }
.page h1 { font-size:clamp(34px,7vw,56px); line-height:1.05; letter-spacing:-.025em; margin:36px 0 14px; font-weight:900 }
.page h2 { font-size:22px; margin:38px 0 8px }
.page p { margin:0 0 14px; color:var(--muted) } .page p.lead { font-size:20px; color:var(--ink) } .page p b { color:var(--ink) }
.page ul { color:var(--muted); padding-left:20px } .page li { margin:6px 0 } .page li b { color:var(--ink) }
.page .card { background:var(--card); border:2.5px solid var(--ink); border-radius:22px; padding:22px 24px; margin:18px 0; box-shadow:0 8px 20px rgba(47,42,58,.08) }
.page .card h2 { margin-top:0 } .page .card p:last-child { margin-bottom:0 }
.page .date { color:var(--faint); font-size:14px }
.page footer { display:block; border-top:2px solid var(--line); margin-top:56px; padding-top:20px }
/* the games a text page covers: a flat row of icon + name, muted, nothing to press (as pills with a border and a hard shadow they looked like buttons, Carson 2026-10-12) */
.page .gamelist-label { margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
.gamelist { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 22px; padding:0; list-style:none }
.gamelist li { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--muted); margin:0 }
.gamelist img { width:22px; height:22px; border-radius:7px; border:1.5px solid var(--ink) }
.page .card ul { margin:0; padding-left:22px } .page .card li { margin:7px 0 } .page .card li:last-child { margin-bottom:0 }

@media (max-width:900px) {
  /* phones: the painting is wider than the screen, so the stage pans sideways (it opens on the onsen); the stage is a little
     squarer than on desktop so five sixths of the painting shows at once, and every flag and the banner sit inside that */
  .title { margin-bottom:-12% }
  .stage { aspect-ratio:1.25; border-radius:22px; box-shadow:0 8px 0 var(--line); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .stage::-webkit-scrollbar { display:none }
  .world { position:relative; left:0; transform:none }
  .an .nm { font-size:11px }
  .game { grid-template-columns:minmax(0,1fr); padding:26px 22px; gap:22px } .game.flip .words { order:1 } .game.flip .shots { order:2 }
  /* phone cards: logo, words and badges centred; the kanji is a big faint watermark behind */
  .game { text-align:center }
  .game .logo { margin:0 auto 14px; width:min(260px,82%) }
  .game p { margin-left:auto; margin-right:auto } .game .diff { justify-content:center }
  .game .kanji { font-size:96px; top:10px; right:auto; left:50%; transform:translateX(-50%); opacity:.12; letter-spacing:.05em; white-space:nowrap; z-index:0; pointer-events:none } .game.flip .kanji { left:50%; right:auto }
  .game .words, .game .shots { position:relative; z-index:1 }
  .shots { min-height:0 } .shots .an { width:96px } .shots .an.big { width:99px } .shots .an.small { width:86px }
  .trio, .trio.four, .promises { grid-template-columns:minmax(0,1fr) }
  .langs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px } .tile.rooms { grid-template-columns:minmax(0,1fr) }
  .top nav a.x { display:none }
  section { padding:50px 0 }
}

/* ---- Animal Kingdom (2026-10-21): every game lives in ONE app, so the hub has ONE download block, #download.ak,
   right under the hero: the game icons in a row (each jumps to its card), the name, one line, the two badges.
   Badges are span.store.soon until the app's store pages are public, then a.store (README, Store badges). */
section.ak { padding:6px 0 54px; background:var(--bg2) }
.akcard { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"icons icons" "words stores"; gap:18px 28px; align-items:end; background:var(--card); border:2.5px solid var(--ink); border-radius:30px; padding:26px 32px 30px; box-shadow:0 10px 0 var(--line), 0 22px 36px rgba(47,42,58,.10) }
.akicons { grid-area:icons; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.akicons a { display:block; width:54px; height:54px; border-radius:16px; overflow:hidden; border:2.5px solid var(--ink); box-shadow:0 4px 0 var(--line); background:#fff; transition:transform .15s }
.akicons a:hover { transform:translateY(-3px) rotate(-3deg) } .akicons a:focus-visible { outline:3px solid var(--red); outline-offset:3px }
.akicons img { width:100%; height:100% }
.akwords { grid-area:words; min-width:0 } .akwords h2 { margin:0 0 6px } .akwords .sub { font-size:17px; max-width:46ch; text-wrap:pretty }
.akcard .stores { grid-area:stores; justify-content:flex-end }
html[lang="ja"] :is(.akwords .sub,#parents .note) { word-break:auto-phrase } html[lang="ko"] :is(.akwords .sub,#parents .note) { word-break:keep-all }
/* #parents: the one "no surprises" line under the tiles (the price in a sentence; #price has the rows) */
#parents .note { color:var(--muted); font-size:15px; line-height:1.6; max-width:60ch; margin:26px auto 0; text-wrap:pretty } #parents .note b { color:var(--ink) }
@media (max-width:900px) {
  section.ak { padding:4px 0 40px }
  .akcard { grid-template-columns:minmax(0,1fr); grid-template-areas:"icons" "words" "stores"; text-align:center; padding:22px 18px 24px; border-radius:24px; justify-items:center }
  .akicons { justify-content:center; gap:5px } .akicons a { width:36px; height:36px; border-radius:11px; border-width:2px; box-shadow:0 3px 0 var(--line) }
  .akwords .sub { margin:0 auto; font-size:16px }
  .akcard .stores { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:360px }
  .akcard .store { justify-content:center; text-align:left; padding:10px 8px; gap:8px; font-size:13px; white-space:nowrap } .akcard .store svg { width:20px; height:20px }
}
/* #before (2026-10-24): the old separate apps' players; the Discord card's look in the onsen's warm cream, two buttons */
#before { padding-top:8px }
.disc.back { background:#fff4dc }
.backbtns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; margin-top:22px } .backbtns .join { margin-top:0 }
.join.mail { background:#ff9a5c; box-shadow:0 6px 0 #e0703a; color:#2f2a3a }
html[lang="ja"] #before .sub { word-break:auto-phrase } html[lang="ko"] #before .sub { word-break:keep-all }