/* MagicAIl Table — styles: game modes for several players (build 80). Two-Headed Giant team marks, players out of the
   game, the end of the game, the bonuses the table works out itself. Loaded last (index.html). */

/* Two-Headed Giant: a colored line marks each team (the player's team gold, the other blue). */
.zones.team-1 { box-shadow: inset 4px 0 0 var(--gold); }
.zones.team-2 { box-shadow: inset 4px 0 0 #5fb3ff; }
.seat-area.team-1,
.claude-side.team-1,
.player-side.team-1 { outline: 1px dashed rgba(201, 162, 74, 0.45); outline-offset: -3px; }
.seat-area.team-2,
.claude-side.team-2,
.player-side.team-2 { outline: 1px dashed rgba(95, 179, 255, 0.45); outline-offset: -3px; }

/* Out of the game: the play area greyed; the info box shows only the name, a big skull and "R.I.P." (build 100). */
.seat-out { opacity: 0.45; filter: grayscale(0.85); }
.zones.seat-out { opacity: 0.9; }
.seat-out.active-turn { box-shadow: none; }
.zones.seat-out > :not(.life-wrap):not(.playmat):not(.playmat-lines) { display: none !important; }
.zones.seat-out .life > :not(.life-label):not(.out-label) { display: none !important; }
.zones.seat-out .life { align-items: center !important; }
.zones.seat-out .online-dot { display: none; }
.out-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  margin-top: 2px;
  line-height: 1;
  color: var(--muted);
}
.out-label[hidden] { display: none; }
.out-skull { font-size: 46px; line-height: 1.05; color: #d8d2c4; }
.out-rip { margin-top: 2px; font: 700 13px var(--font-display); letter-spacing: 0.18em; color: var(--gold); }
.multi.staged .mid-col .out-skull { font-size: 26px; }
.multi.staged .mid-col .out-rip { font-size: 11px; }

/* The end of the game: a card at the top in the middle. */
.game-over {
  position: fixed;
  top: 76px;
  left: 50%;
  z-index: 80;
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px));
  padding: 18px 22px 16px;
  border: 2px solid var(--gold);
  border-radius: 16px;
  background: rgba(13, 19, 16, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  text-align: center;
  animation: bubble-in 0.3s ease-out;
}

.game-over-title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--gold); }
/* Build 143: under the title in white — "Ask for a rematch"; a click on the card hides it. */
.game-over-text { margin: 0; font-size: 17px; color: #fff; }
.game-over { cursor: pointer; }

/* A bonus the table works out from the rules text (anthems, equipment, auras): blue, next to the counters. */
.counter.counter-bonus { background: #d6ebff; border-color: #1d4f80; color: #0c2a47; }

/* The format choice (build 80) spans the form like the players dropdown. */
.field-format { grid-column: 1 / -1; }

/* Build 98: before turn 1 — has this AI kept its opening hand? (js/modes.js renderKeepMarks) */
.keep-mark { font: 600 11px var(--font-body); color: var(--muted); letter-spacing: 0.02em; }
.keep-mark.kept { color: #6fd08f; }
.keep-mark[hidden] { display: none; }

/* Build 100: who is online — a dot before every AI's name (js/modes.js renderPresence). */
.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #d9412b;
  box-shadow: 0 0 0 2px rgba(217, 65, 43, 0.25);
  vertical-align: 1px;
}
.online-dot.on { background: #6fd08f; box-shadow: 0 0 0 2px rgba(111, 208, 143, 0.25), 0 0 6px rgba(111, 208, 143, 0.6); }
.online-dot[hidden] { display: none; }

/* Build 103: the marks before turn 1 are easier to see — a pill, green when kept. */
.keep-mark { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; white-space: nowrap; }
.keep-mark.kept { border-color: #6fd08f; background: rgba(111, 208, 143, 0.14); }

/* Build 103: the ready check in the middle of the table before turn 1 (js/modes.js renderKeepCheck). */
.keep-check {
  position: fixed;
  left: 50%; /* js/modes.js placeKeepCheck: over the player's play area */
  top: 50%;
  z-index: 30;
  width: min(380px, calc(100vw - 32px));
  padding: 18px 20px 14px;
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.keep-check[hidden] { display: none; }
.keep-check-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 18px; color: var(--gold); letter-spacing: 0.06em; }
.keep-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; text-align: left; }
.keep-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); }
.keep-list li.kept { border-color: #6fd08f; background: rgba(111, 208, 143, 0.1); }
.keep-name { font-weight: 600; }
.keep-count { color: var(--muted); font-size: 12px; }
.keep-state { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.keep-list li.kept .keep-state { color: #6fd08f; font-weight: 600; }
.keep-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* build 149: equal halves, "Neue Hand ziehen" on one line */
.keep-actions[hidden] { display: none; }
.keep-actions .btn-start { grid-column: auto; margin: 0; padding: 10px; font-size: 15px; }
.keep-actions .btn-secondary { padding: 10px; font-size: 14px; }
/* Build 149: "(Mulligan)" small and in italics under "Draw new hand". */
.keep-sub { display: block; margin-top: 2px; font-size: 11px; font-style: italic; opacity: 0.75; }
.keep-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* Build 104: holding Space ends the turn — the bar at the top fills for 2 seconds (js/keys.js). */
.hold-bar {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 60;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.hold-bar[hidden] { display: none; }
.hold-fill { position: absolute; inset: 0 100% 0 0; background: rgba(201, 162, 74, 0.45); }
.hold-bar.filling .hold-fill { inset: 0 0 0 0; transition: inset var(--hold-ms, 2000ms) linear; }
.hold-text { position: relative; display: grid; place-items: center; height: 100%; font-size: 13px; font-weight: 600; color: var(--text); }