/*
 * Arabian-night palette lifted from the character art: lamp gold, hair pink,
 * and the violet smoke she rises out of. Committed dark design — the page is a
 * lamplit room, so there is no light variant.
 */
:root {
  --night: #150e26;
  --night-2: #1e1436;
  --surface: rgba(45, 30, 74, 0.62);
  --surface-solid: #2a1c47;
  --line: rgba(245, 196, 107, 0.18);
  --line-strong: rgba(245, 196, 107, 0.42);

  --fg: #f2ecf8;
  --fg-dim: #b6a9cd;
  --fg-faint: #8579a0;

  --gold: #f5c46b;
  --gold-soft: rgba(245, 196, 107, 0.14);
  --pink: #f19bc0;
  --ink: #2a1f3d;
  --cream: #fdf6e8;

  --nai: #7fe3c6;
  --sd: #f0a868;
  --danger: #ff9a9a;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 48px rgba(8, 4, 18, 0.55);
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--night);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

.hidden { display: none !important; }

/* Lamplight: a warm pool low-left where the genie stands, cool night above. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 18% 88%, rgba(245, 196, 107, 0.16), transparent 62%),
    radial-gradient(55% 45% at 12% 62%, rgba(241, 155, 192, 0.12), transparent 60%),
    radial-gradient(90% 70% at 78% 6%, rgba(126, 106, 214, 0.16), transparent 65%),
    linear-gradient(168deg, var(--night-2), #191130 46%, var(--night));
}

/* Scattered stars, drawn rather than downloaded. */
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 244, 214, 0.9), transparent),
    radial-gradient(1px 1px at 28% 9%, rgba(255, 244, 214, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 46% 24%, rgba(255, 244, 214, 0.55), transparent),
    radial-gradient(1px 1px at 63% 12%, rgba(255, 244, 214, 0.8), transparent),
    radial-gradient(2px 2px at 81% 28%, rgba(255, 244, 214, 0.6), transparent),
    radial-gradient(1px 1px at 92% 15%, rgba(255, 244, 214, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 36% 62%, rgba(255, 244, 214, 0.35), transparent),
    radial-gradient(1px 1px at 88% 58%, rgba(255, 244, 214, 0.4), transparent);
}

/* ── top bar ──────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  border-bottom: 1px solid rgba(245, 196, 107, 0.12);
  background: rgba(21, 14, 38, 0.72);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-mark {
  width: 22px; height: 22px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 35% 30%, #fff2cf, var(--gold) 45%, #b5762a);
  box-shadow: 0 0 14px rgba(245, 196, 107, 0.6);
}

.brand-name {
  font-weight: 650;
  letter-spacing: 0.06em;
  background: linear-gradient(100deg, var(--gold), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar-right { display: flex; align-items: center; gap: 12px; }
.boot-status { color: var(--fg-faint); font-size: 12.5px; }

/* ── stage ────────────────────────────────────────────────────── */
.stage {
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 26px 80px;
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 880px) {
  .stage { grid-template-columns: 300px minmax(0, 1fr); }
  .trail { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .stage { grid-template-columns: 320px minmax(0, 1fr) 262px; }
  .trail { grid-column: auto; }
  /* Nothing found yet, or the answer sheet is face down: don't leave a 262px
     hole where the trail would go. */
  .stage:has(.trail.hidden),
  body[data-reveal="picture"] .stage { grid-template-columns: 320px minmax(0, 1fr); }
}

/* ── genie + speech bubble ────────────────────────────────────── */
.genie-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: sticky;
  top: 92px;
}

.bubble {
  position: relative;
  width: 100%;
  padding: 18px 20px;
  color: var(--ink);
  background: linear-gradient(170deg, #fffdf6, var(--cream));
  border-radius: 20px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(245, 196, 107, 0.5);
  animation: bubble-in 0.42s cubic-bezier(0.2, 1.3, 0.4, 1);
}

/* Tail pointing down at the genie's head. */
.bubble::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 44px;
  width: 26px;
  height: 16px;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 22% 100%);
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.bubble-text {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.72;
}

.bubble-sub {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b5b84;
}
.bubble-sub:empty { display: none; }

.bubble-sub code {
  background: rgba(42, 31, 61, 0.08);
  border-color: rgba(42, 31, 61, 0.14);
  color: #4a3a66;
}

.genie {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  animation: float 6s ease-in-out infinite;
}

.genie img {
  width: 100%;
  max-width: 330px;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 34px rgba(245, 196, 107, 0.22));
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* While a search runs the lamp works harder. */
.genie.is-thinking { animation-duration: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .genie, .bubble { animation: none; }
}

/* Narrow: the genie steps aside and speaks from the left. */
@media (max-width: 879px) {
  .genie-rail {
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    position: static;
  }
  .bubble { flex: 1; }
  .bubble::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: -13px;
    width: 16px;
    height: 24px;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 100% 26%, 0 100%);
  }
  .genie { width: auto; flex: none; }
  .genie img { width: 122px; }
}

/* ── board ────────────────────────────────────────────────────── */
.step-eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-weight: 700;
}

/* ── engine cards ─────────────────────────────────────────────── */
.engine-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.engine-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}

.engine-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(8, 4, 18, 0.5);
}

.engine-card[data-engine="NAI"] .engine-name { color: var(--nai); }
.engine-card[data-engine="SD"] .engine-name { color: var(--sd); }

.engine-name { font-size: 21px; font-weight: 690; }
.engine-sub { font-size: 12.5px; color: var(--fg-faint); letter-spacing: 0.04em; }
.engine-note { margin-top: 12px; font-size: 13px; color: var(--fg-dim); line-height: 1.65; }

/* ── keyword form ─────────────────────────────────────────────── */
.keyword-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 620px; }

.keyword-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 15px 17px;
  font: inherit;
  font-family: var(--mono);
  color: var(--fg);
  background: rgba(12, 7, 24, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.keyword-input::placeholder { color: var(--fg-faint); }

.keyword-input:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.primary-btn {
  padding: 15px 26px;
  font: inherit;
  font-weight: 680;
  color: #2b1c07;
  background: linear-gradient(150deg, #ffdf9e, var(--gold));
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(245, 196, 107, 0.24);
  transition: filter 0.16s, transform 0.16s;
}
.primary-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.ghost-btn {
  padding: 8px 15px;
  font: inherit;
  font-size: 13px;
  color: var(--fg-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}
.ghost-btn:hover { color: var(--gold); border-color: var(--line-strong); }

.field-error { min-height: 1.7em; margin: 12px 0 0; color: var(--danger); font-size: 13px; }

.suggest-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.suggest-label { font-size: 12.5px; color: var(--fg-faint); }

.chip-btn {
  padding: 4px 12px;
  font: inherit;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.chip-btn:hover { color: var(--gold); border-color: var(--line-strong); }

/* ── explore ──────────────────────────────────────────────────── */
.explore-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.explore-head .step-eyebrow { margin: 0; }

/* ── segmented radio group ────────────────────────────────────── */
.segmented {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.segmented legend {
  float: left;              /* keep the label inline with the buttons */
  padding: 0 8px 0 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  line-height: 26px;
}

.segmented label { position: relative; cursor: pointer; }

.segmented input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.segmented span {
  display: block;
  padding: 4px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-faint);
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}

.segmented label:hover span { color: var(--fg-dim); }

.segmented input:checked + span {
  color: var(--ink);
  background: linear-gradient(150deg, #ffdf9e, var(--gold));
  font-weight: 640;
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.query-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 20px; }

.qtag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-dim);
}
.qtag.engine-NAI { color: var(--nai); border-color: color-mix(in srgb, var(--nai) 42%, transparent); }
.qtag.engine-SD { color: var(--sd); border-color: color-mix(in srgb, var(--sd) 42%, transparent); }
.qtag.is-style { color: var(--gold); border-color: var(--line-strong); background: var(--gold-soft); }

.qtag-drop {
  border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; opacity: 0.5; padding: 0 0 0 2px; line-height: 1;
}
.qtag-drop:hover { opacity: 1; color: var(--danger); }

.scope-note { margin: 22px 0 0; font-size: 12px; color: var(--fg-faint); min-height: 1.4em; }

/* Always three across, like the three doors of a riddle — the board column is
   626px at its narrowest, which still leaves ~197px per card. */
.choices {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .choices { grid-template-columns: 1fr; }
}

.choice-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  height: 100%;
  position: relative;   /* so a hovered card can lift above its neighbours */
}

.choice {
  display: flex;
  flex-direction: column;
  flex: 1;               /* equal card heights however the tag pills wrap */
  position: relative;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}

/* A small lift marks which card the pointer is on; the picture itself is
   enlarged by .card-pop, which can honour its real aspect ratio. */
.choice:hover,
.choice:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(8, 4, 18, 0.6);
  z-index: 5;
  outline: none;
}

.choice-wrap:hover { z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .choice:hover, .choice:focus-visible { transform: none; }
}

.choice-figure {
  position: relative;
  aspect-ratio: 3 / 4;
  background: rgba(12, 7, 24, 0.6);
  overflow: hidden;
}

.choice-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.choice:hover .choice-figure img { transform: scale(1.02); }

.choice-rank {
  position: absolute; top: 10px; left: 10px;
  padding: 2px 10px;
  font-family: var(--mono); font-size: 11.5px;
  border-radius: 999px;
  background: rgba(12, 7, 24, 0.76);
  border: 1px solid var(--line);
  color: var(--gold);
  backdrop-filter: blur(4px);
}

.choice-body {
  flex: 1;
  padding: 13px 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
}

.choice-style { display: flex; flex-wrap: wrap; gap: 6px; }

.style-pill {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--gold-soft);
  color: var(--gold);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.style-pill.is-lora {
  border-color: color-mix(in srgb, var(--pink) 46%, transparent);
  background: color-mix(in srgb, var(--pink) 12%, transparent);
  color: var(--pink);
}
.style-pill.is-more { border-color: var(--line); background: transparent; color: var(--fg-faint); }

.choice-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--fg-faint);
}

/* Model names are long and never worth a second line. */
.choice-model {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choice-hearts { flex: none; }

.choice-detail {
  align-self: flex-start;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 12px;
  color: var(--fg-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.choice-detail:hover { color: var(--gold); }

/* ── loader / dead end ────────────────────────────────────────── */
.loader { display: flex; align-items: center; gap: 12px; padding: 40px 0; color: var(--fg-dim); }

.spinner {
  width: 18px; height: 18px; flex: none;
  border: 2px solid rgba(245, 196, 107, 0.22);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dead-end {
  padding: 26px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.dead-end p { margin: 0 0 18px; color: var(--fg-dim); }
.dead-end-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── trail ────────────────────────────────────────────────────── */
.trail {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}

@media (min-width: 1200px) {
  .trail { position: sticky; top: 92px; }
}

.trail-title {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
}

.trail-list {
  margin: 0;
  padding: 0 4px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  /* Each pick contributes every artist in the picture, so the list grows fast. */
  max-height: min(46vh, 420px);
  overflow-y: auto;
}

.trail-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 13px;
}

.trail-list li.is-repeat .trail-name { color: var(--gold); }

/* ×2, ×3 … how many picked pictures leaned on this artist. Placement is left
   to auto-flow: pinning a row would make the badge claim the first column. */
.trail-count {
  justify-self: end;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}

.trail-sub { grid-column: 1 / -1; }

.trail-name {
  min-width: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--fg);
  word-break: break-word;
  line-height: 1.5;
}
.trail-sub { display: block; font-size: 11.5px; color: var(--fg-faint); line-height: 1.5; }

.trail-empty { color: var(--fg-faint); font-size: 13px; }

.trail-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.copy-note { font-size: 12px; color: var(--nai); min-height: 1.3em; }

.copy-preview {
  margin: 0;
  width: 100%;
  max-height: 108px;
  overflow: auto;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg-dim);
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(12, 7, 24, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.copy-preview:empty { display: none; }

/* ── detail dialog ────────────────────────────────────────────── */
.detail {
  width: min(760px, 92vw);
  max-height: 86vh;
  padding: 0;
  color: var(--fg);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.detail::backdrop { background: rgba(8, 4, 18, 0.76); backdrop-filter: blur(4px); }

.detail-close { position: absolute; top: 14px; right: 16px; z-index: 2; background: var(--surface-solid); }

.detail-body { padding: 24px; max-height: 86vh; overflow: auto; }
.detail-body h3 { margin: 0 0 4px; font-size: 17px; padding-right: 90px; }
.detail-body h4 { margin: 22px 0 8px; font-size: 11.5px; letter-spacing: 0.16em; color: var(--gold); }

.detail-prompt {
  margin: 0;
  padding: 14px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(12, 7, 24, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height: 320px;
  overflow: auto;
}

.detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail-table th, .detail-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.detail-table th { color: var(--fg-faint); font-weight: 500; width: 34%; white-space: nowrap; }
.detail-table td { font-family: var(--mono); word-break: break-word; }

/* ── footer ───────────────────────────────────────────────────── */
.footer {
  padding: 26px 24px 40px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-faint);
}
.footer p { margin: 0; }

/* ── hiding the hints ─────────────────────────────────────────────
   The genie's game only works if the cards can be stripped back to the
   picture. Driven by data-reveal on <body> so switching modes needs no
   re-render, and the markup stays identical in every mode.            */

body[data-reveal="no-tags"] .choice-style,
body[data-reveal="no-tags"] .choice-detail,
body[data-reveal="no-tags"] .detail-table,
body[data-reveal="no-tags"] .detail-prompt {
  display: none;
}

body[data-reveal="picture"] .choice-style,
body[data-reveal="picture"] .choice-meta,
body[data-reveal="picture"] .choice-rank,
body[data-reveal="picture"] .choice-detail,
body[data-reveal="picture"] .scope-note,
body[data-reveal="picture"] .query-bar,
body[data-reveal="picture"] .trail,
body[data-reveal="picture"] .detail-table,
body[data-reveal="picture"] .detail-prompt {
  display: none;
}

/* Nothing left under the image — drop the empty strip. */
body[data-reveal="picture"] .choice-body { display: none; }
body[data-reveal="picture"] .choice-figure { aspect-ratio: 4 / 5; }

/* ── round actions ────────────────────────────────────────────────
   Sit under the pictures: you look first, then decide whether to reroll
   or to stop. Wide targets, because these end the round.              */
.round-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 20px;
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s, color 0.16s;
}

.action-btn:hover:not(:disabled) {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(8, 4, 18, 0.5);
}

.action-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.action-title { font-size: 16px; font-weight: 660; }
.action-sub { font-size: 12px; color: var(--fg-faint); }

.action-btn.is-finish .action-title { color: var(--gold); }
.action-btn.is-finish:hover:not(:disabled) {
  background: color-mix(in srgb, var(--surface) 80%, var(--gold-soft));
}

/* ── the closing answer ───────────────────────────────────────────── */
.final {
  /* The panel sits in the board column, whose width depends on whether the
     trail is showing — so it lays itself out against its own width, not the
     viewport's. */
  container-type: inline-size;
  margin-top: 8px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, var(--gold-soft));
  box-shadow: 0 20px 50px rgba(8, 4, 18, 0.5);
}

.final-body { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }

@container (min-width: 620px) {
  .final-body { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
  .final-figure { max-width: none; }
}

.final-figure {
  position: relative;
  margin: 0 auto;
  max-width: 420px;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(12, 7, 24, 0.6);
  border: 1px solid var(--line);
}

.final-figure img { width: 100%; height: auto; display: block; }

.final-headline { margin: 0 0 4px; font-size: 19px; font-weight: 660; }
.final-lead { margin: 0 0 16px; font-size: 13px; color: var(--fg-dim); }

.final-list { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }

.final-meta { margin: 0; font-size: 12px; color: var(--fg-faint); line-height: 1.8; }
.final-meta a { color: var(--gold); }

.final-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ── copy button, once there is something worth copying ───────────── */
.ghost-btn.is-highlight {
  color: #2b1c07;
  background: linear-gradient(150deg, #ffdf9e, var(--gold));
  border-color: transparent;
  font-weight: 660;
  animation: copy-pulse 2.2s ease-in-out 3;
}

.ghost-btn.is-highlight:hover { color: #2b1c07; filter: brightness(1.06); }

@keyframes copy-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 196, 107, 0); }
  50% { box-shadow: 0 0 0 7px rgba(245, 196, 107, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-btn.is-highlight { animation: none; }
}

/* ── hover preview ────────────────────────────────────────────────
   The thumbnails are cropped to a common 3:4 so the row stays even, but the
   works themselves are portrait, landscape and square. On hover the picture is
   shown whole, at its own ratio and its own pixel size, capped to 80% of the
   viewport. Fixed positioning, because a preview that large would otherwise
   run off the edge when the card sits near one.                          */
.card-pop {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transform-origin: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-solid);
  box-shadow: 0 30px 80px rgba(8, 4, 18, 0.78);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.card-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.card-pop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .card-pop { transition: none; }
}