:root {
  --cb-bg: #0b101b;
  --cb-surface: #121a2b;
  --cb-surface-alt: #182338;
  --cb-border: #2a3956;
  --cb-text: #eef3ff;
  --cb-muted: #9eb0d0;
  --cb-accent: #5eead4;
  --cb-red: #f43f5e;
  --cb-blue: #38bdf8;
  --cb-yellow: #facc15;
  --cb-green: #4ade80;
  --cb-header-height: 44px;

  --session-bg: #0e1626;
  --session-border: #273652;
  --session-text: #eef3ff;
  --session-muted: #9eb0d0;
  --session-accent: #5eead4;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at 42% 14%, #17253e 0%, #090d16 100%);
  color: var(--cb-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

#shell {
  width: min(100%, 1520px);
  margin: 0 auto;
  padding: 0.45rem 0.85rem;
}

#notice {
  margin: 0.3rem 0;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.45);
  color: #fecdd3;
  font-size: 0.86rem;
}

.cb-table {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Player Rail */
.player-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0.45rem;
  height: 86px;
}

.seat {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  height: 86px;
}

.seat.acting {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.38);
}

.seat.winner {
  border-color: var(--cb-yellow);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.45);
}

.seat .ui-section-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.12rem 0.45rem;
  align-items: center;
}

.seat-name {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat-role {
  font-size: 0.72rem;
  line-height: 1.1rem;
  font-weight: 700;
  color: var(--cb-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}

.seat-score {
  font-size: 0.82rem;
  line-height: 1.05rem;
  font-weight: 700;
  color: var(--cb-yellow);
  white-space: nowrap;
}

.seat-tricks,
.seat-cluster,
.seat-cards {
  font-size: 0.75rem;
  line-height: 1.05rem;
  color: var(--cb-muted);
  white-space: nowrap;
}

.seat-colors {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.25rem;
  margin-top: 0.1rem;
}

.color-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.15rem;
  padding: 0 0.22rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.color-pip.color-red { background: rgba(244, 63, 94, 0.22); color: #fda4af; border-color: rgba(244, 63, 94, 0.5); }
.color-pip.color-blue { background: rgba(56, 189, 248, 0.22); color: #bae6fd; border-color: rgba(56, 189, 248, 0.5); }
.color-pip.color-yellow { background: rgba(250, 204, 21, 0.22); color: #fef08a; border-color: rgba(250, 204, 21, 0.5); }
.color-pip.color-green { background: rgba(74, 222, 128, 0.22); color: #bbf7d0; border-color: rgba(74, 222, 128, 0.5); }

.color-pip.is-forfeited {
  opacity: 0.4;
  text-decoration: line-through;
  filter: grayscale(0.5);
}

/* Main 2-Column Table Body: Hero Column (Trick + Hand) + Side Rail (Board + Log) */
.table-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 0.625rem;
  align-items: start;
}

.hero-column,
.side-rail {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

/* Hero Section 1: Trick Stage (.table-center) */
.table-center {
  background: radial-gradient(ellipse at 50% 45%, #17243c 0%, #101829 100%);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  height: 236px;
}

.table-center .ui-section-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 0.35rem;
}

.center-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  height: 24px;
}

.turn-status {
  font-size: 0.96rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--cb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.center-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.round-label {
  font-size: 0.78rem;
  color: var(--cb-muted);
  font-weight: 600;
  white-space: nowrap;
}

.trick-context {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cb-accent);
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.32);
  padding: 0.12rem 0.45rem;
  border-radius: 5px;
  white-space: nowrap;
}

/* Hero Trick Arena */
.trick-stage {
  height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: rgba(9, 14, 24, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: inset 0 0 36px rgba(15, 23, 42, 0.85);
}

.trick-cards-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
}

.trick-card,
.trick-slot-awaiting {
  width: 112px;
  height: 116px;
  border-radius: 8px;
  padding: 0.38rem 0.48rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.trick-card {
  background: linear-gradient(160deg, #1d2b47 0%, #111a2e 100%);
  border: 2px solid var(--cb-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.trick-card.color-red {
  border-color: var(--cb-red);
  background: linear-gradient(160deg, rgba(244, 63, 94, 0.26) 0%, #141829 100%);
}
.trick-card.color-blue {
  border-color: var(--cb-blue);
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.26) 0%, #121c2e 100%);
}
.trick-card.color-yellow {
  border-color: var(--cb-yellow);
  background: linear-gradient(160deg, rgba(250, 204, 21, 0.24) 0%, #191c26 100%);
}
.trick-card.color-green {
  border-color: var(--cb-green);
  background: linear-gradient(160deg, rgba(74, 222, 128, 0.24) 0%, #111f28 100%);
}

.trick-card.is-winning {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.65), 0 8px 20px rgba(0, 0, 0, 0.55);
}

.trick-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
}

.trick-card-player {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trick-card-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.08rem 0.28rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: #fef08a;
  white-space: nowrap;
}

.trick-card-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  margin: auto 0;
}

.trick-card-num {
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
}

.trick-card-value {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cb-muted);
}

.trick-slot-awaiting {
  border: 1px dashed rgba(158, 176, 208, 0.32);
  background: rgba(18, 26, 43, 0.45);
  align-items: center;
  text-align: center;
}

.trick-slot-awaiting.is-active-slot {
  border-color: rgba(94, 234, 212, 0.65);
  background: rgba(94, 234, 212, 0.07);
}

.slot-player {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cb-muted);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-glyph {
  font-size: 1.45rem;
  line-height: 1;
  color: rgba(94, 234, 212, 0.55);
}

.slot-state {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cb-muted);
}

.trick-empty-note {
  font-size: 0.74rem;
  line-height: 1rem;
  color: var(--cb-muted);
}

.round-summary-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.summary-heading {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cb-accent);
}

.summary-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.summary-chip {
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  background: var(--cb-surface-alt);
  border: 1px solid var(--cb-border);
}

.summary-chip.is-paradox {
  border-color: var(--cb-red);
  color: #fda4af;
}

/* Center Actions Bar (Predictions + Reversible Draft + Phase Actions) */
.center-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
  height: 34px;
}

.predict-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.predict-group[hidden] {
  display: none !important;
}

.action-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.draft-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cb-accent);
  white-space: nowrap;
}

.cancel-draft {
  background: transparent;
  color: var(--cb-muted);
  border: 1px solid var(--cb-border);
  border-radius: 5px;
  padding: 0.18rem 0.5rem;
  font-size: 0.76rem;
  cursor: pointer;
}

.cancel-draft:disabled {
  opacity: 0.38;
  cursor: default;
}

.phase-buttons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

/* Hero Section 2: Player's Quantum Hand (.private-tray) */
.private-tray {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  height: 344px;
}

.private-tray .ui-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  height: 100%;
}

.tray-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
}

.tray-heading {
  font-size: 0.88rem;
  line-height: 1.15rem;
  font-weight: 700;
  color: var(--cb-text);
}

.discard-note,
.hidden-hand {
  font-size: 0.8rem;
  line-height: 1.15rem;
  color: var(--cb-accent);
  font-weight: 600;
}

.my-hand {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 142px;
  gap: 0.5rem;
  height: 294px;
  align-content: start;
}

/* Large Hero Quantum Card with Inline Actions */
.quantum-card {
  height: 142px;
  border-radius: 9px;
  border: 1px solid #384d75;
  background: linear-gradient(165deg, #1b2844 0%, #0f1728 100%);
  color: var(--cb-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.42rem 0.48rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  min-width: 0;
}

.quantum-card.is-active-card {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.38), 0 6px 16px rgba(0, 0, 0, 0.45);
}

.quantum-card.is-blocked {
  border-color: rgba(244, 63, 94, 0.65);
  opacity: 0.72;
}

.quantum-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  padding-bottom: 0.22rem;
  border-bottom: 1px solid rgba(158, 176, 208, 0.14);
}

.quantum-card-top:focus-visible {
  outline: 2px solid var(--cb-accent);
  border-radius: 4px;
}

.qcard-rank-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
}

.qcard-num {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.qcard-glyph {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cb-accent);
  opacity: 0.85;
}

.qcard-pips {
  display: flex;
  gap: 3px;
}

.qcard-pip {
  font-size: 0.64rem;
  font-weight: 800;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qcard-pip.color-red.is-open { background: rgba(244, 63, 94, 0.35); color: #fecdd3; }
.qcard-pip.color-blue.is-open { background: rgba(56, 189, 248, 0.35); color: #e0f2fe; }
.qcard-pip.color-yellow.is-open { background: rgba(250, 204, 21, 0.35); color: #fef9c3; }
.qcard-pip.color-green.is-open { background: rgba(74, 222, 128, 0.35); color: #dcfce7; }
.qcard-pip.is-closed { opacity: 0.2; background: rgba(255, 255, 255, 0.05); }

.card-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  margin-top: 0.28rem;
}

.card-actions .discard-tile {
  width: 100%;
  height: 100%;
  min-height: 58px;
  font-size: 0.86rem;
  font-weight: 700;
  background: rgba(94, 234, 212, 0.12);
  border-color: rgba(94, 234, 212, 0.45);
}

.card-color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem;
}

.card-color-grid[hidden],
.action-tile[hidden] {
  display: none !important;
}

.card-color-grid .observe-tile {
  padding: 0.28rem 0.2rem;
  font-size: 0.74rem;
  font-weight: 700;
  height: 36px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.observe-tile.color-red:not(:disabled) {
  background: rgba(244, 63, 94, 0.22);
  border-color: rgba(244, 63, 94, 0.72);
  color: #ffe4e6;
}
.observe-tile.color-blue:not(:disabled) {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.72);
  color: #e0f2fe;
}
.observe-tile.color-yellow:not(:disabled) {
  background: rgba(250, 204, 21, 0.2);
  border-color: rgba(250, 204, 21, 0.72);
  color: #fef9c3;
}
.observe-tile.color-green:not(:disabled) {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.72);
  color: #dcfce7;
}

/* Shared UI Button Base */
.ui-button {
  background: var(--cb-surface-alt);
  color: var(--cb-text);
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  padding: 0.34rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.ui-button:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.action-tile.is-selected {
  border-color: var(--cb-accent) !important;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.45);
}

.paradox-action:not(:disabled) {
  background: rgba(244, 63, 94, 0.25);
  border-color: var(--cb-red);
  color: #ffe4e6;
}

.next-action:not(:disabled) {
  background: rgba(94, 234, 212, 0.18);
  border-color: var(--cb-accent);
  color: #ccfbf1;
}

/* Right Side Rail: Compact Research Board + Tucked Experiment Log */
.research-panel,
.log-panel {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
}

.research-panel {
  height: 214px;
}

.research-panel .ui-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.side-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
}

.side-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cb-text);
}

.side-legend {
  font-size: 0.72rem;
  color: var(--cb-muted);
}

.research-board {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  background: #0d1422;
  border: 1px solid var(--cb-border);
  border-radius: 7px;
  padding: 0.35rem 0.4rem;
}

.board-header-row,
.board-row {
  display: grid;
  grid-template-columns: 36px repeat(auto-fit, minmax(22px, 1fr));
  gap: 0.18rem;
  align-items: center;
}

.board-corner,
.board-col-header {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--cb-muted);
  text-align: center;
}

.board-row-label {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.15rem 0.25rem;
  border-radius: 4px;
  text-align: center;
}

.board-row-label.color-red { color: #fda4af; background: rgba(244, 63, 94, 0.16); }
.board-row-label.color-blue { color: #bae6fd; background: rgba(56, 189, 248, 0.16); }
.board-row-label.color-yellow { color: #fef08a; background: rgba(250, 204, 21, 0.16); }
.board-row-label.color-green { color: #bbf7d0; background: rgba(74, 222, 128, 0.16); }

.board-cell {
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(158, 176, 208, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(24, 35, 56, 0.55);
  color: var(--cb-muted);
  user-select: none;
}

.board-cell.state-observed {
  background: rgba(148, 163, 184, 0.2);
  border-color: rgba(148, 163, 184, 0.45);
  color: #cbd5e1;
}

.board-cell.state-played.color-red { background: rgba(244, 63, 94, 0.28); border-color: var(--cb-red); color: #fff1f2; }
.board-cell.state-played.color-blue { background: rgba(56, 189, 248, 0.28); border-color: var(--cb-blue); color: #f0f9ff; }
.board-cell.state-played.color-yellow { background: rgba(250, 204, 21, 0.28); border-color: var(--cb-yellow); color: #fefce8; }
.board-cell.state-played.color-green { background: rgba(74, 222, 128, 0.28); border-color: var(--cb-green); color: #f0fdf4; }

.board-cell.is-legal-cell {
  cursor: pointer;
  border-color: rgba(94, 234, 212, 0.5);
  color: var(--cb-text);
}

.board-cell.is-draft-target {
  outline: 2px solid var(--cb-accent);
  outline-offset: 1px;
  background: rgba(94, 234, 212, 0.22);
}

/* Experiment Log Panel on Side Rail */
.log-panel {
  height: 366px;
  display: flex;
  flex-direction: column;
}

.log-panel .ui-section-body {
  height: 100%;
}

.play-history {
  font-size: 0.76rem;
  color: var(--cb-muted);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.play-history summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--cb-text);
  margin-bottom: 0.35rem;
}

.play-history ol {
  margin: 0;
  padding-left: 1.15rem;
  max-height: 316px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Rules dialog */
#rules-dialog {
  max-width: 640px;
  border-radius: 10px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  color: var(--cb-text);
  padding: 1rem 1.25rem;
}

#rules-dialog::backdrop {
  background: rgba(5, 8, 15, 0.75);
}

.rules-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.rules-heading h2 {
  margin: 0;
  font-size: 1.15rem;
}

.rules-content h3 {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.95rem;
  color: var(--cb-accent);
}

.rules-content p {
  margin: 0.35rem 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #d8e3f8;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}