@layer completion-card {
  .completion-card-dialog {
    width: min(610px, calc(100% - 1.25rem));
    max-height: calc(100dvh - 1.25rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 28px 80px #042b3645;
  }

  .completion-card-dialog::backdrop,
  .completion-share-dialog::backdrop,
  .completion-spoiler-dialog::backdrop {
    background: #031b23b8;
    backdrop-filter: blur(7px);
  }

  .completion-card-dialog[open] {
    animation: completion-reveal .24s ease-out both;
  }

  .completion-card-v2 {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 4vw, 1.7rem);
  }

  .completion-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline-end: 2.4rem;
  }

  .completion-card-header .brand-mini {
    color: var(--deep);
    font-size: .9rem;
    font-weight: 900;
  }

  .completion-card-header .brand-mini i { color: var(--gold); }

  .completion-puzzle {
    color: var(--ink-soft);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .completion-reward { text-align: center; }
  .completion-reward .eyebrow { margin: 0; }

  .completion-reward h2 {
    margin: .25rem 0 .25rem;
    font-size: clamp(2rem, 8vw, 3.25rem);
  }

  .completion-score-copy {
    margin: 0;
    color: var(--ink-soft);
    font-size: .9rem;
  }

  .completion-fish-hero {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 19px;
    background: var(--mist);
  }

  .completion-fish-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .completion-card-v2[data-background-treatment="deep"] .completion-fish-hero {
    background: var(--deep);
    box-shadow: inset 0 0 0 2px #ffffff1f;
  }

  .completion-card-v2[data-background-treatment="paper"] .completion-fish-hero {
    background: #eee7d9;
  }

  .completion-card-v2[data-background-treatment="documentary"] .completion-fish-hero {
    outline: 1px solid color-mix(in srgb, var(--ink-soft) 35%, transparent);
    outline-offset: -1px;
  }

  .completion-attribution-indicator {
    position: absolute;
    right: .65rem;
    bottom: .65rem;
    padding: .32rem .5rem;
    border-radius: 999px;
    background: #031d26d9;
    color: #fff;
    font-size: .58rem;
    font-weight: 750;
  }

  .completion-humor {
    margin: -.15rem auto 0;
    max-width: 32rem;
    color: var(--deep);
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    font-weight: 850;
    line-height: 1.25;
    text-align: center;
  }

  .completion-fish-hero .completion-humor.is-overlay {
    position: absolute;
    z-index: 2;
    right: .65rem;
    left: .65rem;
    max-width: none;
    margin: 0;
    padding: .65rem .8rem;
    border-radius: 12px;
    background: #062f3be8;
    color: #fff;
    font-size: clamp(.9rem, 2.6vw, 1.15rem);
    text-wrap: balance;
  }

  .completion-fish-hero[data-caption-placement="overlay_top"] .completion-humor {
    top: .65rem;
  }

  .completion-fish-hero[data-caption-placement="overlay_bottom"] .completion-humor {
    bottom: .65rem;
  }

  .completion-fish-hero[data-caption-placement="overlay_bottom"] .completion-attribution-indicator {
    top: .65rem;
    bottom: auto;
  }

  .completion-species { text-align: center; }

  .completion-species h3 {
    margin: 0;
    color: var(--deep);
    font-size: 1.3rem;
  }

  .completion-species .scientific-name {
    margin: .15rem 0 .65rem;
    color: var(--ink-soft);
    font-size: .78rem;
    font-style: italic;
  }

  .completion-featured-fact {
    max-width: 32rem;
    margin: 0 auto;
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.52;
  }

  .completion-primary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
  }

  .completion-primary-stats > div {
    display: grid;
    gap: .1rem;
    padding: .65rem 1rem;
    text-align: center;
  }

  .completion-primary-stats > div + div { border-inline-start: 1px solid var(--line); }
  .completion-primary-stats dt { color: var(--ink-soft); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
  .completion-primary-stats dd { margin: 0; color: var(--deep); font-size: 1rem; font-weight: 900; }

  .completion-share-primary {
    min-height: 52px;
    justify-content: center;
    font-size: .9rem;
  }

  .completion-status {
    min-height: 1.1rem;
    margin: -.5rem 0 0;
    color: var(--sea);
    font-size: .7rem;
    font-weight: 750;
    text-align: center;
  }

  .completion-details {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .completion-details > summary {
    padding: .85rem .1rem;
    color: var(--deep);
    font-size: .78rem;
    font-weight: 850;
    cursor: pointer;
  }

  .completion-details-body {
    display: grid;
    gap: .9rem;
    padding: 0 .1rem 1rem;
  }

  .completion-science-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: 0;
  }

  .completion-science-list > div {
    display: grid;
    gap: .1rem;
    padding: .7rem;
    border-radius: 11px;
    background: var(--mist);
  }

  .completion-science-list dt { color: var(--ink-soft); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
  .completion-science-list dd { margin: 0; font-size: .76rem; }

  .completion-community-detail {
    padding: .75rem;
    border-radius: 11px;
    background: var(--foam);
  }

  .completion-community-detail h3,
  .completion-community-detail p { margin: 0; }
  .completion-community-detail h3 { font-size: .8rem; }
  .completion-community-detail p { color: var(--ink-soft); font-size: .75rem; }

  .completion-source-list {
    display: grid;
    gap: .25rem;
    color: var(--ink-soft);
    font-size: .68rem;
  }

  .completion-source-list > span:last-of-type { display: flex; flex-wrap: wrap; gap: .7rem; }
  .completion-source-list a { color: var(--sea); font-weight: 750; }

  .completion-account-note {
    margin: 0;
    color: var(--ink-soft);
    font-size: .72rem;
  }

  .completion-next {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .7rem;
  }

  .completion-next .button { justify-content: center; }

  .completion-share-dialog,
  .completion-spoiler-dialog {
    width: min(470px, calc(100% - 1.25rem));
    max-height: calc(100dvh - 1.25rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 24px 70px #042b3645;
  }

  .completion-share-dialog form,
  .completion-spoiler-dialog form {
    position: relative;
    display: grid;
    gap: .9rem;
    padding: 1.4rem;
  }

  .completion-share-dialog h2,
  .completion-spoiler-dialog h2 { margin: -.3rem 0 0; }
  .completion-share-dialog p,
  .completion-spoiler-dialog p { margin: 0; color: var(--ink-soft); font-size: .82rem; }

  .completion-spoiler-options {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .completion-spoiler-options legend,
  .completion-format-select > span {
    margin-bottom: .35rem;
    color: var(--ink-soft);
    font-size: .66rem;
    font-weight: 800;
  }

  .completion-spoiler-options label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .65rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
  }

  .completion-spoiler-options label:has(input:checked) {
    border-color: var(--sea);
    background: var(--foam);
  }

  .completion-spoiler-options strong,
  .completion-spoiler-options small { display: block; }
  .completion-spoiler-options strong { font-size: .79rem; }
  .completion-spoiler-options small { margin-top: .1rem; color: var(--ink-soft); font-size: .66rem; line-height: 1.35; }

  .completion-format-select { display: grid; }

  .completion-format-select select {
    width: 100%;
    min-height: 44px;
    padding: 0 .7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
  }

  .completion-share-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }

  .completion-share-actions .button { justify-content: center; }
  .completion-story-help { padding: .65rem; border-radius: 10px; background: var(--foam); }

  .completion-spoiler-actions {
    display: grid;
    gap: .5rem;
  }

  @keyframes completion-reveal {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
}

@layer completion-card-responsive {
  @media (max-width: 640px) {
    .completion-card-dialog {
      width: calc(100% - .6rem);
      max-height: calc(100dvh - .6rem);
      border-radius: 20px;
    }

    .completion-card-v2 { gap: .8rem; padding: 1rem; }
    .completion-fish-hero { border-radius: 15px; }
    .completion-science-list { grid-template-columns: 1fr; }
    .completion-share-actions { grid-template-columns: 1fr; }
    .completion-next { grid-template-columns: 1fr; }
    .completion-next .text-button { justify-self: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .completion-card-dialog[open] { animation: none; }
  }

  @media (forced-colors: active) {
    .completion-card-dialog,
    .completion-share-dialog,
    .completion-spoiler-dialog,
    .completion-primary-stats,
    .completion-spoiler-options label {
      border: 2px solid CanvasText;
    }
  }
}
.completion-legacy-reward{margin:.65rem auto 0;padding:.55rem .75rem;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--gold) 10%,var(--white));color:var(--ink);font-size:.76rem;font-weight:850;text-align:center}