/* Signed-in player home: compact navigation plus a deliberately dominant Battle CTA.
   Lives on the startup screen (index.html) inside .start-hero-content. */

.player-home {
  width: 100%;
  display: grid;
  gap: clamp(12px, 2vh, 18px);
  padding: 2px 0 max(8px, env(safe-area-inset-bottom));
}

.player-home-profile {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 1px solid rgba(111, 239, 255, .28);
  border-radius: 20px;
  background: linear-gradient(115deg, rgba(6, 12, 34, .9), rgba(24, 8, 47, .84));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
}

.player-home-profile .player-avatar { --avatar-size: 47px; }

.player-home-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
  margin-right: auto;
}

.player-home-identity small,
.player-home-battle-preset small {
  color: rgba(201, 233, 255, .58);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.player-home-identity strong {
  overflow: hidden;
  color: #f4feff;
  font-size: clamp(.96rem, 4vw, 1.16rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Profile icon sits inline with the player's name (it used to be one of the
   three octagons in the top-right nav). */
.player-home-namerow {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.player-home-avatar-link {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: block;
  background: currentColor;
  color: #eaf9ff;
  -webkit-mask: url("../assets/profile.svg") center / contain no-repeat;
  mask: url("../assets/profile.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(42, 246, 255, .5));
  cursor: pointer;
  transition: transform 120ms ease, color 120ms ease;
}

.player-home-avatar-link:hover,
.player-home-avatar-link:focus-visible {
  color: #fff;
  transform: scale(1.08);
  outline: none;
}

/* Leaderboard pill under the hub — replaces the trophy octagon in the nav.
   justify-self keeps it pill-width: .player-home is a grid, so a stretched
   child would span the full column. */
.player-home-leaderboard {
  justify-self: center;
  align-self: center;
  width: 170px;
  max-width: 170px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(rgba(8, 2, 26, .92), rgba(8, 2, 26, .92)) padding-box,
    linear-gradient(100deg, #41efff 0%, #815cff 50%, #f044d9 100%) border-box;
  box-shadow:
    0 0 18px rgba(137, 92, 255, .34),
    0 0 26px rgba(255, 53, 232, .18);
  color: #fff;
  font: 800 clamp(.86rem, 3.6vw, 1.02rem) / 1 -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 160ms ease;
}

.player-home-leaderboard i {
  flex: 0 0 auto;
  display: block;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("../assets/trophy-outline.svg") center / contain no-repeat;
  mask: url("../assets/trophy-outline.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.player-home.is-leaderboard-open .player-home-leaderboard i {
  -webkit-mask: url("../assets/rocket.svg") center / contain no-repeat;
  mask: url("../assets/rocket.svg") center / contain no-repeat;
}

.player-home-leaderboard:hover,
.player-home-leaderboard:focus-visible {
  transform: scale(1.03);
  box-shadow:
    0 0 22px rgba(137, 92, 255, .5),
    0 0 32px rgba(255, 53, 232, .28);
  outline: none;
}

.player-home-leaderboard:active { transform: scale(.98); }

.player-home-leaderboard[aria-expanded="true"] {
  box-shadow:
    0 0 22px rgba(65, 239, 255, .46),
    0 0 32px rgba(255, 53, 232, .34);
}

/* Keep the toggle visually locked while the leaderboard is open so list
   re-renders (loading/results/mode switches) don't cause shadow/scale flicker. */
.player-home.is-leaderboard-open .player-home-leaderboard {
  transform: none;
  transition: none;
}

.player-home.is-leaderboard-open .player-home-leaderboard:hover,
.player-home.is-leaderboard-open .player-home-leaderboard:focus-visible,
.player-home.is-leaderboard-open .player-home-leaderboard:active {
  transform: none;
  box-shadow:
    0 0 22px rgba(65, 239, 255, .46),
    0 0 32px rgba(255, 53, 232, .34);
}

.player-home-wallet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffe889;
  font-size: .86rem;
}

.player-home-wallet i {
  width: 18px;
  height: 18px;
  border: 2px solid #ffdd62;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7b5, #ffbd2e 55%, #b75b00);
  box-shadow: 0 0 12px rgba(255, 201, 51, .48);
}

.player-home-premium {
  padding: 5px 7px;
  border: 1px solid rgba(255, 221, 116, .5);
  border-radius: 999px;
  color: #ffe994;
  background: rgba(255, 193, 37, .1);
  font-size: .54rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.player-home-settings {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid rgba(122, 230, 255, .25);
  border-radius: 13px;
  background: rgba(9, 18, 43, .78) url("../assets/navigation/settings.svg") center / 20px no-repeat;
}

.player-home-areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 2vw, 11px);
}

.player-home-area {
  position: relative;
  min-width: 0;
  min-height: clamp(104px, 15vh, 132px);
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--area-accent) 62%, transparent);
  border-radius: 18px;
  background: rgba(7, 10, 29, .88);
  color: #fff;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--area-accent) 9%, transparent), 0 7px 20px rgba(0,0,0,.2);
  cursor: pointer;
  isolation: isolate;
}

.player-home-area::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(2, 4, 17, .98) 5%, rgba(4, 6, 21, .16) 72%);
}

.player-home-area img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transform: scale(1.06);
  transition: transform 180ms ease, filter 180ms ease;
}

.player-home-area span {
  position: absolute;
  inset: auto 7px 9px;
  display: grid;
  gap: 1px;
  text-align: left;
}

.player-home-area strong {
  font: 950 clamp(.76rem, 3.1vw, 1rem)/1 var(--font-ui-heavy, system-ui);
  text-transform: uppercase;
  text-shadow: 0 2px 5px #000, 0 0 12px var(--area-accent);
}

.player-home-area small {
  overflow: hidden;
  color: rgba(224, 245, 255, .66);
  font-size: clamp(.5rem, 1.8vw, .64rem);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-home-area:active img,
.player-home-area.is-pulsing img { transform: scale(1.12); filter: brightness(1.25); }

.player-home-battle {
  position: relative;
  min-height: clamp(276px, 39vh, 360px);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  border: 2px solid rgba(75, 239, 255, .84);
  border-radius: 27px;
  background: #060719;
  box-shadow: 0 0 0 1px rgba(255, 58, 212, .36), 0 0 30px rgba(31, 222, 255, .34), 0 0 44px rgba(255, 45, 193, .2);
  isolation: isolate;
  animation: playerHomeBattlePulse 2.7s ease-in-out infinite;
}

.player-home-battle::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -3;
  background: conic-gradient(from 0deg, transparent 0 37%, rgba(60, 244, 255, .8) 45%, transparent 53% 76%, rgba(255, 50, 197, .7) 84%, transparent 92%);
  animation: playerHomeBorderSpin 6s linear infinite;
}

.player-home-battle::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -2;
  border-radius: 23px;
  background: linear-gradient(to bottom, rgba(6, 8, 27, .04), rgba(3, 5, 17, .94));
}

.player-home-battle-art,
.player-home-battle-art img {
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 23px;
}

.player-home-battle-art { overflow: hidden; }
.player-home-battle-art img { width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; opacity: .72; filter: saturate(1.25) contrast(1.08); }

.player-home-battle-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, transparent 0 10%, rgba(3,4,17,.18) 36%, rgba(2,3,13,.72) 78%), linear-gradient(to bottom, rgba(2,3,14,.1), rgba(2,3,14,.92));
}

.player-home-battle-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 30px 16px 22px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.player-home-battle-main > strong {
  font: 950 clamp(3.45rem, 16vw, 6.7rem)/.82 var(--font-ui-heavy, Impact, system-ui);
  letter-spacing: -.04em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(230,255,255,.88);
  text-shadow: 0 3px 0 #260c5b, 0 0 12px #2af6ff, 0 0 30px #2af6ff, 0 0 44px #ff47de;
}

.player-home-battle-main > b {
  font-size: clamp(.72rem, 2.9vw, .94rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}

.player-home-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(111, 245, 255, .35);
  border-radius: 999px;
  color: #bffcff;
  background: rgba(3, 10, 27, .76);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.player-home-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #58ff9d;
  box-shadow: 0 0 9px #58ff9d;
  animation: playerHomeLiveBlink 1.15s ease-in-out infinite;
}

.player-home-battle-preset {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 14px 15px;
  border: 0;
  border-top: 1px solid rgba(116, 235, 255, .22);
  background: rgba(4, 7, 22, .78);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(9px);
}

.player-home-battle-preset > span { min-width: 0; display: grid; gap: 3px; text-align: left; }
.player-home-battle-preset strong { overflow: hidden; font-size: clamp(.72rem, 2.8vw, .9rem); text-overflow: ellipsis; white-space: nowrap; }
.player-home-battle-preset > i { width: 20px; height: 20px; flex: 0 0 auto; background: url("../assets/navigation/settings.svg") center / contain no-repeat; opacity: .8; }

@keyframes playerHomeBorderSpin { to { transform: rotate(360deg); } }
@keyframes playerHomeLiveBlink { 50% { opacity: .35; transform: scale(.72); } }
@keyframes playerHomeBattlePulse { 50% { box-shadow: 0 0 0 1px rgba(255, 58, 212, .48), 0 0 38px rgba(31, 222, 255, .46), 0 0 52px rgba(255, 45, 193, .28); } }

@media (max-height: 720px) {
  .player-home-profile { min-height: 56px; padding-block: 6px; }
  .player-home-profile .player-avatar { --avatar-size: 40px; }
  .player-home-area { min-height: 88px; }
  .player-home-battle { min-height: 230px; }
}

@media (max-width: 360px) {
  .player-home-premium { display: none; }
  .player-home-profile { gap: 8px; }
  .player-home-settings { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .player-home-battle,
  .player-home-battle::before,
  .player-home-live i { animation: none !important; }

  .player-home-leaderboard-row,
  .player-home-leaderboard-row::after { animation: none !important; }

  .player-home-leaderboard-row {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ── Startup-screen variant ──────────────────────────────────────────────────
   The hub sits under the CAVE RUSH wordmark: a bare welcome row, then one
   enclosing neon ring with the Battle art filling the whole box and the
   game-area cards laid over its lower edge (per guide). */

.player-home--startup {
  width: min(100%, 440px);
  margin-inline: auto;
  text-align: left;
}

.player-home--startup .player-home-profile--bare {
  min-height: 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.player-home-hub {
  position: relative;
  display: grid;
  gap: clamp(8px, 1.6vh, 12px);
  padding: clamp(10px, 2.6vw, 14px);
  border-radius: 30px;
  background: rgba(4, 7, 22, .68);
  box-shadow: 0 0 14px rgba(31, 222, 255, .38), 0 0 34px rgba(31, 222, 255, .3), 0 0 58px rgba(255, 45, 193, .24), 0 14px 34px rgba(0, 0, 0, .3);
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Neon ring — sits above the full-box art so the edge stays crisp. */
.player-home-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #2af6ff, #7b5cff 46%, #ff47de);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transform: translateZ(0);
}

/* Battle art fills the entire hub box, fading down so the area cards read. */
.player-home-hub-art {
  position: absolute;
  inset: 3px;
  z-index: 0;
  overflow: hidden;
  border-radius: 27px;
}

.player-home-hub-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .74;
  filter: saturate(1.25) contrast(1.08);
}

.player-home-hub-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, transparent 0 14%, rgba(3, 4, 17, .16) 42%, rgba(2, 3, 13, .6) 82%),
    linear-gradient(to bottom, rgba(2, 3, 14, .12) 30%, rgba(2, 3, 14, .82) 78%, rgba(2, 3, 14, .94));
}

.player-home-hub > .player-home-battle,
.player-home-hub > .player-home-areas {
  position: relative;
  z-index: 1;
}

/* ── Variant picker (Single toggle) ──────────────────────────────────────────
   Horizontal / Vertical neon rings swap in over the Battle hero — both share
   the hub's first grid cell so the swap is a pure cross-fade, no reflow. The
   full-box battle art fades with the hero so the picker sits on the dark hub. */

.player-home-hub > .player-home-battle,
.player-home-hub > .player-home-variants {
  grid-area: 1 / 1;
}

.player-home-hub > .player-home-battle {
  will-change: opacity, transform;
  transform: translateZ(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.player-home-hub-art {
  transition: opacity 220ms ease;
  will-change: opacity;
  transform: translateZ(0);
}

.player-home-areas,
.player-home-area {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.player-home.is-variants-open .player-home-battle {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
}

.player-home.is-variants-open .player-home-hub-art { opacity: 0; }

.player-home-variants {
  position: relative;
  z-index: 1;
  min-height: clamp(200px, 27vh, 280px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: clamp(8px, 2.6vw, 14px);
  padding: 8px 2px;
  opacity: 0;
  transform: scale(1.05);
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 220ms ease, transform 220ms ease;
}

.player-home.is-variants-open .player-home-variants {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease 90ms, transform 240ms cubic-bezier(.2, .8, .25, 1) 90ms;
}

/* Never render in the signed-out or leaderboard states. */
.player-home.is-gate .player-home-variants,
.player-home.is-identity .player-home-variants { display: none; }
.player-home.is-leaderboard-open .player-home-variants { visibility: hidden; pointer-events: none; }

.player-home-variant {
  appearance: none;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: clamp(6px, 1.4vh, 10px);
  padding: clamp(10px, 2vh, 16px) 6px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0;
}

.player-home.is-variants-open .player-home-variant[data-variant="horizontal"] {
  animation: homeVariantInLeft 560ms cubic-bezier(.16, .86, .2, 1.02) 90ms both;
}

.player-home.is-variants-open .player-home-variant[data-variant="vertical"] {
  animation: homeVariantInRight 560ms cubic-bezier(.16, .86, .2, 1.02) 90ms both;
}

.player-home-variant-ring {
  width: clamp(92px, 26vw, 126px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: clamp(3px, .9vw, 4px) solid var(--variant-accent);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--variant-accent) 14%, transparent), rgba(2, 4, 16, .66) 72%);
  box-shadow:
    0 0 9px color-mix(in srgb, var(--variant-accent) 80%, transparent),
    0 0 26px color-mix(in srgb, var(--variant-accent) 45%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--variant-accent) 32%, transparent);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.player-home-variant svg {
  width: 52%;
  height: 52%;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--variant-accent) 85%, transparent));
}

.player-home-variant strong {
  font: 950 clamp(.98rem, 4.2vw, 1.26rem) / 1 var(--font-ui-heavy, system-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8), 0 0 14px color-mix(in srgb, var(--variant-accent) 45%, transparent);
}

.player-home-variant small {
  color: rgba(216, 236, 255, .72);
  font-size: clamp(.58rem, 2.3vw, .72rem);
  font-weight: 700;
  text-align: center;
}

.player-home-variant:hover .player-home-variant-ring,
.player-home-variant:focus-visible .player-home-variant-ring {
  box-shadow:
    0 0 12px color-mix(in srgb, var(--variant-accent) 95%, transparent),
    0 0 34px color-mix(in srgb, var(--variant-accent) 60%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--variant-accent) 42%, transparent);
}

.player-home-variant:active .player-home-variant-ring { transform: scale(.94); }

/* The Single card while its picker is open — unmistakably selected. */
.player-home-area.is-selected {
  border-color: var(--area-accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--area-accent) 85%, transparent),
    0 0 16px color-mix(in srgb, var(--area-accent) 70%, transparent),
    0 0 32px color-mix(in srgb, var(--area-accent) 40%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--area-accent) 20%, transparent);
}

.player-home-area.is-selected img { filter: brightness(1.18); }

@media (prefers-reduced-motion: reduce) {
  .player-home-hub > .player-home-battle,
  .player-home-hub-art,
  .player-home-variants { transition: none !important; }
}

.player-home-leaderboard-panel {
  position: absolute;
  inset: clamp(10px, 2.6vw, 14px);
  z-index: 4;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(255, 71, 222, .14), transparent 34%),
    linear-gradient(330deg, rgba(42, 246, 255, .12), transparent 36%),
    rgba(8, 2, 26, .94);
  box-shadow: inset 0 0 24px rgba(42, 246, 255, .08), 0 12px 24px rgba(0, 0, 0, .28);
  overflow: hidden;
}

.player-home-leaderboard-panel[hidden] { display: none !important; }

.player-home-leaderboard-panel.is-entering {
  animation: none;
}

.player-home-leaderboard-panel.is-leaving {
  animation: homeLeaderboardRevealOut 180ms ease forwards;
}

.player-home.is-leaderboard-open .player-home-battle,
.player-home.is-leaderboard-open .player-home-areas {
  visibility: hidden;
  pointer-events: none;
}

.player-home.is-leaderboard-open .player-home-hub-art {
  opacity: 0;
  transition: none;
}

.player-home-leaderboard-modes {
  display: flex;
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid rgba(122, 230, 255, .2);
  border-radius: 12px;
  background: rgba(3, 8, 26, .58);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.player-home-leaderboard-modes::-webkit-scrollbar { display: none; }

.player-home-leaderboard-mode {
  appearance: none;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(122, 230, 255, .28);
  border-radius: 999px;
  background: rgba(8, 2, 26, .75);
  color: rgba(225, 246, 255, .82);
  font: 900 clamp(.58rem, 2.2vw, .72rem) / 1 var(--font-ui-heavy, system-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.player-home-leaderboard-mode.active {
  border: 1px solid transparent;
  color: #fff;
  background:
    linear-gradient(rgba(8, 2, 26, .9), rgba(8, 2, 26, .9)) padding-box,
    linear-gradient(100deg, #41efff 0%, #815cff 50%, #f044d9 100%) border-box;
  box-shadow: 0 0 14px rgba(65, 239, 255, .2), 0 0 14px rgba(240, 68, 217, .16);
}

.player-home-leaderboard-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.player-home-leaderboard-head strong {
  overflow: hidden;
  color: #fff;
  font: 900 clamp(.68rem, 2.7vw, .86rem) / 1 var(--font-ui-heavy, system-ui);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.player-home-leaderboard-head small {
  flex: 0 0 auto;
  color: rgba(200, 244, 255, .72);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.player-home-leaderboard-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.player-home-leaderboard-list::-webkit-scrollbar { display: none; }

.player-home-leaderboard-empty {
  margin: auto 0;
  padding: 16px;
  border: 1px dashed rgba(122, 230, 255, .32);
  border-radius: 13px;
  color: rgba(225, 246, 255, .84);
  text-align: center;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.player-home-leaderboard-empty--mode {
  color: #e8fdff;
  font: 950 clamp(1.35rem, 7vw, 2.35rem) / .95 var(--font-ui-heavy, Impact, system-ui);
  letter-spacing: .04em;
  text-shadow: 0 2px 0 #260c5b, 0 0 12px #2af6ff, 0 0 28px #ff47de;
}

/* Rows render hidden; home-leaderboard-modal.js staggers a .revealed class
   row-by-row (POC cadence) and count-ups the score alongside. */
.player-home-leaderboard-row {
  --home-row-enter-x: 70px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid rgba(122, 230, 255, .22);
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(16, 44, 75, .38), rgba(12, 0, 34, .72));
  opacity: 0;
  transform: translate3d(var(--home-row-enter-x), 18px, 0) scale(.94);
  filter: blur(8px);
  will-change: opacity, transform, filter;
}

.player-home-leaderboard-row:nth-child(even) {
  --home-row-enter-x: -70px;
}

.player-home-leaderboard-row.revealed {
  animation: homeLeaderboardRowIn 640ms cubic-bezier(.16, .86, .18, 1.02) forwards;
}

.player-home-leaderboard-row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -50%;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
}

.player-home-leaderboard-row.revealed::after {
  animation: homeLeaderboardRowSweep 820ms ease-out 90ms both;
}

.player-home-leaderboard-rank {
  min-width: 28px;
  color: #bdfcff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.player-home-leaderboard-name {
  overflow: hidden;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-home-leaderboard-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.player-home-leaderboard-meta {
  overflow: hidden;
  color: rgba(198, 236, 255, .74);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.player-home-leaderboard-score {
  display: grid;
  justify-items: end;
  gap: 1px;
  color: #bdfcff;
  font-size: .84rem;
  font-weight: 900;
  text-align: right;
  text-shadow: 0 0 10px rgba(42, 246, 255, .3);
}

.player-home-leaderboard-score small {
  color: rgba(188, 233, 255, .72);
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: none;
}

@keyframes homeLeaderboardRevealIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes homeLeaderboardRevealOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
}

@keyframes homeLeaderboardRowIn {
  0% {
    opacity: 0;
    transform: translate3d(var(--home-row-enter-x), 18px, 0) scale(.94);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: translate3d(-4px, -1px, 0) scale(1.012);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes homeLeaderboardRowSweep {
  from {
    left: -50%;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  to {
    left: 120%;
    opacity: 0;
  }
}

/* The battle hero is pure content over the shared art — no card chrome. */
.player-home--startup .player-home-battle {
  min-height: clamp(200px, 27vh, 280px);
  grid-template-rows: 1fr;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.player-home--startup .player-home-battle::before,
.player-home--startup .player-home-battle::after { display: none; }

.player-home--startup .player-home-battle-main {
  justify-content: center;
  padding: 18px 16px;
}

.player-home--startup .player-home-area { min-height: clamp(106px, 15vh, 132px); }

/* ── Signed-out onboarding inside the hub ring ───────────────────────────────
   startup.js drives is-gate (step 1: Enter the Cave) and is-identity (step 2:
   name / Anonymous / provider sign-in) on #playerHome. Both steps keep the
   neon gradient ring but drop the fill + battle art so the cave background
   image shows through, and hide the signed-in hub furniture. */

.player-home.is-gate .player-home-profile,
.player-home.is-identity .player-home-profile,
.player-home.is-gate .player-home-hub-art,
.player-home.is-identity .player-home-hub-art,
.player-home.is-gate .player-home-battle,
.player-home.is-identity .player-home-battle,
.player-home.is-gate .player-home-areas,
.player-home.is-identity .player-home-areas,
.player-home.is-gate .player-home-leaderboard,
.player-home.is-identity .player-home-leaderboard {
  display: none;
}

.player-home.is-gate .player-home-hub,
.player-home.is-identity .player-home-hub {
  background: transparent;
  box-shadow: 0 0 14px rgba(31, 222, 255, .28), 0 0 34px rgba(31, 222, 255, .2), 0 0 58px rgba(255, 45, 193, .16);
}

.player-home-gate[hidden],
.player-home-onboard-identity[hidden] { display: none !important; }

.player-home-gate {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: clamp(180px, 26vh, 280px);
  padding: clamp(10px, 2.4vw, 16px);
}

.player-home-gate .neon-button { width: min(100%, 340px); }

.player-home-onboard-identity {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(10px, 1.8vh, 14px);
  padding: clamp(8px, 2vw, 14px);
  text-align: left;
}

.player-home-onboard-identity h2 {
  margin: 0;
  color: var(--cr-white, #fff);
  font-size: clamp(1.2rem, 4.6vw, 1.6rem);
}

.player-home-onboard-identity .subtitle {
  margin: 0;
  color: rgba(239, 249, 255, .78);
  font-size: .88rem;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
}

.player-home-onboard-identity .neon-button { min-height: clamp(48px, 7vh, 64px); }
.player-home-onboard-identity .neon-button span { font-size: clamp(1rem, 3.6vw, 1.4rem); }
.player-home-onboard-identity .neon-button.secondary { width: 100%; }
.player-home-onboard-identity .neon-button.secondary span { font-size: clamp(.78rem, 2.8vw, 1rem); }

.player-home-onboard-identity .auth-provider-grid { margin-top: 0; }

.player-home-onboard-identity .auth-button {
  min-height: 46px;
  font-size: .85rem;
  background: rgba(7, 13, 30, .78);
}

/* Legible input over the transparent hub */
.player-home-onboard-identity .auth-input { background: rgba(4, 7, 22, .78); }

/* Short viewports (e.g. 667px): the identity step must fit without scrolling —
   the start overlay clips overflow, so anything pushed past the fold is
   unreachable. Tighten the panel and reclaim the tagline + logo headroom. */
@media (max-height: 720px) {
  .player-home-onboard-identity { gap: 8px; padding: 6px 8px; }
  .player-home-onboard-identity .subtitle { font-size: .78rem; line-height: 1.35; }
  .player-home-onboard-identity .neon-button { min-height: 44px; }
  .player-home-onboard-identity .neon-button span { font-size: clamp(.92rem, 3.2vw, 1.2rem); }
  .player-home-onboard-identity .auth-button { min-height: 38px; font-size: .78rem; }
  .player-home-onboard-identity .auth-input { min-height: 38px; padding: 8px 12px; }
  .player-home-onboard-identity .identity-form { gap: 5px; }
  .player-home-onboard-identity .button-row--stack { gap: 7px; }
  .player-home-onboard-identity .enter-cave-divider { padding: 0; }
  .player-home-onboard-identity .auth-provider-grid { gap: 7px; }

  .start-hero-content:has(.player-home.is-identity) .tagline { display: none; }
  .start-hero-content:has(.player-home.is-identity) .title-wrap {
    margin-top: 4px;
    padding-bottom: 8px;
  }
  .start-hero-content:has(.player-home.is-identity) .logo-line {
    font-size: clamp(3.2rem, 13.5vw, 5.4rem);
  }
}

/* ── Startup layout when the hub is active ───────────────────────────────────
   Fill the viewport so the pieces can be distributed: logo pushed down and
   shrunk, tagline centred in the gap, hub lifted off the bottom edge. */

.home-hub-active .start-hero-content {
  min-height: calc(100vh - 108px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height: calc(100dvh - 108px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  justify-content: flex-start;
}

/* startup.css gives .title-wrap a fixed height (min(44vh, 420px)) sized for
   the hero-only screen — collapse it to the wordmark so the hub layout can
   distribute the freed space. */
.home-hub-active .title-wrap {
  height: auto !important;
  min-height: 0 !important;
  margin-top: clamp(10px, 3.5vh, 34px);
  padding-bottom: clamp(14px, 2.4vh, 24px); /* room for the extrude shadow */
}

/* Smaller, thicker wordmark. */
.home-hub-active .logo-line {
  --stroke: clamp(4.5px, 1.5vw, 11px);
  font-size: clamp(4.9rem, 20.5vw, 11.5rem);
}

/* Centre the tagline inside the flexible gap between logo and hub. */
.home-hub-active .tagline {
  margin-block: auto;
  padding-block: clamp(8px, 1.6vh, 16px);
}

.home-hub-active .player-home--startup {
  margin-bottom: clamp(10px, 2.6vh, 24px);
}

@media (max-height: 720px) {
  .player-home--startup { gap: 9px; }
  .player-home--startup .player-home-battle { min-height: 172px; }
  .player-home--startup .player-home-area { min-height: 92px; }
  .home-hub-active .logo-line { font-size: clamp(4.2rem, 18vw, 8rem); }
  .home-hub-active .player-home--startup { margin-bottom: 10px; }
}

/* ── Battle-view entrance (hub reveal + leaderboard → Battle toggle) ─────────
   home-leaderboard-modal.js adds .is-battle-entering for ~2s when the hub
   first reveals and when the leaderboard panel closes: the hub art settles
   from a zoom while the BATTLE wordmark glitches in with an RGB-split
   flicker (plus a short re-flicker), then the chip + subline ease up.
   Not added at all under prefers-reduced-motion (JS guard). */

.player-home.is-battle-entering .player-home-hub-art img {
  animation: homeBattleArtSettle 2350ms cubic-bezier(.12, .82, .22, 1) 40ms both;
}

.player-home.is-battle-entering .player-home-battle-main > strong {
  animation: homeBattleTextGlitch 980ms steps(1, end) 120ms both;
}

.player-home.is-battle-entering .player-home-live,
.player-home.is-battle-entering .player-home-battle-main > b {
  animation: homeBattleSubRise 340ms ease-out 700ms both;
}

@keyframes homeBattleArtSettle {
  from { transform: scale(1.34) translate3d(0, 16px, 0); }
  to { transform: scale(1) translate3d(0, 0, 0); }
}

/* steps(1, end) holds each frame's values until the next keyframe, so the
   in-between states land as hard cuts — that's the glitch. Frames without
   text-shadow snap back to the wordmark's base neon shadow. The 56–70%
   frames are a short, smaller re-flicker after the first clean settle. */
@keyframes homeBattleTextGlitch {
  0% { opacity: 0; }
  6% {
    opacity: 1;
    transform: translate(-6px, 2px);
    clip-path: inset(6% 0 58% 0);
    text-shadow: -6px 0 #2af6ff, 6px 0 #ff47de, 0 3px 0 #260c5b;
  }
  13% {
    transform: translate(5px, -2px);
    clip-path: inset(48% 0 8% 0);
    text-shadow: 5px 0 #2af6ff, -5px 0 #ff47de, 0 3px 0 #260c5b;
  }
  20% {
    transform: translate(-3px, 1px);
    clip-path: inset(22% 0 34% 0);
    text-shadow: -4px 0 #ff47de, 4px 0 #2af6ff, 0 3px 0 #260c5b;
  }
  27% {
    transform: translate(4px, -1px);
    clip-path: inset(62% 0 4% 0);
    text-shadow: -5px 0 #2af6ff, 5px 0 #ff47de, 0 3px 0 #260c5b;
  }
  34% {
    transform: translate(2px, 0);
    clip-path: inset(0 0 0 0);
  }
  42% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  56% {
    transform: translate(-3px, 1px);
    clip-path: inset(12% 0 46% 0);
    text-shadow: -3px 0 #2af6ff, 3px 0 #ff47de, 0 3px 0 #260c5b;
  }
  63% {
    transform: translate(2px, -1px);
    clip-path: inset(40% 0 18% 0);
    text-shadow: 3px 0 #2af6ff, -3px 0 #ff47de, 0 3px 0 #260c5b;
  }
  70%, 100% {
    opacity: 1;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes homeBattleSubRise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes homeVariantInLeft {
  from { opacity: 0; transform: translateX(-42px) scale(.94); }
  78% { opacity: 1; transform: translateX(3px) scale(1.01); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes homeVariantInRight {
  from { opacity: 0; transform: translateX(42px) scale(.94); }
  78% { opacity: 1; transform: translateX(-3px) scale(1.01); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}