/* Skip Lunch: the game's own palette (LanelyPuzzle/App/Theme.swift). Warm, lacquered, a little cheeky. */
:root {
  color-scheme: light;

  /* Ink and paper */
  --ink: #2A1714;
  --ink-soft: rgba(42, 23, 20, 0.72);
  --ink-muted: rgba(42, 23, 20, 0.50);
  --washi: #F3E9D8;
  --washi-line: #E6D9C2;
  --rice: #FBF6EC;
  --rule: rgba(42, 23, 20, 0.12);

  /* Lacquer Box */
  --lacquer: #8E2A1F;
  --lacquer-deep: #5C1811;
  --lacquer-line: #9C3427;
  --gold: #D6B268;
  --tray: #241311;

  /* Food (same in every world) */
  --batter: #EDA93E;
  --tail: #E8553D;
  --salmon: #F48A63;
  --tamago: #F7C948;
  --nori: #1F2B24;
  --tako: #E2504A;
  --edamame: #6EA84E;
  --ume: #C7364B;

  --display: 'Dela Gothic One', ui-rounded, 'Nunito', sans-serif;
  --body: ui-rounded, 'Nunito', system-ui, sans-serif;

  /* Seigaiha wave tile, drawn the way the Lacquer Box's backdrop is. */
  --waves-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cdefs%3E%3Cg id='f'%3E%3Ccircle r='20' fill='%23F3E9D8' stroke='%23E6D9C2'/%3E%3Ccircle r='15' fill='none' stroke='%23E6D9C2'/%3E%3Ccircle r='10' fill='none' stroke='%23E6D9C2'/%3E%3Ccircle r='5' fill='none' stroke='%23E6D9C2'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' x='20' y='-10'/%3E%3Cuse href='%23f' x='0' y='0'/%3E%3Cuse href='%23f' x='40' y='0'/%3E%3Cuse href='%23f' x='20' y='10'/%3E%3Cuse href='%23f' x='0' y='20'/%3E%3Cuse href='%23f' x='40' y='20'/%3E%3Cuse href='%23f' x='20' y='30'/%3E%3C/svg%3E");
  --waves-lacquer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cdefs%3E%3Cg id='f'%3E%3Ccircle r='20' fill='%238E2A1F' stroke='%239C3427'/%3E%3Ccircle r='15' fill='none' stroke='%239C3427'/%3E%3Ccircle r='10' fill='none' stroke='%239C3427'/%3E%3Ccircle r='5' fill='none' stroke='%239C3427'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' x='20' y='-10'/%3E%3Cuse href='%23f' x='0' y='0'/%3E%3Cuse href='%23f' x='40' y='0'/%3E%3Cuse href='%23f' x='20' y='10'/%3E%3Cuse href='%23f' x='0' y='20'/%3E%3Cuse href='%23f' x='40' y='20'/%3E%3Cuse href='%23f' x='20' y='30'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--washi) var(--waves-paper);
  background-size: 56px 28px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--lacquer); text-underline-offset: 3px; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0;
}

h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lacquer);
}

.lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0;
}

/* Nav */
.top {
  position: relative;
  z-index: 2;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-weight: 800;
  font-size: 0.95rem;
}

.nav a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.nav a:hover { opacity: 1; }

.nav-links { display: flex; gap: 22px; }

/* Hero: the lacquer box */
.hero-band {
  background: var(--lacquer) var(--waves-lacquer);
  background-size: 56px 28px;
  color: var(--washi);
  border-bottom: 6px solid var(--lacquer-deep);
  box-shadow: inset 0 -2px 0 var(--gold);
  overflow: hidden;
}

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  padding: 24px 24px 0;
}

.hero-copy { padding-bottom: 72px; }

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.brand img {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30), 0 0 0 2px var(--gold);
}

.brand span {
  font-family: var(--display);
  font-size: 1.6rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-bottom: 20px;
}

.hero h1 em {
  font-style: normal;
  color: var(--batter);
  display: block;
}

.hero .lede {
  color: rgba(243, 233, 216, 0.86);
  margin-bottom: 30px;
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 16px;
  border: 0;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--ink);
  color: var(--rice);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }

.btn-store { background: var(--rice); color: var(--ink); }

.btn-plain {
  background: transparent;
  color: var(--washi);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 216, 0.45);
}
.btn-plain:active { box-shadow: inset 0 0 0 2px rgba(243, 233, 216, 0.45); }

.fineprint {
  margin: 18px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(243, 233, 216, 0.70);
}

.hero-phone {
  align-self: end;
  max-width: 340px;
  justify-self: center;
  margin-bottom: -200px;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}

/* Sections */
.band { padding: 96px 0; }
.band + .band { padding-top: 0; }
.band-first { padding-top: 96px; }

.section-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 48px;
}

.section-head .lede { text-align: center; }

.boxes-strip {
  width: 100%;
  margin: -24px 0 24px;
  /* The picture is cut out, so the boards cast their shadow on the page itself. */
  filter: drop-shadow(0 18px 18px rgba(42, 23, 20, 0.22)) drop-shadow(0 4px 4px rgba(42, 23, 20, 0.12));
}

/* How to play */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: var(--rice);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 1px 0 var(--rule), 0 10px 24px rgba(42, 23, 20, 0.06);
}

.card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card p { margin: 0; color: var(--ink-soft); }

.step-num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--lacquer);
  color: var(--lacquer);
  font-family: var(--display);
  font-size: 1rem;
  margin-bottom: 16px;
}

/* The cast: little pieces drawn in CSS, two eyes and one mouth like the game. */
.cast {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.cast .card { display: flex; flex-direction: column; gap: 6px; }

.piece {
  --c: var(--salmon);
  --f: var(--ink);
  width: 108px;
  height: 50px;
  border-radius: 25px;
  background: var(--c);
  position: relative;
  margin-bottom: 14px;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.10), 0 4px 0 rgba(42, 23, 20, 0.12);
}

.piece.long { width: 162px; }

.piece::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 26px;
  width: 22px;
  height: 6px;
  background:
    radial-gradient(circle at 3px 3px, var(--f) 2.6px, transparent 3px),
    radial-gradient(circle at 19px 3px, var(--f) 2.6px, transparent 3px);
}

.piece::after {
  content: '';
  position: absolute;
  top: 27px;
  right: 33px;
  width: 8px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: var(--f);
}

.piece.sleepy::before {
  height: 4px;
  background:
    linear-gradient(var(--f), var(--f)) 0 0 / 7px 2px no-repeat,
    linear-gradient(var(--f), var(--f)) 15px 0 / 7px 2px no-repeat;
}

.piece.flat::after { height: 2px; border-radius: 1px; width: 10px; }

.piece.ebi {
  --c: var(--batter);
  background:
    radial-gradient(circle at 30% 30%, #F8D07E 2px, transparent 2.5px) 0 0 / 14px 12px,
    var(--batter);
  margin-left: 18px;
}

.piece.ebi .tail {
  position: absolute;
  left: -18px;
  top: 12px;
  width: 26px;
  height: 26px;
  background: var(--tail);
  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0 100%, 30% 50%);
}

.piece.ebi .blush {
  position: absolute;
  top: 24px;
  right: 18px;
  width: 38px;
  height: 6px;
  background:
    radial-gradient(ellipse at center, rgba(232, 85, 61, 0.55) 60%, transparent 62%) 0 0 / 9px 6px no-repeat,
    radial-gradient(ellipse at center, rgba(232, 85, 61, 0.55) 60%, transparent 62%) 29px 0 / 9px 6px no-repeat;
}

.piece.sake {
  --c: var(--salmon);
  background:
    repeating-linear-gradient(100deg, transparent 0 18px, rgba(255, 213, 196, 0.9) 18px 21px),
    var(--salmon);
}

.piece.tama {
  --c: var(--tamago);
  background:
    linear-gradient(90deg, transparent 38px, var(--nori) 38px 50px, transparent 50px),
    var(--tamago);
}

.piece.gohan {
  --f: var(--rice);
  background:
    radial-gradient(circle at 18px 14px, var(--ume) 6px, transparent 6.5px),
    linear-gradient(90deg, var(--rice) 0 58px, var(--nori) 58px);
}
.piece.gohan::before { right: auto; left: 22px; --f: var(--ink); }
.piece.gohan::after { display: none; }

.piece.triplets {
  --f: var(--ink);
  background:
    radial-gradient(circle, var(--rice) 15px, transparent 15.5px) 0 0 / 54px 50px,
    var(--nori);
}
.piece.triplets::before {
  right: auto;
  left: 16px;
  width: 130px;
  background:
    radial-gradient(circle at 3px 3px, var(--f) 2.4px, transparent 2.8px) 0 0 / 54px 6px,
    radial-gradient(circle at 3px 3px, var(--f) 2.4px, transparent 2.8px) 13px 0 / 54px 6px;
}
.piece.triplets::after {
  right: auto;
  left: 20px;
  top: 26px;
  width: 116px;
  height: 6px;
  border-radius: 0;
  background: radial-gradient(circle at 3px 3px, var(--edamame) 3px, transparent 3.5px) 0 0 / 54px 6px;
}

.piece.tako {
  --c: var(--tako);
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(0, 0, 0, 0.14) 4px 6px) 0 0 / 30px 100% no-repeat,
    var(--tako);
}

.piece.peas {
  --f: #22361A;
  background:
    radial-gradient(circle, #A9D67C 18px, transparent 18.5px) 0 0 / 54px 50px,
    var(--edamame);
}
.piece.peas::before {
  right: auto;
  left: 18px;
  width: 128px;
  background:
    radial-gradient(circle at 3px 3px, var(--f) 2.4px, transparent 2.8px) 0 0 / 54px 6px,
    radial-gradient(circle at 3px 3px, var(--f) 2.4px, transparent 2.8px) 12px 0 / 54px 6px;
}
.piece.peas::after {
  right: auto;
  left: 24px;
  width: 116px;
  height: 4px;
  border-radius: 0;
  background: radial-gradient(ellipse at 3px 0, var(--f) 3px, transparent 3.5px) 0 0 / 54px 4px;
}

.cast .name { font-family: var(--display); font-size: 1.15rem; }
.cast .food {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cast p { margin: 4px 0 0; color: var(--ink-soft); }

/* The route: five stops, each a little board in its own materials */
.route {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.stop { padding: 18px; }

.stop-scene {
  --sky: var(--washi);
  --rim: var(--lacquer);
  --floor: var(--tray);
  height: 110px;
  border-radius: 14px;
  background: var(--sky);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.stop-board {
  width: 78%;
  height: 78%;
  border-radius: 14px;
  background: var(--floor);
  border: 9px solid var(--rim);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.stop-num {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lacquer);
}

.stop h3 { font-size: 1.05rem; margin: 4px 0 6px; }
.stop p { font-size: 0.92rem; }

.heat {
  margin-top: 36px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  color: var(--lacquer);
}

/* Screenshot roll */
.roll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px max(24px, calc((100vw - 1080px) / 2 + 24px)) 8px;
  scrollbar-width: none;
}

.roll::-webkit-scrollbar { display: none; }

.roll img {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: center;
}

/* The tray: dark like the board floor, food-bright text */
.tray {
  background: var(--tray);
  color: var(--washi);
  border-radius: 28px;
  border: 10px solid var(--lacquer);
  box-shadow: inset 0 0 0 2px var(--gold), 0 18px 40px rgba(42, 23, 20, 0.22);
  padding: 48px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.tray .eyebrow { color: var(--batter); }
.tray h2 { margin: 12px 0 14px; }
.tray .lede { color: rgba(243, 233, 216, 0.78); }

.pleasant {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}

.pleasant li {
  padding-left: 26px;
  position: relative;
  color: rgba(243, 233, 216, 0.88);
}

.pleasant li b { color: var(--washi); display: block; }

.pleasant li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--batter);
}

/* Help */
.help {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: start;
}

.faq details {
  background: var(--rice);
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 12px;
  box-shadow: 0 1px 0 var(--rule);
}

.faq summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-family: var(--display);
  color: var(--lacquer);
}

.faq details[open] summary::after { content: '–'; }

.faq details p { margin: 10px 0 0; color: var(--ink-soft); }

.form-card h3 { font-size: 1.3rem; margin-bottom: 6px; }
.form-card > p { margin: 0 0 18px; color: var(--ink-soft); }

.form-card label {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  margin: 12px 0 6px;
}

.form-card input,
.form-card textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid var(--washi-line);
  background: #FFFFFF;
  color: var(--ink);
}

.form-card input:focus,
.form-card textarea:focus { outline: none; border-color: var(--lacquer); }

.form-card textarea { resize: vertical; }
.form-card .btn { margin-top: 18px; width: 100%; }

.sent {
  font-weight: 800;
  color: var(--lacquer);
  padding: 12px 0;
}

/* Privacy page */
.policy-wrap { padding: 32px 0 96px; }

.policy {
  max-width: 760px;
  margin: 0 auto;
  background: var(--rice);
  border-radius: 28px;
  padding: 56px clamp(24px, 6vw, 64px);
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px rgba(42, 23, 20, 0.08);
  position: relative;
  overflow: hidden;
}

.policy::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: var(--lacquer);
  box-shadow: 0 2px 0 var(--gold);
}

.policy h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 12px 0 10px; }

.policy .dated {
  color: var(--ink-muted);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 28px;
}

.policy h2 {
  font-size: 1.25rem;
  margin: 36px 0 10px;
}

.policy p, .policy li { color: var(--ink-soft); }
.policy ul { padding-left: 20px; }
.policy li { margin-bottom: 8px; }

.short {
  background: var(--tray);
  color: var(--washi);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 8px;
}

.short b {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--batter);
}

.short p { color: rgba(243, 233, 216, 0.88); margin: 6px 0 0; }

.policy-nav-band {
  background: var(--lacquer) var(--waves-lacquer);
  background-size: 56px 28px;
  color: var(--washi);
  border-bottom: 6px solid var(--lacquer-deep);
  box-shadow: inset 0 -2px 0 var(--gold);
  padding-bottom: 40px;
}

.policy-nav-band .brand { margin: 8px 0 0; }

/* Footer */
footer {
  background: var(--tray);
  color: var(--washi);
  border-top: 6px solid var(--lacquer);
  padding: 40px 0;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin-bottom: 14px;
  font-weight: 800;
}

.footer-links a { color: var(--washi); text-decoration: none; opacity: 0.85; }
.footer-links a:hover { opacity: 1; }

.footer-copy { font-size: 0.85rem; color: rgba(243, 233, 216, 0.55); }

/* Narrow screens */
@media (max-width: 960px) {
  .route { grid-template-columns: repeat(3, 1fr); }
  .tray { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; gap: 0; padding-top: 8px; }
  .hero-copy { padding-bottom: 40px; }
  .hero-phone { max-width: 260px; margin-bottom: -180px; }
  .band { padding: 64px 0; }
  .band-first { padding-top: 64px; }
  .steps { grid-template-columns: 1fr; }
  .route { grid-template-columns: repeat(2, 1fr); }
  .tray { padding: 32px 24px; border-width: 8px; }
  .pleasant { grid-template-columns: 1fr; }
  .help { grid-template-columns: 1fr; }
  .roll img { width: 200px; }
  .nav-links { gap: 16px; }
}

@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .route { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}