/* 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): two penguins wobble on the ice shelf, one belly-slides now and then, a seal zips through the water */
.an.peng .sp { transform-origin:50% 100%; animation:waddle .5s ease-in-out infinite alternate }
.an.peng.p1 { left:1%; bottom:10%; width:7cqw } .an.peng.p2 { left:3%; bottom:48%; width:5cqw; animation-delay:.25s }
.an.peng.p2 .sp { animation-delay:.25s }
.an.peng.hit .sp, .an.peng.slide .sp { animation:slide 1.7s ease-in-out 1 }
.an.peng.hit .i0, .an.peng.slide .i0 { opacity:0 } .an.peng.hit .i1, .an.peng.slide .i1 { opacity:1 }
@keyframes waddle { from{transform:rotate(-6deg)} to{transform:rotate(6deg)} }
@keyframes slide { 0%{transform:translateX(0)} 40%{transform:translateX(9cqw) rotate(6deg)} 60%{transform:translateX(9cqw) rotate(6deg)} 100%{transform:translateX(0)} }
.an.seal { left:7%; bottom:22%; width:5.5cqw; opacity:0; pointer-events:none; z-index:1 }
.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 }
.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 }
.an.panda.hit .i0 { opacity:0 } .an.panda.hit .i1 { opacity:1 }
@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:26%; bottom:57%; width:4.8cqw; z-index:3; animation:skate 11s ease-in-out infinite }
.an.turtle img { animation:face 11s steps(1) infinite }   /* only the drawing turns round, so the flag always reads the right way */
.an.turtle .sp { animation:roll .3s ease-in-out infinite alternate }
.an.turtle.hit, .an.turtle.hit img { animation-play-state:paused } .an.turtle.hit .sp { animation:spin .7s ease-in-out 1 }
/* the little flags: five animals each carry one with a promise on it (no ads, offline, free to 50, ten languages, $1 once) */
.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:2px 10px 2px 7px; font-size:clamp(11px,1.3cqw,16px); line-height:1.25; 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.peng.p1 .flag { --fx:62%; --fy:82% }
.an.capy .flag { --fx:70%; --fy:78% }
.an.cat.c2 .flag { --fx:64%; --fy:52%; --fh:3cqw }
.an.hippo.h2 .flag { --fx:66%; --fy:74% }
.an.panda .flag { --fx:34%; --fy:86% }
/* the panda's flag is the one you can click: it opens the Discord */
.an .flag.discord b { pointer-events:auto; cursor:pointer } .an .flag.discord b:hover { filter:brightness(1.08) }
/* the hippo is at the right edge: his 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.h2 .flag b, .an.panda .flag b { left:auto; right:0; border-radius:10px 0 0 10px; padding:2px 7px 2px 10px; 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 */
@container (max-width:700px) { .an.panda .flag { --fx:62%; --fh:13.5cqw } .an.panda .flag b { left:2px; right:auto; border-radius:0 10px 10px 0; padding:2px 10px 2px 7px; transform-origin:0 50% } }
@keyframes skate { 0%{transform:translateX(0)} 47%{transform:translateX(20cqw)} 50%{transform:translateX(20cqw)} 97%{transform:translateX(0)} 100%{transform:translateX(0)} }
@keyframes face { 0%{transform:scaleX(1)} 48.5%{transform:scaleX(-1)} 98.5%{transform:scaleX(1)} }
@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 rabbit hops along the moss in the garden */
.an.rabbit { left:36%; bottom:55%; width:4cqw; z-index:3; animation:rabbitrun 7s ease-in-out infinite }
.an.rabbit .sp { animation:hop .42s cubic-bezier(.3,0,.2,1) infinite alternate }
.an.rabbit.hit .sp { animation:catjump .7s cubic-bezier(.3,1.4,.5,1) 1 }
@keyframes rabbitrun { 0%{transform:translateX(0) scaleX(1)} 40%{transform:translateX(7cqw) scaleX(1)} 50%{transform:translateX(7cqw) scaleX(-1)} 90%{transform:translateX(0) scaleX(-1)} 100%{transform:translateX(0) 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:85%; top:8%; width:4.8cqw; z-index:3 }
.an.monkey .sp { transform-origin:50% 0; animation:swing 2.2s ease-in-out infinite alternate }
.an.monkey.hit .sp { animation:swinghard .5s ease-in-out 3 alternate }
@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:65.5%; bottom:81%; width:4.5cqw }
.an.cat.c2 { left:70%; bottom:72%; width:4.5cqw }
.an.cat.c3 { left:50%; bottom:50%; width:5cqw; animation:catrun3 11s ease-in-out infinite }
.an.cat .sp { animation:hop .5s cubic-bezier(.3,0,.2,1) infinite alternate }
.an.cat.c1 .sp, .an.cat.c2 .sp { animation:catbob 1.6s ease-in-out infinite alternate }
@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)} }

.stagewrap { position:relative }
.swipe { display:none }
@media (max-width:900px) {
  .swipe { display:inline-flex; align-items:center; gap:8px; position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:6; pointer-events:none; white-space:nowrap;
    background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:6px 14px; font-size:12px; font-weight:900; box-shadow:0 3px 0 var(--line); 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-done .swipe { opacity:0 }
}
@keyframes nudge { from{transform:translateX(-3px)} to{transform:translateX(3px)} }
@media (prefers-reduced-motion: reduce) { .steam i { opacity:.5 } .stage *, .stage *::before { animation:none !important } .an.seal { opacity:1; pointer-events:auto } }

/* 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 }
.game h3 { font-size:clamp(24px,3vw,34px); line-height:1.08; letter-spacing:-.02em; margin:0 0 12px; font-weight:900 }
.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 }
.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 }
.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 } .tile p { margin:0; color:var(--muted); font-size:15px }
.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); }
.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 }
.gamelist { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 18px; padding:0; list-style:none }
.gamelist li { display:flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--ink); border-radius:999px; padding:4px 12px 4px 4px; font-size:13px; font-weight:800; box-shadow:0 3px 0 var(--line) }
.gamelist img { width:26px; height:26px; border-radius:8px; border:1.5px solid var(--ink) }

@media (max-width:900px) {
  /* phones: the painting is wider than the screen, so the stage pans sideways (it opens on the onsen) */
  .title { margin-bottom:-18% }
  .stage { aspect-ratio:1.1; 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 .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 }
  .game .stores { display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .game .store { justify-content:center; text-align:left; padding:10px 8px; gap:8px; font-size:13px; white-space:nowrap } .game .store svg { width:20px; height:20px }
  .shots { min-height:0 } .shots .an { width:96px } .shots .an.big { width:99px } .shots .an.small { width:86px }
  .trio, .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 }
}