/* Lettercup: the game's own palette and type (source/template.html in word-cafe). */
@font-face { font-family: "Alegreya"; src: url("/fonts/Alegreya-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/fonts/Alegreya-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("/fonts/PatrickHand-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #5a3d2b;
  --ink-soft: #7a5a44;
  --wood: #8a5f3e;
  --wood-dark: #4a3020;
  --edge: rgba(122, 84, 52, .5);
  --tile: #f6ead3;
  --tile-edge: #d8bd93;
  --accent: #d9874a;
  --accent-dark: #b4683a;
  --ok: #5f8c4a;
  --bad: #b8644a;
  --paper: #fbf4e6;
  --cream: #f3e6cf;
  --blue: #cfe3ef;
  --blue-edge: #8db2c9;
  --gold: #f3d68f;
  --gold-edge: #cfa652;
  --font-tile: "Alegreya", Georgia, serif;
  --font-ui: "Patrick Hand", "Comic Sans MS", system-ui, sans-serif;
  --radius: 28px;
  --shadow: 0 18px 40px rgba(60, 36, 20, .22), 0 2px 0 rgba(255, 255, 255, .6) inset;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.25rem/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dark); }
h1, h2, h3 { font-family: var(--font-tile); font-weight: 800; line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }

/* Buttons: the game's raised pill buttons */
.btn {
  --b: var(--tile);
  --e: var(--tile-edge);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .55em 1.4em;
  border: 2px solid var(--e);
  border-radius: 999px;
  background: var(--b);
  color: var(--ink);
  font: 400 1.3rem/1.1 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--e), 0 10px 18px rgba(60, 36, 20, .18);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 6px 0 var(--e), 0 14px 22px rgba(60, 36, 20, .2); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--e), 0 4px 10px rgba(60, 36, 20, .18); }
.btn-play { --b: var(--accent); --e: var(--accent-dark); color: #fff8ee; text-shadow: 0 1px 0 rgba(100, 50, 20, .35); }
.btn-soft { --b: #fffaf1; }
.btn-small { font-size: 1.1rem; padding: .4em 1.1em; box-shadow: 0 3px 0 var(--e); }
.btn-small.btn, .nav .btn { --b: var(--accent); --e: var(--accent-dark); color: #fff8ee; }

.testflight { padding: .55em 1.5em .55em 1.1em; font-size: 1.55rem; text-align: left; }
.tf-mark { width: 2.1em; height: 2.1em; flex: none; color: #fff8ee; filter: drop-shadow(0 1px 0 rgba(100, 50, 20, .35)); }
.tf-text { display: flex; flex-direction: column; line-height: 1.05; }
.tf-text small { font-size: .62em; opacity: .9; letter-spacing: .04em; text-transform: uppercase; }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 10px var(--gutter);
  padding-top: max(10px, env(safe-area-inset-top));
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.scrolled { background: rgba(251, 244, 230, .88); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 1px 0 var(--edge), 0 8px 24px rgba(60, 36, 20, .08); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 1.5rem/1 var(--font-tile); }
/* The glass icon carries its own squircle and rim; only a soft shadow is added. */
/* The app icon's orange outline is drawn into the image (icon-ring-*, tools/build_assets.py), so it stays even
   on every side at any screen scale; CSS only adds a soft shadow. */
.brand img { filter: drop-shadow(0 2px 3px rgba(60, 36, 20, .3)); }
.nav .brand { color: #fff8ee; text-shadow: 0 1px 8px rgba(40, 20, 10, .5); transition: color .3s; }
.nav.scrolled .brand { color: var(--ink); text-shadow: none; }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { color: #fff8ee; text-decoration: none; font-size: 1.2rem; text-shadow: 0 1px 8px rgba(40, 20, 10, .55); transition: color .3s; }
.nav.scrolled nav a { color: var(--ink); text-shadow: none; }
.nav nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (max-width: 860px) { .nav nav { display: none; } .nav .btn { margin-left: auto; } }

/* Hero */
.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: grid; place-items: center;
  padding: 96px var(--gutter) 120px;
  overflow: hidden;
  isolation: isolate;
  background: #3b2416;
}
.hero-art, .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art img { object-fit: cover; object-position: 38% 50%; opacity: 0; transition: opacity 1.6s ease; }
.hero-art img.on { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(40, 22, 12, 0) 30%, rgba(40, 22, 12, .45) 100%), linear-gradient(to bottom, rgba(40, 22, 12, .35), transparent 22%, transparent 70%, rgba(40, 22, 12, .5)); }
.hero-leaves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at 23% 14%, rgba(255, 210, 140, .55), transparent 18%), radial-gradient(circle at 85% 12%, rgba(255, 210, 140, .5), transparent 16%);
  animation: flicker 7s ease-in-out infinite; transition: opacity 1.6s; }
.hero:not([data-scene="0"]) .hero-glow { opacity: 0; animation: none; }
@keyframes flicker { 0%, 100% { opacity: .9; } 45% { opacity: 1; } 50% { opacity: .75; } 55% { opacity: 1; } }

.home-card {
  position: relative; z-index: 5;
  width: min(560px, 100%);
  padding: clamp(28px, 5vw, 44px) clamp(22px, 5vw, 48px) 30px;
  text-align: center;
  background: rgba(251, 244, 230, .95);
  border: 2px solid rgba(122, 84, 52, .35);
  border-radius: 36px;
  box-shadow: var(--shadow);
  animation: rise .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.home-icon { width: 92px; height: 92px; margin: 0 auto 10px; filter: drop-shadow(0 6px 10px rgba(60, 36, 20, .3)); }
.home-card h1 { font-size: clamp(3.4rem, 9vw, 5rem); margin: 0; color: var(--ink); }
.tagline { font-size: clamp(1.4rem, 3vw, 1.7rem); margin: 0 0 .7em; color: var(--ink-soft); }
.lede { font-size: 1.3rem; max-width: 30ch; margin: 0 auto 1.3em; }
.fineprint { margin: 1.1em 0 0; font-size: 1.05rem; color: var(--ink-soft); }

/* The companion on its stool, composited like the game (tools/build_assets.py perch()); the legs run off the bottom. */
.hero-pet {
  position: absolute; z-index: 4; left: clamp(0px, 3vw, 60px); bottom: 0;
  width: clamp(170px, 19vw, 290px); aspect-ratio: 558 / 956;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.perch { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transform: translateY(14px); }
.perch.on { opacity: 1; transform: none; }
.perch img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(30, 15, 5, .35)); }
.perch .pet-happy { opacity: 0; }
.hero-pet.is-happy .perch.on .pet-idle { opacity: 0; }
.hero-pet.is-happy .perch.on .pet-happy { opacity: 1; }
.hero-pet .bubble { left: 50%; top: 2%; }
@media (max-width: 720px) { .hero-pet { display: none; } }

.scene-picker { position: absolute; z-index: 5; right: var(--gutter); bottom: 26px; display: flex; gap: 8px; }
.scene-picker button {
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 1.05rem;
  color: #fff8ee; background: rgba(60, 36, 20, .4); border: 1.5px solid rgba(255, 240, 220, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .3s, color .3s;
}
.scene-picker button.on { background: rgba(251, 244, 230, .92); color: var(--ink); border-color: transparent; }
/* On phones the picker is a row of dots, so any number of places fits. */
@media (max-width: 720px) {
  .scene-picker { left: 50%; right: auto; translate: -50% 0; bottom: 84px; gap: 10px; }
  .scene-picker button { width: 12px; height: 12px; padding: 0; border-radius: 50%; }
  .scene-picker button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

.pet-idle, .pet-happy { transition: opacity .15s, transform .25s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50% 100%; }
.friend.is-happy .pet-idle { opacity: 0; }
.friend.is-happy .pet-happy { opacity: 1; transform: translateY(-6%); }

.bubble {
  position: absolute; z-index: 6; left: 58%; top: -6px;
  padding: .25em .8em; white-space: nowrap;
  font: 400 1.35rem/1.2 var(--font-ui); color: var(--ink);
  background: #fffaf1; border: 2px solid var(--tile-edge); border-radius: 18px;
  box-shadow: 0 6px 14px rgba(60, 36, 20, .2);
  opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.bubble::after { content: ""; position: absolute; left: 18px; bottom: -9px; width: 14px; height: 14px; background: #fffaf1; border: solid var(--tile-edge); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bubble.show { opacity: 1; transform: none; }

.scroll-cue { position: absolute; z-index: 5; bottom: 22px; left: 50%; translate: -50% 0; width: 46px; height: 46px; display: grid; place-items: center;
  color: #fff8ee; border-radius: 50%; background: rgba(60, 36, 20, .35); backdrop-filter: blur(4px); animation: bob 2.4s ease-in-out infinite; }
.scroll-cue svg { width: 26px; height: 26px; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* Sections */
.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.paper { background: var(--paper); }
.cream { background: var(--cream); }
.wood {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 140, .14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 180px),
    linear-gradient(#6b4630, #4f3322);
  color: var(--paper);
}
.eyebrow { font-size: 1.25rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: .4em; }
.eyebrow.light { color: #f1b37d; }
.light { color: var(--paper); }
.center { text-align: center; }
.intro { max-width: 46rem; font-size: 1.35rem; }
.intro.center { margin-inline: auto; }
.section h2.center + .intro { margin-top: .2em; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.copy p { font-size: 1.35rem; }
.ticks { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: 14px; }
.ticks li { display: flex; align-items: center; gap: 14px; font-size: 1.3rem; }
.ticks img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.ticks .tick-icon { filter: drop-shadow(0 1px 2px rgba(60, 36, 20, .25)); }

/* Demo board */
.demo {
  background: linear-gradient(#f8eedb, #f1e2c6);
  border: 2px solid rgba(122, 84, 52, .3);
  border-radius: 34px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow);
  max-width: 520px; width: 100%; justify-self: center;
}
.demo-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: .6em; }
.demo-title { font-size: 1.4rem; margin: 0; }
.show-me { font: inherit; font-size: 1.05rem; padding: 2px 12px; border-radius: 999px; cursor: pointer;
  color: var(--accent-dark); background: transparent; border: 1.5px dashed var(--accent); transition: background .2s; }
.show-me:hover { background: rgba(217, 135, 74, .12); }
.show-me:disabled { opacity: .5; cursor: default; }

/* Path arrows (BoardView.RedrawPath): an orange triangle with a paper outline on the edge between each pair of
   selected tiles, pointing to the next one. main.js places them. */
.board-wrap { position: relative; }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arrows polygon { fill: var(--accent); stroke: var(--paper); stroke-linejoin: round; paint-order: stroke; }
.arrows .pop { animation: arrow-in .18s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes arrow-in { from { opacity: 0; scale: .4; } }

/* The 8-directions diagram */
.directions { display: flex; align-items: center; gap: 22px; margin: 6px 0 4px; padding: 16px 18px; border-radius: 22px;
  background: #fffaf1; border: 2px solid rgba(122, 84, 52, .18); }
.directions figcaption { font-size: 1.2rem; line-height: 1.4; }
.directions figcaption b { display: block; font: 800 1.3rem/1.2 var(--font-tile); margin-bottom: 4px; }
.mini { position: relative; flex: none; width: 132px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini .tile { font-size: 1.35rem; border-radius: 10px; cursor: default; }
.mini .tile.on { transform: translateY(2px); }
@media (max-width: 480px) { .directions { flex-direction: column; text-align: center; } }
.wordbox {
  height: 56px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: #fffaf1; border: 2px solid var(--tile-edge); border-radius: 999px;
  font: 800 1.7rem/1 var(--font-tile); letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s, border-color .2s;
}
.wordbox.good { background: #e5f0dc; border-color: #9cbd85; }
.wordbox.bad { animation: shake .35s; background: #f7e1d8; border-color: #d39a83; }
.wordbox.ok-word .word { color: var(--ok); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* The glass column is a third of the board's width, so the 312 x 945 glass stands as tall as the board. */
.demo-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(12px, 2.5vw, 20px); align-items: center; }
.board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 1.4vw, 10px);
  padding: clamp(8px, 1.6vw, 12px);
  background: rgba(216, 189, 147, .35); border-radius: 22px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.tile {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  border: 2px solid var(--tile-edge); border-radius: 14px;
  background: linear-gradient(#fdf6e8, var(--tile));
  box-shadow: 0 4px 0 var(--tile-edge), 0 6px 10px rgba(60, 36, 20, .15);
  font: 800 clamp(1.6rem, 5vw, 2.2rem)/1 var(--font-tile); color: var(--ink);
  cursor: pointer; transition: transform .1s, box-shadow .1s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.tile sub { position: absolute; right: 7px; bottom: 4px; font: 700 .7rem/1 var(--font-tile); color: var(--ink-soft); }
.tile.x2 { background: linear-gradient(#e6f1f8, var(--blue)); border-color: var(--blue-edge); box-shadow: 0 4px 0 var(--blue-edge), 0 6px 10px rgba(60, 36, 20, .15); }
.tile.x3 { background: linear-gradient(#fbecc0, var(--gold)); border-color: var(--gold-edge); box-shadow: 0 4px 0 var(--gold-edge), 0 6px 10px rgba(60, 36, 20, .15); }
/* Bonus ribbon (Draw.Ribbon in the game): a band 1.06 x 0.26 tile widths, centered 0.194 in from the corner, turned
   45 degrees, shaded dark at the edges and light in the middle, with fine ribs and dashed stitching. The label is 0.23
   tile widths tall, centered 0.171 in from the corner (BoardView.Style). --tw is the tile's width, set by main.js. */
.board { --tw: 60px; }
.tile.x2, .tile.x3 { overflow: hidden; }
.tile.x2 { --rb: #2f6db5; --rb-light: #5a95d6; --rb-dark: #1f4c85; }
.tile.x3 { --rb: #c0281f; --rb-light: #dc4a3c; --rb-dark: #8a1912; }
.tile.x2::before, .tile.x3::before {
  content: ""; position: absolute; left: calc(var(--tw) * .194 - 2px); top: calc(var(--tw) * .194 - 2px);
  width: calc(var(--tw) * 1.06); height: calc(var(--tw) * .26);
  translate: -50% -50%; rotate: -45deg; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 calc(var(--tw) * .014), rgba(255, 255, 255, .08) calc(var(--tw) * .014) calc(var(--tw) * .029)),
    linear-gradient(var(--rb-dark), var(--rb) 14%, var(--rb-light) 42%, var(--rb) 66%, var(--rb-dark));
  outline: 1px dashed rgba(255, 255, 255, .38); outline-offset: calc(var(--tw) * -.026);
}
.tile.x2::after, .tile.x3::after {
  content: "2x"; position: absolute; left: calc(var(--tw) * .171 - 2px); top: calc(var(--tw) * .171 - 2px);
  translate: -50% -50%; rotate: -45deg;
  font: 700 calc(var(--tw) * .23)/1 var(--font-tile); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); pointer-events: none;
}
.tile.x3::after { content: "3x"; }
.tile.on { transform: translateY(3px); background: linear-gradient(#ffe9c9, #f6c98f); border-color: var(--accent); box-shadow: 0 1px 0 var(--accent-dark), 0 2px 6px rgba(60, 36, 20, .2); }
.tile.pop { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.12); } }

/* The score glass: the game's own layers (GlassView.cs) in their 312 x 945 pixel geometry; main.js draws the coffee. */
.glass { position: relative; width: 100%; aspect-ratio: 312 / 945; }
.glass > * { position: absolute; pointer-events: none; }
.glass-shadow { left: -7.69%; width: 115.4%; top: .1%; height: 105.2%; max-width: none; opacity: .5; }
.glass-tint { left: 7.7%; width: 85.3%; top: 5.82%; height: 88.25%; background: rgba(228, 240, 246, .26); border-radius: 0 0 14% 14% / 0 0 4% 4%; }
.glass-frame { inset: 0; width: 100%; height: 100%; }
.glass-coffee, .glass-shine { inset: 0; width: 100%; height: 100%; }
/* Stars sit centered inside the glass at the one, two and three star levels. */
.glass-star { z-index: 2; left: 50%; width: 31%; height: auto; translate: -50% 50%; filter: grayscale(1) opacity(.55) drop-shadow(0 1px 2px rgba(60, 36, 20, .3)); transition: filter .3s, transform .4s cubic-bezier(.3, 1.8, .5, 1); }
/* A quarter, half and three quarters up the coffee's range, so the gaps are equal from the bottom to the rim. Each sits
   on the middle of the coffee's surface (3.6%, the surface ellipse's half height, below the foam's far edge), so the
   coffee visibly reaches a star when it lights. */
.glass-star.s1 { bottom: calc(5.93% + 83.6% / 4 - 3.6%); } .glass-star.s2 { bottom: calc(5.93% + 83.6% / 2 - 3.6%); } .glass-star.s3 { bottom: calc(5.93% + 83.6% * 3 / 4 - 3.6%); }
.glass-star.lit { filter: drop-shadow(0 2px 4px rgba(120, 70, 10, .6)); transform: scale(1.2) rotate(10deg); }

.demo-actions { display: flex; gap: 12px; margin-top: 18px; }
.demo-actions .btn-soft { flex: 0 0 auto; }
.btn-submit { flex: 1; font-size: 1.5rem; }
.demo-actions .btn-soft { padding-inline: 1em; }
.demo-stats { display: flex; justify-content: center; gap: 28px; margin: 16px 0 6px; font-size: 1.25rem; }
.demo-stats b { font: 800 1.3rem var(--font-tile); }
.found { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 32px; }
.found li { font: 700 .95rem/1 var(--font-tile); letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: #fffaf1; border: 1.5px solid var(--tile-edge); animation: rise .4s both; }
.found li i { font-style: normal; color: var(--accent-dark); margin-left: 4px; }

/* Places */
/* Rows of three; a shorter last row is centered, so any number of places looks deliberate. */
.postcards { --gap: clamp(18px, 2.5vw, 30px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: 44px; }
.postcard { flex: 0 1 calc((100% - 2 * var(--gap)) / 3); }
@media (max-width: 960px) { .postcards { max-width: 620px; margin-inline: auto; } .postcard { flex-basis: 100%; } }
.postcard {
  background: var(--paper); color: var(--ink);
  border-radius: 20px; padding: 12px 12px 4px;
  box-shadow: 0 22px 40px rgba(20, 10, 4, .35);
  transform: rotate(var(--tilt, -1deg)); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.postcard:nth-child(2) { --tilt: .8deg; }
.postcard:nth-child(3) { --tilt: -.6deg; }
.postcard:hover { transform: rotate(0) translateY(-6px); }
.postcard-art { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1920 / 1088; }
.postcard-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.postcard:hover .postcard-art img { transform: scale(1.05); }
.stamp { position: absolute; right: 10px; top: 10px; padding: 6px 10px 4px; font: 800 1rem/1 var(--font-tile); color: var(--bad);
  background: #fffaf1; border: 2px dashed rgba(184, 100, 74, .7); border-radius: 6px; transform: rotate(6deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.postcard-body { padding: 18px 10px 14px; }
.postcard-body h3 { margin-bottom: .1em; }
.season { color: var(--accent-dark); font-size: 1.2rem; margin-bottom: .6em; }
.postcard-body p:not(.season) { font-size: 1.2rem; }
.listen { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 999px; border: 2px solid var(--tile-edge); background: #fffaf1; cursor: pointer; font-size: 1.15rem; box-shadow: 0 3px 0 var(--tile-edge); transition: transform .1s; }
.listen:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tile-edge); }
.listen-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }
.listen-icon::after { content: ""; position: absolute; left: 11px; top: 8px; border: 6px solid transparent; border-left: 9px solid #fff8ee; border-right: 0; }
.listen[aria-pressed="true"] .listen-icon::after { left: 9px; top: 9px; width: 10px; height: 10px; border: 0; border-left: 3px solid #fff8ee; border-right: 3px solid #fff8ee; }
.listen[aria-pressed="true"] { border-color: var(--accent); }

.brewing { display: flex; align-items: center; gap: 28px; margin: 56px auto 0; max-width: 820px; padding: 22px 30px; border-radius: 26px;
  background: rgba(251, 244, 230, .08); border: 2px dashed rgba(241, 179, 125, .45); }
.brewing img { width: 130px; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); }
.brewing h3 { color: var(--paper); }
.brewing p { margin: 0; font-size: 1.25rem; color: #f2e3cc; }
@media (max-width: 600px) { .brewing { flex-direction: column; text-align: center; } }

/* Companions */
.friends { --gap: clamp(16px, 3vw, 34px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: 48px; }
.friend { flex: 0 1 calc((100% - 2 * var(--gap)) / 3); }
@media (max-width: 820px) { .friends { max-width: 420px; margin-inline: auto; } .friend { flex-basis: 100%; } }
.friend {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 22px 26px; border-radius: var(--radius); cursor: pointer;
  background: radial-gradient(ellipse at 50% 90%, rgba(217, 135, 74, .18), transparent 60%), linear-gradient(#fffaf0, #f6ead3);
  border: 2px solid rgba(122, 84, 52, .25);
  box-shadow: 0 12px 28px rgba(60, 36, 20, .12);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.friend:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(60, 36, 20, .18); }
.friend-art { position: relative; width: min(220px, 70%); aspect-ratio: 450 / 630; display: block; margin-bottom: 14px; }
.friend-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 10px rgba(60, 36, 20, .25)); }
.friend-art .pet-happy { opacity: 0; }
.friend-name { font: 800 1.6rem/1.1 var(--font-tile); margin-bottom: 6px; }
.friend-note { font-size: 1.2rem; color: var(--ink-soft); }
.friend .bubble { left: 56%; top: 18px; }

/* Modes */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
@media (max-width: 860px) { .modes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.mode { background: var(--paper); border-radius: var(--radius); padding: 28px; border: 2px solid rgba(122, 84, 52, .22); box-shadow: 0 10px 24px rgba(60, 36, 20, .1); }
.mode p { font-size: 1.25rem; margin: 0; }
.pill { display: inline-block; padding: .25em 1.1em .2em; border-radius: 999px; font: 400 1.6rem/1.2 var(--font-ui); background: var(--accent); border: 2px solid var(--accent-dark); box-shadow: 0 4px 0 var(--accent-dark); color: #fff8ee; text-shadow: 0 1px 0 rgba(100, 50, 20, .35); }
/* Devices strip under the modes */
.devices { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px); flex-wrap: wrap; margin: 48px auto 0; padding: 22px 28px; max-width: 900px;
  border-radius: var(--radius); background: var(--paper); border: 2px dashed rgba(122, 84, 52, .3); }
.device { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 1.2rem; }
.device svg { width: 46px; height: 46px; color: var(--accent-dark); }
.devices p { flex-basis: 100%; text-align: center; margin: 6px 0 0; font-size: 1.25rem; color: var(--ink-soft); }

/* Screenshots */
.shots { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 36px 4px 24px; margin-top: 8px; scrollbar-width: thin; scrollbar-color: var(--tile-edge) transparent; }
.shot { margin: 0; flex: none; scroll-snap-align: center; }
.shot img { height: clamp(260px, 42vw, 460px); width: auto; border-radius: 22px; border: 6px solid #2c1d14; box-shadow: 0 18px 36px rgba(60, 36, 20, .25); }
.shot.tall img { border-radius: 34px; }
.shot figcaption { text-align: center; margin-top: 12px; color: var(--ink-soft); font-size: 1.15rem; }

/* Beta CTA */
.beta { position: relative; padding: clamp(90px, 12vw, 160px) var(--gutter); display: grid; place-items: center; overflow: hidden; isolation: isolate; background: #1d2a44; }
.beta-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.beta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(15, 20, 40, .1), rgba(15, 20, 40, .55)); }
.beta-card { width: min(600px, 100%); text-align: center; padding: clamp(28px, 5vw, 46px); border-radius: 36px; background: rgba(251, 244, 230, .95); border: 2px solid rgba(122, 84, 52, .35); box-shadow: var(--shadow); }
.beta-icon { width: 88px; margin: 0 auto 14px; filter: drop-shadow(0 6px 10px rgba(60, 36, 20, .3)); }
.beta-card p { font-size: 1.3rem; }
.steps { text-align: left; max-width: 26rem; margin: 26px auto 0; padding-left: 1.3em; font-size: 1.2rem; color: var(--ink-soft); }
.steps li { margin-bottom: 4px; }
.steps b { color: var(--ink); font-weight: 400; }

/* Footer */
.footer { background: var(--wood-dark); color: #e9d6bc; padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.footer .brand { color: var(--paper); }
.footer nav { display: flex; gap: 22px; }
.footer nav a { color: #f1c79d; }
.legal { margin: 0 0 0 auto; font-size: 1rem; opacity: .75; }
@media (max-width: 700px) { .legal { margin: 0; } }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Simple pages (privacy, 404) */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page .nav { position: sticky; background: rgba(251, 244, 230, .92); box-shadow: 0 1px 0 var(--edge); }
.page .nav .brand, .page .nav nav a { color: var(--ink); text-shadow: none; }
.page main { flex: 1; }
.prose { width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 64px 0 96px; }
.prose h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
.prose h2 { font-size: 1.8rem; margin-top: 1.6em; }
.prose p, .prose li { font-size: 1.3rem; }
.lost { text-align: center; padding: 80px var(--gutter) 120px; }
.lost img { width: 200px; margin: 0 auto 20px; }
.board.dealt .tile { animation: deal .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes deal { from { opacity: 0; transform: translateY(-14px) scale(.85); } }
@media (max-width: 480px) {
  .demo-actions { gap: 8px; }
  .demo-actions .btn { font-size: 1.15rem; padding: .5em .75em; min-width: 0; }
  .btn-submit { font-size: 1.3rem; }
}

/* Coming to Steam */
.steam-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .steam-row { grid-template-columns: minmax(0, 1fr); } }
.steam-copy p.light { font-size: 1.35rem; color: #f2e3cc; }
.steam-note { font-size: 1.1rem; color: #d9c2a3; margin: 0; }
.steam-platforms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.steam-platforms li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; font-size: 1.3rem; color: var(--paper);
  background: rgba(251, 244, 230, .08); border: 2px solid rgba(241, 179, 125, .3); }
.steam-platforms svg { width: 40px; height: 40px; flex: none; color: #f1b37d; }

/* Steam signup */
.signup { margin-top: clamp(36px, 5vw, 56px); padding: clamp(22px, 4vw, 34px); border-radius: var(--radius); color: var(--ink);
  background: rgba(251, 244, 230, .96); border: 2px solid rgba(122, 84, 52, .3); box-shadow: var(--shadow); scroll-margin-top: 90px; }
.signup-head h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: .25em; }
.signup-head p { font-size: 1.25rem; color: var(--ink-soft); margin-bottom: 18px; }
.signup-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* Line height 1.6 leaves room for Patrick Hand's long descenders (g, j, p, y); the padding is trimmed to match. */
.signup-row input { flex: 1 1 260px; min-width: 0; font: 400 1.3rem/1.6 var(--font-ui); color: var(--ink); padding: .4em 1em;
  border-radius: 999px; border: 2px solid var(--tile-edge); background: #fffaf1; outline: none; transition: border-color .2s, box-shadow .2s; }
.signup-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217, 135, 74, .2); }
.signup-row input[aria-invalid="true"] { border-color: var(--bad); }
.signup-row .btn { flex: 0 0 auto; }
.signup-platforms { border: 0; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.signup-platforms legend { float: left; margin-right: 6px; font-size: 1.15rem; color: var(--ink-soft); }
.signup-platforms legend span { opacity: .7; }
.signup-platforms label { cursor: pointer; }
.signup-platforms input { position: absolute; opacity: 0; pointer-events: none; }
.signup-platforms label span { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 1.1rem; border: 2px solid var(--tile-edge);
  background: #fffaf1; transition: background .15s, border-color .15s, color .15s; }
.signup-platforms input:checked + span { background: var(--accent); border-color: var(--accent-dark); color: #fff8ee; }
.signup-platforms input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.signup-status { min-height: 1.5em; margin: 14px 0 0; font-size: 1.25rem; }
.signup-status.ok { color: var(--ok); }
.signup-status.err { color: var(--bad); }
.signup.done .signup-row, .signup.done .signup-platforms { display: none; }
.signup-fine { margin: 6px 0 0; font-size: 1.05rem; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.beta-alt { margin: 18px 0 0; font-size: 1.15rem; }

/* Steam section: playing with a controller */
.controller { margin: clamp(36px, 5vw, 56px) 0 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: center; }
.controller img { width: 100%; border-radius: 18px; border: 6px solid #2c1d14; box-shadow: 0 22px 40px rgba(20, 10, 4, .4); }
.controller h3 { color: var(--paper); }
.controller p { color: #f2e3cc; font-size: 1.25rem; margin: 0; }
@media (max-width: 860px) { .controller { grid-template-columns: minmax(0, 1fr); } }