#music-open[hidden] { display: none; }
#music-panel {
  width: min(440px, calc(100% - 24px));
  max-height: 80dvh;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  background: #0d1d30;
  color: #f3f8ff;
  border: 1px solid #47749a;
  border-radius: 22px;
}
#music-panel::backdrop { background: #030812c9; }
#music-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#music-panel h2 { margin: 0; }
#music-panel input, #music-panel audio { width: 100%; }
#music-panel input { font-size: 16px; margin: 8px 0; }
#music-tracks { display: grid; gap: 8px; padding: 0; list-style: none; }
#music-tracks button { width: 100%; text-align: left; }
#music-panel {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
#music-panel > header { margin-bottom: 18px; }
#music-genres {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 3px 12px;
}
#music-genres button {
  flex: 0 0 clamp(92px, 28vw, 136px);
  aspect-ratio: 1;
  scroll-snap-align: start;
  border-radius: 15px;
  border: 1px solid hsl(var(--genre-hue) 75% 64%);
  background: linear-gradient(145deg, hsl(var(--genre-hue) 72% 37%), hsl(var(--genre-hue) 65% 19%));
  color: white;
  font-weight: 800;
  overflow-wrap: anywhere;
}
#music-genres button[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: -4px; }
#music-panel .music-player {
  position: sticky;
  bottom: 0;
  padding: 12px;
  border-radius: 16px;
  background: #172c43;
}
#music-turn {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: linear-gradient(transparent, #010918aa, transparent);
}
#music-turn[hidden] { display: none; }

#music-panel {
  background: radial-gradient(ellipse at top, #143853, #081321 65%);
  padding-inline: max(16px, calc((100% - 720px) / 2));
}
#music-panel header small { color: #9de6ff; font-weight: 800; letter-spacing: .15em; }
#music-panel h2 { font-size: clamp(2rem, 7vw, 3rem); }
#music-panel .music-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
#music-panel .music-tabs button { flex: 1; border-radius: 12px; }
#music-panel .music-tabs button[aria-pressed="true"] { background: #9de6ff; color: #092237; }
#music-genres[hidden] { display: none; }
#music-tracks li { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
#music-tracks button { min-width: 0; border-radius: 12px; }
#music-tracks strong, #music-tracks small { display: block; overflow-wrap: anywhere; }
#music-tracks small { color: #b9d8e9; }
#music-tracks .music-save { text-align: center; font-size: 1.25rem; padding: 0; }
#music-panel .music-player { border: 1px solid #4b7899; box-shadow: 0 -8px 24px #061120aa; }
#music-next { margin-top: 6px; }
#music-playback-status:empty { display: none; }

.lobby-hero #edit-profile {
  position: absolute;
  inset: 10px auto auto 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #9de6ff;
  border-radius: 12px;
  background: #10283e;
  color: #e7faff;
}
.lobby-hero #edit-profile svg { width: 100%; height: 100%; }

#music-panel .music-player {
  color: #f3f8ff;
  background: linear-gradient(145deg, #183c57, #102033 70%);
  padding: 14px;
}
.music-now { display: flex; align-items: center; gap: 12px; }
.music-now > span {
  display: grid; place-items: center; flex: 0 0 42px; height: 42px;
  border-radius: 12px; background: #9de6ff; color: #0b2940; font-size: 1.3rem;
}
.music-now small { color: #9de6ff; font-size: .68rem; letter-spacing: .14em; }
#music-current { margin: 2px 0; font-weight: 750; overflow-wrap: anywhere; }
#music-panel #music-seek { display: block; height: 24px; padding: 0; margin: 8px 0 0; accent-color: #74e8ff; }
.music-times { display: flex; justify-content: space-between; color: #c0d7e9; font-size: .78rem; font-variant-numeric: tabular-nums; }
.music-controls { display: flex; gap: 8px; margin-top: 8px; }
#music-panel .music-controls button { flex: 1; min-height: 44px; margin: 0; border-radius: 12px; }
#music-panel #music-toggle { background: #9de6ff; color: #092237; }
#music-panel .music-now > div { flex: 1; min-width: 0; }
#music-panel #music-output {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-self: flex-start;
  margin: 0 0 0 auto;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #4b7899;
  background: #10283e;
  color: #c8efff;
}

.lobby-hero .profile-actions > :is(#profile-music, #solo) {
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 0;
  max-width: 200px;
  min-height: 44px;
  align-self: stretch;
  margin: 0;
  padding: 10px 12px;
}
.lobby-hero .profile-actions > :is(#profile-music, #solo) {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 14px/1.2 system-ui, sans-serif;
}
.lobby-hero .profile-actions > #profile-music {
  border: 1px solid #75c9ff;
  background: linear-gradient(120deg, #1266bb, #174ba0);
  color: #fff;
}

#shop-dialog .shop-owned.shop-config-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
#shop-dialog .shop-config-heading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
#shop-dialog .shop-config-heading > div { min-width: 0; overflow-wrap: break-word; }
#shop-dialog .shop-config-heading > button { width: auto; padding-inline: 10px; }
#shop-dialog .shop-config-heading .upgrade-orb { max-width: 36px; }
#shop-dialog .shop-owned .shop-deactivate {
  min-height: 44px;
  background: #102437;
  border: 1px solid #66b4ce;
  color: #dbf6ff;
}
#shop-dialog .shop-config-card > form { box-sizing: border-box; min-width: 0; margin: 0; }

#players .card-score, #result-positions .result-score, #score-feedback #feedback-value {
  font-family: "Arial Black", system-ui, sans-serif;
  font-weight: 950;
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
#players .card-score, #result-positions .result-score {
  -webkit-text-stroke: .45px currentColor;
  text-shadow: 1px 2px #020711;
}
#score-feedback #feedback-value {
  display: inline-block;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #080d19;
}
#score-feedback:not(.has-wheel) #feedback-label {
  display: table;
  margin-inline: auto;
  padding: 5px 16px;
  color: #fff;
  background: #111f35;
  border-inline: 3px solid #57dcff;
  font-style: italic;
  transform: skewX(-10deg);
}
#score-feedback:not(.has-wheel) #feedback-value {
  font-size: clamp(4.5rem, 22vw, 10rem);
  text-shadow: 3px 5px #a94600, 5px 9px #060b16, 0 0 24px #ff980088;
}
#score-feedback.negative:not(.has-wheel) #feedback-value {
  text-shadow: 3px 5px #8b173b, 5px 9px #060b16, 0 0 24px #ff356788;
}
@media (prefers-reduced-motion: no-preference) {
  #score-feedback:not(.has-wheel) #feedback-value[data-impact="a"] {
    animation: orbix-score-impact .42s both;
  }
  #score-feedback:not(.has-wheel) #feedback-value[data-impact="b"] {
    animation: orbix-score-impact-repeat .42s both;
  }
}
@keyframes orbix-score-impact {
  0% { opacity: 0; transform: translateY(24px) skewX(-13deg) scale(.76); }
  55% { opacity: 1; transform: translateY(-7px) skewX(-7deg) scale(1.14); }
  100% { transform: skewX(-4deg) scale(1); }
}
@keyframes orbix-score-impact-repeat {
  0% { opacity: 0; transform: translateY(24px) skewX(-13deg) scale(.76); }
  55% { opacity: 1; transform: translateY(-7px) skewX(-7deg) scale(1.14); }
  100% { transform: skewX(-4deg) scale(1); }
}

#daily-reward {
  box-sizing: border-box;
  width: min(420px, calc(100% - 32px));
  padding: 24px;
  color: #edf8ff;
  background: linear-gradient(145deg, #183b56, #0c1929);
  border: 1px solid #6388a6;
  border-radius: 20px;
  text-align: center;
}
#daily-reward::backdrop { background: #050c18b8; }
#daily-reward .daily-coin { display: block; font-size: 2.4rem; }
#daily-reward h2 { margin: 8px 0; }
#daily-reward .daily-actions { display: grid; gap: 8px; margin-top: 16px; }
#daily-reward button { min-height: 44px; }
#daily-status:empty { display: none; }

#daily-reward [hidden] { display: none; }
#daily-celebration {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 16px 0 8px;
  color: #ffe18a;
}
#daily-celebration strong { font-size: clamp(1.25rem, 6vw, 2rem); }
@media (prefers-reduced-motion: no-preference) {
  #daily-celebration strong { animation: daily-reward-pop .5s ease-out both; }
  #daily-celebration span { animation: daily-coin-rise .65s ease-out both; }
  #daily-celebration span:nth-child(even) { animation-delay: .1s; }
}
@keyframes daily-reward-pop {
  0% { opacity: 0; transform: scale(.7); }
  65% { opacity: 1; transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes daily-coin-rise {
  from { opacity: 0; transform: translateY(24px) rotate(-35deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

#create-room-dialog .room-contribution-card {
  box-sizing: border-box;
  min-inline-size: 0;
  margin: 16px 0;
  padding: 10px 14px 14px;
  border: 1px solid #b98b39;
  border-radius: 18px;
  background: linear-gradient(145deg, #433015, #211a16);
  box-shadow: 0 8px 18px #100902a0;
}
#create-room-dialog .room-contribution-card legend {
  padding: 3px 10px;
  border-radius: 10px;
  background: #4a3214;
  color: #ffe4a0;
  font-weight: 800;
}
#create-room-dialog .room-contribution-card small { color: #f3ddb8; }

.lobby-hero::before {
  opacity: 1;
  background: linear-gradient(to bottom, #0007 0%, transparent 28%, #0005 48%, #000d 73%, #000f 100%);
}
.lobby-hero > .welcome-banner {
  padding-inline: 42px;
  text-shadow: 0 2px 10px #000;
}
.lobby-hero #lobby-profile {
  position: static;
  margin: clamp(138px, 48vw, 250px) auto 0;
}
.lobby-hero #lobby-profile .welcome-portrait {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
.lobby-hero #lobby-profile .welcome-portrait img {
  object-fit: cover;
  object-position: center top;
}
.lobby-hero > h1, .lobby-hero > p { text-shadow: 0 2px 9px #000; }