:root {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #e7ecf3;
  background: #0b1018;
  font-synthesis: none;
  font-weight: 400;
  --bg: #0b1018;
  --panel: #111925;
  --panel2: #151f2c;
  --line: #25303d;
  --muted: #8b9bac;
  --teal: #7de4d1;
  --teal-dark: #173f3d;
  --amber: #edc88d;
  --radius: 14px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    transform 0.18s;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
button svg,
a svg {
  flex-shrink: 0;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
input,
select {
  background: #0d1520;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #e7ecf3;
  padding: 12px;
}
input::placeholder {
  color: #6e8094;
}
button {
  border: 0;
}
input[type="checkbox"] {
  accent-color: var(--teal);
}
.app {
  min-height: 100vh;
}
.site-header {
  height: 88px;
  border-bottom: 1px solid #202a38;
  display: flex;
  align-items: center;
  padding: 0 5.6%;
  gap: 70px;
  background: #0b111be8;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -1px;
  font-weight: 750;
  font-size: 26px;
}
.brand-light {
  font-weight: inherit;
  color: #a3c8bc;
}
.brand.hub-brand { font-size: 40px; gap: 14px; }
.hub-brand .brand-mark { width: 52px; height: 52px; }
.brand.hub-brand > span:last-child { padding-bottom: 0; }
@media (max-width: 760px) { .brand.hub-brand { font-size: 32px; gap: 12px; } .hub-brand .brand-mark { width: 42px; height: 42px; } }
.brand > span:last-child {
  position: relative;
  padding-bottom: 13px;
}
.brand small {
  position: absolute;
  bottom: 0;
  left: 1px;
  font-size: 8px;
  font-weight: 600;
  color: #8496ad;
  letter-spacing: 4px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
}
.site-header nav a {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8c9db0;
  font-size: 13px;
  position: relative;
}
.site-header nav a:hover {
  color: #edf6fc;
}
.site-header nav a.active {
  color: #eaf5fb;
}
.site-header nav a.active:after {
  content: "";
  height: 2px;
  background: var(--teal);
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}
.session-chip {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 11px;
}
.session-chip strong {
  font-size: 11px;
  font-weight: 550;
  display: block;
}
.session-chip small {
  font-size: 9px;
  color: #8494a8;
  display: block;
  margin-top: 4px;
}
.avatar {
  display: grid;
  place-items: center;
  background: #263444;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 12px;
  color: #bfd0e0;
  margin-left: 6px;
}
.status-dot {
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 8px #7de4d130;
  display: inline-block;
}
.page-width {
  max-width: 1450px;
  margin: auto;
  padding: 0 5.6%;
}
.page-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  margin-bottom: 10px;
}
.lobby > .hero:first-child { margin-top: 18px; }
.eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #8194a9;
  display: block;
}
.little-label {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero {
  border: 1px solid #29404a;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  min-height: 437px;
  background:
    radial-gradient(ellipse at 81% 37%, #21484170, transparent 47%),
    linear-gradient(120deg, #162a32 0%, #101c29 49%, #101725 100%);
  position: relative;
}
.hero:after {
  content: "";
  position: absolute;
  width: 1px;
  right: 10%;
  height: 100%;
  background: linear-gradient(transparent, #8ddddb14, transparent);
  pointer-events: none;
}
.hero-copy {
  padding: 46px 0 43px 46px;
  position: relative;
  z-index: 1;
}
.hero-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a2dcd4;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.7px;
  margin-bottom: 25px;
}
.hero h1 {
  font-size: clamp(39px, 4.3vw, 61px);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -2.8px;
}
.hero h1 span {
  color: #b6cacd;
}
.hero-copy > p {
  font-size: 13px;
  color: #97b0ba;
  line-height: 1.9;
  margin-top: 22px;
}
.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 7px;
  padding: 12px 19px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
.primary {
  background: var(--teal);
  color: #0b2929;
  border: 1px solid var(--teal);
}
.primary:hover:not(:disabled) {
  background: #a1f2e2;
  border-color: #a1f2e2;
  transform: translateY(-1px);
}
.secondary {
  background: #121e2b;
  border: 1px solid #304252;
  color: #bfd0df;
}
.secondary:hover:not(:disabled) {
  background: #1d2c3b;
  border-color: #4c6579;
}
.primary.large {
  padding: 14px 23px;
  font-size: 13px;
  margin-top: 27px;
}
.compact {
  padding: 9px 12px;
  font-size: 11px;
}
.hero-proof {
  display: flex;
  gap: 20px;
  font-size: 9px;
  color: #a0b4bf;
  margin-top: 24px;
}
.hero-proof span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-proof svg {
  color: #75b1ac;
}
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.hero-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.23;
  background-image: radial-gradient(#90b5c2 1px, transparent 1px);
  background-size: 71px 83px;
  mask-image: linear-gradient(90deg, transparent, #fff);
}
.orbital-ring {
  position: absolute;
  border: 1px solid #a0d6db13;
  border-radius: 50%;
  width: 450px;
  height: 450px;
  transform: rotate(-22deg) scaleY(0.62);
}
.r2 {
  width: 590px;
  height: 590px;
  transform: rotate(-22deg) scaleY(0.62);
  border-style: dashed;
}
.visual-coordinate {
  position: absolute;
  right: 27px;
  top: 28px;
  color: #6b8e97;
  font:
    8px "Courier New",
    monospace;
  letter-spacing: 2px;
}
.card-fan {
  width: 340px;
  height: 290px;
  position: relative;
  margin: 8px 10px 0 0;
  perspective: 1000px;
}
.card-art {
  background: #131e2a;
  border: 1px solid #425365;
  overflow: hidden;
  border-radius: 7px;
  aspect-ratio: 2.5/3.5;
  padding: 0;
  position: relative;
  display: block;
  text-align: left;
}
.card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 12px;
  background: radial-gradient(ellipse at top, #244653, #101823);
  text-align: center;
}
.card-fallback strong {
  font-size: 13px;
}
.card-fallback small {
  font-size: 10px;
  color: #a7bbc7;
}
.card-fallback svg {
  color: #78ada9;
}
.fan-card {
  position: absolute;
  width: 156px;
  top: 39px;
  box-shadow: 0 18px 35px #0008;
  border: 1px solid #527079;
}
.fan-0 {
  left: 8px;
  transform: rotate(-16deg) translateY(17px);
  z-index: 1;
}
.fan-1 {
  left: 94px;
  transform: rotate(0deg);
  z-index: 3;
  top: 20px;
  width: 169px;
}
.fan-2 {
  left: 195px;
  transform: rotate(15deg) translateY(13px);
  z-index: 2;
}
.visual-caption {
  position: absolute;
  bottom: 27px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9dbabc;
  font-size: 10px;
  letter-spacing: 3px;
}
.visual-caption > span:last-child {
  font-size: 7px;
  color: #739093;
  letter-spacing: 2px;
  border-left: 1px solid #42656a;
  padding-left: 10px;
}
.tiny-diamond {
  height: 5px;
  width: 5px;
  transform: rotate(45deg);
  background: #82c3bc;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
}
.section-heading h2 {
  font-size: 24px;
  font-weight: 550;
  letter-spacing: -0.8px;
  margin-top: 8px;
}
.quiet-label {
  color: #7c8fa5;
  font-size: 10px;
}
.library-section {
  margin-top: 42px;
}
.library-grid {
  display: grid;
  grid-template-columns: 1fr 257px;
  gap: 20px;
}
.game-feature {
  display: flex;
  align-items: center;
  gap: 25px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(115deg, #151e2b, #111923);
  padding: 29px 26px;
}
.game-insignia {
  align-self: stretch;
  width: 101px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #3b4e4f55, #192431);
  border: 1px solid #344551;
  border-radius: 8px;
  color: #e1cba0;
  overflow: hidden;
  position: relative;
}
.game-insignia:after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid #64747d30;
}
.inline-tags {
  display: flex;
  gap: 6px;
}
.tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid #2d3a48;
  border-radius: 4px;
  color: #98aabc;
  padding: 4px 7px;
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 600;
}
.tag.teal {
  color: #81c5b8;
  background: #173330;
  border-color: #294b44;
}
.game-description {
  flex: 1;
  min-width: 0;
}
.game-description h3 {
  font-size: 26px;
  letter-spacing: -0.8px;
  margin-top: 14px;
  font-weight: 600;
}
.game-description h3 span {
  font-size: 10px;
  font-weight: 450;
  letter-spacing: 0;
  color: #9fb0c3;
  display: block;
  margin-top: 5px;
}
.game-description p {
  font-size: 11px;
  line-height: 1.7;
  color: #8598ad;
  max-width: 400px;
  margin-top: 13px;
}
.game-meta {
  display: flex;
  gap: 17px;
  margin-top: 18px;
  color: #9eb0bd;
  font-size: 9px;
}
.game-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.game-entry {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  align-self: flex-end;
  margin-bottom: 6px;
}
.game-entry .primary {
  padding: 11px 21px;
}
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #91bbb8;
  background: transparent;
  font-size: 11px;
  padding: 0;
}
.text-button:hover {
  color: #b7f2e6;
}
.platform-note {
  background: #101923;
  border: 1px solid #27323e;
  border-radius: 12px;
  padding: 24px;
}
.note-icon {
  color: #8fa6b4;
}
.platform-note h3 {
  font-size: 19px;
  letter-spacing: -0.4px;
  font-weight: 500;
  margin-top: 17px;
  line-height: 1.3;
}
.platform-note p {
  font-size: 10px;
  color: #889caf;
  line-height: 1.7;
  margin-top: 12px;
}
.note-rule {
  height: 1px;
  background: #233341;
  margin: 18px 0 12px;
}
.platform-note small {
  font-size: 8px;
  letter-spacing: 0.5px;
  color: #6e899b;
}
.saved-section {
  margin-top: 43px;
  margin-bottom: 25px;
}
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1c2a36;
  color: #91a9ba;
  border: 1px solid #293b49;
  border-radius: 5px;
  font-size: 10px;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  vertical-align: middle;
  letter-spacing: 0;
  margin-left: 7px;
}
.match-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.match-row {
  background: #111a25;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 19px 23px;
  gap: 16px;
  border-bottom: 1px solid #24303d;
}
.match-row:last-child {
  border-bottom: 0;
}
.match-row:hover {
  background: #192534;
}
.table-list-entry {
  display: flex;
  align-items: stretch;
  background: #111a25;
  border-bottom: 1px solid #24303d;
}
.table-list-entry:last-child {
  border-bottom: 0;
}
.table-list-entry .match-row {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.table-list-entry .match-title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.table-list-entry .match-symbol,
.table-list-entry .match-saved,
.table-list-entry .resume-label {
  flex-shrink: 0;
}
.table-remove {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px;
  margin-right: 12px;
  border: 1px solid #35404b;
  border-radius: 6px;
  background: #17232f;
  color: #a1acb8;
  font-size: 10px;
}
.table-remove:hover {
  border-color: #bd7979;
  color: #e0aaaa;
}
.table-remove span {
  max-width: 92px;
}
.match-title .table-reference {
  color: #71869a;
  font-size: 8px;
}
@media (max-width: 600px) {
  .table-list-entry .match-row {
    padding: 15px 10px;
    gap: 8px;
  }
  .table-list-entry .match-saved,
.table-list-entry .resume-label {
    display: none;
  }
  .table-remove {
    flex-shrink: 0;
    margin-right: 9px;
    padding: 8px 6px;
    font-size: 9px;
  }
}
.match-symbol {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: #1b2c38;
  color: #9abfbe;
  display: grid;
  place-items: center;
}
.match-title strong {
  font-size: 12px;
  font-weight: 550;
}
.match-title small {
  font-size: 10px;
  color: #8195aa;
  margin-top: 6px;
  display: block;
}
.match-title small span {
  padding: 0 5px;
}
.match-saved {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
}
.match-saved > span {
  font-size: 9px;
  display: flex;
  gap: 5px;
  color: #95c1ad;
  align-items: center;
}
.match-saved small {
  font-size: 9px;
  color: #7a8da1;
}
.resume-label {
  display: flex;
  gap: 14px;
  font-size: 10px;
  margin-left: 29px;
  color: #b3c8d4;
}
.join-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 10px;
  color: #7e91a6;
}
.join-row .icon-button {
  margin-left: 8px;
}
.empty {
  border: 1px dashed #2b3a49;
  border-radius: 12px;
  padding: 34px 20px;
  text-align: center;
  background: #10192388;
  color: #8098aa;
}
.empty svg {
  color: #516b7e;
}
.empty h3 {
  font-size: 14px;
  font-weight: 550;
  color: #b2c4d1;
  margin-top: 14px;
}
.empty p {
  font-size: 11px;
  line-height: 1.7;
  margin-top: 7px;
}
.site-footer {
  max-width: 1450px;
  margin: 45px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 5.6%;
  border-top: 1px solid #1d2935;
  color: #6e8399;
  font-size: 9px;
  gap: 15px;
}
.site-footer > span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  color: #91a9b8;
}
.site-footer .brand-mark {
  transform: scale(0.55);
  margin: -7px -5px;
}
.site-footer a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-dot {
  padding: 0 8px;
}
.loading-screen {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  padding: 30px;
}
.loading-screen h1 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -1px;
}
.sign-in-screen {
  gap: 16px;
}
.sign-in-screen > p,
.sign-in-screen > small {
  max-width: 440px;
  line-height: 1.7;
}
.sign-in-screen > small {
  color: var(--muted);
  font-size: 11px;
}
.sign-in-screen .primary {
  text-decoration: none;
}
.loading-screen h2 {
  font-size: 20px;
  font-weight: 500;
}
.loading-screen p {
  font-size: 13px;
  color: var(--muted);
}
.spinner {
  height: 17px;
  width: 17px;
  border: 2px solid #76cbb433;
  border-top-color: var(--teal);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.error-notice {
  background: #3b2728;
  border: 1px solid #774442;
  color: #f1c4b7;
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 12px 0;
  overflow-wrap: anywhere;
}
.error-notice .text-button {
  white-space: nowrap;
  color: #f2d7bb;
}
.modal {
  background: #121c29;
  color: #e5edf5;
  border: 1px solid #3c5262;
  border-radius: 16px;
  padding: 28px;
  width: min(530px, calc(100vw - 28px));
  max-height: 90vh;
  box-shadow: 0 30px 130px #000b;
  overscroll-behavior: contain;
}
.modal::backdrop {
  background: #050a12b8;
  backdrop-filter: blur(7px);
}
.modal.wide {
  width: min(810px, calc(100vw - 28px));
}
.modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.modal h2 {
  font-size: 24px;
  letter-spacing: -0.5px;
  font-weight: 550;
  margin-top: 9px;
}
.icon-button {
  background: transparent;
  border: 1px solid #304151;
  color: #93aabb;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
}
.icon-button:hover {
  background: #263a47;
  color: #c2ebe2;
}
.modal-intro {
  font-size: 12px;
  line-height: 1.7;
  color: #99acbe;
  margin-bottom: 20px;
}
.deck-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deck-option {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid #324355;
  border-radius: 9px;
  padding: 16px;
  background: #101925;
  text-align: left;
}
.deck-option.selected {
  border-color: #6acbb6;
  background: #17312f;
}
.affiliation-dot {
  width: 9px;
  height: 27px;
  border-radius: 3px;
  background: #659ac5;
  display: block;
  flex-shrink: 0;
}
.deck-art {
  display: flex;
  flex-shrink: 0;
}
.deck-art img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #c9a75a;
  box-shadow: 0 2px 6px #0008;
}
.deck-art > * + * {
  margin-left: -12px;
}
/* A face framed out of a card scan, or initials when a card has no art: the same gold-rimmed circle as the portraits. */
.deck-art .deck-face {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid #c9a75a;
  box-shadow: 0 2px 6px #0008;
  background: #0d1719;
}
.deck-art .deck-face img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}
.deck-art .deck-face.is-initials {
  background: linear-gradient(160deg, #e3cb93, #b99a5c 70%, #9a7c43);
  color: #5a1a14;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.affiliation-dot.klingon {
  background: #d88070;
}
.affiliation-dot.romulan {
  background: #81bc8b;
}
.deck-option strong {
  font-size: 13px;
  font-weight: 550;
}
.deck-option small {
  display: block;
  font-size: 10px;
  color: #8fa9b8;
  margin-top: 5px;
}
.radio-mark {
  width: 15px;
  height: 15px;
  border: 1px solid #698491;
  border-radius: 50%;
  margin-left: auto;
  display: grid;
  place-items: center;
}
.radio-mark > span {
  height: 7px;
  width: 7px;
  background: var(--teal);
  border-radius: 50%;
}
.selected .radio-mark {
  border-color: var(--teal);
}
.deck-description {
  font-size: 11px;
  color: #8aa5b2;
  line-height: 1.7;
  padding: 12px 4px 0;
}
.difficulty {
  margin-top: 25px;
}
.field-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  font-weight: 550;
  color: #b7c8d6;
  margin-bottom: 12px;
}
.segmented {
  display: flex;
  padding: 4px;
  border: 1px solid #2b3d4d;
  border-radius: 8px;
  background: #0e1723;
}
.segmented button {
  flex: 1;
  padding: 10px 9px;
  background: transparent;
  border-radius: 5px;
  color: #7e96ab;
  font-size: 11px;
}
.segmented button.selected {
  background: #293d4c;
  color: #e0edf3;
}
.difficulty > small {
  font-size: 10px;
  color: #6f8b9d;
  display: block;
  margin-top: 10px;
}
.modal-bottom {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 21px;
  border-top: 1px solid #293b49;
}
.modal-bottom > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #8ba6b1;
}
.fine-print {
  font-size: 10px;
  color: #7f96a9;
  line-height: 1.65;
  margin-top: 15px;
}
.inspect-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 27px;
}
.inspect-layout > .card-art {
  width: 100%;
  align-self: start;
}
.inspect-copy .tag {
  margin-top: 3px;
}
.inspect-copy h3 {
  font-size: 16px;
  margin-top: 13px;
  color: #b9cbd8;
}
.card-facts {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #a1b6c6;
  margin: 16px 0;
}
.rule-text {
  font-size: 13px;
  line-height: 1.8;
  color: #d1dee9;
  white-space: pre-line;
  margin-top: 12px;
}
.lore {
  font-size: 11px;
  line-height: 1.8;
  font-style: italic;
  color: #849cad;
  margin-top: 20px;
}
.skills {
  font-size: 12px;
  color: #e0c493;
  line-height: 1.7;
}
.stat-grid {
  display: flex;
  gap: 22px;
  margin: 24px 0;
}
.stat-grid small {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #91a7b9;
  display: block;
}
.stat-grid strong {
  font-size: 24px;
  font-weight: 450;
  margin-top: 5px;
  display: block;
}
.inspector-actions {
  border-top: 1px solid #304350;
  padding-top: 15px;
  margin-top: 15px;
}
.inspector-actions h4 {
  font-size: 12px;
  margin-bottom: 12px;
  color: #9eb4c5;
}
.inspector-actions .action-button {
  margin: 7px 0;
}
.reference-notice {
  padding: 12px;
  border-radius: 7px;
  background: #423725;
  font-size: 12px;
  line-height: 1.7;
  color: #dfc391;
  margin-top: 20px;
}
.arena {
  padding: 0 26px 35px;
  max-width: 1800px;
  margin: auto;
}
.arena-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 101px;
  gap: 20px;
}
.arena-title-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.arena-title-left > .icon-button {
  padding: 10px;
}
.arena-title h1 {
  font-size: 25px;
  font-weight: 550;
  letter-spacing: -0.5px;
  margin-top: 8px;
}
.phase-pill {
  display: inline-block;
  vertical-align: middle;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #dbc490;
  background: #403823;
  border: 1px solid #665333;
  border-radius: 4px;
  padding: 5px 8px;
  margin-left: 10px;
}
.arena-status {
  display: flex;
  align-items: center;
  gap: 16px;
}
.save-status {
  font-size: 10px;
  color: #8ec7ac;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.save-status.saving {
  color: var(--amber);
}
.save-status.offline {
  color: #eeae93;
}
.revision {
  font-size: 9px;
  color: #5d788d;
}
.arena-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: start;
  gap: 20px;
}
.game-table {
  background: radial-gradient(ellipse at 50% 40%, #172b33 0%, #0f1925 50%, #111a27 100%);
  border: 1px solid #283c4a;
  border-radius: 13px;
  overflow: hidden;
}
.player-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: #0f1823e3;
  border-bottom: 1px solid #233442;
  border-top: 1px solid #233442;
}
.player-strip:first-child {
  border-top: 0;
}
.player-avatar {
  height: 35px;
  width: 35px;
  border-radius: 9px;
  background: #253544;
  color: #a4bccb;
  display: grid;
  place-items: center;
}
.active-player .player-avatar {
  border: 1px solid #5dbca5;
  background: #23433e;
  color: #9cdecd;
}
.player-name strong {
  font-size: 11px;
  font-weight: 600;
}
.player-name strong > span {
  font-size: 7px;
  letter-spacing: 1px;
  color: #6eaa9c;
  margin-left: 5px;
}
.player-name small {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  color: #718d9e;
}
.player-resources {
  display: flex;
  gap: 16px;
  margin-left: auto;
}
.player-resources > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8da5b8;
}
.player-resources b {
  font-weight: 500;
  font-size: 12px;
  color: #c5d5e2;
}
.player-resources small {
  font-size: 9px;
}
.player-resources .counter-resource b {
  color: var(--amber);
}
.score {
  border-left: 1px solid #2d4253;
  padding-left: 18px;
  margin-left: 8px;
}
.score strong {
  font-size: 24px;
  font-weight: 550;
}
.score span {
  font-size: 9px;
  color: #738fa1;
  margin-left: 4px;
}
/* The local player's summary shares the hand's height instead of adding a row. */
.hand-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 18px 7px;
}
.hand-heading h2 {
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}
.hand-heading > span {
  font-size: 8px;
  color: #6e8ca1;
}
.hand-heading > .text-button {
  margin-left: auto;
  font-size: 9px;
}
.hand-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 18px 20px;
  min-height: 196px;
  align-items: flex-start;
  scrollbar-width: thin;
}
.hand-card {
  width: 112px;
  flex-shrink: 0;
}
.hand-card .card-art {
  width: 100%;
  border-color: #52697a;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.hand-card .card-art:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px #0008;
  border-color: #99c6c3;
}
.hand-card-label {
  padding-top: 6px;
  font-size: 8px;
  color: #9ab4c8;
  line-height: 1.4;
}
.hand-card-label strong {
  font-weight: 500;
  display: block;
}
.hand-card-label > span {
  display: block;
  color: #628099;
  font-size: 7px;
  margin-top: 3px;
}
.empty-hand {
  font-size: 11px;
  color: #668599;
  margin: auto;
}
.command-panel {
  border: 1px solid #2c3f4f;
  border-radius: 12px;
  background: #101b28;
  overflow: hidden;
  position: sticky;
  top: 15px;
  max-height: calc(100vh - 30px);
  display: flex;
  flex-direction: column;
}
.command-tabs {
  display: flex;
  border-bottom: 1px solid #2b3d4c;
  padding: 0 15px;
  gap: 28px;
}
.command-tabs button {
  padding: 17px 0;
  background: transparent;
  color: #748fa4;
  font-size: 12px;
  border-bottom: 2px solid transparent;
}
.command-tabs button.active {
  color: #cfe4e4;
  border-bottom-color: var(--teal);
}
.command-tabs button > span {
  font-size: 9px;
  background: #29443f;
  border-radius: 4px;
  padding: 2px 5px;
  color: #99cbbb;
  margin-left: 5px;
}
.command-intro {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 17px 16px;
  color: #abc7d3;
  font-size: 11px;
}
.command-intro > svg,
.command-intro > .spinner {
  margin-left: auto;
  color: #628d93;
}
.decision-light {
  height: 6px;
  width: 6px;
  background: #8e9eaf;
  border-radius: 50%;
}
.decision-light.your-decision {
  background: var(--teal);
  box-shadow: 0 0 10px #7de4d144;
}
.choice-prompt {
  padding: 14px 15px;
  margin: 0 12px 12px;
  background: #233735;
  border: 1px solid #3d6356;
  border-radius: 8px;
}
.choice-prompt .eyebrow {
  color: #83baa9;
  font-size: 7px;
}
.choice-prompt h3 {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 8px;
  color: #cce5d9;
}
.choice-cards {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  margin-top: 10px;
}
.choice-cards .card-art {
  width: 80px;
  flex-shrink: 0;
}
.action-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 12px 10px;
  background: #0e1723;
  border: 1px solid #293d4e;
  border-radius: 6px;
  padding: 0 10px;
  color: #64899b;
}
.action-search input {
  border: 0;
  background: transparent;
  padding: 9px 0;
  min-width: 0;
  width: 100%;
  font-size: 10px;
}
.action-list {
  overflow-y: auto;
  padding: 0 12px 14px;
  scrollbar-width: thin;
  min-height: 70px;
  max-height: calc(100vh - 275px);
}
.action-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: #1d303e;
  border: 1px solid #2c4a57;
  color: #cae1e7;
  border-radius: 7px;
  padding: 12px 9px;
  text-align: left;
  margin-bottom: 7px;
}
.action-button:hover:not(:disabled) {
  background: #294953;
  border-color: #6dadae;
}
.action-button > span:nth-child(2) {
  flex: 1;
}
.action-button strong {
  font-weight: 550;
  font-size: 10px;
  line-height: 1.5;
  display: block;
}
.action-button small {
  display: block;
  font-size: 8px;
  color: #7fa4b4;
  margin-top: 4px;
  text-transform: capitalize;
}
.action-button > svg:last-child {
  color: #7ca5b1;
  margin-left: auto;
}
.action-type-icon {
  color: #83bbb9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
}
.subtle-action {
  background: #192636;
  border-color: #2a3d4e;
}
.command-footer {
  display: flex;
  gap: 9px;
  color: #658c9e;
  border-top: 1px solid #2a3e4e;
  padding: 14px 16px;
  margin-top: auto;
  align-items: center;
}
.command-footer span {
  font-size: 8px;
  line-height: 1.7;
}
.command-panel .empty {
  border: 0;
  background: transparent;
  padding: 30px 10px;
}
.command-panel .empty h3 {
  font-size: 12px;
}
.command-panel .empty p {
  font-size: 10px;
}
.game-log {
  padding: 17px 15px;
  overflow-y: auto;
  max-height: calc(100vh - 110px);
}
.log-entry {
  display: flex;
  gap: 9px;
  border-bottom: 1px solid #223748;
  padding: 10px 0;
  color: #9cb4c7;
  font-size: 10px;
  line-height: 1.8;
}
.log-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #56877f;
  margin-top: 7px;
  flex-shrink: 0;
}
.waiting-banner,
.result-banner {
  background: #18332f;
  border: 1px solid #416659;
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 9px;
  padding: 16px 20px;
  margin-bottom: 18px;
  color: #a7d5c7;
}
.waiting-banner div,
.result-banner div {
  flex: 1;
}
.waiting-banner strong {
  font-size: 13px;
  display: block;
  color: #cce8dd;
}
.waiting-banner span {
  font-size: 11px;
  display: block;
  margin-top: 5px;
  color: #90b6ab;
}
.result-banner h2 {
  font-size: 21px;
  font-weight: 500;
}
.result-banner p {
  font-size: 12px;
  margin-top: 7px;
}
.is-stopped {
  opacity: 0.6;
}
.stopped-tag {
  position: absolute;
  bottom: 8px;
  left: 5px;
  background: #554125;
  padding: 3px 5px;
  font-size: 8px;
  color: #e0c494;
  border-radius: 3px;
}
.ai-art-tag {
  position: absolute;
  bottom: 4px;
  right: 4px;
  max-width: calc(100% - 8px);
  padding: 2px 5px;
  font-size: 9px;
  line-height: 1.2;
  color: #f3e3b8;
  background: rgba(20, 14, 6, 0.82);
  border: 1px solid rgba(224, 196, 148, 0.6);
  border-radius: 3px;
  pointer-events: none;
}
.ai-art-note {
  margin: 8px 0 0;
  font-size: 12px;
  font-style: italic;
  color: #c9b68a;
}
.library-heading h1 {
  font-size: 39px;
  font-weight: 550;
  letter-spacing: -1.5px;
  margin-top: 12px;
}
.library-heading h1 > span {
  color: var(--teal);
}
.library-heading p {
  font-size: 12px;
  color: #869fb3;
  margin-top: 12px;
}
.catalog-layout.with-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 25px;
  align-items: start;
}
.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 13px;
}
.search-field {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #314657;
  background: #101b29;
  border-radius: 7px;
  padding: 0 14px;
  color: #769aad;
  flex: 1;
}
.search-field input {
  background: transparent;
  border: 0;
  padding: 13px 0;
  width: 100%;
  font-size: 12px;
  min-width: 0;
}
.catalog-toolbar > select {
  font-size: 11px;
  min-width: 130px;
}
.catalog-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #91a9bc;
  margin: 20px 0 10px;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #839fb1;
  cursor: pointer;
}
.checkbox-label input {
  margin: 0;
  width: 12px;
  height: 12px;
}
/* Virtualized grid: JS reads these (breakpoint-dependent) numbers to lay rows out. */
.catalog-grid {
  --catalog-min: 132;
  --catalog-gap-x: 20;
  --catalog-gap-y: 24;
  --catalog-cols: 0;
  position: relative;
}
.catalog-row {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
}
.catalog-cell {
  min-width: 0;
  height: 100%;
}
.catalog-cell > .catalog-card {
  height: 100%;
}
.catalog-card {
  min-width: 0;
  position: relative;
}
.catalog-card-art { position: relative; }
.catalog-card-art > .card-art {
  width: 100%;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  border-color: #3c5265;
}
.catalog-card-art > .card-art:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px #0006;
  border-color: #7da7a8;
}
.catalog-card-copy {
  margin-top: 9px;
  padding: 0 2px;
  height: var(--catalog-copy-h, 64px);
  overflow: hidden;
}
.catalog-card-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 10px;
  font-weight: 550;
  line-height: 1.6;
  color: #bacddc;
}
.catalog-card-copy span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 8px;
  color: #6f91a8;
  margin-top: 4px;
}
.reference-tag {
  position: absolute;
  top: 7px;
  left: 5px;
  background: #152230ee;
  border: 1px solid #486073;
  color: #a8c2d2;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 7px;
  pointer-events: none;
}
.card-add {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  color: #123b34;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px #0008;
}
.card-add:disabled {
  display: none;
}
.load-more {
  margin: 32px auto 0;
  display: flex;
}
.load-more span {
  font-size: 10px;
  color: #7a9aad;
}
.deck-builder {
  border: 1px solid #324a5c;
  background: #121f2c;
  border-radius: 11px;
  padding: 17px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.builder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.builder-heading .eyebrow {
  font-size: 8px;
}
.builder-heading .icon-button {
  border: 0;
  padding: 3px;
}
.deck-name-field {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  color: #bfd0df;
  font-size: 13px;
}
.deck-name-input {
  border: 1px solid #59778d;
  background: #0b1621;
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 12px;
  width: 100%;
  min-height: 44px;
  border-radius: 7px;
  margin: 0;
}
.deck-builder .fine-print {
  font-size: 9px;
  margin-top: 11px;
}
.builder-sections > section {
  margin-top: 22px;
}
.builder-sections h3 {
  font-size: 11px;
  color: #bbcfda;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 11px;
  border-bottom: 1px solid #304657;
}
.builder-sections h3 span {
  font-size: 10px;
  color: #8bb9b1;
}
.deck-card-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 0;
  border-bottom: 1px solid #213748;
}
.deck-card-name {
  padding: 0;
  background: transparent;
  text-align: left;
  font-size: 9px;
  color: #a0bed0;
  flex: 1;
  line-height: 1.6;
}
.deck-card-name:hover {
  color: #d2f3e8;
}
.game-options {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid #304657;
  border-radius: 8px;
  min-width: 0;
}
.game-options legend {
  padding: 0 7px;
  color: #c6dfda;
  font-size: 12px;
}
.game-option-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.game-option-field + .game-option-field {
  margin-top: 14px;
}
.game-option-select {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.game-option-select select {
  width: 100%;
  min-width: 0;
}
.bot-deck-field {
  margin-bottom: 18px;
}
.game-option-field input {
  accent-color: #65d5bd;
  margin-top: 3px;
  flex-shrink: 0;
}
.game-option-field strong {
  display: block;
  font-size: 12px;
  color: #d5e7e2;
}
.game-option-field small {
  display: block;
  color: #8ea9b8;
  font-size: 11px;
  line-height: 1.65;
  margin-top: 3px;
}
.game-options-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid #394740;
  border-radius: 6px;
  background: #1d2b29;
  color: #d0c6a1;
  font-size: 11px;
}
.game-options-summary > span {
  color: #9aada5;
}
/* Viewport arenas fit the table to the screen: keep the settings summary on one slim line. */
.arena-viewport > .game-options-summary {
  padding: 3px 12px;
  margin-bottom: 6px;
}
.rule-adaptation-note {
  padding: 12px 15px;
  margin: 12px 0;
  border: 1px solid #66583a;
  border-radius: 7px;
  background: #302b203b;
  color: #c8bc9f;
  line-height: 1.6;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.rule-adaptation-note > strong,
.rule-adaptation-note > summary {
  color: #e1cea0;
  font-size: 12px;
}
.rule-adaptation-note > summary {
  cursor: pointer;
  font-weight: 600;
}
.rule-adaptation-note p {
  margin: 5px 0 0;
}
.rule-adaptation-note small {
  display: block;
  margin-top: 6px;
  color: #a7a58f;
  font-size: 10px;
}
.bureau-assets h3 {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 500;
  color: #9fbab9;
}
.bureau-assets h3 span {
  margin-left: 5px;
  color: #6d8b90;
}
.quantity {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #83a99e;
}
.quantity button {
  background: #243b49;
  border: 1px solid #344f5c;
  border-radius: 3px;
  padding: 1px 5px;
  color: #9bbaca;
  font-size: 11px;
}
.quantity span {
  min-width: 12px;
  text-align: center;
}
.builder-buttons {
  display: flex;
  gap: 9px;
  margin-top: 17px;
}
.builder-buttons > button {
  flex: 1;
  font-size: 14px;
  padding: 10px 9px;
  gap: 7px;
}
.validation {
  margin-top: 16px;
  font-size: 10px;
  line-height: 1.7;
  padding: 11px;
  border-radius: 6px;
}
.validation.valid {
  background: #173b30;
  border: 1px solid #3f735c;
  color: #a4d6b7;
  display: flex;
  align-items: center;
  gap: 7px;
}
.validation.invalid {
  background: #3d3025;
  border: 1px solid #6e533c;
  color: #d6b999;
}
.validation ul {
  padding-left: 16px;
  margin: 7px 0 0;
}
.validation li {
  margin-top: 5px;
}
@media (min-width: 1550px) {
  .arena-grid {
    grid-template-columns: minmax(0, 1fr) 350px;
  }
  .hand-card {
    width: 130px;
  }
  .hero h1 {
    font-size: 61px;
  }
  .hero {
    min-height: 460px;
  }
}
@media (max-width: 1150px) {
  .site-header {
    gap: 40px;
    padding: 0 4%;
  }
  .page-width {
    padding-left: 4%;
    padding-right: 4%;
  }
  .hero-copy {
    padding-left: 33px;
  }
  .hero-proof {
    gap: 12px;
  }
  .hero-proof span {
    font-size: 8px;
  }
  .library-grid {
    grid-template-columns: 1fr 220px;
  }
  .game-feature {
    gap: 16px;
    padding: 23px 20px;
  }
  .game-insignia {
    width: 76px;
  }
  .game-entry {
    margin-bottom: 0;
  }
  .game-meta {
    flex-direction: column;
    gap: 7px;
  }
  .hero-visual .card-fan {
    transform: scale(0.88);
  }
  .arena {
    padding-left: 16px;
    padding-right: 16px;
  }
  .arena-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 13px;
  }
  .player-strip {
    padding: 13px 12px;
  }
  .player-resources {
    gap: 10px;
  }
  .catalog-layout.with-builder {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
  }
  .catalog-grid {
    --catalog-min: 118;
    --catalog-gap-x: 15;
    --catalog-gap-y: 22;
  }
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr 42%;
    min-height: 400px;
  }
  .hero h1 {
    font-size: 45px;
  }
  .hero-visual .card-fan {
    transform: scale(0.7);
    margin-left: -35px;
  }
  .visual-caption {
    right: 20px;
    font-size: 8px;
    letter-spacing: 2px;
  }
  .visual-caption > span:last-child {
    display: none;
  }
  .visual-coordinate {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .hero-proof {
    flex-direction: column;
    gap: 9px;
  }
  .hero-proof span {
    font-size: 9px;
  }
  .library-grid {
    grid-template-columns: 1fr;
  }
  .platform-note {
    display: none;
  }
  .game-feature {
    padding: 25px;
  }
  .game-insignia {
    width: 90px;
  }
  .game-meta {
    flex-direction: row;
    gap: 17px;
  }
  .game-entry {
    align-self: center;
  }
  .site-footer {
    padding: 25px 4%;
    font-size: 8px;
  }
  .site-footer > span:first-child {
    font-size: 9px;
  }
  .site-footer > span:nth-child(2) {
    display: none;
  }
  .arena-title {
    min-height: 90px;
  }
  .arena-title h1 {
    font-size: 23px;
  }
  .arena-status {
    gap: 10px;
  }
  .arena-status .revision {
    display: none;
  }
  .arena-grid {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 10px;
  }
  .player-resources > span small {
    display: none;
  }
  .player-name strong {
    font-size: 10px;
  }
  .score {
    padding-left: 9px;
    margin-left: 0;
  }
  .score strong {
    font-size: 21px;
  }
  .hand-heading > span {
    display: none;
  }
  .arena .eyebrow {
    font-size: 7px;
  }
  .action-button {
    padding: 10px 7px;
    gap: 6px;
  }
  .action-button strong {
    font-size: 9px;
  }
  .command-tabs {
    gap: 24px;
  }
  .arena-title-left > .icon-button {
    padding: 7px;
  }
  .catalog-layout.with-builder {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
  }
  .catalog-toolbar {
    flex-wrap: wrap;
  }
  .catalog-toolbar .search-field {
    min-width: 100%;
  }
  .catalog-toolbar > select {
    padding: 9px;
    font-size: 10px;
  }
  .catalog-status {
    gap: 10px;
    flex-wrap: wrap;
  }
  .library-heading .tag {
    display: none;
  }
  .catalog-grid {
    --catalog-min: 110;
    --catalog-gap-x: 13;
    --catalog-gap-y: 18;
  }
}
@media (max-width: 680px) {
  .site-header {
    height: 73px;
    gap: 23px;
    padding: 0 20px;
  }
  .brand {
    font-size: 22px;
    gap: 9px;
  }
  .brand-mark {
    transform: scale(0.88);
    margin-right: -2px;
  }
  .brand small {
    font-size: 6px;
    letter-spacing: 3px;
  }
  .site-header nav {
    gap: 18px;
  }
  .site-header nav a {
    font-size: 11px;
    gap: 6px;
  }
  .session-chip {
    gap: 0;
  }
  .session-chip > div,
.session-chip > .status-dot {
    display: none;
  }
  .avatar {
    height: 28px;
    width: 28px;
    margin: 0;
    font-size: 10px;
  }
  .site-header nav a svg {
    display: none;
  }
  .page-width {
    padding-left: 20px;
    padding-right: 20px;
  }
  .page-kicker {
    padding-top: 12px;
    margin-bottom: 9px;
  }
  .lobby > .hero:first-child { margin-top: 12px; }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  .little-label {
    font-size: 8px;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: 535px;
  }
  .hero-copy {
    padding: 30px 26px 25px;
  }
  .hero-tag {
    font-size: 8px;
    letter-spacing: 1.3px;
    margin-bottom: 19px;
  }
  .hero h1 {
    font-size: 43px;
    letter-spacing: -2px;
  }
  .hero-copy > p {
    font-size: 12px;
    line-height: 1.75;
    margin-top: 16px;
  }
  .primary.large {
    margin-top: 20px;
    padding: 13px 17px;
    font-size: 12px;
  }
  .hero-proof {
    flex-direction: row;
    gap: 14px;
    position: absolute;
    bottom: -186px;
    left: 25px;
    right: 15px;
  }
  .hero-proof span {
    font-size: 7px;
    gap: 5px;
  }
  .hero-proof svg {
    width: 12px;
  }
  .hero-visual {
    height: 185px;
    margin-top: -15px;
  }
  .hero-visual .card-fan {
    transform: scale(0.58);
    transform-origin: center top;
    margin: 0;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -170px;
    height: 260px;
  }
  .visual-caption {
    display: none;
  }
  .visual-coordinate {
    right: 14px;
    top: 125px;
    font-size: 5px;
  }
  .orbital-ring {
    height: 280px;
    width: 330px;
    top: -90px;
  }
  .r2 {
    width: 420px;
    height: 370px;
    top: -130px;
  }
  .fan-card {
    top: 0;
  }
  .fan-1 {
    top: -10px;
  }
  .section-heading h2 {
    font-size: 22px;
    margin-top: 7px;
  }
  .library-section {
    margin-top: 31px;
  }
  .section-heading {
    margin-bottom: 17px;
  }
  .quiet-label {
    font-size: 9px;
  }
  .game-feature {
    gap: 17px;
    padding: 21px 19px;
    flex-wrap: wrap;
  }
  .game-insignia {
    width: 60px;
    min-height: 110px;
    align-self: center;
  }
  .game-insignia svg {
    width: 40px;
  }
  .game-description {
    min-width: 160px;
  }
  .game-description h3 {
    font-size: 23px;
    margin-top: 12px;
  }
  .game-description h3 span {
    font-size: 9px;
    line-height: 1.6;
  }
  .tag {
    font-size: 6px;
    padding: 4px 5px;
    letter-spacing: 0.6px;
  }
  .game-description p {
    font-size: 10px;
    line-height: 1.7;
  }
  .game-meta {
    font-size: 8px;
    gap: 11px;
  }
  .game-entry {
    flex-direction: row;
    width: 100%;
    border-top: 1px solid #2b3a46;
    padding-top: 17px;
    justify-content: space-between;
  }
  .game-entry .primary {
    width: 95px;
  }
  .platform-note {
    display: none;
  }
  .saved-section {
    margin-top: 30px;
  }
  .saved-section .secondary {
    font-size: 10px;
    padding: 10px 12px;
    gap: 6px;
  }
  .match-row {
    padding: 16px 13px;
    gap: 10px;
  }
  .match-symbol {
    width: 32px;
    height: 32px;
  }
  .match-title strong {
    font-size: 10px;
  }
  .match-title small {
    font-size: 8px;
  }
  .match-saved small {
    font-size: 8px;
  }
  .match-saved > span {
    font-size: 8px;
  }
  .resume-label {
    margin-left: 4px;
    font-size: 0;
    gap: 0;
  }
  .resume-label svg {
    width: 16px;
  }
  .join-row {
    font-size: 9px;
    gap: 6px;
  }
  .join-row .text-button {
    font-size: 9px;
  }
  .join-row .icon-button {
    padding: 4px;
  }
  .empty {
    padding: 26px 16px;
  }
  .empty h3 {
    font-size: 12px;
  }
  .empty p {
    font-size: 10px;
  }
  .site-footer {
    margin-top: 30px;
    padding: 22px 20px;
    gap: 10px;
  }
  .site-footer a {
    font-size: 7px;
    gap: 4px;
  }
  .site-footer > span:first-child {
    font-size: 8px;
    gap: 8px;
  }
  .modal {
    padding: 22px;
  }
  .modal h2 {
    font-size: 22px;
  }
  .modal-bottom {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 15px;
  }
  .modal-bottom > span {
    justify-content: center;
    font-size: 9px;
  }
  .modal-bottom .primary {
    width: 100%;
  }
  .fine-print {
    font-size: 9px;
  }
  .inspect-layout {
    grid-template-columns: minmax(130px, 42%) 1fr;
    gap: 17px;
  }
  .inspect-layout > .card-art {
    position: sticky;
    top: 0;
  }
  .inspect-copy .tag {
    font-size: 7px;
  }
  .card-facts {
    font-size: 9px;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
  }
  .rule-text {
    font-size: 11px;
    line-height: 1.8;
  }
  .skills {
    font-size: 10px;
  }
  .inspect-copy h3 {
    font-size: 13px;
  }
  .lore {
    font-size: 9px;
  }
  .stat-grid {
    gap: 13px;
    flex-wrap: wrap;
    margin: 17px 0;
  }
  .stat-grid strong {
    font-size: 20px;
  }
  .stat-grid small {
    font-size: 6px;
  }
  .arena {
    padding: 0 10px 25px;
  }
  .arena-title {
    min-height: 105px;
    gap: 7px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 15px 1px;
  }
  .arena-title-left {
    gap: 10px;
  }
  .arena-title h1 {
    font-size: 22px;
  }
  .arena-status {
    margin-left: 45px;
    gap: 12px;
  }
  .save-status {
    font-size: 8px;
  }
  .arena-status .secondary {
    font-size: 8px;
    padding: 5px 8px;
  }
  .arena-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .game-table {
    width: 100%;
    border-radius: 9px;
  }
  .command-panel {
    width: 100%;
    position: static;
    max-height: none;
  }
  .player-strip {
    gap: 9px;
    padding: 11px 12px;
  }
  .player-avatar {
    width: 29px;
    height: 29px;
    border-radius: 6px;
  }
  .player-name strong {
    font-size: 10px;
  }
  .player-name small {
    font-size: 8px;
  }
  .player-resources {
    gap: 12px;
  }
  .player-resources b {
    font-size: 11px;
  }
  .player-resources > span small {
    display: inline;
    font-size: 7px;
  }
  .score strong {
    font-size: 22px;
  }
  .score {
    padding-left: 12px;
    margin-left: 3px;
  }
  .score span {
    font-size: 7px;
  }
  .hand-cards {
    padding: 10px 12px 17px;
    gap: 8px;
    min-height: 170px;
  }
  .hand-card {
    width: 96px;
  }
  .hand-heading {
    padding: 14px 12px 5px;
  }
  .hand-heading h2 {
    font-size: 11px;
  }
  .hand-heading > .text-button {
    font-size: 8px;
  }
  .hand-heading .count-badge {
    font-size: 9px;
    height: 17px;
    min-width: 18px;
  }
  .action-list {
    max-height: 450px;
  }
  .action-button {
    padding: 12px 10px;
  }
  .action-button strong {
    font-size: 11px;
  }
  .action-button small {
    font-size: 9px;
  }
  .command-intro {
    font-size: 11px;
  }
  .choice-prompt h3 {
    font-size: 13px;
  }
  .command-footer span {
    font-size: 9px;
  }
  .command-tabs button {
    font-size: 12px;
  }
  .game-log {
    max-height: 400px;
  }
  .waiting-banner,
.result-banner {
    padding: 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .waiting-banner strong {
    font-size: 11px;
  }
  .waiting-banner span {
    font-size: 9px;
  }
  .waiting-banner .primary {
    margin-left: 30px;
  }
  .result-banner h2 {
    font-size: 18px;
  }
  .result-banner p {
    font-size: 10px;
  }
  .result-banner .secondary {
    font-size: 10px;
  }
  .error-notice {
    font-size: 10px;
    padding: 10px 12px;
  }
  .library-heading h1 {
    font-size: 32px;
  }
  .library-heading p {
    font-size: 10px;
  }
  .catalog-layout.with-builder {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
  }
  .deck-builder {
    position: static;
    max-height: 550px;
    width: 100%;
    padding: 17px;
  }
  .catalog {
    width: 100%;
  }
  .catalog-toolbar {
    gap: 9px;
    flex-wrap: nowrap;
  }
  .catalog-toolbar .search-field {
    min-width: 0;
    padding: 0 9px;
  }
  .search-field input {
    font-size: 10px;
    padding: 11px 0;
  }
  .search-field svg {
    width: 15px;
  }
  .catalog-toolbar > select {
    font-size: 9px;
    min-width: 105px;
    padding: 11px 7px;
    max-width: 120px;
  }
  .catalog-grid {
    --catalog-cols: 3;
    --catalog-gap-x: 11;
    --catalog-gap-y: 20;
  }
  .catalog-card-copy strong {
    font-size: 8px;
  }
  .catalog-card-copy span {
    font-size: 7px;
  }
  .catalog-status {
    font-size: 9px;
  }
  .checkbox-label {
    font-size: 9px;
  }
  .reference-tag {
    font-size: 6px;
    padding: 2px 4px;
    top: 5px;
    left: 4px;
  }
  .card-add {
    width: 24px;
    height: 24px;
    bottom: 5px;
    right: 5px;
  }
  .load-more {
    font-size: 10px;
    padding: 11px 13px;
  }
  .load-more span {
    font-size: 8px;
  }
  .builder-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .deck-card-name {
    font-size: 10px;
  }
  .deck-builder .fine-print {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
*:before,
*:after {
    animation-duration: 0.01ms !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.generic-board-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px;
  min-height: 120px;
}
.generic-board-cards > .card-art {
  width: 110px;
}
.generic-board-status {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: #a3c0be;
}
.plugin-switcher {
  padding-top: 20px;
}
.plugin-switcher label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9db6c8;
  font-size: 11px;
}
.plugin-switcher select {
  font-size: 11px;
  padding: 9px 11px;
  max-width: 340px;
}
/* Public combat, capture, and response information supplied by the rules engine. */
.damage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border: 1px solid #86514a;
  background: #4b2d2a;
  border-radius: 4px;
  color: #f1b89e;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.damage-attachments {
  border-top: 1px solid #3a4752;
  margin-top: 18px;
  padding-top: 15px;
}
.damage-attachments h4 {
  font-size: 11px;
  font-weight: 550;
  color: #d5b19b;
  margin-bottom: 10px;
}
.damage-attachments > div {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.damage-attachments > div > div {
  width: 84px;
  flex-shrink: 0;
}
.damage-attachments .card-art {
  width: 100%;
  border-color: #785447;
}
.damage-attachments span {
  display: block;
  font-size: 8px;
  line-height: 1.5;
  margin-top: 5px;
  color: #c6b3a9;
}
.response-prompt {
  background: #332e25;
  border-color: #736043;
}
.response-prompt .eyebrow {
  color: #e0bd7d;
}
.response-prompt h3 {
  color: #e8d4ac;
}
.choice-explanation {
  font-size: 9px;
  color: #bba888;
  line-height: 1.7;
  margin-top: 8px;
}
.response-prompt .text-button {
  font-size: 9px;
  margin-top: 10px;
  color: #ddc590;
}
.response-pass {
  width: 100%;
  margin-top: 12px;
  border-color: #8e7146;
  background: #453a28;
  color: #edd7ad;
  justify-content: space-between;
  font-size: 10px;
  padding: 10px 12px;
}
.response-pass:hover:not(:disabled) {
  background: #5b4930;
  border-color: #c79c60;
}
.response-priority {
  box-shadow: inset 3px 0 #d6b172;
}
.response-priority .player-name small {
  color: #d0b17b;
}
.response-priority .player-avatar {
  border-color: #b59058;
  color: #e4c28c;
  background: #493b29;
}
@media (max-width: 680px) {
  .damage-attachments > div > div {
    width: 65px;
  }
  .damage-attachments h4 {
    font-size: 10px;
  }
  .choice-explanation {
    font-size: 10px;
  }
  .response-pass {
    font-size: 11px;
  }
}
.saved-deck-shelf {
  margin: 0 0 27px;
  border: 1px solid #2d4352;
  border-radius: 11px;
  background: #111e2b;
  padding: 18px;
}
.saved-deck-shelf > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}
.saved-deck-shelf > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8fc5b9;
}
.saved-deck-shelf h2 {
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.2px;
  color: #c5d9e3;
}
.saved-deck-shelf > header > span {
  font-size: 9px;
  color: #86a699;
}
.saved-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 10px;
}
.saved-deck-tile {
  content-visibility: auto;
  contain-intrinsic-size: auto 56px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #354c5d;
  border-radius: 8px;
  background: #172a38;
  padding: 5px 8px 5px 4px;
}
.saved-deck-tile.selected {
  border-color: #69af9d;
  background: #1b3938;
}
.saved-deck-open {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  background: transparent;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.saved-deck-open > svg {
  color: #84c1b1;
  flex-shrink: 0;
}
.saved-deck-open > span {
  flex: 1;
  min-width: 0;
}
.saved-deck-open strong {
  font-size: 11px;
  font-weight: 550;
  color: #c6dde4;
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.saved-deck-open small {
  display: block;
  font-size: 8px;
  color: #799cac;
  margin-top: 4px;
}
.saved-deck-tile > .icon-button {
  border: 0;
  padding: 5px;
  color: #7793a2;
}
.saved-deck-tile > .icon-button:hover {
  background: #55332d;
  color: #ebba9f;
}
.saved-deck-empty {
  font-size: 11px;
  line-height: 1.7;
  color: #819db2;
  margin: 5px 0 2px;
}
.builder-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0 12px;
}
.builder-secondary-actions .text-button {
  font-size: 14px;
  gap: 6px;
  min-height: 32px;
}
.builder-secondary-actions .text-button:disabled {
  opacity: 0.4;
}
/* Keep collection helper text readable at every viewport size. */
.deck-library :is(small, .fine-print, .catalog-status, .checkbox-label,
  .saved-deck-empty, .saved-deck-shelf > header > span, .load-more span, .section-guidance) {
  font-size: 13px;
  line-height: 1.6;
}
.deck-library :is(.saved-deck-open strong, .catalog-card-copy strong) {
  font-size: 14px;
}
.deck-library :is(.catalog-card-copy span, .deck-card-name, .builder-sections h3, .builder-sections h3 span) {
  font-size: 13px;
}
.deck-library :is(.eyebrow, .reference-tag) { font-size: 12px; }
@media (max-width: 600px) {
  .deck-library .catalog-grid { --catalog-cols: 2; }
}
.pending-deck-notice {
  font-size: 10px;
  color: #e0c18f;
  border: 1px solid #716047;
  background: #3a3225;
  padding: 11px;
  border-radius: 6px;
  line-height: 1.7;
  margin-top: 15px;
}
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #a26051;
  border-radius: 7px;
  background: #713f33;
  padding: 12px 19px;
  font-size: 12px;
  font-weight: 550;
  color: #f4d5bf;
}
.danger-button:hover:not(:disabled) {
  background: #8b4c3d;
  border-color: #c8886d;
}
.inspection-panel {
  padding: 13px;
  margin: 0 12px 12px;
  background: #1a2d3f;
  border: 1px solid #45647b;
  border-radius: 7px;
}
.inspection-panel .eyebrow {
  font-size: 7px;
  color: #92bddc;
}
.inspection-panel p {
  font-size: 9px;
  line-height: 1.7;
  color: #9bb9cf;
  margin-top: 8px;
}
.inspection-panel .choice-cards {
  margin-top: 11px;
}
.inspection-panel .choice-cards .card-art {
  width: 74px;
}
@media (max-width: 680px) {
  .saved-deck-shelf {
    padding: 14px;
    margin-bottom: 22px;
  }
  .saved-deck-shelf h2 {
    font-size: 13px;
  }
  .saved-deck-shelf > header > span {
    font-size: 8px;
  }
  .saved-deck-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .saved-deck-empty {
    font-size: 10px;
  }
  .saved-deck-open strong {
    font-size: 10px;
  }
  .inspection-panel p {
    font-size: 10px;
  }
}
/* Keep narrow page chrome inside the viewport; only card and mission strips scroll. */
.app,
#root,
.site-header,
.arena,
.arena-grid,
.game-table,
.command-panel,
.catalog,
.inspect-copy {
  min-width: 0;
}
.player-name {
  min-width: 0;
}
.player-name strong {
  overflow-wrap: anywhere;
}
.action-button > span:nth-child(2) {
  min-width: 0;
}
.action-button strong {
  overflow-wrap: anywhere;
}
.inspect-copy {
  overflow-wrap: anywhere;
}
@media (max-width: 400px) {
  .site-header {
    gap: 14px;
    padding: 0 14px;
  }
  .brand {
    font-size: 20px;
    gap: 7px;
  }
  .brand-mark {
    transform: scale(0.8);
    margin-right: -4px;
  }
  .site-header nav {
    gap: 13px;
    flex-shrink: 1;
    min-width: 0;
  }
  .site-header nav a {
    font-size: 10px;
    white-space: nowrap;
  }
  .session-chip {
    flex-shrink: 0;
  }
  .avatar {
    width: 26px;
    height: 26px;
    font-size: 9px;
  }
  .player-strip {
    gap: 8px;
    padding: 10px;
  }
  .player-avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }
  .player-name {
    flex: 1;
  }
  .player-name strong {
    font-size: 9px;
  }
  .player-name strong > span {
    display: none;
  }
  .player-name small {
    font-size: 7px;
  }
  .player-resources {
    gap: 8px;
    flex-shrink: 0;
  }
  .player-resources > span {
    flex-direction: column;
    gap: 3px;
  }
  .player-resources > span > svg {
    display: none;
  }
  .player-resources > span small {
    display: block;
    font-size: 6px;
  }
  .player-resources b {
    font-size: 10px;
  }
  .score {
    padding-left: 8px;
    margin-left: 0;
    flex-shrink: 0;
  }
  .score strong {
    font-size: 20px;
  }
  .score span {
    display: block;
    font-size: 6px;
    margin: 2px 0 0;
  }
  .inspect-layout {
    grid-template-columns: minmax(105px, 42%) minmax(0, 1fr);
    gap: 13px;
  }
  .plugin-switcher label {
    flex-wrap: wrap;
    gap: 8px;
  }
  .plugin-switcher select {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  .modal header {
    gap: 12px;
  }
  .modal h2 {
    overflow-wrap: anywhere;
  }
}

/* One game header replaces the separate site navigation and turn bars. */
.arena-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 72px;
  padding: 10px 0;
  gap: 24px;
}
.arena-header .brand {
  font-size: 22px;
  gap: 9px;
}
.arena-header .arena-title-left {
  min-width: 0;
}
.arena-header h1 {
  font-size: 20px;
  margin-top: 4px;
}
.arena-header .arena-status {
  margin-left: 0;
  gap: 10px;
}
.arena-header .session-chip {
  margin-left: 0;
  gap: 8px;
  min-width: 0;
}
.arena-header .session-chip > div {
  display: block;
  min-width: 0;
}
.arena-header .session-chip strong {
  overflow-wrap: anywhere;
  max-width: 160px;
}
.arena-header .session-chip small,
.arena-header .session-chip > .status-dot {
  display: none;
}
@media (max-width: 850px) {
  .arena-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    min-height: 0;
    align-items: center;
  }
  .arena-header .brand {
    grid-column: 1;
    grid-row: 1;
  }
  .arena-header .session-chip {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .arena-header .arena-title-left {
    grid-column: 1;
    grid-row: 2;
  }
  .arena-header .arena-status {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .arena-header .eyebrow {
    letter-spacing: 1px;
    line-height: 1.4;
  }
  .arena-header h1 {
    font-size: 18px;
  }
}

/* Gameplay labels stay readable at every breakpoint, including the compact hand. */
.arena :is(.damage-badge,
  .player-name strong,
  .player-name strong > span,
  .player-name small,
  .player-resources small,
  .score span,
  .hand-card-label,
  .hand-card-label > span,
  .hand-heading > span,
  .hand-heading > .text-button,
  .eyebrow,
  .phase-pill,
  .save-status,
  .revision,
  .session-chip strong,
  .command-tabs button > span,
  .command-intro,
  .action-search input,
  .action-button strong,
  .action-button small,
  .command-footer span,
  .log-entry,
  .choice-explanation,
  .response-prompt .text-button,
  .inspection-panel p,
  .stopped-tag) {
  font-size: 12px;
}

/* Mission metadata overlays the illustration instead of taking separate rows. */

.selected-card-actions { padding: 12px; margin: 0 12px 10px; border: 1px solid #536a79; border-radius: 8px; background: #172837; }
.selected-card-actions > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.selected-card-actions strong { font-size: 14px; }
.selected-card-actions p { margin: 8px 0 0; color: #a9bccb; font-size: 13px; line-height: 1.5; }

.games-landing { padding-top: 56px; padding-bottom: 64px; }
.games-intro { max-width: 680px; margin-bottom: 34px; }
.games-intro h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; margin: 14px 0; }
.games-intro p { color: #a8bbc9; font-size: 17px; line-height: 1.6; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 22px; }
.game-selector { display: flex; min-height: 220px; border: 1px solid #415a6d; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #203b4c, #101c29); color: #f0f7fc; text-decoration: none; transition: border-color .15s, transform .15s; }
.game-selector:hover { border-color: #89d3df; transform: translateY(-3px); }
.game-selector:focus-visible { outline: 3px solid #c7f5ff; outline-offset: 4px; }
.game-selector-art { width: 112px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #0c1722; overflow: hidden; }
.game-selector-art img { width: 100%; height: 100%; object-fit: cover; }
.game-selector-copy { min-width: 0; padding: 24px 20px; display: flex; flex-direction: column; }
.game-selector-copy h2 { font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.game-selector-copy p { color: #b7c9d6; font-size: 13px; line-height: 1.6; margin: 0 0 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.game-selector-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; font-size: 13px; font-weight: 600; color: #9bdded; }
.game-brand { font-size: 20px; max-width: 320px; }
.game-brand > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.brand-sub { display: block; font-size: 0.62em; font-weight: 600; letter-spacing: 0; color: #a9bacb; line-height: 1.2; }
/* "← Back to playtests" sits as a small link just above the game's brand. */
.brand-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.back-link { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #8fa3b3; text-decoration: none; }
.back-link:hover, .back-link:focus-visible { color: #cfe2ee; text-decoration: underline; }
@media (max-width: 800px) {
  .site-header { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .site-header nav { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; gap: 18px; }
  .games-landing { padding-top: 30px; }
  .game-brand { max-width: 70%; }
}
.game-buttons { display: flex; flex-wrap: wrap; gap: 9px; }
.game-buttons button { padding: 11px 17px; border: 1px solid #415a6d; border-radius: 8px; background: #142330; color: #c7d8e5; font-size: 15px; font-weight: 600; cursor: pointer; }
.game-buttons button:hover { background: #203b4c; border-color: #72b5c8; }
.game-buttons button[aria-pressed="true"] { background: #235968; color: #f0ffff; border-color: #89d3df; box-shadow: inset 0 -3px #89d3df; }
.game-buttons button:focus-visible { outline: 2px solid #c7f5ff; outline-offset: 3px; }

.game-buttons button { display: flex; align-items: center; gap: 11px; padding: 8px 15px 8px 8px; }
.game-button-art { width: 42px; height: 42px; flex: 0 0 42px; object-fit: cover; object-position: center 24%; border-radius: 5px; border: 1px solid #87b6c570; }

.arena-integrated .arena-grid { grid-template-columns: minmax(0, 1fr); }
.arena-integrated .game-table { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* Opt-in plugin layout: keep the hand available while the board manages its scroll area. */
.arena.arena-viewport { height:100dvh; min-height:540px; box-sizing:border-box; display:flex; flex-direction:column; padding-bottom:12px; }
.arena-viewport>.arena-header { flex-shrink:0; }
.arena-viewport>.arena-grid { flex:1; min-height:0; align-items:stretch; }
.arena-viewport .game-table { min-width:0; min-height:0; display:flex; flex-direction:column; gap:10px; }
.arena-board-slot { flex:1; min-width:0; min-height:0; display:flex; overflow:auto; }
.arena-hand-slot { flex-shrink:0; min-width:0; }
.arena-viewport .command-panel { min-height:0; overflow:auto; }
.plugin-workshop:has(>.arena-viewport) { height:100dvh; min-height:540px; display:flex; flex-direction:column; }
.plugin-workshop>.arena.arena-viewport { height:auto; min-height:0; flex:1; width:100%; }
@media (min-width: 851px) {
  .arena-integrated .arena-header { grid-template-columns: auto minmax(0,1fr) auto auto auto; gap: 14px; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 27px;
}
.hero-actions .primary.large,
.hero-actions .secondary.large {
  margin-top: 0;
  padding: 14px 23px;
  font-size: 13px;
}
.lobby-section {
  margin-top: 43px;
}
.lobby-list .lobby-row .match-row {
  cursor: default;
}
.lobby-list .lobby-row .match-row:hover {
  background: #111a25;
}
.lobby-action {
  align-self: center;
  margin-right: 14px;
  min-width: 64px;
}
.lobby-private {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 7px;
  border: 1px solid #3b4d5c;
  border-radius: 5px;
  color: #9fb4c4;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  vertical-align: middle;
}
.lobby-note {
  color: #9fb4c4;
  font-size: 11px;
  margin: 0 0 12px;
}
.room-access {
  margin-bottom: 14px;
}
.room-access > small {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  color: #6f8b9d;
}
.room-access .field-label {
  margin-top: 12px;
}
@media (max-width: 600px) {
  .hero-actions > button {
    flex: 1 1 100%;
  }
  .lobby-list .lobby-row .match-saved {
    display: none;
  }
}
.room-toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: calc(100vw - 32px);
}
.room-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: #14212d;
  border: 1px solid var(--teal);
  border-radius: 10px;
  color: #e0edf3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.room-toast-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 12px;
}
.room-toast-copy small {
  color: #8da5b6;
  font-size: 10px;
}
@media (max-width: 600px) {
  .room-toast {
    flex-wrap: wrap;
  }
}
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #9fb4c4;
  vertical-align: middle;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6f8b9d;
}
.live-status[data-state="live"] {
  color: #7de3a8;
}
.live-status[data-state="live"] .live-dot {
  background: #3ddc84;
  animation: live-pulse 1.8s ease-out infinite;
}
.live-status[data-state="reconnecting"] {
  color: #e6c36a;
}
.live-status[data-state="reconnecting"] .live-dot {
  background: #e6a93a;
}
@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(61, 220, 132, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-status[data-state="live"] .live-dot {
    animation: none;
  }
}/* Deck library: New deck split button */
.saved-deck-shelf > header > div { flex-wrap: wrap; }
.new-deck-split { position: relative; display: inline-flex; margin-left: 10px; }
.new-deck-split .new-deck-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.new-deck-split .new-deck-toggle { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; padding-left: 8px; padding-right: 8px; }
.new-deck-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 220px; padding: 5px; border: 1px solid #344b5c; border-radius: 9px; background: #121e2b; box-shadow: 0 14px 30px #000a; display: grid; gap: 2px; }
.new-deck-menu-title { padding: 6px 10px 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7c99ae; }
.new-deck-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.new-deck-item > svg { margin-left: auto; color: #88b0b6; }
.new-deck-item:hover:not(:disabled), .new-deck-item:focus-visible { background: #1c2c3d; outline: 0; box-shadow: inset 0 0 0 1px #80b4ae; }
.new-deck-item:disabled { opacity: 0.45; cursor: default; }
.new-deck-item small { display: block; font-size: 11px; color: #819fb4; }
.saved-deck-shelf > header > div > select { font-size: 12px; max-width: 180px; margin-left: 10px; }
.deck-library .catalog-card-copy .catalog-owned { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 650; color: #f0a050; }

/* Lobby hero, compact: the copy is now a one-line headline plus buttons, so size the card to it
   instead of the old 437px minimum, and shrink the card fan to match. */
.lobby .hero { min-height: 0; }
.lobby .hero-copy { align-self: center; padding-top: 34px; padding-bottom: 34px; }
.lobby .hero-copy > p { margin-top: 12px; }
.lobby .hero-visual { height: 280px; }
.lobby .hero-visual .card-fan { transform: scale(0.72); }
@media (max-width: 760px) {
  .lobby .hero-visual { height: 220px; }
  .lobby .hero-visual .card-fan { transform: scale(0.6); }
}
/* Quests panel */
.quests-panel { margin: 28px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.quests-panel .section-heading { margin: 0 0 14px; }
.quest-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.quest-group h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 13px; }
.quest-group h3 small { color: var(--muted); font-size: 10px; font-weight: 400; }
.quest-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quest-row { padding: 10px 12px; border: 1px solid #22303e; border-radius: 9px; background: var(--panel2); }
.quest-row.is-done { border-color: #2f6a55; background: #112721; }
.quest-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.quest-reward { display: inline-flex; align-items: center; gap: 4px; color: #f3d98b; font-weight: 650; white-space: nowrap; }
.quest-reward svg { color: #f0c24e; }
.quest-bar { height: 6px; margin: 9px 0 6px; border-radius: 3px; background: #0b1119; overflow: hidden; }
.quest-bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4fb37b, var(--teal)); transition: width 0.4s; }
.quest-foot { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; min-height: 18px; }
.quest-error { color: #f0a0a0; font-size: 11px; }
.quest-row .text-button { padding: 0; font-size: 11px; background: transparent; color: var(--teal); }

/* Header credits chip sits left of the account chip */
.site-header > .credits-chip + .session-chip { margin-left: -44px; }
@media (max-width: 680px) { .site-header > .credits-chip + .session-chip { margin-left: -12px; } .site-header > .credits-chip { padding: 5px 9px; } }
.site-header > .credits-chip { margin-left: auto; text-decoration: none; }

/* Collection page */
.collection-page { padding-bottom: 60px; }
.set-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; margin-bottom: 22px; }
.set-progress-row strong { font-size: 14px; }
.set-progress-row strong span { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
.collection-toolbar { flex-wrap: wrap; }
.collection-card.is-missing .card-art { filter: grayscale(1) brightness(0.45); }
.collection-card.is-missing .card-art:hover { filter: grayscale(0.4) brightness(0.7); }
.collection-card.rarity-rare.is-owned .card-art { box-shadow: 0 0 0 1px #ddc27a; }
.collection-card.rarity-ultra.is-owned .card-art { box-shadow: 0 0 0 1px #e6b8ff, 0 0 14px #d79bff55; }
.owned-count { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 10px; background: #0b1119ee; border: 1px solid #3a5a4a; color: #cdeedd; font-size: 11px; font-weight: 700; pointer-events: none; }

/* Deck workshop */
.unlimited-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px; border: 1px solid #8a6fd0; color: #d0c0ff; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; vertical-align: middle; }
.unlimited-field { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12px; color: #c0d4e0; cursor: pointer; }
.unlimited-field small { color: var(--muted); display: block; font-size: 10px; }
.owned-tag { color: #8fb6a0; font-size: 9px; white-space: nowrap; }
.owned-tag.is-over { color: #f0a070; }
.ownership-issues { margin: 10px 0; padding: 9px 12px; border: 1px solid #7a4a2a; border-radius: 8px; background: #2a1a10; color: #f0c8a0; font-size: 11px; line-height: 1.5; }
.card-add:disabled { opacity: 0.35; }
.catalog-card.is-missing .card-art { filter: grayscale(0.85) brightness(0.6); }

/* Starter celebration */
.starter-celebration { position: relative; text-align: center; padding: 28px 10px 14px; overflow: hidden; }
.starter-celebration h3 { margin: 0 0 8px; font-size: 22px; }
.starter-celebration p { color: var(--muted); font-size: 13px; margin: 0; }
.celebrate-burst { position: absolute; left: 50%; top: 40px; width: 0; height: 0; }
.celebrate-burst i { position: absolute; width: 6px; height: 6px; border-radius: 1px; background: #8fe3b0; box-shadow: 0 0 8px #8fe3b0; opacity: 0; transform: rotate(var(--a)) translateY(0); animation: celebrate 1.1s var(--d) ease-out both; }
.celebrate-burst i:nth-child(3n) { background: #f3d98b; box-shadow: 0 0 8px #f0c24e; }
@keyframes celebrate { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-130px); } }
@media (prefers-reduced-motion: reduce) {
  .celebrate-burst i, .quest-bar > span { animation: none; transition: none; }
}
.seat-unlimited { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 11px; color: var(--muted); }
.seat-unlimited-name { display: inline-flex; align-items: center; }
.deck-option.is-locked { opacity: 0.5; cursor: not-allowed; }
.deck-option .deck-missing { color: #e0b070; }
.deck-ownership-warning { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #a07a3a; background: rgba(160, 122, 58, 0.12); color: #ecd2a0; font-size: 12px; }

.packs-page { padding-bottom: 60px; }
.credits-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #5b4a22; border-radius: 999px; background: #1b1809; color: #f3d98b; font-size: 12px; font-weight: 650; white-space: nowrap; }
.credits-chip svg { color: #f0c24e; }
.credits-chip.big { font-size: 18px; padding: 9px 16px; }
.pending-pack-note { margin: 0 0 16px; padding: 10px 14px; border: 1px solid #8fe3b055; border-radius: 8px; background: #0f2219; color: #bfe9cf; font-size: 12px; }
.product-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 8px 0 40px; }
.product-card { width: min(600px, 100%); display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 30px; padding: 28px 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.product-art { position: relative; width: 170px; height: 260px; }
.product-pack { position: absolute; inset: 0; transform: rotate(-4deg); }
.product-art:has(.has-art) { width: 153px; justify-self: center; }
.product-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.product-copy h2 { margin: 0; font-size: 26px; }
.product-copy small { color: var(--muted); font-size: 13px; }
.product-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.product-price { display: inline-flex; align-items: center; gap: 6px; color: #f3d98b; font-weight: 700; font-size: 20px; }
.product-price svg { color: #f0c24e; }
.pity-meter { margin-top: 6px; }
.pity-meter .quest-bar { height: 4px; margin: 5px 0 0; }
.pity-meter .quest-bar > span { background: linear-gradient(90deg, #8a5aa8, #d79bff); }
.product-need { color: #d9a86b; }
.pack-history { margin-top: 10px; }
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.history-pack { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; row-gap: 4px; text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: inherit; }
.history-pack:hover { border-color: #3a5a4a; }
.history-pack strong { font-size: 13px; }
.history-pack small { color: var(--muted); font-size: 10px; }
.history-view { color: var(--teal); font-size: 11px; white-space: nowrap; margin-left: auto; }
.history-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.packs-links { margin-top: 24px; }
/* Full-screen opening overlay: scrolls so all 15 cards are reachable on a phone. */
.pack-overlay { position: fixed; inset: 0; z-index: 900; overflow-y: auto; padding: 16px; background: #030806f2; display: flex; justify-content: center; align-items: flex-start; }
.pack-overlay > .opening-stage { width: min(1000px, 100%); min-height: calc(100dvh - 32px); }
@media (max-width: 520px) {
  .product-card { grid-template-columns: 84px 1fr; gap: 14px; padding: 18px; }
  .product-art { width: 84px; height: 130px; }
  .product-art:has(.has-art) { width: 77px; }
  .pack-overlay { padding: 8px; }
}

/* Shop booster on display: drifts up and down, sways and tilts a little in 3D, its shadow breathes
   with the height, and a foil glint (masked to the pack's own silhouette) sweeps across now and then.
   Hovering brightens it and quickens the glint. All motion stops for prefers-reduced-motion. */
.product-art { perspective: 700px; }
.product-pack { z-index: 1; animation: shop-pack-float 6s ease-in-out infinite; transform-style: preserve-3d; }
.product-pack .pack-wrapper.has-art { animation: shop-pack-sway 9s ease-in-out infinite; }
.product-pack .pack-wrapper.has-art::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, #ffffff00 42%, #ffffffb0 50%, #c9f6ff55 54%, transparent 62%);
  background-size: 260% 100%; background-position: 160% 0;
  -webkit-mask: var(--pack-art) center / 100% 100% no-repeat; mask: var(--pack-art) center / 100% 100% no-repeat;
  mix-blend-mode: screen; animation: shop-pack-glint 7s ease-in-out infinite;
}
.product-art::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 18px; border-radius: 50%;
  background: radial-gradient(ellipse, #000c, transparent 70%); filter: blur(4px);
  animation: shop-pack-shadow 6s ease-in-out infinite; z-index: 0;
}
.product-card:hover .product-pack .pack-wrapper.has-art::before { animation-duration: 2.2s; }
.product-card:hover .product-pack .pack-wrapper.has-art img { filter: brightness(1.12) contrast(1.05); transition: filter 0.3s ease; }
@keyframes shop-pack-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-12px) rotate(-2deg); }
}
@keyframes shop-pack-sway {
  0%, 100% { transform: rotateY(-7deg) rotateX(2deg); }
  50% { transform: rotateY(7deg) rotateX(-2deg); }
}
@keyframes shop-pack-glint {
  0%, 55% { background-position: 160% 0; }
  80%, 100% { background-position: -60% 0; }
}
@keyframes shop-pack-shadow {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(0.82); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .product-pack, .product-pack .pack-wrapper.has-art, .product-pack .pack-wrapper.has-art::before, .product-art::after { animation: none; }
}

/* Header rules shared with web/src/style.css (see tests/test_site_header.py). */
.avatar.has-image {
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  border: 1.5px solid #bdcda4;
}
.avatar.has-image[style*=".svg"] { background-position: center; }
.site-header nav a.play-open, .site-header nav a.active.play-open { color: #ffd166; font-weight: 700; }
.site-header nav a.play-open:hover { color: #ffe29a; }
.open-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ffd166; color: #10161f; font-size: 11px; font-weight: 800; line-height: 1; margin-left: -2px; }