/* One continuous play surface; both players' status lives outside the arenas. */
.shared-board-scroll { min-width:0; overflow-x:auto; border-radius:14px; scrollbar-color:#438992 #102938; }
.shared-board {
  display:grid; grid-template-columns:104px minmax(740px,1fr) 104px;
  min-width:948px; border:1px solid #38727f; border-radius:14px; overflow:hidden;
  background:linear-gradient(#061a2d55,#061a2d55),url("assets/lan-playmat.png") center / cover;
  color:#d9edf3;
}
.shared-play-area {
  grid-column:2; grid-row:1; min-width:0; display:grid;
  grid-template-columns:270px minmax(200px,1fr) 270px;
  grid-template-areas:"actions actions actions" "ownbase opponent enemybase" "ownbase own enemybase" "hand hand hand";
  align-items:stretch;
}
.shared-board .own-command { grid-area:ownbase; }
.shared-board .opponent-command { grid-area:enemybase; }
.shared-board .own-field { grid-area:own; }
.shared-board .opponent-field { grid-area:opponent; }
#view-game #own-panel, #view-game #opponent-panel {
  display:block; grid-row:1; padding:12px 8px; margin:0; border:0; border-radius:0;
  background:#071c2de8; box-shadow:none; min-width:0;
}
#view-game #own-panel { grid-column:1; border-right:1px solid #4a87916b; }
#view-game #opponent-panel { grid-column:3; border-left:1px solid #4a87916b; }
.player-rail .rail-content { position:sticky; top:12px; }
/* Rundenanzeige am rechten Spielfeldrand, direkt ueber der Gegner-Leiste. */
.player-rail .round-badge { display:inline-block; margin-bottom:10px; background:#10333d; color:#85f2dc; font-size:11px; padding:5px 11px; }
#view-game .player-rail h2 { margin:0 0 14px; color:#8ab8c7; font-size:10px; text-transform:uppercase; letter-spacing:1px; overflow-wrap:anywhere; }
.player-rail h2 > span { display:block; margin-top:6px; color:#ecffff; font-size:15px; text-transform:none; letter-spacing:0; }
.player-rail h2 > #own-name, .player-rail h2 > #opponent-name { display:none; }
.player-rail .ram-cap { display:block; white-space:nowrap; font-size:12px; margin-top:3px; }
#view-game .player-rail .stats { display:flex; flex-direction:column; gap:8px; margin:0; }
.player-rail .game-stat { display:block; min-width:0; padding:8px 6px; border:1px solid #315564; background:#102d3e; border-radius:6px; }
.player-rail .game-stat > span { display:block; color:#a9c9d4; font-size:10px; }
.player-rail .game-stat > b { display:block; color:#e5ffff; font-size:15px; overflow-wrap:anywhere; }
#view-game .player-rail.is-active { background:#10333de8; box-shadow:inset 0 3px #63e4d5; }
.player-rail.is-active h2::before { content:"Am Zug"; display:block; margin-bottom:10px; color:#85f2dc; font-size:10px; }
#view-game .shared-board .battle-mat {
  grid-template-columns:100px minmax(0,1fr);
  grid-template-areas:"zone units";
  min-width:0; gap:8px; padding:10px; border:0; border-radius:0;
  background:none; box-shadow:none;
}
#view-game .shared-board .opponent-field { border-bottom:1px solid #75b5c696; }
#view-game .shared-board .opponent-field { grid-template-columns:minmax(0,1fr) 100px; grid-template-areas:"units zone"; }
.shared-board .own-field { --field-accent:#58ded2; --field-bg:#123e43; }
.shared-board .opponent-field { --field-accent:#f3a36b; --field-bg:#492d25; }
.shared-board .battle-mat > .mat-zone-area { background:color-mix(in srgb,var(--field-bg) 80%,transparent); border-color:color-mix(in srgb,var(--field-accent) 55%,transparent); }
.shared-board .battle-mat > .mat-zone-area h3 { color:var(--field-accent); }
.shared-board .battle-mat .zone-slot { border-color:var(--field-accent); }
.shared-board .mat-command { gap:6px; padding:10px 6px; }
.shared-board .own-command { --owner-accent:#58ded2; --owner-bg:#123e43; }
.shared-board .opponent-command { --owner-accent:#f3a36b; --owner-bg:#492d25; }
.shared-board .mat-command {
  background:linear-gradient(180deg,var(--owner-bg),color-mix(in srgb,var(--owner-bg) 55%,transparent));
  border-top:3px solid var(--owner-accent);
}
.shared-board .mat-command > .mat-zone-area { border-color:color-mix(in srgb,var(--owner-accent) 45%,transparent); }
.shared-board .base-owner { margin:0; padding:4px 7px 8px; line-height:1.35; overflow-wrap:anywhere; }
.shared-board .base-owner span { display:block; color:var(--owner-accent); font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.shared-board .base-owner strong { display:block; color:#fff4eb; font-size:15px; }
.shared-board .mat-zone-area { padding:6px; }
.shared-board .mat-zone-area h3 { margin-bottom:6px; font-size:9px; }
/* Restore the base's artwork and landscape proportions, without stretching it. */
.shared-board .mat-base .tcg-art-frame { display:block; }
#view-game .shared-board .tcg-card.base-card .tcg-card-art { height:64px; }
.shared-board .mat-command .base-card .tcg-card-values { margin-top:-18px; }
.shared-board .mat-command .base-card .tcg-card-name { font-size:13px; }
.shared-board .mat-command .base-card .tcg-card-values .tcg-corner { flex-direction:column; gap:0; min-width:54px; }
.shared-board .mat-command .base-card .tcg-corner-production { margin-left:0; }
.shared-board .mat-command .tcg-card .tcg-card-heading { min-height:32px; }
.shared-board .mat-upgrades .tcg-card-name { font-size:10px; }
.shared-board .mat-upgrades .tcg-card-heading { display:grid; grid-template-columns:36px minmax(0,1fr); gap:3px; }
.shared-board .mat-upgrades .tcg-card-title-group { display:contents; }
.shared-board .mat-upgrades .tcg-card-costs { max-width:none; grid-row:1; grid-column:1; }
.shared-board .mat-upgrades .tcg-card-type-label { grid-row:1; grid-column:2; align-self:center; }
.shared-board .mat-upgrades .tcg-card-name { grid-column:1 / -1; }
.shared-board .mat-upgrades .tcg-card .tcg-card-values .tcg-corner { flex-wrap:wrap; }
.shared-board .mat-command .tcg-card .tcg-card-text, .shared-board .mat-command .tcg-card .tcg-card-extra { font-size:10px; line-height:1.35; }
.shared-board .mat-command .tcg-card .tcg-card-body { padding:6px; }
.shared-board .mat-command .empty-upgrade-slot { min-height:54px; }
.shared-board .middle-bar { grid-area:actions; margin:0; padding:8px 10px; background:#092331ec; border-bottom:1px solid #4a87916b; }
.shared-board #pending-action-hint { color:#d8eff2; background:#153c49; border:1px solid #437382; font-size:12px; }
.shared-board .middle-bar button { padding:7px 10px; font-size:11px; }
#view-game .shared-board .hand-panel { grid-area:hand; margin:0; padding:10px; border:0; border-top:1px solid #75b5c696; border-radius:0; background:#081c2bd9; box-shadow:none; }
.shared-board .hand-panel h2 { margin:0; font-size:12px; color:#bde9ec; }
.shared-board .hand-panel .muted { color:#a7c8d0; }
#view-game .shared-board .hand-row { margin:0; padding-bottom:8px; scrollbar-color:#5795a1 #102b3d; }
#view-game .shared-board .hand-row .tcg-card .tcg-card-art { height:64px; }
#view-game > .match-timeline { min-height:0; }
#pending-choice-panel { margin:0 0 12px; border:2px solid #087e83; }
#pending-choice-panel h2 { margin:0 0 8px; }
#pending-choice-panel p { margin:0 0 12px; }
#pending-choice-options { display:flex; flex-wrap:wrap; gap:10px; }
#pending-choice-options button { min-height:44px; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; }
#pending-choice-options button:focus-visible { outline:3px solid #087e83; outline-offset:3px; }
@media(min-width:1800px) {
  .shared-play-area { grid-template-columns:330px minmax(200px,1fr) 330px; }
  #view-game .shared-board .battle-mat { grid-template-columns:132px minmax(0,1fr); }
  #view-game .shared-board .opponent-field { grid-template-columns:minmax(0,1fr) 132px; }
}