/* One playable map, presented as a selected competitive challenge. */
.home-screen .home-copy.map-lobby { display:flex; flex-direction:column; justify-content:flex-start; gap:13px; height:500px; min-height:0; padding:16px; border:1px solid #84979c70; border-radius:5px; background:linear-gradient(145deg,#273942,#18262d 75%); box-shadow:inset 0 1px #ffffff12,0 6px 20px #070f1720; }
.home-screen .home-copy.map-lobby::before,.home-screen .home-copy.map-lobby::after { display:none; }
.lobby-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; flex:0 0 auto; }
.lobby-heading>div>span { display:block; font:600 9px/1.2 var(--mono); letter-spacing:1.5px; color:#9fb4bc; }
.home-screen .home-copy .lobby-heading h1 { display:block; margin:4px 0 0; font-size:23px; line-height:1.15; letter-spacing:0; color:#eff2ee; }
.lobby-mode { flex:0 0 auto; border:1px solid #81989d66; border-radius:3px; padding:6px 8px; font-size:11px; color:#c1d0d6; background:#12242b70; }
.lobby-map-pool { display:flex; flex:1 1 0; min-height:100px; min-width:0; }
.map-card { position:relative; isolation:isolate; display:block; flex:1; min-width:0; min-height:100px; margin:0; border:2px solid #ecd18b; border-radius:4px; background:#263238; overflow:hidden; box-shadow:0 0 0 3px #e9c3660c,inset 0 0 0 1px #0003; cursor:pointer; touch-action:manipulation; }
.map-card input { position:absolute; inset:0; z-index:4; display:block; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; }
.map-card:focus-within { outline:2px solid #f8f9e4; outline-offset:3px; }
.map-card:has(input:active) { border-color:#fff2cc; }
.map-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#0c19254f,transparent 34%,#101d2ba6 68%,#11202be8),linear-gradient(90deg,#0e192a40,transparent 70%); pointer-events:none; }
.map-media { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.map-location { position:absolute; top:12px; left:12px; color:#fff8e7; font:600 9px/1.3 var(--mono); letter-spacing:1.4px; padding:5px 6px; background:#14242abb; border-radius:2px; }
.map-selected { position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:4px; padding:5px 7px; border-radius:2px; background:#edcf81; color:#222b2d; font-size:10px; font-weight:750; }
.map-selected .action-icon { width:12px; height:12px; min-width:12px; flex:0 0 12px; }
.map-caption { position:absolute; left:17px; right:14px; bottom:18px; display:flex; align-items:center; gap:14px; color:#f7f2df; pointer-events:none; }
.map-badge { display:block; flex:0 0 auto; width:96px; height:auto; max-height:96px; object-fit:contain; filter:drop-shadow(0 2px 5px #0007); }
.map-caption>span { display:flex; flex-direction:column; min-width:0; gap:4px; text-shadow:0 2px 8px #06111a; }
.map-caption small { font:700 11px/1.2 var(--mono); letter-spacing:3px; color:#ead698; }
.map-caption b { font-size:32px; line-height:1.2; letter-spacing:1px; color:#fff7dd; }
.map-caption>span>span { font-size:11px; color:#cfdbda; }
.lobby-bottom { flex:0 0 auto; min-width:0; }
.lobby-objective { margin:0; font-size:13px; line-height:1.4; color:#d9e3e4; }
.lobby-rules { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:10px; padding:8px 0 0; border-top:1px solid #b2c9cb21; color:#a7bcc6; font-size:11px; line-height:1.2; }
.lobby-rules>span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.lobby-rules b { color:#ecd18d; font-weight:700; }
.lobby-rules .icon,.lobby-rules .faction-mark { display:block; width:16px; height:16px; margin:0; flex:0 0 16px; color:#a9cddc; }
.home-screen .map-lobby .home-actions { display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:9px; margin:13px 0 0; }
.home-screen .map-lobby .home-actions .button { min-height:52px; padding:10px 14px; font-size:14px; }
.home-screen .map-lobby .home-actions .action-icon { width:22px; height:22px; }
@media (min-width:761px) and (max-width:1000px) {
  .home-screen .home-copy.map-lobby { padding:12px; }
  .map-caption { gap:8px; left:10px; right:10px; }
  .map-badge { width:72px; }
  .map-caption b { font-size:25px; }
  .lobby-rules { font-size:10px; }
  .lobby-rules .icon,.lobby-rules .faction-mark { display:none; }
}
@media (max-width:760px) {
  .home-screen[data-home-view="play"] .home-copy.map-lobby { display:flex; height:auto; flex:1 1 0; padding:12px; gap:11px; min-height:0; }
  .home-screen:not([data-home-view="play"]) .home-copy.map-lobby { display:none; }
  .home-screen .home-copy .lobby-heading h1 { font-size:21px; }
  .map-caption { left:12px; right:12px; bottom:15px; gap:12px; }
  .map-caption b { font-size:30px; }
  .map-badge { width:88px; }
  .home-screen .map-lobby .home-actions { grid-template-columns:minmax(0,1fr) 92px; margin-top:12px; }
  .home-screen .map-lobby .home-actions .button { min-height:50px; padding:9px 11px; }
  .lobby-objective { font-size:12px; }
  .lobby-rules { font-size:11px; }
}
@media (max-width:760px) and (max-height:550px) {
  .home-screen[data-home-view="play"] .home-copy.map-lobby { padding:10px; gap:8px; }
  .home-screen .home-copy .lobby-heading h1 { font-size:18px; margin-top:3px; }
  .lobby-heading>div>span { font-size:8px; letter-spacing:1px; }
  .lobby-mode { padding:5px 6px; font-size:10px; }
  .map-location { top:8px; left:8px; font-size:8px; padding:4px; letter-spacing:.5px; }
  .map-selected { top:8px; right:8px; font-size:9px; padding:4px 5px; }
  .map-caption { bottom:9px; left:9px; gap:9px; }
  .map-badge { width:66px; max-height:68px; }
  .map-caption b { font-size:24px; }
  .map-caption small { font-size:9px; letter-spacing:2px; }
  .map-caption>span { gap:2px; }
  .map-caption>span>span { font-size:10px; }
  .lobby-objective { font-size:11px; }
  .lobby-rules { margin-top:6px; padding-top:6px; font-size:10px; }
  .lobby-rules .icon,.lobby-rules .faction-mark { width:14px; height:14px; flex-basis:14px; }
  .home-screen .map-lobby .home-actions { margin-top:8px; gap:7px; }
  .home-screen .map-lobby .home-actions .button { min-height:44px; font-size:13px; padding:7px 10px; }
}