/* People occupy the far edge of the table; their silhouettes soften into the room. */
.game-shell .game-board { height: 550px; }
.game-shell .opponent {
  top: 0;
  width: min(174px, calc(100% / var(--opponents)));
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
/* Larger silhouettes overlap only their soft lower fade; names retain clear rows. */
.game-shell .opponent-avatar {
  width: min(128px, calc(100% - 10px));
  height: auto;
  aspect-ratio: 98 / 116;
  margin-bottom: clamp(-18px, -10%, -5px);
  flex-shrink: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform-origin: 50% 90%;
  isolation: isolate;
}
.game-shell .opponent-avatar::before {
  content: '';
  position: absolute;
  inset: 18% -24% -2%;
  z-index: -1;
  background: radial-gradient(ellipse, #c78b4236, transparent 67%);
  opacity: 0;
  transition: opacity .4s;
  filter: blur(5px);
}
.game-shell .portrait-floating {
  background: transparent;
  border: 0;
  filter: saturate(.7) drop-shadow(0 8px 8px #03100c7a);
}
.game-shell .opponent-avatar .portrait-floating { width: 100%; height: 100%; }
.game-shell .opponent-avatar::after {
  content: '';
  position: absolute;
  inset: auto 5% -2px;
  height: 11px;
  background: radial-gradient(ellipse, #020a0780, transparent 70%);
  z-index: -1;
  transform: scaleX(1.2);
}
.game-shell .opponent-cards {
  right: -1px;
  bottom: 22px;
  background: #17221ddd;
  border-color: #c4b18b78;
  box-shadow: 0 2px 5px #0006;
  z-index: 1;
}
.game-shell .opponent-name { margin-top: 0; font-size: 18px; max-width: calc(100% - 4px); overflow-wrap: anywhere; }
.game-shell .opponent-role { margin-top: 3px; font-size: 9px; white-space: normal; line-height: 1.2; }
.game-shell .opponent-boss-label { margin-top: 4px; font-size: 8px; letter-spacing: .1em; line-height: 1.2; color: #d7b17b; }
.game-shell .main-opponent .opponent-avatar { width: min(150px, calc(100% - 2px)); aspect-ratio: 116 / 132; margin-top: -20px; }
.game-shell .main-opponent .opponent-avatar::before { opacity: .75; inset: 7% -18% -5%; background: radial-gradient(ellipse, #e0a55348, transparent 70%); }
.game-shell .main-opponent .opponent-name { color: #ecd2ab; font-size: 20px; }
.game-shell .main-opponent .opponent-role { font-size: 8px; margin-top: 3px; }
.game-shell .mini-hand { margin-top: 6px; scale: .86; }
.game-shell .your-identity > .portrait-floating { width: 68px; height: 92px; flex-shrink: 0; box-shadow: none; }
.game-shell .speaker-portrait { overflow: visible; }
.game-shell .speaker-portrait::after { content: none; }
.game-shell .speaker-portrait .portrait-floating { aspect-ratio: .86; }

/* Each pair is a separate stack: a later attack can never slip under an older defense. */
.game-shell .table-cards { top: 61%; z-index: 3; }
.game-shell .table-cards:has(.card-pair:nth-child(4)) { top: 64%; scale: .82; }
.game-shell .table-cards.has-cards { min-width: 0; transform-origin: center; }
.game-shell .card-pair { isolation: isolate; }
.game-shell .card-pair > .playing-card:first-child { z-index: 0; }
.game-shell .card-pair > .defense-card { z-index: 1; }
.game-shell .table-status { z-index: 5; }

/* The discard uses the same physical backs as the deck, offset like a casual pile. */
.game-shell .discard-area { right: 7%; top: 66%; width: 65px; z-index: 2; pointer-events: none; }
.game-shell .discard-stack { height: 77px; position: relative; }
.game-shell .discard-card {
  position: absolute;
  left: calc(5px + var(--pile-x));
  top: var(--pile-y);
  width: 51px;
  height: 73px;
  border-width: 2px;
  transform: rotate(var(--pile-turn));
  box-shadow: 0 1px 1px #06110ca3, 0 3px 5px #02090655;
}
.game-shell .discard-card span { width: 27px; height: 33px; font-size: 20px; }
.game-shell .discard-area > span { margin-top: 10px; }
.game-shell .discard-empty-mark { position: absolute; inset: 15px 0 0; color: #b4b39088; font-size: 28px; }
.game-shell .empty-discard .discard-stack { height: 45px; }

@media (min-width: 1450px) {
  .game-shell .game-board { height: 580px; }
  .game-shell .opponent-avatar { width: min(142px, calc(100% - 10px)); }
  .game-shell .main-opponent .opponent-avatar { width: min(166px, calc(100% - 2px)); }
}
@media (max-width: 1150px) {
  .game-shell .game-board { height: 530px; }
  .game-shell .opponent-avatar { width: min(120px, calc(100% - 10px)); }
  .game-shell .main-opponent .opponent-avatar { width: min(140px, calc(100% - 2px)); margin-top: -17px; }
  .game-shell .opponent-name { font-size: 16px; }
  .game-shell .main-opponent .opponent-name { font-size: 18px; }
  .game-shell .opponent-boss-label { font-size: 7px; }
  .game-shell .discard-area { right: 5%; }
}
@media (max-width: 900px) {
  .game-shell .opponent-avatar { width: min(124px, calc(100% - 8px)); }
  .game-shell .main-opponent .opponent-avatar { width: min(144px, calc(100% - 2px)); }
}
@media (max-width: 580px) {
  .game-shell .game-board { height: 530px; }
  .game-shell .opponent { width: calc(100% / var(--opponents)); }
  .game-shell .opponent-avatar { width: min(102px, calc(100% - 4px)); aspect-ratio: .82; margin-bottom: clamp(-16px, -10%, -5px); }
  .game-shell .main-opponent .opponent-avatar { width: min(116px, 100%); aspect-ratio: .82; margin-top: clamp(-18px, -12%, -7px); }
  .game-shell .opponent-name { padding-inline: 2px; font-size: 12px; }
  .game-shell .main-opponent .opponent-name { font-size: 15px; }
  .game-shell .game-board[data-player-count="6"] .main-opponent .opponent-name { font-size: 12px; }
  .game-shell .opponent-role { font-size: 7px; letter-spacing: .025em; }
  .game-shell .opponent-boss-label { font-size: 6px; letter-spacing: .04em; }
  .game-shell .opponent-cards { right: 0; bottom: 20px; }
  .game-shell .mini-hand { margin-top: 3px; scale: .78; }
  .game-shell .table-cards,
  .game-shell .table-cards:has(.card-pair:nth-child(4)) { top: 56%; scale: 1; }
  .game-shell .deck-area {
    left: 3%; top: auto; bottom: 44px;
    width: 130px; height: 79px; display: grid;
    grid-template-columns: 58px 1fr; grid-template-rows: 1fr 1fr;
    column-gap: 11px; text-align: left;
    scale: 1; transform: scale(.65); transform-origin: left bottom;
  }
  .game-shell .deck-stack { grid-row: 1 / 3; height: 79px; }
  .game-shell .deck-count { margin-top: 0; font-size: 20px; }
  .game-shell .trump-label { margin-top: 0; font-size: 28px; align-self: end; }
  .game-shell .discard-area { right: 3%; top: auto; bottom: 47px; width: 112px; display: flex; align-items: center; gap: 10px; transform: scale(.65); transform-origin: right bottom; }
  .game-shell .discard-stack { width: 65px; height: 77px; flex-shrink: 0; }
  .game-shell .discard-area > span { margin: 0; font-size: 20px; text-align: left; }
  .game-shell .empty-discard .discard-stack { height: 77px; }
  .game-shell .your-identity { gap: 6px; }
  .game-shell .your-identity > .portrait-floating { width: 50px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-shell .opponent-avatar::before { animation: none !important; transition: none; }
}