/* JUST FUCKING PICK. — hand-painted island signage: marigold, longtail-ribbon pink, lagoon teal, deep-sea navy. */

:root {
  --bg: #FFC83D;
  --ink: #1A1F71;
  --paper: #FFF3D1;
  --hot: #FF3D7F;
  --sea: #00A79D;
  --orange: #FF7A1A;
  --muted: rgba(26, 31, 113, 0.68);
  --press: #1A1F71;

  /* wheel segments keep dark text in both themes */
  --seg-1: #FF3D7F; --seg-1-ink: #1A1F71;
  --seg-2: #00A79D; --seg-2-ink: #10134A;
  --seg-3: #FFF3D1; --seg-3-ink: #1A1F71;
  --seg-4: #FF7A1A; --seg-4-ink: #1A1F71;

  --display: 'Bowlby One', 'Arial Black', Impact, system-ui, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161A5C;
    --ink: #FFF3D1;
    --paper: #232878;
    --muted: rgba(255, 243, 209, 0.7);
    --press: #0A0C33;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161A5C; --ink: #FFF3D1; --paper: #232878; --muted: rgba(255, 243, 209, 0.7); --press: #0A0C33;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: inherit; }
html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
#app { width: 100%; max-width: 520px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }

/* ── layout ── */
.screen { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 28px; }
.home { gap: 0; padding-top: 22px; }
.center { text-align: center; }
.spacer { flex: 1; min-height: 140px; }

.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; }
.back {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%;
}
.back:active { background: rgba(0,0,0,.08); }
.topbar .wordmark { font-size: 15px; }

/* ── brand ── */
.masthead { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.wordmark { font-family: var(--display); font-size: 18px; line-height: 1; letter-spacing: .005em; white-space: nowrap; }
.wordmark.big { font-size: 22px; }
.place {
  font-family: var(--display); font-size: 12px; line-height: 1; white-space: nowrap;
  padding: 5px 9px 4px; border-radius: 999px; background: var(--ink); color: var(--bg);
  transform: rotate(-3deg);
}

/* ── type ── */
.mega {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 11.5vw, 60px);
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
  transform: rotate(-2deg);
  transform-origin: left center;
  text-shadow: 4px 4px 0 var(--hot);
}
.title { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 8vw, 38px); line-height: 1; margin: 18px 0 6px; }
.nos .fine { margin: 6px 0 14px; }
.prompt { font-family: var(--display); font-weight: 400; font-size: 19px; margin: 26px 0 12px; }

/* ── vibes: the first real question ── */
.vibes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vibe {
  min-height: 58px; padding: 10px 12px;
  border: 3px solid var(--press); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 0 var(--press);
  font-weight: 800; font-size: 16px; line-height: 1.1; text-align: left;
  transition: transform .08s ease, box-shadow .08s ease;
}
.vibe:nth-child(4n+2) { background: var(--sea); color: #10134A; }
.vibe:nth-child(4n+3) { background: var(--orange); color: #1A1F71; }
.vibe:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--press); }
.vibe:disabled { opacity: .4; box-shadow: none; cursor: default; background: transparent; color: var(--ink); }
.vibe small { display: block; font-weight: 600; font-size: 12px; margin-top: 2px; }
.vibe-any {
  grid-column: 1 / -1; background: var(--hot) !important; color: #1A1F71 !important;
  font-family: var(--display); font-weight: 400; font-size: 22px; text-align: center; min-height: 64px;
}
.home .link { margin-top: 14px; }
.home .fine { margin-top: 18px; }
.home .fine.stale { margin-top: 6px; }
.fine.legal { margin-top: 22px; }
.fine.legal a { color: inherit; }

/* first-visit analytics choice */
.consent {
  width: calc(100% - 24px); max-width: 496px; margin: 12px auto 0;
  background: var(--paper); color: var(--ink); border: 3px solid var(--press); border-radius: 16px;
  box-shadow: 0 6px 0 var(--press); padding: 12px 14px;
}
.consent p { margin: 0 0 10px; font-size: 15px; line-height: 1.35; }
.consent a { color: inherit; font-weight: 700; }
.consent-actions { display: flex; gap: 8px; }
.consent-btn {
  flex: 1; min-height: 44px; border: 2.5px solid var(--press); border-radius: 12px;
  background: transparent; color: var(--ink); font-weight: 800; font-size: 16px;
}
.consent-allow { background: var(--hot); color: #1A1F71; }
.vibe-tag {
  align-self: flex-start; margin-top: 8px;
  border: 2.5px solid var(--press); border-radius: 999px; padding: 6px 14px;
  background: var(--ink); color: var(--bg); font-weight: 800; font-size: 14px;
}
.group { font-size: 15px; font-weight: 800; margin: 20px 0 10px; }
.fine { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.lede { font-size: 19px; margin: 14px 0 24px; }

/* ── buttons: painted-sign slabs with a hard drop ── */
.stack { display: flex; flex-direction: column; gap: 14px; }
.btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 68px; padding: 14px 18px;
  font-family: var(--display); font-weight: 400; font-size: clamp(20px, 6vw, 26px); line-height: 1;
  color: var(--ink); text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--press);
  border-radius: 16px;
  box-shadow: 0 6px 0 var(--press);
  transition: transform .08s ease, box-shadow .08s ease;
  user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--press); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-eat, .btn-drink, .btn-hot { color: #1A1F71; }
.btn-eat { background: #FFF3D1; min-height: 84px; font-size: clamp(30px, 10vw, 40px); }
.btn-drink { background: var(--sea); min-height: 84px; font-size: clamp(30px, 10vw, 40px); }
.btn-hot { background: var(--hot); }
.btn-share { background: var(--sea); color: #10134A; }
.btn-plain { background: transparent; color: var(--ink); box-shadow: 0 6px 0 var(--press); }
.btn-eat, .btn-drink { justify-content: flex-start; padding-left: 24px; }
.btn-drink { transform: rotate(.6deg); }
.btn-eat { transform: rotate(-.6deg); }
.btn-eat:active, .btn-drink:active { transform: translateY(5px); }

.link {
  align-self: flex-start;
  background: none; border: 0; padding: 10px 0;
  font-weight: 700; font-size: 16px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.home .link, .result .link { align-self: center; }

/* ── segmented toggles ── */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 3px solid var(--press); border-radius: 999px; overflow: hidden;
  margin-top: 4px;
}
.segmented.small { margin-top: 10px; width: 78%; }
.seg-btn {
  border: 0; background: transparent; min-height: 46px;
  font-weight: 800; font-size: 16px;
}
.segmented.small .seg-btn { min-height: 38px; font-size: 14px; }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ── chips ── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  min-height: 44px; padding: 8px 15px;
  border: 2.5px solid var(--press); border-radius: 999px;
  background: var(--paper); color: #1A1F71;
  font-weight: 700; font-size: 16px;
  transition: transform .1s ease;
}
:root[data-theme="dark"] .chip { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip { color: var(--ink); } }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chips.nots .chip[aria-pressed="true"] {
  background: var(--hot); color: #1A1F71;
  text-decoration: line-through; text-decoration-thickness: 3px;
}
.more-panel[hidden] { display: none; }

/* ── sticky spin dock ── */
.dock {
  position: sticky; bottom: 0;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 3px solid var(--press);
}
.count { font-family: var(--display); font-size: 22px; margin: 0 0 12px; text-align: center; }

/* ── wheel ── */
.wheel-screen { align-items: stretch; gap: 6px; }
.wheel-slot { display: grid; place-items: center; padding: 26px 0 30px; flex: 1; }
.wheel-wrap { position: relative; width: min(92vw, 56vh, 470px); aspect-ratio: 1; cursor: pointer; }
.wheel {
  width: 100%; height: 100%; display: block; overflow: visible;
  will-change: transform;
  filter: drop-shadow(0 7px 0 var(--press));
}
.seg-label { font-family: var(--body); font-weight: 800; letter-spacing: -.01em; }
.pointer {
  position: absolute; left: 50%; top: -22px; width: 46px; margin-left: -23px;
  transform-origin: 50% 10%;
  filter: drop-shadow(0 3px 0 var(--press));
}
.pointer svg { display: block; width: 100%; }
.pointer path { fill: var(--hot); stroke: var(--press); stroke-width: 3.5; stroke-linejoin: round; }
.pointer.tick { animation: flick .14s ease-out; }
@keyframes flick { 0% { transform: rotate(0); } 35% { transform: rotate(-16deg); } 100% { transform: rotate(0); } }

/* ── result ── */
.result { gap: 0; }
.kicker { font-family: var(--display); font-size: 17px; margin: 10px 0 8px; color: var(--muted); }
.venue {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 12.5vw, 64px); line-height: .95; letter-spacing: -.015em;
  margin: 0 0 14px; overflow-wrap: anywhere;
  animation: slam .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes slam { from { transform: scale(1.25) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.badge {
  align-self: flex-start; margin: 0 0 12px; padding: 3px 10px;
  border: 2px dashed var(--ink); border-radius: 8px; font-size: 13px; font-weight: 800;
}
.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.status { margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.status-open::before, .status-closing_soon::before, .status-closed::before, .status-unknown::before {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px;
  border: 2px solid var(--press); vertical-align: 0;
}
.status-open::before { background: var(--sea); }
.status-closing_soon::before { background: var(--orange); }
.status-closed::before { background: var(--hot); }
.status-temporarily_closed { font-weight: 800; }
.status-temporarily_closed::before {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px;
  border: 2px solid var(--press); background: var(--hot); vertical-align: 0;
}
.closure-note { margin: 2px 0 6px 20px; color: var(--muted); font-size: 15px; }
.status-unknown { color: var(--muted); }
.status-unknown::before { background: transparent; border-style: dashed; }
.rating { margin: 2px 0 0; font-weight: 800; font-size: 17px; }
.star { color: var(--orange); }
.muted { color: var(--muted); font-weight: 600; }
.result .stack { margin-top: 26px; }
.shared .lede { margin: 18px 0 0; }
.rates { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.rate {
  flex: 1; min-height: 46px; border-radius: 999px;
  border: 2.5px solid var(--press); background: transparent;
  font-weight: 700; font-size: 15px;
}
.rate[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.result .link { margin-top: 10px; }

/* ── toast ── */
.toast {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--press); color: #FFF3D1; padding: 12px 20px; border-radius: 999px;
  font-weight: 800; z-index: 10; animation: pop .2s ease-out;
}
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes pop { from { transform: translate(-50%, 12px); opacity: 0; } }

/* screen entry: one quick move, only in response to the user */
#app > .screen { animation: enter .22s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }

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



/* ─────────────────────────────────────────────────────────────
   V2: fewer questions, bigger decisions, less clutter.
   ───────────────────────────────────────────────────────────── */
.v2-home { padding-top: 28px; }
.service-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.service-choice {
  min-height: 92px;
  justify-content: space-between;
  text-align: left;
  padding: 16px 20px;
  font-size: clamp(27px, 8.5vw, 38px);
}
.service-choice span { display: block; }
.service-choice small {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  max-width: 90px;
  text-align: right;
}
.service-eat { background: var(--paper); transform: rotate(-.5deg); }
.service-delivery { background: var(--sea); color: #10134A; transform: rotate(.45deg); }
.service-either { background: var(--hot); color: #1A1F71; transform: rotate(-.25deg); }
.service-choice:active { transform: translateY(5px); }
.home-links { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.home-links .link { margin: 0; font-size: 13px; }
.plan-tag {
  align-self: flex-start;
  margin-top: 8px;
  border: 2.5px solid var(--press);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 900;
  font-size: 13px;
}
.nots { margin-top: 12px; }
.nots .chip { min-height: 48px; font-weight: 900; }
.route-missing {
  margin: 0;
  padding: 14px 16px;
  border: 3px dashed var(--press);
  border-radius: 14px;
  font-weight: 800;
  line-height: 1.25;
}
.reactions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 24px;
}
.reaction-wrap { position: relative; min-width: 0; }
.reaction {
  width: 100%;
  min-height: 58px;
  padding: 9px 22px 9px 8px;
  border: 2.5px solid var(--press);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  font-size: 12px;
  line-height: 1.05;
}
.reaction[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.info-dot {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font-size: 15px;
  font-weight: 900;
}
.dish-callout {
  margin-top: 18px;
  padding: 13px 15px;
  border: 3px solid var(--press);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--press);
}
.dish-callout strong { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 5px; }
.dish-callout span { display:block; font-size:18px; font-weight:900; }
.dish-callout small { display:block; margin-top:6px; font-size:10px; font-weight:900; letter-spacing:.07em; color:var(--muted); }
.shit-list-screen .mega { margin-top: 18px; }
.shit-list { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.shit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 2.5px solid var(--press);
  border-radius: 14px;
  background: var(--paper);
  color: #1A1F71;
  font-weight: 900;
}
.mini-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 10px;
  border: 2px solid var(--press);
  border-radius: 10px;
  background: var(--hot);
  color: #1A1F71;
  font-size: 11px;
  font-weight: 900;
}
@media (max-width: 360px) {
  .reactions { grid-template-columns: 1fr; }
  .reaction { font-size: 14px; }
}


/* ─────────────────────────────────────────────────────────────
   V2 CLEAN: original JFP visual language, fewer competing elements.
   ───────────────────────────────────────────────────────────── */

/* Same JFP paint tin, rearranged between sessions. */
:root[data-palette="lagoon"] { --bg:#00A79D; --ink:#10134A; --paper:#FFF3D1; --hot:#FF3D7F; --sea:#FFC83D; --orange:#FF7A1A; --press:#10134A; --muted:rgba(16,19,74,.68); }
:root[data-palette="pink"] { --bg:#FF3D7F; --ink:#1A1F71; --paper:#FFF3D1; --hot:#FFC83D; --sea:#00A79D; --orange:#FF7A1A; --press:#1A1F71; --muted:rgba(26,31,113,.68); }
:root[data-palette="orange"] { --bg:#FF7A1A; --ink:#1A1F71; --paper:#FFF3D1; --hot:#FF3D7F; --sea:#00A79D; --orange:#FFC83D; --press:#1A1F71; --muted:rgba(26,31,113,.68); }

/* Secondary slabs still belong to the same painted-sign family. */
.btn-plain { background:var(--paper); color:var(--ink); }
.more-opinions {
  margin-top:22px;
  min-height:54px;
  padding:10px 16px;
  background:var(--sea);
  color:#10134A;
  font-size:clamp(16px,5vw,20px);
}
.more-panel { margin-top:12px; padding:2px 0 18px; }
.more-panel .group:first-child { margin-top:12px; }

/* Wheel stays the hero. Llama Brawl only appears after three rejected results. */
.wheel-tools { display:flex; justify-content:flex-end; min-height:36px; }
.sound-toggle {
  width:38px; height:38px; border:2.5px solid var(--press); border-radius:50%;
  background:var(--paper); color:#1A1F71; font-size:18px; box-shadow:0 3px 0 var(--press);
}

/* ── JFP llama mascot ── */
.jfp-llama {
  --llama-ink:#10134A;
  --llama-fur:#F3D79B;
  --llama-alt:#D89D55;
  --llama-hoof:#53311F;
  --llama-glove:var(--hot);
  --llama-band:var(--sea);
  display:inline-block;
  width:100%;
  max-width:160px;
  line-height:0;
  filter:drop-shadow(0 4px 0 rgba(16,19,74,.2));
}
.jfp-llama.variant-b { --llama-glove:var(--sea); --llama-band:var(--hot); }
.jfp-llama svg { display:block; width:100%; height:auto; overflow:visible; }
.jfp-llama.facing-left svg { transform:scaleX(-1); }
.llama-stroke { stroke:var(--llama-ink); stroke-width:4.5; stroke-linejoin:round; stroke-linecap:round; }
.llama-fur { fill:var(--llama-fur); }
.llama-alt { fill:var(--llama-alt); }
.llama-body-patch, .llama-neck-patch { fill:var(--llama-alt); opacity:.82; }
.llama-hoof { fill:var(--llama-hoof); stroke:var(--llama-ink); stroke-width:3; }
.llama-shadow { fill:rgba(16,19,74,.18); }
.llama-headband, .llama-headband-tail { fill:var(--llama-band); stroke:var(--llama-ink); stroke-width:3.2; stroke-linejoin:round; }
.llama-glove { fill:var(--llama-glove); }
.llama-glove-line, .llama-brow, .llama-mouth, .llama-scar { fill:none; stroke:var(--llama-ink); stroke-width:3.6; stroke-linecap:round; }
.llama-eye { fill:#FFF3D1; stroke:var(--llama-ink); stroke-width:2.6; }
.llama-pupil, .llama-nose { fill:var(--llama-ink); }
.llama-tooth { fill:#FFF3D1; stroke:var(--llama-ink); stroke-width:2; }
.llama-shades { display:none; fill:var(--llama-ink); stroke:var(--llama-ink); stroke-width:3; stroke-linecap:round; }
.llama-crown { display:none; fill:#FFC83D; stroke:var(--llama-ink); stroke-width:3.2; stroke-linejoin:round; }
.llama-scuff { display:none; fill:none; stroke:var(--hot); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.expression-smug .mouth-grit { display:none; }
.expression-smug .mouth-smug { display:block; }
.expression-angry .mouth-smug { display:none; }
.pose-victory .llama-crown, .pose-victory .llama-shades { display:block; }
.pose-victory .llama-head-group { transform-origin:132px 58px; animation:llama-head-smug .65s ease-in-out infinite alternate; }
@keyframes llama-head-smug { to { transform:rotate(-5deg) translateY(-2px); } }

/* ── Llama Brawl: exactly one fighter per restaurant ── */
.quickfire-screen { gap:0; }
.quickfire-screen .mega { margin-top:8px; }
.quickfire-screen .lede { margin:10px 0 18px; }
.quick-kicker {
  margin:12px 0 2px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-align:center;
}
.brawl-arena {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
  align-items:stretch;
  gap:6px;
  margin:6px 0 12px;
}
.brawl-choice {
  position:relative;
  min-width:0;
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:14px 10px 16px;
  border:3px solid var(--press);
  border-radius:18px;
  background:var(--paper);
  color:#1A1F71;
  box-shadow:0 6px 0 var(--press);
  overflow:visible;
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.brawl-challenger { background:var(--sea); color:#10134A; }
.brawl-choice:active:not(:disabled) { transform:translateY(5px); box-shadow:0 1px 0 var(--press); }
.brawl-choice-picked { background:var(--hot) !important; }
.brawl-fighter {
  display:block;
  width:min(34vw,146px);
  margin:-4px auto 6px;
  transform-origin:bottom center;
  will-change:transform;
}
.brawl-champion .brawl-fighter { animation:llama-idle-left .72s ease-in-out infinite alternate; }
.brawl-challenger .brawl-fighter { animation:llama-idle-right .78s ease-in-out infinite alternate; }
.brawl-name {
  display:block;
  width:100%;
  margin-top:auto;
  font-family:var(--display);
  font-size:clamp(18px,5vw,26px);
  line-height:.96;
  overflow-wrap:anywhere;
  text-align:center;
}
.quick-meta { display:block; margin-top:9px; font-weight:900; font-size:11px; line-height:1.15; text-align:center; }
.brawl-vs {
  position:relative;
  z-index:4;
  display:grid;
  place-items:center;
  align-self:center;
  min-height:70px;
}
.brawl-vs > span { font-family:var(--display); font-size:17px; transform:rotate(-8deg); }
.impact-star {
  position:absolute;
  z-index:7;
  display:grid;
  place-items:center;
  width:72px;
  height:58px;
  clip-path:polygon(50% 0,61% 26%,85% 8%,78% 36%,100% 43%,77% 55%,91% 82%,63% 69%,55% 100%,44% 72%,15% 91%,26% 60%,0 52%,27% 40%,8% 14%,39% 29%);
  background:var(--orange);
  color:#10134A;
  font-family:var(--display);
  font-size:14px;
  opacity:0;
  transform:scale(.15) rotate(-18deg);
  pointer-events:none;
}
@keyframes llama-idle-left { to { transform:translateY(-5px) rotate(-2deg); } }
@keyframes llama-idle-right { to { transform:translateY(-4px) rotate(2deg); } }
@keyframes llama-attack-left { 0%{transform:translateX(0) rotate(0)} 28%{transform:translateX(-8px) rotate(-5deg)} 60%{transform:translateX(54px) rotate(8deg) scale(1.08)} 100%{transform:translateX(7px) rotate(-1deg)} }
@keyframes llama-hit-right { 0%,42%{transform:translateX(0) rotate(0)} 68%{transform:translateX(32px) rotate(17deg) scale(.91)} 100%{transform:translateX(12px) rotate(9deg)} }
@keyframes llama-attack-right { 0%{transform:translateX(0) rotate(0)} 28%{transform:translateX(8px) rotate(5deg)} 60%{transform:translateX(-54px) rotate(-8deg) scale(1.08)} 100%{transform:translateX(-7px) rotate(1deg)} }
@keyframes llama-hit-left { 0%,42%{transform:translateX(0) rotate(0)} 68%{transform:translateX(-32px) rotate(-17deg) scale(.91)} 100%{transform:translateX(-12px) rotate(-9deg)} }
@keyframes llama-pow { 0%,35%{opacity:0;transform:scale(.15) rotate(-18deg)} 52%{opacity:1;transform:scale(1.2) rotate(8deg)} 78%{opacity:1;transform:scale(.9) rotate(-5deg)} 100%{opacity:0;transform:scale(.45) rotate(15deg)} }
.brawl-arena.is-fighting .brawl-fighter { animation-duration:.62s; animation-iteration-count:1; animation-fill-mode:both; }
.brawl-arena.win-left .brawl-champion .brawl-fighter { animation-name:llama-attack-left; }
.brawl-arena.win-left .brawl-challenger .brawl-fighter { animation-name:llama-hit-right; }
.brawl-arena.win-right .brawl-challenger .brawl-fighter { animation-name:llama-attack-right; }
.brawl-arena.win-right .brawl-champion .brawl-fighter { animation-name:llama-hit-left; }
.brawl-arena.is-fighting .impact-star { animation:llama-pow .62s ease-out both; }
.brawl-arena.win-left .brawl-challenger .llama-scuff,
.brawl-arena.win-right .brawl-champion .llama-scuff { display:block; }

.llama-pair { display:flex; align-items:center; justify-content:center; gap:2px; }
.llama-pair .jfp-llama { width:90px; }
.llama-pair-bolt { font-size:30px; line-height:1; transform:rotate(-8deg); }
.llama-pair-compact .jfp-llama { width:66px; }
.llama-pair-compact .llama-pair-bolt { font-size:24px; }

/* Winner gag is brief and doesn't replace the restaurant name as the hero. */
.brawl-victory {
  position:relative;
  align-self:center;
  width:min(38vw,150px);
  margin:-6px 0 -4px;
  animation:victory-bounce .68s cubic-bezier(.2,1.5,.4,1) both;
}
.brawl-victory .jfp-llama { width:100%; max-width:none; }
.brawl-victory::after {
  content:'CHAMPION';
  position:absolute;
  right:-13px;
  bottom:13px;
  padding:4px 7px 3px;
  border:2.5px solid #10134A;
  background:var(--hot);
  color:#10134A;
  font-family:var(--display);
  font-size:10px;
  transform:rotate(-8deg);
  box-shadow:2px 3px 0 #10134A;
}
@keyframes victory-bounce { 0%{opacity:0;transform:translateY(14px) scale(.72) rotate(7deg)} 70%{opacity:1;transform:translateY(-4px) scale(1.05) rotate(-3deg)} 100%{transform:none} }
.confetti { position:absolute; inset:0; pointer-events:none; }
.confetti::before, .confetti::after { content:''; position:absolute; width:8px; height:16px; border-radius:2px; }
.confetti-a::before { left:-10px; top:32px; background:var(--sea); transform:rotate(24deg); }
.confetti-a::after { right:-8px; top:10px; background:var(--orange); transform:rotate(-30deg); }
.confetti-b::before { left:4px; top:-3px; background:var(--hot); transform:rotate(65deg); }
.confetti-b::after { right:13px; top:44px; background:#FFC83D; transform:rotate(12deg); }

/* ── Result: three clear, equal decisions ── */
.result-actions { margin-top:24px; }
.result-actions .btn,
.result-decision {
  width:100%;
  min-height:68px;
  font-size:clamp(20px,6vw,26px);
}
.result-actions .btn-menu, .btn-menu {
  min-height:52px;
  font-size:clamp(15px,4vw,19px);
  background:#FF7A1A;
  color:#10134A;
  box-shadow:0 5px 0 var(--press);
}
/* Respin has its own unmistakable colour, without changing other plain buttons. */
.result-actions .btn[data-action="again"] {
  background:#FFF3D1;
  color:#1A1F71;
}
.route-missing { margin:18px 0 0; font-weight:800; text-align:center; }

/* Preference memory stays useful without becoming a second navigation bar. */
.reactions {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
}
.reaction {
  width:auto;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border:2px solid var(--press);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font-size:10px;
  font-weight:900;
  line-height:1;
}
.reaction[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.report-link { align-self:center; margin-top:13px !important; font-size:12px; opacity:.72; }

.delivery-alts {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:-4px;
}
.order-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:8px 12px;
  border:2.5px solid var(--press);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 3px 0 var(--press);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}
.order-pill:active { transform:translateY(2px); box-shadow:0 1px 0 var(--press); }
.provider-dot { width:9px; height:9px; border-radius:50%; background:var(--ink); }
.provider-whatsapp .provider-dot { background:#25D366; }
.provider-kohme .provider-dot { background:var(--orange); }
.provider-facebook_messenger .provider-dot, .provider-messenger .provider-dot { background:#168AFF; }
.provider-line .provider-dot { background:#06C755; }
.provider-phone .provider-dot, .provider-phone_call .provider-dot { background:var(--ink); }
.order-primary.provider-whatsapp { background:#25D366; color:#10134A; }

/* Modal treatment keeps the original hard-border language. */
.modal-scrim {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:rgba(6,7,28,.72); backdrop-filter:blur(3px);
}
.modal-card {
  position:relative; width:min(100%,460px); padding:22px;
  border:4px solid var(--press); border-radius:22px;
  background:var(--bg); color:var(--ink); box-shadow:0 10px 0 var(--press);
  animation:modal-pop .18s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes modal-pop { from { opacity:0; transform:scale(.88) rotate(-2deg); } to { opacity:1; transform:none; } }
.modal-card h2 { margin:0 0 8px; font-family:var(--display); font-size:clamp(29px,9vw,42px); line-height:.96; font-weight:400; }
.modal-card p { margin:0 0 18px; font-size:17px; font-weight:700; line-height:1.3; }
.modal-llamas { margin:-12px 0 4px; }
.modal-close {
  position:absolute; right:10px; top:8px; width:40px; height:40px;
  border:0; border-radius:50%; background:var(--paper); color:var(--ink);
  font-size:28px; line-height:1; font-weight:900;
}
.report-options { display:grid; gap:9px; }
.report-option {
  min-height:52px; padding:10px 14px; border:3px solid var(--press); border-radius:14px;
  background:var(--paper); color:var(--ink); box-shadow:0 4px 0 var(--press);
  font-weight:900; font-size:16px; text-align:left;
}
.report-option:active { transform:translateY(3px); box-shadow:0 1px 0 var(--press); }

@media (max-width:380px) {
  .brawl-arena { grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); gap:4px; }
  .brawl-choice { min-height:270px; padding:10px 7px 13px; }
  .brawl-fighter { width:min(35vw,128px); }
  .brawl-name { font-size:clamp(17px,5vw,22px); }
  .modal-card { padding:18px; }
}

@media (prefers-reduced-motion: reduce) {
  .brawl-champion .brawl-fighter,
  .brawl-challenger .brawl-fighter,
  .pose-victory .llama-head-group,
  .brawl-victory { animation:none !important; }
  .brawl-arena.is-fighting .brawl-fighter { animation:none !important; }
  .brawl-arena.is-fighting .impact-star { opacity:1; transform:none; animation:none !important; }
}


/* V2 CLEAN 3: positive food intent before optional vetoes. */
.chips.wants { margin-bottom: 18px; }
.chip.want, .chip.want-anything { font-weight: 900; }
.hard-nos-heading { margin-top: 22px; }