/* ============================================================
   ROYAL HEIST — components: cards, payloads, crew, spikes,
   bars, rule chips, log entries, preview, prep widgets
   ============================================================ */

/* ================= Trojan cards ================= */
.tcard {
  position: relative;
  width: 72px; height: 102px;
  margin: 0 -7px;               /* fanned overlap */
  background: linear-gradient(165deg, #131c2e, #0c1220);
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  display: flex; flex-direction: column;
  padding: 6px 7px;
  user-select: none;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  flex-shrink: 1;
}
.tcard:hover { transform: translateY(-9px); z-index: 5; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.tcard.selected {
  transform: translateY(-18px);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(255, 215, 94, 0.35), 0 12px 26px rgba(0, 0, 0, 0.55);
  z-index: 6;
}
.tcard.selected:hover { transform: translateY(-21px); }

.tcard .tc-rank { font-family: var(--mono); font-size: 19px; font-weight: 700; line-height: 1; }
.tcard .tc-suit { font-size: 13px; line-height: 1.25; }
.tcard .tc-pts {
  margin-top: auto;
  font-family: var(--mono); font-size: 9px;
  color: var(--faint);
  text-align: right;
}
.tcard .tc-pts b { color: var(--dim); font-size: 11px; }
.tcard .tc-big {
  position: absolute; right: 7px; top: 32px;
  font-size: 26px; opacity: 0.3;
}

.tcard.hearts   .tc-rank, .tcard.hearts   .tc-suit, .tcard.hearts   .tc-big { color: var(--hearts); }
.tcard.diamonds .tc-rank, .tcard.diamonds .tc-suit, .tcard.diamonds .tc-big { color: var(--diamonds); }
.tcard.clubs    .tc-rank, .tcard.clubs    .tc-suit, .tcard.clubs    .tc-big { color: var(--clubs); }
.tcard.spades   .tc-rank, .tcard.spades   .tc-suit, .tcard.spades   .tc-big { color: var(--spades); }

/* Hearts glow while Barrier is active (spec) */
.tcard.barrier-hint { border-color: rgba(255, 93, 122, 0.55); }
.tcard.barrier-hint::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 93, 122, 0.35);
  animation: heartPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

/* Napkins */
.tcard.napkin {
  background: repeating-linear-gradient(135deg, #1c1a14, #1c1a14 6px, #171511 6px, #171511 12px);
  border-color: #4d4430;
}
.tcard.napkin .tc-rank { font-size: 10px; color: var(--orange); letter-spacing: 0.05em; }
.tcard.napkin .tc-suit { color: #7a6c48; font-size: 10px; }
.tcard.napkin .tc-big { color: var(--orange); opacity: 0.4; }

/* Temporary / boosted markers */
.tc-tag {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 8px; white-space: nowrap;
  padding: 1px 6px; border-radius: 8px;
  background: #0a2a1c; color: var(--green); border: 1px solid #1d5c3c;
  z-index: 3;
}
.tc-tag.tag-suit { background: #0a2333; color: var(--cyan); border-color: #1d4a5c; }
.tc-tag.tag-temp { background: #2a2408; color: var(--gold); border-color: #5c521d; }

.tcard.watched { border-color: rgba(63, 217, 255, 0.4); }

/* ================= Payload cards ================= */
.pcard {
  position: relative;
  width: 128px; min-height: 86px;
  background: linear-gradient(170deg, #141b2c, #0d1322);
  border: 1px solid var(--line-bright);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 7px 8px 6px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  display: flex; flex-direction: column; gap: 3px;
  flex-shrink: 0;
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); z-index: 4; }
.pcard.in-sequence { opacity: 0.35; pointer-events: none; }

.pcard .pc-name { font-size: 12.5px; font-weight: 800; line-height: 1.15; padding-right: 18px; }
.pcard .pc-cat {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em;
  display: flex; gap: 5px; align-items: center;
}
.pcard .pc-effect { font-size: 9.5px; color: var(--dim); line-height: 1.3; }
.pcard .pc-src { margin-top: auto; font-family: var(--mono); font-size: 8px; color: var(--faint); }

.cat-damage    { --cat: var(--orange); }
.cat-cardmanip { --cat: var(--cyan); }
.cat-economy   { --cat: var(--gold); }
.cat-crew      { --cat: var(--pink); }
.cat-heat      { --cat: #58b6ff; }
.cat-defense   { --cat: var(--purple); }
.cat-emergency { --cat: var(--red); }

.pcard { border-left-color: var(--cat, var(--line-bright)); }
.pcard .pc-cat { color: var(--cat, var(--dim)); }

.pcard.emergency {
  border-style: dashed;
  cursor: default;
  background: linear-gradient(170deg, #1d1218, #140d16);
}
.pcard.emergency .auto-chip {
  position: absolute; top: -8px; right: 6px;
  font-family: var(--mono); font-size: 8px;
  background: #33121a; color: var(--red); border: 1px solid #6e2733;
  border-radius: 8px; padding: 1px 6px;
  animation: heartPulse 2.4s ease-in-out infinite;
}

.pc-discard {
  position: absolute; top: 3px; right: 5px;
  font-size: 11px; color: var(--dim);
  background: rgba(10, 14, 22, 0.7);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; cursor: pointer;
  opacity: 0.75; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s;
}
.pcard:hover .pc-discard { opacity: 1; }
.pc-discard:hover { color: var(--red); border-color: #6e2733; }

/* --- payload sequence slots --- */
.seq-slot {
  width: 128px; min-height: 100px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 15px; color: var(--faint);
  position: relative;
  transition: border-color 0.2s ease;
}
.seq-slot.filled { border-style: solid; border-color: transparent; padding: 0; }
.seq-slot.filled .pcard { width: 100%; min-height: 100px; margin: 0; }

.seq-slot .slot-num {
  position: absolute; top: -9px; left: 8px;
  font-size: 9px; letter-spacing: 0.1em;
  background: var(--bg0); padding: 0 5px; border-radius: 4px;
  color: var(--faint); z-index: 2;
}

.seq-move {
  position: absolute; bottom: 3px;
  font-size: 11px; padding: 1px 6px;
  background: rgba(10, 14, 22, 0.85); border: 1px solid var(--line);
  border-radius: 6px; color: var(--dim);
  z-index: 3;
  transition: color 0.15s, border-color 0.15s;
}
.seq-move:hover { color: var(--gold); border-color: var(--gold-deep); }
.seq-move.mv-left { left: 4px; }
.seq-move.mv-right { right: 4px; }

/* Damage-chain bracket under contiguous damage payloads */
.seq-slot.chain-member::after {
  content: "";
  position: absolute; left: -5px; right: -5px; bottom: -8px;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--red));
  box-shadow: 0 0 8px rgba(255, 159, 67, 0.5);
}
.seq-slot.chain-start::after { left: 2px; }
.seq-slot.chain-end::after { right: 2px; }

.chain-label {
  font-family: var(--mono); font-size: 9px; color: var(--orange);
  letter-spacing: 0.1em; padding-left: 4px; margin-top: 10px;
}

/* ================= Crew tiles ================= */
.crew-tile {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
  padding: 8px 9px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s;
  position: relative;
}
.crew-tile:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.crew-tile.selected {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 16px rgba(255, 215, 94, 0.14);
}
.crew-tile.selected::before {
  content: "✓";
  position: absolute; top: 6px; right: 8px;
  color: var(--gold); font-size: 12px; font-weight: 700;
}
.crew-tile.locked { opacity: 0.4; cursor: not-allowed; }

.crew-name { font-size: 13.5px; font-weight: 800; padding-right: 16px; }
.crew-fams { display: inline-flex; gap: 4px; margin: 3px 0 4px; }
.fam-chip {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  border-radius: 8px; padding: 1px 6px;
}
.fam-SURGE  { background: #33170f; color: var(--orange); border: 1px solid #6e3220; }
.fam-LUCK   { background: #2c2408; color: var(--gold);   border: 1px solid #5c521d; }
.fam-CRYPTO { background: #101c33; color: var(--cyan);   border: 1px solid #1d4a5c; }

.crew-req { font-size: 10px; color: var(--dim); line-height: 1.35; }
.crew-payload-line { font-size: 10px; margin-top: 4px; line-height: 1.35; }
.crew-payload-line b { color: var(--cat, var(--text)); }
.crew-meta { font-family: var(--mono); font-size: 8.5px; color: var(--faint); margin-top: 4px; display: flex; gap: 8px; }

/* --- in-game crew rows --- */
.crew-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--bg2);
  position: relative;
  transition: border-color 0.25s ease, opacity 0.3s ease, box-shadow 0.25s ease;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: start;
}
.crew-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(160deg, #22314d, #101726);
  border: 1px solid var(--line-bright);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.28);
}
.crew-row .crew-body { min-width: 0; }
.crew-row .crew-name { font-size: 11.5px; }
.crew-row .crew-req { font-size: 9px; margin-top: 2px; }
.crew-row.disconnected { opacity: 0.38; }
.crew-row.cooldown { opacity: 0.65; }

.crew-state {
  position: absolute; top: 6px; right: 7px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em;
  padding: 1px 6px; border-radius: 8px;
}
.state-Ready        { background: #0a2a1c; color: var(--green); border: 1px solid #1d5c3c; }
.state-Cooldown     { background: #2c2408; color: var(--gold);  border: 1px solid #5c521d; }
.state-Disconnected { background: #33121a; color: var(--red);   border: 1px solid #6e2733; }

.req-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; background: var(--faint);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.req-dot.ok { background: var(--green); box-shadow: 0 0 7px rgba(65, 245, 143, 0.7); }

/* ================= Spikes ================= */
.spike-chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
  padding: 6px 9px;
  cursor: pointer;
  max-width: 250px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.spike-chip:hover { border-color: var(--line-bright); }
.spike-chip.selected { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(63, 217, 255, 0.4), 0 0 12px rgba(63, 217, 255, 0.12); }
.spike-chip.locked { opacity: 0.4; cursor: not-allowed; }
.spike-name { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--cyan); }
.spike-effect { font-size: 9px; color: var(--dim); line-height: 1.3; }

/* in-game spike rows */
.spike-row {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 8px; margin-bottom: 5px; background: var(--bg2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
}
.spike-row.triggered { border-color: var(--cyan); box-shadow: 0 0 10px rgba(63, 217, 255, 0.18); }
.spike-row .spike-name { font-size: 10px; }
.spike-row .spike-status { font-family: var(--mono); font-size: 8.5px; color: var(--faint); margin-top: 1px; }
.spike-row .spike-status.on { color: var(--cyan); }
.spike-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--cyan);
  background: linear-gradient(160deg, #0f1d2e, #0a111d);
  border: 1px solid rgba(63, 217, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 0 12px rgba(63, 217, 255, 0.08);
}
.spike-copy { min-width: 0; }

/* ================= Rule chips (AI bar) ================= */
.rule-chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em;
  border-radius: 14px; padding: 3px 10px;
  border: 1px solid var(--line-bright);
  color: var(--dim); background: var(--bg2);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.25s;
  cursor: help;
}
.rule-chip.quirk { border-color: #4a2d5c; color: var(--purple); }
.rule-chip.quirk.fired { border-color: var(--purple); box-shadow: 0 0 12px rgba(176, 107, 255, 0.35); }
.rule-chip.muted { opacity: 0.4; text-decoration: line-through; }
.rule-chip.barrier-chip { border-color: #5c2733; color: var(--hearts); }

/* ================= AI eye ================= */
.ai-eye {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #241b38, #0d0a16 70%);
  border: 2px solid #3c2d5c;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 0 18px rgba(176, 107, 255, 0.25), inset 0 0 12px rgba(0, 0, 0, 0.7);
}
.ai-pupil {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--purple), #4a1d7a);
  box-shadow: 0 0 12px var(--purple);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, width 0.3s, height 0.3s;
}
.ai-eye.hit .ai-pupil { background: radial-gradient(circle at 40% 40%, var(--red), #7a1d2c); box-shadow: 0 0 14px var(--red); }
.ai-eye.shut { border-color: #6e2733; }
.ai-eye.shut .ai-pupil { transform: scaleY(0.08); }

/* ================= Bars ================= */
.bar {
  position: relative;
  height: 22px;
  background: #070b12;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.bar-fill {
  position: absolute; inset: 0;
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.bar-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  z-index: 2;
}

.fw-bar { height: 26px; }
.fw-bar .bar-fill { background: linear-gradient(90deg, #b8860b, var(--gold)); box-shadow: 0 0 14px rgba(255, 215, 94, 0.25); }
.fw-name { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.fw-type { font-size: 9px; color: var(--orange); border: 1px solid #6e3220; border-radius: 8px; padding: 0 6px; }
.fw-rule { font-size: 10px; color: var(--dim); margin-top: 7px; line-height: 1.4; }

.heat-bar .bar-fill { background: linear-gradient(90deg, #2c72ff, #ff9f43 60%, var(--red)); }
.heat-marker {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255, 255, 255, 0.35); z-index: 3;
}
.heat-preview {
  position: absolute; top: 0; bottom: 0; width: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 4px, transparent 4px 8px);
  z-index: 2; opacity: 0.8;
  transition: left 0.3s ease, width 0.3s ease;
}
.heat-preview.relief { background: repeating-linear-gradient(45deg, rgba(65,245,143,0.5) 0 4px, transparent 4px 8px); }
#heat-pct { font-size: 13px; color: var(--text); }
.heat-note { font-family: var(--mono); font-size: 9.5px; margin-top: 6px; color: var(--dim); min-height: 13px; }

#heat-panel.warn .panel-title, #heat-panel.warn #heat-pct { color: var(--orange); }
#heat-panel.danger .panel-title, #heat-panel.danger #heat-pct { color: var(--red); }

/* ================= Barrier panel ================= */
#barrier-panel .panel-title { color: var(--hearts); }
.barrier-hearts { display: flex; gap: 4px; margin: 4px 0 8px; flex-wrap: wrap; }
.b-heart {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #33202a;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s;
}
.b-heart.lit { color: var(--hearts); text-shadow: 0 0 9px rgba(255, 93, 122, 0.8); }
.barrier-status { font-size: 10px; color: var(--dim); line-height: 1.4; }
.routing {
  margin-top: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em;
  padding: 5px 8px; border-radius: 6px;
  border: 1px solid #5c2733; color: var(--hearts); background: rgba(60, 16, 26, 0.3);
}
.routing.full { border-color: #1d5c3c; color: var(--green); background: rgba(10, 42, 28, 0.3); }
#barrier-panel.broken { opacity: 0.55; }
#barrier-panel.broken .panel-title { color: var(--faint); text-decoration: line-through; }
#barrier-panel.spoofed { border-color: #4a2d5c; }

/* ================= Counters / misc ================= */
.counters-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.mini-counter { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); }
.mini-counter b { font-family: var(--mono); color: var(--text); font-weight: 500; }

/* ================= Scoring preview ================= */
.pv-empty { color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 10px 0; text-align: center; }

.pv-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pv-hand {
  font-family: var(--mono); font-size: 27px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255, 215, 94, 0.35);
}
.pv-formula { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.pv-formula b { color: var(--text); font-weight: 700; font-size: 15px; }
.pv-formula .chips-c { color: var(--cyan); }
.pv-formula .mult-c { color: var(--orange); }
.pv-final { font-family: var(--mono); font-size: 32px; font-weight: 800; color: #fff; text-shadow: 0 0 18px rgba(255, 159, 67, 0.4); }

.pv-scorenote { font-size: 12px; color: var(--orange); margin-top: 6px; font-weight: 600; }
.pv-scorenote.ok { color: var(--green); font-weight: 400; opacity: 0.8; }
.pv-badge.big { font-size: 12px; padding: 4px 12px; font-weight: 700; }

.pv-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.pv-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  border-radius: 10px; padding: 2px 8px; border: 1px solid var(--line-bright); color: var(--dim);
}
.pv-badge.dmg   { border-color: #6e3220; color: var(--orange); }
.pv-badge.red   { border-color: #6e2733; color: var(--red); }
.pv-badge.grn   { border-color: #1d5c3c; color: var(--green); }
.pv-badge.cyn   { border-color: #1d4a5c; color: var(--cyan); }
.pv-badge.gld   { border-color: #5c521d; color: var(--gold); }
.pv-badge.hrt   { border-color: #5c2733; color: var(--hearts); }

#preview-warnings { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.pv-warn {
  font-size: 10px; color: var(--orange);
  padding-left: 16px; position: relative; line-height: 1.35;
}
.pv-warn::before { content: "⚠"; position: absolute; left: 2px; }
.pv-warn.critical { color: var(--red); font-weight: 600; }

/* ================= Payload hand zone ================= */
#payload-hand { display: flex; flex-wrap: wrap; gap: 6px; min-height: 90px; }
#payload-hand .pcard { width: calc(50% - 3px); }
#payload-queue-note { font-family: var(--mono); font-size: 9px; color: var(--faint); margin-top: 6px; min-height: 12px; }
#payload-queue-note.full { color: var(--orange); }
#center #payload-panel { margin-top: 10px; }
#center #payload-panel .panel-title { margin-bottom: 10px; }
#center #payload-hand { gap: 8px; }
#center #payload-hand .pcard { width: 128px; }

/* ================= Event log ================= */
.log-entry { padding: 1px 0; border-left: 2px solid transparent; padding-left: 7px; margin-bottom: 1px; }
.log-entry .log-t { color: var(--faint); margin-right: 5px; }
.log-dmg   { border-left-color: var(--orange); color: #ffc9a0; }
.log-heat  { border-left-color: var(--red); color: #ff9aa5; }
.log-cool  { border-left-color: #58b6ff; color: #9fd4ff; }
.log-eco   { border-left-color: var(--gold); color: #ffe9a8; }
.log-gen   { border-left-color: var(--green); color: #a5f5c8; }
.log-ai    { border-left-color: var(--purple); color: #d4b3ff; }
.log-spike { border-left-color: var(--cyan); color: #a8e9ff; }
.log-sys   { color: var(--dim); }
.log-win   { border-left-color: var(--gold); color: var(--gold); font-weight: 700; }
.log-lose  { border-left-color: var(--red); color: var(--red); font-weight: 700; }

/* ================= Prep briefing / rules ================= */
.brief-item { margin-bottom: 10px; }
.brief-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--dim); }
.brief-value { font-size: 13.5px; font-weight: 600; margin-top: 1px; line-height: 1.4; }
.brief-value.gold { color: var(--gold); font-family: var(--mono); font-size: 16px; }
.brief-value.red { color: var(--red); }
.brief-value.green { color: var(--green); }

.rule-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 10px 12px; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.rule-panel h3 { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 6px; }
.rule-panel ul { list-style: none; }
.rule-panel li { font-size: 11px; color: var(--dim); line-height: 1.5; padding-left: 12px; position: relative; }
.rule-panel li::before { content: "›"; position: absolute; left: 0; color: var(--faint); }
.rule-panel li b { color: var(--text); font-weight: 600; }
.rule-panel.hl { border-color: var(--gold-deep); box-shadow: 0 0 16px rgba(255, 215, 94, 0.12); }

.rp-quirk h3 { color: var(--purple); }
.rp-barrier h3 { color: var(--hearts); }
.rp-heat h3 { color: var(--orange); }
.rp-echips h3 { color: var(--gold); }
.rp-defense h3 { color: var(--cyan); }

/* ================= Prep loadout footer ================= */
.loadout-slots { display: flex; gap: 6px; }
.loadout-slot {
  width: 118px; height: 46px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; color: var(--faint);
  text-align: center; padding: 3px 6px; line-height: 1.3;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.loadout-slot.filled { border-style: solid; border-color: var(--gold-deep); color: var(--text); font-family: var(--sans); font-size: 10.5px; font-weight: 600; background: rgba(255, 215, 94, 0.05); }
.loadout-slot.spike-slot.filled { border-color: #1d4a5c; color: var(--cyan); background: rgba(63, 217, 255, 0.05); }

.loadout-tags { display: flex; gap: 5px; flex-wrap: wrap; max-width: 300px; }
.build-tag {
  font-family: var(--mono); font-size: 9px;
  border: 1px solid var(--line-bright); border-radius: 10px;
  color: var(--dim); padding: 2px 8px;
}
.loadout-warnings { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.loadout-warnings .pv-warn { font-size: 10.5px; }
.loadout-ok { color: var(--green); font-size: 11px; font-family: var(--mono); letter-spacing: 0.05em; }

/* ================= Scoring vs ignored cards ================= */
.tcard.selected.scoring::before {
  content: "●";
  position: absolute; top: 4px; right: 6px;
  color: var(--gold); font-size: 10px;
  text-shadow: 0 0 8px rgba(255, 215, 94, 0.9);
  z-index: 3;
}
.tcard.selected.ignored,
#stage .stage-tcard.ignored {
  filter: saturate(0.15) brightness(0.6);
  border-color: var(--line);
  box-shadow: none;
}
.tcard.selected.ignored::before,
#stage .stage-tcard.ignored::before {
  content: "IGNORED";
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: #b8c4d6;
  background: rgba(8, 11, 17, 0.88);
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  padding: 2px 5px;
  z-index: 4;
}
#stage .stage-tcard.scoring { box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(255, 215, 94, 0.35); border-color: var(--gold); }

/* ================= CONCAT chain-link arrows ================= */
.concat-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 30px; flex-shrink: 0;
  font-size: 17px; font-weight: 800;
  color: var(--orange);
  text-shadow: 0 0 10px rgba(255, 159, 67, 0.8);
  position: relative;
  z-index: 2;
}
.concat-arrow span {
  animation: concatMarch 0.9s linear infinite;
  letter-spacing: -1px;
}
@keyframes concatMarch {
  0% { transform: translateX(-5px); opacity: 0.45; }
  50% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(5px); opacity: 0.45; }
}
.concat-arrow.live {
  color: #fff;
  text-shadow: 0 0 16px var(--orange), 0 0 30px var(--red);
}
.concat-arrow.live span { animation-duration: 0.3s; }
.concat-arrow.fade-out { opacity: 0; transition: opacity 0.3s ease; }
#sequence-slots .concat-arrow { width: 22px; font-size: 14px; }

/* ================= Tooltip ================= */
#tooltip {
  position: fixed; z-index: 120;
  max-width: 280px;
  background: #0b1019f2;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  padding: 10px 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
  font-size: 11.5px; line-height: 1.45; color: var(--text);
}
#tooltip.visible { opacity: 1; transform: none; }
.tip-title { font-size: 13px; font-weight: 800; margin-bottom: 2px; }
.tip-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--cyan); margin-bottom: 6px; }
.tip-body { color: var(--dim); }
.tip-body b { color: var(--text); }
.tip-warn { color: var(--orange); }
.tip-dim { color: var(--faint); }
#tooltip .fam-chip { font-size: 8px; vertical-align: 2px; }

/* ================= Log de-emphasis (secondary info) ================= */
#log-panel { opacity: 0.82; }
#log-panel .panel-title { font-size: 10px; color: var(--faint); }

/* ================= Modal ================= */
.modal-title {
  font-family: var(--mono); font-size: 30px; font-weight: 800; letter-spacing: 0.14em;
  margin-bottom: 4px;
}
.modal-title.win { color: var(--gold); text-shadow: 0 0 30px rgba(255, 215, 94, 0.6); }
.modal-title.lose { color: var(--red); text-shadow: 0 0 30px rgba(255, 77, 94, 0.6); }
.modal-sub { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.1em; margin-bottom: 18px; }
.modal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; text-align: left; margin-bottom: 22px; }
.modal-stat { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); border-bottom: 1px dotted var(--line); padding-bottom: 4px; }
.modal-stat b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }