:root {
  --bg: #050816;
  --bg-2: #0d1430;
  --card: #0e1834;
  --card-2: #121f46;
  --line: rgba(154, 194, 255, 0.12);
  --text: #f4f7ff;
  --muted: #8ca0c7;
  --accent: #59f0c2;
  --accent-2: #ffd15b;
  --danger: #ff6b7c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(89, 240, 194, 0.12), transparent 28%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

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

.hidden {
  display: none !important;
}

.phone-shell {
  width: 100%;
  min-height: 100dvh;
  max-width: 460px;
  position: relative;
  padding-bottom: 80px;
}

.phone-shell.is-playing {
  max-width: 100vw;
  padding-bottom: 78px;
}

.splash-screen,
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.splash-screen {
  background:
    radial-gradient(circle at center, rgba(89, 240, 194, 0.14), transparent 26%),
    linear-gradient(180deg, #040713 0%, #0d1430 100%);
}

.login-card {
  width: min(100%, 360px);
  display: grid;
  gap: 14px;
  padding: 28px 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top, rgba(255, 209, 91, 0.12), transparent 30%),
    var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-panel {
  display: grid;
  gap: 12px;
}

.auth-link-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 600 0.82rem/1.2 "Chakra Petch", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  justify-self: center;
  padding: 4px 6px 0;
  cursor: pointer;
}

.auth-guest-button {
  width: 100%;
}

.auth-message {
  min-height: 18px;
}

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

.splash-mark {
  width: 132px;
  height: 132px;
  position: relative;
  animation: pulseIn 1s ease forwards;
}

.splash-logo {
  width: 132px;
  height: 132px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.38));
  animation: pulseIn 1s ease forwards;
}

.splash-logo-mini {
  width: 74px;
  height: 74px;
  margin-bottom: 4px;
}

.splash-brand {
  display: grid;
  place-items: center;
}

.splash-loading {
  margin: 18px 0 0;
  font: 600 0.78rem/1.2 "Chakra Petch", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(140, 160, 199, 0.95);
}

.splash-brand-mini {
  margin-bottom: 4px;
}

.splash-mark.mini {
  width: 74px;
  height: 74px;
  margin-bottom: 4px;
}

.mark-core,
.mark-ring,
.mark-wing {
  position: absolute;
}

.mark-core {
  inset: 34%;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 30px rgba(89, 240, 194, 0.35);
}

.mark-ring {
  inset: 18%;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.16);
}

.mark-wing {
  top: 44%;
  width: 42px;
  height: 16px;
  background: linear-gradient(90deg, rgba(255, 209, 91, 0.96), rgba(89, 240, 194, 0.96));
  border-radius: 999px;
}

.mark-wing.left {
  left: 4%;
  transform: rotate(-32deg);
}

.mark-wing.right {
  right: 4%;
  transform: rotate(32deg);
}

.app {
  padding: 18px 16px 12px;
}

.app.is-playing {
  padding: 8px 8px 10px;
}

.phone-shell,
.app,
.screen[data-screen="play"].is-active,
.screen[data-screen="play"] .game-card,
.screen[data-screen="play"] .game-board,
.screen[data-screen="play"] .hud-row,
.screen[data-screen="play"] .hud-chip {
  transition: padding 0.18s ease, border-radius 0.18s ease;
}

#gameCanvas {
  transition: none;
}

.screen {
  display: none;
  animation: rise 0.18s ease;
}

.screen.is-active {
  display: block;
}

.screen[data-screen="play"].is-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.screen[data-screen="play"].is-active.is-playing {
  min-height: calc(100vh - 98px);
}

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

.topbar.compact {
  margin-bottom: 14px;
}

.screen[data-screen="play"] .topbar.compact {
  display: none;
}

.play-heading h2 {
  font-size: 2rem;
}

.brand-mark,
.micro-label {
  margin: 0 0 6px;
  font: 700 0.74rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  margin-bottom: 0;
  font-family: "Chakra Petch", sans-serif;
}

h1 {
  font-size: 1.9rem;
}

h2 {
  font-size: 1.65rem;
}

h3 {
  font-size: 1rem;
}

.tiny-copy,
.status-copy,
.leaderboard-list li span,
label {
  color: var(--muted);
}

.hero-card,
.section-card,
.game-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.hero-card {
  padding: 20px;
  margin-bottom: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 209, 91, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(89, 240, 194, 0.16), transparent 32%),
    var(--card-2);
}

.hero-card-compact {
  padding: 13px 16px;
  position: sticky;
  top: 10px;
  z-index: 8;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.hero-card h2 {
  margin-bottom: 8px;
}

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

.shop-category {
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font: 700 0.74rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.shop-category.is-active {
  background: rgba(89, 240, 194, 0.14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(89, 240, 194, 0.24);
}

.shop-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}

.shop-player-name {
  margin: 0;
  font: 700 1rem/1.1 "Chakra Petch", sans-serif;
  color: var(--text);
  letter-spacing: 0.02em;
}

.hero-card-compact h2 {
  margin: 0;
  font-size: 1.55rem;
  white-space: nowrap;
}

.identity-preview {
  position: relative;
  width: 150px;
  padding: 10px 0 4px;
}

.identity-preview-icon {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

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

.shop-package-overview,
.shop-package-detail,
.shop-package-stack {
  display: grid;
  gap: 12px;
}

.content-package-panel {
  display: grid;
  gap: 10px;
}

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

.content-package-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 8px;
  background:
    radial-gradient(circle at 88% 8%, rgba(89, 240, 194, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.content-package-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.content-package-card strong {
  font: 700 0.84rem/1.05 "Chakra Petch", sans-serif;
  color: #f2f8ff;
}

.content-package-card p,
.content-package-card span,
.content-package-card em {
  margin: 0;
  font: 600 0.7rem/1.25 "Outfit", sans-serif;
  color: rgba(232, 244, 255, 0.78);
}

.content-package-card em {
  font-style: normal;
  color: var(--accent);
}

.content-package-card.is-update {
  border-color: rgba(255, 209, 91, 0.42);
}

.content-package-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f7f3e8;
  font: 700 0.62rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.shop-package-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 6px;
  text-align: left;
  color: #f2f8ff;
  cursor: pointer;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 204, 107, 0.2), transparent 42%),
    radial-gradient(circle at 12% 14%, rgba(89, 240, 194, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}

.shop-package-card-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.shop-package-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 2px solid rgba(255, 211, 122, 0.72);
  box-shadow:
    0 0 0 2px rgba(110, 77, 16, 0.34),
    0 0 22px rgba(255, 204, 104, 0.24),
    inset 0 0 22px rgba(255, 224, 142, 0.16);
}

.shop-package-card strong {
  font: 700 0.88rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shop-package-card span,
.shop-package-card em {
  font: 600 0.7rem/1.25 "Chakra Petch", sans-serif;
  color: rgba(232, 244, 255, 0.82);
}

.shop-package-card em {
  font-style: normal;
  color: var(--accent);
}

.shop-package-card.is-locked .shop-package-card-icon {
  filter: grayscale(1) brightness(0.78);
}

.shop-package-card.is-update {
  border-color: rgba(255, 209, 91, 0.42);
  box-shadow: 0 0 0 1px rgba(255, 209, 91, 0.14) inset;
}

.shop-package-detail {
  padding-top: 4px;
}

.shop-package-detail-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
}

.shop-package-detail-head h3,
.shop-package-detail-head p {
  margin: 0;
}

.shop-package-golden {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.shop-package-golden-copy {
  display: grid;
  gap: 4px;
}

.shop-package-golden-copy p,
.shop-package-golden-copy strong,
.shop-package-golden-copy span {
  margin: 0;
}

.shop-package-golden-copy strong {
  font: 700 0.92rem/1.05 "Chakra Petch", sans-serif;
}

.shop-package-golden-copy span {
  color: rgba(232, 244, 255, 0.78);
  font: 600 0.68rem/1.25 "Chakra Petch", sans-serif;
}

.shop-package-golden-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 2px solid rgba(255, 211, 122, 0.72);
  box-shadow:
    0 0 0 2px rgba(110, 77, 16, 0.34),
    0 0 24px rgba(255, 204, 104, 0.3),
    inset 0 0 22px rgba(255, 224, 142, 0.16);
}

.shop-package-golden.is-unlocked {
  border-color: rgba(255, 206, 112, 0.68);
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 206, 112, 0.26), transparent 44%),
    linear-gradient(180deg, rgba(255, 227, 163, 0.14), rgba(255, 255, 255, 0.04));
}

.shop-package-golden.is-locked .shop-package-golden-icon {
  filter: grayscale(1) brightness(0.72);
}

.shop-banner-grid {
  gap: 10px;
}

.shop-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.shop-item-banner {
  grid-template-columns: 82px 1fr auto;
}

.shop-item-life {
  grid-template-columns: 54px 1fr auto;
}

.daily-roulette-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 18% 12%, rgba(126, 168, 255, 0.26), transparent 42%),
    radial-gradient(circle at 86% 80%, rgba(255, 204, 107, 0.2), transparent 42%),
    linear-gradient(160deg, rgba(8, 14, 30, 0.94), rgba(10, 22, 40, 0.88));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 28px rgba(0, 0, 0, 0.3);
}

.daily-roulette-head h4 {
  margin: 0;
  font: 700 1rem/1.2 "Chakra Petch", sans-serif;
  letter-spacing: 0.02em;
}

.daily-roulette-head p {
  margin: 6px 0 0;
}

.daily-roulette-stage {
  position: relative;
  margin: 14px auto 10px;
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.roulette-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 20px;
  height: 26px;
  background: linear-gradient(180deg, #ffe9ad, #ffb355);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.36));
  z-index: 4;
}

.daily-roulette-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.12);
  position: relative;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 2px rgba(10, 16, 30, 0.36),
    0 16px 26px rgba(0, 0, 0, 0.34);
  transition: transform 5.2s cubic-bezier(0.13, 0.9, 0.14, 1);
  transform: rotate(0deg);
}

.daily-roulette-wheel.is-spinning {
  filter: saturate(1.18) brightness(1.06);
}

.daily-roulette-core {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 0.94rem/1 "Chakra Petch", sans-serif;
  color: #fff;
  letter-spacing: 0.09em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(3, 7, 16, 0.92) 68%),
    linear-gradient(180deg, rgba(14, 24, 48, 0.95), rgba(5, 10, 20, 0.95));
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.daily-roulette-card .primary-button {
  width: 100%;
  margin-top: 4px;
}

.roulette-result {
  margin: 10px 2px 0;
}

.shop-item strong {
  display: block;
  margin-bottom: 4px;
}

.shop-life-preview {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.26), transparent 26%),
    linear-gradient(180deg, rgba(255,107,124,0.24), rgba(255,107,124,0.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.shop-life-preview span {
  color: #ff6b7c;
  font: 700 1.4rem/1 "Chakra Petch", sans-serif;
}

.banner-preview {
  width: 100%;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(7, 11, 20, 0.88);
  overflow: hidden;
}

.banner-preview-hero {
  height: 42px;
  border-radius: 14px;
}

.banner-preview-profile {
  height: 70px;
  border-radius: 18px;
}

.banner-preview-shop {
  width: 82px;
  height: 34px;
  border-radius: 12px;
}

.banner-preview-thumb {
  height: 32px;
  border-radius: 10px;
}

.banner-preview-rank {
  width: 96px;
  height: 18px;
  margin-bottom: 6px;
  border-radius: 8px;
}

.banner-1,
.banner-2,
.banner-3,
.banner-4,
.banner-5,
.banner-6,
.banner-7,
.banner-8,
.banner-9,
.banner-10,
.banner-11,
.banner-12 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-1 {
  background-image: url("assets/banners/banner-1.jpg");
}

.banner-2 {
  background-image: url("assets/banners/banner-2.jpg");
}

.banner-3 {
  background-image: url("assets/banners/banner-3.jpg");
}

.banner-4 {
  background-image: url("assets/banners/banner-4.jpg");
}

.banner-5 {
  background-image: url("assets/banners/banner-5.jpg");
}

.banner-6 {
  background-image: url("assets/banners/banner-6.jpg");
}

.banner-7 {
  background-image: url("assets/banners/banner-7.jpg");
}

.banner-8 {
  background-image: url("assets/banners/banner-8.jpg");
}

.banner-9 {
  background-image: url("assets/banners/banner-9.jpg");
}

.banner-10 {
  background-image: url("assets/banners/banner-10.jpg");
}

.banner-11 {
  background-image: url("assets/banners/banner-11.jpg");
}

.banner-12 {
  background-image: url("assets/banners/banner-12.jpg");
}

.avatar-preview,
.avatar-mini {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  position: relative;
  overflow: hidden;
}

.avatar-mini {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.avatar-circle {
  border-radius: 50%;
}

.icon-1,
.icon-2,
.icon-3,
.icon-4,
.icon-5,
.icon-6,
.icon-7,
.icon-8,
.icon-9,
.icon-10,
.icon-11 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(7, 11, 20, 0.88);
}

.icon-1::before,
.icon-1::after,
.icon-2::before,
.icon-2::after,
.icon-3::before,
.icon-3::after,
.icon-4::before,
.icon-4::after,
.icon-5::before,
.icon-5::after,
.icon-6::before,
.icon-6::after,
.icon-7::before,
.icon-7::after,
.icon-8::before,
.icon-8::after,
.icon-9::before,
.icon-9::after,
.icon-10::before,
.icon-10::after,
.icon-11::before,
.icon-11::after {
  display: none;
}

.icon-1 {
  background-image: url("assets/icons/icon-1.png");
}

.icon-2 {
  background-image: url("assets/icons/icon-2.png");
}

.icon-3 {
  background-image: url("assets/icons/icon-3.jpg");
}

.icon-4 {
  background-image: url("assets/icons/icon-4.jpg");
}

.icon-5 {
  background-image: url("assets/icons/icon-5.jpg");
}

.icon-6 {
  background-image: url("assets/icons/icon-6.jpg");
}

.icon-7 {
  background-image: url("assets/icons/icon-7.jpg");
}

.icon-8 {
  background-image: url("assets/icons/icon-8.png");
}

.icon-9 {
  background-image: url("assets/icons/icon-9.png");
}

.icon-10 {
  background-image: url("assets/icons/icon-10.png");
}

.icon-11 {
  background-image: url("assets/icons/icon-11.png");
}

.avatar-preview::before,
.avatar-mini::before,
.avatar-preview::after,
.avatar-mini::after {
  content: "";
  position: absolute;
}

.avatar-a::before,
.avatar-b::before,
.avatar-c::before,
.avatar-d::before {
  inset: 28%;
  border-radius: 14px;
}

.avatar-a::before {
  background: linear-gradient(180deg, #59f0c2, #27c7ff);
}

.avatar-a::after {
  inset: 12%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
}

.avatar-b::before {
  background: linear-gradient(180deg, #ffd15b, #ff8b3d);
  clip-path: polygon(50% 8%, 92% 50%, 50% 92%, 8% 50%);
}

.avatar-b::after {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  right: 10px;
  top: 10px;
  background: rgba(255,255,255,0.75);
}

.avatar-c::before {
  left: 16%;
  right: 16%;
  top: 18%;
  bottom: 18%;
  border-radius: 999px 999px 28px 28px;
  background: linear-gradient(180deg, #af74ff, #5a43ff);
}

.avatar-c::after {
  left: 24%;
  right: 24%;
  bottom: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

.avatar-d::before {
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #ff5aa8 35%, #5a2dff 74%);
}

.avatar-d::after {
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
}

.price-tag {
  display: block;
  margin-top: 4px;
  color: var(--accent-2);
  font: 700 0.8rem/1 "Chakra Petch", sans-serif;
}

.section-card,
.game-card {
  padding: 16px;
}

.screen[data-screen="play"] .game-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
}

.screen[data-screen="play"].is-playing .game-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 6px;
  border-radius: 20px;
}

.play-heading {
  display: grid;
  gap: 4px;
}

.play-mode-card,
.play-flow-card {
  padding: 12px;
  margin-bottom: 10px;
}

.play-mode-copy {
  margin: 8px 0 0;
}

.stage-panel-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.stage-panel-head .icon-button {
  align-self: center;
}

.stage-panel-head .play-heading {
  min-width: 0;
}

.stage-panel-head .tiny-copy {
  grid-column: 1 / -1;
  margin: 0;
}

.stage-intro-card {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.stage-intro-card .tiny-copy {
  margin: 0 0 6px;
}

.duel-stage-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(115, 239, 182, 0.16);
  background:
    radial-gradient(circle at top right, rgba(115, 239, 182, 0.14), transparent 50%),
    linear-gradient(135deg, rgba(9, 28, 38, 0.92), rgba(7, 22, 35, 0.86));
}

.duel-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.duel-stage-head strong {
  font: 700 0.82rem/1.2 "Chakra Petch", sans-serif;
  color: #e8fff6;
}

.duel-stage-card .primary-button {
  width: 100%;
}

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

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

.game-selector-item {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 240, 255, 0.9);
  border-radius: 14px;
  padding: 10px 10px 9px;
  font: 600 0.72rem/1.1 "Chakra Petch", sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: grid;
  gap: 5px;
  text-align: left;
  min-height: 64px;
}

.game-selector-item.is-active {
  background: rgba(89, 240, 194, 0.2);
  border-color: rgba(89, 240, 194, 0.52);
  color: #b8ffe8;
}

.game-selector-item-title {
  font: 700 0.78rem/1 "Chakra Petch", sans-serif;
}

.game-selector-thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, rgba(10, 18, 34, 0.98), rgba(18, 36, 62, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.game-selector-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 18, 0.22));
}

.game-selector-thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-selector-thumb:not(.is-ready) .game-selector-thumb-image {
  opacity: 0;
}

.game-thumb-tiles {
  background:
    linear-gradient(90deg, rgba(8, 14, 30, 0.94) 0 21%, rgba(36, 48, 78, 0.94) 21% 25%, rgba(8, 14, 30, 0.94) 25% 46%, rgba(36, 48, 78, 0.94) 46% 50%, rgba(8, 14, 30, 0.94) 50% 71%, rgba(36, 48, 78, 0.94) 71% 75%, rgba(8, 14, 30, 0.94) 75% 100%),
    linear-gradient(135deg, #0c1327, #1e2b47 45%, #0a0f1f);
}

.game-thumb-tiles::before {
  inset: auto 12% 8px 12%;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 217, 114, 0.95) 0 18%, transparent 18% 40%, rgba(255, 217, 114, 0.95) 40% 58%, transparent 58% 100%);
}

.game-thumb-flappy {
  background:
    radial-gradient(circle at 74% 24%, rgba(255, 247, 176, 0.9), transparent 10%),
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 46%),
    linear-gradient(135deg, #1b3f66, #3cc7ff 56%, #90ffe6);
}

.game-thumb-flappy::before {
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(16, 125, 106, 0.95) 24% 30%, transparent 30% 58%, rgba(16, 125, 106, 0.95) 58% 64%, transparent 64% 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(12, 74, 54, 0.92) 18% 100%);
}

.game-thumb-dash {
  background:
    linear-gradient(180deg, rgba(255, 214, 147, 0.12), transparent 55%),
    linear-gradient(135deg, #3a220b, #9f5f1a 52%, #f1bf6a);
}

.game-thumb-dash::before {
  inset: auto 0 0 0;
  height: 14px;
  background:
    linear-gradient(90deg, rgba(56, 31, 8, 0.96) 0 18%, transparent 18% 24%, rgba(56, 31, 8, 0.96) 24% 34%, transparent 34% 100%),
    linear-gradient(180deg, rgba(119, 71, 18, 0.95), rgba(73, 39, 9, 0.96));
}

.game-thumb-laser {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(211, 116, 255, 0.95) 18% 21%, transparent 21% 54%, rgba(123, 57, 255, 0.95) 54% 57%, transparent 57% 100%),
    linear-gradient(135deg, #220f40, #7b39ff 54%, #d9a8ff);
}

.game-thumb-laser::before {
  inset: 10px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
}

.game-thumb-missile {
  background:
    radial-gradient(circle at 24% 72%, rgba(255, 208, 126, 0.86), transparent 12%),
    radial-gradient(circle at 72% 26%, rgba(255, 208, 126, 0.82), transparent 10%),
    linear-gradient(135deg, #25122b, #b93a6e 52%, #ff9862);
}

.game-thumb-missile::before {
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,0.88) 42% 45%, transparent 45% 100%),
    linear-gradient(225deg, transparent 0 38%, rgba(255,255,255,0.76) 38% 41%, transparent 41% 100%);
}

.game-thumb-switch {
  background:
    linear-gradient(90deg, rgba(255, 205, 92, 0.9) 0 18%, rgba(88, 255, 214, 0.9) 18% 36%, rgba(134, 113, 255, 0.9) 36% 54%, rgba(255, 118, 181, 0.9) 54% 72%, rgba(255, 205, 92, 0.9) 72% 100%),
    linear-gradient(135deg, #102931, #1f8d83 52%, #67ffd5);
}

.game-thumb-switch::before {
  inset: 9px 14px;
  border-radius: 999px;
  border: 2px solid rgba(8, 18, 24, 0.6);
}

.game-thumb-jump {
  background:
    radial-gradient(circle at 24% 26%, rgba(255,255,255,0.82), transparent 12%),
    radial-gradient(circle at 66% 34%, rgba(255,255,255,0.64), transparent 10%),
    linear-gradient(180deg, rgba(183, 207, 255, 0.28), transparent 44%),
    linear-gradient(135deg, #1a2d4d, #4f6fff 52%, #b6cbff);
}

.game-thumb-jump::before {
  inset: auto 12px 10px 12px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.78) 0 22%, transparent 22% 48%, rgba(255,255,255,0.78) 48% 74%, transparent 74% 100%);
}

.game-thumb-monsters {
  background:
    radial-gradient(circle at 30% 38%, rgba(255, 255, 255, 0.92), transparent 6%),
    radial-gradient(circle at 68% 32%, rgba(255, 255, 255, 0.9), transparent 6%),
    linear-gradient(135deg, #241223, #913a7c 48%, #ff80b6);
}

.game-thumb-monsters::before {
  inset: 8px 10px;
  background:
    radial-gradient(circle at 20% 46%, rgba(16, 13, 31, 0.9) 0 12%, transparent 13%),
    radial-gradient(circle at 54% 40%, rgba(16, 13, 31, 0.9) 0 12%, transparent 13%),
    radial-gradient(circle at 84% 52%, rgba(16, 13, 31, 0.9) 0 12%, transparent 13%);
}

.game-thumb-retro {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(135deg, #061a38, #1f59c0 50%, #45d2ff);
}

.game-thumb-retro::before {
  inset: 9px 12px;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 99, 99, 0.94) 0 5%, transparent 6%),
    radial-gradient(circle at 42% 32%, rgba(255, 231, 122, 0.94) 0 5%, transparent 6%),
    radial-gradient(circle at 66% 26%, rgba(255, 99, 99, 0.94) 0 5%, transparent 6%),
    linear-gradient(90deg, transparent 0 68%, rgba(255,255,255,0.92) 68% 71%, transparent 71% 100%);
}

.game-thumb-fruit {
  background:
    radial-gradient(circle at 26% 58%, rgba(255, 219, 112, 0.88), transparent 10%),
    radial-gradient(circle at 70% 34%, rgba(255, 116, 109, 0.88), transparent 10%),
    linear-gradient(135deg, #2b1f0f, #cf5530 52%, #ffd06c);
}

.game-thumb-fruit::before {
  background: linear-gradient(135deg, transparent 0 38%, rgba(255,255,255,0.9) 38% 41%, transparent 41% 100%);
}

.game-thumb-breakout {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(135deg, #141f25, #2b6f74 52%, #8cf2db);
}

.game-thumb-breakout::before {
  inset: 8px 10px;
  background:
    linear-gradient(90deg, rgba(255, 220, 122, 0.96) 0 26%, transparent 26% 32%, rgba(255, 150, 92, 0.96) 32% 58%, transparent 58% 64%, rgba(111, 252, 220, 0.96) 64% 90%, transparent 90% 100%),
    linear-gradient(180deg, transparent 0 72%, rgba(255,255,255,0.92) 72% 76%, transparent 76% 100%);
}

.game-selector-item-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(232, 240, 255, 0.72);
  font: 500 0.66rem/1.25 "Outfit", sans-serif;
  letter-spacing: 0.01em;
}

.game-description {
  margin: 0;
  color: rgba(232, 240, 255, 0.72);
  font: 500 0.78rem/1.35 "Outfit", sans-serif;
  max-width: 100%;
}

.game-description-panel {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(232, 240, 255, 0.82);
  min-height: 64px;
}

.screen[data-screen="play"].is-playing .game-description-panel {
  display: none;
}

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

.multiplayer-mode-switch {
  display: inline-flex;
  gap: 6px;
}

.multiplayer-mode-switch .mini-action.is-active {
  background: rgba(89, 240, 194, 0.22);
  border: 1px solid rgba(89, 240, 194, 0.44);
}

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

.duel-top-head {
  align-items: flex-end;
}

.duel-top-head h3 {
  margin: 0;
}

.duel-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(104, 132, 255, 0.22);
  background:
    radial-gradient(circle at 18% 18%, rgba(89, 240, 194, 0.16), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(255, 107, 124, 0.2), transparent 26%),
    linear-gradient(145deg, rgba(8, 18, 42, 0.96), rgba(11, 24, 58, 0.9));
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 42px rgba(82, 116, 255, 0.18);
}

.duel-hero-card::before,
.duel-hero-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.duel-hero-card::before {
  inset: auto -32px -60px auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 107, 124, 0.18), transparent 68%);
}

.duel-hero-card::after {
  inset: -70px auto auto -48px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(89, 240, 194, 0.16), transparent 70%);
}

.duel-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.duel-fighter-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  min-height: 96px;
}

.duel-fighter-card strong {
  font: 700 1rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.04em;
}

.duel-fighter-card-player {
  box-shadow: 0 0 0 1px rgba(89, 240, 194, 0.08) inset;
}

.duel-fighter-card-opponent {
  box-shadow: 0 0 0 1px rgba(255, 107, 124, 0.08) inset;
}

.duel-fighter-label {
  color: rgba(232, 240, 255, 0.66);
  font: 700 0.62rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.duel-hero-vs {
  display: grid;
  place-items: center;
}

.duel-hero-vs-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(255, 209, 91, 0.36);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 209, 91, 0.78), rgba(255, 107, 124, 0.18) 68%),
    rgba(12, 19, 39, 0.96);
  box-shadow:
    0 0 28px rgba(255, 107, 124, 0.22),
    0 0 22px rgba(255, 209, 91, 0.2);
  color: #fff1cc;
  font: 800 1.08rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.08em;
}

.duel-hero-copy {
  display: grid;
  gap: 6px;
}

.duel-hero-copy h4 {
  margin: 0;
  font: 700 1.28rem/1.05 "Chakra Petch", sans-serif;
}

.duel-hero-copy .tiny-copy {
  color: rgba(232, 240, 255, 0.8);
}

.duel-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.duel-hero-chip {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(4, 10, 24, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.duel-hero-chip span {
  color: rgba(232, 240, 255, 0.62);
  font: 700 0.62rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.duel-hero-chip strong {
  color: #f7fbff;
  font: 700 0.86rem/1.15 "Chakra Petch", sans-serif;
}

.duel-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.duel-hero-primary,
.duel-create-main-button {
  min-height: 54px;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  box-shadow:
    0 16px 28px rgba(255, 107, 124, 0.22),
    0 0 24px rgba(110, 78, 255, 0.18);
  background:
    linear-gradient(135deg, #ff5b76 0%, #9755ff 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.duel-hero-primary:hover,
.duel-create-main-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 20px 34px rgba(255, 107, 124, 0.28),
    0 0 30px rgba(110, 78, 255, 0.24);
}

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

.duel-action-board-priority {
  order: -1;
}

.duel-action-card,
.duel-action-subcard {
  display: grid;
  justify-items: start;
  text-align: left;
  gap: 8px;
  min-height: 124px;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(13, 23, 51, 0.96), rgba(9, 18, 38, 0.92));
  border: 1px solid rgba(122, 155, 255, 0.14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.duel-action-card strong,
.duel-action-subcard strong {
  font: 700 0.98rem/1.05 "Chakra Petch", sans-serif;
  color: #f7fbff;
}

.duel-action-card span:last-child,
.duel-action-subcard span:last-child {
  color: rgba(232, 240, 255, 0.74);
  font: 500 0.72rem/1.35 "Space Grotesk", sans-serif;
}

.duel-action-card:hover,
.duel-action-subcard:hover,
.duel-action-card.is-selected,
.duel-action-subcard.is-selected {
  transform: translateY(-2px);
  border-color: rgba(89, 240, 194, 0.4);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(89, 240, 194, 0.12) inset,
    0 0 24px rgba(89, 240, 194, 0.12);
}

.duel-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(89, 240, 194, 0.24), rgba(97, 123, 255, 0.24));
  color: #7ff6d3;
  font: 800 1.02rem/1 "Chakra Petch", sans-serif;
  box-shadow: 0 0 20px rgba(89, 240, 194, 0.12);
}

.multiplayer-presence-card,
.multiplayer-public-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

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

.multiplayer-server-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 5px 10px;
  border-radius: 999px;
  font: 700 0.7rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.multiplayer-server-badge.is-online {
  color: #072012;
  background: #73efb6;
  border-color: rgba(115, 239, 182, 0.7);
}

.multiplayer-server-badge.is-offline {
  color: #ffd8d8;
  background: rgba(255, 107, 124, 0.18);
  border-color: rgba(255, 107, 124, 0.38);
}

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

.duel-entry-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.duel-loadout-card,
.duel-rooms-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(110, 138, 255, 0.14);
  background:
    radial-gradient(circle at top right, rgba(89, 240, 194, 0.12), transparent 34%),
    linear-gradient(155deg, rgba(11, 21, 47, 0.96), rgba(10, 17, 38, 0.92));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.duel-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.duel-card-head strong {
  display: block;
  font: 700 1rem/1.05 "Chakra Petch", sans-serif;
  color: #f9fbff;
}

.duel-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(89, 240, 194, 0.1);
  border: 1px solid rgba(89, 240, 194, 0.2);
  color: #8ff5d7;
  font: 700 0.64rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.duel-section-copy {
  display: grid;
  gap: 4px;
}

.duel-section-copy strong {
  font: 700 0.9rem/1.1 "Chakra Petch", sans-serif;
  color: #f4f8ff;
}

.duel-setup-wizard {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(89, 240, 194, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.03);
}

.duel-setup-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.duel-setup-head strong {
  display: block;
  font: 700 0.9rem/1.1 "Chakra Petch", sans-serif;
  color: #f7f3e8;
}

.duel-setup-step {
  display: grid;
  gap: 10px;
}

.duel-entry-button {
  text-align: center;
  padding: 13px 12px;
  font: 700 0.78rem/1 "Chakra Petch", sans-serif;
}

.duel-inline-field {
  display: grid;
  gap: 6px;
  color: rgba(232, 240, 255, 0.8);
  font: 700 0.68rem/1.1 "Chakra Petch", sans-serif;
}

.duel-inline-field input {
  width: 100%;
}

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

.duel-type-tab {
  text-align: center;
  padding: 12px 12px;
  min-height: 48px;
}

.duel-bet-selection-card {
  min-height: 132px;
  background:
    radial-gradient(circle at 50% 0%, rgba(89, 240, 194, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(5, 10, 24, 0.7), rgba(10, 18, 40, 0.64));
  border-color: rgba(89, 240, 194, 0.14);
  box-shadow: inset 0 0 0 1px rgba(89, 240, 194, 0.06);
}

.duel-bet-selection-card.is-empty {
  border-style: dashed;
}

.duel-bet-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.duel-bet-pick {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 27, 58, 0.94), rgba(9, 18, 38, 0.9));
  padding: 12px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  color: #f7f3e8;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.duel-bet-pick.is-selected {
  border-color: rgba(89, 240, 194, 0.52);
  background:
    radial-gradient(circle at top, rgba(89, 240, 194, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(16, 34, 70, 0.96), rgba(9, 18, 38, 0.92));
  box-shadow:
    0 0 0 1px rgba(89, 240, 194, 0.12) inset,
    0 0 26px rgba(89, 240, 194, 0.14);
  transform: translateY(-2px);
}

.duel-bet-pick strong {
  font: 700 0.72rem/1.1 "Chakra Petch", sans-serif;
}

.duel-bet-pick span {
  color: rgba(232, 240, 255, 0.7);
  font: 500 0.64rem/1.2 "Outfit", sans-serif;
}

.duel-bet-empty {
  min-width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  color: rgba(232, 240, 255, 0.68);
}

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

.duel-summary-chip {
  padding: 13px;
  border-radius: 16px;
  border: 1px solid rgba(110, 138, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  display: grid;
  gap: 6px;
}

.duel-summary-chip span {
  color: rgba(232, 240, 255, 0.66);
  font: 700 0.64rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.duel-summary-chip strong {
  color: #f7f3e8;
  font: 700 0.82rem/1.15 "Chakra Petch", sans-serif;
}

.duel-setup-footer {
  display: grid;
}

.multiplayer-grid label {
  display: grid;
  gap: 4px;
  font: 600 0.67rem/1.2 "Chakra Petch", sans-serif;
  letter-spacing: 0.04em;
}

.multiplayer-grid select {
  width: 100%;
}

@media (max-width: 700px) {
  .duel-hero-grid,
  .duel-hero-metrics,
  .duel-action-board,
  .multiplayer-grid {
    grid-template-columns: 1fr;
  }

  .duel-entry-actions,
  .duel-bet-type-tabs,
  .duel-summary-card {
    grid-template-columns: 1fr;
  }

  .duel-search-preview {
    grid-template-columns: 1fr;
  }

  .duel-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .duel-hero-primary,
  .duel-create-main-button {
    width: 100%;
  }
}

.multiplayer-room-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(110, 138, 255, 0.12);
  background:
    linear-gradient(145deg, rgba(9, 18, 39, 0.94), rgba(8, 15, 32, 0.9));
}

.multiplayer-matchmaking-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 107, 124, 0.16);
  background:
    radial-gradient(circle at top right, rgba(255, 191, 107, 0.16), transparent 40%),
    linear-gradient(160deg, rgba(22, 15, 36, 0.96), rgba(11, 20, 42, 0.94));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.multiplayer-matchmaking-card.is-floating {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100vw - 28px));
  transform: translate(-50%, -50%);
  z-index: 90;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(126, 168, 255, 0.22);
  background:
    radial-gradient(circle at top, rgba(58, 197, 255, 0.18), transparent 40%),
    linear-gradient(160deg, rgba(7, 17, 31, 0.96), rgba(10, 24, 44, 0.94));
  box-shadow:
    0 0 0 120vmax rgba(2, 7, 15, 0.58),
    0 26px 60px rgba(0, 0, 0, 0.44);
}

.duel-search-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.duel-search-preview.is-searching .duel-search-vs span {
  animation: duelPulse 1.1s ease-in-out infinite;
}

.duel-search-preview.is-matched .duel-bet-slot:first-child {
  animation: duelCrashLeft 0.8s ease both;
}

.duel-search-preview.is-matched .duel-bet-slot:last-child {
  animation: duelCrashRight 0.8s ease both;
}

.duel-bet-slot {
  min-height: 112px;
  border-radius: 18px;
  border: 1px solid rgba(110, 138, 255, 0.12);
  background: linear-gradient(180deg, rgba(6, 10, 24, 0.74), rgba(9, 17, 36, 0.72));
  padding: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.duel-bet-card {
  width: 100%;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.duel-bet-card strong {
  font: 700 0.76rem/1.1 "Chakra Petch", sans-serif;
  color: #f7f3e8;
}

.duel-bet-card span {
  color: rgba(232, 240, 255, 0.72);
  font: 500 0.68rem/1.25 "Outfit", sans-serif;
}

.duel-bet-card .avatar-mini {
  width: 48px;
  height: 48px;
}

.duel-bet-card .banner-preview {
  width: 100%;
  max-width: 124px;
  height: 46px;
}

.duel-search-vs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(244, 219, 173, 0.4);
  background: radial-gradient(circle at 30% 30%, rgba(244, 219, 173, 0.48), rgba(201, 149, 79, 0.18));
  font: 800 0.88rem/1 "Chakra Petch", sans-serif;
  color: #fbe8c9;
  letter-spacing: 0.08em;
}

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

.game-selector-duel .choice-option,
.game-selector-duel button,
.game-selector-duel .game-option {
  min-height: 92px;
  border-radius: 18px;
  border: 1px solid rgba(110, 138, 255, 0.14);
  background:
    linear-gradient(145deg, rgba(12, 23, 51, 0.94), rgba(9, 17, 38, 0.92));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.game-selector-duel .choice-option:hover,
.game-selector-duel button:hover,
.game-selector-duel .game-option:hover,
.game-selector-duel .choice-option.is-selected,
.game-selector-duel button.is-selected,
.game-selector-duel .game-option.is-selected {
  transform: translateY(-2px);
  border-color: rgba(89, 240, 194, 0.48);
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(89, 240, 194, 0.12) inset,
    0 0 26px rgba(89, 240, 194, 0.14);
}

@keyframes duelPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes duelCrashLeft {
  0% { transform: translateX(0); }
  55% { transform: translateX(16px) scale(1.04); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes duelCrashRight {
  0% { transform: translateX(0); }
  55% { transform: translateX(-16px) scale(1.04); }
  100% { transform: translateX(0) scale(1); }
}

.multiplayer-public-list {
  display: grid;
  gap: 8px;
}

.public-room-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(89, 240, 194, 0.08), transparent 30%),
    linear-gradient(150deg, rgba(12, 22, 49, 0.96), rgba(8, 16, 34, 0.94));
  border: 1px solid rgba(110, 138, 255, 0.12);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.public-room-item strong,
.public-room-item span {
  display: block;
}

.public-room-item span {
  margin-top: 4px;
  color: rgba(232, 240, 255, 0.72);
  font: 500 0.7rem/1.35 "Outfit", sans-serif;
}

.public-room-item .mini-action {
  min-width: 88px;
  min-height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(89, 240, 194, 0.2), rgba(76, 126, 255, 0.22));
  border: 1px solid rgba(89, 240, 194, 0.22);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.duel-room-copy {
  color: rgba(232, 240, 255, 0.7);
}

.multiplayer-public-empty {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 240, 255, 0.68);
}

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

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

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

.mini-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.mini-card.live {
  background: linear-gradient(135deg, rgba(89, 240, 194, 0.16), rgba(255, 209, 91, 0.12));
}

.badge {
  display: inline-flex;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font: 700 0.72rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-live {
  color: #05131f;
  background: var(--accent);
}

.ghost-line {
  width: 68%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.ghost-line.short {
  width: 44%;
}

.primary-button,
.icon-button,
.tab,
.nav-item {
  border: 0;
  cursor: pointer;
  font: 700 0.92rem/1 "Chakra Petch", sans-serif;
}

.primary-button,
.icon-button {
  border-radius: 999px;
  padding: 14px 18px;
}

.primary-button.small {
  padding: 12px 14px;
}

.start-button {
  min-width: 126px;
  padding: 16px 20px;
  font-size: 1rem;
  box-shadow: 0 12px 26px rgba(89, 240, 194, 0.24);
}

.bottom-start {
  width: 100%;
  margin-top: 10px;
  border-radius: 18px;
}

.screen[data-screen="play"].is-playing .bottom-start {
  margin-top: auto;
}

.debug-button {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
  border-radius: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.07);
}

.primary-button {
  background: linear-gradient(135deg, var(--accent), #a9f8e6);
  color: #05131f;
}

.icon-button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.hud-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.screen[data-screen="play"] .hud-row {
  margin-bottom: 10px;
}

.screen[data-screen="play"].is-playing .hud-row {
  gap: 8px;
  margin-bottom: 6px;
}

.hud-chip {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.screen[data-screen="play"].is-playing .hud-chip {
  padding: 10px 11px;
  border-radius: 16px;
}

.hud-chip span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.screen[data-screen="play"].is-playing .hud-chip span {
  margin-bottom: 4px;
  font-size: 0.72rem;
}

.hud-chip strong {
  font-family: "Chakra Petch", sans-serif;
  font-size: 1.1rem;
}

.screen[data-screen="play"].is-playing .hud-chip strong {
  font-size: 1rem;
}

.hud-chip-lives {
  position: relative;
}

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

.hud-life-button {
  margin-left: auto;
  min-width: 42px;
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(89, 240, 194, 0.14);
  box-shadow: inset 0 0 0 1px rgba(89, 240, 194, 0.2);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.hud-life-button:hover {
  background: rgba(89, 240, 194, 0.2);
}

.hud-life-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.hud-life-button-plus,
.hud-life-button #reserveLivesValue {
  margin: 0;
  font: 700 0.72rem/1 "Chakra Petch", sans-serif;
  color: inherit;
}

.screen[data-screen="play"].is-playing .hud-life-button {
  height: 26px;
  min-width: 40px;
  padding: 0 8px;
}

.game-board {
  height: min(76vh, 760px);
  padding: 8px;
  border-radius: 18px;
  background: #060b17;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.screen[data-screen="play"] .game-board {
  height: min(50vh, 400px);
  min-height: 248px;
}

.screen[data-screen="play"].is-playing .game-board {
  height: min(calc(100vh - 214px), 780px);
  min-height: 360px;
  padding: 4px;
  border-radius: 15px;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 18, 34, 0.55), rgba(5, 8, 14, 0.92));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.screen[data-screen="play"].is-playing #gameCanvas {
  border-radius: 12px;
}

.status-copy {
  font-size: 0.92rem;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.league-card {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.12), transparent 40%),
    linear-gradient(150deg, rgba(9, 15, 29, 0.95), rgba(11, 20, 35, 0.86));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

.league-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.league-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font: 700 0.74rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tab {
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.tab.is-active {
  color: #05131f;
  background: var(--accent-2);
}

.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.screen[data-screen="rank"] {
  padding-bottom: 178px;
}

.leaderboard-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.05);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.leaderboard-list strong,
.leaderboard-list em {
  font-family: "Chakra Petch", sans-serif;
  font-style: normal;
}

.leaderboard-entry {
  min-height: 68px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 20px rgba(0, 0, 0, 0.18);
}

.leaderboard-loading {
  border: 1px solid rgba(126, 168, 255, 0.28);
  background:
    linear-gradient(90deg, rgba(8, 15, 30, 0.9), rgba(20, 34, 62, 0.82), rgba(8, 15, 30, 0.9));
  background-size: 220% 100%;
  animation: leaderboardLoadingPulse 1.2s linear infinite;
}

@keyframes leaderboardLoadingPulse {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.leaderboard-player-card {
  margin-top: 12px;
  border: 1px solid rgba(89, 240, 194, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(89, 240, 194, 0.2),
    0 12px 26px rgba(0, 0, 0, 0.26);
}

.leaderboard-player-dock {
  position: fixed;
  left: 50%;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: calc(100% - 20px);
  max-width: 428px;
  display: grid;
  gap: 8px;
  z-index: 7;
}

.leaderboard-player-toggle {
  border: 1px solid rgba(89, 240, 194, 0.42);
  border-radius: 14px;
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: rgba(3, 8, 18, 0.92);
  color: #66f3cb;
  font: 700 0.8rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(89, 240, 194, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  backdrop-filter: none;
}

.leaderboard-player-toggle-caret {
  display: inline-block;
  transition: transform 0.2s ease;
}

.leaderboard-player-dock.is-expanded .leaderboard-player-toggle-caret {
  transform: rotate(180deg);
}

.leaderboard-player-dock .leaderboard-player-card {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
}

.leaderboard-player-dock .leaderboard-player {
  gap: 12px;
}

.leaderboard-player-dock .leaderboard-avatar {
  width: 40px;
  height: 40px;
}

.leaderboard-player-dock .leaderboard-copy strong {
  font-size: 1.12rem;
  line-height: 1.1;
}

.leaderboard-player-dock .leaderboard-copy span {
  margin-top: 2px;
  font-size: 0.86rem;
  line-height: 1.1;
}

#leaderboardPlayerScore {
  justify-self: end;
  align-self: center;
  font: 700 1.5rem/1 "Chakra Petch", sans-serif;
  color: #ffffff;
  min-width: 38px;
  text-align: right;
}

.leaderboard-player-dock:not(.is-expanded) .leaderboard-player-card {
  display: none;
}

.leaderboard-player-card .leaderboard-rank {
  color: #66f3cb;
}

.leaderboard-rank {
  min-width: 34px;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.7),
    0 0 10px rgba(0,0,0,0.65);
}

.leaderboard-player {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.leaderboard-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.1),
    0 0 0 4px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(0,0,0,0.28);
}

.leaderboard-copy {
  min-width: 0;
}

.leaderboard-copy strong,
.leaderboard-copy span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-copy strong {
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.8),
    0 0 12px rgba(0,0,0,0.65);
}

.leaderboard-copy span,
.leaderboard-list em {
  color: rgba(245, 250, 255, 0.96);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.8),
    0 0 10px rgba(0,0,0,0.65);
}

.profile-card {
  display: grid;
  gap: 14px;
}

.profile-overview-card {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.profile-hero-card {
  padding: 12px;
  background:
    radial-gradient(circle at 12% 8%, rgba(89, 240, 194, 0.2), transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(76, 168, 255, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    var(--card);
}

.profile-hero-banner-wrap {
  position: relative;
}

.profile-hero-banner-wrap .banner-preview-profile {
  height: 92px;
  border-radius: 16px;
}

.profile-edit-button {
  position: absolute;
  right: 8px;
  top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(6, 11, 22, 0.72);
  color: #eaf2ff;
  font: 700 0.68rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.profile-overview-top {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  margin-top: -26px;
  position: relative;
  z-index: 1;
}

.profile-overview-top .profile-icon-preview {
  width: 104px;
  height: 104px;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.36),
    0 0 0 3px rgba(6, 12, 24, 0.8);
}

.profile-summary-copy {
  display: grid;
  gap: 4px;
}

.profile-summary-copy h3,
.profile-summary-copy p {
  margin: 0;
}

.profile-summary-copy .tiny-copy:empty {
  display: none;
}

.profile-summary-copy #profileSummaryName {
  font-size: 1.18rem;
  line-height: 1.06;
}

.profile-summary-copy #profileSummaryCountry {
  color: rgba(232, 244, 255, 0.84);
}

.profile-summary-copy #profileSummaryIconText {
  color: var(--accent);
}

.profile-card-banners,
.profile-card-icons {
  gap: 12px;
  padding-top: 12px;
}

.profile-stars-card {
  gap: 10px;
  padding-top: 12px;
}

.profile-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-quick-chip {
  border-radius: 12px;
  padding: 9px 8px 10px;
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
}

.profile-quick-chip span {
  color: var(--muted);
  font: 700 0.62rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-quick-chip strong {
  color: #ffffff;
  font: 700 0.95rem/1 "Chakra Petch", sans-serif;
}

.profile-guest-cta {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(6, 13, 25, 0.58);
}

.profile-guest-cta .tiny-copy {
  margin: 0;
}

.profile-guest-cta .primary-button {
  width: 100%;
}

.profile-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 2px 0 2px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-category {
  border: 0;
  border-radius: 10px;
  padding: 11px 12px;
  font: 700 0.8rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

.profile-category.is-active {
  color: var(--accent);
  background: rgba(89, 240, 194, 0.14);
  box-shadow: inset 0 0 0 1px rgba(89, 240, 194, 0.24);
}

.profile-stars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-star-chip {
  border-radius: 14px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.profile-star-chip strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.trophy-star {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.profile-star-chip span {
  font: 700 1rem/1 "Chakra Petch", sans-serif;
}

.profile-star-chip.is-gold {
  border-color: rgba(255, 212, 94, 0.35);
  background: linear-gradient(180deg, rgba(255, 212, 94, 0.16), rgba(255, 212, 94, 0.04));
}

.profile-star-chip.is-gold strong,
.profile-star-chip.is-gold span {
  color: #ffe08a;
}

.profile-star-chip.is-silver {
  border-color: rgba(208, 218, 236, 0.35);
  background: linear-gradient(180deg, rgba(208, 218, 236, 0.16), rgba(208, 218, 236, 0.04));
}

.profile-star-chip.is-silver strong,
.profile-star-chip.is-silver span {
  color: #dce8ff;
}

.profile-star-chip.is-bronze {
  border-color: rgba(223, 141, 86, 0.35);
  background: linear-gradient(180deg, rgba(223, 141, 86, 0.16), rgba(223, 141, 86, 0.04));
}

.profile-star-chip.is-bronze strong,
.profile-star-chip.is-bronze span {
  color: #f0b086;
}

.profile-star-chip.is-world-win {
  box-shadow:
    0 0 0 1px rgba(89, 240, 194, 0.34) inset,
    0 0 18px rgba(89, 240, 194, 0.28),
    0 0 34px rgba(89, 240, 194, 0.18);
  animation: none;
}

.screen[data-screen="profile"].is-active .profile-star-chip.is-world-win {
  animation: worldStarPulse 2.8s ease-in-out infinite;
}

@keyframes worldStarPulse {
  0%, 100% {
    transform: translateY(0);
    filter: saturate(1);
  }
  50% {
    transform: translateY(-1px);
    filter: saturate(1.16);
  }
}

.profile-banner-panel {
  display: grid;
  justify-items: center;
}

.profile-packages-panel {
  display: grid;
  gap: 10px;
}

.profile-packages-grid {
  display: grid;
  gap: 8px;
}

.profile-package-content,
.profile-package-stack {
  display: grid;
  gap: 10px;
}

.profile-package-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    radial-gradient(circle at 85% 10%, rgba(92, 196, 255, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  color: #f2f8ff;
  text-align: left;
  padding: 12px;
  display: grid;
  gap: 5px;
  cursor: pointer;
}

.profile-package-card-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.profile-package-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.profile-package-card strong {
  font: 700 0.86rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-package-card span,
.profile-package-card em {
  color: rgba(232, 244, 255, 0.78);
  font: 600 0.72rem/1.2 "Chakra Petch", sans-serif;
  letter-spacing: 0.03em;
}

.profile-package-card em {
  color: var(--accent);
  font-style: normal;
}

.profile-package-card.is-open {
  border-color: rgba(89, 240, 194, 0.54);
  box-shadow: 0 0 0 1px rgba(89, 240, 194, 0.2) inset;
}

.profile-package-card.is-locked .profile-package-card-icon {
  filter: grayscale(1) brightness(0.78);
}

.profile-collection-detail {
  display: grid;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
}

.profile-collection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-collection-head strong {
  color: #f4f9ff;
  font: 700 0.74rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.profile-collection-head span {
  color: var(--accent);
  font: 700 0.68rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.05em;
}

.profile-collection-open,
.profile-collection-back {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.profile-golden-reward {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.profile-golden-reward .profile-golden-title {
  font: 700 0.64rem/1 "Chakra Petch", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 246, 255, 0.8);
}

.profile-golden-reward strong {
  margin: 0;
  font: 700 0.8rem/1.05 "Chakra Petch", sans-serif;
  letter-spacing: 0.05em;
}

.profile-golden-reward span {
  font: 600 0.67rem/1.25 "Chakra Petch", sans-serif;
  color: rgba(232, 244, 255, 0.78);
}

.profile-golden-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  border: 2px solid rgba(255, 211, 122, 0.72);
  box-shadow:
    0 0 0 2px rgba(110, 77, 16, 0.34),
    0 0 22px rgba(255, 204, 104, 0.32),
    inset 0 0 22px rgba(255, 224, 142, 0.16);
}

.profile-golden-reward.is-unlocked {
  border-color: rgba(255, 210, 120, 0.68);
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 202, 110, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(255, 228, 155, 0.14), rgba(255, 255, 255, 0.04));
}

.profile-golden-reward.is-locked {
  opacity: 0.9;
}

.profile-golden-reward.is-locked .profile-golden-icon {
  filter: grayscale(1) brightness(0.72);
}

.profile-banner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.profile-banner-choice {
  position: relative;
  padding: 7px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.profile-banner-choice.is-preview {
  border-color: rgba(89, 240, 194, 0.5);
  background: linear-gradient(180deg, rgba(89, 240, 194, 0.16), rgba(255, 255, 255, 0.04));
}

.profile-banner-choice.is-locked {
  opacity: 0.64;
}

.profile-banner-choice.is-locked .banner-preview {
  filter: grayscale(1) brightness(0.55);
}

.profile-banner-choice.is-equipped::after,
.profile-icon-choice.is-equipped::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  right: 9px;
  top: 9px;
  border-radius: 50%;
  background: #4ca8ff;
  box-shadow: 0 0 0 2px #13203b, 0 0 10px rgba(76, 168, 255, 0.6);
}

.profile-config-panel {
  margin-top: 12px;
}

#profileConfigPanel,
#profilePasswordPanel,
#profileDeletePanel {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 18px 14px;
  width: 100%;
  max-height: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  z-index: 14;
  background: rgba(0, 0, 0, 0.72);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.profile-modal-card {
  width: min(100%, 380px);
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  padding: 18px 16px;
  display: grid;
  gap: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    var(--card);
  box-shadow: var(--shadow);
}

.profile-config-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.profile-config-head > .icon-button {
  min-width: 0;
  padding: 9px 12px;
}

.profile-config-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-delete-open {
  grid-column: 1 / -1;
}

.danger-button {
  background: rgba(255, 107, 124, 0.12);
  color: #ffd9de;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 124, 0.2);
}

.profile-password-step {
  display: grid;
  gap: 12px;
}

.profile-password-question {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.profile-delete-warning {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 107, 124, 0.28);
  background: rgba(255, 107, 124, 0.08);
  color: #ffdbe1;
}

.profile-icon-panel {
  display: grid;
  gap: 0;
  justify-items: stretch;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.profile-icon-preview {
  width: 132px;
  height: 132px;
  border-width: 2px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.profile-icon-panel .profile-icon-preview {
  display: none !important;
}

.profile-icon-meta {
  display: grid;
  gap: 0;
  justify-items: stretch;
  text-align: center;
}

.profile-icon-meta h3,
.profile-icon-meta p {
  margin: 0;
}

.profile-equip-button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.profile-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.profile-icon-choice {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.profile-icon-choice.is-preview {
  border-color: rgba(89, 240, 194, 0.5);
  background: linear-gradient(180deg, rgba(89, 240, 194, 0.16), rgba(255, 255, 255, 0.04));
}

.profile-icon-choice.is-locked {
  opacity: 0.64;
}

.profile-icon-choice.is-locked .avatar-mini {
  filter: grayscale(1) brightness(0.55);
}

.profile-icon-choice .avatar-mini {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.social-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

label {
  display: grid;
  gap: 7px;
  font-size: 0.9rem;
}

input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 13px 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
}

input:focus {
  outline: 2px solid rgba(89, 240, 194, 0.32);
  border-color: transparent;
}

#registerCountry,
#playerCountry {
  display: none;
}

.picker-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.picker-button:focus {
  outline: 2px solid rgba(89, 240, 194, 0.32);
  border-color: transparent;
}

.picker-caret {
  color: var(--accent);
  font: 700 0.84rem/1 "Chakra Petch", sans-serif;
}

.choice-list {
  display: grid;
  gap: 8px;
}

.choice-option {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.choice-option.is-selected {
  border-color: rgba(89, 240, 194, 0.5);
  background: rgba(89, 240, 194, 0.14);
  color: var(--accent);
}

.choice-option:focus {
  outline: 2px solid rgba(89, 240, 194, 0.32);
  border-color: transparent;
}

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

.stack-list {
  display: grid;
  gap: 9px;
}

.stack-list.compact {
  gap: 8px;
}

.list-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.list-card strong {
  display: block;
  margin-bottom: 3px;
  font-family: "Chakra Petch", sans-serif;
}

.list-card span {
  color: var(--muted);
  font-size: 0.84rem;
}

.list-card-player {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.list-card-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.list-card-player > div:last-child {
  min-width: 0;
}

.list-card-player strong,
.list-card-player span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mini-action {
  border: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(89, 240, 194, 0.14);
  color: var(--accent);
  font: 700 0.78rem/1 "Chakra Petch", sans-serif;
  cursor: pointer;
}

.mini-action.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.mini-action[disabled] {
  opacity: 0.45;
  cursor: default;
}

.small-gap {
  margin-top: 4px;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: calc(100% - 20px);
  max-width: 428px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border-radius: 24px;
  background: rgba(9, 14, 27, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}

@media (min-width: 700px) {
  .phone-shell {
    max-width: min(920px, 100vw);
    padding-bottom: 96px;
  }

  .phone-shell.is-playing {
    max-width: min(980px, 100vw);
    padding-bottom: 96px;
  }

  .app {
    padding: 22px 22px 14px;
  }

  .app.is-playing {
    padding: 12px 12px 14px;
  }

  .screen[data-screen="play"] {
    max-width: 920px;
    margin: 0 auto;
  }

  .screen[data-screen="play"] .game-card {
    padding: 12px;
    gap: 12px;
  }

  .screen[data-screen="play"].is-playing .game-card {
    padding: 10px;
    gap: 10px;
  }

  .screen[data-screen="play"] .game-board,
  .screen[data-screen="play"].is-playing .game-board {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
    max-height: min(68dvh, 860px);
    margin: 0 auto;
  }

  .screen[data-screen="play"] .game-description-panel {
    font-size: 0.9rem;
    min-height: 70px;
  }

  .hud-row {
    gap: 12px;
  }

  .hud-chip {
    padding: 13px 14px;
  }

  .bottom-nav {
    width: min(780px, calc(100% - 32px));
    max-width: min(780px, calc(100% - 32px));
    bottom: 14px;
    padding: 11px;
  }
}

.nav-item {
  padding: 12px 8px;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
}

.nav-item.is-active {
  background: rgba(89, 240, 194, 0.14);
  color: var(--accent);
}

.nav-item:disabled,
.nav-item.is-locked {
  opacity: 0.38;
  pointer-events: none;
}

.nav-item-icon {
  display: grid;
  place-items: center;
  min-height: 48px;
  position: relative;
}

.nav-item-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  opacity: 0.96;
  -webkit-mask: center / contain no-repeat var(--nav-icon);
  mask: center / contain no-repeat var(--nav-icon);
}

.nav-item-icon.is-active::before {
  transform: scale(1.04);
}

.nav-item-icon[data-open-screen="shop"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h2.1l1 2H20l-1.9 6.6H8.3L7.6 10H6.3l-.4-1.6h2l.4 1.9h8.5l1-3.5H8.1L6.8 5H4Zm5.3 15a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4Zm6.9 0a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4Z'/%3E%3C/svg%3E");
}

.nav-item-icon[data-open-screen="play"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 4.8c0-1 .8-1.6 1.7-1.1l10 5.8c.9.5.9 1.8 0 2.3l-10 5.8c-.9.5-1.7-.1-1.7-1.1V4.8Z'/%3E%3C/svg%3E");
}

.nav-item-icon[data-open-screen="rank"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v4h3v2.2c0 2.5-1.7 4.2-4.2 4.8A5.4 5.4 0 0 1 13 16.7V19h3v2H8v-2h3v-2.3A5.4 5.4 0 0 1 8.2 14C5.7 13.4 4 11.7 4 9.2V7h3V3Zm-1 6v.2c0 1 .6 1.8 1.6 2.2A5.8 5.8 0 0 1 7 9V9H6Zm12 0h-1v.1c0 .9-.2 1.7-.6 2.3 1-.4 1.6-1.2 1.6-2.2V9Zm-9-4v4.2c0 1.8 1.2 3 3 3s3-1.2 3-3V5H9Z'/%3E%3C/svg%3E");
}

.nav-item-icon[data-open-screen="profile"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.2a4.2 4.2 0 1 1 0 8.4 4.2 4.2 0 0 1 0-8.4Zm0 10.4c4.2 0 7.3 2.2 7.3 5.1V21H4.7v-2.3c0-2.9 3.1-5.1 7.3-5.1Z'/%3E%3C/svg%3E");
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  z-index: 10;
}

.modal.hidden {
  display: none;
}

.modal-card {
  width: min(100%, 340px);
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, #12214b, #0b1329);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
}

.unlock-modal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(89, 240, 194, 0.16), transparent 48%),
    radial-gradient(circle at 50% 22%, rgba(255, 209, 91, 0.16), transparent 38%),
    linear-gradient(180deg, #132650, #091121);
  animation: unlock-pop 420ms cubic-bezier(.18,.88,.26,1.18);
}

.unlock-modal-card::before,
.unlock-modal-card::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.unlock-modal-card::after {
  inset: 34px;
  border-color: rgba(89, 240, 194, 0.18);
}

.unlock-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.unlock-rings::before,
.unlock-rings::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 122px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.68);
  border: 2px solid rgba(89, 240, 194, 0.34);
  box-shadow: 0 0 36px rgba(89, 240, 194, 0.22);
  animation: unlock-ring 1.6s ease-out infinite;
}

.unlock-rings::after {
  border-color: rgba(255, 209, 91, 0.36);
  animation-delay: 220ms;
}

.unlock-icon {
  width: 132px;
  height: 132px;
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 8px rgba(89, 240, 194, 0.09),
    0 18px 42px rgba(0, 0, 0, 0.4),
    0 0 42px rgba(89, 240, 194, 0.24);
  animation: unlock-float 1.45s ease-in-out infinite;
}

.unlock-banner {
  width: 186px;
  height: 58px;
  position: relative;
  z-index: 1;
  border-radius: 18px;
  box-shadow:
    0 0 0 8px rgba(89, 240, 194, 0.07),
    0 18px 42px rgba(0, 0, 0, 0.4),
    0 0 42px rgba(89, 240, 194, 0.2);
  animation: unlock-float 1.45s ease-in-out infinite;
}

.unlock-modal-card h2,
.unlock-modal-card p {
  margin: 0;
  position: relative;
  z-index: 1;
}

.country-modal-card {
  width: min(100%, 380px);
  display: grid;
  gap: 12px;
}

.update-modal-card {
  display: grid;
  gap: 12px;
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(89, 240, 194, 0.18), transparent 42%),
    linear-gradient(180deg, #13244e, #091121);
}

.update-modal-card h2,
.update-modal-card p {
  margin: 0;
}

.guest-guide-card {
  width: min(100%, 380px);
  display: grid;
  gap: 12px;
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(89, 240, 194, 0.14), transparent 42%),
    linear-gradient(180deg, #13244e, #091121);
}

.guest-guide-card h2,
.guest-guide-card h3,
.guest-guide-card p {
  margin: 0;
}

.guest-guide-grid {
  display: grid;
  gap: 9px;
}

.guest-guide-item {
  display: none;
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
}

.guest-guide-item.is-active {
  display: grid;
  animation: guideStepIn 360ms cubic-bezier(.2,.88,.24,1);
  opacity: 1;
  transform: none;
}

.guest-guide-item h3 {
  font-size: 0.92rem;
}

.guest-guide-item .tiny-copy {
  font-size: 0.78rem;
}

.guest-guide-visual {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guest-guide-visual.lives span {
  color: #ff6b7c;
  font-size: 1.05rem;
}

.guest-guide-visual.race {
  gap: 6px;
}

.dot-player,
.dot-rival {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  height: 22px;
  padding: 0 8px;
  font: 700 0.68rem/1 "Chakra Petch", sans-serif;
}

.dot-player {
  background: rgba(89, 240, 194, 0.22);
  color: var(--accent);
}

.dot-rival {
  width: 22px;
  padding: 0;
  background: rgba(255, 209, 91, 0.26);
}

.guest-guide-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  transition: transform 180ms ease, background-color 180ms ease;
}

.guide-dot.is-active {
  background: var(--accent);
  transform: scale(1.22);
}

@keyframes guideStepIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.country-picker-list {
  max-height: min(54vh, 360px);
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.country-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.country-option:hover,
.country-option.is-selected {
  border-color: rgba(89, 240, 194, 0.45);
  background: rgba(89, 240, 194, 0.12);
}

.country-option:focus {
  outline: 2px solid rgba(89, 240, 194, 0.32);
  border-color: transparent;
}

.country-check {
  color: var(--accent);
  font: 700 0.82rem/1 "Chakra Petch", sans-serif;
}

.country-empty {
  padding: 10px 2px 0;
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

@keyframes unlock-pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes unlock-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.03);
  }
}

@keyframes unlock-ring {
  0% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.62);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseIn {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  70% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Competitive theme overlay: visual-only changes */
:root {
  --bg: #04111c;
  --bg-2: #0a2638;
  --card: #0c2233;
  --card-2: #123149;
  --line: rgba(201, 168, 106, 0.28);
  --text: #eef7ff;
  --muted: #9fb8cb;
  --accent: #4fc8d9;
  --accent-2: #c9a86a;
  --danger: #ff6b7c;
  --shadow: 0 20px 56px rgba(2, 9, 14, 0.58);
}

html,
body {
  font-family: "Rajdhani", "Space Grotesk", sans-serif !important;
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(201, 168, 106, 0.22), transparent 62%),
    radial-gradient(100% 70% at 12% 0%, rgba(79, 200, 217, 0.18), transparent 62%),
    linear-gradient(180deg, #04111c 0%, #08283d 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 84% 16%, rgba(79, 200, 217, 0.09), transparent 24%),
    repeating-radial-gradient(circle at 50% 25%, rgba(201, 168, 106, 0.09) 0 1px, transparent 1px 36px),
    linear-gradient(180deg, transparent 72%, rgba(2, 8, 12, 0.34) 100%);
}

.phone-shell,
.app {
  position: relative;
  z-index: 1;
}

.splash-screen,
.login-screen {
  background:
    radial-gradient(120% 64% at 50% -16%, rgba(201, 168, 106, 0.18), transparent 58%),
    linear-gradient(180deg, #03101a, #0a2436) !important;
}

.login-card,
.hero-card,
.section-card,
.game-card {
  background:
    linear-gradient(165deg, rgba(201, 168, 106, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 34%),
    #0b2234 !important;
  border: 1px solid rgba(201, 168, 106, 0.38) !important;
  box-shadow:
    0 18px 44px rgba(2, 8, 12, 0.52),
    inset 0 0 0 1px rgba(79, 200, 217, 0.12) !important;
}

h1,
h2,
h3 {
  font-family: "Cinzel", "Chakra Petch", sans-serif !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.micro-label {
  color: #d9ba7e !important;
  letter-spacing: 0.2em;
}

.topbar h1,
.topbar h2 {
  text-shadow: 0 3px 18px rgba(5, 17, 24, 0.78);
}

.hero-card-compact {
  background:
    radial-gradient(circle at 12% 14%, rgba(79, 200, 217, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(201, 168, 106, 0.09), rgba(9, 32, 48, 0.95)) !important;
  border-color: rgba(201, 168, 106, 0.46) !important;
}

.shop-item,
.leaderboard-list li,
.hud-chip,
.profile-card,
.friend-item {
  background: linear-gradient(180deg, rgba(17, 48, 70, 0.9), rgba(8, 31, 45, 0.92)) !important;
  border-color: rgba(201, 168, 106, 0.24) !important;
}

.primary-button {
  background: linear-gradient(150deg, #e3c997, #b88f4f) !important;
  color: #231706 !important;
  box-shadow: 0 14px 28px rgba(166, 126, 58, 0.34) !important;
}

.icon-button {
  background: linear-gradient(180deg, rgba(13, 44, 63, 0.95), rgba(9, 33, 47, 0.96)) !important;
  color: #d6e4f0 !important;
  box-shadow: inset 0 0 0 1px rgba(79, 200, 217, 0.22) !important;
}

.tab,
.shop-category,
.nav-item {
  background: rgba(15, 46, 66, 0.9) !important;
  color: #a9c2d5 !important;
  border: 1px solid rgba(79, 200, 217, 0.2) !important;
}

.tab.is-active,
.shop-category.is-active,
.nav-item.is-active {
  color: #2a1906 !important;
  background: linear-gradient(150deg, #e3c997, #bc9153) !important;
  border-color: rgba(201, 168, 106, 0.8) !important;
  box-shadow: 0 10px 22px rgba(167, 126, 58, 0.34) !important;
}

.bottom-nav {
  background:
    linear-gradient(180deg, rgba(8, 29, 43, 0.98), rgba(6, 22, 33, 0.98)) !important;
  border-color: rgba(201, 168, 106, 0.42) !important;
  box-shadow:
    0 18px 44px rgba(2, 9, 14, 0.62),
    inset 0 0 0 1px rgba(79, 200, 217, 0.09) !important;
}

.game-board {
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 200, 217, 0.16), transparent 54%),
    linear-gradient(180deg, #071725, #04111b) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.24) !important;
}

#gameCanvas {
  background: linear-gradient(180deg, rgba(10, 34, 52, 0.62), rgba(4, 16, 26, 0.94)) !important;
}

.leaderboard-list li:nth-child(1) {
  background: linear-gradient(180deg, rgba(176, 130, 52, 0.34), rgba(12, 38, 54, 0.94)) !important;
}

.leaderboard-list li:nth-child(2) {
  background: linear-gradient(180deg, rgba(153, 165, 185, 0.3), rgba(10, 35, 52, 0.94)) !important;
}

.leaderboard-list li:nth-child(3) {
  background: linear-gradient(180deg, rgba(162, 113, 68, 0.28), rgba(10, 33, 50, 0.94)) !important;
}

.leaderboard-player-card,
.leaderboard-player-toggle {
  border-color: rgba(201, 168, 106, 0.58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(79, 200, 217, 0.14),
    0 15px 30px rgba(2, 8, 12, 0.46) !important;
}

/* Competitive theme v2: hard override for unmistakable visual change */
:root {
  --bg: #050f19 !important;
  --bg-2: #102f47 !important;
  --card: #102a3e !important;
  --card-2: #163954 !important;
  --line: rgba(216, 179, 108, 0.5) !important;
  --text: #f6fbff !important;
  --muted: #b8cad8 !important;
  --accent: #50d1dd !important;
  --accent-2: #ddb677 !important;
}

html,
body {
  background:
    radial-gradient(140% 90% at 50% -30%, rgba(221, 182, 119, 0.3), transparent 58%),
    radial-gradient(90% 60% at 100% 0%, rgba(80, 209, 221, 0.18), transparent 66%),
    linear-gradient(180deg, #03101a 0%, #143953 100%) !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(transparent 97%, rgba(221, 182, 119, 0.08) 100%),
    linear-gradient(90deg, transparent 97%, rgba(80, 209, 221, 0.05) 100%);
  background-size: 100% 32px, 32px 100%;
}

.login-card,
.hero-card,
.section-card,
.game-card,
.shop-item,
.list-card,
.mini-card,
.leaderboard-list li,
.hud-chip,
.profile-card,
.friend-item {
  border: 2px solid rgba(221, 182, 119, 0.52) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(160deg, rgba(221, 182, 119, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(22, 57, 84, 0.95), rgba(10, 31, 46, 0.96)) !important;
  box-shadow:
    0 16px 36px rgba(2, 10, 16, 0.55),
    inset 0 0 0 1px rgba(80, 209, 221, 0.16) !important;
}

.topbar {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(221, 182, 119, 0.35);
}

h1,
h2,
h3 {
  color: #f4e4c4 !important;
}

.shop-player-name,
#leaderboardPlayerName,
.leaderboard-list strong,
.list-card strong {
  color: #f7ecd8 !important;
}

.primary-button {
  background: linear-gradient(180deg, #f0d5a3, #c7964f) !important;
  color: #231200 !important;
  border: 1px solid rgba(108, 69, 20, 0.5) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.icon-button {
  border: 1px solid rgba(80, 209, 221, 0.3) !important;
}

.tab,
.shop-category,
.nav-item {
  border: 1px solid rgba(80, 209, 221, 0.35) !important;
  background: rgba(16, 47, 69, 0.92) !important;
}

.tab.is-active,
.shop-category.is-active,
.nav-item.is-active {
  background: linear-gradient(180deg, #f0d5a3, #c7964f) !important;
  color: #251300 !important;
  border-color: rgba(221, 182, 119, 0.95) !important;
}

.game-board {
  border: 1px solid rgba(221, 182, 119, 0.45);
}

#gameCanvas {
  border: 1px solid rgba(80, 209, 221, 0.35);
}

.leaderboard-list li:nth-child(1) {
  border-color: rgba(244, 206, 132, 0.95) !important;
}

/* Orbital crest theme: final brand override */
:root {
  --bg: #04101b !important;
  --bg-2: #0d2a3d !important;
  --card: #0d2436 !important;
  --card-2: #14374f !important;
  --line: rgba(228, 192, 122, 0.44) !important;
  --text: #f5f9ff !important;
  --muted: #adc0d1 !important;
  --accent: #59cddd !important;
  --accent-2: #e2bf83 !important;
  --shadow: 0 22px 56px rgba(2, 9, 14, 0.6) !important;
}

html,
body {
  background:
    radial-gradient(120% 86% at 50% -24%, rgba(226, 191, 131, 0.28), transparent 62%),
    radial-gradient(96% 62% at 6% 6%, rgba(89, 205, 221, 0.16), transparent 70%),
    linear-gradient(180deg, #03101a 0%, #102d43 100%) !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(89, 205, 221, 0.09), transparent 36%),
    repeating-radial-gradient(circle at 50% 18%, rgba(226, 191, 131, 0.08) 0 1px, transparent 1px 46px);
}

body::after {
  background:
    linear-gradient(transparent 97%, rgba(226, 191, 131, 0.05) 100%),
    linear-gradient(90deg, transparent 97%, rgba(89, 205, 221, 0.04) 100%);
  background-size: 100% 36px, 36px 100%;
}

.phone-shell,
.app {
  position: relative;
  z-index: 1;
}

.splash-screen,
.login-screen {
  background:
    radial-gradient(110% 70% at 50% -18%, rgba(226, 191, 131, 0.22), transparent 58%),
    linear-gradient(180deg, #03101a, #0f2940) !important;
}

.splash-mark {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(103, 231, 241, 0.3), transparent 45%),
    radial-gradient(circle at 50% 58%, rgba(10, 125, 146, 0.95), rgba(3, 36, 55, 0.98) 70%);
  border: 2px solid rgba(226, 191, 131, 0.82);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(89, 205, 221, 0.2);
}

.splash-mark.mini {
  width: 78px;
  height: 78px;
}

.splash-mark::before,
.splash-mark::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 2px solid rgba(226, 191, 131, 0.72);
  transform-origin: center;
}

.splash-mark::before {
  transform: rotate(32deg) scaleX(1.08) scaleY(0.68);
}

.splash-mark::after {
  transform: rotate(-34deg) scaleX(1.08) scaleY(0.68);
}

.mark-core {
  inset: 26%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, #f9efd8, #e8ca95 48%, #b98b45 100%);
  clip-path: polygon(50% 6%, 61% 38%, 95% 38%, 67% 57%, 78% 90%, 50% 69%, 22% 90%, 33% 57%, 5% 38%, 39% 38%);
  box-shadow:
    0 0 20px rgba(226, 191, 131, 0.42),
    0 6px 18px rgba(0, 0, 0, 0.34);
}

.mark-ring {
  inset: 10%;
  border: 3px solid rgba(226, 191, 131, 0.78);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(226, 191, 131, 0.24);
}

.mark-wing {
  display: none;
}

.login-card,
.hero-card,
.section-card,
.game-card,
.shop-item,
.list-card,
.mini-card,
.leaderboard-list li,
.hud-chip,
.profile-card,
.friend-item {
  border: 2px solid rgba(226, 191, 131, 0.5) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(160deg, rgba(226, 191, 131, 0.16), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(89, 205, 221, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(19, 55, 79, 0.95), rgba(9, 30, 45, 0.98)) !important;
  box-shadow:
    0 16px 38px rgba(2, 10, 16, 0.56),
    inset 0 0 0 1px rgba(89, 205, 221, 0.14) !important;
}

h1,
h2,
h3 {
  color: #f4e3c2 !important;
  font-family: "Cinzel", "Chakra Petch", sans-serif !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.micro-label {
  color: #e2bf83 !important;
}

.topbar {
  border-bottom: 1px solid rgba(226, 191, 131, 0.32);
  padding-bottom: 8px;
}

.tab,
.shop-category,
.nav-item,
.profile-category {
  border: 1px solid rgba(89, 205, 221, 0.36) !important;
  background: rgba(14, 44, 64, 0.9) !important;
  color: #b6c8d8 !important;
}

.tab.is-active,
.shop-category.is-active,
.nav-item.is-active,
.profile-category.is-active {
  background: linear-gradient(160deg, #f0d9ac, #c7954f) !important;
  color: #271300 !important;
  border-color: rgba(226, 191, 131, 0.95) !important;
  box-shadow: 0 10px 24px rgba(157, 115, 50, 0.38) !important;
}

.primary-button {
  background: linear-gradient(170deg, #f4dfb6, #c9954f) !important;
  color: #251400 !important;
  border: 1px solid rgba(110, 73, 23, 0.56) !important;
  box-shadow: 0 12px 24px rgba(147, 110, 48, 0.34) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.icon-button {
  border: 1px solid rgba(89, 205, 221, 0.34) !important;
  background: linear-gradient(180deg, rgba(12, 41, 60, 0.95), rgba(8, 30, 44, 0.95)) !important;
  color: #e7f3ff !important;
}

.game-board {
  border: 1px solid rgba(226, 191, 131, 0.44) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(89, 205, 221, 0.18), transparent 54%),
    linear-gradient(180deg, #071a2a, #04121d) !important;
}

#gameCanvas {
  border: 1px solid rgba(89, 205, 221, 0.36) !important;
  background: linear-gradient(180deg, rgba(12, 41, 60, 0.62), rgba(4, 17, 27, 0.94)) !important;
}

.leaderboard-player-card,
.leaderboard-player-toggle {
  border-color: rgba(226, 191, 131, 0.62) !important;
  box-shadow:
    inset 0 0 0 1px rgba(89, 205, 221, 0.14),
    0 14px 30px rgba(2, 8, 12, 0.48) !important;
}

/* Bottom nav overlap fix */
:root {
  --bottom-nav-clearance: 122px;
}

.phone-shell,
.phone-shell.is-playing {
  padding-bottom: calc(var(--bottom-nav-clearance) + env(safe-area-inset-bottom, 0px)) !important;
}

.app {
  padding-bottom: calc(14px + var(--bottom-nav-clearance) + env(safe-area-inset-bottom, 0px)) !important;
}

.app.is-playing {
  padding-bottom: calc(10px + var(--bottom-nav-clearance) + env(safe-area-inset-bottom, 0px)) !important;
}

.screen[data-screen="shop"],
.screen[data-screen="rank"],
.screen[data-screen="profile"] {
  padding-bottom: calc(var(--bottom-nav-clearance) + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom-nav {
  position: fixed !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1200 !important;
}

.leaderboard-player-dock {
  bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}