/* ra.css — base shell (menus/HUD waves will extend). Modern DOM UI outside the
   canvas, original pixel art only in-arena (house rule from bman). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #ddd; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 0; }
#sidebar { position: absolute; top: 0; right: 0; bottom: 0; width: 0; }
#selection, #chat { position: absolute; }

#menus { position: fixed; inset: 0; z-index: 20; }
#menus:empty { display: none; }

#fps { position: fixed; left: 6px; bottom: 4px; z-index: 40; font: 12px monospace; color: #7f7; display: none; }

#loading {
  position: fixed; inset: 0; z-index: 30; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
#loading-title { font-size: 42px; font-weight: 800; letter-spacing: 8px; color: #c22; text-shadow: 0 0 24px rgba(200, 30, 30, .5); }
#loading-label { font-size: 14px; color: #999; }
#loading-label.error { color: #f66; }
#loading-bar { width: min(420px, 70vw); height: 10px; border: 1px solid #522; background: #100; }
#loading-fill { width: 0; height: 100%; background: linear-gradient(90deg, #801010, #d03030); transition: width .15s; }

/* ==========================================================================
   Menus / lobby / options / game-over  (ui_menus.js).  RA dark-red aesthetic,
   modern DOM — house rule: menus are modern, pixel art stays in-arena.
   All classes are prefixed .ra-; the shell skeleton above is untouched.
   ========================================================================== */
:root {
  --ra-red: #d8342a; --ra-red-dim: #7a2018; --ra-edge: #5a2422;
  --ra-ink: #ece0da; --ra-mut: #9c8a82; --ra-faint: #6f605a;
  --ra-panel: #17110f; --ra-panel-2: #221915; --ra-panel-3: #2c211b;
  --ra-line: #35271f; --ra-ok: #4ae87c; --ra-warn: #e8974a;
}

.ra-menu {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 25; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at 50% 32%, #26090699 0%, #0a0403 60%, #000 100%), #000;
}
.ra-menu::before {   /* subtle scanline / texture wash */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.22) 3px 4px);
}
.ra-menu--dim { background: rgba(6, 3, 2, .8); }   /* pause overlay: battle shows through */
.ra-panel {
  position: relative; width: 100%; max-width: 420px; background: var(--ra-panel);
  border: 1px solid var(--ra-edge); border-top: 2px solid var(--ra-red);
  box-shadow: 0 0 44px rgba(180,26,20,.22), inset 0 0 60px rgba(0,0,0,.5);
  padding: 24px 26px; color: var(--ra-ink);
}
.ra-panel--wide { max-width: 640px; }
.ra-panel--lobby { max-width: 960px; }
.ra-panel--modal { max-width: 360px; }

.ra-title { text-align: center; margin-bottom: 18px; }
.ra-title h1 {
  font-size: clamp(26px, 6vw, 38px); letter-spacing: 6px; font-weight: 800; color: var(--ra-red);
  text-shadow: 0 0 20px rgba(216,52,42,.45); line-height: 1.05;
}
.ra-title h2 { font-size: 13px; color: var(--ra-mut); font-weight: 400; margin-top: 5px; letter-spacing: 1px; }
.ra-h { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ra-mut); margin: 14px 0 8px; }
.ra-h:first-child { margin-top: 0; }

.ra-btn {
  display: block; width: 100%; margin: 9px 0; padding: 13px 14px; min-height: 46px;
  background: linear-gradient(#241a16, #1b1310); color: var(--ra-ink);
  border: 1px solid #4a382e; border-left: 3px solid #6a4030; cursor: pointer;
  font: 500 15px/1.2 system-ui, sans-serif; text-align: left; letter-spacing: .3px;
  transition: background .12s, border-color .12s, transform .04s;
}
.ra-btn:hover { background: linear-gradient(#3a281f, #291c16); border-left-color: var(--ra-red); }
.ra-btn:active { transform: translateY(1px); }
.ra-btn:focus-visible { outline: 2px solid var(--ra-red); outline-offset: 1px; }
.ra-btn--primary {
  background: linear-gradient(#8f241a, #6a1811); border-color: #b33; border-left-color: var(--ra-red);
  color: #ffe9e4; font-weight: 700; text-align: center; letter-spacing: 1px;
}
.ra-btn--primary:hover { background: linear-gradient(#a82c20, #7e1c14); }
.ra-btn:disabled { opacity: .4; cursor: not-allowed; border-left-color: #4a382e; }
.ra-btn:disabled:hover { background: linear-gradient(#241a16, #1b1310); }
.ra-btn--ghost { background: transparent; border-color: #3a2c25; border-left-color: #3a2c25; color: var(--ra-mut); }
.ra-btn--ghost:hover { color: var(--ra-ink); background: #1c1512; }
.ra-btn--sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: auto; min-height: 38px; margin: 0; padding: 8px 12px; font-size: 13px; text-align: center;
}
.ra-btn--kicon { font-size: 16px; }

.ra-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.ra-row--end { justify-content: flex-end; }
.ra-grow { flex: 1 1 auto; min-width: 0; }
.ra-spacer { flex: 1 1 auto; }

.ra-input, .ra-select {
  width: 100%; padding: 10px 11px; min-height: 44px; background: #0d0b0a; color: var(--ra-ink);
  border: 1px solid #3a2c25; font: 14px system-ui, sans-serif; outline: none;
}
.ra-input:focus, .ra-select:focus { border-color: var(--ra-red); }
.ra-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #9c8a82 50%), linear-gradient(135deg, #9c8a82 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.ra-select:disabled { opacity: .55; cursor: default; }
.ra-input--code { text-transform: uppercase; letter-spacing: 3px; font-weight: 700; text-align: center; }

.ra-note { color: var(--ra-faint); font-size: 12px; line-height: 1.5; margin-top: 14px; text-align: center; }
.ra-note a { color: var(--ra-mut); }
.ra-share {
  display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ra-mut);
  background: #100c0a; border: 1px solid #2a201b; padding: 7px 10px; margin: 4px 0 12px;
}
.ra-share code { color: var(--ra-ink); font: 12px/1 monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }

/* ---- list (rooms / replays) --------------------------------------------- */
.ra-list { max-height: min(46vh, 380px); overflow-y: auto; margin: 6px 0 12px; border: 1px solid #241c17; }
.ra-list__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #201813;
  font-size: 14px;
}
.ra-list__item:last-child { border-bottom: 0; }
.ra-list__item:nth-child(odd) { background: rgba(255,255,255,.015); }
.ra-list__empty { padding: 18px; text-align: center; color: var(--ra-faint); font-size: 13px; }
.ra-list__main { flex: 1 1 auto; min-width: 0; }
.ra-list__sub { color: var(--ra-mut); font-size: 12px; }

.ra-badge {
  display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 700;
  background: #2c211b; color: var(--ra-mut); border: 1px solid #3a2c25;
}
.ra-badge--live { background: #7a2018; color: #ffddd6; border-color: #b33; }
.ra-badge--warn { background: #3a2c14; color: var(--ra-warn); border-color: #7a5a20; }

/* ---- lobby -------------------------------------------------------------- */
.ra-lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ra-col { min-width: 0; }

.ra-slots { display: flex; flex-direction: column; gap: 6px; }
.ra-slot {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
  padding: 8px; background: var(--ra-panel-2); border: 1px solid var(--ra-line); border-left: 3px solid #3a2c25;
}
.ra-slot--you { border-left-color: var(--ra-red); background: #251a15; }
.ra-slot__num { color: var(--ra-faint); font: 700 12px monospace; text-align: center; }
.ra-slot__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ra-slot__name { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ra-slot__name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-slot__dim { color: var(--ra-faint); font-style: italic; }
.ra-slot__ctrls { display: flex; gap: 6px; flex-wrap: wrap; }
.ra-slot__ctrls .ra-select { width: auto; min-width: 92px; flex: 0 1 auto; padding: 5px 24px 5px 8px; min-height: 34px; font-size: 12px; }
.ra-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.ra-crown { color: #e8c44a; }
.ra-away { color: var(--ra-warn); }

.ra-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.ra-swatch {
  width: 26px; height: 26px; min-height: 26px; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}
.ra-swatch--on { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,.5); }
.ra-swatch:disabled { cursor: default; opacity: .8; }

.ra-opts { display: flex; flex-direction: column; gap: 8px; }
.ra-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ra-field > span:first-child { color: var(--ra-mut); font-size: 13px; }
.ra-field .ra-select { width: auto; min-width: 120px; flex: 0 1 auto; }
.ra-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ra-check input { width: 20px; height: 20px; accent-color: var(--ra-red); cursor: pointer; }

.ra-range { display: flex; align-items: center; gap: 10px; }
.ra-range input[type=range] { flex: 1 1 auto; accent-color: var(--ra-red); height: 26px; cursor: pointer; }
.ra-range__val { min-width: 46px; text-align: right; font: 12px monospace; color: var(--ra-ink); }

/* map picker inside lobby */
.ra-mapsearch { margin-bottom: 6px; }
.ra-maps { max-height: 240px; overflow-y: auto; border: 1px solid #241c17; }
.ra-map-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
  border-bottom: 1px solid #201813; font-size: 13px;
}
.ra-map-row:hover { background: #241a15; }
.ra-map-row--on { background: #2e1f18; border-left: 3px solid var(--ra-red); padding-left: 7px; }
.ra-map-row__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-map-row__meta { color: var(--ra-faint); font-size: 11px; }

/* chat */
.ra-chat { display: flex; flex-direction: column; height: 100%; }
.ra-chat__log {
  flex: 1 1 auto; min-height: 96px; max-height: 200px; overflow-y: auto; background: #100c0a;
  border: 1px solid #241c17; padding: 8px; font-size: 13px; line-height: 1.5; margin-bottom: 6px;
}
.ra-chat__msg { word-wrap: break-word; }
.ra-chat__from { font-weight: 700; }
.ra-chat__empty { color: var(--ra-faint); font-style: italic; }

/* ---- game-over ---------------------------------------------------------- */
.ra-over__head { text-align: center; font: 800 30px/1 system-ui; letter-spacing: 4px; margin-bottom: 4px; }
.ra-over__head--win { color: var(--ra-ok); text-shadow: 0 0 22px rgba(74,232,124,.4); }
.ra-over__head--lose { color: var(--ra-red); text-shadow: 0 0 22px rgba(216,52,42,.4); }
.ra-over__sub { text-align: center; color: var(--ra-mut); font-size: 13px; margin-bottom: 16px; }
.ra-stats { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.ra-stats th, .ra-stats td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--ra-line); }
.ra-stats th { color: var(--ra-mut); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.ra-stats td:first-child, .ra-stats th:first-child { text-align: left; }
.ra-stats tr.ra-me td { background: rgba(216,52,42,.08); color: var(--ra-ink); }
.ra-stats__name { display: inline-flex; align-items: center; gap: 6px; }
.ra-stats__win { color: var(--ra-ok); }
.ra-stats__dead { color: var(--ra-faint); text-decoration: line-through; }
.ra-stats-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- how-to ------------------------------------------------------------- */
.ra-howto { max-height: 62vh; overflow-y: auto; }
.ra-howto table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.ra-howto td { padding: 6px 8px; border-bottom: 1px solid var(--ra-line); vertical-align: top; }
.ra-howto td:first-child { color: var(--ra-red); font-weight: 700; white-space: nowrap; width: 38%; }
.ra-kbd { display: inline-block; background: #2c211b; border: 1px solid #4a382e; border-bottom-width: 2px;
  border-radius: 3px; padding: 1px 6px; font: 12px monospace; color: var(--ra-ink); }

/* ---- in-game gear + reconnect banner (live outside #menus) --------------- */
#ra-gear {
  position: fixed; top: 6px; left: 6px; width: 34px; height: 34px; z-index: 41;
  display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  background: rgba(20,12,10,.88); color: var(--ra-ink); border: 1px solid #4a2824; font-size: 18px; line-height: 1;
}
#ra-gear:hover { background: rgba(60,20,16,.95); border-color: var(--ra-red); }
#ra-gear.on { display: flex; }
#hud #ra-top { padding-left: 46px; }   /* reserve the top-left corner for the gear */

#ra-reconnect {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 55; display: none;
  align-items: center; gap: 10px; background: rgba(60,18,14,.95); color: #ffe4de;
  border: 1px solid #b33; padding: 9px 18px; font: 13px system-ui; box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
#ra-reconnect.on { display: flex; }
.ra-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: ra-spin 0.8s linear infinite; }
@keyframes ra-spin { to { transform: rotate(360deg); } }

.ra-toast {
  position: fixed; top: 46px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: rgba(50,14,12,.95); color: #ffe4de; border: 1px solid #7a2018; padding: 9px 18px;
  font: 14px system-ui; box-shadow: 0 4px 18px rgba(0,0,0,.5); max-width: 90vw; text-align: center;
}

/* ---- responsive / touch ------------------------------------------------- */
@media (max-width: 720px) {
  .ra-lobby-grid { grid-template-columns: 1fr; gap: 14px; }
  .ra-panel { padding: 20px 16px; }
}
html.coarse .ra-btn--sm { min-height: 44px; padding: 10px 14px; }
html.coarse .ra-select, html.coarse .ra-input { min-height: 46px; }
html.coarse .ra-slot__ctrls .ra-select { min-height: 40px; }
html.coarse .ra-swatch { width: 34px; height: 34px; }
html.coarse .ra-map-row { padding: 12px 10px; }