/* Lobby app-only — rail + game stage. Shell/theme: /css/ui-kit/ */

html[data-app='admin'] body {
  min-height: 100vh;
}

html[data-app='admin'] main.page {
  overflow: auto;
  padding-bottom: 24px;
}

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

table.data th,
table.data td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.data th {
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 600;
}

table.data .inline-form {
  margin-top: 6px;
}

table.data input[type='number'] {
  width: 5.5rem;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
}

/* All lobby themes: fixed viewport; only the Games rail scrolls. */
html[data-app^='lobby'] {
  height: 100%;
}

html[data-app^='lobby'] body {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html[data-app^='lobby'] main.page {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

html[data-app^='lobby'] .site-footer {
  flex: none;
  justify-content: flex-start;
}

.lobby-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.rail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rail .card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rail .card > h2 {
  flex: none;
  padding: 10px 12px;
  font-size: 13px;
}

.rail .card-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: #3a4552 transparent;
}

.rail .card-body::-webkit-scrollbar {
  width: 9px;
}

.rail .card-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.rail .card-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3a4552, #2a323d);
  border-radius: 999px;
  border: 2px solid var(--panel);
}

.rail .card-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4c9aff, #3a7fd4);
}

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tile {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--panel-2);
}

.tile-art {
  position: relative;
  height: 78px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(165deg, #12161c, #1a222c);
}

.tile-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile-art-mark {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
}

.tile-art--fallback .tile-art-mark {
  opacity: 1;
}

.tile-art:has(.tile-art-img) .tile-art-mark {
  opacity: 0;
}

.tile-art--fallback:has(.tile-art-img) .tile-art-mark,
.tile-art--fallback .tile-art-mark {
  opacity: 1;
}

.tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 8px 8px;
}

.tile-heading {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tile-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
}

.tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tile-ref {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: none;
}

.tile-badge {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tile-badge--html {
  background: rgba(120, 160, 200, 0.18);
  color: #9ec5e8;
}

.tile-badge--pixi {
  background: rgba(180, 120, 220, 0.2);
  color: #d4a8ff;
}

.tile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tile-actions .btn {
  flex: 1;
  padding: 4px 7px;
  font-size: 11px;
  border-radius: 6px;
}

.tile--megajack {
  border-color: rgba(58, 154, 138, 0.4);
}

.tile--megajack .tile-art {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(58, 154, 138, 0.45), transparent 60%),
    linear-gradient(165deg, #0a1412, #122620 45%, #0d1a24);
}

.tile--megajack .tile-art-mark {
  color: #f0e6c8;
}

.tile--megajack .btn.primary {
  background: #3a9a8a;
  border-color: #3a9a8a;
  color: #0a1412;
}

.tile--megajack-pixi {
  border-color: rgba(180, 120, 220, 0.4);
}

.tile--megajack-pixi .tile-art {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(180, 120, 220, 0.45), transparent 60%),
    linear-gradient(165deg, #120a18, #1a1224 45%, #0d1a24);
}

.tile--megajack-pixi .tile-art-mark {
  color: #f0e6c8;
}

.tile--megajack-pixi .btn.primary {
  background: #9b6bc4;
  border-color: #9b6bc4;
  color: #120a18;
}

.tile--aztec-gold {
  border-color: rgba(232, 200, 120, 0.4);
}

.tile--aztec-gold .tile-art {
  background:
    radial-gradient(ellipse 70% 55% at 60% 0%, rgba(232, 200, 120, 0.4), transparent 55%),
    linear-gradient(165deg, #121008, #1f1810 50%, #141a12);
}

.tile--aztec-gold .tile-art-mark {
  color: #fff0c8;
}

.tile--aztec-gold .btn.primary {
  background: #c9a84a;
  border-color: #c9a84a;
  color: #1a1408;
}

.tile--lightning-tower {
  border-color: rgba(74, 171, 204, 0.4);
}

.tile--lightning-tower .tile-art {
  background:
    radial-gradient(ellipse 75% 50% at 40% -5%, rgba(74, 171, 204, 0.45), transparent 55%),
    linear-gradient(165deg, #080c18, #0f1828 50%, #12101e);
}

.tile--lightning-tower .tile-art-mark {
  color: #f0f8ff;
}

.tile--lightning-tower .btn.primary {
  background: #4aabcc;
  border-color: #4aabcc;
  color: #081018;
}

.tile--ruby-cluster {
  border-color: rgba(192, 64, 96, 0.45);
}

.tile--ruby-cluster .tile-art {
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(192, 64, 96, 0.5), transparent 58%),
    linear-gradient(165deg, #14080c, #221016 50%, #180c10);
}

.tile--ruby-cluster .tile-art-mark {
  color: #ffd0d8;
}

.tile--ruby-cluster .btn.primary {
  background: #c04060;
  border-color: #c04060;
  color: #14080c;
}

.tile--neon-grid {
  border-color: rgba(0, 200, 200, 0.45);
}

.tile--neon-grid .tile-art {
  background:
    radial-gradient(ellipse 75% 55% at 40% 0%, rgba(0, 255, 204, 0.4), transparent 58%),
    linear-gradient(165deg, #041212, #0a2020 50%, #061818);
}

.tile--neon-grid .tile-art-mark {
  color: #c0ffff;
}

.tile--neon-grid .btn.primary {
  background: #00c8c8;
  border-color: #00c8c8;
  color: #041212;
}

.tile--crystal-pick {
  border-color: rgba(128, 96, 208, 0.45);
}

.tile--crystal-pick .tile-art {
  background:
    radial-gradient(ellipse 75% 55% at 60% 0%, rgba(176, 144, 255, 0.45), transparent 58%),
    linear-gradient(165deg, #100818, #1a1028 50%, #140c20);
}

.tile--crystal-pick .tile-art-mark {
  color: #f0e0ff;
}

.tile--crystal-pick .btn.primary {
  background: #8060d0;
  border-color: #8060d0;
  color: #100818;
}

.tile--desert-spire {
  border-color: rgba(192, 128, 64, 0.45);
}

.tile--desert-spire .tile-art {
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(232, 160, 80, 0.45), transparent 58%),
    linear-gradient(165deg, #141008, #221810 50%, #181208);
}

.tile--desert-spire .tile-art-mark {
  color: #ffe0a0;
}

.tile--desert-spire .btn.primary {
  background: #c08040;
  border-color: #c08040;
  color: #141008;
}

.tile--ice-peak {
  border-color: rgba(90, 120, 160, 0.45);
}

.tile--ice-peak .tile-art {
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(160, 200, 232, 0.4), transparent 58%),
    linear-gradient(165deg, #081018, #101820 50%, #0c141c);
}

.tile--ice-peak .tile-art-mark {
  color: #e8f4ff;
}

.tile--ice-peak .btn.primary {
  background: #5a78a0;
  border-color: #5a78a0;
  color: #081018;
}

.tile--twin-realms {
  border-color: rgba(180, 160, 255, 0.45);
}

.tile--twin-realms .tile-art {
  background:
    linear-gradient(90deg, #1a2848 0%, #0c0814 50%, #2a0810 100%),
    radial-gradient(ellipse 50% 70% at 15% 40%, rgba(120, 180, 255, 0.35), transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 60%, rgba(180, 40, 50, 0.4), transparent 60%);
}

.tile--twin-realms .tile-art-mark {
  color: #f0e4c8;
}

.tile--twin-realms .btn.primary {
  background: #c4a060;
  border-color: #c4a060;
  color: #140c08;
}

.tile--molecular {
  border-color: rgba(40, 220, 180, 0.45);
}

.tile--molecular .tile-art {
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(40, 255, 200, 0.35), transparent 55%),
    linear-gradient(165deg, #041018, #0a2030 50%, #061820);
}

.tile--molecular .tile-art-mark {
  color: #b8fff0;
}

.tile--molecular .btn.primary {
  background: #1aa888;
  border-color: #1aa888;
  color: #041018;
}

.tile--elemental-fusion {
  border-color: rgba(232, 96, 40, 0.5);
}

.tile--elemental-fusion .tile-art {
  background:
    radial-gradient(ellipse 40% 40% at 25% 30%, rgba(255, 80, 40, 0.45), transparent 50%),
    radial-gradient(ellipse 40% 40% at 75% 30%, rgba(40, 140, 255, 0.4), transparent 50%),
    radial-gradient(ellipse 40% 40% at 25% 75%, rgba(200, 160, 60, 0.4), transparent 50%),
    radial-gradient(ellipse 40% 40% at 75% 75%, rgba(180, 220, 255, 0.35), transparent 50%),
    linear-gradient(165deg, #180804, #201018 50%, #1c0c08);
}

.tile--elemental-fusion .tile-art-mark {
  color: #ffe0c0;
}

.tile--elemental-fusion .btn.primary {
  background: #e05020;
  border-color: #e05020;
  color: #140804;
}

.tile--pegboard {
  border-color: rgba(180, 80, 220, 0.45);
}

.tile--pegboard .tile-art {
  background:
    radial-gradient(circle at 30% 25%, rgba(80, 140, 255, 0.4), transparent 28%),
    radial-gradient(circle at 70% 25%, rgba(180, 80, 255, 0.4), transparent 28%),
    radial-gradient(circle at 50% 55%, rgba(255, 200, 60, 0.25), transparent 35%),
    linear-gradient(180deg, #100818, #1a1028 50%, #0c0814);
}

.tile--pegboard .tile-art-mark {
  color: #f0d0ff;
}

.tile--pegboard .btn.primary {
  background: #8a40c8;
  border-color: #8a40c8;
  color: #f8f0ff;
}

.stage {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background: var(--bg);
  margin: 0;
}

.stage-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  flex: none;
}

.stage-chrome span {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-empty {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  overflow: hidden;
}

.stage-loader {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-faint, #9aa);
  font-size: 13px;
}

.stage-loader-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent, #7c5cff);
  border-radius: 50%;
  animation: stage-loader-spin 0.7s linear infinite;
}

.stage-launch-error {
  margin: 16px 24px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 110, 110, 0.45);
  border-radius: 8px;
  color: #ffd0d0;
  background: rgba(120, 20, 20, 0.24);
  text-align: center;
}

@keyframes stage-loader-spin {
  to { transform: rotate(360deg); }
}

.stage-frame {
  display: block;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  height: 0; /* flex item: grow from zero, ignore iframe intrinsic height */
  border: 0;
  background: #000;
}

body.game-active .stage-empty {
  display: none !important;
}

body.game-active .stage-frame {
  display: block;
}

.lobby-nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.lobby-nav-current {
  color: var(--ink);
  font-weight: 600;
}

.lobby-nav-sep {
  color: var(--ink-faint);
  opacity: 0.7;
}

@media (max-width: 900px) {
  html[data-app^='lobby'] body {
    height: auto;
    max-height: none;
    overflow: auto;
  }

  html[data-app^='lobby'] main.page {
    flex: none;
    overflow: visible;
  }

  .lobby-shell {
    grid-template-columns: 1fr;
    overflow: visible;
    flex: none;
  }

  .rail .card {
    max-height: 50vh;
  }

  .stage {
    min-height: 60vh;
    max-height: none;
  }

  .stage-frame {
    height: auto;
    min-height: 50vh;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .inline-form {
    width: 100%;
  }

  .inline-form select {
    flex: 1 1 auto;
    min-width: 0;
  }
}