/* Hallmark · shape: game box · genre: playful · theme: brand · job: try
 * paper: Soft Cream #FFF8EB · accent: Hot Orange #FF7100 · display: Outfit 900 caps · body: Outfit 500 · hero: Stage on a Hot Orange field · nav: edge-aligned, the wordmark and the four languages · footer: mast, the wordmark over the links · signature: tap the potato, it goes KABOOM and comes back burnt, mashed, foil-baked, fried or hashed, as in a round
 * axes: light/geometric-sans/warm · posture: full-palette (field Hot Orange, modes Electric Blue and Bubblegum Pink, seal Sunny Yellow, ink Almost Black) · imagery: the partner's mascot PNGs and approved loops, no photographs · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a game page argues little; the hero lets a visitor set the potato off instead of reading about it */
/* Hallmark · hero-review: not run, the hero was built and linted first · finish-review: subagent · 7 findings · 6 resolved, 1 partial (one real card per mode waits for the launch packs) */
/* Hallmark · dismissed 58 · the hero line is the partner's approved Welcome copy from the app, kept word for word in every language */
/* Hallmark · dismissed 25 · the mode, round and tile lines are one or two short sentences set as captions under their titles */
/* Hallmark · waive 39b · button.potato is the hero picture itself, the yellow disc with the potato on it · the potato is the toy a visitor taps to set it off, as in the game, not a control in a row of buttons */
@import url("tokens.css");
@import url("base.css");

/* The home page. The OUCH! design brief is the system: flat colour blocks, Outfit, pills, 28 px cards, a solid 4 px
   offset under the primary button, no gradients and no soft shadows; the mascot moves, the interface stays flat. */

/* The primary button: an Almost Black pill, Soft Cream caps, a solid offset block under it */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-xl); border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); box-shadow: 0 var(--offset) 0 var(--color-ink); font: 800 1.125rem/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--offset) + 2px) 0 var(--color-ink); }
.btn:active { transform: translateY(var(--offset)); box-shadow: 0 0 0 var(--color-ink); }
.btn:focus-visible { outline: 3px solid var(--color-on); outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Hero: the splash's orange, the app icon's yellow circle, and the potato you can set off */
.hero { display: grid; align-items: center; min-height: calc(100svh - 80px); padding-block: var(--space-md) var(--space-xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--space-2xl); }
.hero__text { container-type: inline-size; }
.hero h1 { max-width: none; }
/* Each language's longer line, in ems of Outfit Black caps, so the two-line head never breaks a third time beside the potato */
:lang(de) .hero h1 { --h1-fit: 8.8; } :lang(fr) .hero h1 { --h1-fit: 8.05; } :lang(es) .hero h1 { --h1-fit: 7.45; }
.hero h1 { font-size: max(2.25rem, min(var(--text-display), calc(100cqi / var(--h1-fit, 6.8)))); }
.hero__text { display: grid; justify-items: start; gap: var(--space-lg); }
.hero__text .btn { margin-top: var(--space-xs); }
/* The disc on its own row and the caption under it, so the disc stays level with the text */
.stage { justify-self: start; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm) var(--space-md); width: min(100%, 600px, calc(100svh - 280px)); }
/* The potato is the button: the yellow disc from the app icon, a flat shadow under the feet, the loop on top. */
.potato { position: relative; display: block; flex: 0 0 100%; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.potato::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-yellow); }
.potato__shadow { position: absolute; left: 29%; right: 29%; bottom: 13%; height: 5%; border-radius: 50%; background: var(--color-shadow); }
.potato picture { position: absolute; left: 9%; bottom: 6%; width: 82%; }
.potato img { width: 100%; transform-origin: 50% 88%; }
.potato:focus-visible { outline: 3px solid var(--color-on); outline-offset: 4px; }
.potato:hover img, .potato:focus-visible img { animation: heat 0.32s var(--ease-in-out) infinite; }
.potato:active img { transform: scale(0.96); }
.potato.is-boom img { animation: boom 0.6s var(--ease-out) 1; }
.potato.is-boom::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: var(--color-paper); animation: flash 0.6s var(--ease-out) 1 forwards; pointer-events: none; }
.stage__say { min-height: 1.2em; font: 900 var(--text-title)/1.1 var(--font-display); text-transform: uppercase; text-align: center; }
html:not(.js) .stage__say { visibility: hidden; }
@keyframes heat { 0%, 100% { transform: rotate(-4deg) scale(1.02); } 50% { transform: rotate(4deg) scale(1.04); } }
@keyframes boom { 0% { transform: scale(0.9); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes flash { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.2); } }

/* Section rhythm */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head--split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: var(--space-lg) var(--gap-columns); }

/* The three modes: a colour block each, the potato breaking out of its top edge */
.modes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: var(--space-3xl) 0 0; list-style: none; }
.mode { position: relative; display: grid; align-content: start; gap: var(--space-sm); padding: calc(var(--space-4xl) + var(--space-2xl)) var(--space-xl) var(--space-xl); border-radius: var(--radius-card); }
.mode img { position: absolute; top: calc(-1 * var(--space-3xl)); left: 50%; width: 260px; transform: translateX(-50%); }
.mode h3 { font-size: var(--text-2xl); font-weight: 900; }
.mode p { font-size: var(--text-lg); line-height: 1.4; max-width: 28ch; }

/* A round: four poses on the prompt card's Almost Black */
.round__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.round__grid .head { position: sticky; top: var(--space-2xl); margin-bottom: 0; }
.round__steps { display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.round__steps li { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: var(--space-xs) var(--gap-columns); }
.round__steps img { grid-row: 1 / 3; width: 160px; aspect-ratio: 384 / 408; }
.round__steps h3 { align-self: end; font-size: var(--text-2xl); font-weight: 900; text-transform: uppercase; }
.round__steps p { align-self: start; max-width: 36ch; font-size: var(--text-lg); line-height: 1.4; }
.round__steps li:nth-child(3) h3 { color: var(--color-yellow); }

/* Good to know: a bento of colour blocks, Premium the lead */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(184px, auto); gap: var(--gap-columns); }
.tile { display: grid; align-content: end; gap: var(--space-xs); padding: var(--space-xl); border-radius: var(--radius-card); }
.tile p { font-size: var(--text-lg); line-height: 1.4; max-width: 36ch; }
.tile--lead { grid-column: 1 / 8; grid-row: 1 / 4; position: relative; padding-top: 300px; }
.tile--lead img { position: absolute; top: calc(-1 * var(--space-xl)); right: var(--space-xl); width: 260px; }
.tile--lead h3 { font-size: var(--text-section); font-weight: 900; max-width: 14ch; }
.tile:not(.tile--lead) { grid-column: 8 / 13; }

/* The close: the splash's orange again, and the button */
.close__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--gap-columns); }
.close__text { display: grid; justify-items: start; gap: var(--space-lg); }
.close__grid img { justify-self: center; width: min(100%, 340px); }

@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__text { padding-top: var(--space-md); }
  .stage { justify-self: center; width: min(100%, 460px); }
  .head--split { grid-template-columns: minmax(0, 1fr); }
  .modes__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-top: var(--space-xl); }
  .mode { min-height: 0; padding: var(--space-xl) 44% var(--space-xl) var(--space-xl); }
  .mode img { top: auto; bottom: var(--space-lg); left: auto; right: var(--space-md); width: 38%; max-width: 220px; transform: none; }
  .mode:nth-child(even) { padding: var(--space-xl) var(--space-xl) var(--space-xl) 44%; }
  .mode:nth-child(even) img { right: auto; left: var(--space-md); }
  .round__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .round__grid .head { position: static; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile--lead, .tile:not(.tile--lead) { grid-column: 1 / -1; grid-row: auto; }
  .tile--lead { padding-top: 220px; margin-top: var(--space-xl); }
  .tile--lead img { width: 200px; }
  .close__grid { grid-template-columns: minmax(0, 1fr); }
  .close__grid img { width: min(70%, 260px); }
}
@media (max-width: 40rem) {
  .hero { padding-bottom: var(--space-2xl); }
  .btn { padding: 0 var(--space-lg); }
  .mode, .mode:nth-child(even) { padding: var(--space-lg) 40% var(--space-lg) var(--space-lg); }
  .mode:nth-child(even) { padding: var(--space-lg) var(--space-lg) var(--space-lg) 40%; }
  .mode h3 { font-size: var(--text-xl); }
  .mode p { font-size: var(--text-md); }
  .tile { padding: var(--space-lg); }
  .tile--lead img { right: var(--space-md); width: 170px; }
  .tile--lead { padding-top: 180px; }
  .round__steps li { grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--space-md); }
  .round__steps img { width: 104px; }
  .round__steps h3 { font-size: var(--text-xl); }
  .round__steps p { font-size: var(--text-md); }
}
@media (prefers-reduced-motion: reduce) {
  .potato:hover img, .potato:focus-visible img, .potato.is-boom img { animation: none; }
  .potato.is-boom::after { display: none; }
}