/* Stargate Trivia playtest. Light and dark themes follow the system setting. */
@layer reset, base, layout, components, utilities;

@font-face { font-family: "Barlow Semi Condensed"; font-weight: 400; font-display: swap;
  src: url("/fonts/BarlowSemiCondensed-Regular.ttf") format("truetype"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap;
  src: url("/fonts/BarlowSemiCondensed-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
  src: url("/fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap;
  src: url("/fonts/BarlowSemiCondensed-Bold.ttf") format("truetype"); }

@layer reset {
  body, h1, h2, p, ul, dl, dd { margin: 0; }
  ul[role="list"] { padding: 0; list-style: none; }
  img, svg { display: block; }
  button, input, select { box-sizing: border-box; font: inherit; color: inherit; }
  table { border-collapse: collapse; }
}

@layer base {
  :root {
    color-scheme: light dark;
    --font: "Barlow Semi Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius: 14px;
    --control-radius: 10px;

    /* Status colours are fixed across themes; they always travel with an icon and a word. */
    --good: #0ca30c;
    --bad: #d03b3b;
    --self: #6d5bd0;

    --page: #eef2f8;
    --page-glow: radial-gradient(70rem 35rem at 10% -15%, rgb(42 120 214 / 0.12), transparent 70%);
    --surface: #ffffff;
    --surface-2: #f2f5fa;
    --field: #ffffff;
    --ink: #0b1220;
    --ink-2: #3f495c;
    --ink-3: #5c677b;
    --line: #dbe1ea;
    --control-line: #7b8599;
    --accent: #1f66c1;
    --accent-hover: #1a56a4;
    --accent-ink: #ffffff;
    --accent-soft: #dde9f8;
    --link: #1f5fb3;
    --meter: #2a78d6;
    --meter-track: #dbe8f8;
    --answer-ink: #7a4f00;
    --chevron: #c98500;
    --warn: #eda100;
    --bad-soft: #fdecec;
    --focus: #0b57d0;
    --shadow: 0 1px 2px rgb(11 18 32 / 0.06), 0 8px 24px rgb(11 18 32 / 0.08);
    --card-shadow: 0 2px 4px rgb(0 0 0 / 0.18), 0 18px 40px rgb(8 20 45 / 0.3);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --page: #060b16;
      --page-glow: radial-gradient(70rem 35rem at 10% -15%, rgb(57 135 229 / 0.18), transparent 70%);
      --surface: #0e1627;
      --surface-2: #16223a;
      --field: #0a1120;
      --ink: #f3f6fc;
      --ink-2: #c1cadb;
      --ink-3: #939eb3;
      --line: #22304a;
      --control-line: #66728c;
      --accent: #5fb4ff;
      --accent-hover: #86c7ff;
      --accent-ink: #04101f;
      --accent-soft: #15314f;
      --link: #86c7ff;
      --meter: #3987e5;
      --meter-track: #1a2c47;
      --answer-ink: #f2c879;
      --chevron: #f2c879;
      --warn: #fab219;
      --bad-soft: rgb(208 59 59 / 0.16);
      --focus: #8ec5ff;
      --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
      --card-shadow: 0 2px 6px rgb(0 0 0 / 0.5), 0 24px 60px rgb(0 0 0 / 0.55);
    }
  }

  html {
    font-family: var(--font);
    line-height: 1.45;
    color: var(--ink);
    background: var(--page);
    accent-color: var(--accent);
    -webkit-text-size-adjust: 100%;
  }
  body { min-block-size: 100dvh; background: var(--page-glow), var(--page); }
  h1, h2 { line-height: 1.15; text-wrap: balance; }
  h1 { font-size: 1.75rem; font-weight: 700; }
  h2 { font-size: 1.2rem; font-weight: 600; }
  a { color: var(--link); text-underline-offset: 0.2em; }
  :where(a, button, input, select, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  ::selection { background: var(--accent-soft); color: var(--ink); }
}

@layer layout {
  .topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
    border-block-end: 1px solid var(--line);
    background: var(--surface);
  }
  main { padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) 4rem; }
  main:focus { outline: none; }

  .play {
    display: grid;
    grid-template-columns: auto minmax(0, 28rem);
    justify-content: center;
    align-items: start;
    gap: clamp(1.5rem, 5vw, 4rem);
  }
  .side { display: grid; gap: 1.25rem; }

  .results { max-inline-size: 72rem; margin-inline: auto; display: grid; gap: 1.25rem; }

  @media (max-width: 47.99rem) {
    .play { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.25rem; }
    .side { inline-size: min(100%, 30rem); }
  }
}

@layer components {
  /* Header */
  .brand {
    display: inline-flex; align-items: center; gap: 0.55rem;
    color: var(--ink); text-decoration: none;
    font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em;
  }
  .brand-mark { inline-size: 1.5rem; block-size: 1.5rem; fill: var(--chevron); }
  .brand-tag {
    padding: 0.05rem 0.55rem;
    border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  }
  nav { display: flex; gap: 0.25rem; }
  nav a {
    padding: 0.45rem 0.9rem; border-radius: 999px;
    color: var(--ink-2); font-weight: 600; text-decoration: none;
  }
  nav a:hover { background: var(--surface-2); color: var(--ink); }
  nav a[aria-current="page"] {
    background: var(--accent-soft); color: var(--ink);
    text-decoration: underline 2px var(--accent); text-underline-offset: 0.35em;
  }

  .skip-link:focus-within, .skip-link:focus {
    position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 10;
    padding: 0.5rem 1rem; border-radius: var(--control-radius);
    background: var(--surface); box-shadow: var(--shadow);
  }

  .banner {
    max-inline-size: 72rem; margin: 0 auto 1rem;
    padding: 0.75rem 1rem; border: 1px solid var(--bad); border-radius: var(--control-radius);
    background: var(--bad-soft);
  }

  /* The card: the SVG is full bleed, so the frame crops to the trim and rounds the corners
     like a real poker card. app.js sets the crop from the deck geometry. */
  .card-frame {
    --trim-ratio: 2.5 / 3.5;
    --bleed-x: 5%;
    --bleed-y: 3.5714%;
    --face-w: 110%;
    --face-h: 107.1429%;
    --corner-x: 5%;
    --corner-y: 3.5714%;
    position: relative;
    container-type: inline-size;
    inline-size: clamp(15rem, min(88vw, calc((100dvh - 10rem) * 0.714)), 25rem);
    aspect-ratio: var(--trim-ratio);
    border-radius: var(--corner-x) / var(--corner-y);
    overflow: hidden;
    background: #0a1830;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.4s ease;
  }
  .card-frame[data-verdict="correct"] { box-shadow: var(--card-shadow), 0 0 0 3px var(--good); }
  .card-frame[data-verdict="incorrect"] { box-shadow: var(--card-shadow), 0 0 0 3px var(--bad); }
  .face {
    position: absolute;
    left: calc(-1 * var(--bleed-x));
    top: calc(-1 * var(--bleed-y));
    width: var(--face-w);
    height: var(--face-h);
  }
  .face-answer { opacity: 0; transition: opacity 0.5s ease 0.1s; }
  .revealed .face-answer { opacity: 1; }
  .loading .face { visibility: hidden; }

  /* Plain-text stand-in when the SVG cards haven't been generated. */
  .text-card {
    position: absolute; inset: 0;
    display: grid; align-content: center; gap: 1rem;
    padding: 14% 10%;
    text-align: center; color: #f3f6fc;
    background: radial-gradient(120% 90% at 50% 45%, #1d3a66 0%, #0f2242 55%, #081427 100%);
  }
  .text-card-tier {
    position: absolute; inset-block-start: 7%; inset-inline-start: 9%;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85;
  }
  .text-card-question { font-size: clamp(1rem, 7cqi, 1.5rem); font-weight: 600; line-height: 1.2; text-wrap: balance; }
  .text-card-answer { color: #f2c879; font-size: clamp(0.9rem, 5.5cqi, 1.15rem); font-weight: 500; }
  .text-card-answer:empty { display: none; }

  /* Session line and forms */
  .session { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; color: var(--ink-3); font-weight: 500; }

  .answer-form { display: grid; gap: 0.5rem; }
  .answer-form label { font-size: 1.1rem; font-weight: 600; }
  .hint { color: var(--ink-3); }
  .answer-row { display: flex; gap: 0.5rem; }
  .answer-row input { flex: 1; min-inline-size: 0; }

  input[type="text"], select, textarea {
    min-block-size: 3rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--control-line); border-radius: var(--control-radius);
    background: var(--field); color: var(--ink);
    font-size: 1.125rem;
  }
  textarea { box-sizing: border-box; inline-size: 100%; min-block-size: 4.5rem; font: inherit; font-size: 1rem; line-height: 1.4; resize: vertical; }

  .comment-form { display: grid; gap: 0.4rem; }
  .comment-form label { font-weight: 600; }
  .comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
  .comment-actions .btn { min-block-size: 2.75rem; font-size: 1rem; }
  .comment-status { color: var(--ink-3); }
  .guess-comment {
    flex-basis: 100%;
    margin-inline-start: 1.6rem; padding-inline-start: 0.6rem;
    border-inline-start: 2px solid var(--line);
    color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere;
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-block-size: 3rem;
    padding: 0.45rem 1.15rem;
    border: 1px solid var(--control-line); border-radius: var(--control-radius);
    background: var(--surface); color: var(--ink);
    font-size: 1.05rem; font-weight: 600; text-decoration: none;
    cursor: pointer;
  }
  .btn:hover:not(:disabled) { background: var(--surface-2); }
  .btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
  .btn.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }
  .btn.quiet { justify-self: start; min-block-size: 2.75rem; padding-inline: 0.25rem; border-color: transparent; background: transparent; color: var(--link); }
  .btn.quiet:hover:not(:disabled) { background: transparent; text-decoration: underline; }
  .btn:disabled { opacity: 0.55; cursor: progress; }
  .button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .link-btn {
    justify-self: start;
    min-block-size: 2rem; padding: 0.25rem 0;
    border: 0; background: none; color: var(--link);
    font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em;
    cursor: pointer;
  }

  /* Result */
  .result {
    display: grid; gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
  }
  .result:not([hidden]) { animation: rise 0.35s ease both; }
  @keyframes rise { from { opacity: 0; translate: 0 0.5rem; } }

  .verdict { display: flex; align-items: center; gap: 0.75rem; }
  .verdict[data-verdict="correct"] { --verdict: var(--good); }
  .verdict[data-verdict="incorrect"] { --verdict: var(--bad); }
  .verdict[data-verdict="self"] { --verdict: var(--self); }
  .verdict-icon {
    flex: none; display: grid; place-items: center;
    inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
    background: var(--verdict); color: #ffffff;
  }
  .verdict-icon svg {
    display: none; inline-size: 1.4rem; block-size: 1.4rem;
    fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  }
  .verdict[data-verdict="correct"] .i-correct,
  .verdict[data-verdict="incorrect"] .i-incorrect,
  .verdict[data-verdict="self"] .i-self { display: block; }
  .verdict-title { font-size: 1.6rem; font-weight: 700; }

  .reveal { display: grid; gap: 0.6rem; }
  .reveal-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
  .reveal dt { color: var(--ink-3); font-weight: 500; }
  .reveal dd { font-size: 1.1rem; overflow-wrap: anywhere; }
  .reveal dd.the-answer { color: var(--answer-ink); font-size: 1.35rem; font-weight: 600; line-height: 1.25; }

  .parts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .parts li {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.15rem 0.7rem;
    border: 1px solid var(--line); border-radius: 999px;
    font-weight: 500;
  }
  .parts li.missing { color: var(--ink-3); }
  .mark { font-weight: 700; }
  .ok > .mark { color: var(--good); }
  .missing > .mark { color: var(--bad); }
  .pending > .mark { color: var(--ink-3); }

  .self-grade { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: var(--control-radius); background: var(--surface-2); }

  .rating {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
    padding-block-start: 0.9rem; border-block-start: 1px solid var(--line);
  }
  .rating-label { font-weight: 600; }
  .thumb {
    display: inline-flex; align-items: center; gap: 0.45rem;
    min-block-size: 2.75rem; padding: 0.35rem 1rem;
    border: 1px solid var(--control-line); border-radius: 999px;
    background: transparent; color: var(--ink-2);
    font-weight: 600; cursor: pointer;
  }
  .thumb svg {
    inline-size: 1.25rem; block-size: 1.25rem;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .thumb:hover { background: var(--surface-2); color: var(--ink); }
  .thumb[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
  .thumb[aria-pressed="true"] svg path:not(.stem) { fill: currentColor; fill-opacity: 0.3; }
  .rating-thanks { color: var(--ink-3); }

  .next { justify-self: start; min-inline-size: 10rem; }

  .done {
    display: grid; gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
  }

  .player {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem 1rem;
    padding-block-start: 1rem; border-block-start: 1px solid var(--line);
  }
  .field { display: grid; gap: 0.3rem; align-content: start; min-inline-size: 0; }
  .player :is(input, select) { inline-size: 100%; }
  .field label { color: var(--ink-2); font-weight: 600; }
  .field.inline { display: flex; align-items: center; gap: 0.5rem; }
  .player :is(input, select), .field.inline select { min-block-size: 2.75rem; font-size: 1rem; }
  .optional { color: var(--ink-3); font-weight: 400; }
  .notice {
    padding: 0.75rem 1rem;
    border-inline-start: 3px solid var(--warn); border-radius: var(--control-radius);
    background: var(--surface-2); color: var(--ink-2);
  }

  /* Results */
  .results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
  .results-head h1:focus { outline: none; }
  .sub { max-inline-size: 70ch; color: var(--ink-3); }

  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
  .kpi {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
  }
  .kpi-label { color: var(--ink-2); font-weight: 500; }
  .kpi-value { margin-block-start: 0.2rem; font-size: 2rem; font-weight: 600; line-height: 1.1; }
  .kpi-detail { color: var(--ink-3); }

  .panel {
    display: grid; gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
  }
  .panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .table-scroll { overflow-x: auto; }
  .tier-table, .card-table { inline-size: 100%; }
  :is(.tier-table, .card-table) :is(th, td) {
    padding: 0.6rem 0.7rem;
    border-block-end: 1px solid var(--line);
    text-align: start; vertical-align: top;
  }
  :is(.tier-table, .card-table) thead th {
    color: var(--ink-2); font-size: 0.95rem; font-weight: 600; white-space: nowrap; vertical-align: bottom;
  }
  tbody th { font-weight: 600; }
  :is(th, td).num { text-align: end; font-variant-numeric: tabular-nums; }
  .bar-col { min-inline-size: 13rem; white-space: nowrap; }
  .q-col { min-inline-size: 18rem; }
  .q-text { display: block; }
  .a-text { display: block; margin-block-start: 0.15rem; color: var(--answer-ink); font-weight: 500; }
  .muted { color: var(--ink-3); }
  .rate { display: inline-block; min-inline-size: 3.2ch; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
  .count { margin-inline-start: 0.5rem; color: var(--ink-3); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

  /* Meters: one hue, the unfilled track a paler step of it; square at the baseline, rounded data end. */
  .meter {
    display: inline-block; vertical-align: middle;
    inline-size: 6rem; block-size: 0.5rem;
    margin-inline-end: 0.6rem;
    border-radius: 4px; overflow: hidden;
    background: var(--meter-track);
  }
  .meter.large { inline-size: 10rem; block-size: 1rem; }
  .meter-fill {
    display: block; block-size: 100%;
    inline-size: calc(var(--value, 0) * 100%);
    border-radius: 0 4px 4px 0;
    background: var(--meter);
  }

  .card-table thead button {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0; border: 0; background: none;
    color: inherit; font-weight: 600; cursor: pointer;
  }
  .card-table thead button:hover { color: var(--ink); text-decoration: underline; }
  .card-table th[aria-sort] button { color: var(--ink); }
  .card-table th[aria-sort="ascending"] button::after { content: "▲"; content: "▲" / ""; font-size: 0.7em; }
  .card-table th[aria-sort="descending"] button::after { content: "▼"; content: "▼" / ""; font-size: 0.7em; }

  tr.details > td { padding: 0.75rem 1rem 1rem; background: var(--surface-2); }
  .details-body { display: grid; gap: 0.5rem; }
  .guesses { display: grid; gap: 0.3rem; }
  .guesses li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
  .guesses .guess { font-weight: 500; overflow-wrap: anywhere; }

  @media (forced-colors: active) {
    .meter { border: 1px solid CanvasText; background: Canvas; }
    .meter-fill { forced-color-adjust: none; background: Highlight; }
    .verdict-icon { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  }

  @media (prefers-reduced-motion: reduce) {
    .face-answer { transition-duration: 0.01s; transition-delay: 0s; }
    .card-frame { transition: none; }
    .result:not([hidden]) { animation: none; }
  }

  @media (max-width: 47.99rem) {
    .card-frame { inline-size: clamp(13rem, min(80vw, calc((100dvh - 19rem) * 0.714)), 22rem); }
    .next { justify-self: stretch; }
  }
  @media (max-width: 29.99rem) {
    .brand-tag { display: none; }      /* keeps the header to one row on phones */
    nav a { padding-inline: 0.7rem; }
  }
}

@layer utilities {
  [hidden] { display: none !important; }
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; border: 0 !important;
    overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
  }
}