:root {
  --paper: #fbf8f1;
  --paper-bright: #fffdf8;
  --ink: #18231f;
  --muted: #65706a;
  --green: #173f33;
  --green-2: #245748;
  --berry: #a5364c;
  --berry-dark: #762236;
  --gold: #be873f;
  --gold-pale: #edd6ad;
  --mint: #c9ddd3;
  --blush: #e9c4c9;
  --lavender: #d7cedf;
  --line: rgba(24, 35, 31, .12);
  --card-shadow: 0 28px 65px rgba(36, 55, 46, .15), 0 5px 14px rgba(54, 35, 18, .09);
  --small-shadow: 0 12px 24px rgba(36, 55, 46, .10), 0 2px 5px rgba(54, 35, 18, .06);
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overscroll-behavior-y: none; }
body {
  min-height: 100vh;
  background: #f4ead8;
}
/* Both layers are position:fixed behind scrolling content. On iOS that makes
   the browser recomposite them against the moving page on every scroll frame,
   which is half of why the home screen trembled on a real phone. translateZ(0)
   promotes each to its own compositor layer so scrolling no longer repaints
   them. Do not remove without testing on a device. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("./paper-christmas-wide.webp") center / cover no-repeat;
  transform: translateZ(0);
  backface-visibility: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 52%, rgba(69, 45, 24, .035) 100%);
  transform: translateZ(0);
  backface-visibility: hidden;
}
button { font: inherit; }
button:focus-visible { outline: 4px solid rgba(190,135,63,.58); outline-offset: 3px; }
#app { min-height: 100vh; overscroll-behavior-y: none; }

@media (max-width: 720px) {
  body::before {
    background-image: url("./paper-christmas-mobile.webp");
    background-position: center top;
  }
}

.page {
  min-height: 100vh;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: clamp(18px, 3vw, 38px);
}
.shell {
  width: min(1080px, 100%);
  min-height: min(750px, calc(100vh - 76px));
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
}
.top-rule { display: none; }

.home-wrap { display: grid; gap: 14px; }
.product-nav {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 12px 9px 20px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  /* No backdrop-filter here. This element is position:sticky, so a blur would
     re-sample the moving background on every scroll frame; together with the
     fixed background layers above that caused visible tearing on iPhone. The
     higher opacity reads almost the same. */
  background: rgba(251,248,241,.97);
  box-shadow: var(--small-shadow);
}
.persistent-nav { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 60; }
.product-nav > div { display: flex; gap: 5px; }
.nav-brand, .nav-link { border: 0; background: transparent; color: var(--green); cursor: pointer; font-weight: 850; }
.nav-brand { font-size: 1rem; min-height: 44px; padding: 0 10px; border-radius: 12px; }
.nav-link { min-height: 44px; padding: 9px 13px; border-radius: 12px; color: var(--muted); }
.nav-link:hover, .nav-link.current { color: var(--green); background: rgba(201,221,211,.48); }
.home {
  min-height: min(674px, calc(100vh - 152px));
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}
.home-copy, .home-card, .screen, .game-shell, .finish {
  background:
    radial-gradient(circle at 100% 100%, rgba(201,221,211,.52) 0 12%, transparent 12.2%),
    linear-gradient(145deg, rgba(255,255,255,.56), transparent 44%),
    var(--paper);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 32px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  position: relative;
}
.home-copy {
  padding: clamp(42px, 7vw, 86px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.home-copy::before {
  content: "✦";
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 42px;
  border-radius: 50%;
  background: rgba(165,54,76,.11);
  color: var(--berry);
  border: 1px solid rgba(165,54,76,.18);
  font-size: 1.75rem;
}
.home-card {
  padding: clamp(28px, 4vw, 44px);
  color: white;
  background:
    radial-gradient(circle at 100% 100%, rgba(237,214,173,.22) 0 18%, transparent 18.2%),
    linear-gradient(155deg, rgba(255,255,255,.06), transparent 50%),
    var(--green);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home-card .mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold-pale);
  border: 1px solid rgba(237,214,173,.35);
  background: rgba(255,255,255,.06);
  font-size: 1.5rem;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: .82rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 850;
  color: var(--berry);
}
h1, h2, h3, p { margin-top: 0; }
h1, .display-title {
  font-family: inherit;
  font-weight: 820;
  letter-spacing: -.055em;
}
h1 {
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  line-height: .9;
  margin-bottom: 28px;
  max-width: 730px;
  color: var(--green);
}
.home-lead {
  color: var(--muted);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.45;
  max-width: 560px;
  margin-bottom: 34px;
}
.home-lead strong { color: var(--ink); }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-actions .quiet-link { box-shadow: none; background: transparent; }
.resume-card { width: min(560px,100%); display: grid; gap: 3px; margin: 22px 0; padding: 15px 18px; border: 1px solid rgba(23,63,51,.2); border-radius: 16px; background: rgba(201,221,211,.3); color: var(--green); cursor: pointer; text-align: left; }
.resume-card b { font-size: 1rem; }
.resume-card span { color: var(--muted); font-size: .82rem; font-weight: 650; }
.ready-note { max-width: 570px; margin: 28px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.ready-note b { color: var(--green); }
.eyebrow.gold { color: var(--gold-pale); }
.promise {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.08;
  font-weight: 750;
  letter-spacing: -.04em;
  margin: 36px 0;
}
.type-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -18px 0 30px; }
.type-chips span { padding: 7px 10px; border: 1px solid rgba(237,214,173,.28); border-radius: 999px; background: rgba(255,255,255,.07); color: var(--gold-pale); font-size: .76rem; font-weight: 850; }
.facts { display: grid; gap: 0; margin-top: 28px; }
.fact {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-weight: 700;
  line-height: 1.35;
}
.fact span:first-child { color: var(--gold-pale); font-size: .82rem; padding-top: 2px; }

.primary, .secondary, .choice, .score-button, .icon-button {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.primary {
  min-height: 58px;
  padding: 16px 26px;
  border-radius: 16px;
  color: white;
  background: var(--berry);
  box-shadow: 0 6px 0 var(--berry-dark), 0 10px 18px rgba(118,34,54,.14);
  font-weight: 850;
  font-size: 1.05rem;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.primary:hover { background: #b83e56; transform: translateY(-2px); box-shadow: 0 8px 0 var(--berry-dark), 0 13px 22px rgba(118,34,54,.17); }
.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--berry-dark); }
.primary:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }

.screen {
  padding: clamp(28px, 5vw, 58px);
  min-height: min(750px, calc(100vh - 76px));
  display: flex;
  flex-direction: column;
}
.screen::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  bottom: -75px;
  border-radius: 50%;
  background: rgba(233,196,201,.72);
  pointer-events: none;
}
.screen-header { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 30px; position: relative; z-index: 1; }
.brand { font-size: 1.05rem; font-weight: 850; color: var(--green); }
.step { color: var(--muted); font-weight: 750; font-size: .9rem; }
.setup-title { font-size: clamp(2.35rem, 5vw, 4.7rem); line-height: .96; margin: 12px 0 38px; }
.setup-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; flex: 1; position: relative; z-index: 1; }
.choice-group {
  padding: 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.43);
  border: 1px solid rgba(24,35,31,.08);
}
.choice-group:nth-child(1) { box-shadow: inset 0 5px 0 rgba(201,221,211,.9); }
.choice-group:nth-child(2) { box-shadow: inset 0 5px 0 rgba(237,214,173,.95); }
.choice-group:nth-child(3) { box-shadow: inset 0 5px 0 rgba(233,196,201,.9); }
.choice-group:nth-child(4) { box-shadow: inset 0 5px 0 rgba(215,206,223,.95); }
.choice-group h2 { font-size: .83rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 15px; }
.choices { display: grid; gap: 11px; }
.duration-choices { grid-template-columns: 1fr 1fr; }
.choice {
  min-height: 68px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid rgba(24,35,31,.1);
  background: var(--paper-bright);
  color: var(--ink);
  text-align: left;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: var(--small-shadow);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.choice:hover { border-color: rgba(23,63,51,.42); transform: translateY(-2px); }
.choice.selected { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 8px 16px rgba(23,63,51,.18); }
.mode-choice { display: grid; gap: 3px; }
.mode-choice small { font-size: .78rem; font-weight: 650; opacity: .75; }
.choice-explain { display: block; margin-top: 11px; color: var(--muted); font-size: .77rem; line-height: 1.4; }
.setup-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 30px; position: relative; z-index: 1; }
.hint { color: var(--muted); margin: 0; font-weight: 650; }

.teams { flex: 1; display: grid; place-items: center; text-align: center; position: relative; z-index: 1; }
.teams-inner { width: min(760px,100%); }
.teams-title { font: 820 clamp(2.5rem, 6vw, 5rem)/.98 inherit; letter-spacing: -.05em; color: var(--green); margin-bottom: 16px; }
.teams-sub { color: var(--muted); font-size: 1.17rem; margin-bottom: 28px; }
.team-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 28px 0 42px; }
.team-card { border-radius: 22px; padding: 30px 16px; color: white; font-size: clamp(1.3rem,3vw,2rem); line-height: 1.1; font-weight: 850; box-shadow: var(--small-shadow); }
.team-holly { background: var(--green); }
.team-jingle { background: var(--berry); }
.vs { color: var(--gold); font-weight: 950; }
.team-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 34px; }
.team-mode-card { position: relative; min-height: 180px; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px 22px; border: 2px solid transparent; border-radius: 22px; background: var(--paper-bright); color: var(--ink); box-shadow: var(--small-shadow); cursor: pointer; text-align: left; }
.team-mode-card strong { color: var(--green); font-size: 1.45rem; }
.team-mode-card small { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.team-mode-card.selected { border-color: var(--green); background: rgba(201,221,211,.28); }
.recommended { position: absolute; top: 14px; right: 14px; padding: 6px 9px; border-radius: 999px; color: white; background: var(--berry); font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

/* This used to be overflow: visible so the decorative ::after circle (180px
   wide at right: -70px) could bleed past the card edge on a wide window. It
   bled past the VIEWPORT on anything narrower than about 1500px, which made
   the whole page scroll sideways on both iPhone and iPad. The flourish is not
   worth a broken page, so the card clips like every other screen. */
.preview-screen { overflow: hidden; }
.preview-layout { flex: 1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(310px,.95fr); gap: clamp(22px,4vw,48px); align-items: center; position: relative; z-index: 1; }
.preview-title { margin: 0 0 28px; color: var(--green); font-size: clamp(2.5rem,5.2vw,4.8rem); line-height: .96; letter-spacing: -.05em; }
.how-it-works { display: grid; gap: 12px; }
.how-it-works p { margin: 0; padding-left: 18px; border-left: 3px solid var(--mint); color: var(--muted); font-size: 1rem; line-height: 1.5; }
.how-it-works b { color: var(--ink); }
.preview-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.preview-plan { align-self: stretch; max-height: 590px; overflow: auto; padding: 25px; border-radius: 24px; background: rgba(255,255,255,.5); border: 1px solid var(--line); box-shadow: var(--small-shadow); }
.preview-rounds { display: grid; gap: 8px; }
.preview-round { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 12px; min-height: 74px; padding: 12px; border-radius: 16px; background: var(--paper-bright); color: var(--ink); box-shadow: 0 3px 7px rgba(54,35,18,.05); }
.preview-round b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: .76rem; }
.preview-round span { display: grid; gap: 3px; min-width: 0; }
.preview-round strong { font-size: .96rem; }
.preview-round small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.preview-round em { color: var(--berry); font-size: .7rem; font-style: normal; font-weight: 800; }
.preview-note { margin: 18px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }

.library-screen { min-height: auto; }
.library-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.7fr); gap: 28px; align-items: end; margin-bottom: 28px; position: relative; z-index: 1; }
.library-title { margin: 5px 0 12px; color: var(--green); font-size: clamp(2.4rem,5vw,4.8rem); line-height: .96; letter-spacing: -.05em; }
.library-heading > div > p:last-child { color: var(--muted); font-size: 1.05rem; }
.surprise-button { min-height: 50px; margin-top: 5px; padding: 13px 20px; }
.quick-settings { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.46); }
.quick-settings > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.quick-settings span { min-width: 58px; color: var(--muted); font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.quick-settings > small { color: var(--muted); font-size: .75rem; line-height: 1.35; }
.mini-choice { min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-bright); color: var(--green); padding: 8px 14px; cursor: pointer; font-weight: 780; font-size: .82rem; }
.mini-choice.selected { color: white; background: var(--green); border-color: var(--green); }
.game-library { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; position: relative; z-index: 1; }
.game-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 300px; padding: 23px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.62); box-shadow: var(--small-shadow); }
.game-card:nth-child(3n+1) { box-shadow: inset 0 5px 0 var(--mint), var(--small-shadow); }
.game-card:nth-child(3n+2) { box-shadow: inset 0 5px 0 var(--gold-pale), var(--small-shadow); }
.game-card:nth-child(3n) { box-shadow: inset 0 5px 0 var(--blush), var(--small-shadow); }
.game-card-top { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.game-card-top .eyebrow { margin-bottom: 12px; font-size: .67rem; }
.game-card-top > span { color: var(--muted); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.game-card h2 { margin-bottom: 9px; color: var(--green); font-size: 1.55rem; letter-spacing: -.035em; }
.game-card-action { color: var(--ink); font-size: 1rem; line-height: 1.42; font-weight: 680; }
.game-card-why { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.game-card-why b { display: block; margin-bottom: 3px; color: var(--berry); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.primary.small { min-height: 46px; margin-top: auto; padding: 12px 17px; font-size: .9rem; }

.game-shell {
  min-height: min(750px, calc(100vh - 76px));
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.game-shell::before {
  content: "";
  position: absolute;
  width: 135px;
  height: 135px;
  right: -40px;
  bottom: -42px;
  border-radius: 50%;
  background: rgba(201,221,211,.72);
}
.game-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 19px clamp(20px,4vw,40px);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.game-actions { display: flex; gap: 8px; }
.icon-button, .secondary {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.6);
  color: var(--green);
  font-weight: 800;
}
.icon-button:hover, .secondary:hover { background: white; box-shadow: 0 5px 10px rgba(54,35,18,.08); }
.round-progress { text-align: center; color: var(--muted); font-weight: 850; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; }
.round-plan-button { border: 0; background: transparent; cursor: pointer; border-radius: 12px; padding: 7px 12px; }
.round-plan-button:hover { background: rgba(255,255,255,.62); color: var(--green); }
.round-plan-button span { display: block; margin-top: 3px; color: var(--berry); font-size: .7rem; letter-spacing: .04em; text-transform: none; }
.scoreboard { justify-self: end; display: flex; gap: 6px; align-items: center; }
.quiet-mode { justify-self: end; color: var(--muted); font-size: .78rem; font-weight: 800; }
.together-badge { justify-self: end; padding: 9px 13px; border-radius: 12px; color: var(--green); background: rgba(201,221,211,.58); font-weight: 850; font-size: .84rem; }
.score { padding: 8px 12px; border-radius: 12px; color: white; font-weight: 900; min-width: 76px; text-align: center; }
.score.holly { background: var(--green); }
.score.jingle { background: var(--berry); }

.game-main { display: grid; place-items: center; padding: clamp(24px,4vw,46px); text-align: center; position: relative; z-index: 1; }
.play-card {
  width: min(850px,100%);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(30px,5vw,58px);
  border-radius: 28px;
  border: 1px solid rgba(24,35,31,.09);
  background:
    radial-gradient(circle at 100% 100%, rgba(233,196,201,.58) 0 13%, transparent 13.2%),
    radial-gradient(circle at 0 0, rgba(201,221,211,.58) 0 11%, transparent 11.2%),
    rgba(255,255,255,.56);
  box-shadow: var(--small-shadow);
}
.round-label { color: var(--berry); text-transform: uppercase; letter-spacing: .18em; font-weight: 900; font-size: .78rem; margin-bottom: 13px; }
.round-rule { color: var(--muted); font-size: 1rem; font-weight: 700; margin-bottom: 28px; }
.skip-game-inline { min-height: 44px; margin: -18px 0 22px; padding: 7px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--berry); cursor: pointer; font-size: .78rem; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.skip-game-inline:hover { background: rgba(233,196,201,.25); }
.question { font-size: clamp(2rem,5.1vw,4.7rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 820; margin-bottom: 30px; max-width: 820px; }
.question.compact { font-size: clamp(1.75rem,4vw,3.55rem); }
.instruction { color: var(--muted); font-size: clamp(1.02rem,2vw,1.24rem); font-weight: 680; line-height: 1.45; max-width: 680px; margin: -9px auto 28px; }
.round-intro { display: grid; justify-items: center; }
.mini-flow { width: min(720px,100%); display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 0 0 30px; padding: 0; list-style: none; }
.mini-flow li { display: grid; justify-items: center; gap: 8px; padding: 13px 9px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.52); color: var(--green); text-align: center; font-size: .8rem; font-weight: 800; line-height: 1.2; }
.mini-flow b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--berry); }
.flow-step { margin: 0 0 16px; color: var(--berry); font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.handoff-mark { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 0 25px; border-radius: 50%; color: white; background: var(--green); box-shadow: var(--small-shadow); font-size: 2rem; font-weight: 900; }
.moment-line, .point-now {
  color: var(--berry);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.round-finished { margin: 0 0 9px; color: var(--green); font-size: .76rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.vote-option {
  margin-top: -10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(201,221,211,.42);
  color: var(--green);
}
.active-team { display: inline-flex; color: white; border-radius: 12px; background: var(--green); padding: 9px 16px; font-weight: 900; margin-bottom: 18px; box-shadow: var(--small-shadow); }
.active-team.jingle { background: var(--berry); }
.active-team.holly { background: var(--green); }
.active-team.together { background: var(--green-2); }
.clue-box { margin: 16px auto 27px; display: grid; gap: 10px; width: min(650px,100%); }
.clue { border: 1px solid var(--line); background: var(--paper-bright); border-radius: 16px; padding: 15px 18px; font-size: clamp(1.02rem,2.1vw,1.28rem); font-weight: 780; box-shadow: 0 4px 8px rgba(54,35,18,.05); }
.answer { color: var(--green); font-size: clamp(1.5rem,3vw,2.35rem); font-weight: 850; padding: 18px 22px; border: 1px solid rgba(190,135,63,.42); border-radius: 18px; background: #fff8ea; margin: 18px auto 0; width: fit-content; box-shadow: var(--small-shadow); }
.story-ending { width: min(620px,100%); display: grid; gap: 5px; margin: 8px 0 26px; padding: 16px 18px; border: 1px solid rgba(190,135,63,.42); border-radius: 18px; background: #fff8ea; color: var(--muted); line-height: 1.4; }
.story-ending b { color: var(--green); font-size: 1.05rem; }
.pips { display: flex; justify-content: center; gap: 8px; margin: 20px 0 27px; }
.pip { width: 9px; height: 9px; border-radius: 50%; background: rgba(24,35,31,.14); }
.pip.active { background: var(--berry); transform: scale(1.25); }
.pip.done { background: var(--green); }
.secret-label { color: var(--berry); font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.secret-word { font-size: clamp(3rem,9vw,6.7rem); line-height: 1; font-weight: 850; letter-spacing: -.05em; color: var(--green); margin: 18px 0 30px; }
.secret-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(720px,100%); margin: 22px auto; }
.secret-options .choice { text-align: center; min-height: 110px; font-size: clamp(1.08rem,2.4vw,1.42rem); }
.option-display { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; margin: 22px auto 30px; width: min(780px,100%); }
.option-display div { display: grid; place-items: center; min-height: 105px; padding: 18px; border-radius: 18px; background: var(--paper-bright); border: 1px solid var(--line); box-shadow: var(--small-shadow); font-weight: 850; font-size: clamp(1.02rem,2.1vw,1.3rem); }
.option-display span { align-self: center; color: var(--gold); font-weight: 950; }
.timer-wrap { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 23px 0; }
.timer { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--green); box-shadow: 0 0 0 8px rgba(23,63,51,.09), var(--small-shadow); font-size: 1.75rem; font-weight: 900; }
.timer.urgent { background: var(--berry); animation: pulse .72s infinite alternate; }
.resume-timer { min-height: 48px; padding: 12px 17px; border: 0; border-radius: 14px; color: white; background: var(--berry); cursor: pointer; font-weight: 850; }
.prompt-skip { margin: -14px 0 4px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--berry); cursor: pointer; font-size: .82rem; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.prompt-skip:hover { background: rgba(233,196,201,.25); }
@keyframes pulse { to { transform: scale(1.06); } }
.play-actions, .score-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.score-actions { margin-top: 25px; }
.score-button { min-height: 54px; padding: 14px 21px; border-radius: 15px; color: white; font-weight: 900; font-size: 1rem; box-shadow: var(--small-shadow); }
.score-button.holly { background: var(--green); }
.score-button.jingle { background: var(--berry); }
.score-button.together { background: var(--green-2); }
.score-button.tie { background: #786d5b; }
.game-bottom { padding: 15px clamp(20px,4vw,40px) 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; position: relative; z-index: 1; }
.energy-note { color: var(--muted); font-weight: 650; font-size: .88rem; }
.between-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; align-items: center; margin-top: 22px; color: var(--muted); font-size: .82rem; }
.between-games button { border: 0; background: transparent; color: var(--berry); cursor: pointer; font-weight: 850; padding: 5px; }

.plan-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  justify-items: center;
  align-items: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  /* Scrim rather than a blur: this element scrolls, and a backdrop-filter on a
     scrolling container janks on iOS. Darker opacity replaces the separation
     the blur was giving. */
  background: rgba(23,63,51,.74);
}
.plan-sheet {
  width: min(760px,100%);
  min-height: min-content;
  padding: clamp(24px,4vw,38px);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--card-shadow);
  text-align: left;
  margin: auto 0;
}
.plan-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.sticky-plan-header { position: sticky; top: -1px; z-index: 2; margin: -10px -10px 0; padding: 10px; border-radius: 18px; background: rgba(251,248,241,.97); }
.plan-header h2 { margin: 0; color: var(--green); font-size: clamp(2rem,5vw,3.6rem); line-height: 1; letter-spacing: -.045em; }
.plan-header .eyebrow { margin-bottom: 10px; }
.plan-help { margin: 17px 0 22px; color: var(--muted); font-weight: 680; }
.plan-list { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.plan-row { width: 100%; min-height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55); overflow: hidden; }
.plan-row > button { width: 100%; min-height: 64px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; border: 0; padding: 12px 14px; color: inherit; background: transparent; cursor: pointer; font: inherit; text-align: left; }
.plan-row.ahead:hover { border-color: rgba(23,63,51,.38); background: var(--paper-bright); }
.plan-row.current { border-color: var(--berry); background: rgba(233,196,201,.22); }
.plan-row.done { opacity: .58; }
.plan-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 900; }
.plan-row.current .plan-number { background: var(--berry); }
.plan-copy { min-width: 0; display: grid; gap: 3px; }
.plan-copy strong { color: var(--ink); font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.plan-copy small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.plan-time { color: var(--muted); font-weight: 800; font-size: .78rem; white-space: nowrap; }
.game-menu { width: min(560px,100%); padding: clamp(24px,4vw,36px); border-radius: 26px; background: var(--paper); box-shadow: var(--card-shadow); text-align: left; }
.game-menu h2 { margin: 0; color: var(--green); font-size: clamp(2rem,5vw,3.4rem); line-height: 1; letter-spacing: -.045em; }
.menu-list { display: grid; gap: 10px; margin-top: 25px; }
.menu-row { display: grid; gap: 4px; width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-bright); color: var(--ink); cursor: pointer; text-align: left; }
.menu-row:hover { border-color: rgba(23,63,51,.36); box-shadow: var(--small-shadow); }
.menu-row:disabled { opacity: .35; cursor: not-allowed; }
.menu-row b { color: var(--green); font-size: 1rem; }
.menu-row small { color: var(--muted); font-size: .82rem; }
.menu-row.quiet b { color: var(--berry); }

.transition {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 85% 90%, rgba(237,214,173,.25) 0 18%, transparent 18.2%),
    var(--green);
  color: white;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 36px;
  z-index: 10;
  box-shadow: var(--card-shadow);
}
.transition-inner { width: min(700px,100%); }
.transition-kicker { color: var(--gold-pale); text-transform: uppercase; letter-spacing: .18em; font-weight: 900; }
.transition h2 { font-size: clamp(2.7rem,7vw,5.8rem); line-height: .98; letter-spacing: -.05em; margin: 18px 0 34px; }

.finish {
  min-height: min(750px, calc(100vh - 76px));
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(34px,7vw,80px);
  background:
    radial-gradient(circle at 100% 100%, rgba(237,214,173,.23) 0 19%, transparent 19.2%),
    linear-gradient(155deg, rgba(255,255,255,.05), transparent 50%),
    var(--green);
  color: white;
}
.finish-inner { width: min(760px,100%); }
.finish .eyebrow { color: var(--gold-pale); margin-bottom: 20px; }
.finish h1 { color: white; margin-inline: auto; }
.final-score { display: flex; justify-content: center; gap: 16px; margin: 30px 0; flex-wrap: wrap; }
.final-score .score { font-size: 1.12rem; padding: 12px 18px; min-width: 150px; }
.winner { font-size: 1.16rem; color: rgba(255,255,255,.84); margin-bottom: 34px; }
.finish-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.finish .secondary { color: white; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }

@media (max-width: 760px) {
  .page { padding: 12px; }
  .shell { min-height: calc(100vh - 24px); }
  .product-nav { min-height: 56px; align-items: center; padding: 7px; border-radius: 18px; }
  .product-nav > div { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .nav-brand { display: none; }
  .nav-link { min-height: 44px; padding: 7px 3px; font-size: clamp(.68rem,3.2vw,.8rem); line-height: 1.08; }
  .home { grid-template-columns: 1fr; min-height: auto; }
  .home-copy { min-height: calc(100dvh - 94px); padding: 46px 27px 38px; }
  .home-copy::before { margin-bottom: 32px; }
  .home-card { min-height: 450px; }
  .type-chips { margin-bottom: 22px; }
  .screen, .game-shell, .finish { min-height: calc(100dvh - 94px); border-radius: 24px; }
  .setup-grid { grid-template-columns: 1fr; gap: 14px; }
  .screen { padding: 24px 18px; }
  .screen-header .step { display: none; }
  .setup-footer { align-items: stretch; flex-direction: column; }
  .setup-footer .primary { width: 100%; }
  .team-pair { grid-template-columns: 1fr; gap: 10px; }
  .team-mode-options { grid-template-columns: 1fr; }
  .team-mode-card { min-height: 145px; }
  .vs { padding: 2px; }
  .preview-layout { grid-template-columns: 1fr; align-items: start; }
  .preview-screen { min-height: auto; }
  .preview-plan { max-height: none; }
  .library-heading { grid-template-columns: 1fr; align-items: start; }
  .game-library { grid-template-columns: 1fr; }
  .game-card { min-height: 275px; }
  .preview-actions { align-items: stretch; flex-direction: column; }
  .preview-actions .primary, .preview-actions .secondary { width: 100%; }
  .game-top { grid-template-columns: 1fr auto; padding: 14px; }
  .round-progress { grid-column: 1 / -1; grid-row: 2; }
  .scoreboard { grid-column: 2; grid-row: 1; }
  .together-badge { grid-column: 2; grid-row: 1; }
  .quiet-mode { grid-column: 2; grid-row: 1; }
  .game-main { place-items: start center; padding: 15px; }
  .play-card { padding: 27px 18px; min-height: 440px; border-radius: 22px; }
  .question { font-size: clamp(1.95rem,9.2vw,3rem); }
  .secret-options, .option-display { grid-template-columns: 1fr; }
  .mini-flow { grid-template-columns: 1fr 1fr; }
  .option-display span { padding: 0; }
  .game-bottom { padding: 11px 16px 17px; }
  .energy-note { display: none; }
  .transition { border-radius: 24px; }
  .round-plan-button { width: 100%; }
  .plan-overlay { padding-top: max(10px, env(safe-area-inset-top)); }
  .plan-sheet { width: 100%; margin: 0; border-radius: 22px; padding: 18px 14px 24px; }
  .plan-header h2 { font-size: clamp(1.9rem,9vw,2.8rem); }
  .plan-help { margin: 13px 2px 18px; font-size: .9rem; line-height: 1.35; }
  .plan-row > button { grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; padding: 11px 12px; }
  .plan-copy small { display: none; }
  .plan-copy strong { font-size: .94rem; }
  .plan-time { font-size: .7rem; }
}

@media (max-width: 410px) {
  .duration-choices { grid-template-columns: 1fr; }
  .score { padding: 7px 9px; min-width: 65px; font-size: .84rem; }
  .game-actions .icon-button { padding: 9px 11px; }
}

/* ---------- Christmas Gift Shuffle ---------- */
/* the session header's subtitle rule is scoped to .round-plan-button, and the
   Gift Shuffle header is a plain div, so it needs the same treatment */
.game-top .round-progress > span { display: block; margin-top: 3px; color: var(--berry); font-size: .7rem; letter-spacing: .04em; text-transform: none; }
.gift-tagline { margin: 0 0 10px; color: var(--berry); font-size: 1.02rem; font-weight: 800; font-style: italic; line-height: 1.35; }
.gift-game-card { box-shadow: inset 0 5px 0 var(--gold-pale), var(--small-shadow) !important; }

.gift-toggle { display: grid; gap: 4px; }
.gift-toggle small { font-size: .78rem; font-weight: 650; opacity: .78; line-height: 1.35; }
.gift-group { box-shadow: inset 0 5px 0 rgba(190,135,63,.9) !important; }

.gift-steps { width: min(680px,100%); display: grid; gap: 12px; margin: 6px auto 22px; padding: 0; list-style: none; text-align: left; }
.gift-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-bright); box-shadow: 0 3px 7px rgba(54,35,18,.05); }
.gift-steps b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: .82rem; }
.gift-steps span { font-size: 1rem; line-height: 1.45; font-weight: 650; }

.gift-note { width: min(660px,100%); margin: 0 auto 24px; padding: 13px 17px; border-radius: 14px; background: rgba(201,221,211,.42); color: var(--green); font-size: .94rem; line-height: 1.45; font-weight: 650; }
.gift-duration-label { margin: 4px 0 13px; color: var(--ink); font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 850; }
.gift-durations { width: min(420px,100%); margin: 0 auto 26px; grid-template-columns: 1fr 1fr; }
.gift-durations .choice { min-height: 60px; text-align: center; }

.gift-die { width: 118px; height: 118px; display: grid; place-items: center; margin: 4px auto 22px; border-radius: 26px; color: white; background: var(--green); box-shadow: 0 0 0 9px rgba(23,63,51,.09), var(--small-shadow); animation: gift-roll-in .26s ease-out; }
.gift-die span { font-size: 4rem; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
@keyframes gift-roll-in { from { transform: scale(.82) rotate(-7deg); opacity: .4; } to { transform: none; opacity: 1; } }

.gift-last { width: fit-content; max-width: 100%; margin: -6px auto 20px; padding: 11px 18px; border: 1px solid rgba(165,54,76,.35); border-radius: 14px; background: rgba(233,196,201,.4); color: var(--berry-dark); font-weight: 900; font-size: .95rem; }
.gift-bell { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 50%; color: var(--gold-pale); background: var(--green); font-size: 2.1rem; box-shadow: var(--small-shadow); }

.gift-preview-round b { background: var(--gold) !important; }
.gift-plan-row > div { width: 100%; min-height: 64px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; text-align: left; }
.gift-plan-row .plan-number { background: var(--gold); }

@media (max-width: 760px) {
  .gift-die { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 18px; }
  .gift-die span { font-size: 3.1rem; }
  .gift-steps li { padding: 12px 13px; gap: 10px; }
  .gift-steps span { font-size: .95rem; }
  .gift-durations { grid-template-columns: 1fr; }
  .gift-note { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   Home screen, Option C: the three ways in, as answers to "how long have you
   got?" rather than one button with two small links beside it. Alexandra's
   first real-device session found that the old layout read the two
   alternatives as side options, and that nothing told you the quick start
   plays in teams.
   --------------------------------------------------------------------------- */

/* The generic h1 clamp tops out at 6.5rem, which on an iPad in landscape ate
   enough height to push all three choices below the fold. The choices are the
   whole point of this screen.
   Scoped to tablet width and up on purpose: at phone width the big headline
   works and all three choices already fit, so it is left exactly as it was. */
.home-question { letter-spacing: -.045em; }

@media (min-width: 700px) {
  .home-question {
    font-size: clamp(2.8rem, 5.2vw, 4rem);
    margin-bottom: 18px;
  }
  .home-lead {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    margin-bottom: 22px;
  }
}

/* Phones only. A tester pressed the first option believing it was the whole
   app, and on an iPhone SE all three options sat below the fold: 409px of a
   667px screen went on the nav, the medallion, the eyebrow, the headline and
   the lead before the first choice appeared. On a phone the job of this
   screen is to show people their three choices, not to look handsome, so the
   headline shrinks, the medallion goes and the lead is a short version.
   Desktop and iPad keep all of it. */
.home-lead-short { display: none; }

@media (max-width: 699px) {
  .home-lead-full { display: none; }
  .home-lead-short { display: block; }
  .home-question { font-size: 2.4rem; margin-bottom: 14px; }
  .home-copy { padding: 20px 20px 24px; }
  .home-copy::before { display: none; }
}

.path-list { display: grid; gap: 11px; margin: 20px 0 0; }

.path {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 15px 16px;
  border: 1.5px solid rgba(23, 63, 51, .22);
  border-radius: 18px;
  background: var(--paper-bright);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.path:hover { border-color: rgba(23, 63, 51, .45); transform: translateY(-2px); }
.path:active { transform: translateY(1px); }

/* Used by the web demo only, where there is a single button and prominence
   cannot mislead. It was briefly on the app's quick-start option too, and a
   tester read the filled card as "the button" and the other two as
   decoration, pressed it, and never discovered she could set up her own
   session. The three options on the app's home screen are now identical. */
.path-lead { border-color: var(--green); background: var(--green); }

.path-dur {
  flex: none;
  width: 72px;
  white-space: nowrap;   /* the en-dash in "20-90" is a break opportunity */
  color: var(--berry);
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}
.path-dur small {
  display: block;
  margin-top: 3px;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.path-lead .path-dur { color: var(--gold-pale); }

.path-body { flex: 1; display: block; }
.path-body b { display: block; color: var(--green); font-size: .98rem; font-weight: 900; }
.path-body small { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; line-height: 1.35; font-weight: 650; }
.path-lead .path-body b { color: var(--paper-bright); }
.path-lead .path-body small { color: var(--mint); }

/* Said before the first game only, and only in team mode: knowing it is a team
   game and the room actually dividing are different things. */
.team-split-note {
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(201, 221, 211, .42);
  color: var(--green);
  font-size: .86rem;
  line-height: 1.4;
  font-weight: 650;
  text-align: left;
}
.team-split-note b { font-weight: 900; }

/* The demo's one honest line about what the paid app adds. Demo build only. */
.demo-upsell {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1.5px solid rgba(23, 63, 51, .2);
  border-radius: 18px;
  background: rgba(201, 221, 211, .34);
}
.demo-upsell p { margin: 0; color: var(--green); font-size: .88rem; line-height: 1.45; font-weight: 650; }
.demo-upsell p + p { margin-top: 6px; color: var(--muted); }
.demo-upsell b { font-weight: 900; }