/* JUNTA co-op — dark-jungle-military lobby + game chrome
   (forked from zero-sievert; hero strip re-tinted from magenta exclusion-zone
   sky to jungle dusk green — same layout, brand colors only) */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --yellow: #e8d44d;
  --green: #52c46a;
  --red: #d84848;
  --sky: #4a7048; /* jungle dusk (was magenta exclusion-zone sky) */
  --bg-deep: #0a0d08;
  --bg-panel: rgba(14, 18, 12, 0.92);
  --line: #2c3626;
  --line-hi: #4c5c3e;
  --dim: #8a967c;
  /* The first four seat colours, kept in step with core.js LEGACY_PLAYER_COLORS.
     The room list reads the real per-slot table straight from the game, since
     it has to colour all 48; these stay for anything styling a fixed seat. */
  --p1: #4aa3ff;
  --p2: #ff9f43;
  --p3: #5cd65c;
  --p4: #e056fd;
}

html, body {
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, #131a10 0%, var(--bg-deep) 75%);
  color: #dde4d2;
  font-family: "Courier New", monospace;
  overflow: hidden;
}

#app { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

#release-version {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 10000;
  color: rgba(224, 231, 218, 0.78);
  font: 10px/1.2 monospace;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: text;
}

#release-freshness-notice {
  position: fixed;
  left: 50%;
  top: 14px;
  z-index: 20000;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  border: 1px solid #e8d44d;
  background: rgba(12, 16, 10, 0.97);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65);
  color: #dde4d2;
  font: 12px/1.25 "Courier New", monospace;
}

#release-freshness-notice strong { color: #f0e88a; letter-spacing: 0.08em; }
#release-freshness-notice span { color: #c4cdb9; }
#release-freshness-notice button {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #72835f;
  background: #25301f;
  color: #fff;
  font: bold 11px/1 "Courier New", monospace;
  cursor: pointer;
}

@media (max-width: 620px) {
  #release-freshness-notice { align-items: stretch; flex-direction: column; gap: 6px; }
}

/* ── Lobby ───────────────────────────────────────────────────────────────
   Max, 2026-08-02: this screen is for dev/debug testing and for inviting
   friends by link, so it is laid out as a compact console rather than a
   title screen — the link and the people in the room take the space the
   46px wordmark and the treeline strip used to. */
#lobby-screen {
  width: min(880px, 96vw);
  max-height: 96vh;
  overflow-y: auto;
  padding: 16px 22px 20px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  box-shadow: 0 0 40px rgba(82, 196, 106, 0.12), inset 0 0 60px rgba(0,0,0,0.5);
}

#lobby-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 9px;
}

#lobby-title {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 5px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 #000;
}
#lobby-title span { color: #f0e88a; }

#lobby-subtitle { margin: 8px 0 14px; font-size: 11px; color: var(--dim); letter-spacing: 1px; }

#connection-status { font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
#connection-status.connected { color: var(--green); }
#connection-status.disconnected { color: var(--red); }

/* Invite on the left, the knobs a test session turns on the right. */
.lobby-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.lobby-col { display: grid; gap: 14px; align-content: start; }
@media (max-width: 760px) { .lobby-cols { grid-template-columns: 1fr; } }

.lobby-section { margin-bottom: 14px; }
.lobby-cols .lobby-section {
  margin-bottom: 0; padding: 11px 13px 12px;
  background: #0d1109; border: 1px solid var(--line);
}
.lobby-section-title {
  font-size: 11px; letter-spacing: 3px; color: var(--green);
  text-transform: uppercase; margin-bottom: 8px;
}
.lobby-section-title span { color: var(--dim); letter-spacing: 1px; text-transform: none; }

.btn-row { display: flex; gap: 8px; }

.invite-row { display: flex; gap: 8px; }
input#room-code-input {
  flex: 0 0 106px;
  background: #10150c; border: 1px solid var(--line-hi); color: var(--yellow);
  font-family: inherit; font-size: 17px; font-weight: bold; letter-spacing: 3px;
  padding: 7px 8px; text-transform: uppercase; text-align: center;
}
.btn-copy {
  flex: 1 1 auto; font-weight: bold; font-size: 12px; letter-spacing: 1px;
  white-space: nowrap; padding: 7px 10px;
  border-color: var(--green); color: #cfe8c6; background: #1b2c17;
}
.btn-copy:hover:not(:disabled) { background: #24401e; }
input#invite-link {
  width: 100%; margin-top: 7px; padding: 6px 8px;
  background: #0b0f08; border: 1px solid var(--line); color: #bccfb0;
  font-family: inherit; font-size: 11px; letter-spacing: .5px;
}
input#invite-link:focus { outline: none; border-color: var(--green); color: #cfe8c6; }
#invite-hint { margin-top: 7px; font-size: 10px; color: #66735a; letter-spacing: 1px; }

button {
  background: #1a2214; border: 1px solid var(--line-hi); color: #dde4d2;
  font-family: inherit; font-size: 13px; padding: 9px 14px; cursor: pointer;
  letter-spacing: 1px;
}
button:hover:not(:disabled) { background: #26321c; border-color: var(--green); }
button:disabled { opacity: 0.45; cursor: default; }

/* One row per human actually in the room; the list grows as friends arrive
   and wraps into columns rather than reserving empty seats. */
#lobby-roster { padding: 11px 13px 12px; background: #0d1109; border: 1px solid var(--line); }
.player-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 6px;
  max-height: 288px; overflow-y: auto;
}
.player-slot {
  padding: 6px 9px; background: #10150c; border: 1px solid var(--line);
}
.player-slot.occupied { border-color: var(--line-hi); }
/* Your own row, findable at a glance in a room of forty-eight. */
.player-slot.is-me { background: #141c0f; border-left: 3px solid var(--line-hi); padding-left: 6px; }
.player-slot.is-me.ready { border-left-color: var(--green); }
.player-slot.ready { border-color: var(--green); box-shadow: 0 0 8px rgba(82,196,106,.22); }
.slot-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.slot-seat { flex: 0 0 auto; font-size: 10px; color: #66735a; letter-spacing: 1px; }
.slot-label {
  flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: bold; letter-spacing: 1px;
  color: #dde4d2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-status { flex: 0 0 auto; font-size: 10px; color: var(--dim); letter-spacing: 1px; }
.slot-status.is-ready { color: var(--green); }

/* The one place the room says it has space, instead of drawing 46 empty seats. */
.roster-invite {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 6px 9px; font-size: 11px; letter-spacing: 1px; color: #8a967c;
  background: transparent; border: 1px dashed var(--line-hi);
}
.roster-invite:hover { color: #cfe8c6; }
.ri-plus { font-size: 15px; font-weight: bold; color: var(--green); line-height: 1; }
.ri-text { flex: 1 1 auto; }

/* Inline name entry: the name is typed into your own seat row, never in a
   separate dialog. TYPED and TAKEN are the same row in two states. */
.slot-line { display: flex; align-items: center; gap: 7px; }
.slot-label.named { letter-spacing: 1.5px; }
.slot-name-pencil {
  flex: 0 0 auto; padding: 0 5px; font-size: 10px; line-height: 1.5;
  background: transparent; border: 1px solid var(--line); color: var(--dim);
}
.slot-name-pencil:hover:not(:disabled) { color: var(--green); }
.slot-edit { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
/* the class rule above outranks the browser's own [hidden] rule — say it here */
.slot-edit[hidden], .slot-name-pencil[hidden], .slot-team[hidden] { display: none; }
.slot-name-input {
  min-width: 0; padding: 5px 8px; font-size: 13px; font-weight: bold; letter-spacing: 2px;
  background: #0b0f08; border: 1px solid var(--line-hi); color: var(--yellow);
}
.slot-name-input:focus { outline: none; border-color: var(--green); }
.slot-name-input.rejected, .slot-name-input.rejected:focus { border-color: var(--yellow); color: var(--yellow); }
.slot-name-ok { padding: 5px 9px; font-size: 11px; letter-spacing: 1px; }
.slot-name-cancel { padding: 5px 8px; font-size: 11px; }
.slot-name-hint { grid-column: 1 / -1; font-size: 10px; color: var(--dim); letter-spacing: .5px; }
.slot-name-hint.rejected { color: var(--yellow); }

.btn-ready {
  width: 100%; font-size: 19px; font-weight: bold;
  letter-spacing: 5px; padding: 12px;
  background: linear-gradient(180deg, #24401e, #122411);
  border: 1px solid var(--green);
  text-shadow: 0 0 8px var(--green);
}
.btn-ready.is-ready { background: linear-gradient(180deg, #4a4416, #2a260c); border-color: var(--yellow); text-shadow: 0 0 8px var(--yellow); }

#btn-ping-preset { width: 100%; font-weight: bold; letter-spacing: 2px; }
#btn-ping-preset.on {
  color: var(--yellow); border-color: var(--yellow); background: #302b10;
  box-shadow: 0 0 12px rgba(226, 192, 74, .22);
}
#ping-preset-hint { margin-top: 6px; font-size: 10px; color: #66735a; letter-spacing: 1px; }

#lobby-status-text { font-size: 12px; color: var(--dim); min-height: 16px; }
#lobby-refresh-hint { margin-top: 7px; font-size: 11px; color: #b9ad70; line-height: 1.5; }
/* The controls list is reference material, not something to read every time. */
#lobby-help { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 9px; }
#lobby-help summary {
  font-size: 10px; letter-spacing: 2px; color: #66735a;
  text-transform: uppercase; cursor: pointer;
}
#lobby-help summary:hover { color: var(--green); }
#lobby-help-body { margin-top: 8px; font-size: 11px; color: #66735a; line-height: 1.7; }

#gpu-acceleration-hint {
  position: fixed; right: 12px; bottom: 12px; z-index: 10000;
  width: min(390px, calc(100vw - 24px)); padding: 12px 38px 12px 14px;
  background: rgba(17, 21, 13, .96); border: 1px solid #8d7b36;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5); color: #d8d4be;
  font: 12px/1.45 monospace; pointer-events: none;
}
#gpu-acceleration-hint strong,
#gpu-acceleration-hint span,
#gpu-acceleration-hint small { display: block; }
#gpu-acceleration-hint strong { margin-bottom: 4px; color: var(--yellow); letter-spacing: 1px; }
#gpu-acceleration-hint small { margin-top: 6px; color: #a7a184; }
#gpu-acceleration-hint button {
  position: absolute; top: 6px; right: 7px; width: 26px; height: 26px;
  padding: 0; border: 0; background: transparent; color: #bcb69c;
  font: bold 16px/26px monospace; pointer-events: auto;
}

/* ── Game ──────────────────────────────────────────────────────────────── */
#game-wrapper { display: none; position: relative; width: 100%; height: 100%; align-items: center; justify-content: center; }
#game-wrapper.active { display: flex; }
#lobby-screen.hidden { display: none; }

#join-rejected-screen {
  display: none; width: 100%; height: 100%; align-items: center; justify-content: center;
  padding: 20px;
}
#join-rejected-screen.active { display: flex; }
.join-rejected-card {
  width: min(460px, 100%); padding: 30px; text-align: center;
  background: var(--bg-panel); border: 1px solid var(--line-hi);
  box-shadow: 0 0 40px rgba(0,0,0,.55);
}
.join-rejected-card h2 { color: var(--red); margin-bottom: 14px; }
.join-rejected-card p { color: var(--dim); line-height: 1.6; margin-bottom: 18px; }

canvas#game-canvas {
  max-width: 100vw; max-height: 100vh;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: contain;
  background: #000;
  cursor: crosshair;
  image-rendering: pixelated;
}

#countdown-overlay {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; pointer-events: none;
}
#countdown-overlay.active { display: flex; }
#countdown-content { display: flex; flex-direction: column; align-items: center; gap: 24px; }
#countdown-load { width: min(420px, 70vw); display: none; }
#countdown-overlay.world-loading #countdown-load { display: block; }
#countdown-load-track {
  height: 12px; padding: 2px; border: 1px solid #3a4a34;
  background: repeating-linear-gradient(90deg,#0c120d 0,#0c120d 36px,#16211a 36px,#16211a 38px);
}
#countdown-load-bar {
  height: 100%; background: var(--green); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 120ms ease-out; will-change: transform;
}
#countdown-load-stage {
  margin-top: 7px; color: var(--dim); font: 700 13px/1.3 'Courier New', monospace;
  letter-spacing: 1px; text-align: left;
}
#countdown-overlay.auto-ready-entry {
  background: #000;
  z-index: 25;
}
#countdown-overlay.auto-ready-rejected {
  flex-direction: column;
  gap: 24px;
  pointer-events: auto;
}
#countdown-overlay.auto-ready-entry #countdown-number {
  max-width: 90vw;
  font-size: clamp(24px, 5vw, 58px);
  letter-spacing: .08em;
  text-align: center;
}
#auto-ready-rejected-action { font-size: 16px; padding: 12px 20px; }
#countdown-number {
  font-size: 120px; font-weight: bold; color: var(--green);
  text-shadow: 5px 5px 0 #000, 0 0 40px var(--green);
}

#disconnected-overlay {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(4, 8, 4, 0.9); z-index: 30;
}
#disconnected-overlay.active { display: flex; }
#dc-title { color: var(--red); letter-spacing: 4px; }
#dc-message { color: var(--dim); font-size: 13px; }

#mute-btn, #fullscreen-btn, #options-btn {
  position: absolute; bottom: 10px; z-index: 20;
  width: 40px; height: 40px; padding: 0; font-size: 18px;
  background: rgba(14, 18, 12, 0.6); border: 1px solid var(--line-hi);
}
#mute-btn { right: 10px; }
#fullscreen-btn { right: 58px; }

/* v0.2: mobile support cut — rotate-hint + touch UI (joysticks, tbtn column,
   joy hints, body.touch offsets) removed. Desktop mouse+keyboard only. */

/* ── el-cerco(ui): lobby match selectors (GDD §3) ─────────────────────────── */
.ec-selrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ec-sel-label { font-size: 10px; letter-spacing: 2px; color: var(--dim); }
.ec-gap { margin-left: 10px; }
.ec-seg { display: flex; }
.ec-seg button {
  width: 40px; padding: 7px 0; font-size: 15px; font-weight: bold;
  background: #10150c; border: 1px solid var(--line);
}
.ec-seg button + button { border-left: none; }
.ec-seg button.on {
  background: #24401e; border-color: var(--green); color: var(--green);
  text-shadow: 0 0 6px var(--green);
}
.ec-step { display: flex; align-items: center; }
.ec-step button {
  width: 34px; padding: 7px 0; font-size: 15px; font-weight: bold;
  background: #10150c; border: 1px solid var(--line);
}
#ec-bot-n {
  min-width: 40px; text-align: center; font-size: 17px; font-weight: bold;
  color: var(--yellow); padding: 6px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: #10150c;
}
#ec-match-hint { margin-top: 7px; font-size: 10px; color: #66735a; letter-spacing: 1px; }
#ec-match.ec-readonly .ec-seg button,
#ec-match.ec-readonly .ec-step button { opacity: 0.45; cursor: default; pointer-events: none; }
.slot-team { font-size: 9px; color: var(--green); margin: 2px 0 0 16px; letter-spacing: 1px; }
.slot-team:empty { display: none; }

/* ── el-cerco(ui): spectate controls (GDD §7 — always-tappable DOM) ───────── */
#spec-ui { display: none; position: absolute; top: 10px; left: 10px; z-index: 18; gap: 8px; }
#spec-ui.active { display: flex; }
#game-wrapper.victory-continue #spec-ui { display: none; }
#spec-ui button {
  font-size: 12px; font-weight: bold; letter-spacing: 1px; padding: 8px 12px;
  background: rgba(14, 18, 12, 0.8); border: 1px solid var(--line-hi);
}
#spec-ui #spec-exit { color: var(--yellow); border-color: var(--yellow); }
#spec-ui #spec-map { color: #9fc5e8; border-color: #557a9e; }
#spec-ui #spec-team { color: var(--green); border-color: var(--green); }