/* Original vector artwork: compact object silhouettes in equipment, illustrated
   faces in the hand. Geometry of seats and the equipment rail lives in layout.css. */
.card-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.sgs-card .card-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
  justify-items: center;
  gap: 0.12rem;
  width: 100%;
  padding: 0.75rem 0.02rem 0.55rem;
}

.sgs-card .card-body .card-art {
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.sgs-card .card-body .cname {
  grid-row: 2;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 1.07rem;
  line-height: 1.28;
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-height: none;
  overflow: visible;
  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}

.sgs-card.long-name .card-body .cname {
  font-size: 0.87rem;
  letter-spacing: 0;
}

.sgs-card .card-body .ctype {
  grid-row: 3;
  font-size: 0.58rem;
  line-height: 1.15;
  padding: 0.04rem 0.32rem;
  margin-bottom: 0.05rem;
}

.sgs-card.compact .card-body {
  gap: 0.04rem;
  padding-top: 0.45rem;
  padding-bottom: 0.4rem;
}
.sgs-card.compact .card-body .cname {
  font-size: 0.7rem;
  line-height: 1.15;
}
.sgs-card.compact.long-name .card-body .cname {
  font-size: 0.54rem;
}
.sgs-card.compact .card-body .ctype {
  font-size: 0.46rem;
  padding: 0.02rem 0.2rem;
}

.equipment-slot {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
  min-height: 64px;
  border: 1px solid rgba(190, 161, 97, 0.42);
  border-radius: 6px;
  background: linear-gradient(110deg, rgba(212, 187, 125, 0.12), rgba(15, 31, 27, 0.8));
  box-shadow: inset 0 1px rgba(229, 210, 163, 0.06);
  color: #f0e5c9;
  box-sizing: border-box;
}
.equipment-slot__summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(40px, 48px) minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 62px;
  padding: 5px 7px 5px 5px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: inherit;
  box-sizing: border-box;
}
.equipment-slot__summary::-webkit-details-marker { display: none; }
.equipment-slot__summary::marker { content: ""; }
.equipment-slot__summary:focus-visible {
  outline: 2px solid #e8c76f;
  outline-offset: 3px;
}
.equipment-slot.is-filled:hover,
.equipment-slot[open] {
  border-color: #c9aa64;
  background: linear-gradient(110deg, rgba(212, 187, 125, 0.18), rgba(18, 39, 32, 0.95));
}
.equipment-slot__art {
  display: block;
  width: 48px;
  height: 48px;
  pointer-events: none;
}
.equipment-slot__art .card-art {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}
.equipment-slot__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  line-height: 1.22;
  text-align: left;
}
.equipment-slot__label {
  color: #b6b69b;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.08em;
}
.equipment-slot__name {
  display: block;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}
.equipment-slot__stat {
  display: block;
  max-width: 100%;
  color: #d4c096;
  font-size: 9px;
  line-height: 1.3;
  white-space: normal;
}
.equipment-slot__info {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(205, 183, 128, 0.38);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 8px;
  line-height: 9px;
  text-align: center;
  color: #b5aa87;
}
.equipment-slot.is-empty {
  border-style: dashed;
  border-color: rgba(177, 181, 145, 0.2);
  background: rgba(8, 26, 22, 0.35);
  box-shadow: none;
}
.equipment-slot.is-empty .equipment-slot__art {
  opacity: 0.23;
  filter: grayscale(1);
}
.equipment-slot.is-empty .equipment-slot__name {
  font-size: 11px;
  font-weight: 400;
  color: #909f8e;
}
.equipment-slot.is-empty .equipment-slot__label { color: #9ca98e; }
.equipment-slot.is-empty .equipment-slot__stat { color: #738b7b; }
.equipment-slot[open] { z-index: 35; }
.equipment-slot__details {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: min(240px, calc(100vw - 32px));
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #b8a46b;
  border-radius: 7px;
  background: #14271f;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: #f0e5c9;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  box-sizing: border-box;
}
.equipment-slot__details > strong { font-size: 14px; color: #e8c777; }
.equipment-slot__details > span { color: #cfbc8b; }
.equipment-slot__details p { margin: 0; }
.equipment-slot__details small { font-size: 10px; color: #99aa96; }
.general-seat.self .equipment-slot__details {
  top: auto;
  bottom: calc(100% + 6px);
}
@media (prefers-reduced-motion: reduce) {
  .equipment-slot, .equipment-slot__art { transition: none; }
}

/* Local queries use each fixed slot's actual width, including 1v2 phone seats. */
.equipment-slot { container-type: inline-size; }
@container (max-width: 110px) {
  .equipment-slot__summary {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: 3px;
    min-height: 92px;
    padding: 6px 4px;
  }
  .equipment-slot__art { width: 32px; height: 29px; }
  .equipment-slot__copy { align-items: center; width: 100%; gap: 2px; text-align: center; }
  .equipment-slot__label { font-size: 8px; }
  .equipment-slot__name { white-space: normal; overflow-wrap: anywhere; font-size: 11px; line-height: 1.3; }
  .equipment-slot__stat { font-size: 8px; line-height: 1.35; }
  .equipment-slot__info { right: 3px; top: 3px; }
  .equipment-slot__details,
  .general-seat.self .equipment-slot__details {
    position: static;
    width: 100%;
    padding: 7px;
    border-width: 1px 0 0;
    border-radius: 0 0 5px 5px;
    box-shadow: none;
    font-size: 10px;
    overflow-wrap: anywhere;
  }
  .equipment-slot__details > strong { font-size: 11px; }
}

@media (max-width: 860px) {
  .sgs-card.long-name .card-body .cname { font-size: 0.72rem; }
  .sgs-card.compact.long-name .card-body .cname { font-size: 0.54rem; }
}

/* Card-resolution prompts use the existing rectangular table and bottom dock. */
.card-response-dialog { max-height: min(90dvh, 850px); overflow-y: auto; overscroll-behavior: contain; }
.response-context { padding: 12px 14px; margin: 0 0 16px; border: 1px solid #b7a16a; border-radius: 6px; background: rgba(126, 153, 135, .12); text-align: left; line-height: 1.6; }
.response-context > strong { color: #e5cd8b; }
.response-context p { margin: 7px 0; font-size: 13px; }
.response-context small { display: block; color: #c5c9ad; font-size: 12px; line-height: 1.55; }
.response-kicker { margin-bottom: 5px; font-size: 11px; letter-spacing: .07em; color: #b6cecc; }
.counter-verdict { padding: 8px 10px; border-left: 3px solid #85b7a7; background: rgba(77, 128, 108, .15); }
.counter-verdict.is-cancelled { border-color: #cca574; background: rgba(168, 114, 67, .15); }
.fire-reveal { display: flex; gap: 18px; align-items: center; }
.revealed-card { flex: 0 0 100px; display: grid; justify-items: center; padding: 7px; border: 1px solid #b8a16c; border-radius: 5px; color: #443a29; background: #e8ddc2; box-sizing: border-box; }
.revealed-card .card-art { width: 76px; height: 65px; }
.revealed-card > strong { font-size: 13px; }
.revealed-card > span { font-size: 11px; }
.material-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.material-option { display: flex; gap: 9px; text-align: left; align-items: center; min-height: 48px; white-space: normal; line-height: 1.4; }
.material-option.is-selected { border-color: #e7c46e; background: #675028; color: #fff0c3; }
.material-check { flex: 0 0 20px; height: 20px; display: grid; place-content: center; border: 1px solid currentColor; border-radius: 3px; }
.material-progress { font-size: 13px; color: #e3cf9e; }
.card-response-dialog .btn { min-height: 44px; overflow-wrap: anywhere; }
.card-response-dialog .dialog-actions { gap: 9px; }
.card-response-dialog .btn:focus-visible, .judgment-card summary:focus-visible { outline: 3px solid #edca7c; outline-offset: 3px; }
.player-card-status { grid-column: 1 / -1; min-width: 0; width: 100%; display: grid; gap: 7px; text-align: left; }
.card-status-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.chain-badge, .skip-draw-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #7daba7; border-radius: 4px; background: #263e3c; color: #dceee3; font-size: 11px; line-height: 1.4; }
.chain-badge svg { width: 23px; height: 17px; fill: none; stroke: #b9d8da; stroke-width: 2; }
.skip-draw-badge { border-color: #a99761; color: #eee0b7; background: #443b27; }
.judgment-zone { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding: 7px; border: 1px dashed #a19163; border-radius: 5px; background: rgba(10, 25, 20, .45); }
.judgment-zone-label { flex: 0 0 100%; font-size: 10px; color: #c7b88d; letter-spacing: .06em; }
.judgment-card { flex: 1 1 110px; min-width: 0; border: 1px solid #9c8d5b; border-radius: 4px; background: #e4d9b9; color: #453b28; }
.judgment-card summary { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 44px; padding: 4px 6px; cursor: pointer; font-size: 11px; list-style: none; }
.judgment-card summary::-webkit-details-marker { display: none; }
.judgment-card .judgment-art { width: 34px; height: 32px; }
.judgment-card summary > span:last-child { margin-left: auto; }
.judgment-card .red-suit { color: #993e31; }
.judgment-card p { padding: 0 8px 8px; margin: 0; font-size: 11px; line-height: 1.65; }
@media (max-width: 640px) {
  .material-picker { grid-template-columns: minmax(0, 1fr); }
  .card-response-dialog { padding: 16px; max-height: 88dvh; }
  .fire-reveal { gap: 10px; }
  .revealed-card { flex-basis: 88px; }
  .response-context { padding: 10px; }
  .judgment-card { flex-basis: 100%; }
}
.sgs-card .card-variant { display: block; margin-top: 2px; font-size: 9px; line-height: 1.2; color: #665633; }
.equipment-slot__name { white-space: normal; overflow-wrap: anywhere; }
.equipment-source-links { display: flex; gap: 10px; flex-wrap: wrap; }
.equipment-source-links a { color: #dac683; text-decoration: underline; text-underline-offset: 3px; }
.equipment-source-links a:focus-visible { outline: 2px solid #edca7c; outline-offset: 2px; }
.equipment-slot__details { max-height: min(70dvh, 420px); overflow-y: auto; }
@media (max-width: 860px) { .sgs-card .card-variant { font-size: 8px; } }
.equipment-aliases small { font-size: 10px; color: #b3c5ad; }
.equipment-source-records ul { display: grid; gap: 8px; padding: 0; margin: 6px 0 0; list-style: none; }
.equipment-source-records li { display: grid; gap: 2px; padding-left: 8px; border-left: 2px solid #867849; }
.equipment-source-records li > strong { font-size: 11px; color: #e8d09b; }
.equipment-source-records li > span { font-size: 10px; color: #b8c6b1; }
.equipment-source-records a { color: #e0c783; font-size: 10px; text-decoration: underline; text-underline-offset: 2px; }
.equipment-source-records a:focus-visible { outline: 2px solid #edca7c; outline-offset: 2px; }

/* Derived rulebook is static, searchable and explicit about zero initial copies. */
.derived-equipment-guide { margin: 14px 0; border: 1px solid #a6905659; border-radius: 9px; color: #dfd4b7; background: #162e28aa; }
.derived-equipment-guide > summary { padding: 12px 14px; cursor: pointer; font-weight: 700; line-height: 1.6; }
.derived-equipment-guide > summary span { display: block; color: #b5c2ac; font-size: 12px; font-weight: 400; }
.derived-equipment-guide .hero-search { margin: 10px 14px; }
.derived-guide-status { margin: 10px 14px; font-size: 12px; color: #bec6ab; }
.derived-guide-entry { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 18px; padding: 8px 14px 16px; align-items: start; }
.derived-guide-art { display: flex; flex-direction: column; align-items: center; border: 2px solid #aa8d53; border-radius: 10px; background: #e2d6b3; color: #37493d; padding: 10px; }
.derived-guide-art > span { align-self: flex-start; color: #a3483d; font-weight: 700; }
.derived-guide-art .card-art { display: block; width: 132px; max-width: 100%; height: 118px; }
.derived-guide-art strong { font-size: 22px; letter-spacing: 3px; }
.derived-guide-art small { margin-top: 6px; font-size: 11px; }
.derived-card-rules { line-height: 1.65; overflow-wrap: anywhere; }
.derived-card-rules p { margin: 8px 0; }
.derived-card-rules small { display: block; color: #c2bfa5; }
.derived-guide-entry .equipment-source-links { display: flex; flex-wrap: wrap; gap: 10px; }
.derived-guide-entry a { color: #e4cb8f; text-underline-offset: 3px; }
.derived-equipment-guide summary:focus-visible,.derived-guide-entry a:focus-visible { outline: 2px solid #e5cd8f; outline-offset: 2px; }
@media (max-width: 620px) {
  .derived-guide-entry { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .derived-guide-art { width: 150px; justify-self: center; }
  .derived-card-rules { font-size: 12px; }
}

/* Sanjian: complete cost+target tuple selected locally, paid only on confirm. */
.sanjian-response-heading { display: flex; gap: 13px; align-items: center; margin: 0 0 12px; text-align: left; }
.sanjian-response-art { flex: 0 0 70px; width: 70px; height: 62px; border: 1px solid #a49365; border-radius: 6px; background: #e7dfc3; }
.sanjian-response-art .card-art { width: 100%; height: 100%; }
.sanjian-response-heading > div { min-width: 0; }
.sanjian-response-heading strong { display: block; color: #ead397; font-size: 21px; letter-spacing: .08em; }
.sanjian-response-heading > div > span { display: block; margin-top: 3px; color: #becdbb; font-size: 12px; }
.sanjian-combination-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.sanjian-combination { display: flex; gap: 9px; align-items: center; min-width: 0; min-height: 48px; text-align: left; white-space: normal; line-height: 1.6; }
.sanjian-combination.is-selected { border-color: #e7c46e; background: #675028; color: #fff0c3; }
.sanjian-choice-mark { flex: 0 0 18px; color: #e3cb8b; }
.sanjian-selection-summary { margin: 14px 0; padding: 10px 12px; border-left: 3px solid #a3bba0; color: #e3ddbf; background: #182f28; text-align: left; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.sanjian-confirm-actions { flex-wrap: wrap; align-items: stretch; }
.sanjian-confirm-actions [data-sanjian-confirm] { flex: 1 1 100%; white-space: normal; line-height: 1.6; }
.sanjian-confirm-actions .response-cancel { flex: 1 1 auto; }
.sanjian-card-rules { display: grid; gap: 7px; margin: 4px 0; padding: 9px 0; border-top: 1px solid #80947770; border-bottom: 1px solid #80947770; }
.sanjian-card-rules > strong { color: #e6cd8a; font-size: 12px; }
.sanjian-card-rules a { color: #e0c783; text-decoration: underline; text-underline-offset: 3px; }
.sanjian-card-rules a:focus-visible { outline: 2px solid #edca7c; outline-offset: 2px; }
@media (max-width: 640px) {
  .sanjian-combination-picker { grid-template-columns: minmax(0, 1fr); }
  .sanjian-response-heading { gap: 10px; }
  .sanjian-response-art { flex-basis: 56px; width: 56px; height: 50px; }
  .sanjian-response-heading strong { font-size: 18px; }
}