/* =========================================================================
   little machines .fun  —  ocarina 3ds launch page
   onsen haze + bubbles, and the whole page follows the season.
   same sticker-card bones as the landing page, lit by a hot-spring sky.
   ========================================================================= */

/* the season colours animate when the season changes */
@property --sky-top { syntax:"<color>"; inherits:true; initial-value:#bfe0f5; }
@property --sky-bot { syntax:"<color>"; inherits:true; initial-value:#eaf5fb; }
@property --accent  { syntax:"<color>"; inherits:true; initial-value:#3d6b92; }

:root{
  --paper:  #fffdf7;
  --ink:    #2e3048;
  --orange: #e3602c;
  --sky:    #71c6de;
  --mint:   #86be95;
  --pink:   #f0b8c4;

  /* default = winter; [data-season] below overrides */
  --sky-top:#bfe0f5; --sky-bot:#eaf5fb;
  --accent:#3d6b92;
  --tint:#e3f1fa;              /* bubble-card wash */
  --mist: rgba(255,255,255,.75);

  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --radius:20px;
  --line:4px solid var(--ink);

  --font-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --font-display:"Fredoka", "Zen Maru Gothic", ui-rounded, "Segoe UI", system-ui, "Hiragino Maru Gothic ProN", sans-serif;
  --font-mono:"Space Mono", "Zen Maru Gothic", ui-monospace, "SF Mono", Menlo, "Hiragino Maru Gothic ProN", monospace;
  --font-body:ui-rounded, "Segoe UI", system-ui, -apple-system, "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
}
html[data-season="spring"]{ --sky-top:#f7d3e2; --sky-bot:#e6f4f6; --accent:#c9487a; --tint:#fde8ef; }
html[data-season="summer"]{ --sky-top:#8fd6ea; --sky-bot:#e8f6d9; --accent:#1f8f6e; --tint:#e2f5e6; }
html[data-season="autumn"]{ --sky-top:#f4c58b; --sky-bot:#fcebd3; --accent:#b8481b; --tint:#fdebd2; }
html[data-season="winter"]{ --sky-top:#bfe0f5; --sky-bot:#eaf5fb; --accent:#3d6b92; --tint:#e3f1fa; }
html{ transition:--sky-top .9s ease, --sky-bot .9s ease, --accent .9s ease; }

*,*::before,*::after{ box-sizing:border-box; }

/* no one-word last lines (widows) anywhere */
/* body text wraps normally: text-wrap:pretty / balance made iPhone browsers break lines early and leave big gaps on the right */
h1,h2,h3{ text-wrap:balance; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--sky-bot);
  background-image:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 70%);
  background-attachment:fixed;
  line-height:1.5;
}

.visually-hidden{
  position:absolute!important; width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------ hot-spring haze */
.steam{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.steam i{
  position:absolute; bottom:-18vh; width:80vmax; height:60vmax; border-radius:50%;
  background:radial-gradient(closest-side, var(--mist), rgba(255,255,255,0));
  filter:blur(18px); opacity:.7;
  animation:drift 38s ease-in-out infinite alternate;
}
.steam i:nth-child(1){ left:-30vmax; }
.steam i:nth-child(2){ left:20vmax; bottom:-30vh; animation-duration:52s; animation-delay:-14s; opacity:.55; }
.steam i:nth-child(3){ right:-35vmax; animation-duration:44s; animation-delay:-26s; }
@keyframes drift{ from{ transform:translate3d(-6vmax,0,0) scale(1); } to{ transform:translate3d(8vmax,-6vh,0) scale(1.15); } }

#weather{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;      /* behind every card, heading and line of text */
}

/* ---------------------------------------------------------------- layout */
.wrap{
  position:relative; z-index:2;
  max-width:1080px;
  margin:0 auto;
  padding:clamp(1rem, 3vw, 2rem) clamp(1rem, 5vw, 2rem) 2.5rem;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(1.4rem, 4vw, 2.4rem);
}
.narrow{ width:100%; max-width:620px; margin-inline:auto; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem 1rem; flex-wrap:wrap;
}
.brandmark{
  font-family:var(--font-mono); font-weight:700; letter-spacing:.14em; text-transform:lowercase;
  font-size:clamp(.8rem, 2.6vw, 1rem); color:var(--ink); text-decoration:none;
}
.brandmark .tld{ color:var(--orange); }
.brandmark:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.brandmark:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; border-radius:4px; }

/* language switch: EN | 日本語 */
.lang{
  display:inline-flex; gap:.2rem; padding:.28rem;
  background:var(--paper); border:3px solid var(--ink); border-radius:999px; box-shadow:var(--shadow-sm);
}
.lang button{
  cursor:pointer; font-family:var(--font-mono); font-weight:700; font-size:.68rem; letter-spacing:.06em;
  color:var(--ink); background:transparent; border:0; border-radius:999px; padding:.3rem .6rem;
  transition:background .15s ease, color .15s ease;
}
.lang button[lang="ja"]{ font-family:var(--font-jp); font-size:.74rem; letter-spacing:.02em; }
.lang button:hover{ background:var(--tint); }
.lang button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
.lang button:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

/* things that only make sense in one language (the "other" manual's download card) */
html[lang="ja"] [data-only="en"], html:not([lang="ja"]) [data-only="ja"]{ display:none!important; }

/* sound pill + season switcher live together on the right */
.tools{ display:flex; align-items:center; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; }
.amb{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-family:var(--font-mono); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); background:var(--paper); border:3px solid var(--ink); border-radius:999px;
  padding:.42rem .7rem; box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .08s ease;
}
.amb:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.amb:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.amb .eq{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.amb .eq i{ width:3px; height:4px; border-radius:1px; background:var(--ink); opacity:.5; }
.amb.is-on .eq i{ background:var(--orange); opacity:1; }
.amb.is-armed .eq i{ background:var(--orange); opacity:.7; }
.amb.is-armed{ animation:amb-nudge 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion:no-preference){
  .amb.is-on .eq i{ animation:amb-bounce .9s ease-in-out infinite; }
  .amb.is-on .eq i:nth-child(2){ animation-delay:.15s; }
  .amb.is-on .eq i:nth-child(3){ animation-delay:.30s; }
  .amb.is-on .eq i:nth-child(4){ animation-delay:.45s; }
}
.amb.is-on .eq i{ height:10px; }
@keyframes amb-bounce{ 0%,100%{ height:4px } 50%{ height:14px } }
@keyframes amb-nudge{ 0%,92%,100%{ transform:none } 96%{ transform:translateY(-2px) rotate(-2deg) } }

/* season switcher */
.seasons{
  display:inline-flex; gap:.3rem; padding:.28rem;
  background:var(--paper); border:3px solid var(--ink); border-radius:999px; box-shadow:var(--shadow-sm);
}
.seasons button{
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer;
  font-family:var(--font-mono); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); background:transparent; border:0; border-radius:999px; padding:.3rem .55rem;
  transition:background .15s ease, color .15s ease;
}
.seasons .kanji{ font-family:var(--font-jp); font-size:1rem; line-height:1; }
.seasons button:hover{ background:var(--tint); }
.seasons button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
.seasons button:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
@media (max-width:460px){ .seasons .sname{ display:none; } .seasons button{ padding:.35rem .7rem; } }

/* ---------------------------------------------------------- card + heads */
.card{
  background:var(--paper);
  border:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.block{ padding:clamp(1rem, 4vw, 1.5rem); }
h2{
  margin:0 0 .9rem; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.2rem, 4.8vw, 1.6rem); line-height:1.1; color:var(--accent);
  display:flex; align-items:baseline; gap:.6rem;
}
.center-h{ justify-content:center; text-align:center; }
.num{
  font-family:var(--font-mono); font-size:.62em; font-weight:700; color:var(--paper);
  background:var(--ink); padding:.1rem .45rem; border-radius:8px; flex:none;
}
.note{ margin:0 0 .6rem; font-family:var(--font-mono); font-size:.8rem; line-height:1.55; }
.note.emu{ margin:.9rem 0 0; }   /* the emulator aside under the install steps */
code{ font-family:var(--font-mono); font-size:.9em; background:#fff; border:2px solid var(--ink); border-radius:6px; padding:0 .3em; white-space:nowrap; }

/* ----------------------------------------------------------- cover card */
.cover{ margin-block:0; overflow:hidden; transform:rotate(-.7deg); }
.cover-art{ position:relative; overflow:hidden; border-bottom:var(--line); }
.cover-art img{ display:block; width:100%; height:auto; }
.ribbon{
  position:absolute;
  top:clamp(20px, 6.2vw, 34px);
  right:clamp(-62px, -10.5vw, -46px);
  width:clamp(170px, 46vw, 250px);
  padding:.28rem 0; transform:rotate(40deg); text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:clamp(.78rem, 2.9vw, 1.08rem);
  letter-spacing:.08em; text-transform:uppercase; color:var(--paper);
  background:var(--orange); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  box-shadow:0 3px 0 rgba(46,48,72,.35); pointer-events:none;
}
.cover-cap{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem;
  padding:.8rem .75rem .5rem; text-transform:uppercase;
  background:repeating-linear-gradient(45deg,#fff 0 8px,#f3f6f8 8px 16px);
}
.cover-seen{ font-family:var(--font-mono); font-weight:700; font-size:clamp(.62rem, 2.2vw, .76rem); letter-spacing:.1em; opacity:.75; }
.cover-cap h1{ margin:.25rem 0 0; display:flex; flex-direction:column; align-items:center; }
.cover-title,.cover-hook{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.55rem, 6.4vw, 2.2rem);
  line-height:1.05; letter-spacing:.01em;
}
.cover-hook{ color:var(--orange); text-shadow:2px 2px 0 var(--paper), 3px 3px 0 var(--ink); }
.flavor{
  margin:0; padding:.7rem clamp(1rem,5vw,1.6rem) 1.15rem; text-align:center;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1rem, 3.8vw, 1.18rem); line-height:1.45;
  background:repeating-linear-gradient(45deg,#fff 0 8px,#f3f6f8 8px 16px);
}

/* --------------------------------------------------- the spinning cart */
.cart{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.cart-stage{
  position:relative; width:min(78vw, 400px); aspect-ratio:1;
  display:grid; place-items:center;
  cursor:grab; touch-action:pan-y; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
}
.cart-stage.is-held{ cursor:grabbing; }
.cart-stage:focus-visible{ outline:3px solid var(--ink); outline-offset:6px; border-radius:24px; }
/* misty glow behind it + a puddle of shadow on the "water" under it */
.cart-stage::before{
  content:""; position:absolute; inset:-6%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.55) 55%, rgba(255,255,255,0));
  pointer-events:none;
}
.cart-stage::after{
  content:""; position:absolute; left:20%; right:20%; bottom:2%; height:7%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(46,48,72,.28), rgba(46,48,72,0));
  pointer-events:none;
}
.cart-art{ position:relative; z-index:1; width:100%; height:100%; pointer-events:none; }
.cart-poster,.cart-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.cart-canvas{ visibility:hidden; }
.cart-stage.is-live .cart-canvas{ visibility:visible; }
.cart-stage.is-live .cart-poster{ visibility:hidden; }
@media (prefers-reduced-motion:no-preference){
  .cart-art{ animation:bob 6s ease-in-out infinite; }
  .cart-stage.is-held .cart-art,.cart-stage.is-paused .cart-art{ animation-play-state:paused; }
}
@keyframes bob{ 50%{ transform:translateY(-8px); } }
.cart-hint{
  margin:-.4rem 0 0; text-align:center; font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; opacity:.7;
}

.cta{
  display:flex; align-items:center; gap:1rem;
  text-decoration:none; color:var(--paper);
  background:var(--orange); border:var(--line); border-radius:999px; box-shadow:var(--shadow);
  padding:.8rem 1.6rem .8rem .9rem; max-width:100%;
  transition:transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.cta:hover{ background:#f0713c; transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.cta:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.cta:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; }
.cta-ico{
  flex:none; display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%;
  color:var(--ink); background:var(--paper); border:3px solid var(--ink);
}
.cta-text{ display:flex; flex-direction:column; min-width:0; }
.cta-main{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem, 5vw, 1.55rem); line-height:1.1; }
.cta-sub .nl{ white-space:nowrap; }
@media (max-width:560px){ .cta-sub .nl{ display:block; } }   /* phones: "old & new" on its own line */
.cta-sub{ margin-top:.15rem; font-family:var(--font-mono); font-weight:700; font-size:.66rem; letter-spacing:.03em; opacity:.92; }
@media (prefers-reduced-motion:no-preference){
  .cta-ico{ animation:nudge 2.4s ease-in-out infinite; }
}
@keyframes nudge{ 0%,70%,100%{ transform:none } 80%{ transform:translateY(4px) } 90%{ transform:translateY(-2px) } }

/* ------------------------------------------------ printable booklet spreads */
.print-dl{
  margin:1.1rem auto 0; max-width:440px; text-align:center;
}
.print-h{ margin:0 0 .15rem; font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.15; }
.print-sub-h{ margin:0 0 .7rem; font-family:var(--font-mono); font-size:.74rem; opacity:.75; }
.print-btns{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.print-btn{
  display:flex; flex-direction:column; align-items:center; min-width:8rem; padding:.5rem 1rem; text-decoration:none;
  color:var(--ink); background:var(--tint); border:3px solid var(--ink); border-radius:14px; box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.print-btn:hover{ background:var(--sky); transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.print-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.print-btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.print-size{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.1; }
.print-sub{ font-family:var(--font-mono); font-weight:700; font-size:.64rem; letter-spacing:.03em; opacity:.75; }

/* ------------------------------------------- as seen on midnight operations */
.seen{
  display:block; width:100%; max-width:440px; text-decoration:none; color:var(--ink);
  background:var(--paper); border:var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; transform:rotate(.9deg); margin-top:.4rem;
  transition:transform .1s ease, box-shadow .1s ease;
}
.seen:hover{ transform:rotate(.9deg) translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.seen:active{ transform:rotate(.9deg) translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.seen:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.seen-thumb{ position:relative; display:block; border-bottom:var(--line); background:#3a3a3c; }
.seen-thumb img{ display:block; width:100%; height:auto; }
.seen-play{
  position:absolute; left:50%; top:50%; width:3.4rem; height:3.4rem; margin:-1.7rem 0 0 -1.7rem;
  display:grid; place-items:center; padding-left:.2rem; font-size:1.3rem; line-height:1;
  color:var(--paper); background:var(--orange); border:4px solid var(--ink); border-radius:50%;
  box-shadow:3px 3px 0 var(--ink); transition:transform .1s ease;
}
.seen:hover .seen-play{ transform:scale(1.1); }
.seen-cap{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem;
  padding:.7rem .75rem .8rem;
  background:repeating-linear-gradient(45deg,#fff 0 8px,#f3f6f8 8px 16px);
}
.seen-title{ font-family:var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(.72rem, 2.8vw, .88rem); }
.seen-sub{ font-family:var(--font-mono); font-weight:700; font-size:.66rem; color:var(--accent); }

/* ------------------------------------------------------------ install */
.steps{ margin:0; padding:0; list-style:none; counter-reset:s; font-family:var(--font-mono); font-size:.84rem; line-height:1.5; }
.steps li{ counter-increment:s; position:relative; padding:.4rem 0 .4rem 2.3rem; }
.steps li::before{
  content:counter(s); position:absolute; left:0; top:.35rem; width:1.55rem; height:1.55rem;
  display:grid; place-items:center; font-weight:700; font-size:.75rem; color:var(--paper);
  background:var(--orange); border:2px solid var(--ink); border-radius:50%;
}

/* -------------------------------------------------------- manual viewer */
.manual{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.manual-head{ text-align:left; }

.viewer{
  /* one page's width; the book is square pages, so height = width */
  --pw: calc(min(100vw - 3rem, 1040px, (100vh - 190px) * 2) / 2);
  --pw: calc(min(100vw - 3rem, 1040px, (100svh - 190px) * 2) / 2);
  --turn:900ms; --ease:cubic-bezier(.2,.78,.28,1); --open:620ms;
  width:calc(var(--pw) * 2);
  display:flex; justify-content:center;
}
.frame{
  position:relative;
  width:calc(var(--pw) * 2);
  height:var(--pw);
  overflow:hidden;
  border:var(--line); border-radius:16px;
  box-shadow:var(--shadow), 0 24px 40px rgba(46,48,72,.18);
  background:var(--paper);
  transition:width var(--open) var(--ease);
}
.frame.solo,.frame.single{ width:var(--pw); }
.frame:focus-visible{ outline:4px solid var(--sky); outline-offset:4px; }

.book{
  position:absolute; top:0; left:0;
  width:calc(var(--pw) * 2); height:100%;
  perspective:2600px; perspective-origin:50% 40%;
  touch-action:pan-y pinch-zoom;       /* let the page scroll past the book on phones */
  user-select:none; -webkit-user-select:none;
  background:linear-gradient(90deg,#d9e6ee 0%,#f4f8fa 4%,#f4f8fa 49.3%,#b9ccd8 49.7%,#b9ccd8 50.3%,#f4f8fa 50.7%,#f4f8fa 96%,#d9e6ee 100%);
  transition:left var(--open) var(--ease), transform var(--turn) var(--ease);
}
.frame.solo.at-start .book{ left:calc(var(--pw) * -1); }
.frame.solo.at-end   .book{ left:0; }

.leaf{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-style:preserve-3d; transform-origin:left center;
  transition:transform var(--turn) var(--ease); will-change:transform;
}
.leaf.is-flipped{ transform:rotateY(-180deg); }
.face{
  position:absolute; inset:0;
  background:#fff center / 100% 100% no-repeat;
  backface-visibility:hidden; overflow:hidden;
}
.face--front{ box-shadow:inset 13px 0 26px -16px rgba(46,48,72,.4), inset -1px 0 0 rgba(255,255,255,.5); }
.face--back{ transform:rotateY(180deg); box-shadow:inset -13px 0 26px -16px rgba(46,48,72,.4), inset 1px 0 0 rgba(255,255,255,.5); }
.face--blank{ background:#dbe7ee; }
.leaf .shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(46,48,72,.26) 0%, rgba(46,48,72,0) 42%);
  opacity:0; transition:opacity calc(var(--turn) * .6) linear;
}
.leaf .shade--back{ transform:rotateY(180deg); background:linear-gradient(90deg, rgba(46,48,72,0) 58%, rgba(46,48,72,.26) 100%); }
.leaf.is-turning .shade{ opacity:1; }

.controls{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.6rem .75rem;
  background:var(--paper); border:3px solid var(--ink); border-radius:999px;
  padding:.4rem .6rem; box-shadow:var(--shadow-sm);
}
.rbtn{
  appearance:none; border:3px solid var(--ink); cursor:pointer;
  width:2.5rem; height:2.5rem; border-radius:50%;
  background:var(--orange); color:var(--paper);
  font-family:var(--font-display); font-weight:700; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0 0 .42rem;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
  touch-action:manipulation;
}
/* little cover thumbnail: jumps back to the cover once you've turned a page.
   its space is always reserved so the arrows never shift under your finger. */
.cover-jump{
  appearance:none; cursor:pointer; padding:0; flex:none; overflow:hidden;
  width:2.5rem; height:2.5rem; border:3px solid var(--ink); border-radius:9px; background:var(--paper);
  box-shadow:2px 2px 0 var(--ink); touch-action:manipulation;
  transition:transform .08s ease, box-shadow .08s ease, opacity .2s ease;
}
.cover-jump img{ display:block; width:100%; height:100%; object-fit:cover; }
.cover-jump:hover{ transform:translate(-1px,-1px) rotate(-3deg); box-shadow:3px 3px 0 var(--ink); }
.cover-jump:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.cover-jump:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.rbtn:hover{ background:#f0713c; }
.rbtn:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.rbtn:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.rbtn[disabled]{ opacity:.35; cursor:default; box-shadow:none; }
.chip{
  min-width:8.2rem; text-align:center; font-family:var(--font-mono); font-weight:700; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  background:#fff; border:2px solid var(--ink); border-radius:999px; padding:.42rem .8rem;
}
.hint{ margin:0; text-align:center; font-family:var(--font-mono); font-size:.74rem; }
.hint a{ display:inline-block; color:var(--ink); font-weight:700; text-decoration:none; border-bottom:2px solid var(--orange); }
.hint a:hover{ color:var(--orange); }
.hint a:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

/* phone, portrait: one big page, fills the width */
@media (orientation:portrait) and (max-width:900px){
  .viewer{
    --pw:min(100vw - 2rem, 100vh - 150px, 700px);
    --pw:min(100vw - 2rem, 100svh - 150px, 700px);
    width:var(--pw);
  }
  .frame{ border-radius:13px; }
}
@media (max-width:520px){ .chip{ min-width:5.6rem; } }

/* ---------------------------------------------------- japanese manual */
.jp-card{
  display:flex; align-items:center; gap:.9rem; text-decoration:none; color:var(--ink);
  background:var(--paper); border:var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(.85rem, 3.5vw, 1.1rem) clamp(1rem, 4vw, 1.3rem);
  transform:rotate(.7deg);
  transition:transform .1s ease, box-shadow .1s ease;
}
.jp-card:hover{ transform:rotate(.7deg) translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.jp-card:active{ transform:rotate(.7deg) translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.jp-card:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.flag{ flex:none; width:2.5rem; height:auto; }
.flag-en{
  display:grid; place-items:center; height:1.7rem; font-family:var(--font-mono); font-weight:700; font-size:.78rem;
  color:var(--paper); background:var(--ink); border:3px solid var(--ink); border-radius:6px;
}
.jp-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.jp-title span{ display:inline-block; }
.jp-title{ font-family:var(--font-jp); font-weight:700; font-size:clamp(1.05rem, 4.4vw, 1.3rem); line-height:1.25; }
.jp-sub{ margin-top:.1rem; font-family:var(--font-mono); font-size:.68rem; font-weight:700; color:var(--accent); }
.jp-sub span{ display:block; }                       /* "20 MB" sits on its own line */
.jp-go{
  flex:none; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--orange); color:var(--paper); border:3px solid var(--ink);
}

/* ------------------------------------------------------------ callouts */
.what{ display:flex; flex-direction:column; gap:1rem; }
.what h2{ margin:0; }
.what-lede{
  margin:0 auto; text-align:center; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.02rem, 3.8vw, 1.2rem); line-height:1.5;
}
.bubbles{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(.9rem, 3vw, 1.3rem);
  margin-top:.4rem;
}
.bub{
  position:relative;
  padding:1.1rem 1.2rem 1.2rem;
  background:var(--tint);
  border:var(--line);
  border-radius:34px 34px 34px 10px;
  box-shadow:var(--shadow-sm);
}
.bub:nth-child(even){ border-radius:34px 34px 10px 34px; }
/* glossy bubble highlight */
.bub::after{
  content:""; position:absolute; top:12px; right:18px; width:22px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.85); transform:rotate(-25deg); pointer-events:none;
}
.bub-wide{ grid-column:1 / -1; }
.bub-ico{
  display:grid; place-items:center; width:2.7rem; height:2.7rem; margin-bottom:.45rem;
  font-size:1.4rem; background:var(--paper); border:3px solid var(--ink); border-radius:50%;
}
.bub h3{
  margin:0 0 .3rem; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.15rem; line-height:1.1; color:var(--accent);
}
.bub p{ margin:0; font-family:var(--font-mono); font-size:.78rem; line-height:1.55; }
@media (prefers-reduced-motion:no-preference){
  .bub{ animation:float 7s ease-in-out infinite; }
  .bub:nth-child(2){ animation-delay:-1.2s; animation-duration:8s; }
  .bub:nth-child(3){ animation-delay:-2.4s; }
  .bub:nth-child(4){ animation-delay:-3.6s; animation-duration:9s; }
  .bub:nth-child(5){ animation-delay:-4.8s; animation-duration:7.5s; }
  .bub:nth-child(6){ animation-delay:-6s; }
}
@keyframes float{ 50%{ transform:translateY(-6px); } }
@media (max-width:640px){ .bubbles{ grid-template-columns:1fr; } }

/* -------------------------------------------------------- share + tag us */
.share{ text-align:center; }   /* free-floating on the sky: no panel */
.share h2{ margin-bottom:.6rem; }
.share .note{ margin-bottom:.9rem; }
.handles{ list-style:none; margin:0 auto; padding:0; width:100%; max-width:420px; display:flex; flex-direction:column; gap:.7rem; text-align:left; }
.handles a{
  display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink);
  background:#fff; border:3px solid var(--ink); border-radius:999px; box-shadow:var(--shadow-sm);
  padding:.6rem 1.1rem;
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.handles a:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.handles a:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.handles a:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }
.plat-name{
  flex:none; min-width:5.2rem; font-family:var(--font-mono); font-weight:700; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--paper); background:var(--ink);
  border-radius:999px; padding:.2rem .6rem; text-align:center;
}
.handle{ font-family:var(--font-display); font-weight:700; font-size:clamp(1rem, 4.2vw, 1.2rem); overflow-wrap:anywhere; }
.hashtag{
  margin:.9rem 0 0; text-align:center; font-family:var(--font-mono); font-weight:700; font-size:.9rem;
}
.hashtag span{
  display:inline-block; font-family:var(--font-display); font-size:clamp(1.2rem, 5vw, 1.5rem);
  color:var(--orange); text-shadow:2px 2px 0 var(--paper), 3px 3px 0 var(--ink);
}

/* -------------------------------------------------------------- signup */
.cta-line{
  margin:0; text-align:center; font-weight:700; font-family:var(--font-display);
  font-size:clamp(1.05rem, 3.8vw, 1.3rem);
}
.cta-line::after{ content:" ✦"; color:var(--orange); }
.signup{ padding:clamp(1rem, 4vw, 1.5rem); transform:rotate(.8deg); }
.signup form{ margin:0; }
.field-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
#email{
  flex:1 1 12rem; min-width:0; font:inherit; font-size:1.05rem; padding:.8rem .9rem;
  color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:12px;
  box-shadow:inset 2px 2px 0 rgba(46,48,72,.12);
}
#email::placeholder{ color:#8d93a8; }
#email:focus-visible{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(227,96,44,.35); }
.btn-submit{
  flex:0 0 auto; font-family:var(--font-display); font-weight:700; font-size:1.05rem; cursor:pointer;
  padding:.8rem 1.3rem; color:var(--paper); background:var(--orange);
  border:3px solid var(--ink); border-radius:12px; box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn-submit:hover{ background:#f0713c; }
.btn-submit:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn-submit:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.btn-submit[disabled]{ opacity:.6; cursor:progress; }
.beta-opt{
  display:flex; align-items:center; gap:.55rem; margin:.85rem 0 0;
  font-family:var(--font-mono); font-size:.8rem; line-height:1.3; cursor:pointer;
}
.beta-opt input{ flex:none; width:1.15rem; height:1.15rem; accent-color:var(--orange); cursor:pointer; }
.beta-opt input:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.beta-opt:has(:checked) span{ color:var(--orange); font-weight:700; }
.platforms{
  margin:.7rem 0 0; padding:.65rem .8rem .7rem; background:#fff;
  border:3px solid var(--ink); border-radius:12px; box-shadow:inset 2px 2px 0 rgba(46,48,72,.12);
  font-family:var(--font-mono); font-size:.8rem;
}
.platforms[hidden]{ display:none; }
.platforms legend{ padding:0 .35rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:var(--orange); }
.plat{ display:flex; align-items:center; gap:.55rem; padding:.2rem 0; cursor:pointer; }
.plat input{ flex:none; width:1.1rem; height:1.1rem; accent-color:var(--orange); cursor:pointer; }
.plat input:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.plat:has(:checked) span{ font-weight:700; }
.plat-note{ margin:.4rem 0 0; font-size:.7rem; opacity:.7; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin:.8rem 0 0; min-height:1.2em; font-family:var(--font-mono); font-size:.86rem; font-weight:700; }
.form-status.is-ok{ color:#2f8f4e; }
.form-status.is-err{ color:var(--orange); }
.fine-print{ margin:.55rem 0 0; font-family:var(--font-mono); font-size:.72rem; opacity:.7; }

/* -------------------------------------------------------------- footer */
.foot{
  margin-top:.5rem; text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.about{ padding:clamp(1rem, 4vw, 1.5rem); margin-bottom:.8rem; text-align:left; transform:rotate(-.6deg); }
.about h2{ justify-content:center; text-align:center; margin-bottom:.7rem; }
.about p{ margin:0 0 .7rem; font-family:var(--font-display); font-weight:500; font-size:clamp(.98rem, 3.6vw, 1.1rem); line-height:1.5; letter-spacing:0; }
.about .about-more{ text-align:center; }   /* "explore catbeats' music and vinyl at catbeats.life." sits centred above the button */
.hand-off{
  display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:.4rem;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; text-decoration:none; color:var(--ink);
  background:#fff152;                       /* catbeats.life yellow */
  border:3px solid var(--ink); border-radius:999px; box-shadow:var(--shadow-sm); padding:.65rem 1.2rem;
  transition:transform .08s ease, box-shadow .08s ease;
}
.hand-off:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.hand-off:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.hand-off:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }
.fine{ opacity:.75; max-width:52ch; line-height:1.6; }
.dedication{ font-style:italic; opacity:.65; }
.dedication span{ color:var(--orange); font-style:normal; }

/* -------------------------------------------------------- bigger displays */
@media (min-width:720px){
  .cover{ transform:rotate(-1deg); }
  .signup{ transform:rotate(1deg); }
}

/* ------------------------------------------------------- gentle motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .cover,.signup,.jp-card,.about,.seen{ transform:none; }
  .jp-card:hover,.jp-card:active,.seen:hover,.seen:active{ transform:none; }
  .steam{ display:none; }
}

/* ------------------------------------------------------------ 日本語 */
html[lang="ja"] body{ line-break:strict; }
html[lang="ja"] .note,
html[lang="ja"] .steps,
html[lang="ja"] .bub p,
html[lang="ja"] .hint,
html[lang="ja"] .cart-hint,
html[lang="ja"] .fine,
html[lang="ja"] .fine-print,
html[lang="ja"] .form-status{ letter-spacing:0; line-height:1.85; }
html[lang="ja"] .flavor,
html[lang="ja"] .what-lede,
html[lang="ja"] .about p{ line-height:1.8; letter-spacing:0; }
html[lang="ja"] .cover-hook,
html[lang="ja"] .cover-title{ letter-spacing:0; }
html[lang="ja"] .cover-hook{ font-size:clamp(1.35rem, 5.6vw, 1.9rem); }
html[lang="ja"] .cta-sub,
html[lang="ja"] .seen-sub,
html[lang="ja"] .jp-sub{ letter-spacing:0; }
html[lang="ja"] h2,
html[lang="ja"] .bub h3{ letter-spacing:.01em; }
html[lang="ja"] .cover-seen,
html[lang="ja"] .seen-title{ letter-spacing:.04em; }
html[lang="ja"] body{ font-feature-settings:"palt"; }          /* proportional kana: tighter, easier to read */
html[lang="ja"] .bub p,
html[lang="ja"] .note,
html[lang="ja"] .steps,
html[lang="ja"] .hint{ font-size:.9rem; }
html[lang="ja"] .plat-note,
html[lang="ja"] .fine-print,
html[lang="ja"] .beta-opt,
html[lang="ja"] .platforms{ font-size:.85rem; }
html[lang="ja"] .fine{ font-size:.78rem; }

/* ------------------------------------------------ phone top bar
   row 1: littlemachines.fun · language · sound   |   row 2: season picker, centered */
@media (max-width:600px){
  .topbar{ gap:.55rem .45rem; flex-wrap:wrap; align-items:center; justify-content:flex-start; }
  .tools{ display:contents; }                       /* let the pills join the top bar's own flex row */
  .brandmark{ order:0; margin-right:auto; font-size:.72rem; letter-spacing:.08em; }
  .lang{ order:1; padding:.2rem; border-width:2px; box-shadow:3px 3px 0 var(--ink); }
  .lang button{ padding:.24rem .5rem; font-size:.64rem; }
  .lang button[lang="ja"]{ font-size:.68rem; }
  .amb{ order:2; padding:.34rem .55rem; gap:.35rem; font-size:.62rem; border-width:2px; box-shadow:3px 3px 0 var(--ink); }
  .topbar::after{ content:""; order:3; flex:0 0 100%; height:0; }   /* line break */
  .seasons{ order:4; margin:.15rem auto 0; }
}
/* narrow phones: the sound pill keeps its equalizer icon and drops the word (still read out to screen readers) */
@media (max-width:380px){
  .amb .amb-label{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .amb{ padding:.42rem .6rem; }
}
@media (max-width:340px){ .brandmark{ font-size:.66rem; letter-spacing:.04em; } .lang button{ padding:.24rem .42rem; } }

/* download chevron: a rounded, medium-weight "v" (a > turned to point down) */
.chev{ display:block; width:1.9rem; height:1.9rem; transform:translateY(.7px); }   /* a bit bigger; dead centre is -0.3px, nudged 1px below that by eye */
.jp-go .chev{ width:1.75rem; height:1.75rem; }

/* ---------------------------------------------------- phones: even side gaps
   every module has a hard 6px shadow down and to the right, which used up 6px of the right-hand
   gap, so the right side looked tighter than the left. +6px of padding on the right gives the
   shadow its own room; and the download button now spans the full width like the other modules. */
@media (max-width:600px){
  .wrap{ padding-left:20px; padding-right:26px; }
  .cart .cta{ align-self:stretch; }
}