/*! Dinner Disaster 2.3.0 | styles scoped to #dinner-disaster */
/* Dinner Disaster — game styles, scoped to #dinner-disaster so they never touch the rest of the site.
   Brand: MCUIRE (mcuire.ca). Deep teal-green surface, marigold buttons, warm cream "order tickets",
   the site's kente stripe, Playfair Display headings and Roboto text (provided by the site's theme),
   plus the game's own Shrikhand logo and Courier Prime ticket type (bundled with the plugin). */
#dinner-disaster {
  --dd-ink: #041314;        /* MCUIRE secondary */
  --dd-base: #1a2f33;       /* MCUIRE base: deep teal-green */
  --dd-base-2: #22393d;
  --dd-base-3: #2c474c;
  --dd-on-base: #f6f1e7;
  --dd-on-base-muted: #b9cbc6;
  --dd-marigold: #f39c12;   /* MCUIRE primary */
  --dd-marigold-deep: #ce8510;
  --dd-gold: #e0a22a;
  --dd-kente: #2f6b3a;      /* kente green from the site's header stripe */
  --dd-cocoa: #5e2d12;
  --dd-rust: #a23b1c;
  --dd-cream: #fbf6ee;      /* warm ivory ticket paper */
  --dd-cream-2: #f1eadc;
  --dd-sand: #d3cfc6;       /* MCUIRE tertiary */
  --dd-ink-muted: #4f5b5a;
  --dd-good: #2f6b3a;
  --dd-good-bg: #e2efe3;
  --dd-bad: #a23b1c;
  --dd-bad-bg: #f8e3da;
  --dd-neutral-bg: #ece6da;
  --dd-focus: #ffd27a;
  --dd-f-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --dd-f-body: Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --dd-f-logo: Shrikhand, 'Playfair Display', Georgia, serif;
  --dd-f-ticket: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --dd-r: 6px;
  --dd-sticky-top: var(--wp-admin--admin-bar--height, 0px);
  --dd-kente-stripe: repeating-linear-gradient(90deg, #f39c12 0 22px, #5e2d12 22px 30px, #041314 30px 34px, #2f6b3a 34px 52px, #e0a22a 52px 60px, #041314 60px 64px);
  display: block;
  position: relative;
  color: var(--dd-on-base);
  font-family: var(--dd-f-body);
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  min-height: 640px;              /* reserve space so the page does not jump while loading */
  margin-block: 1.5rem;
  scroll-margin-top: calc(var(--dd-sticky-top) + 16px);
}
/* Reset theme styles inside the game only. :where() keeps this reset easy to override below. */
#dinner-disaster *, #dinner-disaster *::before, #dinner-disaster *::after { box-sizing: border-box; }
#dinner-disaster :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, table, tbody, tr, td, th, form, label, input, button, a, b, strong, small, span, article, section, div, i) {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none; text-shadow: none;
  text-transform: none; letter-spacing: normal; font: inherit; color: inherit; text-decoration: none;
  max-width: none; float: none; outline-offset: 2px;
}
#dinner-disaster :where(ul, ol) { list-style: none; }
#dinner-disaster :where(button) { cursor: pointer; -webkit-appearance: none; appearance: none; line-height: 1.25; }
#dinner-disaster :where(button):disabled { cursor: not-allowed; }
#dinner-disaster :where(a) { color: var(--dd-marigold); text-decoration: underline; text-underline-offset: 3px; }
#dinner-disaster :focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 2px; }
#dinner-disaster .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- frame ---------- */
#dinner-disaster .dd-frame { position: relative; background: var(--dd-base); border-radius: 14px; overflow: clip; box-shadow: 0 18px 40px rgba(4, 19, 20, .25); }
#dinner-disaster .dd-frame::before { /* warm lantern glow, echoing the site's evening photography */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 320px at 85% -8%, rgba(243, 156, 18, .16), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(47, 107, 58, .18), transparent 60%);
}
#dinner-disaster .kente { height: 6px; background: var(--dd-kente-stripe); }
#dinner-disaster .wrap { position: relative; padding: 14px clamp(14px, 4vw, 28px) 28px; }
#dinner-disaster h2 { font-family: var(--dd-f-head); font-weight: 700; text-wrap: balance; }
#dinner-disaster h3 { font-family: var(--dd-f-head); }

/* ---------- top bar ---------- */
#dinner-disaster .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 4px 14px; flex-wrap: wrap; }
#dinner-disaster .brand { font-family: var(--dd-f-logo); font-size: 1.15rem; color: var(--dd-marigold); padding: 6px 0; white-space: nowrap; }
#dinner-disaster .tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
#dinner-disaster .chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(246, 241, 231, .22); background: rgba(246, 241, 231, .06); color: var(--dd-on-base); font-size: .88rem; white-space: nowrap; }
#dinner-disaster .chip-btn:hover:not(:disabled) { background: rgba(246, 241, 231, .13); }
#dinner-disaster .chip-btn:disabled { opacity: .55; }
#dinner-disaster .chip-btn b { font-variant-numeric: tabular-nums; font-weight: 700; }
#dinner-disaster .pill-note { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: rgba(224, 162, 42, .16); color: var(--dd-gold); border: 1px solid rgba(224, 162, 42, .45); }

/* ---------- buttons (MCUIRE: uppercase, letter-spaced, marigold pills) ---------- */
#dinner-disaster .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 26px; border-radius: 999px; border: 2px solid transparent; font-family: var(--dd-f-body); font-weight: 500; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; text-align: center; transition: background-color .15s, transform .1s; }
#dinner-disaster .btn-primary { background: var(--dd-marigold); color: var(--dd-ink); font-weight: 700; }
#dinner-disaster .btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s; }
#dinner-disaster .btn-primary:hover:not(:disabled)::before { transform: translateX(120%); }
#dinner-disaster .btn-primary:hover:not(:disabled) { background: #f6a92e; }
#dinner-disaster .btn-primary:active:not(:disabled) { transform: translateY(1px); }
#dinner-disaster .btn-ghost { background: transparent; color: var(--dd-on-base); border-color: rgba(246, 241, 231, .45); }
#dinner-disaster .btn-ghost:hover:not(:disabled) { background: rgba(246, 241, 231, .08); border-color: var(--dd-on-base); }
#dinner-disaster .btn-ink { background: var(--dd-base); color: var(--dd-on-base); }
#dinner-disaster .btn-ink:hover:not(:disabled) { background: var(--dd-ink); }
#dinner-disaster .btn-line { background: transparent; color: var(--dd-ink); border-color: var(--dd-ink); }
#dinner-disaster .btn-line:hover:not(:disabled) { background: var(--dd-cream-2); }
#dinner-disaster .btn-onink { background: transparent; color: var(--dd-on-base); border-color: rgba(246, 241, 231, .55); }
#dinner-disaster .btn-small { min-height: 44px; padding: 9px 16px; font-size: .82rem; }
#dinner-disaster .btn:disabled { opacity: .5; }
#dinner-disaster .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#dinner-disaster .row.nowrap { flex-wrap: nowrap; }
#dinner-disaster .row.center { justify-content: center; }
#dinner-disaster .gap-t { margin-top: 16px; }
#dinner-disaster .gap-t-s { margin-top: 8px; }
#dinner-disaster .gap-b { margin-bottom: 12px; }

/* ---------- title ---------- */
#dinner-disaster .hero { padding-block: 10px 6px; display: grid; gap: 14px; }
#dinner-disaster .eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; color: var(--dd-on-base-muted); font-weight: 700; }
#dinner-disaster .logo { font-family: var(--dd-f-logo); font-weight: 400; font-size: clamp(2.8rem, 12vw, 5rem); line-height: .95; color: var(--dd-cream); }
#dinner-disaster .logo span { color: var(--dd-marigold); display: inline-block; transform: rotate(-3deg); }
#dinner-disaster .byline { font-family: var(--dd-f-head); font-style: italic; color: var(--dd-on-base-muted); margin-top: -6px; }
#dinner-disaster .tagline { font-family: var(--dd-f-head); font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 700; color: var(--dd-gold); line-height: 1.3; }
#dinner-disaster .premise { color: var(--dd-on-base-muted); max-width: 60ch; }
#dinner-disaster .cta .btn { min-width: 180px; }
#dinner-disaster .code-form { display: grid; gap: 6px; max-width: 440px; }
#dinner-disaster .code-form label { font-size: .9rem; color: var(--dd-on-base-muted); }
#dinner-disaster .code-form input { flex: 1; min-width: 0; width: 100%; min-height: 48px; padding: 8px 14px; border-radius: 999px; border: 2px solid rgba(246, 241, 231, .3); background: rgba(4, 19, 20, .35); color: var(--dd-on-base); font-family: var(--dd-f-ticket); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
#dinner-disaster .code-form input::placeholder { color: rgba(246, 241, 231, .45); }
#dinner-disaster .form-error { color: #ffb9a3; font-size: .9rem; }
#dinner-disaster .form-error:empty { display: none; }
#dinner-disaster .resume { border: 1px dashed var(--dd-gold); border-radius: var(--dd-r); padding: 12px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
#dinner-disaster .install-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid rgba(246, 241, 231, .12); padding-top: 14px; }
#dinner-disaster .earn { border: 1px solid rgba(224, 162, 42, .5); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; background: rgba(4, 19, 20, .25); }
#dinner-disaster .earn h2 { font-family: var(--dd-f-head); font-size: 1.15rem; color: var(--dd-gold); }
#dinner-disaster .earn .bullets { list-style: disc; padding-left: 1.2em; display: grid; gap: 4px; }
#dinner-disaster .earn .bullets li { list-style: disc; }
#dinner-disaster .reward { color: var(--dd-gold); font-size: 1.05rem; }
#dinner-disaster .balance-big { display: grid; gap: 2px; }
#dinner-disaster .balance-big b { font-family: var(--dd-f-ticket); font-size: 2.2rem; line-height: 1; }
#dinner-disaster .balance-big span { font-size: .88rem; color: var(--dd-ink-muted); }
#dinner-disaster .sheet .btn { text-decoration: none; }
#dinner-disaster .earn .btn { text-decoration: none; }
#dinner-disaster .note { font-size: .9rem; color: var(--dd-on-base-muted); }
#dinner-disaster .note-ink { font-size: .9rem; color: var(--dd-ink-muted); margin-top: 10px; }

#dinner-disaster .shelf { margin-top: 28px; display: grid; gap: 24px; }
#dinner-disaster .shelf h2 { font-family: var(--dd-f-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--dd-on-base-muted); margin-bottom: 10px; font-weight: 700; }
#dinner-disaster .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#dinner-disaster .stat { background: var(--dd-base-2); border-radius: var(--dd-r); padding: 12px; border-top: 3px solid var(--dd-kente); }
#dinner-disaster .stat b { display: block; font-family: var(--dd-f-ticket); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dd-cream); }
#dinner-disaster .stat span { font-size: .85rem; color: var(--dd-on-base-muted); }
#dinner-disaster .badges { display: flex; flex-wrap: wrap; gap: 8px; }
#dinner-disaster .badge { border: 1px solid rgba(224, 162, 42, .6); color: var(--dd-cream); border-radius: 999px; padding: 6px 12px; font-size: .86rem; }
#dinner-disaster .badge.locked { opacity: .6; border-style: dashed; border-color: rgba(246, 241, 231, .3); color: var(--dd-on-base-muted); }
#dinner-disaster .soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
#dinner-disaster .soon div { border-top: 2px solid var(--dd-base-3); padding-top: 8px; }
#dinner-disaster .soon b { display: block; font-weight: 700; }
#dinner-disaster .soon span { font-size: .88rem; color: var(--dd-on-base-muted); }
#dinner-disaster .footer { margin-top: 28px; font-size: .84rem; color: var(--dd-on-base-muted); display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#dinner-disaster .linkish { padding: 6px 0; color: var(--dd-on-base); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- order ticket (warm cream paper) ---------- */
#dinner-disaster .ticket { position: relative; background: var(--dd-cream); color: var(--dd-ink); border-radius: 3px; padding: 24px clamp(14px, 3.5vw, 22px) 22px; box-shadow: 0 10px 28px rgba(4, 19, 20, .35);
  --tooth: 7px;
  -webkit-mask: radial-gradient(var(--tooth) at 50% 0, transparent 98%, #000) 50% 0 / calc(2 * var(--tooth)) 51% repeat-x, radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) 50% 100% / calc(2 * var(--tooth)) 51% repeat-x;
          mask: radial-gradient(var(--tooth) at 50% 0, transparent 98%, #000) 50% 0 / calc(2 * var(--tooth)) 51% repeat-x, radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000) 50% 100% / calc(2 * var(--tooth)) 51% repeat-x; }
#dinner-disaster .ticket-head { font-family: var(--dd-f-ticket); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dd-ink-muted); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 1px dashed var(--dd-sand); padding-bottom: 8px; margin-bottom: 14px; }
#dinner-disaster .ticket h2 { font-size: clamp(1.35rem, 4.5vw, 1.7rem); line-height: 1.2; margin-bottom: 8px; color: var(--dd-ink); }
#dinner-disaster .ticket .lede { max-width: 62ch; }
#dinner-disaster .ticket p + p { margin-top: 8px; }
#dinner-disaster .stamp { position: absolute; top: 46px; right: 12px; transform: rotate(7deg); border: 3px solid var(--dd-rust); color: var(--dd-rust); font-family: var(--dd-f-ticket); font-weight: 700; padding: 2px 9px; letter-spacing: .08em; font-size: .85rem; border-radius: 4px; text-transform: uppercase; }
#dinner-disaster .ticket.disruption { border-top: 5px solid var(--dd-rust); }
#dinner-disaster .ticket.disruption h2 { padding-right: 96px; }
#dinner-disaster .kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-family: var(--dd-f-ticket); font-size: .95rem; }
#dinner-disaster .kv dt { color: var(--dd-ink-muted); }
#dinner-disaster .kv dd { font-variant-numeric: tabular-nums; }
#dinner-disaster .section-label { font-family: var(--dd-f-ticket); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--dd-ink-muted); margin: 20px 0 8px; font-weight: 700; }
#dinner-disaster .list { display: grid; gap: 8px; }
#dinner-disaster .list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
#dinner-disaster .mark { font-family: var(--dd-f-ticket); font-weight: 700; min-width: 2.6em; text-align: center; border-radius: 3px; padding: 0 4px; font-size: .78rem; line-height: 1.7; }
#dinner-disaster .mark.ok { background: var(--dd-good-bg); color: var(--dd-good); }
#dinner-disaster .mark.no { background: var(--dd-bad-bg); color: var(--dd-bad); }
#dinner-disaster .mark.wait { background: var(--dd-neutral-bg); color: var(--dd-ink-muted); }
#dinner-disaster .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
#dinner-disaster .mate { border: 1px solid var(--dd-sand); border-radius: var(--dd-r); padding: 10px 12px; display: grid; gap: 3px; background: #fffdf8; }
#dinner-disaster .mate b { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 700; }
#dinner-disaster .mate span { font-size: .88rem; color: var(--dd-ink-muted); }
#dinner-disaster .cpu { font-family: var(--dd-f-ticket); font-size: .68rem; letter-spacing: .06em; background: var(--dd-base); color: var(--dd-cream) !important; border-radius: 3px; padding: 1px 6px; font-weight: 700; }
#dinner-disaster .cpu.you { background: var(--dd-marigold); color: var(--dd-ink) !important; }
#dinner-disaster .secret { margin-top: 18px; background: var(--dd-base); color: var(--dd-on-base); border-radius: var(--dd-r); padding: 14px 16px; display: grid; gap: 10px; border-left: 4px solid var(--dd-marigold); }
#dinner-disaster .secret .eyebrow { color: var(--dd-gold); }

/* ---------- play HUD ---------- */
#dinner-disaster .hud { position: sticky; top: var(--dd-sticky-top); z-index: 5; background: var(--dd-base); padding-block: 8px; margin-inline: calc(-1 * clamp(14px, 4vw, 28px)); padding-inline: clamp(14px, 4vw, 28px); border-bottom: 1px solid rgba(246, 241, 231, .1); margin-bottom: 16px; }
#dinner-disaster .meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#dinner-disaster .meter { background: var(--dd-base-2); border-radius: 6px; padding: 6px 8px; min-width: 0; }
#dinner-disaster .meter .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dd-on-base-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dinner-disaster .meter .v { display: block; font-family: var(--dd-f-ticket); font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--dd-cream); }
#dinner-disaster .meter .of { font-weight: 400; opacity: .7; }
#dinner-disaster .meter .s { font-size: .72rem; display: block; }
#dinner-disaster .meter .s.muted { color: var(--dd-on-base-muted); }
#dinner-disaster .meter.short .s { color: #ffb9a3; }
#dinner-disaster .meter.okay .s { color: #a9dbb1; }
#dinner-disaster .bar { display: block; height: 4px; background: rgba(246, 241, 231, .12); border-radius: 2px; margin-top: 4px; overflow: hidden; }
#dinner-disaster .bar i { display: block; height: 100%; background: var(--dd-marigold); }
#dinner-disaster .meter.short .bar i { background: #e8775a; }
#dinner-disaster .progress { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; font-size: .84rem; color: var(--dd-on-base-muted); flex-wrap: wrap; }
#dinner-disaster .pips { display: flex; gap: 4px; }
#dinner-disaster .pip { width: 22px; height: 6px; border-radius: 3px; background: rgba(246, 241, 231, .16); }
#dinner-disaster .pip.done { background: var(--dd-marigold); }
#dinner-disaster .pip.now { background: var(--dd-cream); }
#dinner-disaster .pip.dis { border-radius: 0; }
#dinner-disaster .tokens { display: flex; gap: 12px; flex-wrap: wrap; }
#dinner-disaster .tokens b { color: var(--dd-cream); font-weight: 700; }

/* ---------- option cards ---------- */
#dinner-disaster .options { display: grid; gap: 10px; margin-top: 16px; }
#dinner-disaster .opt { position: relative; text-align: left; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px 14px 14px 12px; background: var(--dd-cream); color: var(--dd-ink); border: 2px solid var(--dd-sand); border-radius: 10px; transition: border-color .12s, box-shadow .12s; }
#dinner-disaster .opt:hover:not(:disabled) { border-color: var(--dd-marigold-deep); }
#dinner-disaster .opt[aria-pressed="true"] { border-color: var(--dd-marigold); box-shadow: 0 0 0 3px rgba(243, 156, 18, .45); background: #fffaf0; }
#dinner-disaster .opt:disabled { background: var(--dd-cream-2); color: var(--dd-ink-muted); }
#dinner-disaster .opt .key { grid-row: span 3; font-family: var(--dd-f-ticket); font-weight: 700; width: 1.9em; height: 1.9em; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: .9rem; }
#dinner-disaster .opt[aria-pressed="true"] .key { background: var(--dd-marigold); color: var(--dd-ink); border-color: var(--dd-marigold); }
#dinner-disaster .opt .lbl { font-family: var(--dd-f-head); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
#dinner-disaster .opt .cost { font-family: var(--dd-f-ticket); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#dinner-disaster .opt .desc { grid-column: 2 / 4; font-size: .93rem; color: var(--dd-ink-muted); }
#dinner-disaster .opt .chips, #dinner-disaster .opt .votes, #dinner-disaster .opt .bold-line, #dinner-disaster .opt .forecast, #dinner-disaster .opt .why { grid-column: 2 / 4; }
#dinner-disaster .chips { display: flex; flex-wrap: wrap; gap: 5px; }
#dinner-disaster .c { font-size: .8rem; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
#dinner-disaster .c.good { background: var(--dd-good-bg); color: var(--dd-good); }
#dinner-disaster .c.bad { background: var(--dd-bad-bg); color: var(--dd-bad); }
#dinner-disaster .c.neutral { background: var(--dd-neutral-bg); color: var(--dd-ink); }
#dinner-disaster .bold-line { font-size: .85rem; display: grid; gap: 6px; border-top: 1px dashed var(--dd-sand); padding-top: 7px; margin-top: 3px; }
#dinner-disaster .bl { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#dinner-disaster .bold-tag { font-family: var(--dd-f-ticket); font-weight: 700; color: var(--dd-rust); letter-spacing: .04em; text-transform: uppercase; }
#dinner-disaster .votes { display: flex; gap: 6px; flex-wrap: wrap; }
#dinner-disaster .vote { font-size: .78rem; background: var(--dd-base); color: var(--dd-cream); border-radius: 999px; padding: 2px 10px; }
#dinner-disaster .why { font-size: .84rem; font-style: italic; }
#dinner-disaster .forecast { font-family: var(--dd-f-ticket); font-size: .85rem; background: #fdecc8; border-radius: 4px; padding: 3px 7px; }

#dinner-disaster .confirm { margin-top: 14px; background: var(--dd-base-2); border: 1px solid rgba(243, 156, 18, .35); border-radius: 10px; padding: 14px 16px; display: grid; gap: 12px; }
#dinner-disaster .sheet .confirm { background: var(--dd-cream-2); border-color: var(--dd-sand); }
#dinner-disaster .team-says ul { display: grid; gap: 6px; font-size: .92rem; }

#dinner-disaster .assists { margin-top: 20px; border-top: 1px dashed rgba(246, 241, 231, .2); padding-top: 14px; display: grid; gap: 10px; }
#dinner-disaster .assists .head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .86rem; color: var(--dd-on-base-muted); }
#dinner-disaster .hintbox { background: #fdecc8; color: var(--dd-ink); border-radius: var(--dd-r); padding: 10px 12px; font-size: .95rem; border-left: 4px solid var(--dd-marigold); }

/* ---------- outcome ---------- */
#dinner-disaster .outcome { margin-top: 14px; display: grid; gap: 12px; }
#dinner-disaster .outcome .result-text { font-size: 1.08rem; }
#dinner-disaster .roll { font-family: var(--dd-f-ticket); font-weight: 700; display: inline-block; padding: 2px 9px; border: 2px solid currentColor; border-radius: 3px; text-transform: uppercase; }
#dinner-disaster .roll.win { color: var(--dd-good); }
#dinner-disaster .roll.lose { color: var(--dd-bad); }
#dinner-disaster .overrule { font-size: .92rem; color: var(--dd-ink-muted); }

/* ---------- needs panel ---------- */
#dinner-disaster .needs { margin-top: 18px; background: var(--dd-base-2); border-radius: 10px; padding: 12px 14px; }
#dinner-disaster .needs h3 { font-family: var(--dd-f-body); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--dd-on-base-muted); margin-bottom: 8px; font-weight: 700; }
#dinner-disaster .needs .list li { font-size: .93rem; }
#dinner-disaster .needs .mark.ok { background: rgba(169, 219, 177, .16); color: #a9dbb1; }
#dinner-disaster .needs .mark.no { background: rgba(255, 185, 163, .16); color: #ffb9a3; }
#dinner-disaster .needs .mark.wait { background: rgba(246, 241, 231, .08); color: var(--dd-on-base-muted); }

/* ---------- results ---------- */
#dinner-disaster .verdict { text-align: center; display: grid; gap: 8px; padding-block: 8px 18px; justify-items: center; }
#dinner-disaster .verdict .tier { font-family: var(--dd-f-logo); font-weight: 400; font-size: clamp(2.1rem, 9vw, 3.4rem); line-height: 1.05; color: var(--dd-cream); }
#dinner-disaster .verdict .tier.win { color: var(--dd-marigold); }
#dinner-disaster .verdict .total { font-family: var(--dd-f-ticket); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
#dinner-disaster .verdict .ending { max-width: 52ch; color: var(--dd-on-base-muted); font-size: 1.05rem; font-family: var(--dd-f-head); font-style: italic; }
#dinner-disaster .flag { display: inline-block; font-family: var(--dd-f-ticket); font-size: .78rem; letter-spacing: .06em; border: 1px solid currentColor; border-radius: 3px; padding: 1px 8px; text-transform: uppercase; color: var(--dd-gold); }
#dinner-disaster .table-wrap { overflow-x: auto; }
#dinner-disaster .breakdown { width: 100%; border-collapse: collapse; font-size: .95rem; }
#dinner-disaster .breakdown td { padding: 8px 0; border-bottom: 1px dashed var(--dd-sand); vertical-align: top; }
#dinner-disaster .breakdown td:last-child { text-align: right; font-family: var(--dd-f-ticket); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
#dinner-disaster .breakdown small { display: block; color: var(--dd-ink-muted); font-size: .82rem; }
#dinner-disaster .breakdown tr.total td { border-bottom: 0; font-weight: 700; font-size: 1.05rem; padding-top: 12px; }
#dinner-disaster .moments { display: grid; gap: 10px; font-size: .93rem; }
#dinner-disaster .moments b { display: block; font-weight: 700; }
#dinner-disaster .share-card { background: linear-gradient(160deg, var(--dd-base-3), var(--dd-base-2)); border: 1px solid rgba(243, 156, 18, .55); border-radius: 12px; padding: 0 18px 18px; display: grid; gap: 8px; overflow: hidden; }
#dinner-disaster .share-card::before { content: ""; height: 6px; margin-inline: -18px; margin-bottom: 10px; background: var(--dd-kente-stripe); }
#dinner-disaster .sc-logo { font-family: var(--dd-f-logo); color: var(--dd-marigold); font-size: 1.3rem; }
#dinner-disaster .sc-line { font-family: var(--dd-f-head); font-size: 1.2rem; font-weight: 700; }
#dinner-disaster .sc-code { font-family: var(--dd-f-ticket); letter-spacing: .1em; color: var(--dd-on-base-muted); text-transform: uppercase; }
#dinner-disaster .stack { display: grid; gap: 16px; }

/* ---------- sheets, toasts, states ---------- */
#dinner-disaster .sheet-back { position: fixed; inset: 0; background: rgba(4, 19, 20, .72); z-index: 100000; display: grid; align-items: end; justify-items: center; padding-bottom: env(safe-area-inset-bottom, 0px); }
#dinner-disaster .sheet { width: min(640px, 100%); max-height: 88vh; overflow: auto; background: var(--dd-cream); color: var(--dd-ink); border-radius: 14px 14px 0 0; padding: 20px max(18px, env(safe-area-inset-right, 0px)) 24px max(18px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; border-top: 6px solid transparent; border-image: var(--dd-kente-stripe) 6 0 0 0 / 6px 0 0 0; }
@media (min-width: 700px) { #dinner-disaster .sheet-back { align-items: center; } #dinner-disaster .sheet { border-radius: 14px; } }
#dinner-disaster .sheet h2 { font-size: 1.4rem; color: var(--dd-ink); }
#dinner-disaster .sheet .close { justify-self: end; }
#dinner-disaster .sheet .section-label { margin-bottom: 0; }
#dinner-disaster .steps { list-style: decimal; padding-left: 1.4em; display: grid; gap: 6px; }
#dinner-disaster .steps li { list-style: decimal; }
#dinner-disaster .bullets { list-style: disc; padding-left: 1.3em; display: grid; gap: 4px; }
#dinner-disaster .bullets li { list-style: disc; }
#dinner-disaster .sheet a { color: var(--dd-rust); font-weight: 700; }
#dinner-disaster .demo-banner { background: #fdecc8; border: 1px solid var(--dd-gold); border-radius: var(--dd-r); padding: 9px 12px; font-size: .9rem; }
#dinner-disaster .packs { display: grid; gap: 8px; }
#dinner-disaster .pack { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--dd-sand); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; background: #fffdf8; }
#dinner-disaster .pack > * { min-width: 0; }
#dinner-disaster .pack .btn { white-space: normal; }
#dinner-disaster .pack .price { font-family: var(--dd-f-ticket); font-weight: 700; }
#dinner-disaster .pack .status { font-size: .84rem; color: var(--dd-ink-muted); }
#dinner-disaster .ledger { font-family: var(--dd-f-ticket); font-size: .85rem; width: 100%; border-collapse: collapse; }
#dinner-disaster .ledger td { padding: 4px 0; border-bottom: 1px dotted var(--dd-sand); }
#dinner-disaster .ledger td:not(:first-child) { text-align: right; padding-left: 8px; white-space: nowrap; }
#dinner-disaster .toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--dd-ink); color: var(--dd-cream); border: 1px solid var(--dd-marigold); padding: 10px 18px; border-radius: 999px; z-index: 100001; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
#dinner-disaster .state-msg { text-align: center; padding: 60px 0; display: grid; gap: 14px; justify-items: center; }
#dinner-disaster .loading { min-height: 600px; display: grid; place-items: center; text-align: center; padding: 40px 20px; color: var(--dd-on-base-muted); }

/* ---------- motion ---------- */
@keyframes dd-slide { from { transform: translateY(14px) rotate(-.6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dd-stamp { 0% { transform: scale(1.8) rotate(7deg); opacity: 0; } 70% { transform: scale(.95) rotate(7deg); opacity: 1; } 100% { transform: scale(1) rotate(7deg); } }
#dinner-disaster .ticket.enter { animation: dd-slide .35s ease-out both; }
#dinner-disaster .ticket.enter .stamp { animation: dd-stamp .45s .2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  #dinner-disaster *, #dinner-disaster *::before, #dinner-disaster *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 480px) {
  #dinner-disaster .meters { gap: 4px; }
  #dinner-disaster .meter { padding: 5px 6px; }
  #dinner-disaster .meter .v { font-size: .9rem; }
  #dinner-disaster .stat b { font-size: 1.15rem; }
  #dinner-disaster .cta .btn { flex: 1 1 100%; }
  #dinner-disaster .tokens { gap: 8px; }
}
@media (forced-colors: active) {
  #dinner-disaster .btn, #dinner-disaster .opt, #dinner-disaster .chip-btn { border: 2px solid ButtonText; }
}

/* ---------- Illustrated party scene (version 1.2). Scoped to #dinner-disaster. ---------- */
#dinner-disaster .ddv { container-type: inline-size; --sc-paper: #fffdf7; --sc-line: #d8ccb0; --sc-ink: #1f3236; --sc-ink-2: #4b5d61; --sc-amber-soft: #fff1d6; margin-top: 4px; }
#dinner-disaster .ddv-main { display: grid; gap: 12px; }
@container (min-width: 980px) { #dinner-disaster .ddv-main { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; gap: 18px; } #dinner-disaster .sc-panel { position: sticky; top: calc(var(--dd-sticky-top) + 10px); } }
#dinner-disaster .ddv-left { display: grid; gap: 8px; min-width: 0; }

/* stage */
#dinner-disaster .sc-stage { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 14px; overflow: hidden; border: 2px solid rgba(246, 241, 231, .25); background: #cdeefd; }
#dinner-disaster .dd-scene { display: block; width: 100%; height: 100%; }
#dinner-disaster .sc-hots, #dinner-disaster .sc-bubbles { position: absolute; inset: 0; }
#dinner-disaster .sc-bubbles { pointer-events: none; }
#dinner-disaster .sc-hot { position: absolute; background: transparent; border: 0; padding: 0; margin: 0; min-height: 0; cursor: pointer; border-radius: 14px; color: var(--sc-ink); }
#dinner-disaster .sc-hot:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 2px; background: rgba(243, 156, 18, .14); }
#dinner-disaster .sc-hot.coach::after { content: ""; position: absolute; inset: -6px; border: 3px solid var(--dd-marigold); border-radius: 50%; animation: dd-ring 1.4s ease-out infinite; }
#dinner-disaster .sc-hot:disabled { cursor: not-allowed; }
#dinner-disaster .sc-tag { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); background: var(--sc-paper); color: var(--sc-ink); border: 2px solid var(--sc-ink); border-radius: 999px; padding: 1px 9px; font-size: clamp(.6rem, 1.6vw, .8rem); font-weight: 700; white-space: nowrap; box-shadow: 0 2px 0 rgba(31, 50, 54, .25); }
#dinner-disaster .sc-tag.low { top: auto; bottom: -4px; left: 2px; transform: none; }
#dinner-disaster .sc-spot.on .sc-tag, #dinner-disaster .sc-spot:hover .sc-tag { background: var(--dd-marigold); }
#dinner-disaster .sc-banner { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: var(--dd-base); color: var(--dd-cream); border: 2px solid var(--dd-marigold); border-radius: 12px; padding: 5px 14px 7px; font-family: var(--dd-f-logo); font-size: clamp(.78rem, 2.4vw, 1.35rem); line-height: 1.15; text-align: center; max-width: 70%; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
@container (max-width: 520px) { #dinner-disaster .sc-banner { top: 6px; padding: 3px 10px 4px; border-width: 1.5px; } }
#dinner-disaster .sc-banner-k { display: block; font-family: var(--dd-f-body); font-weight: 700; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dd-marigold); }
#dinner-disaster .sc-banner.drop { animation: dd-banner .6s cubic-bezier(.2, 1.3, .4, 1) both; }

/* speech bubbles */
#dinner-disaster .sc-bubble { position: absolute; transform: translate(-50%, calc(-100% - 10px)); max-width: min(46%, 260px); width: max-content; background: var(--sc-paper); color: var(--sc-ink); border: 2px solid var(--sc-ink); border-radius: 14px; padding: 5px 10px; font-size: clamp(.66rem, 1.8vw, .88rem); line-height: 1.3; box-shadow: 0 3px 0 rgba(31, 50, 54, .22); animation: dd-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * .45s); }
#dinner-disaster .sc-bubble b { display: block; font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--dd-marigold-deep); }
#dinner-disaster .sc-bubble .cpu-tag { font-size: .85em; color: var(--sc-ink-2); letter-spacing: .04em; }
#dinner-disaster .sc-bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 12px; height: 12px; background: var(--sc-paper); border-right: 2px solid var(--sc-ink); border-bottom: 2px solid var(--sc-ink); transform: translateX(-50%) rotate(45deg); }
#dinner-disaster .sc-bubble.right { transform: translate(-86%, calc(-100% - 10px)); } #dinner-disaster .sc-bubble.right::after { left: 86%; }
#dinner-disaster .sc-bubble.left { transform: translate(-14%, calc(-100% - 10px)); } #dinner-disaster .sc-bubble.left::after { left: 14%; }
#dinner-disaster .sc-bubble.lifted::after { display: none; }
#dinner-disaster.dd-measuring .sc-bubble { animation: none !important; }

/* progress + resources */
#dinner-disaster .sc-progress { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--dd-on-base-muted); }
#dinner-disaster .res { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@container (min-width: 620px) { #dinner-disaster .res { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@container (min-width: 980px) and (max-width: 1240px) { #dinner-disaster .res { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#dinner-disaster .res-i { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "l l" "i v"; column-gap: 5px; align-items: center; background: var(--dd-base-2); border: 1.5px solid rgba(246, 241, 231, .12); border-radius: 10px; padding: 5px 7px 6px; min-width: 0; }
#dinner-disaster .res-ic { grid-area: i; display: grid; }
#dinner-disaster .res-l { grid-area: l; font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; color: var(--dd-on-base-muted); overflow-wrap: anywhere; }
#dinner-disaster .res-v { grid-area: v; font-size: .98rem; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--dd-cream); }
#dinner-disaster .res-s, #dinner-disaster .res-m { grid-column: 1 / -1; }
#dinner-disaster .res-s { font-size: .66rem; color: var(--dd-on-base-muted); }
#dinner-disaster .res-i.t-good { border-color: rgba(169, 219, 177, .55); } #dinner-disaster .res-i.t-good .res-v { color: #a9dbb1; }
#dinner-disaster .res-i.t-warn { border-color: rgba(243, 181, 42, .6); } #dinner-disaster .res-i.t-warn .res-v { color: #f3c96a; }
#dinner-disaster .res-i.t-bad { border-color: rgba(255, 185, 163, .7); background: #3a2f2c; } #dinner-disaster .res-i.t-bad .res-v { color: #ffb9a3; }
#dinner-disaster .res-m { display: block; height: 4px; border-radius: 3px; background: rgba(246, 241, 231, .14); margin-top: 2px; overflow: hidden; } #dinner-disaster .res-m span { display: block; height: 100%; background: var(--dd-marigold); }
#dinner-disaster .res-d { position: absolute; right: 4px; top: -9px; font-size: .7rem; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1.5px solid currentColor; background: var(--dd-base); animation: dd-float .7s ease-out both; }
#dinner-disaster .res-d.good { color: #a9dbb1; } #dinner-disaster .res-d.bad { color: #ffb9a3; }
#dinner-disaster .res-i.changed { animation: dd-flash 1s ease-out; }

/* panel: a cream order ticket */
#dinner-disaster .sc-panel { background: var(--dd-cream); color: var(--sc-ink); border-radius: 14px; padding: 16px; display: grid; gap: 10px; min-width: 0; }
#dinner-disaster .sc-panel h2 { margin: 0; font-family: var(--dd-f-head); font-size: clamp(1.25rem, 3.6vw, 1.6rem); line-height: 1.2; text-wrap: balance; color: var(--dd-base); }
#dinner-disaster .sc-kicker { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dd-marigold-deep); }
#dinner-disaster .sc-lead { margin: 0; font-size: 1rem; line-height: 1.45; }
#dinner-disaster .sc-note, #dinner-disaster .sc-panel .note { margin: 0; font-size: .86rem; color: var(--dd-ink-muted); }
#dinner-disaster .sc-coach { margin: 0; font-size: .9rem; background: var(--sc-amber-soft); border-left: 4px solid var(--dd-marigold); padding: 6px 10px; border-radius: 6px; }
#dinner-disaster .sc-desc { margin: 0; font-size: .92rem; }
#dinner-disaster .sc-panel .form-error { color: var(--dd-bad); }
#dinner-disaster .sc-panel .secret { margin-top: 0; }
#dinner-disaster .sc-more { font-size: .9rem; }
#dinner-disaster .sc-more summary { cursor: pointer; font-weight: 700; color: var(--dd-base); }
#dinner-disaster .sc-more > * + * { margin-top: 8px; }
#dinner-disaster .sc-more .team { display: grid; gap: 6px; }
#dinner-disaster .sc-more .mate { display: grid; }
#dinner-disaster .sc-more .mate span:not(.cpu) { color: var(--dd-ink-muted); font-size: .86rem; }
#dinner-disaster .sc-panel .list li { font-size: .9rem; }

/* choice cards */
#dinner-disaster .sc-cards { display: grid; gap: 8px; margin: 0; }
#dinner-disaster .opt.sc-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; background: #fff; color: var(--sc-ink); border: 2px solid var(--sc-line); border-radius: 14px; padding: 7px; cursor: pointer; }
#dinner-disaster .opt.sc-card:hover:not(:disabled) { border-color: var(--dd-marigold); }
#dinner-disaster .opt.sc-card[aria-pressed="true"] { border-color: var(--dd-marigold); background: var(--sc-amber-soft); box-shadow: 0 0 0 2px var(--dd-marigold) inset; }
#dinner-disaster .opt.sc-card:disabled { opacity: .6; cursor: not-allowed; }
#dinner-disaster .sc-card .thumb { position: relative; display: block; width: 84px; height: 70px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--sc-line); background: #cdeefd; }
#dinner-disaster .thumb-svg { display: block; width: 100%; height: 100%; }
#dinner-disaster .sc-key { position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--dd-base); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
#dinner-disaster .sc-card-b { display: grid; gap: 4px; min-width: 0; }
#dinner-disaster .sc-card-t { font-family: var(--dd-f-head); font-weight: 700; font-size: 1rem; line-height: 1.2; }
#dinner-disaster .sc-card-m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#dinner-disaster .sc-cost { font-family: var(--dd-f-ticket); font-weight: 700; font-variant-numeric: tabular-nums; }
#dinner-disaster .sc-why { font-size: .8rem; color: var(--dd-bad); }
#dinner-disaster .sc-forecast { font-size: .8rem; font-weight: 700; color: var(--dd-base); }
#dinner-disaster .sc-chips { display: flex; gap: 4px; flex-wrap: wrap; }
#dinner-disaster .sc-chip { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--dd-neutral-bg); color: var(--sc-ink); }
#dinner-disaster .sc-chip.good { background: var(--dd-good-bg); color: var(--dd-good); }
#dinner-disaster .sc-chip.bad { background: var(--dd-bad-bg); color: var(--dd-bad); }
#dinner-disaster .sc-chip.risky { background: var(--dd-marigold); color: var(--dd-ink); }
#dinner-disaster .sc-chips-line { margin: 0; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; font-size: .85rem; }
#dinner-disaster .sc-chips-line .lbl { font-weight: 700; }
#dinner-disaster .sc-votes { display: inline-flex; gap: 2px; margin-left: auto; }
#dinner-disaster .sc-vote { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 700; border: 1.5px solid var(--sc-ink); color: var(--sc-ink); }
#dinner-disaster .v-basil { background: #fff; } #dinner-disaster .v-penny { background: #c9bfe8; } #dinner-disaster .v-juno { background: #6fd1c4; }
#dinner-disaster .sc-panel .confirm { margin-top: 0; background: #fff; color: var(--sc-ink); border: 2px solid var(--dd-marigold); }
#dinner-disaster .sc-says { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
#dinner-disaster .sc-panel .assists { color: var(--sc-ink); background: transparent; border-top: 1.5px dashed var(--sc-line); padding-top: 10px; margin: 0; }
#dinner-disaster .sc-panel .assists .head { color: var(--dd-ink-muted); }
#dinner-disaster .sc-panel .outcome { margin-top: 0; }
#dinner-disaster .ddv-finale { margin-bottom: 14px; }

/* scene motion */
#dinner-disaster .enter-drop { animation: dd-drop .7s cubic-bezier(.2, 1.25, .4, 1) both; transform-box: fill-box; }
#dinner-disaster .enter-pop { animation: dd-pop-svg .5s cubic-bezier(.2, 1.4, .4, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .enter-fade, #dinner-disaster .fade-in { animation: dd-fade 1.2s ease-out both; }
#dinner-disaster .roll-in { animation: dd-roll 1.4s ease-out both; }
#dinner-disaster .walk-in { animation: dd-walk 1.6s ease-out both; }
#dinner-disaster .walk-out { animation: dd-walk-out 1.8s ease-in both; }
#dinner-disaster .storm-sky { transition: opacity 1.2s; }
#dinner-disaster .rain-sheet { animation: dd-rain .75s linear infinite; }
#dinner-disaster .bolt { opacity: 0; animation: dd-bolt 6s linear infinite; }
#dinner-disaster .flame { animation: dd-flicker .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .glow { animation: dd-glow 2.6s ease-in-out infinite alternate; }
#dinner-disaster .twinkle { animation: dd-glow 2.2s ease-in-out infinite alternate; }
#dinner-disaster .steam, #dinner-disaster .notes, #dinner-disaster .spark { animation: dd-rise 1.6s ease-in-out infinite alternate; }
#dinner-disaster .smoke { animation: dd-fade 2s ease-in-out infinite alternate; }
#dinner-disaster .idle { animation: dd-idle 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .react { animation: dd-hop .42s ease-out 2; transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .bounce { animation: dd-hop .55s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .spot { animation: dd-dash 1.4s linear infinite; }
#dinner-disaster .ghost { opacity: .5; }
#dinner-disaster .drip { animation: dd-fade 1s ease-in-out infinite alternate; }
@keyframes dd-drop { from { transform: translateY(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dd-pop-svg { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dd-pop { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes dd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dd-roll { from { transform: translateX(-160px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dd-walk { from { transform: translateX(-120px); } to { transform: none; } }
@keyframes dd-walk-out { from { transform: none; opacity: 1; } to { transform: translateX(-60px); opacity: .25; } }
@keyframes dd-rain { from { transform: translateY(0); } to { transform: translateY(600px); } }
@keyframes dd-bolt { 0%, 86% { opacity: 0; } 87% { opacity: 1; } 88% { opacity: .2; } 89.5% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes dd-flicker { from { transform: scaleY(.85); } to { transform: scaleY(1.12); } }
@keyframes dd-glow { from { opacity: .12; } to { opacity: .35; } }
@keyframes dd-rise { from { transform: translateY(2px); } to { transform: translateY(-4px); } }
@keyframes dd-idle { 0%, 100% { transform: none; } 50% { transform: translateY(-1.6px); } }
@keyframes dd-hop { 0%, 100% { transform: none; } 45% { transform: translateY(-10px); } }
@keyframes dd-dash { to { stroke-dashoffset: -36; } }
@keyframes dd-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
@keyframes dd-banner { from { transform: translate(-50%, -40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes dd-float { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dd-flash { 0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, .7); } 100% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); } }
/* Motion off (the player's setting, or the device's reduced-motion setting): everything shows its final state. */
#dinner-disaster .ddv.reduce *, #dinner-disaster .ddv.reduce *::before, #dinner-disaster .ddv.reduce *::after { animation: none !important; transition: none !important; }
#dinner-disaster .ddv.reduce .bolt { opacity: 0; }
@media (forced-colors: active) { #dinner-disaster .sc-hot:focus-visible { outline: 3px solid Highlight; } #dinner-disaster .sc-bubble { border-color: CanvasText; } }

/* Small screens: crowded spots show the card number instead of a label (the button keeps its full name). */
@media (max-width: 560px) {
  #dinner-disaster .sc-tag.num { font-size: 0; padding: 0; width: 24px; height: 24px; display: grid; place-items: center; }
  #dinner-disaster .sc-tag.num::before { content: attr(data-n); font-size: .78rem; }
}

/* Team Morale segments and Risk Point tokens */
#dinner-disaster .res-segs { grid-column: 1 / -1; display: flex; gap: 3px; margin-top: 3px; }
#dinner-disaster .res-segs i { flex: 1; height: 7px; border-radius: 3px; border: 1.5px solid rgba(246, 241, 231, .5); background: transparent; }
#dinner-disaster .res-segs i.on { background: #ff8f80; border-color: #ff8f80; }
#dinner-disaster .res-segs.tok i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
#dinner-disaster .res-segs.tok i.on { background: var(--dd-marigold); border-color: var(--dd-marigold); }
#dinner-disaster .morale-out { background: #fbe4e0; color: #5b1d14; border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
#dinner-disaster .morale-out p { margin: 0 0 6px; }
/* party length choice */
#dinner-disaster .len-pick { border: 0; padding: 0; margin: 4px 0 12px; min-width: 0; }
#dinner-disaster .len-pick legend { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
#dinner-disaster .len-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#dinner-disaster .len-opt { text-align: left; background: rgba(246, 241, 231, .06); color: inherit; border: 2px solid rgba(246, 241, 231, .25); border-radius: 12px; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; min-width: 0; }
#dinner-disaster .len-opt span { font-size: .78rem; opacity: .85; }
#dinner-disaster .len-opt.on { border-color: var(--dd-marigold); background: rgba(243, 156, 18, .14); }
#dinner-disaster .len-opt:focus-visible { outline: 3px solid var(--dd-marigold); outline-offset: 2px; }
@media (max-width: 420px) { #dinner-disaster .len-opts { grid-template-columns: 1fr; } }
/* data deletion sheet */
#dinner-disaster .del-scope { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
#dinner-disaster .del-scope legend { font-weight: 700; margin-bottom: 6px; }
#dinner-disaster .del-scope label { display: block; border: 1.5px solid rgba(31, 50, 54, .25); border-radius: 10px; padding: 8px 10px; }
#dinner-disaster .del-scope span { font-size: .88rem; }
#dinner-disaster #dd-del-confirm { font: inherit; padding: 6px 8px; border: 1.5px solid #1f3236; border-radius: 8px; }
/* profile: nickname and table colours */
#dinner-disaster .nick-form input { font: inherit; padding: 6px 8px; border: 1.5px solid #1f3236; border-radius: 8px; min-width: 0; flex: 1; }
#dinner-disaster .cos-row { display: flex; flex-wrap: wrap; gap: 6px; }
#dinner-disaster .cos { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid rgba(31, 50, 54, .3); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: .82rem; cursor: pointer; color: #1f3236; }
#dinner-disaster .cos small { display: block; font-size: .7rem; opacity: .75; }
#dinner-disaster .cos[disabled] { opacity: .55; cursor: not-allowed; }
#dinner-disaster .cos.on { border-color: #ce8510; box-shadow: 0 0 0 2px #f39c12 inset; }
#dinner-disaster .cos-sw { width: 18px; height: 12px; border-radius: 3px; border: 1px solid #1f3236; background: linear-gradient(#f3b52a 0 60%, #2f8a4c 60%); }
#dinner-disaster .cos-rose { background: linear-gradient(#e8a0bf 0 60%, #b8326b 60%); }
#dinner-disaster .cos-ocean { background: linear-gradient(#7ec3e8 0 60%, #1f5f8b 60%); }
#dinner-disaster .cos-festive { background: linear-gradient(#f3b52a 0 60%, #c8402f 60%); }
#dinner-disaster .cos-emerald { background: linear-gradient(#2f8a4c 0 60%, #f3b52a 60%); }
#dinner-disaster .cos-midnight { background: linear-gradient(#2c3e70 0 60%, #c9a227 60%); }

/* ---------- live play (rooms, public tables, events, projector) ---------- */
#dinner-disaster .lv-title { display: grid; gap: 10px; }
#dinner-disaster .lv { display: grid; gap: 16px; }
@container (min-width: 900px) { #dinner-disaster .lv-split { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; } }
#dinner-disaster .lv-main, #dinner-disaster .lv-side, #dinner-disaster .lv-under { background: var(--dd-cream); color: var(--dd-ink); border-radius: 14px; padding: 18px; display: grid; gap: 12px; min-width: 0; }
#dinner-disaster .lv-under { margin-top: 12px; }
@container (min-width: 900px) { #dinner-disaster .lv-under { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } #dinner-disaster .lv-under .lv-leave { grid-column: 1 / -1; } }
#dinner-disaster .lv-h { font-family: var(--dd-f-head); font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; }
#dinner-disaster :is(.lv-main, .lv-side, .lv-under, .sc-panel) .note { color: var(--dd-ink-muted); }
#dinner-disaster :is(.lv-main, .lv-side, .lv-under, .sc-panel) .chip-btn { color: var(--dd-ink); border-color: rgba(4, 19, 20, .25); background: #fff; }
#dinner-disaster :is(.lv-main, .lv-side, .lv-under, .sc-panel) .chip-btn:hover, #dinner-disaster :is(.lv-main, .lv-side, .lv-under) .chip-btn.on { border-color: var(--dd-ink); background: var(--dd-neutral-bg); }
#dinner-disaster :is(.lv-main, .lv-side, .lv-under, .sc-panel) .linkish { color: var(--dd-ink); }
#dinner-disaster :is(.lv-main, .lv-side, .lv-under, .sc-panel) .form-error { color: var(--dd-bad); font-weight: 500; }
#dinner-disaster :is(.lv-main, .lv-side, .lv-under) h2 { font-size: 1.15rem; }
#dinner-disaster .lv-status { padding: 8px 12px; border-radius: var(--dd-r); background: var(--dd-neutral-bg); color: var(--dd-ink); font-size: .9rem; }
#dinner-disaster .lv-status.warn { background: var(--dd-bad-bg); color: var(--dd-bad); margin-bottom: 10px; }
#dinner-disaster .lv-form { display: grid; gap: 14px; }
#dinner-disaster .lv-f { display: grid; gap: 4px; }
#dinner-disaster .lv-f > span, #dinner-disaster .lv-fs legend { font-weight: 700; font-size: .92rem; }
#dinner-disaster .lv-f small { color: var(--dd-ink-muted); font-size: .82rem; }
#dinner-disaster .lv-f input:not([type=checkbox]):not([type=radio]) { min-height: 46px; padding: 8px 12px; border-radius: var(--dd-r); border: 2px solid rgba(4, 19, 20, .3); background: #fff; color: var(--dd-ink); font-size: 1rem; max-width: 360px; width: 100%; }
#dinner-disaster .lv-inline { display: flex; gap: 8px; align-items: flex-start; }
#dinner-disaster .lv-fs { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; min-width: 0; }
#dinner-disaster .lv-radios, #dinner-disaster .lv-checks { display: flex; flex-wrap: wrap; gap: 6px 8px; }
#dinner-disaster .lv-checks { flex-direction: column; }
#dinner-disaster .lv-radios label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid rgba(4, 19, 20, .25); border-radius: 999px; background: #fff; cursor: pointer; }
#dinner-disaster .lv-radios label:has(input:checked) { border-color: var(--dd-ink); background: var(--dd-neutral-bg); font-weight: 700; }
#dinner-disaster .lv-checks label { display: flex; gap: 8px; align-items: flex-start; min-height: 32px; }
#dinner-disaster .lv-big { font-family: var(--dd-f-head); font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; }
#dinner-disaster .lv-wait, #dinner-disaster .lv-offer, #dinner-disaster .lv-result, #dinner-disaster .lv-info, #dinner-disaster .lv-activity, #dinner-disaster .lv-pitch { border: 1px solid rgba(4, 19, 20, .15); border-radius: var(--dd-r); padding: 12px 14px; display: grid; gap: 8px; background: #fff; }
#dinner-disaster .lv-info { background: var(--dd-good-bg); }
#dinner-disaster .lv-info ul { display: grid; gap: 2px; }
#dinner-disaster .lv-over { color: var(--dd-bad); font-weight: 700; }
#dinner-disaster .lv-share { display: grid; gap: 10px; justify-items: start; }
#dinner-disaster .lv-code { font-family: var(--dd-f-ticket); font-size: clamp(2rem, 7vw, 3rem); font-weight: 700; letter-spacing: .18em; line-height: 1; }
#dinner-disaster .lv-code-s { font-family: var(--dd-f-ticket); letter-spacing: .14em; }
#dinner-disaster .lv-qr { display: flex; gap: 12px; align-items: center; }
#dinner-disaster .lv-qr .lv-code-l { display: none; }
#dinner-disaster .dd-qr { width: 168px; height: 168px; display: block; border-radius: 6px; }
#dinner-disaster .lv-seats { display: grid; gap: 6px; }
#dinner-disaster .lv-seats li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: var(--dd-r); background: #fff; border: 1px solid rgba(4, 19, 20, .12); }
#dinner-disaster .lv-seats li.me { border-color: var(--dd-marigold-deep); }
#dinner-disaster .lv-seats li.bot { background: var(--dd-neutral-bg); }
#dinner-disaster .lv-mark { color: var(--dd-good); font-weight: 700; grid-row: span 2; }
#dinner-disaster .lv-nick { font-weight: 700; overflow-wrap: anywhere; }
#dinner-disaster .lv-roles, #dinner-disaster .lv-tags { grid-column: 2; font-size: .82rem; color: var(--dd-ink-muted); }
#dinner-disaster .lv-menu { grid-column: 3; grid-row: 1 / span 3; position: relative; }
#dinner-disaster .lv-menu summary { list-style: none; cursor: pointer; min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: 999px; font-weight: 700; }
#dinner-disaster .lv-menu summary::-webkit-details-marker { display: none; }
#dinner-disaster .lv-menu[open] > div { position: absolute; right: 0; top: 42px; z-index: 5; width: min(280px, 80vw); background: #fff; border: 1px solid rgba(4, 19, 20, .2); border-radius: var(--dd-r); padding: 8px 12px; display: grid; gap: 2px; box-shadow: 0 10px 24px rgba(4, 19, 20, .2); }
#dinner-disaster .lv-report { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(4, 19, 20, .12); }
#dinner-disaster .lv-chat ul { display: grid; gap: 4px; min-height: 2em; margin-bottom: 8px; font-size: .92rem; }
#dinner-disaster .lv-chat li.sys { color: var(--dd-ink-muted); font-style: italic; }
#dinner-disaster .lv-presets, #dinner-disaster .lv-reacts, #dinner-disaster .lv-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#dinner-disaster .lv-phase { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#dinner-disaster .lv-ph { font-family: var(--dd-f-ticket); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 700; }
#dinner-disaster .lv-timer { font-family: var(--dd-f-ticket); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
#dinner-disaster .lv-paused { font-weight: 700; color: var(--dd-bad); }
#dinner-disaster .lv-instr { font-weight: 500; }
#dinner-disaster .lv-opts { display: grid; gap: 8px; }
#dinner-disaster .lv-opt { text-align: left; }
#dinner-disaster .lv-opt.on { outline: 3px solid var(--dd-marigold); }
#dinner-disaster .lv-otags { display: flex; flex-wrap: wrap; gap: 4px; }
#dinner-disaster .lv-otags i { font-style: normal; font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--dd-neutral-bg); }
#dinner-disaster .lv-amb { border: 1px dashed var(--dd-marigold-deep); border-radius: var(--dd-r); padding: 8px 12px; }
#dinner-disaster .lv-amb summary { cursor: pointer; font-weight: 700; }
#dinner-disaster .lv-eventbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: .9rem; padding-bottom: 6px; border-bottom: 1px solid rgba(4, 19, 20, .12); }
#dinner-disaster .lv-stand { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#dinner-disaster .lv-stand th, #dinner-disaster .lv-stand td { padding: 6px 8px; border-bottom: 1px solid rgba(4, 19, 20, .12); text-align: left; }
#dinner-disaster .lv-stand th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dd-ink-muted); }
#dinner-disaster .lv-teams, #dinner-disaster .lv-people, #dinner-disaster .lv-awards { display: grid; gap: 4px; }
#dinner-disaster .lv-pitch { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
#dinner-disaster .lv-pitch span { grid-column: 1; font-size: .9rem; }
#dinner-disaster .lv-pitch .btn, #dinner-disaster .lv-pitch .note { grid-column: 2; grid-row: 1 / span 2; }
#dinner-disaster .lv-final { display: grid; gap: 10px; }
/* Projector screen: big type for the back of the room. */
#dinner-disaster[data-screen="live-screen"] .topbar { display: none; }
#dinner-disaster .lv-screen { display: grid; gap: 24px; padding: 2vw; color: var(--dd-on-base); font-size: clamp(1rem, 1.6vw, 1.6rem); }
#dinner-disaster .lv-screen header { display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; }
#dinner-disaster .lv-screen h1 { font-family: var(--dd-f-head); font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 700; }
#dinner-disaster .lv-screen .logo { font-size: clamp(1.4rem, 2.4vw, 2.4rem); }
#dinner-disaster .lv-screen-join { display: flex; gap: 4vw; align-items: center; flex-wrap: wrap; }
#dinner-disaster .lv-screen .dd-qr { width: min(36vh, 380px); height: min(36vh, 380px); }
#dinner-disaster .lv-screen .lv-code { font-size: clamp(3rem, 8vw, 7rem); color: var(--dd-marigold); }
#dinner-disaster .lv-screen .lv-url { font-family: var(--dd-f-ticket); opacity: .85; overflow-wrap: anywhere; }
#dinner-disaster .lv-screen .lv-stand { font-size: 1.2em; }
#dinner-disaster .lv-screen .lv-stand th, #dinner-disaster .lv-screen .lv-stand td { border-color: rgba(246, 241, 231, .2); }
#dinner-disaster .lv-screen .lv-stand th, #dinner-disaster .lv-screen .note { color: var(--dd-on-base-muted); }
#dinner-disaster .lv-screen .lv-pitch { background: rgba(246, 241, 231, .08); border-color: rgba(246, 241, 231, .2); }
#dinner-disaster .lv-cloud { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; }
#dinner-disaster .lv-cloud small { opacity: .7; font-size: .6em; }
#dinner-disaster .lv-opt { display: grid; gap: 4px; text-align: left; background: #fff; color: var(--dd-ink); border: 2px solid rgba(4, 19, 20, .14); border-radius: 12px; padding: 10px 12px; width: 100%; }
#dinner-disaster .lv-opt.act { cursor: pointer; border-color: rgba(4, 19, 20, .35); }
#dinner-disaster .lv-opt.act:hover:not(:disabled) { border-color: var(--dd-marigold); }
#dinner-disaster .lv-opt.off { opacity: .55; }
#dinner-disaster .lv-oh { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
#dinner-disaster .lv-oh b { font-family: var(--dd-f-head); font-size: 1.02rem; }
#dinner-disaster .lv-oc { font-family: var(--dd-f-ticket); font-weight: 700; white-space: nowrap; }
#dinner-disaster .lv-ot { font-size: .9rem; color: var(--dd-ink-muted); }
#dinner-disaster .lv-why { font-size: .82rem; color: var(--dd-bad); }
#dinner-disaster .sc-panel .sc-progress { color: var(--dd-ink-muted); }
#dinner-disaster .lv-opt.has-th { grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; }
#dinner-disaster .lv-thumb { display: block; width: 72px; height: 60px; border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(4, 19, 20, .2); background: #cdeefd; }
#dinner-disaster .lv-thumb svg { width: 100%; height: 100%; display: block; }
#dinner-disaster .lv-ob { display: grid; gap: 4px; min-width: 0; }

/* ---------- 2.1: phone-first layout, one type scale, compact displays. Scoped to #dinner-disaster. ---------- */
#dinner-disaster .dd-frame { container: ddframe / inline-size; }

/* One type scale inside the game: 12px is the smallest text anywhere. */
#dinner-disaster { --dd-fs-xs: .75rem; --dd-fs-s: .875rem; --dd-fs-m: 1rem; --dd-fs-l: 1.125rem; }
#dinner-disaster .res-l { font-size: var(--dd-fs-xs); text-transform: none; letter-spacing: 0; font-weight: 700; }
#dinner-disaster .res-s { font-size: var(--dd-fs-xs); }
#dinner-disaster .res-d { font-size: var(--dd-fs-xs); }
#dinner-disaster .sc-kicker, #dinner-disaster .sc-chip, #dinner-disaster .sc-tag, #dinner-disaster .sc-key, #dinner-disaster .sc-vote,
#dinner-disaster .sc-banner-k, #dinner-disaster .eyebrow, #dinner-disaster .len-pick legend, #dinner-disaster .shelf h2 { font-size: var(--dd-fs-xs); }
#dinner-disaster .sc-bubble { font-size: max(var(--dd-fs-xs), min(1.8vw, .88rem)); }
#dinner-disaster .sc-bubble b, #dinner-disaster .sc-bubble .cpu-tag { font-size: var(--dd-fs-xs); }
#dinner-disaster .sc-note, #dinner-disaster .sc-panel .note, #dinner-disaster .sc-says, #dinner-disaster .sc-chips-line,
#dinner-disaster .sc-why, #dinner-disaster .sc-forecast, #dinner-disaster .sc-progress, #dinner-disaster .note, #dinner-disaster .note-ink,
#dinner-disaster .pill-note, #dinner-disaster .chip-btn { font-size: var(--dd-fs-s); }
#dinner-disaster .sc-lead, #dinner-disaster .sc-desc { font-size: var(--dd-fs-m); }

/* Top bar icons: names stay available to screen readers; long labels show where there is room. */
#dinner-disaster .tb-ic { flex: none; }
#dinner-disaster .chip-btn.ico { padding-inline: 12px; }
#dinner-disaster .lbl-short { display: none; }

/* First-play tips */
#dinner-disaster .dd-tip { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; background: #fff1d6; color: #1f3236; border: 2px solid var(--dd-marigold); border-radius: 12px; padding: 8px 12px; }
#dinner-disaster .dd-tip p { margin: 0; font-size: var(--dd-fs-s); line-height: 1.4; }
#dinner-disaster .dd-tip-n { display: block; font-size: var(--dd-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a5a00; }
#dinner-disaster .dd-tip-skip { flex: none; color: #1f3236; font-size: var(--dd-fs-s); min-height: 44px; padding: 0 4px; }

/* Party length: compact segmented choice, description of the chosen length underneath. */
#dinner-disaster .len-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#dinner-disaster .len-opt { text-align: center; min-height: 44px; padding: 8px 6px; }
#dinner-disaster .len-desc { margin: 6px 0 0; font-size: var(--dd-fs-s); color: var(--dd-on-base-muted); }
@media (max-width: 420px) { #dinner-disaster .len-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- phones (the game area, not the window, decides) ---------- */
@container ddframe (max-width: 600px) {
  #dinner-disaster .wrap { padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  #dinner-disaster .topbar { flex-wrap: nowrap; padding-block: 2px 8px; gap: 6px; }
  #dinner-disaster .brand { font-size: 1rem; }
  #dinner-disaster .tools { flex-wrap: nowrap; gap: 4px; }
  #dinner-disaster .chip-btn { min-height: 44px; padding: 6px 10px; }
  #dinner-disaster .chip-btn .lbl-long { display: none; }
  #dinner-disaster .chip-btn .lbl-short { display: inline; }
  #dinner-disaster .chip-btn.ico { width: 44px; padding: 0; justify-content: center; }
  #dinner-disaster .pill-note { display: none; }

  /* Title: name, promise, then the Play button without scrolling. */
  #dinner-disaster .hero { gap: 10px; padding-top: 4px; }
  #dinner-disaster .logo { font-size: clamp(2.3rem, 11cqi, 3.2rem); }
  #dinner-disaster .byline { margin-top: -4px; font-size: var(--dd-fs-s); }
  #dinner-disaster .tagline { font-size: 1.15rem; }
  #dinner-disaster .premise { font-size: var(--dd-fs-s); }
  #dinner-disaster .len-pick { margin: 0; }
  #dinner-disaster .cta .btn { flex: 1 1 100%; min-width: 0; }

  /* Play: scene, a compact 4 × 2 status strip, then the question and its choices. */
  #dinner-disaster .ddv-main { gap: 8px; }
  #dinner-disaster .ddv-left { gap: 6px; }
  #dinner-disaster .sc-stage { border-radius: 12px; border-width: 1.5px; }
  #dinner-disaster .res { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  #dinner-disaster .res-i { grid-template-areas: "l l" "i v"; padding: 4px 6px 5px; border-radius: 8px; border-width: 1px; column-gap: 4px; }
  #dinner-disaster .res-ic svg { width: 16px; height: 16px; }
  #dinner-disaster .res-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dinner-disaster .res-v { font-size: .95rem; white-space: nowrap; }
  #dinner-disaster .res-i[data-k="budget"] .res-v { font-size: .875rem; }
  #dinner-disaster .res-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dinner-disaster .res-segs i { height: 6px; }
  #dinner-disaster .res-segs.tok i { width: 10px; height: 10px; }
  #dinner-disaster .sc-progress { font-size: var(--dd-fs-xs); }
  #dinner-disaster .sc-panel { padding: 12px; gap: 8px; border-radius: 12px; }
  #dinner-disaster .opt.sc-card { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 6px; }
  #dinner-disaster .sc-card .thumb { width: 64px; height: 54px; }

  /* The next step stays within thumb reach: Confirm, Next and Start planning stick to the bottom while the panel is on screen. */
  #dinner-disaster .dd-actbar { position: sticky; bottom: 0; z-index: 5; margin: 0 -12px -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--dd-cream) 75%, rgba(251, 246, 238, 0)); border-radius: 0 0 12px 12px; }
  #dinner-disaster .outcome .dd-actbar { margin-inline: -12px; }
  #dinner-disaster .dd-actbar .btn { flex: 1 1 100%; }
  #dinner-disaster .dd-actbar .btn-line { flex: 1 1 100%; }

  /* Sheets and live screens */
  #dinner-disaster .sheet { max-height: calc(100dvh - 24px); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  #dinner-disaster .lv-main, #dinner-disaster .lv-side, #dinner-disaster .lv-under { padding: 14px 12px; }
  #dinner-disaster .lv-radios label { min-height: 44px; }
}

/* Phones turned sideways: keep the scene and the choices side by side instead of a scene taller than the screen. */
@media (orientation: landscape) and (max-height: 520px) {
  #dinner-disaster .ddv-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  #dinner-disaster .sc-panel { position: sticky; top: 8px; max-height: calc(100dvh - 16px); overflow: auto; }
  #dinner-disaster .dd-actbar { position: static; margin: 0; background: none; padding: 0; }
}

/* Typing on a phone: inputs never trigger browser zoom (16px+). */
#dinner-disaster input, #dinner-disaster select, #dinner-disaster textarea { font-size: max(16px, 1em); }
#dinner-disaster .dd-actbar:not(:last-child) { margin-bottom: 0; }
#dinner-disaster .res-l .ls { display: none; }
@container ddframe (max-width: 400px) { #dinner-disaster .res-l .ll { display: none; } #dinner-disaster .res-l .ls { display: inline; } }
#dinner-disaster .cpu { font-size: var(--dd-fs-xs); }
/* Comfortable touch targets everywhere (tablets too). */
#dinner-disaster .brand { min-height: 44px; display: inline-flex; align-items: center; }
#dinner-disaster details > summary { min-height: 44px; padding-block: 11px; box-sizing: border-box; }
#dinner-disaster .linkish { min-height: 44px; }

/* Dinner Disaster — weather and atmosphere effects for the party scenes.
   Strong effects play for a few seconds when a surprise arrives, then settle to a faint background.
   Motion off (player setting or device setting) shows a still frame; "Light effects" drops particles. */
#dinner-disaster .fx { pointer-events: none; }
#dinner-disaster .fade-in { animation: dd-fade .6s ease-out both; }
#dinner-disaster .fx-rain, #dinner-disaster .fx-blizzard, #dinner-disaster .fx-sand, #dinner-disaster .fx-alarm, #dinner-disaster .fx-heat, #dinner-disaster .fx-dark { animation: dd-fx-settle 6s ease-out .4s both; }
#dinner-disaster .flake-sheet { animation: dd-fall 9s linear infinite; }
#dinner-disaster .flake-sheet.fast { animation-duration: 2.4s; }
#dinner-disaster .fx-blizzard .flake-sheet { transform-box: view-box; }
#dinner-disaster .petal-sheet { animation: dd-fall 14s linear infinite; }
#dinner-disaster .gust-sheet { animation: dd-gust 1.4s linear 4; }
#dinner-disaster .dust-sheet { animation: dd-gust 1.8s linear infinite; }
#dinner-disaster .shimmer { animation: dd-shimmer 2.2s ease-in-out 3 alternate; }
#dinner-disaster .flicker { animation: dd-dark 2.4s steps(1, end) 2 both; }
#dinner-disaster .alarm-wash { animation: dd-alarm .9s ease-in-out 5 alternate; }
#dinner-disaster .alarm-light { animation: dd-alarm .45s ease-in-out 10 alternate; }
#dinner-disaster .tide { animation: dd-tide 3s ease-in-out 2 alternate; }
#dinner-disaster .waves { animation: dd-waves 5s ease-in-out infinite alternate; }
#dinner-disaster .win { animation: dd-glow 3.4s ease-in-out infinite alternate; }
#dinner-disaster .fire { animation: dd-flicker .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .mist { animation: dd-rise 1.2s ease-in-out infinite alternate; }
#dinner-disaster .fx-quiet { animation: dd-pop-svg .5s ease-out both; transform-box: fill-box; transform-origin: 50% 50%; }

@keyframes dd-fx-settle { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: .45; } }
@keyframes dd-fall { from { transform: translateY(0); } to { transform: translateY(600px); } }
@keyframes dd-gust { from { transform: translateX(-120px); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(260px); opacity: 0; } }
@keyframes dd-shimmer { from { transform: translateY(0); opacity: .2; } to { transform: translateY(-6px); opacity: .7; } }
@keyframes dd-dark { 0% { opacity: .62; } 18% { opacity: .2; } 30% { opacity: .66; } 55% { opacity: .35; } 70% { opacity: .6; } 100% { opacity: .5; } }
@keyframes dd-alarm { from { opacity: .05; } to { opacity: .3; } }
@keyframes dd-tide { from { transform: translateY(0); } to { transform: translateY(14px); } }
@keyframes dd-waves { from { transform: translateX(-8px); } to { transform: translateX(8px); } }

/* Light effects: for older or low-powered phones. Particles are drawn sparsely and loops stop. */
#dinner-disaster .ddv.lowfx .flake-sheet, #dinner-disaster .ddv.lowfx .petal-sheet, #dinner-disaster .ddv.lowfx .dust-sheet,
#dinner-disaster .ddv.lowfx .waves, #dinner-disaster .ddv.lowfx .win, #dinner-disaster .ddv.lowfx .glow, #dinner-disaster .ddv.lowfx .idle, #dinner-disaster .ddv.lowfx .twinkle { animation: none; }
#dinner-disaster .ddv.lowfx .fx-petals { display: none; }

/* Motion off: a still frame. Strong effects stay visible but faint, so the surprise still reads. */
#dinner-disaster .ddv.reduce .fx-rain, #dinner-disaster .ddv.reduce .fx-blizzard, #dinner-disaster .ddv.reduce .fx-sand, #dinner-disaster .ddv.reduce .fx-alarm, #dinner-disaster .ddv.reduce .fx-heat { opacity: .6; }
#dinner-disaster .ddv.reduce .fx-dark .flicker { opacity: .45; }
@media (prefers-reduced-motion: reduce) {
  #dinner-disaster .fx *, #dinner-disaster .fx, #dinner-disaster .waves, #dinner-disaster .win, #dinner-disaster .fire { animation: none !important; }
}

/* Dinner Disaster 2.2 — warm, readable palette. Loaded last, scoped to #dinner-disaster.
   Cream backgrounds, espresso and maroon text, burnt-orange accents, gold only for highlights and borders
   (never for important text on a light background). The expressive fonts stay for the logo and large
   headings; instructions, choices, scores and controls use Roboto.
   Every text colour pair here is checked by tools/contrast-audit.js (WCAG AA: 4.5:1, or 3:1 for large text). */
#dinner-disaster {
  --dd-espresso: #3a2216;
  --dd-maroon: #7a2418;
  --dd-burnt: #b04a17;
  --dd-burnt-deep: #8c3a10;
  --dd-gold-hi: #c9962a;     /* decorative gold: borders, stars, meters */
  --dd-gold-on-dark: #f2c46d; /* gold text only on espresso */
  --dd-paper: #fffaf1;

  --dd-base: #f8eddb;
  --dd-base-2: #f1e2c8;
  --dd-base-3: #e8d3b0;
  --dd-on-base: var(--dd-espresso);
  --dd-on-base-muted: #5e3d2e;
  --dd-ink: #2b1810;
  --dd-ink-muted: #5e4234;
  --dd-marigold: var(--dd-burnt);
  --dd-marigold-deep: var(--dd-burnt-deep);
  --dd-gold: var(--dd-maroon);
  --dd-cream: var(--dd-paper);
  --dd-cream-2: #f4e8d4;
  --dd-sand: #d9c6a6;
  --dd-good: #2a5f33;
  --dd-good-bg: #e2efe3;
  --dd-bad: #9a3418;
  --dd-bad-bg: #f9e4dc;
  --dd-neutral-bg: #efe5d4;
  --dd-focus: var(--dd-maroon);
  --dd-f-ticket: Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color: var(--dd-on-base);
}

/* frame and top bar */
#dinner-disaster .dd-frame { background: var(--dd-base); box-shadow: 0 14px 34px rgba(58, 34, 22, .18); border: 1px solid rgba(58, 34, 22, .1); }
#dinner-disaster .dd-frame::before { background: radial-gradient(700px 320px at 85% -8%, rgba(201, 150, 42, .16), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(176, 74, 23, .08), transparent 60%); }
#dinner-disaster .brand { color: var(--dd-burnt); }
#dinner-disaster .chip-btn { border-color: rgba(58, 34, 22, .28); background: rgba(255, 250, 241, .7); color: var(--dd-espresso); }
#dinner-disaster .chip-btn:hover:not(:disabled) { background: var(--dd-paper); border-color: var(--dd-burnt); }
#dinner-disaster .pill-note { background: #fbeacb; color: var(--dd-maroon); border-color: var(--dd-gold-hi); }

/* buttons */
#dinner-disaster .btn-primary { background: var(--dd-burnt); color: #fff; }
#dinner-disaster .btn-primary:hover:not(:disabled) { background: var(--dd-burnt-deep); }
#dinner-disaster .btn-ghost { color: var(--dd-espresso); border-color: rgba(58, 34, 22, .55); background: rgba(255, 250, 241, .6); }
#dinner-disaster .btn-ghost:hover:not(:disabled) { background: var(--dd-paper); border-color: var(--dd-espresso); }
#dinner-disaster .btn-ink { background: var(--dd-espresso); color: var(--dd-paper); }
#dinner-disaster .btn-ink:hover:not(:disabled) { background: #24140c; }
#dinner-disaster .btn-line { color: var(--dd-ink); border-color: var(--dd-ink); }
#dinner-disaster .btn-onink { color: #fbf3e4; border-color: rgba(251, 243, 228, .7); }
#dinner-disaster .btn:disabled { opacity: .6; }

/* title */
#dinner-disaster .eyebrow { color: var(--dd-on-base-muted); }
#dinner-disaster .logo { color: var(--dd-espresso); }
#dinner-disaster .logo span { color: var(--dd-burnt); }
#dinner-disaster .byline { font-family: var(--dd-f-body); font-style: normal; color: var(--dd-on-base-muted); }
#dinner-disaster .tagline { color: var(--dd-maroon); }
#dinner-disaster .premise, #dinner-disaster .note, #dinner-disaster .code-form label, #dinner-disaster .footer { color: var(--dd-on-base-muted); }
#dinner-disaster .code-form input { background: var(--dd-paper); border-color: rgba(58, 34, 22, .4); color: var(--dd-espresso); }
#dinner-disaster .code-form input::placeholder { color: #7a5a4a; }
#dinner-disaster .form-error { color: var(--dd-bad); }
#dinner-disaster .resume { border-color: var(--dd-gold-hi); background: rgba(255, 250, 241, .7); }
#dinner-disaster .install-row { border-top-color: rgba(58, 34, 22, .15); }
#dinner-disaster .earn { background: rgba(255, 250, 241, .75); border-color: var(--dd-gold-hi); }
#dinner-disaster .earn h2, #dinner-disaster .reward { color: var(--dd-maroon); }
#dinner-disaster .stat { background: var(--dd-paper); border: 1px solid rgba(58, 34, 22, .1); border-top: 3px solid var(--dd-gold-hi); }
#dinner-disaster .stat b { color: var(--dd-espresso); }
#dinner-disaster .stat span, #dinner-disaster .shelf h2 { color: var(--dd-on-base-muted); }
#dinner-disaster .badge { border-color: var(--dd-gold-hi); color: var(--dd-espresso); background: var(--dd-paper); }
#dinner-disaster .badge.locked { border-color: rgba(58, 34, 22, .3); color: var(--dd-on-base-muted); opacity: 1; background: transparent; }
#dinner-disaster .linkish { color: var(--dd-espresso); }

/* tickets, panels and cards */
#dinner-disaster .ticket { background: var(--dd-paper); box-shadow: 0 8px 22px rgba(58, 34, 22, .16); }
#dinner-disaster .secret { background: var(--dd-espresso); color: #fbf3e4; border-left-color: var(--dd-burnt); }
#dinner-disaster .secret .eyebrow { color: var(--dd-gold-on-dark); }
#dinner-disaster .cpu { background: var(--dd-espresso); color: #fbf3e4 !important; }
#dinner-disaster .cpu.you { background: var(--dd-burnt); color: #fff !important; }
#dinner-disaster .vote { background: var(--dd-espresso); color: #fbf3e4; }
#dinner-disaster .hud { background: var(--dd-base); border-bottom-color: rgba(58, 34, 22, .12); }
#dinner-disaster .meter { background: var(--dd-paper); }
#dinner-disaster .meter .v, #dinner-disaster .tokens b { color: var(--dd-espresso); }
#dinner-disaster .meter.short .s { color: var(--dd-bad); }
#dinner-disaster .meter.okay .s { color: var(--dd-good); }
#dinner-disaster .bar { background: rgba(58, 34, 22, .12); }
#dinner-disaster .pip { background: rgba(58, 34, 22, .18); }
#dinner-disaster .pip.now { background: var(--dd-espresso); }
#dinner-disaster .opt .lbl { font-family: var(--dd-f-body); }
#dinner-disaster .forecast, #dinner-disaster .hintbox, #dinner-disaster .demo-banner { background: #fbeacb; }
#dinner-disaster .confirm { background: var(--dd-paper); border-color: rgba(176, 74, 23, .45); }
#dinner-disaster .assists { border-top-color: rgba(58, 34, 22, .2); }
#dinner-disaster .needs { background: var(--dd-paper); }
#dinner-disaster .needs .mark.ok { background: var(--dd-good-bg); color: var(--dd-good); }
#dinner-disaster .needs .mark.no { background: var(--dd-bad-bg); color: var(--dd-bad); }
#dinner-disaster .needs .mark.wait { background: var(--dd-neutral-bg); color: var(--dd-ink-muted); }

/* results and share card */
#dinner-disaster .verdict .tier { color: var(--dd-espresso); }
#dinner-disaster .verdict .tier.win { color: var(--dd-burnt); }
#dinner-disaster .verdict .ending { font-family: var(--dd-f-body); font-style: normal; color: var(--dd-on-base-muted); }
#dinner-disaster .flag { color: var(--dd-maroon); }
#dinner-disaster .share-card { background: linear-gradient(160deg, var(--dd-paper), #f6e7cc); border-color: var(--dd-gold-hi); color: var(--dd-espresso); }
#dinner-disaster .sc-logo { color: var(--dd-burnt); }
#dinner-disaster .sc-code { color: var(--dd-on-base-muted); }
#dinner-disaster .toast { background: var(--dd-espresso); color: #fbf3e4; border-color: var(--dd-gold-hi); }

/* the illustrated play screen */
#dinner-disaster .ddv { --sc-paper: #fffdf7; --sc-line: #dccbad; --sc-ink: #2b1810; --sc-ink-2: #5e4234; --sc-amber-soft: #fcefd8; }
#dinner-disaster .sc-stage { border-color: rgba(58, 34, 22, .22); }
#dinner-disaster .sc-banner { background: var(--dd-espresso); color: #fbf3e4; border-color: var(--dd-burnt); }
#dinner-disaster .sc-banner-k { color: var(--dd-gold-on-dark); }
#dinner-disaster .sc-spot.on .sc-tag, #dinner-disaster .sc-spot:hover .sc-tag { background: var(--dd-burnt); color: #fff; border-color: var(--dd-burnt-deep); }
#dinner-disaster .sc-progress { color: var(--dd-on-base-muted); }
#dinner-disaster .res-i { background: var(--dd-paper); border-color: rgba(58, 34, 22, .16); }
#dinner-disaster .res-l, #dinner-disaster .res-s { color: var(--dd-on-base-muted); }
#dinner-disaster .res-l { font-size: .62rem; }
#dinner-disaster .res-s { font-size: .7rem; }
#dinner-disaster .res-v { color: var(--dd-espresso); font-weight: 700; }
#dinner-disaster .res-i.t-good { border-color: #6f9e74; } #dinner-disaster .res-i.t-good .res-v { color: var(--dd-good); }
#dinner-disaster .res-i.t-warn { border-color: var(--dd-gold-hi); } #dinner-disaster .res-i.t-warn .res-v { color: #7d4f06; }
#dinner-disaster .res-i.t-bad { border-color: #c4664a; background: #fbe9e2; } #dinner-disaster .res-i.t-bad .res-v { color: var(--dd-bad); }
#dinner-disaster .res-m { background: rgba(58, 34, 22, .14); }
#dinner-disaster .res-d { background: var(--dd-paper); }
#dinner-disaster .res-d.good { color: var(--dd-good); } #dinner-disaster .res-d.bad { color: var(--dd-bad); }
#dinner-disaster .res-segs i { border-color: rgba(58, 34, 22, .4); }
#dinner-disaster .res-segs i.on { background: #c8402f; border-color: #c8402f; }
#dinner-disaster .sc-panel { background: var(--dd-paper); border: 1px solid rgba(58, 34, 22, .12); }
#dinner-disaster .sc-panel h2 { color: var(--dd-espresso); }
#dinner-disaster .sc-kicker, #dinner-disaster .sc-bubble b { color: var(--dd-burnt-deep); }
#dinner-disaster .sc-more summary, #dinner-disaster .sc-forecast { color: var(--dd-espresso); }
#dinner-disaster .sc-card-t { font-family: var(--dd-f-body); font-size: 1.02rem; }
#dinner-disaster .sc-key { background: var(--dd-espresso); }
#dinner-disaster .sc-chip.risky { background: var(--dd-burnt); color: #fff; }
#dinner-disaster .sc-chip { background: var(--dd-neutral-bg); }
#dinner-disaster .len-pick legend { color: var(--dd-espresso); }
#dinner-disaster .len-opt { background: rgba(255, 250, 241, .7); border-color: rgba(58, 34, 22, .25); }
#dinner-disaster .len-opt.on { border-color: var(--dd-burnt); background: #fbe7d3; }
#dinner-disaster .len-opt span { opacity: 1; color: var(--dd-on-base-muted); }
#dinner-disaster .dd-actbar { --dd-cream: var(--dd-paper); }

/* live play and the TV screen */
#dinner-disaster .lv-screen .lv-stand th, #dinner-disaster .lv-screen .lv-stand td { border-color: rgba(58, 34, 22, .2); }
#dinner-disaster .lv-screen .lv-pitch { background: rgba(255, 250, 241, .7); border-color: rgba(58, 34, 22, .2); }
#dinner-disaster .lv-oh b { font-family: var(--dd-f-body); }

/* ---------- 2.2 components ---------- */
#dinner-disaster .party-opts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#dinner-disaster .party-opts .len-opt b { font-size: .92rem; line-height: 1.25; }
#dinner-disaster .len-desc { font-size: .88rem; color: var(--dd-on-base-muted); margin-top: 6px; }
#dinner-disaster .challenges { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
#dinner-disaster .chal { display: grid; gap: 6px; align-content: start; background: rgba(255, 250, 241, .7); border: 1px solid rgba(58, 34, 22, .14); border-radius: 12px; padding: 10px; }
#dinner-disaster .chal .btn { width: 100%; }
#dinner-disaster .sc-twist { margin: 0; font-size: .92rem; background: #fbeacb; border-left: 4px solid var(--dd-gold-hi); padding: 6px 10px; border-radius: 6px; color: var(--dd-ink); }
#dinner-disaster .rank-up { color: var(--dd-good); font-weight: 500; }
/* badge families */
#dinner-disaster .fams { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
#dinner-disaster .fam { background: var(--dd-paper); border: 1px solid rgba(58, 34, 22, .14); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; }
#dinner-disaster .fam-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
#dinner-disaster .fam-h b { font-size: .92rem; color: var(--dd-espresso); }
#dinner-disaster .fam-rank { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 1px 8px; background: var(--dd-neutral-bg); color: var(--dd-ink-muted); }
#dinner-disaster .fam.r1 .fam-rank { background: #f3dcc4; color: #6b3a12; }
#dinner-disaster .fam.r2 .fam-rank { background: #e4e7ea; color: #3c4650; }
#dinner-disaster .fam.r3 .fam-rank { background: #f6e3a8; color: #5e4206; }
#dinner-disaster .fam-bar { display: block; height: 6px; border-radius: 3px; background: rgba(58, 34, 22, .12); overflow: hidden; }
#dinner-disaster .fam-bar span { display: block; height: 100%; background: var(--dd-burnt); }
#dinner-disaster .fam.r3 .fam-bar span { background: var(--dd-gold-hi); }
#dinner-disaster .fam-n { font-size: .8rem; color: var(--dd-on-base-muted); }
/* looks */
#dinner-disaster .looks { display: grid; gap: 6px; }
#dinner-disaster .look-l { font-size: .8rem; font-weight: 700; color: var(--dd-espresso); margin-top: 4px; }
#dinner-disaster .cos { color: var(--dd-espresso); background: var(--dd-paper); }
#dinner-disaster .cos.on { border-color: var(--dd-burnt); box-shadow: 0 0 0 2px var(--dd-burnt) inset; }
#dinner-disaster .cos small { color: var(--dd-ink-muted); opacity: 1; }
#dinner-disaster .cos-sunset { background: linear-gradient(#f39c12 0 60%, #7a2418 60%); }
#dinner-disaster .cos-linen { background: linear-gradient(#efe5d4 0 60%, #c9962a 60%); }
#dinner-disaster .cos-plain { background: #fffaf1; border: 2px solid #c9962a; }
#dinner-disaster .cos-bronze { background: #fffaf1; border: 3px solid #a5672d; }
#dinner-disaster .cos-silver { background: #fffaf1; border: 3px solid #9aa3ad; }
#dinner-disaster .cos-gold { background: #fffaf1; border: 3px solid #d4a72c; }
#dinner-disaster .cos-garland { background: #fffaf1; border: 3px dotted #2f6b3a; }
#dinner-disaster .cos-sparklers { background: radial-gradient(circle, #ffe27a 0 30%, #3a2216 32%); }
#dinner-disaster .cos-lanterns { background: radial-gradient(circle, #f39c12 0 40%, #3a2216 42%); }
#dinner-disaster .cos-confetti { background: conic-gradient(#c8402f 0 25%, #f3b52a 0 50%, #2f8a4c 0 75%, #3d85c6 0); }
#dinner-disaster .cos-fireworks { background: radial-gradient(circle, #fff 0 15%, #f28aa0 16% 35%, #3a2216 36%); }
/* share card frames */
#dinner-disaster .share-card { border-width: 3px; }
#dinner-disaster .share-card.frame-bronze { border-color: #a5672d; }
#dinner-disaster .share-card.frame-silver { border-color: #9aa3ad; }
#dinner-disaster .share-card.frame-gold { border-color: #d4a72c; border-width: 4px; }
#dinner-disaster .share-card.frame-garland { border-color: #2f6b3a; border-style: dotted; border-width: 4px; }
#dinner-disaster .sc-party { font-family: var(--dd-f-body); font-weight: 700; font-size: 1rem; }
#dinner-disaster .share-card .note a { color: var(--dd-maroon); font-weight: 700; }
/* sound sheet */
#dinner-disaster .snd-row { display: grid; gap: 4px; border: 1px solid var(--dd-sand); border-radius: 10px; padding: 10px 12px; background: #fffdf8; }
#dinner-disaster .snd-sw { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
#dinner-disaster .snd-sw input { width: 22px; height: 22px; accent-color: var(--dd-burnt); }
#dinner-disaster .snd-vol { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: .86rem; color: var(--dd-ink-muted); }
#dinner-disaster .snd-vol input { width: 100%; min-height: 32px; accent-color: var(--dd-burnt); }
#dinner-disaster .snd-vol input:disabled { opacity: .45; }
/* celebrations over a saved party's finale (looks only) */
#dinner-disaster .celebrate { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#dinner-disaster .celebrate i { position: absolute; left: var(--x); top: -6%; width: 8px; height: 12px; border-radius: 2px; background: hsl(var(--h), 75%, 55%); animation: dd-cel-fall 3.2s ease-in var(--d) 2 both; }
#dinner-disaster .cel-lanterns i { width: 12px; height: 16px; border-radius: 5px; top: 100%; background: #f39c12; box-shadow: 0 0 10px #f6c445; animation: dd-cel-rise 5s ease-out var(--d) 1 both; }
#dinner-disaster .cel-fireworks i { top: 30%; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--h), 85%, 62%); animation: dd-cel-burst 1.6s ease-out var(--d) 3 both; }
@keyframes dd-cel-fall { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(560%) rotate(540deg); opacity: .2; } }
@keyframes dd-cel-rise { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-900%); opacity: 0; } }
@keyframes dd-cel-burst { from { transform: scale(.2); opacity: 1; } to { transform: scale(3) translateY(-20px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #dinner-disaster .celebrate { display: none; } }
#dinner-disaster .share-img { display: block; width: 100%; max-width: 600px; height: auto; border-radius: 8px; border: 1px solid rgba(58, 34, 22, .2); -webkit-touch-callout: default; user-select: auto; }

/* Dinner Disaster 2.3 — welcome scene and play feedback (visual only; see src/ui/polish/*.js).
   Loaded after palette.css. Every effect is decoration: the same information is always in text on screen.
   Calm versions: the game's Reduce motion setting (.pz-still / .ddv.reduce), the device's Reduce Motion preference
   (@media) and Light effects (.pz-low / .ddv.lowfx). No flashing; nothing covers buttons; nothing takes taps. */

/* ---------- welcome screen ---------- */
#dinner-disaster .pz-hero { gap: 12px; }
#dinner-disaster .pz-head { display: grid; gap: 4px; }
#dinner-disaster .pz-welcome { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 2 / 1; border: 2px solid rgba(58, 34, 22, .18); box-shadow: 0 10px 26px rgba(58, 34, 22, .16); background: #2f5f6a; }
#dinner-disaster .pz-welcome::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: var(--dd-kente-stripe); }
#dinner-disaster .pz-scene { display: block; width: 100%; height: 100%; }
#dinner-disaster .pz-tag { font-family: var(--dd-f-head); font-weight: 700; font-size: clamp(1.15rem, 3.6vw, 1.45rem); line-height: 1.3; color: var(--dd-maroon); }
#dinner-disaster .pz-cta { display: grid; gap: 6px; justify-items: start; }
#dinner-disaster .pz-start { font-size: 1.12rem; letter-spacing: .06em; min-height: 56px; padding-inline: 34px; border-radius: 999px; box-shadow: 0 6px 0 var(--dd-burnt-deep), 0 10px 22px rgba(176, 74, 23, .28); }
#dinner-disaster .pz-start:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 var(--dd-burnt-deep), 0 6px 14px rgba(176, 74, 23, .24); }
#dinner-disaster .pz-start .pz-ic { width: 26px; height: 26px; margin-right: 10px; vertical-align: -6px; }
#dinner-disaster .pz-choice { font-size: var(--dd-fs-s, .92rem); color: var(--dd-on-base-muted); }
#dinner-disaster .pz-choice b { color: var(--dd-espresso); }
#dinner-disaster .pz-options { display: grid; gap: 12px; padding: 12px 14px 14px; border-radius: 14px; background: var(--dd-paper); border: 1px solid rgba(58, 34, 22, .12); }
#dinner-disaster .pz-options > h2 { font-size: var(--dd-fs-xs, .8rem); text-transform: uppercase; letter-spacing: .14em; color: var(--dd-on-base-muted); }

/* gentle life in the scene */
#dinner-disaster .pz-halo { animation: pz-twinkle 2.6s ease-in-out infinite alternate; }
#dinner-disaster .pz-steam { animation: pz-steam 2.7s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .pz-bob { animation: pz-bob 3.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .pz-goose-path { animation: pz-walk 28s linear infinite; }
#dinner-disaster .pz-goose { animation: pz-waddle .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
#dinner-disaster .pz-sunrays { animation: pz-spin 60s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
#dinner-disaster .pz-fx-snow .pz-p, #dinner-disaster .pz-fx-petals .pz-p { animation: pz-fall 10s linear infinite; }
#dinner-disaster .pz-fx-petals .pz-p { animation-name: pz-drift; }
#dinner-disaster .pz-fx-dust .pz-p { animation: pz-dust 9s linear infinite; }
#dinner-disaster .pz-fx-sparkle .pz-p { animation: pz-sparkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
#dinner-disaster .pz-fx-shimmer .pz-p { animation: pz-shimmer 4s ease-in-out infinite alternate; }

@keyframes pz-twinkle { from { opacity: .08; } to { opacity: .5; } }
@keyframes pz-steam { 0% { transform: translateY(6px) scaleY(.8); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-18px) scaleY(1.1); opacity: 0; } }
@keyframes pz-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px); } }
@keyframes pz-walk { 0% { transform: translateX(0); } 46% { transform: translateX(540px); } 50% { transform: translateX(540px) scaleX(-1); } 96% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0); } }
@keyframes pz-waddle { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes pz-spin { to { transform: rotate(360deg); } }
@keyframes pz-fall { from { transform: translateY(-40px); } to { transform: translateY(420px); } }
@keyframes pz-drift { 0% { transform: translate(0, -40px); } 50% { transform: translate(24px, 180px); } 100% { transform: translate(-10px, 420px); } }
@keyframes pz-dust { from { transform: translateX(-200px); opacity: 0; } 20% { opacity: .7; } to { transform: translateX(260px); opacity: 0; } }
@keyframes pz-sparkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes pz-shimmer { from { opacity: .15; transform: translateY(0); } to { opacity: .7; transform: translateY(-5px); } }

/* goose keeps its own facing during the walk: the outer group moves, the inner group waddles */
#dinner-disaster .pz-goose-path { transform-box: fill-box; transform-origin: 50% 100%; }

/* calm versions of the welcome scene */
#dinner-disaster .pz-welcome.pz-still *, #dinner-disaster .pz-welcome.pz-low .pz-halo, #dinner-disaster .pz-welcome.pz-low .pz-bob,
#dinner-disaster .pz-welcome.pz-low .pz-sunrays, #dinner-disaster .pz-welcome.pz-low .waves, #dinner-disaster .pz-welcome.pz-low .twinkle { animation: none !important; }
#dinner-disaster .pz-welcome.pz-still .pz-halo { opacity: .3; }

/* ---------- during play ---------- */
#dinner-disaster .pz-stamp { position: absolute; left: 50%; top: 16%; z-index: 4; transform: translateX(-50%) rotate(-6deg); pointer-events: none;
  font-family: var(--dd-f-logo); font-size: clamp(1.25rem, 4.6vw, 2.1rem); line-height: 1; padding: 10px 18px 12px; border-radius: 14px;
  background: var(--dd-paper); border: 3px solid currentColor; box-shadow: 0 8px 20px rgba(58, 34, 22, .25); white-space: nowrap;
  animation: pz-stamp 1.7s ease-out both; }
#dinner-disaster .pz-stamp.pz-good { color: var(--dd-good, #2a5f33); }
#dinner-disaster .pz-stamp.pz-bad { color: var(--dd-bad, #9a3418); }
#dinner-disaster .pz-stamp.pz-mixed, #dinner-disaster .pz-stamp.pz-neutral { color: var(--dd-burnt-deep, #8c3a10); }
#dinner-disaster .pz-stamp.pz-static { animation: pz-fadeout 1.8s steps(1, end) both; }
@keyframes pz-stamp { 0% { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(1.6); } 14% { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(.96); } 22% { transform: translateX(-50%) rotate(-6deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) rotate(-6deg) translateY(-8px); } }
@keyframes pz-fadeout { 0% { opacity: 1; } 100% { opacity: 0; } }

#dinner-disaster .pz-burst { position: absolute; left: 50%; top: 30%; width: 0; height: 0; z-index: 3; pointer-events: none; }
#dinner-disaster .pz-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #f2c46d; opacity: 0;
  transform: rotate(var(--a)) translateY(0); animation: pz-ray .8s ease-out var(--t) forwards; }
#dinner-disaster .pz-burst.pz-bad i { background: rgba(58, 34, 22, .35); width: 14px; height: 14px; left: -7px; top: -7px; }
@keyframes pz-ray { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.6); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); } }

#dinner-disaster .res-i.pz-pulse { animation: pz-ring 1.2s ease-out 1; }
#dinner-disaster .verdict .total.pz-pulse { animation: pz-grow .9s ease-out 1; }
@keyframes pz-ring { 0% { box-shadow: 0 0 0 0 rgba(176, 74, 23, .55); } 100% { box-shadow: 0 0 0 9px rgba(176, 74, 23, 0); } }
@keyframes pz-grow { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
#dinner-disaster .res-d.pz-pop { animation: pz-badge .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pz-badge { 0% { transform: scale(.5); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

#dinner-disaster .outcome.pz-rise { animation: pz-in .28s ease-out both; }
@keyframes pz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

#dinner-disaster .sc-stage.pz-jolt { animation: pz-thud .42s ease-out 1; }
@keyframes pz-thud { 0% { transform: none; } 30% { transform: translateY(4px) scale(1.008); } 100% { transform: none; } }
#dinner-disaster .pz-alert { position: absolute; right: 5%; top: 7%; z-index: 4; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; font: 900 1.7rem/1 var(--dd-f-body); color: #fff; background: var(--dd-burnt, #b04a17); border: 3px solid var(--dd-paper);
  box-shadow: 0 6px 16px rgba(58, 34, 22, .3); animation: pz-pop 1.6s ease-out both; }
#dinner-disaster .pz-alert.pz-static { animation: pz-fadeout 1.6s steps(1, end) both; }
@keyframes pz-pop { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.12); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 2.2 fix: the results heading shared the class "win" with the picture's glow animation and faded to ~12–35%.
   The glow is for the scene artwork only; the heading stays fully visible. */
#dinner-disaster .verdict .tier.win { animation: none; opacity: 1; }
#dinner-disaster .pz-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
#dinner-disaster .pz-confetti i { position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: pz-confetti 1.9s ease-in forwards; }
@keyframes pz-confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--fall, 420px)) rotate(var(--r, 180deg)); } }

/* guests' mood marks (a heart when a guest gets happier, a small storm cloud when they get unhappier) */
#dinner-disaster .pz-marks { position: absolute; inset: 0; pointer-events: none; }
#dinner-disaster .pz-mark { position: absolute; width: 30px; height: 30px; margin: -36px 0 0 -15px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dd-paper); border: 2px solid rgba(58, 34, 22, .25); box-shadow: 0 3px 8px rgba(58, 34, 22, .2); animation: pz-mark 2.6s ease-out both; }
#dinner-disaster .pz-mark svg { width: 18px; height: 18px; }
@keyframes pz-mark { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* calm versions during play: motion off keeps marks still and visible; light effects drop the burst */
#dinner-disaster .ddv.reduce .pz-mark { animation: none; }
#dinner-disaster .ddv.reduce .pz-burst, #dinner-disaster .ddv.reduce .pz-confetti { display: none; }
#dinner-disaster .ddv.reduce .res-d.pz-pop { animation: none; }
#dinner-disaster .ddv.reduce .res-i.pz-pulse, #dinner-disaster .ddv.reduce .sc-stage.pz-jolt { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #dinner-disaster .pz-welcome *, #dinner-disaster .pz-burst, #dinner-disaster .pz-burst i, #dinner-disaster .res-d.pz-pop, #dinner-disaster .pz-confetti,
  #dinner-disaster .pz-confetti i, #dinner-disaster .res-i.pz-pulse, #dinner-disaster .sc-stage.pz-jolt, #dinner-disaster .outcome.pz-rise,
  #dinner-disaster .verdict .total.pz-pulse, #dinner-disaster .pz-mark { animation: none !important; }
  #dinner-disaster .pz-burst, #dinner-disaster .pz-confetti { display: none; }
  #dinner-disaster .pz-stamp, #dinner-disaster .pz-alert { animation: pz-fadeout 1.8s steps(1, end) both !important; }
}

/* phones */
@container (max-width: 560px) {
  #dinner-disaster .pz-options { padding: 0; background: none; border: 0; }
  #dinner-disaster .pz-welcome { aspect-ratio: 16 / 10; border-radius: 14px; }
  #dinner-disaster .pz-cta { justify-items: stretch; }
  #dinner-disaster .pz-start { width: 100%; }
}
@media (max-width: 560px) {
  #dinner-disaster .pz-options { padding: 0; background: none; border: 0; }
  #dinner-disaster .pz-welcome { aspect-ratio: 16 / 10; border-radius: 14px; }
  #dinner-disaster .pz-cta { justify-items: stretch; }
  #dinner-disaster .pz-start { width: 100%; }
  #dinner-disaster .pz-mark { width: 26px; height: 26px; margin: -30px 0 0 -13px; }
  #dinner-disaster .pz-mark svg { width: 15px; height: 15px; }
}

/* wide screens: title, line and button beside the picture, so "Start a rescue" is visible straight away */
@container (min-width: 640px) {
  #dinner-disaster .pz-top { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); grid-template-areas: "head scene" "cta scene"; column-gap: 26px; row-gap: 14px; align-items: end; }
  #dinner-disaster .pz-top .pz-head { grid-area: head; }
  #dinner-disaster .pz-top .pz-welcome { grid-area: scene; align-self: center; aspect-ratio: 16 / 10; }
  #dinner-disaster .pz-top .pz-cta { grid-area: cta; align-self: start; }
  #dinner-disaster .pz-top .logo { font-size: clamp(2.8rem, 6.4cqi, 4.4rem); }
}
#dinner-disaster .pz-top { display: grid; gap: 12px; }