:root {
  --bg: #02060b;
  --bg-2: #05080d;
  --surface: #0b1118;
  --surface-2: #101823;
  --cyan: #00e5ff;
  --orange: #ff8a30;
  --success: #42ff9e;
  --error: #ff3d68;
  --purple: #9b5cff;
  --white: #f4f8fa;
  --text-secondary: #9ba7b4;
  --muted: #687582;
  --radius-card: 18px;
  --radius-control: 14px;
  --glow-cyan: 0 0 18px rgba(0, 229, 255, 0.28);
  --glow-orange: 0 0 18px rgba(255, 138, 48, 0.22);
  --glow-error: 0 0 20px rgba(255, 61, 104, 0.3);
  --glow-success: 0 0 20px rgba(66, 255, 158, 0.26);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.42);
}

body {
  background:
    radial-gradient(circle at 30% 8%, rgba(0, 229, 255, 0.08), transparent 24rem),
    radial-gradient(circle at 78% 16%, rgba(255, 138, 48, 0.07), transparent 22rem),
    #000;
}

.brand-mark {
  width: 160px !important;
  height: 160px !important;
  margin-bottom: 14px !important;
  border-radius: 34px !important;
  background: url("./assets/icon-512.png") center / contain no-repeat !important;
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.16)) drop-shadow(0 0 18px rgba(255, 138, 48, 0.12)) !important;
}

.brand-mark i {
  display: none !important;
}

.home-screen h1 span,
.auth-view h2 {
  color: var(--white) !important;
}

.home-screen h1 strong {
  background: linear-gradient(90deg, var(--cyan) 0 43%, #f4d46b 54%, var(--orange) 78%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.primary-button {
  background: linear-gradient(100deg, var(--cyan), #8fe7c6 52%, var(--orange)) !important;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.18), 0 0 20px rgba(255, 138, 48, 0.12) !important;
}

.secondary-button,
.settings-button,
.ranking-home,
.back-button {
  border-color: rgba(244, 248, 250, 0.16) !important;
  background: rgba(11, 17, 24, 0.76) !important;
  color: var(--white) !important;
}

.game-page[data-screen="game"] .game-board {
  border-color: rgba(244, 248, 250, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(0, 229, 255, 0.035), transparent 34%),
    linear-gradient(135deg, rgba(0, 229, 255, 0.055), transparent 38%),
    linear-gradient(315deg, rgba(255, 138, 48, 0.045), transparent 42%),
    rgba(2, 6, 11, 0.72) !important;
}

.game-page[data-screen="game"] .anchor {
  width: 16px !important;
  height: 16px !important;
  margin: -8px 0 0 -8px !important;
  background: #46535d !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.07) !important;
}

.game-page[data-screen="game"] .anchor.is-accent-left,
.game-page[data-screen="game"] .anchor.is-accent-right {
  background: #46535d !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.07) !important;
}

.game-page[data-screen="game"] .anchor.is-pulse,
.game-page[data-screen="game"] .anchor.is-snap {
  background: var(--cyan) !important;
  box-shadow: var(--glow-cyan) !important;
}

.game-page[data-screen="game"] .anchor.is-success {
  background: var(--success) !important;
  box-shadow: var(--glow-success) !important;
}

.game-page[data-screen="game"] .anchor.is-error {
  background: var(--error) !important;
  box-shadow: var(--glow-error) !important;
}

.game-page[data-screen="game"] .pattern-line,
.game-page[data-screen="game"] .history-line,
.game-page[data-screen="game"] .drag-line {
  stroke-width: 4.5px !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.42)) !important;
}

.ranking-trophy,
.profile-stats i,
.achievement-list i,
.achievement-strip i {
  color: var(--cyan) !important;
  text-shadow: var(--glow-cyan) !important;
}

.ranking-tabs {
  grid-template-columns: repeat(3, 1fr) !important;
}

.ranking-tabs button,
.ranking-bottom-nav button,
.bottom-links button {
  color: var(--text-secondary) !important;
}

.ranking-tabs .active,
.ranking-bottom-nav .active,
.bottom-links button:focus-visible {
  color: var(--cyan) !important;
  border-color: rgba(0, 229, 255, 0.48) !important;
  box-shadow: inset 0 0 22px rgba(0, 229, 255, 0.08), var(--glow-cyan) !important;
}

.ranking-list em b,
.ranking-you-card em b {
  display: none !important;
}

.profile-card,
.podium-card,
.ranking-list,
.ranking-you-card,
.friend-tools {
  border-radius: var(--radius-card) !important;
  border-color: rgba(244, 248, 250, 0.12) !important;
  background: rgba(11, 17, 24, 0.76) !important;
  box-shadow: var(--shadow-soft) !important;
}

.pro-card {
  border-color: rgba(0, 229, 255, 0.18) !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(0, 229, 255, 0.08), transparent 8rem),
    rgba(11, 17, 24, 0.78) !important;
}

.pro-card p i {
  color: var(--cyan) !important;
  text-shadow: var(--glow-cyan) !important;
}

.level-up-screen,
.game-over-screen {
  background:
    radial-gradient(circle at 50% 16%, rgba(0, 229, 255, 0.09), transparent 19rem),
    linear-gradient(180deg, rgba(2, 6, 11, 0.97), #000 76%) !important;
}

.game-over-screen h2 {
  letter-spacing: 0.08em !important;
}

@media (max-width: 390px) {
  .brand-mark {
    width: 132px !important;
    height: 132px !important;
    border-radius: 28px !important;
  }
}

.delete-account-link {
  display: block !important;
  width: min(100%, 360px) !important;
  margin: 12px auto 0 !important;
  color: var(--error) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.delete-account-link.hidden {
  display: none !important;
}