/* "Which came first?" room. Loads after cabinet.css and uses its colour and font variables. */
  .game { padding: 4px 0 34px; }

  .scorebar {
    display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 16px; padding: 10px 0;
    border-top: 1px solid var(--wood-edge); border-bottom: 1px solid var(--wood-edge);
    font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft);
  }
  .scorebar #score { color: var(--brass-hi); }

  /* ---------- the two plaques on velvet ---------- */
  .duel {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 18px;
    padding: 26px; border: 10px solid var(--wood-2); border-radius: 6px;
    background: radial-gradient(ellipse at 50% 30%, var(--velvet-1), var(--velvet-0));
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .45);
  }
  .plaque {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-height: 260px; padding: 26px 18px 20px; cursor: pointer; text-align: center;
    color: var(--ink); border: 1px solid #c9b48a; border-radius: 3px;
    background: linear-gradient(160deg, var(--paper-0), var(--paper-1));
    box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(255, 255, 255, .35), inset 0 0 0 5px rgba(125, 95, 36, .35);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .plaque::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--brass-hi), var(--brass-lo));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  }
  .plaque:not(:disabled):hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 12px 22px rgba(0, 0, 0, .5), inset 0 0 0 4px rgba(255, 255, 255, .35), inset 0 0 0 5px rgba(125, 95, 36, .35); }
  .plaque:disabled { cursor: default; }
  .p-icon { width: 64px; height: 64px; margin-top: 4px; color: var(--ink); }
  .p-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .p-q { font-size: clamp(1.1rem, 2.1vw, 1.42rem); line-height: 1.22; max-width: 22ch; }
  .p-name { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
  .p-date {
    margin-top: auto; padding-top: 10px; font-size: 1.5rem; color: #6b5020; font-variant-numeric: oldstyle-nums;
  }
  .p-mark {
    position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid currentColor;
  }
  .p-mark.older, .p-mark.tie { color: #6b4e12; background: rgba(236, 201, 111, .45); }
  .p-mark.younger { color: var(--ink-soft); }
  .plaque.is-right { outline: 3px solid var(--brass-hi); outline-offset: 4px; }
  .plaque.is-wrong { outline: 3px dashed #c0705a; outline-offset: 4px; }

  .vs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
  .vs-mark { font-style: italic; font-size: 1.3rem; color: var(--cream-soft); }
  .btn-same {
    cursor: pointer; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--brass-lo); background: rgba(0, 0, 0, .25); color: var(--cream);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  }
  .btn-same:not(:disabled):hover { border-color: var(--brass-hi); color: var(--brass-hi); }
  .btn-same:disabled { opacity: .55; cursor: default; }
  .btn-same.is-right { opacity: 1; border-color: var(--brass-hi); color: var(--brass-hi); }
  .btn-same.is-wrong { opacity: 1; border-color: #c0705a; color: #e3a08c; }

  .keys { margin: 10px 0 0; font-size: .85rem; color: var(--cream-soft); }
  kbd { font-family: var(--mono); font-size: .78rem; padding: 0 5px; border: 1px solid var(--wood-edge); border-radius: 3px; background: var(--wood-2); }

  /* ---------- the reveal ---------- */
  .reveal {
    margin-top: 20px; padding: 22px 24px; border: 1px solid var(--wood-edge); border-radius: 6px;
    background: linear-gradient(180deg, rgba(43, 29, 19, .92), rgba(28, 19, 13, .92));
    animation: rise .35s ease both;
  }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .g-verdict { margin: 0; font-size: 1.5rem; }
  .g-verdict.ok { color: var(--brass-hi); }
  .g-verdict.no { color: #e3a08c; }
  .g-verdict span { color: var(--cream); font-size: 1.1rem; }
  .g-why { margin: 8px 0 0; color: #dccdb0; }
  .g-why span {
    margin-right: 6px; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fancy);
  }
  .g-note { margin: 4px 0 0; font-size: .82rem; color: var(--cream-soft); }

  .ruler { margin: 18px 0 6px; }
  .ruler-track { position: relative; height: 34px; border-bottom: 2px solid var(--brass-lo); margin: 0 6px; }
  .ruler-track::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 8px;
    background: repeating-linear-gradient(90deg, var(--brass-lo) 0 1px, transparent 1px 10%);
  }
  .ruler-gap { position: absolute; bottom: 0; height: 6px; background: var(--brass-hi); border-radius: 3px 3px 0 0; }
  .ruler-pin { position: absolute; bottom: 0; width: 2px; height: 30px; margin-left: -1px; background: var(--brass-hi); }
  .ruler-pin span {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--cream-soft);
  }
  .ruler-pin.start span { left: 0; transform: none; }
  .ruler-pin.end span { left: auto; right: 0; transform: none; }
  .ruler-pin.low { height: 16px; }
  .ruler-pin.low span { bottom: auto; top: 100%; margin-top: 12px; }
  .ruler figcaption {
    display: flex; justify-content: space-between; margin-top: 18px;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #9a876b;
  }

  .g-thread, .g-one { margin-top: 16px; padding: 14px 16px; border-radius: 4px; border: 1px solid var(--wood-edge); background: rgba(0, 0, 0, .18); }
  .g-thread.fact { border-left: 3px solid var(--brass); }
  .g-thread.fancy { border-left: 3px dotted var(--fancy); }
  .g-badge { margin: 0 0 4px; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); }
  .g-thread.fancy .g-badge { color: var(--fancy); }
  .g-thread h3, .g-one h3 { margin: 0 0 6px; font-weight: 400; font-size: 1.2rem; }
  .g-one h3 small { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--cream-soft); margin-left: 6px; }
  .g-thread p, .g-one p { margin: 6px 0; color: #dccdb0; }
  .g-none { margin: 16px 0 0; color: var(--cream-soft); font-style: italic; }
  .g-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .g-sources { margin: 8px 0 0; padding: 0; list-style: none; font-size: .86rem; }
  .g-sources li { margin: 2px 0; }
  .g-sources span { color: #9a876b; font-size: .78rem; }
  .g-more { font-size: .9rem; }
  .btn-next {
    margin-top: 18px; cursor: pointer; padding: 10px 20px; border-radius: 999px; border: 0;
    background: linear-gradient(180deg, var(--brass-hi), var(--brass)); color: var(--ink); font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  }

  /* ---------- phone ---------- */
  @media (max-width: 720px) {
    .duel { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-width: 8px; }
    .vs { grid-column: 1 / -1; grid-row: 2; flex-direction: row; }
    .plaque { min-height: 200px; padding: 22px 8px 14px; }
    .p-icon { width: 44px; height: 44px; }
    .p-q { font-size: 1rem; }
    .p-date { font-size: 1.15rem; }
    .p-mark { position: static; order: 9; margin-top: 6px; font-size: .56rem; padding: 1px 6px; }
    .keys { display: none; }
    .reveal { padding: 16px 14px; }
    .g-pair { grid-template-columns: 1fr; }
    .ruler-pin span { font-size: .56rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .plaque, .reveal { transition: none; animation: none; }
    .plaque:not(:disabled):hover { transform: none; }
  }