/* Daily Dungeon · the phone shell (DECISIONS #285; CLAUDE.md §7.2, §7.5). Below 760 px the page is three tabs on a
   fixed, full-height shell (web/js/screens/phone/): BRIEFING, RUN and RESULT, with the Intel, Room and Menu sheets
   over it. Ported from the handoff's phone-layout.css with its `dd-` names for the shell's own parts; the page's own
   components (the turn, the dice line, the scene card, the kit rows, the panels, the recap's parts) are reused as
   they are and restyled here under `.dd-ui` (the shell and the sheets). Every colour is a token: the `--dd-*` names
   below are aliases of tokens.css, so the ported rules read as the handoff's; the only token added is --hurt.
   Nothing here reaches the desktop or the classic phone page: every rule is scoped to the shell, the sheets or
   `html.dd-locked`. No scroll snap anywhere; on the Run tab the story is the only thing that scrolls. */

:root {
  --dd-line-2: color-mix(in srgb, var(--line) 75%, var(--muted));            /* control borders, a shade up from --line */
  --dd-overlay: color-mix(in srgb, var(--raised) 96%, transparent);          /* the jump pill and the item tip */
  --dd-shadow: 0 8px 24px color-mix(in srgb, var(--ground) 70%, transparent);
  --dd-ring: color-mix(in srgb, var(--accent) 20%, transparent);             /* the box's focus ring */
  --dd-ring-soft: color-mix(in srgb, var(--text) 12%, transparent);          /* the current pip's halo */
  --dd-amber-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --dd-teal-soft: color-mix(in srgb, var(--good) 14%, transparent);
  --dd-gl: max(16px, env(safe-area-inset-left, 0px));                        /* side gutters that clear a phone's insets */
  --dd-gr: max(16px, env(safe-area-inset-right, 0px));
  --dd-ease-sheet: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- The shell ---------- */
html.dd-locked, html.dd-locked body { overflow: hidden; overscroll-behavior: none; }
html.dd-locked .site-footer { display: none; }   /* its lines are at the end of the Briefing and Result tabs */
.dd-shell { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 20; display: grid; grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden; background: var(--ground); color: var(--text); font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
.dd-ui *, .dd-ui *::before, .dd-ui *::after { box-sizing: border-box; }
/* The classic phone page orders its one column with `order` (app.css); the tabs are laid out in document order. */
.dd-ui .dd-pad > *, .dd-ui .dd-stack > *, .dd-ui .dd-story > *, .dd-ui .dd-sheet__body > * { order: 0; }
:where(.dd-ui) button { font: inherit; color: inherit; cursor: pointer; }
:where(.dd-ui) button:disabled { cursor: default; }
/* DECISIONS #294: ENTER THE ROOM closed by the daily player cap; the note under it says why on a tap */
.dd-cta.is-closed { opacity: .5; cursor: not-allowed; }
.dd-cta-note.is-closed { color: var(--accent); }
.dd-ui :focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.dd-ui [tabindex="-1"]:focus-visible { outline: none; }   /* DECISIONS #367: no ring where only a script focuses */

/* The tab strip: four tabs sharing its width, the open one underlined in amber; RESULT dimmed until the run is over and
   ACCOUNT for a guest, all of them while a turn resolves (`is-busy`). ACCOUNT, and FRIEND or SHARED in its place, open
   in the player's teal (DECISIONS #301, #367; the back arrow of #341 is gone). */
.dd-tabs { display: flex; padding: env(safe-area-inset-top, 0px) var(--dd-gr) 0 var(--dd-gl); border-bottom: 1px solid var(--line); background: var(--ground); }
.dd-tab { flex: 1 1 0; min-height: 46px; margin-bottom: -1px; padding: 0 4px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .12em; }
.dd-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.dd-tab--account.is-active, .dd-tab--friend.is-active, .dd-tab--shared.is-active { color: var(--good); border-bottom-color: var(--good); }
.dd-tab[aria-disabled="true"], .dd-tabs.is-busy .dd-tab { opacity: .4; cursor: default; }
.dd-tab:focus-visible { outline-offset: -4px; }
.dd-tablist { display: contents; }

/* The screens: stacked; the hidden ones keep their layout and scroll position (visibility, and `inert` in the DOM). */
.dd-screens { position: relative; min-height: 0; }
.dd-screen { position: absolute; inset: 0; display: grid; min-height: 0; }
.dd-screen.is-off { visibility: hidden; }
.dd-run { grid-template-rows: auto minmax(0, 1fr) auto; }
.dd-brief, .dd-result { grid-template-rows: minmax(0, 1fr) auto; }
/* Positioned, so a visually hidden span (absolutely positioned) deep in a tab's content is contained and clipped by the
   tab's own scroll instead of escaping to the screen and giving the shell something to scroll. */
.dd-scroll { position: relative; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

/* ---------- The status bar (the Run tab) ---------- */
/* Four columns that never overlap (DECISIONS #287): the turn and HP columns are as wide as their pips at least and
   their labels at most, the NPC takes what is left (its name clipped with an ellipsis on a narrow phone), the menu
   button keeps its 38 px. */
.dd-hud { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(120px, max-content) minmax(64px, max-content) minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 8px var(--dd-gr) 8px var(--dd-gl); background: var(--ground); border-bottom: 1px solid var(--line); }
.dd-hcol { display: grid; gap: 6px; min-width: 0; overflow: hidden; }
.dd-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dd-hud .dd-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dd-hud__turn { display: flex; align-items: center; }
.dd-hud__clock { display: inline-flex; align-items: center; }
.dd-hud .run__clock { padding: 0; border: 0; gap: 3px; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--muted); }
.dd-hud .run__clock-icon { width: 11px; height: 11px; }
.dd-hud .run__clock-time { color: var(--text-soft); }
.dd-hud .run__clock--paused .run__clock-time { color: var(--muted); }
.dd-pips { display: flex; gap: 8px; align-items: center; height: 12px; }
/* A pip's button is a 24 x 25 px target (WCAG 2.2 target size) drawn around the 16 x 7 pip: the pips sit 8 px apart. */
.dd-pipbtn { display: inline-flex; min-height: 0; padding: 9px 4px; margin: -9px 0; border: 0; border-radius: 4px; background: none; }
.dd-pips:has(.dd-pipbtn) { gap: 0; }
/* The page's pips (meter.js's classes and colours), smaller: success teal, fail amber outline, auto muted, the current
   one in --text with a halo, unused --line; HP in --text, a lost pip --line, flashing --hurt when it goes. */
.dd-pips .pip { display: block; width: 16px; height: 7px; border-radius: 3px; }
.dd-pips .pip--fail { border-width: 1.5px; }
.dd-pips .pip--current { box-shadow: 0 0 0 3px var(--dd-ring-soft); }
.dd-pips .pip--hp-lost.is-lost { animation: dd-lost .7s ease 3; }
@keyframes dd-lost { 50% { background: var(--hurt); } }
.dd-npcbtn { display: grid; gap: 5px; justify-items: start; min-width: 0; max-width: 100%; min-height: 0; overflow: hidden; padding: 0; border: 0; background: none; text-align: left; }
.dd-mood { max-width: 100%; padding: 4px 7px; border-radius: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-mood.is-calm { color: var(--good); background: var(--dd-teal-soft); }
.dd-mood.is-warn { color: var(--accent); background: var(--dd-amber-soft); }
.dd-mood.is-flash { animation: dd-flash .6s ease 3; }
@keyframes dd-flash { 50% { filter: brightness(1.7); } }
.dd-iconbtn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 19px;
  border: 1px solid var(--dd-line-2); background: none; color: var(--text-soft); }
.dd-iconbtn svg { width: 18px; height: 18px; }

/* ---------- The story (the Run tab) ---------- */
.dd-storywrap { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.dd-story { position: relative; padding: 14px var(--dd-gr) 20px var(--dd-gl); overflow-anchor: none; scroll-snap-type: none; }
.dd-story:focus-visible { outline-offset: -2px; }
.dd-runhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 0 4px; }
.dd-runhead__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 15px; line-height: 1; letter-spacing: .5px; }
.dd-runhead__sub { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.35; color: var(--muted); text-align: right; }
.dd-story .run__log { padding: 0; gap: 20px; }
.dd-story .showrunner { margin-top: 14px; }
.dd-story .showrunner--later { margin-top: 0; }
.dd-ui .showrunner__label { font-size: 11px; letter-spacing: .14em; }
.dd-ui .showrunner__text { font-size: 17px; line-height: 1.5; }
.dd-ui .turn { gap: 10px; padding-top: 18px; }
.dd-ui .turn__label { font-size: 10.5px; letter-spacing: .14em; }
.dd-ui .bubble { padding: 10px 14px; border-radius: 12px; font-size: 17px; line-height: 1.4; }
.dd-ui .dice { gap: 6px; font-size: 12px; }
.dd-ui .narration { font-size: 17px; line-height: 1.55; }
.dd-ui .tags { gap: 6px; font-size: 11.5px; }
.dd-ui .tag { padding: 5px 8px; }

/* The room card: the scene card with the objective inside its body (common.js roomCard). */
.dd-ui .dd-roomcard { border-radius: 16px; }
.dd-ui .scene-card__body { padding: 12px 14px 14px; gap: 6px; }
.dd-ui .room-title { font-size: 22px; line-height: 1.05; letter-spacing: .01em; text-wrap: balance; }
.dd-ui .room-tagline { font-size: 16px; line-height: 1.45; }
.dd-ui .chip--holiday, .dd-ui .chip--changed { margin-bottom: 2px; }
.dd-eyebrow { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dd-objective { display: grid; gap: 3px; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--raised); }
.dd-objective__text { font-size: 16px; font-weight: 600; line-height: 1.35; }
.dd-objective__hint { font-size: 14.5px; line-height: 1.4; color: var(--text-soft); }
.dd-sheet .dd-roomcard .room-title { display: none; }   /* the sheet's own title names the room */

/* The overlays on the story: the jump pill and the item tip. */
.dd-jump { position: absolute; bottom: 12px; left: 50%; z-index: 4; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  height: 34px; min-height: 34px; padding: 0 14px 0 11px; border-radius: 17px; border: 1px solid var(--dd-line-2); background: var(--dd-overlay);
  box-shadow: var(--dd-shadow); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1; color: var(--text); white-space: nowrap; }
.dd-jump svg { width: 14px; height: 14px; color: var(--accent); }
.dd-tip { position: absolute; bottom: 12px; left: var(--dd-gl); right: var(--dd-gr); z-index: 4; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--dd-line-2); background: var(--dd-overlay); box-shadow: var(--dd-shadow); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--text-soft); }
.dd-tip b { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; font-style: normal; line-height: 1; letter-spacing: .06em; color: var(--accent); }

/* ---------- The dock: the run panel's input block as a chat's box ---------- */
.dd-dock { position: relative; z-index: 3; border-top: 1px solid var(--line); background: var(--surface); }
.dd-dock .run__input { position: static; z-index: auto; display: grid; gap: 8px; margin: 0; padding: 8px var(--dd-gr) calc(10px + env(safe-area-inset-bottom, 0px)) var(--dd-gl);
  border: 0; border-radius: 0; background: var(--surface); }
/* The prompt label and the hint stay for assistive tech (the label names the box, the hint describes it). */
.dd-dock .run__prompt-row, .dd-dock .run__foot .hint { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dd-dock .run__foot { display: flex; justify-content: flex-end; gap: 0; min-height: 0; }
.dd-dock .run__foot:not(:has(.run__count:not([hidden]))) { display: none; }   /* only the 280 count shows in it */
.dd-dock .run__count { margin: 0; font-size: 11px; }
.dd-kitrow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--dd-gl)); margin-right: calc(-1 * var(--dd-gr)); padding-left: var(--dd-gl); padding-right: var(--dd-gr); }
.dd-kitrow::-webkit-scrollbar { display: none; }
.dd-kit { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 11px 0 9px; border-radius: 16px;
  border: 1px solid var(--dd-line-2); background: var(--raised); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.dd-kit .icon, .dd-kit .icon svg, .dd-kit > svg { width: 16px; height: 16px; color: var(--accent); }
.dd-kit.is-ghost { background: none; color: var(--text-soft); }
.dd-kit.is-ghost svg { color: var(--good); }
.dd-kit:disabled { opacity: .45; }
.dd-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
/* 16 px type: iOS Safari zooms the page when a smaller field takes focus. The box grows with the sentence (run.js). */
.dd-dock .textarea { display: block; width: 100%; height: auto; min-height: 48px; max-height: 132px; padding: 12px 14px; resize: none; border-radius: 14px;
  border: 1.5px solid var(--accent); background: var(--ground); color: var(--text); font-size: 16px; line-height: 1.4; }
.dd-dock .textarea:focus, .dd-dock .textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dd-ring); }
.dd-dock .textarea::placeholder { color: var(--muted); font-style: italic; }
.dd-dock .textarea:disabled { border-color: var(--dd-line-2); color: var(--text-soft); }
.dd-dock .dd-roll { height: 48px; min-height: 48px; padding: 0 16px; border-radius: 14px; font-size: 15px; line-height: 1; letter-spacing: .03em; }
/* Run over: the panel's ended block as the full-width CTA (SEE HOW YOU DID) with its line under it; once the result
   has been seen the line stands alone, centred (DECISIONS #287). */
.dd-dock .run__ended { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 7px; margin: 0; padding: 10px var(--dd-gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--dd-gl); border: 0; background: var(--surface); }
.dd-dock .run__ended .hint { order: 2; justify-self: center; text-align: center; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; }
.dd-dock .run__ended .btn-primary { order: 1; width: 100%; justify-self: stretch; }

/* ---------- Buttons and bars ---------- */
.dd-ctabar { display: grid; gap: 7px; padding: 10px var(--dd-gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--dd-gl); border-top: 1px solid var(--line); background: var(--surface); }
.dd-ui .dd-cta { width: 100%; height: 52px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--accent); color: var(--ground);
  font-family: var(--font-display); font-size: 17px; font-weight: 400; line-height: 1; letter-spacing: .03em; }
.dd-ui .dd-cta:hover { background: var(--accent-hover); }
.dd-ui .dd-cta:disabled { opacity: .5; cursor: default; }
.dd-ui .dd-cta.is-alt { height: 44px; min-height: 44px; border: 1px solid var(--dd-line-2); background: none; color: var(--text); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.dd-ui .dd-cta.is-alt:hover { border-color: var(--muted); background: none; }
.dd-cta-note { text-align: center; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; color: var(--muted); }

/* ---------- Sheets (over the shell, appended to the body by sheets.js) ---------- */
.dd-scrim { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: flex-end; background: var(--scrim);
  color: var(--text); font-family: var(--font-body); animation: dd-fade .2s ease both; }
@keyframes dd-fade { from { opacity: 0; } }
.dd-sheet { position: relative; max-height: 88%; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--dd-gr) calc(24px + env(safe-area-inset-bottom, 0px)) var(--dd-gl);
  border: 1px solid var(--dd-line-2); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--surface); animation: dd-up .26s var(--dd-ease-sheet) both; }
@keyframes dd-up { from { transform: translateY(100%); } }
.dd-sheet__grab { width: 42px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: var(--dd-line-2); }
.dd-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dd-sheet__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.1; letter-spacing: .5px; }
.dd-stack { display: grid; gap: 10px; }
.dd-menuitem { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised);
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1.2; text-align: left; }
.dd-menuitem.is-danger { color: var(--accent); }
.dd-menurow { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 4px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.dd-confirm { display: grid; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--accent); background: var(--dd-amber-soft); }
.dd-confirm p { margin: 0; font-size: 15.5px; line-height: 1.4; }
.dd-confirm p:focus-visible { outline-offset: 4px; }
.dd-confirm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dd-btn { height: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--dd-line-2); background: var(--raised); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.dd-btn.is-hot { border-color: var(--accent); background: var(--accent); color: var(--ground); }

/* ---------- The Briefing and Result tabs ---------- */
.dd-pad { display: grid; gap: 14px; align-content: start; padding: 14px var(--dd-gr) 20px var(--dd-gl); }   /* 20 px under the footer's last line (DECISIONS #338; 28 before) */
.dd-brand { display: flex; align-items: center; gap: 12px; }
.dd-brand__logo { flex: none; display: block; width: 42px; height: 42px; }
.dd-brand__text { min-width: 0; }
.dd-brand__name { font-family: var(--font-display); font-size: 21px; line-height: 1; letter-spacing: 1px; color: var(--accent); }
.dd-brand__sub { margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.3; color: var(--text-soft); }
.dd-brand .dd-iconbtn { margin-left: auto; }
.dd-ui .chip-practice { justify-self: start; }
.dd-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--raised); color: var(--text);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.dd-pill em { margin: 0 4px; font-style: normal; color: var(--accent); }
.dd-pill.is-line { border: 1px solid var(--dd-line-2); background: none; }
.dd-brief .showrunner { padding: 0 2px; }
.dd-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.dd-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dd-card__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 15px; line-height: 1.1; letter-spacing: .5px; }
.dd-ui .kit__body { gap: 12px; padding-top: 0; }
.dd-ui .kit__calling { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.dd-ui .item { gap: 12px; }
.dd-ui .item__icon { width: 38px; height: 38px; border-radius: 10px; }
.dd-ui .item__name { font-size: 16.5px; line-height: 1.25; }
.dd-ui .item__flavor { font-size: 14.5px; line-height: 1.35; color: var(--text-soft); }
.dd-ui .item__use { flex: none; margin-left: auto; height: 32px; min-height: 32px; padding: 0 12px; border-radius: 16px; border-color: var(--dd-line-2); color: var(--accent); font-size: 12px; }
.dd-ui .stats { gap: 6px; padding-top: 0; }
.dd-ui .stat { padding: 8px 0; border-radius: 10px; }
.dd-ui .stat__label { font-size: 10px; letter-spacing: .08em; }
.dd-ui .stat__value { margin-top: 5px; font-size: 18px; line-height: 1; }
.dd-ui .panel { gap: 10px; padding: 14px; border-radius: 16px; }
.dd-ui .panel__head { gap: 6px; }
.dd-ui .panel__title { font-size: 15px; line-height: 1.1; }
.dd-ui .echo { gap: 6px; padding: 10px 12px; border-radius: 10px; }
.dd-ui .echo__label { font-size: 11px; }
.dd-ui .echo__text { font-size: 15.5px; }
.dd-ui .tiles { gap: 8px; }
.dd-ui .tile { padding: 10px 12px; border-radius: 10px; }
.dd-ui .tile__label { font-size: 10.5px; letter-spacing: .1em; }
.dd-ui .tile__value { margin-top: 7px; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1; }
.dd-ui .today__line { font-size: 15.5px; line-height: 1.45; color: var(--text); }
.dd-ui .panel--friends { gap: 6px; }
.dd-ui .friends__list { gap: 0; }   /* the rows' own rules keep them apart */
.dd-ui .friend, .dd-ui .request { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dd-ui .friends__me { padding-top: 10px; border-top: 0; }
.dd-ui .friends__me .btn-ghost { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; font-size: 13px; }
.dd-ui .friends__guest { gap: 10px; }
/* DECISIONS #338: the footer's lines close together: the motto, then the small-print rows 28 px apart, each link's
   hit box its own row (28 px, over WCAG 2.5.8's 24 px minimum; the 44 px rows before had left 35 px of air between
   every two lines), and the scroll pad's end 20 px under the last one. */
.dd-foot { display: grid; gap: 0; justify-items: center; padding: 2px 0 0; text-align: center; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--muted); }
.dd-foot i { padding-bottom: 4px; font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.4; color: var(--text-soft); }
.dd-foot a { display: inline-flex; align-items: center; min-height: 28px; color: var(--muted); text-decoration: none; }
.dd-foot a:hover, .dd-foot__donate:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.dd-foot__donate { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; letter-spacing: inherit; }
.dd-foot__donate .icon, .dd-foot__donate .icon svg { width: 14px; height: 14px; }

/* The Result tab: the recap's parts (screens/recap.js) as a page. */
/* The top of the Result tab (DECISIONS #287, the handoff's result screen): the headline, the Showrunner's verdict as
   one italic line under it, the turn tiles (app.css), then the Streak and Next dungeon pills. The mono subline stays
   for a reader (the turns, the time); the time is in the brand row's line. */
/* DECISIONS #324: the keeper's medallion beside the headline and the subline (on the screen again, as the mockup
   shows it; off it since #287), the keeper's line under them, the verdict last; the block reads left to right. */
.dd-outcome { display: grid; gap: 8px; justify-items: stretch; padding: 8px 0 2px; text-align: left; }
.dd-ui .recap__headline { margin: 0; font-weight: 400; font-size: 34px; line-height: 1; text-wrap: balance; }
.dd-ui .recap__subline { margin: 0; padding-top: 4px; font-size: 13px; }
.dd-outcome .recap__top { gap: 12px; }
.dd-outcome .medallion { width: 72px; height: 76px; }
.dd-outcome .recap__keeper { padding-top: 2px; }
.dd-outcome .recap__verdict-text { max-width: none; margin: 0; font-style: italic; font-size: 16.5px; line-height: 1.45; color: var(--text-soft); }
.dd-outcome .recap__verdict-text--pending { color: var(--muted); }
.dd-outcome .recap__dare { margin-top: 0; }             /* DECISIONS #383: the dare settled, in the outcome's grid */
.dd-result .recap__receipt { text-align: left; padding: 0 2px; }
.dd-ui .invite__signup { min-height: 44px; }
.dd-result .recap__shield { text-align: left; padding: 0 2px; }   /* DECISIONS #385 */
.dd-ui .encore__play, .dd-ui .recap__addfriend { min-height: 44px; }
.dd-ui .dd-recap { padding-top: 0; }
.dd-ui .recap__tiles { gap: 8px; }
.dd-ui .recap__tiles--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-ui .recap__tile { padding: 12px 10px; }
.dd-ui .wall { gap: 8px; }
.dd-ui .wall__open { min-height: 44px; }
/* How was today's room? (DECISIONS #320): the row under the tiles; the note box at 16 px so iOS does not zoom. */
.dd-ui .feedback { gap: 10px; }
.dd-ui .feedback__note { font-size: 16px; }
/* The scoring card closed is one 44 px row, its title centred in the toggle's touch height, no space under it. */
.dd-ui .score-card { width: auto; margin: 0; padding: 4px 14px; border-radius: 16px; }
.dd-ui .score-card:not(.score-card--collapsed) { padding-bottom: 14px; }
.dd-ui .score-card__toggle { align-items: center; }
.dd-ui .recap__shared { padding: 12px 14px; }
.dd-ui .recap__again { gap: 0; }
.dd-ui .btn-share.dd-cta, .dd-ui .btn-again.dd-cta { border-radius: 14px; }

/* ---------- The ACCOUNT / FRIEND tab (DECISIONS #301): the profile view in a scrolling tab, one column ---------- */
.dd-account { grid-template-rows: minmax(0, 1fr); }
.dd-ui .profile { gap: 14px; padding: 0; border: 0; border-radius: 0; background: none; }
.dd-ui .profile__head { gap: 12px; padding-bottom: 12px; }
.dd-ui .profile__avatar { width: 52px; height: 52px; border-radius: 12px; font-size: 22px; }
.dd-ui .profile__handle { font-size: 24px; }
.dd-ui .profile__since { font-size: 14px; }
.dd-ui .profile__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dd-ui .profile__main, .dd-ui .profile__side { gap: 14px; }
.dd-ui .profile__stats { padding: 12px 10px; }
.dd-ui .profile__stat { gap: 5px; padding: 0 10px; }
.dd-ui .profile__stat:first-child { padding-left: 2px; }
.dd-ui .profile__stat-value { font-size: 26px; }
.dd-ui .profile__stat-value small { font-size: 11px; }
.dd-ui .profile__stat-sub { font-size: 11px; }
.dd-ui .profile__strip { flex-wrap: nowrap; gap: 6px; }
.dd-ui .dg { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 2px; border-radius: 9px; font-size: 15px; }
.dd-ui .dg__day--long { display: none; }
.dd-ui .dg__day--short { display: inline; }
.dd-ui .dg--small { flex: none; min-width: 36px; height: 36px; font-size: 13px; }
.dd-ui .profile__cols { display: none; }
.dd-ui .profile__cols-meta { display: inline; }
.dd-ui .archive-row.profile-row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "num medal text score" "num medal result score"; gap: 2px 10px; padding: 10px 12px; }
.dd-ui .profile-row__medallion { grid-area: medal; align-self: center; }   /* DECISIONS #343: beside the room's name */
.dd-ui .profile-row__who { display: contents; }
.dd-ui .profile-row__num { grid-area: num; align-self: center; }
.dd-ui .profile-row__text { grid-area: text; }
.dd-ui .profile-row__turns { display: none; }
.dd-ui .profile-row__result { grid-area: result; }
.dd-ui .profile-row__score { grid-area: score; align-self: center; }
.dd-ui .profile-row__verdict { margin-left: 0; }
.dd-ui .profile__escape-value { font-size: 20px; }
.dd-ui .profile__row { padding: 10px 12px; }
.dd-ui .profile__delete-card { padding: 12px; }