/* Dinner Dice – navy + gold theme (mockup), dark "food photo" hero */
:root {
  --bg: #0f1a2e;           /* deep navy */
  --bg-2: #132139;
  --card: #16243d;
  --card-2: #1c2d4a;
  --text: #f4efe4;
  --muted: #b9c3d6;        /* ~8:1 on --card */
  --amber: #d4a64a;        /* r4 warm gold (was var(--amber)): borders, icons, primary accents; 7.7:1 on --bg */
  --amber-2: #e6be6a;      /* r4 warm gold highlight (was var(--amber-2)): accent text; 9.9:1 on --bg, 8.8:1 on --card */
  --amber-deep: #c9973f;   /* r4 deep gold: gradient bottoms and darker borders only (not used for small text) */
  --amber-ink: #0f1a2e;    /* text on gold */
  --border: #2b3e60;
  --gold-glow: rgba(212, 166, 74, .55);
  --mild: #8fd6a8;
  --medium: #e0c38a;
  --hot: #ff8a7a;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(2, 2, 3, 0.45);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(120% 60% at 50% 0%, #0d1e39 0%, var(--bg) 60%) no-repeat, var(--bg);
  color: var(--text);
  line-height: 1.45;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.hidden { display: none !important; }
button { font-family: inherit; }

/* ---------- Contrast hardening: never rely on browser defaults ----------
   The app is dark-only. color-scheme: dark (here + <meta>) makes Chrome / Safari draw native controls,
   scrollbars, date/time pickers and datalist popups dark even when the phone is in light mode.
   Base rules use :where() (zero specificity) so every component rule below still wins. */
:root { color-scheme: dark; }
@media (prefers-color-scheme: light) { :root { color-scheme: dark; } html { background-color: var(--bg); color: var(--text); } }
html, body { color: var(--text); background-color: var(--bg); }
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, strong, em, small, label, legend, summary, caption, th, td, figcaption, blockquote, pre, code, output) { color: inherit; }
:where(button) { color: var(--text); background-color: transparent; border-color: var(--border); font: inherit; }
:where(input, select, textarea) { color: var(--text); background-color: #0c1422; border: 1.5px solid var(--border); font: inherit; caret-color: var(--amber-2); }
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="time"], input[type="date"], textarea) { -webkit-appearance: none; appearance: none; border-radius: 12px; padding: 8px 10px; }
:where(input[type="search"])::-webkit-search-cancel-button { filter: invert(1) brightness(1.4); }
:where(input[type="time"], input[type="date"])::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); }
select option, select optgroup, option, optgroup { background-color: #141e30; color: #f6f1e6; }
::placeholder { color: #7f8ca3; opacity: 1; }          /* ~5.8:1 on #0c1422 */
::-webkit-input-placeholder { color: #7f8ca3; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 1000px #0c1422 inset; transition: background-color 9999s;
}
input:disabled, select:disabled, textarea:disabled { -webkit-text-fill-color: #9ca7b9; color: #9ca7b9; opacity: 1; }
::file-selector-button { background: transparent; color: var(--amber-2); border: 1.5px solid var(--amber); border-radius: 10px; padding: 6px 12px; margin-right: 10px; font: inherit; }
::-webkit-file-upload-button { background: transparent; color: var(--amber-2); border: 1.5px solid var(--amber); border-radius: 10px; padding: 6px 12px; font: inherit; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--amber); }
:where(a) { color: var(--amber-2); }
:where(a):visited { color: var(--amber-2); }
:where(a):hover, :where(a):focus-visible { color: #ead6af; }
:where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--amber-2); outline-offset: 2px; }
:where(button):disabled, :where(.btn)[aria-disabled="true"] { color: #9ca7b9; border-color: #324c7b; cursor: not-allowed; }
::selection { background: var(--amber); color: var(--amber-ink); }
table { color: var(--text); border-collapse: collapse; }
:where(th, td) { border-color: var(--border); }
hr { border-color: var(--border); }
/* every surface sets its own text color explicitly */
.card, .sheet, .sheet-body, .toast, .plan, .feed-post, .creator-card, .store-row, .quiz, .share-card, .combo-card, .stat, .social-row, .notice, .tips, .tonight-card, .result-card { color: var(--text); }

/* ---------- Hero ---------- */
/* Home: the photo (1205x1450, D-dice logo in its upper-middle) is a FULL-PAGE fixed background, object-fit: cover,
   cropped at the sides (never through the logo). Content scrolls over it. */
.hero { position: relative; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; background: transparent; }
body[data-view="roll"] { background: transparent; }
/* (r3.1) the Home photo now lives in the body-level fixed layer #home-bg (see "Home background" below) */
.hero-art {
  position: relative; margin: 0 auto; width: min(100%, 600px);
  /* the Home photo (#home-bg) is var(--hb-w) wide and 1.2037x as tall; logo = 10-46% of its height, steak plate = 53-80%.
     The title starts just under the plate (~79% of the photo height), so logo AND steak stay visible. */
  height: calc(var(--hb-w) * 0.95); padding-top: env(safe-area-inset-top);
}
.hero-title {
  position: relative; width: min(100%, 600px); margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
.hero-content {
  width: 100%; max-width: 600px; margin: 0 auto;
  padding: 10px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
}
.hero-kicker {
  margin: 0; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--amber-2);
  text-shadow: 0 1px 8px rgba(2, 2, 3,.6);
}
.hero h1 {
  margin: 2px 0 0; font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 8.6vw, 2.7rem);
  line-height: 1; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(2, 2, 3,.7);
}
.tagline { margin: 4px 0 0; color: #d5dae4; font-size: .98rem; text-shadow: 0 1px 8px rgba(2, 2, 3,.8); }

/* Region chips (big, tappable) */
/* one horizontally scrollable row; the selected chip is scrolled into view */
.region-chips {
  display: flex; gap: 8px; margin: 0 -18px 12px; padding: 2px 18px 6px; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.region-chips::-webkit-scrollbar { display: none; }
.region-chip { flex: none; scroll-snap-align: center; white-space: nowrap; }
.region-chip {
  min-height: 52px; padding: 8px 10px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(239, 225, 196, .28);
  background: rgba(8, 16, 30, .62); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.region-chip .n { font-weight: 500; font-size: .85rem; color: var(--muted); }
.region-chip[aria-pressed="true"] {
  background: rgba(17, 38, 74, .78); border: 2px solid var(--amber); color: var(--amber-2);
  box-shadow: 0 0 0 3px rgba(212, 166, 74,.18), 0 0 18px rgba(212, 166, 74,.35);
}
.region-chip[aria-pressed="true"] .n { color: var(--amber-2); opacity: .85; }

.roll-row { display: flex; gap: 12px; align-items: stretch; }
.roll-cta {
  flex: 1; min-height: 76px; border: 0; border-radius: 18px; cursor: pointer;
  background: rgba(8, 16, 30, .72); border: 2px solid var(--amber);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--amber-2); font-size: 1.6rem; font-weight: 800; letter-spacing: .01em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 0 22px rgba(212, 166, 74,.28), inset 0 0 14px rgba(212, 166, 74,.10);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.roll-cta:hover { background: rgba(17, 38, 74, .8); }
.roll-cta:active { transform: translateY(1px) scale(.99); background: rgba(21, 45, 88, .85); }
.roll-cta:disabled { border-color: #324c7b; color: #8a95a8; box-shadow: none; cursor: not-allowed; }
.pool-info { color: var(--muted); }
.pool-info { font-size: .82rem; font-weight: 600; opacity: .8; letter-spacing: 0; }

/* Die */
.die {
  width: 76px; height: 76px; flex: none; border-radius: 18px; cursor: pointer; padding: 12px;
  border: 1.5px solid rgba(239, 225, 196,.25);
  background: linear-gradient(145deg, #1d304f, #0e1727);
  box-shadow: 0 8px 20px rgba(2, 2, 3,.5), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-tap-highlight-color: transparent;
}
.pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; }
.pip {
  width: 12px; height: 12px; border-radius: 50%; align-self: center; justify-self: center;
  background: radial-gradient(circle at 35% 30%, #eddcba, var(--amber) 60%, #2a5db5);
}
.die.rolling { animation: tumble .9s cubic-bezier(.3,.7,.4,1) both; }
@keyframes tumble {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  25%  { transform: translateY(-26px) rotate(140deg) scale(1.06); }
  55%  { transform: translateY(-6px) rotate(250deg) scale(.95); }
  80%  { transform: translateY(-12px) rotate(330deg) scale(1.03); }
  100% { transform: translateY(0) rotate(360deg) scale(1); }
}

/* ---------- Layout ---------- */
main { max-width: 600px; margin: 0 auto; padding: 0 16px; }
.view { padding-top: 4px; }
.card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin: 14px 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 10px 18px; border-radius: 14px; font-size: 1.02rem; font-weight: 700;
  border: 1.5px solid transparent; cursor: pointer; color: var(--text); background: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: scale(.98); }
:focus-visible { outline: 3px solid var(--amber-2); outline-offset: 2px; }
.btn-primary { background: rgba(212, 166, 74,.06); border: 2px solid var(--amber); color: var(--amber-2); box-shadow: 0 0 14px rgba(212, 166, 74,.15); }
.btn-primary:hover, .btn-primary:active { background: rgba(212, 166, 74,.14); }
.btn-ghost { border-color: var(--border); background: rgba(255,255,255,.03); }
.btn-ghost:hover { border-color: #2f4a79; }
.btn-link { color: var(--amber-2); padding: 8px 0; min-height: 44px; text-decoration: underline; font-weight: 600; }
.btn-danger-outline { color: var(--hot); border-color: #1c3d76; margin-top: 8px; }
.btn-wide { display: flex; width: 100%; margin-top: 10px; }
.back-link { margin-top: 4px; }
.count { font-weight: 500; color: var(--muted); }

/* Result */
.result-card { text-align: center; }
.result-card.pop { animation: pop .35s ease-out; }
@keyframes pop { from { transform: translateY(8px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.result-emoji { font-size: 2.8rem; line-height: 1; }
.result-label { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }
.result-name { margin: 4px 0 10px; font-family: var(--serif); font-size: 1.85rem; line-height: 1.15; }
.result-tags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #1f3150; font-size: .88rem; font-weight: 700; color: var(--text); }
.tag-region { background: rgba(212, 166, 74,.16); color: var(--amber-2); }
.spice-Mild { background: rgba(143,214,168,.14); color: var(--mild); }
.spice-Medium { background: rgba(224, 195, 138,.14); color: var(--medium); }
.spice-Hot { background: rgba(255,138,122,.15); color: var(--hot); }
.result-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
@media (min-width: 420px) { .result-actions { grid-template-columns: 1fr 1fr; } }
.empty-card { text-align: center; color: var(--muted); }
.empty-card strong { color: var(--text); display: block; font-size: 1.1rem; margin-bottom: 4px; }

/* More filters (tucked away) */
.more-filters { margin: 12px 0 0; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.02); }
.more-filters summary {
  cursor: pointer; min-height: 50px; padding: 0 16px; display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--muted); list-style: none;
}
.more-filters summary::-webkit-details-marker { display: none; }
.more-filters summary::before { content: "⚙︎"; color: var(--amber); }
.more-filters summary::after { content: "▾"; margin-left: auto; transition: transform .2s; }
.more-filters[open] summary::after { transform: rotate(180deg); }
.filter-summary { font-weight: 500; font-size: .92rem; }
.filters-body { padding: 0 16px 10px; }
.filter-title { font-size: .8rem; color: var(--muted); margin: 10px 0 8px; text-transform: uppercase; letter-spacing: .1em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--text); font-size: .96rem; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip[aria-pressed="true"] { background: #142646; border: 2px solid var(--amber); color: var(--amber-2); box-shadow: 0 0 10px rgba(212, 166, 74,.25); }
.chips-small { margin-top: 8px; }
.chips-small .chip { min-height: 40px; padding: 6px 12px; font-size: .9rem; }

/* Meals form + list */
.meal-form h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.4rem; }
.meal-form label { display: block; font-weight: 700; margin: 14px 0 6px; }
.opt { font-weight: 500; color: var(--muted); font-size: .9rem; }
input[type="text"], input[type="search"], select, textarea {
  width: 100%; min-height: 50px; padding: 10px 12px; font-size: 16px; /* 16px avoids iOS zoom */
  border: 1.5px solid var(--border); border-radius: 12px; background: #0c1422; color: var(--text); font-family: inherit;
}
input::placeholder, textarea::placeholder { color: #7f8ca3; opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); }
.form-error { color: var(--hot); min-height: 1.2em; margin: 8px 0 0; font-weight: 600; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }
.form-actions .btn { flex: 1; }
.meal-list { list-style: none; padding: 0; margin: 0; }
.meal-item {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 10px 10px 14px; margin-bottom: 10px;
}
.meal-emoji { font-size: 1.6rem; }
.meal-info { flex: 1; min-width: 0; }
.meal-info .name { font-weight: 700; overflow-wrap: anywhere; }
.meal-info .meta { color: var(--muted); font-size: .88rem; }
.meal-actions { display: flex; gap: 6px; }
.icon-btn {
  min-width: 44px; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--card-2); font-size: 1.05rem; cursor: pointer; color: var(--text);
}
.small-note { color: var(--muted); font-size: .9rem; text-align: center; }

/* Cook sheet */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(2, 2, 3,.6); }
.sheet-panel {
  position: relative; width: 100%; max-width: 620px; max-height: 92vh; max-height: 92dvh;
  background: var(--bg-2); border: 1px solid var(--border); border-bottom: 0;
  border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  animation: slideup .25s ease-out; padding-bottom: env(safe-area-inset-bottom);
}
@keyframes slideup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) { .sheet { align-items: center; } .sheet-panel { border-radius: 22px; border-bottom: 1px solid var(--border); } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; border-bottom: 1px solid var(--border); }
.sheet-head h2 { flex: 1; margin: 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 24px; }
.sheet-body h3 { margin: 18px 0 6px; color: var(--amber-2); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; }
.servings { display: inline-block; margin-top: 8px; font-weight: 700; }
.ingredients { list-style: none; padding: 0; margin: 0; }
.ingredients li { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.ingredients li:last-child { border-bottom: 0; }
.ing-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ing-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--amber); }
.ing-text { flex: 1; }
.ing-row input:checked + .ing-text .ing-name { text-decoration: line-through; color: var(--muted); }
.badge { display: inline-block; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; text-transform: lowercase; }
.badge-budget { background: rgba(143,214,168,.15); color: var(--mild); }
.badge-special { background: rgba(224, 195, 138,.15); color: var(--medium); }
.swap { display: block; font-size: .9rem; color: var(--muted); margin-top: 3px; }
.ing-note { display: block; font-size: .9rem; color: var(--muted); }
.steps { padding-left: 1.4em; margin: 0; }
.steps li { margin-bottom: 8px; }
.steps li::marker { color: var(--amber); font-weight: 800; }
.tips { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-size: .9rem; color: var(--muted); margin-top: 16px; }
.note { background: rgba(212, 166, 74,.12); color: #ebd9b5; border-radius: 12px; padding: 12px; font-size: .95rem; }
.sheet-body textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
.legend { font-size: .86rem; color: var(--muted); margin: 4px 0 4px; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: #0d1b32; border: 1.5px solid var(--amber); color: var(--amber-2); padding: 12px 18px; border-radius: 12px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 30; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
body.sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .die.rolling, .result-card.pop, .sheet-panel { animation: none; }
}

/* ---------- v5 additions: tiers, For You, Tonight's Pick, tools, quiz, feed, creators ---------- */
:root { --gold: var(--amber); --gold-2: var(--amber-2); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.streak { font-weight: 800; font-size: .9rem; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--amber); color: var(--amber-2); background: rgba(8, 16, 30,.6); }
.upsell { display: block; margin: 10px auto 0; background: rgba(8, 16, 30,.55); border: 1px solid rgba(212, 166, 74,.5); color: var(--amber-2);
  border-radius: 999px; padding: 8px 14px; font-size: .9rem; font-weight: 700; cursor: pointer; }
.btn-pro { background: rgba(212, 166, 74,.06); border: 2px solid var(--gold); color: var(--gold-2); box-shadow: 0 0 14px rgba(212, 166, 74,.15); }
.btn-pro:hover { background: rgba(212, 166, 74,.14); }
.gold-lock { color: var(--gold-2); font-size: .85em; font-weight: 800; }
.lock { opacity: .8; font-size: .85em; }
.tag-pro { background: rgba(212, 166, 74,.16); color: var(--gold-2); border: 1px solid rgba(212, 166, 74,.5); }
.tag-pro.small { font-size: .7rem; padding: 1px 7px; }
.tag-group { background: rgba(143,214,168,.12); color: var(--mild); }
.btn-link.inline { min-height: 0; padding: 0; }
.invisible { visibility: hidden; }
.center { text-align: center; }

/* photos (emoji fallback stays underneath) */
.result-photo, .sheet-photo, .thumb, .tonight-photo, .combo-photo, .feed-photo {
  position: relative; overflow: hidden; background: #18253c; display: flex; align-items: center; justify-content: center;
}
.result-photo img, .sheet-photo img, .thumb img, .tonight-photo img, .combo-photo img, .feed-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-emoji { font-size: 2.4rem; }
.result-photo { margin: -18px -18px 12px; height: 210px; border-radius: var(--radius) var(--radius) 0 0; }
.sheet-photo { height: 180px; border-radius: 14px; margin: 8px 0; }
.thumb { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.thumb .photo-emoji { font-size: 1.5rem; }
.meal-item.locked { opacity: .7; }
.meal-info .desc { color: var(--muted); font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result-desc { color: #cfd5e0; margin: 10px 0 0; }
.tagline-line { color: var(--amber-2); font-weight: 700; margin: 8px 0 0; font-size: .95rem; }
.cute-line { margin: 10px 0 0; color: #ffc2d4; }
.macro-badge { display: inline-block; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--mild); color: var(--mild); font-weight: 800; }
.chef-tips { text-align: left; margin-top: 12px; padding: 12px; border: 1.5px solid rgba(212, 166, 74,.55); border-radius: 12px; background: rgba(212, 166, 74,.05); }
.chef-tips p { margin: 4px 0; font-size: .93rem; }
.chef-teaser { margin-top: 12px; width: 100%; background: none; border: 1.5px dashed rgba(212, 166, 74,.5); color: var(--muted); border-radius: 12px; padding: 10px; cursor: pointer; font: inherit; }
.feedback-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.fb-btn { min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.order-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.order-links .btn { text-decoration: none; text-align: center; font-size: .95rem; padding: 10px; }
.order-links.small .btn { min-height: 40px; font-size: .82rem; padding: 6px; border-width: 1.5px; }
.result-actions .order-links { grid-column: 1 / -1; }
.any-place { grid-column: 1 / -1; font-size: .88rem; color: var(--muted); display: flex; gap: 8px; align-items: center; justify-content: center; }
.grab-card { background: var(--card); border: 1.5px solid var(--amber); border-radius: 14px; padding: 12px 14px; }
.grab-card p { margin: 6px 0; }

/* section header / footer */
.region-head { margin-top: 12px; }
.region-title { font-family: var(--serif); font-size: 1.35rem; margin: 6px 0 4px; }
.tips-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 0 12px; margin: 8px 0; background: rgba(255,255,255,.02); }
.tips-card summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--amber-2); }
.tips-card ul { margin: 0 0 10px; padding-left: 0; list-style: none; }
.tips-card li { margin: 6px 0; font-size: .92rem; }
.region-footer { color: var(--muted); font-size: .88rem; text-align: center; margin: 18px 8px 0; padding: 10px; border-top: 1px dashed var(--border); }
.order-tools { margin-top: 12px; }
.craving-card { margin-top: 10px; padding: 12px; border: 1.5px solid var(--border); border-radius: 14px; display: grid; gap: 8px; }
#craving .craving-card { margin-top: 0; }
.combo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.combo-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 8px; display: grid; gap: 6px; }
.combo-photo { height: 80px; border-radius: 10px; }
.combo-name { font-weight: 700; font-size: .92rem; }

/* Tonight's Pick */
.tonight-card { border-color: rgba(212, 166, 74,.55); }
.tonight-row { display: flex; gap: 12px; align-items: center; }
.tonight-photo { width: 84px; height: 84px; border-radius: 14px; flex: none; }
.tonight-label { margin: 0; color: var(--amber-2); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.tonight-name { margin: 2px 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.tonight-info .legend { margin: 0; }
.tonight-actions { display: grid; grid-template-columns: 1fr 60px; gap: 8px; margin-top: 12px; }
.tonight-go { font-size: 1.15rem; min-height: 56px; }

/* recipe icons */
.ing-icon { width: 1.6em; text-align: center; flex: none; }
.steps { list-style: none; padding-left: 0; counter-reset: st; }
.steps li { display: flex; gap: 10px; align-items: flex-start; counter-increment: st; }
.step-icon { flex: none; width: 2em; height: 2em; border-radius: 50%; border: 1.5px solid var(--amber); display: inline-flex; align-items: center; justify-content: center; }
.sub-head { margin: 14px 0 4px; color: var(--amber-2); }
.note { margin-top: 12px; }

/* paywall */
.paywall-hero { width: 100%; height: 180px; object-fit: cover; object-position: center 24%; border-radius: 14px; margin-top: 8px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 360px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; border: 1.5px solid var(--amber); border-radius: 16px; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.plan h3 { margin: 6px 0 0; font-size: .98rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.plan .price { margin: 0; font-weight: 800; color: var(--amber-2); font-size: 1.1rem; }
.plan ul { list-style: none; margin: 0; padding: 0; font-size: .84rem; color: var(--muted); flex: 1; }
.plan li { margin: 4px 0; }
.plan-best { border-color: var(--gold); box-shadow: 0 0 18px rgba(212, 166, 74,.2); }
.plan-best .price { color: var(--gold-2); }
.plan-focus { outline: 2px solid var(--amber-2); outline-offset: 2px; }
.best-badge { position: absolute; top: -11px; right: 10px; background: var(--bg-2); border: 1.5px solid var(--gold); color: var(--gold-2); font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.plan-btn { min-height: 46px; font-size: .86rem; padding: 8px; }
.plan-btn:disabled { opacity: .6; }
.demo-note { text-align: center; color: var(--muted); font-size: .88rem; margin: 12px 0 4px; }

/* settings */
.settings-card h2 { margin: 0 0 4px; font-family: var(--serif); }
.settings-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.settings-row .btn { flex: 1; }
.reminder-row input[type="time"] { width: auto; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 12px; background: #0c1422; color: var(--text); font-size: 16px; }
.switch { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.switch input { width: 22px; height: 22px; accent-color: var(--amber); }

/* Chef Pro tools */
.tool-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; }
.tool-tabs .chip { flex: none; min-height: 40px; padding: 6px 12px; font-size: .88rem; }
.plan-list { list-style: none; padding: 0; margin: 12px 0; }
.plan-row { display: grid; grid-template-columns: 74px 1fr 44px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.plan-day { color: var(--amber-2); font-weight: 800; font-size: .86rem; }
.plan-dish { text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 0; }
.fridge-add { display: flex; gap: 8px; margin: 10px 0; }
.fridge-add .btn { flex: none; }
.fridge-card { display: flex; gap: 12px; align-items: center; }
.kitchen-tips { list-style: none; padding: 0; margin: 0; }
.kitchen-tips li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.kitchen-tips p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.kt-icon { font-size: 1.4rem; }

/* quiz */
.quiz { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.quiz-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.quiz-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 9, 17,.35), rgba(4, 9, 17,.92) 55%, var(--bg)); }
.quiz-panel { position: relative; width: 100%; max-width: 600px; max-height: 92dvh; display: flex; flex-direction: column; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
.quiz-top { display: flex; align-items: center; justify-content: space-between; }
.quiz-dots { display: flex; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--amber); }
.dot.on { background: var(--amber); } .dot.done { background: rgba(212, 166, 74,.45); }
.quiz-title { font-family: var(--serif); font-size: 2rem; margin: 6px 0 2px; }
.quiz-sub { color: var(--muted); margin: 0 0 12px; }
.quiz-body { overflow-y: auto; flex: 1; min-height: 0; }
.quiz-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; max-height: 42dvh; overflow-y: auto; }
.big-chip { min-height: 50px; font-size: 1rem; }
.quiz-body .chips { margin-bottom: 6px; }
.quiz-body input[type="text"] { margin-top: 6px; }
.quiz-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 14px; }

/* feed */
.feed-title { font-family: var(--serif); margin: 8px 0 4px; }
.demo-banner { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border: 1.5px dashed var(--amber); border-radius: 999px; color: var(--amber-2); font-size: .82rem; font-weight: 700; }
.feed-filters { margin: 10px 0; }
.feed-list { list-style: none; padding: 0; margin: 0; }
.feed-post { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin-bottom: 12px; }
.feed-head { display: flex; gap: 10px; align-items: center; }
.feed-avatar { font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--amber); display: flex; align-items: center; justify-content: center; flex: none; }
.feed-meta { flex: 1; min-width: 0; }
.feed-meta .who { font-weight: 800; }
.feed-meta .where { color: var(--muted); font-size: .82rem; }
.feed-photo { height: 170px; border-radius: 12px; margin: 10px 0; }
.feed-dish { background: none; border: 0; color: var(--amber-2); font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; padding: 0; text-align: left; }
.stars { color: var(--amber-2); letter-spacing: 2px; }
.feed-note { margin: 6px 0; }
.feed-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.feed-actions .chip { min-height: 38px; padding: 4px 10px; font-size: .85rem; }
.trending { margin-top: 14px; }
.trend-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.trend-chip { flex: none; display: flex; gap: 6px; align-items: center; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.share-card { border: 1.5px solid var(--amber); border-radius: 16px; padding: 14px; margin: 10px 0; }
.share-card h3 { margin: 0 0 6px; }
.share-card label { display: block; font-weight: 700; margin: 10px 0 4px; }
.emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-pick .chip { min-height: 40px; padding: 4px 10px; font-size: 1.1rem; }
.star-pick { display: flex; gap: 4px; }
.star-pick .chip { min-height: 40px; padding: 4px 10px; }
.preview { border: 1.5px dashed var(--amber); border-radius: 14px; padding: 10px; margin: 10px 0; }
textarea.short { min-height: 70px; }

/* creators */
.creator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.creator-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 12px; text-align: center; cursor: pointer; color: var(--text); font: inherit; }
.creator-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: 2rem; border: 2px solid var(--amber); background: #18253c; }
.creator-avatar.big { width: 84px; height: 84px; font-size: 2.6rem; }
.verified { color: #7cc4ff; font-weight: 800; font-size: .82rem; }
.creator-sub { color: var(--muted); font-size: .82rem; }
.locked-post { position: relative; }
.locked-post .blur { filter: blur(7px); pointer-events: none; user-select: none; }
.lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(8, 16, 30,.35); border-radius: 16px; text-align: center; padding: 10px; }
.lock-overlay .btn { min-height: 40px; font-size: .88rem; }
.plan-popular { border-color: var(--gold); }
.meal-slot { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--amber-2); }
.progress { height: 10px; border-radius: 999px; border: 1.5px solid var(--amber); overflow: hidden; margin: 4px 0; }
.progress > span { display: block; height: 100%; background: var(--amber); }
.progress.ok { border-color: var(--mild); } .progress.ok > span { background: var(--mild); }
.social-row { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin: 8px 0; }
.social-row .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.split-bar { display: flex; height: 26px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--amber); font-size: .8rem; font-weight: 800; }
.split-bar span { display: flex; align-items: center; justify-content: center; }
.split-bar .c { background: rgba(143,214,168,.25); color: var(--mild); } .split-bar .a { background: rgba(212, 166, 74,.2); color: var(--amber-2); }
.notice { border: 1.5px solid var(--medium); border-radius: 12px; padding: 10px; color: var(--medium); margin: 8px 0; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.stat b { display: block; font-size: 1.2rem; color: var(--amber-2); }

/* ---------- Where to buy 📍 ---------- */
.where-chip { margin: 2px 0 6px 40px; font-size: .78rem; padding: 4px 10px; }
.store-search { position: relative; margin-bottom: 10px; }
.store-search input { width: 100%; }
.suggest { list-style: none; margin: 4px 0 0; padding: 0; }
.suggest-item { display: block; width: 100%; text-align: left; background: transparent; color: inherit; border: 1px solid var(--line, #1f3150); border-radius: 10px; padding: 8px 10px; margin-top: 4px; font: inherit; cursor: pointer; }
.suggest-item.free { border-style: dashed; opacity: .85; }
.store-map { height: 240px; border-radius: 14px; overflow: hidden; margin: 10px 0; background: #18253b; }
.store-list { list-style: none; padding: 0; margin: 0; }
.store-row { border: 1px solid var(--line, #1f3150); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
.store-row .top { display: flex; justify-content: space-between; gap: 8px; }
.store-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.store-actions .btn { flex: 1; text-align: center; padding: 8px; font-size: .85rem; }
.stock-badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; margin: 6px 0 4px; }
.stock-in, .stock-verified-in { color: #5fd38d; }
.stock-out, .stock-verified-out { color: #ff7a7a; }
.stock-unknown { color: #98a4b9; }
.stock-mixed { color: #debf82; }
.pin { background: transparent; border: 0; }
.pin-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0f192a; border: 2px solid currentColor; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Leaflet in the dark theme (selectors beat leaflet.css, which loads later) ---------- */
.store-map.leaflet-container { background: #18253b; color: var(--text); font: inherit; }
.store-map .leaflet-popup-content-wrapper, .store-map .leaflet-popup-tip { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.store-map .leaflet-popup-content-wrapper { border: 1px solid var(--border); }
.store-map a.leaflet-popup-close-button { color: var(--muted); }
.store-map .leaflet-bar a, .store-map .leaflet-bar a:hover { background-color: var(--card); color: var(--text); border-bottom-color: var(--border); }
.store-map .leaflet-bar { border-color: var(--border); }
.store-map.leaflet-container .leaflet-control-attribution { background: rgba(15, 26, 46, .88); color: var(--muted); }
.store-map .leaflet-control-attribution a, .store-map .leaflet-control-attribution a:visited { color: var(--amber-2); }
.die { color: var(--amber); }
/* Dark custom checkboxes (native ones turn white on light-mode devices that ignore color-scheme) */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; flex: none; margin: 0; cursor: pointer;
  border: 2px solid var(--amber); border-radius: 6px; background: #0c1422; display: inline-grid; place-content: center; vertical-align: middle;
}
input[type="checkbox"]::before {
  content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .12s;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: var(--amber-ink);
}
input[type="checkbox"]:checked { background: var(--amber); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled { border-color: #324c7b; cursor: not-allowed; }

/* =====================================================================
   Navy + gold layout (mockup): tab bar, Map tab, Discover/Orders/Profile, intro, desktop frame
   ===================================================================== */
:root { --tabbar-h: 66px; --gold: var(--amber); --gold-2: var(--amber-2); --navy: #0f1a2e; --navy-2: #16243d; }
body { padding-bottom: calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom)); background: radial-gradient(120% 60% at 50% 0%, #182a4a 0%, var(--bg) 62%) no-repeat, var(--bg); }
body:not([data-view="roll"]) .hero { display: none; }
.tab-title { font-family: var(--serif); font-size: 1.7rem; margin: calc(14px + env(safe-area-inset-top)) 0 10px; color: var(--text); }
.toast { bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); }

/* bottom tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 16;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  max-width: 640px; margin: 0 auto; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 6px env(safe-area-inset-bottom);
  background: rgba(19, 31, 54, .97); border-top: 1px solid rgba(212, 166, 74, .45); border-radius: 22px 22px 0 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -10px 30px rgba(3, 7, 15, .55);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h);
  background: transparent; border: 0; color: #b9c3d6; font: inherit; font-size: .78rem; cursor: pointer; position: relative;
}
.tab svg { width: 25px; height: 25px; }
.tab[aria-current="page"] { color: var(--gold-2); }
.tab[aria-current="page"]::after { content: ""; position: absolute; bottom: 7px; width: 22px; height: 2px; border-radius: 2px; background: var(--gold); }
.tab-discover { align-self: stretch; height: calc(var(--tabbar-h) + 18px); margin-top: -18px; border-radius: 26px 26px 0 0;
  background-color: var(--amber); background-image: linear-gradient(180deg, var(--amber-2), var(--amber-deep)); color: var(--navy); font-weight: 700; box-shadow: 0 -4px 18px rgba(212, 166, 74, .35); }
.tab-discover svg { width: 30px; height: 30px; }
.tab-discover[aria-current="page"] { color: var(--navy); }
.tab-discover[aria-current="page"]::after { background: var(--navy); }
.tab:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -4px; }

/* Discover */
.discover-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; margin: 6px 0 16px;
  padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--gold); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.dc-icon { font-size: 1.8rem; } .dc-go { color: var(--gold-2); font-size: 1.6rem; }
/* Orders / Profile */
.order-card { padding: 14px; } .order-name { display: block; margin: 8px 0 4px; font-size: 1.1rem; }
.craving-card { padding: 12px 14px; margin: 10px 0; }
.profile-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.profile-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--gold); font-size: 1.6rem; }

/* ---------- Map tab ---------- */
.map-view { position: fixed; inset: 0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)) 0; z-index: 6; max-width: 640px; margin: 0 auto; padding: 0; overflow: hidden; background: #0f1a2e; }
.places-map { position: absolute; inset: 0; background: #0f1a2e; }
/* realistic street map: OSM / CARTO Voyager tiles in their real colors (no tint), like Apple Maps */
.places-map[data-tiles] .leaflet-tile-pane { filter: none; }
.places-map.leaflet-container { background: #0f1a2e; font: inherit; color: var(--text); }
.places-map.leaflet-container .leaflet-control-attribution { background: rgba(15, 26, 46, .9); color: #b9c3d6; font-size: 10px; margin-right: 92px; border-radius: 8px 8px 0 0; }
.places-map .leaflet-control-attribution a, .places-map .leaflet-control-attribution a:visited { color: var(--gold-2); }
.map-top { position: absolute; top: 0; left: 0; right: 0; z-index: 500; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 12px 10px; background: linear-gradient(180deg, rgba(15, 26, 46, .92), rgba(15, 26, 46, 0)); }
.map-logo { display: flex; align-items: center; gap: 6px; color: #f4efe4; font-size: .95rem; line-height: 1.02; font-weight: 600; }
.logo-die { width: 32px; height: 32px; color: var(--gold); }
.map-search { position: relative; display: flex; align-items: center; height: 44px; border-radius: 22px; background: rgba(22, 36, 61, .96); border: 1px solid #2b3e60; padding: 0 10px; color: #b9c3d6; }
.map-search > svg { width: 18px; height: 18px; flex: none; }
.map-search input[type="search"] { border: 0; background: transparent; min-height: 40px; padding: 0 6px; font-size: 15px; color: var(--text); width: 100%; }
.map-search input[type="search"]::placeholder { color: #b9c3d6; }
.map-search input[type="search"]:focus { box-shadow: none; }
.map-profile { width: 44px; height: 44px; border-radius: 50%; background: rgba(22, 36, 61, .96); border: 1px solid #2b3e60; color: var(--gold-2); display: grid; place-items: center; cursor: pointer; }
.map-profile svg { width: 22px; height: 22px; }
.map-suggest { position: absolute; top: 48px; left: -60px; right: -52px; max-height: 60vh; overflow: auto; padding: 8px; border-radius: 16px; background: #16243d; border: 1px solid var(--gold); box-shadow: var(--shadow); }
.map-suggest .suggest-item { display: flex; align-items: center; gap: 8px; color: var(--text); border-color: #2b3e60; }
.map-suggest .ico { width: 18px; height: 18px; color: var(--gold); flex: none; }
.sg-head { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); margin: 6px 4px 2px; font-weight: 700; }
.sg-empty { margin: 4px; }
/* right category rail */
.map-rail { position: absolute; right: 0; top: calc(78px + env(safe-area-inset-top)); z-index: 500; width: 84px; max-height: calc(100% - 120px); overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; background: rgba(19, 31, 54, .96); border: 1px solid #2b3e60; border-right: 0; border-radius: 18px 0 0 18px; padding-bottom: 6px; }
.map-rail::-webkit-scrollbar { display: none; }
.rail-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; background: transparent; border: 0; color: #e9e4d8; font: inherit; font-size: .74rem; cursor: pointer; }
.rail-btn .ico { width: 24px; height: 24px; color: var(--gold); }
.rail-btn.rail-all { min-height: 58px; justify-content: center; font-size: .95rem; border-radius: 18px 0 0 0; }
.rail-btn[aria-pressed="true"] { background-color: var(--amber); background-image: linear-gradient(180deg, var(--amber-2), var(--amber-deep)); color: var(--navy); font-weight: 700; }
.rail-btn[aria-pressed="true"] .ico { color: var(--navy); }
.rail-btn.rail-all[aria-pressed="true"] { border-radius: 18px 0 0 0; }
.map-status { position: absolute; left: 12px; right: 96px; bottom: 26px; z-index: 500; }
.demo-pill { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(15, 26, 46, .92); border: 1px dashed var(--gold); color: var(--gold-2); font-size: .74rem; font-weight: 600; }
.map-consent { position: absolute; inset: 0; z-index: 600; display: grid; place-items: center; padding: 20px; background: rgba(15, 26, 46, .75); }
.map-consent .card { max-width: 380px; width: 100%; padding: 16px; }
/* pins: white teardrop, gold line icon, dark label pill below */
.dpin-wrap { background: transparent; border: 0; }
.dpin { position: relative; width: 40px; height: 50px; cursor: pointer; }
.dpin-shape { width: 40px; height: 50px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
.dpin-ico { position: absolute; left: 9px; top: 7px; width: 22px; height: 22px; color: #9a7434; }
.dpin-ico .ico { width: 22px; height: 22px; }
.dpin-label { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; padding: 4px 10px 5px; border-radius: 12px;
  background: rgba(19, 31, 54, .95); border: 1px solid #2b3e60; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); line-height: 1.15; }
.dpin-name { display: block; color: #f4efe4; font-size: 13px; font-weight: 500; }
.pin-sub { display: block; color: #b9c3d6; font-size: 11px; }
.pin-stock { display: block; font-size: 11px; font-weight: 700; }
.stars { letter-spacing: 1px; font-size: 12px; }
.star { color: #99a4b8; } .star.on { color: var(--gold); }
.dpin-sel .dpin-shape { filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 22px var(--gold-glow)); }
.dpin-sel .dpin-label { border-color: var(--gold); }
.leaflet-marker-icon.dpin-wrap { overflow: visible; }
/* place sheet */
.place-meta .ico { width: 15px; height: 15px; vertical-align: -2px; }
.place-address { margin: 6px 0; color: var(--text); font-weight: 600; }
.addr-src { color: var(--muted); font-weight: 400; font-size: .85rem; }
.apple-actions { margin-top: 10px; }
.rating-box { margin: 10px 0; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--card-2); }
.rating-box .stars { font-size: 18px; }
.rate-row { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.rate-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: #99a4b8; font-size: 20px; cursor: pointer; }
.rate-btn.on { color: var(--gold); border-color: var(--gold); }
.stock-box { padding: 12px; margin: 10px 0; }

/* ---------- Opening intro ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: #0f1a2e; display: grid; place-items: center; cursor: pointer; transition: opacity .4s ease; }
.intro-video, .intro-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro.intro-out { opacity: 0; pointer-events: none; }
/* scene 1: gold Dinner Dice logo on navy, above the (not yet playing) map video */
.intro-logo { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #1c2d4a 0%, #0f1a2e 62%); transition: opacity .35s ease; }
.intro-logo img { width: min(46vw, 220px); height: auto; filter: drop-shadow(0 0 22px rgba(212, 166, 74, .35)); animation: intro-logo-in .7s ease-out both; }
.intro-logo.intro-logo-out { opacity: 0; pointer-events: none; }
@keyframes intro-logo-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
.intro.intro-still .intro-logo img { animation: none; }
.intro-skip { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 2; padding: 8px 16px; border-radius: 999px;
  background: rgba(15, 26, 46, .82); border: 1.5px solid var(--gold); color: #f4efe4; font: inherit; font-weight: 600; cursor: pointer; }
.intro-sound { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 2; padding: 8px 14px; border-radius: 999px;
  background: rgba(15, 26, 46, .82); border: 1.5px solid var(--gold); color: var(--gold-2); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
html.intro-playing body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .intro, .intro-logo { transition: none; } .intro-logo img { animation: none; } }

/* ---------- Desktop: gold rounded outer frame ---------- */
@media (min-width: 700px) {
  body::after { content: ""; position: fixed; inset: 10px; border: 1.5px solid rgba(212, 166, 74, .7); border-radius: 30px; pointer-events: none; z-index: 40; }
  .tabbar { bottom: 12px; border-radius: 22px; border: 1px solid rgba(212, 166, 74, .45); }
  .map-view { inset: 12px 0 calc(var(--tabbar-h) + 12px) 0; border-radius: 22px 22px 0 0; }
}

/* ---------- Gift a Meal ---------- */
.home-gift { margin: 4px 0 14px; }
.gift-inline { margin-top: 8px; width: 100%; }
.gift-list { display: grid; gap: 12px; }
.gift-card { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 12px; }
.gift-photo { position: relative; height: 104px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #24385a, #16243d); border: 1px solid var(--border); }
.gift-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gift-photo .photo-emoji { font-size: 2.6rem; }
.gift-chain-tag { position: absolute; left: 6px; right: 6px; bottom: 6px; text-align: center; font-size: .68rem; font-weight: 700; color: #f4efe4; background: rgba(15, 26, 46, .88); border-radius: 8px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gift-chain { color: var(--gold-2); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.gift-name { margin: 2px 0 4px; font-size: 1.02rem; color: var(--text); }
.gift-price { margin: 4px 0; color: var(--text); } .gift-price strong { color: var(--gold-2); font-size: 1.1rem; }
.gift-info .legend { margin: 2px 0; }
.gift-info .btn { margin-top: 6px; }
.gift-disclosure { margin-top: 16px; text-align: center; }
.gift-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; }
.gift-steps li { flex: 1; text-align: center; padding: 6px 4px; border-radius: 999px; border: 1px solid var(--border); color: #b9c3d6; font-size: .8rem; }
.gift-steps li.on { border-color: var(--gold); color: var(--gold-2); font-weight: 700; }
.gift-steps li.done { color: #8fd6a8; border-color: #3d6b56; }
.gift-what { margin: 4px 0 10px; color: var(--text); }
.privacy-note { border-left: 3px solid var(--gold); }
.gift-pick { display: grid; gap: 6px; }
.gc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.gift-templates { margin: 4px 0 10px; }
.gift-save { border: 1px solid var(--border); border-radius: 12px; padding: 6px 10px 8px; margin: 8px 0 12px; }
.gift-targets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gift-target[aria-checked="true"] { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.gift-how { padding: 12px; margin: 8px 0 12px; display: grid; gap: 8px; }
.gift-how p { margin: 0; }
.person-row, .hist-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; margin: 0 0 8px; list-style: none; }
.gift-people, .gift-history { padding: 0; margin: 0; }
.kind-msg { margin: 6px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(212, 166, 74, .12); color: var(--gold-2); font-weight: 600; }
[aria-invalid="true"] { border-color: var(--gold) !important; }
.field { display: grid; gap: 4px; margin: 8px 0; color: var(--text); }
.field > span { font-size: .85rem; color: #b9c3d6; }

/* ---------- Ideas & Reviews ---------- */
.rating-summary { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px; margin-bottom: 12px; }
.rs-big { text-align: center; }
.rs-avg { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--gold-2); }
.dist-row { display: grid; grid-template-columns: 28px 1fr 24px; gap: 6px; align-items: center; font-size: .8rem; color: var(--text); margin: 2px 0; }
.dist-bar { height: 8px; border-radius: 6px; background: #24385a; overflow: hidden; }
.dist-fill { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.review, .idea { padding: 12px 14px; margin: 10px 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.review-title, .idea-title { color: var(--text); }
.idea-title { margin: 6px 0 2px; font-size: 1rem; }
.review-text { margin: 6px 0; color: var(--text); }
.idea { display: grid; grid-template-columns: 52px 1fr; gap: 10px; }
.vote { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 60px; border-radius: 12px; border: 1.5px solid var(--gold); background: transparent; color: var(--gold-2); font: inherit; font-weight: 700; cursor: pointer; }
.vote[aria-pressed="true"], .vote:disabled { background: var(--gold); color: var(--navy); border-color: var(--gold); cursor: default; }
.status { font-weight: 700; }
.status-review { color: #b9c3d6; border-color: #4a5f85; }
.status-planned { color: #9cc7ff; border-color: #4b77b5; }
.status-building { color: var(--gold-2); border-color: var(--gold); }
.status-done { color: #8fd6a8; border-color: #3d6b56; }
.comments { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 6px; color: var(--text); font-size: .9rem; }
.comment-list li { margin: 4px 0; }
.comment-form { display: flex; gap: 6px; }
.comment-form input { flex: 1; }
.guidelines { padding: 12px 14px; margin-top: 16px; }
.guidelines ul { margin: 0; padding-left: 4px; list-style: none; }
.guidelines li { margin: 3px 0; }
.nudge { margin: 6px 0; }
.feed-dish.gifted { margin: 6px 0; font-weight: 700; color: var(--text); }

/* ---------- Feast photos: welcome, paywall, banners, All chip ---------- */
.chip-thumb { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 30% 20%; vertical-align: -6px; border: 1px solid var(--gold); }
.quiz-welcome { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #0f1a2e; display: flex; align-items: flex-end; justify-content: center; }
.quiz.welcome-on .quiz-panel { visibility: hidden; }
.welcome-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transition: opacity 1.4s ease; transform: scale(1.02); }
.welcome-slide.on { opacity: 1; animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -2%); } }
.welcome-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 46, .15) 0%, rgba(15, 26, 46, 0) 30%, rgba(15, 26, 46, .7) 52%, rgba(15, 26, 46, .94) 62%, #0f1a2e 74%); }
.welcome-text { position: relative; width: 100%; max-width: 560px; padding: 0 22px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.welcome-title { font-family: var(--serif); font-size: clamp(2.3rem, 10vw, 3.2rem); line-height: 1.02; margin: 0 0 10px; color: #f4efe4; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.welcome-sub { margin: 0 0 20px; color: #d5dae4; font-size: 1.05rem; }
#welcome-start { border: 1.5px solid var(--gold); background: transparent; color: var(--gold-2); font-size: 1.1rem; min-height: 54px; }
@media (prefers-reduced-motion: reduce) { .welcome-slide { transition: none; } .welcome-slide.on { animation: none; } }
.paywall-hero-wrap { position: relative; margin: 8px -4px 0; height: 220px; border-radius: 14px; overflow: hidden; }
.paywall-hero-wrap .paywall-hero { width: 100%; height: 220px; object-fit: cover; object-position: center 20%; border-radius: 0; margin: 0; display: block; }
.paywall-hero-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 46, 0) 55%, var(--card) 100%); }
.photo-banner { position: relative; height: 200px; margin: 6px -18px 12px; overflow: hidden; border-radius: 0 0 20px 20px; }
.photo-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.photo-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 46, .05) 0%, rgba(15, 26, 46, .2) 35%, rgba(15, 26, 46, .92) 72%, #0f1a2e 100%); }
.banner-text { position: absolute; left: 18px; right: 18px; bottom: 8px; z-index: 1; }
.banner-text .tab-title { margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.discover-banner { height: 150px; }
.discover-banner img { object-position: center 45%; }
#view-feed > .photo-banner:first-child { margin-top: 0; }
.gift-dates { margin: 2px 0; color: var(--gold-2); border-color: var(--gold); }
.gift-dates.soon { color: #9cc7ff; border-color: #4b77b5; }
.gift-dnote { font-size: .78rem; }
.gift-details summary { cursor: pointer; color: var(--gold-2); font-size: .82rem; }
.gift-tip { margin: 8px 0; }

/* ---------- Home over the full-page photo: dark glass surfaces ---------- */
body[data-view="roll"] main .card, body[data-view="roll"] .tonight-card, body[data-view="roll"] .result-card, body[data-view="roll"] .combo-card,
body[data-view="roll"] .filters, body[data-view="roll"] details, body[data-view="roll"] .notice {
  background: rgba(10, 16, 30, .72); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
}
body[data-view="roll"] .btn, body[data-view="roll"] .roll-cta, body[data-view="roll"] .die, body[data-view="roll"] .upsell, body[data-view="roll"] .streak, body[data-view="roll"] .chip {
  background-color: rgba(10, 16, 30, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body[data-view="roll"] .btn-primary.on, body[data-view="roll"] .chip[aria-pressed="true"] { background-color: rgba(10, 16, 30, .78); }
body[data-view="roll"] .tabbar { background: rgba(10, 16, 30, .88); }
.welcome-slide { object-fit: cover; }
.quiz-welcome::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .35); pointer-events: none; }
.quiz-welcome .welcome-shade { z-index: 1; } .quiz-welcome .welcome-text { z-index: 2; }

/* soft local scrim behind the title (over the plate) */
.hero-title { background: radial-gradient(120% 90% at 30% 60%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, 0)); padding-top: 6px; border-radius: 18px; }
/* wide / landscape screens (viewport wider than the photo's 1205:1450 shape): cover is width-limited, so the photo
   is cropped top/bottom. Shift it so the logo's top sits 16px from the top (logo spans ~10%-46% of the photo height,
   i.e. 12.03vw-55.35vw), and put the title BELOW the logo instead of over it. */


/* ---------- Famous People's Meals (frosted glass over a blurred restaurant) ---------- */
.famous-entry { margin: 4px 0 12px; border: 1.5px solid var(--gold); background: rgba(10, 16, 30, .62); color: var(--gold-2); font-weight: 700; }
.famous-view { position: relative; }
.famous-bg { position: fixed; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(22px) brightness(.55) saturate(1.1); z-index: -2; pointer-events: none; }
.famous-tint { position: fixed; inset: 0; background: rgba(8, 10, 18, .35); z-index: -1; pointer-events: none; }
body[data-view="creators"] { background: transparent; }
.famous-panel {
  margin: 6px auto 16px; max-width: 520px; padding: 16px 14px 18px; border-radius: 28px;
  background: rgba(20, 24, 36, .55); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.fm-search { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px; border-radius: 25px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); color: #f4efe4; }
.fm-search input[type="search"] { flex: 1; border: 0; background: transparent; min-height: 44px; padding: 0; color: #f4efe4; font-size: 15px; }
.fm-search input[type="search"]::placeholder { color: #d0d4dd; }
.fm-search input[type="search"]:focus { box-shadow: none; outline: none; }
.fm-search:focus-within { border-color: var(--gold); }
.fm-title { font-size: 1.7rem; font-weight: 800; color: #fff; margin: 18px 4px 8px; letter-spacing: -.01em; }
.fm-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; padding-bottom: 2px; }
.fm-cats::-webkit-scrollbar { display: none; }
.fm-cats .chip { flex: none; background: rgba(10, 14, 24, .55); }
.fm-banner { margin: 0 0 10px; }
.fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fm-tile { position: relative; aspect-ratio: 4 / 4.2; border-radius: 16px; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: #2a2420; color: #fff; text-align: left; font: inherit; }
.fm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fm-tile.locked .fm-photo { filter: blur(14px) brightness(.8); transform: scale(1.15); }
.fm-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .9) 100%); }
.fm-badge { position: absolute; top: 8px; left: 8px; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; background: rgba(240, 240, 245, .92); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.fm-check { position: absolute; right: -4px; bottom: -3px; font-size: .7rem; }
.fm-lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -70%); z-index: 1; padding: 6px 10px; border-radius: 999px; background: rgba(10, 14, 24, .88); border: 1px solid var(--gold); color: var(--gold-2); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.fm-free { position: absolute; top: 12px; right: 8px; z-index: 1; padding: 3px 8px; border-radius: 999px; background: rgba(10, 14, 24, .85); color: #8fd6a8; font-size: .7rem; font-weight: 700; }
.fm-cap { position: absolute; left: 10px; right: 8px; bottom: 8px; z-index: 1; display: grid; gap: 2px; }
.fm-name { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.fm-time { color: #e3e5ea; font-size: .72rem; text-transform: capitalize; }
.fm-empty { grid-column: 1 / -1; text-align: center; }
.famous-below { max-width: 520px; margin: 0 auto; }
.creator-row { display: flex; overflow-x: auto; gap: 10px; scrollbar-width: none; }
.creator-row .creator-card { flex: 0 0 150px; }
.fm-post img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 16px; }
.fm-post-title { margin: 10px 0 2px; color: var(--text); }

/* ---------- Athletes' Meals / Chef Recipes / Snap & Prep ---------- */
.fm-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.fm-feature { min-height: 46px; border-radius: 14px; border: 1.5px solid var(--gold); background: rgba(10, 14, 24, .6); color: var(--gold-2); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.fm-sub { color: #e3e5ea; margin: -2px 4px 10px; font-size: .92rem; }
.chef-badge { position: absolute; top: 12px; right: 8px; z-index: 1; padding: 2px 8px; border-radius: 999px; background: rgba(10, 14, 24, .88); border: 1px solid var(--gold); color: var(--gold-2); font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.chef-badge.inline { position: static; display: inline-block; }
.chef-free { top: 38px; }
.chef-lock { position: absolute; top: 38px; right: 8px; z-index: 1; padding: 2px 8px; border-radius: 999px; background: rgba(10, 14, 24, .88); color: #e3e5ea; font-size: .7rem; font-weight: 700; }
.chef-story { color: var(--text); font-style: italic; margin: 6px 0; }
.ath-photo { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; user-select: none; }
.ath-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ath-photo.locked img { filter: blur(10px) brightness(.8); transform: scale(1.08); }
.ath-locked-msg { position: absolute; inset: 0; display: grid; place-items: center; }
.ath-locked-msg span { padding: 8px 12px; border-radius: 999px; background: rgba(10, 14, 24, .9); border: 1px solid var(--gold); color: var(--gold-2); font-weight: 700; font-size: .85rem; }
.ath-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(212, 166, 74, .35), 0 1px 4px rgba(0, 0, 0, .5); z-index: 2; pointer-events: none; }
.ath-label { position: absolute; z-index: 3; display: none; transform: translate(10px, -50%); padding: 2px 7px; border-radius: 999px; border: 0; background: rgba(8, 10, 18, .78); color: #fff; font: inherit; font-size: 11px; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.ath-photo.show-labels .ath-label { display: block; }
.ath-label.static { display: block; pointer-events: none; }
.ath-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.ath-lines line { stroke: rgba(255, 255, 255, .85); stroke-width: 1; }
.ath-photo:not(.show-labels) .ath-lines { display: none; }
.ath-hint { text-align: center; margin: 4px 0 8px; }
.ath-desc { font-size: .9rem; }
.ath-desc h4 { margin: 12px 0 4px; font-size: .95rem; color: var(--gold-2); }
.ath-ings, .ath-steps { margin: 0; padding-left: 18px; font-size: .86rem; color: var(--text); }
.ath-ings li, .ath-steps li { margin: 2px 0; }
.ath-macros { font-size: .82rem; color: var(--gold-2); margin: 6px 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--gold-2); text-decoration: underline; font: inherit; cursor: pointer; }
.ath-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
.ath-tagform { padding: 10px; margin: 8px 0; }
.tagging { cursor: crosshair; }
.snap-preview { width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px; margin: 6px 0; }
.snap-dish { margin: 2px 0; font-family: var(--serif); font-size: 1.4rem; color: var(--text); }
.snap-ings { list-style: none; padding: 0; }
.snap-ings li { margin: 4px 0; color: var(--text); }
.btn.small { font-size: .78rem; padding: 2px 4px; min-height: 0; }
.snap-plans .plan { margin-bottom: 10px; }
/* ---------- Follow ---------- */
.follow-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; }
.follow-btn { min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--gold); background: transparent; color: var(--gold-2); font: inherit; font-weight: 700; cursor: pointer; }
.follow-btn[aria-pressed="true"] { background: var(--gold); color: var(--navy); }
.follow-counts strong { color: var(--text); }
.following-card { padding: 12px 14px; margin: 12px 0; }
/* ---------- creator tiers + two-threshold verification ---------- */
.plans.plans-3 { grid-template-columns: 1fr; }
.plans.plans-3 .plan-best { order: -1; }
.plans.plans-1 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .plans.plans-3 { grid-template-columns: repeat(3, 1fr); } .plans.plans-3 .plan-best { order: 0; } }
.progress { position: relative; overflow: visible; }
.progress > span { border-radius: 999px; max-width: 100%; }
.progress .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--gold-2); }
.progress.mid { border-color: var(--gold); } .progress.mid > span { background: var(--gold); }
.qualify { padding: 10px 14px; margin: 10px 0; }
.qualify ul { list-style: none; padding: 0; margin: 6px 0 0; }
.qualify li { padding: 3px 0; }
.qualify .q-ok { color: var(--text); } .qualify .q-no { color: var(--muted); }
.plans.plans-4 { grid-template-columns: 1fr 1fr; }
.plans.plans-4 .plan-best { order: -1; grid-column: 1 / -1; }
@media (min-width: 720px) { .plans.plans-4 { grid-template-columns: repeat(4, 1fr); } .plans.plans-4 .plan-best { order: 0; grid-column: auto; } }
/* ---------- likes + emoji-only reactions ---------- */
.rx-photo { position: relative; }
.rx-burst { position: absolute; left: 50%; top: 50%; font-size: 72px; transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; animation: rxBurst .85s ease-out forwards; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); z-index: 5; }
@keyframes rxBurst { 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 35% { transform: translate(-50%, -50%) scale(.95); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .rx-burst { animation-duration: .01s; } }
.rx-bar { margin: 8px 0 4px; }
.rx-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rx-heart { width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--gold); background: transparent; color: var(--gold-2); font-size: 20px; line-height: 1; cursor: pointer; }
.rx-heart[aria-pressed="true"] { background: var(--gold); color: var(--navy); }
.rx-likes { font-weight: 700; color: var(--text); }
.rx-add { margin-left: auto; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--gold); background: transparent; color: var(--gold-2); font: inherit; font-weight: 700; cursor: pointer; }
.rx-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rx-count { padding: 2px 9px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.rx-count.mine { border-color: var(--gold); }
.rx-picker { margin-top: 8px; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); }
.rx-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.rx-search { width: 100%; margin-bottom: 6px; }
.rx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; max-height: 190px; overflow-y: auto; }
.rx-emoji { height: 42px; border-radius: 10px; border: 1px solid transparent; background: transparent; font-size: 22px; cursor: pointer; color: var(--text); }
.rx-emoji[aria-pressed="true"] { border-color: var(--gold); background: rgba(212, 166, 74, .18); }
.rx-sel { font-size: 22px; margin: 6px 0 0; color: var(--text); }
.rx-picker-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.rx-picker-foot .legend { margin-right: auto; }
.rx-people { margin-top: 6px; }
.rx-people summary { cursor: pointer; color: var(--gold-2); font-weight: 700; }
.rx-people ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 160px; overflow-y: auto; }
.rx-people li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.rx-people .rx-av { width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--card-2); }
.rx-people .rx-e { margin-left: auto; }
.rx-owner { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--text); font-size: 14px; }
/* ---------- 18+ age gate (above the quiz, below the intro) ---------- */
.agegate { position: fixed; inset: 0; z-index: 90; background: radial-gradient(circle at 50% 20%, #1a2a48, #0f1a2e 70%); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.agegate.hidden { display: none; }
.age-card { width: 100%; max-width: 420px; padding: 22px 20px; border-radius: 22px; border: 1.5px solid var(--gold); background: rgba(15, 26, 46, .92); color: var(--text); text-align: center; }
.age-logo { font-size: 44px; }
.age-title { font-family: var(--serif); font-size: 1.6rem; margin: 6px 0 8px; color: var(--text); }
.age-dob { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: 8px; border: 0; padding: 0; margin: 14px 0; }
.age-dob legend { color: var(--gold-2); font-weight: 700; margin-bottom: 6px; padding: 0; }
.age-dob select { width: 100%; min-height: 44px; }
.age-accept { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: .92rem; margin: 10px 0; color: var(--text); }
.age-accept input { margin-top: 3px; flex: none; }
.age-accept a { color: var(--gold-2); }
.age-msg { min-height: 1.2em; color: #ffb4a8; font-size: .9rem; }
.age-msg.info { color: var(--text); text-align: left; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- public posts: video, badges, locked post, rules, reports ---------- */
.pub-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.post-locked { border-style: dashed; }
.badge-real { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid #7fd1a0; color: #9fe3b8; font-size: .8rem; font-weight: 700; }
.badge-real.small { font-size: .7rem; padding: 1px 6px; }
.badge-tier { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-2); font-size: .8rem; font-weight: 700; }
.pub-post .feed-head { position: relative; }
.pub-more { margin-left: auto; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.vpost { position: relative; width: 100%; max-width: 420px; margin: 8px auto; aspect-ratio: 9 / 16; max-height: 70vh; border-radius: 18px; overflow: hidden; background: #000; }
.vpost video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsound { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.65); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.vbadge { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-size: .75rem; font-weight: 700; }
.ppost img { width: 100%; border-radius: 16px; display: block; margin: 8px 0; }
.post-locked-sheet .lead, #community-rules .lead { font-size: 1.02rem; color: var(--text); }
.post-locked-sheet .req { list-style: none; padding: 0; margin: 10px 0; }
.post-locked-sheet .req li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.req .q-ok { color: #9fe3b8; } .req .q-no { color: var(--text); }
.rules li { margin: 6px 0; color: var(--text); }
.report-reasons .btn { margin: 4px 0; }
/* ---------- Roll & Reveal ---------- */
.game-view { padding-bottom: 30px; }
.game-tabs { margin: 6px 0 12px; }
.game-stats { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: .92rem; }
.game-stats strong { color: var(--gold-2); }
.die3d-wrap { perspective: 700px; display: grid; place-items: center; height: 170px; margin: 14px 0 6px; }
.die3d { position: relative; width: 104px; height: 104px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,1.4,.4,1); transform: rotateX(-18deg) rotateY(24deg); }
.die-face { position: absolute; inset: 0; border-radius: 20px; border: 3px solid var(--gold); background: radial-gradient(circle at 30% 25%, #1d2d4f, #0f1a2e 75%); box-shadow: inset 0 0 18px rgba(217,180,106,.25), 0 0 20px rgba(217,180,106,.25);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14px; backface-visibility: hidden; }
.die-face i { display: block; margin: auto; width: 15px; height: 15px; border-radius: 50%; }
.die-face i.pip { background: var(--gold-2); box-shadow: 0 0 6px rgba(217,180,106,.6); }
.die-face .die-d { grid-column: 1 / -1; grid-row: 1 / -1; margin: auto; font-family: var(--serif); font-size: 54px; font-weight: 800; color: var(--gold-2); }
.f1 { transform: translateZ(52px); } .f6 { transform: rotateY(180deg) translateZ(52px); } .f2 { transform: rotateY(90deg) translateZ(52px); }
.f5 { transform: rotateY(-90deg) translateZ(52px); } .f3 { transform: rotateX(90deg) translateZ(52px); } .f4 { transform: rotateX(-90deg) translateZ(52px); }
.die3d.face-1 { transform: rotateX(-18deg) rotateY(24deg); } .die3d.face-6 { transform: rotateX(-18deg) rotateY(204deg); }
.die3d.face-2 { transform: rotateX(-18deg) rotateY(-66deg); } .die3d.face-5 { transform: rotateX(-18deg) rotateY(114deg); }
.die3d.face-3 { transform: rotateX(-108deg) rotateY(24deg); } .die3d.face-4 { transform: rotateX(72deg) rotateY(24deg); }
.die3d.rolling { animation: dieRoll .9s cubic-bezier(.3,.1,.3,1) infinite; }
@keyframes dieRoll { 0% { transform: translateY(0) rotateX(0) rotateY(0); } 30% { transform: translateY(-40px) rotateX(300deg) rotateY(160deg); } 60% { transform: translateY(0) rotateX(560deg) rotateY(380deg); } 80% { transform: translateY(-12px) rotateX(680deg) rotateY(470deg); } 100% { transform: translateY(0) rotateX(720deg) rotateY(540deg); } }
.die3d.landed { animation: dieLand .35s ease-out; }
@keyframes dieLand { 0% { scale: 1.12; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .die3d.rolling, .die3d.landed { animation: none; } .reveal-card.revealing { animation: none !important; } }
.game-roll-btn.pulse { animation: rollPulse 1.2s ease-in-out 3; }
@keyframes rollPulse { 50% { box-shadow: 0 0 0 8px rgba(217,180,106,.25); } }
.reveal-card { position: relative; margin: 14px -16px 10px; height: min(62vh, 520px); overflow: hidden; border-radius: 0; background: #0b1324; transform-origin: center; touch-action: pan-y; }
.reveal-card.revealing { animation: revealFlip .7s cubic-bezier(.2,.9,.3,1.2); }
@keyframes revealFlip { 0% { transform: perspective(900px) rotateY(90deg) scale(.7); opacity: 0; } 60% { transform: perspective(900px) rotateY(-8deg) scale(1.03); opacity: 1; } 100% { transform: none; } }
.reveal-card.swipe-right { transition: transform .35s, opacity .35s; transform: translateX(40%) rotate(8deg); opacity: .5; }
.reveal-card.swipe-left { transition: transform .35s, opacity .35s; transform: translateX(-40%) rotate(-8deg); opacity: .5; }
.reveal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal-emoji { display: grid; place-items: center; font-size: 140px; background: radial-gradient(circle, #22355c, #0f1a2e 70%); }
.reveal-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85)); }
.reveal-info { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.reveal-region { margin: 0; color: #f3dca8; font-weight: 700; }
.reveal-name { margin: 2px 0 4px; font-family: var(--serif); font-size: 2rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.photo-credit { display: inline-block; font-size: .72rem; color: #e8edf6; background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 6px; }
.photo-credit a { color: #fff; }
.yn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.yn-row .btn { min-height: 54px; font-size: 1.1rem; }
.yn-nah { border: 1.5px solid #9fb0cc; background: transparent; color: var(--text); }
.yn-yum { border: 1.5px solid var(--gold); background: var(--gold); color: var(--navy); }
.world-result { margin: 8px 0; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--gold); background: var(--card); animation: wrIn .35s ease-out; }
@keyframes wrIn { from { transform: translateY(10px); opacity: 0; } }
.wr-title { margin: 6px 0 8px; font-size: 1.25rem; color: var(--text); }
.wr-bar { border-color: var(--gold); }
.wr-bar .c { background: var(--gold); color: var(--navy); } .wr-bar .a { background: #1c2c4c; color: #dbe3f1; }
.wr-meta { margin: 6px 0 0; color: var(--text); }
.wr-flag { font-size: 1.3rem; }
.wb-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wb-list { list-style: none; padding: 0; margin: 0 0 12px; }
.wb-row { display: grid; grid-template-columns: auto 52px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text); }
#my-yums .wb-row { grid-template-columns: 52px 1fr auto; }
.wb-rank { width: 24px; text-align: center; font-weight: 800; color: var(--gold-2); }
.wb-photo { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; position: relative; background: var(--card-2); display: grid; place-items: center; }
.wb-photo img { width: 100%; height: 100%; object-fit: cover; }
.wb-photo .photo-credit { display: none; }
.wb-photo:not(.no-photo) .photo-emoji { display: none; }
.wb-pct { text-align: right; font-weight: 700; }
/* ---------- Roll & Reveal: reference look (warm bokeh, wood panels, plates, white die) ---------- */
body[data-view="game"] { background-color: #140d08;
  background-image: radial-gradient(circle at 12% 8%, rgba(255,190,90,.35) 0 6px, transparent 7px), radial-gradient(circle at 30% 4%, rgba(255,170,70,.28) 0 9px, transparent 10px),
    radial-gradient(circle at 55% 10%, rgba(255,200,110,.3) 0 5px, transparent 6px), radial-gradient(circle at 78% 6%, rgba(255,180,80,.32) 0 8px, transparent 9px),
    radial-gradient(circle at 92% 14%, rgba(255,210,120,.25) 0 6px, transparent 7px), radial-gradient(circle at 44% 18%, rgba(255,160,60,.18) 0 14px, transparent 15px),
    radial-gradient(ellipse at 50% 0%, rgba(120,70,30,.55), transparent 60%), linear-gradient(180deg, #24160c 0%, #140d08 45%, #0f1a2e 100%);
  background-attachment: fixed; }
.game-view .tab-title { color: #fff6e3; }
.game-stats { align-items: center; }
.game-stats .mute { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--text); font-size: 16px; cursor: pointer; }
.game-stats .mute[aria-pressed="true"] { background: rgba(217,180,106,.2); }
.game-modes { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.game-modes::-webkit-scrollbar { display: none; }
.mode-chip { flex: none; white-space: nowrap; border: 1.5px solid var(--gold); background: rgba(15,26,46,.75); color: var(--text); }
.mode-chip[aria-pressed="true"] { background-color: var(--amber); color: var(--navy); }
.game-stage { display: grid; gap: 12px; }
.roll-progress { margin: 2px 0 8px; color: #f3dca8; font-weight: 700; letter-spacing: .02em; }
.game-board-wrap { overflow: hidden; border-radius: 22px; padding: 10px 8px 16px;
  background-color: #2a180c; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 22px), repeating-linear-gradient(90deg, rgba(255,220,170,.05) 0 1px, transparent 1px 9px), linear-gradient(180deg, #4a2c16, #2a180c);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45); }
.game-board { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; padding: 4px 2px 30px; will-change: transform; }
.game-board .slot:nth-child(3n+2) { transform: translateY(28px); }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; cursor: pointer; transition: transform .3s; }
.slot .plate { position: relative; width: min(27vw, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle, #ffffff 0 55%, #e9e6e0 56% 62%, #ffffff 63% 70%, #d9d4cc 71%); box-shadow: 0 10px 18px rgba(0,0,0,.55), inset 0 -4px 8px rgba(0,0,0,.12); transition: box-shadow .4s, transform .4s; }
.slot .plate img { width: 76%; height: 76%; object-fit: cover; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.slot .plate-emoji { font-size: min(11vw, 56px); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.slot .plate-lock { position: absolute; right: 12%; bottom: 12%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,26,46,.92); font-size: 15px; border: 1px solid var(--gold); }
.slot.locked .plate img { filter: blur(2px) saturate(.8); }
.slot .badge { position: absolute; left: 0; top: 0; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--badge); color: #fff; font-weight: 800; font-size: 1rem; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.slot-label { max-width: 160px; text-align: center; font-weight: 800; font-size: .8rem; line-height: 1.15; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.slot-sub { font-size: .72rem; color: #f3dca8; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.slot.picked .plate { box-shadow: 0 0 0 4px #ffd36b, 0 0 34px 10px rgba(255,200,90,.75), 0 10px 18px rgba(0,0,0,.55); transform: scale(1.08); }
.slot.picked { z-index: 3; }
.wdie { position: absolute; left: 0; top: 0; width: 68px; height: 68px; transform-style: preserve-3d; display: none; z-index: 5; pointer-events: none; filter: drop-shadow(0 14px 10px rgba(0,0,0,.55)); }
.wface { position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(circle at 30% 25%, #ffffff, #eceae6 70%, #d8d4ce); box-shadow: inset 0 0 8px rgba(0,0,0,.18);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 9px; backface-visibility: hidden; }
.wface i { display: block; margin: auto; width: 11px; height: 11px; border-radius: 50%; }
.wface i.pip { background: radial-gradient(circle at 35% 35%, #444, #050505); }
.wf1 { transform: translateZ(34px); } .wf6 { transform: rotateY(180deg) translateZ(34px); } .wf2 { transform: rotateY(90deg) translateZ(34px); }
.wf5 { transform: rotateY(-90deg) translateZ(34px); } .wf3 { transform: rotateX(90deg) translateZ(34px); } .wf4 { transform: rotateX(-90deg) translateZ(34px); }
.game-controls { display: grid; gap: 10px; }
.wood { border-radius: 16px; color: #fff6e3; background-color: #3b2412;
  background-image: repeating-linear-gradient(92deg, rgba(0,0,0,.2) 0 2px, transparent 2px 18px), repeating-linear-gradient(88deg, rgba(255,220,170,.06) 0 1px, transparent 1px 7px), linear-gradient(180deg, #5a3519, #3b2412);
  box-shadow: inset 0 1px 0 rgba(255,220,170,.2), 0 8px 20px rgba(0,0,0,.45); }
.roll-panel { display: grid; justify-items: center; gap: 10px; padding: 16px 14px; perspective: 600px; }
.roll-panel .wdie { position: relative; display: block; transform: rotateX(-24deg) rotateY(32deg); animation: idleBob 3s ease-in-out infinite; }
@keyframes idleBob { 50% { translate: 0 -5px; } }
.roll-now { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 26px; border-radius: 12px; border: 1.5px solid #f3dca8; background: #120c08; color: #fff; font: inherit; font-weight: 900; font-size: 1.2rem; letter-spacing: .05em;
  box-shadow: 0 5px 0 #000, 0 8px 18px rgba(0,0,0,.5); cursor: pointer; transition: transform .08s, box-shadow .08s; }
.roll-now:active, .roll-now.pressed { transform: translateY(4px); box-shadow: 0 1px 0 #000, 0 3px 8px rgba(0,0,0,.5); }
.roll-now.wide { width: 100%; justify-content: center; margin-top: 12px; }
.roll-now.pulse { animation: rollPulse 1.2s ease-in-out 3; }
.rn-die { font-size: 1.5rem; line-height: 1; }
.reroll-link { color: #f3dca8; }
.howto { position: relative; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--gold); background: #0a0a0a; }
.howto h3 { margin: 0 0 4px; color: #ffd84d; font-size: 1rem; letter-spacing: .04em; }
.howto p { margin: 2px 0; color: #fff; font-weight: 700; font-size: .9rem; }
.howto .star { position: absolute; right: 14px; bottom: 10px; color: var(--gold-2); font-size: 1.3rem; }
.slogan { padding: 12px 14px; text-align: center; font-weight: 900; letter-spacing: .03em; font-size: 1rem; }
.reveal-lock { position: absolute; left: 16px; right: 16px; top: 16px; display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(15,26,46,.92); border: 1px solid var(--gold); color: var(--text); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.result-actions .btn { min-height: 46px; }
.result-actions .btn-primary { grid-column: 1 / -1; }
.inapp-browser .ib-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.ib-host { color: var(--muted); font-size: .85rem; }
#tab-roll::before { content: "🎲"; position: absolute; top: 4px; right: calc(50% - 22px); font-size: 11px; }
/* landscape / wide: controls left, board right (like the reference video) */
@media (orientation: landscape) and (min-width: 700px) {
  .game-stage { grid-template-columns: minmax(240px, 300px) 1fr; align-items: start; }
  .game-controls { order: -1; }
  .game-board { grid-template-columns: repeat(3, 1fr); }
  .game-board .slot:nth-child(3n+2) { transform: translateY(30px); }
  .game-stage > * { min-width: 0; }
  .slot { min-width: 0; }
  .slot .plate { width: 92%; max-width: 150px; }
  .slot .plate-emoji { font-size: min(5vw, 48px); }
}
@media (prefers-reduced-motion: reduce) { .roll-panel .wdie { animation: none; } }

/* sharing switch (iOS style, 44px+ target) */
.share-switch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ios-switch { min-width: 64px; min-height: 44px; padding: 4px; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; }
.ios-track { position: relative; display: block; width: 58px; height: 34px; border-radius: 999px; background-color: #5b6475; transition: background-color .25s ease; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ios-knob { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background-color: #fff; color: #0f1a2e; font-size: 15px; font-weight: 900; line-height: 28px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,.4); transition: transform .25s cubic-bezier(.3,1.3,.5,1); }
.ios-switch[aria-checked="true"] .ios-track { background-color: var(--gold); }
.ios-switch[aria-checked="true"] .ios-knob { transform: translateX(24px); }
.ios-switch:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 999px; }
.share-label { font-weight: 700; color: var(--text); }
.share-pill { font-size: .8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.share-pill.on { background-color: #e7c873; color: #0f1a2e; box-shadow: 0 0 0 1px #9fd38a; }
.share-pill.off { background-color: #2a3550; color: #e6e9f0; }
.share-error { color: #ffb86b; font-weight: 700; min-height: 1.2em; }
.share-rules { margin-top: 6px; }
input.shake { animation: dd-shake .4s; border-color: #ffb86b !important; }
@keyframes dd-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .ios-track, .ios-knob { transition: none; } input.shake { animation: none; } }

/* tap-to-enlarge lightbox */
[data-zoomable] { position: relative; cursor: zoom-in; }
.zoom-hint { position: absolute; right: 6px; bottom: 6px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; line-height: 1; color: #f3dca8; background-color: rgba(15,26,46,.82); border: 1px solid rgba(217,180,106,.7); cursor: zoom-in; }
.zoom-hint::after { content: ""; position: absolute; inset: -10px; }
.thumb .zoom-hint { width: 18px; height: 18px; font-size: 11px; right: 3px; bottom: 3px; }
.lightbox { position: fixed; inset: 0; z-index: 200; background-color: rgba(15,26,46,.9); display: grid; place-items: center; padding: 56px 12px 20px; touch-action: pinch-zoom; overflow: auto; }
body.lb-open { overflow: hidden; }
.lb-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background-color: #0f1a2e; color: var(--gold-2); font-size: 20px; font-weight: 800; cursor: pointer; z-index: 2; }
.lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .2s; max-width: 100vw; }
.lb-img { max-width: 100vw; max-height: 78vh; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.6); touch-action: pinch-zoom; }
.lb-emoji { width: min(80vw, 420px); aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; font-size: min(48vw, 240px); background-color: #16243d; border: 1px solid var(--border); }
.lb-cap { text-align: center; color: #fff; display: grid; gap: 2px; padding: 0 8px; }
.lb-cap strong { font-size: 1.15rem; }
.lb-region { color: var(--amber-2); font-size: .9rem; }
.lb-credit { color: #d7dbe4; font-size: .78rem; }
.lb-credit a { color: var(--amber-2); }
@media (prefers-reduced-motion: reduce) { .lb-fig { transition: none; } }

/* real avatar photos for sample creators / chefs / athletes */
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.creator-avatar, .fm-badge { overflow: visible; }
.creator-avatar .avatar-img, .fm-badge .avatar-img { border-radius: 50%; }

/* Photo credits sheet (Profile → Settings → Photo credits) */
.credits-link { color: var(--gold-2, var(--amber-2)); text-decoration: underline; font-weight: 600; }
.credits-foot { margin-top: 6px; }
.credits-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.credit-item { display: flex; gap: 10px; align-items: flex-start; background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.credit-thumb { width: 54px; height: 54px; flex: 0 0 54px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(212, 166, 74, .45); }
.credit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.credit-title a, .credit-meta a { color: var(--gold-2, var(--amber-2)); text-decoration: underline; }
.credit-title { color: var(--text); }
.credit-meta { color: var(--muted); }
.credit-use { color: var(--muted); font-size: .8rem; font-style: italic; }
.credits-note { font-size: .85rem; }

/* app plans sheet (Basic / Premium / Chef Pro): stacked on phones, in order; 3 across on wide screens */
.plans.plans-app { grid-template-columns: 1fr; gap: 14px; }
.plans.plans-app .plan-best { order: 0; grid-column: auto; }
.plans.plans-app .plan { padding: 14px 14px 12px; }
.plans.plans-app .plan h3 { font-size: 1.02rem; }
@media (min-width: 720px) { .plans.plans-app { grid-template-columns: repeat(3, 1fr); } }

/* ---------- v13: real 3D die (dice3d.js) ---------- */
.d3 { --d3: 64px; position: absolute; left: 0; top: 0; width: var(--d3); height: var(--d3); pointer-events: none; z-index: 6; perspective: 900px; will-change: transform; }
.d3-shadow { position: absolute; left: 4%; right: 4%; bottom: -10%; height: 34%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 72%); will-change: transform, opacity; transform-origin: 50% 50%; }
.d3-lift { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.d3-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(24deg) rotateY(-14deg); }
.d3-cube { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.d3f, .d3-core { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.d3-core { background: #d9d3c8; border-radius: 2px; }
.d3f { border-radius: 22%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 15%;
  background: radial-gradient(circle at 28% 22%, #ffffff 0, #fbfaf7 30%, #ecE8e0 70%, #d6d0c4 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -3px 6px rgba(80,60,30,.22), inset 0 2px 3px rgba(255,255,255,.9); }
.d3f::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 55% 40% at 30% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); }
.d3f::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(40,25,10,var(--sh, 0)); z-index: 1; }
.d3f2, .d3f5 { --sh: .13; } .d3f4, .d3f6 { --sh: .2; } .d3f3 { --sh: .05; }
.d3f i { display: block; margin: auto; width: 62%; aspect-ratio: 1; border-radius: 50%; }
.d3f i.pip { background: radial-gradient(circle at 38% 34%, #4a4a4a 0, #111 55%, #000 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.8); }
.d3f1 i.pip { background: radial-gradient(circle at 38% 34%, #e0485a 0, #b0101f 60%, #6d0010 100%); width: 78%; }
/* Roll & Reveal board: the die lives on the board, hidden until tossed */
.game-board > .d3 { display: none; }
.game-board > .d3.d3-show { display: block; }
.roll-panel .d3 { position: relative; display: block; margin: 4px auto 6px; animation: idleBob 3s ease-in-out infinite; }
.roll-panel .d3 .d3-shadow { animation: idleShadow 3s ease-in-out infinite; }
@keyframes idleShadow { 50% { transform: scale(.88); opacity: .75; } }
.roll-now:disabled, .reroll-link:disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* Home: die button holds a 3D die that hops/tumbles in place */
.die.die3 { position: relative; padding: 0; overflow: visible; background: radial-gradient(circle at 50% 70%, #5a3519, #3b2412 70%); border-color: rgba(243,220,168,.45); }
.die.die3 .d3 { left: 50%; top: 50%; margin: calc(var(--d3) / -2) 0 0 calc(var(--d3) / -2); }
.die.die3.rolling { animation: none; }
@media (prefers-reduced-motion: reduce) { .roll-panel .d3, .roll-panel .d3 .d3-shadow { animation: none; } }
/* How to play: tiny low-contrast link at the bottom of the game screen + sheet */
.howto-link { display: block; margin: 18px auto 6px; padding: 10px 14px; min-height: 36px; border: 0; background: transparent; font: inherit; font-size: 11.5px; letter-spacing: .04em; color: #f6ead0; opacity: .55; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.howto-link:hover, .howto-link:focus-visible { opacity: .8; }
.howto-link:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 8px; }
.howto-steps { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 10px; color: var(--text); line-height: 1.45; }
.howto-steps strong { color: var(--gold-2); }
.howto-motto { margin: 14px 0 0; padding: 10px 12px; text-align: center; font-weight: 900; letter-spacing: .03em; color: #ffd84d; border: 1px solid var(--gold); border-radius: 12px; background: #0a0a0a; }
/* Chef Pro offer card (prooffer.js): small, dismissible, above the tab bar */
.pro-offer { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom)); z-index: 17; max-width: 520px; margin: 0 auto;
  padding: 14px 16px 12px; border-radius: 16px; border: 1.5px solid var(--gold); background: rgba(15,26,46,.97); color: var(--text); box-shadow: 0 12px 30px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
.pro-offer.in { opacity: 1; transform: none; }
.po-title { margin: 0 28px 4px 0; font-weight: 800; color: var(--gold-2); }
.po-text { margin: 0 0 10px; font-size: .9rem; line-height: 1.4; }
.po-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.po-actions .btn { min-height: 44px; }
.po-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pro-offer { transition: none; transform: none; } }
/* Snap & Prep (snap.js): chooser, capture, results */
.sp-meals { margin-bottom: 6px; }
.sp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.sp-thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-rm { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 1.1rem; cursor: pointer; }
.sp-add { aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed var(--gold); display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 6px; color: var(--gold-2); font-weight: 700; font-size: .8rem; cursor: pointer; background: rgba(217,180,106,.06); }
.sp-add span:first-child { font-size: 1.6rem; }
.sp-thumbs .sp-add:only-child { grid-column: 1 / -1; aspect-ratio: auto; min-height: 120px; }
.sp-ings { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-conf { color: var(--muted); font-size: .75rem; }
.sp-card { margin: 12px 0; padding: 12px; }
.sp-card-photo { width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 10px; }
.sp-title { margin: 0 0 2px; font-family: var(--serif); color: var(--gold-2); }
.sp-ri { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; font-size: .92rem; }
.sp-tag { display: inline-block; min-width: 118px; font-size: .74rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-right: 4px; }
.sp-have { background: #1f3b2a; color: #bfe8c9; } .sp-staple { background: #3a3220; color: #f1dca8; } .sp-buy { background: #3b2323; color: #f6c3c3; }
.sp-steps { padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.sp-chooser { display: grid; gap: 12px; }
.sp-mode { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 104px; padding: 16px; text-align: left; border-radius: 16px; border: 1.5px solid var(--gold); background: var(--card); color: #fff; font: inherit; cursor: pointer; }
.sp-mode strong { display: block; font-size: 1.08rem; color: #fff; margin-bottom: 2px; }
.sp-mode .legend { display: block; color: #e9e3d6; margin: 0; }
.sp-ico { font-size: 2rem; flex: none; }
/* Profile picture (avatar.js) */
button.profile-avatar { position: relative; padding: 0; background: var(--card); cursor: pointer; overflow: visible; width: 64px; height: 64px; color: inherit; }
.pa-face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; font-size: 1.8rem; }
.pa-face .avatar-pic, .pa-face img, .pa-face svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.pa-badge { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--gold); color: #0f1a2e; border: 1px solid #0f1a2e; }
.avatar-chef svg { width: 100%; height: 100%; display: block; }
.map-profile.has-avatar { padding: 0; overflow: hidden; }
.map-profile.has-avatar > svg:not(.founder-svg):last-child { display: none; }
.map-profile .avatar-pic { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.av-current { display: grid; place-items: center; margin: 4px 0 12px; }
.av-big { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 3rem; border: 2px solid var(--gold); }
.av-big svg, img.av-big { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.av-actions .btn { min-height: 46px; display: grid; place-items: center; text-align: center; }
.av-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; }
.av-chef { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.av-chef svg { width: 72px; height: 72px; }
.av-chef[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.av-name { font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.2; }
.av-founder-pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; margin-bottom: 12px; border-radius: 16px; border: 1.5px solid var(--gold); background: linear-gradient(135deg, #14264a, #0b1426); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.av-founder-pick svg { width: 84px; height: 84px; flex: none; }
.founder-badge { display: inline-block; font-size: .7rem; font-weight: 900; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; color: #0f1a2e; background: linear-gradient(180deg, #ffe7a8, #c7953f); vertical-align: middle; }
.founder-visor { animation: visorGlow 2.6s ease-in-out infinite; }
@keyframes visorGlow { 50% { opacity: .55; } }
.founder-svg { filter: drop-shadow(0 0 6px rgba(63, 240, 255, .35)); }
.av-crop { display: grid; gap: 12px; justify-items: center; }
.av-stage { position: relative; width: min(256px, 70vw); aspect-ratio: 1; touch-action: none; }
.av-stage canvas { width: 100%; height: 100%; border-radius: 12px; cursor: grab; display: block; }
.av-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(5, 10, 20, .6); outline: 2px solid var(--gold); pointer-events: none; }
.av-stage { overflow: hidden; border-radius: 12px; }
.av-zoom { display: flex; gap: 10px; align-items: center; width: 100%; max-width: 300px; color: var(--text); }
.av-zoom input { flex: 1; }
@media (prefers-reduced-motion: reduce) { .founder-visor { animation: none; } }
/* Owner tools (owner.js) */
.app-version { text-align: center; opacity: .6; user-select: none; cursor: default; padding: 8px; }
.ow input[type=search] { width: 100%; margin: 6px 0 8px; }
.ow-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.ow-row { padding: 10px 12px; }
.ow-head { display: flex; gap: 10px; align-items: flex-start; }
.ow-av { font-size: 1.6rem; }
.ow-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ow-btns .btn { min-height: 40px; padding: 6px 10px; font-size: .82rem; }
.ow-st { display: inline-block; font-size: .72rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.ow-ok { background: #1f3b2a; color: #bfe8c9; } .ow-susp { background: #3a3220; color: #f1dca8; } .ow-rem { background: #3b2323; color: #f6c3c3; }
.ow-flag { background: #5a2323 !important; color: #ffd6d6 !important; }
.ow-confirm { margin-top: 8px; padding: 10px; border-radius: 12px; border: 1.5px solid #e26d6d; background: #2a1518; }
.ow-log { padding-left: 18px; }
/* Share Dinner Dice (share.js) */
.share-app-btn { margin: 22px 0 8px; min-height: 58px; font-size: 1.1rem; font-weight: 900; color: #fff; border: 2px solid var(--gold); }
.share-url { font-family: ui-monospace, monospace; font-size: .85rem; color: var(--gold-2); word-break: break-all; }
.share-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.share-quick .btn { min-height: 46px; display: grid; place-items: center; text-align: center; font-size: .88rem; }
/* My Dinner Dice QR + credit (giftqr.js) */
.qr-home { margin: 8px 0 18px; }
.qr-card { display: grid; justify-items: center; gap: 8px; padding: 16px; border-radius: 20px; border: 2px solid var(--gold); background: linear-gradient(180deg, #14264a, #0b1426); }
.qr-who { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.05rem; }
.qr-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 1.5px solid var(--gold); font-size: 1.4rem; }
.qr-avatar svg, img.qr-avatar { width: 100%; height: 100%; object-fit: cover; }
#qr-canvas { width: min(280px, 72vw); height: auto; aspect-ratio: 1; border-radius: 14px; border: 3px solid var(--gold); }
.qr-cta { margin: 0; font-weight: 900; color: var(--gold-2); font-size: 1.1rem; }
.qr-link { margin: 0; font-size: .75rem; color: var(--muted); word-break: break-all; }
.qr-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.qr-actions .btn { min-height: 46px; display: grid; place-items: center; text-align: center; font-size: .85rem; }
.gc-sum { display: grid; gap: 6px; padding: 12px; margin: 12px 0; }
.gc-sum div { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.gc-total { border-top: 1px solid var(--border); padding-top: 6px; font-size: 1.05rem !important; }
.gc-total strong { color: var(--gold-2); }
.gc-terms { font-size: .78rem; }
.credit-card { margin: 10px 0; padding: 12px; border-radius: 14px; border: 1px solid var(--gold); background: rgba(217,180,106,.06); }
.credit-amt { margin: 0; font-size: 1.8rem; font-weight: 900; color: var(--gold-2); }
.credit-hist { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; font-size: .88rem; }
.credit-hist li { display: flex; justify-content: space-between; gap: 8px; }
.credit-hist .pos { color: #9fe0a8; } .credit-hist .neg { color: #f6b3b3; }
/* Dinner Dice Gallery (gallery.js) */
.gal-grid { columns: 2; column-gap: 10px; margin: 10px 0; }
.gal-tile { position: relative; display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 1.5px solid var(--gold); border-radius: 12px; overflow: hidden; background: #1a1209; break-inside: avoid; cursor: pointer; }
.gal-tile img { display: block; width: 100%; height: auto; }
.gal-tile:nth-child(3n+2) img { aspect-ratio: 3 / 4.4; object-fit: cover; }
.gal-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; font-weight: 800; font-size: .82rem; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(8,14,26,.92)); }
.gal-sold { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 900; letter-spacing: .08em; color: #0f1a2e; background: linear-gradient(180deg, #ffe7a8, #c7953f); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.gal-sold.big { font-size: .85rem; top: 12px; right: 12px; }
.gal-frame { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid var(--gold); }
.gal-frame img { display: block; width: 100%; height: auto; }
.gal-price { font-size: 1.4rem; font-weight: 900; color: var(--gold-2); margin: 12px 0 4px; }
.gal-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; font-size: .9rem; }
.gal-meta dt { color: var(--muted); } .gal-meta dd { margin: 0; color: var(--text); }
.gal-owner { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--gold-2); }
.gal-owner-av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: inline-block; border: 1px solid var(--gold); }
.gal-owner-av svg, img.gal-owner-av { width: 100%; height: 100%; object-fit: cover; }
.gal-privacy { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin: 10px 0; }
.gal-mine { list-style: none; padding: 0; display: grid; gap: 10px; }
.gal-mine li { display: flex; gap: 10px; align-items: center; }
.gal-mine-art { width: 64px; padding: 0; border: 1px solid var(--gold); border-radius: 8px; overflow: hidden; background: none; flex: none; }
.gal-mine-art img { display: block; width: 100%; }

/* ---------- v13: photo backgrounds on buttons & cards (assets/bg/*.webp, credits in assets/CREDITS.md) ----------
   Navy overlay 62-78% keeps white/gold text at WCAG AA; gold border, radius and tap targets unchanged.
   Backgrounds of elements in hidden views are not fetched until the view is shown (lazy by nature). */
:root { --ph-a: rgba(10, 18, 34, .64); --ph-b: rgba(10, 18, 34, .80); }
.tonight-go, #cook-btn, [data-act="open-meal"], #game-cook { --ph: url(assets/bg/bg-cook.webp); }
#famous-home, .famous-entry { --ph: url(assets/bg/bg-famous.webp); }
#game-home, #game-btn, #settings-howto { --ph: url(assets/bg/bg-game.webp); }
.ph-snap, #snap-ath, [data-cr="become"] { --ph: url(assets/bg/bg-ideas.webp); }
.ph-snapdish, .plan[data-plan="premium"], [data-act="paywall"].btn, .ph-gallery { --ph: url(assets/bg/bg-plans.webp); }
.ph-fridge, #orders-combo { --ph: url(assets/bg/bg-fridge.webp); }
#gift-btn, #home-gift, .ph-gift { --ph: url(assets/bg/bg-gift.webp); }
#world-btn { --ph: url(assets/bg/bg-world.webp); }
#chefs-btn, #pro-tools-btn, .plan[data-plan="pro"] { --ph: url(assets/bg/bg-knives.webp); }
#ideas-btn, #profile-ideas { --ph: url(assets/bg/bg-ideas.webp); }
[data-act="taste"].btn { --ph: url(assets/bg/bg-taste.webp); }
#find-ing-btn { --ph: url(assets/bg/bg-market.webp); }
[data-cr="dashboard"] { --ph: url(assets/bg/bg-dashboard.webp); }
[data-cr="manage"] { --ph: url(assets/bg/bg-subs.webp); }
.following-card, .ph-share, #orders-roll { --ph: url(assets/bg/bg-party.webp); }
#orders-gift { --ph: url(assets/bg/bg-gift.webp); }
#game-near { --ph: url(assets/bg/bg-map.webp); }
.plan[data-plan="basic"] { --ph: url(assets/bg/bg-breakfast.webp); }
#owner-tools-btn, #credits-btn, #install-btn { --ph: url(assets/bg/bg-settings.webp); }
#region-chips [data-region="Date Night"] { --ph: url(assets/bg/bg-datenight.webp); }
#region-chips [data-region="Sports Dice"] { --ph: url(assets/bg/bg-sports.webp); }
#region-chips [data-region="Breakfast"] { --ph: url(assets/bg/bg-breakfast.webp); }
#region-chips [data-region="Order In"] { --ph: url(assets/bg/bg-party.webp); }
#region-chips [data-region="Gymeal Dice"] { --ph: url(assets/bg/bg-gym.webp); }
#region-chips [data-region="Dessert Dice"] { --ph: url(assets/bg/bg-dessert.webp); }
#region-chips [data-region="Movie Night"] { --ph: url(assets/bg/bg-movie.webp); }
/* full-photo buttons / cards */
.tonight-go, #cook-btn, [data-act="open-meal"], #game-cook, #famous-home, .famous-entry, #game-home, #game-btn, .ph-btn, .ph-card, .sp-mode,
#gift-btn, #home-gift, #world-btn, #chefs-btn, #pro-tools-btn, #ideas-btn, [data-act="taste"].btn, [data-act="paywall"].btn, #find-ing-btn,
[data-cr="become"], [data-cr="dashboard"], [data-cr="manage"], #snap-ath, #orders-roll, #orders-combo, #orders-gift, #game-near, .following-card, .plan[data-plan] {
  background-image: linear-gradient(180deg, var(--ph-a), var(--ph-b)), var(--ph, none) !important;
  background-size: cover !important; background-position: center !important; background-color: #0f1a2e !important;
  border-color: var(--gold) !important; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}
.discover-card .legend, .sp-mode .legend, .following-card .legend, .plan li { color: #f1ece2 !important; }
.plan[data-plan] { --ph-a: rgba(10, 18, 34, .78); --ph-b: rgba(10, 18, 34, .9); }
.following-card { --ph-a: rgba(10, 18, 34, .80); --ph-b: rgba(10, 18, 34, .9); }
#profile-ideas { padding: 10px 14px; border: 1.5px solid var(--gold); border-radius: 12px; display: block; width: 100%; text-align: center; }
/* section chips: photo with a heavier overlay so the small label stays readable */
#region-chips [data-region="Date Night"], #region-chips [data-region="Sports Dice"], #region-chips [data-region="Breakfast"],
#region-chips [data-region="Order In"], #region-chips [data-region="Gymeal Dice"], #region-chips [data-region="Dessert Dice"], #region-chips [data-region="Movie Night"] {
  background-image: linear-gradient(rgba(10, 18, 34, .72), rgba(10, 18, 34, .80)), var(--ph) !important; background-size: cover !important; background-position: center !important;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
/* small list rows: subtle thumbnail on the left instead of a full background */
.ph-row, #settings-howto, #owner-tools-btn, #credits-btn, #install-btn { position: relative; padding-left: 58px !important; text-align: left; }
.ph-row::before, #settings-howto::before, #owner-tools-btn::before, #credits-btn::before, #install-btn::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 9px; border: 1px solid var(--gold);
  background: var(--ph) center / cover no-repeat, #0f1a2e;
}
.share-app-btn { color: #fff; }
.share-app-btn.ph-btn { --ph-a: rgba(212, 166, 74, .86); --ph-b: rgba(176, 134, 62, .92); color: #0f1a2e !important; text-shadow: none !important; }
.gal-benefits { margin: 12px 0; padding: 12px; border-radius: 12px; border: 1px solid var(--gold); background: rgba(217,180,106,.07); }
.gal-benefits h4 { margin: 0 0 6px; color: var(--gold-2); }
.gal-benefits p { margin: 0 0 6px; font-size: .9rem; line-height: 1.45; color: var(--text); }
.gal-benefits .gal-small { font-size: .74rem; color: var(--muted); margin: 0; }

/* v13 Gallery: Dinner Dice Food Club (gallery.js) */
.gal-kicker { margin: 4px 0; font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.gal-chain { font-size: .78rem; opacity: .85; }
.gal-filters { margin: 6px 0; flex-wrap: wrap; }
.gal-num { color: var(--gold-2); font-weight: 900; }
.gal-rarity { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: rgba(10,18,34,.85); color: #e8e1d2; border: 1px solid rgba(255,255,255,.35); }
.gal-rarity.r-rare { color: #9fd3ff; border-color: #6fb6f2; }
.gal-rarity.r-legendary { color: #0f1a2e; background: linear-gradient(180deg, #ffe7a8, #c7953f); border-color: #ffe7a8; }
.gal-rarity.r-sample { color: #0f1a2e; background: #e8e1d2; }
.gal-tile.gal-founder { border: 2.5px solid var(--gold-2); box-shadow: 0 0 0 2px rgba(212,172,91,.35), 0 6px 18px rgba(0,0,0,.45); }
.gal-founder-tag { position: absolute; left: 6px; right: 6px; top: 34px; padding: 5px 7px; border-radius: 8px; font-size: .66rem; line-height: 1.25; font-weight: 900; text-align: center; color: #0f1a2e; background: linear-gradient(180deg, #ffe7a8, #c7953f); }
.gal-founder-badge { margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; font-weight: 900; color: #0f1a2e; background: linear-gradient(180deg, #ffe7a8, #c7953f); box-shadow: 0 4px 14px rgba(212,172,91,.3); }
.gal-traits { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.gal-traits li { padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03); font-size: .82rem; }
.gal-traits li span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.gal-soon { text-align: center; padding: 18px 14px; margin: 10px 0; border: 2px solid var(--gold); border-radius: 16px; background: radial-gradient(circle at 50% 0%, rgba(212,172,91,.2), rgba(10,18,34,.9) 70%); }
.gal-soon-art { font-size: 2.6rem; line-height: 1.2; margin-bottom: 6px; }
.gal-soon h3 { color: var(--gold-2); margin: 6px 0; }
.gal-artists { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); }
.gal-artist { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.gal-artist-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold); background: #142646; font-size: 1.3rem; }
.gp-thumbs { display: flex; gap: 6px; margin: 4px 0 8px; } .gp-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold); }
.ow-card { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px; margin: 8px 0; border: 1px solid var(--border); border-radius: 12px; }
.ow-card > div { flex: 1; min-width: 0; }
.ow-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold); }
.ow-check { border: 0; padding: 0; margin: 6px 0; } .ow-check legend { font-weight: 800; font-size: .85rem; }
/* food art in plates / photos */
img.food-art { object-fit: cover; }
.gal-ph { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 1 / 1; width: 100%; padding: 14px; text-align: center; color: #e8e1d2;
  background: radial-gradient(circle at 50% 35%, rgba(212,172,91,.22), transparent 60%), repeating-linear-gradient(45deg, #13213b 0 12px, #101c33 12px 24px); }
.gal-ph b { font-size: 1.6rem; color: var(--gold-2); letter-spacing: .04em; } .gal-ph span { font-weight: 800; text-transform: capitalize; } .gal-ph i { font-size: .72rem; opacity: .8; }
.gal-contact .field input { width: 100%; }
#ow-founder { display: block; } #ow-founder .ow-btns { margin-top: 6px; }
/* Food Club story reveal (after purchase only) */
.gal-reveal { position: fixed; inset: 0; z-index: 2147483000; overflow-y: auto; background: radial-gradient(circle at 50% 20%, rgba(212,172,91,.18), rgba(6,11,22,0) 65%), #070d1a; animation: galFade .4s ease both; }
.gal-reveal-in { max-width: 460px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px 32px; text-align: center; }
.gal-reveal-art { width: 62%; margin: 8px auto 10px; border: 2px solid var(--gold); border-radius: 18px; overflow: hidden; box-shadow: 0 0 40px rgba(212,172,91,.35); }
.gal-reveal-art img, .gal-reveal-art .gal-ph { display: block; width: 100%; }
.gal-reveal-title { margin: 6px 0 12px; color: var(--gold-2); font-family: Georgia, serif;
  background: linear-gradient(100deg, #c7953f 20%, #fff3cf 45%, #c7953f 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: galShimmer 3.2s ease-in-out infinite; }
.gal-story { text-align: left; line-height: 1.6; font-size: 1rem; color: #f1ead8; }
.gal-story span { opacity: 0; animation: galWord .5s ease forwards; animation-delay: calc(var(--i) * 45ms + 600ms); }
.gal-reveal.rm, .gal-reveal.rm .gal-story span, .gal-reveal.rm .gal-reveal-title { animation: none; opacity: 1; }
@keyframes galWord { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
@keyframes galShimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes galFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gal-reveal, .gal-story span, .gal-reveal-title { animation: none !important; opacity: 1 !important; } }
.founder-art { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px #d4ac5b, 0 0 14px rgba(84,220,255,.35); }
.founder-svg svg { width: 100%; height: 100%; }
.gal-sold.gal-reserved { background: linear-gradient(180deg, #cfe3ff, #7fa8e0); } .gal-accepts { margin-top: 10px; }

/* ---- New sections: hero header + Discover cards; Mood picker ---- */
.region-hero { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(212,172,91,.55); padding: 34px 14px 14px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(10,18,36,.35), rgba(10,18,36,.82)), var(--ph) center/cover no-repeat; }
.region-hero .region-title { margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.mood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 12px 0; }
.mood-tile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid rgba(212,172,91,.6); background: #13203b; padding: 0; cursor: pointer; color: #fff; }
.mood-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mood-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,28,0) 35%, rgba(8,14,28,.88)); }
.mood-label { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; font-weight: 700; font-size: 14px; text-align: left; line-height: 1.15; }
.mood-lock { position: absolute; top: 6px; right: 6px; z-index: 1; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: rgba(8,14,28,.8); color: var(--amber-2); border: 1px solid rgba(212,172,91,.6); }
.mood-tile.locked img { filter: saturate(.7) brightness(.85); }
.mood-dishes { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.mood-dish { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(212,172,91,.25); }
.mood-dish .thumb, .mood-dish img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex: none; }
.mood-dish-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mood-dish-text .btn { align-self: flex-start; margin-top: 4px; }
.mood-help { margin: 22px 0 6px; text-align: center; font-size: 11.5px; line-height: 1.45; color: rgba(212,172,91,.82); }
.mood-help a { color: var(--amber-2); text-decoration: underline; }
/* contrast fixes */
.share-app-btn.ph-btn { background-color: #c9a35c !important; }
.app-version { opacity: .8; }
.gal-shuffle { margin: -4px 0 8px; font-size: 12px; }
.gal-teaser { margin: 16px 0 4px; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 10px; background: rgba(255,255,255,.04); }
.gal-teaser p { margin: 0 0 6px; font-style: italic; color: #f1ece2; }
.gal-teaser .legend { font-style: normal; margin: 0; }
/* Gallery paintings: watermarked previews drawn as a background under a transparent shield (save/drag deterrents) */
.gal-art { position: absolute; inset: 0; display: block; background: center / cover no-repeat; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.gal-frame .gal-art, .gal-reveal-art .gal-art { position: relative; inset: auto; width: 100%; aspect-ratio: 1; border-radius: inherit; }
.gal-tile .gal-art { position: relative; inset: auto; width: 100%; aspect-ratio: 1; }
.gal-mine-art .gal-art { position: relative; inset: auto; width: 100%; aspect-ratio: 1; }
.gal-shield { position: absolute; inset: 0; background: transparent; -webkit-touch-callout: none; user-select: none; }
.gal-frame, .gal-tile, .gal-reveal-art, .gal-mine-art, .founder-art { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.gal-fullres { color: var(--amber-2); }
.ow-fullres { display: block; margin-top: 6px; font-size: 12px; }
/* Gallery sound toggle (galsound.js) */
.gal-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gal-head-row .gal-kicker { margin: 0; }
.gal-snd { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: #0f1a2e; color: var(--amber-2); border: 1.5px solid var(--gold); }
.gal-snd svg { width: 20px; height: 20px; }
.gal-snd[aria-pressed="false"] { color: #b9b3a6; border-color: rgba(212,172,91,.5); }
.gal-snd:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 2px; }
.gal-founder-value { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--amber-2); letter-spacing: .02em; }

/* Orders tab: full-width Gift, then Roll | Combo side by side, then the DoorDash | Uber Eats app icons centered under them */
.orders-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0 14px; }
.orders-actions .orders-btn { width: 100%; min-height: 52px; font-weight: 700; font-size: 16px; border: 1.5px solid var(--gold); border-radius: 14px; }
.orders-actions .orders-rolls { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.orders-partners { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; justify-items: center; }
.partner-icon { display: block; width: 60px; height: 60px; border-radius: 22.37%; overflow: hidden; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: transform .12s ease; }
.partner-icon img { display: block; width: 60px; height: 60px; border-radius: inherit; }
.partner-icon:active { transform: scale(.92); }
.partner-icon:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .partner-icon { transition: none; } }
.orders-actions .orders-rolls .btn { padding-left: 10px; padding-right: 10px; }

/* r3.1: gallery art is a real <img> under the tap shield; gallery sheets keep clear of the bottom tab bar */
.gal-art .gal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
  pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.gal-art { overflow: hidden; }
.gal-shield { z-index: 1; }
.gal-teaser-k { margin-bottom: 2px; font-weight: 700; letter-spacing: .04em; }
#cook-sheet[data-mode^="gallery"] .sheet-body { padding-bottom: calc(var(--tabbar-h, 72px) + env(safe-area-inset-bottom) + 16px); }

/* spicy-food preference (onboarding step + Profile > Preferences) */
.quiz-spice { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; }
.quiz-spice .big-chip { width: 100%; justify-content: center; min-height: 52px; font-size: 1.05rem; }
.quiz-spice-skip { display: block; margin: 14px auto 0; }
.spice-pref { margin: 6px 0 4px; }

/* crowd spice rating: jalapeño icons only, bottom-left on dish photos, shown only above SPICE_MIN_VOTES */
.spice-wrap { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.spice-badge { display: inline-flex; gap: 1px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }   /* icons only: no pill/box behind them */
.spice-badge .jp { width: 20px; height: 20px; display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.85)) drop-shadow(0 0 2px rgba(0,0,0,.55)); }
.spice-warn { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 7px; border-radius: 999px; background: rgba(140, 30, 20, .88); }
.spice-vote { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.spice-vote .sv-q { font-size: .9rem; color: var(--muted, #c9c2b4); }
.spice-vote .sv-row { display: inline-flex; gap: 2px; }
.sv-btn { min-width: 40px; min-height: 40px; padding: 6px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; opacity: .38; filter: grayscale(.6); transition: transform .1s ease, opacity .15s; }
.sv-btn .jp { width: 24px; height: 24px; display: block; }
.sv-btn.on { opacity: 1; filter: none; }
.sv-btn:active { transform: scale(.9); }
.sv-btn:focus-visible { outline: 2px solid var(--gold); }

/* ---------- Home background (r3.1): ONE fixed, non-rotating layer, Home tab only ----------
   A position: fixed full-viewport layer (not a fixed background-attachment, which iOS Safari ignores). Two copies of
   the 1080x1300 photo: a blurred, darkened FILL (object-fit: cover) for the edges, and the SHARP photo on top at
   --hb-w = min(125vw, 640px) wide (iPhone 390 -> 488x587 px; 430 -> 537x647 px), pinned to the top and cropped only a
   little at the sides, so the whole D-dice logo (10-46% of the height) AND the steak plate (53-80%) are visible instead of
   a zoomed-in crop. The soft gold/white glow behind the logo is baked into the image (tools/make_home_bg.py) and nothing
   tints the logo: the navy vignette is clear in the middle, and the navy readability gradient starts below the logo
   (behind the title, chips and buttons). */
:root { --hb-w: min(125vw, 640px); }
.home-bg { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: -2; display: none; pointer-events: none; overflow: hidden; background: var(--bg); }
body[data-tab="home"] .home-bg { display: block; }
body[data-tab="home"] { background: transparent; }
.home-bg picture { display: contents; }
.home-bg img { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; display: block; }
.home-bg-fill { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; object-position: 50% 70%; filter: blur(24px) brightness(.42) saturate(1.1); }
.home-bg-img { position: absolute; top: 0; left: 50%; width: var(--hb-w); height: calc(var(--hb-w) * 1.2037); max-width: none; transform: translateX(-50%); object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
@media (min-width: 520px) {   /* wider than the photo: soften its left/right edges into the blurred fill */
  .home-bg-img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 82%, transparent 100%); mask-composite: intersect; }
}
.home-bg-scrim { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 130% 95% at 50% 28%, rgba(9, 17, 33, 0) 58%, rgba(9, 17, 33, .35) 82%, rgba(9, 17, 33, .6) 100%),
    linear-gradient(180deg, rgba(9, 17, 33, 0) 0, rgba(9, 17, 33, 0) calc(var(--hb-w) * 0.62), rgba(9, 17, 33, .45) calc(var(--hb-w) * 0.98), rgba(9, 17, 33, .78) calc(var(--hb-w) * 1.25), rgba(9, 17, 33, .88) 100%); }

/* r4: "dice" moods (Sports Dice lives in Mood now) */
.mood-dice { margin: 6px 0 12px; }
.mood-roll-result:empty { display: none; }
.mood-roll-card { margin-top: 10px; padding: 12px; border-radius: 16px; border: 1.5px solid var(--gold); background: rgba(10, 18, 34, .92); }
.mood-roll-card .result-photo { border-radius: 12px; overflow: hidden; }
.mood-roll-name { margin: 2px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; color: #fff; }

/* ---------- r4 premium die (dice3d.js faces, Home + game) ----------
   Glossy ivory with rounded/beveled edges, soft key light from the top-left (per-face shading + specular), recessed pips
   (inner shadow + light lower lip), subtle gold rim light, soft contact shadow. Pip colors unchanged (black; the face-1 pip stays red). */
.d3-core { background: #e9e5de; border-radius: 18%; }
.d3f { border-radius: 24%; padding: 14%;
  background: radial-gradient(130% 120% at 22% 16%, #ffffff 0, #fcfbf8 28%, #f0ece5 62%, #dcd6cb 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 200, 130, .42), inset 2px 2px 3px rgba(255, 255, 255, .95), inset -3px -4px 7px rgba(120, 92, 50, .28), inset 0 0 10px rgba(212, 166, 74, .18); }
.d3f::after { background: radial-gradient(ellipse 48% 34% at 28% 20%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 72%),
  linear-gradient(135deg, rgba(255, 255, 255, 0) 60%, rgba(232, 196, 120, .22) 100%); }
.d3f2, .d3f5 { --sh: .16; } .d3f4, .d3f6 { --sh: .24; } .d3f3 { --sh: .02; }
.d3f::before { background: rgba(30, 22, 12, var(--sh, 0)); }
.d3f i { width: 60%; }
/* pips: same colors as before (black, the one pip on face 1 stays red), now recessed with an inner shadow + light lower lip */
.d3f i.pip { width: 60%; background: radial-gradient(circle at 42% 36%, #4a4a4a 0, #141414 50%, #000 100%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .95), inset 0 -1px 1px rgba(255, 255, 255, .18), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(120, 92, 50, .22); }
.d3f1 i.pip { width: 76%; background: radial-gradient(circle at 40% 34%, #e0485a 0, #b0101f 55%, #6d0010 100%);
  box-shadow: inset 0 2px 3px rgba(60, 0, 8, .9), inset 0 -1px 1px rgba(255, 180, 180, .25), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(120, 92, 50, .22); }
.d3-shadow { bottom: -12%; height: 30%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, .3) 42%, rgba(0, 0, 0, 0) 72%); }
.die.die3 { background: radial-gradient(circle at 40% 30%, rgba(212, 166, 74, .16), rgba(212, 166, 74, 0) 55%), radial-gradient(circle at 50% 78%, #1f3357, #0d1628 78%);
  border: 1.5px solid rgba(212, 166, 74, .8); box-shadow: 0 8px 20px rgba(2, 2, 3, .5), inset 0 1px 0 rgba(255, 236, 190, .25), inset 0 0 14px rgba(212, 166, 74, .14); }

/* ---------- r4 whole-plate dish photos ----------
   Frames match the photos (4:3) instead of wide/short or square crops; the photo is object-fit: contain so the whole plate is
   visible, and a blurred, darkened copy of the same photo (--ph-bg) fills any letterbox. Food art (illustrations) unchanged. */
.result-photo, .sheet-photo, .feed-photo, .combo-photo { height: auto; aspect-ratio: 4 / 3; }
.result-photo { max-height: 300px; }
.sheet-photo { max-height: 280px; }
.tonight-photo { width: 112px; height: 84px; }
.thumb { width: 64px; height: 48px; }
.mood-dish .thumb { width: 88px; height: 66px; }
.ph-fit::before { content: ""; position: absolute; inset: -12px; background: var(--ph-bg, none) center / cover no-repeat; filter: blur(12px) brightness(.5) saturate(1.1); z-index: 0; }
.ph-fit > img { object-fit: contain !important; z-index: 1; }
.ph-fit > .photo-emoji { position: relative; z-index: 0; }
.ph-fit > .zoom-hint, .ph-fit > .spice-wrap, .ph-fit > .photo-credit, .ph-fit > a { z-index: 2; }

/* r4: tab-bar Home badge = a tiny static die from the same renderer (replaces the 🎲 emoji) */
#tab-roll.has-d3::before { content: none; }
#tab-roll .tab-d3 { left: auto; right: calc(50% - 21px); top: 3px; z-index: 1; }
#tab-roll .tab-d3 .d3-shadow { bottom: -16%; opacity: .7; }
#tab-roll .tab-d3 .d3f { padding: 12%; box-shadow: inset 0 0 0 .5px rgba(232, 200, 130, .5), inset -1px -1px 2px rgba(120, 92, 50, .3); }
#tab-roll .tab-d3 .d3f i { width: 2.4px !important; height: 2.4px !important; min-width: 0; aspect-ratio: auto; margin: auto; }
#tab-roll .tab-d3 .d3f i.pip { box-shadow: none; }

/* r4 Cook it icon (option B: skillet with steam) */
.cook-ico { width: 21px; height: 21px; flex: none; display: inline-block; vertical-align: -4px; color: var(--amber-2); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }

/* ---------- r4 dish page (cook / order / grab sheet) in the Home look ----------
   Fixed backdrop: navy + a soft, blurred copy of the dish photo (--dish-bg, set by openCook) under a navy tint; it stays put
   while the recipe scrolls. Content sits on translucent navy panels with thin gold borders like the Home chips / Roll button. */
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .sheet-panel {
  background: #0c1628; border: 1.5px solid rgba(212, 166, 74, .75); border-bottom: 0; isolation: isolate; overflow: hidden; }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .sheet-panel::before {
  content: ""; position: absolute; inset: -30px; z-index: -2; background: var(--dish-bg, none) center / cover no-repeat;
  filter: blur(20px) brightness(.78) saturate(1.2); transform: translateZ(0); }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .sheet-panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 130% 90% at 50% 20%, rgba(9, 17, 33, .2), rgba(9, 17, 33, .62) 75%), linear-gradient(180deg, rgba(9, 17, 33, .12), rgba(9, 17, 33, .55)); }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .sheet-head {
  background: rgba(10, 18, 34, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(212, 166, 74, .55); }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .sheet-head h2 { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .sheet-body { background: transparent; }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .sheet-photo { border: 1.5px solid rgba(212, 166, 74, .7); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) :is(.result-desc, .servings, .ingredients, .steps, .tips, .note, .grab-card, .tips-card, .chef-tips, .spice-vote) {
  background: rgba(10, 18, 34, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 166, 74, .5); border-radius: 14px; padding: 10px 14px; margin: 10px 0; color: #f3efe6; }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .servings { display: inline-block; font-weight: 700; color: var(--amber-2); }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .ingredients li { border-bottom-color: rgba(212, 166, 74, .22); }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .steps li { padding: 4px 0; }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) h3 { color: var(--amber-2); letter-spacing: .14em; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); margin: 18px 4px 6px; }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .sheet-body > .legend { color: #e6e0d4; margin-left: 4px; }
#cook-sheet:is([data-mode="cook"], [data-mode="order"], [data-mode="grab"], [data-mode^="chef:"]) .chef-teaser { background: rgba(10, 18, 34, .62); border-color: rgba(212, 166, 74, .6); }

/* r4 gold line icons (receipt = per-dish Order, takeout bag = Orders roll, chef hat = chefs); same style as the Cook it skillet */
.order-ico, .bag-ico, .hat-ico { width: 21px; height: 21px; flex: none; display: inline-block; vertical-align: -4px; color: var(--amber-2); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.dc-icon .hat-ico { width: 26px; height: 26px; vertical-align: middle; }
.fm-title .hat-ico { width: 26px; height: 26px; vertical-align: -3px; }
.chef-hat { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 1px); width: 26px; height: 22px; display: grid; place-items: center; border-radius: 8px; background: rgba(10, 18, 34, .78); border: 1px solid rgba(212, 166, 74, .6); }
.chef-hat .hat-ico { width: 18px; height: 18px; vertical-align: 0; }
.chef-hat.inline { position: static; display: inline-grid; transform: none; vertical-align: -6px; }
/* r4: "Roll something to order" fits on one line at 390px (wider column, slightly tighter type); if a wider system font still
   forces a wrap, the bag icon keeps its full 21px size (flex: none) and sits centered beside the label. */
.orders-actions .orders-rolls { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.orders-actions .orders-rolls .btn { padding-left: 8px; padding-right: 8px; font-size: 14.5px; gap: 6px; letter-spacing: -.1px; }
#orders-roll .bag-ico { width: 21px; height: 21px; flex: none; }

/* ---------- r4 frameless Home die (next to Roll) ----------
   No tile, frame or background: the 3D die stands alone on the Home photo. Same 76x76 button = same tap target.
   Moderate "pop" so it reads over light and dark parts of the backdrop; three owner options via data-pop on #die:
   a = soft drop + contact shadow only; b = (default) shadow + thin dark hairline outline; c = shadow + thin gold hairline + faint warm glow. */
body[data-view] .die.die3, .die.die3 { background: none; background-color: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 18px; }
.die.die3:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 2px; }
.die.die3 .d3-shadow { bottom: -14%; height: 30%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, .32) 45%, rgba(0, 0, 0, 0) 72%); }
.die.die3[data-pop="a"] .d3 { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)) drop-shadow(0 8px 14px rgba(0, 0, 0, .32)); }
.die.die3[data-pop="b"] .d3 { filter: drop-shadow(0 0 1px rgba(6, 10, 20, .95)) drop-shadow(0 0 .8px rgba(6, 10, 20, .9)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)) drop-shadow(0 8px 14px rgba(0, 0, 0, .32)); }
.die.die3[data-pop="c"] .d3 { filter: drop-shadow(0 0 1px rgba(230, 190, 106, 1)) drop-shadow(0 0 .6px rgba(201, 151, 63, 1)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)) drop-shadow(0 0 12px rgba(230, 190, 106, .38)) drop-shadow(0 8px 14px rgba(0, 0, 0, .25)); }

/* ---------- r4 Famous Chef Recipes + Orders in the dish-page look ----------
   Instead of the solid navy page: a fixed, blurred food photo (Chefs: chef food art; Orders: burger & fries) under a dark navy
   tint that stays put while scrolling; content on see-through navy panels with thin gold borders and gold accents. */
body[data-view="chefs"], body[data-view="orders"] { background: transparent; }
.photo-view .famous-bg { filter: blur(20px) brightness(.72) saturate(1.2); }
.photo-view .famous-tint { background: radial-gradient(ellipse 130% 90% at 50% 20%, rgba(9, 17, 33, .25), rgba(9, 17, 33, .66) 75%), linear-gradient(180deg, rgba(9, 17, 33, .15), rgba(9, 17, 33, .6)); }
#view-chefs .famous-panel { background: rgba(10, 18, 34, .5); border: 1.5px solid rgba(212, 166, 74, .7);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 190, .1); }
#view-chefs .fm-title { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#view-chefs .fm-sub { color: #e6e0d4; }
#view-chefs .fm-cats .chip { background: rgba(10, 18, 34, .62); border: 1px solid rgba(212, 166, 74, .5); }
#view-chefs .fm-cats .chip[aria-pressed="true"] { border: 2px solid var(--amber); color: var(--amber-2); }
#view-chefs .fm-tile { border: 1px solid rgba(212, 166, 74, .55); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
#view-chefs .back-link { color: var(--amber-2); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
#view-orders .tab-title { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
#view-orders > .legend { color: #e6e0d4; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
#view-orders .filter-title { color: var(--amber-2); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
#view-orders .btn, #view-orders .card, #view-orders .plan-row { background-color: rgba(10, 18, 34, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#view-orders .card { border: 1px solid rgba(212, 166, 74, .55); }
#view-orders #orders-recent { background: rgba(10, 18, 34, .55); border: 1px solid rgba(212, 166, 74, .45); border-radius: 14px; padding: 6px 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#view-orders .btn-link { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--amber-2); text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
#view-orders .partner-icon { box-shadow: 0 0 0 1px rgba(212, 166, 74, .6), 0 4px 12px rgba(0, 0, 0, .5); }
#cook-sheet[data-mode^="chef:"] :is(.chef-story, .snap-steps, .lock-box, .notice) { background: rgba(10, 18, 34, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 166, 74, .5); border-radius: 14px; padding: 10px 14px; margin: 10px 0; color: #f3efe6; }
#cook-sheet[data-mode^="chef:"] .snap-steps { padding-left: 32px; }
#cook-sheet[data-mode^="chef:"] h4 { color: var(--amber-2); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); margin: 18px 4px 6px; }
#cook-sheet[data-mode^="chef:"] .rx-photo { border: 1.5px solid rgba(212, 166, 74, .7); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
#view-orders :is(.card, .combo-card) { background: rgba(10, 18, 34, .62); border: 1px solid rgba(212, 166, 74, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.photo-view .famous-bg { filter: blur(18px) brightness(.88) saturate(1.25); }
.photo-view .famous-tint { background: radial-gradient(ellipse 130% 90% at 50% 20%, rgba(9, 17, 33, .12), rgba(9, 17, 33, .58) 75%), linear-gradient(180deg, rgba(9, 17, 33, .08), rgba(9, 17, 33, .5)); }
/* r4 owner pick (data-pop="s", default): option A's soft drop + contact shadow, a very faint warm glow and a very thin,
   low-opacity gold hairline. Subtle; no frame. Options a/b/c stay defined for comparison. */
.die.die3[data-pop="s"] .d3 { filter: drop-shadow(0 0 .5px rgba(230, 190, 106, .55)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)) drop-shadow(0 8px 14px rgba(0, 0, 0, .32)) drop-shadow(0 0 9px rgba(230, 190, 106, .16)); }

/* ---------- r4 Restaurant Partners ("For Restaurants · Get Featured") ---------- */
.partner-entry { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); margin-top: 18px; }
.partner-entry .pe-ico { font-size: 1.8rem; }
.partner-entry strong { color: var(--amber-2); }
.pt-lead { font-size: 1.02rem; }
.pt-points { padding-left: 18px; display: grid; gap: 8px; }
.pt-actions { display: grid; gap: 10px; margin: 14px 0 6px; }
.pt-form .field { display: grid; gap: 4px; margin: 8px 0; }
.pt-form .field input { min-height: 44px; }
.pt-photos { list-style: none; padding: 0; display: grid; gap: 8px; }
.pt-photo { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid rgba(212, 166, 74, .4); border-radius: 12px; background: rgba(10, 18, 34, .55); }
.pt-photo img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.pt-st { font-size: .85rem; font-weight: 700; } .pt-ok { color: var(--mild); } .pt-bad { color: var(--hot); }
.check-row { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.check-row input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.pt-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 800; border: 1px solid currentColor; }
.pt-pending { color: var(--amber-2); } .pt-approved { color: var(--mild); } .pt-rejected, .pt-due { color: var(--hot); }
.pt-queue { margin: 18px 0; } .pt-qlist { list-style: none; padding: 0; }
.pt-thumbs { display: flex; gap: 6px; margin: 8px 0; } .pt-thumbs img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(212, 166, 74, .4); }
.pt-panel h4 { margin: 0 0 8px; color: var(--amber-2); }
.pt-name { font-size: 1.2rem; } .pt-price { font-size: 1.6rem; font-weight: 800; color: var(--amber-2); margin: 4px 0; }
.pt-menu-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.pt-menu-list li { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; border-bottom: 1px solid rgba(212, 166, 74, .2); padding-bottom: 8px; }
.pt-menu-form .field { display: grid; gap: 4px; margin: 8px 0; }
.featured-label { margin-bottom: 8px; }

/* ---------- r4 owner pick: flat "pair of dice" logo next to Roll (assets/dice-pair.svg) ----------
   Frameless in the same 76x76 tap target; pop as in dice-logo-options.html: soft drop + contact shadow, very faint warm glow and
   a thin gold hairline (the SVG's own 1-unit gold stroke). No dark outline, no tile. Tap = quick 0.5 s spin of the whole pair. */
.die.die-pair { display: grid; place-items: center; padding: 0; }
.dpair { position: relative; width: 54px; height: 54px; display: block; pointer-events: none; }
.dpair-img { position: relative; display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 2px 2.5px rgba(0, 0, 0, .42)) drop-shadow(0 5px 9px rgba(0, 0, 0, .28)) drop-shadow(0 0 6px rgba(242, 204, 130, .16)); }
.dpair-contact { position: absolute; left: 12%; right: 12%; bottom: -9%; height: 20%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, 0) 72%); }
.dpair.spin .dpair-img { animation: pairSpin .5s cubic-bezier(.2, .8, .25, 1) both; }
.dpair.spin .dpair-contact { animation: pairShadow .5s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes pairSpin { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(250deg) scale(1.08) translateY(-3px); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes pairShadow { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(.8); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .dpair.spin .dpair-img, .dpair.spin .dpair-contact { animation: none; } }
#tab-roll .tab-pair { position: absolute; right: calc(50% - 23px); top: 2px; width: 18px; height: 18px; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); }

/* ---------- r4 Home cuisine picker (above the Roll row) + Roll without subtitle ---------- */
.home-cuisines { margin-top: 8px; }
.home-cuisines .region-chip { min-height: 40px; padding: 7px 13px; font-size: .92rem; }
.home-cuisine-note { margin: 6px 2px 0; font-size: .85rem; color: #f3efe6; background: rgba(10, 18, 34, .7); border: 1px solid rgba(212, 166, 74, .5);
  border-radius: 12px; padding: 6px 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.roll-cta { gap: 0; }
.roll-cta #roll-label { line-height: 1; }
/* r4: gold chef's hat before chef recipe titles (sheet header), sized to the title text */
.sheet-head h2 .title-ico { display: inline-block; margin-right: 8px; vertical-align: -.12em; }
.sheet-head h2 .title-ico .hat-ico { width: 1.05em; height: 1.05em; vertical-align: 0; }
.mode-chip .hat-ico { width: 18px; height: 18px; vertical-align: -3px; }

/* ---------- r4 site-wide legal footer line ---------- */
.site-footer { margin: 22px auto 6px; padding: 0 16px; max-width: 600px; text-align: center; font-size: .72rem; line-height: 1.4; color: rgba(185, 195, 214, .78); position: relative; z-index: 1; }
.legal-link { background: none; border: 0; padding: 4px 2px; margin: 0; font: inherit; color: var(--amber-2); text-decoration: underline; cursor: pointer; min-height: 24px; }
.sheet-footer { margin-top: 26px; }
.map-footer { position: absolute; left: 8px; bottom: 4px; margin: 0; padding: 1px 8px; border-radius: 8px; background: rgba(10, 18, 34, .72); z-index: 500; text-align: left; }
.legal-text { font-size: .95rem; line-height: 1.55; }
/* r4 legal footer, owner tweak: very small and barely noticeable; Legal keeps a ~32px invisible tap target */
.site-footer { margin: 14px auto 2px; padding: 0 16px; font-size: 10px; line-height: 1.2; color: rgba(255, 255, 255, .5); letter-spacing: .01em; }
.sheet-footer { margin-top: 18px; }
.legal-link { position: relative; color: rgba(212, 166, 74, .72); text-decoration: none; padding: 0 2px; min-height: 0; font-size: inherit; }
.legal-link::after { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 32px; transform: translateY(-50%); }
.map-footer { padding: 0 6px; bottom: 3px; background: rgba(10, 18, 34, .55); margin: 0; }
/* r4 Orders layout: Gift → two roll buttons → result → (spacer) → DoorDash / Uber Eats → recent searches → legal footer */
#view-orders .orders-bottom { margin-top: max(48px, 40vh); }
#view-orders #orders-result:not(:empty) + #orders-craving + .orders-bottom, #view-orders #orders-result:not(:empty) ~ .orders-bottom { margin-top: 36px; }
#view-orders .orders-bottom .orders-partners { margin-bottom: 18px; }
#view-orders .orders-bottom { margin-top: max(56px, 54vh); }
#view-orders #orders-recent .plan-row { grid-template-columns: 1fr !important; gap: 8px; }
#view-orders .orders-bottom { margin-top: max(56px, 60vh); }
/* r4 share icon (owner pick A: box + up arrow), inline currentColor, styling from share-options.html */
.share-app-btn, #share-settings-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.share-ico { width: 21px; height: 21px; flex: none; }
#share-home .share-ico { color: #0f1a2e; filter: drop-shadow(0 1px 0 rgba(255,236,190,.35)); }
#share-settings-btn .share-ico, .share-ico.gold { color: #e6be6a; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.sheet-head h2 .title-ico .share-ico { width: 1.05em; height: 1.05em; vertical-align: -0.15em; }
/* r4 Home line icons: die (re-roll / Roll again / Play Game), star (+sparkle), camera, gift box. Same style as the skillet. */
.die-ico, .star-ico, .camera-ico, .gift-ico { width: 1.3em; height: 1.3em; max-width: 22px; max-height: 22px; flex: none; display: inline-block; vertical-align: -.28em; color: var(--amber-2); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.tonight-label .star-ico { width: 1.25em; height: 1.25em; vertical-align: -.25em; margin-left: 2px; }
.region-title .star-ico { width: .95em; height: .95em; max-width: none; max-height: none; vertical-align: -.1em; margin-right: 4px; }
.region-chip .star-ico { width: 16px; height: 16px; vertical-align: -3px; }
[data-act="tonight-reroll"] .die-ico, [data-act="reroll-day"] .die-ico { width: 24px; height: 24px; max-width: none; max-height: none; vertical-align: middle; }
/* gold-filled buttons: icons inherit the navy label colour */
#share-home .ico, .btn-gold .ico { color: currentColor; filter: drop-shadow(0 1px 0 rgba(255, 236, 190, .35)); }
#view-orders .orders-bottom { margin-top: max(56px, 50vh); }
#view-orders .orders-bottom .orders-partners { margin-bottom: 120px; }
/* r4 contrast fixes after the warmer gold: keep >= 4.5:1 */
.plan-btn:disabled { opacity: .78; }
.legal-link { color: rgba(212, 166, 74, .88); }
/* r4 Home chips: All (A full table, Jeffrey Allen, CC BY 2.0) and For You (Romantic dinner for one, Janko Ferlič, CC0) photo backdrops, same treatment as Date Night */
#region-chips [data-region="All"] { --ph: url(assets/bg/bg-all.webp); }
#region-chips [data-region="For You"] { --ph: url(assets/bg/bg-foryou.webp); }
#region-chips [data-region="All"], #region-chips [data-region="For You"] {
  background-image: linear-gradient(rgba(10, 18, 34, .72), rgba(10, 18, 34, .80)), var(--ph) !important; background-size: cover !important; background-position: center !important;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
/* r4: when the Home photo strip is shortened to keep Roll clear of the tab bar, lift the photo by the same amount so the title still sits under the steak */
.home-bg-img { top: calc(-1 * var(--hero-shift, 0px)); }

/* r4 result card: tips split (Make it cheaper + Leftover idea, then Chef's secret) + compact Order In */
.chef-tips-split { display: grid; gap: 8px; margin-top: 12px; }
.chef-tips-split .chef-tips, .chef-tips-split .chef-teaser { margin-top: 0; }
.chef-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; text-align: center; line-height: 1.3; }
.chef-teaser .gold-lock { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lock-ico { width: 16px; height: 16px; flex: none; color: var(--amber-2); }
.chef-teaser .hat-ico, .chef-tips .hat-ico { width: 18px; height: 18px; vertical-align: -3px; }
.order-in-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.btn-compact.order-in-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; font-size: .9rem; font-weight: 700;
  background: rgba(10, 18, 34, .55); border: 1.5px solid var(--gold); color: #fff; border-radius: 999px; white-space: nowrap; }
.btn-compact.order-in-btn .bag-ico { width: 18px; height: 18px; vertical-align: 0; }

/* Value unknown pieces (view-only, price via customer support) */
.gal-vu-tag { background: linear-gradient(180deg, #1c2b4a, #0f1a2e); color: #ffe7a8; border: 1px solid #c7953f; }
.gal-vu-value { font-size: 15px; margin-top: 10px; }
.gal-vu-contact a { color: var(--amber-2); font-weight: 700; word-break: break-all; }

/* r4 Gallery: description + small muted charity note with a gold line heart */
.gal-desc { margin: 6px 0 4px; font-size: .93rem; color: #e9e4d8; }
.gal-charity { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; font-size: .8rem; color: rgba(255, 255, 255, .62); }
.gal-charity .heart-ico { width: 15px; height: 15px; flex: none; color: var(--amber-2); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }

/* r4 intro Replay (first-run overlay) + Settings "Watch intro" */
.intro-replay { position: absolute; z-index: 3; left: max(14px, env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--gold); background: rgba(10, 18, 34, .6); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.replay-ico { width: 18px; height: 18px; flex: none; color: var(--amber-2); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
#watch-intro, #intro-watch-replay { display: inline-flex; align-items: center; gap: 8px; }
.intro-watch-video { width: 100%; border-radius: 14px; border: 1px solid rgba(212, 166, 74, .5); background: #000; display: block; }
.intro-watch-row { margin-top: 10px; }
.sheet-head h2 .title-ico .replay-ico { width: 1em; height: 1em; }

/* r4 no-emoji rule: emoji in rendered text become gold line icons (emoji-icons.js) */
.emo-ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.2em; flex: none; color: var(--amber-2); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .75)); }
:is(.btn-gold, #share-home, .tab-discover, .is-gold) .emo-ico { color: currentColor; filter: none; }

/* ---------- r4 Discover: Community Picks + Founders Wall ---------- */
.cm-section { margin: 22px 0 6px; }
.cm-head { margin: 0 2px 10px; }
.cm-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.12rem; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-2, #e6be6a); }
.cm-title .cm-ico { width: 1.15em; height: 1.15em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.cm-sub { margin: 4px 0 0; font-size: .86rem; color: rgba(255,255,255,.78); }
.cm-ico { vertical-align: -0.16em; color: var(--amber-2, #e6be6a); }
.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 300px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; overscroll-behavior-x: contain; }
.cm-scroll > li { scroll-snap-align: start; }
.cm-card { position: relative; background: rgba(15,26,46,.72); border: 1px solid rgba(212,166,74,.55); border-radius: 16px; padding: 14px; color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); min-width: 0; }
.cm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cm-type { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--amber-2, #e6be6a); }
.cm-ex { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0f1a2e; background: #e6be6a; border-radius: 999px; padding: 2px 8px; line-height: 1.4; }
.cm-cause, .cm-fname { margin: 8px 0 4px; font-size: 1.02rem; line-height: 1.25; color: #fff; }
.cm-rest, .cm-street { margin: 2px 0; font-size: .86rem; color: rgba(255,255,255,.9); overflow-wrap: anywhere; }
.cm-dim { color: rgba(255,255,255,.72); }
.cm-blurb, .cm-story { margin: 6px 0; font-size: .86rem; line-height: 1.4; color: rgba(255,255,255,.86); }
.cm-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(212,166,74,.35); overflow: hidden; margin-top: 8px; }
.cm-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #c9973f, #e6be6a); border-radius: inherit; }
.cm-prog { margin: 5px 0 0; font-size: .8rem; color: rgba(255,255,255,.8); }
.cm-prog strong { color: #e6be6a; }
.cm-btn { width: 100%; margin-top: 10px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.cm-btn.btn-ghost { background: rgba(15,26,46,.55); border: 1px solid rgba(212,166,74,.7); color: #e6be6a; }
.cm-btn.btn-primary .cm-ico { color: currentColor; }
.cm-empty { display: flex; flex-direction: column; border-style: dashed; }
.cm-empty h4 { margin: 6px 0 2px; color: #e6be6a; }
.cm-empty-art { font-size: 2rem; line-height: 1; }
.cm-empty .cm-btn { margin-top: auto; }
.cm-wall { display: grid; gap: 12px; }
.cm-founder { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.cm-portrait { position: relative; width: 96px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; border: 1px solid rgba(212,166,74,.7); box-shadow: 0 4px 10px rgba(0,0,0,.35); background: #0f1a2e; }
.cm-portrait .cm-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.cm-portrait .cm-ex { position: absolute; left: 6px; bottom: 6px; font-size: .62rem; padding: 1px 6px; }
.cm-portrait-sm { width: 64px; }
.cm-fname { margin-top: 0; }
.cm-invite { display: grid; grid-template-columns: 64px 1fr; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 16px; border: 1px dashed rgba(212,166,74,.75); background: rgba(15,26,46,.6); color: #fff; }
.cm-invite h4 { margin: 0 0 2px; color: #e6be6a; }
@media (max-width: 370px) { .cm-founder { grid-template-columns: 80px 1fr; } .cm-portrait { width: 80px; } .cm-scroll { grid-auto-columns: 86%; } }
.cm-order .cm-rest { font-size: .95rem; }
.cm-tip { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid rgba(212,166,74,.6); background: rgba(15,26,46,.7); color: #fff; }
.cm-tip h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: #e6be6a; }
.cm-demo { margin: 0 0 6px; font-size: .8rem; font-weight: 700; color: #0f1a2e; background: #e6be6a; border-radius: 8px; padding: 6px 9px; }
.cm-amts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cm-amts .chip { min-width: 56px; min-height: 40px; }
.pt-cause { border: 1px solid rgba(212,166,74,.45); border-radius: 12px; padding: 8px 12px 4px; margin: 10px 0; }
.pt-cause legend { padding: 0 6px; font-size: .85rem; color: #e6be6a; }
.cm-invite .cm-portrait { width: 64px; }
#founders-wall { margin-bottom: 22px; }