/* Shared clubhouse surfaces. Never applied on room, practice or standalone games. */
body[data-arcade-shell] {
  background:
    radial-gradient(ellipse at 0 5%, #193d302a, transparent 50%), #081b16;
}
body[data-arcade-shell] > header {
  background: linear-gradient(110deg, #0a211cee, #112d22f5);
  border-bottom: 1px solid #c7ad6b38;
  box-shadow: 0 10px 28px #0002;
}
body[data-arcade-shell] > header nav button {
  border-radius: 10px;
  transition:
    background-color 0.2s,
    color 0.2s;
  min-height: 40px;
}
body[data-arcade-shell] > header nav button.active {
  background: linear-gradient(135deg, #e4cb8930, #bca66b10);
  color: #f1d38e;
  box-shadow: inset 0 -2px #d3b66d;
}
#app[data-arcade-page] .page-title {
  padding: 30px 0 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid #c6ae6d30;
  gap: 20px;
}
#app[data-arcade-page] .page-title h1 {
  font-family: Georgia, serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #f0e5cb;
}
#app[data-arcade-page] .panel,
#app[data-arcade-page] details.panel {
  background: linear-gradient(125deg, #1b3b2ef2, #10281ff2);
  border: 1px solid #bdab6c38;
  border-radius: 20px;
  box-shadow:
    0 12px 30px #0002,
    inset 0 1px #fff1;
}
#app[data-arcade-page] .panel h2,
#app[data-arcade-page] .section-title h2 {
  color: #efe2c5;
  letter-spacing: -0.025em;
}
#app[data-arcade-page] label,
#app[data-arcade-page] summary {
  color: #d7dfd0;
}
#app[data-arcade-page]
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#app[data-arcade-page] select,
#app[data-arcade-page] textarea {
  background: #0a211ae8;
  color: #edf1e4;
  border: 1px solid #8ca78a55;
  border-radius: 11px;
  min-height: 44px;
  max-width: 100%;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
#app[data-arcade-page] input:focus-visible,
#app[data-arcade-page] textarea:focus-visible,
#app[data-arcade-page] select:focus-visible {
  outline: 2px solid #e3c781;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #e3c78112;
}
#app[data-arcade-page] .stat-number {
  font-family: Georgia, serif;
  letter-spacing: -0.035em;
  color: #e9ce89;
}
#app[data-arcade-page="shop"] .shop-toolbar,
#app[data-arcade-page="shop"] .shop-tabs {
  padding: 12px;
  border: 1px solid #b8a36a33;
  border-radius: 16px;
  background: #102b22cc;
}
#app[data-arcade-page="shop"] .shop-item {
  border-radius: 20px;
  box-shadow:
    0 12px 25px #0003,
    inset 0 1px #ffffff0a;
}
#app[data-arcade-page="shop"] .shop-item-copy {
  background: linear-gradient(120deg, #152e25, #10271f);
}
#app[data-arcade-page="shop"] .shop-item:focus-within {
  outline: 2px solid #e4c984;
  outline-offset: 3px;
}
#app[data-arcade-page] table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
#app[data-arcade-page] th {
  color: #d0ba82;
  background: #0c241c;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#app[data-arcade-page] th,
#app[data-arcade-page] td {
  padding: 14px 12px;
  border-bottom: 1px solid #9bb99b1c;
}
#app[data-arcade-page] tbody tr:hover {
  background: #d4bd7620;
}
#app[data-arcade-page] .leader-row,
#app[data-arcade-page] .list-row {
  border-bottom-color: #b6a66a26;
  padding-block: 16px;
}
#app[data-arcade-page] .leader-row.is-me {
  background: linear-gradient(90deg, #dbbf7130, transparent);
  border-color: #d4b86f66;
}
#app[data-arcade-page] .leader-rank {
  color: #dec78e;
}
#app[data-arcade-page] .leader-score {
  font-variant-numeric: tabular-nums;
  color: #ebd597;
}
#app[data-arcade-page] .badge {
  border-color: #baa76955;
  background: #c6b6740d;
  color: #d5c28f;
}
#app[data-arcade-page] .switch {
  padding: 12px;
  border-radius: 12px;
  background: #09241a55;
  border: 1px solid #a6b2911a;
}
#app[data-arcade-page] input[type="checkbox"] {
  accent-color: #d5b96f;
  min-width: 20px;
  min-height: 20px;
}
#app[data-arcade-page] details > summary {
  padding-block: 12px;
  cursor: pointer;
  list-style-position: inside;
}
#app[data-arcade-page] .table-wrap {
  max-width: 100%;
  overflow: auto;
}
#app[data-arcade-page] .grid > * {
  min-width: 0;
}
body[data-arcade-shell] #directDock {
  border: 1px solid #d0b66a66;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(150deg, #183b2d, #0b231c);
  box-shadow: 0 10px 60px #0008;
  max-width: calc(100vw - 24px);
}
body[data-arcade-shell] .dm-head {
  background: #18392b;
  border-bottom: 1px solid #d5b76b33;
  color: #f0dfb7;
}
body[data-arcade-shell] .dm-person {
  border-radius: 13px;
  margin-block: 4px;
  border: 1px solid #a6b48a22;
  background: #173529;
}
body[data-arcade-shell] .dm-person.has-unread {
  border-color: #d7bd6f55;
  background: #284833;
}
body[data-arcade-shell] .dm-bubble {
  background: #234334;
  border: 1px solid #bac59622;
  border-radius: 17px 17px 17px 4px;
}
body[data-arcade-shell] .dm-bubble.mine {
  background: linear-gradient(120deg, #5d5630, #3e4d2e);
  border-color: #d9be7055;
  border-radius: 17px 17px 4px 17px;
}
body[data-arcade-shell] #dmForm {
  gap: 10px;
  background: #0d281e;
  padding: 14px;
}
body[data-arcade-shell] #dmForm input {
  min-width: 0;
  background: #173a2c;
  border: 1px solid #b1ac6a44;
  border-radius: 12px;
}
body[data-arcade-shell] #modal {
  background: linear-gradient(145deg, #173a2c, #0d271e);
  border: 1px solid #dac18066;
  border-radius: 24px;
  box-shadow: 0 32px 100px #0009;
  color: #e7edde;
}
body[data-arcade-shell] #modal::backdrop {
  background: #03130edd;
  backdrop-filter: blur(4px);
}
body[data-arcade-shell] #modal h2 {
  color: #ebd8a6;
  font-family: Georgia, serif;
}
body[data-arcade-shell] #modal .panel {
  background: #18382d;
  border-color: #9cad7b44;
  border-radius: 16px;
}
body[data-arcade-shell] #modal input,
body[data-arcade-shell] #modal select,
body[data-arcade-shell] #modal textarea {
  background: #0c251c;
  color: #eef1e4;
  border-color: #a3b38b55;
  max-width: 100%;
}
body[data-arcade-shell] #modal button:focus-visible,
body[data-arcade-shell] #directDock button:focus-visible {
  outline: 2px solid #f2d28d;
  outline-offset: 3px;
}
#app[data-arcade-page="admin"] .stat-number {
  font-size: clamp(28px, 4vw, 46px);
}
#app[data-arcade-page="admin"] details.panel[open] {
  border-color: #ceb47377;
}
@media (max-width: 650px) {
  #app[data-arcade-page] .page-title {
    padding-top: 16px;
    flex-wrap: wrap;
  }
  #app[data-arcade-page] .panel {
    border-radius: 16px;
  }
  #app[data-arcade-page] th,
  #app[data-arcade-page] td {
    padding: 12px 9px;
  }
  body[data-arcade-shell] > header nav {
    max-width: 100%;
  }
  body[data-arcade-shell] #directDock {
    left: 12px;
    right: 12px;
    width: auto;
  }
  #app[data-arcade-page] .actions {
    flex-wrap: wrap;
  }
  #app[data-arcade-page] .page-title h1 {
    overflow-wrap: anywhere;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-arcade-shell] * {
    scroll-behavior: auto !important;
  }
  body[data-arcade-shell] #modal::backdrop {
    backdrop-filter: none;
  }
}
.arcade-preview-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  max-width: 1380px;
  margin: 16px auto;
  padding: 14px 20px;
  background: #41391e;
  border: 1px solid #d2bb6a66;
  border-radius: 14px;
  color: #e9d9a8;
  font: 12px/1.6 system-ui;
}
.arcade-preview-banner strong {
  font-size: 10px;
  letter-spacing: 0.15em;
}
.arcade-preview-banner span {
  flex: 1;
  min-width: 180px;
}
.arcade-preview-banner button {
  min-height: 38px;
  padding: 6px 12px;
  border-color: #d9c16e55;
}
#app[data-arcade-page] .boutique-toolbar {
  border: 1px solid #bda76544;
  border-radius: 18px;
  background: linear-gradient(120deg, #1e3c2f, #10271f);
  padding: 16px;
  box-shadow: 0 10px 26px #0002;
}
#app[data-arcade-page] .collection-switch {
  border: 1px solid #a9955d44;
  border-radius: 12px;
  padding: 4px;
  background: #09221a;
}
#app[data-arcade-page] .collection-switch button {
  border-radius: 9px;
  min-height: 40px;
}
#app[data-arcade-page] .collection-switch [aria-pressed="true"] {
  background: linear-gradient(135deg, #dcc384, #bca15e);
  color: #173325;
  box-shadow: 0 4px 12px #0003;
}
#app[data-arcade-page] .shop-filter-sidebar {
  background: #112b22;
  border-color: #b5a16d44;
  border-radius: 17px;
  box-shadow: inset 0 1px #fff1;
}
#app[data-arcade-page] .shop-filter-content button[aria-pressed="true"] {
  background: #d7bd7620;
  color: #eddaa1;
  border-color: #cbb26e66;
}
#app[data-arcade-page] .shop-result-count {
  color: #c6d3bd;
  font-variant-numeric: tabular-nums;
}
#app[data-arcade-page] .ownership-badge {
  border-color: #bba96d55;
  background: #173b2bea;
  color: #e9d298;
}
#app[data-arcade-page] .collection-tile {
  border-color: #b3a16b44;
  border-radius: 17px;
  background: linear-gradient(140deg, #203e30, #10281f);
  box-shadow: 0 10px 20px #0002;
}
#app[data-arcade-page] .collector-summary {
  border-color: #d0b67355;
  background: linear-gradient(120deg, #b59b4524, #09241b);
  border-radius: 18px;
}
#app[data-arcade-page] .collection-tile strong {
  color: #eee0bb;
}
#app[data-arcade-page] progress {
  accent-color: #d7bb73;
  height: 9px;
  border-radius: 10px;
  overflow: hidden;
  background: #082218;
}
#app[data-arcade-page] .avatar-gallery button {
  border-radius: 14px;
  background: #102d22;
  border-color: #a8b99033;
}
#app[data-arcade-page] .avatar-gallery button.selected {
  border-color: #e5c77c;
  box-shadow: 0 0 0 2px #e5c77c33;
}
body[data-arcade-shell] #directDock .btn-primary,
body[data-arcade-shell] #modal .btn-primary {
  background: linear-gradient(135deg, #e8d29a, #bda263);
  color: #183729;
  border-color: #ddc78b66;
  border-radius: 11px;
}
body[data-arcade-shell] #modal .lobby-control,
body[data-arcade-shell] > header .lobby-control {
  transform-origin: center;
  touch-action: manipulation;
}
@media (max-width: 650px) {
  #app[data-arcade-page] .boutique-toolbar {
    padding: 12px;
    gap: 12px;
  }
  #app[data-arcade-page] .collection-switch {
    width: 100%;
  }
  #app[data-arcade-page] .collection-switch button {
    flex: 1;
  }
  .arcade-preview-banner {
    margin: 12px;
    gap: 8px 12px;
    padding: 12px;
  }
}
#app[data-arcade-page="settings"] .settings-columns {
  align-items: start;
  gap: 24px;
}
.arcade-preview-banner a {
  color: #f4df9e;
  text-underline-offset: 4px;
  font-weight: 650;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
#app[data-arcade-page] .auth.panel {
  border-color: #cfb97766;
  background: linear-gradient(140deg, #234a37, #10281f);
  box-shadow: 0 22px 60px #0005;
}
#app[data-arcade-page] .auth h1 {
  font-family: Georgia, serif;
  color: #f0dbab;
  letter-spacing: -0.035em;
}
/* Let the browser skip distant catalog artwork while retaining searchable DOM.
   `auto` remembers a tile's measured size after its first visible rendering. */
#app[data-arcade-page=shop] .shop-item{content-visibility:auto;contain-intrinsic-size:auto 320px}
#app[data-arcade-page=profile] .collection-tile{content-visibility:auto;contain-intrinsic-size:auto 280px}