/* Shared LumoArcadia game top bar */

html {
  scrollbar-width: thin;
  scrollbar-color: #24efff transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #24efff;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(36, 239, 255, .55);
}

::-webkit-scrollbar-thumb:hover {
  background: #7af7ff;
}

.top-bar {
  --shell-accent: #24efff;
  --shell-accent2: #ff4f7f;
  --shell-font: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  width: min(1220px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.1rem;
  margin-bottom: .75rem;
  background: rgba(8, 16, 28, .92);
  border: 1px solid rgba(36, 239, 255, .13);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(36,239,255,.04), inset 0 1px 0 rgba(255,255,255,.03);
}

html[data-theme="day"] body {
  color: #1d2a38;
  background:
    radial-gradient(ellipse 70% 50% at 12% 10%, rgba(0, 126, 190, .08) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 82%, rgba(165, 70, 120, .055) 0%, transparent 62%),
    linear-gradient(160deg, #e9f0f4 0%, #e3ecef 56%, #eeeaf3 100%);
}

html[data-theme="day"] .top-bar,
html[data-theme="day"] .hud,
html[data-theme="day"] .hud-bar,
html[data-theme="day"] .scoreboard {
  background: rgba(239, 245, 248, .84);
  border-color: rgba(0, 92, 130, .16);
  box-shadow: 0 14px 30px rgba(18, 48, 70, .09), inset 0 1px 0 rgba(255,255,255,.55);
}

.lumo-scoreboard {
  --shell-accent: #24efff;
  --shell-accent2: #ff4f7f;
  width: min(1220px, 100%);
  min-height: 96px;
  display: grid;
  align-items: center;
  gap: .5rem;
  margin: 0 auto .75rem;
  padding: .95rem 1.5rem;
  background: rgba(8, 16, 28, .92);
  border: 1px solid rgba(36, 239, 255, .13);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.hud.lumo-scoreboard {
  grid-template-columns: repeat(auto-fit, minmax(96px, max-content));
  justify-content: center;
}

.hud-bar.lumo-scoreboard {
  grid-template-columns: 1fr auto 1fr;
}

.snake-scoreboard.lumo-scoreboard {
  grid-template-columns: repeat(2, max-content);
  justify-content: end;
}

.lumo-scoreboard .hud-item,
.lumo-scoreboard .snake-score-item {
  min-width: 92px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  backdrop-filter: none;
}

.lumo-scoreboard .hud-side,
.lumo-scoreboard .score-side {
  gap: .2rem;
}

.lumo-scoreboard .hud-center {
  border-left: 1px solid rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.05);
}

.lumo-scoreboard .hud-label,
.lumo-scoreboard .snake-score-label {
  display: block;
  margin: 0 0 .12rem;
  color: #6a7590;
  font-family: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lumo-scoreboard .hud-value,
.lumo-scoreboard .hud-score,
.lumo-scoreboard .snake-score-value {
  display: block;
  color: var(--shell-accent);
  font-family: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  font-size: clamp(1.25rem, 3vw, 2.45rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 24px color-mix(in srgb, var(--shell-accent) 40%, transparent);
}

.lumo-scoreboard .hud-score.accent-2,
.lumo-scoreboard .accent-2 {
  color: var(--shell-accent2);
  text-shadow: 0 0 24px color-mix(in srgb, var(--shell-accent2) 40%, transparent);
}

html[data-theme="day"] .lumo-scoreboard {
  background: rgba(239, 245, 248, .84);
  border-color: rgba(0, 92, 130, .16);
  box-shadow: 0 14px 30px rgba(18, 48, 70, .09), inset 0 1px 0 rgba(255,255,255,.55);
}

html[data-theme="day"] .lumo-scoreboard .hud-label,
html[data-theme="day"] .lumo-scoreboard .snake-score-label {
  color: #687789;
}

html[data-theme="day"] .lumo-scoreboard .hud-value,
html[data-theme="day"] .lumo-scoreboard .hud-score,
html[data-theme="day"] .lumo-scoreboard .snake-score-value {
  color: #087faa;
  text-shadow: none;
}

html[data-theme="day"] .top-bar h1,
html[data-theme="day"] .top-bar .game-title,
html[data-theme="day"] .hud-value,
html[data-theme="day"] .hud-score,
html[data-theme="day"] .score-num {
  color: #1d2a38;
  text-shadow: none;
}

html[data-theme="day"] .top-bar .eyebrow,
html[data-theme="day"] .top-bar .accent,
html[data-theme="day"] .top-bar .title-accent,
html[data-theme="day"] .top-bar .neon-btn,
html[data-theme="day"] .top-bar .icon-btn:hover {
  color: #087faa;
  text-shadow: none;
}

html[data-theme="day"] .top-bar .back-link,
html[data-theme="day"] .top-bar .icon-btn,
html[data-theme="day"] .top-bar .neon-btn,
html[data-theme="day"] .top-bar .ctrl-select {
  background: rgba(241,245,248,.74);
  border-color: rgba(0, 92, 130, .18);
  color: #5e6c7f;
}

.top-bar-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .9rem;
}

.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  flex-wrap: wrap;
}

.top-bar .back-link,
.top-bar .icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6a7590;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.03);
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
  flex-shrink: 0;
}

.top-bar .back-link:hover,
.top-bar .icon-btn:hover {
  color: var(--shell-accent);
  border-color: var(--shell-accent);
  background: color-mix(in srgb, var(--shell-accent) 8%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--shell-accent) 18%, transparent);
}

.top-bar .icon-btn.is-muted {
  color: var(--shell-accent2);
  border-color: color-mix(in srgb, var(--shell-accent2) 42%, transparent);
  background: color-mix(in srgb, var(--shell-accent2) 8%, transparent);
}

.top-bar .theme-toggle {
  position: relative;
}

.top-bar .theme-toggle::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.top-bar .theme-toggle::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  right: 9px;
  top: 7px;
  border-radius: 50%;
  background: rgba(8, 16, 28, .92);
  opacity: 1;
}

.top-bar .theme-toggle.is-day {
  color: #f6c546;
}

.top-bar .theme-toggle.is-day::after {
  opacity: 0;
}

.top-bar .brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .05rem;
  line-height: 1;
}

.top-bar .eyebrow {
  font-family: var(--shell-font);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--shell-accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--shell-accent) 45%, transparent);
  text-transform: uppercase;
}

.top-bar h1,
.top-bar .game-title {
  margin: 0;
  font-family: var(--shell-font);
  font-size: clamp(1.35rem, 3.5vw, 2.1rem);
  font-weight: 900;
  letter-spacing: .06em;
  color: #f0f4ff;
  line-height: 1;
  text-align: left;
  text-shadow: 0 0 22px rgba(255,255,255,.14);
  white-space: nowrap;
}

.top-bar .accent,
.top-bar .title-accent {
  color: var(--shell-accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--shell-accent) 45%, transparent);
}

.top-bar .neon-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0 .9rem;
  color: var(--shell-accent);
  background: rgba(255,255,255,.03);
  border: 1px solid color-mix(in srgb, var(--shell-accent) 45%, transparent);
  border-radius: 7px;
  font-family: var(--shell-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}

.top-bar .neon-btn:hover {
  color: #02060c;
  background: var(--shell-accent);
  border-color: var(--shell-accent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--shell-accent) 36%, transparent);
}

.top-bar .select-group {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.top-bar .sel-label,
.top-bar .hud-label {
  color: #6a7590;
  font-family: var(--shell-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.top-bar .ctrl-select {
  min-height: 36px;
  padding: 0 1.8rem 0 .75rem;
  color: #e8edf8;
  border: 1px solid rgba(36, 239, 255, .18);
  border-radius: 7px;
  background-color: rgba(10,18,30,.9);
}

.top-bar .ctrl-select:hover,
.top-bar .ctrl-select:focus {
  border-color: color-mix(in srgb, var(--shell-accent) 55%, transparent);
  outline: none;
}

.top-bar svg {
  display: block;
}

@media (max-width: 760px) {
  .top-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: .8rem;
  }

  .top-bar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .top-bar .select-group {
    flex: 1 1 145px;
  }

  .top-bar .ctrl-select {
    width: 100%;
  }

  .lumo-scoreboard {
    min-height: auto;
    padding: .75rem 1rem;
  }

  .hud-bar.lumo-scoreboard {
    grid-template-columns: 1fr 1fr;
  }

  .lumo-scoreboard .hud-center {
    grid-column: 1 / -1;
    justify-content: center;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.05);
    padding-top: .55rem;
  }
}

@media (max-width: 460px) {
  .top-bar .game-title,
  .top-bar h1 {
    font-size: 1.12rem;
    white-space: normal;
  }

  .top-bar .eyebrow {
    font-size: .52rem;
  }
}

.snake-scoreboard {
  width: min(860px, 96vw);
  justify-content: flex-end;
  margin: -.25rem auto .25rem;
}