/* ============================================================
   UNTIL IT BREAKS — MINIMAL / FLAT restyle (loaded last)
   Philosophy: progressive disclosure. Show only essentials on the
   board; push every detail into the auto-pop hover tooltip. Flat
   surfaces distinguished by soft tint (not strokes/high contrast),
   colour-coded by type. Nothing blends: elements keep a quiet fill.
   ============================================================ */

:root {
  /* softer, flatter surface tokens */
  --flat-1: rgba(255, 255, 255, 0.028);   /* base surface */
  --flat-2: rgba(255, 255, 255, 0.05);    /* raised surface */
  --flat-3: rgba(255, 255, 255, 0.085);   /* hover / active */
  --flat-line: rgba(255, 255, 255, 0.06); /* hairline separators only */
  --ink: #e6ecf5;
  --ink-dim: #93a1b8;
  --ink-faint: #5f6d86;
}

/* subtler ambience — less noise behind a flat UI */
#scanlines { opacity: 0.35; }
body { background:
  radial-gradient(1100px 640px at 74% -12%, rgba(40, 62, 110, 0.18), transparent 62%),
  radial-gradient(820px 560px at 6% 112%, rgba(120, 60, 30, 0.09), transparent 60%),
  var(--bg0); }

/* ---------- flatten every panel: fill, no hard borders/glow ---------- */
#screen-game .panel,
#firewall-panel, #heat-panel, #log-panel, #slots-panel,
#preview-panel, #echips-panel, #roster-panel, #spikes-panel {
  background: var(--flat-1) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 14px !important;
}

/* quiet, smaller panel titles; hide the verbose hint sublabels entirely */
#screen-game .panel-title {
  color: var(--ink-faint) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 8px !important;
}
#slot-cap-note, #tp-summary, #type-card-summary,
#screen-game .zone-hint { display: none !important; }
#play-area .zone-label,
#type-hand-area .zone-label { display: none !important; }

/* the AI bar: flatten */
#ai-bar {
  background: linear-gradient(180deg, rgba(16, 24, 42, 0.55), rgba(10, 14, 22, 0.2)) !important;
  border-bottom: 1px solid var(--flat-line) !important;
}
.ai-status { color: var(--ink-faint) !important; }

/* rule chips → quiet pills (detail in tooltip) */
.rule-chip {
  background: var(--flat-2) !important;
  border: none !important;
  color: var(--ink-dim) !important;
  border-radius: 999px !important;
}
.rule-chip.quirk.muted { opacity: 0.4; }

/* counters: flat */
.counter-label { color: var(--ink-faint) !important; }

/* ============================================================
   BARS (firewall HP, heat) — flat fills, no inset stroke
   ============================================================ */
.bar {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.fw-bar .bar-fill { box-shadow: none !important; }
.bar-text { font-weight: 600 !important; letter-spacing: 0.04em !important; }
.heat-marker { background: rgba(255, 255, 255, 0.18) !important; }
#heat-panel .heat-note { color: var(--ink-dim) !important; }

/* firewall: hide the wordy name + type chip → keep the bar only (name in tooltip) */
#firewall-panel .fw-name { display: none !important; }
#firewall-panel .panel-title .fw-type { display: none !important; }

/* ============================================================
   BARRIER — just the suit icons. Everything else → tooltip.
   ============================================================ */
.barrier-inline {
  margin-top: 10px !important;
  padding: 8px 4px 2px !important;
  border-top: 1px solid var(--flat-line);
  cursor: help;
}
.barrier-inline .barrier-head,
.barrier-inline .barrier-mid,
.barrier-inline .routing,
.barrier-inline .barrier-spoof { display: none !important; }
.barrier-inline .b-hearts { display: flex !important; flex-wrap: wrap; gap: 5px !important; margin: 0 !important; }
.barrier-inline .b-token {
  font-size: 17px !important;
  opacity: 0.28;
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}
.barrier-inline .b-token.lit { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
.barrier-inline.broken { opacity: 0.4; }
.barrier-inline.broken .b-hearts::after { content: "broken"; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.1em; }

/* ============================================================
   CREW SLOTS — minimal: fill tube + type colour + stars +
   avatar (crewed) + action buttons (ready). All numbers/labels
   hidden; detail lives in the tooltip.
   ============================================================ */
.crew-slot {
  background: var(--flat-1) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1.5px var(--flat-line) !important;
  border-radius: 12px !important;
  cursor: help;
}
.crew-slot.has-charge { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 45%, transparent) !important; }
.crew-slot.has-crew { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 60%, transparent) !important; }
.crew-slot.locked { opacity: 0.4; }
.crew-slot .slot-fill {
  opacity: 0.5;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 60%, transparent), color-mix(in srgb, var(--tc) 24%, transparent)) !important;
}

/* hide slot chrome text */
.slot-num, .slot-charge-text, .slot-empty-label,
.slot-ready-label, .slot-pending-actions, .sc-name, .sc-charge, .sc-cd,
.sc-req-pending { display: none !important; }

/* empty slot: only the CHANGE TYPE control, quiet. Locked slots show
   nothing (dimmed + tooltip explains). */
.slot-type-btn {
  position: absolute; bottom: 8px; left: 8px; right: 8px;
  background: var(--flat-2) !important;
  border: none !important;
  color: var(--ink-dim) !important;
  border-radius: 8px !important;
  font-size: 9px !important;
  padding: 5px 4px !important;
  min-height: 0 !important;
}
.crew-slot.locked .slot-type-btn { display: none !important; }
.crew-slot.locked::after {
  content: "🔒"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; opacity: 0.5;
}

/* ready slot: three clean minimal buttons */
.slot-actions { gap: 5px !important; }
.slot-btn {
  background: var(--flat-2) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.slot-btn.sb-call { color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 16%, transparent) !important; }
.slot-btn.sb-upg  { color: var(--tc) !important; }
.slot-btn.sb-purge { color: var(--ink-faint) !important; }
.slot-btn:disabled { opacity: 0.3; }

/* crewed slot: big centered avatar only */
.slot-crew { gap: 0 !important; }
.slot-crew .sc-avatar {
  width: 60px !important; height: 60px !important;
  border-radius: 16px !important;
  border: none !important;
  background: color-mix(in srgb, var(--tc) 20%, var(--bg1)) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--tc) 30%, transparent) !important;
  font-size: 22px !important;
}
/* charge readiness as a quiet ring on the avatar, not text */
.crew-slot.armed .slot-crew .sc-avatar { box-shadow: 0 0 0 2px var(--gold), 0 0 20px var(--gold-deep) !important; }
.crew-slot.req-pending .slot-crew .sc-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 70%, transparent) !important; }

.slot-stars { top: 5px !important; }
.slot-stars .star-on { color: var(--gold) !important; }
.slot-stars .star-off { color: rgba(255,255,255,0.12) !important; }

/* STANDBY crew (act type): waits for its requirement before firing.
   Small persistent ⏸ marker so the mechanic is discoverable (detail in tooltip). */
.crew-slot.has-crew.act-standby::before {
  content: "⏸";
  position: absolute; top: 4px; right: 6px; z-index: 3;
  font-size: 11px; color: var(--gold); opacity: 0.85;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Team Work! / synergy link between two chained SURGE·LUCK slots */
.synergy-arrow {
  position: absolute; top: 50%; right: -11px; z-index: 6;
  transform: translateY(-50%);
  font-size: 15px; color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 215, 94, 0.7);
  pointer-events: none;
  animation: synArrowPulse 1.2s ease-in-out infinite;
}
.synergy-arrow.live { color: #fff; text-shadow: 0 0 12px var(--gold), 0 0 20px var(--gold-deep); }
@keyframes synArrowPulse { 0%,100% { opacity: 0.6; transform: translateY(-50%) translateX(-2px); } 50% { opacity: 1; transform: translateY(-50%) translateX(2px); } }

/* ============================================================
   ROSTER — avatars only, wrap grid. Detail → tooltip.
   ============================================================ */
#roster-list { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.roster-crew {
  width: 46px; height: 46px;
  padding: 0 !important;
  border: none !important;
  border-left: none !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--tc) 16%, var(--flat-1)) !important;
  display: flex; align-items: center; justify-content: center;
  cursor: help;
  transition: transform 0.14s, box-shadow 0.2s;
}
.roster-crew:hover { transform: translateY(-2px); box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 40%, transparent); }
.roster-crew.used { opacity: 0.3; }
.roster-crew .rc-head { gap: 0 !important; }
.roster-crew .rc-avatar {
  width: 34px !important; height: 34px !important;
  border: none !important;
  background: transparent !important;
  color: var(--tc) !important;
  font-size: 14px !important;
}
.roster-crew .rc-name, .roster-crew .rc-meta, .roster-crew .rc-ability,
.roster-crew.used::after { display: none !important; }

/* spikes: compact quiet chips (name only; effect in tooltip) */
.spike-chip {
  background: var(--flat-2) !important;
  border: none !important;
  border-left: none !important;
  border-radius: 10px !important;
  cursor: help;
}
.spike-chip .sp-effect { display: none !important; }
.spike-chip .sp-name { color: var(--gold) !important; }

/* e-chips: big flat number */
.echips-counter { color: var(--gold) !important; text-shadow: 0 0 18px rgba(255,215,94,0.35); }

/* ============================================================
   POKER CARDS — flatter faces, softer selection
   ============================================================ */
.tcard {
  background: linear-gradient(170deg, #182234, #10182a) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px var(--flat-line) !important;
  border-radius: 10px !important;
}
.tcard.selected {
  box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 20px rgba(255,215,94,0.28) !important;
}
.tcard .tc-pts { display: none !important; } /* value is the big rank; detail in tooltip */
.tcard.scoring::after { color: var(--gold) !important; }

/* ============================================================
   TROJAN CARDS — big bold type symbol + size. Rest → tooltip.
   (render emits .tm-symbol / .tm-size; effect lines hidden.)
   ============================================================ */
.type-card {
  border: none !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 55%, transparent) !important;
  background:
    radial-gradient(120% 90% at 50% 12%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%),
    #0c1220 !important;
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  grid-template: none !important;
  cursor: pointer;
}
.type-card.selected { box-shadow: inset 0 0 0 2px var(--gold), 0 0 20px rgba(255,215,94,0.3) !important; }
/* hide the old busy internals */
.type-card-top, .type-card-name, .type-card-direct, .type-card-effect,
.type-card-size, .type-card-points { display: none !important; }
/* new minimal face */
.tm-symbol { font-size: 34px; line-height: 1; color: var(--tc); text-shadow: 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); }
.tm-size {
  font-family: var(--mono); font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  color: #071018; background: var(--tc);
  border-radius: 7px; padding: 1px 8px;
}
.type-card-float { z-index: 20; }
.type-card-slot {
  border: none !important;
  box-shadow: inset 0 0 0 1.5px var(--flat-line) !important;
  background: var(--flat-1) !important;
  color: var(--ink-faint) !important;
  font-size: 0 !important;   /* hide "TROJAN SLOT" text */
}
.type-card-slot::after { content: "+"; font-size: 18px; opacity: 0.4; }

/* ============================================================
   PLAY AREA — now an empty stage for resolution banners.
   ============================================================ */
#play-area {
  min-height: 92px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
#tp-bars-play { display: none !important; } /* legacy, moved to precalc */

/* ============================================================
   PRECALC PANEL — three clean stat groups only.
   BASE (cards) · POKER HAND · TROJAN by type.  Detail → tooltip.
   ============================================================ */
/* ---------- TARGET STRIP: Firewall + Barrier + Heat above the crew slots ---------- */
#target-strip {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
#target-strip #firewall-panel { flex: 1 1 auto; padding: 10px 14px !important; }
#target-strip #heat-panel { flex: 0 0 340px; padding: 10px 14px !important; }
/* barrier icons sit inline to the right of the FIREWALL title row, compact */
#firewall-panel .barrier-inline { margin-top: 8px !important; }

/* ---------- PRECALC: centered, charges stacked centered below ---------- */
#preview-panel {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
#preview-main { width: 100%; display: flex; justify-content: center; }
#preview-panel #tp-bars { justify-content: center; }
#preview-warnings { width: 100%; text-align: center; }
.precalc {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  cursor: help;
}
.precalc-group {
  background: var(--flat-2);
  border-radius: 12px;
  padding: 9px 14px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 92px;
}
.precalc-group .pg-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--ink-faint);
}
.precalc-group .pg-value {
  font-family: var(--mono); font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--ink);
}
.precalc-group.pg-hand .pg-value { color: var(--gold); }
.precalc-group .pg-sub {
  font-family: var(--mono); font-size: 10px; color: var(--ink-dim);
}

/* trojan group: three type sub-tiles (repurposed #tp-bars) */
.precalc-group.pg-trojan { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
#tp-bars { display: flex; gap: 8px; }
.tp-bar {
  background: color-mix(in srgb, var(--tc) 14%, transparent) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  display: flex !important; flex-direction: column; align-items: center; gap: 1px;
  min-width: 54px;
}
.tp-bar .tp-label { font-size: 13px !important; line-height: 1; color: var(--tc) !important; letter-spacing: 0 !important; }
.tp-bar .tp-val { font-family: var(--mono); font-size: 20px !important; font-weight: 800 !important; color: var(--tc) !important; text-shadow: none !important; }
.tp-bar.zero { opacity: 0.32; }
.tp-bar.zero .tp-val { color: var(--ink-faint) !important; }

/* precalc empty prompt */
#preview-main .pv-empty { color: var(--ink-faint) !important; }
/* only critical warnings stay visible; rest live in the precalc tooltip */
#preview-warnings .pv-warn:not(.critical) { display: none !important; }
#preview-warnings .pv-warn.critical { color: var(--red) !important; }

/* ============================================================
   TOOLTIP — flat card, clear title→meta→body hierarchy,
   colour-coded effect lines (green good / red bad), keywords bold.
   ============================================================ */
#tooltip {
  background: rgba(12, 17, 28, 0.98) !important;
  border: 1px solid var(--flat-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6) !important;
  padding: 12px 14px !important;
  max-width: 320px !important;
  line-height: 1.5;
}
#tooltip .tip-title { font-size: 14px !important; font-weight: 800 !important; color: var(--ink) !important; margin-bottom: 3px !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#tooltip .tip-meta { font-family: var(--mono) !important; font-size: 10px !important; letter-spacing: 0.06em !important; color: var(--ink-faint) !important; margin-bottom: 8px !important; }
#tooltip .tip-body { font-size: 12.5px !important; color: var(--ink-dim) !important; }
#tooltip .tip-body + .tip-body { margin-top: 6px; }
#tooltip .tip-body b { color: var(--ink) !important; font-weight: 700; }
#tooltip .tip-check { color: var(--green) !important; }
#tooltip .tip-pending, #tooltip .tip-warn { color: var(--orange) !important; }
#tooltip .tip-bad { color: var(--red) !important; }
#tooltip .tip-status { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--flat-line); }
.type-badge { border: none !important; background: color-mix(in srgb, var(--tc) 20%, transparent) !important; }

/* precalc tooltip: damage + all the badges the board no longer shows */
.pc-tip-dmg { font-size: 20px !important; font-weight: 800; color: var(--orange); }
.pc-tip-row { display: flex; justify-content: space-between; gap: 16px; }
.pc-tip-row .k { color: var(--ink-faint); }
.pc-tip-row .v { color: var(--ink); font-family: var(--mono); }

/* ============================================================
   BUTTONS — flatter
   ============================================================ */
.btn {
  border: none !important;
  background: var(--flat-2) !important;
  color: var(--ink-dim) !important;
  border-radius: 10px !important;
}
.btn:hover:not(:disabled) { background: var(--flat-3) !important; transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, #4a3a14, #2e2409) !important; color: var(--gold) !important; }
.btn-red { background: color-mix(in srgb, var(--red) 14%, transparent) !important; color: var(--red) !important; }
.btn.step-on { color: var(--crypto) !important; }

/* event log: quieter */
#event-log { color: var(--ink-dim); }
.log-entry { border-left-width: 2px; }