/* Approved production card fronts: one template per suit/type, live type for every value. */
.card.card-production-face {
  aspect-ratio: 2 / 3 !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  container-type: inline-size;
  background-color: #efd9a7 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: clamp(5px, 0.7vw, 11px) !important;
  box-shadow: 0 4px 10px #0008 !important;
  color: #17100c !important;
}
.card.card-production-face.hearts { background-image: url('/assets/card-faces/hearts-numbered.png') !important; }
.card.card-production-face.diamonds { background-image: url('/assets/card-faces/diamonds-numbered.png') !important; }
.card.card-production-face.clubs { background-image: url('/assets/card-faces/clubs-numbered.png') !important; }
.card.card-production-face.spades { background-image: url('/assets/card-faces/spades-numbered.png') !important; }
.card.card-production-face.card-kind-queen.hearts { background-image: url('/assets/card-faces/queen-hearts.png') !important; }
.card.card-production-face.card-kind-queen.diamonds { background-image: url('/assets/card-faces/queen-diamonds.png') !important; }
.card.card-production-face.card-kind-queen.clubs { background-image: url('/assets/card-faces/queen-clubs.png') !important; }
.card.card-production-face.card-kind-queen.spades { background-image: url('/assets/card-faces/queen-spades.png') !important; }
.card.card-production-face.ace { background-image: url('/assets/card-faces/ace.png') !important; }
.card.card-production-face.king { background-image: url('/assets/card-faces/king.png') !important; }
.card.card-production-face.jack { background-image: url('/assets/card-faces/jack.png') !important; }
.card.card-production-face.double { background-image: url('/assets/card-faces/double.png') !important; }
.card.card-production-face.royal_summons { background-image: url('/assets/card-faces/royal-summons.png') !important; }
.card.card-production-face::before,
.card.card-production-face::after { content:none!important; display:none!important; }
#game-screen .card.card-production-face.double { background-image:url('/assets/card-faces/double.png')!important; }
#game-screen .card.card-production-face.royal_summons { background-image:url('/assets/card-faces/royal-summons.png')!important; }
:is(#game-screen,#tutorial-screen) .card.card-production-face:is(.double,.royal_summons)::before,
:is(#game-screen,#tutorial-screen) .card.card-production-face:is(.double,.royal_summons)::after { content:none!important; display:none!important; }
#card-detail-modal .card.card-production-face:is(.double,.royal_summons)::before,
#card-detail-modal .card.card-production-face:is(.double,.royal_summons)::after,
#card-tooltip .card.card-production-face:is(.double,.royal_summons)::before,
#card-tooltip .card.card-production-face:is(.double,.royal_summons)::after { content:none!important; display:none!important; }

/* The selection board has a legacy card reset; production faces must retain their own canvas. */
#solo-selection-board .card.card-production-face {
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  container-type: inline-size !important;
}

.card.card-production-face > :is(.card-rank, .card-symbol, .card-suit-label, .card-name, .card-effect) {
  opacity: 0 !important;
  pointer-events: none;
}
.card-production-face .card-native-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  color: #211309;
  pointer-events: none;
}
.card-production-face .card-native-corner,
.shared-queen-face .card-native-corner {
  position: absolute;
  top: 3.2%;
  left: 4.2%;
  width: 17.5cqi;
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #351b0c;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 1px #fff6e3, 0 0 2px #fff6e3;
}
.card-production-face .card-native-corner b,
.shared-queen-face .card-native-corner b { position:static; font-size:15cqi; font-weight:700; line-height:1; letter-spacing:-.035em; }
.card-production-face .card-native-corner i,
.shared-queen-face .card-native-corner i { position:static; font-size:12.5cqi; font-style:normal; line-height:.9; }
.card-production-face.hearts .card-native-corner,
.card-production-face.diamonds .card-native-corner,
.shared-queen-face.hearts .card-native-corner,
.shared-queen-face.diamonds .card-native-corner { color:#9f1b2e; }
.card-production-face .card-native-suit {
  position: absolute;
  top: 6.4%;
  left: 24%;
  right: 24%;
  z-index: 1;
  padding: .16em .15em;
  overflow: hidden;
  border-radius: 2px;
  background: #f5e3b8e8;
  color: #5a3510;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(5px, 7cqi, 14px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}
.card-production-face .card-native-queen-caption {
  position:absolute;
  top:6.4%;
  left:24%;
  right:24%;
  z-index:1;
  display:grid;
  gap:.12em;
  padding:.16em .15em;
  overflow:hidden;
  border-radius:2px;
  background:#f5e3b8e8;
  color:#4a2608;
  font-family:Georgia, 'Times New Roman', serif;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
  text-align:center;
}
.card-production-face .card-native-queen-caption strong { font-size:clamp(5px,7cqi,14px); }
.card-production-face .card-native-queen-caption small { font-size:clamp(4px,5.5cqi,10px); }
.card-production-face .card-native-copy {
  position: absolute;
  right: 10%;
  bottom: 7.3%;
  left: 10%;
  display: grid;
  gap: .32em;
  text-align: center;
  text-wrap: balance;
}
.card-production-face .card-native-copy strong {
  color: #4a2608;
  font-size: clamp(6px, 10cqi, 17px);
  letter-spacing: .08em;
  line-height: 1;
}
.card-production-face .card-native-copy small {
  color: #251307;
  font-size: clamp(4px, 6.5cqi, 11px);
  font-weight: 700;
  line-height: 1.16;
}
#solo-selection-board .card.card-production-face .card-native-suit { font-size: clamp(5px, 7cqi, 14px) !important; }
#solo-selection-board .card.card-production-face .card-native-copy strong { font-size: clamp(6px, 10cqi, 17px) !important; }
#solo-selection-board .card.card-production-face .card-native-copy small { font-size: clamp(4px, 6.5cqi, 11px) !important; }
/* Keep selected-order feedback visible without using either readable card corner. */
#solo-selection-board .card.card-production-face .selection-order-marker { top:3%!important; left:50%!important; width:20%!important; height:auto!important; aspect-ratio:1!important; transform:translateX(-50%)!important; font:900 clamp(8px,11cqi,12px)/1 Georgia,serif!important; }
/* Waiting slots are short UI portraits, not full cards: give the two full-size
   indices vertical room and never fade the index layer with the portrait art. */
#solo-selection-board .selection-waiting-slot.occupied .selection-waiting-portrait { bottom:calc(var(--u)*3)!important; mask-image:none!important; }
.card-production-face.diamonds .card-native-copy {
  top: 73.3%;
  bottom: auto;
}
.card-production-face.card-kind-queen .card-native-copy,
.card-production-face.ace .card-native-copy,
.card-production-face.king .card-native-copy,
.card-production-face.jack .card-native-copy,
.card-production-face.double .card-native-copy,
.card-production-face.royal_summons .card-native-copy {
  top: 78%;
  bottom: auto;
}
.card-production-face.card-kind-queen .card-native-suit { top: 6.5%; }
@media (prefers-reduced-motion: reduce) {
  .card.card-production-face { transition: none !important; animation: none !important; }
}
@container (max-width: 110px) {
  /* Approved compact treatment: the live action name/rule and suit label
     remain visible; only the duplicate miniature Queen caption is suppressed. */
  .card-production-face .card-native-copy {
    top:auto!important;
    bottom:4%!important;
    display:grid!important;
    gap:.04em!important;
  }
  .card-production-face .card-native-suit { display:block!important; }
  /* ROYAL SUMMONS is the only compact suit header wider than its native
     parchment box. Keep the full label by using its two available lines. */
  .card-production-face.royal_summons .card-native-suit {
    overflow:visible!important;
    white-space:normal!important;
    line-height:1.1!important;
  }
  .card-production-face .card-native-queen-caption { display:none; }
  #solo-selection-board .card.card-production-face { overflow:hidden!important; }
  /* Reserve the mid-card selection lane: clear of the suit header and the
     compact lower text block. */
  #solo-selection-board .card.card-production-face .selection-order-marker {
    top:44%!important;
    left:14%!important;
    transform:translateX(-50%)!important;
  }
}

/* Reusable Queen front for Path and Waiting.  Thrones intentionally retain their
   jeweled crests rather than becoming miniature cards. */
.shared-queen-face { position:relative; display:grid; place-items:center; grid-template-rows:auto 1fr auto; width:100%; height:100%; overflow:hidden; container-type:inline-size; background:center/100% 100% no-repeat; color:#3a210b; font-family:Georgia, 'Times New Roman', serif; text-align:center; }
.shared-queen-face.hearts { background-image:url('/assets/card-faces/queen-hearts.png'); color:#9f1b2e; }
.shared-queen-face.diamonds { background-image:url('/assets/card-faces/queen-diamonds.png'); color:#9f1b2e; }
.shared-queen-face.clubs { background-image:url('/assets/card-faces/queen-clubs.png'); }
.shared-queen-face.spades { background-image:url('/assets/card-faces/queen-spades.png'); }
/* Path and Waiting can be smaller than a card; retain the readable Q/suit
   indices and remove only the redundant decorative caption at that scale. */
@container (max-width: 60px) {
  .shared-queen-face > strong,
  .shared-queen-face > small { display:none; }
}
.shared-queen-face strong,.shared-queen-face small { position:relative; z-index:1; padding:1px 3px; background:#f5e3b8d9; color:#4a2608; font-weight:800; line-height:1; letter-spacing:.06em; }
.shared-queen-face strong { align-self:end; margin-bottom:15%; font-size:18%; }
.shared-queen-face small { align-self:end; margin-bottom:6%; font-size:12%; }
.shared-queen-face--waiting strong { display:none; }
.shared-queen-face--waiting small { display:none; }
.selection-waiting-portrait > .shared-queen-face { position:absolute; inset:0; display:grid!important; }
/* Waiting metadata belongs in named grid rows, outside the portrait.  The
   court row owns the extra height; no occupied bay may spill below its border. */
#solo-selection-board:not(.tutorial-production-board) .selection-waiting-slot.occupied {
  height:100%!important;
  min-height:calc(var(--u)*120)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:calc(var(--u)*12) minmax(74px,1fr) calc(var(--u)*8) calc(var(--u)*5) calc(var(--u)*8)!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  padding:calc(var(--u)*3) calc(var(--u)*3)!important;
  overflow:hidden!important;
}
#solo-selection-board:not(.tutorial-production-board) .selection-waiting-panel {
  grid-template-rows:calc(var(--u)*12) minmax(0,1fr)!important;
  padding:0 calc(var(--u)*2) calc(var(--u)*2)!important;
}
#solo-selection-board:not(.tutorial-production-board) .selection-waiting-slot.occupied .selection-waiting-portrait {
  position:relative!important;
  inset:auto!important;
  grid-column:1 / -1!important;
  grid-row:2!important;
  align-self:stretch!important;
  width:100%!important;
  height:100%!important;
  mask-image:none!important;
}
#solo-selection-board:not(.tutorial-production-board) .selection-waiting-slot.occupied > strong {
  position:relative!important;
  grid-column:1!important;
  grid-row:1!important;
  z-index:5!important;
  justify-self:start!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:calc(var(--u)*6)!important;
}
#solo-selection-board:not(.tutorial-production-board) .selection-waiting-slot.occupied .selection-waiting-status {
  position:relative!important;
  inset:auto!important;
  grid-column:2!important;
  grid-row:1!important;
  z-index:5!important;
  justify-self:end!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  font-size:calc(var(--u)*5.5)!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#solo-selection-board:not(.tutorial-production-board) .selection-waiting-slot.occupied > em { grid-column:1 / -1!important; grid-row:3!important; z-index:5!important; }
#solo-selection-board:not(.tutorial-production-board) .selection-waiting-slot.occupied .selection-waiting-progress { grid-column:1 / -1!important; grid-row:4!important; z-index:5!important; width:72%!important; }
#solo-selection-board:not(.tutorial-production-board) .selection-waiting-slot.occupied > small { grid-column:1 / -1!important; grid-row:5!important; z-index:5!important; position:relative!important; }
#game-screen.selection-board-active .selection-queen-track .queen-marker:has(.shared-queen-face) { background-image:none!important; }
#game-screen.selection-board-active #solo-queen-marker > .shared-queen-face { opacity:1!important; }
.guided-tutorial .queen-marker:has(.shared-queen-face) { background-image:none!important; }
.guided-tutorial .queen-marker > .shared-queen-face { display:grid!important; }
.guided-tutorial .queen-marker > .shared-queen-face > .card-native-corner { display:grid!important; }
/* The production tutorial uses .tutorial-queen-path/#guided-queen (not the
   legacy .training-path-wrap). final-ux-r92 owns its one bounded size; this
   later card-face layer only keeps the containing lane visible. */
.tutorial-production-board .tutorial-queen-path { overflow:visible!important; }

/* Detail and inspection use the same complete DOM card front as play, rather
   than a background-only preview. */
.card-detail-art { display:grid; place-items:center; overflow:hidden; }
.card-detail-art .card-detail-production-face { width:min(100%, 280px)!important; height:auto!important; aspect-ratio:2 / 3!important; flex:none; pointer-events:none; }
.card-inspection-art { display:grid; place-items:center; overflow:hidden; }
.card-inspection-art .card-inspection-production-face { width:min(100%, 178px)!important; height:auto!important; aspect-ratio:2 / 3!important; flex:none; pointer-events:none; }
.card-detail-production-face,.card-inspection-production-face { opacity:1!important; filter:none!important; animation:none!important; transform:none!important; transition:none!important; outline:0!important; }