* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: #041018;
  color: #f4ede0;
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  overflow: hidden;
}
#stage {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 40%, #123056 0%, #071422 42%, #030910 100%);
}
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 2px;
  gap: 12px;
  flex: 0 0 auto;
  z-index: 5;
}
.live-badge {
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,8,4,.82);
  border: 1px solid rgba(245,185,66,.45);
  border-radius: 10px;
  padding: 6px 16px 6px 12px;
  box-shadow: 0 0 18px rgba(245,185,66,.28);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.live-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #ff2b2b;
  box-shadow: 0 0 12px #ff2b2b;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .55; } }
.live-text { display: flex; flex-direction: column; line-height: 1.1; }
.live-text strong { font-size: 16px; letter-spacing: 2px; color: #fff; }
.live-text small { font-size: 11px; letter-spacing: 1.4px; color: #b9ac93; }
.title-wrap { text-align: center; min-width: 0; flex: 1; }
.show-title {
  font-size: clamp(13px, 1.45vw, 22px);
  max-width: 100%;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: linear-gradient(180deg, #ffe9a8 8%, #f5b942 45%, #b97a1e 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.show-sub {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 2px;
  font-size: clamp(9px, 1.05vw, 13px);
  letter-spacing: 4px; color: #b9ac93; white-space: nowrap;
}
.show-sub .rule {
  width: clamp(50px, 11vw, 160px); height: 2px;
  background: linear-gradient(90deg, transparent, #f5b942);
}
.show-sub .rule:last-child { background: linear-gradient(90deg, #f5b942, transparent); }
.clock-badge {
  background: rgba(10,8,4,.82);
  border: 1px solid rgba(245,185,66,.45);
  border-radius: 10px;
  padding: 6px 16px;
  text-align: right;
}
.clock { font-size: 18px; font-weight: 700; color: #ffd97a; font-variant-numeric: tabular-nums; }
.brand { font-size: 10px; letter-spacing: .6px; color: #b9ac93; }
#globe-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 44%, #1a4a86 0%, #0b2748 28%, #06101c 68%, #02060d 100%);
}
#globe3d, #globe2d, #globe {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
/* CK405-FW-FOOTER-COMPACT-V1 : ~64px footer, wide 3-row cards, nothing cropped */
#bottombar {
  flex: 0 0 64px; height: 64px; min-height: 64px;
  display: flex; gap: 10px; align-items: center;
  padding: 4px 12px;
  background: linear-gradient(180deg, rgba(2,3,10,.2), rgba(2,3,10,.95));
  z-index: 5; overflow: hidden;
}
.join-card {
  flex: 0 0 auto;
  display: flex; gap: 9px; align-items: center;
  height: 56px;
  background: rgba(10,8,4,.88);
  border: 1px solid rgba(245,185,66,.45);
  border-radius: 10px;
  padding: 3px 12px 3px 4px;
  white-space: nowrap;
}
.join-card img#qr {
  width: 50px; height: 50px; border-radius: 6px; background: #fff; padding: 2px;
  flex: 0 0 auto;
}
.join-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.join-text h2 { color: #ffd97a; font-size: 13px; line-height: 1.15; letter-spacing: 0.6px; }
.join-text p { font-size: 10.5px; line-height: 1.15; margin: 0; }
.join-text .join-url { color: #ffd97a; font-weight: 600; font-size: 11px; }
.carousel-zone { flex: 1 1 0; min-width: 0; height: 56px; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.carousel-title {
  flex: 0 0 auto; margin: 0; width: 62px;
  color: #ffd97a; font-size: 9.5px; line-height: 1.25; letter-spacing: 1.4px; font-weight: 800;
  text-align: left; white-space: normal;
}
.carousel-viewport { overflow: hidden; flex: 1 1 0; min-width: 0; height: 56px; }
.carousel-track {
  display: flex; gap: 10px; width: max-content; height: 56px; align-items: center;
  padding-right: 10px; /* equals gap so the -50% loop is seamless */
  animation: carousel-scroll var(--dur, 48s) linear infinite;
}
.carousel-viewport:hover .carousel-track { animation-play-state: paused; }
@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.friend-card {
  display: flex; gap: 8px; align-items: center;
  flex: 0 0 auto; width: max-content; min-width: 300px; height: 56px;
  background: rgba(24,14,6,.92);
  border: 1px solid rgba(245,185,66,.35);
  border-radius: 10px;
  padding: 4px 12px 4px 6px;
  white-space: nowrap;
}
.friend-card img.avatar {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid #f5b942; background: #0a0f1c; object-fit: cover;
}
.friend-card .fc-body { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.friend-card .fc-top { display: flex; align-items: center; gap: 8px; line-height: 1.15; }
.friend-card .fc-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.friend-card .fc-platform { font-size: 10px; font-weight: 700; color: #cbbf9f; letter-spacing: .3px; padding: 0 6px; border: 1px solid rgba(185,172,147,.5); border-radius: 6px; line-height: 14px; }
.friend-card .fc-loc { font-size: 11px; line-height: 1.15; color: #b9ac93; white-space: nowrap; }
.friend-card .fc-time { font-size: 11px; line-height: 1.15; color: #ffd97a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.friend-card.host { border-color: #f5b942; }
.friend-card.latest { border-color: #39e6ff; }
.badge { display: inline-block; font-size: 9px; letter-spacing: 0.4px; padding: 0 5px; line-height: 13px; border-radius: 6px; margin-left: 0; }
.badge.host { background: #f5b942; color: #1a1000; font-weight: 800; }
.badge.latest { background: #39e6ff; color: #012028; font-weight: 800; }

/* CK405 FRIENDS YOUTUBE PLACARD V5 - optional channel line, name placard only (never on the map). Real link: pointer events ON. */
.friend-card.has-yt, .friend-card.has-fb { gap: 7px; }
.friend-card.has-yt .fc-body, .friend-card.has-fb .fc-body { gap: 0; }
.friend-card.has-yt .fc-top, .friend-card.has-fb .fc-top { line-height: 1.05; }
.friend-card .fc-yt { font-size: 10.5px; line-height: 1.1; white-space: nowrap; pointer-events: auto; }
.friend-card .fc-yt-link { color: #ffffff; text-decoration: none; font-weight: 700; letter-spacing: .1px; cursor: pointer; pointer-events: auto; border-radius: 4px; padding: 0 2px 0 0; }
.friend-card .fc-yt-play { color: #ff2b2b; font-size: 9px; text-shadow: 0 0 4px rgba(255,43,43,.55); }
.friend-card .fc-yt-link:hover, .friend-card .fc-yt-link:focus-visible { color: #ffd97a; text-decoration: underline; outline: none; }
/* CK405 FRIENDS FACEBOOK PLACARD V6: Facebook link shares the YouTube line (one row, so the card does not grow taller) */
.friend-card .fc-links { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.friend-card .fc-fb { font-size: 10.5px; line-height: 1.1; white-space: nowrap; pointer-events: auto; }
.friend-card .fc-fb-link { color: #ffffff; text-decoration: none; font-weight: 700; letter-spacing: .1px; cursor: pointer; pointer-events: auto; border-radius: 4px; padding: 0 2px 0 0; }
.friend-card .fc-fb-f { display: inline-block; width: 11px; height: 11px; line-height: 11px; text-align: center; font-size: 9px; font-weight: 900; font-family: Arial, Helvetica, sans-serif; color: #fff; background: #1877f2; border-radius: 3px; vertical-align: -1px; }
.friend-card .fc-fb-link:hover, .friend-card .fc-fb-link:focus-visible { color: #ffd97a; text-decoration: underline; outline: none; }

/* CK405 FRIENDS VETERAN V6 - branch seal on the avatar corner + 'Veteran - Branch' tag (name placard only) */
.friend-card .fc-av { position: relative; flex: 0 0 auto; display: block; width: 40px; height: 40px; }
.friend-card .fc-av img.avatar { display: block; }
.friend-card .fc-vet-av { position: absolute; right: -6px; bottom: -5px; width: 19px; height: 19px; border-radius: 50%; background: #0a0f1c; border: 1px solid #0a0f1c; box-shadow: 0 0 0 1px rgba(245,185,66,.55); }
.friend-card .fc-vet { font-size: 10px; font-weight: 800; color: #ffd97a; letter-spacing: .2px; padding: 0 6px; border: 1px solid rgba(245,185,66,.65); border-radius: 6px; line-height: 14px; background: rgba(245,185,66,.1); white-space: nowrap; }

/* ===== CK405 CLEAN PINS V8: clickable cards, 1ST chips, held-card highlight ===== */
.friend-card { cursor: pointer; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.friend-card:focus-visible { outline: 2px solid #ffd97a; outline-offset: 2px; }
.friend-card.focus { transform: scale(1.1); border-color: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 18px 4px rgba(255,214,102,.55); position: relative; z-index: 5; }
.friend-card .fc-tags { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.friend-card .fc-chip { font-size: 9px; font-weight: 900; letter-spacing: .3px; padding: 0 5px; line-height: 13px; border-radius: 6px; color: #04151c; border: 1px solid rgba(255,255,255,.7); }
.friend-card .fc-chip-country { background: linear-gradient(#5ddfff,#167c9d); }
.friend-card .fc-chip-cont { background: linear-gradient(#d79cff,#7f42aa); color: #16051f; }
.friend-card .fc-chip-state { background: linear-gradient(#ffe59a,#d9a62f); color: #211400; }

/* CK405 CARD PEEK V9: the card you hover/touch is lit while its plot blinks on the map */
.friend-card.peek{box-shadow:0 0 0 2px rgba(255,214,102,.85),0 0 14px rgba(255,214,102,.45)}