/* ============================================================================
   THE PROBABLE PIG — styles
   Mobile-first. Dark, filmic, extremely pink.
   ========================================================================== */

/* ---- fonts (self-hosted, no CDN, works forever) ------------------------- */
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Grotesk';
  src: url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Grotesk';
  src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- tokens -------------------------------------------------------------- */
:root {
  --ink:       #251223;
  --ink-deep:  #170b16;
  --cream:     #fff2e9;
  --cream-dim: #e6cfd6;
  --pink:      #ff7fb2;
  --pink-hot:  #ff3d86;
  --blush:     #ffc4da;
  --mint:      #74efd2;
  --gold:      #ffd166;

  --display: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --body:    'Grotesk', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --radius: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --panel-bg: linear-gradient(168deg, #4a1d3f, #24102128);
  --shadow-card: 0 1px 0 rgba(255,255,255,.07) inset, 0 24px 60px -24px rgba(0,0,0,.75);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink-deep);
  color: var(--cream);
  font-family: var(--body);
  font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(120% 80% at 50% -10%, #5a2148 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 20%, #43163c 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 60%, #2e1430 0%, transparent 55%);
  background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: .95; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
em { font-style: normal; color: var(--pink); }
kbd {
  font-family: var(--body); font-size: .85em; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: .1em .45em;
}
::selection { background: var(--pink-hot); color: #fff; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 8px; }

/* ---- layers -------------------------------------------------------------- */
#stage {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; touch-action: none;
}
.fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
body.raining #stage { z-index: 55; }
/* on the board the pig is a game piece, so it stands in front of the squares */
body.board-focus #stage { z-index: 30; }

.grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none;
  opacity: .34; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%, 2%) }
  40% { transform: translate(2%, -3%) }
  60% { transform: translate(-2%, -2%) }
  80% { transform: translate(3%, 1%) }
}

.bit { position: absolute; top: 0; left: 0; font-size: 1.5rem; line-height: 1; will-change: transform, opacity; }

/* ============================================================================
   LANDING — "Are you a pig?"
   ========================================================================== */
.page-landing { display: grid; place-items: end center; min-height: 100svh; overflow: hidden; }

.ask {
  position: relative; z-index: 10;
  width: 100%; max-width: 36rem; text-align: center;
  padding: 0 var(--pad) clamp(2.5rem, 9vh, 5rem);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
body.is-leaving .ask { opacity: 0; transform: translateY(-24px) scale(.97); }

.ask__eyebrow {
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--blush); opacity: .7; margin-bottom: 1rem;
  animation: riseIn .8s .05s var(--ease-back) backwards;
}
.ask__question { display: grid; margin-bottom: .9rem; }
.ask__line {
  display: block; line-height: .86; letter-spacing: -.04em;
  padding-bottom: .14em; margin-bottom: -.12em;
  background: linear-gradient(172deg, #fff 8%, var(--blush) 48%, var(--pink-hot) 105%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: riseIn .85s var(--ease-back) backwards;
}
.ask__line:nth-child(1) { font-size: clamp(2rem, 11vw, 4rem); animation-delay: .12s; }
.ask__line--big { font-size: clamp(3.4rem, 20vw, 7.5rem); animation-delay: .2s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } }

.ask__note {
  color: var(--cream-dim); font-size: .92rem; margin-bottom: 1.8rem;
  animation: riseIn .8s .3s var(--ease-back) backwards;
}

.ask__answers {
  display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
  animation: riseIn .8s .38s var(--ease-back) backwards;
}
.answer {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  min-width: 8.5rem; padding: .95rem 1.8rem; border-radius: 999px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .28s var(--ease-back), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.answer--yes {
  border: none; color: var(--ink-deep);
  background: linear-gradient(180deg, #ffd0e2, var(--pink));
  box-shadow: 0 14px 30px -14px rgba(255,61,134,.95);
}
.answer--no {
  border: 2px solid rgba(255,255,255,.28); background: transparent; color: var(--cream);
}
.answer:hover { transform: translateY(-3px) scale(1.04); }
.answer:active { transform: scale(.94); }
.answer--no.is-converted {
  border-color: transparent; color: var(--ink-deep);
  background: linear-gradient(180deg, #ffd0e2, var(--pink));
  box-shadow: 0 14px 30px -14px rgba(255,61,134,.95);
}

.ask__foot {
  margin: 1.6rem 0 0; min-height: 2.4em;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,242,233,.45);
  animation: riseIn .8s .5s backwards;
}

/* ============================================================================
   HUD
   ========================================================================== */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem var(--pad); padding-top: max(.8rem, env(safe-area-inset-top));
  backdrop-filter: blur(14px) saturate(1.3);
  background: linear-gradient(180deg, rgba(23,11,22,.86), rgba(23,11,22,0));
  animation: riseIn .7s .2s var(--ease) backwards;
}
.hud__brand {
  display: flex; align-items: center; gap: .6rem;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  text-align: left; -webkit-tap-highlight-color: transparent;
}
.hud__snout { font-size: 1.5rem; transition: transform .4s var(--ease-back); }
.hud__brand:hover .hud__snout { transform: rotate(-14deg) scale(1.18); }
.hud__brand:active .hud__snout { transform: scale(.8); }
.hud__brand-text { display: grid; }
.hud__brand-name {
  font-family: var(--display); font-weight: 700; line-height: 1.1;
  font-size: clamp(.6rem, 2.6vw, .78rem); letter-spacing: .14em; white-space: nowrap;
}
.hud__brand-sub { font-size: clamp(.5rem, 2.2vw, .58rem); letter-spacing: .22em; color: var(--pink); white-space: nowrap; }

.hud__meters { display: flex; gap: .5rem; }
.hud__meter {
  display: grid; justify-items: center; min-width: 3.4rem;
  padding: .3rem .55rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
}
.hud__meter--btn { cursor: pointer; font: inherit; transition: background .3s, transform .3s var(--ease-back); }
.hud__meter--btn:hover { background: rgba(255,127,178,.2); transform: translateY(-2px); }
.hud__meter-val { font-family: var(--display); font-weight: 700; font-size: .95rem; line-height: 1; color: var(--cream); }
.hud__meter-val.is-bumping { animation: bump .45s var(--ease-back); }
@keyframes bump { 50% { transform: scale(1.5); color: var(--pink-hot); } }
.hud__meter-key { font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); opacity: .7; }

/* ============================================================================
   SHARED BITS
   ========================================================================== */
#content { position: relative; z-index: 10; }

.eyebrow {
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pink); opacity: .9; margin-bottom: .9rem;
}

.btn {
  --btn-bg: transparent;
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  padding: .85rem 1.4rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: var(--btn-bg); color: var(--cream); text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease-back), background .3s, border-color .3s, color .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn--primary {
  --btn-bg: linear-gradient(180deg, #ffd0e2, var(--pink));
  color: var(--ink-deep); border-color: transparent;
  box-shadow: 0 14px 30px -16px rgba(255,61,134,.95);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: var(--pink); }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: scale(.94); }
.btn__arrow { transition: transform .4s var(--ease-back); }
.btn:hover .btn__arrow { transform: translateY(4px); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================================
   INTRO
   ========================================================================== */
.intro {
  position: relative; min-height: 100svh;
  display: grid; align-content: end;
  padding: 5rem var(--pad) clamp(2rem, 7vh, 5rem);
  gap: .5rem;
}
/* on narrow screens the pig sits behind the headline, so it needs a scrim;
   on wide ones it stands off to the side and shouldn't be dimmed at all */
.intro::before {
  content: ''; position: absolute; inset: 20% 0 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(20,8,19,.74) 32%, rgba(20,8,19,.94) 60%);
}
@media (min-width: 900px) { .intro::before { display: none; } }
.intro > * { position: relative; z-index: 1; }

.intro__title {
  font-size: clamp(2.4rem, 12.5vw, 6.4rem);
  line-height: .84; letter-spacing: -.05em;
  margin: 0 0 .7rem; text-transform: uppercase;
}
.intro__title .ln { display: block; overflow: hidden; }
.intro__title .ch {
  display: inline-block; will-change: transform;
  padding-bottom: .12em; margin-bottom: -.12em;
  transform: translateY(110%) rotate(6deg);
  animation: charIn .85s var(--ease-back) forwards;
  background: linear-gradient(170deg, #fff 20%, var(--blush) 60%, var(--pink-hot) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.intro__title .ch--space { width: .28em; }
@keyframes charIn { to { transform: none; } }

.intro__sub { font-size: clamp(1rem, .95rem + .5vw, 1.2rem); color: var(--cream-dim); max-width: 32rem; }

.rules { list-style: none; margin: .3rem 0 1rem; padding: 0; display: grid; gap: .5rem; max-width: 34rem; }
.rules__item {
  display: flex; gap: .7rem; align-items: baseline;
  font-size: .9rem; color: var(--cream-dim);
}
.rules__no {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  background: rgba(255,127,178,.2); border: 1px solid rgba(255,127,178,.4); color: var(--blush);
}

.countdown { display: flex; align-items: flex-end; gap: clamp(.2rem, 1.5vw, .7rem); margin: .6rem 0 .2rem; }
.countdown__unit {
  display: grid; justify-items: center; min-width: clamp(3rem, 14vw, 5rem);
  padding: .5rem .3rem .4rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.055);
  backdrop-filter: blur(8px);
}
.countdown__num {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(1.4rem, 6.5vw, 2.5rem); font-variant-numeric: tabular-nums;
}
.countdown__num.is-tick { animation: tick .5s var(--ease-back); }
@keyframes tick { 0% { transform: translateY(-45%) scale(.85); opacity: .2; filter: blur(2px); } }
.countdown__key { font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
.countdown__sep { font-family: var(--display); font-size: 1.3rem; opacity: .3; padding-bottom: .9rem; }
.countdown__label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); opacity: .7; }

.intro__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }

/* ---- ticker -------------------------------------------------------------- */
.ticker {
  overflow: hidden; border-block: 1px solid rgba(255,255,255,.12);
  background: rgba(255,127,178,.07); padding: .7rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex; width: max-content; gap: 2.4rem;
  animation: marquee 34s linear infinite;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.85rem, 2.6vw, 1.1rem);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--blush);
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- sections ------------------------------------------------------------ */
.section { padding: clamp(3.5rem, 12vh, 8rem) var(--pad); position: relative; }
.section__head { max-width: 42rem; margin-bottom: clamp(1.8rem, 5vh, 3rem); }
.section__title { font-size: clamp(2.1rem, 8.5vw, 4.2rem); margin-bottom: 1rem; }
.section__lede { color: var(--cream-dim); max-width: 33rem; }
.section__foot { margin-top: 1.6rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,242,233,.45); }

/* ============================================================================
   THE BOARD
   ========================================================================== */
.boardwrap { position: relative; }

.boardpath { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.boardpath__seg {
  stroke: rgba(255,255,255,.2); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 0.5 16;
}
.boardpath__seg.is-walked { stroke: rgba(255,127,178,.85); }

.tiles {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 2.5vw, 1.4rem);
}
@media (min-width: 640px)  { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

.tile {
  opacity: 0; transform: translateY(22px) scale(.96);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.tile.is-in { opacity: 1; transform: none; }

.tile__btn {
  position: relative; width: 100%; min-height: clamp(9rem, 30vw, 11.5rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: .85rem .9rem 1rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--cream);
  border: 2px solid rgba(255,255,255,.14); border-radius: var(--radius);
  background: linear-gradient(168deg, rgba(66,30,58,.92), rgba(30,14,28,.94));
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease-back), border-color .3s, background .3s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent; overflow: hidden;
}
.tile__btn:hover { transform: translateY(-5px); border-color: rgba(255,127,178,.55); }
.tile__btn:active { transform: scale(.97); }

.tile__no {
  position: absolute; right: .4rem; bottom: -.9rem;
  font-family: var(--display); font-weight: 700; font-size: 3.6rem; line-height: 1;
  color: rgba(255,255,255,.06); pointer-events: none;
}
.tile__today {
  align-self: flex-end; order: -1;
  font-family: var(--display); font-weight: 700; font-size: .55rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--gold); color: #40230a; border-radius: 99px; padding: .2rem .5rem;
  margin-bottom: .1rem;
}
.tile__date { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
.tile__name {
  font-family: var(--display); font-weight: 700; line-height: 1.08;
  font-size: clamp(.95rem, 3.4vw, 1.15rem); margin: .2rem 0 .4rem;
}
.tile__state {
  margin-top: auto; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,242,233,.5);
}
.tile__state--open { color: var(--gold); }
.tile__state--solved { color: var(--mint); }

.tile--locked .tile__name { color: rgba(255,242,233,.4); }
.tile--locked .tile__btn { border-style: dashed; border-color: rgba(255,255,255,.14); }
.tile--open .tile__btn {
  border-color: rgba(255,209,102,.5);
  background: linear-gradient(168deg, rgba(92,45,72,.94), rgba(38,18,32,.95));
}
.tile--open .tile__btn::after {
  content: '?'; position: absolute; inset: auto .6rem .2rem auto;
  font-family: var(--display); font-weight: 700; font-size: 3.4rem;
  color: rgba(255,209,102,.14);
}
.tile--solved .tile__btn { border-color: rgba(116,239,210,.35); }
.tile--today .tile__btn { box-shadow: var(--shadow-card), 0 0 0 3px rgba(255,209,102,.22); }

/* the square the pig is standing on gets room for the pig */
.tile--here .tile__btn { padding-right: 44%; border-style: solid; border-color: rgba(255,127,178,.75); }
@media (max-width: 639px) { .tile--here .tile__btn { padding-right: 50%; } }
.tile--here .tile__no { opacity: 0; }

/* ============================================================================
   THE PANEL
   ========================================================================== */
.panel { position: fixed; inset: 0; z-index: 80; }
.panel[hidden] { display: none; }

.panel__scrim {
  position: absolute; inset: 0; background: rgba(10,4,10,.72);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s;
}
.panel.is-open .panel__scrim { opacity: 1; }

.panel__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 92svh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1.6rem var(--pad) calc(2rem + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  border-top: 2px solid rgba(255,127,178,.4);
  background: linear-gradient(168deg, #4a1d3f, #22101f 70%);
  box-shadow: 0 -20px 60px -20px #000;
  transform: translateY(101%);
  transition: transform .42s var(--ease);
}
.panel.is-open .panel__sheet { transform: none; }

@media (min-width: 760px) {
  .panel__sheet {
    left: 50%; bottom: auto; top: 50%; right: auto;
    width: min(38rem, 92vw); max-height: 86svh;
    border-radius: 26px; border: 2px solid rgba(255,127,178,.4);
    padding: 2rem 2.2rem 2.2rem;
    transform: translate(-50%, -46%) scale(.96); opacity: 0;
    transition: transform .38s var(--ease-back), opacity .3s;
  }
  .panel.is-open .panel__sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.panel__close {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: var(--cream); font-size: .9rem; cursor: pointer;
  transition: background .3s, transform .3s var(--ease-back);
}
.panel__close:hover { background: var(--pink); color: var(--ink-deep); transform: rotate(90deg); }

.panel__eyebrow { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--pink); margin-bottom: .5rem; }
.panel__title { font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: .7rem; }
.panel__lede { color: var(--cream-dim); }
.panel__sub { font-size: .78rem; letter-spacing: .06em; color: rgba(255,242,233,.5); margin: 1.2rem 0 .5rem; }
.panel__rebus { font-size: clamp(1.6rem, 6vw, 2rem); letter-spacing: .1em; margin: 0 0 1rem; }
.panel__snout { font-size: 3rem; text-align: center; margin: 1rem 0 0; }

.riddle {
  white-space: pre-line; font-size: clamp(1rem, 3.6vw, 1.12rem); line-height: 1.7;
  padding: 1rem 1.1rem; margin-bottom: 1.2rem;
  border-left: 3px solid var(--pink); border-radius: 0 14px 14px 0;
  background: rgba(0,0,0,.24);
}

.guess__label { display: block; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); margin-bottom: .4rem; }
.guess__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.guess__input {
  flex: 1 1 10rem; min-width: 0;
  font: inherit; color: var(--cream);
  padding: .8rem 1rem; border-radius: 14px;
  border: 2px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3);
}
.guess__input::placeholder { color: rgba(255,242,233,.32); }
.guess__input:focus { outline: none; border-color: var(--pink); }
.guess__go {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  padding: .8rem 1.4rem; border-radius: 14px; border: none; cursor: pointer;
  color: var(--ink-deep); background: linear-gradient(180deg, #ffd0e2, var(--pink));
  transition: transform .25s var(--ease-back);
}
.guess__go:hover { transform: translateY(-2px); }
.guess__go:active { transform: scale(.95); }
.guess__msg { font-size: .85rem; color: var(--cream-dim); margin: .7rem 0 0; min-height: 1.4em; }
.guess__msg.is-wrong { color: var(--gold); }

.hints { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hint {
  border: 1px solid rgba(255,255,255,.15); border-radius: 12px;
  background: rgba(0,0,0,.28); padding: .55rem .75rem;
  font-size: .84rem; line-height: 1.45; cursor: pointer;
  display: flex; gap: .55rem; align-items: flex-start;
  transition: background .3s, border-color .3s, transform .3s var(--ease-back);
}
.hint:hover { border-color: var(--pink); transform: translateX(3px); }
.hint__no { font-family: var(--display); font-weight: 700; color: var(--pink); flex: none; }
.hint__text { color: var(--cream-dim); }
.hint.is-hidden .hint__text { filter: blur(5px); opacity: .6; user-select: none; }
.hint.is-shown { background: rgba(255,127,178,.14); border-color: rgba(255,127,178,.4); cursor: default; }
.hint.is-shown .hint__text { color: var(--cream); animation: hintIn .5s var(--ease-back); }
@keyframes hintIn { from { opacity: 0; transform: translateY(-6px); filter: blur(6px); } }

.panel__give {
  margin-top: 1.2rem; width: 100%;
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .7rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px dashed rgba(255,255,255,.3); background: transparent; color: var(--cream-dim);
  transition: color .3s, border-color .3s;
}
.panel__give:hover { color: var(--cream); border-color: var(--gold); }

/* the day's plans */
.plans { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .1rem; }
.plan {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px dashed rgba(255,255,255,.14);
  animation: planIn .5s var(--ease-back) backwards;
}
.plan:nth-child(1) { animation-delay: .05s }
.plan:nth-child(2) { animation-delay: .12s }
.plan:nth-child(3) { animation-delay: .19s }
.plan:nth-child(4) { animation-delay: .26s }
.plan:nth-child(5) { animation-delay: .33s }
.plan:last-child { border-bottom: 0; }
@keyframes planIn { from { opacity: 0; transform: translateX(-10px); } }
.plan__time {
  flex: none; min-width: 4.2rem;
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  color: var(--gold); letter-spacing: .04em;
}
.plan__text { display: grid; gap: .15rem; }
.plan__title { font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.2; }
.plan__note { font-size: .84rem; color: var(--cream-dim); line-height: 1.5; }

.panel__meta { padding-top: .2rem; }
.panel__meta-row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim);
}
.panel__meta-row span:last-child { color: var(--cream); text-transform: none; letter-spacing: 0; text-align: right; }

.meter { margin-top: 1rem; }
.meter__track { height: 7px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pink), var(--gold)); }
.meter__label { display: flex; justify-content: space-between; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); margin-top: .4rem; }

/* ============================================================================
   ORACLE / LETTER / FOOT
   ========================================================================== */
.section--oracle { text-align: center; }
.section--oracle .section__head, .section--oracle .section__lede { margin-inline: auto; }
.oracle { display: grid; justify-items: center; gap: 1.3rem; max-width: 34rem; margin-inline: auto; }
.oracle__orb {
  width: clamp(6.5rem, 28vw, 9rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(2.8rem, 12vw, 4rem);
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.72), rgba(255,127,178,.6) 40%, rgba(150,40,96,.6) 74%, rgba(30,8,24,.5));
  border: 1px solid rgba(255,255,255,.22); cursor: pointer;
  box-shadow: 0 30px 60px -24px rgba(255,61,134,.95), 0 0 44px -6px rgba(255,127,178,.35);
  animation: float 5s ease-in-out infinite;
}
.oracle__orb.is-thinking { animation: shake .5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes shake {
  0%,100% { transform: translate(0,0) rotate(0) }
  25% { transform: translate(-6px,3px) rotate(-6deg) }
  75% { transform: translate(6px,-3px) rotate(6deg) }
}
.oracle__text {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 1vw, 1.5rem); line-height: 1.35;
  min-height: 4.5em; margin: 0;
}
.oracle__text::after { content: '▌'; color: var(--pink); animation: caret 1s steps(2) infinite; }
.oracle__text.is-done::after { content: ''; }
@keyframes caret { 50% { opacity: 0 } }

.section--letter { padding-bottom: clamp(2.5rem, 7vh, 4rem); }
.letter {
  position: relative; max-width: 38rem; margin-inline: auto; text-align: center;
  padding: clamp(1.6rem, 5vw, 2.8rem);
  border-radius: 26px; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(165deg, rgba(86,34,68,.9), rgba(33,14,30,.92));
  box-shadow: var(--shadow-card);
}
.letter__title { font-size: clamp(1.8rem, 6.5vw, 2.8rem); margin-bottom: 1.1rem; }
.letter__body p { color: var(--cream-dim); font-size: 1rem; line-height: 1.75; }
.letter__sign { font-family: var(--display); font-weight: 600; color: var(--pink); margin-bottom: 0; white-space: pre-line; }
.letter__heart {
  margin-top: 1.3rem; font-size: 1.6rem; line-height: 1;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07);
  cursor: pointer; transition: transform .3s var(--ease-back), background .3s;
}
.letter__heart:hover { transform: scale(1.15) rotate(-8deg); background: rgba(255,61,134,.25); }
.letter__heart:active { transform: scale(.85); }

.foot {
  padding: 2rem var(--pad) calc(3rem + env(safe-area-inset-bottom));
  text-align: center; border-top: 1px solid rgba(255,255,255,.08);
}
.foot__line { font-size: .74rem; color: rgba(255,242,233,.45); margin-bottom: .5rem; }
.foot__line--tiny { font-size: .66rem; letter-spacing: .08em; }

/* ---- toast --------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom));
  z-index: 90; transform: translate(-50%, 140%);
  max-width: min(90vw, 26rem); text-align: center;
  padding: .7rem 1.1rem; border-radius: 999px;
  background: rgba(20,8,18,.94); border: 1px solid rgba(255,127,178,.45);
  backdrop-filter: blur(10px);
  font-family: var(--display); font-weight: 600; font-size: .85rem;
  box-shadow: 0 18px 40px -20px #000;
  transition: transform .5s var(--ease-back), opacity .4s;
  opacity: 0; pointer-events: none;
}
.toast.is-up { transform: translate(-50%, 0); opacity: 1; }

/* ---- pig mode (50 boops) -------------------------------------------------- */
body.pig-mode #content, body.pig-mode .hud { animation: hue 8s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }

/* ---- no WebGL ------------------------------------------------------------- */
body.no-webgl::before {
  content: '🐷'; position: fixed; z-index: 3; left: 50%; top: 24%;
  transform: translate(-50%, -50%); font-size: clamp(5rem, 26vw, 12rem);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); pointer-events: none;
}
body.no-webgl.page-board::before { top: 18%; font-size: clamp(3.5rem, 14vw, 7rem); }

.noscript { padding: 4rem var(--pad); text-align: center; }

/* ---- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  .grain { display: none; }
  .reveal, .tile { opacity: 1; transform: none; }
  .intro__title .ch { transform: none; }
}