/* =====================================================================
   hud.css — HUD parts shared by the front page (index.html) and the course
   lobby (app/index.html): the rotating feature panel, presence, recent wins.
   Tokens (--hu-*) come from landing.css or game.css, whichever page loads.
   ===================================================================== */
.hud__over { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(234, 245, 255, 0.85); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }

/* The feature panel: four slides, dots, hover parallax. */
.feature-wrap { display: grid; gap: 8px; }
.feature__stage { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid var(--hu-panel-border); background: var(--hu-panel); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9); transition: transform 300ms var(--ease-out); transform-style: preserve-3d; }
/* Slides change in sequence: the old one fades out, then the new one fades in, so two sets of words never sit on top of each other. */
.feature { position: absolute; inset: 0; opacity: 0; transition: opacity 280ms var(--ease); text-decoration: none; color: #fff; pointer-events: none; }
.feature.is-on { opacity: 1; pointer-events: auto; transition-delay: 280ms; }
.feature--map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.feature--map:hover img { transform: scale(1.05); }
.feature__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(180deg, transparent, rgba(6, 16, 39, 0.92)); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.feature__bar i { width: 22px; height: 22px; border-radius: 6px; background: var(--hu-blue-600); display: grid; place-items: center; font-style: normal; font-size: 12px; }
/* Every card is a picture with its words on a dark band at the bottom, the same shape as the map card, so no slide is ever an
   empty box. A card without a picture falls back to the panel gradient. */
.feature--card { display: grid; align-content: end; gap: 6px; padding: 16px; isolation: isolate; background: linear-gradient(180deg, rgba(20, 103, 239, 0.25), var(--hu-panel) 60%); }
.feature--card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 16, 39, 0) 20%, rgba(6, 16, 39, 0.72) 52%, rgba(6, 16, 39, 0.96) 100%); }
.feature__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.feature--card:hover .feature__art { transform: scale(1.04); }
.feature--card b { font-size: 1.05rem; line-height: 1.25; font-family: var(--font-display); }
.feature__count { font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1; font-family: var(--font-mono); }
.feature__sub { font-size: 0.8rem; color: rgba(234, 245, 255, 0.78); }
.feature__dots { display: flex; justify-content: center; gap: 6px; }
.feature__dots button { width: 18px; height: 6px; border-radius: 3px; border: 0; padding: 0; background: rgba(255, 255, 255, 0.28); cursor: pointer; transition: background 200ms, width 200ms; }
.feature__dots button[aria-selected="true"] { width: 28px; background: var(--hu-blue-400); box-shadow: 0 0 10px rgba(56, 165, 255, 0.8); }

.presence { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--hu-panel); border: 1px solid var(--hu-panel-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 0.8rem; }
.presence__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--money); box-shadow: 0 0 10px var(--money); }
.presence__you { color: rgba(234, 245, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence__invite { padding: 5px 10px; border-radius: 8px; background: rgba(56, 165, 255, 0.18); color: #fff; font-weight: 800; font-size: 0.72rem; text-decoration: none; border: 1px solid rgba(56, 165, 255, 0.4); }
.presence__invite:hover { background: var(--hu-blue-600); text-decoration: none; color: #fff; }

.feed { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--hu-panel); border: 1px solid var(--hu-panel-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.feed__row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; }
.feed__row b { font-weight: 700; }
.feed__row small { color: rgba(234, 245, 255, 0.6); white-space: nowrap; }
.feed__row--empty { color: rgba(234, 245, 255, 0.72); }