* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: white;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#gameWrap {
  position: relative;
  width: min(100vw, 520px);
  height: min(100vh, 920px);
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,.45);
  border-radius: 18px;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background: #000;
}

#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.topbar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(128px, auto) auto;
  gap: 14px;
  align-items: start;
  grid-auto-rows: 78px;
  font-size: 13px;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.statsPanel {
  min-width: 132px;
  display: grid;
  gap: 1px;
  align-content: center;
  padding-top: 7px;
  padding-bottom: 7px;
}

.statsPanel div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  line-height: .95;
}

.statsPanel span {
  color: rgba(203,213,225,.75);
  font-size: 10px;
  font-weight: 800;
}

.statsPanel strong {
  line-height: .95;
  font-size: 12px;
}

.panel {
  padding: 11px 13px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  height: 78px;
  min-height: 0;
  overflow: hidden;
}

.hpOuter, .xpOuter, .boostOuter {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
  margin-top: 7px;
}

.xpOuter, .boostOuter {
  margin-top: 5px;
}

.hpInner {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #22c55e, #84cc16);
  border-radius: 999px;
}

.xpInner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #38bdf8, #a78bfa);
  border-radius: 999px;
}

.boostInner {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #fb923c, #facc15);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(251,146,60,.45);
}

.boostOuter.locked {
  animation: boostLockedBlink .72s ease-in-out infinite;
  outline: 1px solid rgba(251,146,60,.34);
  outline-offset: 2px;
}

@keyframes boostLockedBlink {
  0%, 100% {
    opacity: .45;
    box-shadow: 0 0 0 rgba(251,146,60,0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(251,146,60,.58);
  }
}

#joystick {
  position: absolute;
  left: 26px;
  bottom: 28px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 24px rgba(255,255,255,.05);
  pointer-events: none;
  touch-action: none;
}

#stick {
  position: absolute;
  left: 34px;
  top: 34px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.28);
  touch-action: none;
}

#boostBtn {
  position: absolute;
  right: 24px;
  bottom: 32px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 0;
  background: transparent url("../assets/icons/boost-button.png") center / contain no-repeat;
  color: transparent;
  box-shadow: none;
  font-size: 0;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  overflow: visible;
}

#boostBtn::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,146,60,.42) 0%, rgba(251,146,60,.18) 42%, rgba(251,146,60,0) 72%);
  filter: blur(7px);
}

#boostBtn::after {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(0,0,0,.34);
  filter: blur(10px);
}

#boostBtn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#boostBtn.active {
  transform: scale(.96);
  filter: saturate(1.22) brightness(1.12);
}

#boostBtn.active::before {
  inset: -2px;
  background: radial-gradient(circle, rgba(255,247,237,.42) 0%, rgba(251,146,60,.72) 34%, rgba(239,68,68,.22) 62%, rgba(239,68,68,0) 78%);
  filter: blur(9px);
}

#boostBtn:disabled,
#boostBtn.empty {
  opacity: .42;
  filter: grayscale(.35);
}

#boostBtn.locked {
  animation: boostButtonLockedBlink .72s ease-in-out infinite;
}

@keyframes boostButtonLockedBlink {
  0%, 100% { opacity: .38; }
  50% { opacity: .76; }
}

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(2,6,23,.58);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

#overlay.modalEntering {
  animation: modalBackdropIn .18s ease-out both;
}

#overlay.modalExiting {
  pointer-events: none;
  animation: modalBackdropOut .18s ease-in both;
}

#modal {
  width: 100%;
  max-width: 440px;
  max-height: min(720px, calc(100vh - 44px));
  padding: 18px;
  border-radius: 24px;
  background: rgba(15,23,42,.94);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#overlay.modalEntering #modal {
  animation: modalSlideFadeIn .22s cubic-bezier(.2,.8,.2,1) both;
}

#overlay.modalExiting #modal {
  animation: modalSlideFadeOut .18s cubic-bezier(.4,0,1,1) both;
}

@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalSlideFadeIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalSlideFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }
}

h1, h2, p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
}

h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 16px;
}

button {
  pointer-events: auto;
  border: 0;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  padding: 13px 18px;
  min-width: 160px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(37,99,235,.35);
}

.choices {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.choice {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(30,41,59,.9);
  padding: 12px;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
}

.choiceIcon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
}

.choiceIcon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 7px rgba(56,189,248,.35));
}

.choice strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.choiceHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.choice span {
  display: block;
  color: #cbd5e1;
  font-size: 13px;
}

.levelUpEconomy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 12px;
  padding: 9px 10px;
  border: 1px solid rgba(250,204,21,.22);
  border-radius: 12px;
  background: rgba(250,204,21,.08);
  color: #fde68a;
  font-size: 13px;
  font-weight: 800;
}

.levelUpEconomy strong {
  color: #facc15;
}

.levelUpRerollBtn,
.choiceLockBtn {
  min-width: 0;
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: none;
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(250,204,21,.34);
  color: #fde68a;
  font-size: 12px;
  line-height: 1;
}

.choiceLockBtn {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-color: rgba(148,163,184,.28);
  color: #cbd5e1;
}

.choiceLockBtn.locked {
  border-color: rgba(57,255,20,.42);
  background: rgba(57,255,20,.12);
  color: #bbf7d0;
}

.choice.locked {
  border-color: rgba(57,255,20,.38);
  box-shadow: inset 0 0 0 1px rgba(57,255,20,.08);
}

.levelUpNotice {
  margin: -3px 0 10px;
  color: #fecaca;
  font-size: 12px;
  font-weight: 800;
}

.choiceEvolutionHints {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.choiceEvolutionHints span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,.28);
  background: rgba(14,165,233,.12);
  color: #bae6fd;
  font-size: 11px;
  font-weight: 800;
}

.choiceEvolutionHints span.ready {
  border-color: rgba(57,255,20,.38);
  background: rgba(57,255,20,.12);
  color: #bbf7d0;
}

.transformationChoices {
  max-height: min(430px, 52vh);
  overflow-y: auto;
  padding-right: 2px;
}

.transformationChoice {
  grid-template-columns: 42px 1fr;
}

.debugShipChoices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transformationSprite {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid rgba(57,255,20,.32);
  background: rgba(57,255,20,.1);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 18px rgba(57,255,20,.08);
}

.transformationSprite img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 7px rgba(57,255,20,.28));
}

.modalActions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.secondaryBtn {
  background: rgba(30,41,59,.94);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  color: #e2e8f0;
}

#powerupHud,
#storePowerupHud {
  position: absolute;
  top: 96px;
  display: none;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
  padding-block: 4px;
  pointer-events: none;
}

#powerupHud {
  left: 14px;
  right: 104px;
  justify-content: flex-start;
}

#storePowerupHud {
  left: auto;
  right: 14px;
  max-width: 186px;
  justify-content: flex-end;
}

.accountPanel {
  display: none;
  min-width: 0;
  max-width: 160px;
  align-content: center;
}

.accountLabel {
  color: rgba(203,213,225,.76);
  font-size: 11px;
  line-height: 1.1;
  margin-bottom: 3px;
}

.accountName {
  max-width: 100%;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.powerupBadge {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(15,23,42,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
}

.powerupBadge.store {
  border-color: rgba(250,204,21,.24);
  background: rgba(30,41,59,.72);
  box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 18px rgba(250,204,21,.08);
}

.powerupBadge img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.45));
}

.powerupBadge.cooling img,
.powerupBadge.store.cooling img {
  opacity: .42;
  filter: grayscale(.45) drop-shadow(0 2px 5px rgba(0,0,0,.45));
}

.powerupCount {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #38bdf8;
  color: #020617;
  border: 1px solid rgba(255,255,255,.75);
  font-size: 10px;
  line-height: 16px;
  font-weight: 900;
  text-align: center;
}

.powerupCooldown {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,.72);
  font-size: 10px;
  line-height: 18px;
  font-weight: 900;
  text-align: center;
}

.hint {
  position: absolute;
  right: 16px;
  bottom: 24px;
  max-width: 220px;
  color: rgba(255,255,255,.66);
  text-align: right;
  font-size: 12px;
  line-height: 1.35;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.authTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(255,255,255,.1);
}

.authTab {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(255,255,255,.68);
}

.authTab.active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 8px 20px rgba(37,99,235,.24);
}

.authForm {
  display: grid;
  gap: 10px;
  text-align: left;
}

.authField {
  display: grid;
  gap: 6px;
  color: rgba(226,232,240,.78);
  font-size: 12px;
  font-weight: 800;
}

.authField input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(2,6,23,.55);
  color: #fff;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  outline: none;
  user-select: text;
}

.authField input:focus {
  border-color: rgba(56,189,248,.72);
  box-shadow: 0 0 0 3px rgba(56,189,248,.14);
}

.authActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}

.authSecondary {
  min-width: 0;
  background: rgba(30,41,59,.82);
  box-shadow: none;
}

.authMessage {
  min-height: 18px;
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.overlayTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: rgba(2,6,23,.58);
  border: 1px solid rgba(255,255,255,.1);
}

.overlayTab {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  color: rgba(226,232,240,.66);
  font-size: 13px;
}

.storePane {
  width: 100%;
  text-align: left;
}

.storeOverlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(10px);
}

.storeDialog {
  position: relative;
  width: min(100%, 760px);
  max-height: calc(100% - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border-radius: 28px;
  background: rgba(15,23,42,.94);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: modalSlideFadeIn .2s cubic-bezier(.2,.8,.2,1) both;
  scrollbar-color: rgba(56,189,248,.58) rgba(15,23,42,.28);
  scrollbar-width: thin;
}

.storeDialog::-webkit-scrollbar {
  width: 6px;
}

.storeDialog::-webkit-scrollbar-track {
  background: rgba(15,23,42,.28);
  border-radius: 999px;
}

.storeDialog::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56,189,248,.85), rgba(124,58,237,.72));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(56,189,248,.32);
}

.storeCloseBtn {
  position: absolute;
  top: 18px;
  right: 18px;
  min-width: 0;
  padding: 9px 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: none;
  font-size: 13px;
}

.storeHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.storeDialog .storeHeader {
  padding-right: 92px;
}

.storeHeader h2 {
  margin: 0;
  font-size: 30px;
}

.storeHeader p {
  margin: 5px 0 0;
  color: rgba(203,213,225,.68);
  font-size: 13px;
  line-height: 1.35;
}

.storeCoins {
  flex-shrink: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(250,204,21,.14);
  border: 1px solid rgba(250,204,21,.28);
  color: #fde68a;
  font-size: 12px;
  font-weight: 950;
}

.storeNotice {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.22);
  color: #bae6fd;
  font-size: 13px;
  font-weight: 700;
}

.storeCategories {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,.58) rgba(15,23,42,.28);
}

.storeCategory {
  flex: 0 0 auto;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(226,232,240,.72);
  box-shadow: none;
  font-size: 13px;
}

.storeCategory.active {
  color: #bae6fd;
  background: rgba(56,189,248,.15);
  border-color: rgba(125,211,252,.58);
}

.storeList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.storeItem {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 13px;
  border-radius: 22px;
  background: rgba(30,41,59,.58);
  border: 1px solid rgba(255,255,255,.12);
}

.storeItemPreview {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 44%, rgba(56,189,248,.18), rgba(124,58,237,.12) 44%, rgba(2,6,23,.38) 72%),
    linear-gradient(135deg, rgba(15,23,42,.7), rgba(2,6,23,.42));
  border: 1px solid rgba(125,211,252,.24);
  box-shadow: inset 0 0 24px rgba(56,189,248,.1);
  overflow: hidden;
}

.storeItemPreview img {
  width: min(72%, 132px);
  height: min(88%, 132px);
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(56,189,248,.35));
}

.storeItemBody {
  min-width: 0;
}

.storeItemHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.storeItemHead strong {
  font-size: 16px;
  line-height: 1.15;
}

.storeItemHead span {
  color: #fde68a;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.storeItem p {
  min-height: 38px;
  margin: 7px 0 0;
  color: rgba(203,213,225,.74);
  font-size: 12.5px;
  line-height: 1.45;
}

.storeBuyBtn {
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 15px;
  background: #e0f2fe;
  color: #020617;
  font-size: 13px;
  box-shadow: 0 12px 22px rgba(56,189,248,.18);
}

.storeBuyBtn:disabled {
  opacity: .45;
  cursor: default;
}

.gameActions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .62fr) 48px 48px;
  gap: 10px;
  align-items: stretch;
}

.gameActions button {
  width: 100%;
  min-width: 0;
}

.secondaryAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(30,41,59,.86);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 0 18px rgba(56,189,248,.08), 0 10px 22px rgba(0,0,0,.22);
}

.musicAction,
.soundAction {
  min-width: 0;
  padding: 8px;
  border-radius: 14px;
  background: rgba(30,41,59,.86);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 0 18px rgba(56,189,248,.08), 0 10px 22px rgba(0,0,0,.22);
}

.musicAction.active,
.soundAction.active {
  border-color: rgba(57,255,20,.34);
  box-shadow: inset 0 0 18px rgba(57,255,20,.1), 0 10px 22px rgba(0,0,0,.22);
}

.guideActions {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.guideActionsLabel {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.guideAction {
  min-width: 0;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(30,41,59,.86);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 0 18px rgba(56,189,248,.08), 0 10px 22px rgba(0,0,0,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 900;
}

.guideAction img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.48));
}

.musicAction .buttonIcon,
.soundAction .buttonIcon {
  width: 25px;
  height: 25px;
}

.tabIcon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabIcon polygon {
  fill: currentColor;
  stroke: none;
}

.overlayTab.active {
  color: #fff;
  background: rgba(30,41,59,.95);
  border: 1px solid rgba(56,189,248,.35);
  box-shadow: inset 0 0 18px rgba(56,189,248,.12), 0 8px 20px rgba(0,0,0,.22);
}

.overlayPane {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 2px 4px;
  scrollbar-color: rgba(56,189,248,.58) rgba(15,23,42,.28);
  scrollbar-width: thin;
}

.overlayPane::-webkit-scrollbar {
  width: 6px;
}

.overlayPane::-webkit-scrollbar-track {
  background: rgba(15,23,42,.28);
  border-radius: 999px;
}

.overlayPane::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56,189,248,.85), rgba(124,58,237,.72));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(56,189,248,.32);
}

.overlayPane::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(125,211,252,.95), rgba(167,139,250,.84));
}

.gamePane,
.tabPane {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.runPowerups {
  width: 100%;
  display: grid;
  gap: 9px;
}

.runPowerupTitle {
  color: rgba(203,213,225,.72);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
}

.runPowerupGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.runPowerup {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border-radius: 16px;
  background: rgba(30,41,59,.72);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  color: #fff;
  text-align: left;
}

.runPowerup.selected {
  border-color: rgba(125,211,252,.72);
  background: rgba(56,189,248,.15);
  box-shadow: inset 0 0 18px rgba(56,189,248,.12), 0 12px 24px rgba(56,189,248,.12);
}

.runPowerupIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(2,6,23,.34);
  border: 1px solid rgba(255,255,255,.1);
}

.runPowerupIcon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(56,189,248,.35));
}

.runPowerupText {
  min-width: 0;
}

.runPowerupText strong,
.runPowerupText span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runPowerupText strong {
  font-size: 12px;
  line-height: 1.15;
}

.runPowerupText span {
  margin-top: 3px;
  color: rgba(203,213,225,.7);
  font-size: 11px;
  font-weight: 850;
}

.runPowerupCheck {
  color: #bae6fd;
  font-size: 11px;
  font-weight: 950;
  text-align: right;
}

.runPowerupNotice {
  width: 100%;
  color: rgba(203,213,225,.72);
  font-size: 12px;
  font-weight: 800;
}

.runPowerupNotice.error {
  color: #fca5a5;
}

.modalKicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.24);
  color: #bae6fd;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.runSummary,
.profileStats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.runSummary div,
.profileStats div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(30,41,59,.72);
  border: 1px solid rgba(255,255,255,.1);
}

.runSummary span,
.profileStats span {
  display: block;
  color: rgba(203,213,225,.72);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.runSummary strong,
.profileStats strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scoreList {
  width: 100%;
  display: grid;
  gap: 8px;
}

.leaderboardTabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(2,6,23,.52);
  border: 1px solid rgba(255,255,255,.1);
}

.leaderboardTab {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: rgba(226,232,240,.66);
  font-size: 13px;
}

.leaderboardTab.active {
  color: #fff;
  background: rgba(30,41,59,.94);
  border: 1px solid rgba(56,189,248,.3);
}

.scoreRow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(30,41,59,.7);
  border: 1px solid rgba(255,255,255,.1);
  text-align: left;
}

.scoreRank {
  color: #38bdf8;
  font-weight: 900;
}

.scoreName {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.scoreMeta {
  display: block;
  margin-top: 2px;
  color: rgba(203,213,225,.66);
  font-size: 11px;
  font-weight: 800;
}

.profileHeader {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
}

.profileAvatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #38bdf8, #7c3aed);
  color: #fff;
  font-size: 26px;
  font-weight: 950;
}

.profileHeader h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profileEmail {
  margin-top: 4px;
  color: rgba(203,213,225,.72);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profileDetailsTable {
  width: 100%;
  display: grid;
  padding: 4px 14px;
  border-radius: 14px;
  background: rgba(30,41,59,.72);
  border: 1px solid rgba(255,255,255,.1);
}

.profileDetailRow {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.profileDetailRow:last-child {
  border-bottom: 0;
}

.profileDetailRow span {
  flex-shrink: 0;
  color: rgba(203,213,225,.72);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.profileDetailRow strong {
  min-width: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profileTabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(2,6,23,.52);
  border: 1px solid rgba(255,255,255,.1);
}

.profileTab {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: rgba(226,232,240,.66);
  font-size: 13px;
}

.profileTab.active {
  color: #fff;
  background: rgba(30,41,59,.94);
  border: 1px solid rgba(56,189,248,.3);
}

.achievementsPanel {
  width: 100%;
  display: grid;
  gap: 12px;
}

.achievementSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(30,41,59,.72);
  border: 1px solid rgba(255,255,255,.1);
}

.achievementSummary span {
  color: rgba(203,213,225,.72);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.achievementSummary strong {
  color: #bae6fd;
  font-size: 18px;
  font-weight: 950;
}

.achievementGrid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.achievementCard {
  position: relative;
  min-height: 106px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(2,6,23,.38);
  opacity: .66;
  overflow: hidden;
}

.achievementCard.unlocked {
  border-color: rgba(56,189,248,.6);
  background: rgba(56,189,248,.14);
  box-shadow: 0 0 18px rgba(56,189,248,.22);
  opacity: 1;
}

.achievementGoal {
  color: #bae6fd;
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
}

.achievementTitle {
  color: #fff;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 900;
}

.achievementState {
  color: rgba(203,213,225,.66);
  font-size: 10px;
  font-weight: 850;
}

.friendCodePanel {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(30,41,59,.72);
  border: 1px solid rgba(255,255,255,.1);
}

.friendCodePanelMain {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.friendCodeLabel {
  color: rgba(203,213,225,.72);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.friendCodeValue {
  margin-top: 5px;
  color: #bae6fd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 18px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.friendCodeUnavailable,
.friendCodeFeedback {
  min-height: 18px;
  color: rgba(203,213,225,.72);
  font-size: 13px;
  font-weight: 800;
}

.friendCodeActions {
  display: flex;
  flex-shrink: 0;
  gap: 7px;
}

.iconAction {
  min-width: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 950;
}

.iconAction.dark {
  background: rgba(2,6,23,.88);
  color: #fff;
}

.iconAction.light {
  background: rgba(255,255,255,.88);
  color: #020617;
}

.buttonIcon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.friendsPanel {
  width: 100%;
  display: grid;
  gap: 14px;
}

.friendForm {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.friendForm input {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(2,6,23,.55);
  color: #fff;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  outline: none;
  text-transform: uppercase;
  user-select: text;
}

.friendForm button {
  min-width: 78px;
  padding: 9px 12px;
  border-radius: 13px;
}

.friendNotice {
  width: 100%;
  color: #bae6fd;
  font-size: 13px;
  font-weight: 800;
}

.friendList {
  width: 100%;
  display: grid;
  gap: 8px;
}

.friendRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(30,41,59,.7);
  border: 1px solid rgba(255,255,255,.1);
  text-align: left;
}

.friendAvatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #38bdf8, #7c3aed);
  font-weight: 950;
}

.friendMain {
  min-width: 0;
}

.friendName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}

.friendName span {
  margin-left: 5px;
  color: #bae6fd;
  font-size: 10px;
  text-transform: uppercase;
}

.friendMeta {
  margin-top: 2px;
  color: rgba(203,213,225,.72);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friendActions {
  display: flex;
  gap: 6px;
}

.friendAction {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 11px;
  font-size: 12px;
  box-shadow: none;
}

.friendAction.success {
  background: #10b981;
}

.friendAction.danger {
  background: #e11d48;
}

.qrOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2,6,23,.74);
  backdrop-filter: blur(6px);
}

.qrDialog {
  width: min(100%, 320px);
  padding: 16px;
  border-radius: 18px;
  background: rgba(15,23,42,.98);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}

.guideOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(2,6,23,.82);
  backdrop-filter: blur(8px);
}

.guideDialog {
  position: relative;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 0;
  background: rgba(15,23,42,.98);
  border: 0;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

.guideHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
  text-align: left;
}

.guideCloseBtn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 10000;
  width: 48px;
  height: 48px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.48), inset 0 0 18px rgba(56,189,248,.12);
  font-size: 28px;
  line-height: 1;
}

.guideImageWrap {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  border-radius: 16px;
  background: rgba(2,6,23,.74);
  scrollbar-color: rgba(56,189,248,.58) rgba(15,23,42,.28);
  scrollbar-width: thin;
}

.guideImageWrap img {
  display: block;
  width: min(100%, calc((100dvh - 82px) * 1.75));
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

.qrHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.qrCodeText {
  margin-top: 4px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 16px;
  font-weight: 950;
}

.qrCanvasWrap {
  margin-top: 14px;
  display: flex;
  aspect-ratio: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.qrError {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

@media (max-width: 640px) {
  html, body {
    height: 100dvh;
  }

  #gameWrap {
    width: min(100dvw, calc(100dvh * 13 / 23));
    height: min(100dvh, calc(100dvw * 23 / 13));
    border-radius: 0;
  }

  #powerupHud,
  #storePowerupHud {
    top: 72px;
  }

  #powerupHud {
    right: 104px;
  }

  #storePowerupHud {
    max-width: 96px;
  }

  .topbar {
    top: 3px;
    left: 8px;
    right: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(82px, .48fr) minmax(68px, .36fr);
    grid-auto-rows: 64px;
    gap: 6px;
    font-size: 11px;
  }

  .panel {
    height: 64px;
    padding: 8px 9px;
    border-radius: 10px;
  }

  .statsPanel {
    min-width: 0;
    gap: 0;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .statsPanel div {
    gap: 5px;
  }

  .statsPanel span {
    font-size: 8px;
  }

  .statsPanel strong {
    font-size: 10px;
  }

  .hpOuter,
  .xpOuter,
  .boostOuter {
    height: 6px;
    margin-top: 5px;
  }

  .xpOuter,
  .boostOuter {
    margin-top: 4px;
  }

  .accountPanel {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }

  .accountLabel {
    font-size: 8px;
  }

  .accountName {
    font-size: 10px;
  }

  .storeDialog {
    width: 100%;
    max-height: calc(100% - 20px);
    padding: 18px;
    border-radius: 24px;
  }

  .storeDialog .storeHeader {
    padding-right: 0;
    padding-top: 34px;
  }

  .storeHeader {
    display: grid;
    gap: 10px;
  }

  .storeList {
    grid-template-columns: minmax(0, 1fr);
  }

  .storeItem {
    grid-template-columns: minmax(0, 1fr);
  }

  .storeBuyBtn {
    width: 100%;
  }

  .runPowerupGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gameActions {
    grid-template-columns: 48px 48px;
    justify-content: center;
  }

  .gameActions #playBtn,
  .gameActions #storeBtn {
    grid-column: 1 / -1;
  }

  .guideActions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .guideActionsLabel {
    grid-column: 1 / -1;
    text-align: center;
  }

  .guideDialog {
    padding: 10px;
    border-radius: 18px;
  }

  .debugShipChoices {
    grid-template-columns: minmax(0, 1fr);
  }
}