/* THE LOBBY (user 2026-10-08, from a reference image: "make it more like this,
 * this looks much cleaner"). game.js openLobbyPicker builds .lv and moves the
 * working pieces into it: the picker's ship grid and detail panel, the lobby's
 * clocks, rosters and buttons. Three columns -- ship cards | queue clock over
 * the chosen ship | both teams -- phone-first, the full layout from 1000px. */

#mpLobby {
  --lv-cyan: #3fd4ff;
  --lv-cyan-2: #1a9fe0;
  --lv-ink: #e6f6ff;
  --lv-ink-2: #9fc6dd;
  --lv-ink-3: #5f8aa6;
  --lv-line: rgba(63, 212, 255, .42);
  --lv-line-dim: rgba(63, 212, 255, .18);
  --lv-panel: linear-gradient(180deg, rgba(7, 27, 48, .9), rgba(3, 13, 27, .93));
  --lv-red: #ff5468;
  --lv-red-line: rgba(255, 84, 104, .55);
  --lv-gold: #f4b63a;
}

/* ---- frame ------------------------------------------------------------------ */
.lobbyShips[hidden] { display: none !important; }
#shipPicker.lvShell { display: none !important; }
#mpModal.picking .mpTitle, #mpModal.picking .lobbyFooter { display: none !important; }
#mpModal.mpFull.picking #mpPanel {
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  overflow: hidden;
}
#mpModal.mpFull #mpLobby.lvOn { width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 0; }
#mpLobby.lvOn .lobbyContent { flex: 1 1 auto; min-height: 0; display: block; height: 100%; }
#mpLobby.lvOn .lobbyContent > :not(.lv) { display: none !important; }

.lv {
  height: 100%; min-height: 0; box-sizing: border-box; color: var(--lv-ink);
  font-family: 'Rajdhani', 'Chakra Petch', system-ui, sans-serif;
  display: grid; gap: 6px 8px;
  grid-template-columns: minmax(122px, 17%) minmax(0, 1fr) minmax(176px, 25%);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "top top top" "ships queue roster" "ships detail roster";
}
.lv *, .lv *::before, .lv *::after { box-sizing: border-box; }
.lv button { font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lv button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the chamfered panel every column sits in */
.lvShips, .lvDetail, .lvRoster {
  position: relative; min-height: 0; background: var(--lv-panel);
  border: 1px solid var(--lv-line);
  box-shadow: inset 0 0 26px rgba(25, 140, 220, .13), 0 8px 28px rgba(0, 0, 0, .45);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

/* ---- top bar ------------------------------------------------------------------ */
.lvTop { grid-area: top; display: flex; align-items: center; gap: 12px; min-height: 30px; padding: 0 4px; }
.lvLogo { height: 26px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(63, 212, 255, .45)); }
.lvSub #lobbyMode { margin: 0; font: inherit; letter-spacing: inherit; color: #fff; text-transform: uppercase; }
.lvSub .lvDot { margin: 0 .5em; color: var(--lv-ink-3); }
.lvTopRight { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lvTop #lobbyMotion { background: none; border: 1px solid var(--lv-line-dim); color: var(--lv-ink-3); font-size: 10px; letter-spacing: .14em; padding: 4px 8px; cursor: pointer; }
.lvTop #lobbyMotion:hover { color: var(--lv-ink-2); border-color: var(--lv-line); }
.lvGear { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; color: var(--lv-ink-2); font-size: 20px; cursor: pointer; }
.lvGear:hover { color: #fff; }

/* ---- left: ship cards -------------------------------------------------------- */
.lvShips { grid-area: ships; display: flex; flex-direction: column; padding: 8px 6px 6px; gap: 6px; }
.lvH { margin: 0 2px; font: 700 12px/1.1 'Rajdhani', sans-serif; letter-spacing: .14em; color: var(--lv-ink); text-transform: uppercase; }
.lvShipList { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #1f5f86 transparent; padding: 2px; }
.lv .spGrid { display: flex !important; flex-direction: column; gap: 5px; overflow: visible !important; padding: 0 !important; grid-auto-columns: auto !important; }
.lv .spTile {
  position: relative; display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; align-items: center;
  width: 100%; height: 50px !important; flex: none; padding: 0 6px 0 0; text-align: left; cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 34, 58, .85), rgba(4, 16, 30, .85)); color: var(--lv-ink);
  border: 1px solid var(--lv-line-dim); border-radius: 0; scroll-snap-align: none;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color .15s, background .15s;
}
.lv .spTile::after { display: none; }
.lv .spTile > b { display: none; }
.lv .spTile .spTileArt { position: static !important; inset: auto !important; grid-column: 1; grid-row: 1 / -1; width: 100%; height: 100%;
  background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; filter: drop-shadow(0 3px 6px #000a); }
.lv .spTile .spTileName { display: block !important; position: static; grid-column: 2; grid-row: 2; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lv-ink); padding: 0; background: none; }
.lv .spTile .spTileRole { display: block; grid-column: 2; grid-row: 3; font-size: 9px; letter-spacing: .14em; color: var(--lv-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv .spTile .spTileRole:not(:empty)::before { content: '◇ '; color: var(--lv-cyan); }
.lv .spTile:hover { border-color: var(--lv-line); background: linear-gradient(180deg, rgba(16, 52, 86, .9), rgba(6, 22, 40, .9)); }
.lv .spTile.on { border: 1px solid var(--lv-cyan); background: linear-gradient(180deg, rgba(20, 74, 120, .92), rgba(6, 30, 56, .92));
  box-shadow: inset 0 0 0 1px rgba(63, 212, 255, .55), inset 0 0 22px rgba(63, 212, 255, .28); }
.lv .spTile.on::before { content: '✓'; position: absolute; top: 4px; right: 4px; z-index: 2; width: 16px; height: 16px; display: grid; place-items: center;
  border-radius: 50%; background: #1278c8; border: 1px solid #9fe2ff; color: #fff; font-size: 10px; font-weight: 700; }
.lv .spTile.locked .spTileArt { filter: grayscale(.75) brightness(.6); }
.lv .spTile .spLock { position: absolute; left: 5px; top: 5px; width: 12px; height: 14px; fill: var(--lv-gold); z-index: 2; }
.lv .spTile .spLock svg { width: 100%; height: 100%; fill: var(--lv-gold); }
.lv .spTile .spTaken { position: absolute; left: 4px; bottom: 3px; top: auto; right: auto; max-width: 42%; font-size: 8px; padding: 0 4px; border-radius: 2px;
  background: #3a2a06e6; color: #ffd36b; font-style: normal; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
#mpLobby.lvLocked .spTile:not(.on) { opacity: .38; pointer-events: none; }
.lvDetailsBtn { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 0 8px;
  background: rgba(6, 24, 44, .85); border: 1px solid var(--lv-line); color: var(--lv-ink); font-size: 10px; font-weight: 700; letter-spacing: .14em; cursor: pointer; }
.lvDetailsBtn svg { width: 12px; height: 12px; color: var(--lv-cyan); }
.lvDetailsBtn:hover { background: rgba(14, 50, 84, .9); border-color: var(--lv-cyan); }

/* ---- centre top: the queue clock ------------------------------------------- */
.lvQueue { grid-area: queue; display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "title ring map" "sub ring map"; align-items: center; gap: 0 12px; min-width: 0; }
.lvTitle { grid-area: title; margin: 0; font: 700 18px/1 'Rajdhani', sans-serif; letter-spacing: .18em; color: #fff; text-shadow: 0 0 14px rgba(63, 212, 255, .45); }
.lvSub { grid-area: sub; margin: 2px 0 0; font-size: 9px; font-weight: 700; letter-spacing: .24em; color: var(--lv-cyan); }
#mpLobby .lvFound { display: none; }
#mpLobby.matchFound .lvFound { display: revert; }
#mpLobby.matchFound .lvSearching { display: none; }
.lvRing { grid-area: ring; position: relative; width: 74px; height: 74px; }
.lvRingArt { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lvRingArt circle { fill: none; transform-origin: 100px 100px; }
.lvR1 { stroke: rgba(63, 212, 255, .2); stroke-width: 1.5; }
.lvR2 { stroke: rgba(63, 212, 255, .25); stroke-width: 7; }
.lvR3 { stroke: var(--lv-cyan); stroke-width: 7; stroke-dasharray: 120 383; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--lv-cyan)); animation: lvSpin 2.6s linear infinite; }
.lvR4 { stroke: rgba(63, 212, 255, .35); stroke-width: 1.5; stroke-dasharray: 4 8; animation: lvSpin 14s linear infinite reverse; }
#mpLobby.matchFound .lvR3 { stroke: var(--lv-gold); filter: drop-shadow(0 0 6px var(--lv-gold)); stroke-dasharray: 503 0; }
@keyframes lvSpin { to { transform: rotate(360deg); } }
.lobbyStill .lvR3, .lobbyStill .lvR4 { animation-play-state: paused; }
.lvRingTx { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }
.lvLbl { font-size: 6px; font-weight: 700; letter-spacing: .16em; color: var(--lv-ink-2); }
.lvBig { font: 700 18px/1.05 'Rajdhani', sans-serif; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(63, 212, 255, .7); }
.lvBig #lobbyElapsed, .lvBig #lobbyLaunchCount { font: inherit; color: inherit; }
#mpLobby.matchFound .lvBig { color: #ffe2a0; text-shadow: 0 0 10px rgba(244, 182, 58, .7); }
.lvSmall { margin-top: 1px; }
.lvEst #lobbyEstimate { font: 700 9px/1 'Rajdhani', sans-serif; color: var(--lv-ink); letter-spacing: .04em; }
.lvMapSlot { grid-area: map; min-width: 0; justify-self: end; }
.lvMapSlot #lobbyMap { margin: 0; width: min(220px, 100%); }
.lvGuest { min-width: 0; }
.lvGuest #lobbyCallsign { margin: 0; padding: 6px 8px; background: rgba(4, 18, 34, .8); border: 1px solid var(--lv-line); }
.lvGuest #lobbyCallsign label { font-size: 9px; letter-spacing: .12em; color: var(--lv-ink-2); }
.lvGuest #lobbyCallsign > div { display: flex; gap: 6px; margin-top: 4px; }
.lvGuest #lobbyCallsign input { flex: 1; min-width: 0; }

/* ---- centre: the chosen ship ---------------------------------------------- */
.lvDetail { grid-area: detail; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 10px 8px; overflow: hidden; }
.lvDetail::-webkit-scrollbar { display: none; }
.lvDetailBody { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lvDetailBody::-webkit-scrollbar { display: none; }
.lv .spDetail {
  display: grid !important; min-height: 0; padding: 0 !important; margin: 0; border: 0 !important; background: none !important;
  grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); grid-template-rows: auto auto auto auto;
  grid-template-areas: "art ident" "art desc" "art stats" "kit kit"; gap: 3px 12px; align-items: start;
}
.lv .spIdentity { grid-area: ident; text-align: left; justify-content: flex-start; display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.lv .spName { font: 700 17px/1.1 'Rajdhani', sans-serif; letter-spacing: .14em; color: #fff; text-transform: uppercase; }
.lv .spRole { display: flex; align-items: center; }
.lv .spRole .spRoleText { display: none !important; }
.lv .spRole .shipTypeBadge { font-size: 9px; letter-spacing: .14em; padding: 2px 8px; border: 1px solid var(--lv-line); background: rgba(10, 40, 70, .8);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.lv .spArt { grid-area: art; position: relative; min-height: 104px; height: 100%; align-self: stretch;
  background: radial-gradient(ellipse at 50% 72%, rgba(0, 150, 220, .28), transparent 68%) !important; }
.lv .spArt::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 14%; border-radius: 50%;
  border: 1px solid rgba(63, 212, 255, .35); box-shadow: 0 0 16px rgba(63, 212, 255, .25); pointer-events: none; }
/* The ship's portrait art, not the 3D pad: it is what the reference shows, and one less WebGL view. */
.lv #spCanvas { display: none !important; }
.lv #spHeroArt { display: block !important; }
.lv #spHeroArt { inset: 4px 2px 12% !important; }
.lv .spDesc { grid-area: desc; display: block !important; margin: 0; text-align: left; font-size: 10px; line-height: 1.35; color: var(--lv-ink-2);
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv .spStats { grid-area: stats; display: grid !important; gap: 2px; min-width: 0; width: 100%; justify-self: stretch; }
.lv .spVitals, .lv .spSpeed { display: grid; gap: 2px; }
.lv .spStat { display: grid; grid-template-columns: 14px 50px minmax(40px, 1fr) auto; gap: 6px; align-items: center; font-size: 10px; color: var(--lv-ink-2); white-space: nowrap; }
.lv .spStatIcon { font-size: 13px; font-style: normal; color: var(--stat); text-align: center; line-height: 1; }
.lv .spStatTrack { height: 5px; min-width: 20px; border: 1px solid rgba(63, 212, 255, .25); background: rgba(3, 16, 28, .9); overflow: hidden; border-radius: 1px; }
.lv .spStatTrack i { display: block; height: 100%; background: linear-gradient(90deg, var(--stat), #d6f7ff); box-shadow: 0 0 6px var(--stat); }
.lv .spStat strong { min-width: 66px; text-align: right; font-size: 11px; font-weight: 700; color: var(--stat); font-variant-numeric: tabular-nums; }
.lv .spKit { grid-area: kit; display: block !important; padding: 4px 0 0 !important; margin: 0; border: 0 !important; border-top: 1px solid var(--lv-line-dim) !important; }
.lv .spAbilTitle { margin: 2px 0 4px; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .2em; color: var(--lv-ink-2); }
.lv .spAbils { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.lv .spAbil { flex: 0 0 30px; width: 30px; height: 30px; }
.lv .spAbil .aico { width: 24px; height: 24px; }
.lv .spAdvice { flex: none; text-align: center; font-size: 11px; line-height: 1.3; color: var(--lv-ink); font-weight: 600; min-height: 14px; }
.lv .spAdvice b { color: #ffd36b; }
.lv .spAdvice button { margin-left: 4px; font: inherit; font-weight: 700; font-size: 10px; color: #08131f; background: #5df29a; border: 0; border-radius: 3px; padding: 1px 8px; cursor: pointer; }
.lvActions { flex: none; display: flex; justify-content: center; align-items: center; gap: 10px; }
.lv .spConfirm { width: min(380px, 70%) !important; min-height: 38px !important; margin: 0 !important; padding: 4px 26px !important; font-size: 16px !important;
  justify-content: center !important; }
.lv .spConfirm span { font-size: 15px !important; }
#mpLobby.lvLocked .lv .spConfirm { opacity: 1; filter: saturate(.6) brightness(.9); color: #bfe9ff; cursor: default; }
.lvUnlock { flex: none; min-height: 38px; padding: 0 16px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: #ffe2a0; background: rgba(60, 40, 6, .82); border: 1px solid rgba(244, 182, 58, .7);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.lvUnlock::before { content: '🔓 '; }
.lvUnlock:hover { background: rgba(96, 64, 10, .92); color: #fff; }
.lvUnlock[hidden] { display: none; }

/* ---- right: both teams --------------------------------------------------------- */
.lvRoster { grid-area: roster; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 6px; }
.lvRosterHead { flex: none; display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--lv-ink); }
.lvRosterHead #lobbyCount { color: var(--lv-ink-2); letter-spacing: .08em; }
.lvTeams { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.lvTeams::-webkit-scrollbar { display: none; }
#mpModal.mpFull #mpLobby.lvOn #lobbyTeams { display: flex !important; flex-direction: column; gap: 6px; margin: 0; }
#mpModal.mpFull #mpLobby.lvOn .lobbyVersus, #mpModal.mpFull #mpLobby.lvOn .lobbySwitch { display: none !important; }
#mpModal.mpFull #mpLobby.lvOn .lobbyCol { width: 100%; padding: 0; border: 1px solid var(--lv-line); background: rgba(4, 18, 34, .78); }
#mpModal.mpFull #mpLobby.lvOn .lobbyCol[data-team="1"] { border-color: var(--lv-line); }
#mpModal.mpFull #mpLobby.lvOn .lobbyColHead { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 4px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #fff; background: linear-gradient(90deg, rgba(20, 110, 190, .55), rgba(10, 60, 110, .2)); border-bottom: 1px solid var(--lv-line); }
/* the enemy team is the one whose header says ENEMY TEAM: game.js orders your team first */
#mpModal.mpFull #mpLobby.lvOn .lobbyCol.lvEnemy { border-color: var(--lv-red-line); background: rgba(30, 6, 14, .72); }
#mpModal.mpFull #mpLobby.lvOn .lobbyCol.lvEnemy .lobbyColHead { color: #ffb3bc; background: linear-gradient(90deg, rgba(150, 24, 44, .6), rgba(80, 10, 24, .2)); border-bottom-color: var(--lv-red-line); }
#mpModal.mpFull #mpLobby.lvOn .lobbyList { display: flex !important; flex-direction: column; gap: 0 !important; padding: 0; }
#mpModal.mpFull #mpLobby.lvOn .lobbyList > div {
  display: grid !important; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 6px !important;
  min-height: 30px !important; padding: 2px 6px !important; margin: 0; border: 0 !important; border-bottom: 1px solid rgba(63, 212, 255, .1) !important;
  border-radius: 0; background: transparent !important; box-shadow: none !important; text-align: left; font-size: 11px; flex-wrap: nowrap;
}
#mpModal.mpFull #mpLobby.lvOn .lobbyList > div:last-child { border-bottom: 0 !important; }
#mpModal.mpFull #mpLobby.lvOn .lobbyList > .me { background: rgba(63, 212, 255, .08) !important; }
#mpLobby.lvOn .lobP .lobShipPort, #mpLobby.lvOn .lobP .lobPilotIcon, #mpLobby.lvOn .lobEmpty .lobPilotIcon {
  grid-column: 1; width: 26px; height: 26px; border-radius: 2px; border: 1px solid rgba(63, 212, 255, .4); background-color: #0a2440; background-position: center; background-size: 92%; background-repeat: no-repeat; }
#mpLobby.lvOn .lobP .lobPilotIcon, #mpLobby.lvOn .lobEmpty .lobPilotIcon { color: #4d7ea3; overflow: hidden; }
#mpLobby.lvOn .lobPilotIcon::before { width: 9px; height: 10px; left: 8px; top: 4px; }
#mpLobby.lvOn .lobPilotIcon::after { width: 20px; height: 10px; left: 2px; bottom: 0; }
#mpModal.mpFull #mpLobby.lvOn .lobbyCol.lvEnemy .lobPilotIcon { color: #a8505f; border-color: var(--lv-red-line); background-color: #2a0b14; }
#mpLobby.lvOn .lobP .lobPilotName { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--lv-ink); }
#mpLobby.lvOn .lobP .lobPilotName > :not(.lobNameTxt) { display: none !important; }
#mpLobby.lvOn .lobP .lobShip, #mpLobby.lvOn .lobP em.lobYou, #mpLobby.lvOn .lobP .lobLock, #mpLobby.lvOn .lobP .lobChoosing { display: none !important; }
#mpLobby.lvOn .lobP .roleBadge { grid-column: 3; }
#mpLobby.lvOn .lobState { grid-column: 4; display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--lv-ink-3); font-style: italic; }
#mpLobby.lvOn .lobState.ready { color: var(--lv-cyan); font-style: normal; }
#mpLobby.lvOn .lobCheck { width: 15px; height: 15px; display: inline-grid; place-items: center; border-radius: 50%; background: #1f8bff; color: #fff; font-size: 9px; font-style: normal; box-shadow: 0 0 6px rgba(40, 150, 255, .7); }
#mpModal.mpFull #mpLobby.lvOn .lobbyList > .lobEmpty { color: var(--lv-ink-3); font-size: 11px; }
#mpLobby.lvOn .lobEmpty > span:not(.lobPilotIcon) { grid-column: 2 / 4; }
#mpLobby.lvOn .lobSpin { grid-column: 4; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(159, 198, 221, .25); border-top-color: var(--lv-ink-2); animation: lvSpin 1s linear infinite; }
.lobbyStill .lobSpin { animation-play-state: paused; }
.lvLeave { flex: none; display: flex; flex-direction: column; gap: 3px; }
#mpModal.mpFull #mpLobby.lvOn #leaveLobby { width: 100% !important; min-height: 34px !important; margin: 0 !important; padding: 4px 8px !important;
  font-size: 11px !important; font-weight: 700; letter-spacing: .16em; color: #ff8f9c !important; background: rgba(46, 8, 16, .85) !important;
  border: 1px solid var(--lv-red-line) !important; border-radius: 0 !important; cursor: pointer; }
#mpLobby.lvOn #leaveLobby::before { content: '✕  '; color: var(--lv-red); }
#mpModal.mpFull #mpLobby.lvOn #leaveLobby:hover { background: rgba(90, 16, 30, .9) !important; color: #fff !important; }
.lvLeaveNote { margin: 0; text-align: center; font-size: 9px; color: var(--lv-ink-3); }

/* role badges in the team rows (lobby-ships.js) */
.roleBadge { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 8px; font-weight: 700; letter-spacing: .1em; vertical-align: middle;
  color: var(--role); border: 1px solid var(--role); background: color-mix(in srgb, var(--role) 14%, transparent); white-space: nowrap; }
.spAdvice:empty { display: none; }

/* ---- VIEW SHIP DETAILS ---------------------------------------------------------- */
#lvShipModal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 14px; background: rgba(1, 6, 14, .72);
  font-family: 'Rajdhani', 'Chakra Petch', system-ui, sans-serif; color: #e6f6ff; }
#lvShipModal .lvModalCard { position: relative; width: min(560px, 100%); max-height: calc(100vh - 28px); overflow-y: auto; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(8, 30, 54, .98), rgba(3, 12, 26, .98)); border: 1px solid rgba(63, 212, 255, .5);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
#lvShipModal .lvModalX { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; background: none; border: 0; color: #9fc6dd; font-size: 18px; cursor: pointer; }
#lvShipModal .lvModalX:hover { color: #fff; }
#lvShipModal .lvModalHead { display: flex; gap: 14px; align-items: center; }
#lvShipModal .lvModalArt { flex: none; width: 110px; height: 70px; background: center / contain no-repeat; filter: drop-shadow(0 4px 8px #000a); }
#lvShipModal h3 { margin: 0 0 4px; font: 700 24px/1.1 'Rajdhani', sans-serif; letter-spacing: .14em; }
#lvShipModal .lvModalTag { margin: 4px 0 0; font-size: 11px; letter-spacing: .2em; color: #3fd4ff; }
#lvShipModal .lvModalDesc { margin: 10px 0 12px; font-size: 14px; line-height: 1.45; color: #b7d6e8; }
#lvShipModal .lvModalAbils { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#lvShipModal .lvModalAbils li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; padding-top: 8px; border-top: 1px solid rgba(63, 212, 255, .14); }
#lvShipModal .lvModalAbils .spAbil { width: 40px; height: 40px; flex: none; }
#lvShipModal .lvModalAbils .aico { width: 32px; height: 32px; }
#lvShipModal .lvModalAbils b { font-size: 15px; letter-spacing: .04em; }
#lvShipModal .lvModalAbils p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: #a8c8db; }

/* ---- tablets and desktops: the full layout -------------------------------------- */
@media (min-width: 1000px) and (min-height: 600px) {
  .lv { gap: 14px 18px; grid-template-columns: minmax(230px, 20%) minmax(0, 1fr) minmax(300px, 24%); }
  #mpModal.mpFull.picking #mpPanel { padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .lvTop { min-height: 54px; border-bottom: 1px solid var(--lv-line-dim); padding-bottom: 6px; }
  .lvLogo { height: 44px; }
  .lvShips, .lvRoster { padding: 14px 12px 12px; gap: 12px; }
  .lvH { font-size: 19px; letter-spacing: .1em; }
  .lv .spGrid { gap: 10px; }
  .lv .spTile { height: 92px !important; grid-template-columns: 50% minmax(0, 1fr); padding-right: 10px; }
  .lv .spTile .spTileName { font-size: 16px; }
  .lv .spTile .spTileRole { font-size: 11px; }
  .lv .spTile.on::before { width: 24px; height: 24px; font-size: 13px; top: 8px; right: 8px; }
  .lvDetailsBtn { min-height: 42px; font-size: 13px; }
  .lvQueue { grid-template-columns: 1fr; grid-template-areas: "title" "sub" "ring" "map"; justify-items: center; text-align: center; gap: 4px; }
  .lvTitle { font-size: 38px; letter-spacing: .16em; }
  .lvSub { font-size: 13px; letter-spacing: .3em; margin-top: 4px; }
  .lvRing { width: min(220px, 24vh); height: min(220px, 24vh); margin: 6px 0 2px; }
  .lvLbl { font-size: 12px; letter-spacing: .2em; }
  .lvBig { font-size: clamp(36px, 6vh, 58px); margin: 2px 0 4px; }
  .lvSmall { margin-top: 2px; }
  .lvEst #lobbyEstimate { font-size: 18px; }
  .lvMapSlot { justify-self: center; }
  .lvDetail { padding: 18px 22px 16px; gap: 10px; }
  .lv .spDetail { grid-template-columns: minmax(200px, 40%) minmax(0, 1fr); gap: 8px 22px; }
  .lv .spName { font-size: 30px; }
  .lv .spRole .shipTypeBadge { font-size: 12px; padding: 4px 12px; }
  .lv .spArt { min-height: 190px; }
  .lv .spDesc { font-size: 14px; -webkit-line-clamp: 3; }
  .lv .spStats { gap: 6px; }
  .lv .spVitals, .lv .spSpeed { gap: 6px; }
  .lv .spStat { grid-template-columns: 20px 78px minmax(90px, 1fr) auto; gap: 12px; font-size: 15px; }
  .lv .spStatIcon { font-size: 18px; }
  .lv .spStatTrack { height: 7px; }
  .lv .spStat strong { font-size: 16px; min-width: 104px; }
  .lv .spKit { padding-top: 10px !important; }
  .lv .spAbilTitle { font-size: 13px; margin-bottom: 10px; }
  .lv .spAbils { gap: 10px; }
  .lv .spAbil { flex-basis: 54px; width: 54px; height: 54px; }
  .lv .spAbil .aico { width: 44px; height: 44px; }
  .lv .spAdvice { font-size: 16px; min-height: 22px; }
  .lv .spConfirm { min-height: 46px !important; font-size: 19px !important; width: min(360px, 56%) !important; }
  .lv .spConfirm span { font-size: 17px !important; }
  .lvUnlock { min-height: 46px; font-size: 13px; padding: 0 18px; }
  .lvRosterHead { font-size: 17px; }
  #mpModal.mpFull #mpLobby.lvOn #lobbyTeams { gap: 14px; }
  #mpModal.mpFull #mpLobby.lvOn .lobbyColHead { padding: 9px 12px; font-size: 16px; }
  #mpModal.mpFull #mpLobby.lvOn .lobbyList > div { grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px !important; min-height: 50px !important; padding: 4px 12px !important; }
  #mpLobby.lvOn .lobP .lobShipPort, #mpLobby.lvOn .lobP .lobPilotIcon, #mpLobby.lvOn .lobEmpty .lobPilotIcon { width: 40px; height: 40px; }
  #mpLobby.lvOn .lobPilotIcon::before { width: 14px; height: 16px; left: 12px; top: 6px; }
  #mpLobby.lvOn .lobPilotIcon::after { width: 30px; height: 15px; left: 4px; }
  #mpLobby.lvOn .lobP .lobPilotName { font-size: 16px; }
  .roleBadge { font-size: 11px; padding: 2px 8px; }
  #mpLobby.lvOn .lobState { font-size: 12px; gap: 6px; }
  #mpLobby.lvOn .lobCheck { width: 22px; height: 22px; font-size: 12px; }
  #mpLobby.lvOn .lobSpin { width: 20px; height: 20px; }
  #mpModal.mpFull #mpLobby.lvOn #leaveLobby { min-height: 52px !important; font-size: 16px !important; }
  .lvLeaveNote { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .lvR3, .lvR4, .lobSpin { animation: none; } }

/* ---- phones (landscape): every pixel of height counts ---------------------------- */
@media (max-width: 999px), (max-height: 599px) {
  .lvTop { min-height: 22px; gap: 8px; }
  .lvLogo { height: 18px; }
  .lvTop #lobbyMotion { font-size: 8px !important; padding: 2px 6px !important; min-height: 0 !important; height: auto !important; line-height: 1.2 !important; }
  .lvGear { width: 24px; height: 24px; font-size: 15px; }
  .lvQueue { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title ring" "sub ring"; gap: 2px 18px; padding: 6px 14px;
    background: var(--lv-panel); border: 1px solid var(--lv-line);
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
  .lvMapSlot { display: none; }
  .lvTitle { font-size: 17px; letter-spacing: .16em; }
  .lvSub { font-size: 8px; letter-spacing: .18em; margin: 3px 0 0; }
  .lvRing { width: auto; height: auto; }
  .lvRingArt { display: none; }
  .lvRingTx { position: static; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 1px 0; align-items: baseline; justify-items: start; text-align: left; }
  .lvRingTx > * { padding: 0 14px; }
  .lvRingTx > .lvLbl:not(.lvSmall), .lvRingTx > .lvBig { grid-column: 1; }
  .lvRingTx > .lvSmall, .lvRingTx > .lvEst { grid-column: 2; border-left: 1px solid var(--lv-line-dim); }
  .lvRingTx > .lvLbl { grid-row: 1; margin: 0; }
  .lvRingTx > .lvBig, .lvRingTx > .lvEst { grid-row: 2; }
  .lvLbl { font-size: 7px; letter-spacing: .16em; }
  .lvBig { font-size: 20px; line-height: 1.1; margin: 0; }
  .lvEst { line-height: 1.1; }
  .lvEst #lobbyEstimate { font-size: 15px; color: var(--lv-ink-2); }
  .lv .spDesc { display: none !important; }
  .lv .spDetail { grid-template-areas: "art ident" "art stats" "kit kit"; }
  .lv .spArt { min-height: 88px; }
  .lv .spName { font-size: 15px; }
  /* ship cards: the name gets the room, the check sits on the art */
  .lv .spTile { grid-template-columns: 40% minmax(0, 1fr); height: 46px !important; }
  .lv .spTile .spTileName { font-size: 10px; letter-spacing: .03em; }
  .lv .spTile .spTileRole { font-size: 8px; letter-spacing: .08em; }
  .lv .spTile.on::before { left: 3px; right: auto; top: 3px; width: 13px; height: 13px; font-size: 8px; }
  /* team rows: the name first; READY is the check alone */
  #mpModal.mpFull #mpLobby.lvOn .lobbyList > div { grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 4px !important; min-height: 28px !important; padding: 2px 4px !important; }
  #mpLobby.lvOn .lobP .lobShipPort, #mpLobby.lvOn .lobP .lobPilotIcon, #mpLobby.lvOn .lobEmpty .lobPilotIcon { width: 24px; height: 24px; }
  #mpLobby.lvOn .lobP .lobPilotName { font-size: 11px; }
  #mpLobby.lvOn .lobP .roleBadge { font-size: 7px; padding: 0 3px; letter-spacing: .04em; }
  #mpLobby.lvOn .lobState { font-size: 7px; }
  #mpLobby.lvOn .lobState.ready { font-size: 0; }
  #mpLobby.lvOn .lobCheck { width: 14px; height: 14px; font-size: 8px; }
  #mpLobby.lvOn .lobSpin { width: 12px; height: 12px; }
  /* guest callsign: one compact block */
  .lvGuest #lobbyCallsign { padding: 4px 6px; }
  .lvGuest #lobbyCallsign label { display: block; font-size: 7px !important; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lvGuest #lobbyCallsign > div { margin-top: 3px; gap: 4px; }
  .lvGuest #lobbyCallsign input { font-size: 11px !important; padding: 3px 6px !important; min-height: 0 !important; height: 24px !important; }
  .lvGuest #lobbyCallsign button { font-size: 9px !important; padding: 0 8px !important; min-height: 0 !important; height: 24px !important; }
  .lvGuest #lobbyCallsign small:empty { display: none; }
  #mpModal.mpFull #mpLobby.lvOn #leaveLobby { min-height: 30px !important; font-size: 10px !important; letter-spacing: .1em; }
  .lvLeaveNote { display: none; }
  .lv .spConfirm { min-height: 30px !important; font-size: 12px !important; width: min(260px, 56%) !important; padding: 2px 18px !important; }
  .lv .spConfirm span { font-size: 11px !important; }
  .lvUnlock { min-height: 30px; font-size: 9px; padding: 0 10px; }
}

/* The lobby's older stylesheet (lobby.css) still styles these ids for the
   pre-redesign layout -- a 120px ring round the countdown, big clock fonts and
   margins, a large mode label. Inside .lv they take the new layout's type. */
#mpModal.mpFull #mpLobby .lv #lobbyLaunchCount { display: inline; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none;
  background: none; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; }
#mpModal.mpFull #mpLobby .lv #lobbyElapsed, #mpModal.mpFull #mpLobby .lv #lobbyEstimate { display: inline; margin: 0; padding: 0; text-shadow: inherit; }
#mpModal.mpFull #mpLobby .lv .lvBig #lobbyElapsed { font: inherit; color: inherit; }
#mpModal.mpFull #mpLobby .lvSub #lobbyMode { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: #fff; }

/* Narrow but tall (a small browser window, a tablet): the compact layout, with
   room to show the chosen ship larger. */
@media (max-width: 999px) and (min-height: 520px) {
  .lv .spDesc { display: block !important; font-size: 12px; -webkit-line-clamp: 3; }
  .lv .spDetail { grid-template-areas: "art ident" "art desc" "art stats" "kit kit"; gap: 6px 16px; }
  .lv .spArt { min-height: 150px; }
  .lv .spName { font-size: 22px; }
  .lv .spStat { grid-template-columns: 16px 60px minmax(60px, 1fr) auto; font-size: 12px; gap: 8px; }
  .lv .spStat strong { font-size: 13px; min-width: 84px; }
  .lv .spAbil { flex-basis: 40px; width: 40px; height: 40px; }
  .lv .spAbil .aico { width: 32px; height: 32px; }
  .lv .spAdvice { font-size: 13px; }
  .lv .spConfirm { min-height: 38px !important; font-size: 15px !important; }
  .lvUnlock { min-height: 38px; font-size: 11px; }
}

/* ---- CLEANER PASS (user 2026-10-08) ------------------------------------------
   Ship cards: name and role centred beside the art, the role as a chip in its
   own colour. Abilities: the art alone, no second frame round it. The ship
   panel hugs its content and the art grows with the screen, so there is no
   dead band above the ship or under LOCK SHIP. */
.lv .spTile { grid-template-rows: 1fr auto auto 1fr; column-gap: 6px; }
.lv .spTile .spTileName, .lv .spTile .spTileRole { justify-self: center; text-align: center; max-width: 100%; }
.lv .spTile .spTileRole:not(:empty)::before { content: none; }
.lv .spTile .spTileRole:not(:empty) { margin-top: 3px; padding: 1px 7px; border-radius: 2px; font-weight: 700; color: var(--role);
  border: 1px solid color-mix(in srgb, var(--role) 55%, transparent); background: color-mix(in srgb, var(--role) 12%, transparent); }
.lv .spAbils { gap: 8px; }
.lv .spAbil { border: 0 !important; border-radius: 7px !important; background: none !important; box-shadow: none !important; overflow: hidden; }
.lv .spAbil .aico { width: 100% !important; height: 100% !important; border-radius: 7px; background-size: cover; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.lvDetail { align-self: start; justify-content: flex-start; max-height: 100%; }
.lvDetailBody { flex: 0 1 auto; }
.lv .spKit { padding-top: 6px !important; }
.lv .spAbilTitle { margin: 0 0 6px; }
.lv .spAdvice:empty { display: none; }
@media (max-width: 999px), (max-height: 599px) {
  .lvDetail { padding: 8px 12px 10px; gap: 6px; }
  .lv .spArt { min-height: clamp(88px, 30vh, 190px); }
  .lv .spTile .spTileRole:not(:empty) { margin-top: 2px; padding: 0 5px; }
}
@media (min-width: 1000px) and (min-height: 600px) {
  .lvDetail { padding: 16px 22px 18px; gap: 12px; }
  .lv .spArt { min-height: clamp(160px, 21vh, 260px); }
  .lv .spTile .spTileRole:not(:empty) { margin-top: 5px; padding: 2px 9px; }
}

/* PILOT CARDS ON TOUCH (user 2026-10-08: cards "overlay each other and don't
   disappear"). A phone keeps :hover on the last row tapped, so a hover card
   stayed up under the tapped one. Touch screens open cards by tap only. */
@media (hover: none) {
  .lobP:hover .lobCard { display: none; }
  .lobP.lbOpen .lobCard { display: block; }
}

/* TOUCH SCROLLING (user 2026-10-08, live: "I cant even scroll down to find my ship
   on mobile"). The page is touch-action:none and the old picker grid allowed only
   sideways panning (pan-x), so a vertical swipe in the new ship list did nothing.
   Every scrolling column of the lobby pans vertically. */
.lv .spGrid, .lv .spTile, .lvShipList, .lvTeams, .lvDetailBody, .lv .lobbyList, .lv .lobP { touch-action: pan-y !important; }
.lvShipList, .lvTeams, .lvDetailBody { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Ability previews in the lobby loadout row: above the lobby layers, and the
   icons read as something to press. */
.hgTip.lvTip { z-index: 600; }
.lv .spAbil { cursor: pointer; }
.lv .spAbil:focus-visible { outline: 2px solid var(--lv-cyan, #3fd4ff); outline-offset: 2px; }