/* The Relay — the duel screen.
 *
 * Scoped to `#duel-card` (the Duelist's own view) and reused, smaller, inside
 * the Grandmaster's duel watch. The renderers in frontend/duels/ own the
 * markup; this is the light on it.
 *
 * Two seats facing each other, a call to act, and the moves as cards. The
 * lighting is doing the work: each side owns a hue and is rimmed in it, the
 * cards glow in their own, and the only thing that pulses is the thing on a
 * clock. Nothing here is decoration for its own sake — a duel is five seconds
 * long and the screen has to say whose turn it is to be nervous.
 *
 * Card art is /static/assets/duels/<move>.svg, one file per move. Swapping a
 * file for a richer illustration needs no change here or in the renderer.
 */

#duel-card {
  --dl-a: #a970ff;      /* the seat on the left */
  --dl-b: #3bb6ff;      /* the seat on the right */
  --dl-rock: #a970ff;
  --dl-paper: var(--gm-yellow);
  --dl-scissors: #3bb6ff;

  position: relative;
  border: 1px solid rgba(138, 77, 255, 0.4);
  border-radius: var(--gm-radius-lg);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(138, 77, 255, 0.22), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(59, 130, 255, 0.14), transparent 70%),
    var(--gm-panel);
  overflow: hidden;
  color: var(--gm-text);
}

/* Light raking in from both edges, the way the two sides are lit. */
#duel-card::before,
#duel-card::after {
  content: "";
  position: absolute;
  top: 0;
  width: 34%;
  height: 62%;
  pointer-events: none;
  opacity: 0.5;
}
#duel-card::before {
  left: 0;
  background: linear-gradient(115deg, var(--dl-a) 0%, transparent 58%);
}
#duel-card::after {
  right: 0;
  background: linear-gradient(245deg, var(--dl-b) 0%, transparent 58%);
}

/* --- the bar ------------------------------------------------------------ */

.dl-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(138, 77, 255, 0.28);
  background: linear-gradient(180deg, rgba(138, 77, 255, 0.2), transparent);
}
.dl-bar__game {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dl-bar__game .gm-ic { color: var(--dl-a); }
.dl-bar__round {
  padding: 5px 13px;
  border: 1px solid rgba(138, 77, 255, 0.45);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d3b9ff;
}

/* The clock is the loudest thing on the bar, because it is the only thing on
   it that is running out. */
#duel-card .duel-clock {
  float: none;
  padding: 4px 16px;
  border: 2px solid var(--gm-yellow);
  border-radius: 999px;
  background: rgba(255, 210, 28, 0.12);
  color: var(--gm-yellow);
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
#duel-card .duel-clock.urgent {
  border-color: var(--gm-red);
  background: rgba(255, 81, 101, 0.14);
  color: var(--gm-red);
}

.dl-fuse { height: 3px; background: rgba(122, 140, 255, 0.16); overflow: hidden; }
#duel-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dl-a), var(--gm-yellow), var(--gm-red));
  transition: width 0.25s linear;
}

.dl { position: relative; padding: 10px 18px 14px; }

/* --- the seats ---------------------------------------------------------- */

.dl-seats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  /* Room for the portraits' own glow: the card clips, and a rim light cut off
     by an edge reads as a rendering bug rather than as light. */
  padding: 14px 6px 20px;
}

.dl-seat {
  --seat: var(--dl-a);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.dl-seat--right { --seat: var(--dl-b); flex-direction: row-reverse; }
.dl-seat--right .dl-seat__body { align-items: flex-end; text-align: right; }

/* An angled frame rather than a circle: it is a fighter's card, and the cut
   corners are what makes it read as one at this size. */
.dl-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 84px;
  flex: none;
  border: 2px solid var(--seat);
  background:
    radial-gradient(70% 70% at 50% 30%, color-mix(in srgb, var(--seat) 40%, transparent), transparent),
    var(--gm-bg);
  clip-path: polygon(22% 0, 78% 0, 100% 18%, 100% 82%, 78% 100%, 22% 100%, 0 82%, 0 18%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--seat) 45%, transparent);
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--seat);
}
.dl-seat.is-victor .dl-portrait {
  border-color: var(--gm-green);
  color: var(--gm-green);
  box-shadow: 0 0 30px rgba(66, 219, 131, 0.55);
}

.dl-seat__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.dl-seat__name {
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The hand: nothing before the reveal, a dot once committed, the art after. */
.dl-hand {
  display: flex;
  align-items: center;
  min-height: 34px;
  color: var(--gm-muted);
}
.dl-hand img { width: 34px; height: 34px; display: block; }
.dl-hand__wait { font-size: 1.4rem; letter-spacing: 0.18em; line-height: 1; }
.dl-seat.is-locked .dl-hand__wait { color: var(--seat); }

.dl-pips { display: flex; gap: 7px; }
.dl-pip {
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, var(--seat) 60%, transparent);
  border-radius: 50%;
}
.dl-pip.is-won {
  background: var(--seat);
  box-shadow: 0 0 10px var(--seat);
}

/* The clash mark. Two colours meeting is the whole idea of the screen. */
.dl-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0 4px;
}
.dl-vs span {
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--dl-a) 20%, var(--dl-b) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--dl-a);
  -webkit-text-fill-color: transparent;
}

/* --- the call ----------------------------------------------------------- */

.dl-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 6px 14px;
}
.dl-call__text {
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gm-muted);
}
/* Chevrons pointing inward at the thing you have to do, and only while you
   still have to do it. */
.dl-call.is-urgent .dl-call__text { color: var(--gm-yellow); }
.dl-call.is-urgent::before,
.dl-call.is-urgent::after {
  content: "";
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gm-yellow));
  animation: dl-sweep 1.1s ease-in-out infinite;
}
.dl-call.is-urgent::after { transform: scaleX(-1); }
@keyframes dl-sweep { 50% { opacity: 0.3; } }

/* --- the cards ---------------------------------------------------------- */

.dl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 14px;
  padding: 0 6px 6px;
}

#duel-card .dl-card {
  --card: var(--gm-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 10px;
  border: 2px solid color-mix(in srgb, var(--card) 70%, transparent);
  border-radius: var(--gm-radius-md);
  background:
    radial-gradient(75% 55% at 50% 22%,
      color-mix(in srgb, var(--card) 46%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--card) 12%, transparent), transparent 55%),
    var(--gm-panel-2);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dl-card--rock { --card: var(--dl-rock); }
.dl-card--paper { --card: var(--dl-paper); }
.dl-card--scissors { --card: var(--dl-scissors); }

#duel-card .dl-card:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: var(--card);
  box-shadow: 0 0 26px color-mix(in srgb, var(--card) 45%, transparent);
}
#duel-card .dl-card:disabled { cursor: not-allowed; }
/* Spent: the ones you did not pick step back rather than vanish, so the row
   still reads as a choice that was made. */
#duel-card .dl-card.is-spent { opacity: 0.32; }
#duel-card .dl-card.is-chosen {
  border-color: var(--card);
  box-shadow: 0 0 34px color-mix(in srgb, var(--card) 60%, transparent);
  opacity: 1;
}

.dl-card__art {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 22px color-mix(in srgb, var(--card) 45%, transparent));
}

.dl-card__plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 8px 6px 4px;
  border-top: 1px solid color-mix(in srgb, var(--card) 35%, transparent);
}
.dl-card__name {
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gm-text);
}
.dl-card__sub {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--card) 75%, var(--gm-muted));
}

/* --- the Grandmaster's copy --------------------------------------------- */

/* Same renderer, a third of the width, and no cards because a watcher gets no
   buttons. The seat strip above it already names both players, so the names
   here would be the same row twice. */
#view-leader .dl { padding: 0; }
#view-leader .dl-seats { padding: 0 0 10px; gap: 8px; }
#view-leader .dl-seat__name { display: none; }
#view-leader .dl-portrait { width: 44px; height: 52px; font-size: 1.1rem; }
#view-leader .dl-vs span { font-size: 1.2rem; }
#view-leader .dl-hand { min-height: 26px; }
#view-leader .dl-hand img { width: 26px; height: 26px; }
#view-leader .dl-call { padding-bottom: 0; }
#view-leader .dl-call__text { font-size: 0.75rem; letter-spacing: 0.1em; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 599px) {
  .dl-seats { gap: 8px; }
  .dl-portrait { width: 54px; height: 64px; font-size: 1.4rem; }
  .dl-seat__name { font-size: 1rem; }
  .dl-vs span { font-size: 1.5rem; }
  .dl-cards { gap: 8px; }
  #duel-card .dl-card { padding: 10px 6px 8px; }
  .dl-card__name { font-size: 0.85rem; }
  .dl-card__sub { font-size: 0.58rem; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  #duel-card *, #duel-card *::before, #duel-card *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   CROWN DUEL
   --------------------------------------------------------------------------
   Five characters, a counter table and one hidden hand rewrite. The screen is
   a scoreboard across the top, three columns under it (the rules you need, the
   two picks facing each other, and what the other side is doing), and your
   hand along the bottom.

   Each character owns a hue and keeps it everywhere: in the rules table, on
   the card, and on the pick it becomes. That is the only way five cards stay
   apart at a glance in ten seconds — and every one of them carries its name
   and its portrait too, so the hue is never doing the work alone.
   ========================================================================== */

#duel-card .cd {
  --cd-king: var(--gm-yellow);
  --cd-knight: #3bb6ff;
  --cd-guard: #42db83;
  --cd-assassin: #a970ff;
  --cd-peasant: var(--gm-amber);

  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 16px 16px;
}

.cd-card--king, .cd-rules__row--king { --card: var(--cd-king); }
.cd-card--knight, .cd-rules__row--knight { --card: var(--cd-knight); }
.cd-card--guard, .cd-rules__row--guard { --card: var(--cd-guard); }
.cd-card--assassin, .cd-rules__row--assassin { --card: var(--cd-assassin); }
.cd-card--peasant, .cd-rules__row--peasant { --card: var(--cd-peasant); }

.cd-art { width: 100%; height: auto; display: block; }

/* --- the scoreboard ------------------------------------------------------ */

.cd-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.cd-seat {
  --seat: var(--dl-a);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--seat) 55%, transparent);
  border-radius: var(--gm-radius-md);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--seat) 20%, transparent), transparent 65%),
    var(--gm-panel-2);
}
.cd-seat--them { --seat: var(--dl-b); text-align: right; }
.cd-seat__body { flex: 1; min-width: 0; }
.cd-seat__name {
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--seat);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-seat__sub { font-size: 0.72rem; font-weight: 700; color: var(--gm-muted); }

/* A shield, cut from the frame rather than drawn, so it takes the seat's hue
   without a second asset. */
.cd-shield {
  width: 34px;
  height: 40px;
  flex: none;
  border: 2px solid var(--seat);
  background: color-mix(in srgb, var(--seat) 22%, transparent);
  clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--seat) 45%, transparent);
}

.cd-crowns { display: flex; gap: 6px; margin: 5px 0 4px; }
.cd-seat--them .cd-crowns { justify-content: flex-end; }
.cd-crown {
  width: 15px;
  height: 11px;
  border: 2px solid color-mix(in srgb, var(--seat) 55%, transparent);
  /* the outline of a crown: three points and a band */
  clip-path: polygon(0 100%, 0 26%, 22% 52%, 50% 0, 78% 52%, 100% 26%, 100% 100%);
}
.cd-crown.is-won {
  background: var(--seat);
  border-color: var(--seat);
  box-shadow: 0 0 10px var(--seat);
}

.cd-title { text-align: center; }
#duel-card .cd-title h2 {
  margin: 0;
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff3c4 10%, var(--gm-yellow) 55%, #c98a12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gm-yellow);
  -webkit-text-fill-color: transparent;
}
.cd-round {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gm-muted);
}

/* --- the three columns --------------------------------------------------- */

.cd-body {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.6fr) minmax(180px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.cd-rules, .cd-watch__box {
  padding: 12px 14px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-md);
  background: var(--gm-panel-2);
}
.cd-rules__head {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-yellow);
}
.cd-rules__list { list-style: none; margin: 0; padding: 0; }
.cd-rules__row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  border-top: 1px solid var(--gm-line-soft);
  font-size: 0.72rem;
  font-weight: 800;
}
.cd-rules__row:first-child { border-top: 0; }
.cd-rules__row > .cd-art { width: 20px; flex: none; }
.cd-rules__who {
  flex: 1;
  min-width: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card, var(--gm-text));
}
.cd-rules__gt { color: var(--gm-muted); font-weight: 700; font-size: 0.64rem; }
.cd-rules__prey { display: flex; gap: 3px; }
.cd-rules__prey .cd-art { width: 19px; opacity: 0.85; }
.cd-rules__note {
  margin: 10px 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--gm-muted);
}

/* --- the arena ----------------------------------------------------------- */

.cd-arena { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cd-status {
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gm-text);
}
.cd-versus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.cd-versus__mark {
  flex: none;
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(100deg, var(--dl-a) 20%, var(--dl-b) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--dl-a);
  -webkit-text-fill-color: transparent;
}

.cd-pick { --seat: var(--dl-a); flex: 1 1 0; min-width: 0; text-align: center; }
.cd-pick--theirs { --seat: var(--dl-b); }
.cd-pick__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 148px;
  padding: 12px 10px;
  border: 2px solid var(--seat);
  border-radius: var(--gm-radius-md);
  background:
    radial-gradient(80% 60% at 50% 25%, color-mix(in srgb, var(--seat) 26%, transparent), transparent 70%),
    var(--gm-bg);
  box-shadow: 0 0 20px color-mix(in srgb, var(--seat) 30%, transparent);
}
.cd-pick__face .cd-art { max-width: 92px; }
.cd-pick__name {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seat);
}
.cd-pick__word { font-size: 1rem; font-weight: 900; color: var(--seat); }
/* The back of a card: a crown mark on a field, and nothing that hints at what
   is under it, because nothing here knows. */
.cd-pick__back {
  width: 62px;
  height: 78px;
  border: 2px solid color-mix(in srgb, var(--seat) 60%, transparent);
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--seat) 14%, transparent) 0 6px, transparent 6px 12px),
    var(--gm-panel);
}
.cd-pick__back.is-locked { box-shadow: 0 0 16px color-mix(in srgb, var(--seat) 50%, transparent); }
.cd-pick__label {
  display: block;
  margin-top: 8px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gm-muted);
}

/* --- what the other side is doing ---------------------------------------- */

.cd-watch__box { text-align: center; }
.cd-watch__box strong {
  display: block;
  margin: 10px 0 6px;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--dl-b);
}
.cd-watch__box.is-ready strong { color: var(--gm-green); }
.cd-watch__box span:not(.cd-watch__ring) {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--gm-muted);
}
.cd-watch__ring {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border: 3px dashed color-mix(in srgb, var(--dl-b) 60%, transparent);
  border-radius: 50%;
  animation: cd-turn 5s linear infinite;
}
.cd-watch__box.is-ready .cd-watch__ring {
  border-style: solid;
  border-color: var(--gm-green);
  animation: none;
}
@keyframes cd-turn { to { transform: rotate(360deg); } }

/* --- the hand ------------------------------------------------------------ */

.cd-stage { display: flex; flex-direction: column; gap: 12px; }
.cd-step, .cd-note {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--gm-muted);
}
.cd-step {
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-yellow);
}

.cd-hand {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
}
#duel-card .cd-card {
  --card: var(--gm-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 8px;
  border: 2px solid color-mix(in srgb, var(--card) 55%, transparent);
  border-radius: var(--gm-radius-md);
  background:
    radial-gradient(75% 50% at 50% 18%, color-mix(in srgb, var(--card) 30%, transparent), transparent 72%),
    var(--gm-panel-2);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#duel-card .cd-card .cd-art { max-width: 96px; }
.cd-card__name {
  font-family: "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cd-card__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(7, 9, 31, 0.55);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-muted);
}
.cd-card__state { color: var(--gm-green); }
.cd-card__note { color: var(--gm-violet); }

#duel-card .cd-card:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--card);
  box-shadow: 0 0 22px color-mix(in srgb, var(--card) 45%, transparent);
}
#duel-card .cd-card.is-picked {
  border-color: var(--card);
  box-shadow: 0 0 28px color-mix(in srgb, var(--card) 60%, transparent);
}
#duel-card .cd-card.is-picked .cd-card__state { color: var(--card); }
#duel-card .cd-card.is-burning { border-color: var(--gm-red); }
#duel-card .cd-card.is-burning .cd-card__plate { color: var(--gm-red); }
/* Spent cards stay on the table: a hand you can see shrinking is the game. */
#duel-card .cd-card.is-spent { opacity: 0.34; cursor: not-allowed; }
#duel-card .cd-card.is-spent .cd-card__state { color: var(--gm-muted); }
#duel-card .cd-card:disabled { cursor: not-allowed; }

/* --- the two commits ----------------------------------------------------- */

.cd-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#duel-card .cd-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 200px;
  padding: 11px 26px;
  border: 0;
  border-radius: var(--gm-radius-md);
  background: linear-gradient(180deg, #ffd85a, var(--gm-yellow));
  color: #241a05;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 210, 28, 0.26);
}
#duel-card .cd-lock strong {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#duel-card .cd-lock span { font-size: 0.7rem; font-weight: 700; opacity: 0.75; }
#duel-card .cd-lock:disabled {
  background: rgba(122, 140, 255, 0.14);
  color: var(--gm-muted);
  box-shadow: none;
  cursor: not-allowed;
}
#duel-card .cd-clear {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-md);
  background: rgba(122, 140, 255, 0.12);
  color: var(--gm-text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}
#duel-card .cd-clear:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- the strategy beat ---------------------------------------------------- */

.cd-strategy { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
#duel-card .cd-choice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 210px;
  padding: 14px 20px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-md);
  background: var(--gm-panel-2);
  color: var(--gm-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
#duel-card .cd-choice strong { font-size: 1rem; font-weight: 900; }
#duel-card .cd-choice span { font-size: 0.74rem; color: var(--gm-muted); }
#duel-card .cd-choice:hover:not(:disabled) { border-color: var(--gm-cyan); }
#duel-card .cd-choice--sacrifice { border-color: rgba(169, 112, 255, 0.5); }
#duel-card .cd-choice--sacrifice strong { color: var(--cd-assassin); }
#duel-card .cd-choice:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- the Grandmaster's copy ----------------------------------------------- */

/* A watcher gets no hand and no controls, so the columns that exist to be
   acted on go with them. */
#view-leader .cd-body { grid-template-columns: minmax(0, 1fr); }
#view-leader .cd-rules,
#view-leader .cd-watch { display: none; }
#view-leader .cd-top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
#view-leader .cd-title h2 { font-size: 1rem; }
#view-leader .cd-pick__face { min-height: 96px; }
#view-leader .cd-pick__face .cd-art { max-width: 56px; }

/* --- responsive ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .cd-body { grid-template-columns: minmax(0, 1fr); }
  .cd-rules__list { columns: 2; }
}
@media (max-width: 619px) {
  .cd-top { grid-template-columns: minmax(0, 1fr); }
  .cd-hand { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  .cd-rules__list { columns: 1; }
}