:root {
  --vh: 1vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --bg: #040814;
  --bg-soft: rgba(15, 22, 38, 0.92);
  --panel: rgba(12, 18, 33, 0.76);
  --panel-strong: rgba(16, 22, 36, 0.92);
  --border: rgba(162, 191, 255, 0.14);
  --text: #f4f7ff;
  --muted: rgba(225, 235, 255, 0.66);
  --blue: #7fa7ff;
  --blue-strong: #2f86ff;
  --magenta: #d24cff;
  --magenta-strong: #b400ff;
  --orange: #ffab4d;
  --orange-strong: #ff8a00;
  --glow-blue: 0 0 34px rgba(84, 141, 255, 0.45);
  --glow-purple: 0 0 36px rgba(199, 72, 255, 0.42);
  --shadow-panel: 0 18px 44px rgba(0, 0, 0, 0.42);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --max-width: 520px;
  --transition: 220ms ease;
  color-scheme: only dark;
  font-synthesis-weight: none;
}

* {
  box-sizing: border-box;
  forced-color-adjust: none;
}

html,
body {
  color-scheme: only dark;
  width: 100%;
  height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(58, 95, 219, 0.2), transparent 48%),
    radial-gradient(circle at 80% 70%, rgba(196, 52, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #071122 0%, #02050d 100%);
  color: var(--text);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  filter: blur(48px);
  opacity: 0.55;
  z-index: 0;
}

body::before {
  width: 34vmax;
  height: 34vmax;
  top: -12vmax;
  left: -10vmax;
  background: rgba(71, 110, 255, 0.2);
}

body::after {
  width: 36vmax;
  height: 36vmax;
  right: -16vmax;
  bottom: 12vh;
  background: rgba(193, 28, 255, 0.18);
}

.app {
  position: relative;
  height: calc(var(--vh) * 100);
  width: 100%;
  max-width: min(var(--max-width), 100vw);
  margin: 0 auto;
  padding:
    calc(14px + var(--safe-top))
    calc(14px + var(--safe-right))
    calc(96px + var(--safe-bottom))
    calc(14px + var(--safe-left));
  overflow: hidden;
}

.app-noise,
.app-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.app-noise {
  opacity: 0.1;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 240px 240px;
}

.app-gradient {
  filter: blur(44px);
  opacity: 0.8;
}

.app-gradient-a {
  width: 46%;
  height: 22%;
  top: 28%;
  left: -14%;
  background: rgba(255, 140, 0, 0.18);
}

.app-gradient-b {
  width: 42%;
  height: 28%;
  right: -10%;
  top: 58%;
  background: rgba(198, 56, 255, 0.22);
}

.app-gradient-c {
  width: 52%;
  height: 34%;
  top: 18%;
  left: 22%;
  background: rgba(51, 112, 255, 0.14);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 24px);
  padding:
    calc(14px + var(--safe-top))
    calc(14px + var(--safe-right))
    calc(126px + var(--safe-bottom))
    calc(14px + var(--safe-left));
  z-index: 1;
}

.screen.active {
  display: flex;
}

.screen-home {
  justify-content: space-between;
}

.screen-generic {
  padding-top: calc(18px + var(--safe-top));
  padding-bottom: calc(132px + var(--safe-bottom));
  overflow-y: auto;
  scrollbar-width: none;
}

.screen-generic::-webkit-scrollbar {
  display: none;
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-small {
  transform: scale(0.94);
  transform-origin: left center;
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(3, 7px);
  align-items: end;
  gap: 3px;
  width: 30px;
  height: 30px;
}

.brand-mark span {
  display: block;
  width: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg, #bed0ff 0%, #7ea4ff 100%);
  box-shadow: 0 0 16px rgba(102, 146, 255, 0.4);
}

.brand-mark span:nth-child(1) { height: 20px; }
.brand-mark span:nth-child(2) { height: 30px; }
.brand-mark span:nth-child(3) { height: 14px; }

.brand-wordmark {
  font-size: clamp(1.15rem, 2vw + 0.8rem, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #89a8ff;
  text-shadow: 0 0 18px rgba(76, 123, 255, 0.28);
}

.status-pill,
.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-height: 52px;
  border-radius: 999px;
  background: rgba(25, 31, 45, 0.76);
  border: 1px solid rgba(177, 199, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), var(--shadow-panel);
}

.status-pill {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 18px;
}

.status-pill-label,
.hud-stat-label,
.section-overline,
.modal-kicker,
.spark-title,
.cta-card-subtitle,
.shortcut-label,
.section-title-row h3,
.result-stats span,
.setting-row span,
.summary-value span,
.leaderboard-subtitle {
  font-size: clamp(0.68rem, 0.8vw + 0.58rem, 0.84rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.status-pill strong,
.hud-chip strong,
.summary-value strong,
.result-stats strong {
  display: block;
  min-height: 1.4em;
  line-height: 1.2;
  font-size: clamp(1.1rem, 2vw + 0.65rem, 1.6rem);
  font-weight: 800;
  color: #8eb1ff;
}

.summary-value strong {
  width: 100%;
  text-align: center;
  color: #a9c2ff;
  opacity: 1;
  visibility: visible;
  text-shadow: 0 0 18px rgba(92, 132, 255, 0.22);
}

.coin-icon {
  font-size: 1rem;
  color: #ffd84d;
  text-shadow: 0 0 10px rgba(255, 214, 77, 0.9), 0 0 18px rgba(255, 214, 77, 0.55), 0 0 28px rgba(255, 214, 77, 0.3);
  filter: drop-shadow(0 0 8px rgba(255, 214, 77, 0.6));
}

.home-hero {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}

.float-cube,
.hero-glow {
  position: absolute;
  pointer-events: none;
}

.hero-glow {
  width: clamp(180px, 44vw, 280px);
  aspect-ratio: 1;
  border-radius: 36%;
  background: radial-gradient(circle, rgba(99, 135, 255, 0.34) 0%, rgba(99, 135, 255, 0.08) 40%, transparent 72%);
  filter: blur(10px);
  animation: pulseGlow 4s ease-in-out infinite;
}

.float-cube {
  top: 12%;
  left: 6%;
  width: clamp(72px, 17vw, 100px);
  aspect-ratio: 1;
  border-radius: 18px;
  transform: rotate(42deg);
  background:
    linear-gradient(160deg, rgba(126, 166, 255, 0.96), rgba(34, 93, 193, 0.92));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 28px rgba(55, 120, 255, 0.4),
    0 18px 36px rgba(0, 0, 0, 0.32);
  animation: floatCube 6.4s ease-in-out infinite;
}

.hero-title {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.06em;
  margin: 0;
  text-align: center;
  font-size: clamp(3.8rem, 10vw, 5.7rem);
  line-height: 0.94;
  letter-spacing: -0.07em;
  font-weight: 1000;
  text-transform: uppercase;
  font-style: italic;
}

.hero-title span {
  color: #d8e2ff;
  text-shadow: 0 0 26px rgba(102, 141, 255, 0.26);
}

.hero-title .accent {
  color: #4b8dff;
  text-shadow: 0 0 34px rgba(46, 129, 255, 0.5);
}

.cta-card,
.shortcut-card,
.summary-panel,
.setting-row,
.shop-card,
.leaderboard-item,
.game-modal-card,
.leaderboard-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(15, 21, 35, 0.94), rgba(10, 16, 28, 0.88));
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.cta-card::before,
.shortcut-card::before,
.summary-panel::before,
.setting-row::before,
.shop-card::before,
.leaderboard-item::before,
.game-modal-card::before,
.leaderboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.06), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.03));
  pointer-events: none;
}

.cta-card {
  padding: clamp(22px, 3vh, 30px);
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(15, 20, 31, 0.96), rgba(16, 21, 33, 0.9));
  box-shadow: var(--shadow-panel), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, var(--glow-purple), var(--glow-blue);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.cta-card:active {
  transform: scale(0.985);
}

.cta-card-title {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.05em;
}

.cta-card-subtitle {
  display: block;
  margin-top: 10px;
}

.home-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2.2vw, 18px);
}

.shortcut-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: clamp(106px, 16vh, 142px);
  border-radius: 24px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.shortcut-card:active {
  transform: translateY(2px) scale(0.988);
}

.shortcut-card-highlight {
  background: linear-gradient(135deg, rgba(83, 37, 120, 0.92), rgba(48, 14, 71, 0.92));
  box-shadow: var(--shadow-panel), 0 0 34px rgba(212, 76, 255, 0.26);
}

.shortcut-icon {
  width: 34px;
  height: 34px;
  position: relative;
}

.icon-bag::before,
.icon-rank::before,
.icon-rank::after,
.icon-gear::before {
  content: "";
  position: absolute;
}

.icon-bag::before {
  inset: 7px 6px 4px;
  border: 3px solid #e359ff;
  border-top-width: 2px;
  border-radius: 5px;
  box-shadow: 0 0 16px rgba(227, 89, 255, 0.45);
}

.icon-bag::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 2px;
  height: 10px;
  border: 3px solid #e359ff;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 16px rgba(227, 89, 255, 0.35);
}

.icon-rank::before {
  left: 11px;
  right: 11px;
  top: 3px;
  height: 15px;
  border: 3px solid #ffb158;
  border-bottom: 0;
  border-radius: 2px 2px 7px 7px;
  box-shadow: 0 0 16px rgba(255, 177, 88, 0.4);
}

.icon-rank::after {
  left: 9px;
  right: 9px;
  top: 17px;
  height: 12px;
  clip-path: polygon(50% 100%, 0 0, 40% 0, 50% 18%, 60% 0, 100% 0);
  background: #ffb158;
  box-shadow: 0 0 16px rgba(255, 177, 88, 0.35);
}

.icon-gear::before {
  inset: 4px;
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 0 25%, #9d9d9d 26% 38%, rgba(0, 0, 0, 0) 39%),
    conic-gradient(from 0deg, #9d9d9d 0 10%, transparent 10% 20%, #9d9d9d 20% 30%, transparent 30% 40%, #9d9d9d 40% 50%, transparent 50% 60%, #9d9d9d 60% 70%, transparent 70% 80%, #9d9d9d 80% 90%, transparent 90% 100%);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
}

.bottom-nav {
  position: fixed;
  left: max(14px, calc((100vw - min(var(--max-width), 100vw)) / 2 + 14px + var(--safe-left)));
  right: max(14px, calc((100vw - min(var(--max-width), 100vw)) / 2 + 14px + var(--safe-right)));
  bottom: calc(10px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 10px;
  border-radius: 24px;
  background: rgba(6, 11, 20, 0.9);
  border: 1px solid rgba(132, 164, 255, 0.14);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  z-index: 6;
}

.nav-item {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 68px;
  padding: 8px 6px;
  color: rgba(178, 194, 228, 0.56);
  border-radius: 22px;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.nav-item svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.nav-item span {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.nav-item.active {
  color: #8fb1ff;
  background: linear-gradient(180deg, rgba(34, 48, 79, 0.82), rgba(21, 31, 54, 0.9));
  box-shadow: inset 0 0 0 1px rgba(152, 188, 255, 0.12), 0 0 28px rgba(98, 138, 255, 0.18);
}

.bottom-nav.disabled {
  opacity: 0.6;
}

.bottom-nav.disabled .nav-item {
  pointer-events: none;
}

.screen-title {
  display: none;
}

.generic-header {
  margin-bottom: 2px;
  align-items: flex-end;
}

.summary-panel {
  border-radius: 26px;
  padding: 18px 18px;
}

.summary-copy {
  display: grid;
  gap: 8px;
  color: var(--muted);
  min-height: 72px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

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

.summary-value {
  display: grid;
  gap: 6px;
  min-height: 64px;
  height: 64px;
  align-content: center;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.summary-divider {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title-row.compact {
  margin-bottom: 12px;
}

.section-title-row h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(16, 21, 34, 0.84);
  border: 1px solid rgba(152, 173, 226, 0.12);
}

.segmented-control.compact {
  transform: scale(0.92);
  transform-origin: right center;
}

.segmented-option {
  min-height: 36px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(184, 198, 233, 0.7);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.segmented-option.active {
  color: #8eb0ff;
  background: linear-gradient(180deg, rgba(28, 44, 78, 0.92), rgba(19, 31, 56, 0.98));
  box-shadow: 0 0 24px rgba(63, 120, 255, 0.16);
}

.leaderboard-list {
  display: grid;
  gap: 14px;
  padding-bottom: 8px;
}

.leaderboard-list-compact {
  gap: 12px;
}

.leaderboard-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 24px;
}

.leaderboard-item[data-rank="1"] {
  box-shadow: var(--shadow-panel), inset 4px 0 0 #ffae51;
}

.leaderboard-item[data-rank="2"] {
  box-shadow: var(--shadow-panel), inset 4px 0 0 #e357ff;
}

.leaderboard-item[data-rank="3"] {
  box-shadow: var(--shadow-panel), inset 4px 0 0 #7da5ff;
}

.leaderboard-position {
  width: 34px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffb158;
}

.leaderboard-item[data-rank="2"] .leaderboard-position { color: #e357ff; }
.leaderboard-item[data-rank="3"] .leaderboard-position { color: #7da5ff; }

.leaderboard-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: white;
  background: linear-gradient(135deg, rgba(43, 127, 255, 0.78), rgba(190, 52, 255, 0.78));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 20px rgba(76, 126, 255, 0.16);
}

.leaderboard-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.leaderboard-name {
  font-size: clamp(1rem, 1vw + 0.82rem, 1.3rem);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-score {
  font-size: clamp(1rem, 1vw + 0.9rem, 1.7rem);
  font-weight: 900;
}

.shop-grid {
  display: grid;
  gap: 14px;
  padding-bottom: 6px;
}

.shop-card {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 24px;
}

.skin-preview {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto;
}

.skin-preview::before,
.skin-preview::after,
.skin-preview-cube {
  content: "";
  position: absolute;
  border-radius: 18px;
}

.skin-preview::before {
  inset: 28px 10px 10px 28px;
  background: var(--skin-side-right, rgba(64, 110, 255, 0.88));
  transform: skewY(26deg);
  opacity: 0.7;
}

.skin-preview::after {
  inset: 28px 28px 10px 10px;
  background: var(--skin-side-left, rgba(109, 65, 255, 0.82));
  transform: skewY(-26deg);
  opacity: 0.72;
}

.skin-preview-cube {
  inset: 12px;
  background: linear-gradient(135deg, var(--skin-top-a, #93b3ff), var(--skin-top-b, #527cff));
  transform: rotate(45deg);
  box-shadow: 0 0 24px rgba(92, 133, 255, 0.3);
}

.shop-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shop-copy h3 {
  margin: 0;
  font-size: 1.2rem;
}

.shop-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.shop-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.price-pill,
.selection-pill,
.setting-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(22, 29, 46, 0.96);
  border: 1px solid rgba(156, 184, 255, 0.12);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.selection-pill.selected {
  color: #8fb1ff;
  box-shadow: 0 0 18px rgba(84, 142, 255, 0.18);
}

.selection-pill.locked {
  color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(33, 44, 68, 0.94), rgba(21, 28, 45, 0.96));
}

.selection-pill.buyable {
  color: #0c111d;
  background: linear-gradient(180deg, rgba(255, 191, 88, 1), rgba(255, 158, 57, 1));
}

.settings-list {
  display: grid;
  gap: 14px;
  padding-bottom: 4px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  text-align: left;
}

.setting-row strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.08rem;
}

.setting-row span {
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: none;
}

.setting-pill {
  flex-shrink: 0;
}

.danger-row .setting-pill {
  color: #ff9b74;
}

.profile-card,
.friends-panel,
.friend-row,
.friend-empty-state {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(15, 21, 35, 0.94), rgba(10, 16, 28, 0.88));
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.profile-card::before,
.friends-panel::before,
.friend-row::before,
.friend-empty-state::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.06), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.03));
  pointer-events: none;
}

.profile-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
}

.profile-card-title,
.friends-panel-title {
  margin: 4px 0 0;
  font-size: clamp(1.15rem, 1.2vw + 1rem, 1.45rem);
}

.profile-card-copy,
.friends-panel-copy {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.profile-input-row,
.friend-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.friend-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) auto;
}

.text-input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(156, 184, 255, 0.12);
  background: rgba(10, 15, 26, 0.92);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.text-input:focus {
  border-color: rgba(132, 171, 255, 0.36);
  box-shadow: 0 0 0 4px rgba(90, 134, 255, 0.12);
}

.text-input::-webkit-outer-spin-button,
.text-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.small-action-button {
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(130, 165, 255, 0.98), rgba(78, 117, 255, 0.98));
  color: #081222;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 0 24px rgba(84, 136, 255, 0.22);
}

.friends-panel {
  margin-top: 4px;
  border-radius: 24px;
}

.friends-panel[open] {
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 28px rgba(160, 80, 255, 0.12);
}

.friends-panel-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  cursor: pointer;
}

.friends-panel-summary::-webkit-details-marker {
  display: none;
}

.friends-panel-summary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(22, 29, 46, 0.96);
  border: 1px solid rgba(156, 184, 255, 0.12);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #8fb1ff;
}

.friends-panel-content {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
}

.friends-list {
  display: grid;
  gap: 10px;
}

.friend-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
}

.friend-row-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, rgba(110, 151, 255, 0.82), rgba(212, 87, 255, 0.82));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 22px rgba(104, 143, 255, 0.16);
}

.friend-row-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.friend-row-copy strong {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-row-copy span {
  color: var(--muted);
  font-size: 0.92rem;
}

.friend-delete-button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(35, 18, 28, 0.9);
  border: 1px solid rgba(255, 148, 164, 0.18);
  color: #ffb4c3;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.friend-empty-state {
  padding: 16px;
  border-radius: 20px;
  text-align: center;
  color: var(--muted);
}

.segmented-control-rank .segmented-option {
  padding-inline: 12px;
}

.bottom-nav.is-hidden {
  display: none;
}

.screen-game {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(3, 9, 21, 0.98), rgba(1, 4, 12, 1));
}

#gameCanvas,
.game-touch-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#gameCanvas {
  display: block;
}

.game-touch-layer {
  cursor: pointer;
  z-index: 1;
  background: transparent;
  touch-action: none;
}

.game-hud {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 12px;
  pointer-events: none;
}

.game-hud .icon-button,
.game-hud .boost-button {
  pointer-events: auto;
}

.game-hud .spark-panel,
.game-hud .combo-spotlight {
  pointer-events: none;
}

.game-hud-top {
  top: calc(12px + var(--safe-top));
  left: calc(14px + var(--safe-left));
  right: calc(14px + var(--safe-right));
  align-items: center;
  justify-content: space-between;
}

.game-scoreboard {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-stat {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.hud-stat strong {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.hud-stat-scorecard {
  gap: 2px;
}

.hud-stat-subline {
  font-size: clamp(0.66rem, 1.2vw + 0.3rem, 0.88rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(227, 236, 255, 0.72);
}

.hud-chip-inline {
  padding: 10px 14px;
  min-height: 48px;
}

.icon-button {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(218, 228, 255, 0.92);
  color: #24344d;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}

.icon-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.game-hud-center {
  top: calc(17% + var(--safe-top));
  right: calc(16px + var(--safe-right));
  justify-content: flex-end;
}

.combo-card {
  min-width: clamp(92px, 20vw, 120px);
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(83, 20, 106, 0.84), rgba(54, 12, 71, 0.94));
  border: 1px solid rgba(255, 126, 255, 0.2);
  box-shadow: 0 0 32px rgba(205, 67, 255, 0.18);
  text-align: center;
}

.combo-card span {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  color: rgba(255, 222, 255, 0.8);
}

.combo-card strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.95;
  color: #ef85ff;
}

.game-hud-bottom {
  left: calc(14px + var(--safe-left));
  right: calc(14px + var(--safe-right));
  bottom: calc(28px + var(--safe-bottom));
  align-items: end;
  justify-content: space-between;
}

.spark-panel {
  flex: 1;
  max-width: calc(100% - 92px);
}

.spark-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.spark-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
}

.spark-icon {
  font-size: 1.2rem;
}

.spark-track {
  --flame-intensity: 0;
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 180, 0, 0.12);
  border: 1px solid rgba(255, 166, 0, 0.16);
  overflow: hidden;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.28);
}

.spark-track::after {
  content: '';
  position: absolute;
  inset: -8px 0 auto 0;
  height: 18px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 100%, rgba(255, 235, 160, calc(0.55 * var(--flame-intensity))) 0, rgba(255, 235, 160, 0) 48%),
    radial-gradient(circle at 30% 100%, rgba(255, 162, 67, calc(0.75 * var(--flame-intensity))) 0, rgba(255, 162, 67, 0) 52%),
    radial-gradient(circle at 52% 100%, rgba(255, 112, 61, calc(0.85 * var(--flame-intensity))) 0, rgba(255, 112, 61, 0) 54%),
    radial-gradient(circle at 72% 100%, rgba(255, 82, 49, calc(0.9 * var(--flame-intensity))) 0, rgba(255, 82, 49, 0) 52%),
    radial-gradient(circle at 88% 100%, rgba(255, 210, 108, calc(0.65 * var(--flame-intensity))) 0, rgba(255, 210, 108, 0) 48%);
  filter: blur(2px);
  transition: opacity 180ms ease;
}

.spark-track.spark-track-hot::after {
  opacity: 1;
}

.spark-fill {
  --flame-intensity: 0;
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 184, 64, 0.98), rgba(255, 215, 96, 0.98));
  box-shadow: 0 0 24px rgba(255, 169, 47, 0.36);
  transition: width 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.spark-fill.spark-fill-hot {
  background: linear-gradient(90deg, rgba(255, 172, 58, 0.98), rgba(255, 91, 48, 0.98), rgba(255, 48, 48, 0.98));
  box-shadow: 0 0 calc(22px + 18px * var(--flame-intensity)) rgba(255, 86, 36, calc(0.28 + 0.32 * var(--flame-intensity)));
}

.spark-fill.spark-fill-hot::after {
  content: '';
  position: absolute;
  inset: -10px 0 auto 0;
  height: 22px;
  background:
    radial-gradient(circle at 8% 100%, rgba(255, 241, 175, calc(0.35 + 0.35 * var(--flame-intensity))) 0, rgba(255, 241, 175, 0) 42%),
    radial-gradient(circle at 26% 100%, rgba(255, 184, 84, calc(0.32 + 0.45 * var(--flame-intensity))) 0, rgba(255, 184, 84, 0) 46%),
    radial-gradient(circle at 44% 100%, rgba(255, 121, 61, calc(0.4 + 0.45 * var(--flame-intensity))) 0, rgba(255, 121, 61, 0) 50%),
    radial-gradient(circle at 68% 100%, rgba(255, 76, 44, calc(0.42 + 0.48 * var(--flame-intensity))) 0, rgba(255, 76, 44, 0) 52%),
    radial-gradient(circle at 88% 100%, rgba(255, 210, 108, calc(0.28 + 0.35 * var(--flame-intensity))) 0, rgba(255, 210, 108, 0) 42%);
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: calc(0.35 + 0.65 * var(--flame-intensity));
}

.boost-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.spark-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-64%);
  min-width: 132px;
  max-width: 160px;
  padding: 7px 9px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 14, 28, 0.86);
  color: rgba(240, 246, 255, 0.94);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-align: center;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  transition: opacity var(--transition), transform var(--transition);
}

.spark-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: rgba(8, 14, 28, 0.92);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateX(-50%) rotate(45deg);
}

.spark-tooltip.hidden {
  opacity: 0;
  transform: translateX(-64%) translateY(6px);
  pointer-events: none;
}

.boost-button {
  width: 53px;
  height: 53px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(82, 135, 255, 0.96), rgba(45, 109, 235, 0.96));
  box-shadow: 0 0 34px rgba(73, 126, 255, 0.26), 0 16px 28px rgba(0, 0, 0, 0.34);
  transition: transform var(--transition), filter var(--transition), opacity var(--transition), box-shadow var(--transition), background var(--transition);
}

.boost-button svg {
  width: 24px;
  height: 24px;
  fill: #0d1c39;
  transition: fill var(--transition);
}

.boost-button:active {
  transform: scale(0.96);
}

.boost-button.disabled {
  opacity: 0.42;
  filter: grayscale(0.9) saturate(0.7);
}

.boost-button.is-ready {
  opacity: 1;
  filter: none;
  background: linear-gradient(180deg, rgba(255, 215, 92, 0.99), rgba(255, 138, 34, 0.99) 58%, rgba(255, 86, 30, 0.99));
  border: 1px solid rgba(255, 243, 185, 0.72);
  box-shadow: 0 0 0 4px rgba(255, 169, 61, 0.22), 0 0 22px rgba(255, 197, 86, 0.75), 0 0 42px rgba(255, 115, 43, 0.72), 0 18px 32px rgba(0, 0, 0, 0.38);
  animation: boost-ready-pulse 1.05s ease-in-out infinite;
}

.boost-button.is-ready svg {
  fill: #3d1700;
}

@keyframes boost-ready-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 4px rgba(255, 169, 61, 0.18), 0 0 18px rgba(255, 197, 86, 0.52), 0 0 34px rgba(255, 115, 43, 0.56), 0 18px 32px rgba(0, 0, 0, 0.38);
  }
  50% {
    transform: translateY(-1px) scale(1.08);
    box-shadow: 0 0 0 5px rgba(255, 169, 61, 0.28), 0 0 26px rgba(255, 214, 110, 0.9), 0 0 52px rgba(255, 112, 28, 0.84), 0 18px 34px rgba(0, 0, 0, 0.4);
  }
}

.tap-hint {
  position: absolute;
  left: 50%;
  bottom: calc(126px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 3;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(11, 18, 31, 0.84);
  border: 1px solid rgba(149, 176, 240, 0.16);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(223, 235, 255, 0.78);
  transition: opacity var(--transition), transform var(--transition);
}

.tap-hint.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.game-modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 5, 12, 0.78);
  backdrop-filter: blur(12px);
}

.game-modal.hidden {
  display: none;
}

.game-modal-card {
  width: min(100%, 420px);
  padding: 24px;
  border-radius: 28px;
  position: relative;
}

.pause-modal-card {
  padding-top: 56px;
}

.pause-modal-actions-top {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.pause-restart-button .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 24;
}

.pause-settings-button {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(25,39,72,0.96), rgba(12,19,37,0.98));
  box-shadow: 0 10px 24px rgba(4,8,18,0.36), 0 0 0 1px rgba(146,178,255,0.08) inset;
}

.pause-settings-button .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 24;
}

.game-modal-card h2 {
  margin: 8px 0 0;
  font-size: clamp(1.6rem, 3vw + 1rem, 2.3rem);
  line-height: 1.08;
}

.modal-kicker {
  margin: 0;
  color: #a9bfff;
}

.modal-kicker-warm {
  color: var(--orange);
  text-shadow: 0 0 20px rgba(255, 161, 44, 0.22);
}


.gameover-run-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

.gameover-run-stat {
  text-align: center;
  justify-items: center;
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 24px rgba(11, 15, 35, 0.22);
}

.gameover-run-stat span {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.86;
}

.gameover-run-stat strong {
  font-size: clamp(1.35rem, 2.4vw + 0.8rem, 1.9rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.gameover-run-stat-score {
  background: linear-gradient(135deg, rgba(255, 161, 44, 0.22), rgba(255, 123, 74, 0.16));
}

.gameover-run-stat-score strong,
.gameover-run-stat-score span {
  color: #ffd38f;
}

.gameover-run-stat-combo {
  background: linear-gradient(135deg, rgba(141, 108, 255, 0.24), rgba(71, 198, 255, 0.16));
}

.gameover-run-stat-combo strong,
.gameover-run-stat-combo span {
  color: #d6d0ff;
}
.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.result-stats div {
  display: grid;
  gap: 8px;
}

.gameover-card .leaderboard-card {
  margin-top: 20px;
  border-radius: 24px;
  padding: 14px;
}

.modal-actions,
.modal-actions-stack {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

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

.primary-button,
.secondary-button {
  min-height: 60px;
  padding: 0 20px;
  border-radius: 22px;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  transition: transform var(--transition), filter var(--transition), box-shadow var(--transition);
}

.primary-button {
  background: linear-gradient(180deg, #f06cff 0%, #c812f5 100%);
  color: #10061b;
  box-shadow: 0 0 30px rgba(214, 52, 255, 0.28);
}

.secondary-button {
  background: rgba(10, 15, 26, 0.92);
  color: #8faefc;
  border: 1px solid rgba(130, 165, 255, 0.24);
}

.primary-button:active,
.secondary-button:active {
  transform: scale(0.985);
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(118px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 12;
  min-width: 180px;
  max-width: min(92vw, 360px);
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(10, 15, 26, 0.92);
  border: 1px solid rgba(155, 177, 232, 0.16);
  box-shadow: var(--shadow-panel);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.toast.hidden {
  display: none;
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

@keyframes floatCube {
  0%, 100% { transform: translateY(0) rotate(42deg); }
  50% { transform: translateY(-18px) rotate(42deg) scale(1.03); }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.66; }
  50% { transform: scale(1.08); opacity: 0.82; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .app,
  .screen {
    padding-bottom: calc(92px + var(--safe-bottom));
  }

  .screen-home {
    display: none;
  }

  .screen-home.active {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: 18px;
  }

  .screen-home .screen-header {
    grid-column: 1 / -1;
  }

  .screen-home .home-hero {
    min-height: 0;
  }

  .screen-home .cta-card {
    align-self: center;
  }

  .screen-home .home-shortcuts {
    grid-column: 1 / -1;
  }

  .game-hud-center {
    top: calc(22% + var(--safe-top));
  }

  .game-hud-bottom {
    bottom: calc(24px + var(--safe-bottom));
  }

  .tap-hint {
    bottom: calc(104px + var(--safe-bottom));
  }

  .bottom-nav {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-item {
    min-height: 66px;
    gap: 4px;
  }

  .nav-item span {
    font-size: 0.72rem;
  }
}

@media (max-width: 420px) {
  .profile-input-row,
  .friend-form {
    grid-template-columns: 1fr;
  }

  .friends-panel-summary {
    align-items: flex-start;
  }

  .friend-row {
    grid-template-columns: auto 1fr;
  }

  .friend-delete-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 360px) {
  .status-pill {
    padding-inline: 14px;
  }

  .home-shortcuts {
    gap: 8px;
  }

  .shortcut-card {
    min-height: 98px;
    border-radius: 20px;
  }

  .bottom-nav {
    gap: 4px;
    padding-inline: 8px;
  }

  .nav-item {
    min-height: 76px;
    padding-inline: 4px;
  }

  .hud-stat strong {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
  }

  .boost-button {
    width: 48px;
    height: 48px;
  }

  .spark-tooltip {
    min-width: 126px;
    max-width: 146px;
    font-size: 0.62rem;
  }

  .result-stats {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    grid-template-columns: 1fr;
  }

  .shop-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .shop-meta {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* --- Stack - infinite Tower revisions --- */
.status-pill {
  align-items: center;
  text-align: center;
  min-width: clamp(128px, 24vw, 156px);
}

.status-pill strong {
  width: 100%;
  text-align: center;
}

.screen-home {
  justify-content: flex-start;
  gap: clamp(16px, 2.6vh, 28px);
}

.home-hero {
  flex: 0 0 auto;
  min-height: clamp(300px, 44vh, 430px);
  margin-top: clamp(8px, 2vh, 22px);
}

.hero-title {
  gap: 0.12em;
}

.hero-title .hero-subtitle {
  font-size: clamp(1.45rem, 4.4vw, 2.45rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: none;
  font-style: italic;
}

#startButton.cta-card {
  margin-top: clamp(-28px, -2.4vh, -12px);
}

.game-hud-center {
  right: calc(18px + var(--safe-right));
  top: calc(16% + var(--safe-top));
}

.combo-spotlight {
  display: grid;
  justify-items: end;
  gap: 4px;
  padding: 0;
  text-align: right;
  pointer-events: none;
  transform-origin: top right;
}

.combo-spotlight.hidden {
  display: none;
}

.combo-spotlight span {
  font-size: clamp(1.2rem, 4.2vw, 2.15rem);
  font-weight: 1000;
  line-height: 0.96;
  letter-spacing: 0.12em;
  color: #f06cff;
  text-shadow: 0 0 24px rgba(240, 108, 255, 0.55), 0 0 42px rgba(112, 64, 255, 0.36);
}

.combo-spotlight strong {
  font-size: clamp(1rem, 3.6vw, 1.75rem);
  font-weight: 900;
  line-height: 1;
  color: #d7c7ff;
  letter-spacing: 0.18em;
  text-shadow: 0 0 18px rgba(155, 172, 255, 0.42);
}

.combo-spotlight.combo-burst {
  animation: comboBurst 220ms ease-out;
}

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

.modal-actions.modal-actions-vertical {
  grid-template-columns: 1fr;
}

.modal-actions.modal-actions-vertical.gameover-actions {
  gap: 12px;
}

@keyframes comboBurst {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.9);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 420px) {
  .gameover-run-strip {
    grid-template-columns: 1fr;
  }

  .status-pill {
    min-width: 118px;
  }

  .home-hero {
    min-height: clamp(280px, 40vh, 380px);
  }

  #startButton.cta-card {
    margin-top: -12px;
  }

  .combo-spotlight span {
    font-size: clamp(1.05rem, 6vw, 1.55rem);
  }

  .combo-spotlight strong {
    font-size: clamp(0.95rem, 4.8vw, 1.2rem);
  }
}


.rank-summary-panel .summary-value span {
  width: 100%;
  text-align: center;
}

.rank-summary-panel .summary-value strong:empty::before {
  content: '0';
  opacity: 0.9;
}

.shop-screen-note-fix .summary-copy,
#shopScreen .summary-copy {
  min-height: 86px;
}

#shopScreen .summary-copy strong,
#shopScreen .summary-copy span {
  width: 100%;
  text-align: center;
}

.price-pill {
  color: #ffd84d;
  text-shadow: 0 0 10px rgba(255, 214, 77, 0.35);
}


.shop-top-tabs {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin: 2px 0 14px;
  padding: 6px;
}

.shop-top-tabs .segmented-option {
  flex: 1 1 0;
  text-align: center;
}

.shop-top-tabs .segmented-option:not(.active) {
  color: rgba(184, 198, 233, 0.88);
}


.generic-header {
  margin-bottom: 4px;
  align-items: center;
}

.generic-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.generic-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  color: #89a8ff;
  background: linear-gradient(180deg, rgba(20, 31, 54, 0.95), rgba(15, 24, 43, 0.98));
  border: 1px solid rgba(156, 184, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 10px 24px rgba(0,0,0,0.24);
  flex: 0 0 auto;
}

.generic-header-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.generic-header-title {
  font-size: clamp(1.15rem, 2vw + 0.8rem, 1.8rem);
  line-height: 1;
}

.rank-summary-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  min-height: 88px;
  padding: 12px 16px;
}

.rank-summary-panel .summary-value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  height: 60px;
  padding: 6px 10px;
  overflow: visible;
}

.rank-summary-panel .summary-value span {
  width: 100%;
  min-height: 16px;
  margin-bottom: 6px;
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.rank-summary-panel .summary-value strong {
  display: block;
  width: 100%;
  min-height: 26px;
  font-size: clamp(1.4rem, 1.8vw + 0.9rem, 2rem);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  opacity: 1;
  visibility: visible;
}

.rank-summary-panel .summary-divider {
  padding-left: 0;
  border-left: 1px solid rgba(255,255,255,0.08);
}


.game-hud-bottom {
  bottom: calc(42px + var(--safe-bottom));
  align-items: center;
}

.spark-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
}

.spark-row {
  margin-bottom: 8px;
}

.spark-track {
  overflow: visible;
  z-index: 1;
}

.spark-track::after {
  z-index: 3;
  inset: -16px 0 auto 0;
  height: 28px;
  filter: blur(1px);
  background:
    radial-gradient(circle at 8% 100%, rgba(255, 245, 175, calc(0.38 + 0.42 * var(--flame-intensity))) 0, rgba(255, 245, 175, 0) 38%),
    radial-gradient(circle at 22% 100%, rgba(255, 198, 84, calc(0.42 + 0.48 * var(--flame-intensity))) 0, rgba(255, 198, 84, 0) 42%),
    radial-gradient(circle at 38% 100%, rgba(255, 137, 61, calc(0.46 + 0.50 * var(--flame-intensity))) 0, rgba(255, 137, 61, 0) 46%),
    radial-gradient(circle at 56% 100%, rgba(255, 89, 45, calc(0.48 + 0.54 * var(--flame-intensity))) 0, rgba(255, 89, 45, 0) 48%),
    radial-gradient(circle at 74% 100%, rgba(255, 64, 39, calc(0.46 + 0.56 * var(--flame-intensity))) 0, rgba(255, 64, 39, 0) 46%),
    radial-gradient(circle at 92% 100%, rgba(255, 219, 108, calc(0.38 + 0.42 * var(--flame-intensity))) 0, rgba(255, 219, 108, 0) 38%);
  animation: sparkFlameRise 850ms ease-in-out infinite alternate;
}

.spark-track.spark-track-hot::after {
  opacity: calc(0.22 + 0.78 * var(--flame-intensity));
}

.spark-fill {
  z-index: 2;
}

.spark-fill.spark-fill-hot {
  background: linear-gradient(90deg, rgba(255, 174, 58, 0.98) 0%, rgba(255, 106, 44, 0.98) 54%, rgba(255, 58, 46, 0.99) 100%);
  box-shadow:
    0 0 calc(18px + 24px * var(--flame-intensity)) rgba(255, 96, 36, calc(0.26 + 0.34 * var(--flame-intensity))),
    0 0 calc(4px + 6px * var(--flame-intensity)) rgba(255, 214, 120, calc(0.28 + 0.28 * var(--flame-intensity))) inset;
}

.spark-fill.spark-fill-hot::after {
  z-index: 4;
  inset: -14px 0 auto 0;
  height: 30px;
  filter: blur(0.5px);
  background:
    radial-gradient(circle at 10% 100%, rgba(255, 247, 194, calc(0.26 + 0.48 * var(--flame-intensity))) 0, rgba(255, 247, 194, 0) 32%),
    radial-gradient(circle at 28% 100%, rgba(255, 205, 99, calc(0.30 + 0.56 * var(--flame-intensity))) 0, rgba(255, 205, 99, 0) 36%),
    radial-gradient(circle at 48% 100%, rgba(255, 146, 66, calc(0.34 + 0.60 * var(--flame-intensity))) 0, rgba(255, 146, 66, 0) 40%),
    radial-gradient(circle at 70% 100%, rgba(255, 90, 48, calc(0.34 + 0.62 * var(--flame-intensity))) 0, rgba(255, 90, 48, 0) 42%),
    radial-gradient(circle at 90% 100%, rgba(255, 232, 130, calc(0.26 + 0.46 * var(--flame-intensity))) 0, rgba(255, 232, 130, 0) 32%);
  animation: sparkFlameRise 700ms ease-in-out infinite alternate;
}

@keyframes sparkFlameRise {
  0% { transform: translateY(1px) scaleY(0.92); }
  100% { transform: translateY(-3px) scaleY(1.08); }
}

.rank-summary-panel {
  min-height: 76px;
}

.rank-summary-panel .summary-value {
  min-height: 50px;
  height: 50px;
}

.rank-summary-panel .summary-value span {
  min-height: 14px;
  margin-bottom: 4px;
}

.screen-home .screen-header {
  position: relative;
  justify-content: flex-start;
  min-height: 42px;
}

.screen-home .status-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 14px;
  gap: 0;
}

.screen-home .status-pill-label {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
}

.screen-home .status-pill strong {
  font-size: clamp(0.92rem, 1.3vw + 0.6rem, 1.18rem);
  line-height: 1.05;
  text-align: center;
}

@media (max-width: 640px) {
  .game-hud-bottom {
    bottom: calc(48px + var(--safe-bottom));
  }

  .screen-home .status-pill {
    min-width: 112px;
    padding: 5px 12px;
  }
}


.screen-home .screen-header.home-header {
  display: grid;
  grid-template-columns: auto minmax(88px, 100px) minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
}

.screen-home .status-pill {
  position: static;
  justify-self: center;
  align-self: start;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  transform: none;
  padding: 5px 8px;
  border-radius: 16px;
  margin-top: 0;
}

.screen-home .status-pill strong {
  font-size: clamp(0.88rem, 1vw + 0.62rem, 1.04rem);
}

.home-profile {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: fit-content;
  max-width: calc(15ch + 52px);
  padding: 6px 10px;
  border-radius: 18px;
  background: rgba(9, 18, 38, 0.54);
  border: 1px solid rgba(129, 164, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
}

.home-profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff8ea;
  background: linear-gradient(135deg, #ffd15c, #ff7a18);
  box-shadow: 0 0 16px rgba(255, 164, 45, 0.3);
}

.home-profile-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-profile-label {
  display: none;
}

#homeProfileName {
  display: block;
  width: 15ch;
  max-width: 15ch;
  font-size: 0.82rem;
  font-weight: 800;
  color: #f5f8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spark-track {
  overflow: hidden;
  background: rgba(255, 214, 92, 0.1);
  border: 1px solid rgba(255, 195, 52, 0.16);
}

.spark-track::after,
.spark-track.spark-track-hot::after,
.spark-fill.spark-fill-hot::after {
  content: none !important;
  animation: none !important;
}

.spark-fill,
.spark-fill.spark-fill-hot {
  background: linear-gradient(90deg, var(--spark-start, #ffe05a), var(--spark-end, #ffb22c));
  box-shadow: 0 0 18px rgba(255, 159, 44, 0.22);
}

@media (max-width: 640px) {
  .screen-home .screen-header.home-header {
    grid-template-columns: auto minmax(82px, 92px) minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 0;
    align-items: start;
  }

  .home-profile {
    max-width: calc(15ch + 46px);
    padding: 5px 8px;
    gap: 7px;
  }

  .home-profile-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.74rem;
  }

  #homeProfileName {
    width: 15ch;
    max-width: 15ch;
    font-size: 0.76rem;
  }

  .screen-home .status-pill {
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    padding: 4px 8px;
  }

  .screen-home .status-pill-label {
    letter-spacing: 0.16em;
    font-size: 0.56rem;
  }

  .screen-home .status-pill strong {
    font-size: 0.92rem;
  }
}


.screen-home .screen-header.home-header {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 10px;
}

.screen-home .brand-home {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
}

.screen-home .brand-home .brand-wordmark,
.screen-home .brand-home .brand-mark {
  display: none !important;
}

.brand-icon-image {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(120, 170, 255, 0.55)) drop-shadow(0 6px 14px rgba(72, 132, 255, 0.38));
}

.screen-home .status-pill {
  justify-self: center;
  align-self: center;
  margin-inline: auto;
}

.home-profile {
  justify-self: end;
}

@media (max-width: 640px) {
  .screen-home .screen-header.home-header {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 8px;
    align-items: center;
  }

  .screen-home .brand-home {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .brand-icon-image {
    width: 30px;
    height: 30px;
  }
}


.screen-home .screen-header.home-header {
  grid-template-columns: auto auto 1fr;
  position: relative;
}

.screen-home .status-pill {
  justify-self: start;
  margin-left: clamp(10px, 3vw, 22px);
}

.screen-home .brand-home {
  width: 52px;
  min-width: 52px;
  height: 52px;
}

.brand-icon-image {
  width: 40px;
  height: 40px;
}

.home-profile {
  max-width: calc(15ch + 58px);
}

.home-profile-meta {
  gap: 2px;
}

.home-profile-rank {
  display: block;
  width: 15ch;
  max-width: 15ch;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 221, 122, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coin-icon,
.price-pill::before,
.star-pack-price::before,
.star-pack-amount::before {
  color: #ffd84d;
}

@media (max-width: 640px) {
  .screen-home .screen-header.home-header {
    grid-template-columns: auto auto 1fr;
    column-gap: 6px;
    align-items: start;
  }

  .screen-home .brand-home {
    width: 46px;
    min-width: 46px;
    height: 46px;
  }

  .brand-icon-image {
    width: 36px;
    height: 36px;
  }

  .screen-home .status-pill {
    margin-left: clamp(6px, 2vw, 12px);
    width: 82px;
    min-width: 82px;
    max-width: 82px;
  }

  .home-profile {
    max-width: calc(15ch + 42px);
    padding: 5px 7px;
  }

  .home-profile-rank {
    font-size: 0.58rem;
  }
}

.star-pack-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 214, 77, 0.16);
  background: linear-gradient(180deg, rgba(15, 21, 35, 0.94), rgba(10, 16, 28, 0.88));
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(255,255,255,0.03);
}

.star-pack-copy {
  display: grid;
  gap: 6px;
}

.star-pack-title {
  font-size: 1rem;
  font-weight: 800;
  color: #f7fbff;
}

.star-pack-subtitle {
  font-size: 0.82rem;
  color: rgba(226, 235, 255, 0.66);
}

.star-pack-amount,
.star-pack-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.star-pack-amount::before,
.star-pack-price::before {
  content: '★';
  font-size: 0.98rem;
  text-shadow: 0 0 10px rgba(255, 214, 77, 0.65);
}

.star-pack-amount::before {
  content: '★';
}

.star-pack-price::before {
  content: '₺';
  color: #8ec5ff;
  text-shadow: none;
}

.star-pack-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.star-pack-buy {
  min-width: 94px;
  padding: 11px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(79,131,255,0.28), rgba(210,76,255,0.24));
  border: 1px solid rgba(164, 191, 255, 0.24);
  color: #edf3ff;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.shop-empty-card {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 156px;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid rgba(162,191,255,0.14);
  background: linear-gradient(180deg, rgba(15, 21, 35, 0.94), rgba(10, 16, 28, 0.88));
  color: rgba(225, 235, 255, 0.74);
  box-shadow: var(--shadow-panel);
}

@media (max-width: 640px) {
  .star-pack-card {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .star-pack-actions {
    justify-items: start;
  }
}


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

.star-pack-card {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 10px 12px;
  min-height: 176px;
  padding: 16px;
}

.star-pack-visual {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  min-height: 78px;
  display: grid;
  align-items: center;
}

.star-pile {
  position: relative;
  width: 100%;
  height: 72px;
}

.star-pile-star {
  position: absolute;
  color: #ffd84d;
  font-size: 1.55rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 214, 77, 0.45), 0 0 24px rgba(255, 176, 43, 0.18);
}
.star-pile-2 .star-pile-star-1 { left: 10%; top: 22px; }
.star-pile-2 .star-pile-star-2 { left: 32%; top: 8px; font-size: 1.8rem; }
.star-pile-3 .star-pile-star-1 { left: 6%; top: 26px; }
.star-pile-3 .star-pile-star-2 { left: 26%; top: 10px; font-size: 1.85rem; }
.star-pile-3 .star-pile-star-3 { left: 48%; top: 24px; }
.star-pile-4 .star-pile-star-1 { left: 2%; top: 30px; }
.star-pile-4 .star-pile-star-2 { left: 18%; top: 14px; font-size: 1.75rem; }
.star-pile-4 .star-pile-star-3 { left: 38%; top: 4px; font-size: 1.95rem; }
.star-pile-4 .star-pile-star-4 { left: 56%; top: 24px; }
.star-pile-5 .star-pile-star-1 { left: 0%; top: 32px; }
.star-pile-5 .star-pile-star-2 { left: 14%; top: 18px; }
.star-pile-5 .star-pile-star-3 { left: 30%; top: 4px; font-size: 2rem; }
.star-pile-5 .star-pile-star-4 { left: 49%; top: 18px; }
.star-pile-5 .star-pile-star-5 { left: 64%; top: 32px; }
.star-pile-6 .star-pile-star-1 { left: -2%; top: 34px; }
.star-pile-6 .star-pile-star-2 { left: 10%; top: 22px; }
.star-pile-6 .star-pile-star-3 { left: 24%; top: 8px; font-size: 1.8rem; }
.star-pile-6 .star-pile-star-4 { left: 42%; top: 2px; font-size: 2.05rem; }
.star-pile-6 .star-pile-star-5 { left: 58%; top: 18px; }
.star-pile-6 .star-pile-star-6 { left: 72%; top: 34px; }
.star-pile-7 .star-pile-star-1 { left: -2%; top: 36px; }
.star-pile-7 .star-pile-star-2 { left: 8%; top: 24px; }
.star-pile-7 .star-pile-star-3 { left: 20%; top: 12px; font-size: 1.8rem; }
.star-pile-7 .star-pile-star-4 { left: 36%; top: 0px; font-size: 2.1rem; }
.star-pile-7 .star-pile-star-5 { left: 52%; top: 12px; font-size: 1.8rem; }
.star-pile-7 .star-pile-star-6 { left: 66%; top: 24px; }
.star-pile-7 .star-pile-star-7 { left: 78%; top: 36px; }

.star-pack-details {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: grid;
  gap: 4px;
  align-self: end;
}

.star-pack-amount,
.star-pack-price {
  display: flex;
  align-items: center;
  gap: 6px;
}

.star-inline {
  color: #ffd84d;
  text-shadow: 0 0 10px rgba(255, 214, 77, 0.5);
}

.star-pack-amount::before,
.star-pack-price::before {
  content: none;
}

.star-pack-buy {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-width: 86px;
  height: 100%;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .shop-grid-stars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .star-pack-card {
    min-height: 164px;
    padding: 14px;
  }
  .star-pack-buy {
    min-width: 74px;
  }
  .star-pile-star { font-size: 1.35rem; }
  .star-pile-2 .star-pile-star-2,
  .star-pile-3 .star-pile-star-2,
  .star-pile-4 .star-pile-star-3,
  .star-pile-5 .star-pile-star-3,
  .star-pile-6 .star-pile-star-4,
  .star-pile-7 .star-pile-star-4 { font-size: 1.8rem; }
}



.shop-grid.shop-grid-stars {
  display: block;
}

.star-shop-template {
  display: grid;
  gap: 16px;
}

.star-shop-template-compact {
  padding-top: 4px;
}

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

.star-card-pack {
  position: relative;
  min-height: 258px;
  padding: 22px 18px 18px;
  border-radius: 28px;
  border: 1px solid rgba(119, 155, 255, 0.16);
  background: linear-gradient(180deg, rgba(16, 20, 29, 0.98), rgba(9, 12, 18, 0.98));
  box-shadow: 0 0 0 1px rgba(113, 156, 255, 0.05) inset, 0 16px 32px rgba(5, 8, 16, 0.34), 0 0 24px rgba(55, 107, 255, 0.12);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
}

.star-card-pack.premium {
  border-color: rgba(214, 99, 255, 0.3);
  box-shadow: 0 0 0 1px rgba(214, 99, 255, 0.08) inset, 0 16px 32px rgba(5, 8, 16, 0.34), 0 0 28px rgba(197, 92, 255, 0.18);
}

.star-card-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  padding: 5px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffc362, #f2a536);
  color: #311400;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.star-card-visual {
  width: 92px;
  height: 92px;
  position: relative;
  margin-top: 8px;
}

.star-card-shape {
  position: absolute;
  inset: auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  transform: rotate(45deg);
  box-shadow: 0 10px 22px rgba(28, 38, 79, 0.28);
}

.star-card-shape-a { left: 8px; top: 24px; }
.star-card-shape-b { left: 28px; top: 12px; opacity: 0.92; }
.star-card-shape-c { left: 42px; top: 30px; opacity: 0.78; }

.star-card-visual-sprout .star-card-shape-a { background: linear-gradient(135deg, #8ca9ff, #7b55ff); }
.star-card-visual-sprout .star-card-shape-b { background: linear-gradient(135deg, #7e66ff, #9a55ff); }
.star-card-visual-sprout .star-card-shape-c { background: linear-gradient(135deg, #54d1ff, #7ee6d8); }
.star-card-visual-satchel .star-card-shape-a { background: linear-gradient(135deg, #9ab3ff, #7f8aff); }
.star-card-visual-satchel .star-card-shape-b { background: linear-gradient(135deg, #7f8aff, #9ab3ff); }
.star-card-visual-satchel .star-card-shape-c { background: linear-gradient(135deg, #5e73d6, #7ea3ff); }
.star-card-visual-chest .star-card-shape-a { background: linear-gradient(135deg, #ffd78d, #ff9f5a); }
.star-card-visual-chest .star-card-shape-b { background: linear-gradient(135deg, #ff8566, #ff6742); }
.star-card-visual-chest .star-card-shape-c { background: linear-gradient(135deg, #f1c06c, #cf9835); }
.star-card-visual-vault .star-card-shape-a { background: linear-gradient(135deg, #e776ff, #ba55ff); }
.star-card-visual-vault .star-card-shape-b { background: linear-gradient(135deg, #ff6de4, #d65bff); }
.star-card-visual-vault .star-card-shape-c { background: linear-gradient(135deg, #a35eff, #6b5cff); }
.star-card-visual-meteor .star-card-shape-a { background: linear-gradient(135deg, #92fff3, #7fe3ff); }
.star-card-visual-meteor .star-card-shape-b { background: linear-gradient(135deg, #7fdfff, #57a8ff); }
.star-card-visual-meteor .star-card-shape-c { background: linear-gradient(135deg, #a3ffee, #7fd0c0); }
.star-card-visual-galaxy .star-card-shape-a { background: linear-gradient(135deg, #ffd07e, #ff9448); }
.star-card-visual-galaxy .star-card-shape-b { background: linear-gradient(135deg, #ff66dd, #8f63ff); }
.star-card-visual-galaxy .star-card-shape-c { background: linear-gradient(135deg, #65a4ff, #6a70ff); }

.star-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  text-align: center;
  color: #f2f5ff;
}

.star-card-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8ea9ff;
  font-size: 1.05rem;
  font-weight: 900;
}

.star-card-price {
  width: 100%;
  min-height: 38px;
  margin-top: auto;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.star-card-price:active {
  transform: scale(0.98);
}

@media (max-width: 640px) {
  .star-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .star-card-pack {
    min-height: 238px;
    padding: 18px 14px 14px;
    border-radius: 24px;
  }

  .star-card-visual {
    width: 86px;
    height: 86px;
  }

  .star-card-title {
    font-size: 0.9rem;
  }

  .star-card-amount {
    font-size: 0.95rem;
  }
}
@media (max-width: 640px) {
  .star-template-featured {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .star-template-featured-copy {
    text-align: center;
    justify-items: center;
  }

  .star-template-featured-copy p {
    max-width: 30ch;
  }

  .star-template-featured-visual {
    min-height: 170px;
  }

  .star-template-featured-bonus {
    right: 8px;
    bottom: 68px;
  }

  .star-template-grid {
    grid-template-columns: 1fr;
  }

  .star-template-pack {
    min-height: 146px;
  }

  .star-template-buy {
    min-width: 92px;
  }

  .star-template-ad {
    align-items: flex-start;
    flex-direction: column;
  }

  .star-template-ad-reward {
    align-self: flex-end;
  }
}


.shop-grid.shop-grid-stars {
  display: grid;
  gap: 18px;
}

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

.star-card-pack {
  position: relative;
  min-height: 218px;
  padding: 24px 18px 18px;
  border-radius: 24px;
  border: 1px solid rgba(110, 142, 255, 0.18);
  background: linear-gradient(180deg, rgba(16, 19, 27, 0.98), rgba(10, 13, 20, 0.98));
  box-shadow: 0 0 0 1px rgba(105, 146, 255, 0.05) inset, 0 0 28px rgba(70, 110, 255, 0.10);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
}
.star-card-pack.premium {
  border-color: rgba(225, 92, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(225, 92, 255, 0.06) inset, 0 0 28px rgba(225, 92, 255, 0.14);
}
.star-card-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f6ab44;
  color: #2b1400;
  font-size: 0.72rem;
  font-weight: 900;
}
.star-card-visual {
  width: 70px;
  height: 70px;
  margin-top: 18px;
  position: relative;
}
.star-card-shape {
  position: absolute;
  inset: auto;
  border-radius: 10px;
}
.star-card-visual-sprout .star-card-shape-a { left: 24px; top: 6px; width: 8px; height: 28px; background: #93aaff; }
.star-card-visual-sprout .star-card-shape-b { left: 16px; top: 0px; width: 20px; height: 16px; clip-path: polygon(50% 0%, 100% 30%, 70% 100%, 50% 78%, 30% 100%, 0% 30%); background: #93aaff; }
.star-card-visual-sprout .star-card-shape-c { left: 19px; top: 30px; width: 22px; height: 6px; border-radius: 999px; background: #93aaff; }
.star-card-visual-satchel .star-card-shape-a { left: 16px; top: 8px; width: 34px; height: 28px; border: 4px solid #93aaff; background: transparent; }
.star-card-visual-satchel .star-card-shape-b { left: 22px; top: 4px; width: 22px; height: 6px; border: 4px solid #93aaff; border-bottom: none; background: transparent; }
.star-card-visual-satchel .star-card-shape-c { left: 28px; top: 22px; width: 10px; height: 4px; border-radius: 2px; background: #93aaff; }
.star-card-visual-chest .star-card-shape-a { left: 16px; top: 14px; width: 36px; height: 28px; border: 4px solid #93aaff; background: transparent; }
.star-card-visual-chest .star-card-shape-b { left: 24px; top: 24px; width: 20px; height: 4px; background: #93aaff; border-radius: 2px; }
.star-card-visual-chest .star-card-shape-c { display:none; }
.star-card-visual-vault .star-card-shape-a { left: 16px; top: 2px; width: 36px; height: 12px; background: #da6dff; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.star-card-visual-vault .star-card-shape-b { left: 16px; top: 16px; width: 36px; height: 28px; background: transparent; border: 0; }
.star-card-visual-vault .star-card-shape-b::before, .star-card-visual-vault .star-card-shape-b::after { content:""; position:absolute; top:0; width:4px; height:26px; background:#da6dff; box-shadow: 10px 0 0 #da6dff, 20px 0 0 #da6dff; left:6px; }
.star-card-visual-vault .star-card-shape-c { left: 12px; top: 44px; width: 44px; height: 4px; background: #da6dff; border-radius: 2px; }
.star-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #f2f5ff;
  text-align: center;
}
.star-card-amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  font-weight: 900;
  color: #7ea0ff;
}
.star-card-price {
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  font-weight: 800;
  font-size: 0.96rem;
}
.star-template-ad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(16,19,27,0.98), rgba(10,13,20,0.98));
  color: #edf2ff;
}
.star-template-ad-left { display:flex; align-items:center; gap:14px; }
.star-template-ad-icon { width:30px; height:30px; display:grid; place-items:center; color:#b9c9ff; font-size:0.9rem; }
.star-template-ad-left strong { display:block; font-size:1rem; }
.star-template-ad-left span { display:block; font-size:0.86rem; color:rgba(255,255,255,0.72); }
.star-template-ad-reward { display:flex; align-items:center; gap:8px; color:#ffb44d; font-weight:900; }
.ad-reward-star { color:#ffb44d; }
.star-template-ad-chevron { color:rgba(255,255,255,0.72); font-size:1.45rem; line-height:1; margin-left:4px; }
.star-template-terms {
  margin: 8px auto 0;
  max-width: 92%;
  text-align: center;
  color: rgba(255,255,255,0.34);
  font-size: 0.56rem;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .star-card-grid { gap: 14px; }
  .star-card-pack { min-height: 210px; padding: 22px 16px 16px; }
  .star-card-visual { width: 64px; height: 64px; }
  .star-card-title { font-size: 0.92rem; }
  .star-card-amount { font-size: 0.98rem; }
  .star-template-ad { padding: 16px 18px; }
}


.shop-grid.shop-grid-stars {
  display: grid;
  gap: 18px;
  align-content: start;
}
.star-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.star-showcase-card {
  position: relative;
  min-height: 228px;
  padding: 24px 16px 18px;
  border-radius: 26px;
  border: 1px solid rgba(113, 146, 255, 0.16);
  background: linear-gradient(180deg, rgba(14,18,29,0.98), rgba(9,12,20,0.98));
  box-shadow: 0 0 0 1px rgba(90, 130, 255, 0.04) inset, 0 0 24px rgba(67, 112, 255, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.star-showcase-card.premium {
  border-color: rgba(214, 98, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(214,98,255,0.05) inset, 0 0 24px rgba(214,98,255,0.14);
}
.star-showcase-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: linear-gradient(180deg, #ffbf5f, #f2a63b);
  color: #281300;
  font-size: 0.72rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.star-showcase-icon {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 14px 0 30px;
  color: #93a9ff;
}
.star-showcase-card.premium .star-showcase-icon {
  color: #dd6dff;
}
.star-showcase-icon-part {
  position: absolute;
  display: block;
  box-sizing: border-box;
}
.star-showcase-icon-sprout .a {
  width: 8px; height: 24px; left: 33px; top: 18px; background: currentColor; border-radius: 8px;
}
.star-showcase-icon-sprout .b,
.star-showcase-icon-sprout .c {
  width: 22px; height: 16px; top: 8px; border: 4px solid currentColor; border-bottom: 0; border-radius: 20px 20px 0 20px; background: transparent;
}
.star-showcase-icon-sprout .b { left: 16px; transform: rotate(-35deg); }
.star-showcase-icon-sprout .c { right: 16px; transform: scaleX(-1) rotate(-35deg); }
.star-showcase-icon-sprout::after {
  content: ''; position: absolute; left: 22px; top: 46px; width: 30px; height: 6px; border-radius: 999px; background: currentColor;
}
.star-showcase-icon-satchel .a {
  left: 20px; top: 18px; width: 34px; height: 28px; border: 4px solid currentColor; border-radius: 10px; background: transparent;
}
.star-showcase-icon-satchel .b {
  left: 25px; top: 8px; width: 24px; height: 12px; border: 4px solid currentColor; border-bottom: 0; border-radius: 14px 14px 0 0; background: transparent;
}
.star-showcase-icon-satchel .c {
  left: 31px; top: 31px; width: 12px; height: 4px; border-radius: 2px; background: currentColor;
}
.star-showcase-icon-chest .a {
  left: 18px; top: 18px; width: 38px; height: 30px; border: 4px solid currentColor; border-radius: 8px; background: transparent;
}
.star-showcase-icon-chest .b {
  left: 28px; top: 30px; width: 18px; height: 4px; border-radius: 2px; background: currentColor;
}
.star-showcase-icon-chest .c { display:none; }
.star-showcase-icon-vault .a {
  left: 18px; top: 18px; width: 38px; height: 8px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.star-showcase-icon-vault .b {
  left: 22px; top: 27px; width: 30px; height: 24px; border-bottom: 4px solid currentColor; border-top: 4px solid currentColor; background: transparent;
}
.star-showcase-icon-vault .b::before,
.star-showcase-icon-vault .b::after {
  content: ''; position: absolute; top: 2px; bottom: 2px; width: 4px; background: currentColor;
}
.star-showcase-icon-vault .b::before { left: 6px; }
.star-showcase-icon-vault .b::after { right: 6px; }
.star-showcase-icon-vault .c {
  left: 35px; top: 29px; width: 4px; height: 18px; background: currentColor;
}
.star-showcase-title {
  margin: 0 0 10px;
  color: #f2f5ff;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.star-showcase-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #89a7ff;
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: auto;
}
.star-showcase-card.premium .star-showcase-amount { color: #e2a1ff; }
.star-showcase-price {
  width: 100%;
  height: 38px;
  margin-top: 18px;
  border-radius: 10px;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.9);
  font-weight: 800;
  font-size: 0.98rem;
  border: 1px solid rgba(255,255,255,0.03);
}
.star-showcase-ad {
  width: 100%;
  min-height: 72px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(110,142,255,0.10);
  background: linear-gradient(180deg, rgba(17,20,28,0.96), rgba(10,13,20,0.96));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.star-showcase-ad-left,
.star-showcase-ad-right { display: flex; align-items: center; gap: 12px; }
.star-showcase-ad-play {
  width: 26px; height: 26px; display:flex; align-items:center; justify-content:center; color:#d7deff; font-size:1rem;
}
.star-showcase-ad-copy strong {
  display:block; color:#f3f6ff; font-size:1rem; font-weight:800; margin-bottom:2px;
}
.star-showcase-ad-copy span {
  display:block; color:rgba(255,255,255,0.72); font-size:0.9rem; line-height:1.25;
}
.star-showcase-ad-right {
  color:#ffb44d; font-weight:900; white-space:nowrap;
}
.star-showcase-ad-arrow { color:rgba(255,255,255,0.7); font-size:1.5rem; line-height:1; margin-left:2px; }
.star-showcase-terms {
  margin: 4px auto 0;
  max-width: 92%;
  text-align: center;
  color: rgba(255,255,255,0.28);
  font-size: 0.56rem;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .star-showcase-grid { gap: 14px; }
  .star-showcase-card { min-height: 220px; padding: 22px 14px 16px; }
  .star-showcase-icon { width: 68px; height: 68px; margin: 10px 0 26px; }
  .star-showcase-ad { padding: 16px; }
  .star-showcase-ad-copy span { font-size: 0.84rem; }
}


.shop-grid.shop-grid-stars {
  display:block;
}
.luminous-star-shop {
  display:flex;
  flex-direction:column;
  gap:20px;
  color:#fff;
}
.lss-hero, .lss-watch-ad, .lss-card {
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
}
.lss-hero {
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:24px 18px;
  background:
    linear-gradient(135deg, rgba(88,28,135,0.2) 0%, rgba(30,58,138,0.2) 100%),
    rgba(255,255,255,0.03);
  box-shadow:0 0 15px rgba(192,38,211,0.1);
  border-color:rgba(192,38,211,0.3);
}
.lss-hero-orb { position:absolute; border-radius:999px; filter:blur(48px); pointer-events:none; }
.lss-hero-orb-a { width:96px; height:96px; top:-16px; right:-16px; background:rgba(147,51,234,0.26); }
.lss-hero-orb-b { width:120px; height:120px; bottom:-36px; left:-24px; background:rgba(59,130,246,0.18); }
.lss-hero-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.lss-pill {
  display:inline-flex; align-items:center; justify-content:center; padding:6px 12px;
  border-radius:999px; background:#c026d3; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
}
.lss-hero-copy h2 { margin:0; font-size:2rem; line-height:1.05; font-weight:700; }
.lss-hero-copy p { margin:8px auto 0; max-width:240px; font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.4; }
.lss-hero-pricing { display:flex; align-items:flex-end; gap:8px; }
.lss-hero-pricing strong { font-size:2rem; font-weight:700; }
.lss-hero-pricing span { font-size:1.1rem; color:rgba(255,255,255,.3); text-decoration:line-through; }
.lss-hero-visual { position:relative; padding:16px 0 10px; color:#e879f9; }
.lss-hero-star { width:80px; height:80px; filter:drop-shadow(0 0 15px rgba(192,38,211,0.5)); }
.lss-hero-bonus {
  position:absolute; right:-22px; bottom:0; background:#60a5fa; color:#000; font-size:.75rem; font-weight:700;
  padding:4px 8px; border-radius:8px; transform:rotate(-5deg); box-shadow:0 8px 20px rgba(96,165,250,.3);
}
.lss-buy-now {
  width:100%; padding:16px 18px; border:none; border-radius:12px; background:#2563eb; color:#fff; font-size:1.05rem; font-weight:700;
  box-shadow:0 0 20px rgba(37,99,235,.4); transition:background .2s ease, transform .2s ease;
}
.lss-buy-now:active { transform:scale(.98); }
.lss-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.lss-card {
  position:relative; border-radius:16px; padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.lss-card.has-badge { overflow:hidden; }
.lss-card.has-badge::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:#f97316; }
.lss-card-badge {
  position:absolute; top:4px; left:50%; transform:translateX(-50%); background:#f97316; color:#fff; border-radius:4px;
  padding:2px 6px; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.lss-card-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; margin-top:6px; }
.lss-card.has-badge .lss-card-icon { margin-top:18px; }
.lss-card-icon svg { width:48px; height:48px; }
.lss-card-icon.sprout, .lss-card-icon.satchel, .lss-card-icon.chest { color:#7ea0ff; }
.lss-card-icon.vault { color:#e879f9; }
.lss-card-copy { display:flex; flex-direction:column; gap:4px; }
.lss-card-title { margin:0; font-size:.95rem; font-weight:600; }
.lss-card-amount { margin:0; font-size:.78rem; font-weight:700; color:#60a5fa; display:flex; align-items:center; justify-content:center; gap:4px; }
.lss-card-amount span, .lss-watch-reward span { color:#facc15; filter:drop-shadow(0 0 8px rgba(255,215,0,.6)); }
.lss-card-price {
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  color:#fff; font-size:.9rem; font-weight:700;
}
.lss-watch-ad {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px;
  border-radius:24px; background:rgba(255,255,255,0.03);
}
.lss-watch-left, .lss-watch-right { display:flex; align-items:center; gap:12px; }
.lss-watch-icon {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.6);
}
.lss-watch-icon svg, .lss-watch-arrow { width:24px; height:24px; }
.lss-watch-copy p { margin:0; font-size:1rem; font-weight:700; }
.lss-watch-copy span { display:block; margin-top:2px; color:rgba(255,255,255,.4); font-size:.78rem; font-weight:500; }
.lss-watch-reward { display:flex; align-items:center; gap:6px; color:#facc15; font-weight:700; }
.lss-watch-arrow { color:rgba(255,255,255,.2); }
.lss-legal { padding:4px 0 8px; text-align:center; }
.lss-legal p { margin:0; color:rgba(255,255,255,.3); font-size:9px; text-transform:uppercase; letter-spacing:.12em; line-height:1.55; }
@media (max-width: 420px) {
  .lss-hero { padding:22px 16px; }
  .lss-hero-copy h2 { font-size:1.8rem; }
  .lss-grid { gap:14px; }
  .lss-card { padding:14px; }
}


.shop-grid.shop-grid-stars { display:block; }
.star-shop-page { display:grid; gap:16px; padding-bottom:8px; }
.glass-panel { background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; }
.glass-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; }
.neon-border-purple { border: 1px solid rgba(192,38,211,0.3); box-shadow: 0 0 15px rgba(192,38,211,0.1); }
.bg-hero-gradient { background: linear-gradient(135deg, rgba(88,28,135,0.2) 0%, rgba(30,58,138,0.2) 100%); }
.star-glow { filter: drop-shadow(0 0 8px rgba(255,215,0,0.6)); }
.star-shop-hero { position:relative; overflow:hidden; padding:24px; }
.star-shop-orb { position:absolute; border-radius:999px; filter: blur(40px); pointer-events:none; }
.star-shop-orb-a { width:120px; height:120px; top:-20px; right:-20px; background: rgba(192,38,211,0.2); }
.star-shop-orb-b { width:120px; height:120px; bottom:-24px; left:-24px; background: rgba(59,130,246,0.2); }
.star-shop-hero-inner { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.star-shop-pill { display:inline-flex; align-items:center; justify-content:center; min-height:26px; padding:0 12px; border-radius:999px; background:#c026d3; color:#fff; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; }
.star-shop-copy h2 { margin:0; font-size:clamp(1.9rem, 5vw, 2.35rem); line-height:1.0; font-weight:900; }
.star-shop-copy p { margin:10px 0 0; max-width:240px; color:rgba(255,255,255,0.6); font-size:.9rem; line-height:1.5; }
.star-shop-pricing { display:flex; align-items:stretch; gap:12px; }
.star-shop-price-main, .star-shop-price-compare { display:flex; align-items:center; justify-content:center; min-width:96px; min-height:50px; padding:0 14px; border-radius:14px; }
.star-shop-price-main { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); font-size:1.9rem; font-weight:900; }
.star-shop-price-compare { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.35); text-decoration: line-through; font-size:1.2rem; font-weight:800; }
.star-shop-visual { position:relative; padding:8px 0 12px; }
.star-shop-hero-star { width:88px; height:88px; color:#e879f9; filter: drop-shadow(0 0 15px rgba(192,38,211,0.5)); }
.star-shop-bonus { position:absolute; right:-16px; bottom:0; background:#60a5fa; color:#05070A; font-weight:900; font-size:.72rem; padding:4px 8px; border-radius:8px; transform: rotate(-5deg); box-shadow:0 8px 18px rgba(96,165,250,0.25); }
.star-shop-buy-now { width:100%; min-height:56px; border-radius:14px; background:#2563eb; box-shadow:0 0 20px rgba(37,99,235,0.4); font-size:1.05rem; font-weight:900; letter-spacing:.04em; }
.star-shop-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.star-pack-card { position:relative; padding:16px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius:16px; min-height:214px; }
.star-pack-card.best-value { overflow:hidden; }
.star-pack-card.best-value::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:#f97316; }
.star-pack-badge { position:absolute; top:6px; left:50%; transform:translateX(-50%); background:#f97316; color:#05070A; font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; padding:2px 5px; border-radius:4px; }
.star-pack-card.premium { color:#e879f9; }
.star-pack-icon { width:48px; height:48px; color:#8fb1ff; margin-top:2px; }
.star-pack-icon svg { width:100%; height:100%; display:block; }
.star-pack-card.premium .star-pack-icon { color:#e879f9; }
.star-pack-copy { display:grid; gap:6px; }
.star-pack-title { margin:0; color:#fff; font-size:.95rem; font-weight:700; }
.star-pack-amount { margin:0; color:#60a5fa; font-size:.82rem; font-weight:900; display:flex; align-items:center; justify-content:center; gap:5px; }
.star-pack-amount span { color:#facc15; filter: drop-shadow(0 0 6px rgba(250,204,21,0.55)); font-size:.7rem; }
.star-pack-price { width:100%; min-height:40px; margin-top:auto; border-radius:10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); font-size:.95rem; font-weight:900; color:#fff; }
.star-shop-watch-ad { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; background:linear-gradient(180deg, rgba(255,171,77,0.12), rgba(255,138,0,0.08)), rgba(255,255,255,0.04); border:1px solid rgba(255,171,77,0.28); border-radius:24px; box-shadow:0 0 24px rgba(255,171,77,0.16); }
.star-shop-watch-left, .star-shop-watch-right { display:flex; align-items:center; gap:14px; }
.star-shop-watch-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); }
.star-shop-watch-icon svg, .star-shop-watch-arrow { width:22px; height:22px; }
.star-shop-watch-copy p { margin:0; font-size:1rem; font-weight:800; color:#fff; }
.star-shop-watch-copy span { display:block; margin-top:3px; color:rgba(255,255,255,0.65); font-size:.78rem; font-weight:700; }
.star-shop-watch-reward { display:flex; align-items:center; gap:6px; color:#ffab4d; }
.star-shop-watch-reward strong { font-size:1.15rem; font-weight:900; }
.star-shop-watch-reward span { color:#ffab4d; filter: drop-shadow(0 0 7px rgba(255,171,77,0.6)); font-size:1.15rem; }
.star-shop-watch-arrow { color:rgba(255,255,255,0.3); }
.star-shop-legal { padding:4px 0 8px; text-align:center; }
.star-shop-legal p { margin:0; color:rgba(255,255,255,0.3); font-size:9px; text-transform:uppercase; letter-spacing:.12em; line-height:1.55; }
.bottom-nav .nav-item svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bottom-nav .nav-item.active svg { filter: drop-shadow(0 0 8px rgba(137,172,255,0.35)); }
@media (max-width: 420px) {
  .star-shop-hero { padding:20px 18px; }
  .star-shop-pricing { gap:8px; }
  .star-shop-price-main, .star-shop-price-compare { min-width:88px; min-height:46px; padding:0 12px; }
  .star-shop-price-main { font-size:1.7rem; }
  .star-shop-price-compare { font-size:1.05rem; }
  .star-pack-card { min-height:205px; padding:14px 12px; }
}


.star-shop-pill {
  background: linear-gradient(180deg, #ff3b30, #d6001c);
  box-shadow: 0 0 18px rgba(255, 49, 49, 0.45), 0 0 8px rgba(255, 118, 118, 0.35);
}
.star-shop-pricing {
  gap: 10px;
  align-items: center;
}
.star-shop-price-main,
.star-shop-price-compare {
  min-width: 84px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
}
.star-shop-price-main {
  font-size: 1.5rem;
}
.star-shop-price-compare {
  font-size: 0.98rem;
}
.star-shop-visual {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2px 0 8px;
}
.star-shop-hero-art {
  width: min(250px, 78vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(255, 169, 57, 0.18));
}
.star-shop-bonus {
  right: calc(50% - 122px);
  bottom: 2px;
}
.star-pack-card {
  min-height: 228px;
}
.star-pack-icon {
  width: 86px;
  height: 70px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  color: inherit;
}
.star-pack-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(255, 172, 44, 0.18));
}
.star-pack-card.premium .star-pack-icon img {
  filter: drop-shadow(0 10px 18px rgba(192, 38, 211, 0.14));
}
.star-pack-price {
  min-height: 34px;
  font-size: 0.82rem;
  border-radius: 10px;
  padding: 0 10px;
}
.star-shop-watch-ad {
  background: linear-gradient(180deg, rgba(255, 168, 76, 0.18), rgba(255, 120, 34, 0.12)), rgba(255,255,255,0.05);
  border-color: rgba(255, 168, 76, 0.38);
  box-shadow: 0 0 28px rgba(255, 168, 76, 0.2);
}
.star-shop-watch-icon {
  background: rgba(255, 168, 76, 0.12);
  border-color: rgba(255, 168, 76, 0.22);
  color: #ffcf88;
}
.star-shop-watch-copy p { font-weight: 900; }
.star-shop-watch-copy span { color: rgba(255, 236, 208, 0.75); }
@media (max-width: 420px) {
  .star-shop-price-main,
  .star-shop-price-compare {
    min-width: 78px;
    min-height: 40px;
    padding: 0 10px;
  }
  .star-shop-price-main { font-size: 1.38rem; }
  .star-shop-price-compare { font-size: 0.92rem; }
  .star-pack-card { min-height: 214px; }
  .star-pack-icon { width: 74px; height: 62px; }
}


.star-shop-pill {
  background: linear-gradient(180deg, #ff3b30 0%, #d70018 100%);
  box-shadow: 0 0 20px rgba(255, 35, 35, 0.55), 0 0 10px rgba(255, 92, 92, 0.45);
  border: 1px solid rgba(255,255,255,0.22);
}
.star-shop-pricing { gap: 8px; }
.star-shop-price-main,
.star-shop-price-compare {
  min-width: 72px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
}
.star-shop-price-main { font-size: 1.18rem; }
.star-shop-price-compare { font-size: 0.84rem; }
.star-pack-card {
  min-height: 236px;
  justify-content: space-between;
}
.star-pack-icon {
  width: 100px;
  height: 84px;
  margin-top: 6px;
}
.star-pack-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(255, 190, 70, 0.22));
}
.star-pack-price {
  min-height: 30px;
  max-width: 102px;
  width: 100%;
  margin-inline: auto;
  font-size: 0.78rem;
  border-radius: 9px;
  padding: 0 8px;
}
.star-shop-watch-ad {
  background: linear-gradient(180deg, rgba(255, 168, 76, 0.24), rgba(255, 120, 34, 0.16)), rgba(255,255,255,0.05);
  border-color: rgba(255, 168, 76, 0.48);
  box-shadow: 0 0 30px rgba(255, 168, 76, 0.24);
}
@media (max-width: 420px) {
  .star-pack-card { min-height: 226px; }
  .star-pack-icon { width: 90px; height: 76px; }
  .star-pack-price { max-width: 96px; }
}


.brand-game-icon { width: 46px; min-width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.game-brand-icon { width: 34px; height: 34px; }
.game-scoreboard-solo { margin-left: auto; margin-right: auto; }
.game-scoreboard-solo .hud-stat { min-width: 112px; }
@media (max-width: 640px) { .brand-game-icon { width: 42px; min-width: 42px; height: 42px; } .game-brand-icon { width: 30px; height: 30px; } .game-scoreboard-solo .hud-stat { min-width: 96px; } }


.star-shop-copy {
  display: grid;
  gap: 8px;
}
.star-shop-featured-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  color: #facc15;
  font-size: 1rem;
  font-weight: 900;
}
.star-shop-featured-amount span {
  color: #facc15;
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.6));
}
.star-shop-featured-amount strong {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.star-shop-hero-art {
  width: min(208px, 66vw);
}
.star-pack-card {
  min-height: 220px;
}
.star-pack-card.no-title {
  min-height: 198px;
}
.star-pack-card.no-title .star-pack-copy {
  gap: 0;
}
.star-pack-card.no-title .star-pack-price {
  margin-top: 0;
}
.star-pack-icon {
  width: 110px;
  height: 94px;
}
.star-pack-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 420px) {
  .star-shop-featured-amount {
    font-size: 0.95rem;
  }
  .star-pack-card {
    min-height: 208px;
  }
  .star-pack-card.no-title {
    min-height: 188px;
  }
  .star-pack-icon {
    width: 98px;
    height: 84px;
  }
}


.generic-header .hud-chip {
  gap: 7px;
  padding: 6px 10px;
  min-height: auto;
  border-radius: 18px;
  background: rgba(9, 18, 38, 0.54);
  border: 1px solid rgba(129, 164, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

.generic-header .hud-chip strong {
  min-height: 1em;
  font-size: 0.82rem;
  line-height: 1;
  color: #f5f8ff;
}

.generic-header .hud-chip .coin-icon {
  font-size: 0.9rem;
  filter: drop-shadow(0 0 6px rgba(255, 214, 77, 0.55));
}

.selection-pill.buyable,
.star-pack-buy,
.star-shop-buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  color: #fff8ee;
  background: linear-gradient(180deg, #ffab4d 0%, #f97316 100%);
  border: 1px solid rgba(255, 214, 170, 0.3);
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.selection-pill.buyable {
  color: #fff8ee;
}

.star-pack-buy {
  align-self: center;
}

.star-pack-buy:active,
.star-shop-buy-now:active,
.selection-pill.buyable:active {
  transform: scale(0.98);
}

.star-shop-page {
  gap: 14px;
  padding-bottom: 6px;
}

.shop-top-tabs .segmented-option {
  padding: 10px 12px;
  font-size: 0.72rem;
}

.star-shop-hero {
  padding: 16px 14px;
}

.star-shop-hero-inner {
  gap: 10px;
}

.star-shop-pill {
  min-height: 22px;
  padding: 0 10px;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
}

.star-shop-copy {
  width: 100%;
  justify-items: center;
  gap: 6px;
}

.star-shop-copy h2 {
  max-width: 100%;
  font-size: clamp(1.08rem, 3.4vw, 1.34rem);
  line-height: 1.02;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.star-shop-featured-amount {
  margin-top: 0;
  font-size: 0.9rem;
}

.star-shop-featured-amount strong {
  font-size: 0.98rem;
}

.star-shop-visual {
  padding: 0;
}

.star-shop-hero-art {
  width: min(170px, 52vw);
  filter: drop-shadow(0 12px 20px rgba(255, 169, 57, 0.15));
}

.star-shop-offer-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.star-shop-pricing {
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
}

.star-shop-price-main,
.star-shop-price-compare {
  min-width: 70px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
}

.star-shop-price-main {
  font-size: 1.08rem;
}

.star-shop-price-compare {
  font-size: 0.78rem;
}

.star-shop-buy-now {
  width: auto;
  min-width: 82px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  flex: 0 0 auto;
}

.star-shop-grid {
  gap: 12px;
}

.star-pack-card,
.star-pack-card.no-title {
  min-height: 182px;
  padding: 14px 12px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.star-pack-copy {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.star-pack-icon {
  width: 92px;
  height: 78px;
  margin-top: 0;
}

.star-pack-amount {
  margin: 0;
  font-size: 0.84rem;
}

.star-pack-meta {
  width: 100%;
  justify-content: space-between;
  gap: 8px;
  margin-top: 0;
}

.star-pack-money {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-shadow: none;
}

.star-pack-money::before {
  content: none;
}

.star-pack-meta .star-pack-buy {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  border-radius: 999px;
}

.avatar-shop-card {
  min-height: 180px;
}

.avatar-shop-placeholder {
  display: grid;
  gap: 10px;
}

.avatar-shop-placeholder strong {
  font-size: 1rem;
}

@media (max-width: 420px) {
  .generic-header .hud-chip {
    padding: 5px 9px;
    gap: 6px;
  }

  .generic-header .hud-chip strong {
    font-size: 0.76rem;
  }

  .star-shop-hero {
    padding: 14px 12px;
  }

  .shop-top-tabs .segmented-option {
    padding: 9px 10px;
    font-size: 0.68rem;
  }

  .star-shop-copy h2 {
    font-size: clamp(0.96rem, 4vw, 1.12rem);
  }

  .star-shop-hero-art {
    width: min(150px, 50vw);
  }

  .star-shop-offer-row {
    gap: 8px;
  }

  .star-shop-price-main,
  .star-shop-price-compare {
    min-width: 64px;
    min-height: 34px;
    padding: 0 9px;
  }

  .star-shop-price-main {
    font-size: 0.98rem;
  }

  .star-shop-price-compare {
    font-size: 0.72rem;
  }

  .star-shop-buy-now {
    min-width: 74px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.7rem;
  }

  .star-pack-card,
  .star-pack-card.no-title {
    min-height: 170px;
    padding: 12px 10px;
  }

  .star-pack-icon {
    width: 82px;
    height: 68px;
  }

  .star-pack-copy {
    gap: 8px;
  }

  .star-pack-meta {
    gap: 6px;
  }

  .star-pack-money,
  .star-pack-meta .star-pack-buy {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.68rem;
  }
}


.generic-header-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.generic-header-icon svg {
  width: 20px;
  height: 20px;
}

.shop-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), opacity var(--transition);
}

.shop-action-button.is-buy {
  color: #fff8ee;
  background: linear-gradient(180deg, #ffab4d 0%, #f97316 100%);
  border: 1px solid rgba(255, 214, 170, 0.3);
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.shop-action-button.is-owned {
  color: #eef4ff;
  background: linear-gradient(180deg, rgba(85, 127, 255, 0.32), rgba(39, 68, 150, 0.54));
  border: 1px solid rgba(152, 185, 255, 0.26);
  box-shadow: 0 10px 24px rgba(51, 92, 220, 0.18);
}

.shop-action-button.is-selected {
  color: rgba(237, 243, 255, 0.82);
  background: rgba(20, 28, 46, 0.96);
  border: 1px solid rgba(122, 147, 201, 0.22);
  box-shadow: none;
}

.shop-action-button:active:not(:disabled) {
  transform: scale(0.98);
}

.shop-action-button:disabled {
  opacity: 0.84;
}

.theme-shop-card {
  cursor: default;
}

.theme-card-meta,
.avatar-card-meta {
  width: 100%;
  justify-content: space-between;
  gap: 10px;
}

.theme-card-meta .price-pill,
.avatar-card-meta .price-pill {
  flex: 1 1 auto;
  min-width: 0;
}

.theme-card-meta .shop-action-button,
.avatar-card-meta .shop-action-button {
  flex: 0 0 auto;
}

.shop-grid.shop-grid-avatars {
  display: block;
}

.avatar-shop-page {
  display: grid;
  gap: 14px;
  padding-bottom: 6px;
}

.avatar-shop-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 16px;
  border-radius: 24px;
}

.avatar-shop-feature-copy {
  display: grid;
  gap: 8px;
}

.avatar-shop-feature-copy h2 {
  margin: 0;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
}

.avatar-shop-feature-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.avatar-collection-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-collection-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(17, 26, 42, 0.9);
  border: 1px solid rgba(144, 177, 255, 0.14);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(238, 244, 255, 0.86);
}

.avatar-shop-feature-preview {
  display: grid;
  place-items: center;
}

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

.avatar-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 244px;
  padding: 16px 14px 14px;
  border-radius: 24px;
  border: 1px solid rgba(162, 191, 255, 0.14);
  background: linear-gradient(180deg, rgba(15, 21, 35, 0.94), rgba(10, 16, 28, 0.88));
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(255,255,255,0.03);
}

.avatar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.06), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.03));
  pointer-events: none;
}

.avatar-card.selected {
  border-color: rgba(144, 177, 255, 0.26);
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(168, 196, 255, 0.08), 0 0 26px rgba(93, 129, 255, 0.12);
}

.avatar-card-preview-wrap {
  display: grid;
  place-items: center;
}

.avatar-card-copy {
  display: grid;
  gap: 6px;
}

.avatar-card-copy h3 {
  margin: 0;
  font-size: 1rem;
}

.avatar-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.46;
}

.avatar-frame {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 30% 24%, var(--avatar-a, #9ac0ff) 0%, var(--avatar-b, #547fff) 48%, var(--avatar-c, #122347) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 24px rgba(6, 9, 18, 0.34);
}

.avatar-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.avatar-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--avatar-ring, #b8d2ff);
  opacity: 0.4;
}

.avatar-frame-initials {
  position: relative;
  z-index: 1;
  color: #fff8ea;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.28);
}

.avatar-frame-image {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: cover;
  border-radius: calc(var(--avatar-radius, 22px) - 4px);
  z-index: 1;
  box-shadow: 0 8px 18px rgba(3, 8, 18, 0.28);
}

.avatar-frame-ornament {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(8, 13, 24, 0.86);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.58rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.26);
}

.home-profile-avatar.avatar-frame {
  width: 34px;
  height: 34px;
  font-size: 0.8rem;
}

.home-profile-avatar.avatar-frame .avatar-frame-initials {
  font-size: 0.8rem;
}

.leaderboard-avatar-frame {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
}

.leaderboard-avatar-frame .avatar-frame-initials {
  font-size: 0.9rem;
}

.avatar-frame-large {
  width: 72px;
  height: 72px;
}

.avatar-frame-large .avatar-frame-initials {
  font-size: 1rem;
}

.avatar-frame-card {
  width: 76px;
  height: 76px;
}

.avatar-frame-card .avatar-frame-initials {
  font-size: 1rem;
}

.star-pack-copy {
  gap: 12px;
}

.star-pack-amount {
  margin: 0 0 2px;
  gap: 6px;
  font-size: 0.9rem;
}

.star-pack-amount span {
  color: #ffd84d;
  text-shadow: 0 0 10px rgba(255, 214, 77, 0.56);
}

.star-pack-amount strong {
  font-size: 0.98rem;
  line-height: 1;
}

.star-pack-meta {
  align-items: center;
  margin-top: 2px;
}

.star-pack-meta .star-pack-buy,
.star-shop-buy-now {
  min-width: 78px;
}

@media (max-width: 420px) {
  .avatar-shop-feature {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .avatar-shop-feature-preview {
    justify-self: center;
  }

  .avatar-card {
    min-height: 228px;
    padding: 14px 12px 12px;
  }

  .avatar-frame-card {
    width: 68px;
    height: 68px;
  }

  .avatar-frame-card .avatar-frame-initials,
  .avatar-frame-large .avatar-frame-initials {
    font-size: 0.92rem;
  }

  .shop-action-button {
    min-width: 72px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.7rem;
  }

  .star-pack-copy {
    gap: 10px;
  }
}


.shop-grid.shop-grid-themes {
  display: block;
}

.avatar-frame {
  --avatar-radius: 18px;
  border-radius: var(--avatar-radius);
}

.home-profile-avatar.avatar-frame {
  --avatar-radius: 14px;
}

.leaderboard-avatar-frame {
  --avatar-radius: 18px;
}

.avatar-frame-large,
.avatar-frame-card {
  --avatar-radius: 22px;
}

.leaderboard-item.is-player {
  border-color: rgba(121, 171, 255, 0.3);
  box-shadow: 0 0 0 1px rgba(121, 171, 255, 0.12), var(--shadow-panel);
}

.theme-shop-page {
  display: grid;
  gap: 14px;
  padding-bottom: 6px;
}

.theme-shop-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 16px;
  border-radius: 24px;
}

.theme-shop-feature-copy {
  display: grid;
  gap: 8px;
}

.theme-shop-feature-copy h2 {
  margin: 0;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
}

.theme-shop-feature-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.theme-shop-feature-preview {
  display: grid;
  place-items: center;
}

.skin-preview-large {
  width: 122px;
  height: 122px;
}

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

.theme-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 244px;
  padding: 16px 14px 14px;
  border-radius: 24px;
  border: 1px solid rgba(162, 191, 255, 0.14);
  background: linear-gradient(180deg, rgba(15, 21, 35, 0.94), rgba(10, 16, 28, 0.88));
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(255,255,255,0.03);
}

.theme-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.06), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.03));
  pointer-events: none;
}

.theme-card.selected {
  border-color: rgba(144, 177, 255, 0.26);
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(168, 196, 255, 0.08), 0 0 26px rgba(93, 129, 255, 0.12);
}

.theme-card-preview-wrap {
  display: grid;
  place-items: center;
}

.theme-card-preview {
  width: 96px;
  height: 96px;
}

.theme-card-copy {
  display: grid;
  gap: 6px;
}

.theme-card-copy h3 {
  margin: 0;
  font-size: 1rem;
}

.theme-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.46;
}

.gameover-card {
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, rgba(7, 12, 24, 0.98), rgba(5, 9, 18, 0.98));
  border: 1px solid rgba(122, 150, 218, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255,255,255,0.05);
}

.gameover-hidden-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gameover-summary {
  display: grid;
  gap: 18px;
  padding: 24px 24px 18px;
  background:
    radial-gradient(circle at top center, rgba(255, 162, 70, 0.16), rgba(255, 162, 70, 0) 52%),
    linear-gradient(180deg, rgba(4, 9, 19, 0.92), rgba(7, 12, 24, 0.98));
}

.gameover-title {
  margin: 0;
  text-align: center;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 1000;
  line-height: 0.94;
  color: #ffab4d;
  letter-spacing: -0.05em;
  text-shadow: 0 0 22px rgba(255, 171, 77, 0.18);
}

.gameover-stats-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 20px;
  overflow: hidden;
  background: rgba(8, 14, 26, 0.92);
  border: 1px solid rgba(117, 145, 205, 0.12);
}

.gameover-stat {
  justify-items: center;
  text-align: center;
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: center;
  min-height: 84px;
  padding: 13px 12px;
}

.gameover-stat + .gameover-stat {
  justify-items: center;
  text-align: center;
  border-left: 1px solid rgba(117, 145, 205, 0.12);
}

.gameover-stat span {
  color: rgba(232, 239, 255, 0.56);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.gameover-stat-label-stack {
  display: inline-block;
  line-height: 1.05;
}

.gameover-stat strong {
  font-size: clamp(1.7rem, 4vw, 2.45rem);
  font-weight: 1000;
  line-height: 0.95;
  color: #f7fbff;
}

.gameover-stat-secondary strong {
  color: #94a7ff;
}

.gameover-reward-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255, 171, 77, 0.08);
  border: 1px solid rgba(255, 171, 77, 0.18);
  justify-self: center;
}

.gameover-reward-pill span {
  color: rgba(255, 229, 192, 0.74);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gameover-reward-pill strong {
  color: #ffd98a;
  font-size: 1rem;
  font-weight: 900;
}

.gameover-reward-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.gameover-reward-strip .gameover-reward-pill {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}


.gameover-actions {
  margin-top: 0;
  padding: 0 24px 24px;
}

.gameover-primary-action {
  width: 100%;
}

.gameover-watch-ad-button {
  width: 100%;
  min-height: 28px;
  height: 28px;
  padding: 4px 14px;
  border-radius: 14px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff5e8;
  background: linear-gradient(180deg, #ffb347 0%, #ff8a00 100%);
  border: 1px solid rgba(255, 196, 120, 0.95);
  box-shadow: 0 0 22px rgba(255, 140, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.22);
}

.gameover-watch-ad-button:hover,
.gameover-watch-ad-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(255, 140, 0, 0.52), inset 0 1px 0 rgba(255,255,255,0.26);
}

.gameover-watch-ad-button:disabled {
  opacity: 0.72;
  box-shadow: none;
}

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

@media (max-width: 420px) {
  .theme-shop-feature {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .theme-shop-feature-preview {
    justify-self: center;
  }

  .skin-preview-large {
    width: 108px;
    height: 108px;
  }

  .theme-card {
    min-height: 228px;
    padding: 14px 12px 12px;
  }

  .theme-card-preview {
    width: 86px;
    height: 86px;
  }

  .gameover-summary {
    padding: 22px 18px 16px;
  }

  .gameover-secondary-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .gameover-title {
    font-size: clamp(1.8rem, 7.2vw, 2.4rem);
  }

  .gameover-actions {
    padding: 0 18px 18px;
  }
}


.profile-header-shell {
  align-items: center;
  margin-bottom: 6px;
}

.profile-header-shell .generic-header-brand {
  opacity: 0.92;
}

.profile-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.profile-settings-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(157,193,255,0.2);
  background: linear-gradient(180deg, rgba(45,72,125,0.98), rgba(20,31,62,0.98));
  box-shadow: 0 16px 34px rgba(7,12,24,0.42), 0 0 0 1px rgba(137,172,255,0.1) inset, 0 0 16px rgba(100,146,255,0.18);
}
.profile-settings-button svg,
.profile-settings-button .material-symbols-outlined,
.profile-avatar-edit-badge svg,
.profile-settings-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-settings-button svg,
.profile-settings-button .material-symbols-outlined { color: #9cc0ff; }

.screen-profile {
  padding-bottom: 112px;
}

.profile-page {
  display: grid;
  gap: 18px;
  padding-bottom: 8px;
}

.profile-hero-card,
.profile-section-card,
.profile-stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(13,18,31,0.92), rgba(9,14,24,0.98));
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,0.03);
}

.profile-hero-card {
  display: grid;
  gap: 18px;
  padding: 28px 24px 22px;
  border-radius: 34px;
  position: relative;
}

.profile-hero-card::before,
.profile-section-card::before,
.profile-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 32%, transparent 72%, rgba(255,255,255,0.03));
  pointer-events: none;
}

.profile-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -12% -26% auto;
  width: 42%;
  height: 42%;
  background: radial-gradient(circle, rgba(218,94,255,0.18) 0%, rgba(218,94,255,0) 72%);
  filter: blur(16px);
  pointer-events: none;
}

.profile-hero-main {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.profile-avatar-shell {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
}

.profile-avatar-shell::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(127,169,255,0.14), rgba(210,76,255,0.14), rgba(255,171,77,0.12));
  filter: blur(14px);
  opacity: 0.85;
}

.profile-hero-avatar.avatar-frame,
.avatar-frame-large,
.avatar-frame-card,
.leaderboard-avatar-frame,
.home-profile-avatar.avatar-frame,
.friend-row-avatar {
  border-radius: 20px;
}

.profile-hero-avatar.avatar-frame {
  width: 118px;
  height: 118px;
  position: relative;
  z-index: 1;
}

.profile-avatar-edit-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #9fc0ff 0%, #7596ff 100%);
  color: #15203a;
  box-shadow: 0 10px 22px rgba(92,127,255,0.3);
  border: 3px solid rgba(7,12,24,0.92);
  z-index: 2;
}

.profile-hero-copy {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.profile-hero-copy h2 {
  margin: 0;
  font-size: clamp(2.1rem, 5.3vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.profile-level-pill,
.profile-mini-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(84,127,255,0.16);
  border: 1px solid rgba(126,163,255,0.24);
  color: #9dc1ff;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.profile-hero-rank {
  display: none;
}

.profile-xp-block {
  display: grid;
  gap: 10px;
}
.profile-xp-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226,232,255,0.72);
  font-weight: 900;
}
.profile-xp-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}
.profile-xp-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fa9ff, #d16bff);
  box-shadow: 0 0 20px rgba(120,164,255,0.24);
  transition: width var(--transition-slow);
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.profile-stat-card {
  display: grid;
  gap: 8px;
  min-height: 136px;
  padding: 18px;
  border-radius: 28px;
}
.profile-stat-value-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.profile-stat-inline-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
}
.profile-stat-inline-icon .material-symbols-outlined {
  font-size: 1.05rem;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 24;
}
.profile-stat-inline-icon-score {
  background: rgba(255,180,88,0.14);
  color: #ffb458;
  box-shadow: inset 0 0 0 1px rgba(255,180,88,0.16);
}
.profile-stat-inline-icon-balance {
  background: rgba(255, 212, 77, 0.16);
  color: #ffd44d;
  box-shadow: inset 0 0 0 1px rgba(255, 212, 77, 0.18);
}
.profile-stat-card p,
.profile-badge span,
.profile-activity-copy span {
  margin: 0;
  color: var(--muted);
}
.profile-stat-card p {
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.66rem;
  font-weight: 900;
}
.profile-stat-card strong {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.05em;
}
.profile-stat-card-score strong {
  color: #ffb458;
}
.profile-stat-card-balance strong {
  color: #ffd44d;
}
.profile-stat-card-cubes strong {
  color: #9db8ff;
}
.profile-stat-card-games strong {
  color: #ea71ff;
}
.profile-stat-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.profile-stat-card-cubes span,
.profile-stat-card-games span {
  position: relative;
  padding-left: 22px;
  font-size: 0.82rem;
  font-weight: 700;
}
.profile-stat-card-cubes span::before,
.profile-stat-card-games span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.9;
}
.profile-stat-card-cubes span { color: rgba(157,193,255,0.88); }
.profile-stat-card-games span { color: rgba(233,102,255,0.88); }

.profile-section-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
}
.profile-section-card-glow {
  box-shadow: var(--shadow-panel), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 24px rgba(198,78,255,0.14);
}
.profile-section-card-plain {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0 0 4px;
}
.profile-section-card-plain::before { display: none; }

.profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.profile-section-head h3 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.94rem;
}
.profile-link-button {
  background: none;
  border: 0;
  color: #8eb7ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profile-badges-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.profile-badge {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 6px 4px;
  text-align: center;
  background: transparent;
  border: 0;
}
.profile-badge.is-locked { opacity: 0.42; filter: grayscale(0.45); }
.profile-badge-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,171,77,0.18), rgba(255,171,77,0.05));
  color: #ffb762;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,171,77,0.18);
}
.profile-badge:nth-child(2) .profile-badge-icon {
  background: linear-gradient(180deg, rgba(233,102,255,0.18), rgba(233,102,255,0.05));
  color: #f08dff;
  box-shadow: inset 0 0 0 1px rgba(233,102,255,0.18);
}
.profile-badge:nth-child(3) .profile-badge-icon {
  background: linear-gradient(180deg, rgba(137,172,255,0.18), rgba(137,172,255,0.05));
  color: #a6c5ff;
  box-shadow: inset 0 0 0 1px rgba(137,172,255,0.18);
}
.profile-badge strong { font-size: 0.76rem; line-height: 1.1; text-transform: uppercase; }
.profile-badge span { font-size: 0.68rem; display: none; }

.profile-activity-list {
  display: grid;
  gap: 12px;
}
.profile-activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0 14px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
  border-left: 4px solid rgba(137,172,255,0.92);
}
.profile-activity-item.tone-secondary { border-left-color: rgba(233,102,255,0.92); }
.profile-activity-item.tone-tertiary { border-left-color: rgba(255,171,77,0.92); }
.profile-activity-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(126,162,255,0.12);
  color: #9bc0ff;
  font-weight: 900;
}
.profile-activity-item.tone-secondary .profile-activity-icon {
  background: rgba(233,102,255,0.12);
  color: #ea71ff;
}
.profile-activity-item.tone-tertiary .profile-activity-icon {
  background: rgba(255,171,77,0.12);
  color: #ffb45b;
}
.profile-activity-value {
  padding-right: 12px;
  color: #9dc1ff;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.profile-activity-item.tone-secondary .profile-activity-value { color: #ea71ff; }
.profile-activity-item.tone-tertiary .profile-activity-value { color: #ffb45b; }

.profile-settings-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  padding: 12px 0 118px;
}
.profile-settings-overlay.hidden {
  display: none;
}
.profile-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,8,14,0.62);
  backdrop-filter: blur(10px);
}
.profile-settings-panel {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 18px 18px 20px;
  margin: 0 10px;
  max-height: min(76vh, calc(100% - 24px));
  overflow: auto;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(12,18,30,0.98), rgba(8,13,22,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -12px 32px rgba(0,0,0,0.3), 0 20px 54px rgba(0,0,0,0.42);
}
.profile-settings-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.profile-settings-kicker {
  margin: 0 0 4px;
  color: rgba(157,193,255,0.68);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.profile-settings-panel-head h3 { margin: 0; font-size: 1.35rem; }
.profile-settings-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #d8e4ff;
}
.settings-list-profile { gap: 10px; }

.friend-row-avatar,
.leaderboard-avatar {
  border-radius: 20px;
}
.friend-row-avatar {
  overflow: hidden;
}
@media (max-width: 560px) {
  .gameover-reward-strip { gap: 8px; }
  .gameover-watch-ad-button { min-height: 26px; height: 26px; font-size: 0.7rem; padding: 3px 10px; }
  .profile-badges-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .profile-badge-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
  .profile-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-stat-card-wide {
    grid-column: 1 / -1;
  }
  .profile-hero-card {
    padding: 24px 18px 18px;
  }
  .profile-section-head {
    align-items: center;
  }
  .profile-activity-item {
    grid-template-columns: auto minmax(0,1fr) auto;
  }
  .profile-activity-value {
    grid-column: auto;
    font-size: 0.92rem;
  }
}

.leaderboard-avatar-frame,
.friend-row-avatar,
.home-profile-avatar.avatar-frame,
.profile-hero-avatar.avatar-frame,
.avatar-frame-large,
.avatar-frame-card {
  border-radius: 18px;
}


.profile-header-shell {
  min-height: 52px;
  margin-bottom: 12px;
}
.profile-header-spacer {
  flex: 1 1 auto;
  min-width: 44px;
}
.profile-header-actions {
  margin-left: auto;
}
.profile-header-shell .hud-chip {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 15px;
  background: rgba(15, 26, 52, 0.82);
  border: 1px solid rgba(133, 164, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.03);
}
.profile-settings-button {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30,45,92,0.96), rgba(17,26,52,0.98));
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), 0 0 0 1px rgba(145,178,255,0.12) inset, 0 0 18px rgba(131,163,255,0.18);
}
.profile-settings-button svg { color: #d9e6ff; }
.profile-page {
  gap: 16px;
}
.profile-hero-card {
  padding: 24px 22px 20px;
  border-radius: 32px;
  gap: 16px;
}
.profile-hero-card::after {
  inset: auto -8% -22% auto;
  width: 46%;
  height: 46%;
  background: radial-gradient(circle, rgba(202,91,255,0.22) 0%, rgba(202,91,255,0) 72%);
}
.profile-avatar-shell::before {
  inset: -10px;
  border-radius: 34px;
  background: radial-gradient(circle at 50% 50%, rgba(223,108,255,0.3), rgba(127,169,255,0.12) 55%, rgba(127,169,255,0.02) 72%);
  filter: blur(18px);
}
.profile-hero-avatar.avatar-frame {
  width: 110px;
  height: 110px;
  border-radius: 26px;
  box-shadow: 0 18px 34px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.profile-avatar-edit-badge {
  right: 4px;
  bottom: 4px;
  width: 28px;
  height: 28px;
  border-width: 2px;
}
.profile-hero-copy { gap: 8px; }
.profile-hero-copy h2 {
  font-size: clamp(2.35rem, 6vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.055em;
}
.profile-level-pill {
  min-height: 32px;
  padding: 0 16px;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: #bfd3ff;
  background: rgba(72,100,176,0.28);
  border-color: rgba(140,169,255,0.18);
}
.profile-xp-block { gap: 8px; }
.profile-xp-head { font-size: 0.72rem; }
.profile-xp-track { height: 9px; background: rgba(113,132,180,0.2); }
.profile-xp-fill { background: linear-gradient(90deg, #7ea2ff, #bb86ff); }
.profile-stats-grid { gap: 12px; }
.profile-stat-card {
  min-height: 128px;
  padding: 20px 18px 18px;
  border-radius: 26px;
}
.profile-stat-card-wide { min-height: 118px; }
.profile-stat-card p { font-size: 0.67rem; color: rgba(224,231,255,0.68); }
.profile-stat-card strong { font-size: clamp(2rem, 7vw, 2.8rem); }
.profile-stat-card-score strong { font-size: clamp(2.25rem, 8vw, 3rem); }
.profile-stat-card-cubes span,
.profile-stat-card-games span {
  padding-left: 20px;
  font-size: 0.86rem;
  font-weight: 800;
}
.profile-stat-emblem {
  width: 36px;
  height: 36px;
  border-radius: 14px 14px 18px 18px;
  color: rgba(255,185,96,0.88);
}
.profile-section-card {
  padding: 18px 16px 16px;
  border-radius: 26px;
}
.profile-section-head h3 {
  font-size: 0.98rem;
  letter-spacing: 0.16em;
}
.profile-link-button {
  font-size: 0.74rem;
  color: #9bb8ff;
}
.profile-section-card-glow {
  box-shadow: var(--shadow-panel), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 26px rgba(215,85,255,0.16);
}
.profile-badges-grid {
  gap: 10px;
  padding: 4px 2px 0;
}
.profile-badge { gap: 10px; padding: 8px 4px 2px; }
.profile-badge-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-size: 1.45rem;
}
.profile-badge:nth-child(1) .profile-badge-icon {
  background: linear-gradient(180deg, rgba(255,171,77,0.22), rgba(255,171,77,0.06));
  color: #ffb458;
}
.profile-badge:nth-child(2) .profile-badge-icon {
  background: linear-gradient(180deg, rgba(217,102,255,0.22), rgba(217,102,255,0.06));
  color: #ea71ff;
}
.profile-badge:nth-child(3) .profile-badge-icon {
  background: linear-gradient(180deg, rgba(138,169,255,0.22), rgba(138,169,255,0.06));
  color: #9ec0ff;
}
.profile-badge strong {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: #f3f6ff;
  white-space: pre-line;
}
.profile-activity-list { gap: 12px; }
.profile-activity-item {
  min-height: 88px;
  border-left-width: 4px;
  border-radius: 0 22px 22px 0;
  padding: 16px 16px 16px 14px;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}
.profile-activity-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.profile-activity-copy strong {
  font-size: 1.05rem;
  line-height: 1.15;
}
.profile-activity-copy span {
  font-size: 0.92rem;
  color: rgba(219,225,244,0.68);
}
.profile-activity-value {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.profile-settings-overlay {
  inset: 0;
  padding: 14px 12px 108px;
  align-items: end;
}
.profile-settings-panel {
  margin: 0;
  max-width: 100%;
  width: 100%;
  max-height: min(68vh, calc(100% - 20px));
  border-radius: 26px;
}
.bottom-nav .nav-item .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}
.bottom-nav .nav-item.active .material-symbols-outlined {
  filter: drop-shadow(0 0 8px rgba(137,172,255,0.35));
}
@media (min-width: 430px) {
  .profile-page { gap: 18px; }
}


.bottom-nav {
  background: linear-gradient(180deg, rgba(10,17,31,0.8), rgba(7,12,24,0.9));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(132, 162, 255, 0.14);
  box-shadow: 0 16px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
}
.home-profile {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.screen-profile { padding-bottom: 118px; }
.profile-header-actions { display:flex; align-items:center; gap:12px; }
.profile-settings-button {
  width: 54px; height:54px; border-radius:20px;
  background: linear-gradient(180deg, rgba(33,51,104,0.98), rgba(18,29,61,0.98));
  box-shadow: 0 16px 34px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(167,193,255,0.16), 0 0 24px rgba(132,166,255,0.22);
}
.profile-page { gap: 18px; }
.profile-hero-card { padding: 22px 22px 20px; }
.profile-hero-main-split {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 18px;
  text-align: left;
}
.profile-hero-copy-left { justify-items: start; text-align:left; }
.profile-name-row { display:flex; align-items:center; gap:8px; min-width:0; }
.profile-name-row h2 { font-size: clamp(1.95rem, 5.8vw, 2.55rem); }
.profile-name-edit-button {
  width: 34px; height: 34px; display:grid; place-items:center; border-radius: 12px;
  background: rgba(98,127,255,0.12); border:1px solid rgba(135,165,255,0.16); color:#b7cbff;
  flex:0 0 auto;
}
.profile-name-edit-button .material-symbols-outlined { font-size:18px; font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 20; }
.profile-user-code {
  margin: 0; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(190,206,255,0.68);
}
.profile-user-code span { color:#dfe8ff; }
.profile-avatar-shell { justify-self: start; }
.profile-avatar-shell::before { border-radius: 30px; }
.profile-hero-avatar.avatar-frame { width: 100px; height: 100px; border-radius: 22px; }
.profile-stat-topline-score { justify-content: flex-start; align-items:flex-start; position: relative; padding-right: 54px; }
.profile-stat-card-score { padding-right: 18px; }
.profile-stat-card-score .profile-stat-emblem-premium {
  position:absolute; right:4px; top:-2px; width:auto; height:auto; background:none; box-shadow:none; color:#c18a39;
}
.profile-stat-card-score .profile-stat-emblem-premium .material-symbols-outlined { font-size: 34px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 40; }
.profile-stat-card-score strong { margin-top: 10px; }
.profile-stat-card-score p, .profile-stat-card-score strong { padding-left: 4px; }
.profile-link-static { pointer-events:none; opacity:0.8; }
.profile-friends-panel { border-radius: 28px; }
.profile-friends-panel .friends-panel-summary-copy { display:grid; gap:6px; }
.profile-friends-panel .friends-panel-summary-copy h3 { margin:0; text-transform:uppercase; letter-spacing:0.14em; font-size:0.94rem; }
.profile-section-card-activity { gap: 14px; }
.profile-activity-list { gap: 14px; }
.profile-activity-item {
  position: relative; overflow:hidden; min-height: 86px; padding: 14px 16px 14px 14px; border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(90deg, rgba(132,165,255,0.08) 0%, rgba(255,255,255,0.02) 38%, rgba(255,255,255,0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.profile-activity-item::before {
  content: ""; position:absolute; inset: 8px auto 8px 0; width: 8px; border-radius: 0 18px 18px 0;
  background: linear-gradient(180deg, rgba(132,165,255,0.95), rgba(132,165,255,0.35));
  box-shadow: 0 0 18px rgba(132,165,255,0.32);
}
.profile-activity-item.tone-secondary::before {
  background: linear-gradient(180deg, rgba(233,102,255,0.95), rgba(233,102,255,0.35));
  box-shadow: 0 0 18px rgba(233,102,255,0.32);
}
.profile-activity-item.tone-tertiary::before {
  background: linear-gradient(180deg, rgba(255,171,77,0.95), rgba(255,171,77,0.35));
  box-shadow: 0 0 18px rgba(255,171,77,0.32);
}
.profile-activity-icon {
  background: rgba(110,138,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.profile-activity-copy strong { font-size: 0.98rem; }
.profile-activity-copy span { font-size: 0.88rem; }
.profile-activity-value { font-size: 1.45rem; }
.profile-settings-overlay,
.profile-name-overlay {
  position: absolute; inset: 0; z-index: 80; display:grid; place-items:center; padding: 18px 14px 116px;
}
.profile-settings-overlay.hidden,
.profile-name-overlay.hidden { display:none; }
.profile-settings-panel,
.profile-name-panel {
  position: relative; width: min(100%, 360px); max-height: min(68vh, calc(100% - 20px)); overflow:auto; margin:0;
  border-radius: 28px; background: linear-gradient(180deg, rgba(12,18,30,0.98), rgba(8,13,22,0.98));
  border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.profile-settings-panel { padding: 18px 18px 20px; display:grid; gap:16px; }
.profile-name-panel { padding: 18px; display:grid; gap:14px; }
.profile-name-form { display:grid; gap:12px; }
.friend-row-avatar.avatar-frame { width: 46px; height:46px; border-radius: 14px; }
.leaderboard-avatar-frame,
.home-profile-avatar.avatar-frame,
.profile-hero-avatar.avatar-frame,
.avatar-frame-large,
.avatar-frame-card,
.friend-row-avatar.avatar-frame { border-radius: 18px; }
@media (max-width: 560px) {
  .profile-hero-main-split { grid-template-columns: 86px minmax(0, 1fr); gap: 14px; }
  .profile-hero-avatar.avatar-frame { width: 86px; height:86px; border-radius: 20px; }
  .profile-name-row h2 { font-size: 1.8rem; }
  .profile-activity-value { font-size: 1.16rem; }
}


.screen-home .home-profile {
  padding: 6px 10px;
  border-radius: 18px;
  background: rgba(9, 18, 38, 0.54);
  border: 1px solid rgba(129, 164, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
}
.top-profile-button {
  max-width: calc(15ch + 52px);
  padding: 5px 9px;
  border-radius: 17px;
  background: rgba(10, 17, 35, 0.74);
  border: 1px solid rgba(126, 160, 255, 0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  backdrop-filter: blur(12px);
}
.top-profile-button .home-profile-avatar.avatar-frame {
  width: 32px;
  height: 32px;
  --avatar-radius: 12px;
}
.top-profile-button .home-profile-meta strong {
  width: 13ch;
  max-width: 13ch;
  font-size: 0.78rem;
}
.top-profile-button .home-profile-rank {
  font-size: 0.62rem;
}
.profile-header-shell {
  min-height: 52px;
  margin-bottom: 12px;
}
.profile-header-actions { margin-left: auto; }
.profile-hero-main.profile-hero-main-split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 18px;
  text-align: left;
}
.profile-avatar-shell { align-self: start; }
.profile-hero-copy,
.profile-hero-copy-left {
  justify-items: start;
  align-items: start;
  text-align: left;
  width: 100%;
}
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-name-edit-button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(186, 207, 255, 0.86);
}
.profile-name-edit-button .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 18;
}
.profile-user-code-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-user-code {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-code-copy-button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(170, 194, 255, 0.82);
}
.profile-code-copy-button .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 18;
}
.profile-stat-card-score {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.profile-stat-card-score p,
.profile-stat-card-score strong {
  grid-column: 1;
}
.profile-stat-card-score .profile-stat-topline { align-self: center; }
.profile-stat-card-score .profile-stat-emblem-premium {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 48px;
  height: 72px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 181, 88, 0.92);
}
.profile-stat-card-score .profile-stat-emblem-premium .material-symbols-outlined {
  font-size: 42px;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
}
.profile-activity-list {
  display: grid;
  gap: 14px;
  max-height: 248px;
  overflow-y: auto;
  padding-right: 6px;
}
.profile-activity-list::-webkit-scrollbar {
  width: 6px;
}
.profile-activity-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(137,172,255,0.28);
}
.profile-activity-item {
  position: relative;
  overflow: hidden;
  padding: 14px 14px 14px 16px;
  border-left: 0;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(101, 127, 255, 0.14), rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.profile-activity-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: rgba(137,172,255,0.95);
  box-shadow: 0 0 18px rgba(137,172,255,0.5);
}
.profile-activity-item.tone-secondary {
  background: linear-gradient(90deg, rgba(233,102,255,0.14), rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.02));
}
.profile-activity-item.tone-secondary::before { background: rgba(233,102,255,0.95); box-shadow: 0 0 18px rgba(233,102,255,0.45); }
.profile-activity-item.tone-tertiary {
  background: linear-gradient(90deg, rgba(255,171,77,0.16), rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.02));
}
.profile-activity-item.tone-tertiary::before { background: rgba(255,171,77,0.96); box-shadow: 0 0 18px rgba(255,171,77,0.44); }
.bottom-nav {
  background: rgba(6, 12, 26, 0.74);
  border: 1px solid rgba(126, 160, 255, 0.14);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.leaderboard-item {
  position: relative;
  overflow: hidden;
}
.leaderboard-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: rgba(255,255,255,0.08);
}
.leaderboard-item[data-rank="1"]::after { background: #ffae51; }
.leaderboard-item[data-rank="2"]::after { background: #e357ff; }
.leaderboard-item[data-rank="3"]::after { background: #7da5ff; }

.leaderboard-item.is-pinned-player {
  background: linear-gradient(180deg, rgba(255, 108, 108, 0.98), rgba(195, 30, 48, 0.96));
  border-color: rgba(255, 185, 185, 0.45);
  box-shadow: 0 14px 30px rgba(108, 10, 22, 0.34);
}
.leaderboard-item.is-pinned-player::after { background: rgba(255, 255, 255, 0.24); }
.leaderboard-item.is-pinned-player .leaderboard-position,
.leaderboard-item.is-pinned-player .leaderboard-score {
  color: #ffd4d8;
}
@media (max-width: 560px) {
  .profile-hero-main.profile-hero-main-split {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
  }
  .profile-hero-avatar.avatar-frame {
    width: 86px;
    height: 86px;
  }
}


html, body, #app, .app {
  background-color: #02050d;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
  html, body, #app, .app {
    background-color: #02050d;
  }
}

.screen-home .home-header {
  align-items: center;
}

.top-profile-button,
.screen-home .home-profile {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  overflow: hidden;
}

.top-profile-button .home-profile-meta strong,
.screen-home #homeProfileName {
  display: block;
  line-height: 1.05;
}

.top-profile-button .home-profile-rank,
.screen-home .home-profile-rank {
  display: block;
  line-height: 1.05;
}

.profile-header-actions {
  gap: 0;
}

.profile-header-shell {
  min-height: 54px;
}

.profile-page {
  padding-top: 2px;
}

.profile-stats-grid {
  align-items: stretch;
}

.profile-stat-card-score,
.profile-stat-card-balance {
  min-height: 148px;
}

.profile-stat-card-score {
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: 10px;
}

.profile-stat-card-score .profile-stat-topline {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.profile-stat-card-score .profile-stat-value-row {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}

.profile-stat-card-score strong,
.profile-stat-card-balance strong {
  display: block;
  min-width: 0;
  line-height: 0.95;
  white-space: nowrap;
}

.profile-stat-card-score strong {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.profile-stat-card-balance strong {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
}

.profile-stat-card-score .profile-stat-emblem-premium {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 54px;
  height: 100%;
  display: grid;
  place-items: center;
  align-self: center;
}

.profile-stat-card-score .profile-stat-emblem-premium .material-symbols-outlined {
  font-size: 48px;
  line-height: 1;
}

@media (max-width: 560px) {
  .profile-stat-card-score,
  .profile-stat-card-balance {
    min-height: 128px;
  }
  .profile-stat-card-score strong {
    font-size: clamp(1.85rem, 10vw, 3rem);
  }
  .profile-stat-card-balance strong {
    font-size: clamp(1.8rem, 9.3vw, 2.9rem);
  }
  .profile-stat-inline-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .profile-stat-card-score .profile-stat-emblem-premium {
    width: 44px;
  }
  .profile-stat-card-score .profile-stat-emblem-premium .material-symbols-outlined {
    font-size: 40px;
  }
}

.notification-bell-button {
  margin: 12px auto 0;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 999px;
  color: #ffd34d;
  background: linear-gradient(180deg, rgba(34, 25, 8, 0.94), rgba(20, 15, 7, 0.98));
  border: 1px solid rgba(255, 209, 79, 0.28);
  box-shadow: 0 18px 30px rgba(0,0,0,0.34), 0 0 26px rgba(255, 190, 54, 0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}

.notification-bell-button.is-active {
  box-shadow: 0 18px 30px rgba(0,0,0,0.34), 0 0 28px rgba(255, 190, 54, 0.36), 0 0 54px rgba(255, 201, 71, 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}

.notification-bell-button .material-symbols-outlined {
  font-size: 28px;
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 28;
}

.notification-bell-count {
  position: absolute;
  top: 8px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ff6b7d;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 0 16px rgba(255, 92, 118, 0.38);
}

.notifications-overlay {
  position: absolute;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 18px 14px 116px;
}

.notifications-overlay.hidden {
  display: none;
}

.notifications-panel {
  position: relative;
  width: min(100%, 370px);
  max-height: min(68vh, calc(100% - 24px));
  overflow: auto;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(12,18,30,0.98), rgba(8,13,22,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  display: grid;
  gap: 14px;
}

.notifications-list {
  display: grid;
  gap: 12px;
}

.notification-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(16,22,36,0.94), rgba(11,16,28,0.98));
}

.notification-item.is-unread {
  box-shadow: 0 0 0 1px rgba(255,211,77,0.12) inset, 0 0 18px rgba(255,190,54,0.08);
}

.notification-item-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,211,77,0.14);
  color: #ffd34d;
}

.notification-item-icon .material-symbols-outlined {
  font-size: 20px;
}

.notification-item-copy {
  display: grid;
  gap: 4px;
}

.notification-item-copy strong {
  font-size: 0.95rem;
}

.notification-item-copy span {
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 560px) {
  .notification-bell-button {
    width: 54px;
    height: 54px;
  }
}


.screen-home .screen-header.home-header {
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.screen-home .brand-home {
  justify-self: start;
}

.screen-home .status-pill {
  justify-self: start;
  margin-left: 0;
}

.screen-home .notification-bell-button {
  margin: 0;
  justify-self: center;
  align-self: center;
  width: 54px;
  height: 54px;
}

.screen-home .home-profile {
  justify-self: end;
}

.profile-stat-topline p,
.profile-stat-card-score .profile-stat-topline p,
.profile-stat-card-balance .profile-stat-topline p {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .screen-home .screen-header.home-header {
    grid-template-columns: auto minmax(82px, 92px) 48px minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
  }

  .screen-home .notification-bell-button {
    width: 46px;
    height: 46px;
  }

  .screen-home .notification-bell-button .material-symbols-outlined {
    font-size: 22px;
    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 22;
  }

  .screen-home .notification-bell-count {
    top: 4px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    font-size: 0.52rem;
  }

  .profile-stat-card p,
  .profile-stat-topline p {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
}


.screen-home .screen-header.home-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.screen-home .brand-home {
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  height: 46px;
}

.screen-home .home-header-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.screen-home .status-pill {
  flex: 0 0 96px;
  width: 96px;
  min-width: 96px;
  max-width: 96px;
  margin: 0;
}

.screen-home .notification-bell-button {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  margin: 0;
}

.screen-home .home-profile {
  flex: 0 0 auto;
  width: min(150px, 39vw);
  max-width: min(150px, 39vw);
  padding: 6px 10px;
}

.screen-home #homeProfileName,
.screen-home .home-profile-rank {
  width: auto;
  max-width: 100%;
}

@media (max-width: 640px) {
  .screen-home .screen-header.home-header {
    gap: 8px;
  }

  .screen-home .brand-home {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .screen-home .home-header-center {
    gap: 8px;
    justify-content: flex-start;
  }

  .screen-home .status-pill {
    flex-basis: 88px;
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    padding: 4px 7px;
  }

  .screen-home .status-pill-label {
    font-size: 0.54rem;
    letter-spacing: 0.15em;
    white-space: nowrap;
  }

  .screen-home .notification-bell-button {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .screen-home .home-profile {
    width: min(136px, 36vw);
    max-width: min(136px, 36vw);
    padding: 5px 8px;
    gap: 7px;
  }

  .screen-home .home-profile-avatar.avatar-frame {
    width: 30px;
    height: 30px;
  }

  .screen-home #homeProfileName {
    font-size: 0.76rem;
  }

  .screen-home .home-profile-rank {
    font-size: 0.58rem;
  }
}

.top-profile-button {
  max-width: calc(15ch + 52px);
  padding: 6px 10px;
  border-radius: 18px;
  background: rgba(9, 18, 38, 0.54);
  border: 1px solid rgba(129, 164, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.top-profile-button .home-profile-avatar.avatar-frame {
  width: 34px;
  height: 34px;
  --avatar-radius: 18px;
}
.top-profile-button .home-profile-meta strong {
  width: 15ch;
  max-width: 15ch;
  font-size: 0.82rem;
}
.top-profile-button .home-profile-rank {
  width: 15ch;
  max-width: 15ch;
  font-size: 0.64rem;
}


.generic-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.generic-header-brand {
  min-width: 0;
}

.top-profile-button {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: min(150px, 39vw);
  max-width: min(150px, 39vw);
  min-width: 0;
  padding: 6px 10px;
  border-radius: 18px;
  background: rgba(9, 18, 38, 0.54);
  border: 1px solid rgba(129, 164, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

.top-profile-button .home-profile-avatar.avatar-frame {
  width: 34px;
  height: 34px;
  --avatar-radius: 18px;
  flex: 0 0 auto;
}

.top-profile-button .home-profile-meta {
  min-width: 0;
  gap: 2px;
}

.top-profile-button .home-profile-meta strong,
.top-profile-button .home-profile-rank {
  display: block;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.05;
}

.top-profile-button .home-profile-meta strong {
  font-size: 0.82rem;
}

.top-profile-button .home-profile-rank {
  font-size: 0.64rem;
}

@media (max-width: 640px) {
  .generic-header {
    gap: 10px;
  }

  .top-profile-button {
    width: min(136px, 36vw);
    max-width: min(136px, 36vw);
    padding: 5px 8px;
    gap: 7px;
  }

  .top-profile-button .home-profile-avatar.avatar-frame {
    width: 30px;
    height: 30px;
  }

  .top-profile-button .home-profile-meta strong {
    font-size: 0.76rem;
  }

  .top-profile-button .home-profile-rank {
    font-size: 0.58rem;
  }
}

.profile-badge {
  align-items: flex-start;
  --badge-primary:#A97142;
  --badge-light:#E7C7A6;
  --badge-dark:#7A4E2B;
}
.profile-badge span {
  display: block;
  font-size: 0.66rem;
  color: rgba(230, 238, 255, 0.8);
}
.profile-badge em {
  display: block;
  font-style: normal;
  font-size: 0.63rem;
  line-height: 1.35;
  color: var(--badge-primary);
}
.profile-badge-icon {
  background: linear-gradient(180deg, var(--badge-light), color-mix(in srgb, var(--badge-light) 65%, white 35%));
  border: 1px solid color-mix(in srgb, var(--badge-primary) 82%, white 18%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 24px color-mix(in srgb, var(--badge-primary) 24%, transparent 76%);
  color: var(--badge-dark);
}
.profile-badge-icon .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
  color: var(--badge-dark);
}
.profile-badge-progress {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 2px;
}
.profile-badge-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--badge-primary), var(--badge-dark));
}
.profile-badge.is-locked .profile-badge-progress span {
  background: linear-gradient(90deg, rgba(149,159,188,0.7), rgba(109,118,146,0.7));
}
.profile-badge[role="button"] { cursor:pointer; }
.profile-badge.is-selected {
  border-color: var(--badge-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-primary) 38%, transparent 62%), 0 14px 30px color-mix(in srgb, var(--badge-primary) 16%, transparent 84%);
}
.profile-badge.is-selected em {
  color: var(--badge-dark);
}

.badge-overview-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
}
.badge-overview-overlay.hidden {
  display: none;
}
.badge-overview-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 430px);
  max-height: min(82vh, 760px);
  overflow: auto;
  border-radius: 26px;
  padding: 18px;
  background: rgba(11, 16, 29, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  backdrop-filter: blur(18px);
}
.badge-overview-list { display:grid; gap:14px; margin-top:10px; }
.badge-overview-group { display:grid; gap:10px; }
.badge-overview-group-head strong { display:block; font-size:0.92rem; color:#fff; }
.badge-overview-group-head span { display:block; margin-top:3px; font-size:0.72rem; color:rgba(255,255,255,0.72); }
.badge-overview-grid { display:grid; gap:8px; }
.badge-overview-item {
  display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center;
  padding:10px 12px; border-radius:16px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  --badge-primary:#A97142;
  --badge-light:#E7C7A6;
  --badge-dark:#7A4E2B;
}
.badge-overview-item.is-locked { opacity:0.55; filter:grayscale(0.25); }
.badge-overview-item[role="button"] { cursor:pointer; }
.badge-overview-item.is-selected {
  border-color: var(--badge-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-primary) 32%, transparent 68%), 0 16px 36px color-mix(in srgb, var(--badge-primary) 16%, transparent 84%);
}
.badge-overview-item-icon {
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background: linear-gradient(180deg, var(--badge-light), color-mix(in srgb, var(--badge-light) 68%, white 32%));
  border: 1px solid color-mix(in srgb, var(--badge-primary) 82%, white 18%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 24px color-mix(in srgb, var(--badge-primary) 24%, transparent 76%);
  color: var(--badge-dark);
}
.badge-overview-item-icon .material-symbols-outlined { font-size:22px; color: var(--badge-dark); }
.badge-overview-item-copy { display:grid; gap:3px; }
.badge-overview-item-copy strong { font-size:0.83rem; color:#fff; }
.badge-overview-item-copy span { font-size:0.71rem; line-height:1.35; color:rgba(255,255,255,0.72); }
.badge-overview-item-copy em { font-style:normal; font-size:0.68rem; color:var(--badge-primary); }


.profile-badges-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: start; }
.profile-badge { min-width: 0; padding: 8px 2px 2px; gap: 6px; }
.profile-badge-icon { width: 42px; height: 42px; border-radius: 14px; }
.profile-badge strong { font-size: 0.58rem; line-height: 1.05; letter-spacing: 0.01em; word-break: break-word; }
.profile-badge em { font-size: 0.52rem; }
.profile-badge-progress { height: 4px; }
.friend-code-form { grid-template-columns: minmax(0, 1fr) auto; }
.friend-code-form .text-input { text-transform: lowercase; letter-spacing: 0.08em; }
.friend-row-copy span { text-transform: uppercase; }
@media (max-width: 560px) { .profile-badge strong { font-size: 0.5rem; } .profile-badge-icon { width: 36px; height: 36px; } }


.shop-balance-bar {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin: 8px 0 2px;
  color:#ffd34d;
  font-weight:900;
  letter-spacing:0.04em;
}
.shop-balance-label { font-size:1rem; line-height:1; }
#shopBalanceValue { font-size:1rem; line-height:1; }
.avatar-shop-feature-min,
.theme-shop-feature-min {
  min-height: unset;
  padding: 14px 16px;
}
.avatar-shop-feature-copy-min,
.theme-shop-feature-copy-min {
  width:100%;
  display:grid;
  gap:10px;
  justify-items:center;
  text-align:center;
}
.avatar-collection-stats-inline {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;
}
.avatar-shop-feature-copy p,
.theme-shop-feature-copy p,
.avatar-shop-feature-preview,
.theme-shop-feature-preview { display:none; }
.avatar-card-copy-center,
.theme-card-copy-center { text-align:center; }
.avatar-card-copy-center h3,
.theme-card-copy-center h3 { text-align:center; width:100%; }
.avatar-card-meta-inline,
.theme-card-meta-inline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:nowrap;
}
.avatar-card-meta-inline .price-pill,
.theme-card-meta-inline .price-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  min-width:0;
  flex: 1 1 auto;
  padding-inline: 8px;
}
.avatar-card-meta-inline .shop-action-button,
.theme-card-meta-inline .shop-action-button {
  flex: 0 0 auto;
  min-width: 70px;
  padding-inline: 12px;
}
.avatar-card-meta-inline,
.theme-card-meta-inline {
  overflow: hidden;
}
.avatar-card,
.theme-card {
  min-height: 208px;
}
.gameover-run-strip-three,
.gameover-stats-strip-three {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.gameover-run-strip-three .gameover-run-stat,
.gameover-stats-strip-three .gameover-stat {
  min-height: 76px;
  justify-items:center;
  text-align:center;
}
.gameover-run-strip-three .gameover-run-stat strong,
.gameover-stats-strip-three .gameover-stat strong,
.gameover-run-strip-three .gameover-run-stat span,
.gameover-stats-strip-three .gameover-stat span { text-align:center; }
.profile-hero-rank {
  margin: 2px 0 0;
  min-height: 1.1em;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.profile-xp-head-right,
.profile-xp-subhead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.profile-xp-head { align-items:flex-start; }
.profile-xp-head-right {
  justify-content:flex-end;
  font-weight:900;
  color: rgba(223,232,255,0.92);
}
.profile-xp-level-label {
  font-size:0.72rem;
  letter-spacing:0.16em;
  color: rgba(170,194,255,0.78);
}
.profile-xp-subhead {
  margin-top:4px;
  font-size:0.78rem;
  color: rgba(190,206,255,0.74);
}
.profile-xp-subhead > span:first-child { visibility:hidden; }
.profile-stat-inline-icon-balance .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 20;
}
.profile-badges-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap:6px; }
.profile-badge {
  min-width:0;
  padding:8px 2px 4px;
  gap:6px;
}
.profile-badge strong {
  font-size:0.54rem;
  line-height:1.02;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:normal;
}
.profile-badge em { display:none; }
@media (max-width: 560px) {
  .avatar-collection-stats-inline { gap:8px; font-size:0.72rem; }
  .avatar-card-meta-inline,
  .theme-card-meta-inline { gap:4px; }
  .avatar-card-meta-inline .price-pill,
  .theme-card-meta-inline .price-pill { font-size:0.74rem; padding-inline:6px; }
  .avatar-card-meta-inline .shop-action-button,
  .theme-card-meta-inline .shop-action-button { min-width:64px; padding-inline:10px; font-size:0.72rem; }
  .avatar-card,
  .theme-card { min-height: 194px; }
  .gameover-run-strip-three,
  .gameover-stats-strip-three { gap:8px; }
  .gameover-run-strip-three .gameover-run-stat,
  .gameover-stats-strip-three .gameover-stat { min-height: 68px; padding: 10px 8px; }
  .profile-badge strong { font-size:0.46rem; }
}


.shop-header-centered { position:relative; }
.shop-balance-bar-header {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  min-width:72px;
  justify-content:center;
  pointer-events:none;
}
.avatar-collection-stats-inline { gap: 10px; flex-wrap: wrap; }
.avatar-collection-stats-inline span:last-child { color:#dce7ff; font-weight:800; }
.shop-action-button {
  max-width: 112px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-action-button.is-selected {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  padding: 0 10px;
}
#profileTodayGain:empty { display:none; }
.profile-hero-rank {
  display:block;
  color: var(--badge-primary, #9cc0ff);
  opacity:1;
}
.profile-user-code-row + .profile-hero-rank { margin-top: 4px; }
.profile-xp-head-spacer {
  display:block;
  min-width: 1px;
  min-height: 1px;
}
.profile-xp-subhead > span:first-child {
  visibility: visible;
  color: rgba(190,206,255,0.88);
  font-weight: 700;
}
.profile-xp-subhead { margin-top: 0; }
@media (max-width: 560px) {
  .shop-balance-bar-header { min-width: 62px; gap: 6px; }
  .shop-action-button { max-width: 96px; min-width: 70px; padding: 0 10px; }
  .shop-action-button.is-selected { font-size: 0.6rem; letter-spacing: 0.05em; }
}

.generic-header-icon-fa,
.bottom-nav .nav-item .fa-solid {
  display:grid;
  place-items:center;
}
.generic-header-icon-fa .fa-solid {
  font-size: 1.08rem;
  color: currentColor;
}
.bottom-nav .nav-item .fa-solid {
  font-size: 1.05rem;
  line-height: 1;
}

.badge-overview-progress-wrap {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.badge-overview-progress-label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.84);
}
.badge-overview-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.badge-overview-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #89acff 0%, #e966ff 52%, #ffa44c 100%);
  box-shadow: 0 0 18px rgba(137,172,255,0.28);
  transition: width 220ms ease;
}

.rank-summary-panel-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rank-summary-panel-three .summary-value {
  min-width: 0;
}

.shop-balance-bar-bell-frame {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(10, 17, 35, 0.74);
  border: 1px solid rgba(126, 160, 255, 0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.shop-balance-bar-bell-frame .shop-balance-label {
  color: #ffd34d;
  filter: drop-shadow(0 0 8px rgba(255, 211, 77, 0.32));
}
#shopBalanceValue {
  color: #ffd34d;
}

.profile-stat-card-centered {
  text-align: center;
  align-items: center;
}
.profile-stat-topline-centered {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.profile-stat-topline-centered p {
  margin: 0;
}
.profile-stat-value-row-centered {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.profile-stat-inline-icon-combo {
  color: #ffa44c;
}
.profile-stat-inline-icon-games {
  color: #89acff;
}

.shop-subsection {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}
.shop-subsection-head {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,231,255,0.8);
  text-align: left;
}
.shop-empty-card-compact {
  min-height: 92px;
  padding: 16px 18px;
}
.shop-empty-card-copy {
  color: rgba(220,231,255,0.72);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 560px) {
  .rank-summary-panel-three {
    gap: 8px;
  }
  .rank-summary-panel-three .summary-value span {
    font-size: 0.62rem;
  }
  .rank-summary-panel-three .summary-value strong {
    font-size: 1rem;
  }
  .shop-balance-bar-bell-frame {
    min-height: 38px;
    padding: 0 12px;
  }
}


.shop-sub-tabs {
  display:flex;
  gap:8px;
  margin-top: 2px;
}
.shop-sub-tabs .segmented-option {
  flex:1 1 0;
  min-height: 40px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
.shop-subsection-single {
  margin-top: 0;
}
.rank-summary-panel-three .summary-value.summary-divider {
  border-left: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 560px) {
  .shop-sub-tabs {
    gap:6px;
  }
  .shop-sub-tabs .segmented-option {
    min-height: 36px;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    padding-inline: 8px;
  }
}


.fa-thin.fa-ranking-star {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.05em;
  height:1.05em;
}
.fa-thin.fa-ranking-star::before {
  content:"\f6de";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-style:normal;
  line-height:1;
}
.shop-tab-content {
  display:grid;
  gap:8px;
}
.shop-sub-tabs {
  margin-top:-4px;
  gap:6px;
  padding:4px;
  border-radius:999px;
  align-self:stretch;
}
.shop-sub-tabs .segmented-option {
  min-height:30px;
  padding:6px 12px;
  font-size:0.64rem;
  letter-spacing:0.12em;
}
@media (max-width: 560px) {
  .shop-sub-tabs {
    margin-top:-6px;
    gap:4px;
    padding:3px;
  }
  .shop-sub-tabs .segmented-option {
    min-height:28px;
    padding:5px 10px;
    font-size:0.58rem;
    letter-spacing:0.08em;
  }
}


.shop-tab-content{gap:0;}
.shop-tab-content > .segmented-control:first-child{margin-bottom:0;}
.shop-sub-tabs{margin-top:0; padding-top:0; padding-bottom:0; gap:4px;}
.shop-subsection{margin-top:0; gap:8px;}
.shop-subsection-single{margin-top:0;}
.profile-stat-topline-centered,.profile-stat-topline-score{justify-content:center !important; padding-right:0 !important;}
.profile-stat-card-score,.profile-stat-card-balance,.profile-stat-card-cubes,.profile-stat-card-games{padding-right:18px !important;}
.profile-stat-inline-icon{display:none !important;}
@media (max-width:560px){.shop-tab-content{gap:0;}.shop-sub-tabs{margin-top:0;gap:3px;padding:0;}.shop-sub-tabs .segmented-option{min-height:27px;}}


#shopGrid.shop-grid-themes{
  margin-top:-20px;
}
.theme-shop-page{
  gap:12px !important;
}
.theme-shop-page > .shop-sub-tabs{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.theme-shop-page > .shop-card.theme-shop-feature,
.shop-sub-tabs + .shop-card.theme-shop-feature{
  margin-top:12px !important;
}
.shop-sub-tabs + .shop-subsection,
.shop-sub-tabs + .theme-card-grid{
  margin-top:12px !important;
}
@media (max-width:560px){
  #shopGrid.shop-grid-themes{margin-top:-18px;}
  .theme-shop-page{gap:10px !important;}
  .theme-shop-page > .shop-card.theme-shop-feature,
  .shop-sub-tabs + .shop-card.theme-shop-feature,
  .shop-sub-tabs + .shop-subsection,
  .shop-sub-tabs + .theme-card-grid{margin-top:10px !important;}
}


.rank-leaderboard-icon {
  width: 1.08em;
  height: 1.08em;
  display: inline-block;
  color: currentColor;
  flex: 0 0 auto;
}
.generic-header-icon-fa .rank-leaderboard-icon {
  width: 22px;
  height: 22px;
}
.bottom-nav .nav-item .rank-leaderboard-icon {
  width: 22px;
  height: 22px;
}


.bottom-nav {
  padding: 8px 10px;
}
.bottom-nav .nav-item {
  min-height: 72px;
  gap: 0;
  padding: 10px 6px;
}
.bottom-nav .nav-item span {
  display: none !important;
}
.bottom-nav .nav-item .material-symbols-outlined {
  font-size: 29px !important;
  font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 28;
}
.bottom-nav .nav-item svg {
  width: 29px !important;
  height: 29px !important;
}
.bottom-nav .nav-item .fa-solid,
.bottom-nav .nav-item .rank-leaderboard-icon {
  font-size: 1.7rem !important;
  width: 29px !important;
  height: 29px !important;
}
@media (max-width: 560px) {
  .bottom-nav {
    padding: 8px 8px;
  }
  .bottom-nav .nav-item {
    min-height: 68px;
    padding: 8px 4px;
  }
  .bottom-nav .nav-item .material-symbols-outlined {
    font-size: 27px !important;
  }
  .bottom-nav .nav-item svg,
  .bottom-nav .nav-item .rank-leaderboard-icon {
    width: 27px !important;
    height: 27px !important;
  }
}


.bottom-nav .nav-item > span:not(.material-symbols-outlined){display:none !important;}
.bottom-nav .nav-item .material-symbols-outlined{display:inline-flex !important;font-size:33px !important;}
.bottom-nav .nav-item svg{width:33px !important;height:33px !important;}
.bottom-nav .nav-item .fa-solid,.bottom-nav .nav-item .rank-leaderboard-icon{font-size:1.95rem !important;width:33px !important;height:33px !important;}
@media (max-width:560px){
  .bottom-nav .nav-item .material-symbols-outlined{font-size:31px !important;}
  .bottom-nav .nav-item svg,.bottom-nav .nav-item .rank-leaderboard-icon{width:31px !important;height:31px !important;}
}
.avatar-shop-page,.theme-shop-page{gap:12px !important;}


.background-preview {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #071121 0%, #030a18 42%, #02040d 100%);
}
.background-preview-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(6px);
}
.background-preview-glow-left {
  left: 10%;
  top: 14%;
  width: 58%;
  height: 48%;
  background: radial-gradient(circle, rgba(64,118,255,0.35) 0%, rgba(64,118,255,0) 72%);
}
.background-preview-glow-right {
  right: 4%;
  bottom: 8%;
  width: 48%;
  height: 42%;
  background: radial-gradient(circle, rgba(194,58,255,0.28) 0%, rgba(194,58,255,0) 72%);
}
.background-preview-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(193,216,255,0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 35% 16%, rgba(193,216,255,0.65) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 28%, rgba(193,216,255,0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 18%, rgba(193,216,255,0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 34%, rgba(193,216,255,0.55) 0 1px, transparent 1.6px);
}
.background-preview-city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(16,22,44,0.4) 100%),
    linear-gradient(90deg,
      transparent 0%, transparent 4%, rgba(29,57,112,0.55) 4%, rgba(29,57,112,0.55) 10%, transparent 10%, transparent 14%,
      rgba(21,36,81,0.42) 14%, rgba(21,36,81,0.42) 21%, transparent 21%, transparent 26%,
      rgba(29,57,112,0.55) 26%, rgba(29,57,112,0.55) 31%, transparent 31%, transparent 37%,
      rgba(21,36,81,0.42) 37%, rgba(21,36,81,0.42) 45%, transparent 45%, transparent 52%,
      rgba(29,57,112,0.55) 52%, rgba(29,57,112,0.55) 58%, transparent 58%, transparent 65%,
      rgba(21,36,81,0.42) 65%, rgba(21,36,81,0.42) 74%, transparent 74%, transparent 80%,
      rgba(29,57,112,0.55) 80%, rgba(29,57,112,0.55) 87%, transparent 87%, transparent 100%);
}


.background-card-grid {
  grid-template-columns: minmax(0, 1fr);
}
.background-card {
  min-height: 272px;
  padding: 18px 16px 16px;
  border-radius: 28px;
  border-color: rgba(126, 162, 255, 0.2);
  background: linear-gradient(180deg, rgba(12,18,34,0.98), rgba(7,12,24,0.92));
  box-shadow: 0 16px 40px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 28px rgba(88, 122, 255, 0.08);
}
.background-card .theme-card-preview-wrap {
  width: 100%;
}
.premium-background-preview {
  width: 100%;
  height: 144px;
  border-radius: 24px;
  border: 1px solid rgba(171, 196, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 28px rgba(3,7,18,0.38), 0 0 36px rgba(82, 112, 255, 0.12);
}
.background-preview-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(132, 162, 255, 0.12), transparent 42%),
              radial-gradient(circle at 50% 115%, rgba(177, 108, 255, 0.18), transparent 46%),
              linear-gradient(180deg, rgba(255,255,255,0.02), transparent 28%, rgba(0,0,0,0.18) 100%);
}
.background-preview-beam {
  position: absolute;
  top: -6%;
  width: 24%;
  height: 70%;
  opacity: 0.8;
  filter: blur(8px);
}
.background-preview-beam-left {
  left: 6%;
  background: linear-gradient(180deg, rgba(94, 230, 255, 0.72), rgba(94, 230, 255, 0));
}
.background-preview-beam-right {
  right: 9%;
  background: linear-gradient(180deg, rgba(233, 102, 255, 0.74), rgba(233, 102, 255, 0));
}
.background-preview-orb {
  position: absolute;
  right: 13%;
  top: 24%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95) 0%, rgba(196,214,255,0.92) 26%, rgba(98,132,255,0.72) 54%, rgba(98,132,255,0) 78%);
  box-shadow: 0 0 18px rgba(155, 186, 255, 0.35);
}
.background-preview-horizon {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 24%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(173,196,255,0.58), rgba(255,255,255,0));
  box-shadow: 0 0 16px rgba(135, 166, 255, 0.14);
}
.background-preview-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.background-preview-kicker {
  display: inline-flex;
  align-self: center;
  justify-self: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(146, 175, 255, 0.18);
  background: rgba(9, 15, 29, 0.78);
  color: rgba(193, 209, 255, 0.9);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.background-card .theme-card-copy {
  gap: 8px;
}
.background-card .theme-card-copy h3 {
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}
.background-card .theme-card-meta-inline {
  margin-top: 2px;
}
@media (max-width: 560px) {
  .background-card { min-height: 252px; }
  .premium-background-preview { height: 134px; }
}


.tap-hint{display:none !important;}
.background-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.background-card{min-height:238px;padding:14px;border-radius:24px;background:linear-gradient(180deg,rgba(12,18,34,.98),rgba(7,12,24,.92));}
.premium-background-preview{width:100%;height:128px;border-radius:20px;border:1px solid rgba(171,196,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(3,7,18,.38);}
.background-preview{position:relative;overflow:hidden;isolation:isolate;}
.background-preview-stars,.background-preview-haze,.background-preview-detail,.background-preview-city,.background-preview-vignette,.background-preview-shine{position:absolute;inset:0;pointer-events:none;}
.background-preview-stars{background-image:radial-gradient(circle at 18% 22%, rgba(255,255,255,.95) 0 1px, transparent 1.6px),radial-gradient(circle at 34% 17%, rgba(255,255,255,.75) 0 1px, transparent 1.6px),radial-gradient(circle at 58% 28%, rgba(255,255,255,.85) 0 1px, transparent 1.6px),radial-gradient(circle at 72% 18%, rgba(255,255,255,.76) 0 1px, transparent 1.6px),radial-gradient(circle at 84% 34%, rgba(255,255,255,.62) 0 1px, transparent 1.6px);opacity:.7}
.background-preview-vignette{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 34%,rgba(0,0,0,.16) 100%)}
.background-preview-shine{background:linear-gradient(132deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.04) 16%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 100%)}
.background-preview-haze{filter:blur(10px)}
.background-preview-city{opacity:0}
.background-standard{background:linear-gradient(180deg,#0a1c53 0%,#08153a 56%,#030816 100%)}
.background-standard .background-preview-haze{background:radial-gradient(circle at 50% 58%,rgba(120,150,255,.28) 0%,rgba(120,150,255,0) 56%)}
.background-standard .background-preview-detail,.background-standard .background-preview-city,.background-standard .background-preview-shine{display:none}
.background-neon-depth{background:linear-gradient(135deg,#05123a 0%,#25105b 55%,#090b22 100%)}
.background-neon-depth .background-preview-haze{background:radial-gradient(circle at 18% 12%,rgba(53,231,255,.34),rgba(53,231,255,0) 36%),radial-gradient(circle at 82% 12%,rgba(255,75,216,.3),rgba(255,75,216,0) 34%)}
.background-neon-depth .background-preview-detail{display:none}
.background-sky-ascent{background:linear-gradient(180deg,#4b8de7 0%,#95caff 52%,#eaf4ff 100%)}
.background-sky-ascent .background-preview-haze{background:radial-gradient(circle at 52% 30%,rgba(255,244,208,.6),rgba(255,244,208,0) 46%)}
.background-sky-ascent .background-preview-detail{background:radial-gradient(ellipse at 20% 64%,rgba(255,255,255,.66) 0 15%,transparent 16%),radial-gradient(ellipse at 33% 62%,rgba(255,255,255,.72) 0 14%,transparent 15%),radial-gradient(ellipse at 68% 68%,rgba(255,255,255,.68) 0 15%,transparent 16%),radial-gradient(ellipse at 82% 66%,rgba(255,255,255,.74) 0 16%,transparent 17%);filter:blur(2px)}
.background-cosmic-tower{background:linear-gradient(180deg,#07091c 0%,#17134d 50%,#090d25 100%)}
.background-cosmic-tower .background-preview-stars{opacity:1}
.background-cosmic-tower .background-preview-haze{background:radial-gradient(circle at 50% 42%,rgba(255,230,255,.18),rgba(188,120,255,.18) 34%,rgba(109,128,255,.14) 58%,rgba(109,128,255,0) 72%)}
.background-cosmic-tower .background-preview-detail{display:none}
.background-aurora-flow{background:linear-gradient(180deg,#0a233d 0%,#103b5f 52%,#07192f 100%)}
.background-aurora-flow .background-preview-haze{background:radial-gradient(circle at 28% 20%,rgba(135,255,215,.18),rgba(135,255,215,0) 34%),radial-gradient(circle at 72% 22%,rgba(110,255,200,.16),rgba(110,255,200,0) 32%)}
.background-aurora-flow .background-preview-detail{background:radial-gradient(ellipse at 30% 24%,rgba(135,255,215,.48) 0 18%,transparent 19%),radial-gradient(ellipse at 70% 30%,rgba(135,255,215,.42) 0 16%,transparent 17%);filter:blur(10px)}
.background-theme-reactive{background:linear-gradient(135deg,#0a1c53 0%,#35105f 55%,#090b22 100%)}
.background-theme-reactive .background-preview-haze{background:radial-gradient(circle at 22% 24%,rgba(137,172,255,.28),rgba(137,172,255,0) 34%),radial-gradient(circle at 80% 72%,rgba(233,102,255,.24),rgba(233,102,255,0) 32%)}
.background-theme-reactive .background-preview-city{opacity:.14;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(16,22,44,.4) 100%),linear-gradient(90deg,transparent 0%,transparent 4%,rgba(29,57,112,.55) 4%,rgba(29,57,112,.55) 10%,transparent 10%,transparent 14%,rgba(21,36,81,.42) 14%,rgba(21,36,81,.42) 21%,transparent 21%,transparent 26%,rgba(29,57,112,.55) 26%,rgba(29,57,112,.55) 31%,transparent 31%,transparent 37%,rgba(21,36,81,.42) 37%,rgba(21,36,81,.42) 45%,transparent 45%,transparent 52%,rgba(29,57,112,.55) 52%,rgba(29,57,112,.55) 58%,transparent 58%,transparent 65%,rgba(21,36,81,.42) 65%,rgba(21,36,81,.42) 74%,transparent 74%,transparent 80%,rgba(29,57,112,.55) 80%,rgba(29,57,112,.55) 87%,transparent 87%,transparent 100%);top:72%;height:28%;bottom:auto}
@media (max-width:560px){.background-card-grid{grid-template-columns:minmax(0,1fr)}.background-card{min-height:226px}}


.background-volcanic-rift{background-image:url('assets/backgrounds/volcanic-rift.webp');background-size:cover;background-position:center bottom;background-repeat:no-repeat;}
.background-volcanic-rift .background-preview-stars,.background-volcanic-rift .background-preview-city,.background-volcanic-rift .background-preview-detail{display:none;}
.background-volcanic-rift .background-preview-haze{background:linear-gradient(180deg,rgba(9,10,18,.3) 0%,rgba(9,10,18,0) 32%),radial-gradient(circle at 50% 92%,rgba(255,124,74,.18),rgba(255,124,74,0) 36%);filter:blur(6px)}
.background-volcanic-rift .background-preview-vignette{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,0) 30%,rgba(0,0,0,.18) 100%)}


.background-misty-forest{background-image:url('assets/backgrounds/misty-forest.webp');background-size:cover;background-position:center bottom;background-repeat:no-repeat;}
.background-misty-forest .background-preview-city,.background-misty-forest .background-preview-detail{display:none;}
.background-misty-forest .background-preview-stars{opacity:.18;}
.background-misty-forest .background-preview-haze{background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 28%),radial-gradient(circle at 50% 84%,rgba(4,23,24,.24),rgba(4,23,24,0) 40%);filter:blur(7px)}
.background-misty-forest .background-preview-vignette{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,0) 34%,rgba(0,0,0,.24) 100%)}


.profile-avatar-shell-static {
  cursor: default;
}

.profile-xp-block-compact {
  padding-top: 12px;
}

.other-profile-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.leaderboard-name-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leaderboard-name-button:hover,
.leaderboard-name-button:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}


.profile-name-row-other-user {
  display: block;
}

.profile-name-row-other-user h2 {
  min-width: 0;
}

.other-profile-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.other-profile-add-friend-button {
  position: absolute;
  top: 78px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #f5f7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  z-index: 2;
}

.other-profile-add-friend-button:disabled {
  opacity: 0.72;
}

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

.other-profile-best-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.other-profile-best-stat {
  min-width: 0;
  padding: 18px 12px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
}

.other-profile-best-stat .profile-stat-topline,
.other-profile-best-stat .profile-stat-value-row {
  width: 100%;
}

.other-profile-best-stat .profile-stat-topline p,
.other-profile-best-stat .profile-stat-value-row strong {
  white-space: nowrap;
}

.other-profile-best-divider {
  width: 1px;
  background: rgba(255,255,255,0.12);
  align-self: stretch;
}

.other-profile-badges-card {
  gap: 14px;
}

.other-profile-badges-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.other-profile-badge-column {
  display: grid;
  grid-auto-rows: minmax(72px, auto);
  gap: 10px;
}

.other-profile-badge-icon-card {
  min-height: 72px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--badge-primary) 28%, rgba(255,255,255,0.08));
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-light) 18%, rgba(255,255,255,0.03)), rgba(9,13,23,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 20px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.other-profile-badge-icon-card .material-symbols-outlined {
  font-size: 30px;
  color: var(--badge-primary);
}

@media (max-width: 560px) {
  .other-profile-best-card {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .other-profile-best-stat {
    padding: 16px 8px;
  }

  .other-profile-best-stat .profile-stat-topline p {
    font-size: 0.68rem;
  }

  .other-profile-best-stat .profile-stat-value-row strong {
    font-size: 1.02rem;
  }
}

@media (max-width: 700px) {
  .other-profile-badges-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .other-profile-badge-column {
    gap: 8px;
  }

  .other-profile-badge-icon-card {
    min-height: 64px;
  }

  .other-profile-badge-icon-card .material-symbols-outlined {
    font-size: 26px;
  }
}

@media (max-width: 560px) {
  .other-profile-add-friend-button {
    top: 20px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}


.rank-mode-shell {
  display: grid;
  gap: 12px;
}

.segmented-control-rank.segmented-control-rank-wide {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 4px;
  padding: 5px;
}

.segmented-control-rank.segmented-control-rank-wide .segmented-option {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 8px;
  letter-spacing: 0.1em;
}

.event-countdown-card {
  display: none !important;
}

.event-countdown-card.hidden {
  display: none !important;
}

.event-countdown-label {
  display: none;
}

.event-countdown-card strong {
  display: none;
}

.leaderboard-subtitle.event-subtitle {
  color: rgba(255, 216, 146, 0.88);
}

@media (max-width: 560px) {
  .segmented-control-rank.segmented-control-rank-wide {
    gap: 3px;
    padding: 4px;
  }
  .segmented-control-rank.segmented-control-rank-wide .segmented-option {
    min-height: 34px;
    padding-inline: 6px;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
  .event-countdown-card {
    padding: 12px 14px;
  }
  .event-countdown-card strong {
    font-size: 1.12rem;
  }
}


.segmented-control-rank.segmented-control-rank-wide .segmented-option[data-mode="event"] {
  color: #ffd5d7;
  text-shadow: 0 0 12px rgba(255, 62, 87, 0.48), 0 0 24px rgba(255, 41, 69, 0.28);
}

.segmented-control-rank.segmented-control-rank-wide .segmented-option[data-mode="event"].active {
  color: #fff3f3;
  background: linear-gradient(180deg, rgba(255, 91, 91, 0.98), rgba(203, 26, 49, 0.98));
  box-shadow: 0 0 28px rgba(255, 76, 76, 0.34), inset 0 1px 0 rgba(255,255,255,0.2);
}

.event-prize-header {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 4px 4px 8px;
  margin-bottom: 10px;
  text-align: center;
}

.event-prize-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 14px);
  flex-wrap: nowrap;
  width: min(100%, 540px);
  font-weight: 1000;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #f4cb62;
  font-size: clamp(1.2rem, 1rem + 2vw, 2.5rem);
}

.event-prize-star,
.event-prize-value {
  color: #f4cb62;
  text-shadow: 0 0 8px rgba(255, 64, 92, 0.72), 0 0 18px rgba(255, 45, 85, 0.52), 0 0 30px rgba(255, 37, 79, 0.32);
  flex: 0 0 auto;
}

.event-prize-star {
  font-size: 1.08em;
  transform: translateY(0.02em);
}

.event-prize-value {
  font-size: 1em;
}

.event-prize-text {
  color: #f4cb62;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: 0.86em;
  letter-spacing: -0.03em;
}

.event-prize-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  flex-wrap: nowrap;
}

.event-prize-timer-pill,
.event-prize-timer-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4ff18f;
  font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.08rem);
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(79, 241, 143, 0.28);
}

.event-prize-timer-pill {
  min-width: min(46vw, 210px);
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 0;
}

.event-prize-timer-pill.is-critical,
.event-prize-timer-label.is-critical {
  color: #ff5a67;
  text-shadow: 0 0 12px rgba(255, 90, 103, 0.35);
}

.event-prize-timer-label {
  gap: 0.08em;
}

.event-prize-timer-label .material-symbols-outlined {
  font-size: 1.05em;
}
@media (max-width: 560px) {
  .event-prize-header {
    gap: 8px;
    margin-bottom: 8px;
  }

  .event-prize-title {
    width: 100%;
    gap: 5px;
    font-size: clamp(1.02rem, 0.78rem + 2vw, 1.52rem);
  }

  .event-prize-text {
    font-size: 0.8em;
  }

  .event-prize-meta {
    gap: 0.28em;
  }

  .event-prize-timer-label {
    letter-spacing: 0.11em;
    font-size: clamp(0.78rem, 0.72rem + 0.5vw, 0.96rem);
  }

  .event-prize-timer-pill {
    min-width: 0;
    font-size: clamp(0.78rem, 0.72rem + 0.5vw, 0.96rem);
  }
}

.event-howworks-button {
  display: none;
  border: 0;
  background: transparent;
  color: #ffd64f;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.event-howworks-button .material-symbols-outlined {
  font-size: 1rem;
}

.event-tiered-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 320px;
  margin-bottom: 16px;
}

.event-tier-col {
  display: grid;
  justify-items: center;
  align-content: end;
}

.event-tier-avatar-block {
  position: relative;
  display: grid;
  justify-items: center;
  margin-bottom: 10px;
}

.event-tier-avatar-ring {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  padding: 3px;
  background: linear-gradient(180deg, rgba(246, 247, 255, 0.56), rgba(152, 168, 234, 0.24));
  box-shadow: 0 10px 20px rgba(7, 10, 24, 0.35);
}

.event-tier-avatar-ring.rank-1 {
  width: 96px;
  height: 96px;
  padding: 4px;
  background: linear-gradient(180deg, #ffe78c, #9e7120);
  box-shadow: 0 0 30px rgba(255, 215, 66, 0.28), 0 16px 28px rgba(7, 10, 24, 0.42);
}

.event-tier-avatar-ring .avatar-frame,
.event-tier-avatar-frame,
.event-tier-avatar-ring .leaderboard-avatar-frame {
  width: 100%;
  height: 100%;
  border-radius: 999px;
}



.event-tier-copy {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.event-tier-name {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 1000;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-tier-name.rank-1 {
  color: #f7d977;
  text-shadow: 0 0 10px rgba(247, 217, 119, 0.35), 0 0 20px rgba(255, 208, 62, 0.18);
}

.event-tier-name.rank-2 {
  color: #dfe5f5;
  text-shadow: 0 0 10px rgba(223, 229, 245, 0.26), 0 0 18px rgba(162, 176, 210, 0.16);
}

.event-tier-name.rank-3 {
  color: #d8a67c;
  text-shadow: 0 0 10px rgba(216, 166, 124, 0.28), 0 0 18px rgba(176, 110, 62, 0.16);
}

.event-tier-copy.is-center .event-tier-name {
  font-size: 1rem;
}

.event-tier-points {
  margin: 0;
  color: rgba(219, 226, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.03em;
}

.event-tier-prize-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1a3d2a, #102619);
  border: 1px solid rgba(112, 255, 150, 0.28);
  color: #78ff90;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 18px rgba(0,0,0,0.26);
  font-size: 0.95rem;
  font-weight: 1000;
  line-height: 1;
}

.event-tier-prize-icon {
  font-size: 0.96rem;
  color: #f7d977;
  text-shadow: 0 0 10px rgba(247, 217, 119, 0.3);
}

.event-tier-stage {
  position: relative;
  width: 100%;
  border-radius: 24px 24px 0 0;
  border: 0;
  border-top: 1px solid rgba(145, 161, 222, 0.22);
  background: linear-gradient(180deg, rgba(103, 116, 163, 0.42) 0%, rgba(44, 52, 92, 0.24) 32%, rgba(26, 31, 58, 0.12) 60%, rgba(26, 31, 58, 0.04) 82%, rgba(26, 31, 58, 0) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  min-height: 124px;
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
}

.event-tier-stage.rank-1 {
  min-height: 196px;
  border-radius: 28px 28px 0 0;
  border-top-color: rgba(247, 217, 119, 0.85);
  background: linear-gradient(180deg, rgba(247, 217, 119, 0.48) 0%, rgba(120, 92, 24, 0.24) 32%, rgba(42, 34, 18, 0.12) 60%, rgba(20, 25, 47, 0.04) 82%, rgba(20, 25, 47, 0) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 30px rgba(6, 10, 24, 0.16);
}

.event-tier-stage.rank-2 {
  border-top-color: rgba(223, 229, 245, 0.72);
  background: linear-gradient(180deg, rgba(223, 229, 245, 0.36) 0%, rgba(119, 131, 160, 0.2) 32%, rgba(34, 41, 65, 0.1) 60%, rgba(26, 31, 58, 0.04) 82%, rgba(26, 31, 58, 0) 100%);
}

.event-tier-stage.rank-3 {
  min-height: 96px;
  border-top-color: rgba(216, 166, 124, 0.72);
  background: linear-gradient(180deg, rgba(216, 166, 124, 0.38) 0%, rgba(128, 83, 49, 0.18) 32%, rgba(49, 34, 25, 0.1) 60%, rgba(26, 31, 58, 0.04) 82%, rgba(26, 31, 58, 0) 100%);
}

.event-tier-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%);
  pointer-events: none;
}

.event-tier-stage-icon {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.9rem;
  color: rgba(255, 215, 87, 0.18);
  font-variation-settings: 'FILL' 1;
}

.event-tier-stage-rank {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 3.9rem;
  font-weight: 1000;
  line-height: 1;
  color: rgba(194, 204, 244, 0.22);
}

.event-tier-stage.rank-1 .event-tier-stage-rank {
  font-size: 4.6rem;
  color: #f6dd7a;
  text-shadow: 0 0 18px rgba(255, 215, 78, 0.18);
}

.event-tier-stage.rank-2 .event-tier-stage-rank {
  color: rgba(223, 229, 245, 0.28);
}

.event-tier-stage.rank-3 .event-tier-stage-rank {
  color: rgba(216, 166, 124, 0.28);
}

.event-tier-laurel {
  font-size: 1.8rem;
  color: rgba(255, 215, 78, 0.7);
  font-variation-settings: 'FILL' 1;
}

.event-leaderboard-rest {
  gap: 12px;
}

@media (max-width: 560px) {
  .event-prize-header {
    padding: 16px 14px 14px;
    gap: 8px;
  }

  .event-prize-title {
    font-size: 2.3rem;
  }

  .event-prize-timer-pill {
    padding: 7px 12px;
    font-size: 0.7rem;
  }

  .event-tiered-podium {
    gap: 6px;
    min-height: 286px;
  }

  .event-tier-avatar-ring {
    width: 58px;
    height: 58px;
  }

  .event-tier-avatar-ring.rank-1 {
    width: 82px;
    height: 82px;
  }

  


.gameover-reward-strip-single {
  justify-content: stretch;
}

.gameover-reward-pill-double {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.gameover-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.gameover-reward-row span {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(225, 235, 255, 0.76);
  font-weight: 900;
}

.gameover-reward-row strong {
  font-size: 1rem;
  color: #ffffff;
}


.gameover-run-inline {
  display: grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
  align-items: center;
  gap: 0;
  margin: 16px 0 0;
  padding: 6px 4px 2px;
}

.gameover-inline-stat {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}

.gameover-inline-stat span {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
}

.gameover-inline-stat strong {
  font-size: clamp(1.25rem, 2vw + 0.85rem, 1.85rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.gameover-inline-stat-score span,
.gameover-inline-stat-score strong { color: #ffd38f; }
.gameover-inline-stat-blocks span,
.gameover-inline-stat-blocks strong { color: #9ad0ff; }
.gameover-inline-stat-combo span,
.gameover-inline-stat-combo strong { color: #d8ceff; }

.gameover-inline-divider {
  width: 1px;
  height: 76px;
  justify-self: center;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 16%,
    rgba(255,255,255,0.52) 50%,
    rgba(255,255,255,0.15) 84%,
    rgba(255,255,255,0) 100%
  );
  transform: scaleX(0.85);
  opacity: 0.95;
}

.gameover-reward-strip-single {
  justify-content: stretch;
  margin-top: 14px;
}

.gameover-reward-pill-inline {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 14px 18px;
}

.gameover-reward-metric {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gameover-reward-metric-reward {
  justify-items: start;
  text-align: left;
}

.gameover-reward-metric-xp {
  justify-items: end;
  text-align: right;
}

.gameover-reward-metric span {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.84;
}

.gameover-reward-metric strong {
  font-size: clamp(1.05rem, 1.4vw + 0.9rem, 1.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.gameover-reward-metric-reward span,
.gameover-reward-metric-reward strong { color: #ffd38f; }
.gameover-reward-metric-xp span,
.gameover-reward-metric-xp strong { color: #b7ffd0; }

.gameover-reward-inline-divider {
  height: 68px;
}

@media (max-width: 520px) {
  .gameover-run-inline {
    padding-inline: 0;
  }
  .gameover-inline-stat span {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }
  .gameover-inline-stat strong {
    font-size: 1.18rem;
  }
  .gameover-inline-divider {
    height: 62px;
  }
  .gameover-reward-pill-inline {
    padding: 12px 14px;
  }
  .gameover-reward-metric span {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }
  .gameover-reward-metric strong {
    font-size: 1rem;
  }
  .gameover-reward-inline-divider {
    height: 56px;
  }
}


.gameover-reward-strip-bare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  width: 100%;
  margin-top: 7px;
  padding: 2px 0 0;
}

.gameover-reward-strip-bare .gameover-reward-metric-reward {
  justify-items: center;
  text-align: center;
}

.gameover-reward-strip-bare .gameover-reward-metric-xp {
  justify-items: center;
  text-align: center;
}

.gameover-reward-strip-bare .gameover-reward-inline-divider {
  height: 68px;
}


.admob-slot {
  width: min(100%, 420px);
  margin: 14px auto 10px;
  min-height: 64px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.admob-slot-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.admob-slot strong {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.82);
}

.admob-slot-home {
  margin-top: 18px;
}

.admob-slot-rank,
.admob-slot-shop {
  margin-bottom: 12px;
}


.request-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:linear-gradient(180deg,#ffe57a,#f0c73a);color:#3b2a00;font-size:10px;font-weight:900;line-height:1;box-shadow:0 4px 10px rgba(255,214,78,.28);}
.request-count-badge.hidden{display:none !important;}
.friends-panel-summary-meta{display:inline-flex;align-items:center;gap:8px;}
.nav-item-profile{position:relative;overflow:visible;}
.request-count-badge-nav{position:absolute;top:2px;right:18px;z-index:4;min-width:16px;height:16px;font-size:9px;padding:0 4px;}
.notification-item.is-friend-request{align-items:flex-start;}
.notification-request-actions{display:flex;gap:8px;margin-top:10px;}
.notification-action{border:none;border-radius:12px;padding:8px 12px;font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;}
.notification-action.accept{background:linear-gradient(180deg,#56f0a5,#23bf73);color:#062014;}
.notification-action.reject{background:rgba(255,255,255,.08);color:#f4f7ff;border:1px solid rgba(255,255,255,.08);}


.setting-select {
  flex-shrink: 0;
  min-width: 124px;
  min-height: 36px;
  padding: 0 38px 0 14px;
  border-radius: 999px;
  background: rgba(22, 29, 46, 0.96);
  border: 1px solid rgba(156, 184, 255, 0.12);
  color: #eef3ff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(238,243,255,0.88) 50%), linear-gradient(135deg, rgba(238,243,255,0.88) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.setting-select:focus {
  outline: 2px solid rgba(255, 186, 78, 0.6);
  outline-offset: 2px;
}