/* ==========================================================================
   STICK ARENA RESKIN — LOBBY (#screen-realm)
   Owner: lobby screen only. Loads after styles.css / prestige.css / sa-core.css.
   Everything is scoped under #screen-realm so the room lobby (screen-lobby),
   in-game chat and other screens are untouched.

   Live markup hooks (from public/js/app.js, do not rename):
     #global-chat-list  -> article.chat-row > .rank-badge.chat-rank-badge
                           + button.chat-name (inline color) + span.chat-text
     #room-list         -> article.room-row(.live) > .room-identity,
                           .room-map-cell, .room-player-cell (.player-dots),
                           .room-mode-cell (.status-pill.ranked|.casual),
                           button.button.button-small
     #online-player-list / #leaderboard-list
                        -> button.player-list-row(.skin-tinted) >
                           .rank-badge.rank-badge-sm + strong.player-list-name
                           (inline color) + small.player-list-rating
     empty states       -> div.browser-empty(.small)
   ========================================================================== */

/* --- Screen plate: dark SA steel inside the shared light chrome plate ----- */
#screen-realm {
  border: var(--sa-frame);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--sa-steel-700) 0%, var(--sa-steel-800) 100%);
  box-shadow: var(--sa-bevel-panel);
}

/* --- Realm stats line: tiny pixel readout, gold numbers ------------------- */
#screen-realm .realm-stats-line {
  margin-bottom: 4px;
  color: var(--sa-steel-200);
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
#screen-realm .realm-stats-line b {
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-weight: 700;
}

/* --- Well heads -> SA blue gradient bars (the "FLAT WORLD" bar) ----------- */
#screen-realm .well-head {
  margin-bottom: 0;
  padding: 6px 9px;
  border: 2px solid var(--sa-well-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--sa-bar-hi) 0%, var(--sa-bar-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(14, 26, 42, 0.35);
}
#screen-realm .well-label {
  color: var(--sa-bar-ink);
  font-family: var(--sa-pixel);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Controls living inside the bar: filter select, refresh, players/ranking. */
#screen-realm .well-tools { gap: 6px; }
#screen-realm .room-filter-select {
  min-height: 24px;
  max-width: 132px;
  padding: 3px 6px;
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color-scheme: dark;
}
#screen-realm .icon-button {
  border: 2px solid var(--sa-btn-border);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 55%, var(--sa-btn-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(70, 88, 110, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.4);
  color: var(--sa-btn-ink);
  cursor: pointer;
  transition: filter 80ms ease, transform 60ms ease;
}
#screen-realm .icon-button:hover:not(:disabled) { filter: brightness(1.07); }
#screen-realm .icon-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(30, 45, 62, 0.45);
}
#screen-realm .icon-button-small { width: 26px; height: 24px; font-size: 13px; border-radius: 5px; }

#screen-realm .well-toggle { gap: 4px; }
#screen-realm .well-toggle button {
  width: 26px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--sa-btn-border);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--sa-steel-500) 0%, var(--sa-steel-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
#screen-realm .well-toggle button:hover {
  background: linear-gradient(180deg, var(--sa-steel-400) 0%, var(--sa-steel-500) 100%);
}
#screen-realm .well-toggle button.active {
  border-color: var(--sa-gold-outline);
  background: linear-gradient(180deg, var(--sa-gold-hi) 0%, var(--sa-gold) 55%, var(--sa-gold-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(255, 210, 63, 0.35);
}

/* --- Vertical 3D GAMES / PLAYERS labels (pure CSS, no markup change) ------
   Absolutely positioned pseudo-elements on each .lobby-block, run vertically
   along the right edge of the wells like the SA reference. bottom anchoring
   is exact because each well is the last visible child of its block. */
#screen-realm .lobby-block { position: relative; }
#screen-realm .lobby-block::after {
  position: absolute;
  right: 15px; /* clears the 12px SA scrollbar inside the well */
  bottom: 12px;
  z-index: 2;
  pointer-events: none;
  writing-mode: vertical-rl;
  font-family: var(--sa-chunky);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--sa-steel-100);
  opacity: 0.92;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.35),
    1px 1px 0 var(--sa-well-line),
    2px 2px 0 var(--sa-well-line),
    3px 3px 0 rgba(0, 0, 0, 0.45),
    4px 4px 4px rgba(0, 0, 0, 0.5);
}
#screen-realm .lobby-block[aria-labelledby="rooms-title"]::after { content: "GAMES"; }
#screen-realm .lobby-block[aria-label="Players online"]::after { content: "PLAYERS"; }
/* When the private-code strip slides in under the games well, lift the label
   back onto the well (strip is ~64px tall including its top margin). */
#screen-realm .lobby-block:has(#join-code-strip:not(.hidden))::after { bottom: 76px; }

/* ==========================================================================
   CHAT — dark inset well, pixel text, colored names
   ========================================================================== */
#screen-realm .lobby-chat .chat-list {
  min-height: 380px;
  padding: 8px 10px;
  border: 2px solid var(--sa-well-line);
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  background: var(--sa-well);
  box-shadow: var(--sa-bevel-well);
  color: var(--sa-chat-text);
  color-scheme: dark;
}
#screen-realm .chat-row {
  padding: 3px 5px;
  border-bottom: 1px solid rgba(126, 166, 212, 0.09);
  font-family: var(--sa-pixel);
  font-size: 10px;
  line-height: 1.55;
}
/* SA colored names on the dark well: the JS palette was picked for a light
   background, so brighten the rendered inline color a notch. */
#screen-realm .chat-name {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--sa-pixel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  filter: brightness(1.45) saturate(1.15);
}
#screen-realm .chat-name:hover { text-decoration: underline; }
#screen-realm .chat-text {
  margin-left: 5px;
  color: var(--sa-chat-text);
  font-weight: 400;
}
#screen-realm .chat-rank-badge { vertical-align: -3px; margin-right: 4px; }
/* Future hook: system lines render yellow once chatRow() tags them
   (row.classList.add('chat-row-system') when message.system is set). */
#screen-realm .chat-row-system .chat-text { color: var(--sa-chat-sys); }

/* Chat form: steel bar with inset input, globe chip and 3D Send. */
#screen-realm .lobby-chat-form {
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  padding: 8px 9px;
  border: 2px solid var(--sa-well-line);
  border-top: 1px solid var(--sa-steel-500);
  border-radius: 0;
  background: linear-gradient(180deg, var(--sa-steel-600) 0%, var(--sa-steel-700) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
#screen-realm .chat-globe {
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 32px;
  border: 2px solid var(--sa-well-line);
  border-radius: 5px;
  background: var(--sa-well);
  box-shadow: var(--sa-bevel-well);
  font-size: 13px;
  filter: none;
}
#screen-realm .lobby-chat-form .text-input {
  min-height: 32px;
  font-family: var(--sa-pixel);
  font-size: 10px;
}
#screen-realm .lobby-chat-form .button-small {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 11px;
}

/* Weapon strip: kept, integrated as the dark slot bar under the chat input
   (reference shot 1 shows the same dark strip with a weapon slot). */
#screen-realm .chat-weapon-strip {
  min-height: 42px;
  padding: 3px 12px;
  border: 2px solid var(--sa-well-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--sa-well-deep);
  box-shadow: var(--sa-bevel-well);
}
#screen-realm .chat-weapon-strip canvas {
  height: 34px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

/* ==========================================================================
   GAMES LIST — black well, pixel rows, celeste selection
   ========================================================================== */
#screen-realm .room-list {
  height: 205px;
  overflow-y: auto;
  border: 2px solid var(--sa-well-line);
  border-radius: 0 0 6px 6px;
  background: var(--sa-well-deep); /* replaces the old faint SVG watermark */
  box-shadow: var(--sa-bevel-well);
  color-scheme: dark;
}
#screen-realm .room-row {
  min-height: 54px;
  padding: 6px 38px 6px 10px; /* right gutter keeps Join clear of GAMES label */
  border-bottom: 1px solid var(--sa-well-line);
  background: transparent;
  color: #e8f3fc;
}
#screen-realm .room-row:nth-child(even) { background: rgba(126, 166, 212, 0.04); }
#screen-realm .room-row:hover,
#screen-realm .room-row:active {
  background: var(--sa-sel-bg);
  color: var(--sa-sel-ink);
}
#screen-realm .room-row.live { opacity: 0.6; }
#screen-realm .room-identity strong,
#screen-realm .room-map-cell strong {
  font-family: var(--sa-pixel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#screen-realm .room-identity small,
#screen-realm .room-map-cell small,
#screen-realm .room-mode-cell small {
  color: var(--sa-chat-dim);
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
}
#screen-realm .room-row:hover .room-identity small,
#screen-realm .room-row:hover .room-map-cell small,
#screen-realm .room-row:hover .room-mode-cell small { color: #2c4a66; }
#screen-realm .room-player-cell b {
  font-family: var(--sa-pixel);
  font-size: 9px;
  font-weight: 700;
}
#screen-realm .room-row:hover .player-dots {
  background: repeating-linear-gradient(90deg, #33566f 0 4px, transparent 4px 6px);
  opacity: 1;
}
#screen-realm .status-pill {
  padding: 2px 5px;
  border: 1px solid #3f5a7e;
  border-radius: 3px;
  font-family: var(--sa-pixel);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
#screen-realm .status-pill.ranked { border-color: var(--sa-gold-dark); color: var(--sa-gold); }
#screen-realm .status-pill.casual { color: var(--sa-chat-dim); }
#screen-realm .room-row:hover .status-pill { border-color: #4c6a8c; color: #22384e; }
#screen-realm .room-row:hover .status-pill.ranked { border-color: #7a5c0e; color: #5c4304; }

#screen-realm .browser-empty {
  min-height: 150px;
  color: var(--sa-chat-dim);
  font-family: var(--sa-pixel);
  font-size: 10px;
}

/* Private join-code strip: dark inset well with gold label. */
#screen-realm .join-code-strip {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 2px solid var(--sa-well-line);
  border-radius: 6px;
  background: var(--sa-well);
  box-shadow: var(--sa-bevel-well);
}
#screen-realm .join-code-strip label {
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#screen-realm .join-code-strip .code-input {
  min-height: 32px;
  font-family: var(--sa-pixel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--sa-gold-hi);
}

/* ==========================================================================
   PLAYERS / RANKING LISTS — dark well, pastel cycling rows, pixel dark text
   ========================================================================== */
#screen-realm .online-player-list,
#screen-realm .leaderboard-list {
  height: 218px;
  overflow-y: auto;
  padding: 5px;
  border: 2px solid var(--sa-well-line);
  border-radius: 0 0 6px 6px;
  background: var(--sa-well); /* replaces the old faint SVG watermark */
  box-shadow: var(--sa-bevel-well);
  color-scheme: dark;
}
#screen-realm .player-list-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  padding: 5px 32px 5px 8px; /* right gutter keeps rows clear of PLAYERS label */
  border: 1px solid rgba(10, 16, 24, 0.5);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  text-align: left;
  color: #1b2a3a;
}
#screen-realm .player-list-row:nth-child(6n+1) { background-color: var(--sa-row-yellow); }
#screen-realm .player-list-row:nth-child(6n+2) { background-color: var(--sa-row-cream); }
#screen-realm .player-list-row:nth-child(6n+3) { background-color: var(--sa-row-salmon); }
#screen-realm .player-list-row:nth-child(6n+4) { background-color: var(--sa-row-cyan); }
#screen-realm .player-list-row:nth-child(6n+5) { background-color: var(--sa-row-blue); }
#screen-realm .player-list-row:nth-child(6n+6) { background-color: var(--sa-row-purple); }
/* Pastel stays on hover (SA look): just pop it a little. */
#screen-realm .player-list-row:hover { filter: brightness(1.06) saturate(1.08); }
#screen-realm .player-list-row:focus-visible {
  outline: 2px solid var(--sa-gold);
  outline-offset: 1px;
}
/* Names render dark pixel on the pastels like the reference; the !important
   beats the inline identity color JS sets on .player-list-name. */
#screen-realm .player-list-name {
  color: #16222f !important;
  font-family: var(--sa-pixel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
#screen-realm .player-list-rating {
  color: #4a5f74;
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
}
#screen-realm .player-list-row .rank-badge {
  filter: drop-shadow(0 1px 1px rgba(20, 14, 2, 0.45));
}

/* ==========================================================================
   ACTION BUTTONS — big chunky stacked 3D buttons (Join game stays gold)
   ========================================================================== */
#screen-realm .lobby-buttons {
  gap: 9px;
  margin-top: 2px;
}
#screen-realm .lobby-buttons .button-large {
  min-height: 46px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 0.03em;
}

/* Integration: keep the mobile chat height from styles.css @900px. */
@media (max-width: 900px) {
  #screen-realm .lobby-chat .chat-list { min-height: 260px; max-height: 340px; }
}