/* Are You Serious? — direction 2b "Aero + XP"
   One :root block. Names in the first group are the ones requested in DESIGN_CONTEXT §8;
   everything after "— new —" is additional and named in the same style. */
:root {
  /* colour */
  --c-bg: #3A6EA5;          /* desktop blue, shows under/before the wallpaper */
  --c-fg: #000000;
  --c-muted: #333333;       /* secondary text on window body (10:1 on --c-surface) */
  --c-line: #D0D0BF;        /* group-box borders */
  --c-surface: #ECE9D8;     /* window body */
  --c-surface-2: #FFFFFF;   /* text field, share preview, progress track */
  --c-accent: #2E8B2E;      /* Copy button base green */
  --c-wyr-a: #2BC23B;       /* both WYR bars are progress green: the options are neutral buttons */
  --c-wyr-b: #2BC23B;
  --c-fuck: #C8401F;        /* role tag bg, white text 5.0:1 */
  --c-marry: #0058EE;       /* role tag bg, white text 5.5:1 */
  --c-kill: #333333;        /* role tag bg, white text 12:1 */
  --c-focus: #F8B330;       /* orange inner glow, also used on hover */
  --c-error: #A8311A;       /* 5.4:1 on --c-surface */

  /* — new — window chrome */
  --c-frame: #0055E5;
  --g-titlebar: linear-gradient(180deg, #0A97FF 0%, #0058EE 9%, #0055EB 45%, #0A66F5 88%, #0062F2 94%, #003FD8 100%);
  --c-titlebar-fg: #FFFFFF;
  --c-titlebar-shadow: #0A1883;
  --g-close: linear-gradient(180deg, #EE8B6C, #C8401F);
  --g-minimize: linear-gradient(180deg, #5A9BFF, #1E5FD6);
  --shadow-window: 2px 3px 10px rgba(0, 0, 0, .35);

  /* — new — buttons */
  --c-btn-border: #003C74;
  --g-btn: linear-gradient(180deg, #FFFFFF 0%, #F3F2EE 55%, #DCD7CC 100%);
  --g-btn-pressed: linear-gradient(180deg, #DEDCD3 0%, #F4F3EE 80%, #FFFFFF 100%);
  --c-btn-ring: #6D9FE4;    /* picked answer + enabled default (Confirm) */
  --c-hover-top: #FDD889;
  --c-hover-side: #FBC761;
  --shadow-hover: inset 0 -2px 0 var(--c-focus), inset 0 2px 0 var(--c-hover-top), inset 2px 0 0 var(--c-hover-side), inset -2px 0 0 var(--c-hover-side);
  --c-disabled-fg: #ACA899;
  --c-disabled-border: #C9C7BA;
  --c-disabled-face: #F5F4EA;

  /* — new — widgets */
  --c-progress: #2BC23B;
  --c-progress-border: #686868;
  --g-progress: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%), repeating-linear-gradient(90deg, var(--c-progress) 0 7px, transparent 7px 9px);
  --c-field-border: #7F9DB9;
  --c-groupbox-label: #0046D5;  /* 6.1:1 on --c-surface */
  --c-tip-bg: #FFFFE1;
  --c-tip-border: #000000;
  --shadow-tip: 2px 2px 4px rgba(0, 0, 0, .3);
  --c-price: #1E6B1E;           /* results $ amount, 5.4:1 */

  /* — new — results taskbar */
  --g-taskbar: linear-gradient(180deg, #3168D5 0%, #4993E6 4%, #2157D7 9%, #2663E0 88%, #1941A5 100%);
  --c-taskbar-edge: #0C37A0;
  --g-copy: linear-gradient(180deg, #5FB85F 0%, #3C9E3C 12%, #2E8B2E 50%, #328F32 88%, #2A7A2A 100%);
  --g-copy-pressed: linear-gradient(180deg, #226722 0%, #2A7A2A 45%, #2E8B2E 90%, #3C9E3C 100%); /* added: pressed */
  --g-copy-hover: linear-gradient(180deg, #72C872 0%, #48AE48 12%, #389A38 50%, #3C9E3C 88%, #338A33 100%);
  --c-copy-text-shadow: #1A4A1A;
  --g-tray: linear-gradient(180deg, #1A74D2, #0B52A8);   /* white 11px text ≥4.7:1 */
  --c-tray-edge: #092E51;

  /* — new — wallpaper (only the matching one is downloaded, see README §Assets) */
  --wallpaper: url("/assets/wallpaper-portrait.webp");

  /* type — system fonts only, 0 KB */
  --font: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  --font-display: "Trebuchet MS", Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --fs-xs: 11px;    /* tray label */
  --fs-sm: 12px;    /* counter, group-box labels, role labels, share preview */
  --fs-md: 13px;    /* body text, balloons, "or" */
  --fs-lg: clamp(20px, min(7.2vw, 4.6svh), 28px);   /* answer buttons */
  --fs-xl: clamp(26px, min(9.5vw, 6svh), 36px);     /* screen titles */
  --fs-hero: clamp(44px, 15vw, 58px);               /* results price */
  --fs-question: clamp(18px, min(7vw, 4.4svh), 28px); /* new: Price question sentence (≤85 chars) */
  --fs-heading: clamp(28px, 10vw, 38px);            /* new: results "Are You Serious?" */
  --fs-pick: clamp(22px, 7.5vw, 28px);              /* new: results WYR short form */
  --fs-item: 19px;                                  /* new: results FMK items */
  --fs-titlebar: 13px;                              /* new */
  --fs-copy: 21px;                                  /* new: Copy button, italic */
  --fw-normal: 400;
  --fw-bold: 700;
  --lh-tight: 1.05;
  --lh-body: 1.35;

  /* space & shape */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 16px;
  --radius: 4px;                      /* buttons, group boxes */
  --radius-window: 8px 8px 0 0;       /* new */
  --radius-balloon: 7px;              /* new */
  --radius-copy: 4px 16px 16px 4px;   /* new */
  --radius-tag: 12px;                 /* new: FMK role pills */
  --col-max: 480px;
  --tap-h: 56px;
  --border: 1px solid var(--c-btn-border);
  --titlebar-h: 28px;                 /* new: 26px on the answer window */
  --frame-w: 3px;                     /* new */
  --field-h: 48px;                    /* new */

  /* motion */
  --t-advance: 0ms;          /* rounds hard-cut, like a new window opening */
  --t-reveal-hold: 1800ms;   /* from reveal start to advance, includes the bar fill */
  --t-assign: 0ms;           /* FMK role tag appears instantly */
  --t-toast: 1600ms;         /* "Copied to clipboard" label duration */
  --ease: linear;
  --t-fill: 900ms;           /* new: progress bars */
  --ease-fill: steps(12, end); /* new: chunky fill */
  --t-marquee: 1200ms;       /* new: loading bar loop */
  --t-saving: 750ms;         /* added after handoff: the "saving" dialog after each answer */
  --ease-saving: steps(10, end);
  --t-copy-fly: 450ms;       /* one page's trip between the folders */
}

@media (min-width: 700px) {
  :root { --wallpaper: url("/assets/wallpaper-wide.webp"); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fill: 0ms; --t-marquee: 0ms; }
}

/* ========================================================================
   Components and screens — docs/handoff (design direction 2b "Aero + XP").
   Tokens above are the handoff's tokens.css verbatim (asset paths made absolute).
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font: var(--fs-md)/var(--lh-body) var(--font);
}
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* iOS ignores background-attachment: fixed, so the wallpaper is its own fixed layer */
.wall { position: fixed; inset: 0; background: var(--wallpaper) center / cover no-repeat; z-index: 0; }

.col {
  position: relative;
  z-index: 1;
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 10px 10px calc(22px + env(safe-area-inset-bottom));
}

/* ---- screens: one visible at a time ---- */
.screen { display: none; }
:root[data-screen="loading"] [data-role="screen-loading"],
:root[data-screen="error"] [data-role="screen-error"],
:root[data-screen="play"] [data-role="screen-play"],
:root[data-screen="results"] [data-role="screen-results"] { display: flex; }

/* play screens: one viewport, never scroll. --vvh follows the visual viewport (keyboard) */
:root[data-screen="loading"] .col,
:root[data-screen="error"] .col,
:root[data-screen="play"] .col { height: var(--vvh, 100svh); overflow: hidden; }
.screen--fit { flex-direction: column; gap: 8px; height: 100%; }
.spacer { flex: 1 1 0; min-height: 0; }

/* ---- icons (data URIs appended at the end of this file) ---- */
.i { display: inline-block; flex: none; width: 16px; height: 16px; background: center / contain no-repeat; }
.i--14 { width: 14px; height: 14px; }
.i--32 { width: 32px; height: 32px; }

/* ---- window ---- */
.window {
  display: flex;
  flex-direction: column;
  flex: none;
  background: var(--c-frame);
  padding: 0 var(--frame-w) var(--frame-w);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
}
.titlebar {
  height: var(--titlebar-h);
  margin: 0 calc(-1 * var(--frame-w));
  padding: 0 4px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px 7px 0 0;
  background: var(--g-titlebar);
  font: 700 var(--fs-titlebar)/1 var(--font-display);
  color: var(--c-titlebar-fg);
  text-shadow: 1px 1px 0 var(--c-titlebar-shadow);
}
.titlebar--small { height: 26px; }
.titlebar .i-app { width: 14px; height: 14px; }
.titlebar__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar__ctrls { display: flex; gap: 2px; pointer-events: none; }
.titlebar__ctrls .i { width: 21px; height: 21px; }
.window__body {
  background: var(--c-surface);
  padding: 10px 12px 12px;
  font: var(--fs-md)/var(--lh-body) var(--font);
  color: var(--c-fg);
}
.window__foot { background: var(--c-surface); padding: 0 12px 12px; }

.counter { font-size: var(--fs-sm); color: var(--c-muted); }
.kicker { font: 700 13px/var(--lh-body) var(--font); margin-top: 4px; }
.title { margin-top: 4px; font: 700 var(--fs-xl)/var(--lh-tight) var(--font-display); }

/* ---- answer button ---- */
.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap-h);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--g-btn);
  padding: 12px 14px;
  text-align: left;
  font: 700 var(--fs-lg)/1.1 var(--font-display);
  color: var(--c-fg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn--answer { flex-direction: column; align-items: stretch; }
.btn__row { display: flex; align-items: center; gap: 8px; }
.btn__text { flex: 1; min-width: 0; }
@media (hover: hover) { .btn:not([aria-disabled="true"]):not(:disabled):hover { box-shadow: var(--shadow-hover); } }
.btn:focus-visible { box-shadow: var(--shadow-hover); outline: 1px dotted #000; outline-offset: -5px; }
.btn:not([aria-disabled="true"]):not(:disabled):active { background: var(--g-btn-pressed); }
.btn[data-state="picked"] { background: var(--g-btn-pressed); box-shadow: inset 0 0 0 2px var(--c-btn-ring); }
.btn[data-state="locked"], .btn:disabled {
  color: var(--c-disabled-fg);
  border-color: var(--c-disabled-border);
  background: var(--c-disabled-face);
  box-shadow: none;
  cursor: default;
}
.btn[aria-disabled="true"] { cursor: default; }

/* default button (Confirm, Try again) */
.btn--default { justify-content: center; text-align: center; height: var(--tap-h); font: 700 18px/1 var(--font-display); }
.btn--default:not(:disabled) { box-shadow: inset 0 0 0 2px var(--c-btn-ring); }
@media (hover: hover) { .btn--default:not(:disabled):hover { box-shadow: var(--shadow-hover); } }

.answers { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; }
.or { text-align: center; font-size: 13px; color: var(--c-muted); }

/* ---- FMK role tag ---- */
.tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: auto;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-tag);
  font: 700 12px/1 var(--font);
  color: #fff;
  text-shadow: none;
}
.tag--f { background: var(--c-fuck); }
.tag--m { background: var(--c-marry); }
.tag--k { background: var(--c-kill); }

/* ---- progress bar ---- */
.progress {
  flex: 1;
  height: 16px;
  border: 1px solid var(--c-progress-border);
  border-radius: 3px;
  background: var(--c-surface-2);
  padding: 1px;
  overflow: hidden;
}
.progress__fill { display: block; height: 100%; width: 0; background: var(--g-progress); transition: width var(--t-fill) var(--ease-fill); }
.bar-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.bar-row__pct { font: 700 14px/1 var(--font); white-space: nowrap; }
.bar-note { margin-top: 4px; font: 12px/1.3 var(--font); color: var(--c-muted); }
.btn--answer .bar-row { margin-top: 6px; }
/* last step of the fit rule, reveal only (buttons are non-interactive then, so the 56px
   tap height doesn't apply): tighter buttons, no counter or kicker */
[data-compact] .btn { min-height: 0; padding: 6px 12px; }
[data-compact] .counter, [data-compact] .kicker { display: none; }
[data-compact] .title { margin-top: 0; }
[data-compact][data-round="fmk"] .btn .bar-row { display: none; } /* the note line already carries the % */

/* loading marquee: three 7px chunks sliding across */
.progress--marquee { margin-top: 8px; flex: none; position: relative; }
.marquee {
  position: absolute; top: 1px; bottom: 1px; left: 1px; width: 25px;
  background: repeating-linear-gradient(90deg, var(--c-progress) 0 7px, transparent 7px 9px);
  animation: marquee var(--t-marquee) linear infinite;
}
@keyframes marquee { from { transform: translateX(-25px); } to { transform: translateX(calc(var(--col-max))); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* show loading only after 300ms so fast loads don't flash */
.window--delayed { animation: appear 0s 300ms both; }
@keyframes appear { from { visibility: hidden; } to { visibility: visible; } }

/* ---- balloons ---- */
.balloon-slot { display: flex; flex-direction: column; gap: 6px; }
.balloon {
  align-self: flex-start;
  max-width: 88%;
  background: var(--c-tip-bg);
  border: 1px solid var(--c-tip-border);
  border-radius: var(--radius-balloon);
  padding: 7px 10px;
  font: 12.5px/1.35 var(--font);
  box-shadow: var(--shadow-tip);
}
.balloon--error { display: flex; align-items: flex-start; gap: 6px; }

/* ---- error window ---- */
.error-body { display: flex; align-items: center; gap: 10px; }

/* ---- play rounds ---- */
[data-role="screen-play"] .window--price { display: none; }
[data-role="screen-play"][data-round="price"] .window--main,
[data-role="screen-play"][data-round="price"] .window--answer { display: none; }
[data-role="screen-play"][data-round="price"] .window--price { display: flex; }

/* ---- price ---- */
.price { display: flex; flex-direction: column; gap: 8px; }
.question { font: 700 var(--fs-question)/1.1 var(--font-display); }
.field {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--field-h);
  padding: 0 10px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-field-border);
}
.field:focus-within { box-shadow: 0 0 0 2px var(--c-focus); }
.field__prefix { font: 700 24px/1 var(--font-display); color: var(--c-muted); }
.field input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent; padding: 0;
  font: 700 24px/1 var(--font-display);
}
.invalid { display: flex; align-items: center; gap: 4px; font: 12px/1.3 var(--font); color: var(--c-error); }
/* short visual viewport (keyboard open on a small phone): the tight variant */
:root.vv-short .price { gap: 6px; padding: 8px 12px; }
:root.vv-short .price .counter { display: none; }
:root.vv-short { --fs-question: 18px; }
:root.vv-short .col { padding-top: 8px; padding-bottom: 8px; }

/* ---- results ---- */
.screen--results { flex-direction: column; min-height: calc(100svh - 32px - env(safe-area-inset-bottom)); }
.window--results { flex: 1; }
.window--results .window__body { flex: 1; }
.results { display: flex; flex-direction: column; gap: 16px; padding: 12px 12px 14px; }
.results__title { font: 700 var(--fs-heading)/1 var(--font-display); }
.results__date { margin-top: 4px; font-size: var(--fs-sm); color: var(--c-muted); }
.groupbox { position: relative; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px 10px 10px; }
.groupbox__label {
  position: absolute; top: -8px; left: 8px;
  background: var(--c-surface); padding: 0 4px;
  font: 400 12px/1.3 var(--font); color: var(--c-groupbox-label);
}
.pick { font: 700 var(--fs-pick)/1.1 var(--font-display); }
.bar-row__pct--agreed { font-size: 13px; }
.fmk-rows { display: flex; flex-direction: column; gap: 8px; }
.fmk-row { display: grid; grid-template-columns: 26px 40px 1fr auto; align-items: center; gap: 0 4px; }
.fmk-row__emoji { font-size: 20px; line-height: 1; }
.fmk-row__role { font-size: 12px; color: var(--c-muted); }
.fmk-row__item { font: 700 var(--fs-item)/1.1 var(--font-display); }
.fmk-row__also { font-size: 12px; color: var(--c-muted); text-align: right; white-space: nowrap; }
.amount { font: 700 var(--fs-hero)/1 var(--font-display); color: var(--c-price); overflow-wrap: anywhere; }
.amount__line { margin-top: 4px; font-size: 13px; }
.amount__median { font-size: 13px; color: var(--c-muted); }
.amount__median b { color: var(--c-fg); }
.under50 { font-size: 12.5px; color: var(--c-muted); }
.share__label { font-size: var(--fs-sm); margin-bottom: 4px; }
.share__preview {
  margin: 0;
  background: var(--c-surface-2);
  border: 1px solid var(--c-field-border);
  padding: 8px 10px;
  font: 12px/1.5 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

/* ---- taskbar dock (sticky at the bottom of results) ---- */
.dock {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -10px calc(-22px - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.dock .balloon { margin: 0 0 6px 12px; }
.taskbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) 12px;
  background: var(--g-taskbar);
  border-top: 1px solid var(--c-taskbar-edge);
}
.copy {
  flex: 1;
  height: var(--tap-h);
  border: 0;
  border-radius: var(--radius-copy);
  background: var(--g-copy);
  padding: 0 18px;
  text-align: left;
  font: italic 700 var(--fs-copy)/1 var(--font-display);
  color: #fff;
  text-shadow: 1px 1px 1px var(--c-copy-text-shadow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 2px 0 4px rgba(0, 0, 0, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) { .copy:hover { background: var(--g-copy-hover); } }
.copy:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -4px; }
/* pressed: the gradient flips, the shadow goes inside, the label drops a pixel. It holds
   ([data-pressed]) while the share sheet is open. */
.copy:active, .copy[data-pressed] {
  background: var(--g-copy-pressed);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 255, 255, .15);
  padding-top: 2px;
}
.tray {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 0 12px;
  background: var(--g-tray);
  border-left: 1px solid var(--c-tray-edge);
  color: #fff;
}
.tray__label { font-size: var(--fs-xs); }
.tray__time { font: 700 15px/1.2 var(--font); font-variant-numeric: tabular-nums; }

/* ---- landscape and short screens ---- */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --col-max: 820px; }
  .answers[data-round="wyr"] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .answers[data-round="wyr"] .or { display: none; }
  .answers[data-round="fmk"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (orientation: landscape) and (max-height: 300px) {
  [data-role="screen-play"]:not([data-round="price"]) {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  [data-role="screen-play"]:not([data-round="price"]) .spacer { display: none; }
  [data-role="screen-play"] .window--answer { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- icons, inlined as data URIs (C2PA metadata stripped) ---- */
.i-app { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 14 14%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFE680%22%3E%3C/stop%3E%3Cstop offset=%221%22 stop-color=%22%23F2A91E%22%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%22.5%22 y=%22.5%22 width=%2213%22 height=%2213%22 rx=%223%22 fill=%22url(%23g)%22 stroke=%22rgba(0,0,0,.25)%22%3E%3C/rect%3E%3C/svg%3E"); }
.i-min { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 21%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%235A9BFF%22%3E%3C/stop%3E%3Cstop offset=%221%22 stop-color=%22%231E5FD6%22%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%22.5%22 y=%22.5%22 width=%2220%22 height=%2220%22 rx=%223%22 fill=%22url(%23g)%22 stroke=%22%23fff%22%3E%3C/rect%3E%3Crect x=%226%22 y=%2213%22 width=%228%22 height=%222%22 fill=%22%23fff%22%3E%3C/rect%3E%3C/svg%3E"); }
.i-close { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 21 21%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23EE8B6C%22%3E%3C/stop%3E%3Cstop offset=%221%22 stop-color=%22%23C8401F%22%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%22.5%22 y=%22.5%22 width=%2220%22 height=%2220%22 rx=%223%22 fill=%22url(%23g)%22 stroke=%22%23fff%22%3E%3C/rect%3E%3Cpath d=%22M6.5 6.5l8 8M14.5 6.5l-8 8%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3C/path%3E%3C/svg%3E"); }
.i-error { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%229%22 fill=%22%23D2371A%22 stroke=%22%238C1F0B%22%3E%3C/circle%3E%3Cpath d=%22M6.5 6.5l7 7M13.5 6.5l-7 7%22 stroke=%22%23fff%22 stroke-width=%222.2%22 stroke-linecap=%22round%22%3E%3C/path%3E%3C/svg%3E"); }
.i-info { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%229%22 fill=%22%232A6FDB%22 stroke=%22%2316448F%22%3E%3C/circle%3E%3Crect x=%229%22 y=%228.5%22 width=%222%22 height=%226.5%22 fill=%22%23fff%22%3E%3C/rect%3E%3Ccircle cx=%2210%22 cy=%225.8%22 r=%221.3%22 fill=%22%23fff%22%3E%3C/circle%3E%3C/svg%3E"); }

/* very narrow phones: keep "Copy my picks" whole next to the tray, whatever the fallback font */
@media (max-width: 359px) {
  :root { --fs-copy: 18px; }
  .copy { padding: 0 12px; }
  .tray { padding: 0 8px; }
}

/* ---- "saving" dialog after each answer (added after the handoff, built from its parts) ---- */
.saving {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.saving__window { width: min(300px, 100%); }
.saving__body { display: flex; flex-direction: column; gap: 8px; }
.saving__bar { display: block; flex: none; }

/* XP file-copy animation: two folders, pages arcing from left to right on a loop */
.copyanim { position: relative; height: 40px; container-type: inline-size; }
.copyanim__folder {
  position: absolute; bottom: 0; left: 4px; width: 34px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 34 28%22%3E%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFE9A0%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F0BD45%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M1.5 4.5a2 2 0 0 1 2-2h8l3 3h15a2 2 0 0 1 2 2v3h-30z%22 fill=%22%23E4B040%22 stroke=%22%23A97A1E%22/%3E%3Cpath d=%22M1.5 9.5h31v15a2 2 0 0 1-2 2h-27a2 2 0 0 1-2-2z%22 fill=%22url(%23f)%22 stroke=%22%23A97A1E%22/%3E%3Cpath d=%22M3 11h28%22 stroke=%22%23fff%22 stroke-opacity=%22.7%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.copyanim__folder--to { left: auto; right: 4px; }
.copyanim__page {
  position: absolute; left: 22px; bottom: 14px; width: 12px; height: 15px;
  background: #fff repeating-linear-gradient(180deg, transparent 0 3px, #9DB4D8 3px 4px) 2px 3px / 8px 10px no-repeat;
  border: 1px solid #7F9DB9;
  opacity: 0;
  animation: copy-fly var(--t-copy-fly) linear infinite;
}
.copyanim__page--2 { animation-delay: calc(var(--t-copy-fly) / -2); }
@keyframes copy-fly {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-20deg); }
  10%  { opacity: 1; }
  50%  { transform: translate(calc((100cqw - 56px) / 2), -22px) rotate(0deg); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(100cqw - 56px), 0) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .copyanim__page { animation: none; opacity: 1; left: calc(50% - 7px); bottom: 20px; }
  .copyanim__page--2 { display: none; }
}
.saving__bar .progress__fill { transition: width var(--t-saving) var(--ease-saving); }
@media (prefers-reduced-motion: reduce) {
  .saving__bar .progress__fill { transition: none; }
}

/* ---- legal pages (/terms, /privacy): one scrolling window over the wallpaper ---- */
.legal .col { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.legal__body { padding: 14px 16px 18px; font-size: 14px; line-height: 1.5; }
.legal__body h1 { font: 700 var(--fs-heading)/1.05 var(--font-display); margin: 8px 0 2px; }
.legal__body h2 { font: 700 16px/1.3 var(--font-display); margin: 18px 0 4px; color: var(--c-groupbox-label); }
.legal__body p + p { margin-top: 8px; }
.legal__date { color: var(--c-muted); font-size: var(--fs-sm); }
.legal__body a { color: var(--c-groupbox-label); }

/* small Terms · Privacy links at the foot of the results window */
.legal-links { font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.legal-links a { color: var(--c-muted); }

/* ======================================================================
   Are You Serious+, custom games (added after the handoff; same XP parts)
   ====================================================================== */
:root[data-screen="plus"] [data-role="screen-plus"],
:root[data-screen="make"] [data-role="screen-make"],
:root[data-screen="made"] [data-role="screen-made"] { display: flex; }

.screen--page { flex-direction: column; min-height: calc(100svh - 32px - env(safe-area-inset-bottom)); }
.window--page { flex: 1; }
.window--page .window__body { flex: 1; }
.page { display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 16px; }
.page__title { font: 700 var(--fs-heading)/1 var(--font-display); }
.page__sub { margin-top: 6px; font-size: 13px; color: var(--c-muted); }
.page__part { display: flex; flex-direction: column; gap: 14px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.fine { font-size: 12px; color: var(--c-muted); }
.page .balloon { max-width: 100%; }

.ticks li { position: relative; padding-left: 22px; margin-top: 6px; font-size: 14px; }
.ticks li::before { content: "\2714"; position: absolute; left: 2px; color: var(--c-price); font-weight: 700; }
.plans { display: flex; flex-direction: column; gap: 8px; }
/* the default ring marks the recommended button; the others stay plain */
.btn--default:not(.btn--ready):not(:disabled) { box-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

.field--sm { height: 44px; }
.field--sm input { font: 400 16px/1 var(--font); } /* 16px: iOS doesn't zoom the page on focus */
.field input::placeholder { color: #9A978A; }
.field[data-invalid] { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }

.linkbtn {
  align-self: center;
  border: 0; background: none; padding: 6px;
  font: 13px/1.2 var(--font); color: var(--c-groupbox-label);
  text-decoration: underline; cursor: pointer;
}
.more { display: flex; flex-direction: column; gap: 8px; }
.more-links { text-align: center; font-size: 13px; }
.more-links a { color: var(--c-groupbox-label); }

/* archive rows and pack rounds */
.rows { display: flex; flex-direction: column; gap: 6px; }
.btn--row { min-height: 44px; padding: 8px 12px; font: 400 14px/1.3 var(--font); }
.btn--row[data-done]::after { content: "\2714"; margin-left: auto; color: var(--c-price); font-weight: 700; }
/* packs: square cards, two across on a phone */
.pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pack-card {
  position: relative;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  padding: 10px;
  min-height: 0;
  overflow: hidden;
}
.pack-card__emoji { font-size: 30px; line-height: 1; }
.pack-card__title { font: 700 17px/1.1 var(--font-display); }
.pack-card__blurb {
  font: 400 11.5px/1.3 var(--font); color: var(--c-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pack-card__foot { display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font); color: var(--c-muted); }
.pack-card__foot .bar-row { flex: 1; margin: 0; }
.pack-card__foot .progress { height: 10px; }
.pack-card__badge { position: absolute; top: 8px; right: 8px; font-size: 16px; line-height: 1; }
.pack-card[data-done] .pack-card__badge { color: var(--c-price); font-weight: 700; }

/* the made screen's Copy link: the taskbar's green button, used inline */
.copy--inline { flex: none; width: 100%; border-radius: var(--radius-copy); text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 4px rgba(0, 0, 0, .3); }

/* narrow phones: a square card only has room for the emoji, the name and the count */
@media (max-width: 359px) {
  .pack-card__blurb { display: none; }
  .pack-card__title { font-size: 16px; }
  .pack-card__emoji { font-size: 26px; }
}