[hidden] {
  display: none !important;
}

:root {
  --bg-0: #050816;
  --bg-1: #0b1026;
  --bg-2: #11193a;
  --surface-0: rgba(12, 18, 39, 0.86);
  --surface-1: rgba(16, 24, 52, 0.94);
  --surface-2: rgba(25, 35, 74, 0.96);
  --line-soft: rgba(116, 149, 255, 0.22);
  --line-strong: rgba(93, 238, 255, 0.34);
  --text-0: #eef5ff;
  --text-1: #b9c4ec;
  --text-2: #7f8bbd;
  --accent-cyan: #5deeff;
  --accent-orange: #ff8c42;
  --accent-gold: #ffd166;
  --accent-violet: #a469ff;
  --accent-lime: #76ffbe;
  --danger-bg: rgba(88, 18, 44, 0.55);
  --danger-line: rgba(255, 91, 143, 0.4);
  --danger-text: #ffd6e7;
  --success-bg: rgba(5, 76, 67, 0.46);
  --success-line: rgba(118, 255, 190, 0.4);
  --success-text: #d8ffef;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 28px 80px rgba(0, 0, 0, 0.32);
  --shadow-glow: 0 0 0 1px rgba(93, 238, 255, 0.15), 0 22px 70px rgba(14, 23, 54, 0.58), 0 0 48px rgba(93, 238, 255, 0.08);
  --glow-cyan: 0 0 28px rgba(93, 238, 255, 0.2);
  --glow-orange: 0 0 28px rgba(255, 140, 66, 0.22);
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --transition-fast: 140ms ease;
  --transition-med: 220ms ease;
}

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

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--text-0);
  background:
    radial-gradient(circle at 15% 18%, rgba(93, 238, 255, 0.14), transparent 24%),
    radial-gradient(circle at 85% 12%, rgba(164, 105, 255, 0.16), transparent 22%),
    radial-gradient(circle at 62% 75%, rgba(255, 140, 66, 0.14), transparent 28%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 34%, var(--bg-2) 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025)),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 78px,
      rgba(93, 238, 255, 0.035) 79px,
      transparent 80px
    );
  opacity: 0.36;
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
}

a:hover {
  color: #c6fbff;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.page-shell {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-6);
  z-index: 1;
}

.page-shell-auth {
  padding-block: 28px;
}

.fx-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 440ms ease, transform 440ms ease;
}

body.is-loaded .fx-rise {
  opacity: 1;
  transform: translateY(0);
}

.fx-delay-1 { transition-delay: 70ms; }
.fx-delay-2 { transition-delay: 140ms; }
.fx-delay-3 { transition-delay: 210ms; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent-cyan);
  font-size: 0.78rem;
}

.eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan));
  box-shadow: var(--glow-cyan);
}

.eyebrow-balanced::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-cyan), transparent);
  box-shadow: var(--glow-cyan);
}

.display-title,
h1,
h2,
h3 {
  font-family: "Orbitron", "Space Grotesk", sans-serif;
  letter-spacing: 0.02em;
}

.display-title {
  margin: 0;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.display-title .accent {
  color: var(--accent-orange);
  text-shadow: 0 0 34px rgba(255, 140, 66, 0.28);
}

.lede {
  margin: 0;
  color: var(--text-1);
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 42rem;
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(93, 238, 255, 0.25);
  background: rgba(10, 20, 47, 0.5);
  padding: 10px 14px;
  color: var(--text-1);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), var(--glow-cyan);
  max-width: 100%;
  flex-wrap: wrap;
}

.brand-chip strong {
  color: var(--text-0);
}

.auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.auth-hero-panel {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.auth-logo-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-logo-image {
  display: block;
  width: min(100%, 975px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 48px rgba(0, 0, 0, 0.34));
}

.auth-grid > .panel .eyebrow {
  margin-bottom: 18px;
}

.generation-description {
  margin-top: -2px;
  margin-bottom: 6px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(93, 238, 255, 0.16);
  background: rgba(255,255,255,0.03);
  color: var(--text-1);
  line-height: 1.6;
  min-height: 52px;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.avatar-option {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(141, 164, 255, 0.18);
  background: rgba(255,255,255,0.03);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}

.avatar-option:hover {
  transform: translateY(-2px);
  border-color: rgba(93, 238, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.12), 0 10px 28px rgba(12, 18, 39, 0.34);
}

.avatar-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.avatar-option.is-selected {
  border-color: rgba(93, 238, 255, 0.5);
  background: rgba(93, 238, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.16), 0 14px 34px rgba(11, 23, 51, 0.42);
}

.avatar-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 20px;
  border: 2px solid rgba(78, 223, 255, 0.74);
  background: linear-gradient(180deg, rgba(10, 17, 37, 0.96), rgba(4, 9, 22, 0.98));
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(36, 69, 158, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(59, 210, 255, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -10px 16px rgba(0,0,0,0.24);
}

.avatar-art::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 16px;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(5, 10, 23, 0.68);
  border-bottom: 1px solid rgba(5, 10, 23, 0.88);
  pointer-events: none;
  z-index: 1;
}

.avatar-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

.avatar-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.avatar-meta strong {
  color: var(--text-0);
  font-size: 1rem;
}

.avatar-meta span {
  color: var(--text-1);
  font-size: 0.9rem;
  line-height: 1.45;
}

.question-answer-box {
  min-height: 68px;
}

.hero-panel,
.panel,
.surface,
.stat-card,
.identity-panel,
.console-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(17, 25, 54, 0.96) 0%, rgba(10, 15, 34, 0.96) 100%);
  box-shadow: var(--shadow-glow);
}

.hero-panel::before,
.panel::before,
.surface::before,
.console-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(93, 238, 255, 0.08), transparent 32%, transparent 68%, rgba(255, 140, 66, 0.1));
}

.hero-panel {
  padding: clamp(28px, 4vw, 48px);
  padding-right: min(26vw, 260px);
  min-height: 420px;
  display: block;
}

.hero-orbit {
  width: min(300px, 30vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(93, 238, 255, 0.22);
  background:
    radial-gradient(circle at center, rgba(93, 238, 255, 0.18), transparent 38%),
    radial-gradient(circle at 32% 35%, rgba(255, 140, 66, 0.3), transparent 18%),
    radial-gradient(circle at 68% 62%, rgba(164, 105, 255, 0.22), transparent 20%);
  box-shadow: inset 0 0 0 22px rgba(255,255,255,0.015), 0 0 70px rgba(93, 238, 255, 0.12);
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.92;
}

.hero-orbit::before,
.hero-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 14%;
  border: 1px dashed rgba(255, 209, 102, 0.26);
}

.hero-orbit::after {
  inset: 28%;
  border-color: rgba(93, 238, 255, 0.26);
}

.panel {
  padding: 30px;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-right: min(18vw, 170px);
}

.hero-copy > * {
  max-width: 100%;
  min-width: 0;
}

.panel-title {
  margin: 0 0 8px;
  font-size: 1.6rem;
}

.panel-subtitle {
  margin: 0 0 20px;
  color: var(--text-1);
  line-height: 1.6;
}

.info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}

.info-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
  max-width: 100%;
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.grid-two > * {
  min-width: 0;
}

.form-stack,
form {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label,
.field legend {
  color: var(--text-1);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.field-note {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(141, 164, 255, 0.24);
  background: rgba(4, 10, 28, 0.72);
  color: var(--text-0);
  border-radius: 18px;
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

input[type="datetime-local"] {
  min-width: 0;
  padding-right: 44px;
}

input::placeholder,
textarea::placeholder {
  color: rgba(185, 196, 236, 0.56);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(93, 238, 255, 0.62);
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.28), 0 0 22px rgba(93, 238, 255, 0.14);
  transform: translateY(-1px);
}

input[type="radio"] {
  width: auto;
}

input[type="range"] {
  --range-progress: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 48px;
  height: 48px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent-cyan);
  cursor: pointer;
  touch-action: pan-y;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgba(141, 164, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-cyan) 0 var(--range-progress), rgba(7, 13, 31, 0.92) var(--range-progress) 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -13px;
  border: 3px solid #f8fbff;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 0 1px rgba(5, 12, 28, 0.92), 0 0 18px rgba(93, 238, 255, 0.42);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid rgba(141, 164, 255, 0.28);
  border-radius: 999px;
  background: rgba(7, 13, 31, 0.92);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent-cyan);
}

input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 3px solid #f8fbff;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 0 1px rgba(5, 12, 28, 0.92), 0 0 18px rgba(93, 238, 255, 0.42);
}

input[type="range"]:focus {
  transform: none;
  box-shadow: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid rgba(255, 209, 102, 0.72);
  outline-offset: 3px;
}

input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 3px solid rgba(255, 209, 102, 0.72);
  outline-offset: 3px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.game-table-background-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.admin-background-section-spacer {
  margin-top: 24px;
}

.game-table-background-option {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(141, 164, 255, 0.18);
  background: rgba(4, 10, 28, 0.54);
  cursor: pointer;
}

.game-table-background-option.is-selected,
.game-table-background-option:has(input:checked) {
  border-color: rgba(255, 209, 102, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.18), 0 0 28px rgba(255, 209, 102, 0.12);
}

.game-table-background-option input {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
}

.game-table-background-option img,
.game-table-background-default-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  object-fit: cover;
  background:
    radial-gradient(circle at 8% 78%, rgba(14, 108, 255, 0.42), transparent 19%),
    radial-gradient(circle at 91% 59%, rgba(48, 238, 75, 0.32), transparent 20%),
    radial-gradient(circle at 50% 16%, rgba(235, 29, 29, 0.36), transparent 22%),
    radial-gradient(circle at 50% 50%, #16213b 0%, #071126 52%, #030713 100%);
}

.game-table-background-default-preview {
  display: grid;
  place-items: center;
  color: rgba(247,251,255,0.9);
  font: 900 1rem/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.game-table-background-option strong {
  color: var(--text-0);
  font-size: 0.95rem;
}

.game-table-background-option em {
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.3;
  font-style: normal;
}

.card-back-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid rgba(141, 164, 255, 0.16);
  border-radius: 16px;
  background: rgba(4, 10, 28, 0.42);
}

.card-back-preview-card {
  position: relative;
  width: 82px;
  aspect-ratio: 5 / 7.2;
  overflow: hidden;
  border-radius: 10px;
  border: 3px solid rgba(255,255,255,0.94);
  box-shadow: 0 12px 24px rgba(0,0,0,0.28);
}

.card-back-preview-card-css {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(226, 33, 33, 0.54), transparent 21%),
    radial-gradient(ellipse at 50% 51%, rgba(104, 13, 20, 0.46), transparent 45%),
    linear-gradient(180deg, rgba(14, 17, 31, 0.98), rgba(7, 10, 20, 1));
}

.card-back-preview-card-css span {
  color: rgba(245, 247, 255, 0.92);
  font: 900 0.7rem/0.98 "Space Grotesk", sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(225, 24, 29, 0.68);
}

.card-back-preview-card-image {
  background: center / cover no-repeat;
}

.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.button,
button,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  min-height: 48px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #08111f;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange));
  box-shadow: 0 16px 34px rgba(255, 140, 66, 0.2), var(--glow-orange);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.button:hover,
button:hover,
.button-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(255, 140, 66, 0.28), 0 0 30px rgba(255, 140, 66, 0.18);
  filter: saturate(1.08);
}

.button-secondary,
.ghost,
.pill-button {
  color: var(--text-0);
  background: linear-gradient(180deg, rgba(21, 31, 68, 0.92) 0%, rgba(11, 18, 40, 0.96) 100%);
  border: 1px solid rgba(93, 238, 255, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), var(--glow-cyan);
}

.button-secondary:hover,
.ghost:hover,
.pill-button:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 28px rgba(93, 238, 255, 0.12);
}

.button-danger {
  background: linear-gradient(180deg, rgba(124, 24, 56, 0.92) 0%, rgba(86, 18, 42, 0.98) 100%);
  color: #ffe2ec;
  border: 1px solid rgba(255, 91, 143, 0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 18px 36px rgba(99, 18, 48, 0.25);
}

.button-danger:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 0 28px rgba(255, 91, 143, 0.16);
}

.button-small {
  min-height: 36px;
  padding: 8px 13px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.admin-replay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-replay-actions form {
  margin: 0;
}

.text-link {
  color: var(--text-1);
}

.status-card,
.alert {
  border-radius: 18px;
  padding: 14px 16px;
  border: 1px solid transparent;
}

.alert-error,
.error {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger-text);
}

.alert-success,
.success {
  background: var(--success-bg);
  border-color: var(--success-line);
  color: var(--success-text);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.topbar-actions,
.nav-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr);
  gap: var(--space-5);
}

.identity-panel {
  padding: 28px;
}

.identity-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.identity-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10, 17, 37, 0.96), rgba(4, 9, 22, 0.98));
  border: 2px solid rgba(78, 223, 255, 0.74);
  box-shadow:
    0 0 0 3px rgba(36, 69, 158, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(59, 210, 255, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -10px 16px rgba(0,0,0,0.24);
  display: grid;
  place-items: center;
  font-family: "Orbitron", sans-serif;
  font-size: 1.7rem;
  color: var(--text-0);
}

.identity-avatar::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 16px;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(5, 10, 23, 0.68);
  border-bottom: 1px solid rgba(5, 10, 23, 0.88);
  pointer-events: none;
  z-index: 1;
}

.identity-avatar-live {
  overflow: hidden;
  padding: 0;
}

.identity-avatar-live img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

.generation-token,
.role-chip,
.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
  color: var(--text-1);
}

.metric-chip-active {
  border-color: rgba(118, 255, 190, 0.24);
  background: rgba(18, 82, 63, 0.28);
  color: #d9fff0;
}

.metric-chip-disabled {
  border-color: rgba(255, 91, 143, 0.24);
  background: rgba(92, 26, 48, 0.28);
  color: #ffd6e7;
}

.metric-chip-locked {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: var(--text-2);
}

.generation-token strong,
.role-chip strong {
  color: var(--text-0);
}

.role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.console-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-5);
}

.console-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-5);
}

.console-rail,
.console-main {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(12, 18, 39, 0.95), rgba(7, 13, 31, 0.96));
  box-shadow: var(--shadow-glow);
}

.console-rail {
  padding: 20px;
  position: sticky;
  top: 20px;
  align-self: start;
}

.console-main {
  padding: 28px;
  min-height: 620px;
}

.rail-section-title {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.tab-list {
  display: grid;
  gap: 10px;
}

.tab-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 18px;
  padding: 13px 16px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.025);
  color: var(--text-1);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.tab-link:hover {
  transform: translateX(3px);
  border-color: rgba(93, 238, 255, 0.24);
  color: var(--text-0);
}

.tab-link.active {
  color: var(--text-0);
  background: linear-gradient(135deg, rgba(93, 238, 255, 0.14), rgba(255, 140, 66, 0.14));
  border-color: rgba(93, 238, 255, 0.34);
  box-shadow: var(--glow-cyan);
}

.tab-kicker {
  font-size: 0.8rem;
  color: var(--text-2);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.stat-card {
  padding: 18px;
  background: linear-gradient(180deg, rgba(18, 29, 65, 0.95), rgba(10, 17, 36, 0.98));
}

.stat-value {
  display: block;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--text-0);
}

.stat-label {
  color: var(--text-2);
  font-size: 0.92rem;
}

.panel-grid {
  display: grid;
  gap: var(--space-5);
}

.surface {
  padding: 22px;
}

.surface-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.surface-title-small {
  font-size: 0.98rem;
}

.surface-copy {
  margin: 0 0 16px;
  color: var(--text-1);
  line-height: 1.6;
}

.table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(2, 7, 20, 0.38);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  text-align: left;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
}

.table th {
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.table tbody tr:hover {
  background: rgba(255,255,255,0.022);
}

.card-print-list {
  display: grid;
  gap: 8px;
  min-width: 260px;
}

.card-print-row {
  display: grid;
  grid-template-columns: 52px minmax(70px, 1fr) 42px minmax(90px, 1fr);
  gap: 10px;
  align-items: center;
}

.card-print-serial {
  font-family: "Orbitron", sans-serif;
  color: var(--text-0);
}

.admin-gameplay-form {
  display: grid;
  gap: var(--space-5);
}

.admin-gameplay-section {
  display: grid;
  gap: 16px;
}

.admin-range-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-range-value {
  font-family: "Orbitron", sans-serif;
  color: var(--accent-cyan);
  font-size: 0.86rem;
  white-space: nowrap;
}

.admin-range-input {
  width: 100%;
  min-height: 36px;
  accent-color: var(--accent-cyan);
}

.admin-range-scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-2);
  font-size: 0.78rem;
}

.admin-gameplay-save {
  display: flex;
  justify-content: flex-end;
  padding-block: 16px;
}

.admin-subtabs {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.admin-subtab-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(141, 164, 255, 0.16);
  background: rgba(4, 10, 28, 0.42);
}

.admin-subtab-button {
  width: 100%;
  min-height: 54px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.035);
  color: var(--text-1);
  box-shadow: none;
  text-align: left;
  letter-spacing: 0;
}

.admin-subtab-button span:first-child {
  color: var(--text-0);
  font-size: 0.88rem;
  line-height: 1.15;
}

.admin-subtab-button span:last-child {
  color: var(--text-2);
  font-size: 0.74rem;
  line-height: 1.2;
}

.admin-subtab-button:hover,
.admin-subtab-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(93, 238, 255, 0.28);
  background: rgba(93, 238, 255, 0.08);
  box-shadow: none;
  filter: none;
}

.admin-subtab-button.is-active,
.admin-subtab-button[aria-selected="true"] {
  border-color: rgba(255, 209, 102, 0.42);
  background: linear-gradient(135deg, rgba(93, 238, 255, 0.13), rgba(255, 209, 102, 0.11));
  color: var(--text-0);
}

.admin-subtab-panels,
.admin-subtab-panel.is-active {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.admin-subtab-panel[hidden] {
  display: none !important;
}

.admin-gameplay-section.admin-subtab-panel.is-active {
  gap: 16px;
}

.admin-tab-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.admin-checkbox-panel {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(141, 164, 255, 0.16);
  background: rgba(4, 10, 28, 0.42);
}

.admin-card-render-grid {
  align-items: end;
}

.admin-replay-note {
  margin-top: 14px;
}

.admin-card-preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-width: 360px;
  max-width: 760px;
}

.admin-card-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 142px;
  max-width: 176px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.035);
}

.admin-card-preview-strip-color-shift {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 154px));
  align-items: start;
  justify-content: start;
  gap: 10px 12px;
  min-width: 300px;
  max-width: 330px;
}

.admin-card-preview-strip-color-shift .admin-card-preview-item {
  width: auto;
  min-width: 0;
  max-width: none;
}

.admin-card-preview-strip-color-shift .admin-card-preview-item:first-child {
  grid-column: 1 / -1;
  justify-self: start;
  width: 154px;
}

.admin-card-face-preview {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  aspect-ratio: 5 / 7;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid rgba(247,251,255,0.9);
  color: rgba(247,251,255,0.94);
  background: linear-gradient(160deg, rgba(42, 53, 86, 0.98), rgba(9, 15, 34, 0.98));
  box-shadow: 0 8px 18px rgba(0,0,0,0.26);
}

.admin-card-face-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.admin-card-face-preview-asset {
  background: rgba(2, 7, 20, 0.72);
}

.admin-card-face-preview-red {
  background: linear-gradient(160deg, #f35f52, #731827);
}

.admin-card-face-preview-blue {
  background: linear-gradient(160deg, #4e9bff, #132a78);
}

.admin-card-face-preview-gold {
  background: linear-gradient(160deg, #ffd36e, #8c5614);
  color: #1b1308;
}

.admin-card-face-preview-silver {
  background: linear-gradient(160deg, #eff5ff, #687487);
  color: #151a22;
}

.admin-card-face-preview-generation {
  background: linear-gradient(160deg, #42e3a1, #173b64);
}

.admin-card-face-preview-rarity {
  background: linear-gradient(160deg, #f8fbff, #1a1f2e);
  color: #101522;
}

.admin-card-face-corner {
  position: absolute;
  top: 4px;
  left: 4px;
  font: 800 0.55rem/1 "Orbitron", sans-serif;
  color: currentColor;
  opacity: 0.78;
}

.admin-card-face-mark {
  font-family: "Orbitron", sans-serif;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: currentColor;
}

.admin-card-face-mark-single {
  font-size: 1.35rem;
}

.admin-card-face-mark-pair {
  font-size: 1rem;
}

.admin-card-face-mark-wide {
  font-size: 0.7rem;
}

.admin-card-face-mark-long {
  font-size: 0.58rem;
}

.admin-card-preview-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-card-preview-meta > strong,
.admin-card-preview-meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-card-preview-meta strong {
  color: var(--text-0);
  font-size: 0.75rem;
}

.admin-card-preview-meta > span {
  color: var(--text-2);
  font-size: 0.68rem;
}

.admin-card-preview-source {
  display: block;
}

.admin-card-preview-source-stacked {
  display: grid;
  gap: 1px;
  line-height: 1.05;
  white-space: normal;
}

.admin-card-preview-source-stacked span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-row-action {
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.table-row-action:hover,
.table-row-action:focus-visible {
  background: rgba(93, 238, 255, 0.06);
  outline: none;
}

.stack {
  display: grid;
  gap: 12px;
}

.question-card,
.motd-card,
.note-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.question-card strong,
.motd-card strong,
.note-card strong {
  color: var(--text-0);
}

.question-card p,
.motd-card p,
.note-card p {
  margin: 6px 0 0;
  color: var(--text-1);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.inline-code {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 0.85rem;
  color: #c7f9ff;
  white-space: pre-wrap;
  word-break: break-word;
}

.actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.helper-text {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.6;
}

.checkbox-stack {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.checkbox-row input {
  margin: 0;
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--accent-cyan);
  flex: 0 0 auto;
}

.checkbox-row span {
  display: inline-block;
  line-height: 1.4;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ai-match-shell {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.ai-match-start-form {
  display: grid;
  gap: 18px;
}

.ai-match-opponent-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(93, 238, 255, 0.2);
  border-radius: 18px;
  background: rgba(7, 13, 31, 0.54);
}

.ai-match-opponent-picker legend {
  grid-column: 1 / -1;
  padding: 0 6px;
  color: var(--accent-gold);
  font: 800 0.78rem/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ai-match-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ai-match-opponent-picker .ai-match-slider-row input[type="range"] {
  position: static;
  inset: auto;
  width: 100%;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}

.ai-match-opponent-picker .ai-match-slider-row input[type="range"]:focus {
  transform: none;
  box-shadow: none;
}

.ai-match-slider-row output {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 46px;
  border: 1px solid rgba(93, 238, 255, 0.34);
  border-radius: 14px;
  color: var(--text-0);
  background: rgba(12, 20, 45, 0.88);
  font: 900 1.15rem/1 "Space Grotesk", sans-serif;
  box-shadow: inset 0 0 18px rgba(93, 238, 255, 0.06);
}

.ai-match-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.72fr);
  gap: 16px;
}

.ai-match-state,
.ai-match-sidebar {
  padding: 18px;
}

.ai-match-state {
  display: grid;
  gap: 14px;
  align-content: start;
}

.ai-table-first-header {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-color: rgba(96, 188, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(12, 19, 39, 0.94), rgba(8, 13, 28, 0.98)),
    radial-gradient(circle at 18% 18%, rgba(93, 238, 255, 0.08), transparent 28%);
}

.ai-table-first-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ai-table-first-title {
  margin: 2px 0 0;
  color: var(--text-0);
  font: 700 1.05rem/1.08 "Space Grotesk", sans-serif;
}

.ai-table-first-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ai-table-first-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.ai-live-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(103, 135, 255, 0.1);
  background: rgba(12, 20, 42, 0.46);
}

.ai-live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(103, 135, 255, 0.18);
  background: rgba(15, 24, 48, 0.72);
  color: var(--text-1);
}

.ai-live-meta span {
  font-size: 0.78rem;
}

.ai-live-status.is-syncing {
  border-color: rgba(80, 205, 255, 0.28);
}

.ai-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 191, 87, 0.85);
  box-shadow: 0 0 0 6px rgba(255, 191, 87, 0.12);
}

.ai-live-status.is-syncing .ai-live-dot {
  background: rgba(80, 205, 255, 0.92);
  box-shadow: 0 0 0 6px rgba(80, 205, 255, 0.12);
  animation: ai-live-pulse 1.4s ease-in-out infinite;
}

.ai-live-status-pressure .ai-live-dot {
  background: rgba(255, 108, 108, 0.9);
  box-shadow: 0 0 0 6px rgba(255, 108, 108, 0.12);
}

.ai-live-status-chaos .ai-live-dot,
.ai-live-status-shift .ai-live-dot {
  background: rgba(182, 111, 255, 0.9);
  box-shadow: 0 0 0 6px rgba(182, 111, 255, 0.12);
}

.ai-live-status-victory .ai-live-dot {
  background: rgba(255, 191, 87, 0.92);
  box-shadow: 0 0 0 6px rgba(255, 191, 87, 0.16);
}

.ai-live-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-2);
  font-size: 0.86rem;
}

.htmx-indicator {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  transform: translateY(0);
}

.ai-live-indicator {
  color: var(--brand-cyan);
  font-weight: 700;
}

.ai-live-bar-pressure .ai-live-indicator {
  color: #ffb1b1;
}

.ai-live-bar-chaos .ai-live-indicator,
.ai-live-bar-shift .ai-live-indicator {
  color: #dbc8ff;
}

.ai-live-bar-victory .ai-live-indicator {
  color: #ffd97a;
}

.ai-turn-transition {
  display: grid;
  gap: 4px;
  margin-top: 0;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(103, 135, 255, 0.18);
  background: rgba(14, 22, 45, 0.72);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.ai-turn-transition strong {
  color: var(--text-0);
  font-size: 0.92rem;
}

.ai-turn-transition span {
  color: var(--text-1);
  font-size: 0.84rem;
  line-height: 1.35;
}

.ai-turn-transition-ready {
  border-color: rgba(80, 205, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(11, 23, 44, 0.9), rgba(9, 18, 34, 0.94)),
    radial-gradient(circle at 14% 18%, rgba(93, 238, 255, 0.12), transparent 34%);
}

.ai-turn-transition-pressure {
  border-color: rgba(255, 105, 105, 0.28);
  background:
    linear-gradient(180deg, rgba(33, 12, 20, 0.9), rgba(19, 9, 15, 0.94)),
    radial-gradient(circle at 14% 18%, rgba(255, 88, 118, 0.12), transparent 34%);
}

.ai-turn-transition-chaos,
.ai-turn-transition-shift {
  border-color: rgba(149, 111, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(21, 15, 42, 0.9), rgba(13, 10, 27, 0.94)),
    radial-gradient(circle at 14% 18%, rgba(182, 82, 255, 0.12), transparent 34%);
}

.ai-turn-transition-victory {
  border-color: rgba(255, 190, 64, 0.3);
  background:
    linear-gradient(180deg, rgba(35, 25, 8, 0.9), rgba(22, 16, 7, 0.94)),
    radial-gradient(circle at 14% 18%, rgba(255, 186, 58, 0.14), transparent 34%);
}

.ai-turn-transition-pending {
  border-color: rgba(93, 238, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(11, 23, 44, 0.92), rgba(9, 18, 34, 0.96)),
    radial-gradient(circle at 14% 18%, rgba(93, 238, 255, 0.16), transparent 34%);
}

.ai-match-state,
.ai-match-sidebar {
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.ai-match-state-pressure,
.ai-match-sidebar-pressure {
  border-color: rgba(255, 105, 105, 0.22);
  box-shadow: 0 0 0 1px rgba(255, 105, 105, 0.05), inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-match-state-chaos,
.ai-match-sidebar-chaos {
  border-color: rgba(168, 123, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(168, 123, 255, 0.05), inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-match-state-shift,
.ai-match-sidebar-shift {
  border-color: rgba(93, 238, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.05), inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-match-state-victory,
.ai-match-sidebar-victory {
  border-color: rgba(255, 190, 64, 0.24);
  box-shadow: 0 0 0 1px rgba(255, 190, 64, 0.05), inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-resolution-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(80, 205, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(13, 21, 45, 0.94), rgba(9, 15, 32, 0.98)),
    radial-gradient(circle at 18% 18%, rgba(0, 181, 255, 0.12), transparent 26%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 30px rgba(0,0,0,0.18);
}

.ai-resolution-card-inline {
  margin-top: 2px;
  padding: 14px 16px;
  gap: 8px;
  border-radius: 16px;
}

.ai-resolution-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-resolution-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(111, 145, 255, 0.24);
  background: rgba(20, 31, 63, 0.82);
  color: var(--text-1);
  font: 700 0.72rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-resolution-card-victory {
  border-color: rgba(255, 190, 64, 0.42);
  background:
    linear-gradient(180deg, rgba(31, 23, 8, 0.96), rgba(20, 15, 7, 0.98)),
    radial-gradient(circle at 18% 18%, rgba(255, 186, 58, 0.18), transparent 28%);
}

.ai-resolution-card-victory .ai-resolution-flag {
  border-color: rgba(255, 190, 64, 0.35);
  background: rgba(58, 41, 10, 0.9);
  color: #ffd97a;
}

.ai-resolution-card-pressure {
  border-color: rgba(255, 105, 105, 0.32);
  background:
    linear-gradient(180deg, rgba(34, 15, 22, 0.96), rgba(20, 10, 15, 0.98)),
    radial-gradient(circle at 18% 18%, rgba(255, 88, 118, 0.14), transparent 28%);
}

.ai-resolution-card-pressure .ai-resolution-flag {
  border-color: rgba(255, 105, 105, 0.3);
  background: rgba(68, 19, 29, 0.9);
  color: #ffb3b3;
}

.ai-resolution-card-shift,
.ai-resolution-card-chaos {
  border-color: rgba(149, 111, 255, 0.32);
}

.ai-resolution-card-shift .ai-resolution-flag,
.ai-resolution-card-chaos .ai-resolution-flag {
  border-color: rgba(149, 111, 255, 0.28);
  background: rgba(36, 22, 70, 0.9);
  color: #d1c1ff;
}

.ai-resolution-card-chaos {
  background:
    linear-gradient(180deg, rgba(24, 16, 41, 0.96), rgba(14, 10, 27, 0.98)),
    radial-gradient(circle at 18% 18%, rgba(182, 82, 255, 0.16), transparent 28%);
}

.ai-resolution-headline {
  color: var(--text-0);
  font: 700 1.08rem/1.35 "Space Grotesk", sans-serif;
}

.ai-resolution-inline-head {
  display: grid;
  gap: 4px;
}

.ai-resolution-status {
  margin: 0;
  font-size: 0.92rem;
}

.ai-resolution-impact {
  margin: -2px 0 2px;
  color: var(--text-1);
  font-size: 0.84rem;
}

.ai-resolution-detail-list {
  display: grid;
  gap: 8px;
  margin: 2px 0 4px;
}

.ai-resolution-detail-item {
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(103, 135, 255, 0.16);
  background: rgba(18, 27, 55, 0.62);
  color: var(--text-1);
  font-size: 0.88rem;
  line-height: 1.4;
}

.ai-resolution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-resolution-pill {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(103, 135, 255, 0.16);
  background: rgba(18, 27, 55, 0.74);
}

.ai-resolution-pill span {
  color: var(--text-2);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ai-resolution-pill strong {
  color: var(--text-0);
  font-size: 0.96rem;
  line-height: 1.25;
}

.ai-state-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.ai-state-row-table {
  margin-bottom: 0;
}

.ai-table-arena {
  display: grid;
  gap: 18px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(103, 135, 255, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(93, 238, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(10, 16, 34, 0.94), rgba(7, 12, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 22px 48px rgba(0, 0, 0, 0.2);
}

.ai-table-arena-pressure {
  border-color: rgba(255, 105, 105, 0.24);
}

.ai-table-arena-chaos,
.ai-table-arena-shift {
  border-color: rgba(149, 111, 255, 0.24);
}

.ai-table-arena-victory {
  border-color: rgba(255, 190, 64, 0.26);
}

.ai-table-arena-ready {
  border-color: rgba(98, 255, 192, 0.24);
  box-shadow:
    0 0 0 1px rgba(98, 255, 192, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 22px 48px rgba(0, 0, 0, 0.2);
}

.ai-table-opponent-band {
  display: flex;
  justify-content: center;
  min-height: 96px;
}

.ai-table-middle {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(170px, 220px);
  gap: 18px;
  align-items: center;
}

.ai-table-side {
  display: flex;
  min-height: 172px;
}

.ai-table-side-left {
  justify-content: flex-start;
}

.ai-table-side-right {
  justify-content: flex-end;
}

.ai-table-board-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ai-table-seat {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 220px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(103, 135, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(18, 27, 55, 0.92), rgba(10, 15, 29, 0.96)),
    radial-gradient(circle at top, rgba(93, 238, 255, 0.08), transparent 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat-load-leader {
  border-color: rgba(255, 190, 64, 0.18);
}

.ai-table-seat-load-danger {
  border-color: rgba(255, 105, 105, 0.16);
}

.ai-table-seat.is-current {
  box-shadow:
    0 0 0 1px rgba(93, 238, 255, 0.1),
    0 0 30px rgba(93, 238, 255, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(-3px) scale(1.01);
}

.ai-table-seat-top {
  text-align: center;
}

.ai-table-seat-rival-identity {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.ai-table-seat-side {
  align-self: center;
}

.ai-table-seat-live-turn {
  border-color: rgba(98, 255, 192, 0.28);
}

.ai-table-seat-resolving {
  border-color: rgba(93, 238, 255, 0.28);
}

.ai-table-seat-winner {
  border-color: rgba(255, 202, 88, 0.34);
}

.ai-table-seat-final {
  border-color: rgba(255, 162, 115, 0.28);
}

.ai-table-seat-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-table-seat strong {
  color: var(--text-0);
  font-size: 0.94rem;
}

.ai-table-seat-compact-meta {
  color: rgba(225, 232, 246, 0.72);
  font-size: 0.82rem;
  line-height: 1.25;
}

.ai-table-seat-metrics {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.ai-table-seat-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(116, 149, 255, 0.14);
  background: rgba(18, 27, 55, 0.62);
  color: var(--text-1);
  font-size: 0.72rem;
}

.ai-table-seat-load-chip {
  font-weight: 700;
}

.ai-table-seat-load-chip-leader {
  border-color: rgba(255, 190, 64, 0.2);
  color: #ffe3a0;
}

.ai-table-seat-load-chip-danger {
  border-color: rgba(255, 105, 105, 0.18);
  color: #ffc4c4;
}

.ai-table-seat-load-chip-steady {
  border-color: rgba(93, 238, 255, 0.16);
}

.ai-table-seat-alert {
  display: grid;
  gap: 4px;
  padding: 7px 9px;
  border-radius: 12px;
  border: 1px solid rgba(116, 149, 255, 0.16);
  background: linear-gradient(180deg, rgba(15, 21, 42, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-table-seat-alert span {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-table-seat-alert strong {
  color: var(--text-0);
  font-size: 0.82rem;
  line-height: 1.35;
}

.ai-table-seat-alert-ready {
  border-color: rgba(98, 255, 192, 0.2);
}

.ai-table-seat-alert-pressure {
  border-color: rgba(255, 105, 105, 0.2);
}

.ai-table-seat-alert-chaos {
  border-color: rgba(168, 123, 255, 0.2);
}

.ai-table-seat-alert-shift {
  border-color: rgba(93, 238, 255, 0.2);
}

.ai-table-seat-hit {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(116, 149, 255, 0.14);
  background: linear-gradient(180deg, rgba(11, 17, 34, 0.92), rgba(8, 13, 24, 0.98));
}

.ai-table-seat-hit span {
  color: var(--text-2);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-table-seat-hit strong {
  color: var(--text-0);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ai-table-seat-hit-pressure {
  border-color: rgba(255, 105, 105, 0.2);
}

.ai-table-seat-hit-chaos {
  border-color: rgba(168, 123, 255, 0.2);
}

.ai-table-seat-hit-shift {
  border-color: rgba(93, 238, 255, 0.2);
}

.ai-table-seat.is-seat-pulse {
  animation: ai-seat-pulse 760ms cubic-bezier(.2,.8,.2,1);
}

.ai-table-seat.is-seat-alert-live {
  box-shadow: 0 0 0 1px rgba(98, 255, 192, 0.08), 0 0 26px rgba(98, 255, 192, 0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat.is-seat-alert-pressure {
  box-shadow: 0 0 0 1px rgba(255, 105, 105, 0.08), 0 0 24px rgba(255, 105, 105, 0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat.is-seat-alert-chaos {
  box-shadow: 0 0 0 1px rgba(168, 123, 255, 0.08), 0 0 24px rgba(168, 123, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat.is-seat-alert-shift {
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.08), 0 0 24px rgba(93, 238, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat.is-seat-major-hit {
  box-shadow:
    0 0 0 1px rgba(255, 140, 66, 0.12),
    0 0 34px rgba(255, 140, 66, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat-threat {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(116, 149, 255, 0.14);
  background: linear-gradient(180deg, rgba(13, 18, 36, 0.92), rgba(8, 12, 24, 0.98));
}

.ai-table-seat-threat span {
  color: var(--text-2);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-table-seat-threat strong {
  color: var(--text-0);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ai-table-seat-top .ai-table-seat-alert,
.ai-table-seat-top .ai-table-seat-hit,
.ai-table-seat-top .ai-table-seat-threat,
.ai-table-seat-side .ai-table-seat-alert,
.ai-table-seat-side .ai-table-seat-hit,
.ai-table-seat-side .ai-table-seat-threat {
  justify-self: center;
  width: min(100%, 210px);
}

.ai-table-seat-threat-ready {
  border-color: rgba(98, 255, 192, 0.2);
}

.ai-table-seat-threat-pressure {
  border-color: rgba(255, 105, 105, 0.2);
}

.ai-table-seat-threat-chaos {
  border-color: rgba(168, 123, 255, 0.2);
}

.ai-table-seat-threat-shift {
  border-color: rgba(93, 238, 255, 0.2);
}

.ai-table-seat.is-seat-threat-pressure {
  box-shadow:
    0 0 0 1px rgba(255, 105, 105, 0.12),
    0 0 28px rgba(255, 105, 105, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat.is-seat-threat-chaos {
  box-shadow:
    0 0 0 1px rgba(168, 123, 255, 0.1),
    0 0 26px rgba(168, 123, 255, 0.1),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat.is-seat-threat-shift,
.ai-table-seat.is-seat-threat-ready {
  box-shadow:
    0 0 0 1px rgba(93, 238, 255, 0.1),
    0 0 24px rgba(93, 238, 255, 0.1),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat-hand {
  position: relative;
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin: 4px 0 2px;
}

.ai-table-seat-hand-side {
  justify-content: flex-start;
}

.ai-table-seat-hand-fan-top .ai-card-back:nth-child(1) { transform: translate(18px, 14px) rotate(-15deg); }
.ai-table-seat-hand-fan-top .ai-card-back:nth-child(2) { transform: translate(10px, 8px) rotate(-10deg); }
.ai-table-seat-hand-fan-top .ai-card-back:nth-child(3) { transform: translate(4px, 3px) rotate(-5deg); }
.ai-table-seat-hand-fan-top .ai-card-back:nth-child(4) { transform: translate(-4px, 3px) rotate(5deg); }
.ai-table-seat-hand-fan-top .ai-card-back:nth-child(5) { transform: translate(-10px, 8px) rotate(10deg); }
.ai-table-seat-hand-fan-top .ai-card-back:nth-child(6) { transform: translate(-18px, 14px) rotate(15deg); }

.ai-table-seat-hand-fan-left .ai-card-back:nth-child(1) { transform: translate(0, 12px) rotate(-18deg); }
.ai-table-seat-hand-fan-left .ai-card-back:nth-child(2) { transform: translate(2px, 8px) rotate(-12deg); }
.ai-table-seat-hand-fan-left .ai-card-back:nth-child(3) { transform: translate(4px, 4px) rotate(-7deg); }
.ai-table-seat-hand-fan-left .ai-card-back:nth-child(4) { transform: translate(6px, 1px) rotate(-3deg); }
.ai-table-seat-hand-fan-left .ai-card-back:nth-child(5) { transform: translate(8px, -2px) rotate(2deg); }
.ai-table-seat-hand-fan-left .ai-card-back:nth-child(6) { transform: translate(10px, -4px) rotate(7deg); }

.ai-table-seat-hand-fan-right .ai-card-back:nth-child(1) { transform: translate(0, -4px) rotate(-7deg); }
.ai-table-seat-hand-fan-right .ai-card-back:nth-child(2) { transform: translate(-2px, -2px) rotate(-2deg); }
.ai-table-seat-hand-fan-right .ai-card-back:nth-child(3) { transform: translate(-4px, 1px) rotate(3deg); }
.ai-table-seat-hand-fan-right .ai-card-back:nth-child(4) { transform: translate(-6px, 4px) rotate(8deg); }
.ai-table-seat-hand-fan-right .ai-card-back:nth-child(5) { transform: translate(-8px, 8px) rotate(13deg); }
.ai-table-seat-hand-fan-right .ai-card-back:nth-child(6) { transform: translate(-10px, 12px) rotate(18deg); }

.ai-card-back {
  width: 38px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(103, 135, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(26, 36, 72, 0.96), rgba(11, 17, 34, 0.98)),
    radial-gradient(circle at 50% 18%, rgba(93, 238, 255, 0.16), transparent 38%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 18px rgba(0,0,0,0.2);
  margin-left: -12px;
  position: relative;
}

.ai-card-back:first-child {
  margin-left: 0;
}

.ai-card-back-human {
  width: 30px;
  height: 42px;
  margin-left: -10px;
  border-radius: 10px;
}

.ai-card-back::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 8px;
  border: 1px solid rgba(93, 238, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(93, 238, 255, 0.08), transparent 45%),
    linear-gradient(315deg, rgba(255, 140, 66, 0.08), transparent 42%);
}

.ai-table-human-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(98, 255, 192, 0.22);
  background:
    linear-gradient(180deg, rgba(10, 27, 28, 0.88), rgba(7, 16, 17, 0.94)),
    radial-gradient(circle at 14% 20%, rgba(118, 255, 190, 0.1), transparent 36%);
}

.ai-table-human-copy {
  display: grid;
  gap: 5px;
}

.ai-table-human-mini-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  flex: 0 0 auto;
}

.ai-table-human-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ai-table-seat-seat-toplane,
.ai-table-seat-seat-leftlane,
.ai-table-seat-seat-rightlane {
  border-width: 1px;
  border-color: rgba(255,255,255,0.08);
  border-radius: 28px;
  box-shadow: 0 20px 34px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-table-seat-seat-toplane {
  background:
    linear-gradient(180deg, rgba(83, 19, 19, 0.8), rgba(28, 10, 17, 0.94)),
    radial-gradient(circle at 50% 0%, rgba(255, 78, 78, 0.24), transparent 58%);
}

.ai-table-seat-seat-leftlane {
  background:
    linear-gradient(180deg, rgba(16, 39, 93, 0.8), rgba(9, 19, 44, 0.94)),
    radial-gradient(circle at 0% 50%, rgba(54, 139, 255, 0.22), transparent 54%);
}

.ai-table-seat-seat-rightlane {
  background:
    linear-gradient(180deg, rgba(18, 62, 31, 0.8), rgba(8, 24, 12, 0.94)),
    radial-gradient(circle at 100% 50%, rgba(76, 255, 120, 0.2), transparent 54%);
}

.ai-table-seat-avatar-wrap {
  display: grid;
  place-items: center;
  margin-top: -56px;
  margin-bottom: 6px;
}

.ai-table-seat-avatar-wrap-side {
  justify-items: start;
  margin-top: -6px;
}

.ai-table-seat-avatar-wrap-right {
  justify-items: end;
}

.ai-table-seat-avatar {
  inline-size: 88px;
  block-size: 88px;
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,0.86);
  display: grid;
  place-items: center;
  color: #fff;
  font: 900 1.4rem/1 "Orbitron", "Space Grotesk", sans-serif;
  letter-spacing: 0.08em;
  box-shadow: 0 16px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}

.ai-table-seat-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.ai-table-seat-avatar-toplane {
  background: radial-gradient(circle at 35% 28%, #ffbfaf, #ef432a 54%, #70160f 100%);
}

.ai-table-seat-avatar-leftlane {
  background: radial-gradient(circle at 35% 28%, #badaff, #2f8fff 54%, #103a88 100%);
}

.ai-table-seat-avatar-rightlane {
  background: radial-gradient(circle at 35% 28%, #c6ffd6, #37cf59 54%, #0d571f 100%);
}

.ai-table-seat-nameplate,
.ai-table-human-nameplate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-family: "Orbitron", "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 18px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}

.ai-table-seat-nameplate strong,
.ai-table-human-nameplate strong {
  font-size: 1.05rem;
}

.ai-table-seat-count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(15, 20, 35, 0.96), rgba(6, 10, 20, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 18px rgba(0,0,0,0.22);
  color: rgba(244, 247, 255, 0.98);
  font-family: "Rajdhani", "Orbitron", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.ai-table-seat-count-badge-toplane {
  min-width: 48px;
  min-height: 38px;
  border-radius: 14px;
}

.ai-table-seat-nameplate-toplane {
  background: linear-gradient(180deg, rgba(163, 37, 18, 0.96), rgba(88, 15, 10, 0.98));
}

.ai-table-seat-nameplate-leftlane {
  background: linear-gradient(180deg, rgba(18, 84, 173, 0.96), rgba(8, 42, 104, 0.98));
}

.ai-table-seat-nameplate-rightlane {
  background: linear-gradient(180deg, rgba(18, 130, 46, 0.96), rgba(8, 72, 21, 0.98));
}

.ai-table-human-avatar-wrap {
  flex: 0 0 auto;
}

.ai-table-human-avatar {
  inline-size: 110px;
  block-size: 110px;
  border-radius: 999px;
  border: 4px solid rgba(255, 212, 100, 0.92);
  background: radial-gradient(circle at 35% 28%, #ffd98e, #e0a31a 54%, #6d4610 100%);
  box-shadow: 0 18px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font: 900 1.75rem/1 "Orbitron", "Space Grotesk", sans-serif;
}

.ai-table-human-avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.ai-table-human-nameplate {
  width: fit-content;
  background: linear-gradient(180deg, rgba(186, 128, 18, 0.98), rgba(104, 71, 10, 1));
}

.ai-turn-focus {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(103, 135, 255, 0.24);
  background: linear-gradient(180deg, rgba(14, 21, 45, 0.9), rgba(8, 14, 30, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-state-row-underboard {
  margin-top: 2px;
}

.ai-state-row-underboard > div:not(.ai-turn-focus) {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(103, 135, 255, 0.14);
  background: rgba(13, 20, 41, 0.62);
  min-width: 0;
}

.ai-state-row-underboard .ai-turn-focus {
  padding: 12px 14px;
  gap: 6px;
}

.ai-turn-focus-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-player-row-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ai-phase-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-0);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-phase-chip-live-turn,
.ai-turn-focus-live-turn {
  border-color: rgba(98, 255, 192, 0.3);
  background: linear-gradient(180deg, rgba(16, 52, 42, 0.82), rgba(8, 23, 20, 0.94));
  box-shadow: 0 0 0 1px rgba(98, 255, 192, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-phase-chip-resolving,
.ai-turn-focus-resolving {
  border-color: rgba(93, 238, 255, 0.3);
  background: linear-gradient(180deg, rgba(16, 39, 58, 0.82), rgba(9, 21, 34, 0.94));
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-phase-chip-waiting,
.ai-phase-chip-queued,
.ai-turn-focus-waiting,
.ai-turn-focus-queued {
  border-color: rgba(119, 138, 196, 0.26);
  background: linear-gradient(180deg, rgba(24, 31, 57, 0.82), rgba(12, 18, 33, 0.94));
}

.ai-phase-chip-winner,
.ai-turn-focus-winner {
  border-color: rgba(255, 202, 88, 0.34);
  background: linear-gradient(180deg, rgba(64, 44, 14, 0.82), rgba(30, 21, 8, 0.94));
  color: #fff3c4;
}

.ai-phase-chip-final,
.ai-turn-focus-final {
  border-color: rgba(255, 162, 115, 0.3);
  background: linear-gradient(180deg, rgba(58, 31, 16, 0.82), rgba(28, 17, 10, 0.94));
}

.ai-top-discard {
  display: grid;
  gap: 10px;
}

.ai-discard-spotlight {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(116, 149, 255, 0.16);
  background: linear-gradient(180deg, rgba(16, 23, 46, 0.86), rgba(9, 14, 28, 0.94));
}

.ai-discard-spotlight.is-spotlight-pulse {
  animation: ai-spotlight-pulse 760ms cubic-bezier(.2,.8,.2,1);
}

.ai-discard-spotlight.is-card-landed .ai-discard-spotlight-mark {
  animation: ai-card-landed 820ms cubic-bezier(.2,.8,.2,1);
}

.ai-discard-spotlight-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-discard-spotlight-label {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-discard-just-landed {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 140, 66, 0.24);
  background: rgba(255, 140, 66, 0.12);
  color: #ffd2b0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-discard-just-landed.is-visible {
  display: inline-flex;
}

.ai-discard-spotlight-body {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.ai-discard-spotlight-mark {
  min-height: 86px;
  border-radius: 16px;
  border: 1px solid rgba(116, 149, 255, 0.18);
  background: linear-gradient(180deg, rgba(23, 33, 68, 0.96), rgba(10, 16, 32, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  color: var(--text-0);
  font-family: "Orbitron", "Space Grotesk", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding: 8px;
}

.ai-discard-spotlight-mark-red {
  box-shadow: inset 4px 0 0 rgba(255, 99, 120, 0.78), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-spotlight-mark-blue {
  box-shadow: inset 4px 0 0 rgba(93, 182, 255, 0.78), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-spotlight-mark-gold {
  box-shadow: inset 4px 0 0 rgba(255, 205, 84, 0.82), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-spotlight-mark-silver {
  box-shadow: inset 4px 0 0 rgba(212, 223, 239, 0.82), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-spotlight-mark-colorless {
  box-shadow: inset 4px 0 0 rgba(166, 176, 196, 0.46), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-spotlight-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-discard-spotlight-copy strong {
  color: var(--text-0);
  font-size: 0.96rem;
  line-height: 1.3;
}

.ai-discard-spotlight-copy span {
  color: var(--text-1);
  font-size: 0.84rem;
  line-height: 1.35;
}

.ai-discard-spotlight-pressure {
  border-color: rgba(255, 105, 105, 0.22);
}

.ai-discard-spotlight-chaos {
  border-color: rgba(168, 123, 255, 0.22);
}

.ai-discard-spotlight-shift {
  border-color: rgba(93, 238, 255, 0.22);
}

.ai-discard-spotlight-victory {
  border-color: rgba(255, 190, 64, 0.24);
}

.ai-board-handoff {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(116, 149, 255, 0.16);
  background: linear-gradient(180deg, rgba(14, 20, 40, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-handoff-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-board-handoff-label {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-board-handoff strong {
  color: var(--text-0);
  font-size: 0.98rem;
  line-height: 1.3;
}

.ai-board-handoff span:last-child {
  color: var(--text-1);
  font-size: 0.86rem;
  line-height: 1.4;
}

.ai-board-handoff-pressure {
  border-color: rgba(255, 105, 105, 0.22);
  background: linear-gradient(180deg, rgba(34, 14, 21, 0.88), rgba(15, 10, 16, 0.95));
}

.ai-board-handoff-chaos {
  border-color: rgba(168, 123, 255, 0.22);
  background: linear-gradient(180deg, rgba(27, 16, 45, 0.88), rgba(13, 10, 22, 0.95));
}

.ai-board-handoff-shift {
  border-color: rgba(93, 238, 255, 0.22);
  background: linear-gradient(180deg, rgba(12, 26, 42, 0.88), rgba(9, 14, 24, 0.95));
}

.ai-board-handoff-victory {
  border-color: rgba(255, 190, 64, 0.24);
  background: linear-gradient(180deg, rgba(35, 25, 8, 0.88), rgba(20, 15, 7, 0.95));
}

.ai-board-vector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(116, 149, 255, 0.16);
  background: linear-gradient(180deg, rgba(14, 20, 40, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-vector-node {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-board-vector-node span,
.ai-board-vector-copy {
  color: var(--text-2);
  font-size: 0.74rem;
  line-height: 1.35;
}

.ai-board-vector-node strong,
.ai-board-vector-arrow span {
  color: var(--text-0);
  font-size: 0.9rem;
  line-height: 1.3;
}

.ai-board-vector-arrow {
  display: grid;
  place-items: center;
  min-height: 64px;
  border-radius: 14px;
  border: 1px dashed rgba(116, 149, 255, 0.18);
  background: linear-gradient(180deg, rgba(17, 24, 48, 0.82), rgba(10, 15, 30, 0.94));
  text-align: center;
  position: relative;
}

.ai-board-vector-arrow::after {
  content: "→";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  font-size: 1rem;
}

.ai-board-vector-copy {
  grid-column: 1 / -1;
}

.ai-board-vector-pressure {
  border-color: rgba(255, 105, 105, 0.22);
}

.ai-board-vector-chaos {
  border-color: rgba(168, 123, 255, 0.22);
}

.ai-board-vector-shift {
  border-color: rgba(93, 238, 255, 0.22);
}

.ai-board-impacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ai-board-impacts-wrap {
  display: grid;
  gap: 10px;
}

.ai-board-impacts-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-board-impacts-label {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-board-impact {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(116, 149, 255, 0.14);
  background: linear-gradient(180deg, rgba(14, 20, 40, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-impact span {
  color: var(--text-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-board-impact strong {
  color: var(--text-0);
  font-size: 0.86rem;
}

.ai-board-impact small {
  color: var(--text-1);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ai-board-impact-pressure {
  border-color: rgba(255, 105, 105, 0.2);
}

.ai-board-impact-chaos {
  border-color: rgba(168, 123, 255, 0.2);
}

.ai-board-impact-shift {
  border-color: rgba(93, 238, 255, 0.2);
}

.ai-board-zone {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(103, 135, 255, 0.2);
  background: linear-gradient(180deg, rgba(12, 18, 39, 0.9), rgba(8, 14, 30, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  margin-top: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color 240ms ease, background 240ms ease, box-shadow 240ms ease, transform 240ms ease;
  animation: ai-board-zone-float 5.8s ease-in-out infinite alternate;
}

.ai-board-zone::after {
  content: "";
  position: absolute;
  inset: -20% 8% auto;
  height: 72px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(93, 238, 255, 0.12), transparent 68%);
  pointer-events: none;
  opacity: 0.7;
  animation: ai-board-zone-sheen 6.6s ease-in-out infinite;
}

.ai-board-ring {
  position: absolute;
  inset: 24% 18%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

.ai-board-ring-arrow {
  position: absolute;
  color: rgba(255,255,255,0.12);
  font-size: 3.8rem;
  font-family: "Orbitron", "Space Grotesk", sans-serif;
  line-height: 1;
}

.ai-board-ring-arrow-left {
  left: 14%;
  top: 46%;
}

.ai-board-ring-arrow-right {
  right: 14%;
  top: 28%;
}

.ai-board-zone-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-board-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-board-hud-pill {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 15px;
  border: 1px solid rgba(116, 149, 255, 0.18);
  background: linear-gradient(180deg, rgba(15, 22, 45, 0.9), rgba(9, 15, 29, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-board-hud-pill span {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-board-hud-pill strong {
  color: var(--text-0);
  font-size: 0.92rem;
}

.ai-board-event-rail {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(116, 149, 255, 0.16);
  background: linear-gradient(180deg, rgba(14, 20, 40, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-event-headline {
  display: grid;
  gap: 4px;
}

.ai-board-event-label {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-board-event-headline strong {
  color: var(--text-0);
  font-size: 0.92rem;
  line-height: 1.35;
}

.ai-board-event-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-board-event-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(116, 149, 255, 0.16);
  background: rgba(18, 27, 55, 0.7);
  color: var(--text-1);
  font-size: 0.84rem;
  line-height: 1.25;
}

.ai-board-event-rail-pressure {
  border-color: rgba(255, 105, 105, 0.22);
  background: linear-gradient(180deg, rgba(34, 14, 21, 0.88), rgba(15, 10, 16, 0.95));
}

.ai-board-event-rail-chaos {
  border-color: rgba(168, 123, 255, 0.22);
  background: linear-gradient(180deg, rgba(27, 16, 45, 0.88), rgba(13, 10, 22, 0.95));
}

.ai-board-event-rail-shift {
  border-color: rgba(93, 238, 255, 0.22);
  background: linear-gradient(180deg, rgba(12, 26, 42, 0.88), rgba(9, 14, 24, 0.95));
}

.ai-board-event-rail-victory {
  border-color: rgba(255, 190, 64, 0.24);
  background: linear-gradient(180deg, rgba(35, 25, 8, 0.88), rgba(20, 15, 7, 0.95));
}

.ai-board-zone-grid {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.ai-board-cues {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ai-board-standings {
  display: grid;
  gap: 10px;
}

.ai-board-standings-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-board-standings-label {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-board-standings-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-board-standings-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid rgba(116, 149, 255, 0.14);
  background: linear-gradient(180deg, rgba(15, 21, 42, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-standings-item.is-winner {
  border-color: rgba(255, 190, 64, 0.22);
}

.ai-board-standings-item.is-human {
  border-color: rgba(93, 238, 255, 0.2);
}

.ai-board-standings-rank {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(116, 149, 255, 0.16);
  display: grid;
  place-items: center;
  color: var(--text-0);
  font: 700 0.82rem/1 "IBM Plex Mono", monospace;
  background: rgba(18, 27, 55, 0.64);
}

.ai-board-standings-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-board-standings-copy strong {
  color: var(--text-0);
  font-size: 0.9rem;
  line-height: 1.25;
}

.ai-board-standings-copy span {
  color: var(--text-1);
  font-size: 0.8rem;
  line-height: 1.25;
}

.ai-sidebar-note {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(116, 149, 255, 0.14);
  background: linear-gradient(180deg, rgba(15, 21, 42, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-sidebar-note strong {
  color: var(--text-0);
  font-size: 0.92rem;
}

.ai-sidebar-note span {
  color: var(--text-1);
  font-size: 0.84rem;
  line-height: 1.4;
}

.ai-board-cue {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(116, 149, 255, 0.16);
  background: linear-gradient(180deg, rgba(15, 21, 42, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-cue span {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-board-cue strong {
  color: var(--text-0);
  font-size: 0.86rem;
  line-height: 1.35;
}

.ai-board-cue-pressure {
  border-color: rgba(255, 105, 105, 0.18);
}

.ai-board-cue-chaos {
  border-color: rgba(168, 123, 255, 0.18);
}

.ai-board-cue-shift {
  border-color: rgba(93, 238, 255, 0.18);
}

.ai-board-cue-victory {
  border-color: rgba(255, 190, 64, 0.2);
}

.ai-board-timeline {
  display: grid;
  gap: 10px;
}

.ai-board-timeline-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-board-timeline-label {
  color: var(--text-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ai-board-timeline-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-board-timeline-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(116, 149, 255, 0.14);
  background: linear-gradient(180deg, rgba(15, 21, 42, 0.88), rgba(9, 14, 28, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-timeline-item.is-latest {
  border-color: rgba(93, 238, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-timeline-item-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-board-timeline-time {
  color: var(--text-2);
  font-size: 0.78rem;
}

.ai-board-timeline-item strong {
  color: var(--text-0);
  font-size: 0.9rem;
  line-height: 1.35;
}

.ai-board-timeline-detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-board-timeline-detail {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(116, 149, 255, 0.14);
  background: rgba(18, 27, 55, 0.64);
  color: var(--text-1);
  font-size: 0.8rem;
  line-height: 1.25;
}

.ai-board-timeline-item-pressure {
  border-color: rgba(255, 105, 105, 0.18);
}

.ai-board-timeline-item-chaos {
  border-color: rgba(168, 123, 255, 0.18);
}

.ai-board-timeline-item-shift {
  border-color: rgba(93, 238, 255, 0.18);
}

.ai-board-timeline-item-victory {
  border-color: rgba(255, 190, 64, 0.2);
}

.ai-board-zone-pressure {
  border-color: rgba(255, 115, 115, 0.24);
  background: linear-gradient(180deg, rgba(34, 14, 21, 0.9), rgba(13, 10, 16, 0.96));
}

.ai-board-zone-chaos {
  border-color: rgba(168, 123, 255, 0.24);
  background: linear-gradient(180deg, rgba(28, 16, 45, 0.9), rgba(13, 10, 22, 0.96));
}

.ai-board-zone-shift {
  border-color: rgba(93, 238, 255, 0.24);
  background: linear-gradient(180deg, rgba(12, 26, 42, 0.9), rgba(8, 14, 24, 0.96));
}

.ai-board-zone-ready {
  border-color: rgba(98, 255, 192, 0.24);
  background:
    linear-gradient(180deg, rgba(9, 28, 26, 0.9), rgba(8, 15, 22, 0.96)),
    radial-gradient(circle at 50% 18%, rgba(118, 255, 190, 0.08), transparent 44%);
}

.ai-table-arena {
  padding: 18px 18px 22px;
  border-radius: 34px;
  border-color: rgba(103, 135, 255, 0.16);
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 78, 78, 0.12), transparent 18%),
    radial-gradient(circle at 16% 56%, rgba(46, 126, 255, 0.16), transparent 23%),
    radial-gradient(circle at 84% 56%, rgba(76, 255, 120, 0.14), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(255, 192, 52, 0.16), transparent 22%),
    linear-gradient(180deg, rgba(8, 12, 28, 0.96), rgba(5, 9, 20, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 28px 64px rgba(0, 0, 0, 0.34);
}

.ai-table-opponent-band {
  min-height: 132px;
}

.ai-table-middle {
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) minmax(190px, 250px);
  gap: 12px;
}

.ai-table-side {
  min-height: 250px;
  align-items: center;
}

.ai-table-seat {
  max-width: 250px;
  padding: 20px 18px 14px;
  border-radius: 26px;
  border-color: rgba(255,255,255,0.08);
}

.ai-table-seat-top {
  max-width: 520px;
  margin: 0 auto;
  padding-top: 34px;
}

.ai-table-seat-side {
  min-height: 240px;
}

.ai-table-seat-hand {
  min-height: 78px;
  margin: 8px 0 6px;
}

.ai-card-back {
  width: 56px;
  height: 78px;
  border-radius: 15px;
  border: 2px solid rgba(255,255,255,0.82);
  background:
    radial-gradient(circle at 50% 26%, rgba(229, 33, 33, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(20, 25, 46, 0.98), rgba(5, 8, 18, 1));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 24px rgba(0,0,0,0.24);
  margin-left: -18px;
}

.ai-card-back-human {
  width: 34px;
  height: 48px;
  margin-left: -12px;
  border-radius: 11px;
}

.ai-card-back::before {
  inset: 9px;
  border-color: rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 50% 38%, rgba(229, 33, 33, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(93, 238, 255, 0.04), transparent 45%);
}

.ai-table-human-rail {
  padding: 18px 18px 16px;
  border-radius: 24px;
  border-color: rgba(255, 198, 59, 0.22);
  background:
    linear-gradient(180deg, rgba(62, 45, 8, 0.88), rgba(25, 17, 5, 0.96)),
    radial-gradient(circle at 14% 20%, rgba(255, 196, 59, 0.14), transparent 36%);
  box-shadow:
    0 18px 30px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-board-zone {
  padding: 24px 28px 22px;
  border-radius: 999px;
  border-color: rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.04), transparent 34%),
    linear-gradient(180deg, rgba(24, 34, 62, 0.94), rgba(11, 18, 33, 0.98));
}

.ai-board-zone::after {
  inset: 16% 14%;
  height: auto;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02), transparent 72%);
  opacity: 1;
  animation: none;
}

.ai-board-zone-grid {
  gap: 22px;
}

.ai-draw-stack-card {
  min-height: 170px;
  border: 2px solid rgba(255,255,255,0.9);
  background:
    radial-gradient(circle at 50% 26%, rgba(229, 33, 33, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(22, 28, 52, 0.98), rgba(6, 10, 22, 1));
}

.ai-discard-card,
.ai-player-row {
  border-width: 2px;
  border-color: rgba(255,255,255,0.88);
}

.ai-draw-stat {
  display: none;
}

.ai-draw-stack {
  display: grid;
  gap: 10px;
  align-content: start;
}

.ai-draw-stack-card {
  min-height: 148px;
  border-radius: 18px;
  border: 1px solid rgba(103, 135, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(27, 37, 74, 0.88), rgba(12, 18, 38, 0.96)),
    radial-gradient(circle at top, rgba(93, 238, 255, 0.12), transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 3px rgba(255,255,255,0.03);
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
  position: relative;
}

.ai-draw-stack-card strong {
  color: var(--text-0);
  font-size: 2rem;
  line-height: 1;
}

.ai-draw-stack-card.is-heavy-swing {
  box-shadow:
    0 0 0 1px rgba(255, 140, 66, 0.14),
    0 0 38px rgba(255, 140, 66, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 3px rgba(255,255,255,0.03);
}

.ai-draw-stack-card span {
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
}

.ai-draw-delta {
  min-height: 20px;
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.ai-draw-delta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-draw-delta.is-loss {
  color: #ffcc91;
}

.ai-draw-delta.is-heavy-loss {
  color: #ffb076;
  text-shadow: 0 0 18px rgba(255, 140, 66, 0.2);
}

.ai-draw-delta.is-gain {
  color: #8cf4ff;
}

.ai-draw-delta.is-heavy-gain {
  color: #b2fbff;
  text-shadow: 0 0 18px rgba(93, 238, 255, 0.18);
}

.ai-draw-surge {
  min-height: 20px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
  color: #ffd2b0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ai-draw-surge.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-draw-stack-card::before,
.ai-draw-stack-card::after,
.ai-discard-card::before,
.ai-discard-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.ai-draw-stack-card::before,
.ai-discard-card::before {
  transform: translate(8px, 8px);
  border: 1px solid rgba(103, 135, 255, 0.12);
  background: rgba(8, 13, 28, 0.44);
  z-index: -2;
}

.ai-draw-stack-card::after,
.ai-discard-card::after {
  transform: translate(4px, 4px);
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(12, 18, 39, 0.52);
  z-index: -1;
}

.ai-top-discard-pressure .helper-text,
.ai-discard-card-pressure span:last-child {
  color: #ffc6c6;
}

.ai-top-discard-chaos .helper-text,
.ai-discard-card-chaos span:last-child {
  color: #d7cbff;
}

.ai-top-discard-shift .helper-text,
.ai-discard-card-shift span:last-child {
  color: #bfeaff;
}

.ai-discard-card,
.ai-hand-card,
.ai-player-row {
  border-radius: 18px;
  border: 1px solid rgba(103, 135, 255, 0.2);
  background: linear-gradient(180deg, rgba(12, 18, 39, 0.92), rgba(8, 14, 30, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-card {
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
  position: relative;
}

.ai-discard-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-discard-card-pressure {
  border-color: rgba(255, 115, 115, 0.26);
  background: linear-gradient(180deg, rgba(48, 17, 24, 0.92), rgba(18, 10, 16, 0.97));
}

.ai-discard-card-chaos {
  border-color: rgba(168, 123, 255, 0.26);
  background: linear-gradient(180deg, rgba(35, 19, 58, 0.92), rgba(16, 10, 27, 0.97));
}

.ai-discard-card-shift {
  border-color: rgba(93, 238, 255, 0.26);
  background: linear-gradient(180deg, rgba(13, 31, 52, 0.92), rgba(8, 16, 28, 0.97));
}

.ai-discard-card-color-red {
  box-shadow: inset 4px 0 0 rgba(255, 99, 120, 0.78), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-card-color-blue {
  box-shadow: inset 4px 0 0 rgba(93, 182, 255, 0.78), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-card-color-gold {
  box-shadow: inset 4px 0 0 rgba(255, 205, 84, 0.82), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-card-color-silver {
  box-shadow: inset 4px 0 0 rgba(212, 223, 239, 0.82), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-discard-card-colorless {
  box-shadow: inset 4px 0 0 rgba(166, 176, 196, 0.46), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-color-focus {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(103, 135, 255, 0.24);
  background: linear-gradient(180deg, rgba(15, 20, 40, 0.9), rgba(8, 14, 30, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-color-focus-red {
  border-color: rgba(255, 107, 129, 0.34);
  background: linear-gradient(180deg, rgba(62, 18, 26, 0.88), rgba(24, 10, 14, 0.96));
}

.ai-color-focus-blue {
  border-color: rgba(93, 182, 255, 0.34);
  background: linear-gradient(180deg, rgba(13, 31, 58, 0.88), rgba(8, 14, 27, 0.96));
}

.ai-color-focus-gold {
  border-color: rgba(255, 205, 84, 0.34);
  background: linear-gradient(180deg, rgba(60, 42, 10, 0.88), rgba(23, 17, 8, 0.96));
}

.ai-color-focus-silver {
  border-color: rgba(212, 223, 239, 0.34);
  background: linear-gradient(180deg, rgba(33, 39, 48, 0.88), rgba(14, 18, 25, 0.96));
}

.ai-color-focus-none {
  border-color: rgba(136, 148, 170, 0.24);
}

.ai-board-zone:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(4, 10, 24, 0.24), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-board-zone:hover .ai-draw-stack-card,
.ai-board-zone:hover .ai-discard-card {
  transform: translateY(-2px);
}

.ai-board-zone-ready .ai-draw-stack-card,
.ai-board-zone-ready .ai-discard-card {
  box-shadow:
    0 0 0 1px rgba(98, 255, 192, 0.08),
    0 0 26px rgba(98, 255, 192, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-board-zone.is-live-flash,
.ai-table-human-rail.is-live-flash,
.ai-hand-grid.is-live-flash {
  animation: ai-live-refresh 560ms cubic-bezier(.2,.8,.2,1);
}

.ai-board-zone.is-live-flash .ai-draw-stack-card,
.ai-board-zone.is-live-flash .ai-discard-card {
  animation: ai-stack-refresh 560ms cubic-bezier(.2,.8,.2,1);
}

.ai-board-zone.is-draw-pulse .ai-draw-stack-card {
  animation: ai-draw-impact 680ms cubic-bezier(.2,.8,.2,1);
}

.ai-board-zone.is-discard-pulse .ai-discard-card {
  animation: ai-discard-impact 680ms cubic-bezier(.2,.8,.2,1);
}

.ai-turn-focus.is-turn-pass {
  animation: ai-turn-pass 700ms cubic-bezier(.2,.8,.2,1);
}

.ai-board-event-rail.is-event-pulse {
  animation: ai-event-pulse 680ms cubic-bezier(.2,.8,.2,1);
}

.ai-board-impacts.is-event-pulse .ai-board-impact {
  animation: ai-event-pulse 680ms cubic-bezier(.2,.8,.2,1);
}

.ai-board-vector.is-vector-pulse {
  animation: ai-event-pulse 680ms cubic-bezier(.2,.8,.2,1);
}

.ai-board-vector.is-vector-heavy {
  box-shadow:
    0 0 0 1px rgba(255, 140, 66, 0.14),
    0 0 34px rgba(255, 140, 66, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-board-zone-pressure .ai-draw-stack-card,
.ai-board-zone-pressure .ai-discard-card {
  box-shadow: 0 0 0 1px rgba(255, 105, 105, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-board-zone-chaos .ai-draw-stack-card,
.ai-board-zone-chaos .ai-discard-card {
  box-shadow: 0 0 0 1px rgba(168, 123, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}

.ai-board-zone-shift .ai-draw-stack-card,
.ai-board-zone-shift .ai-discard-card {
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}

@keyframes ai-board-zone-float {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -3px, 0);
  }
}

@keyframes ai-board-zone-sheen {
  0%, 100% {
    transform: translate3d(-4%, 0, 0) scaleX(0.98);
    opacity: 0.38;
  }
  50% {
    transform: translate3d(4%, 0, 0) scaleX(1.02);
    opacity: 0.74;
  }
}

@keyframes ai-live-refresh {
  0% {
    box-shadow: 0 0 0 0 rgba(93, 238, 255, 0);
    transform: translateY(0) scale(1);
  }
  35% {
    box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.12), 0 0 32px rgba(93, 238, 255, 0.16);
    transform: translateY(-2px) scale(1.005);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(93, 238, 255, 0);
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-draw-impact {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 3px rgba(255,255,255,0.03);
  }
  35% {
    transform: translateY(-6px) scale(1.03);
    box-shadow:
      0 0 0 1px rgba(93, 238, 255, 0.16),
      0 0 34px rgba(93, 238, 255, 0.18),
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 0 0 3px rgba(255,255,255,0.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-discard-impact {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-8px) scale(1.04) rotate(-1deg);
    box-shadow: 0 0 0 1px rgba(255, 140, 66, 0.18), 0 0 34px rgba(255, 140, 66, 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-card-landed {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  30% {
    transform: translateY(-10px) scale(1.06) rotate(-2deg);
    box-shadow:
      0 0 0 1px rgba(255, 140, 66, 0.22),
      0 0 42px rgba(255, 140, 66, 0.22),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes ai-turn-pass {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 0 1px rgba(98, 255, 192, 0.12), 0 0 28px rgba(98, 255, 192, 0.14), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-event-pulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  35% {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.1), 0 0 28px rgba(93, 238, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-spotlight-pulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  35% {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 0 0 1px rgba(255, 140, 66, 0.12), 0 0 34px rgba(255, 140, 66, 0.16), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-seat-pulse {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-4px) scale(1.018);
    box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.12), 0 0 32px rgba(93, 238, 255, 0.14), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-stack-refresh {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
  35% {
    transform: translate3d(0, -6px, 0) scale(1.015);
    filter: brightness(1.06);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
}

.ai-player-row {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ai-player-row-live-turn {
  border-color: rgba(98, 255, 192, 0.24);
}

.ai-player-row-resolving {
  border-color: rgba(93, 238, 255, 0.24);
}

.ai-player-row-winner {
  border-color: rgba(255, 202, 88, 0.26);
  background: linear-gradient(180deg, rgba(40, 28, 10, 0.9), rgba(18, 13, 7, 0.96));
}

.ai-player-row.is-current {
  border-color: rgba(93, 238, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}

.ai-standing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(103, 135, 255, 0.18);
  background: rgba(16, 24, 48, 0.7);
}

.ai-standing-row.is-human {
  border-color: rgba(80, 205, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-standing-row.is-winner {
  border-color: rgba(255, 190, 64, 0.34);
  background: linear-gradient(180deg, rgba(46, 34, 11, 0.8), rgba(28, 20, 8, 0.88));
}

.ai-history-entry {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(103, 135, 255, 0.18);
  background: rgba(16, 24, 48, 0.72);
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, transform 220ms ease;
}

.ai-history-entry-pressure {
  border-color: rgba(255, 105, 105, 0.26);
  background: rgba(42, 16, 24, 0.72);
}

.ai-history-entry-chaos,
.ai-history-entry-shift {
  border-color: rgba(149, 111, 255, 0.24);
  background: rgba(24, 17, 44, 0.74);
}

.ai-history-entry-victory {
  border-color: rgba(255, 190, 64, 0.28);
  background: rgba(44, 32, 12, 0.76);
}

.ai-history-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-history-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-0);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-history-entry.is-latest {
  transform: translateY(-1px);
}

.ai-history-entry-pressure.is-latest {
  box-shadow: 0 0 0 1px rgba(255, 105, 105, 0.14), 0 10px 24px rgba(42, 12, 18, 0.18);
  animation: ai-latest-event-pulse-red 2.8s ease-in-out infinite;
}

.ai-history-entry-chaos.is-latest {
  box-shadow: 0 0 0 1px rgba(168, 123, 255, 0.14), 0 10px 24px rgba(28, 14, 48, 0.18);
  animation: ai-latest-event-pulse-violet 2.8s ease-in-out infinite;
}

.ai-history-entry-shift.is-latest {
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.14), 0 10px 24px rgba(10, 24, 42, 0.18);
  animation: ai-latest-event-pulse-cyan 2.8s ease-in-out infinite;
}

.ai-history-entry-victory.is-latest {
  box-shadow: 0 0 0 1px rgba(255, 190, 64, 0.14), 0 10px 24px rgba(44, 32, 12, 0.18);
  animation: ai-latest-event-pulse-gold 2.8s ease-in-out infinite;
}

.ai-history-entry.is-latest .ai-history-live-pill {
  background: rgba(255,255,255,0.1);
}

@keyframes ai-latest-event-pulse-red {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 105, 105, 0.14), 0 10px 24px rgba(42, 12, 18, 0.18); }
  50% { box-shadow: 0 0 0 1px rgba(255, 105, 105, 0.24), 0 14px 30px rgba(52, 14, 22, 0.24); }
}

@keyframes ai-latest-event-pulse-violet {
  0%, 100% { box-shadow: 0 0 0 1px rgba(168, 123, 255, 0.14), 0 10px 24px rgba(28, 14, 48, 0.18); }
  50% { box-shadow: 0 0 0 1px rgba(168, 123, 255, 0.24), 0 14px 30px rgba(34, 18, 56, 0.24); }
}

@keyframes ai-latest-event-pulse-cyan {
  0%, 100% { box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.14), 0 10px 24px rgba(10, 24, 42, 0.18); }
  50% { box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.24), 0 14px 30px rgba(12, 30, 48, 0.24); }
}

@keyframes ai-latest-event-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 190, 64, 0.14), 0 10px 24px rgba(44, 32, 12, 0.18); }
  50% { box-shadow: 0 0 0 1px rgba(255, 190, 64, 0.24), 0 14px 30px rgba(52, 38, 14, 0.24); }
}

.ai-history-time {
  color: var(--text-2);
  font: 700 0.72rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-history-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(111, 145, 255, 0.2);
  background: rgba(20, 31, 63, 0.82);
  color: var(--text-1);
  font: 700 0.68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-history-headline {
  color: var(--text-0);
  font: 700 0.95rem/1.35 "Space Grotesk", sans-serif;
}

.ai-history-detail-list {
  display: grid;
  gap: 6px;
}

.ai-history-detail-item {
  color: var(--text-1);
  font-size: 0.84rem;
  line-height: 1.4;
}

.ai-outcome-card {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 190, 64, 0.34);
  background:
    linear-gradient(180deg, rgba(39, 27, 8, 0.94), rgba(24, 16, 7, 0.98)),
    radial-gradient(circle at 16% 18%, rgba(255, 186, 58, 0.16), transparent 28%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 30px rgba(0,0,0,0.2);
}

.ai-outcome-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-hand-grid {
  display: flex;
  gap: 0;
  align-items: flex-start;
  overflow-x: auto;
  padding: 18px 18px 8px;
  margin: 0 -18px -6px;
  scrollbar-width: thin;
  position: relative;
}

.ai-bottom-hand-panel {
  background:
    linear-gradient(180deg, rgba(24, 18, 6, 0.92), rgba(11, 10, 7, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(255, 190, 64, 0.08), transparent 26%);
  border-color: rgba(255, 190, 64, 0.18);
}

.ai-bottom-hand-actions {
  justify-content: center;
}

.ai-draw-card-button {
  min-width: 240px;
  min-height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(133, 84, 15, 0.72);
  background: linear-gradient(180deg, #d39a24, #8c5512);
  color: #fff8e7;
  font-family: "Orbitron", "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 16px 26px rgba(99, 60, 11, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
}

.ai-turn-banner {
  display: grid;
  gap: 6px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(103, 135, 255, 0.18);
  background: rgba(14, 22, 45, 0.72);
}

.ai-turn-banner strong {
  color: var(--text-0);
  font-size: 1rem;
}

.ai-turn-banner span {
  color: var(--text-1);
  font-size: 0.92rem;
  line-height: 1.45;
}

.ai-turn-banner.is-live {
  border-color: rgba(80, 205, 255, 0.28);
}

.ai-turn-banner.is-locked {
  border-color: rgba(149, 111, 255, 0.24);
  background: rgba(19, 18, 43, 0.78);
}

.ai-hand-feedback {
  display: grid;
  gap: 6px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(103, 135, 255, 0.18);
  background: rgba(14, 22, 45, 0.68);
}

.ai-hand-feedback strong {
  color: var(--text-0);
  font-size: 0.98rem;
}

.ai-hand-feedback span {
  color: var(--text-1);
  font-size: 0.9rem;
  line-height: 1.45;
}

.ai-hand-feedback-hint {
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.4;
}

.ai-hand-feedback-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-hand-feedback-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(93, 238, 255, 0.3);
}

.ai-hand-feedback.is-syncing .ai-hand-feedback-pulse {
  animation: ai-live-pulse 1.2s ease-in-out infinite;
}

.ai-hand-feedback-ready {
  border-color: rgba(80, 205, 255, 0.26);
}

.ai-hand-feedback-pressure {
  border-color: rgba(255, 105, 105, 0.3);
  background: rgba(37, 13, 22, 0.78);
}

.ai-hand-feedback-chaos,
.ai-hand-feedback-shift {
  border-color: rgba(149, 111, 255, 0.28);
  background: rgba(23, 16, 46, 0.8);
}

.ai-hand-feedback-victory {
  border-color: rgba(255, 190, 64, 0.32);
  background: rgba(39, 27, 8, 0.82);
}

.ai-hand-feedback-pending {
  border-color: rgba(93, 238, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(11, 21, 43, 0.92), rgba(9, 18, 36, 0.96)),
    radial-gradient(circle at 14% 18%, rgba(93, 238, 255, 0.16), transparent 34%);
}

.ai-hand-panel-locked .ai-hand-grid {
  opacity: 0.72;
}

.ai-match-shell {
  position: relative;
}

.ai-match-activity-overlay {
  position: absolute;
  inset: 18px;
  z-index: 12;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(80, 205, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(8, 14, 30, 0.9), rgba(9, 16, 34, 0.94)),
    radial-gradient(circle at 50% 20%, rgba(80, 205, 255, 0.12), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 40px rgba(0,0,0,0.28);
  backdrop-filter: blur(8px);
  text-align: center;
  pointer-events: none;
}

.ai-match-activity-overlay strong {
  color: var(--text-0);
  font: 700 1.05rem/1.2 "Space Grotesk", sans-serif;
}

.ai-match-activity-overlay span {
  max-width: 32rem;
  color: var(--text-1);
  font-size: 0.92rem;
  line-height: 1.45;
}

.ai-match-activity-overlay-pressure {
  border-color: rgba(255, 105, 105, 0.34);
  background:
    linear-gradient(180deg, rgba(35, 12, 19, 0.92), rgba(24, 9, 15, 0.95)),
    radial-gradient(circle at 50% 20%, rgba(255, 88, 118, 0.14), transparent 42%);
}

.ai-match-activity-overlay-chaos,
.ai-match-activity-overlay-shift {
  border-color: rgba(149, 111, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(19, 13, 38, 0.92), rgba(13, 9, 27, 0.95)),
    radial-gradient(circle at 50% 20%, rgba(182, 82, 255, 0.16), transparent 42%);
}

.ai-match-activity-overlay-victory {
  border-color: rgba(255, 190, 64, 0.36);
  background:
    linear-gradient(180deg, rgba(39, 27, 8, 0.92), rgba(24, 16, 7, 0.95)),
    radial-gradient(circle at 50% 20%, rgba(255, 186, 58, 0.18), transparent 42%);
}

.ai-hand-card {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: start;
  gap: 18px;
  border: 1px solid rgba(122, 148, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(14, 20, 40, 0.92), rgba(9, 13, 29, 0.96)),
    radial-gradient(circle at 14% 16%, rgba(93, 238, 255, 0.12), transparent 36%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 36px rgba(3, 8, 20, 0.26);
  position: relative;
  overflow: hidden;
  flex: 0 0 min(420px, 74vw);
  margin-left: -18px;
  transform-origin: center bottom;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.ai-hand-card {
  flex: 0 0 min(470px, 78vw);
  min-width: 190px;
  margin-left: -26px;
  border-radius: 22px;
  border-color: rgba(255,255,255,0.86);
  box-shadow: 0 18px 30px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ai-hand-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 999px;
  background: rgba(93, 238, 255, 0.62);
}

.ai-hand-card:first-child {
  margin-left: 0;
}

.ai-hand-card:nth-child(odd) {
  transform: rotate(-1.2deg) translateY(6px);
}

.ai-hand-card:nth-child(even) {
  transform: rotate(1.2deg);
}

.ai-hand-card:nth-child(3n) {
  transform: rotate(-0.45deg) translateY(10px);
}

.ai-hand-card:hover,
.ai-hand-card:focus-within {
  transform: translateY(-8px) rotate(0deg) !important;
  z-index: 3;
  box-shadow:
    0 24px 42px rgba(3, 8, 20, 0.34),
    0 0 0 1px rgba(93, 238, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  filter: brightness(1.02);
}

.ai-hand-card-ready {
  z-index: 2;
}

.ai-hand-grid.is-live-flash .ai-hand-card {
  animation: ai-hand-refresh 520ms cubic-bezier(.2,.8,.2,1);
}

.ai-hand-grid.is-live-flash .ai-hand-card:nth-child(2) {
  animation-delay: 30ms;
}

.ai-hand-grid.is-live-flash .ai-hand-card:nth-child(3) {
  animation-delay: 60ms;
}

.ai-hand-grid.is-live-flash .ai-hand-card:nth-child(4) {
  animation-delay: 90ms;
}

.ai-hand-grid.is-live-flash .ai-hand-card:nth-child(5) {
  animation-delay: 120ms;
}

@keyframes ai-hand-refresh {
  0% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.06);
  }
  100% {
    filter: brightness(1);
  }
}

.ai-hand-card-red::before {
  background: linear-gradient(180deg, rgba(255, 101, 101, 0.95), rgba(255, 150, 110, 0.82));
}

.ai-hand-card-blue::before {
  background: linear-gradient(180deg, rgba(93, 238, 255, 0.95), rgba(82, 140, 255, 0.82));
}

.ai-hand-card-gold::before {
  background: linear-gradient(180deg, rgba(255, 214, 102, 0.98), rgba(255, 140, 66, 0.82));
}

.ai-hand-card-silver::before {
  background: linear-gradient(180deg, rgba(222, 232, 245, 0.96), rgba(147, 165, 194, 0.82));
}

.ai-hand-card-generation::before {
  background: linear-gradient(180deg, rgba(164, 105, 255, 0.96), rgba(93, 238, 255, 0.82));
}

.ai-hand-card-rarity::before {
  background: linear-gradient(180deg, rgba(255, 214, 102, 0.98), rgba(164, 105, 255, 0.84));
}

.ai-hand-card-ready {
  border-color: rgba(118, 255, 190, 0.28);
}

.ai-hand-card-choice {
  border-color: rgba(93, 238, 255, 0.28);
}

.ai-hand-card-assist {
  border-color: rgba(255, 214, 102, 0.24);
}

.ai-hand-card-blocked,
.ai-hand-card-locked {
  opacity: 0.84;
}

.ai-hand-card-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ai-hand-face-form {
  display: block;
  min-width: 0;
}

.ai-hand-face-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ai-hand-face-button .ai-hand-card-shell {
  border-radius: 20px;
  transition: transform 160ms ease, filter 160ms ease;
}

.ai-hand-face-button:hover .ai-hand-card-shell,
.ai-hand-face-button:focus-visible .ai-hand-card-shell {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.ai-hand-face-button:focus-visible {
  outline: 2px solid rgba(93, 238, 255, 0.58);
  outline-offset: 4px;
  border-radius: 22px;
}

.ai-hand-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-hand-family-chip,
.ai-hand-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font: 700 0.72rem/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ai-hand-family-chip {
  border: 1px solid rgba(122, 148, 255, 0.22);
  background: rgba(20, 27, 52, 0.82);
  color: var(--text-1);
}

.ai-hand-status-chip {
  border: 1px solid rgba(122, 148, 255, 0.22);
  background: rgba(14, 20, 40, 0.84);
  color: var(--text-1);
}

.ai-hand-status-chip-ready {
  border-color: rgba(118, 255, 190, 0.34);
  background: rgba(5, 76, 67, 0.5);
  color: var(--success-text);
}

.ai-hand-status-chip-choice {
  border-color: rgba(93, 238, 255, 0.34);
  background: rgba(11, 54, 76, 0.44);
  color: var(--accent-cyan);
}

.ai-hand-status-chip-assist {
  border-color: rgba(255, 214, 102, 0.34);
  background: rgba(58, 39, 9, 0.5);
  color: #ffe6a8;
}

.ai-hand-status-chip-blocked,
.ai-hand-status-chip-locked {
  border-color: rgba(132, 143, 182, 0.22);
  background: rgba(20, 24, 41, 0.78);
  color: rgba(218, 225, 255, 0.74);
}

.ai-hand-card-body {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.ai-hand-mark {
  display: grid;
  place-items: center;
  min-height: 74px;
  border-radius: 20px;
  border: 1px solid rgba(122, 148, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(18, 24, 48, 0.92), rgba(10, 15, 31, 0.98)),
    radial-gradient(circle at 50% 20%, rgba(93, 238, 255, 0.12), transparent 38%);
  color: var(--text-0);
  font: 800 1.4rem/1 "Orbitron", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-hand-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ai-hand-meta strong {
  color: var(--text-0);
  font-size: 1rem;
  line-height: 1.15;
}

.ai-hand-meta span {
  color: var(--text-1);
  font-size: 0.92rem;
  line-height: 1.35;
}

@keyframes ai-live-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.72;
  }
}

.ai-hand-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
}

.ai-hand-actions form {
  width: 100%;
}

.ai-hand-card-recovery {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 124, 124, 0.28);
  background:
    linear-gradient(180deg, rgba(43, 14, 20, 0.88), rgba(23, 10, 14, 0.94)),
    radial-gradient(circle at 12% 18%, rgba(255, 88, 118, 0.12), transparent 34%);
}

.ai-hand-card-recovery strong {
  color: #ffd5d5;
  font-size: 0.92rem;
}

.ai-hand-card-recovery span {
  color: #ffdede;
  font-size: 0.86rem;
  line-height: 1.45;
}

.ai-hand-quickplay-copy {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(118, 255, 190, 0.18);
  background: rgba(8, 28, 24, 0.56);
}

.ai-hand-quickplay-copy strong {
  color: var(--success-text);
  font-size: 0.95rem;
  line-height: 1.25;
}

.ai-hand-structured-form,
.ai-hand-assist-copy {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(93, 238, 255, 0.18);
  background: rgba(10, 20, 40, 0.58);
}

.ai-hand-structured-form[data-form-ready="false"] button[data-play-submit] {
  opacity: 0.58;
  filter: saturate(0.72);
  cursor: not-allowed;
  box-shadow: none;
}

.ai-hand-structured-form[data-form-ready="true"] button[data-play-submit] {
  box-shadow: 0 0 22px rgba(93, 238, 255, 0.14);
}

.ai-hand-structured-topline {
  display: grid;
  gap: 4px;
}

.ai-hand-structured-topline strong,
.ai-hand-assist-copy strong {
  color: var(--text-0);
  font-size: 0.96rem;
  line-height: 1.25;
}

.ai-hand-form-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(103, 135, 255, 0.16);
  background: rgba(14, 22, 42, 0.64);
}

.ai-hand-form-status-label {
  color: var(--text-0);
  font: 700 0.82rem/1.2 "Space Grotesk", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-hand-structured-form[data-form-ready="true"] .ai-hand-form-status {
  border-color: rgba(118, 255, 190, 0.28);
  background: rgba(8, 35, 29, 0.72);
}

.ai-hand-structured-form[data-form-ready="true"] .ai-hand-form-status-label {
  color: var(--success-text);
}

.ai-hand-control-block {
  display: grid;
  gap: 6px;
}

.ai-hand-pick-grid {
  display: grid;
  gap: 8px;
}

.ai-hand-pick-grid-colors {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-hand-pick-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(103, 135, 255, 0.18);
  background: rgba(18, 25, 49, 0.72);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.ai-hand-pick-card:hover {
  border-color: rgba(86, 210, 255, 0.42);
  background: rgba(22, 30, 58, 0.86);
  transform: translateY(-1px);
}

.ai-hand-pick-card:has(input:checked) {
  border-color: rgba(93, 238, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(17, 34, 67, 0.92), rgba(11, 23, 46, 0.96)),
    radial-gradient(circle at 50% 16%, rgba(93, 238, 255, 0.18), transparent 46%);
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.14), 0 14px 28px rgba(7, 17, 38, 0.34);
}

.ai-hand-pick-card input {
  margin-top: 2px;
  flex: 0 0 auto;
}

.ai-hand-pick-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-hand-pick-copy strong {
  color: var(--text-0);
  font-size: 0.95rem;
  line-height: 1.2;
  text-transform: capitalize;
}

.ai-hand-pick-copy span {
  color: var(--text-1);
  font-size: 0.83rem;
  line-height: 1.3;
}

.ai-hand-pick-card-color {
  align-items: center;
}

.ai-hand-pick-card-color-red {
  border-color: rgba(255, 101, 101, 0.26);
  background: rgba(59, 19, 26, 0.72);
}

.ai-hand-pick-card-color-blue {
  border-color: rgba(93, 238, 255, 0.26);
  background: rgba(16, 32, 56, 0.76);
}

.ai-hand-pick-card-color-gold {
  border-color: rgba(255, 214, 102, 0.26);
  background: rgba(58, 38, 9, 0.74);
}

.ai-hand-pick-card-color-silver {
  border-color: rgba(191, 205, 229, 0.26);
  background: rgba(36, 41, 54, 0.8);
}

.ai-hand-pick-card-color-red:has(input:checked) {
  border-color: rgba(255, 132, 132, 0.54);
  background: rgba(76, 24, 33, 0.88);
}

.ai-hand-pick-card-color-blue:has(input:checked) {
  border-color: rgba(93, 238, 255, 0.54);
  background: rgba(20, 40, 70, 0.9);
}

.ai-hand-pick-card-color-gold:has(input:checked) {
  border-color: rgba(255, 214, 102, 0.56);
  background: rgba(77, 50, 12, 0.9);
}

.ai-hand-pick-card-color-silver:has(input:checked) {
  border-color: rgba(221, 231, 246, 0.56);
  background: rgba(48, 55, 71, 0.92);
}

.ai-hand-assist-copy {
  border-color: rgba(255, 214, 102, 0.18);
  background: rgba(39, 28, 10, 0.52);
}

.ai-hand-assist-copy strong {
  color: #ffe6a8;
}

.ai-hand-choice-group {
  border: 0;
  margin: 0;
  padding: 0;
}

.ai-hand-choice-topline {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.ai-hand-choice-topline strong {
  color: var(--text-0);
  font-size: 0.95rem;
  line-height: 1.2;
}

.ai-hand-choice-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(103, 135, 255, 0.16);
  background: rgba(14, 22, 42, 0.64);
}

.ai-hand-choice-status-count {
  color: var(--text-0);
  font: 700 0.82rem/1.2 "Space Grotesk", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-hand-choice-group[data-choice-state="ready"] .ai-hand-choice-status {
  border-color: rgba(255, 214, 102, 0.22);
}

.ai-hand-choice-group[data-choice-state="complete"] .ai-hand-choice-status {
  border-color: rgba(118, 255, 190, 0.28);
  background: rgba(8, 35, 29, 0.72);
}

.ai-hand-choice-group[data-choice-state="complete"] .ai-hand-choice-status-count {
  color: var(--success-text);
}

.ai-hand-choice-grid {
  display: grid;
  gap: 8px;
}

.ai-hand-choice-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(103, 135, 255, 0.18);
  background: rgba(18, 25, 49, 0.72);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.ai-hand-choice-card:hover {
  border-color: rgba(86, 210, 255, 0.42);
  background: rgba(22, 30, 58, 0.86);
  transform: translateY(-1px);
}

.ai-hand-choice-card:has(input:checked) {
  border-color: rgba(93, 238, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(17, 34, 67, 0.92), rgba(11, 23, 46, 0.96)),
    radial-gradient(circle at 50% 16%, rgba(93, 238, 255, 0.18), transparent 46%);
  box-shadow: 0 0 0 1px rgba(93, 238, 255, 0.14), 0 14px 28px rgba(7, 17, 38, 0.34);
}

.ai-hand-choice-card input {
  margin-top: 0;
  flex: 0 0 auto;
}

.ai-hand-choice-mark {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(122, 148, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(18, 24, 48, 0.92), rgba(10, 15, 31, 0.98)),
    radial-gradient(circle at 50% 20%, rgba(93, 238, 255, 0.12), transparent 38%);
  color: var(--text-0);
  font: 800 0.98rem/1 "Orbitron", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-hand-choice-card-red .ai-hand-choice-mark {
  border-color: rgba(255, 101, 101, 0.26);
}

.ai-hand-choice-card-blue .ai-hand-choice-mark {
  border-color: rgba(93, 238, 255, 0.26);
}

.ai-hand-choice-card-gold .ai-hand-choice-mark {
  border-color: rgba(255, 214, 102, 0.26);
}

.ai-hand-choice-card-silver .ai-hand-choice-mark {
  border-color: rgba(191, 205, 229, 0.26);
}

.ai-hand-choice-card-generation .ai-hand-choice-mark {
  border-color: rgba(164, 105, 255, 0.26);
}

.ai-hand-choice-card-rarity .ai-hand-choice-mark {
  border-color: rgba(255, 214, 102, 0.3);
}

.ai-hand-choice-card:has(input:checked) .ai-hand-choice-mark {
  border-color: rgba(93, 238, 255, 0.46);
  box-shadow: 0 0 18px rgba(93, 238, 255, 0.16);
}

.ai-hand-choice-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-hand-choice-copy strong {
  color: var(--text-0);
  font-size: 0.95rem;
  line-height: 1.2;
}

.ai-hand-choice-copy span {
  color: var(--text-1);
  font-size: 0.83rem;
  line-height: 1.3;
}

.menu-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 24% 32%, rgba(0, 133, 255, 0.28), transparent 32%),
    radial-gradient(circle at 76% 30%, rgba(255, 118, 24, 0.26), transparent 28%),
    radial-gradient(circle at 50% 70%, rgba(87, 111, 255, 0.08), transparent 42%),
    linear-gradient(180deg, #04070f 0%, #071122 38%, #050916 100%);
  overflow-x: hidden;
}

.menu-screen::before,
.menu-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.menu-screen::before {
  background-image:
    linear-gradient(rgba(92, 126, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 126, 255, 0.08) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.2));
}

.menu-screen::after {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 181, 255, 0.1) 0, transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(255, 150, 42, 0.12) 0, transparent 16%),
    radial-gradient(circle at 28% 80%, rgba(102, 255, 190, 0.08) 0, transparent 14%),
    radial-gradient(circle at 72% 76%, rgba(164, 105, 255, 0.08) 0, transparent 14%);
  animation: menuFloat 18s ease-in-out infinite alternate;
}

.page-shell-menu {
  width: min(1320px, calc(100vw - 40px));
  padding: 10px 0 24px;
}

.menu-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 12px 22px;
  border-radius: 24px;
  border: 1px solid rgba(103, 135, 255, 0.2);
  background:
    linear-gradient(90deg, rgba(5, 11, 28, 0.92), rgba(10, 13, 27, 0.88)),
    radial-gradient(circle at 20% 50%, rgba(0, 160, 255, 0.08), transparent 26%),
    radial-gradient(circle at 82% 50%, rgba(255, 142, 38, 0.08), transparent 24%);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.menu-player-panel {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.menu-player-avatar {
  position: relative;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(10, 17, 37, 0.96), rgba(4, 9, 22, 0.98));
  border: 2px solid rgba(78, 223, 255, 0.74);
  box-shadow:
    0 0 0 4px rgba(47, 84, 184, 0.2),
    0 18px 32px rgba(0,0,0,0.28),
    0 0 26px rgba(0, 181, 255, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -10px 16px rgba(0,0,0,0.24);
}

.menu-player-avatar::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(5, 10, 23, 0.68);
  border-bottom: 1px solid rgba(5, 10, 23, 0.88);
  pointer-events: none;
  z-index: 1;
}

.menu-player-avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

.menu-player-avatar-link {
  text-decoration: none;
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.menu-player-avatar-link:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(93, 238, 255, 0.95);
  box-shadow:
    0 0 0 5px rgba(47, 84, 184, 0.24),
    0 18px 40px rgba(0,0,0,0.32),
    0 0 28px rgba(59, 210, 255, 0.34);
}

.menu-player-avatar-link:active {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    inset 0 8px 18px rgba(0,0,0,0.34),
    0 12px 24px rgba(0,0,0,0.22),
    0 0 22px rgba(59, 210, 255, 0.2);
}

.menu-player-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.menu-player-copy strong {
  color: var(--text-0);
  font: 700 clamp(1.4rem, 2vw, 2rem)/1.05 "Space Grotesk", sans-serif;
  letter-spacing: -0.03em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-player-copy span {
  color: var(--accent-cyan);
  font: 700 0.98rem/1.2 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.menu-icon-button {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(108, 137, 255, 0.24);
  background: linear-gradient(180deg, rgba(14, 18, 31, 0.96), rgba(7, 11, 21, 0.98));
  box-shadow:
    0 18px 40px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--text-0);
  text-decoration: none;
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
}

.menu-icon-button svg {
  inline-size: 32px;
  block-size: 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  fill: currentColor;
}

.menu-icon-button-logout svg {
  inline-size: 34px;
  block-size: 34px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex-basis: 34px;
  transform: scaleX(1.42);
  transform-origin: center;
}

.menu-icon-button-active {
  border-color: rgba(93, 238, 255, 0.52);
  background: linear-gradient(180deg, rgba(18, 32, 60, 0.98), rgba(8, 13, 27, 0.98));
  box-shadow:
    0 0 0 1px rgba(93,238,255,0.22),
    0 18px 40px rgba(0,0,0,0.32),
    0 0 24px rgba(59, 210, 255, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.menu-icon-button:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(93, 238, 255, 0.54);
  box-shadow:
    0 0 0 1px rgba(93,238,255,0.28),
    0 22px 42px rgba(0,0,0,0.38),
    0 0 24px rgba(59, 210, 255, 0.28);
}

.menu-icon-button:active {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    inset 0 8px 18px rgba(0,0,0,0.34),
    0 12px 24px rgba(0,0,0,0.22);
}

.menu-icon-button-danger {
  border-color: rgba(255, 120, 120, 0.22);
}

.menu-icon-button-logout {
  inline-size: 72px;
  block-size: 72px;
  flex: 0 0 auto;
}

.menu-icon-button-danger:hover {
  border-color: rgba(255, 120, 120, 0.48);
  box-shadow:
    0 0 0 1px rgba(255,120,120,0.22),
    0 22px 42px rgba(0,0,0,0.38),
    0 0 24px rgba(255, 120, 120, 0.2);
}

.menu-main {
  width: min(960px, 100%);
  margin: 2px auto 0;
  display: grid;
  gap: 8px;
}

.menu-notice {
  justify-self: center;
  width: min(760px, 100%);
  border-radius: 18px;
  padding: 14px 20px;
  border: 1px solid rgba(93, 238, 255, 0.2);
  background: rgba(10, 17, 34, 0.88);
  color: var(--text-1);
  box-shadow: 0 14px 36px rgba(0,0,0,0.26);
  text-align: center;
}

.menu-hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(94px, 9vw, 142px);
  margin: -8px auto -6px;
  padding: 0 8px;
  overflow: visible;
}

.menu-hero-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, 700px);
  height: clamp(76px, 7vw, 112px);
  transform: translate(-50%, -48%);
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 50%, rgba(0, 166, 255, 0.42), transparent 34%),
    radial-gradient(circle at 72% 50%, rgba(255, 141, 44, 0.42), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 48%);
  filter: blur(8px);
  opacity: 0.95;
}

.menu-hero-logo {
  position: relative;
  display: block;
  z-index: 1;
  width: min(100%, 560px);
  max-width: 100%;
  margin-inline: auto;
  filter:
    saturate(1.04)
    drop-shadow(0 0 18px rgba(28, 174, 255, 0.18))
    drop-shadow(0 0 18px rgba(255, 128, 36, 0.16))
    drop-shadow(0 14px 28px rgba(0,0,0,0.28));
  animation: logoPulse 4.8s ease-in-out infinite;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(980px, 100%);
  justify-self: center;
  gap: 12px 14px;
}

.menu-tile {
  --menu-tile-radius: 16px;
  --menu-tile-border-width: 2px;
  --menu-tile-inner-gap: 3px;
  --menu-tile-border-color: rgba(93, 238, 255, 0.72);
  --menu-tile-border-shadow: rgba(93, 238, 255, 0.2);
  --menu-tile-highlight: rgba(255,255,255,0.16);
  position: relative;
  display: block;
  border-radius: var(--menu-tile-radius);
  overflow: hidden;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  box-shadow: 0 14px 26px rgba(0,0,0,0.34);
  transition:
    transform 180ms cubic-bezier(.16,1,.3,1),
    box-shadow 180ms ease-out,
    filter 180ms ease-out;
}

.menu-tile-frame {
  display: block;
  aspect-ratio: 1600 / 700;
  position: relative;
  border-radius: var(--menu-tile-radius);
  overflow: hidden;
  touch-action: manipulation;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    rgba(3, 7, 18, 0.98);
  border: var(--menu-tile-border-width) solid var(--menu-tile-border-color);
  box-shadow:
    inset 0 1px 0 var(--menu-tile-highlight),
    inset 0 0 0 1px rgba(5, 10, 23, 0.88),
    0 0 18px var(--menu-tile-border-shadow);
}

.menu-tile-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 -10px 18px rgba(0,0,0,0.18);
}

.menu-tile-image {
  position: absolute;
  inset: var(--menu-tile-inner-gap);
  width: calc(100% - (var(--menu-tile-inner-gap) * 2));
  height: calc(100% - (var(--menu-tile-inner-gap) * 2));
  border-radius: calc(var(--menu-tile-radius) - var(--menu-tile-inner-gap) - 1px);
  object-fit: fill;
  object-position: center center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out, filter 180ms ease-out;
}

.menu-tile-quick {
  --menu-tile-border-color: rgba(184, 255, 36, 0.78);
  --menu-tile-border-shadow: rgba(184, 255, 36, 0.2);
}

.menu-tile-ai,
.menu-tile-about {
  --menu-tile-border-color: rgba(50, 185, 255, 0.8);
  --menu-tile-border-shadow: rgba(50, 185, 255, 0.22);
}

.menu-tile-massive {
  --menu-tile-border-color: rgba(205, 88, 255, 0.82);
  --menu-tile-border-shadow: rgba(205, 88, 255, 0.22);
}

.menu-tile-private {
  --menu-tile-border-color: rgba(255, 177, 29, 0.82);
  --menu-tile-border-shadow: rgba(255, 177, 29, 0.22);
}

.menu-tile-leaderboards {
  --menu-tile-border-color: rgba(255, 59, 59, 0.8);
  --menu-tile-border-shadow: rgba(255, 59, 59, 0.2);
}

.menu-tile-image-base {
  opacity: 1;
}

.menu-tile-image-hover,
.menu-tile-image-pressed {
  opacity: 0;
}

@media (hover:hover) {
  .menu-tile:hover {
    transform: scale(1.03);
    filter: brightness(1.02);
    box-shadow: 0 22px 42px rgba(0,0,0,0.42);
  }

  .menu-tile:hover .menu-tile-image-base {
    opacity: 0;
  }

  .menu-tile:hover .menu-tile-image-hover {
    opacity: 1;
  }
}

.menu-tile:active {
  transform: scale(0.97);
  filter: brightness(0.97);
  box-shadow: 0 12px 22px rgba(0,0,0,0.24);
}

.leaderboard-page-shell {
  max-width: 980px;
}

.leaderboard-main {
  display: grid;
  gap: 20px;
  width: min(820px, 100%);
  margin: 28px auto 0;
}

.leaderboard-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(83, 221, 255, 0.28);
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 213, 105, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(12, 27, 61, 0.98), rgba(6, 13, 31, 0.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 34px rgba(51, 185, 255, .1);
}

.leaderboard-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.055) 48%, transparent 66%);
  transform: translateX(-80%);
  animation: leaderboardHeroSweep 7s ease-in-out infinite;
}

@keyframes leaderboardHeroSweep {
  0%, 68%, 100% { transform: translateX(-80%); }
  82% { transform: translateX(80%); }
}

.leaderboard-hero h1 {
  margin: 12px 0 10px;
  font: 900 clamp(2rem, 7vw, 4.2rem)/.98 "Orbitron", sans-serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.leaderboard-hero h1 span {
  color: #ffe08a;
  text-shadow: 0 0 24px rgba(255, 184, 55, .42);
}

.leaderboard-hero p {
  max-width: 660px;
  margin: 0 auto;
  color: var(--text-1);
  font-size: clamp(.92rem, 2.5vw, 1.05rem);
  line-height: 1.55;
}

.leaderboard-list {
  display: grid;
  gap: 10px;
}

.leaderboard-entry {
  display: grid;
  grid-template-columns: 56px 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 80px;
  padding: 12px 18px;
  border: 1px solid rgba(94, 127, 220, .24);
  border-radius: 20px;
  background: linear-gradient(100deg, rgba(14, 25, 55, .96), rgba(7, 14, 34, .98));
  box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
}

.leaderboard-entry.is-self {
  outline: 1px solid rgba(83, 221, 255, .68);
  box-shadow: 0 0 24px rgba(45, 199, 255, .16), 0 12px 30px rgba(0,0,0,.26);
}

.leaderboard-entry.leaderboard-rank-1,
.leaderboard-entry.leaderboard-rank-2,
.leaderboard-entry.leaderboard-rank-3 {
  min-height: 104px;
  padding-block: 17px;
  border-width: 2px;
}

.leaderboard-entry.leaderboard-rank-1 {
  border-color: rgba(255, 210, 86, .72);
  background: linear-gradient(100deg, rgba(91, 62, 14, .36), rgba(12, 23, 52, .98) 48%, rgba(7, 14, 34, .98));
  box-shadow: 0 0 34px rgba(255, 184, 55, .16), 0 18px 42px rgba(0,0,0,.3);
}

.leaderboard-entry.leaderboard-rank-2 {
  border-color: rgba(218, 229, 240, .58);
  background: linear-gradient(100deg, rgba(181, 198, 215, .16), rgba(12, 23, 52, .98) 48%, rgba(7, 14, 34, .98));
}

.leaderboard-entry.leaderboard-rank-3 {
  border-color: rgba(68, 175, 255, .64);
  background: linear-gradient(100deg, rgba(28, 109, 190, .2), rgba(12, 23, 52, .98) 48%, rgba(7, 14, 34, .98));
}

.leaderboard-place {
  display: grid;
  place-items: center;
}

.leaderboard-trophy {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.leaderboard-trophy svg {
  width: 35px;
  height: 35px;
  fill: currentColor;
  filter: drop-shadow(0 0 9px currentColor);
}

.trophy-gold { color: #ffd65c; background: rgba(255, 197, 59, .1); }
.trophy-silver { color: #dce7f0; background: rgba(220, 231, 240, .08); }
.trophy-blue { color: #45aaff; background: rgba(44, 151, 255, .1); }

.leaderboard-rank-number {
  color: var(--text-2);
  font: 900 1rem/1 "Orbitron", sans-serif;
}

.leaderboard-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid rgba(91, 231, 255, .38);
  border-radius: 50%;
  color: #d8faff;
  font-weight: 900;
  background: rgba(11, 29, 62, .94);
  box-shadow: 0 0 16px rgba(49, 190, 255, .16);
}

.leaderboard-rank-1 .leaderboard-avatar,
.leaderboard-rank-2 .leaderboard-avatar,
.leaderboard-rank-3 .leaderboard-avatar {
  width: 62px;
  height: 62px;
}

.leaderboard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaderboard-player-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.leaderboard-player-copy strong {
  overflow: hidden;
  color: var(--text-0);
  font: 800 clamp(1rem, 3vw, 1.22rem)/1.15 "Space Grotesk", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-rank-1 .leaderboard-player-copy strong,
.leaderboard-rank-2 .leaderboard-player-copy strong,
.leaderboard-rank-3 .leaderboard-player-copy strong {
  font-size: clamp(1.12rem, 3.4vw, 1.42rem);
}

.leaderboard-player-copy small,
.leaderboard-win-total small {
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.leaderboard-win-total {
  display: grid;
  min-width: 62px;
  justify-items: end;
}

.leaderboard-win-total strong {
  color: #fff1b5;
  font: 900 clamp(1.3rem, 4vw, 1.75rem)/1 "Orbitron", sans-serif;
  text-shadow: 0 0 16px rgba(255, 207, 78, .28);
}

.leaderboard-empty {
  padding: 34px 24px;
  border: 1px dashed rgba(91, 231, 255, .28);
  border-radius: 20px;
  text-align: center;
  color: var(--text-1);
  background: rgba(8, 18, 42, .72);
}

.leaderboard-empty strong { color: var(--text-0); font-size: 1.15rem; }
.leaderboard-empty p { margin: 8px 0 0; }
.leaderboard-actions { display: flex; justify-content: center; padding-bottom: 24px; }

@media (max-width: 560px) {
  .leaderboard-main { margin-top: 16px; gap: 14px; }
  .leaderboard-hero { padding: 24px 18px; border-radius: 22px; }
  .leaderboard-entry {
    grid-template-columns: 44px 48px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 70px;
    padding: 10px 12px;
    border-radius: 16px;
  }
  .leaderboard-entry.leaderboard-rank-1,
  .leaderboard-entry.leaderboard-rank-2,
  .leaderboard-entry.leaderboard-rank-3 {
    min-height: 88px;
    padding-block: 13px;
  }
  .leaderboard-trophy { width: 40px; height: 40px; }
  .leaderboard-trophy svg { width: 30px; height: 30px; }
  .leaderboard-avatar { width: 46px; height: 46px; }
  .leaderboard-rank-1 .leaderboard-avatar,
  .leaderboard-rank-2 .leaderboard-avatar,
  .leaderboard-rank-3 .leaderboard-avatar { width: 52px; height: 52px; }
  .leaderboard-win-total { min-width: 50px; }
  .leaderboard-player-copy small,
  .leaderboard-win-total small { font-size: .66rem; }
}

.menu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 18px;
  border: 1px solid rgba(89, 117, 236, 0.18);
  background:
    linear-gradient(180deg, rgba(7, 10, 20, 0.94), rgba(4, 8, 18, 0.98));
  box-shadow:
    0 16px 36px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.menu-footer-news,
.menu-footer-community {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.menu-footer-news strong,
.menu-footer-community > span {
  font-family: "Orbitron", "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.menu-footer-news strong {
  color: var(--accent-gold);
}

.menu-footer-news span {
  color: var(--text-0);
}

.menu-footer-community > span {
  color: var(--accent-cyan);
}

.menu-social-link {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Orbitron", "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--text-0);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}

.menu-social-link:hover {
  transform: translateY(-1px);
  border-color: rgba(93, 238, 255, 0.36);
  box-shadow: 0 0 18px rgba(93, 238, 255, 0.16);
}

.menu-tile:active .menu-tile-image-base,
.menu-tile:active .menu-tile-image-hover {
  opacity: 0;
}

.menu-tile:active .menu-tile-image-pressed {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .menu-tile:active {
    transform: scale(0.985);
  }

  .menu-tile:active .menu-tile-image-base {
    opacity: 1;
  }

  .menu-tile:active .menu-tile-image-hover,
  .menu-tile:active .menu-tile-image-pressed {
    opacity: 0;
  }
}

@media (min-width: 1280px) {
  .page-shell-menu {
    width: min(1880px, calc(100vw - 24px));
    padding: 6px 0 12px;
  }

  .menu-topbar {
    gap: 18px;
    padding: 10px 18px;
    border-radius: 22px;
  }

  .menu-player-panel {
    gap: 12px;
  }

  .menu-player-avatar,
  .menu-icon-button,
  .menu-icon-button-logout {
    inline-size: 60px;
    block-size: 60px;
    border-radius: 18px;
  }

  .menu-player-avatar img {
    border-radius: 14px;
  }

  .menu-player-copy strong {
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  }

  .menu-player-copy span {
    font-size: 0.82rem;
  }

  .menu-icon-button svg {
    inline-size: 26px;
    block-size: 26px;
    width: 26px;
    height: 26px;
    min-width: 26px;
    flex-basis: 26px;
  }

  .menu-icon-button-logout svg {
    inline-size: 28px;
    block-size: 28px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-basis: 28px;
  }

  .ai-match-shell {
    max-width: 1880px;
    margin: 0 auto;
    min-height: calc(100vh - 24px);
  }

  .ai-table-first-header {
    display: none;
  }

  .ai-table-first-status {
    display: none;
  }

  .ai-match-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ai-match-sidebar {
    display: none;
  }

  .ai-match-state {
    padding: 4px 0 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .ai-resolution-card-inline,
  .ai-board-event-rail,
  .ai-board-handoff,
  .ai-board-impacts-wrap,
  .ai-board-standings,
  .ai-board-cues,
  .ai-board-timeline,
  .ai-state-row-underboard {
    display: none;
  }

  .ai-table-arena {
    position: relative;
    min-height: clamp(560px, calc(100vh - 120px), 760px);
    padding: 18px 34px 156px;
    border-radius: 34px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 58%, rgba(28, 40, 74, 0.96) 0%, rgba(16, 23, 48, 0.98) 32%, rgba(9, 12, 26, 0.99) 66%, rgba(5, 7, 18, 1) 100%),
      radial-gradient(circle at 50% 6%, rgba(255, 46, 46, 0.18), transparent 24%),
      radial-gradient(circle at 10% 50%, rgba(43, 127, 255, 0.16), transparent 26%),
      radial-gradient(circle at 90% 50%, rgba(61, 210, 90, 0.16), transparent 26%),
      radial-gradient(circle at 50% 100%, rgba(255, 194, 67, 0.2), transparent 32%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -40px 90px rgba(0,0,0,0.28),
      0 34px 70px rgba(0, 0, 0, 0.34);
  }

  .ai-table-arena::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 28px;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.02),
      0 0 0 1px rgba(0,0,0,0.24);
  }

  .ai-table-opponent-band {
    position: absolute;
    inset: 6px 0 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
  }

  .ai-table-middle {
    display: block;
    min-height: 0;
  }

  .ai-table-side {
    position: absolute;
    inset: 0;
    min-height: 0;
    pointer-events: none;
    z-index: 3;
  }

  .ai-table-side-left,
  .ai-table-side-right {
    display: block;
  }

  .ai-table-seat {
    pointer-events: auto;
  }

  .ai-table-seat-top {
    width: min(520px, 34vw);
    max-width: none;
    margin: 0 auto;
    padding: 2px 20px 10px;
    border-radius: 0 0 32px 32px;
    border-width: 0;
    background:
      radial-gradient(circle at 50% 2%, rgba(255, 98, 73, 0.26), transparent 42%),
      linear-gradient(180deg, rgba(120, 20, 16, 0.94), rgba(88, 15, 10, 0.92) 46%, rgba(63, 10, 8, 0.82) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -18px 26px rgba(0,0,0,0.16),
      0 18px 34px rgba(0,0,0,0.18);
    transform: translateY(-16px);
  }

  .ai-table-side-left .ai-table-seat-side {
    position: absolute;
    left: 10px;
    top: 186px;
    width: 214px;
    padding: 12px 12px 12px;
    border-radius: 24px;
    transform: rotate(-10deg);
    transform-origin: center center;
  }

  .ai-table-side-right .ai-table-seat-side {
    position: absolute;
    right: 10px;
    top: 186px;
    width: 214px;
    padding: 12px 12px 12px;
    border-radius: 24px;
    transform: rotate(10deg);
    transform-origin: center center;
  }

  .ai-table-seat-avatar-wrap {
    margin-top: -30px;
    margin-bottom: 2px;
  }

  .ai-table-seat-avatar {
    inline-size: 74px;
    block-size: 74px;
    font-size: 1.05rem;
    border-width: 3px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.28);
  }

  .ai-table-seat-avatar-wrap-side {
    justify-content: flex-start;
    padding-left: 4px;
  }

  .ai-table-seat-avatar-wrap-right {
    justify-content: flex-end;
    padding-right: 4px;
  }

  .ai-table-seat-topline {
    margin-bottom: 2px;
  }

  .ai-table-seat-nameplate {
    min-height: 34px;
    font-size: 0.9rem;
  }

  .ai-table-seat-nameplate-toplane {
    min-height: 42px;
    padding: 8px 22px;
    border-radius: 14px;
    border-color: rgba(255, 106, 79, 0.78);
    box-shadow:
      0 10px 18px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 0 0 2px rgba(51, 8, 5, 0.95);
  }

  .ai-table-seat-nameplate-toplane strong {
    font-size: 1.18rem;
    letter-spacing: 0.03em;
  }

  .ai-table-seat-count-badge-toplane {
    margin-top: -6px;
    min-width: 58px;
    min-height: 42px;
    font-size: 1.5rem;
  }

  .ai-table-seat-compact-meta,
  .ai-table-seat-alert,
  .ai-table-seat-hit,
  .ai-table-seat-threat,
  .ai-table-seat .ai-phase-chip {
    display: none;
  }

  .ai-table-seat-hand-top {
    min-height: 112px;
    margin: 0 auto 8px;
    width: 100%;
    max-width: 360px;
  }

  .ai-table-seat-hand-side {
    min-height: 96px;
  }

  .ai-card-back {
    inline-size: 56px;
    block-size: 80px;
    border-width: 3px;
  }

  .ai-table-board-stack {
    position: relative;
    width: min(960px, calc(100vw - 320px));
    margin: 98px auto 0;
    z-index: 2;
  }

  .ai-board-zone {
    position: relative;
    min-height: 412px;
    padding: 54px 42px 72px;
    border-radius: 46% 46% 42% 42% / 36% 36% 44% 44%;
    background:
      radial-gradient(circle at 50% 48%, rgba(31, 45, 81, 0.98) 0%, rgba(20, 28, 58, 0.99) 48%, rgba(10, 14, 33, 1) 100%),
      linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -28px 60px rgba(0,0,0,0.28),
      0 34px 60px rgba(0,0,0,0.26);
  }

  .ai-board-zone::after {
    inset: 10% 13% 18%;
    border-width: 1px;
    opacity: 0.44;
  }

  .ai-board-ring {
    inset: 14% 12% 18%;
    opacity: 0.64;
  }

  .ai-board-ring-arrow {
    font-size: 3.2rem;
    opacity: 0.14;
  }

  .ai-board-zone-topline,
  .ai-board-hud,
  .ai-discard-spotlight,
  .ai-draw-stack .helper-text,
  .ai-top-discard .helper-text,
  .ai-discard-topline,
  .ai-discard-card span {
    display: none;
  }

  .ai-board-zone-grid {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) minmax(146px, 0.62fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    max-width: 420px;
    margin: 0 auto;
  }

  .ai-draw-stack,
  .ai-top-discard {
    justify-self: center;
    position: relative;
  }

  .ai-draw-stack-card,
  .ai-discard-card {
    inline-size: 118px;
    min-height: 168px;
    border-radius: 20px;
  }

  .ai-discard-card {
    transform: rotate(0deg);
  }

  .ai-draw-stack-card strong,
  .ai-discard-card strong {
    font-size: 1.7rem;
  }

  .ai-table-human-rail {
    display: none;
  }

  .ai-bottom-hand-panel {
    width: min(1120px, calc(100% - 220px));
    margin: 0;
    padding: 0 0 18px;
    border-radius: 0;
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 25;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .ai-bottom-hand-panel .eyebrow,
  .ai-bottom-hand-panel .panel-title,
  .ai-bottom-hand-panel .panel-subtitle,
  .ai-turn-banner,
  .ai-hand-feedback {
    display: none;
  }

  .ai-bottom-hand-actions {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    margin: 0;
    z-index: 3;
    justify-content: center;
  }

  .ai-hand-grid {
    justify-content: center;
    align-items: end;
    overflow: visible;
    padding: 0 80px 44px;
    margin: 0;
  }

  .ai-hand-card {
    width: 118px;
    min-width: 118px;
    margin-left: -18px;
    transform-origin: center bottom;
    transition: transform 180ms ease-out, margin 180ms ease-out, box-shadow 180ms ease-out;
  }

  .ai-hand-card:first-child {
    margin-left: 0;
  }

  .ai-hand-card:nth-child(1) { transform: rotate(-10deg) translateY(8px); }
  .ai-hand-card:nth-child(2) { transform: rotate(-7deg) translateY(6px); }
  .ai-hand-card:nth-child(3) { transform: rotate(-4deg) translateY(3px); }
  .ai-hand-card:nth-child(4) { transform: rotate(-2deg) translateY(1px); }
  .ai-hand-card:nth-child(5) { transform: rotate(0deg) translateY(0); }
  .ai-hand-card:nth-child(6) { transform: rotate(2deg) translateY(1px); }
  .ai-hand-card:nth-child(7) { transform: rotate(4deg) translateY(3px); }
  .ai-hand-card:nth-child(8) { transform: rotate(7deg) translateY(6px); }
  .ai-hand-card:nth-child(9) { transform: rotate(10deg) translateY(8px); }

  .ai-hand-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    z-index: 8;
  }

  .ai-hand-card-shell {
    min-height: 164px;
    gap: 4px;
    overflow: hidden;
  }

  .ai-hand-card-body {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  .ai-hand-mark {
    min-height: 64px;
    min-width: 64px;
    border-radius: 16px;
    font-size: 1.1rem;
  }

  .ai-hand-card-topline {
    gap: 6px;
    justify-content: center;
  }

  .ai-hand-family-chip,
  .ai-hand-status-chip {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.58rem;
  }

  .ai-hand-meta {
    gap: 2px;
  }

  .ai-hand-meta strong {
    font-size: 0.82rem;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-hand-meta span {
    display: none;
  }

  .ai-hand-actions {
    display: none;
  }

  .ai-hand-structured-form,
  .ai-hand-assist-copy {
    padding: 8px;
    gap: 6px;
    max-height: 82px;
    overflow: auto;
  }

  .ai-hand-structured-topline strong,
  .ai-hand-assist-copy strong {
    font-size: 0.84rem;
  }

  .ai-hand-form-status {
    padding: 7px 8px;
    gap: 8px;
  }

  .ai-hand-control-block {
    gap: 4px;
  }

  .ai-hand-pick-grid,
  .ai-hand-choice-grid {
    gap: 6px;
  }

  .ai-hand-pick-card,
  .ai-hand-choice-card {
    padding: 7px 8px;
  }

  .ai-bottom-hand-actions .button-secondary {
    display: none;
  }

  .ai-draw-card-button {
    min-width: 246px;
    min-height: 56px;
    border-radius: 16px;
    font-size: 1rem;
  }
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(0.985);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.015);
    opacity: 1;
  }
}

@keyframes menuFloat {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -18px, 0);
  }
}

@media (max-width: 1120px) {
  .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(820px, 100%);
  }

  .ai-match-grid {
    grid-template-columns: 1fr;
  }

  .ai-live-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-table-first-chips {
    justify-content: flex-start;
  }

  .ai-live-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ai-resolution-grid {
    grid-template-columns: 1fr;
  }

  .ai-state-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-table-middle {
    grid-template-columns: 1fr;
  }

  .ai-table-opponent-band,
  .ai-table-side {
    min-height: 0;
  }

  .ai-table-side-left,
  .ai-table-side-right,
  .ai-table-opponent-band {
    justify-content: center;
  }

  .ai-table-seat {
    max-width: none;
  }

  .ai-table-seat-hand-side {
    justify-content: center;
  }

  .ai-table-human-rail {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-board-zone-grid {
    grid-template-columns: 1fr;
  }

  .ai-board-hud {
    grid-template-columns: 1fr;
  }

  .ai-board-cues,
  .ai-board-impacts,
  .ai-board-standings-list,
  .ai-board-timeline-list {
    grid-template-columns: 1fr;
  }

  .ai-board-vector {
    grid-template-columns: 1fr;
  }

  .ai-board-vector-arrow::after {
    display: none;
  }

  .ai-discard-spotlight-body {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-board-zone,
  .ai-board-zone::after,
  .ai-draw-stack-card,
  .ai-discard-card,
  .ai-hand-card,
  .ai-table-human-rail {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  .ai-board-zone:hover,
  .ai-board-zone:hover .ai-draw-stack-card,
  .ai-board-zone:hover .ai-discard-card {
    transform: none !important;
  }

  .ai-board-zone.is-live-flash,
  .ai-table-human-rail.is-live-flash,
  .ai-hand-grid.is-live-flash,
  .ai-board-zone.is-live-flash .ai-draw-stack-card,
  .ai-board-zone.is-live-flash .ai-discard-card,
  .ai-hand-grid.is-live-flash .ai-hand-card,
  .ai-board-zone.is-draw-pulse .ai-draw-stack-card,
  .ai-board-zone.is-discard-pulse .ai-discard-card,
  .ai-turn-focus.is-turn-pass,
  .ai-board-event-rail.is-event-pulse,
  .ai-board-impacts.is-event-pulse .ai-board-impact,
  .ai-board-vector.is-vector-pulse,
  .ai-discard-spotlight.is-spotlight-pulse,
  .ai-discard-spotlight.is-card-landed .ai-discard-spotlight-mark,
  .ai-table-seat.is-seat-pulse {
    animation: none !important;
  }
}

@media (max-width: 860px) {
  .page-shell-menu {
    width: min(100vw - 24px, 980px);
    padding-top: 14px;
  }

  .menu-topbar {
    flex-wrap: nowrap;
    gap: 14px;
    padding: 12px 16px;
  }

  .menu-top-actions {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
  }

  .menu-player-panel {
    min-width: 0;
    flex: 1 1 auto;
    gap: 12px;
  }

  .menu-player-avatar {
    inline-size: 60px;
    block-size: 60px;
  }

  .menu-player-copy strong {
    font-size: 1.15rem;
  }

  .menu-player-copy span {
    font-size: 0.82rem;
  }

  .menu-icon-button {
    inline-size: 58px;
    block-size: 58px;
    border-radius: 18px;
  }

  .menu-icon-button svg {
    inline-size: 26px;
    block-size: 26px;
  }

  .menu-hero {
    min-height: 104px;
    margin-bottom: 0;
  }

  .menu-hero-burst {
    width: min(100%, 520px);
    height: 88px;
  }

  .menu-hero-logo {
    width: min(100%, 470px);
  }

  .menu-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 680px) {
  .menu-grid {
    grid-template-columns: 1fr;
    width: min(420px, 100%);
  }

  .menu-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .menu-player-panel {
    gap: 10px;
    min-width: 0;
  }

  .menu-player-avatar {
    inline-size: 52px;
    block-size: 52px;
  }

  .menu-player-copy {
    max-width: min(46vw, 240px);
  }

  .menu-player-copy strong {
    font-size: 1.02rem;
  }

  .menu-player-copy span {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
  }

  .menu-top-actions {
    gap: 8px;
  }

  .menu-icon-button {
    inline-size: 52px;
    block-size: 52px;
    border-radius: 16px;
  }

  .menu-icon-button svg {
    inline-size: 24px;
    block-size: 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-basis: 24px;
  }

  .menu-icon-button-logout svg {
    inline-size: 30px;
    block-size: 30px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    flex-basis: 30px;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .page-shell-menu {
    width: min(calc(100% - 12px), 980px);
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
  }

  .is-standalone-display .menu-screen:not(.ai-concept-screen) .page-shell-menu {
    padding-top: 58px;
    padding-top: max(58px, calc(18px + env(safe-area-inset-top, 0px)));
  }

  .menu-topbar {
    gap: 8px;
    padding: 8px 10px;
    border-radius: 20px;
  }

  .menu-player-panel {
    gap: 8px;
  }

  .menu-player-avatar {
    inline-size: 44px;
    block-size: 44px;
    box-shadow:
      0 0 0 3px rgba(47, 84, 184, 0.18),
      0 0 18px rgba(0, 181, 255, 0.28);
  }

  .menu-player-copy {
    max-width: 132px;
  }

  .menu-player-copy strong {
    font-size: 0.88rem;
    line-height: 1.05;
  }

  .menu-player-copy span {
    font-size: 0.62rem;
    line-height: 1.05;
    letter-spacing: 0.04em;
  }

  .menu-top-actions {
    gap: 6px;
  }

  .menu-icon-button {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 14px;
  }

  .menu-icon-button svg {
    inline-size: 20px;
    block-size: 20px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-basis: 20px;
  }

  .menu-icon-button-logout svg {
    inline-size: 30px;
    block-size: 30px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    flex-basis: 30px;
  }
}

.motd-banner {
  display: grid;
  gap: 8px;
  padding: 18px;
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
  border: 1px solid rgba(255, 209, 102, 0.24);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.08), rgba(93, 238, 255, 0.05));
  box-shadow: 0 0 32px rgba(255, 209, 102, 0.08);
}

.motd-banner strong {
  color: var(--text-0);
  font-size: 1.05rem;
}

.motd-banner p {
  margin: 0;
  color: var(--text-1);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.motd-gate-panel {
  display: grid;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.motd-gate-screen .auth-grid {
  align-items: stretch;
}

.motd-gate-screen .auth-hero-panel {
  min-height: min(64vh, 720px);
}

.motd-gate-screen .motd-gate-panel {
  min-height: min(64vh, 720px);
  align-content: center;
  padding-block: 18px;
}

.motd-gate-panel::before {
  content: "";
  position: absolute;
  inset: auto -18% -30% auto;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 163, 76, 0.18) 0%, rgba(93, 238, 255, 0.1) 34%, transparent 70%);
  filter: blur(8px);
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
}

body.is-loaded .motd-gate-panel::before {
  animation: motd-orbit-bloom 900ms cubic-bezier(.18,.88,.24,1) 180ms forwards;
}

.motd-gate-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at top right, rgba(255, 165, 76, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(14, 23, 49, 0.92) 0%, rgba(10, 16, 36, 0.94) 100%);
  border-width: 1px;
  transform: translate3d(0, 54px, 0) scale(0.94);
  opacity: 0;
  box-shadow: 0 18px 48px rgba(5, 10, 27, 0.46);
  padding: 20px;
}

.motd-gate-surface::before {
  content: "";
  position: absolute;
  inset: -12% auto -18% -18%;
  width: 46%;
  background: linear-gradient(105deg, transparent 8%, rgba(93, 238, 255, 0.22) 38%, rgba(255, 186, 116, 0.16) 60%, transparent 78%);
  transform: translateX(-140%) skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.motd-gate-surface > * {
  position: relative;
  z-index: 1;
}

body.is-loaded .motd-gate-surface {
  animation: motd-surface-arrive 720ms cubic-bezier(.2,.9,.22,1) 70ms forwards;
}

body.is-loaded .motd-gate-surface::before {
  animation: motd-signal-sweep 920ms cubic-bezier(.18,.88,.24,1) 260ms forwards;
}

.motd-gate-stripe {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(93, 238, 255, 0.18);
  background: rgba(93, 238, 255, 0.08);
  color: var(--text-1);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(16px);
  opacity: 0;
}

body.is-loaded .motd-gate-stripe {
  animation: motd-stripe-rise 520ms ease 340ms forwards;
}

.motd-gate-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #76ffbe;
  box-shadow: 0 0 0 6px rgba(118, 255, 190, 0.14), 0 0 18px rgba(118, 255, 190, 0.45);
  animation: pulse-glow 1.9s ease-in-out infinite;
}

.motd-gate-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.58;
  color: var(--text-0);
  max-width: 58ch;
  white-space: pre-wrap;
  transform: translateY(18px);
  opacity: 0;
}

body.is-loaded .motd-gate-body {
  animation: motd-copy-rise 560ms ease 420ms forwards;
}

.spotlight-copy {
  max-width: 100%;
}

.admin-meter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-1);
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.admin-meter strong {
  color: var(--accent-cyan);
  font-family: "Orbitron", sans-serif;
}

.session-ip {
  color: var(--text-0);
}

.session-agent {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.meta-grid-single {
  grid-template-columns: 1fr;
}

.meta-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: var(--text-1);
}

.meta-label {
  color: var(--text-2);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 28px 24px 24px;
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(16px);
}

.modal-panel {
  width: min(980px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 28px;
  border: 1px solid rgba(93, 238, 255, 0.22);
  background: linear-gradient(180deg, rgba(17, 25, 54, 0.98) 0%, rgba(9, 14, 31, 0.98) 100%);
  box-shadow: var(--shadow-glow);
  padding: 24px;
}

.modal-header {
  margin-bottom: 16px;
}

.modal-title {
  margin-top: 12px;
}

.modal-subtitle {
  margin-bottom: 0;
}

.modal-close {
  flex-shrink: 0;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.detail-page-header {
  align-items: flex-start;
}

.confirm-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
}

.confirm-dialog::backdrop {
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(12px);
}

.dialog-scrim {
  width: 100%;
}

.dialog-panel {
  width: 100%;
}

.toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.toggle-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.toggle-shell input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  width: 62px;
  height: 36px;
  border-radius: 999px;
  background: rgba(30, 42, 87, 0.92);
  border: 1px solid rgba(93, 238, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.toggle-slider::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5fbff, #bdd8ff);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.toggle-shell input:checked + .toggle-slider {
  background: rgba(24, 83, 77, 0.92);
  border-color: rgba(118, 255, 190, 0.32);
}

.toggle-shell input:checked + .toggle-slider::after {
  transform: translateX(26px);
  background: linear-gradient(135deg, #f4fff8, #76ffbe);
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(118, 255, 190, 0.14), 0 0 18px rgba(118, 255, 190, 0.45);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 10px rgba(118, 255, 190, 0.08), 0 0 24px rgba(118, 255, 190, 0.6);
  }
}

@keyframes motd-surface-arrive {
  0% {
    transform: translate3d(0, 54px, 0) scale(0.94);
    opacity: 0;
    box-shadow: 0 12px 26px rgba(5, 10, 27, 0.28);
  }
  68% {
    transform: translate3d(0, -6px, 0) scale(1.012);
    opacity: 1;
    box-shadow: 0 30px 72px rgba(6, 15, 37, 0.52);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    box-shadow: 0 24px 58px rgba(6, 15, 37, 0.46);
  }
}

@keyframes motd-signal-sweep {
  0% {
    transform: translateX(-140%) skewX(-16deg);
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  100% {
    transform: translateX(295%) skewX(-16deg);
    opacity: 0;
  }
}

@keyframes motd-stripe-rise {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes motd-copy-rise {
  from {
    transform: translateY(18px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes motd-orbit-bloom {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  70% {
    opacity: 0.95;
    transform: scale(1.04);
  }
  100% {
    opacity: 0.82;
    transform: scale(1);
  }
}

.stats-grid-compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#admin-panel.is-swapping,
#profile-card.is-swapping {
  opacity: 0.55;
  transform: translateY(4px);
}

#admin-panel,
#profile-card {
  transition: opacity 180ms ease, transform 180ms ease;
}

@media (max-width: 1120px) {
  .auth-grid,
  .profile-grid,
  .console-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    min-height: 0;
  }

  .hero-panel {
    padding-right: clamp(24px, 5vw, 48px);
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }

  .hero-orbit {
    width: min(300px, 62vw);
    right: -80px;
  }

  .auth-logo-image {
    width: min(100%, 780px);
  }

  .console-rail {
    position: static;
  }

  .admin-subtab-list {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  }

  .panel-grid > .grid-two {
    grid-template-columns: 1fr;
  }

  .modal-grid,
  .detail-grid,
  .stats-grid-compact {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .page-shell {
    padding: 20px;
  }

  .ai-table-first-header-main,
  .ai-table-first-status {
    grid-template-columns: 1fr;
    display: grid;
  }

  .grid-two,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .console-rail,
  .console-main {
    border-radius: 12px;
  }

  .console-rail,
  .console-main,
  .surface {
    padding: 16px;
  }

  .tab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tab-link {
    min-width: 0;
    align-items: flex-start;
    border-radius: 8px;
    padding: 10px;
    flex-direction: column;
    gap: 4px;
  }

  .tab-link:hover {
    transform: translateY(-1px);
  }

  .tab-kicker {
    font-size: 0.68rem;
  }

  .admin-subtab-list {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding: 6px;
    gap: 6px;
  }

  .admin-subtab-button {
    flex: 0 0 116px;
    min-height: 46px;
    padding: 8px 10px;
  }

  .admin-subtab-button span:first-child {
    font-size: 0.78rem;
  }

  .admin-subtab-button span:last-child {
    font-size: 0.64rem;
  }

  .admin-subtab-panels,
  .admin-subtab-panel.is-active {
    gap: 14px;
  }

  .admin-gameplay-form {
    gap: 14px;
  }

  .admin-tab-actions,
  .admin-gameplay-save {
    justify-content: stretch;
  }

  .admin-tab-actions button,
  .admin-gameplay-save button {
    width: 100%;
  }

  .card-header {
    display: grid;
  }

  .game-table-background-grid {
    grid-template-columns: 1fr;
  }

  .admin-card-preview-strip,
  .admin-card-preview-strip-color-shift {
    min-width: 0;
    max-width: 100%;
  }

  .avatar-picker {
    grid-template-columns: 1fr;
  }

  .display-title {
    font-size: clamp(2.4rem, 16vw, 4rem);
  }

  .topbar,
  .console-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .grid-dates {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    padding-right: 24px;
    min-height: 0;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-orbit {
    display: none;
  }

  .auth-hero-panel .display-title {
    font-size: clamp(2.4rem, 16vw, 4rem);
  }

  .auth-hero-panel {
    padding: 22px;
  }

  .auth-logo-image {
    width: 100%;
  }

  .motd-banner {
    width: 100%;
  }

  .meta-grid,
  .modal-grid,
  .detail-grid,
  .stats-grid-compact {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .modal-panel {
    padding: 18px;
    max-height: 92vh;
  }

  .ai-hand-card {
    display: grid;
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    margin-left: 0;
    transform: none !important;
  }

  .ai-hand-card-body {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
  }

  .ai-hand-mark {
    min-height: 60px;
    border-radius: 16px;
    font-size: 1.08rem;
  }

  .ai-resolution-card {
    padding: 16px;
  }

  .ai-resolution-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-hand-actions {
    min-width: 0;
    justify-content: flex-start;
  }

  .ai-hand-grid {
    display: grid;
    gap: 14px;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
}

.ai-concept-document {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #030713;
}

.ai-concept-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  background: #030713;
}

.ai-concept-screen::before {
  opacity: 0;
}

.ai-concept-page {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  padding: 0;
  margin: 0;
  max-width: none;
  overflow: hidden;
}

.ai-match-shell.ai-concept-shell {
  --ai-gameplay-safe-top: env(safe-area-inset-top, 0px);
  --ai-gameplay-safe-right: env(safe-area-inset-right, 0px);
  --ai-gameplay-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ai-gameplay-safe-left: env(safe-area-inset-left, 0px);
  --ai-gameplay-visual-height: 100svh;
  --ai-gameplay-table-width-from-height: 177.7778svh;
  --ai-gameplay-stage-width: min(100vw, 177.7778svh, 1600px);
  --ai-gameplay-stage-height: min(100svh, 56.25vw, 900px);
  --ai-gameplay-side-gutter: 0px;
  --ai-gameplay-local-rail-shift: 0px;
  --ai-gameplay-pile-rail-shift: 0px;
  --ai-gameplay-opponent-rail-shift: 0px;
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: var(--ai-gameplay-visual-height);
  max-width: none;
  min-height: 0;
  margin: 0;
  padding:
    0
    var(--ai-gameplay-safe-right)
    0
    var(--ai-gameplay-safe-left);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

@supports (height: 100dvh) {
  .ai-match-shell.ai-concept-shell {
    --ai-gameplay-visual-height: 100dvh;
    --ai-gameplay-table-width-from-height: 177.7778dvh;
  }
}

.ai-match-shell.ai-concept-shell a,
.ai-match-shell.ai-concept-shell button,
.ai-match-shell.ai-concept-shell input,
.ai-match-shell.ai-concept-shell select,
.ai-match-shell.ai-concept-shell textarea,
.ai-match-shell.ai-concept-shell summary {
  touch-action: manipulation;
}

.ai-match-shell.ai-concept-shell .ai-concept-audit-list,
.ai-match-shell.ai-concept-shell .ai-concept-event-inspector-list,
.ai-match-shell.ai-concept-shell .ai-concept-match-chat-list,
.ai-match-shell.ai-concept-shell .ai-concept-match-chat-form textarea,
.ai-match-shell.ai-concept-shell .ai-concept-table-menu-panel {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.ai-concept-orientation-gate {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  place-items: center;
  padding:
    calc(24px + env(safe-area-inset-top, 0px))
    calc(22px + env(safe-area-inset-right, 0px))
    calc(24px + env(safe-area-inset-bottom, 0px))
    calc(22px + env(safe-area-inset-left, 0px));
  background:
    linear-gradient(180deg, rgba(3, 7, 19, 0.96), rgba(7, 13, 30, 0.98)),
    radial-gradient(circle at 18% 16%, rgba(93, 238, 255, 0.18), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(255, 140, 66, 0.16), transparent 32%);
  color: #f6f8ff;
  text-align: center;
  pointer-events: auto;
}

.ai-concept-orientation-gate[hidden] {
  display: none !important;
}

.ai-concept-shell.is-orientation-blocked .ai-concept-orientation-gate {
  display: grid;
}

.ai-concept-shell.is-orientation-blocked .ai-concept-table,
.ai-concept-shell.is-orientation-blocked .ai-concept-table-menu,
.ai-concept-shell.is-orientation-blocked .ai-concept-toast,
.ai-concept-shell.is-orientation-blocked .ai-concept-replay-view-toggle,
.ai-concept-shell.is-orientation-blocked .ai-concept-replay-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ai-concept-orientation-device {
  position: relative;
  width: min(42vw, 168px);
  aspect-ratio: 0.62;
  border-radius: 26px;
  border: 3px solid rgba(93, 238, 255, 0.75);
  background:
    linear-gradient(180deg, rgba(11, 23, 51, 0.88), rgba(4, 8, 20, 0.94)),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.16), transparent 30%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 46px rgba(93, 238, 255, 0.2);
  transform: rotate(0deg);
  animation: aiConceptRotateHint 1800ms ease-in-out infinite;
}

.ai-concept-orientation-device::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 34%;
  height: 5px;
  border-radius: 999px;
  background: rgba(246, 248, 255, 0.68);
  transform: translateX(-50%);
}

.ai-concept-orientation-device span {
  position: absolute;
  inset: 20%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 209, 102, 0.5);
  background:
    linear-gradient(90deg, rgba(50, 94, 255, 0.22), transparent 32%, transparent 68%, rgba(56, 221, 97, 0.2)),
    linear-gradient(180deg, rgba(255, 68, 62, 0.2), transparent 42%, rgba(255, 209, 102, 0.22));
}

.ai-concept-orientation-device img {
  display: block;
  width: 145%;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(93, 238, 255, 0.26));
  transform: rotate(-90deg);
}

.ai-concept-orientation-copy {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.ai-concept-orientation-copy p {
  margin: 0;
  color: var(--accent-gold);
  font: 900 0.78rem/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ai-concept-orientation-copy h1 {
  margin: 0;
  color: #ffffff;
  font: 900 clamp(2rem, 11vw, 3.4rem)/0.96 "Orbitron", sans-serif;
}

.ai-concept-orientation-copy span {
  color: #b9c4ec;
  font: 700 clamp(0.95rem, 4.5vw, 1.12rem)/1.35 "Space Grotesk", sans-serif;
}

@keyframes aiConceptRotateHint {
  0%, 22% {
    transform: rotate(0deg) scale(0.96);
  }
  56%, 100% {
    transform: rotate(90deg) scale(0.96);
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .ai-concept-shell:not(.ai-concept-validation-shell) .ai-concept-orientation-gate {
    display: grid;
  }

  .ai-concept-shell:not(.ai-concept-validation-shell) .ai-concept-table,
  .ai-concept-shell:not(.ai-concept-validation-shell) .ai-concept-table-menu,
  .ai-concept-shell:not(.ai-concept-validation-shell) .ai-concept-toast,
  .ai-concept-shell:not(.ai-concept-validation-shell) .ai-concept-replay-view-toggle,
  .ai-concept-shell:not(.ai-concept-validation-shell) .ai-concept-replay-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.ai-concept-menu-button {
  position: fixed;
  top: calc(18px + var(--ai-gameplay-safe-top));
  left: calc(6px + min(18px, var(--ai-gameplay-safe-left)));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(180deg, rgba(14, 18, 34, 0.95), rgba(8, 10, 22, 0.98)),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 48%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 32px rgba(0,0,0,0.34);
  color: #f6f8ff;
  cursor: pointer;
  list-style: none;
}

.ai-concept-table-menu {
  position: fixed;
  top: calc(18px + var(--ai-gameplay-safe-top));
  left: calc(6px + min(18px, var(--ai-gameplay-safe-left)));
  z-index: 70;
}

.ai-concept-menu-button::-webkit-details-marker {
  display: none;
}

.ai-concept-menu-button svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}

.ai-concept-table-menu-panel {
  position: fixed;
  top: calc(96px + var(--ai-gameplay-safe-top));
  left: calc(6px + min(18px, var(--ai-gameplay-safe-left)));
  z-index: 70;
  display: grid;
  gap: 8px;
  width: min(230px, calc(100vw - 36px));
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(180deg, rgba(10, 15, 31, 0.98), rgba(5, 8, 18, 0.98)),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.09), transparent 46%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 18px 34px rgba(0,0,0,0.42);
}

.ai-concept-table-menu:not([open]) .ai-concept-table-menu-panel {
  display: none;
}

.ai-concept-table-menu-panel form {
  margin: 0;
}

.ai-concept-table-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #f7fbff;
  font: 900 0.76rem/1 "Orbitron", "Inter", sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-concept-table-menu-item:hover,
.ai-concept-table-menu-item:focus-visible {
  background: rgba(80, 185, 255, 0.18);
  outline: 2px solid rgba(113, 218, 255, 0.6);
  outline-offset: 2px;
}

.ai-concept-table-menu-danger {
  border-color: rgba(255, 98, 98, 0.45);
  background: rgba(150, 20, 28, 0.42);
  color: #fff2f2;
}

.ai-concept-quit-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  color: #f8fbff;
  z-index: 120;
}

.ai-concept-quit-dialog::backdrop {
  background: rgba(2, 5, 14, 0.76);
  backdrop-filter: blur(8px);
}

.ai-concept-quit-card {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background:
    linear-gradient(180deg, rgba(12, 18, 35, 0.98), rgba(5, 8, 18, 0.98)),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.12), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 28px 70px rgba(0,0,0,0.58);
  text-align: left;
}

.ai-concept-quit-card h2 {
  margin: 0;
  color: #ffffff;
  font: 900 clamp(1.4rem, 3vw, 2.2rem)/1 "Orbitron", "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ai-concept-quit-card p {
  margin: 0;
  color: rgba(238,244,255,0.82);
  font: 700 0.96rem/1.5 "Inter", sans-serif;
}

.ai-concept-quit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.ai-concept-quit-actions form {
  margin: 0;
}

.ai-concept-quit-confirm,
.ai-concept-quit-cancel {
  width: 100%;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  font: 900 0.74rem/1 "Orbitron", "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-concept-quit-confirm {
  background: linear-gradient(135deg, #ff5c5c, #9d1526);
  color: #fff7f7;
  box-shadow: 0 12px 28px rgba(174, 24, 36, 0.34);
}

.ai-concept-quit-cancel {
  background: rgba(255,255,255,0.08);
  color: #f8fbff;
}

.ai-concept-direction {
  grid-area: direction;
  position: static;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65cqw;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: clamp(30px, 2.45cqw, 40px);
  align-self: end;
  padding: 0.48cqw 0.62cqw 0.34cqw;
  border-radius: 0;
  border: 0;
  border-top: 0.08cqw solid rgba(151, 239, 255, 0.18);
  background: transparent;
  box-shadow: none;
  color: #f9fbff;
}

.ai-concept-direction svg {
  width: clamp(24px, 2.05cqw, 34px);
  height: clamp(24px, 2.05cqw, 34px);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.65cqw rgba(255,255,255,0.16));
  transform: none;
}

.ai-concept-direction path {
  vector-effect: non-scaling-stroke;
}

.ai-concept-direction-counter svg {
  transform: scaleX(-1);
}

.ai-concept-direction span {
  font: 900 clamp(10px, 0.66cqw, 14px)/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: center;
  white-space: pre-line;
}

.ai-concept-replay-status {
  position: absolute;
  right: 3.2%;
  top: 10.7%;
  z-index: 9;
  width: 18.2cqw;
  min-height: 3.15cqw;
  padding: 0.62cqw 0.78cqw;
  border-radius: 0.92cqw;
  border: 0.1cqw solid rgba(255,255,255,0.15);
  background: rgba(4, 8, 18, 0.76);
  color: rgba(247,251,255,0.92);
  font: 800 0.72cqw/1.18 "Space Grotesk", sans-serif;
  text-align: left;
  box-shadow: 0 0.8cqw 1.4cqw rgba(0,0,0,0.24);
  pointer-events: none;
  overflow: hidden;
}

.ai-concept-replay-status {
  display: none !important;
}

.ai-concept-replay-status:not([hidden]) {
  display: block;
}

.ai-concept-replay-controls {
  position: absolute;
  left: auto;
  right: calc(1.4% - var(--ai-gameplay-pile-rail-shift));
  top: 1.1%;
  transform: none;
  z-index: 88;
  display: grid;
  grid-template-columns: repeat(5, 2.2cqw) minmax(0, 1fr);
  align-items: center;
  gap: 0.34cqw;
  width: clamp(280px, 18.5cqw, 340px);
  min-height: 2.9cqw;
  padding: 0.34cqw 0.48cqw;
  border-radius: 0.76cqw;
  border: 0.1cqw solid rgba(255,255,255,0.16);
  background: rgba(4, 8, 18, 0.82);
  box-shadow: 0 0.8cqw 1.45cqw rgba(0,0,0,0.28);
  pointer-events: auto;
}

.ai-concept-replay-controls[hidden] {
  display: none;
}

.ai-concept-replay-control-button {
  width: 2.2cqw;
  height: 2.2cqw;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 0.56cqw;
  border: 0.1cqw solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(23, 34, 65, 0.96), rgba(7, 12, 28, 0.98));
  color: rgba(247,251,255,0.94);
  font: 900 1.02cqw/1 "Orbitron", sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,0.1);
}

.ai-concept-replay-control-primary {
  border-color: rgba(255, 212, 101, 0.42);
  color: #fff7d7;
  background: linear-gradient(180deg, rgba(150, 98, 15, 0.96), rgba(77, 42, 6, 0.98));
}

.ai-concept-replay-control-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.ai-concept-replay-control-button:not(:disabled):hover {
  border-color: rgba(255, 226, 122, 0.46);
  filter: brightness(1.08);
}

.ai-concept-replay-frame-label {
  min-width: 0;
  color: rgba(247,251,255,0.82);
  font: 900 0.66cqw/1 "Space Grotesk", sans-serif;
  white-space: nowrap;
  justify-self: end;
}

.ai-concept-replay-frame-field {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.28cqw;
  min-width: 0;
  color: rgba(222,232,255,0.72);
  font: 900 0.48cqw/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
}

.ai-concept-replay-frame-field input {
  width: 100%;
  min-width: 0;
  height: 1.55cqw;
  padding: 0 0.34cqw;
  border-radius: 0.4cqw;
  border: 0.08cqw solid rgba(151, 239, 255, 0.2);
  background: rgba(2, 8, 19, 0.76);
  color: rgba(247,251,255,0.92);
  font: 900 0.58cqw/1 "Orbitron", sans-serif;
  text-align: center;
}

.ai-concept-replay-range {
  grid-column: 3 / -1;
  width: 100%;
  min-width: 0;
  height: 1.55cqw;
  padding: 0;
  accent-color: #ffd166;
}

.ai-concept-replay-view-toggle {
  position: absolute;
  left: auto;
  right: calc(1.4% - var(--ai-gameplay-pile-rail-shift));
  top: calc(1.1% + 5.35cqw);
  transform: none;
  z-index: 88;
  display: inline-flex;
  align-items: center;
  gap: 0.22cqw;
  padding: 0.24cqw;
  border-radius: 0.72cqw;
  border: 0.1cqw solid rgba(255,255,255,0.14);
  background: rgba(4, 8, 18, 0.78);
  box-shadow: 0 0.72cqw 1.28cqw rgba(0,0,0,0.24);
  pointer-events: auto;
}

.ai-concept-replay-view-toggle a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.6cqw;
  height: 1.54cqw;
  padding: 0 0.52cqw;
  border-radius: 0.54cqw;
  border: 0.08cqw solid transparent;
  color: rgba(226,236,255,0.76);
  font: 900 0.54cqw/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ai-concept-replay-view-toggle a.is-active {
  border-color: rgba(255, 226, 122, 0.42);
  background: linear-gradient(180deg, rgba(255, 201, 61, 0.26), rgba(136, 93, 8, 0.34));
  color: rgba(255,248,218,0.96);
  box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,0.16);
}

.ai-concept-replay-view-toggle a:not(.is-active):hover {
  border-color: rgba(151, 239, 255, 0.24);
  color: rgba(247,251,255,0.9);
}

.ai-concept-audit-rail {
  position: absolute;
  left: 0.45%;
  top: 13.2%;
  bottom: 15.8%;
  z-index: 12;
  width: 8.5cqw;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.52cqw;
  padding: 0.64cqw;
  border-radius: 0.88cqw;
  border: 0.1cqw solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(5, 10, 24, 0.72), rgba(5, 10, 24, 0.34));
  box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,0.08), 0 1cqw 1.8cqw rgba(0,0,0,0.22);
  pointer-events: auto;
}

.ai-concept-audit-rail > strong,
.ai-concept-count-panel > strong,
.ai-concept-match-chat-title > strong {
  color: rgba(255, 226, 122, 0.92);
  font: 900 0.66cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-audit-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4cqw;
  overflow-y: auto;
  padding-right: 0.14cqw;
  scrollbar-width: thin;
}

.ai-concept-audit-item {
  display: grid;
  gap: 0.14cqw;
  padding: 0.42cqw 0.5cqw;
  border-radius: 0.55cqw;
  border: 0.06cqw solid rgba(255,255,255,0.12);
  background: rgba(8, 14, 28, 0.72);
  color: rgba(241,246,255,0.9);
}

.ai-concept-audit-item span {
  color: rgba(255,255,255,0.52);
  font: 900 0.44cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-audit-item p {
  margin: 0;
  font: 800 0.53cqw/1.18 "Space Grotesk", sans-serif;
}

.ai-concept-audit-item em {
  color: rgba(222,232,255,0.62);
  font: 700 0.45cqw/1.16 "Space Grotesk", sans-serif;
  font-style: normal;
}

.ai-concept-audit-item-pressure {
  border-color: rgba(244, 72, 60, 0.28);
}

.ai-concept-audit-item-shift {
  border-color: rgba(83, 157, 255, 0.32);
}

.ai-concept-audit-item-chaos,
.ai-concept-audit-item-victory {
  border-color: rgba(255, 226, 122, 0.34);
}

.ai-concept-event-inspector {
  position: absolute;
  right: 0.65%;
  top: 13.2%;
  z-index: 12;
  width: 10.8cqw;
  max-height: 27.5cqw;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.48cqw;
  padding: 0.58cqw;
  border-radius: 0.86cqw;
  border: 0.1cqw solid rgba(93, 238, 255, 0.2);
  background: linear-gradient(180deg, rgba(5, 14, 30, 0.8), rgba(5, 10, 24, 0.42));
  box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,0.08), 0 1cqw 1.8cqw rgba(0,0,0,0.22);
  pointer-events: auto;
}

.ai-concept-event-inspector-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.28cqw;
}

.ai-concept-event-inspector-head > strong {
  color: rgba(151, 239, 255, 0.94);
  font: 900 0.58cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-event-inspector-head select {
  width: 100%;
  min-width: 0;
  border: 0.06cqw solid rgba(151, 239, 255, 0.22);
  border-radius: 0.42cqw;
  background: rgba(2, 8, 19, 0.76);
  color: rgba(247,251,255,0.9);
  font: 800 0.48cqw/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  padding: 0.32cqw 0.36cqw;
}

.ai-concept-event-inspector-jumps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28cqw;
}

.ai-concept-event-inspector-jumps button {
  min-width: 0;
  height: 1.25cqw;
  border: 0.06cqw solid rgba(151, 239, 255, 0.2);
  border-radius: 0.38cqw;
  background: rgba(8, 23, 45, 0.72);
  color: rgba(247,251,255,0.86);
  font: 900 0.56cqw/1 "Space Grotesk", sans-serif;
}

.ai-concept-event-inspector-jumps button:not(:disabled):hover {
  border-color: rgba(255, 226, 122, 0.4);
  color: rgba(255,248,218,0.96);
}

.ai-concept-event-inspector-jumps button:disabled {
  opacity: 0.44;
  cursor: default;
}

.ai-concept-event-inspector-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.34cqw;
  overflow-y: auto;
  padding-right: 0.12cqw;
  scrollbar-width: thin;
}

.ai-concept-event-inspector-item {
  display: grid;
  gap: 0.16cqw;
  padding: 0.38cqw 0.44cqw;
  border-radius: 0.48cqw;
  border: 0.06cqw solid rgba(93, 238, 255, 0.18);
  background: rgba(6, 16, 32, 0.74);
  color: rgba(241,246,255,0.9);
}

.ai-concept-event-inspector-item span {
  color: rgba(151, 239, 255, 0.74);
  font: 900 0.42cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-event-inspector-item p {
  margin: 0;
  color: rgba(247,251,255,0.92);
  font: 800 0.5cqw/1.16 "Space Grotesk", sans-serif;
}

.ai-concept-event-inspector-item em {
  color: rgba(222,232,255,0.66);
  font: 700 0.42cqw/1.18 "Space Grotesk", sans-serif;
  font-style: normal;
}

.ai-concept-event-inspector-item.is-empty {
  border-color: rgba(255,255,255,0.12);
}

.ai-concept-count-panel {
  position: absolute;
  right: 0.65%;
  top: 43.2%;
  z-index: 12;
  width: 8.35cqw;
  display: grid;
  gap: 0.46cqw;
  padding: 0.58cqw;
  border-radius: 0.9cqw;
  border: 0.1cqw solid rgba(255,255,255,0.15);
  background: linear-gradient(145deg, rgba(5, 10, 24, 0.76), rgba(5, 10, 24, 0.42));
  box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,0.08), 0 1cqw 1.8cqw rgba(0,0,0,0.24);
  pointer-events: none;
}

.ai-concept-count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.36cqw;
  min-height: 1.2cqw;
  color: #fff;
  font: 850 0.64cqw/1 "Space Grotesk", sans-serif;
}

.ai-concept-count-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-concept-count-row em {
  display: grid;
  place-items: center;
  min-width: 1.26cqw;
  height: 1.12cqw;
  border-radius: 999px;
  background: rgba(0,0,0,0.44);
  color: rgba(255, 226, 122, 0.94);
  font: 900 0.62cqw/1 "Orbitron", sans-serif;
  font-style: normal;
}

.ai-concept-match-chat {
  position: absolute;
  right: 0.65%;
  top: 12.8%;
  z-index: 13;
  width: 15.8cqw;
  height: 36.5%;
  min-height: 12.4cqw;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.48cqw;
  padding: 0.6cqw;
  border-radius: 0.82cqw;
  border: 0.1cqw solid rgba(93, 238, 255, 0.2);
  background: linear-gradient(145deg, rgba(5, 12, 28, 0.84), rgba(5, 10, 24, 0.46));
  box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,0.08), 0 1cqw 1.8cqw rgba(0,0,0,0.24);
  pointer-events: auto;
  transition: width 160ms ease, height 160ms ease, inset 160ms ease, transform 160ms ease, background 160ms ease, opacity 160ms ease;
  backdrop-filter: blur(0.14cqw);
}

.ai-concept-match-chat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4cqw;
  min-width: 0;
}

.ai-concept-match-chat-title {
  min-width: 0;
  display: grid;
  gap: 0.14cqw;
}

.ai-concept-match-chat-title span {
  min-width: 0;
  max-width: 8.4cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(151, 239, 255, 0.78);
  font: 900 0.48cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-match-chat-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22cqw;
}

.ai-concept-match-chat-controls button {
  min-width: 0;
  height: 1.12cqw;
  padding: 0 0.4cqw;
  border: 0.06cqw solid rgba(151, 239, 255, 0.2);
  border-radius: 0.36cqw;
  background: rgba(8, 23, 45, 0.68);
  color: rgba(247,251,255,0.86);
  font: 900 0.42cqw/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-concept-match-chat-controls button:hover {
  border-color: rgba(255, 226, 122, 0.36);
  color: rgba(255,248,218,0.98);
}

.ai-concept-match-chat:not(.is-expanded) [data-ai-match-chat-action="dock"],
.ai-concept-match-chat.is-expanded [data-ai-match-chat-action="expand"],
.ai-concept-match-chat.is-collapsed [data-ai-match-chat-action="collapse"] {
  display: none;
}

.ai-concept-match-chat.is-expanded {
  right: 50%;
  top: 12%;
  width: min(39cqw, 680px);
  height: 54%;
  min-height: 19cqw;
  transform: translateX(50%);
  z-index: 38;
  background: linear-gradient(145deg, rgba(5, 12, 28, 0.78), rgba(5, 10, 24, 0.42));
  box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,0.1), 0 1.3cqw 2.6cqw rgba(0,0,0,0.34);
}

.ai-concept-match-chat.is-collapsed {
  width: 5.3cqw;
  height: auto;
  min-height: 0;
  grid-template-rows: auto;
  gap: 0;
  padding: 0.42cqw;
  background: rgba(5, 12, 28, 0.7);
}

.ai-concept-match-chat.is-collapsed .ai-concept-match-chat-head {
  grid-template-columns: 1fr;
  gap: 0.3cqw;
}

.ai-concept-match-chat.is-collapsed .ai-concept-match-chat-title {
  gap: 0;
}

.ai-concept-match-chat.is-collapsed .ai-concept-match-chat-title span,
.ai-concept-match-chat.is-collapsed .ai-concept-match-chat-list,
.ai-concept-match-chat.is-collapsed .ai-concept-match-chat-form {
  display: none;
}

.ai-concept-match-chat.is-collapsed .ai-concept-match-chat-controls {
  justify-content: stretch;
}

.ai-concept-match-chat.is-collapsed .ai-concept-match-chat-controls button {
  width: 100%;
  height: 1.28cqw;
  padding: 0;
}

.ai-concept-match-chat-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1cqw;
  overflow-y: auto;
  padding-right: 0.16cqw;
  scrollbar-width: thin;
}

.ai-concept-match-chat-item,
.ai-concept-match-chat-empty {
  display: grid;
  grid-template-columns: auto 1.1cqw minmax(0,1fr);
  align-items: start;
  gap: 0.24cqw;
  padding: 0.2cqw 0.12cqw;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: rgba(241,246,255,0.92);
}

.ai-concept-match-chat-item-spectator {
  border-color: rgba(255, 201, 92, 0.28);
}

.ai-concept-match-chat-item strong {
  color: var(--chat-name-color,#b89cff);
  font: 900 0.54cqw/1 "Space Grotesk", sans-serif;
}

.ai-concept-match-chat-item time,
.ai-concept-match-chat-empty span {
  padding-top: .12cqw;
  color: rgba(222,232,255,0.58);
  font: 800 0.44cqw/1 "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
}

.ai-concept-match-chat-item p {
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(247,251,255,0.88);
  font: 800 0.54cqw/1.18 "Space Grotesk", sans-serif;
}
.ai-concept-match-chat-item .compact-chat-avatar { width:1.1cqw; height:1.1cqw; border-width:.05cqw; font-size:.38cqw; }

.ai-concept-match-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "message send"
    "status status";
  align-items: end;
  gap: 0.36cqw;
}

.ai-concept-match-chat-form textarea {
  grid-area: message;
  width: 100%;
  min-width: 0;
  min-height: 2.15cqw;
  resize: none;
  border: 0.06cqw solid rgba(151, 239, 255, 0.2);
  border-radius: 0.52cqw;
  background: rgba(2, 8, 19, 0.78);
  color: rgba(247,251,255,0.94);
  font: 800 0.54cqw/1.18 "Space Grotesk", sans-serif;
  padding: 0.42cqw 0.5cqw;
  outline: none;
}

.ai-concept-match-chat-form textarea:focus {
  border-color: rgba(255, 226, 122, 0.48);
  box-shadow: 0 0 0 0.12cqw rgba(255, 226, 122, 0.12);
}

.ai-concept-match-chat-actions {
  display: contents;
}

.ai-concept-match-chat-actions .ai-concept-form-status {
  grid-area: status;
  min-width: 0;
  min-height: 0.78cqw;
  color: rgba(222,232,255,0.66);
  font: 800 0.42cqw/1.14 "Space Grotesk", sans-serif;
}

.ai-concept-match-chat-actions .ai-concept-form-status span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-concept-match-chat-actions button {
  grid-area: send;
  justify-self: end;
  width: clamp(38px, 3.15cqw, 56px);
  min-width: 0;
  height: clamp(24px, 1.56cqw, 32px);
  padding: 0;
  border: 0.06cqw solid rgba(255, 226, 122, 0.34);
  border-radius: 0.42cqw;
  background: linear-gradient(135deg, rgba(255, 201, 92, 0.96), rgba(203, 103, 28, 0.92));
  color: #140b03;
  font: 900 clamp(8px, 0.42cqw, 11px)/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-concept-match-chat-actions button:disabled,
.ai-concept-match-chat-actions button[aria-busy="true"] {
  opacity: 0.58;
  cursor: wait;
}

.ai-concept-match-chat-toast-stack {
  position: absolute;
  right: calc(100% + 0.5cqw);
  top: 0;
  width: 14.2cqw;
  display: grid;
  gap: 0.32cqw;
  pointer-events: none;
}

.ai-concept-match-chat-toast {
  display: grid;
  gap: 0.12cqw;
  padding: 0.42cqw 0.52cqw;
  border-radius: 0.55cqw;
  border: 0.06cqw solid rgba(93, 238, 255, 0.24);
  background: rgba(5, 12, 28, 0.76);
  color: rgba(247,251,255,0.92);
  box-shadow: 0 0.5cqw 1cqw rgba(0,0,0,0.26);
  animation: aiConceptChatToast 5.6s ease forwards;
  backdrop-filter: blur(0.16cqw);
}

.ai-concept-match-chat-toast strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 900 0.52cqw/1 "Space Grotesk", sans-serif;
}

.ai-concept-match-chat-toast span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(222,232,255,0.78);
  font: 800 0.5cqw/1.16 "Space Grotesk", sans-serif;
}

@keyframes aiConceptChatToast {
  0% {
    opacity: 0;
    transform: translateY(-0.25cqw);
  }
  10%,
  72% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.25cqw);
  }
}

@media (max-width: 700px) {
  .ai-concept-replay-controls {
    left: auto;
    right: 10px;
    top: max(10px, env(safe-area-inset-top));
    transform: none;
    width: min(94vw, 360px);
    grid-template-columns: repeat(5, 32px) 1fr;
    gap: 5px;
    min-height: 0;
    padding: 6px;
    border-radius: 10px;
  }

  .ai-concept-replay-control-button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
  }

  .ai-concept-replay-frame-label {
    min-width: 0;
    font-size: 10px;
    line-height: 1;
    justify-self: end;
  }

  .ai-concept-replay-frame-field {
    grid-column: 1 / 3;
    grid-template-columns: auto minmax(44px, 1fr);
    gap: 5px;
    font-size: 9px;
  }

  .ai-concept-replay-frame-field input {
    height: 30px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: 11px;
  }

  .ai-concept-replay-range {
    grid-column: 3 / -1;
    height: 30px;
  }

  .ai-concept-replay-view-toggle {
    left: auto;
    right: 10px;
    top: calc(max(10px, env(safe-area-inset-top)) + 76px);
    transform: none;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
  }

  .ai-concept-replay-view-toggle a {
    min-width: 82px;
    height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1;
  }

  .ai-concept-event-inspector {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: auto;
    max-height: 136px;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    z-index: 140;
  }

  .ai-concept-event-inspector-head {
    gap: 5px;
  }

  .ai-concept-event-inspector-head > strong {
    font-size: 10px;
    line-height: 1;
  }

  .ai-concept-event-inspector-head select {
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1;
  }

  .ai-concept-event-inspector-jumps {
    gap: 5px;
  }

  .ai-concept-event-inspector-jumps button {
    height: 28px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1;
  }

  .ai-concept-event-inspector-list {
    gap: 5px;
    padding-right: 2px;
  }

  .ai-concept-event-inspector-item {
    gap: 3px;
    padding: 6px 7px;
    border-radius: 7px;
  }

  .ai-concept-event-inspector-item span {
    font-size: 9px;
    line-height: 1;
  }

  .ai-concept-event-inspector-item p {
    font-size: 11px;
    line-height: 1.18;
  }

  .ai-concept-event-inspector-item em {
    font-size: 10px;
    line-height: 1.16;
  }

  .ai-concept-match-chat {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: auto;
    height: 232px;
    min-height: 0;
    grid-template-rows: auto minmax(100px, 1fr) auto;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    z-index: 139;
  }

  .ai-concept-match-chat.is-expanded {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: auto;
    height: min(62vh, 380px);
    transform: none;
  }

  .ai-concept-match-chat.is-collapsed {
    left: auto;
    right: 10px;
    bottom: 10px;
    width: 92px;
    padding: 7px;
  }

  .ai-concept-match-chat-head {
    gap: 6px;
  }

  .ai-concept-match-chat-title {
    gap: 2px;
  }

  .ai-concept-match-chat-title > strong {
    font-size: 10px;
    line-height: 1;
  }

  .ai-concept-match-chat-title span {
    max-width: 130px;
    font-size: 9px;
    line-height: 1;
  }

  .ai-concept-match-chat-controls {
    gap: 4px;
  }

  .ai-concept-match-chat-controls button {
    height: 24px;
    padding: 0 7px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1;
  }

  .ai-concept-match-chat.is-collapsed .ai-concept-match-chat-controls button {
    height: 26px;
  }

  .ai-concept-match-chat-list {
    min-height: 100px;
    gap: 5px;
    padding-right: 2px;
  }

  .ai-concept-match-chat-item,
  .ai-concept-match-chat-empty {
    grid-template-columns: auto 20px minmax(0,1fr);
    gap: 3px;
    padding: 3px 2px;
    border-radius: 0;
  }

  .ai-concept-match-chat-item strong,
  .ai-concept-match-chat-item p {
    font-size: 11px;
    line-height: 1.18;
  }

  .ai-concept-match-chat-item time,
  .ai-concept-match-chat-empty span {
    font-size: 9px;
    line-height: 1;
  }

  .ai-concept-match-chat-item .compact-chat-avatar {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }

  .ai-concept-match-chat-form {
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-areas:
      "message send"
      "status status";
    align-items: end;
    gap: 5px;
  }

  .ai-concept-match-chat-form textarea {
    height: 42px;
    min-height: 34px;
    padding: 6px 7px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.16;
  }

  .ai-concept-match-chat-actions {
    display: contents;
  }

  .ai-concept-match-chat-actions .ai-concept-form-status {
    grid-area: status;
    min-height: 0;
    max-height: 14px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.12;
  }

  .ai-concept-match-chat-actions button {
    justify-self: end;
    width: 58px;
    min-width: 0;
    height: 32px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1;
  }

  .ai-concept-match-chat-toast-stack {
    position: fixed;
    right: 10px;
    bottom: 58px;
    top: auto;
    width: min(82vw, 300px);
  }

  .ai-concept-match-chat-toast {
    gap: 3px;
    padding: 7px 9px;
    border-radius: 9px;
  }

  .ai-concept-match-chat-toast strong {
    font-size: 11px;
    line-height: 1;
  }

  .ai-concept-match-chat-toast span {
    font-size: 11px;
    line-height: 1.18;
  }
}

.ai-concept-step-summary {
  position: absolute;
  left: 3.2%;
  top: 18.2%;
  z-index: 16;
  width: 23.5cqw;
  max-width: 23.5cqw;
  padding: 0.72cqw;
  border-radius: 0.9cqw;
  border: 0.12cqw solid rgba(255,255,255,0.18);
  background:
    linear-gradient(145deg, rgba(5, 10, 22, 0.94), rgba(13, 21, 40, 0.9)),
    radial-gradient(circle at 18% 12%, rgba(255, 226, 122, 0.16), transparent 42%);
  color: #f7fbff;
  box-shadow:
    inset 0 0.08cqw 0 rgba(255,255,255,0.1),
    0 1.2cqw 2.4cqw rgba(0,0,0,0.32);
  pointer-events: auto;
}

.ai-concept-step-summary[hidden] {
  display: none;
}

.ai-concept-step-summary strong {
  display: block;
  margin-bottom: 0.38cqw;
  color: rgba(255, 226, 122, 0.95);
  font: 900 0.78cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-step-summary p {
  margin: 0;
  font: 800 0.78cqw/1.2 "Space Grotesk", sans-serif;
}

.ai-concept-step-summary ul {
  display: grid;
  gap: 0.18cqw;
  margin: 0.48cqw 0 0;
  padding: 0;
  list-style: none;
  color: rgba(247,251,255,0.82);
  font: 700 0.66cqw/1.15 "Space Grotesk", sans-serif;
}

.ai-concept-step-summary button {
  margin-top: 0.58cqw;
  width: 100%;
  border: 0.1cqw solid rgba(255, 226, 122, 0.44);
  border-radius: 0.58cqw;
  padding: 0.42cqw 0.5cqw;
  background: linear-gradient(180deg, rgba(180, 121, 11, 0.95), rgba(103, 70, 7, 0.98));
  color: #fff;
  font: 900 0.72cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-concept-pending-draw {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 58;
  width: 32cqw;
  min-height: 12.4cqw;
  display: grid;
  grid-template-columns: 1fr 6.1cqw;
  gap: 0.72cqw 1.05cqw;
  align-items: center;
  padding: 1.18cqw;
  border-radius: 1.2cqw;
  border: 0.11cqw solid rgba(255, 226, 122, 0.36);
  background:
    linear-gradient(145deg, rgba(10, 15, 30, 0.94), rgba(17, 23, 45, 0.88)),
    radial-gradient(circle at 78% 18%, rgba(255, 203, 80, 0.22), transparent 38%);
  box-shadow:
    inset 0 0.08cqw 0 rgba(255,255,255,0.12),
    0 1.1cqw 2.2cqw rgba(0,0,0,0.42),
    0 0 1.4cqw rgba(255, 199, 64, 0.16);
  color: #fff;
  transform: translate(-50%, -50%);
}

.ai-concept-pending-draw-kicker,
.ai-concept-pending-draw p {
  grid-column: 1 / 2;
}

.ai-concept-pending-draw-kicker {
  color: rgba(255, 229, 144, 0.9);
  font: 900 0.68cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-pending-draw strong {
  grid-column: 1 / 2;
  color: #fff;
  font: 900 1.24cqw/1.04 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-pending-draw p {
  margin: 0;
  color: rgba(232, 240, 255, 0.78);
  font: 750 0.72cqw/1.24 "Space Grotesk", sans-serif;
}

.ai-concept-pending-draw-card {
  position: relative;
  grid-column: 2 / 3;
  grid-row: 1 / span 3;
  width: 5.65cqw;
  aspect-ratio: 0.7;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 0.14cqw solid rgba(4, 8, 18, 0.9);
  border-radius: 0.42cqw;
  background: #fff;
  box-shadow: 0 0.42cqw 0.8cqw rgba(0,0,0,0.34);
  overflow: hidden;
  color: #101827;
  font: 900 1.95cqw/1 "Orbitron", sans-serif;
}

.ai-concept-pending-draw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 62% 0, 0 62%);
  background: var(--ai-card-color, #aeb8c7);
}

.ai-concept-pending-draw-card.ai-concept-hand-card-red::before { background: #ee4a3c; }
.ai-concept-pending-draw-card.ai-concept-hand-card-blue::before { background: #3b90ff; }
.ai-concept-pending-draw-card.ai-concept-hand-card-gold::before { background: #efc33c; }
.ai-concept-pending-draw-card.ai-concept-hand-card-silver::before { background: #aeb7c7; }

.ai-concept-pending-draw-card.ai-concept-hand-card-rarity,
.ai-concept-pending-draw-card.ai-concept-hand-card-colorless {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.08), transparent 34%),
    linear-gradient(180deg, rgba(13, 16, 29, 0.98), rgba(7, 10, 20, 1));
  color: #f7fbff;
}

.ai-concept-pending-draw-card.ai-concept-hand-card-rarity::before,
.ai-concept-pending-draw-card.ai-concept-hand-card-colorless::before {
  display: none;
}

.ai-concept-pending-draw-card.ai-concept-hand-card-generation {
  border-color: rgba(15, 23, 42, 0.96);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  color: #101827;
  text-shadow: none;
}

.ai-concept-pending-draw-card.ai-concept-hand-card-generation::before {
  display: none;
}

.ai-concept-pending-draw-card span {
  position: relative;
  z-index: 1;
}

.ai-concept-pending-draw-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.52cqw;
  justify-content: center;
}

.ai-concept-pending-draw-actions form {
  margin: 0;
}

.ai-concept-pending-draw-actions button {
  min-height: 2.22cqw;
  border-radius: 0.62cqw;
  padding: 0 1.05cqw;
  border: 0.08cqw solid rgba(255,255,255,0.18);
  color: #fff;
  font: 900 0.72cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-concept-pending-draw-actions form:first-child button {
  background: linear-gradient(180deg, rgba(39, 48, 68, 0.96), rgba(15, 20, 34, 0.98));
}

.ai-concept-pending-play {
  background: linear-gradient(180deg, rgba(214, 145, 20, 0.98), rgba(128, 80, 5, 0.98));
}

.ai-concept-cancel-autoplay-form {
  position: absolute;
  left: 50%;
  bottom: 31.2%;
  z-index: 62;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: auto;
}

.ai-concept-autoplay-resume-notice {
  position: absolute;
  left: 50%;
  bottom: 31.2%;
  z-index: 62;
  max-width: min(34cqw, 360px);
  padding: 0.7cqw 1.1cqw;
  border: 0.1cqw solid rgba(93, 238, 255, 0.54);
  border-radius: 999px;
  color: #dffcff;
  background: rgba(4, 12, 26, 0.94);
  font: 800 clamp(10px, 0.66cqw, 14px)/1.25 "Orbitron", sans-serif;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 0.8cqw 1.6cqw rgba(0,0,0,0.32), 0 0 1.25cqw rgba(93,238,255,0.18);
  pointer-events: none;
}

.ai-concept-autoplay-cancel-pill {
  min-height: 2.34cqw;
  padding: 0 1.18cqw;
  border: 0.1cqw solid rgba(255, 226, 122, 0.54);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(14, 21, 38, 0.96), rgba(4, 8, 18, 0.96)),
    radial-gradient(circle at 22% 0%, rgba(255, 226, 122, 0.28), transparent 48%);
  color: #fff6c7;
  font: 900 0.72cqw/1 "Orbitron", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow:
    inset 0 0.08cqw 0 rgba(255,255,255,0.14),
    0 0.8cqw 1.6cqw rgba(0,0,0,0.32),
    0 0 1.25cqw rgba(255, 226, 122, 0.18);
  cursor: pointer;
}

.ai-concept-autoplay-cancel-pill:hover,
.ai-concept-autoplay-cancel-pill:focus-visible {
  border-color: rgba(255, 245, 183, 0.86);
  box-shadow:
    inset 0 0.08cqw 0 rgba(255,255,255,0.18),
    0 0.95cqw 1.9cqw rgba(0,0,0,0.34),
    0 0 1.65cqw rgba(255, 226, 122, 0.34);
  outline: none;
}

.ai-concept-validation-controls {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 24;
  width: clamp(300px, 30cqw, 460px);
  max-width: calc(100% - 24px);
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 0.1cqw solid rgba(255, 226, 122, 0.3);
  background:
    linear-gradient(145deg, rgba(5, 10, 24, 0.88), rgba(10, 15, 30, 0.74)),
    radial-gradient(circle at 20% 10%, rgba(255, 226, 122, 0.16), transparent 44%);
  box-shadow:
    inset 0 0.08cqw 0 rgba(255,255,255,0.12),
    0 1.1cqw 2.4cqw rgba(0,0,0,0.34);
  color: #fff;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.ai-concept-validation-controls strong {
  color: rgba(255, 226, 122, 0.96);
  font: 900 0.78rem/1 "Orbitron", sans-serif;
  text-align: center;
  text-transform: uppercase;
}

.ai-concept-validation-button-grid,
.ai-concept-validation-scenario-row {
  display: grid;
  gap: 6px;
}

.ai-concept-validation-button-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-concept-validation-button-grid-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-concept-validation-scenario-row {
  grid-template-columns: minmax(0, 1fr) 58px;
}

.ai-concept-validation-controls button,
.ai-concept-validation-controls select {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 34px;
  border: 0.08cqw solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(38, 50, 78, 0.94), rgba(14, 20, 36, 0.96));
  color: rgba(247,251,255,0.94);
  font: 850 0.68rem/1.05 "Space Grotesk", sans-serif;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-concept-validation-controls button {
  display: inline-grid;
  place-items: center;
  padding: 4px 7px;
  text-align: center;
  cursor: pointer;
}

.ai-concept-validation-controls select {
  appearance: auto;
  padding: 0 8px;
  outline: none;
}

.ai-concept-validation-controls button:hover,
.ai-concept-validation-controls button:focus-visible,
.ai-concept-validation-controls select:focus-visible {
  border-color: rgba(255, 226, 122, 0.52);
  box-shadow: 0 0 0.9cqw rgba(255, 226, 122, 0.16);
  outline: none;
}

.ai-concept-validation-controls button:disabled,
.ai-concept-validation-controls select:disabled {
  opacity: 0.52;
  cursor: progress;
}

.lobby-page {
  display: grid;
  gap: 18px;
}

.lobby-shell {
  display: grid;
  gap: 18px;
}

.lobby-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.lobby-hero-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.lobby-controls,
.lobby-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.lobby-card-list,
.lobby-seat-list,
.lobby-chat-list {
  display: grid;
  gap: 10px;
}

.lobby-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.lobby-invite-form button {
  min-height: 48px;
}

.lobby-directory-shell {
  width: 100%;
}

.lobby-directory-layout {
  width: min(100%, 980px);
  margin-inline: auto;
}

.lobby-directory-panel {
  display: grid;
  gap: 18px;
}

.lobby-directory-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.lobby-directory-header > div {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.lobby-directory-header .panel-title,
.lobby-directory-header .panel-subtitle {
  margin: 0;
}

.lobby-directory-header .eyebrow {
  justify-self: start;
}

.lobby-create-button {
  white-space: nowrap;
}

.lobby-directory-panel .lobby-invite-form {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 0;
}

.lobby-invite-submit {
  min-width: 104px;
}

.lobby-directory-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 2px;
}

.lobby-directory-list-header .surface-title {
  margin: 0;
}

.lobby-directory-empty {
  display: flex;
  align-items: baseline;
  gap: 8px 12px;
  flex-wrap: wrap;
  padding-block: 16px;
}

.lobby-directory-empty span {
  color: var(--text-2);
}

.lobby-directory-panel .lobby-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px;
  border-color: rgba(83, 205, 224, 0.15);
  background: linear-gradient(135deg, rgba(27, 54, 83, 0.34), rgba(16, 23, 48, 0.56));
}

.lobby-directory-panel .lobby-card.is-private {
  border-color: rgba(179, 154, 255, 0.16);
  background: linear-gradient(135deg, rgba(67, 48, 102, 0.24), rgba(16, 23, 48, 0.56));
}

.lobby-directory-panel .lobby-card-main {
  gap: 10px;
}

.lobby-card-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lobby-card-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #70e8f5;
  border: 1px solid rgba(83, 205, 224, 0.38);
  background: rgba(41, 176, 202, 0.12);
  box-shadow: 0 0 18px rgba(41, 176, 202, 0.12);
}

.is-private .lobby-card-emblem {
  color: #c5afff;
  border-color: rgba(179, 154, 255, 0.36);
  background: rgba(139, 93, 219, 0.1);
  box-shadow: 0 0 18px rgba(139, 93, 219, 0.1);
}

.lobby-card-emblem svg,
.lobby-config-chip svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lobby-card-emblem svg {
  width: 24px;
  height: 24px;
}

.lobby-card-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lobby-card-title strong {
  color: var(--text-1);
  font-size: 1rem;
}

.lobby-card-title small,
.lobby-private-summary {
  color: var(--text-2);
  font-size: 0.82rem;
}

.lobby-card-configs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 54px;
}

.lobby-config-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #b9d7e2;
  border: 1px solid rgba(112, 232, 245, 0.14);
  background: rgba(35, 85, 105, 0.16);
  font: 700 0.68rem/1 "Space Grotesk", sans-serif;
  white-space: nowrap;
}

.lobby-config-chip svg {
  width: 14px;
  height: 14px;
}

.lobby-private-summary {
  padding-left: 54px;
}

.lobby-directory-panel .lobby-card-actions {
  justify-content: flex-end;
}

.lobby-directory-filters {
  padding: 14px;
  border: 1px solid rgba(83, 205, 224, 0.12);
  border-radius: 18px;
  background: rgba(5, 15, 34, 0.34);
}

.lobby-directory-filters > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-1);
  cursor: pointer;
  list-style: none;
}

.lobby-directory-filters > summary::-webkit-details-marker {
  display: none;
}

.lobby-directory-filters > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 50%;
  color: #70e8f5;
  border: 1px solid rgba(112, 232, 245, 0.24);
}

.lobby-directory-filters[open] > summary::after {
  content: "−";
}

.lobby-directory-filters > summary span {
  color: var(--text-2);
  font-size: 0.72rem;
}

.lobby-filter-body {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.lobby-filter-heading,
.lobby-directory-live {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lobby-filter-heading {
  justify-content: space-between;
}

.lobby-filter-heading strong {
  color: var(--text-1);
  font: 800 0.9rem/1.2 "Space Grotesk", sans-serif;
}

.lobby-filter-heading > span {
  color: var(--text-2);
  font-size: 0.72rem;
}

.lobby-filter-heading button {
  min-height: 34px;
  padding: 6px 11px;
}

.lobby-filter-selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lobby-filter-selects label {
  display: grid;
  gap: 5px;
  color: var(--text-2);
  font-size: 0.74rem;
}

.lobby-filter-selects select {
  min-height: 42px;
  padding-block: 8px;
}

.lobby-config-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.lobby-config-filters > span {
  margin-right: 3px;
  color: var(--text-2);
  font-size: 0.72rem;
}

.lobby-config-filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid rgba(112, 232, 245, 0.13);
  border-radius: 999px;
  color: #b9d7e2;
  background: rgba(35, 85, 105, 0.13);
  font-size: 0.7rem;
  cursor: pointer;
}

.lobby-config-filters input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.lobby-directory-live {
  justify-content: flex-end;
  color: #aef4c7;
  font-size: 0.76rem;
}

.lobby-directory-live small {
  color: var(--text-2);
}

.lobby-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #54e58b;
  box-shadow: 0 0 7px #54e58b, 0 0 14px rgba(84, 229, 139, 0.48);
}

.lobby-directory-live.is-reconnecting {
  color: #ffd569;
}

.lobby-directory-live.is-reconnecting .lobby-live-dot {
  background: #ffd569;
  box-shadow: 0 0 7px #ffd569, 0 0 14px rgba(255, 213, 105, 0.45);
}

.lobby-card[hidden] {
  display: none !important;
}

.lobby-card,
.lobby-seat-row,
.lobby-chat-message {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.lobby-card-main,
.lobby-seat-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lobby-card-main strong,
.lobby-seat-copy strong,
.lobby-chat-message strong {
  color: var(--text-0);
  word-break: break-word;
}

.lobby-card-main span,
.lobby-seat-copy span,
.lobby-chat-message span {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.45;
}

.lobby-seat-row.is-self {
  border-color: rgba(93, 238, 255, 0.36);
  background: rgba(93, 238, 255, 0.07);
}

.lobby-seat-avatar {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(93, 238, 255, 0.34);
  background: rgba(4, 10, 28, 0.82);
  color: var(--accent-cyan);
  font-weight: 800;
}

.lobby-seat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobby-chat-list {
  max-height: 360px;
  overflow: auto;
  padding: 0 4px 8px 0;
  gap: 3px;
  overscroll-behavior: contain;
  scroll-padding-bottom: 8px;
}

.lobby-chat-message {
  display: grid;
  grid-template-columns: auto 26px minmax(0, 1fr);
  align-items: start;
  justify-content: initial;
  gap: 7px;
  padding: 5px 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lobby-chat-message p {
  margin: 0;
  color: var(--text-1);
  font-size: .9rem;
  line-height: 1.28;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-name-color-cyan { --chat-name-color:#5deeff; }
.chat-name-color-gold { --chat-name-color:#ffd166; }
.chat-name-color-coral { --chat-name-color:#ff7a7a; }
.chat-name-color-magenta { --chat-name-color:#ff62c7; }
.chat-name-color-violet { --chat-name-color:#b89cff; }
.chat-name-color-lime { --chat-name-color:#b8f56a; }
.chat-name-color-orange { --chat-name-color:#ffaa5c; }
.chat-name-color-silver { --chat-name-color:#e4eaf2; }
.chat-name-color-sky { --chat-name-color:#7ccbff; }
.chat-name-color-rose { --chat-name-color:#ff9fb8; }
.lobby-chat-message p strong { color:var(--chat-name-color,#b89cff); text-shadow:0 0 12px color-mix(in srgb,var(--chat-name-color,#b89cff) 30%,transparent); }
.lobby-chat-message time { padding-top: 3px; color: var(--text-2); font: 700 .76rem/1.2 "Space Grotesk",sans-serif; font-variant-numeric: tabular-nums; }
.compact-chat-avatar { display:grid; place-items:center; overflow:hidden; width:26px; height:26px; border:1px solid rgba(93,238,255,.28); border-radius:50%; background:rgba(93,238,255,.08); color:var(--accent-cyan); font:800 .62rem/1 "Space Grotesk",sans-serif; }
.compact-chat-avatar img { width:100%; height:100%; object-fit:cover; }

.lobby-chat-message.is-game-master {
  margin-block: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 213, 105, 0.2);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 213, 105, 0.08), rgba(93, 238, 255, 0.035));
}

.lobby-chat-message.is-game-master .compact-chat-avatar {
  border-color: rgba(255, 213, 105, 0.56);
  background: rgba(255, 213, 105, 0.12);
  color: #ffe6a0;
  box-shadow: 0 0 12px rgba(255, 213, 105, 0.18);
}

.lobby-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.lobby-chat-form input[name="message"] {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(103, 135, 255, 0.24);
  border-radius: 12px;
  background: rgba(4, 9, 22, 0.84);
  color: var(--text-0);
  font: 700 1rem/1.2 "Space Grotesk", sans-serif;
  touch-action: manipulation;
}

.lobby-chat-form button {
  min-height: 42px;
  padding-block: 8px;
}

.lobby-directory-layout { grid-template-columns: 1fr; }
.lobby-eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; }
.lobby-readiness-indicator { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; color:var(--text-1); font:800 .82rem/1.2 "Space Grotesk",sans-serif; letter-spacing:.04em; white-space:nowrap; }
.lobby-readiness-dot { width:10px; height:10px; border-radius:50%; background:#ff4b72; box-shadow:0 0 7px #ff335f,0 0 16px rgba(255,51,95,.78); animation:lobbyReadinessGlow 1.8s ease-in-out infinite; }
.lobby-readiness-indicator.is-ready { color:#ffe8a4; }
.lobby-readiness-indicator.is-ready .lobby-readiness-dot { background:#ffd569; box-shadow:0 0 7px #ffd569,0 0 16px rgba(255,213,105,.8); }
.lobby-readiness-indicator.is-not-ready { color:#ffb0c0; }
.lobby-readiness-indicator.is-spectating { color:#b8dcff; }
.lobby-readiness-indicator.is-spectating .lobby-readiness-dot { background:#42a5ff; box-shadow:0 0 7px #42a5ff,0 0 16px rgba(66,165,255,.8); }
.lobby-readiness-indicator.is-in-lobby { color:#eef7ff; }
.lobby-readiness-indicator.is-in-lobby .lobby-readiness-dot { box-sizing:border-box; background:transparent; border:2px solid #f5fbff; box-shadow:0 0 7px rgba(245,251,255,.96),0 0 17px rgba(220,235,248,.74),inset 0 0 4px rgba(245,251,255,.38); }
.lobby-readiness-indicator.is-in-match { color:#e2e8ef; }
.lobby-readiness-indicator.is-in-match .lobby-readiness-dot { background:#dce4ec; box-shadow:0 0 7px #dce4ec,0 0 16px rgba(220,228,236,.78); }
@keyframes lobbyReadinessGlow { 0%,100% { opacity:.76; transform:scale(.9); } 50% { opacity:1; transform:scale(1.12); } }
.lobby-active-match-clock { display:grid; justify-items:start; gap:3px; width:max-content; max-width:100%; padding:12px 18px; border:1px solid rgba(255,213,105,.34); border-radius:16px; background:rgba(255,213,105,.07); box-shadow:0 0 28px rgba(255,213,105,.08); }
.lobby-active-match-clock span { color:#ffe8a4; font:800 .72rem/1.2 "Space Grotesk",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.lobby-active-match-clock strong { color:#fff3ca; font:900 clamp(2.15rem,8vw,3.6rem)/1 "Space Grotesk",sans-serif; letter-spacing:.08em; text-shadow:0 0 20px rgba(255,213,105,.38); }
.lobby-invite-code { display:grid; gap:2px; min-width:154px; padding:10px 16px; border:1px solid rgba(93,238,255,.32); border-radius:16px; background:rgba(93,238,255,.08); text-align:left; box-shadow:none; filter:none; }
.lobby-invite-code span { color:var(--text-2); font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.lobby-invite-code strong { color:var(--text-0); font:800 1.05rem/1.2 "Space Grotesk",sans-serif; letter-spacing:.15em; }
.lobby-invite-code small { color:rgba(151,239,255,.66); font-size:.65rem; font-weight:700; }
.lobby-invite-code.is-owner-control { cursor:pointer; }
.lobby-invite-code.is-owner-control:hover { transform:none; border-color:rgba(255,213,105,.55); background:rgba(255,213,105,.08); }
.lobby-invite-code.is-regenerated { animation:lobbyInviteRegenerated 1s ease-in-out infinite; }
@keyframes lobbyInviteRegenerated { 0%,100% { border-color:rgba(93,238,255,.38); box-shadow:0 0 8px rgba(93,238,255,.12); } 50% { border-color:rgba(255,213,105,.96); box-shadow:0 0 12px rgba(255,213,105,.7),0 0 34px rgba(93,238,255,.5); } }
.lobby-always-ready { min-height:44px; padding:11px 16px; border-color:rgba(255,213,105,.34); color:#ffe8a4; background:rgba(255,213,105,.08); font-size:1rem; }
.lobby-seats-surface { gap:10px; }
.lobby-seat-list { gap:6px; }
.lobby-seat-row-compact { min-height:44px; padding:7px 11px; border-radius:12px; }
.lobby-seat-row-compact .lobby-seat-copy { display:flex; flex:1 1 auto; align-items:baseline; gap:8px; flex-wrap:wrap; }
.lobby-seat-row-compact .lobby-seat-copy strong { font-size:.94rem; }
.lobby-seat-row-compact .lobby-seat-copy > span { font-size:.78rem; line-height:1.2; }
.lobby-owner-label { padding:2px 7px; border:1px solid rgba(93,238,255,.28); border-radius:999px; color:var(--accent-cyan) !important; background:rgba(93,238,255,.07); font-weight:800; white-space:nowrap; }
.lobby-seat-status { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; font:800 .78rem/1.2 "Space Grotesk",sans-serif; white-space:nowrap; }
.lobby-seat-status.is-ready { color:#ffe8a4; }
.lobby-seat-status.is-ready .lobby-readiness-dot { background:#ffd569; box-shadow:0 0 7px #ffd569,0 0 16px rgba(255,213,105,.8); }
.lobby-seat-status.is-not-ready { color:#ffb0c0; }
.lobby-seat-status.is-spectating { color:#b8dcff; }
.lobby-seat-status.is-spectating .lobby-readiness-dot { background:#42a5ff; box-shadow:0 0 7px #42a5ff,0 0 16px rgba(66,165,255,.8); }
.lobby-seat-status.is-in-lobby { color:#eef7ff; }
.lobby-seat-status.is-in-lobby .lobby-readiness-dot { box-sizing:border-box; background:transparent; border:2px solid #f5fbff; box-shadow:0 0 7px rgba(245,251,255,.96),0 0 17px rgba(220,235,248,.74),inset 0 0 4px rgba(245,251,255,.38); }
.lobby-seat-status.is-in-match { color:#e2e8ef; }
.lobby-seat-status.is-in-match .lobby-readiness-dot { background:#dce4ec; box-shadow:0 0 7px #dce4ec,0 0 16px rgba(220,228,236,.78); }
.lobby-seat-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.lobby-kick-button { min-height:30px; padding:5px 10px; border:1px solid rgba(255,75,114,.42); border-radius:999px; background:rgba(255,42,90,.09); color:#ffb0c0; box-shadow:none; filter:none; font-size:.72rem; }
.lobby-kick-button:hover { transform:none; background:rgba(255,42,90,.16); }
.lobby-confirm-dialog { width:min(520px,calc(100vw - 28px)); padding:0; border:1px solid rgba(93,238,255,.28); border-radius:22px; color:var(--text-0); background:linear-gradient(145deg,rgba(11,23,54,.99),rgba(5,11,28,.99)); box-shadow:0 24px 90px rgba(0,0,0,.7),0 0 40px rgba(93,238,255,.12); }
.lobby-confirm-dialog::backdrop { background:rgba(0,3,12,.76); backdrop-filter:blur(5px); }
.lobby-confirm-dialog form { display:grid; gap:16px; padding:24px; }
.lobby-confirm-dialog h2,.lobby-confirm-dialog p { margin:0; }
.lobby-confirm-dialog h2 { font:800 1.35rem/1.2 "Orbitron",sans-serif; }
.lobby-confirm-dialog p { color:var(--text-1); line-height:1.5; }
.lobby-rankings-button { color:#ffe08a; border-color:rgba(255,213,105,.3); }
.lobby-rankings-button.is-completion-glow { animation:lobbyRankingsCompletionGlow .75s ease-in-out 4; }
@keyframes lobbyRankingsCompletionGlow { 0%,100% { border-color:rgba(255,213,105,.32); box-shadow:0 0 8px rgba(255,213,105,.12); transform:scale(1); } 50% { color:#fff7d6; border-color:rgba(255,224,124,.98); box-shadow:0 0 12px rgba(255,213,105,.86),0 0 38px rgba(255,154,52,.52); transform:scale(1.07); } }
.lobby-rankings-dialog { width:min(620px,calc(100vw - 24px)); }
.lobby-rankings-dialog-body { display:grid; gap:18px; padding:24px; }
.lobby-rankings-dialog .card-header { align-items:flex-start; }
.lobby-rankings-dialog h2 { margin:10px 0 0; font:900 clamp(1.35rem,4vw,1.8rem)/1.1 "Orbitron",sans-serif; }
.lobby-ranking-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lobby-ranking-actions > button { flex:0 0 auto; width:fit-content; min-width:0; }
.lobby-rankings-close { white-space:nowrap; }
.lobby-ranking-list { display:grid; gap:7px; }
.lobby-ranking-row { display:grid; grid-template-columns:48px 38px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; padding:9px 12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.025); }
.lobby-ranking-row.is-self { border-color:rgba(93,238,255,.34); background:rgba(93,238,255,.055); }
.lobby-ranking-row.is-first { border-color:rgba(255,213,105,.58); background:linear-gradient(90deg,rgba(255,213,105,.13),rgba(255,255,255,.025)); box-shadow:0 0 20px rgba(255,213,105,.12); }
.lobby-ranking-row.is-second { border-color:rgba(220,228,236,.46); background:linear-gradient(90deg,rgba(220,228,236,.1),rgba(255,255,255,.025)); }
.lobby-ranking-row.is-third { border-color:rgba(255,158,94,.42); background:linear-gradient(90deg,rgba(255,133,65,.09),rgba(255,255,255,.025)); }
.lobby-ranking-place { color:var(--text-2); font:900 .82rem/1 "Orbitron",sans-serif; text-align:center; }
.lobby-ranking-row.is-first .lobby-ranking-place { color:#ffe08a; }
.lobby-ranking-row.is-second .lobby-ranking-place { color:#e4eaf2; }
.lobby-ranking-row.is-third .lobby-ranking-place { color:#ffab72; }
.lobby-ranking-player { display:grid; min-width:0; }
.lobby-ranking-player strong { overflow:hidden; color:var(--text-0); text-overflow:ellipsis; white-space:nowrap; }
.lobby-ranking-player small { color:var(--text-2); }
.lobby-ranking-wins { display:grid; justify-items:end; min-width:48px; }
.lobby-ranking-wins strong { color:#fff4c9; font:900 1.25rem/1 "Orbitron",sans-serif; }
.lobby-ranking-wins small { color:var(--text-2); font-size:.68rem; text-transform:uppercase; }
.lobby-tabs { display:flex; gap:8px; align-items:center; overflow:auto; }
.lobby-tab { min-height:44px; padding:11px 16px; border:1px solid rgba(255,255,255,.09); border-radius:999px; color:var(--text-2); background:rgba(255,255,255,.03); box-shadow:none; filter:none; font:800 1rem/1.2 "Space Grotesk",sans-serif; text-decoration:none; white-space:nowrap; cursor:pointer; }
.lobby-tab-active, .lobby-tab[aria-selected="true"], .lobby-tab:hover { color:var(--text-0); border-color:rgba(93,238,255,.4); background:rgba(93,238,255,.09); box-shadow:none; filter:none; transform:none; }
.lobby-create-modern, .lobby-match-options { display:grid; gap:18px; }
.lobby-tab-panel[hidden] { display:none !important; }
.lobby-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.lobby-table-carousel { display:grid; gap:13px; min-width:0; padding:16px; border:1px solid rgba(93,238,255,.18); border-radius:20px; background:linear-gradient(145deg,rgba(8,22,48,.78),rgba(5,11,28,.72)); box-shadow:inset 0 0 38px rgba(93,238,255,.025); }
.lobby-table-carousel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.lobby-table-carousel-heading > div { display:grid; gap:4px; min-width:0; }
.lobby-table-carousel-heading strong { color:var(--text-0); font:800 1rem/1.2 "Space Grotesk",sans-serif; }
.lobby-table-carousel-heading small,.lobby-table-carousel-heading > span { color:var(--text-2); line-height:1.4; }
.lobby-table-carousel-heading > span { flex:0 0 auto; padding:4px 9px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(255,255,255,.035); font-size:.72rem; font-weight:800; white-space:nowrap; }
.lobby-table-carousel-stage { display:grid; grid-template-columns:50px minmax(280px,440px) 50px; justify-content:center; align-items:center; gap:12px; min-width:0; }
.lobby-table-carousel-arrow { display:grid; place-items:center; width:48px; height:48px; min-width:48px; min-height:48px; padding:0; border:1px solid rgba(93,238,255,.34); border-radius:50%; color:#effcff; background:rgba(93,238,255,.075); box-shadow:0 0 20px rgba(93,238,255,.08); filter:none; font:700 1.45rem/1 sans-serif; }
.lobby-table-carousel-arrow:hover:not(:disabled) { transform:scale(1.06); border-color:rgba(255,213,105,.72); color:#ffe8a4; background:rgba(255,213,105,.1); }
.lobby-table-carousel-arrow:disabled { opacity:.28; cursor:default; }
.lobby-table-carousel-preview { position:relative; min-width:0; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:#040916; box-shadow:0 14px 38px rgba(0,0,0,.34),0 0 22px rgba(93,238,255,.07); isolation:isolate; }
.lobby-table-carousel-preview img { display:block; width:100%; height:100%; object-fit:cover; }
.lobby-table-carousel-preview img[hidden],.lobby-table-random-art[hidden],.lobby-table-default-art[hidden] { display:none; }
.lobby-table-carousel-preview.is-default { display:grid; place-items:center; background:radial-gradient(circle at 9% 58%,rgba(32,119,255,.36),transparent 23%),radial-gradient(circle at 91% 58%,rgba(48,238,75,.32),transparent 23%),radial-gradient(circle at 50% 12%,rgba(235,29,29,.4),transparent 25%),radial-gradient(circle at 50% 88%,rgba(255,190,52,.3),transparent 23%),radial-gradient(circle at 50% 50%,#182441 0%,#071126 52%,#030713 100%); }
.lobby-table-carousel-preview.is-none { display:grid; place-items:center; background:#000; }
.lobby-table-default-art { position:relative; z-index:1; padding:13px 18px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#f7fbff; background:rgba(4,10,26,.62); box-shadow:0 0 28px rgba(93,238,255,.14); font:900 clamp(.72rem,2vw,1rem)/1 "Orbitron",sans-serif; letter-spacing:.12em; }
.lobby-table-carousel-preview.is-random { display:grid; place-items:center; background:radial-gradient(circle at 50% 50%,rgba(117,79,255,.22),transparent 44%),linear-gradient(135deg,#07152d,#150b2e 52%,#15130a); }
.lobby-table-random-art { position:relative; width:150px; height:94px; }
.lobby-table-random-art span { position:absolute; top:7px; left:50%; width:58px; height:80px; border:2px solid rgba(255,255,255,.72); border-radius:9px; background:linear-gradient(145deg,rgba(52,129,255,.9),rgba(28,17,83,.96)); box-shadow:0 8px 24px rgba(0,0,0,.42); transform-origin:50% 100%; }
.lobby-table-random-art span:nth-child(1) { transform:translateX(-76px) rotate(-16deg); border-color:rgba(93,238,255,.86); }
.lobby-table-random-art span:nth-child(2) { transform:translateX(-29px); border-color:rgba(255,213,105,.9); }
.lobby-table-random-art span:nth-child(3) { transform:translateX(20px) rotate(16deg); border-color:rgba(255,89,151,.88); }
.lobby-table-random-art strong { position:absolute; z-index:2; inset:0; display:grid; place-items:center; color:#fff; font:900 2.4rem/1 "Orbitron",sans-serif; text-shadow:0 0 15px rgba(255,255,255,.7); }
.lobby-table-carousel-preview.is-slide-next { animation:lobbyTableSlideNext .28s ease both; }
.lobby-table-carousel-preview.is-slide-previous { animation:lobbyTableSlidePrevious .28s ease both; }
@keyframes lobbyTableSlideNext { 0%{opacity:.15;transform:translateX(8%) scale(.985)} 100%{opacity:1;transform:translateX(0) scale(1)} }
@keyframes lobbyTableSlidePrevious { 0%{opacity:.15;transform:translateX(-8%) scale(.985)} 100%{opacity:1;transform:translateX(0) scale(1)} }
.lobby-table-carousel-copy { display:grid; justify-items:center; gap:4px; min-height:48px; text-align:center; }
.lobby-table-carousel-copy strong { color:#fff3ca; font:900 1rem/1.2 "Orbitron",sans-serif; }
.lobby-table-carousel-copy span { max-width:680px; color:var(--text-2); font-size:.84rem; line-height:1.45; }
.lobby-option-card { display:flex; gap:12px; align-items:flex-start; min-width:0; overflow:hidden; padding:16px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.025); cursor:pointer; }
.lobby-option-card input[type="checkbox"] { appearance:auto; flex:0 0 22px; width:22px; height:22px; min-width:22px; margin:2px 0 0; padding:0; border:0; border-radius:5px; background:transparent; box-shadow:none; accent-color:#22aaf5; }
.lobby-option-card input[type="checkbox"]:focus { transform:none; box-shadow:0 0 0 3px rgba(93,238,255,.22); }
.lobby-option-card span { display:grid; gap:4px; min-width:0; }
.lobby-option-card strong { color:var(--text-0); }
.lobby-option-card small { color:var(--text-2); line-height:1.4; overflow-wrap:anywhere; }
.lobby-spectator-hands-option { grid-column:2; }
.lobby-spectator-hands-option[hidden] { display:none; }
.lobby-personalize { display:grid; gap:18px; }
.chat-name-color-fieldset { min-width:0; margin:0; padding:0; border:0; }
.chat-name-color-fieldset legend { margin-bottom:12px; color:var(--text-1); font-weight:800; }
.chat-name-color-choices { display:flex; flex-wrap:wrap; gap:12px; }
.chat-name-color-choice { position:relative; display:grid; justify-items:center; gap:6px; min-width:52px; color:var(--text-2); cursor:pointer; }
.chat-name-color-choice input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.chat-name-color-choice > span { display:block; width:42px; height:42px; border:3px solid rgba(255,255,255,.18); border-radius:50%; background:var(--chat-name-color); box-shadow:0 0 0 2px rgba(3,10,24,.9),0 0 18px color-mix(in srgb,var(--chat-name-color) 38%,transparent); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.chat-name-color-choice small { color:var(--text-2); font-size:.72rem; }
.chat-name-color-choice:hover > span { transform:translateY(-2px) scale(1.06); }
.chat-name-color-choice input:checked + span { border-color:#fff; transform:scale(1.1); box-shadow:0 0 0 3px rgba(7,17,34,.96),0 0 0 5px var(--chat-name-color),0 0 26px color-mix(in srgb,var(--chat-name-color) 65%,transparent); }
.chat-name-color-choice input:focus-visible + span { outline:3px solid #fff; outline-offset:5px; }
.lobby-presence-notification-stage { position:fixed; z-index:1200; top:max(18px,calc(env(safe-area-inset-top,0px) + 14px)); left:50%; width:min(92vw,560px); pointer-events:none; transform:translateX(-50%); }
.lobby-presence-notification { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:14px; margin-bottom:10px; padding:13px 18px 13px 13px; overflow:hidden; border:1px solid rgba(93,238,255,.52); border-radius:22px; background:linear-gradient(135deg,rgba(8,27,54,.98),rgba(19,16,48,.98)); box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 32px rgba(93,238,255,.2); animation:lobby-presence-join 2.55s cubic-bezier(.2,.8,.2,1) both; }
.lobby-presence-notification.is-leave { border-color:rgba(255,122,122,.5); box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 32px rgba(255,98,199,.18); animation-name:lobby-presence-leave; }
.lobby-presence-notification img { width:58px; height:58px; border:2px solid rgba(255,255,255,.75); border-radius:50%; object-fit:cover; background:#071122; box-shadow:0 0 22px rgba(93,238,255,.38); }
.lobby-presence-notification strong { display:block; color:#fff; font:900 1rem/1.2 "Space Grotesk",sans-serif; }
.lobby-presence-notification span { display:block; margin-top:3px; color:var(--accent-cyan); font:800 .82rem/1.2 "Space Grotesk",sans-serif; letter-spacing:.03em; text-transform:uppercase; }
@keyframes lobby-presence-join { 0%{opacity:0;transform:translate3d(70vw,-30px,0) rotate(8deg) scale(.62)} 18%{opacity:1;transform:translate3d(-18px,5px,0) rotate(-2deg) scale(1.05)} 27%{transform:translate3d(0,0,0) rotate(0) scale(1)} 78%{opacity:1;transform:translate3d(0,0,0) scale(1)} 100%{opacity:0;transform:translate3d(-22vw,-70px,0) rotate(-4deg) scale(.82)} }
@keyframes lobby-presence-leave { 0%{opacity:0;transform:translate3d(-70vw,25px,0) rotate(-8deg) scale(.65)} 18%{opacity:1;transform:translate3d(18px,-4px,0) rotate(2deg) scale(1.05)} 27%{transform:translate3d(0,0,0) rotate(0) scale(1)} 76%{opacity:1;transform:translate3d(0,0,0) scale(1)} 100%{opacity:0;transform:translate3d(58vw,-45px,0) rotate(7deg) scale(.7)} }
.lobby-options-readonly .lobby-option-card { cursor:default; }
.lobby-options-readonly select:disabled { opacity:1; color:var(--text-0); -webkit-text-fill-color:var(--text-0); cursor:default; }
.lobby-options-readonly input:disabled { opacity:.9; cursor:default; }

.quick-match-screen { min-height:100vh; margin:0; color:#f5fbff; background:#03070e; overflow-x:hidden; font-family:"Space Grotesk",sans-serif; }
.quick-match-navigation-cover { position:fixed; inset:0; z-index:2147483647; display:grid; place-items:center; overflow:hidden; color:#f5fbff; background:radial-gradient(circle at 50% 45%,rgba(0,255,209,.13),transparent 32%),linear-gradient(135deg,#040812 0 49.5%,#08101b 50% 100%); font-family:"Space Grotesk",sans-serif; }
.quick-match-navigation-cover::before { content:""; position:absolute; inset:-35%; opacity:.18; background-image:linear-gradient(rgba(24,255,213,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(24,255,213,.18) 1px,transparent 1px); background-size:48px 48px; transform:perspective(500px) rotateX(58deg); }
.quick-match-navigation-cover span { position:relative; color:#19ffd2; font-family:"Orbitron",sans-serif; font-size:clamp(.75rem,2vw,1rem); font-weight:700; letter-spacing:.2em; text-transform:uppercase; text-shadow:0 0 20px rgba(25,255,210,.55); }
.quick-match-stage { position:relative; min-height:100vh; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 50% 45%,rgba(0,255,209,.13),transparent 32%),linear-gradient(135deg,#040812 0 49.5%,#08101b 50% 100%); }
.is-standalone-display .quick-match-stage { box-sizing:border-box; padding-top:58px; padding-top:max(58px,calc(18px + env(safe-area-inset-top,0px))); }
.quick-match-grid { position:absolute; inset:0; z-index:-2; opacity:.22; background-image:linear-gradient(rgba(24,255,213,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(24,255,213,.18) 1px,transparent 1px); background-size:48px 48px; transform:perspective(500px) rotateX(58deg) scale(1.45); transform-origin:50% 65%; }
.quick-match-stage::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.72),transparent 24% 76%,rgba(0,0,0,.72)),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.015) 4px); }
.quick-match-console { width:min(880px,calc(100% - 32px)); margin:0 auto; padding:clamp(28px,5vw,60px); text-align:center; border:1px solid rgba(25,255,210,.3); background:linear-gradient(145deg,rgba(4,15,25,.94),rgba(5,9,18,.9)); box-shadow:0 0 80px rgba(0,255,209,.1),inset 0 0 50px rgba(0,255,209,.035); clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 28px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 28px),0 28px); }
.quick-match-console h1 { margin:12px 0; font-size:clamp(2rem,6vw,4.4rem); text-transform:uppercase; letter-spacing:.05em; }
.quick-match-console > p { max-width:680px; margin:0 auto; color:#9eb4c4; line-height:1.6; }
.quick-match-pulse { display:flex; justify-content:center; gap:8px; }
.quick-match-pulse span { width:9px; height:9px; border-radius:50%; background:#19ffd2; box-shadow:0 0 14px #19ffd2; animation:quickPulse 1.2s infinite ease-in-out; }
.quick-match-pulse span:nth-child(2) { animation-delay:.18s; }.quick-match-pulse span:nth-child(3) { animation-delay:.36s; }
@keyframes quickPulse { 0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)} }
.quick-match-timer { margin:30px auto 10px; color:#19ffd2; font:900 clamp(2.2rem,8vw,5.2rem)/1 "Space Grotesk",sans-serif; letter-spacing:.08em; text-shadow:0 0 28px rgba(25,255,210,.45); }
.quick-match-player-count { display:flex; justify-content:center; gap:8px; align-items:baseline; color:#8296a8; letter-spacing:.12em; }
.quick-match-player-count strong { color:#fff; font-size:1.8rem; }
.quick-match-roster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:26px 0; }
.quick-match-roster article { display:grid; gap:7px; place-items:center; min-height:112px; padding:12px 8px; border:1px solid rgba(25,255,210,.18); background:rgba(25,255,210,.035); }
.quick-match-roster article > img,.quick-match-roster-badge { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#19ffd2,#246cff); color:#031019; object-fit:cover; font-weight:950; }
.quick-match-roster article small { color:#19ffd2; font-size:.67rem; letter-spacing:.14em; }
.quick-match-roster article.is-waiting { border-style:dashed; color:#718899; background:rgba(118,151,171,.025); }
.quick-match-wait-spinner { width:40px; height:40px; border:4px solid rgba(113,136,153,.18); border-top-color:#19ffd2; border-right-color:rgba(36,108,255,.85); border-radius:50%; box-shadow:0 0 18px rgba(25,255,210,.18); transform:translateZ(0); will-change:transform; animation:quickMatchWaitSpin .8s linear infinite; }
.quick-match-roster article.is-new-join { position:relative; z-index:1; animation:quickMatchPlayerJoin 1.35s cubic-bezier(.16,.84,.26,1) both; }
.quick-match-roster article.is-new-join::after { content:""; position:absolute; inset:-7px; pointer-events:none; border:3px solid #fff; box-shadow:0 0 18px #fff,0 0 42px #19ffd2,0 0 76px rgba(36,108,255,.9),inset 0 0 30px rgba(25,255,210,.35); animation:quickMatchPlayerJoinFrame 1.35s ease-out both; }
@keyframes quickMatchWaitSpin { from{transform:translateZ(0) rotate(0turn)}to{transform:translateZ(0) rotate(1turn)} }
@keyframes quickMatchPlayerJoin { 0%{opacity:.05;transform:scale(.72)}18%{opacity:1;transform:scale(1.12);filter:brightness(3)}36%{transform:scale(.96);filter:brightness(1.15)}52%{transform:scale(1.05);filter:brightness(2.1)}100%{transform:scale(1);filter:brightness(1)} }
@keyframes quickMatchPlayerJoinFrame { 0%{opacity:0;transform:scale(.72)}16%,52%{opacity:1}100%{opacity:0;transform:scale(1.16)} }
.quick-match-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }

@media (max-width: 880px) {
  .lobby-hero,
  .lobby-layout {
    grid-template-columns: 1fr;
  }

  .lobby-hero {
    display: grid;
  }

  .lobby-invite-form {
    grid-template-columns: 1fr;
  }
  .lobby-directory-panel .lobby-invite-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .lobby-table-carousel { padding:13px; }
  .lobby-table-carousel-heading { display:grid; gap:8px; }
  .lobby-table-carousel-heading > span { justify-self:start; }
  .lobby-table-carousel-stage { grid-template-columns:40px minmax(0,1fr) 40px; gap:7px; }
  .lobby-table-carousel-arrow { width:38px; height:38px; min-width:38px; min-height:38px; font-size:1.12rem; }
  .lobby-option-grid { grid-template-columns:1fr; }
  .lobby-spectator-hands-option { grid-column:auto; }
  .quick-match-roster { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .lobby-directory-panel {
    gap: 16px;
  }
  .lobby-directory-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lobby-directory-header .eyebrow {
    justify-self: stretch;
  }
  .lobby-create-button {
    width: 100%;
  }
  .lobby-directory-panel .lobby-invite-form {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 8px;
  }
  .lobby-invite-submit {
    min-width: 0;
    padding-inline: 14px;
  }
  .lobby-directory-empty {
    display: grid;
    gap: 5px;
  }
  .lobby-filter-selects {
    grid-template-columns: 1fr;
  }
  .lobby-directory-list-header {
    align-items: flex-end;
  }
  .lobby-directory-live {
    display: grid;
    grid-template-columns: auto auto;
    gap: 3px 7px;
  }
  .lobby-directory-live small {
    grid-column: 1 / -1;
    text-align: right;
  }
  .lobby-directory-panel .lobby-card {
    grid-template-columns: 1fr;
  }
  .lobby-directory-panel .lobby-card-actions {
    justify-content: space-between;
  }
  .lobby-card-configs,
  .lobby-private-summary {
    padding-left: 0;
  }
}

@media (max-width: 760px), (max-height: 430px) {
  .ai-concept-validation-controls {
    position: fixed;
    left: 50vw;
    top: 50svh;
    width: min(320px, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
    max-height: calc(100svh - 96px);
    gap: clamp(3px, 1cqw, 5px);
    padding: clamp(5px, 1.6cqw, 8px);
    border-radius: 8px;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .ai-concept-validation-controls::-webkit-scrollbar {
    display: none;
  }

  .ai-concept-validation-controls strong {
    font: 900 clamp(0.48rem, 1.55cqw, 0.62rem)/1 "Orbitron", sans-serif;
  }

  .ai-concept-validation-button-grid,
  .ai-concept-validation-scenario-row {
    gap: clamp(3px, 1cqw, 5px);
  }

  .ai-concept-validation-scenario-row {
    grid-template-columns: minmax(0, 1fr) clamp(38px, 12cqw, 48px);
  }

  .ai-concept-validation-controls button,
  .ai-concept-validation-controls select {
    height: clamp(22px, 6.2cqw, 28px);
    border-radius: 6px;
    font: 850 clamp(0.48rem, 1.45cqw, 0.58rem)/1.02 "Space Grotesk", sans-serif;
  }

  .ai-concept-validation-controls button {
    padding: 1px 4px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ai-concept-validation-controls select {
    padding: 0 4px;
    text-overflow: ellipsis;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .ai-concept-validation-controls {
    left: 0;
    right: 0;
    width: min(270px, calc(100vw - 14px));
    max-width: calc(100vw - 14px);
    max-height: calc(100svh - 84px);
    margin-inline: auto;
    gap: 3px;
    padding: 5px;
    transform: translateY(-50%);
  }

  .ai-concept-validation-button-grid,
  .ai-concept-validation-scenario-row {
    gap: 3px;
  }

  .ai-concept-validation-scenario-row {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .ai-concept-validation-controls strong {
    font-size: 0.5rem;
  }

  .ai-concept-validation-controls button,
  .ai-concept-validation-controls select {
    height: 21px;
    font-size: 0.45rem;
  }

  .ai-concept-validation-controls button {
    padding: 1px 3px;
  }

  .ai-concept-validation-controls select {
    padding: 0 3px;
  }
}

.ai-concept-validation-shell .ai-concept-center-logo {
  opacity: 0.34;
}

.ai-concept-fireworks-layer {
  position: absolute;
  inset: 0;
  z-index: 82;
  pointer-events: none;
  overflow: hidden;
}

.ai-concept-firework-spark {
  position: absolute;
  left: var(--spark-x);
  top: var(--spark-y);
  width: 0.34cqw;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--spark-color);
  box-shadow: 0 0 0.82cqw var(--spark-color);
  transform: translate(-50%, -50%) scale(0.35);
  animation: ai-concept-firework-spark 920ms ease-out forwards;
}

@keyframes ai-concept-firework-spark {
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-dx)), calc(-50% + var(--spark-dy))) scale(0.14);
  }
}

.ai-concept-logo-burst-layer {
  position: absolute;
  inset: 0;
  z-index: 86;
  pointer-events: none;
  overflow: hidden;
}

.ai-concept-logo-burst-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--burst-x) var(--burst-y), rgba(255, 232, 147, 0.26), rgba(255, 232, 147, 0) 22%),
    radial-gradient(circle at var(--burst-x) var(--burst-y), rgba(53, 143, 255, 0.2), rgba(53, 143, 255, 0) 36%),
    rgba(0, 0, 0, 0.28);
  opacity: 0;
  animation: ai-concept-logo-burst-scrim 3200ms ease-out forwards;
}

.ai-concept-logo-burst-core,
.ai-concept-logo-burst-fragment,
.ai-concept-logo-burst-ring {
  position: absolute;
  left: var(--burst-x);
  top: var(--burst-y);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ai-concept-logo-burst-core {
  width: 30cqw;
  aspect-ratio: 4.25 / 1;
  background: center / contain no-repeat url("/assets/login-title.webp");
  filter:
    drop-shadow(0 0 2cqw rgba(255, 226, 122, 0.86))
    drop-shadow(0 0 4.2cqw rgba(59, 144, 255, 0.52));
  opacity: 0;
  animation: ai-concept-logo-burst-core 3200ms cubic-bezier(0.16, 0.86, 0.19, 1) forwards;
}

.ai-concept-logo-burst-ring {
  width: 7.2cqw;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 0.18cqw solid rgba(255, 226, 122, 0.78);
  box-shadow:
    0 0 1.4cqw rgba(255, 226, 122, 0.48),
    inset 0 0 1.4cqw rgba(59, 144, 255, 0.24);
  opacity: 0;
  animation: ai-concept-logo-burst-ring 2050ms ease-out forwards;
  animation-delay: var(--ring-delay, 0ms);
}

.ai-concept-logo-burst-fragment {
  width: var(--fragment-w, 4.6cqw);
  aspect-ratio: 4.25 / 1;
  background: center / contain no-repeat url("/assets/login-title.webp");
  filter:
    drop-shadow(0 0 0.5cqw rgba(255, 226, 122, 0.64))
    brightness(1.18);
  opacity: 0;
  animation: ai-concept-logo-burst-fragment 1900ms cubic-bezier(0.17, 0.72, 0.23, 1) forwards;
  animation-delay: var(--fragment-delay, 0ms);
}

.ai-concept-logo-burst-spark {
  position: absolute;
  left: var(--burst-x);
  top: var(--burst-y);
  width: 0.32cqw;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--spark-color);
  box-shadow: 0 0 0.9cqw var(--spark-color);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: ai-concept-logo-burst-spark 1680ms ease-out forwards;
  animation-delay: var(--spark-delay, 0ms);
}

@keyframes ai-concept-logo-burst-scrim {
  0% {
    opacity: 0;
  }
  12%,
  74% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ai-concept-logo-burst-core {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.34) rotate(-4deg);
    filter:
      blur(0.18cqw)
      brightness(1.8)
      drop-shadow(0 0 2.4cqw rgba(255, 226, 122, 0.9));
  }
  13% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
  }
  46% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  64% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
    filter:
      blur(0)
      brightness(1.22)
      drop-shadow(0 0 2.9cqw rgba(255, 226, 122, 0.76))
      drop-shadow(0 0 4.6cqw rgba(59, 144, 255, 0.5));
  }
  84% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.55);
    filter:
      blur(0.44cqw)
      brightness(1.45)
      drop-shadow(0 0 4cqw rgba(255, 226, 122, 0.34));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.7);
  }
}

@keyframes ai-concept-logo-burst-ring {
  0% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.15);
  }
  44% {
    opacity: 0.76;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(8.8);
  }
}

@keyframes ai-concept-logo-burst-fragment {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22) rotate(0deg);
  }
  18%,
  48% {
    opacity: 0.96;
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--fragment-dx)), calc(-50% + var(--fragment-dy)))
      scale(var(--fragment-scale, 1.05))
      rotate(var(--fragment-rotate, 0deg));
  }
}

@keyframes ai-concept-logo-burst-spark {
  12%,
  52% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-dx)), calc(-50% + var(--spark-dy))) scale(0.12);
  }
}

.ai-concept-intro-layer,
.ai-concept-announcement-layer {
  position: absolute;
  inset: 0;
  z-index: 84;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.ai-concept-intro-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.44);
  backdrop-filter: brightness(0.72);
}

.ai-concept-intro-layer[hidden],
.ai-concept-announcement-layer[hidden] {
  display: none;
}

.ai-concept-announcement-layer.is-exiting .ai-concept-announcement-pill {
  animation: ai-concept-pill-exit 180ms ease-in forwards;
}

.ai-concept-intro-logo {
  position: relative;
  z-index: 1;
  width: 60cqw;
  aspect-ratio: 4.25;
  background: center / contain no-repeat url("/assets/login-title.webp");
  filter: drop-shadow(0 0 2cqw rgba(255,226,122,0.66)) drop-shadow(0 0 3.4cqw rgba(65,147,255,0.38));
  opacity: 0;
}

.ai-concept-intro-logo::before,
.ai-concept-intro-logo::after {
  content: "";
  position: absolute;
  inset: -2.2cqw -1.4cqw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 12% 42%, rgba(255,255,255,0.92) 0 0.16cqw, transparent 0.2cqw),
    radial-gradient(circle at 26% 12%, rgba(255,226,122,0.9) 0 0.13cqw, transparent 0.18cqw),
    radial-gradient(circle at 69% 20%, rgba(112,190,255,0.9) 0 0.18cqw, transparent 0.22cqw),
    radial-gradient(circle at 86% 58%, rgba(255,255,255,0.86) 0 0.14cqw, transparent 0.2cqw),
    radial-gradient(circle at 46% 88%, rgba(255,226,122,0.84) 0 0.12cqw, transparent 0.18cqw);
  opacity: 0;
  pointer-events: none;
}

.ai-concept-intro-logo::after {
  inset: -3.1cqw -2.3cqw;
  transform: rotate(17deg);
}

.ai-concept-intro-logo.is-sparkling {
  animation: ai-concept-logo-sparkle 2s ease-in-out forwards;
}

.ai-concept-intro-logo.is-sparkling::before,
.ai-concept-intro-logo.is-sparkling::after {
  animation: ai-concept-logo-spark-field 760ms ease-in-out infinite;
}

.ai-concept-intro-logo.is-flying-home {
  animation: ai-concept-logo-fly-home 1050ms cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
}

@keyframes ai-concept-logo-sparkle {
  0% { opacity: 0; transform: scale(0.92); filter: drop-shadow(0 0 0 rgba(255,226,122,0)); }
  18% { opacity: 1; transform: scale(1.02); }
  70% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2.7cqw rgba(255,226,122,0.74)) drop-shadow(0 0 4cqw rgba(65,147,255,0.42)); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ai-concept-logo-spark-field {
  0%, 100% { opacity: 0.28; transform: scale(0.98) rotate(0deg); }
  50% { opacity: 0.92; transform: scale(1.04) rotate(2deg); }
}

@keyframes ai-concept-logo-fly-home {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  68% { opacity: 0.88; transform: translate(var(--intro-logo-final-x, 0), var(--intro-logo-final-y, -3.38cqw)) scale(0.58) rotate(2deg); }
  100% { opacity: 0.17; transform: translate(var(--intro-logo-final-x, 0), var(--intro-logo-final-y, -3.38cqw)) scale(var(--intro-logo-final-scale, 0.5)) rotate(0deg); }
}

.ai-concept-shell[data-intro-stage="logo"] .ai-concept-seat-hand,
.ai-concept-shell[data-intro-stage="logo"] .ai-concept-hand {
  opacity: 0;
}

.ai-concept-shell[data-intro-pending="true"] .ai-concept-active-avatar,
.ai-concept-shell[data-intro-pending="true"] .ai-concept-hand-card-playable {
  animation: none;
}

.ai-concept-announcement-pill {
  min-width: 20cqw;
  max-width: 42cqw;
  min-height: 3.15cqw;
  display: grid;
  place-items: center;
  padding: 0 2cqw;
  border-radius: 999px;
  border: 0.14cqw solid rgba(255, 226, 122, 0.66);
  background: linear-gradient(180deg, rgba(9, 14, 30, 0.9), rgba(4, 8, 18, 0.82));
  color: #fff;
  box-shadow:
    inset 0 0.08cqw 0 rgba(255,255,255,0.14),
    0 0 1.6cqw rgba(255, 226, 122, 0.32),
    0 1cqw 2.2cqw rgba(0,0,0,0.38);
  font: 900 1.24cqw/1 "Orbitron", sans-serif;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.9cqw) scale(0.92);
  animation: ai-concept-pill-land 360ms cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
}

.ai-concept-announcement-pill-chaos {
  border-color: rgba(244, 72, 60, 0.78);
  box-shadow:
    inset 0 0.08cqw 0 rgba(255,255,255,0.14),
    0 0 2cqw rgba(244, 72, 60, 0.42),
    0 1cqw 2.2cqw rgba(0,0,0,0.38);
  animation: ai-concept-pill-fly-land 520ms cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
}

@keyframes ai-concept-pill-land {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ai-concept-pill-fly-land {
  0% { opacity: 0; transform: translate(-18cqw, -5cqw) rotate(-7deg) scale(0.78); }
  72% { opacity: 1; transform: translate(0.5cqw, 0.15cqw) rotate(1.5deg) scale(1.04); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes ai-concept-pill-exit {
  to { opacity: 0; transform: translateY(-0.55cqw) scale(0.94); }
}

.ai-concept-toast {
  display: none;
  position: fixed;
  left: 102px;
  top: 28px;
  z-index: 61;
  max-width: min(680px, calc(100vw - 140px));
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 16px 30px rgba(0,0,0,0.28);
}

.ai-concept-toast-success {
  background: rgba(13, 52, 34, 0.94);
  color: #d2ffe5;
}

.ai-concept-toast-error {
  background: rgba(73, 17, 17, 0.96);
  color: #ffd9d9;
}

.ai-concept-outcome-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vmin, 24px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 200, 74, 0.16), transparent 34%),
    rgba(1, 4, 12, 0.58);
  backdrop-filter: blur(5px);
}

.ai-concept-outcome-backdrop[hidden] {
  display: none;
}

.ai-concept-outcome-card {
  width: min(560px, calc(100vw - 32px));
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  overflow: auto;
  overflow-x: hidden;
  display: grid;
  gap: clamp(8px, 1.7vmin, 14px);
  padding: clamp(14px, 2.7vmin, 28px);
  border-radius: clamp(14px, 2.4vmin, 24px);
  border: 1px solid rgba(255, 212, 101, 0.42);
  background:
    linear-gradient(145deg, rgba(18, 13, 4, 0.96), rgba(6, 9, 20, 0.97)),
    radial-gradient(circle at 20% 10%, rgba(255, 189, 56, 0.22), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 30px 80px rgba(0,0,0,0.54),
    0 0 42px rgba(255, 192, 58, 0.12);
  color: #fff8df;
  text-align: center;
}

.ai-concept-outcome-kicker {
  justify-self: center;
  padding: clamp(5px, 0.9vmin, 7px) clamp(9px, 1.4vmin, 12px);
  border-radius: 999px;
  border: 1px solid rgba(255, 212, 101, 0.28);
  background: rgba(255, 180, 36, 0.12);
  color: rgba(255, 230, 151, 0.9);
  font: 900 clamp(0.54rem, 1.55vmin, 0.72rem)/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-outcome-card h2 {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #fff;
  font: 900 clamp(1.25rem, 4.2vmin, 2.85rem)/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 198, 70, 0.24);
}

.ai-concept-outcome-card p {
  margin: 0;
  color: rgba(255, 248, 223, 0.78);
  font: 800 clamp(0.72rem, 2.05vmin, 0.98rem)/1.28 "Space Grotesk", sans-serif;
}

.ai-concept-outcome-scoreboard {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.ai-concept-outcome-score {
  display: grid;
  grid-template-columns: clamp(26px, 4.8vmin, 38px) 1fr auto;
  align-items: center;
  gap: clamp(6px, 1.4vmin, 10px);
  min-height: clamp(32px, 6.2vmin, 46px);
  padding: clamp(5px, 1.2vmin, 8px) clamp(8px, 1.5vmin, 12px);
  border-radius: clamp(10px, 1.7vmin, 14px);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  text-align: left;
}

.ai-concept-outcome-score span {
  display: grid;
  place-items: center;
  width: clamp(22px, 4.2vmin, 30px);
  height: clamp(22px, 4.2vmin, 30px);
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  color: rgba(255, 232, 156, 0.92);
  font: 900 clamp(0.62rem, 1.85vmin, 0.86rem)/1 "Orbitron", sans-serif;
}

.ai-concept-outcome-score strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font: 900 clamp(0.74rem, 2.1vmin, 1rem)/1 "Space Grotesk", sans-serif;
}

.ai-concept-outcome-score em {
  color: rgba(255, 248, 223, 0.82);
  font: 900 clamp(0.64rem, 1.9vmin, 0.92rem)/1 "Orbitron", sans-serif;
  font-style: normal;
}

.ai-concept-outcome-score-winner {
  border-color: rgba(255, 212, 101, 0.52);
  background:
    linear-gradient(90deg, rgba(170, 106, 7, 0.34), rgba(255,255,255,0.08));
}

.ai-concept-outcome-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(6px, 1.4vmin, 10px);
  margin-top: 2px;
}

.ai-concept-outcome-actions form {
  margin: 0;
}

.ai-concept-outcome-actions button,
.ai-concept-outcome-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(34px, 5.4vmin, 44px);
  padding: 0 clamp(12px, 2.2vmin, 18px);
  border-radius: clamp(9px, 1.5vmin, 12px);
  border: 1px solid rgba(255, 212, 101, 0.38);
  background: linear-gradient(180deg, rgba(204, 137, 22, 0.96), rgba(128, 72, 8, 0.98));
  color: #fff;
  font: 900 clamp(0.62rem, 1.8vmin, 0.86rem)/1 "Orbitron", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-concept-table {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  touch-action: none;
  background:
    radial-gradient(circle at 8% 78%, rgba(14, 108, 255, 0.42), transparent 19%),
    radial-gradient(circle at 91% 59%, rgba(48, 238, 75, 0.32), transparent 20%),
    radial-gradient(circle at 50% 16%, rgba(235, 29, 29, 0.36), transparent 22%),
    radial-gradient(circle at 50% 50%, #16213b 0%, #071126 52%, #030713 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03);
}

.ai-concept-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ai-gameplay-stage-width);
  height: var(--ai-gameplay-stage-height);
  max-width: 1600px;
  overflow: visible;
  container-type: inline-size;
  transform: translate(-50%, -50%);
}

.ai-concept-table-image {
  background:
    linear-gradient(rgba(2, 6, 15, 0.1), rgba(2, 6, 15, 0.16)),
    var(--ai-concept-table-background) center / cover no-repeat,
    #050816;
}

.ai-concept-table-none,
.ai-concept-shell[data-layout-profile="wide"] .ai-concept-table-none,
.ai-concept-shell[data-layout-profile="ultrawide"] .ai-concept-table-none {
  background: #000;
}

.ai-concept-table-none .ai-concept-spaceglow {
  opacity: 0;
}

.ai-concept-shell[data-layout-profile="wide"] .ai-concept-table-image,
.ai-concept-shell[data-layout-profile="ultrawide"] .ai-concept-table-image {
  background:
    linear-gradient(rgba(2, 6, 15, 0.1), rgba(2, 6, 15, 0.16)),
    var(--ai-concept-table-background-wide, var(--ai-concept-table-background)) center / cover no-repeat,
    #050816;
}

.ai-concept-spaceglow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 6% 6%, rgba(80, 133, 255, 0.18), transparent 10%),
    radial-gradient(circle at 84% 7%, rgba(161, 70, 255, 0.14), transparent 8%),
    radial-gradient(circle at 91% 32%, rgba(57, 194, 255, 0.14), transparent 9%),
    linear-gradient(90deg, rgba(10, 83, 199, 0.12), transparent 31%, transparent 69%, rgba(20, 160, 54, 0.1));
}

.ai-concept-stage::before,
.ai-concept-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ai-concept-stage::before {
  left: 18%;
  top: 10.5%;
  width: 64%;
  height: 26%;
  border-radius: 40% 40% 18% 18% / 34% 34% 15% 15%;
  background:
    linear-gradient(180deg, rgba(242, 47, 36, 0.5), rgba(95, 7, 12, 0.72)),
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.14), transparent 62%);
  border: 0.34cqw solid rgba(255, 70, 62, 0.5);
  box-shadow: inset 0 -1.5cqw 3.6cqw rgba(0,0,0,0.38), 0 1.6cqw 2.8cqw rgba(0,0,0,0.22);
  transform: perspective(70cqw) rotateX(20deg);
  transform-origin: center bottom;
}

.ai-concept-stage::after {
  left: 8.5%;
  right: 8.5%;
  bottom: -7%;
  height: 37%;
  border-radius: 22% 22% 0 0 / 56% 56% 0 0;
  background:
    linear-gradient(180deg, rgba(250, 180, 29, 0.22), rgba(95, 58, 4, 0.66)),
    radial-gradient(ellipse at 50% 12%, rgba(255, 226, 102, 0.28), transparent 63%);
  border: 0.34cqw solid rgba(255, 197, 50, 0.6);
  box-shadow: inset 0 1.4cqw 2.8cqw rgba(255, 226, 122, 0.08), 0 -1.2cqw 2.4cqw rgba(0,0,0,0.2);
}

.ai-concept-table-image .ai-concept-stage::before,
.ai-concept-table-image .ai-concept-stage::after {
  content: none;
}

.ai-concept-table-image .ai-concept-spaceglow {
  opacity: 0.22;
  mix-blend-mode: screen;
}

.ai-concept-center {
  position: absolute;
  left: 50%;
  top: 30.5%;
  transform: translateX(-50%) perspective(90cqw) rotateX(9deg);
  width: 60%;
  height: 48%;
  border-radius: 50% 50% 44% 44% / 40% 40% 50% 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(38, 49, 82, 0.98) 0%, rgba(22, 32, 61, 0.99) 55%, rgba(8, 13, 28, 1) 100%);
  box-shadow:
    inset 0 -2.2cqw 4.2cqw rgba(0,0,0,0.2),
    0 2.2cqw 3.8cqw rgba(0,0,0,0.18);
  z-index: 1;
}

.ai-concept-table-image .ai-concept-center {
  background: transparent;
  box-shadow: none;
}

.ai-concept-center::before {
  content: none;
}

.ai-concept-arena-ring {
  display: none;
}

.ai-concept-arena-arrows {
  position: absolute;
  inset: 20% 18% 24%;
  pointer-events: none;
}

.ai-concept-arena-arrow {
  position: absolute;
  color: rgba(180, 193, 229, 0.12);
  font-size: 5.1cqw;
  font-family: "Orbitron", sans-serif;
}

.ai-concept-arena-arrow-left {
  left: 2%;
  top: 28%;
  transform: rotate(-16deg);
}

.ai-concept-arena-arrow-right {
  right: 4%;
  top: 18%;
  transform: rotate(14deg);
}

.ai-concept-piles {
  position: absolute;
  right: 2.2%;
  bottom: 10.2%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(2.45cqw, auto) minmax(11.65cqw, 1fr) minmax(3.35cqw, auto);
  grid-template-areas:
    "status"
    "cards"
    "direction";
  align-items: center;
  row-gap: 0;
  width: 17.15cqw;
  height: 20.8cqw;
  padding: 0.52cqw 0.72cqw 0.44cqw;
  border-radius: 1.55cqw;
  border: 0.16cqw solid rgba(255,255,255,0.2);
  background:
    linear-gradient(145deg, rgba(8, 15, 32, 0.94), rgba(16, 24, 46, 0.9) 48%, rgba(6, 10, 22, 0.96)),
    radial-gradient(circle at 20% 18%, rgba(101, 188, 255, 0.22), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(255, 197, 62, 0.18), transparent 48%);
  box-shadow:
    inset 0 0 0 0.08cqw rgba(255,255,255,0.05),
    inset 0 0.55cqw 1.2cqw rgba(255,255,255,0.06),
    inset 0 -1.2cqw 2.6cqw rgba(0,0,0,0.32),
    0 1.2cqw 2.6cqw rgba(0,0,0,0.36);
  z-index: 4;
  isolation: isolate;
  perspective: 74cqw;
  transform-style: preserve-3d;
}

.ai-concept-card-piles {
  grid-area: cards;
  position: static;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, 7.7cqw);
  grid-template-areas: "draw discard";
  align-items: center;
  justify-self: center;
  column-gap: 0.3cqw;
  transform: none;
  isolation: isolate;
  perspective: 74cqw;
  transform-style: preserve-3d;
}

/* Retained alternate layout: add this class to the gameplay shell to restore
   the centered discard/deck experiment without rebuilding its placement. */
.ai-concept-shell.ai-concept-card-piles-centered .ai-concept-piles {
  height: auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "status"
    "direction";
}

.ai-concept-shell.ai-concept-card-piles-centered .ai-concept-card-piles {
  position: fixed;
  left: 50%;
  top: 51.5%;
  right: auto;
  bottom: auto;
  column-gap: 4.6cqw;
  transform: translate(-50%, -50%);
}

.ai-concept-piles::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ai-concept-piles::after {
  left: 0.72cqw;
  right: 0.72cqw;
  bottom: 0.2cqw;
  z-index: -1;
  height: 0.34cqw;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(61, 144, 255, 0.08), rgba(255, 218, 104, 0.72), rgba(61, 144, 255, 0.12));
  filter: blur(0.02cqw);
}

.ai-concept-pile-status-row {
  grid-area: status;
  position: static;
  transform: none;
  align-self: start;
  margin-top: -0.18cqw;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  width: auto;
  min-height: clamp(30px, 2.35cqw, 40px);
  padding: 0.1cqw 0.32cqw;
  border-radius: 0;
  border: 0;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.ai-concept-spectator-pill,
.ai-concept-elapsed-pill {
  min-width: 0;
  min-height: 100%;
  padding: 0.34cqw 0.62cqw;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(247,251,255,0.94);
  font: 900 0.62cqw/1 "Orbitron", sans-serif;
  text-align: center;
  box-shadow: none;
  pointer-events: none;
}

.ai-concept-spectator-pill {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3cqw;
  color: rgba(232, 250, 255, 0.98);
}

.ai-concept-elapsed-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-left: 0.08cqw solid rgba(151, 239, 255, 0.24);
  font-variant-numeric: tabular-nums;
}

.ai-concept-spectator-pill svg {
  width: 0.92cqw;
  height: 0.92cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.ai-concept-spectator-pill span {
  min-width: 1ch;
  font-size: 0.68cqw;
}

.ai-concept-draw-stack,
.ai-concept-discard-card {
  position: relative;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.ai-concept-draw-stack {
  grid-area: draw;
}

.ai-concept-discard-card {
  grid-area: discard;
}

.ai-concept-draw-form {
  display: contents;
}

button.ai-concept-draw-stack {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ai-concept-draw-stack-action .ai-concept-deck-card::after {
  content: "";
  position: absolute;
  inset: -0.45cqw;
  border-radius: 1.25cqw;
  border: 0.12cqw solid rgba(255, 226, 122, 0.58);
  box-shadow: 0 0 1.2cqw rgba(255, 226, 122, 0.3);
  opacity: 0.86;
  pointer-events: none;
}

.ai-concept-draw-stack-action:hover .ai-concept-deck-card,
.ai-concept-draw-stack-action:focus-visible .ai-concept-deck-card {
  filter: brightness(1.12) drop-shadow(0 0 0.85cqw rgba(255, 226, 122, 0.3));
}

.ai-concept-draw-stack {
  transform: perspective(58cqw) rotateX(11deg) rotateY(-4.8deg) rotateZ(-1deg) skewX(-1.2deg) scaleY(0.95);
}

.ai-concept-discard-card {
  transform: perspective(58cqw) rotateX(10deg) rotateY(4deg) rotateZ(0.9deg) skewX(0.7deg) scaleY(0.955);
}

.ai-concept-stack-shadow {
  position: absolute;
  inset: 0.82cqw -0.14cqw -0.82cqw 0.14cqw;
  border-radius: 1.25cqw;
  background: rgba(255,255,255,0.16);
  box-shadow: 0 8px 10px rgba(0,0,0,0.18);
}

.ai-concept-stack-shadow-mid {
  inset: 0.5cqw -0.07cqw -0.5cqw 0.07cqw;
  opacity: 0.82;
}

.ai-concept-deck-card,
.ai-concept-discard-card {
  position: relative;
  width: 7.7cqw;
  height: 11.05cqw;
  border-radius: 1.05cqw;
  box-shadow: 0 1.25cqw 1.5cqw rgba(0,0,0,0.28);
}

.ai-concept-deck-card {
  display: grid;
  place-items: center;
  border: 0.34cqw solid transparent;
  background:
    radial-gradient(circle at 50% 44%, rgba(170, 20, 20, 0.42), transparent 24%),
    linear-gradient(180deg, rgba(12, 16, 30, 0.98), rgba(6, 10, 18, 1));
  overflow: hidden;
  clip-path: polygon(4% 0, 100% 2%, 95% 100%, 0 96.5%);
  box-shadow:
    0 1.25cqw 1.5cqw rgba(0,0,0,0.28);
}

.ai-concept-deck-card::before,
.ai-concept-discard-card::before {
  content: "";
  position: absolute;
  inset: 0.5cqw;
  border-radius: 0.82cqw;
  border: 1px solid transparent;
}

.ai-concept-discard-card::before {
  border-color: rgba(255,255,255,0.12);
}

.ai-concept-shell[data-card-back-border="true"] .ai-concept-deck-card {
  border-color: rgba(255,255,255,0.98);
  box-shadow:
    0 0 0 0.08cqw rgba(255,255,255,0.72),
    0 1.25cqw 1.5cqw rgba(0,0,0,0.28);
}

.ai-concept-shell[data-card-back-border="true"] .ai-concept-deck-card::before {
  border-color: rgba(255,255,255,0.12);
}

.ai-concept-deck-logo {
  color: #f5f7ff;
  width: 82%;
  font: 900 0.9cqw/1.08 "Space Grotesk", sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-deck-card,
.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-card-back:not(.ai-concept-seat-card-face),
.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-flying-card-back,
.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-flying-bundle-card {
  background: var(--ai-card-back-image) center / cover no-repeat;
  color: transparent;
}

.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-deck-card::before,
.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-card-back:not(.ai-concept-seat-card-face)::before,
.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-card-back:not(.ai-concept-seat-card-face)::after {
  content: none;
}

.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-deck-logo {
  display: none;
}

.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-flying-card-back,
.ai-concept-shell[data-card-back-render-mode="asset"] .ai-concept-flying-bundle-card {
  font-size: 0;
}

.ai-concept-discard-card {
  display: block;
  --concept-discard-corner-font: 1.05cqw;
  --concept-discard-center-font: 2.65cqw;
  --concept-discard-corner-max: 48%;
  border: 0.26cqw solid rgba(7, 9, 16, 0.98);
  background: linear-gradient(180deg, #fff 0%, #f6f7fb 100%);
  color: #111827;
  overflow: hidden;
  clip-path: polygon(2% 0.5%, 100% 0, 96% 99.5%, 0 100%);
  box-shadow:
    0 0 0 0.08cqw rgba(255,255,255,0.82),
    0 1.25cqw 1.5cqw rgba(0,0,0,0.28);
}

.ai-concept-discard-card[data-discard-mark-size="pair"] {
  --concept-discard-center-font: 2.48cqw;
}

.ai-concept-discard-card[data-discard-mark-size="wide"] {
  --concept-discard-corner-font: 0.9cqw;
  --concept-discard-center-font: 1.96cqw;
  --concept-discard-corner-max: 54%;
}

.ai-concept-discard-card[data-discard-mark-size="long"] {
  --concept-discard-corner-font: 0.76cqw;
  --concept-discard-center-font: 1.62cqw;
  --concept-discard-corner-max: 60%;
}

.ai-concept-discard-card-colorless {
  background: linear-gradient(180deg, #f4f6fb 0%, #edf1f8 100%);
}

.ai-concept-discard-card-red {
  background: linear-gradient(135deg, #ef493f 0 24%, #ffffff 24% 100%);
}

.ai-concept-discard-card-blue {
  background: linear-gradient(135deg, #3d8eff 0 24%, #ffffff 24% 100%);
}

.ai-concept-discard-card-gold {
  background: linear-gradient(135deg, #f2c437 0 24%, #ffffff 24% 100%);
}

.ai-concept-discard-card-silver {
  background: linear-gradient(135deg, #aeb7c7 0 24%, #ffffff 24% 100%);
}

.ai-concept-discard-card-generation {
  border-color: rgba(15, 23, 42, 0.98);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  color: #101827;
}

.ai-concept-discard-card-generation .ai-concept-discard-corners,
.ai-concept-discard-card-generation .ai-concept-discard-center {
  color: #101827;
  text-shadow: none;
}

.ai-concept-discard-corners {
  position: absolute;
  inset: 0;
  font: 800 var(--concept-discard-corner-font)/1 "Rajdhani", sans-serif;
  overflow: hidden;
  pointer-events: none;
}

.ai-concept-discard-corners span {
  position: absolute;
  top: 0.88cqw;
  left: 0.88cqw;
  max-width: var(--concept-discard-corner-max);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ai-concept-discard-corners span:last-child {
  top: auto;
  left: auto;
  right: 0.88cqw;
  bottom: 0.88cqw;
  transform: rotate(180deg);
}

.ai-concept-discard-center {
  position: absolute;
  inset: 50% 0.72cqw auto;
  transform: translateY(-50%);
  text-align: center;
  font: 900 var(--concept-discard-center-font)/0.9 "Rajdhani", sans-serif;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ai-concept-center-logo {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 30cqw;
  height: 10.4cqw;
  background: url("/assets/login-title.webp") center / contain no-repeat;
  opacity: 0.17;
  filter: grayscale(0.2);
}

.ai-concept-shell.is-end-logo-burst-active .ai-concept-center-logo,
.ai-concept-shell.is-end-logo-burst-complete .ai-concept-center-logo {
  opacity: 0;
  visibility: hidden;
}

.ai-concept-shell[data-intro-stage="logo"] .ai-concept-center-logo {
  opacity: 0;
  visibility: hidden;
}

.ai-concept-center-logo span,
.ai-concept-center-logo strong,
.ai-concept-center-logo em {
  display: none;
}

.ai-concept-seat {
  position: absolute;
  z-index: 3;
}

.ai-concept-seat-avatar {
  --active-avatar-base-shadow: 0 16px 28px rgba(0,0,0,0.28);
  --active-avatar-glow: rgba(255, 226, 122, 0.72);
  display: grid;
  place-items: center;
  width: 7.2cqw;
  height: 7.2cqw;
  border-radius: 999px;
  border: 0.34cqw solid rgba(255,255,255,0.94);
  overflow: hidden;
  box-shadow: var(--active-avatar-base-shadow);
}

.ai-concept-seat-avatar img,
.ai-concept-local-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-concept-avatar-ai-controlled {
  border-color: rgba(178,190,208,0.72);
  box-shadow: 0 10px 22px rgba(0,0,0,0.34);
}

.ai-concept-avatar-ai-controlled img {
  filter: grayscale(1) saturate(0.35) brightness(0.82);
}

.ai-concept-seat-ai-controlled .ai-concept-seat-nameplate {
  filter: grayscale(0.5) brightness(0.82);
}

.ai-concept-seat-nameplate,
.ai-concept-local-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05cqw;
  padding: 0.58cqw 1cqw;
  border-radius: 1cqw;
  border: 0.14cqw solid rgba(255,255,255,0.14);
  color: #fff;
  font: 800 1.3cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 1cqw 1.75cqw rgba(0,0,0,0.24);
  white-space: nowrap;
  max-width: 20cqw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-concept-seat-generation,
.ai-concept-local-generation {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: max-content;
  max-width: 15cqw;
  min-height: 2.25cqw;
  padding: 0.42cqw 0.92cqw;
  margin-inline: auto;
  border-radius: 0.65cqw;
  background: rgba(0, 0, 0, 0.74);
  color: #f7fbff;
  font: 900 1.08cqw/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0.55cqw 1.1cqw rgba(0,0,0,0.26);
}

.ai-concept-seat-hand {
  position: relative;
  min-height: 8.6cqw;
}

.ai-concept-card-back {
  position: relative;
  display: inline-block;
  width: var(--seat-card-width, 5.65cqw);
  height: var(--seat-card-height, 8.05cqw);
  border-radius: 0.82cqw;
  border: 0.34cqw solid transparent;
  background:
    radial-gradient(circle at 50% 46%, rgba(226, 33, 33, 0.54), transparent 21%),
    radial-gradient(ellipse at 50% 51%, rgba(104, 13, 20, 0.46), transparent 45%),
    linear-gradient(180deg, rgba(14, 17, 31, 0.98), rgba(7, 10, 20, 1));
  box-shadow:
    0 1cqw 1.5cqw rgba(0,0,0,0.24);
  transform-origin: center bottom;
  transform: var(--seat-card-transform, none);
  transform-style: flat;
  backface-visibility: hidden;
  clip-path: var(--seat-card-clip, none);
  z-index: var(--seat-card-z, 1);
  overflow: hidden;
}

.ai-concept-card-back::before {
  content: "";
  position: absolute;
  inset: 0.38cqw;
  border-radius: 0.62cqw;
  border: 1px solid transparent;
}

.ai-concept-shell[data-card-back-border="true"] .ai-concept-card-back:not(.ai-concept-seat-card-face) {
  border-color: rgba(255,255,255,0.98);
  box-shadow:
    0 0 0 0.07cqw rgba(255,255,255,0.7),
    0 1cqw 1.5cqw rgba(0,0,0,0.24);
}

.ai-concept-shell[data-card-back-border="true"] .ai-concept-card-back:not(.ai-concept-seat-card-face)::before {
  border-color: rgba(255,255,255,0.12);
}

.ai-concept-card-back::after {
  content: "Dealt:\A CHAOS\A GENS";
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  width: 76%;
  color: rgba(245, 247, 255, 0.92);
  font: 900 0.74cqw/0.98 "Space Grotesk", sans-serif;
  text-align: center;
  text-transform: uppercase;
  white-space: pre;
  text-shadow: 0 0 0.75cqw rgba(225, 24, 29, 0.68);
}

.ai-concept-hand .ai-concept-hand-card.ai-concept-card-back {
  width: var(--local-card-width, 7.6cqw);
  height: var(--local-card-height, 11.52cqw);
  border-radius: 1.05cqw;
  transform-origin: center bottom;
  transform: translateY(calc(var(--local-card-rest-y, 0cqw) + var(--playable-lift-y, 0cqw))) var(--local-card-transform, perspective(76cqw) rotateX(0.8deg));
  clip-path: var(--local-card-clip, none);
}

.ai-concept-hand .ai-concept-hand-card.ai-concept-card-back::after {
  font-size: 0.86cqw;
}

.ai-concept-seat-card-face {
  border-color: rgba(7, 9, 16, 0.98);
  background: linear-gradient(180deg, #fff 0%, #f4f6fb 100%);
  color: #111827;
}

.ai-concept-seat-card-face.ai-concept-hand-card-red {
  background: linear-gradient(135deg, #ee4a3c 0 30%, #ffffff 30% 100%);
}

.ai-concept-seat-card-face.ai-concept-hand-card-blue {
  background: linear-gradient(135deg, #3b90ff 0 30%, #ffffff 30% 100%);
}

.ai-concept-seat-card-face.ai-concept-hand-card-gold {
  background: linear-gradient(135deg, #efc33c 0 30%, #ffffff 30% 100%);
}

.ai-concept-seat-card-face.ai-concept-hand-card-silver {
  background: linear-gradient(135deg, #aeb7c7 0 30%, #ffffff 30% 100%);
}

.ai-concept-seat-card-face.ai-concept-hand-card-rarity,
.ai-concept-seat-card-face.ai-concept-hand-card-colorless {
  background: linear-gradient(180deg, rgba(13, 16, 29, 0.98), rgba(7, 10, 20, 1));
  color: #fff;
}

.ai-concept-seat-card-face.ai-concept-hand-card-generation {
  border-color: rgba(15, 23, 42, 0.96);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  color: #101827;
  text-shadow: none;
}

.ai-concept-seat-card-face::after {
  content: none;
}

.ai-concept-seat-card-face span {
  position: absolute;
  inset: 50% 0.35cqw auto;
  transform: translateY(-50%);
  color: inherit;
  font: 900 1.35cqw/0.9 "Rajdhani", sans-serif;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ai-concept-seat-card-face .ai-concept-seat-card-face-corner {
  inset: auto;
  left: 0.38cqw;
  top: 0.4cqw;
  max-width: 52%;
  font-size: 0.62cqw;
  line-height: 0.92;
  text-align: left;
  text-overflow: clip;
}

.ai-concept-seat-card-face .ai-concept-seat-card-face-corner-bottom {
  left: auto;
  top: auto;
  right: 0.38cqw;
  bottom: 0.4cqw;
  transform: rotate(180deg);
}

.ai-concept-seat-card-face .ai-concept-seat-card-face-center {
  inset: 50% 0.35cqw auto;
  transform: translateY(-50%);
  font-size: 1.35cqw;
  line-height: 0.9;
  text-align: center;
}

.ai-concept-seat-card-face.ai-concept-card-mark-wide .ai-concept-seat-card-face-center {
  font-size: 1.12cqw;
}

.ai-concept-seat-card-face.ai-concept-card-mark-long .ai-concept-seat-card-face-center {
  font-size: 0.94cqw;
}

.ai-concept-seat-top {
  left: 50%;
  top: 1.6%;
  transform: translateX(-50%);
  text-align: center;
}

.ai-concept-seat-top .ai-concept-seat-avatar {
  --active-avatar-glow: rgba(255, 80, 64, 0.76);
  margin: 0 auto -0.62cqw;
  background: radial-gradient(circle at 35% 28%, #ffbfaf, #ef432a 54%, #70160f 100%);
  border-color: #f03527;
}

.ai-concept-seat-hand-top {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-top: -1.06cqw;
  perspective: 86cqw;
  transform-style: flat;
  isolation: isolate;
}

.ai-concept-seat-hand-top .ai-concept-card-back {
  --seat-card-width: 5.66cqw;
  --seat-card-height: 8.72cqw;
  margin-left: -2.36cqw;
}

.ai-concept-seat-hand-top .ai-concept-card-back:first-child {
  margin-left: 0;
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-0 {
  --seat-card-width: 5.9cqw;
  --seat-card-height: 8.92cqw;
  transform-origin: right bottom;
  --seat-card-transform: translate(2.1cqw, 0.08cqw) perspective(68cqw) rotateX(-3deg) rotateY(15deg) rotateZ(8.5deg) skewY(-1.8deg) scaleY(0.965);
  --seat-card-clip: polygon(5% 0, 100% 4%, 96% 100%, 0 96%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-1 {
  --seat-card-width: 5.78cqw;
  --seat-card-height: 8.82cqw;
  transform-origin: 68% 100%;
  --seat-card-transform: translate(1.3cqw, 0.34cqw) perspective(68cqw) rotateX(-2.6deg) rotateY(9deg) rotateZ(5.4deg) skewY(-1deg) scaleY(0.975);
  --seat-card-clip: polygon(3.5% 0, 100% 2.6%, 97% 100%, 0 97.5%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-2 {
  --seat-card-width: 5.64cqw;
  --seat-card-height: 8.74cqw;
  transform-origin: 56% 100%;
  --seat-card-transform: translate(0.52cqw, 0.57cqw) perspective(68cqw) rotateX(-2.2deg) rotateY(4deg) rotateZ(2.2deg) skewY(-0.35deg) scaleY(0.985);
  --seat-card-clip: polygon(1.8% 0, 99.3% 1.4%, 98% 100%, 0 99%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-3 {
  --seat-card-width: 5.54cqw;
  --seat-card-height: 8.68cqw;
  transform-origin: center bottom;
  --seat-card-transform: translate(0, 0.7cqw) perspective(68cqw) rotateX(-2deg) rotateY(0deg) rotateZ(0deg) scaleY(0.99);
  --seat-card-clip: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-4 {
  --seat-card-width: 5.64cqw;
  --seat-card-height: 8.74cqw;
  transform-origin: 44% 100%;
  --seat-card-transform: translate(-0.52cqw, 0.57cqw) perspective(68cqw) rotateX(-2.2deg) rotateY(-4deg) rotateZ(-2.2deg) skewY(0.35deg) scaleY(0.985);
  --seat-card-clip: polygon(0.7% 1.4%, 98.2% 0, 100% 99%, 2% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-5 {
  --seat-card-width: 5.78cqw;
  --seat-card-height: 8.82cqw;
  transform-origin: 32% 100%;
  --seat-card-transform: translate(-1.3cqw, 0.34cqw) perspective(68cqw) rotateX(-2.6deg) rotateY(-9deg) rotateZ(-5.4deg) skewY(1deg) scaleY(0.975);
  --seat-card-clip: polygon(0 2.6%, 96.5% 0, 100% 97.5%, 3% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-6 {
  --seat-card-width: 5.9cqw;
  --seat-card-height: 8.92cqw;
  transform-origin: left bottom;
  --seat-card-transform: translate(-2.1cqw, 0.08cqw) perspective(68cqw) rotateX(-3deg) rotateY(-15deg) rotateZ(-8.5deg) skewY(1.8deg) scaleY(0.965);
  --seat-card-clip: polygon(0 4%, 95% 0, 100% 96%, 4% 100%);
}

.ai-concept-seat-nameplate-top {
  margin: 0.7cqw auto 0.32cqw;
  max-width: 22cqw;
  background: linear-gradient(180deg, rgba(187, 31, 23, 0.98), rgba(112, 15, 11, 1));
  border-color: rgba(255, 106, 79, 0.78);
  box-shadow: 0 0 0 0.12cqw rgba(51, 8, 5, 0.95), 0 1cqw 1.75cqw rgba(0,0,0,0.24);
}

.ai-concept-seat-generation-top {
  text-align: center;
}

.ai-concept-seat-left,
.ai-concept-seat-right {
  top: 9.8%;
  width: 23.5cqw;
  display: grid;
  justify-items: center;
}

.ai-concept-seat-left {
  left: 8.8%;
  text-align: center;
}

.ai-concept-seat-right {
  right: 8.8%;
  text-align: center;
}

.ai-concept-seat-avatar-left,
.ai-concept-seat-avatar-right {
  --active-avatar-glow: rgba(57, 159, 255, 0.76);
  margin-left: auto;
  margin-right: auto;
  background: radial-gradient(circle at 35% 28%, #badaff, #2f8fff 54%, #103a88 100%);
  border-color: #1d99ff;
}

.ai-concept-seat-avatar-right {
  --active-avatar-glow: rgba(65, 230, 91, 0.76);
  background: radial-gradient(circle at 35% 28%, #c6ffd6, #37cf59 54%, #0d571f 100%);
  border-color: #42da4c;
}

.ai-concept-seat-hand-left,
.ai-concept-seat-hand-right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: -0.68cqw;
  min-height: 9.6cqw;
  perspective: 86cqw;
  transform-style: flat;
  isolation: isolate;
}

.ai-concept-seat-hand-left {
  transform: translateX(0.8cqw);
}

.ai-concept-seat-hand-right {
  transform: translateX(-0.8cqw);
}

.ai-concept-seat-hand-left .ai-concept-card-back,
.ai-concept-seat-hand-right .ai-concept-card-back {
  --seat-card-width: 5.36cqw;
  --seat-card-height: 8.42cqw;
  margin-left: -2.26cqw;
}

.ai-concept-seat-hand-left .ai-concept-card-back:first-child,
.ai-concept-seat-hand-right .ai-concept-card-back:first-child {
  margin-left: 0;
}

.ai-concept-seat-hand-left .ai-concept-card-back-slot-0 {
  --seat-card-width: 5.5cqw;
  --seat-card-height: 8.62cqw;
  transform-origin: right bottom;
  --seat-card-transform: translate(1.65cqw, 0.08cqw) perspective(68cqw) rotateX(-2.8deg) rotateY(14deg) rotateZ(8deg) skewY(-1.5deg) scaleY(0.968);
  --seat-card-clip: polygon(5% 0, 100% 3.6%, 96% 100%, 0 96%);
}

.ai-concept-seat-hand-left .ai-concept-card-back-slot-1 {
  --seat-card-width: 5.42cqw;
  --seat-card-height: 8.54cqw;
  transform-origin: 68% 100%;
  --seat-card-transform: translate(1.02cqw, 0.28cqw) perspective(68cqw) rotateX(-2.4deg) rotateY(8.5deg) rotateZ(5deg) skewY(-0.9deg) scaleY(0.978);
  --seat-card-clip: polygon(3.4% 0, 100% 2.4%, 97% 100%, 0 97.5%);
}

.ai-concept-seat-hand-left .ai-concept-card-back-slot-2 {
  --seat-card-width: 5.34cqw;
  --seat-card-height: 8.48cqw;
  transform-origin: 58% 100%;
  --seat-card-transform: translate(0.42cqw, 0.46cqw) perspective(68cqw) rotateX(-2.1deg) rotateY(3.6deg) rotateZ(2deg) skewY(-0.25deg) scaleY(0.987);
  --seat-card-clip: polygon(1.8% 0, 99.3% 1.3%, 98% 100%, 0 99%);
}

.ai-concept-seat-hand-left .ai-concept-card-back-slot-3 {
  --seat-card-width: 5.28cqw;
  --seat-card-height: 8.44cqw;
  transform-origin: center bottom;
  --seat-card-transform: translate(0, 0.58cqw) perspective(68cqw) rotateX(-1.9deg) rotateY(0deg) rotateZ(0deg) scaleY(0.992);
  --seat-card-clip: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
}

.ai-concept-seat-hand-left .ai-concept-card-back-slot-4 {
  --seat-card-width: 5.34cqw;
  --seat-card-height: 8.48cqw;
  transform-origin: 42% 100%;
  --seat-card-transform: translate(-0.42cqw, 0.46cqw) perspective(68cqw) rotateX(-2.1deg) rotateY(-3.6deg) rotateZ(-2deg) skewY(0.25deg) scaleY(0.987);
  --seat-card-clip: polygon(0.7% 1.3%, 98.2% 0, 100% 99%, 2% 100%);
}

.ai-concept-seat-hand-left .ai-concept-card-back-slot-5 {
  --seat-card-width: 5.42cqw;
  --seat-card-height: 8.54cqw;
  transform-origin: 32% 100%;
  --seat-card-transform: translate(-1.02cqw, 0.28cqw) perspective(68cqw) rotateX(-2.4deg) rotateY(-8.5deg) rotateZ(-5deg) skewY(0.9deg) scaleY(0.978);
  --seat-card-clip: polygon(0 2.4%, 96.6% 0, 100% 97.5%, 3% 100%);
}

.ai-concept-seat-hand-left .ai-concept-card-back-slot-6 {
  --seat-card-width: 5.5cqw;
  --seat-card-height: 8.62cqw;
  transform-origin: left bottom;
  --seat-card-transform: translate(-1.65cqw, 0.08cqw) perspective(68cqw) rotateX(-2.8deg) rotateY(-14deg) rotateZ(-8deg) skewY(1.5deg) scaleY(0.968);
  --seat-card-clip: polygon(0 3.6%, 95% 0, 100% 96%, 4% 100%);
}

.ai-concept-seat-hand-right .ai-concept-card-back-slot-0 {
  --seat-card-width: 5.5cqw;
  --seat-card-height: 8.62cqw;
  transform-origin: right bottom;
  --seat-card-transform: translate(1.65cqw, 0.08cqw) perspective(68cqw) rotateX(-2.8deg) rotateY(14deg) rotateZ(8deg) skewY(-1.5deg) scaleY(0.968);
  --seat-card-clip: polygon(5% 0, 100% 3.6%, 96% 100%, 0 96%);
}

.ai-concept-seat-hand-right .ai-concept-card-back-slot-1 {
  --seat-card-width: 5.42cqw;
  --seat-card-height: 8.54cqw;
  transform-origin: 68% 100%;
  --seat-card-transform: translate(1.02cqw, 0.28cqw) perspective(68cqw) rotateX(-2.4deg) rotateY(8.5deg) rotateZ(5deg) skewY(-0.9deg) scaleY(0.978);
  --seat-card-clip: polygon(3.4% 0, 100% 2.4%, 97% 100%, 0 97.5%);
}

.ai-concept-seat-hand-right .ai-concept-card-back-slot-2 {
  --seat-card-width: 5.34cqw;
  --seat-card-height: 8.48cqw;
  transform-origin: 58% 100%;
  --seat-card-transform: translate(0.42cqw, 0.46cqw) perspective(68cqw) rotateX(-2.1deg) rotateY(3.6deg) rotateZ(2deg) skewY(-0.25deg) scaleY(0.987);
  --seat-card-clip: polygon(1.8% 0, 99.3% 1.3%, 98% 100%, 0 99%);
}

.ai-concept-seat-hand-right .ai-concept-card-back-slot-3 {
  --seat-card-width: 5.28cqw;
  --seat-card-height: 8.44cqw;
  transform-origin: center bottom;
  --seat-card-transform: translate(0, 0.58cqw) perspective(68cqw) rotateX(-1.9deg) rotateY(0deg) rotateZ(0deg) scaleY(0.992);
  --seat-card-clip: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
}

.ai-concept-seat-hand-right .ai-concept-card-back-slot-4 {
  --seat-card-width: 5.34cqw;
  --seat-card-height: 8.48cqw;
  transform-origin: 42% 100%;
  --seat-card-transform: translate(-0.42cqw, 0.46cqw) perspective(68cqw) rotateX(-2.1deg) rotateY(-3.6deg) rotateZ(-2deg) skewY(0.25deg) scaleY(0.987);
  --seat-card-clip: polygon(0.7% 1.3%, 98.2% 0, 100% 99%, 2% 100%);
}

.ai-concept-seat-hand-right .ai-concept-card-back-slot-5 {
  --seat-card-width: 5.42cqw;
  --seat-card-height: 8.54cqw;
  transform-origin: 32% 100%;
  --seat-card-transform: translate(-1.02cqw, 0.28cqw) perspective(68cqw) rotateX(-2.4deg) rotateY(-8.5deg) rotateZ(-5deg) skewY(0.9deg) scaleY(0.978);
  --seat-card-clip: polygon(0 2.4%, 96.6% 0, 100% 97.5%, 3% 100%);
}

.ai-concept-seat-hand-right .ai-concept-card-back-slot-6 {
  --seat-card-width: 5.5cqw;
  --seat-card-height: 8.62cqw;
  transform-origin: left bottom;
  --seat-card-transform: translate(-1.65cqw, 0.08cqw) perspective(68cqw) rotateX(-2.8deg) rotateY(-14deg) rotateZ(-8deg) skewY(1.5deg) scaleY(0.968);
  --seat-card-clip: polygon(0 3.6%, 95% 0, 100% 96%, 4% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back,
.ai-concept-seat-hand-left .ai-concept-card-back,
.ai-concept-seat-hand-right .ai-concept-card-back {
  --seat-card-width: 5.58cqw;
  --seat-card-height: 8.62cqw;
  margin-left: -3.34cqw;
}

.ai-concept-seat-hand-top .ai-concept-card-back:first-child,
.ai-concept-seat-hand-left .ai-concept-card-back:first-child,
.ai-concept-seat-hand-right .ai-concept-card-back:first-child {
  margin-left: 0;
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-0,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-0,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-0 {
  --seat-card-width: 5.66cqw;
  --seat-card-height: 8.74cqw;
  --seat-card-z: 1;
  transform-origin: right bottom;
  --seat-card-transform: translate(0, 0.06cqw) perspective(70cqw) rotateX(-2.6deg) rotateY(9deg) rotateZ(-7.5deg) skewY(-1deg) scaleY(0.97);
  --seat-card-clip: polygon(4.2% 0, 100% 3.2%, 96.5% 100%, 0 96.8%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-1,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-1,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-1 {
  --seat-card-width: 5.62cqw;
  --seat-card-height: 8.7cqw;
  --seat-card-z: 2;
  transform-origin: 66% 100%;
  --seat-card-transform: translate(0, 0.24cqw) perspective(70cqw) rotateX(-2.3deg) rotateY(6deg) rotateZ(-5deg) skewY(-0.65deg) scaleY(0.978);
  --seat-card-clip: polygon(3% 0, 100% 2.3%, 97.2% 100%, 0 97.8%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-2,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-2,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-2 {
  --seat-card-width: 5.58cqw;
  --seat-card-height: 8.66cqw;
  --seat-card-z: 3;
  transform-origin: 56% 100%;
  --seat-card-transform: translate(0, 0.43cqw) perspective(70cqw) rotateX(-2deg) rotateY(3deg) rotateZ(-2.5deg) skewY(-0.25deg) scaleY(0.986);
  --seat-card-clip: polygon(1.7% 0, 99.3% 1.2%, 98.2% 100%, 0 99%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-3,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-3,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-3 {
  --seat-card-width: 5.54cqw;
  --seat-card-height: 8.62cqw;
  --seat-card-z: 4;
  transform-origin: center bottom;
  --seat-card-transform: translate(0, 0.54cqw) perspective(70cqw) rotateX(-1.8deg) rotateY(0deg) rotateZ(0deg) scaleY(0.992);
  --seat-card-clip: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-4,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-4,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-4 {
  --seat-card-width: 5.58cqw;
  --seat-card-height: 8.66cqw;
  --seat-card-z: 5;
  transform-origin: 44% 100%;
  --seat-card-transform: translate(0, 0.43cqw) perspective(70cqw) rotateX(-2deg) rotateY(-3deg) rotateZ(2.5deg) skewY(0.25deg) scaleY(0.986);
  --seat-card-clip: polygon(0.7% 1.2%, 98.3% 0, 100% 99%, 1.8% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-5,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-5,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-5 {
  --seat-card-width: 5.62cqw;
  --seat-card-height: 8.7cqw;
  --seat-card-z: 6;
  transform-origin: 34% 100%;
  --seat-card-transform: translate(0, 0.24cqw) perspective(70cqw) rotateX(-2.3deg) rotateY(-6deg) rotateZ(5deg) skewY(0.65deg) scaleY(0.978);
  --seat-card-clip: polygon(0 2.3%, 97% 0, 100% 97.8%, 2.8% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-6,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-6,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-6 {
  --seat-card-width: 5.66cqw;
  --seat-card-height: 8.74cqw;
  --seat-card-z: 7;
  transform-origin: left bottom;
  --seat-card-transform: translate(0, 0.06cqw) perspective(70cqw) rotateX(-2.6deg) rotateY(-9deg) rotateZ(7.5deg) skewY(1deg) scaleY(0.97);
  --seat-card-clip: polygon(0 3.2%, 95.8% 0, 100% 96.8%, 3.5% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-7,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-7,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-7 {
  --seat-card-width: 5.7cqw;
  --seat-card-height: 8.78cqw;
  --seat-card-z: 8;
  transform-origin: 24% 100%;
  --seat-card-transform: translate(0, 0.02cqw) perspective(70cqw) rotateX(-2.9deg) rotateY(-12deg) rotateZ(9deg) skewY(1.25deg) scaleY(0.965);
  --seat-card-clip: polygon(0 3.8%, 95% 0, 100% 96.5%, 4% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-8,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-8,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-8 {
  --seat-card-width: 5.74cqw;
  --seat-card-height: 8.82cqw;
  --seat-card-z: 9;
  transform-origin: left bottom;
  --seat-card-transform: translate(0, 0) perspective(70cqw) rotateX(-3.1deg) rotateY(-15deg) rotateZ(10deg) skewY(1.5deg) scaleY(0.958);
  --seat-card-clip: polygon(0 4.3%, 94.5% 0, 100% 96%, 4.5% 100%);
}

.ai-concept-seat-hand .ai-concept-card-back:nth-child(1) { z-index: 1; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(2) { z-index: 2; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(3) { z-index: 3; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(4) { z-index: 4; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(5) { z-index: 5; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(6) { z-index: 6; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(7) { z-index: 7; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(8) { z-index: 8; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(9) { z-index: 9; }
.ai-concept-seat-hand .ai-concept-card-back:nth-child(10) { z-index: 10; }

.ai-concept-seat-hand-top .ai-concept-card-back,
.ai-concept-seat-hand-left .ai-concept-card-back,
.ai-concept-seat-hand-right .ai-concept-card-back {
  --seat-card-width: 5.58cqw;
  --seat-card-height: 8.66cqw;
  margin-left: -3.86cqw;
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-0,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-0,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-0 {
  --seat-card-width: 5.48cqw;
  --seat-card-height: 8.54cqw;
  --seat-card-transform: translate(0, 0.38cqw) perspective(76cqw) rotateX(-1.2deg) rotateY(3.2deg) rotateZ(-3deg) skewY(-0.45deg) scaleY(0.99);
  --seat-card-clip: polygon(4% 0, 100% 2.8%, 96.5% 100%, 0 97%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-1,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-1,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-1 {
  --seat-card-width: 5.52cqw;
  --seat-card-height: 8.58cqw;
  --seat-card-transform: translate(0, 0.26cqw) perspective(76cqw) rotateX(-1.1deg) rotateY(2.4deg) rotateZ(-2.2deg) skewY(-0.3deg) scaleY(0.994);
  --seat-card-clip: polygon(2.8% 0, 100% 2%, 97.5% 100%, 0 98%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-2,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-2,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-2 {
  --seat-card-width: 5.56cqw;
  --seat-card-height: 8.62cqw;
  --seat-card-transform: translate(0, 0.15cqw) perspective(76cqw) rotateX(-1deg) rotateY(1.6deg) rotateZ(-1.4deg) skewY(-0.15deg);
  --seat-card-clip: polygon(1.8% 0, 99.5% 1.2%, 98.5% 100%, 0 99%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-3,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-3,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-3 {
  --seat-card-width: 5.58cqw;
  --seat-card-height: 8.64cqw;
  --seat-card-transform: translate(0, 0.06cqw) perspective(76cqw) rotateX(-0.9deg) rotateY(0.8deg) rotateZ(-0.6deg);
  --seat-card-clip: polygon(0.9% 0, 99% 0.5%, 99.5% 100%, 0 99.5%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-4,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-4,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-4 {
  --seat-card-width: 5.6cqw;
  --seat-card-height: 8.66cqw;
  --seat-card-transform: translate(0, 0) perspective(76cqw) rotateX(-0.8deg) rotateY(0deg) rotateZ(0deg);
  --seat-card-clip: polygon(0.5% 0, 99.5% 0, 100% 100%, 0 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-5,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-5,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-5 {
  --seat-card-width: 5.58cqw;
  --seat-card-height: 8.64cqw;
  --seat-card-transform: translate(0, 0.06cqw) perspective(76cqw) rotateX(-0.9deg) rotateY(-0.8deg) rotateZ(0.6deg);
  --seat-card-clip: polygon(1% 0.5%, 99.1% 0, 100% 99.5%, 0.5% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-6,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-6,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-6 {
  --seat-card-width: 5.56cqw;
  --seat-card-height: 8.62cqw;
  --seat-card-transform: translate(0, 0.15cqw) perspective(76cqw) rotateX(-1deg) rotateY(-1.6deg) rotateZ(1.4deg) skewY(0.15deg);
  --seat-card-clip: polygon(0.5% 1.2%, 98.2% 0, 100% 99%, 1.5% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-7,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-7,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-7 {
  --seat-card-width: 5.52cqw;
  --seat-card-height: 8.58cqw;
  --seat-card-transform: translate(0, 0.26cqw) perspective(76cqw) rotateX(-1.1deg) rotateY(-2.4deg) rotateZ(2.2deg) skewY(0.3deg) scaleY(0.994);
  --seat-card-clip: polygon(0 2%, 97.2% 0, 100% 98%, 2.5% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-8,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-8,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-8 {
  --seat-card-width: 5.48cqw;
  --seat-card-height: 8.54cqw;
  --seat-card-transform: translate(0, 0.38cqw) perspective(76cqw) rotateX(-1.2deg) rotateY(-3.2deg) rotateZ(3deg) skewY(0.45deg) scaleY(0.99);
  --seat-card-clip: polygon(0 2.8%, 96% 0, 100% 97%, 3.5% 100%);
}

.ai-concept-seat-hand-top .ai-concept-card-back-slot-9,
.ai-concept-seat-hand-left .ai-concept-card-back-slot-9,
.ai-concept-seat-hand-right .ai-concept-card-back-slot-9 {
  --seat-card-width: 5.42cqw;
  --seat-card-height: 8.48cqw;
  --seat-card-z: 10;
  --seat-card-transform: translate(0, 0.5cqw) perspective(76cqw) rotateX(-1.25deg) rotateY(-3.9deg) rotateZ(3.6deg) skewY(0.55deg) scaleY(0.986);
  --seat-card-clip: polygon(0 3.4%, 95.2% 0, 100% 96.6%, 4.2% 100%);
}

.ai-concept-seat-nameplate-left,
.ai-concept-seat-nameplate-right {
  margin-top: 0.8cqw;
  max-width: 100%;
  font-size: 1.23cqw;
}

.ai-concept-seat-nameplate-left {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, rgba(18, 84, 173, 0.96), rgba(8, 42, 104, 0.98));
}

.ai-concept-seat-nameplate-right {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, rgba(18, 130, 46, 0.96), rgba(8, 72, 21, 0.98));
}

.ai-concept-seat-generation-left,
.ai-concept-seat-generation-right {
  margin-top: 0.5cqw;
  text-align: center;
}

.ai-concept-seat-expanded {
  width: 39.6cqw;
  min-height: 9.4cqw;
  display: grid;
  align-items: center;
  z-index: 5;
}

.ai-concept-seat-expanded.ai-concept-seat-side-left {
  left: calc(2% - var(--ai-gameplay-local-rail-shift) + 2.675cqw);
  grid-template-columns: 15.7cqw minmax(0, 1fr);
  grid-template-rows: 3cqw 2.15cqw;
  justify-items: start;
  text-align: left;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right {
  right: calc(2% - var(--ai-gameplay-local-rail-shift) + 2.675cqw);
  grid-template-columns: minmax(0, 1fr) 15.7cqw;
  grid-template-rows: 3cqw 2.15cqw;
  justify-items: end;
  text-align: right;
}

.ai-concept-seat-left-1 { top: 3.5%; }
.ai-concept-seat-left-2,
.ai-concept-seat-right-1 { top: 14.25%; }
.ai-concept-seat-left-3,
.ai-concept-seat-right-2 { top: 25%; }
.ai-concept-seat-left-4,
.ai-concept-seat-right-3 { top: 35.75%; }
.ai-concept-seat-left-5,
.ai-concept-seat-right-4 { top: 46.5%; }

.ai-concept-seat-expanded .ai-concept-seat-avatar {
  grid-row: 1 / 3;
  width: 5.45cqw;
  height: 5.45cqw;
  margin: 0;
  align-self: center;
}

.ai-concept-seat-expanded.ai-concept-seat-side-left .ai-concept-seat-avatar {
  grid-column: 1;
  justify-self: start;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-avatar {
  grid-column: 2;
  justify-self: end;
}

.ai-concept-seat-expanded .ai-concept-seat-nameplate {
  grid-row: 1;
  min-height: 2.52cqw;
  max-width: 8.9cqw;
  margin: 0;
  padding: 0.42cqw 0.72cqw;
  border-radius: 0.58cqw;
  font-size: 0.86cqw;
  line-height: 1;
}

.ai-concept-seat-expanded.ai-concept-seat-side-left .ai-concept-seat-nameplate {
  grid-column: 1;
  justify-self: start;
  margin-left: 6.25cqw;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-nameplate {
  grid-column: 2;
  justify-self: end;
  margin-right: 6.25cqw;
}

.ai-concept-seat-expanded .ai-concept-seat-generation {
  grid-row: 2;
  min-height: 1.78cqw;
  max-width: 8.7cqw;
  margin: 0;
  padding: 0.3cqw 0.62cqw;
  border-radius: 0.48cqw;
  font-size: 0.68cqw;
  line-height: 1;
}

.ai-concept-seat-expanded.ai-concept-seat-side-left .ai-concept-seat-generation {
  grid-column: 1;
  justify-self: start;
  margin-left: 6.35cqw;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-generation {
  grid-column: 2;
  justify-self: end;
  margin-right: 6.35cqw;
}

.ai-concept-seat-expanded .ai-concept-seat-hand {
  --seat-expanded-card-width: 4.06cqw;
  --seat-expanded-card-height: 6.02cqw;
  --seat-expanded-card-step: 1.34cqw;
  display: flex;
  width: 23.2cqw;
  height: 5.4cqw;
  min-height: 5.4cqw;
  margin: 0;
  align-items: flex-end;
  align-self: center;
  flex-wrap: nowrap;
  gap: 0;
  transform: none;
  perspective: none;
  transform-style: flat;
  overflow: visible;
}

.ai-concept-seat-expanded.ai-concept-seat-side-left .ai-concept-seat-hand {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: start;
  justify-content: flex-start;
  flex-direction: row;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-hand {
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: end;
  justify-content: flex-end;
  flex-direction: row;
}

.ai-concept-seat-expanded .ai-concept-seat-hand-row {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  display: contents !important;
  min-width: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  isolation: auto !important;
}

.ai-concept-seat-expanded .ai-concept-seat-hand-row .ai-concept-card-back {
  --seat-card-width: var(--seat-expanded-card-width);
  --seat-card-height: var(--seat-expanded-card-height);
  --seat-card-transform: none;
  --seat-card-clip: none;
  box-sizing: border-box;
  margin-left: calc(var(--seat-expanded-card-step) - var(--seat-expanded-card-width));
  flex: 0 0 auto;
  border-width: 0.22cqw;
  border-radius: 0.56cqw;
}

.ai-concept-seat-expanded .ai-concept-seat-hand-dense,
.ai-concept-seat-expanded .ai-concept-seat-hand-multirow {
  --seat-expanded-card-step: var(--seat-expanded-card-dense-step, 0.54cqw);
}

.ai-concept-seat-expanded .ai-concept-seat-hand-row .ai-concept-card-back:first-child {
  margin-left: calc(var(--seat-expanded-card-step) - var(--seat-expanded-card-width));
}

.ai-concept-seat-expanded .ai-concept-seat-hand-dense .ai-concept-card-back:first-child,
.ai-concept-seat-expanded .ai-concept-seat-hand-multirow .ai-concept-card-back:first-child {
  margin-left: calc(var(--seat-expanded-card-step) - var(--seat-expanded-card-width));
}

.ai-concept-seat-expanded .ai-concept-seat-hand-row:first-child .ai-concept-card-back:first-child {
  margin-left: 0;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-hand-row .ai-concept-card-back {
  margin-left: calc(var(--seat-expanded-card-step) - var(--seat-expanded-card-width));
  margin-right: 0;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-hand-dense .ai-concept-card-back,
.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-hand-multirow .ai-concept-card-back {
  margin-left: calc(var(--seat-expanded-card-step) - var(--seat-expanded-card-width));
  margin-right: 0;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-hand-row .ai-concept-card-back:first-child {
  margin-left: calc(var(--seat-expanded-card-step) - var(--seat-expanded-card-width));
  margin-right: 0;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-hand-dense .ai-concept-card-back:first-child,
.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-hand-multirow .ai-concept-card-back:first-child {
  margin-left: calc(var(--seat-expanded-card-step) - var(--seat-expanded-card-width));
  margin-right: 0;
}

.ai-concept-seat-expanded.ai-concept-seat-side-right .ai-concept-seat-hand-row:first-child .ai-concept-card-back:first-child {
  margin-left: 0;
  margin-right: 0;
}

.ai-concept-seat-expanded .ai-concept-card-back::before {
  inset: 0.26cqw;
  border-radius: 0.42cqw;
}

.ai-concept-seat-expanded .ai-concept-card-back::after {
  font-size: 0.5cqw;
  line-height: 0.98;
}

.ai-concept-seat-expanded .ai-concept-seat-card-face span {
  font-size: 0.92cqw;
}

.ai-concept-seat-expanded .ai-concept-seat-card-face .ai-concept-seat-card-face-corner {
  left: 0.26cqw;
  top: 0.28cqw;
  font-size: 0.44cqw;
}

.ai-concept-seat-expanded .ai-concept-seat-card-face .ai-concept-seat-card-face-corner-bottom {
  left: auto;
  top: auto;
  right: 0.26cqw;
  bottom: 0.28cqw;
}

.ai-concept-seat-expanded .ai-concept-seat-card-face .ai-concept-seat-card-face-center {
  font-size: 0.92cqw;
}

.ai-concept-seat-expanded .ai-concept-seat-card-face.ai-concept-card-mark-wide .ai-concept-seat-card-face-center {
  font-size: 0.78cqw;
}

.ai-concept-seat-expanded .ai-concept-seat-card-face.ai-concept-card-mark-long .ai-concept-seat-card-face-center {
  font-size: 0.66cqw;
}

.ai-concept-expanded-table-layout .ai-concept-menu-button {
  top: calc(18px + var(--ai-gameplay-safe-top));
  left: calc(6px + min(18px, var(--ai-gameplay-safe-left)));
  width: 58px;
  height: 58px;
  border-radius: 18px;
  transform: none;
}

.ai-concept-expanded-table-layout .ai-concept-table-menu-panel {
  top: calc(84px + var(--ai-gameplay-safe-top));
  left: calc(6px + min(18px, var(--ai-gameplay-safe-left)));
  transform: none;
}

.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) {
  width: 5.3cqw;
  height: auto;
  min-height: 0;
  grid-template-rows: auto;
  gap: 0;
  padding: 0.42cqw;
  background: rgba(5, 12, 28, 0.7);
}

.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) .ai-concept-match-chat-head {
  grid-template-columns: 1fr;
  gap: 0.3cqw;
}

.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) .ai-concept-match-chat-title {
  gap: 0;
}

.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) .ai-concept-match-chat-title span,
.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) .ai-concept-match-chat-list,
.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) .ai-concept-match-chat-form {
  display: none;
}

.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) .ai-concept-match-chat-controls {
  justify-content: stretch;
}

.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) .ai-concept-match-chat-controls button {
  width: 100%;
  height: 1.28cqw;
}

.ai-concept-expanded-table-layout .ai-concept-count-panel {
  left: 50%;
  right: auto;
  top: 2.2%;
  width: 13.8cqw;
  max-height: 12.8cqw;
  transform: translateX(-50%);
  overflow: hidden auto;
  opacity: 0.82;
  gap: 0.2cqw;
  padding: 0.42cqw 0.46cqw;
}

.ai-concept-expanded-table-layout .ai-concept-count-row {
  min-height: 0.78cqw;
  gap: 0.24cqw;
  font-size: 0.44cqw;
}

.ai-concept-expanded-table-layout .ai-concept-count-row em {
  min-width: 0.86cqw;
  height: 0.76cqw;
  font-size: 0.42cqw;
}

.ai-concept-local-seat {
  position: absolute;
  left: 9%;
  bottom: 8.2%;
  z-index: 4;
  display: grid;
  justify-items: start;
}

.ai-concept-local-avatar {
  --active-avatar-base-shadow: 0 18px 30px rgba(0,0,0,0.28);
  --active-avatar-glow: rgba(255, 205, 75, 0.8);
  width: 9cqw;
  height: 9cqw;
  border-radius: 999px;
  border: 0.34cqw solid rgba(255,255,255,0.94);
  overflow: hidden;
  background: radial-gradient(circle at 35% 28%, #ffd28e, #f0a81f 54%, #7a4b05 100%);
  box-shadow: var(--active-avatar-base-shadow);
}

.ai-concept-turn-avatar-flash {
  position:absolute;
  inset:0;
  z-index:145;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:radial-gradient(circle at center,rgba(255,213,105,.22),transparent 46%);
}
.ai-concept-turn-avatar-flash[hidden] { display:none; }
.ai-concept-turn-avatar-flash-card { display:grid; place-items:center; }
.ai-concept-turn-avatar-flash-card strong { padding:.72cqw 1.55cqw; border:1px solid rgba(255,213,105,.82); border-radius:999px; color:#fff4c7; background:rgba(4,10,25,.92); box-shadow:0 0 0 .22cqw rgba(255,213,105,.28),0 0 3.4cqw rgba(255,213,105,.62),0 0 8cqw rgba(93,238,255,.22); font:950 clamp(28px,3.2cqw,62px)/1 "Orbitron",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.ai-concept-turn-avatar-flash.is-flashing { animation:aiTurnAvatarBackdrop 1.55s ease-out both; }
.ai-concept-turn-avatar-flash.is-flashing .ai-concept-turn-avatar-flash-card { animation:aiTurnAvatarBurst 1.55s cubic-bezier(.16,.86,.26,1) both; }
@keyframes aiTurnAvatarBackdrop { 0%{opacity:0} 14%,70%{opacity:1} 100%{opacity:0} }
@keyframes aiTurnAvatarBurst { 0%{opacity:0;transform:scale(.3)} 18%{opacity:1;transform:scale(1.2)} 35%{transform:scale(.96)} 55%{transform:scale(1.04)} 100%{opacity:0;transform:scale(1)} }

.ai-concept-active-avatar {
  position: relative;
  z-index: 8;
  animation: ai-concept-active-avatar-pulse 1.55s ease-in-out infinite;
  will-change: box-shadow, transform;
}

@keyframes ai-concept-active-avatar-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      var(--active-avatar-base-shadow),
      0 0 0 0.24cqw var(--active-avatar-glow),
      0 0 1.7cqw 0.34cqw color-mix(in srgb, var(--active-avatar-glow), transparent 8%);
  }
  50% {
    transform: scale(1.045);
    box-shadow:
      var(--active-avatar-base-shadow),
      0 0 0 0.42cqw var(--active-avatar-glow),
      0 0 3.05cqw 0.78cqw color-mix(in srgb, var(--active-avatar-glow), transparent 0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-concept-active-avatar {
    animation: none;
  }
  .ai-concept-turn-avatar-flash.is-flashing,.ai-concept-turn-avatar-flash.is-flashing .ai-concept-turn-avatar-flash-card { animation:none; }
}

.ai-concept-turn-flow-layer {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  overflow: visible;
}

.ai-concept-turn-flow-dot {
  position: absolute;
  width: 1.26cqw;
  height: 1.26cqw;
  margin: -0.63cqw 0 0 -0.63cqw;
  border-radius: 999px;
  border: 0.14cqw solid rgba(255,255,255,0.94);
  background:
    radial-gradient(circle at 32% 28%, #fffef0 0 18%, #ffe17a 19% 42%, #f0a91f 43% 100%);
  box-shadow:
    0 0 0 0.16cqw rgba(255, 226, 122, 0.28),
    0 0 1.3cqw rgba(255, 210, 78, 0.72),
    0 0 2.6cqw rgba(255, 128, 34, 0.24);
  opacity: 0;
  will-change: left, top, transform, opacity;
}

.ai-concept-turn-flow-dot::after {
  content: "";
  position: absolute;
  inset: -0.5cqw;
  border-radius: inherit;
  border: 0.1cqw solid rgba(255, 226, 122, 0.28);
  filter: blur(0.08cqw);
}

.ai-concept-turn-flow-ripple {
  position: absolute;
  width: 3.2cqw;
  height: 3.2cqw;
  margin: -1.6cqw 0 0 -1.6cqw;
  border-radius: 999px;
  border: 0.16cqw solid rgba(255, 226, 122, 0.66);
  box-shadow: 0 0 1.4cqw rgba(255, 226, 122, 0.34);
  animation: ai-concept-turn-flow-ripple 720ms ease-out forwards;
}

@keyframes ai-concept-turn-flow-ripple {
  0% {
    opacity: 0.92;
    transform: scale(0.45);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-concept-turn-flow-dot,
  .ai-concept-turn-flow-ripple {
    display: none;
  }
}

.ai-concept-card-travel-layer {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  overflow: visible;
}

.ai-concept-flying-card {
  position: absolute;
  --concept-flying-triangle-stop: 30%;
  --concept-flying-corner-font: clamp(0.42rem, 0.62cqw, 0.74rem);
  --concept-flying-center-font: clamp(0.96rem, 1.55cqw, 1.92rem);
  width: 4.5cqw;
  height: 6.8cqw;
  margin: -3.4cqw 0 0 -2.25cqw;
  border-radius: 0.68cqw;
  border: 0.18cqw solid transparent;
  background:
    linear-gradient(135deg, var(--travel-color, #3b90ff) 0 var(--concept-flying-triangle-stop), #ffffff var(--concept-flying-triangle-stop) 100%);
  color: #101827;
  display: block;
  font: 900 1.5cqw/1 "Rajdhani", sans-serif;
  box-shadow:
    0 1cqw 1.7cqw rgba(0,0,0,0.34);
  transform-origin: center center;
  will-change: left, top, transform, opacity;
}

.ai-concept-shell[data-travel-card-border="true"] .ai-concept-flying-card:not(.ai-concept-flying-card-back) {
  border-color: rgba(255,255,255,0.94);
  box-shadow:
    0 0 0 0.06cqw rgba(255,255,255,0.55),
    0 1cqw 1.7cqw rgba(0,0,0,0.34),
    0 0 1.2cqw rgba(255,226,122,0.22);
}

.ai-concept-flying-card-discard {
  --concept-flying-triangle-stop: 24%;
  clip-path: polygon(2% 0.5%, 100% 0, 96% 99.5%, 0 100%);
}

.ai-concept-flying-card.ai-concept-card-mark-pair {
  --concept-flying-center-font: clamp(0.9rem, 1.45cqw, 1.8rem);
}

.ai-concept-flying-card.ai-concept-card-mark-wide {
  --concept-flying-corner-font: clamp(0.36rem, 0.52cqw, 0.64rem);
  --concept-flying-center-font: clamp(0.76rem, 1.12cqw, 1.42rem);
}

.ai-concept-flying-card.ai-concept-card-mark-long {
  --concept-flying-corner-font: clamp(0.32rem, 0.44cqw, 0.54rem);
  --concept-flying-center-font: clamp(0.64rem, 0.92cqw, 1.18rem);
}

.ai-concept-flying-card-corner,
.ai-concept-flying-card-center {
  position: absolute;
  z-index: 2;
  color: #101827;
  text-shadow: 0 0.05cqw 0 rgba(255,255,255,0.62);
  letter-spacing: 0;
  pointer-events: none;
}

.ai-concept-flying-card-corner {
  left: 0.45cqw;
  top: 0.46cqw;
  max-width: 2.8cqw;
  font-size: var(--concept-flying-corner-font);
  line-height: 0.88;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ai-concept-flying-card-corner-bottom {
  left: auto;
  right: 0.45cqw;
  top: auto;
  bottom: 0.46cqw;
  transform: rotate(180deg);
}

.ai-concept-flying-card-center {
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.7cqw;
  font-size: var(--concept-flying-center-font);
  line-height: 0.9;
  text-align: center;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ai-concept-card-face-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.ai-concept-card-with-asset > :not(.ai-concept-card-face-image) {
  opacity: 0;
}

.ai-concept-card-with-asset {
  background: transparent !important;
}

.ai-concept-card-with-asset::before {
  opacity: 0;
}

.ai-concept-flying-card-back {
  background:
    radial-gradient(circle at 50% 46%, rgba(226, 33, 33, 0.54), transparent 21%),
    radial-gradient(ellipse at 50% 51%, rgba(104, 13, 20, 0.46), transparent 45%),
    linear-gradient(180deg, rgba(14, 17, 31, 0.98), rgba(7, 10, 20, 1));
  color: #f7fbff;
  display: grid;
  place-items: center;
  font-size: 0.59cqw;
  text-align: center;
  text-transform: uppercase;
}

.ai-concept-shell[data-card-back-border="true"] .ai-concept-flying-card-back {
  border-color: rgba(255,255,255,0.94);
  box-shadow:
    0 0 0 0.06cqw rgba(255,255,255,0.55),
    0 1cqw 1.7cqw rgba(0,0,0,0.34);
}

.ai-concept-flying-card-colorless {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.08), transparent 34%),
    linear-gradient(180deg, rgba(13, 16, 29, 0.98), rgba(7, 10, 20, 1));
  color: #f7fbff;
}

.ai-concept-flying-card-colorless .ai-concept-flying-card-corner,
.ai-concept-flying-card-colorless .ai-concept-flying-card-center {
  color: #f7fbff;
  text-shadow: 0 0.08cqw 0 rgba(0,0,0,0.42);
}

.ai-concept-flying-card-neutral {
  background: linear-gradient(180deg, #fff 0%, #f4f6fb 100%);
  color: #101827;
}

.ai-concept-flying-card-neutral .ai-concept-flying-card-corner,
.ai-concept-flying-card-neutral .ai-concept-flying-card-center {
  color: #101827;
  text-shadow: none;
}

.ai-concept-flying-card-generation {
  border-color: rgba(15, 23, 42, 0.96);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  color: #101827;
}

.ai-concept-flying-card-generation .ai-concept-flying-card-corner,
.ai-concept-flying-card-generation .ai-concept-flying-card-center {
  color: #101827;
  text-shadow: none;
}

.ai-concept-flying-hand-bundle {
  position: absolute;
  width: 9.6cqw;
  height: 7.25cqw;
  margin: -3.62cqw 0 0 -4.8cqw;
  pointer-events: none;
  will-change: left, top, transform, opacity;
  filter: drop-shadow(0 0.9cqw 1.25cqw rgba(0,0,0,0.34));
}

.ai-concept-flying-bundle-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5cqw;
  height: 6.8cqw;
  margin: -3.4cqw 0 0 -2.25cqw;
  border-radius: 0.68cqw;
  border: 0.18cqw solid transparent;
  background:
    radial-gradient(circle at 50% 46%, rgba(226, 33, 33, 0.54), transparent 21%),
    radial-gradient(ellipse at 50% 51%, rgba(104, 13, 20, 0.46), transparent 45%),
    linear-gradient(180deg, rgba(14, 17, 31, 0.98), rgba(7, 10, 20, 1));
  color: #f7fbff;
  display: grid;
  place-items: center;
  font: 900 0.58cqw/0.95 "Rajdhani", sans-serif;
  text-align: center;
  text-transform: uppercase;
  box-shadow:
    0 0.38cqw 0.7cqw rgba(0,0,0,0.26);
}

.ai-concept-shell[data-card-back-border="true"] .ai-concept-flying-bundle-card {
  border-color: rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 0.06cqw rgba(255,255,255,0.48),
    0 0.38cqw 0.7cqw rgba(0,0,0,0.26);
}

@media (prefers-reduced-motion: reduce) {
  .ai-concept-flying-card,
  .ai-concept-flying-hand-bundle {
    display: none;
  }
}

.ai-concept-local-plate {
  margin-top: 0.72cqw;
  background: linear-gradient(180deg, rgba(150, 105, 9, 0.96), rgba(92, 64, 6, 0.98));
  border-color: rgba(255, 201, 92, 0.5);
  width: 18.5cqw;
  max-width: 18.5cqw;
  padding-inline: 0.45cqw;
  font-size: 1.08cqw;
  letter-spacing: 0;
}

.ai-concept-local-tag {
  margin-right: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1em;
  letter-spacing: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ai-concept-local-plate strong {
  display: none;
}

.ai-concept-local-generation {
  display: grid;
  margin-top: 0.45cqw;
  margin-left: 0.45cqw;
  border-color: rgba(255, 201, 92, 0.26);
  font-size: 0.88cqw;
}

.ai-concept-hand-zone {
  position: absolute;
  left: 23.2%;
  right: 17%;
  bottom: 5.3%;
  z-index: 5;
}

.ai-concept-hand-state {
  display: grid;
  gap: 0.25cqw;
  width: min(42cqw, 100%);
  margin: 0 auto 0.7cqw;
  padding: 0.58cqw 0.78cqw;
  border: 0.08cqw solid rgba(93, 238, 255, 0.28);
  border-radius: 0.75cqw;
  background: rgba(2, 8, 24, 0.78);
  box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, 0.22);
  text-align: center;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.ai-concept-hand-state strong {
  color: #f9fbff;
  font-size: clamp(0.72rem, 1.05cqw, 0.92rem);
  line-height: 1.1;
}

.ai-concept-hand-state span {
  color: rgba(233, 241, 255, 0.76);
  font-size: clamp(0.62rem, 0.82cqw, 0.78rem);
  line-height: 1.25;
}

.ai-concept-shell[data-intro-stage="logo"] .ai-concept-hand-state {
  opacity: 0;
  visibility: hidden;
}

.ai-concept-measure-zone,
.ai-concept-measure-seat {
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.is-concept-hand-suppressed {
  visibility: hidden !important;
}

.ai-concept-hand {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: end;
  gap: 0;
  min-width: 0;
  perspective: 86cqw;
  transform-style: flat;
  isolation: isolate;
}

.ai-concept-hand-card {
  position: relative;
  flex: 0 0 auto;
  width: var(--local-card-width, 7.6cqw);
  height: var(--local-card-height, 11.52cqw);
  border-radius: 1.05cqw;
  border: 0.24cqw solid rgba(7, 9, 16, 0.98);
  background: linear-gradient(180deg, #fff 0%, #f4f6fb 100%);
  box-shadow:
    0 0 0 0.08cqw rgba(255,255,255,0.75),
    0 1.25cqw 1.5cqw rgba(0,0,0,0.28);
  color: #111827;
  margin-left: -2.88cqw;
  overflow: hidden;
  transform-origin: center bottom;
  transform: translateY(calc(var(--local-card-rest-y, 0cqw) + var(--playable-lift-y, 0cqw))) var(--local-card-transform, perspective(76cqw) rotateX(0.8deg));
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
  transform-style: flat;
  backface-visibility: hidden;
  clip-path: var(--local-card-clip, none);
  z-index: var(--local-card-z, 1);
}

.ai-concept-hand-card:first-child {
  margin-left: 0;
}

.ai-concept-card-form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  margin-left: -2.88cqw;
  position: relative;
  line-height: 0;
  z-index: var(--local-card-z, 1);
}

.ai-concept-card-form:first-child {
  margin-left: 0;
}

.ai-concept-card-form .ai-concept-hand-card {
  margin-left: 0;
}

.ai-concept-card-form:has(.ai-concept-hand-card-slot-0) { z-index: 1; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-1) { z-index: 2; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-2) { z-index: 3; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-3) { z-index: 4; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-4) { z-index: 5; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-5) { z-index: 6; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-6) { z-index: 7; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-7) { z-index: 8; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-8) { z-index: 9; }
.ai-concept-card-form:has(.ai-concept-hand-card-slot-9) { z-index: 10; }

.ai-concept-card-form-slot-0 { z-index: 1; }
.ai-concept-card-form-slot-1 { z-index: 2; }
.ai-concept-card-form-slot-2 { z-index: 3; }
.ai-concept-card-form-slot-3 { z-index: 4; }
.ai-concept-card-form-slot-4 { z-index: 5; }
.ai-concept-card-form-slot-5 { z-index: 6; }
.ai-concept-card-form-slot-6 { z-index: 7; }
.ai-concept-card-form-slot-7 { z-index: 8; }
.ai-concept-card-form-slot-8 { z-index: 9; }
.ai-concept-card-form-slot-9 { z-index: 10; }

.ai-concept-card-submit-source {
  opacity: 0;
  pointer-events: none;
}

button.ai-concept-hand-card {
  appearance: none;
  cursor: pointer;
  display: block;
  text-align: inherit;
  font: inherit;
}

.ai-concept-hand-card-action {
  outline: none;
}

.ai-concept-hand-card-action::after {
  content: "";
  position: absolute;
  inset: 0.38cqw;
  border-radius: 0.82cqw;
  border: 0.1cqw solid rgba(255,255,255,0);
  transition: border-color 160ms ease, box-shadow 160ms ease;
  pointer-events: none;
}

.ai-concept-hand-card-action:hover::after,
.ai-concept-hand-card-action:focus-visible::after {
  border-color: rgba(255, 226, 122, 0.82);
  box-shadow: inset 0 0 1.2cqw rgba(255, 226, 122, 0.22), 0 0 1.1cqw rgba(255, 226, 122, 0.28);
}

.ai-concept-hand-card-choice::after {
  border-color: rgba(118, 194, 255, 0.28);
}

.ai-concept-hand-card-playable {
  --playable-lift-y: -1.48cqw;
  filter: brightness(1.035) saturate(1.04) drop-shadow(0 0 0.34cqw rgba(255, 220, 106, 0.38));
}

.ai-concept-hand-card-playable::after {
  border-color: rgba(255, 226, 122, 0.62);
  background:
    linear-gradient(112deg, transparent 15%, rgba(255, 244, 194, 0.12) 43%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 226, 122, 0.08) 58%, transparent 84%);
  box-shadow:
    inset 0 0 1.15cqw rgba(255, 239, 171, 0.15),
    0 0 0.72cqw rgba(255, 214, 80, 0.28);
  opacity: 0.72;
  animation: ai-concept-playable-card-glow 1.15s ease-in-out infinite;
}

@keyframes ai-concept-playable-card-glow {
  0%, 100% {
    opacity: 0.48;
    border-color: rgba(255, 226, 122, 0.48);
    box-shadow:
      inset 0 0 0.82cqw rgba(255, 239, 171, 0.1),
      0 0 0.46cqw rgba(255, 214, 80, 0.2);
  }
  50% {
    opacity: 0.88;
    border-color: rgba(255, 239, 173, 0.82);
    box-shadow:
      inset 0 0 1.4cqw rgba(255, 244, 194, 0.2),
      0 0 0.9cqw rgba(255, 220, 94, 0.4);
  }
}

.ai-concept-shell[data-human-turn="true"][data-autoplay-enabled="false"][data-game-ended="false"][data-read-only-replay="false"]:not([data-turn-attention-ready="true"]) .ai-concept-hand-card-playable {
  --playable-lift-y: 0cqw;
  filter: none;
}

.ai-concept-shell[data-human-turn="true"][data-autoplay-enabled="false"][data-game-ended="false"][data-read-only-replay="false"]:not([data-turn-attention-ready="true"]) .ai-concept-hand-card-playable::after {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ai-concept-hand-card-playable::after {
    animation: none;
    opacity: 0.66;
  }
}

.ai-concept-hand-card-slot-0 {
  --local-card-width: 7.48cqw;
  --local-card-height: 11.42cqw;
  --local-card-z: 1;
  --local-card-rest-y: 0.48cqw;
  --local-card-transform: perspective(76cqw) rotateX(1.1deg) rotateY(3.2deg) rotateZ(-3deg) skewY(-0.45deg) scaleY(0.99);
  --local-card-clip: polygon(4% 0, 100% 2.8%, 96.5% 100%, 0 97%);
}

.ai-concept-hand-card-slot-1 {
  --local-card-width: 7.56cqw;
  --local-card-height: 11.5cqw;
  --local-card-z: 2;
  --local-card-rest-y: 0.34cqw;
  --local-card-transform: perspective(76cqw) rotateX(1deg) rotateY(2.4deg) rotateZ(-2.2deg) skewY(-0.3deg) scaleY(0.994);
  --local-card-clip: polygon(2.8% 0, 100% 2%, 97.5% 100%, 0 98%);
}

.ai-concept-hand-card-slot-2 {
  --local-card-width: 7.62cqw;
  --local-card-height: 11.56cqw;
  --local-card-z: 3;
  --local-card-rest-y: 0.2cqw;
  --local-card-transform: perspective(76cqw) rotateX(0.9deg) rotateY(1.6deg) rotateZ(-1.4deg) skewY(-0.15deg);
  --local-card-clip: polygon(1.8% 0, 99.5% 1.2%, 98.5% 100%, 0 99%);
}

.ai-concept-hand-card-slot-3 {
  --local-card-width: 7.66cqw;
  --local-card-height: 11.6cqw;
  --local-card-z: 4;
  --local-card-rest-y: 0.08cqw;
  --local-card-transform: perspective(76cqw) rotateX(0.8deg) rotateY(0.8deg) rotateZ(-0.6deg);
  --local-card-clip: polygon(0.9% 0, 99% 0.5%, 99.5% 100%, 0 99.5%);
}

.ai-concept-hand-card-slot-4 {
  --local-card-width: 7.68cqw;
  --local-card-height: 11.62cqw;
  --local-card-z: 5;
  --local-card-rest-y: 0cqw;
  --local-card-transform: perspective(76cqw) rotateX(0.7deg) rotateY(0deg) rotateZ(0deg);
  --local-card-clip: polygon(0.5% 0, 99.5% 0, 100% 100%, 0 100%);
}

.ai-concept-hand-card-slot-5 {
  --local-card-width: 7.66cqw;
  --local-card-height: 11.6cqw;
  --local-card-z: 6;
  --local-card-rest-y: 0.08cqw;
  --local-card-transform: perspective(76cqw) rotateX(0.8deg) rotateY(-0.8deg) rotateZ(0.6deg);
  --local-card-clip: polygon(1% 0.5%, 99.1% 0, 100% 99.5%, 0.5% 100%);
}

.ai-concept-hand-card-slot-6 {
  --local-card-width: 7.62cqw;
  --local-card-height: 11.56cqw;
  --local-card-z: 7;
  --local-card-rest-y: 0.2cqw;
  --local-card-transform: perspective(76cqw) rotateX(0.9deg) rotateY(-1.6deg) rotateZ(1.4deg) skewY(0.15deg);
  --local-card-clip: polygon(0.5% 1.2%, 98.2% 0, 100% 99%, 1.5% 100%);
}

.ai-concept-hand-card-slot-7 {
  --local-card-width: 7.56cqw;
  --local-card-height: 11.5cqw;
  --local-card-z: 8;
  --local-card-rest-y: 0.34cqw;
  --local-card-transform: perspective(76cqw) rotateX(1deg) rotateY(-2.4deg) rotateZ(2.2deg) skewY(0.3deg) scaleY(0.994);
  --local-card-clip: polygon(0 2%, 97.2% 0, 100% 98%, 2.5% 100%);
}

.ai-concept-hand-card-slot-8 {
  --local-card-width: 7.48cqw;
  --local-card-height: 11.42cqw;
  --local-card-z: 9;
  --local-card-rest-y: 0.48cqw;
  --local-card-transform: perspective(76cqw) rotateX(1.1deg) rotateY(-3.2deg) rotateZ(3deg) skewY(0.45deg) scaleY(0.99);
  --local-card-clip: polygon(0 2.8%, 96% 0, 100% 97%, 3.5% 100%);
}

.ai-concept-hand-card-slot-9 {
  --local-card-width: 7.4cqw;
  --local-card-height: 11.32cqw;
  --local-card-z: 10;
  --local-card-rest-y: 0.62cqw;
  --local-card-transform: perspective(76cqw) rotateX(1.2deg) rotateY(-4deg) rotateZ(3.6deg) skewY(0.6deg) scaleY(0.986);
  --local-card-clip: polygon(0 3.5%, 95% 0, 100% 96.5%, 4.5% 100%);
}

.ai-concept-hand-card-red {
  background: linear-gradient(135deg, #ee4a3c 0 28%, #ffffff 28% 100%);
}

.ai-concept-hand-card-blue {
  background: linear-gradient(135deg, #3b90ff 0 28%, #ffffff 28% 100%);
}

.ai-concept-hand-card-gold {
  background: linear-gradient(135deg, #efc33c 0 28%, #ffffff 28% 100%);
}

.ai-concept-hand-card-silver {
  background: linear-gradient(135deg, #aeb7c7 0 28%, #ffffff 28% 100%);
}

.ai-concept-hand-card-rarity,
.ai-concept-hand-card-colorless {
  background: linear-gradient(180deg, rgba(13, 16, 29, 0.98), rgba(7, 10, 20, 1));
  color: #fff;
}

.ai-concept-hand-card-generation {
  border-color: rgba(15, 23, 42, 0.96);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  color: #101827;
  text-shadow: none;
}

.ai-concept-hand-card::before {
  content: "";
  position: absolute;
  inset: 0.5cqw;
  border-radius: 0.82cqw;
  border: 1px solid rgba(17,24,39,0.08);
}

.ai-concept-hand-card-rarity::before,
.ai-concept-hand-card-colorless::before {
  border-color: rgba(255,255,255,0.12);
}

.ai-concept-hand-card-generation::before {
  border-color: rgba(15, 23, 42, 0.28);
}

.ai-concept-hand-card-corner {
  position: absolute;
  left: 0.62cqw;
  max-width: 4.5cqw;
  font: 900 1.28cqw/1 "Rajdhani", sans-serif;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.ai-concept-hand-card-corner-top {
  top: 0.62cqw;
}

.ai-concept-hand-card-corner-bottom {
  right: 0.62cqw;
  left: auto;
  bottom: 0.62cqw;
  transform: rotate(180deg);
}

.ai-concept-hand-card-center {
  position: absolute;
  inset: 50% 0.88cqw auto;
  transform: translateY(-50%);
  text-align: center;
  font: 900 3.35cqw/0.9 "Rajdhani", sans-serif;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.ai-concept-discard-card.is-concept-discard-pulse {
  animation: ai-concept-discard-pulse 620ms ease-out;
}

.ai-concept-discard-card.is-concept-special-discard-celebration {
  animation: ai-concept-special-discard-flash 1.08s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
}

.ai-concept-discard-card.is-concept-special-discard-celebration::after {
  content: "";
  position: absolute;
  inset: 0.18cqw;
  z-index: 2;
  border-radius: 0.78cqw;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.98) 0 0.08cqw, rgba(255,226,122,0.65) 0.1cqw 0.18cqw, transparent 0.22cqw),
    radial-gradient(circle at 76% 17%, rgba(255,255,255,0.98) 0 0.07cqw, rgba(104,220,255,0.7) 0.09cqw 0.17cqw, transparent 0.21cqw),
    radial-gradient(circle at 84% 69%, rgba(255,255,255,0.94) 0 0.09cqw, rgba(255,205,85,0.62) 0.11cqw 0.2cqw, transparent 0.24cqw),
    radial-gradient(circle at 28% 82%, rgba(255,255,255,0.96) 0 0.06cqw, rgba(189,135,255,0.65) 0.08cqw 0.16cqw, transparent 0.2cqw),
    linear-gradient(112deg, transparent 20%, rgba(255,255,255,0.08) 40%, rgba(255,247,203,0.52) 50%, rgba(255,255,255,0.08) 60%, transparent 80%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 100%;
  opacity: 0;
  animation: ai-concept-special-discard-sparkles 1.08s ease-out infinite;
}

@keyframes ai-concept-discard-pulse {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.18) drop-shadow(0 0 1.2cqw rgba(255,226,122,0.42));
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes ai-concept-special-discard-flash {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 0 0.08cqw rgba(255,255,255,0.82), 0 1.25cqw 1.5cqw rgba(0,0,0,0.28);
  }
  34% {
    filter: brightness(1.3) saturate(1.14) drop-shadow(0 0 1.2cqw rgba(255,224,119,0.72));
    box-shadow: 0 0 0 0.16cqw rgba(255,244,196,0.96), 0 0 1.45cqw rgba(255,214,85,0.64), 0 1.25cqw 1.5cqw rgba(0,0,0,0.28);
  }
  72% {
    filter: brightness(1.12) saturate(1.06) drop-shadow(0 0 0.7cqw rgba(135,220,255,0.46));
  }
  100% {
    filter: brightness(1);
    box-shadow: 0 0 0 0.08cqw rgba(255,255,255,0.82), 0 1.25cqw 1.5cqw rgba(0,0,0,0.28);
  }
}

@keyframes ai-concept-special-discard-sparkles {
  0%, 100% {
    opacity: 0;
    background-position: center, center, center, center, 120% 0;
  }
  20% {
    opacity: 0.95;
  }
  58% {
    opacity: 0.72;
    background-position: center, center, center, center, -20% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-concept-discard-card.is-concept-special-discard-celebration,
  .ai-concept-discard-card.is-concept-special-discard-celebration::after {
    animation: none;
  }
  .ai-concept-discard-card.is-concept-special-discard-celebration {
    filter: brightness(1.18) saturate(1.08);
    box-shadow: 0 0 0 0.16cqw rgba(255,244,196,0.96), 0 0 1.45cqw rgba(255,214,85,0.5);
  }
  .ai-concept-discard-card.is-concept-special-discard-celebration::after { opacity: 0.74; }
}

.ai-concept-card-chooser {
  position: absolute;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: clamp(4px, 0.72cqw, 10px);
  background: rgba(2, 5, 12, 0.58);
  isolation: isolate;
  overflow: hidden;
}

.ai-concept-card-chooser[hidden] {
  display: none;
}

.ai-concept-card-chooser-panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(680px, 72cqw, calc(100% - 1.2cqw));
  max-height: calc(100% - clamp(8px, 1.44cqw, 20px));
  overflow: hidden;
  gap: clamp(3px, 0.38cqw, 6px);
  padding: clamp(6px, 0.72cqw, 10px);
  border-radius: clamp(9px, 1.1cqw, 14px);
  border: 1px solid rgba(255,255,255,0.16);
  background:
    linear-gradient(145deg, rgba(7, 12, 28, 0.98), rgba(13, 20, 38, 0.96)),
    radial-gradient(circle at 18% 8%, rgba(73, 151, 255, 0.18), transparent 42%);
  color: #f7fbff;
  box-shadow: 0 24px 60px rgba(0,0,0,0.46);
}

.ai-concept-choice-block {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(3px, 0.36cqw, 5px);
  margin-top: clamp(2px, 0.32cqw, 5px);
}

.ai-concept-card-chooser-panel .ai-hand-structured-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(5px, 0.72cqw, 10px);
  min-width: 0;
}

.ai-concept-card-chooser-panel .ai-hand-structured-topline strong {
  flex: 0 1 auto;
  font-size: clamp(0.68rem, 1.05cqw, 0.9rem);
  line-height: 1.08;
}

.ai-concept-card-chooser-panel .ai-hand-structured-topline span {
  min-width: 0;
  color: rgba(247,251,255,0.7);
  font-size: clamp(0.54rem, 0.82cqw, 0.72rem);
  line-height: 1.08;
  text-align: right;
}

.ai-concept-choice-label {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: clamp(5px, 0.75cqw, 12px);
  color: rgba(247,251,255,0.76);
  font: 800 clamp(0.54rem, 1.25cqw, 0.78rem)/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.ai-concept-choice-label em {
  color: rgba(255,226,122,0.9);
  font-style: normal;
}

.ai-concept-choice-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(22px, 2.28cqw, 30px);
  padding: clamp(3px, 0.32cqw, 5px) clamp(5px, 0.52cqw, 8px);
  border-radius: clamp(8px, 0.9cqw, 12px);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font: 800 clamp(0.62rem, 1.45cqw, 0.92rem)/1 "Space Grotesk", sans-serif;
  cursor: pointer;
}

.ai-concept-target-choice {
  justify-content: flex-start;
  gap: clamp(5px, 0.48cqw, 8px);
  min-width: 0;
}

.ai-concept-target-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(30px, 2.8cqw, 40px);
  height: clamp(30px, 2.8cqw, 40px);
  overflow: hidden;
  border: 1px solid rgba(103, 214, 255, 0.55);
  border-radius: 50%;
  background: rgba(7, 14, 27, 0.9);
  color: rgba(247,251,255,0.86);
  font: 900 clamp(0.58rem, 0.78cqw, 0.72rem)/1 "Space Grotesk", sans-serif;
}

.ai-concept-target-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-concept-target-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.72rem, 0.9cqw, 0.88rem);
}

.ai-concept-choice-pill input,
.ai-concept-card-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ai-concept-choice-pill.is-selected,
.ai-concept-card-choice.is-selected {
  border-color: rgba(255,226,122,0.84);
  box-shadow: inset 0 0 0 1px rgba(255,226,122,0.34), 0 0 18px rgba(255,226,122,0.16);
}

.ai-concept-choice-pill-red.is-selected {
  background: linear-gradient(135deg, rgba(239,73,63,0.72), rgba(255,255,255,0.12));
}

.ai-concept-choice-pill-blue.is-selected {
  background: linear-gradient(135deg, rgba(61,142,255,0.72), rgba(255,255,255,0.12));
}

.ai-concept-choice-pill-gold.is-selected {
  background: linear-gradient(135deg, rgba(242,196,55,0.72), rgba(255,255,255,0.12));
}

.ai-concept-choice-pill-silver.is-selected {
  background: linear-gradient(135deg, rgba(174,183,199,0.72), rgba(255,255,255,0.12));
}

.ai-concept-card-choice-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(2px, 0.28cqw, 4px);
}

.ai-concept-card-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-width: 0;
  min-height: clamp(52px, 5.8cqw, 70px);
  padding: clamp(2px, 0.24cqw, 4px);
  border-radius: clamp(8px, 0.9cqw, 12px);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}

.ai-concept-card-choice span {
  display: grid;
  place-items: center;
  width: clamp(18px, 1.78cqw, 24px);
  height: clamp(18px, 1.78cqw, 24px);
  border-radius: clamp(6px, 0.7cqw, 9px);
  background: rgba(255,255,255,0.12);
  font: 900 clamp(0.56rem, 0.9cqw, 0.76rem)/1 "Rajdhani", sans-serif;
}

.ai-concept-card-choice-image {
  display: block;
  width: auto;
  height: clamp(46px, 5.2cqw, 62px);
  max-width: 100%;
  border-radius: clamp(3px, 0.28cqw, 5px);
  object-fit: contain;
  box-shadow: 0 0.34cqw 0.62cqw rgba(0,0,0,0.36);
  pointer-events: none;
}

.ai-concept-card-choice strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 clamp(0.48rem, 0.72cqw, 0.64rem)/1 "Space Grotesk", sans-serif;
}

.ai-concept-choice-message,
.ai-concept-form-status {
  grid-column: 1 / -1;
  margin: clamp(5px, 0.62cqw, 9px) 0 0;
  color: rgba(247,251,255,0.76);
  font: 700 clamp(0.6rem, 1.32cqw, 0.86rem)/1.22 "Space Grotesk", sans-serif;
}

.ai-concept-form-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 0.52cqw, 8px);
  padding: clamp(3px, 0.38cqw, 6px) clamp(5px, 0.52cqw, 8px);
  border-radius: clamp(8px, 0.9cqw, 12px);
  background: rgba(0,0,0,0.24);
}

.ai-concept-form-status strong {
  color: #fff;
}

.ai-concept-chooser-actions {
  display: flex;
  justify-content: flex-end;
  gap: clamp(5px, 0.72cqw, 10px);
  margin-top: clamp(2px, 0.34cqw, 5px);
}

.ai-concept-chooser-cancel,
.ai-concept-chooser-submit {
  min-height: clamp(24px, 2.36cqw, 32px);
  padding: clamp(3px, 0.34cqw, 5px) clamp(7px, 0.64cqw, 10px);
  border-radius: clamp(8px, 0.9cqw, 12px);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font: 900 clamp(0.58rem, 1.26cqw, 0.86rem)/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-concept-chooser-cancel {
  background: rgba(255,255,255,0.08);
}

.ai-concept-chooser-submit {
  background: linear-gradient(180deg, rgba(198,133,17,0.96), rgba(132,76,6,0.98));
  border-color: rgba(255,201,92,0.46);
}

.ai-concept-chooser-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-concept-replay-running .ai-concept-hand-card-action {
  pointer-events: none;
}

.ai-concept-shell[data-human-turn="true"][data-autoplay-enabled="false"][data-game-ended="false"][data-read-only-replay="false"]:not([data-turn-attention-ready="true"]) .ai-concept-hand-card-action,
.ai-concept-shell[data-human-turn="true"][data-autoplay-enabled="false"][data-game-ended="false"][data-read-only-replay="false"]:not([data-turn-attention-ready="true"]) .ai-concept-draw-form,
.ai-concept-shell[data-human-turn="true"][data-autoplay-enabled="false"][data-game-ended="false"][data-read-only-replay="false"]:not([data-turn-attention-ready="true"]) .ai-concept-keep-drawn-form,
.ai-concept-shell[data-human-turn="true"][data-autoplay-enabled="false"][data-game-ended="false"][data-read-only-replay="false"]:not([data-turn-attention-ready="true"]) .ai-hand-structured-form {
  pointer-events: none;
}

.ai-concept-replay-running .ai-concept-draw-form,
.ai-concept-replay-running .ai-concept-keep-drawn-form,
.ai-concept-replay-running .ai-hand-structured-form {
  pointer-events: none;
}

.ai-concept-seat-hand-top,
.ai-concept-seat-hand-left,
.ai-concept-seat-hand-right {
  display: block;
  height: 14.5cqw;
  min-height: 14.5cqw;
  overflow: visible;
}

.ai-concept-seat-hand-row,
.ai-concept-hand-row {
  position: absolute;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  min-width: 0;
  isolation: isolate;
  transform-origin: center bottom;
}

.ai-concept-seat-hand-multirow {
  min-height: 14.5cqw;
}

.ai-concept-seat-hand-row-0 {
  bottom: 5.35cqw;
  z-index: 1;
  transform: translateX(-50%) translateY(0.72cqw) scale(0.88);
  opacity: 0.9;
}

.ai-concept-seat-hand-row-1 {
  bottom: 2.65cqw;
  z-index: 2;
  transform: translateX(-50%) translateY(0.25cqw) scale(0.94);
  opacity: 0.96;
}

.ai-concept-seat-hand-row-2 {
  bottom: 0;
  z-index: 3;
  transform: translateX(-50%) translateY(-0.12cqw);
}

.ai-concept-seat-hand-row .ai-concept-card-back {
  margin-left: -3.86cqw;
}

.ai-concept-seat-hand-row .ai-concept-card-back:first-child {
  margin-left: 0;
}

.ai-concept-seat-hand-left .ai-concept-seat-hand-row,
.ai-concept-seat-hand-right .ai-concept-seat-hand-row {
  transform-origin: center bottom;
}

.ai-concept-hand {
  position: relative;
  display: block;
  height: 21cqw;
  min-width: 0;
  perspective: 86cqw;
  transform-style: flat;
  isolation: isolate;
}

.ai-concept-hand-row {
  position: absolute;
  left: 50%;
}

.ai-concept-hand-multirow {
  transform: translateY(1.05cqw);
}

.ai-concept-hand-row-0 {
  bottom: 10.3cqw;
  z-index: 1;
  transform: translateX(-50%) translateY(1.05cqw) scale(0.86);
  opacity: 0.9;
}

.ai-concept-hand-row-1 {
  bottom: 5.15cqw;
  z-index: 2;
  transform: translateX(-50%) translateY(0.48cqw) scale(0.93);
  opacity: 0.96;
}

.ai-concept-hand-row-2 {
  bottom: 0;
  z-index: 3;
  transform: translateX(-50%) translateY(-0.1cqw);
}

.ai-concept-hand-multirow .ai-concept-hand-card {
  margin-left: -3.16cqw;
}

.ai-concept-hand-row .ai-concept-hand-card:first-child {
  margin-left: 0;
}

.ai-concept-hand-row > .ai-concept-card-form:not(:first-child) .ai-concept-hand-card {
  margin-left: 0;
}

.ai-concept-hand-multirow .ai-concept-card-form {
  margin-left: -3.16cqw;
}

.ai-concept-hand-multirow .ai-concept-card-form:first-child {
  margin-left: 0;
}

.ai-concept-hand-multirow .ai-concept-hand-row > .ai-concept-card-form:not(:first-child) .ai-concept-hand-card {
  margin-left: 0;
}

/* Responsive full-bleed HUD: sizes stay tied to the logical 16:9 stage while
   the outer rails reclaim space on wide mobile and desktop viewports. */
.ai-concept-local-seat {
  left: calc(2% - var(--ai-gameplay-local-rail-shift));
  bottom: 6.7%;
}

.ai-concept-local-avatar {
  width: 10.8cqw;
  height: 10.8cqw;
}

.ai-concept-local-plate {
  width: 18.5cqw;
  max-width: 18.5cqw;
  min-height: 3.45cqw;
  font-size: 1.12cqw;
}

.ai-concept-local-generation {
  min-height: 2.45cqw;
  font-size: 1.04cqw;
}

.ai-concept-seat:not(.ai-concept-seat-expanded) .ai-concept-seat-avatar {
  width: 8.4cqw;
  height: 8.4cqw;
}

.ai-concept-seat:not(.ai-concept-seat-expanded) .ai-concept-seat-nameplate {
  min-height: 3.35cqw;
  font-size: 1.42cqw;
}

.ai-concept-seat:not(.ai-concept-seat-expanded) .ai-concept-seat-generation {
  min-height: 2.4cqw;
  font-size: 1.16cqw;
}

.ai-concept-seat-left:not(.ai-concept-seat-expanded) {
  left: calc(5% - var(--ai-gameplay-opponent-rail-shift));
}

.ai-concept-seat-right:not(.ai-concept-seat-expanded) {
  right: calc(5% - var(--ai-gameplay-opponent-rail-shift));
}

.ai-concept-piles {
  right: calc(0.45% - var(--ai-gameplay-pile-rail-shift));
  bottom: 0.8%;
}

.ai-concept-hand-zone {
  left: 50%;
  right: auto;
  bottom: -1.1%;
  width: 64%;
  transform: translateX(-50%);
}

.ai-concept-shell[data-layout-profile="standard"] .ai-concept-hand-zone {
  width: 62%;
}

.ai-concept-hand-card,
.ai-concept-hand .ai-concept-hand-card.ai-concept-card-back {
  --local-card-width: 10.24cqw;
  --local-card-height: 15.5cqw;
}

.ai-concept-hand-card,
.ai-concept-card-form {
  margin-left: -4.75cqw;
}

.ai-concept-hand-card:first-child,
.ai-concept-card-form:first-child,
.ai-concept-card-form .ai-concept-hand-card {
  margin-left: 0;
}

.ai-concept-hand {
  height: 26.1cqw;
}

.ai-concept-hand-row-0 {
  bottom: 11.45cqw;
  transform: translateX(-50%) translateY(1.05cqw) scale(0.84);
}

.ai-concept-hand-row-1 {
  bottom: 5.72cqw;
  transform: translateX(-50%) translateY(0.48cqw) scale(0.92);
}

.ai-concept-hand-multirow .ai-concept-hand-card,
.ai-concept-hand-multirow .ai-concept-card-form {
  margin-left: -4.75cqw;
}

.ai-concept-hand-multirow .ai-concept-card-form:first-child,
.ai-concept-hand-multirow .ai-concept-hand-row > .ai-concept-card-form:not(:first-child) .ai-concept-hand-card,
.ai-concept-hand-row .ai-concept-hand-card:first-child {
  margin-left: 0;
}

.ai-concept-autoplay-cancel-pill {
  min-width: 10.8cqw;
  min-height: clamp(40px, 3.1cqw, 50px);
  padding: 0 clamp(14px, 1.35cqw, 24px);
  font-size: clamp(13px, 0.88cqw, 17px);
  letter-spacing: 0.035em;
}

.ai-concept-spectator-pill,
.ai-concept-elapsed-pill {
  min-height: clamp(34px, 2.5cqw, 44px);
  padding: 0.5cqw 0.92cqw;
  font-size: clamp(14px, 0.94cqw, 19px);
}

.ai-concept-spectator-pill span {
  font-size: clamp(16px, 1.04cqw, 21px);
}

.ai-concept-spectator-pill svg {
  width: clamp(16px, 1.16cqw, 22px);
  height: clamp(16px, 1.16cqw, 22px);
}

/* Match chat is a non-obstructive one-line rail. New server-projected messages
   fly across the table; the hidden list remains the durable DOM history used
   for reconciliation and duplicate suppression. */
.ai-concept-match-chat,
.ai-concept-match-chat.is-expanded,
.ai-concept-match-chat.is-collapsed {
  position: absolute;
  left: auto;
  right: calc(1.4% - var(--ai-gameplay-pile-rail-shift));
  top: 0.7%;
  bottom: auto;
  z-index: 24;
  width: clamp(190px, 15.5cqw, 276px);
  height: auto;
  min-height: 0;
  display: block;
  padding: clamp(2px, 0.2cqw, 4px);
  border-radius: 0.7cqw;
  border: 0.08cqw solid rgba(93, 238, 255, 0.28);
  background: linear-gradient(135deg, rgba(4, 12, 27, 0.9), rgba(9, 18, 38, 0.84));
  box-shadow: 0 0.5cqw 1.4cqw rgba(0, 0, 0, 0.3), 0 0 1.2cqw rgba(93, 238, 255, 0.1);
  transform: none;
  backdrop-filter: blur(0.2cqw);
  pointer-events: none;
}

.ai-concept-match-chat-head,
.ai-concept-match-chat-controls,
.ai-concept-match-chat-list {
  display: none !important;
}

.ai-concept-match-chat-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "reactions message";
  align-items: center;
  gap: 0.34cqw;
  pointer-events: auto;
}

.ai-concept-expanded-table-layout .ai-concept-match-chat,
.ai-concept-expanded-table-layout .ai-concept-match-chat.is-expanded,
.ai-concept-expanded-table-layout .ai-concept-match-chat.is-collapsed,
.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) {
  right: calc(1.4% - var(--ai-gameplay-pile-rail-shift));
  top: 0.7%;
  bottom: auto;
  width: clamp(190px, 15.5cqw, 276px);
  padding: clamp(2px, 0.2cqw, 4px);
}

.ai-concept-expanded-table-layout .ai-concept-match-chat:not(.is-expanded) .ai-concept-match-chat-form {
  display: grid;
}

.ai-concept-match-chat-reactions {
  grid-area: reactions;
  display: block;
  align-items: center;
}

.ai-concept-match-chat-reaction-viewport {
  width: clamp(66px, 4.8cqw, 86px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
}

.ai-concept-match-chat-reaction-viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.ai-concept-match-chat-reaction-viewport::-webkit-scrollbar {
  display: none;
}

.ai-concept-match-chat-reaction-track {
  display: flex;
  width: max-content;
  gap: clamp(1px, 0.1cqw, 3px);
}

.ai-concept-match-chat-reactions [data-ai-match-chat-emoji] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(22px, 1.45cqw, 27px);
  height: clamp(30px, 1.95cqw, 35px);
  padding: 0;
  border: 0.06cqw solid rgba(151, 239, 255, 0.2);
  border-radius: 0.42cqw;
  background: rgba(11, 27, 54, 0.82);
  color: #fff;
  font-size: clamp(14px, 0.92cqw, 18px);
  line-height: 1;
  cursor: pointer;
  scroll-snap-align: start;
}

.ai-concept-match-chat-reactions [data-ai-match-chat-emoji]:hover,
.ai-concept-match-chat-reactions [data-ai-match-chat-emoji]:focus-visible {
  border-color: rgba(255, 216, 100, 0.7);
  background: rgba(48, 42, 79, 0.96);
  box-shadow: 0 0 0.7cqw rgba(255, 216, 100, 0.2);
  transform: translateY(-1px);
}

.ai-concept-match-chat-form input[name="message"] {
  grid-area: message;
  width: 100%;
  min-width: 0;
  height: clamp(30px, 1.95cqw, 35px);
  border: 0.06cqw solid rgba(151, 239, 255, 0.24);
  border-radius: 0.5cqw;
  outline: 0;
  background: rgba(2, 8, 19, 0.78);
  color: rgba(247, 251, 255, 0.96);
  padding: 0 0.48cqw;
  font: 800 16px/1 "Space Grotesk", sans-serif;
  touch-action: manipulation;
}

.ai-concept-match-chat-form input[name="message"]:focus {
  border-color: rgba(255, 226, 122, 0.58);
  box-shadow: 0 0 0 0.12cqw rgba(255, 226, 122, 0.12);
}

.ai-concept-match-chat-actions {
  display: contents;
}

.ai-concept-match-chat-actions .ai-concept-form-status {
  position: absolute;
  right: 0;
  top: calc(100% + 0.22cqw);
  bottom: auto;
  min-height: 0;
  max-width: 18cqw;
  padding: 0.18cqw 0.42cqw;
  border-radius: 0.32cqw;
  background: rgba(4, 10, 24, 0.82);
  font-size: clamp(9px, 0.48cqw, 11px);
  pointer-events: none;
}

.ai-concept-match-chat-actions .ai-concept-form-status:has([data-form-status-label]:empty):has([data-form-status-message]:empty) {
  display: none;
}

.ai-concept-match-chat-toast-stack {
  position: absolute;
  right: 0;
  top: calc(100% + 0.55cqw);
  bottom: auto;
  width: min(24cqw, 420px);
  display: grid;
  gap: 0.32cqw;
  pointer-events: none;
}

.ai-concept-match-chat-toast {
  display: grid;
  grid-template-columns: auto clamp(24px, 2cqw, 34px) minmax(0, 1fr);
  align-items: center;
  gap: 0.42cqw;
  min-height: clamp(42px, 3.05cqw, 56px);
  padding: 0.42cqw 0.62cqw;
  border-radius: 0.72cqw;
  border: 0.08cqw solid rgba(93, 238, 255, 0.38);
  background: linear-gradient(135deg, rgba(8, 27, 54, 0.97), rgba(19, 16, 48, 0.95));
  box-shadow: 0 0.75cqw 2cqw rgba(0, 0, 0, 0.42), 0 0 1.5cqw rgba(93, 238, 255, 0.16);
  color: rgba(247, 251, 255, 0.96);
  animation: aiConceptChatFlyIn 6.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  backdrop-filter: blur(0.18cqw);
}

.ai-concept-match-chat-toast time {
  color: rgba(222, 232, 255, 0.62);
  font: 800 clamp(9px, 0.48cqw, 11px)/1 "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
}

.ai-concept-match-chat-toast .compact-chat-avatar {
  width: clamp(24px, 2cqw, 34px);
  height: clamp(24px, 2cqw, 34px);
  border-width: 1px;
  font-size: clamp(8px, 0.5cqw, 11px);
}

.ai-concept-match-chat-toast p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 clamp(11px, 0.62cqw, 14px)/1.18 "Space Grotesk", sans-serif;
}

.ai-concept-match-chat-toast strong {
  display: inline;
  color: var(--chat-name-color, #b89cff);
  font-weight: 900;
}

@keyframes aiConceptChatFlyIn {
  0% { opacity: 0; transform: translate3d(34vw, 12px, 0) rotate(4deg) scale(0.72); }
  16% { opacity: 1; transform: translate3d(-12px, 0, 0) rotate(-1deg) scale(1.03); }
  24%, 78% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate3d(-26vw, -28px, 0) rotate(-3deg) scale(0.84); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-concept-match-chat-toast {
    animation: aiConceptChatFade 6.2s ease both;
  }
}

@keyframes aiConceptChatFade {
  0%, 100% { opacity: 0; }
  10%, 82% { opacity: 1; }
}

@media (max-width: 760px), (max-height: 430px) {
  .ai-concept-menu-button {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .ai-concept-menu-button svg {
    width: 28px;
    height: 28px;
  }

  .ai-concept-direction {
    min-width: 0;
    max-width: none;
    gap: 0.5cqw;
    padding: 0.34cqw 0.58cqw;
  }

  .ai-concept-direction svg {
    width: clamp(32px, 3.1cqw, 46px);
    height: clamp(32px, 3.1cqw, 46px);
    stroke-width: 2.1;
  }

  .ai-concept-direction span {
    font-size: clamp(10px, 0.68cqw, 14px);
  }
}

/* Lobby game-mode selection */
.lobby-game-mode-picker { min-width:0; margin:0; padding:0; border:0; }
.lobby-game-mode-picker legend { margin-bottom:10px; color:var(--text-1); font-weight:800; }
.lobby-game-mode-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.lobby-game-mode-option { position:relative; display:block; min-width:0; cursor:pointer; }
.lobby-game-mode-option input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.lobby-game-mode-option span { display:grid; gap:5px; min-height:92px; padding:16px 18px; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:rgba(255,255,255,.028); transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease; }
.lobby-game-mode-option strong { color:var(--text-0); font:900 1rem/1.2 "Orbitron",sans-serif; }
.lobby-game-mode-option small { color:var(--text-2); line-height:1.45; }
.lobby-game-mode-option input:checked + span { border-color:rgba(93,238,255,.62); background:linear-gradient(145deg,rgba(38,116,181,.16),rgba(121,66,224,.09)); box-shadow:0 0 0 1px rgba(93,238,255,.13),0 0 26px rgba(93,238,255,.1); }
.lobby-game-mode-option input:focus-visible + span { outline:3px solid rgba(93,238,255,.28); outline-offset:2px; }
.lobby-game-mode-option:hover span { transform:translateY(-1px); border-color:rgba(255,213,105,.42); }
.lobby-game-mode-option input:disabled + span { cursor:default; opacity:.72; transform:none; }

/* Orbital is an isolated presentation layer. Traditional markup and styles
   remain the default and are unaffected unless the server-snapshotted mode
   on the match is explicitly "orbital". */
.ai-concept-table-mode-orbital {
  background:
    radial-gradient(ellipse at 50% 78%,rgba(35,61,116,.42),transparent 47%),
    radial-gradient(circle at 50% 4%,rgba(168,39,70,.25),transparent 28%),
    linear-gradient(180deg,#040712 0%,#071126 48%,#02040a 100%);
}
.ai-concept-table-mode-orbital.ai-concept-table-image {
  background:
    linear-gradient(180deg,rgba(1,3,10,.72),rgba(1,4,13,.5) 45%,rgba(0,2,8,.78)),
    var(--ai-concept-table-background-wide,var(--ai-concept-table-background)) center / cover no-repeat,
    #02040a;
}
.ai-concept-table-mode-orbital .ai-concept-spaceglow {
  opacity:.8;
  background:
    radial-gradient(circle at 9% 35%,rgba(38,121,255,.28),transparent 19%),
    radial-gradient(circle at 91% 35%,rgba(39,238,113,.22),transparent 19%),
    radial-gradient(circle at 50% 11%,rgba(255,55,71,.25),transparent 19%);
}
.ai-concept-table-mode-orbital .ai-concept-stage::before,
.ai-concept-table-mode-orbital.ai-concept-table-image .ai-concept-stage::before {
  content:"";
  left:6%;
  top:8%;
  width:88%;
  height:104%;
  border:.6cqw solid rgba(121,150,216,.35);
  border-radius:50% 50% 42% 42% / 34% 34% 55% 55%;
  background:
    radial-gradient(ellipse at 50% 36%,rgba(35,50,88,.2),transparent 18%),
    repeating-radial-gradient(ellipse at 50% 50%,rgba(111,143,216,.05) 0 .2cqw,transparent .24cqw 5.4cqw),
    radial-gradient(ellipse at 50% 52%,#17233f 0%,#0c152c 52%,#050a18 82%,#02050e 100%);
  box-shadow:
    inset 0 0 0 1.1cqw rgba(3,8,21,.76),
    inset 0 2.2cqw 6cqw rgba(92,127,213,.1),
    0 4cqw 8cqw rgba(0,0,0,.62),
    0 0 5cqw rgba(48,91,188,.16);
  transform:perspective(105cqw) rotateX(37deg);
  transform-origin:50% 18%;
}
.ai-concept-table-mode-orbital .ai-concept-stage::after,
.ai-concept-table-mode-orbital.ai-concept-table-image .ai-concept-stage::after {
  content:"";
  left:9%;
  right:9%;
  bottom:-9%;
  height:25%;
  border:.48cqw solid rgba(255,206,74,.82);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 95% 95% 0 0;
  background:linear-gradient(180deg,rgba(83,54,9,.58),rgba(8,8,14,.97));
  box-shadow:inset 0 1cqw 2cqw rgba(255,215,89,.12),0 -1cqw 3cqw rgba(255,191,41,.17);
}
.ai-concept-table-mode-orbital .ai-concept-center {
  left:50%;
  top:18%;
  width:79%;
  height:77%;
  border:.18cqw solid rgba(109,139,204,.2);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(26,40,73,.62),rgba(6,12,29,.72) 67%,rgba(2,5,14,.88));
  box-shadow:inset 0 0 6cqw rgba(39,76,147,.16);
  transform:translateX(-50%) perspective(96cqw) rotateX(34deg);
  transform-origin:50% 15%;
}
.ai-concept-table-mode-orbital .ai-concept-center-logo { opacity:.38; transform:scale(.82); }
.ai-concept-table-mode-orbital .ai-concept-seat {
  width:26cqw;
  height:19cqw;
  z-index:8;
  animation:orbitalSeatArrive .42s cubic-bezier(.2,.8,.2,1) both;
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-active {
  left:50%;
  top:1.5%;
  transform:translateX(-50%);
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-left {
  left:1.2%;
  top:18%;
  transform:rotate(-7deg) scale(.9);
  transform-origin:left center;
  opacity:.88;
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-right {
  right:1.2%;
  top:18%;
  transform:rotate(7deg) scale(.9);
  transform-origin:right center;
  opacity:.88;
}
.ai-concept-table-mode-orbital .ai-concept-seat .ai-concept-seat-avatar {
  position:absolute;
  left:50% !important;
  right:auto !important;
  top:0 !important;
  bottom:auto !important;
  width:7.1cqw;
  height:7.1cqw;
  transform:translateX(-50%);
  border-width:.28cqw;
  box-shadow:0 0 0 .22cqw rgba(3,7,18,.84),0 0 1.5cqw currentColor;
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-active .ai-concept-seat-avatar { border-color:#ff4058; color:#ff4058; }
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-left .ai-concept-seat-avatar { border-color:#3d8dff; color:#3d8dff; }
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-right .ai-concept-seat-avatar { border-color:#39df78; color:#39df78; }
.ai-concept-table-mode-orbital .ai-concept-seat .ai-concept-seat-nameplate {
  position:absolute;
  left:50% !important;
  right:auto !important;
  top:6.3cqw !important;
  bottom:auto !important;
  width:max-content;
  min-width:11cqw;
  max-width:19cqw;
  padding:.55cqw 1cqw;
  transform:translateX(-50%) !important;
  text-align:center;
}
.ai-concept-table-mode-orbital .ai-concept-seat .ai-concept-seat-generation {
  position:absolute;
  left:50% !important;
  right:auto !important;
  top:9.2cqw !important;
  bottom:auto !important;
  width:max-content;
  min-width:8cqw;
  transform:translateX(-50%) !important;
  text-align:center;
}
.ai-concept-table-mode-orbital .ai-concept-seat .ai-concept-seat-hand {
  position:absolute;
  left:50% !important;
  right:auto !important;
  top:11.5cqw !important;
  bottom:auto !important;
  width:22cqw;
  height:7cqw;
  transform:translateX(-50%) perspective(55cqw) rotateX(13deg) !important;
}
.ai-concept-table-mode-orbital .ai-concept-seat-hand-row {
  display:flex;
  justify-content:center;
  width:100%;
}
.ai-concept-table-mode-orbital .ai-concept-seat-hand-row + .ai-concept-seat-hand-row { top:1.1cqw; }
.ai-concept-table-mode-orbital .ai-concept-seat-hand .ai-concept-card-back {
  position:relative;
  left:auto !important;
  top:auto !important;
  flex:0 0 4.1cqw;
  width:4.1cqw;
  height:6.05cqw;
  margin-left:-1.18cqw;
  transform:none !important;
}
.ai-concept-table-mode-orbital .ai-concept-seat-hand .ai-concept-card-back:first-child { margin-left:0; }
.ai-concept-table-mode-orbital .ai-concept-piles {
  left:50%;
  right:auto;
  bottom:auto;
  top:39%;
  width:18.4cqw;
  height:15.2cqw;
  padding:.5cqw .75cqw;
  grid-template-rows:minmax(2.2cqw,auto) minmax(10.2cqw,1fr);
  grid-template-areas:"status" "cards";
  border-color:rgba(105,135,201,.34);
  background:linear-gradient(145deg,rgba(5,10,24,.83),rgba(15,25,49,.72));
  transform:translateX(-50%) perspective(75cqw) rotateX(7deg);
}
.ai-concept-table-mode-orbital .ai-concept-card-piles { grid-template-columns:repeat(2,8cqw); column-gap:1cqw; }
.ai-concept-table-mode-orbital .ai-concept-direction {
  position:absolute;
  left:50%;
  top:calc(100% + .6cqw);
  width:max-content;
  min-width:12cqw;
  transform:translateX(-50%);
  border:1px solid rgba(255,211,86,.44);
  background:rgba(6,11,25,.9);
  box-shadow:0 0 1.5cqw rgba(255,199,52,.14);
}
.ai-concept-table-mode-orbital .ai-concept-local-seat {
  left:5.2%;
  bottom:1%;
  z-index:12;
}
.ai-concept-table-mode-orbital .ai-concept-hand-zone {
  left:50%;
  right:auto;
  bottom:-4.4%;
  width:62%;
  transform:translateX(-50%);
  z-index:11;
}
.ai-concept-table-mode-orbital .ai-concept-hand {
  transform:perspective(75cqw) rotateX(-3deg);
  transform-origin:center bottom;
}
.ai-concept-table-mode-orbital .ai-concept-hand-row {
  justify-content:center;
  filter:drop-shadow(0 1.3cqw 1.8cqw rgba(0,0,0,.55));
}
.ai-concept-table-mode-orbital .ai-concept-match-chat { top:2%; right:1.5%; z-index:18; }

/* Orbital first-person composition.
   This second, deliberately more specific layer turns the Orbital table into
   the seated camera shown in the approved concept while leaving every
   Traditional selector and coordinate untouched. */
.ai-concept-table-mode-orbital,
.ai-concept-table-mode-orbital.ai-concept-table-image {
  background:
    radial-gradient(circle at 50% -12%,rgba(224,31,58,.2),transparent 28%),
    radial-gradient(circle at -4% 17%,rgba(15,103,255,.28),transparent 31%),
    radial-gradient(circle at 104% 17%,rgba(24,234,102,.22),transparent 31%),
    repeating-conic-gradient(from 269deg at 50% 13%,rgba(42,84,190,.08) 0deg 1deg,transparent 1deg 8deg),
    linear-gradient(180deg,#01030a 0%,#050b1b 42%,#02040a 100%);
}
.ai-concept-table-mode-orbital .ai-concept-spaceglow {
  opacity:1;
  background:
    radial-gradient(circle at 50% 4%,rgba(255,37,62,.24),transparent 18%),
    radial-gradient(circle at 7% 18%,rgba(0,105,255,.3),transparent 24%),
    radial-gradient(circle at 93% 18%,rgba(18,236,94,.25),transparent 24%),
    repeating-linear-gradient(113deg,transparent 0 5.5cqw,rgba(41,106,255,.035) 5.6cqw 5.75cqw);
}
.ai-concept-table-mode-orbital .ai-concept-stage {
  perspective:90cqw;
  overflow:hidden;
}
.ai-concept-table-mode-orbital .ai-concept-stage::before,
.ai-concept-table-mode-orbital.ai-concept-table-image .ai-concept-stage::before {
  left:7%;
  top:20%;
  width:86%;
  height:101%;
  border:.36cqw solid rgba(88,127,218,.4);
  border-radius:49% 49% 43% 43% / 32% 32% 64% 64%;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(28,43,76,.92),rgba(7,14,32,.97) 67%,#02050d 100%),
    #071025;
  box-shadow:
    inset 0 0 0 .75cqw rgba(3,8,20,.82),
    inset 0 2cqw 5cqw rgba(85,130,230,.1),
    0 4.5cqw 8cqw rgba(0,0,0,.72),
    0 0 4cqw rgba(45,94,202,.2);
  transform:perspective(78cqw) rotateX(51deg);
  transform-origin:50% 9%;
}
.ai-concept-table-mode-orbital .ai-concept-stage::after,
.ai-concept-table-mode-orbital.ai-concept-table-image .ai-concept-stage::after {
  left:8%;
  right:8%;
  bottom:-11%;
  height:31%;
  border:.48cqw solid rgba(255,199,48,.92);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 96% 96% 0 0;
  background:
    linear-gradient(180deg,rgba(113,72,7,.72),rgba(21,14,5,.95) 23%,rgba(3,4,9,.99) 77%);
  box-shadow:
    inset 0 1.2cqw 1.7cqw rgba(255,219,91,.18),
    0 -1cqw 3cqw rgba(255,188,28,.26),
    0 0 .65cqw rgba(255,222,104,.7);
}
.ai-concept-table-mode-orbital .ai-concept-center {
  left:50%;
  top:24%;
  width:76%;
  height:70%;
  border:.13cqw solid rgba(101,139,221,.18);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(22,37,70,.36),rgba(5,12,28,.3) 67%,rgba(2,5,13,.64));
  box-shadow:inset 0 0 4cqw rgba(39,80,165,.12);
  transform:translateX(-50%) perspective(77cqw) rotateX(49deg);
  transform-origin:50% 8%;
}
.ai-concept-table-mode-orbital .ai-concept-center-logo {
  opacity:.08;
  transform:scale(.68);
}
.ai-concept-table-mode-orbital .ai-concept-seat {
  width:26cqw;
  height:18cqw;
  z-index:10;
  filter:none;
}
.ai-concept-table-mode-orbital .ai-concept-seat::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:1%;
  right:1%;
  top:5.3cqw;
  height:8.6cqw;
  border:.2cqw solid currentColor;
  border-radius:1.4cqw 1.4cqw 45% 45% / 1.2cqw 1.2cqw 32% 32%;
  background:linear-gradient(180deg,rgba(18,28,55,.9),rgba(3,7,17,.84));
  clip-path:polygon(8% 0,92% 0,100% 36%,91% 100%,9% 100%,0 36%);
  box-shadow:inset 0 0 1.2cqw color-mix(in srgb,currentColor 20%,transparent),0 0 1.25cqw color-mix(in srgb,currentColor 42%,transparent);
  opacity:.88;
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-active {
  left:50%;
  top:1.2%;
  color:#ff314d;
  transform:translateX(-50%) scale(.88);
  transform-origin:50% 0;
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-left {
  left:-2.8%;
  top:8.5%;
  color:#2582ff;
  transform:rotate(-9deg) scale(.87);
  transform-origin:35% 8%;
  opacity:1;
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-right {
  right:-2.8%;
  top:8.5%;
  color:#27de6f;
  transform:rotate(9deg) scale(.87);
  transform-origin:65% 8%;
  opacity:1;
}
.ai-concept-table-mode-orbital .ai-concept-seat .ai-concept-seat-avatar {
  position:absolute;
  left:50% !important;
  top:0 !important;
  width:6.5cqw;
  height:6.5cqw;
  border-width:.26cqw;
  transform:translateX(-50%);
  background:#050814;
  box-shadow:
    0 0 0 .22cqw rgba(3,7,17,.9),
    0 0 .8cqw currentColor,
    0 0 2.1cqw color-mix(in srgb,currentColor 55%,transparent);
}
.ai-concept-table-mode-orbital .ai-concept-seat .ai-concept-seat-nameplate {
  position:absolute;
  z-index:3;
  left:50% !important;
  top:5.5cqw !important;
  min-width:12.5cqw;
  max-width:18cqw;
  min-height:2.1cqw;
  padding:.36cqw .9cqw;
  border:.16cqw solid currentColor;
  border-radius:.35cqw;
  color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,currentColor 50%,#141a2b),color-mix(in srgb,currentColor 35%,#03050b));
  font-size:1.02cqw;
  transform:translateX(-50%) !important;
  box-shadow:0 0 .8cqw color-mix(in srgb,currentColor 45%,transparent);
}
.ai-concept-table-mode-orbital .ai-concept-seat .ai-concept-seat-generation {
  display:none;
}
.ai-concept-table-mode-orbital .ai-concept-seat .ai-concept-seat-hand {
  position:absolute;
  left:50% !important;
  top:8.4cqw !important;
  width:22cqw;
  height:6.3cqw;
  transform:translateX(-50%) perspective(50cqw) rotateX(49deg) !important;
  transform-origin:50% 0;
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-left .ai-concept-seat-hand {
  transform:translateX(-50%) perspective(50cqw) rotateX(49deg) rotateZ(2deg) !important;
}
.ai-concept-table-mode-orbital .ai-concept-seat-orbital-right .ai-concept-seat-hand {
  transform:translateX(-50%) perspective(50cqw) rotateX(49deg) rotateZ(-2deg) !important;
}
.ai-concept-table-mode-orbital .ai-concept-seat-hand-row {
  display:flex;
  justify-content:center;
  width:100%;
}
.ai-concept-table-mode-orbital .ai-concept-seat-hand .ai-concept-card-back {
  position:relative;
  flex:0 0 3.35cqw;
  width:3.35cqw;
  height:4.9cqw;
  margin-left:-.62cqw;
  border-width:.18cqw;
  border-color:color-mix(in srgb,currentColor 34%,rgba(255,255,255,.25));
  filter:brightness(.7) saturate(.8);
  transform:none !important;
  box-shadow:0 .45cqw .7cqw rgba(0,0,0,.5);
}
.ai-concept-table-mode-orbital .ai-concept-seat-hand .ai-concept-card-back:first-child {
  margin-left:0;
}
.ai-concept-table-mode-orbital .ai-concept-piles {
  left:50%;
  right:auto;
  top:45%;
  bottom:auto;
  width:13.5cqw;
  height:10.6cqw;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:translateX(-50%) perspective(56cqw) rotateX(22deg);
  transform-origin:50% 0;
  grid-template-areas:"cards";
  grid-template-rows:1fr;
}
.ai-concept-table-mode-orbital .ai-concept-card-piles {
  grid-area:cards;
  grid-template-columns:repeat(2,5.8cqw);
  column-gap:1.25cqw;
  align-items:start;
}
.ai-concept-table-mode-orbital .ai-concept-pile-status-row {
  position:absolute;
  left:50%;
  top:-3.1cqw;
  display:flex;
  gap:.3cqw;
  width:max-content;
  transform:translateX(-50%) perspective(56cqw) rotateX(-22deg);
}
.ai-concept-table-mode-orbital .ai-concept-direction {
  position:absolute;
  left:50%;
  top:calc(100% + 1cqw);
  width:24cqw;
  min-width:0;
  height:3.5cqw;
  padding:0;
  border:0;
  border-top:.38cqw solid #ffc83e;
  border-radius:50%;
  background:transparent;
  box-shadow:0 -.15cqw .7cqw rgba(255,199,52,.7);
  transform:translateX(-50%) perspective(56cqw) rotateX(-22deg);
}
.ai-concept-table-mode-orbital .ai-concept-direction svg,
.ai-concept-table-mode-orbital .ai-concept-direction span {
  display:none;
}
.ai-concept-table-mode-orbital .ai-concept-direction::after {
  content:"";
  position:absolute;
  right:-.2cqw;
  top:-.92cqw;
  width:0;
  height:0;
  border-top:.55cqw solid transparent;
  border-bottom:.55cqw solid transparent;
  border-left:1.15cqw solid #ffc83e;
  filter:drop-shadow(0 0 .4cqw rgba(255,202,65,.8));
}
.ai-concept-table-mode-orbital .ai-concept-local-seat {
  display:none;
}
.ai-concept-table-mode-orbital .ai-concept-hand-zone {
  left:50%;
  right:auto;
  bottom:-6.7%;
  width:66%;
  transform:translateX(-50%);
  z-index:15;
}
.ai-concept-table-mode-orbital .ai-concept-hand {
  transform:perspective(72cqw) rotateX(-7deg);
  transform-origin:50% 100%;
}
.ai-concept-table-mode-orbital .ai-concept-hand-row {
  justify-content:center;
  align-items:flex-end;
  filter:drop-shadow(0 1.5cqw 1.8cqw rgba(0,0,0,.72));
}
.ai-concept-table-mode-orbital .ai-concept-hand-row .ai-concept-card-form,
.ai-concept-table-mode-orbital .ai-concept-hand-row > .ai-concept-hand-card {
  transform-origin:50% 115%;
}
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(1) { transform:rotate(-8deg) translateY(.8cqw); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(2) { transform:rotate(-6deg) translateY(.45cqw); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(3) { transform:rotate(-4deg) translateY(.2cqw); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(4) { transform:rotate(-2deg); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(5) { transform:rotate(-.5deg); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(6) { transform:rotate(.5deg); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(7) { transform:rotate(2deg); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(8) { transform:rotate(4deg) translateY(.2cqw); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(9) { transform:rotate(6deg) translateY(.45cqw); }
.ai-concept-table-mode-orbital .ai-concept-hand-row > :nth-child(10) { transform:rotate(8deg) translateY(.8cqw); }
.ai-concept-table-mode-orbital .ai-concept-match-chat {
  top:1.4%;
  right:1.2%;
  z-index:18;
}
@keyframes orbitalSeatArrive {
  from { filter:blur(.4cqw); opacity:0; }
  to { filter:blur(0); }
}
@media (max-width:720px) {
  .lobby-game-mode-options { grid-template-columns:1fr; }
  .lobby-game-mode-option span { min-height:0; }
}