:root {
  --paper: #f8f4ed;
  --ink: #22211f;
  --muted: #71695e;
  --orange: #ef6b2d;
  --green: #5d8a3f;
  --wood: #bd713b;
  --wood-dark: #75401f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.nav { height: 90px; display: flex; align-items: center; justify-content: space-between; }
.brand { font: 700 39px/1 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.brand span, h1 span { color: var(--orange); }
.nav nav { display: flex; gap: 52px; font-size: 15px; }
.nav nav a { transition: opacity .2s ease; }
.nav nav a:hover { opacity: .55; }

.hero { min-height: 715px; text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.eyebrow { margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; }
h1 { margin: 0; font: 500 clamp(52px, 6vw, 80px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.mobile-break { display: none; }

.bento-stage { width: min(440px, 76vw); aspect-ratio: 1; margin: 18px auto 4px; display: grid; place-items: center; }
.tray {
  position: relative;
  width: 90%; height: 90%;
  border-radius: 19%;
  background: linear-gradient(145deg, #d99859, #a95b2e);
  border: 22px solid #c98249;
  box-shadow: inset 0 0 0 5px rgba(255,219,162,.34), inset 0 0 28px rgba(91,42,11,.55), 0 20px 32px rgba(85,46,22,.19);
  display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 10px; padding: 14px;
}
.tray::before { content: ""; position: absolute; inset: -13px; border: 2px solid rgba(111,55,23,.33); border-radius: 16%; pointer-events: none; }
.cell { border-radius: 16%; background: linear-gradient(145deg, #d69a61, #b66d38); border: 3px solid #e5b47c; box-shadow: inset 0 3px 8px rgba(83,39,15,.22), 0 2px 2px rgba(78,38,16,.22); }
.food { position: absolute; width: 38%; height: 38%; object-fit: contain; z-index: 2; filter: drop-shadow(0 8px 7px rgba(65,32,14,.22)); will-change: transform; }
.salmon { left: 8%; top: 8%; --x0: 112%; --y0: 0%; animation: solve-a 7.2s cubic-bezier(.4,0,.2,1) infinite; }
.broccoli { right: 8%; top: 8%; --x0: 0%; --y0: 112%; animation: solve-b 7.2s cubic-bezier(.4,0,.2,1) infinite; }
.tamago { left: 8%; bottom: 8%; --x0: 0%; --y0: -112%; animation: solve-c 7.2s cubic-bezier(.4,0,.2,1) infinite; }
.tomato { right: 8%; bottom: 8%; --x0: -112%; --y0: 0%; animation: solve-d 7.2s cubic-bezier(.4,0,.2,1) infinite; }
.finish-glow { position: absolute; inset: 4%; border-radius: 15%; border: 2px solid rgba(255,241,191,0); z-index: 3; pointer-events: none; animation: finish 7.2s ease infinite; }

@keyframes solve-a { 0%,8% { transform: translate(var(--x0),var(--y0)); } 18%,100% { transform: translate(0,0); } }
@keyframes solve-b { 0%,20% { transform: translate(var(--x0),var(--y0)); } 30%,100% { transform: translate(0,0); } }
@keyframes solve-c { 0%,32% { transform: translate(var(--x0),var(--y0)); } 42%,100% { transform: translate(0,0); } }
@keyframes solve-d { 0%,44% { transform: translate(var(--x0),var(--y0)); } 54%,100% { transform: translate(0,0); } }
@keyframes finish { 0%,53% { border-color: rgba(255,241,191,0); box-shadow: none; } 60% { border-color: rgba(255,241,191,.9); box-shadow: 0 0 22px rgba(255,225,139,.65), inset 0 0 22px rgba(255,225,139,.28); } 72%,100% { border-color: rgba(255,241,191,0); box-shadow: none; } }
.tray.paused *, .tray.paused .food { animation-play-state: paused; }

.tagline { margin: 3px 0 14px; font: 24px/1.2 Georgia, "Times New Roman", serif; }
.stores { display: flex; gap: 16px; justify-content: center; }
.store-button { min-width: 171px; height: 55px; border-radius: 8px; background: #111; color: white; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.store-button span:last-child { display: flex; flex-direction: column; align-items: flex-start; font-size: 20px; line-height: 1.04; letter-spacing: -.03em; }
.store-button small { font-size: 9px; letter-spacing: 0; }
.apple-mark { font-size: 24px; }
.play-mark { color: #69d69c; font-size: 24px; }
.replay { margin-top: 10px; padding: 5px 10px; border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .72; }

.features { min-height: 120px; border-top: 1px solid #ddd3c4; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.features article { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 22px; font: 21px/1.2 Georgia, "Times New Roman", serif; }
.features article + article { border-left: 1px solid #ddd3c4; }
.feature-icon { width: 42px; height: 42px; color: var(--orange); flex: none; }
.grid-icon { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.grid-icon i { display: block; border-radius: 3px; background: #a65a26; }
.calendar-icon { border: 3px solid var(--green); border-radius: 6px; display: grid; place-items: center; font: 700 13px/1 sans-serif; color: var(--green); }
.leaf-icon { color: var(--orange); font: 52px/.7 Georgia, serif; transform: rotate(-22deg); }

.about-section { margin-top: 70px; padding: 95px 0; background: #eee6da; }
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: end; }
.about-section h2, .details h2 { margin: 0; font: 500 clamp(38px,5vw,66px)/1 Georgia, serif; letter-spacing: -.04em; }
.about-inner > p { max-width: 490px; margin: 0 0 7px; color: #5d574f; font-size: 18px; line-height: 1.65; }
.details { padding: 90px 0 28px; background: #253226; color: #f8f4ed; }
.details-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: end; }
.privacy-copy { max-width: 520px; color: #dbe0d4; font-size: 15px; line-height: 1.7; }
.privacy-copy p { margin: 0 0 18px; }
.privacy-copy .policy-date { margin-top: 28px; color: #9faa99; font-size: 12px; }
footer { margin-top: 90px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; color: #b9c0b3; font-size: 13px; }
footer div { display: flex; gap: 26px; }

@media (max-width: 720px) {
  .shell { width: min(100% - 30px, 560px); }
  .nav { height: 72px; }
  .brand { font-size: 31px; }
  .nav nav { gap: 18px; font-size: 13px; }
  .nav nav a:nth-child(2) { display: none; }
  .hero { min-height: 700px; padding-top: 15px; }
  .mobile-break { display: block; }
  .bento-stage { width: min(370px, 92vw); margin-top: 20px; }
  .tray { border-width: 17px; padding: 11px; gap: 8px; }
  .tagline { font-size: 20px; }
  .stores { gap: 8px; width: 100%; }
  .store-button { min-width: 0; flex: 1; height: 51px; }
  .store-button span:last-child { font-size: 16px; }
  .features { grid-template-columns: 1fr; padding: 18px 0; }
  .features article { justify-content: flex-start; padding: 16px 22px; }
  .features article + article { border-left: 0; border-top: 1px solid #ddd3c4; }
  .about-section { margin-top: 35px; padding: 65px 0; }
  .about-inner, .details-inner { grid-template-columns: 1fr; gap: 42px; }
  .details { padding-top: 65px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .food, .finish-glow { animation: none !important; }
  .replay { display: none; }
}

/* Real game artwork, a continuous legal sliding loop, and a little cupboard. */
.hero{min-height:740px}.bento-stage{width:min(470px,86vw);margin:25px auto 8px}
.slide-tray{width:94%;height:94%;position:relative;border:18px solid #ce945c;border-radius:17%;background:repeating-linear-gradient(3deg,#bd8957 0px,#bd8957 6px,#c38e5b 7px,#bd8957 9px);box-shadow:inset 0 0 0 5px #83522d,inset 0 6px 16px #71472870,0 7px 0 #88532c,0 24px 32px #573d2426}
.slide-grid,.sliding-foods{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px}
.slide-grid span{border:2px solid #ebc89d;border-radius:17%;background:#ce9c69;box-shadow:inset 0 2px 5px #68412124}
.slide-food{position:absolute;width:33.333%;height:33.333%;padding:7px;object-fit:contain;left:0;top:0;transform:translate(calc(var(--col)*100%),calc(var(--row)*100%));transition:transform 650ms cubic-bezier(.22,.7,.25,1);filter:drop-shadow(0 5px 3px #63422225);will-change:transform}
.solve-caption{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:8px 0 16px}.coming-soon{background:transparent;color:#706c63;border:1px solid #d5cdc0;box-shadow:none}.coming-soon .play-mark{color:#888f73}
.collection{padding:90px 0}.section-intro{max-width:660px;margin:0 auto 42px;text-align:center}.section-intro h2{font:500 clamp(36px,4.8vw,60px)/1.06 Georgia,serif;letter-spacing:-.04em;margin:14px 0 18px}.section-intro h2 span{color:var(--orange)}.section-intro>p:last-child{max-width:510px;margin-inline:auto;color:var(--muted);line-height:1.7;font-size:16px}.box-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 28px}.box-card{margin:0;text-align:center}.box-card img{display:block;width:100%;height:auto;max-width:275px;margin:0 auto;object-fit:contain;transition:transform .3s ease;filter:drop-shadow(0 15px 11px #41332012)}.box-card:hover img{transform:translateY(-7px) rotate(-2deg)}.box-card h3{font:500 25px Georgia,serif;margin:19px 0 8px}.box-card p{font-size:13px;color:var(--muted);margin:0}.food-section{padding:80px 0;background:#ecefdf}.food-line{display:flex;align-items:center;justify-content:center;gap:22px;max-width:970px;margin:auto}.food-line img{width:16%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 9px 6px #4a583019)}.food-line img:nth-child(3){width:24%}.how-to{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px;padding-top:35px;border-top:1px solid #cdd3bd}.how-to span{font-size:12px;letter-spacing:.12em;color:#748060}.how-to h3{font:500 26px Georgia,serif;margin:14px 0}.how-to p{font-size:14px;line-height:1.7;color:#5e6654;max-width:300px}.about-section{margin-top:0}.privacy-copy a{text-decoration:underline;text-underline-offset:3px}.details .eyebrow{color:#b9c5ac}a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
@media(max-width:720px){.hero{min-height:680px}.bento-stage{width:min(400px,93vw)}.slide-tray{border-width:14px}.slide-food{padding:5px}.collection{padding:65px 0}.box-shelf{grid-template-columns:repeat(2,1fr);gap:30px 15px}.box-card h3{font-size:22px}.box-card p{font-size:12px;line-height:1.5}.food-section{padding:60px 0}.food-line{gap:5px}.how-to{grid-template-columns:1fr;gap:22px;margin-top:35px}.how-to p{max-width:none}.nav nav{gap:16px}.nav nav a:nth-child(2){display:inline}.solve-caption{font-size:9px}.section-intro{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.slide-food,.box-card img{transition:none}.box-card:hover img{transform:none}}

.stores{align-items:flex-start;gap:20px;min-height:93px}.official-badge{display:block;padding-top:10px}.official-badge img{display:block;width:180px;height:60px;object-fit:contain}.android-badge{display:flex;flex-direction:column;align-items:center}.android-badge img{display:block;width:207px;height:80px;object-fit:contain}.android-badge>span{color:var(--muted);font-size:11px;line-height:1.3}.trademarks{font-size:10px;color:#b9c0b3;line-height:1.6;margin-top:22px}.replay{margin-top:0}@media(max-width:460px){.stores{gap:5px}.official-badge img{width:150px;height:50px}.official-badge{padding-top:8px}.android-badge img{width:173px;height:67px}}