:root {

  --bg: #07080f;

  --bg-card: rgba(18, 20, 34, 0.92);

  --bg-card-hover: rgba(28, 32, 52, 0.95);

  --accent: #8b6cff;

  --accent-2: #00e8c8;

  --accent-3: #ff6b9d;

  --text: #f4f6ff;

  --muted: #9399b5;

  --danger: #ff5c7a;

  --gold: #ffcc55;

  --silver: #c8d0e8;

  --bronze: #d4956a;

  --radius: 18px;

  --radius-sm: 12px;

  --shadow: 0 16px 48px rgba(0, 0, 0, 0.5);

  --glow: 0 0 40px rgba(139, 108, 255, 0.35);

  --font: "Segoe UI", system-ui, -apple-system, sans-serif;

}



* {

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;

}



html, body {

  margin: 0;

  padding: 0;

  background: var(--bg);

  color: var(--text);

  font-family: var(--font);

  min-height: 100%;

}



body {

  background: var(--bg);

  overflow-x: hidden;

}



#app {

  position: relative;

  z-index: 1;

  max-width: 480px;

  margin: 0 auto;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.topbar {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 14px 16px 10px;

  position: sticky;

  top: 0;

  z-index: 10;

  backdrop-filter: blur(16px);

  background: var(--topbar-bg, rgba(7, 8, 15, 0.82));

  border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}



.brand {

  display: flex;

  align-items: center;

  gap: 8px;

  font-weight: 700;

  font-size: 1.08rem;

  flex: 1;

  letter-spacing: -0.02em;

}



.brand-mark {

  color: var(--accent-2);

  font-size: 1.25rem;

  filter: drop-shadow(0 0 8px rgba(0, 232, 200, 0.5));

}



.brand-logo {

  width: 24px;

  height: 24px;

  border-radius: 8px;

  object-fit: cover;

  display: block;

}



.kyber-watermark {

  margin: 18px 0 8px;

  text-align: center;

  font-size: 0.72rem;

  color: var(--muted);

  opacity: 0.75;

}

.kyber-watermark a {
  color: var(--muted);
  text-decoration: none;
}

.kyber-watermark a:hover {
  color: var(--accent-2);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 4px;
  flex-wrap: wrap;
}

.footer-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 1.1rem;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.footer-link-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--glow-a-18);
}

.brand-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  animation: brandSplashIn 0.35s ease;
}

.brand-splash-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.brand-splash-inner {
  text-align: center;
  padding: 24px;
  max-width: 280px;
}

.brand-splash-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 18px;
  margin-bottom: 16px;
}

.brand-splash-mark {
  display: inline-block;
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 16px;
}

.brand-splash-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}

.brand-splash-sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 20px;
}

.brand-splash-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.brand-splash-bar span {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  animation: brandSplashBar 1s ease-in-out infinite;
}

@keyframes brandSplashIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes brandSplashBar {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(120%); }
  100% { transform: translateX(250%); }
}

.streak-panel {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}

.streak-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.streak-fire {
  font-size: 1.8rem;
  line-height: 1;
}

.streak-main strong {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.streak-count {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-2);
}

.streak-sub {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}

.streak-drop {
  margin-top: 12px;
}

.streak-drop-track {
  display: flex;
  gap: 6px;
  align-items: center;
}

.streak-dot {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s, box-shadow 0.2s;
}

.streak-dot.on {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.streak-dot.drop {
  height: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.streak-dot.drop.on {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

.streak-drop-hint {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.streak-panel-drop {
  border-color: rgba(251, 191, 36, 0.35);
}

.streak-meta {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.streak-shields {
  color: var(--accent-3, var(--accent));
}

.streak-shop {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.streak-shop-hint {
  margin: 0 0 8px;
  font-size: 0.76rem;
  color: var(--muted);
}

.streak-shop-meta {
  margin-top: 8px;
  text-align: center;
}



.points-pill {

  background: linear-gradient(135deg, rgba(139, 108, 255, 0.4), rgba(0, 232, 200, 0.22));

  border: 1px solid rgba(139, 108, 255, 0.5);

  padding: 7px 14px;

  border-radius: 999px;

  font-size: 0.82rem;

  font-weight: 700;

  white-space: nowrap;

  box-shadow: var(--glow);

}



.icon-btn {

  width: 38px;

  height: 38px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: var(--bg-card);

  color: var(--text);

  font-size: 1.15rem;

  cursor: pointer;

  transition: background 0.15s, transform 0.1s;

}



.icon-btn:active {

  transform: scale(0.94);

}



.icon-btn.hidden,

.hidden {

  display: none !important;

}



.screen {

  flex: 1;

  padding: 4px 16px 36px;

  animation: fadeIn 0.35s ease;

}

.boot-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50vh;
  color: var(--muted);
}

.boot-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(139, 108, 255, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: boot-spin 0.8s linear infinite;
}

@keyframes boot-spin {
  to { transform: rotate(360deg); }
}



@keyframes fadeIn {

  from { opacity: 0; transform: translateY(6px); }

  to { opacity: 1; transform: translateY(0); }

}



.hero {

  text-align: center;

  padding: 16px 0 22px;

}



.hero h1 {

  margin: 0 0 8px;

  font-size: 1.65rem;

  font-weight: 800;

  letter-spacing: -0.03em;

  background: linear-gradient(135deg, #fff 30%, var(--accent-2));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.hero p {

  margin: 0;

  color: var(--muted);

  font-size: 0.92rem;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: 10px;

  padding: 6px 14px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  font-size: 0.8rem;

  color: var(--muted);

}



.promo-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 14px;
  border-radius: var(--radius, 16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, var(--glow-a-12, rgba(139, 108, 255, 0.12)), transparent 55%),
    linear-gradient(225deg, var(--glow-b-12, rgba(0, 232, 200, 0.1)), transparent 50%),
    var(--bg-card, rgba(18, 20, 34, 0.92));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.promo-banner--image {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: none;
  background: transparent;
}

.promo-banner-bg {
  position: absolute;
  inset: 0;
  background-image: var(--promo-bg-image);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius, 16px);
}

.promo-banner--image-only {
  min-height: 104px;
}

.promo-banner-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius, 16px);
  background:
    linear-gradient(135deg, rgba(7, 8, 15, 0.78), rgba(7, 8, 15, 0.42)),
    linear-gradient(225deg, rgba(7, 8, 15, 0.55), transparent 60%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.promo-banner-overlay--btn-only {
  min-height: 104px;
  align-items: flex-end;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent 35%, rgba(7, 8, 15, 0.72));
}

.promo-banner--image-only .promo-banner-bg {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.promo-banner-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.promo-banner-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promo-banner-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text, #f4f6ff);
}

.promo-banner-btn {
  align-self: flex-start;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--bg, #07080f);
  background: linear-gradient(135deg, var(--accent, #8b6cff), var(--accent-2, #00e8c8));
  box-shadow: 0 4px 14px var(--glow-a-18, rgba(139, 108, 255, 0.18));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.promo-banner-btn:active {
  transform: scale(0.97);
}



.stat-cards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-bottom: 14px;

}



.stat-card {

  background: var(--bg-card);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: var(--radius-sm);

  padding: 14px 10px;

  text-align: center;

  backdrop-filter: blur(8px);

}



.stat-card .val {

  display: block;

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--accent-2);

  line-height: 1.2;

}



.stat-card .lbl {

  display: block;

  font-size: 0.68rem;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.06em;

  margin-top: 4px;

}



.section-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin: 20px 0 12px;

}



.section-head h2 {

  margin: 0;

  font-size: 1.1rem;

  font-weight: 700;

}



.section-head .link-btn {

  background: none;

  border: none;

  color: var(--accent-2);

  font-family: var(--font);

  font-size: 0.82rem;

  font-weight: 600;

  cursor: pointer;

  padding: 8px 12px;

  min-height: 44px;

  border-radius: 8px;

}

.section-head .link-btn:active {

  opacity: 0.7;

}

@media (hover: hover) {

  .section-head .link-btn:hover {

    text-decoration: underline;

  }

}



.game-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}

.hub-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.hub-menu-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 108px;
  padding: 16px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--bg-card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hub-menu-tile:active {
  transform: scale(0.98);
}

.hub-menu-tile .tile-icon {
  font-size: 1.45rem;
  line-height: 1;
}

.hub-menu-tile .tile-title {
  font-size: 0.92rem;
  font-weight: 700;
}

.hub-menu-tile .tile-desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.hub-menu-tile .tile-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.62rem;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

body.kyber-layout-menu .screen.hub-menu-home {
  padding-bottom: 24px;
}

/* ─── Horizontal pages layout (Blum-style swipe) ─── */
html:has(body.kyber-layout-pages),
body.kyber-layout-pages {
  height: 100%;
  overflow: hidden;
}

body.kyber-layout-pages #app {
  padding-bottom: 0;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
}

body.kyber-layout-pages .screen.pages-hub {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  min-height: 0;
}

.pages-hub-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.pages-viewport {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 0;
  touch-action: pan-y;
}

.pages-track {
  display: flex;
  height: 100%;
  min-height: 0;
  will-change: transform;
}

.page-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 14px 28px; /* room for overlaid dots */
  box-sizing: border-box;
}

/* Slide / none — horizontal track */
body.pages-anim-slide .pages-track,
body.pages-anim-none .pages-track {
  width: 100%;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}

body.pages-anim-none .pages-track {
  transition: none;
}

/* Fade / scale / blur — stacked pages */
body.pages-anim-fade .pages-track,
body.pages-anim-scale .pages-track,
body.pages-anim-blur .pages-track {
  display: block;
  position: relative;
  width: 100%;
  transform: none !important;
}

body.pages-anim-fade .page-slide,
body.pages-anim-scale .page-slide,
body.pages-anim-blur .page-slide {
  position: absolute;
  inset: 0;
  flex: none;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

body.pages-anim-fade .page-slide {
  transition: opacity 0.34s ease;
}

body.pages-anim-fade .page-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

body.pages-anim-scale .page-slide {
  transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  transform: scale(0.94);
}

body.pages-anim-scale .page-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

body.pages-anim-blur .page-slide {
  transition: opacity 0.36s ease, filter 0.36s ease;
  filter: blur(8px);
}

body.pages-anim-blur .page-slide.is-active {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  body[class*="pages-anim-"] .pages-track,
  body[class*="pages-anim-"] .page-slide {
    transition: none !important;
  }
}

.page-slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--bg, #07080f) 65%, transparent);
}

.page-slide-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-inner {
  min-height: 0;
  padding-bottom: 4px;
}

.page-home .hero {
  padding-top: 8px;
  padding-bottom: 14px;
}

.page-home .hero h1 {
  font-size: 1.45rem;
}

.pages-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0;
  pointer-events: none;
}

.pages-dots .pages-dot {
  pointer-events: auto;
}

.pages-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.18);
  transition: width 0.25s ease, background 0.25s ease;
  cursor: pointer;
}

.pages-dot.active {
  width: 18px;
  background: var(--accent, #8b6cff);
}

.pages-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--topbar-bg, rgba(7, 8, 15, 0.92));
  backdrop-filter: blur(16px);
  flex-shrink: 0;
}

.pages-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 4px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.pages-nav-btn .nav-ico {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.pages-nav-btn.active {
  color: var(--accent-2, #00e8c8);
  background: rgba(255, 255, 255, 0.04);
}

.pages-nav-btn.active .nav-ico {
  transform: scale(1.08);
}

.pages-nav-btn:active {
  transform: scale(0.96);
}

body.kyber-layout-pages .lang-fab {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

.page-slide .game-grid {
  margin-top: 4px;
}

.page-slide .panel {
  margin-bottom: 12px;
}

.page-swipe-hint {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 10px;
  opacity: 0.85;
}



.game-card {

  position: relative;

  background: var(--bg-card);

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: var(--radius);

  padding: 20px 14px 16px;

  text-align: center;

  cursor: pointer;

  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;

  box-shadow: var(--shadow);

  overflow: hidden;

}

.game-card--cover {
  padding: 0 0 14px;
  text-align: left;
}

.game-card-cover {
  position: relative;
  width: calc(100% - 20px);
  margin: 10px 10px 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0a1520;
  border-radius: 22%;
  border: 1px solid rgba(232, 168, 56, 0.22);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.game-card--cover:hover:not(.locked) .game-card-cover img {
  transform: scale(1.06);
}

.game-card-cover::after {
  content: none;
}

.game-card-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: rgba(6, 8, 14, 0.55);
  z-index: 2;
}

.game-card-body {
  padding: 12px 14px 2px;
}

.game-card--cover .name {
  font-size: 0.92rem;
}

.game-card--cover .desc {
  margin-top: 4px;
}



.game-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(145deg, rgba(139, 108, 255, 0.12), transparent 55%);

  opacity: 0;

  transition: opacity 0.2s;

}



.game-card:active {

  transform: scale(0.96);

}



.game-card:hover::before {

  opacity: 1;

}



.game-card:hover {

  border-color: rgba(139, 108, 255, 0.45);

  box-shadow: var(--shadow), var(--glow);

}



.game-card .emoji {

  font-size: 2.2rem;

  display: block;

  margin-bottom: 10px;

  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));

}



.game-card .name {

  font-weight: 700;

  font-size: 0.95rem;

}



.game-card .desc {

  color: var(--muted);

  font-size: 0.72rem;

  margin-top: 5px;

  line-height: 1.3;

}



.game-badge {

  position: absolute;

  top: 10px;

  right: 10px;

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  padding: 4px 8px;

  border-radius: 999px;

  z-index: 2;

}



.game-badge.ready {

  background: rgba(0, 232, 200, 0.18);

  color: #00e8c8;

  border: 1px solid rgba(0, 232, 200, 0.35);

  box-shadow: 0 0 12px rgba(0, 232, 200, 0.25);

}



.game-badge.active {

  background: rgba(139, 108, 255, 0.22);

  color: #b8a0ff;

  border: 1px solid rgba(139, 108, 255, 0.4);

}



.game-badge.done {

  background: rgba(255, 255, 255, 0.06);

  color: var(--muted);

  border: 1px solid rgba(255, 255, 255, 0.08);

}



.game-badge.locked {

  background: rgba(255, 92, 92, 0.12);

  color: #ff9b9b;

  border: 1px solid rgba(255, 92, 92, 0.28);

}



.game-card.locked {

  cursor: not-allowed;

  opacity: 0.72;

  border-color: rgba(255, 92, 92, 0.18);

}



.game-card.locked::before {

  background: linear-gradient(145deg, rgba(255, 92, 92, 0.08), transparent 55%);

}



.game-card.locked:hover {

  border-color: rgba(255, 92, 92, 0.28);

  box-shadow: var(--shadow);

  transform: none;

}



.game-card.locked:active {

  transform: none;

}



.plan-strip {

  margin: -4px 0 12px;

  padding: 10px 14px;

  border-radius: 12px;

  background: rgba(139, 108, 255, 0.1);

  border: 1px solid rgba(139, 108, 255, 0.22);

  color: var(--muted);

  font-size: 0.85rem;

}



.plan-lock-banner {

  margin: -4px 0 12px;

  padding: 14px 16px;

  border-radius: 12px;

  background: rgba(255, 92, 92, 0.08);

  border: 1px solid rgba(255, 92, 92, 0.22);

}



.plan-lock-title {

  font-size: 0.92rem;

  font-weight: 600;

  margin-bottom: 6px;

}



.plan-lock-hint {

  font-size: 0.82rem;

  color: var(--muted);

  line-height: 1.4;

}



.panel {

  background: var(--bg-card);

  border-radius: var(--radius);

  border: 1px solid rgba(255, 255, 255, 0.07);

  padding: 18px;

  box-shadow: var(--shadow);

  margin-bottom: 14px;

  backdrop-filter: blur(10px);

}



.panel-glow {

  border-color: rgba(139, 108, 255, 0.25);

  box-shadow: var(--shadow), 0 0 32px rgba(139, 108, 255, 0.12);

}



.panel h2 {

  margin: 0 0 14px;

  font-size: 1.15rem;

  font-weight: 700;

}



.panel h3 {

  margin: 0 0 10px;

  font-size: 0.95rem;

  color: var(--muted);

  font-weight: 600;

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  padding: 15px 18px;

  border: none;

  border-radius: 14px;

  font-family: var(--font);

  font-size: 1rem;

  font-weight: 700;

  cursor: pointer;

  color: #07080f;

  background: linear-gradient(135deg, var(--accent-2), #5ce8ff);

  box-shadow: 0 10px 28px rgba(0, 232, 200, 0.3);

  transition: transform 0.12s, box-shadow 0.15s;

}



.btn:active {

  transform: scale(0.98);

}



.btn:disabled {

  opacity: 0.4;

  cursor: not-allowed;

  box-shadow: none;

}



.btn-secondary {

  background: rgba(255, 255, 255, 0.07);

  color: var(--text);

  box-shadow: none;

  border: 1px solid rgba(255, 255, 255, 0.12);

}



.btn-gold {

  background: linear-gradient(135deg, var(--gold), #ff9f43);

  box-shadow: 0 10px 28px rgba(255, 204, 85, 0.25);

}



.stat-row {

  display: flex;

  justify-content: space-between;

  color: var(--muted);

  font-size: 0.88rem;

  margin-bottom: 8px;

}



.stat-row strong {

  color: var(--text);

  font-weight: 600;

}



.energy-bar {

  height: 10px;

  background: rgba(255, 255, 255, 0.07);

  border-radius: 999px;

  overflow: hidden;

  margin: 10px 0;

}



.energy-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--accent), var(--accent-2));

  border-radius: 999px;

  transition: width 0.3s ease;

  box-shadow: 0 0 12px rgba(0, 232, 200, 0.4);

}



.tap-stamina-bar {

  height: 8px;

  background: rgba(255, 204, 85, 0.12);

  border-radius: 999px;

  overflow: hidden;

  margin: 6px 0 10px;

}



.tap-stamina-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--gold), #ff9f43);

  border-radius: 999px;

  transition: width 0.12s ease;

  box-shadow: 0 0 10px rgba(255, 204, 85, 0.45);

}

.tap-instant .energy-fill {
  transition: width 0.08s cubic-bezier(0.22, 1, 0.36, 1);
}

.tap-instant .tap-zone {
  transition: box-shadow 0.06s, filter 0.06s, border-color 0.06s;
}

/* Zone ring only — never scale the whole zone (logo was drifting) */
.tap-instant .tap-zone.pulse {
  animation: tapPulseInstant 0.18s ease-out;
}

@keyframes tapPulseInstant {
  0% { filter: brightness(1); box-shadow: 0 0 0 8px rgba(139, 108, 255, 0.08), 0 0 80px rgba(139, 108, 255, 0.35), inset 0 -8px 24px rgba(0, 0, 0, 0.4); }
  45% { filter: brightness(1.2); box-shadow: 0 0 0 14px rgba(0, 232, 200, 0.18), 0 0 110px rgba(0, 232, 200, 0.5), inset 0 -8px 24px rgba(0, 0, 0, 0.35); }
  100% { filter: brightness(1); }
}



/* Leaderboard */

.leaderboard-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.lb-row {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  border-radius: var(--radius-sm);

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.05);

  transition: background 0.15s;

}



.lb-row.you {

  background: linear-gradient(135deg, rgba(139, 108, 255, 0.2), rgba(0, 232, 200, 0.08));

  border-color: rgba(139, 108, 255, 0.35);

}



.lb-row.top-1 {

  border-color: rgba(255, 204, 85, 0.35);

  background: linear-gradient(135deg, rgba(255, 204, 85, 0.1), transparent);

}



.lb-row.top-2 {

  border-color: rgba(200, 208, 232, 0.25);

}



.lb-row.top-3 {

  border-color: rgba(212, 149, 106, 0.25);

}



.lb-rank {

  width: 36px;

  text-align: center;

  font-size: 1.2rem;

  font-weight: 800;

  flex-shrink: 0;

}



.lb-rank .num {

  font-size: 0.9rem;

  color: var(--muted);

}



.lb-avatar {

  width: 38px;

  height: 38px;

  border-radius: 12px;

  background: linear-gradient(145deg, var(--accent), #4a3580);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 0.95rem;

  flex-shrink: 0;

}



.lb-info {

  flex: 1;

  min-width: 0;

}



.lb-name {

  font-weight: 600;

  font-size: 0.92rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.lb-sub {

  font-size: 0.72rem;

  color: var(--muted);

}



.lb-pts {

  font-weight: 800;

  font-size: 0.95rem;

  color: var(--accent-2);

  white-space: nowrap;

}



.lb-empty {

  text-align: center;

  padding: 28px 16px;

  color: var(--muted);

  font-size: 0.9rem;

}



.lb-you-banner {

  margin-top: 12px;

  padding: 12px 14px;

  border-radius: var(--radius-sm);

  background: rgba(0, 232, 200, 0.08);

  border: 1px dashed rgba(0, 232, 200, 0.35);

  text-align: center;

  font-size: 0.88rem;

}



.lb-skeleton {

  height: 52px;

  border-radius: var(--radius-sm);

  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.2s infinite;

}



@keyframes shimmer {

  0% { background-position: 200% 0; }

  100% { background-position: -200% 0; }

}



/* Memory */

.memory-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  margin: 16px 0;

  perspective: 800px;

}



.memory-card {

  aspect-ratio: 1;

  border-radius: 14px;

  border: 2px solid rgba(139, 108, 255, 0.4);

  background: linear-gradient(145deg, #252845, #14172a);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.75rem;

  cursor: pointer;

  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s;

  user-select: none;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);

}



.memory-card.flipped,

.memory-card.matched {

  background: linear-gradient(145deg, #3a2f6a, #1e1a38);

  border-color: var(--accent-2);

  box-shadow: 0 0 20px rgba(0, 232, 200, 0.2);

  transform: rotateY(180deg);

}



.memory-card.matched {

  opacity: 0.65;

  border-color: var(--gold);

}



.memory-card.back {

  color: var(--accent);

  font-size: 1.3rem;

  background: linear-gradient(145deg, #1a1d35, #0f111f);

}



.memory-card.back::after {

  content: "◆";

  filter: drop-shadow(0 0 6px rgba(139, 108, 255, 0.6));

}



.memory-card.back {

  font-size: 0;

}



.memory-card:active:not(.matched) {

  transform: scale(0.94);

}



.memory-card.match-pulse {

  animation: memoryMatchPulse 0.65s ease;

}



@keyframes memoryMatchPulse {

  0%, 100% { transform: rotateY(180deg) scale(1); box-shadow: 0 0 20px rgba(0, 232, 200, 0.2); }

  50% { transform: rotateY(180deg) scale(1.08); box-shadow: 0 0 28px rgba(255, 204, 85, 0.55); }

}



/* Tap */

.tap-zone-wrap {
  position: relative;
  width: min(240px, 78vw);
  height: min(240px, 78vw);
  margin: 28px auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tap-shockwave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid #00e8c8;
  box-shadow:
    0 0 18px rgba(0, 232, 200, 0.55),
    0 0 36px rgba(139, 108, 255, 0.35),
    inset 0 0 16px rgba(0, 232, 200, 0.2);
  pointer-events: none;
  z-index: 4;
  animation: tapShockwave 0.58s cubic-bezier(0.12, 0.7, 0.2, 1) forwards;
}

.tap-shockwave--strong {
  border-width: 3.5px;
  animation-name: tapShockwaveStrong;
}

@keyframes tapShockwave {
  0% {
    transform: scale(0.94);
    opacity: 0.95;
    border-width: 3px;
  }
  100% {
    transform: scale(1.72);
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes tapShockwaveStrong {
  0% {
    transform: scale(0.92);
    opacity: 1;
    border-width: 4px;
  }
  100% {
    transform: scale(1.95);
    opacity: 0;
    border-width: 1px;
  }
}

.panel.base-game--tap {
  overflow: visible;
}

.tap-zone {

  margin: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background:

    radial-gradient(circle at 35% 28%, rgba(139, 108, 255, 0.5), transparent 45%),

    radial-gradient(circle at 65% 75%, rgba(0, 232, 200, 0.25), transparent 40%),

    linear-gradient(160deg, #2a2055, #0e101c);

  border: 3px solid rgba(139, 108, 255, 0.55);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 3.5rem;

  cursor: pointer;

  box-shadow:

    0 0 0 8px rgba(139, 108, 255, 0.08),

    0 0 80px rgba(139, 108, 255, 0.35),

    inset 0 -8px 24px rgba(0, 0, 0, 0.4);

  transition: transform 0.05s, box-shadow 0.1s;

  user-select: none;

  touch-action: manipulation;

  -webkit-user-select: none;

  position: relative;

  overflow: hidden;

  animation: tapIdleBreathe 2.8s ease-in-out infinite;

}



.tap-zone.disabled {

  animation: none;

}



@keyframes tapIdleBreathe {

  0%, 100% {

    box-shadow:

      0 0 0 8px rgba(139, 108, 255, 0.08),

      0 0 70px rgba(139, 108, 255, 0.28),

      inset 0 -8px 24px rgba(0, 0, 0, 0.4);

  }

  50% {

    box-shadow:

      0 0 0 10px rgba(139, 108, 255, 0.12),

      0 0 95px rgba(0, 232, 200, 0.22),

      inset 0 -8px 24px rgba(0, 0, 0, 0.4);

  }

}



.tap-zone.tap-combo-glow {

  border-color: rgba(255, 204, 85, 0.55);

  animation: tapComboGlow 1.2s ease-in-out infinite;

}



.tap-zone.tap-combo-fire {

  border-color: rgba(255, 120, 60, 0.65);

  animation: tapComboFire 0.7s ease-in-out infinite;

}



@keyframes tapComboGlow {

  0%, 100% { filter: brightness(1); }

  50% { filter: brightness(1.12); }

}



@keyframes tapComboFire {

  0%, 100% {

    box-shadow:

      0 0 0 8px rgba(255, 120, 60, 0.12),

      0 0 90px rgba(255, 120, 60, 0.35),

      inset 0 -8px 24px rgba(0, 0, 0, 0.4);

  }

  50% {

    box-shadow:

      0 0 0 12px rgba(255, 204, 85, 0.18),

      0 0 110px rgba(255, 204, 85, 0.45),

      inset 0 -8px 24px rgba(0, 0, 0, 0.35);

  }

}



.tap-zone::before {

  content: "";

  position: absolute;

  inset: -50%;

  background: conic-gradient(from 0deg, transparent, rgba(0, 232, 200, 0.15), transparent);

  animation: tapSpin 4s linear infinite;

}



@keyframes tapSpin {

  to { transform: rotate(360deg); }

}



.tap-zone span,
.tap-zone-core {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: drop-shadow(0 0 16px rgba(0, 232, 200, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  transform: translateZ(0) scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

.tap-zone-core.tap-core-hit {
  animation: tapCoreZoomIn 0.22s cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* Zoom in on the logo only — stays centered, no sideways drift */
@keyframes tapCoreZoomIn {
  0% { transform: translateZ(0) scale(1); }
  55% { transform: translateZ(0) scale(1.22); }
  100% { transform: translateZ(0) scale(1); }
}

.tap-logo {
  display: block;
  width: min(120px, 42vw);
  height: min(120px, 42vw);
  max-width: 70%;
  max-height: 70%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0 0 20px rgba(139, 108, 255, 0.45));
  transform-origin: 50% 50%;
  pointer-events: none;
}

.tap-zone.pulse {
  animation: tapPulse 0.18s ease-out;
  box-shadow:
    0 0 0 10px rgba(0, 232, 200, 0.15),
    0 0 100px rgba(0, 232, 200, 0.45),
    inset 0 -6px 20px rgba(0, 0, 0, 0.35);
}

.tap-zone.crit-hit {
  animation: critHit 0.45s ease;
  box-shadow: 0 0 100px rgba(255, 204, 85, 0.6);
}

.tap-zone.crit-hit .tap-zone-core {
  animation: tapCoreZoomInCrit 0.35s cubic-bezier(0.22, 1.25, 0.36, 1);
}

@keyframes tapPulse {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.22); }
  100% { filter: brightness(1); }
}

@keyframes critHit {
  0%, 100% { filter: brightness(1); }
  30% { filter: brightness(1.25); }
}

@keyframes tapCoreZoomInCrit {
  0% { transform: translateZ(0) scale(1); }
  45% { transform: translateZ(0) scale(1.32); }
  100% { transform: translateZ(0) scale(1); }
}



.tap-ripple {

  position: absolute;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(0, 232, 200, 0.5) 0%, rgba(139, 108, 255, 0.2) 55%, transparent 70%);

  transform: scale(0);

  animation: ripple 0.42s ease-out forwards;

  pointer-events: none;

  z-index: 0;

}

.tap-spark {

  position: absolute;

  width: 6px;

  height: 6px;

  margin: -3px 0 0 -3px;

  border-radius: 50%;

  background: #00e8c8;

  box-shadow: 0 0 8px rgba(0, 232, 200, 0.9);

  pointer-events: none;

  z-index: 3;

  animation: tapSpark 0.38s ease-out forwards;

}

@keyframes tapSpark {

  0% {

    opacity: 1;

    transform: translate(0, 0) scale(1);

  }

  100% {

    opacity: 0;

    transform: translate(var(--sx), var(--sy)) scale(0.2);

  }

}



.tap-float {

  position: absolute;

  left: 50%;

  top: 42%;

  transform: translate(-50%, -50%);

  font-size: 1.15rem;

  font-weight: 800;

  color: #00e8c8;

  text-shadow: 0 0 12px rgba(0, 232, 200, 0.8);

  pointer-events: none;

  z-index: 2;

  animation: tapFloat 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;

  white-space: nowrap;

}



.tap-float.crit {

  color: #ffcc55;

  font-size: 1.25rem;

  text-shadow: 0 0 16px rgba(255, 204, 85, 0.9);

}



@keyframes tapFloat {

  0% {

    opacity: 1;

    transform: translate(-50%, -50%) scale(0.7);

  }

  25% {

    transform: translate(-50%, -65%) scale(1.15);

  }

  100% {

    opacity: 0;

    transform: translate(-50%, -120%) scale(1.05);

  }

}



@keyframes ripple {

  0% { transform: scale(0); opacity: 0.85; }

  100% { transform: scale(2.8); opacity: 0; }

}



.combo-badge {

  text-align: center;

  font-size: 1.2rem;

  color: var(--gold);

  font-weight: 800;

  text-shadow: 0 0 20px rgba(255, 204, 85, 0.4);

  display: inline-block;

}



.combo-badge.combo-hot {

  color: #ffcc55;

  text-shadow: 0 0 24px rgba(255, 204, 85, 0.65);

}



.combo-badge.combo-pop {

  animation: comboPop 0.35s ease;

}



@keyframes comboPop {

  0% { transform: scale(1); }

  40% { transform: scale(1.15); }

  100% { transform: scale(1); }

}



/* Spin */

.wheel-wrap {

  position: relative;

  width: min(260px, 85vw);

  height: min(260px, 85vw);

  margin: 24px auto;

}



.wheel-ring {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  padding: 8px;

  position: relative;

  background: linear-gradient(135deg, var(--gold), #ff9f43, var(--accent), var(--accent-2));

  box-shadow: var(--glow), 0 0 60px rgba(255, 204, 85, 0.2);

}



.wheel-ring.win-pulse {

  animation: wheelRingWinPulse 0.9s ease;

}



@keyframes wheelRingWinPulse {

  0%, 100% { transform: scale(1); filter: brightness(1); }

  50% { transform: scale(1.035); filter: brightness(1.12); box-shadow: var(--glow), 0 0 72px rgba(0, 232, 200, 0.45); }

}



.spin-countdown {

  text-align: center;

  margin: 8px 0 0;

}



.wheel-rotor {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  border: 4px solid rgba(255, 255, 255, 0.15);

  position: relative;

  overflow: hidden;

  transition: transform 3s cubic-bezier(0.12, 0.85, 0.18, 1);

}



.wheel {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  border: 4px solid rgba(255, 255, 255, 0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 3s cubic-bezier(0.12, 0.85, 0.18, 1);

  position: relative;

  overflow: hidden;

}



.wheel-inner {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 3rem;

  z-index: 4;

  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));

  pointer-events: none;

}



.wheel-labels {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  pointer-events: none;

  z-index: 1;

}



.wheel-label {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 0;

  height: 0;

  transform: rotate(var(--label-angle));

}



.wheel-label-inner {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1px;

  transform: translate(-50%, -50%) translateY(-72px) rotate(calc(-1 * var(--label-angle)));

  font-size: 0.62rem;

  line-height: 1.1;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);

  color: #fff;

  white-space: nowrap;

}



.wheel-label-inner em {

  font-style: normal;

  font-size: 0.9rem;

}



.wheel-label-inner strong {

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: -0.02em;

}



.wheel-segments {

  position: absolute;

  inset: 0;

  border-radius: 50%;

}



.wheel-pointer {

  position: absolute;

  top: -4px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 1.6rem;

  z-index: 5;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));

}



.wheel-hub {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: linear-gradient(145deg, #fff, #ccc);

  border: 3px solid var(--gold);

  z-index: 3;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

  pointer-events: none;

}



.prize-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

  margin: 12px 0;

}



.prize-chip {

  padding: 6px 12px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid color-mix(in srgb, var(--chip-color, rgba(255, 255, 255, 0.2)) 55%, transparent);

  font-size: 0.78rem;

}



.spin-result {

  text-align: center;

  padding: 16px;

  margin-top: 12px;

  border-radius: var(--radius-sm);

  background: linear-gradient(135deg, rgba(255, 204, 85, 0.15), rgba(139, 108, 255, 0.1));

  border: 1px solid rgba(255, 204, 85, 0.3);

  animation: popIn 0.4s ease;

}



@keyframes popIn {

  from { opacity: 0; transform: scale(0.9); }

  to { opacity: 1; transform: scale(1); }

}



.spin-result .big {

  font-size: 2.5rem;

  display: block;

  margin-bottom: 6px;

}



.spin-result.win {

  border-color: rgba(255, 204, 85, 0.6);

  background: linear-gradient(135deg, rgba(255, 204, 85, 0.28), rgba(255, 159, 67, 0.14));

  animation: popIn 0.4s ease, winGlow 1.8s ease-in-out infinite;

}



.spin-result.win .big {

  animation: winBounce 0.7s cubic-bezier(0.22, 1, 0.36, 1);

}



.spin-result.win strong {

  background: linear-gradient(135deg, var(--gold), #ff9f43);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  font-size: 1.15rem;

}



@keyframes winGlow {

  0%, 100% { box-shadow: 0 0 24px rgba(255, 204, 85, 0.25); }

  50% { box-shadow: 0 0 44px rgba(255, 204, 85, 0.55); }

}



@keyframes winBounce {

  0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }

  60% { transform: scale(1.25) rotate(6deg); }

  100% { transform: scale(1) rotate(0); opacity: 1; }

}



/* Box */

.box-row {

  display: flex;

  gap: 14px;

  justify-content: center;

  margin: 28px 0;

}



.chest {

  flex: 1;

  max-width: 108px;

  aspect-ratio: 0.88;

  border-radius: 16px;

  background: linear-gradient(180deg, #5c3d18 0%, #2a1a08 50%, #1a1005 100%);

  border: 2px solid #c9a227;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: 2.4rem;

  cursor: pointer;

  transition: transform 0.2s, box-shadow 0.2s;

  box-shadow:

    0 8px 0 #1a1005,

    0 12px 24px rgba(0, 0, 0, 0.4),

    inset 0 2px 0 rgba(255, 204, 85, 0.2);

  position: relative;

}



.chest::before {

  content: "";

  position: absolute;

  top: 28%;

  left: 10%;

  right: 10%;

  height: 4px;

  background: #c9a227;

  border-radius: 2px;

}



.chest:hover:not(.disabled) {

  transform: translateY(-4px);

  box-shadow:

    0 12px 0 #1a1005,

    0 0 32px rgba(255, 204, 85, 0.35);

}



.chest:active:not(.disabled) {

  transform: translateY(4px);

  box-shadow: 0 4px 0 #1a1005;

}



.chest.open {

  animation: chestOpen 0.55s ease;

  border-color: var(--accent-2);

}



.chest.disabled {

  opacity: 0.45;

  pointer-events: none;

}



.chest.winner {

  animation: chestWin 0.6s ease;

  box-shadow: 0 0 40px rgba(0, 232, 200, 0.5);

}



@keyframes chestOpen {

  0% { transform: scale(1); }

  35% { transform: scale(1.1) rotate(-4deg); }

  70% { transform: scale(1.05) rotate(2deg); }

  100% { transform: scale(1); }

}



@keyframes chestWin {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.12); }

}



.chest.idle-bounce {

  animation: chestIdleBounce 2.2s ease-in-out infinite;

}



.chest.shake {

  animation: chestShake 0.42s ease;

}



@keyframes chestIdleBounce {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-6px); }

}



@keyframes chestShake {

  0%, 100% { transform: translateX(0); }

  20% { transform: translateX(-5px) rotate(-2deg); }

  40% { transform: translateX(5px) rotate(2deg); }

  60% { transform: translateX(-4px); }

  80% { transform: translateX(4px); }

}



.box-prize-preview {

  margin-top: 8px;

}



.box-reveal {

  margin-top: 16px;

  padding: 16px;

  border-radius: var(--radius-sm);

  background: rgba(0, 232, 200, 0.08);

  border: 1px solid rgba(0, 232, 200, 0.25);

  text-align: center;

  animation: popIn 0.4s ease;

}



/* Quiz */

.quiz-options {

  display: grid;

  gap: 10px;

  margin-top: 16px;

}



.quiz-opt {

  padding: 16px 16px 16px 52px;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  text-align: left;

  cursor: pointer;

  font-family: var(--font);

  font-size: 0.95rem;

  color: var(--text);

  position: relative;

  transition: border-color 0.15s, background 0.15s, transform 0.1s;

}



.quiz-opt::before {

  content: attr(data-letter);

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  width: 28px;

  height: 28px;

  border-radius: 8px;

  background: rgba(139, 108, 255, 0.25);

  border: 1px solid rgba(139, 108, 255, 0.4);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 0.85rem;

}



.quiz-opt:active:not(:disabled) {

  transform: scale(0.98);

}



.quiz-opt.correct {

  border-color: var(--accent-2);

  background: rgba(0, 232, 200, 0.12);

}



.quiz-opt.wrong {

  border-color: var(--danger);

  background: rgba(255, 92, 122, 0.12);

}



.quiz-opt.shake,

.quiz-option.shake {

  animation: quizOptShake 0.52s ease;

}



@keyframes quizOptShake {

  0%, 100% { transform: translateX(0); }

  18% { transform: translateX(-6px); }

  36% { transform: translateX(6px); }

  54% { transform: translateX(-4px); }

  72% { transform: translateX(4px); }

}



.quiz-streak-bonus {

  margin: 4px 0 0;

  color: var(--gold);

}



.quiz-opt:disabled {

  cursor: default;

  opacity: 0.85;

}



.quiz-question {

  line-height: 1.55;

  margin: 14px 0;

  font-size: 1.02rem;

  padding: 14px;

  border-radius: var(--radius-sm);

  background: rgba(139, 108, 255, 0.08);

  border-left: 3px solid var(--accent);

}



.message {

  text-align: center;

  color: var(--muted);

  padding: 24px;

  line-height: 1.5;

}



.hint {

  color: var(--muted);

  font-size: 0.82rem;

  line-height: 1.45;

}



.quest-list {

  display: grid;

  gap: 8px;

  width: 100%;

  min-width: 0;

}



.quest-row {

  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 11px 13px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.04);

  font-size: 0.88rem;

  border: 1px solid rgba(255, 255, 255, 0.04);

}



.quest-row.loading {

  opacity: 0.6;

  pointer-events: none;

}

.quest-claim--pending { color: #ffcc55; }

.quest-claim--approved { color: var(--accent); }

.quest-claim--rejected { color: #ff6b6b; }

.quest-skeleton-list { display: flex; flex-direction: column; gap: 10px; }

.quest-skeleton-row {

  height: 64px;

  border-radius: 12px;

  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);

  background-size: 200% 100%;

  animation: questShimmer 1.2s ease-in-out infinite;

}

@keyframes questShimmer {

  0% { background-position: 200% 0; }

  100% { background-position: -200% 0; }

}



.quest-main {

  display: flex;

  align-items: flex-start;

  gap: 10px;

}



.quest-icon {

  flex-shrink: 0;

  line-height: 1.35;

}



.quest-body {

  flex: 1;

  min-width: 0;

}



.quest-label {

  font-weight: 500;

  line-height: 1.35;

}



.quest-hint {

  margin-top: 4px;

  font-size: 0.78rem;

  color: var(--text-muted, rgba(255, 255, 255, 0.55));

  line-height: 1.35;

}



.quest-pts {

  color: var(--accent-2);

  white-space: nowrap;

  flex-shrink: 0;

}



.quest-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: center;

}



.quest-wallet-input {

  flex: 1 1 100%;

  min-width: 0;

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  padding: 9px 11px;

  border-radius: 8px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(0, 0, 0, 0.25);

  color: inherit;

  font: inherit;

  font-size: 0.82rem;

}



.btn-sm {

  padding: 7px 12px;

  font-size: 0.8rem;

  border-radius: 8px;

  min-height: auto;

}



.quest-empty {

  text-align: center;

  color: var(--text-muted, rgba(255, 255, 255, 0.55));

  font-size: 0.88rem;

  padding: 8px 0;

}



.quest-row.done {

  opacity: 0.65;

}



.quest-section {

  display: grid;

  gap: 8px;

  margin-bottom: 14px;

  width: 100%;

  min-width: 0;

}



.quest-section.remunerated .quest-section-title {

  color: #ffcc55;

}



.quest-section-title {

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--text-muted, rgba(255, 255, 255, 0.55));

  margin: 2px 0 4px;

}



.quest-row.remunerated {

  border-color: rgba(255, 204, 85, 0.22);

  background: rgba(255, 204, 85, 0.06);

}



.quest-paid-badge {

  color: #ffcc55;

  font-size: 0.82rem;

}



.quest-wallet-gate {

  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 12px 14px;

  margin-bottom: 10px;

  border-radius: 12px;

  border: 1px solid rgba(255, 204, 85, 0.35);

  background: rgba(255, 204, 85, 0.08);

  width: 100%;

  min-width: 0;

  box-sizing: border-box;

}

.quest-wallet-gate--connected {

  border-color: rgba(0, 232, 200, 0.35);

  background: rgba(0, 232, 200, 0.06);

}



.quest-wallet-gate-head {

  display: flex;

  align-items: center;

  gap: 8px;

}



.quest-wallet-gate-icon {

  font-size: 1.25rem;

  flex-shrink: 0;

  line-height: 1;

}



.quest-wallet-gate-body {

  width: 100%;

  min-width: 0;

}



.quest-wallet-gate-head strong {

  font-size: 0.88rem;

  color: #ffcc55;

}



.quest-wallet-gate-body p {

  font-size: 0.78rem;

  color: var(--text-muted, rgba(255, 255, 255, 0.6));

  margin: 0 0 8px;

}



.quest-wallet-gate .quest-connect-input {

  width: 100%;

  max-width: 100%;

  margin-bottom: 8px;

  box-sizing: border-box;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: 0.72rem;

  letter-spacing: 0.02em;

}



.quest-wallet-code {

  display: inline-block;

  max-width: 100%;

  overflow-x: auto;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: 0.72rem;

  word-break: break-all;

}



.quest-wallet-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  width: 100%;

}



.quest-wallet-save-btn {

  flex: 1 1 100%;

}



.quest-row.remunerated .quest-actions {

  flex-direction: column;

  align-items: stretch;

  width: 100%;

}



.quest-referral-actions {

  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100%;

  margin-bottom: 8px;

}



.quest-referral-actions .btn {

  width: 100%;

}



.quest-row.remunerated .quest-submit-paid,
.quest-row.remunerated .quest-proof-input {

  width: 100%;

  box-sizing: border-box;

}



.quest-row.locked .quest-actions {

  opacity: 0.55;

  pointer-events: none;

}



.quest-referral-progress {

  width: 100%;

  margin-bottom: 8px;

}



.quest-referral-bar {

  height: 8px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);

  overflow: hidden;

  margin-bottom: 4px;

}



.quest-referral-fill {

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, #ffcc55, #ff9f43);

  transition: width 0.4s ease;

}



.quest-referral-count {

  font-size: 0.74rem;

  color: var(--text-muted, rgba(255, 255, 255, 0.6));

}



.quest-submit-paid[disabled] {

  opacity: 0.5;

  cursor: not-allowed;

}



.quest-ton-badge {

  color: #ffcc55;

  font-weight: 800;

  font-size: 0.88rem;

  white-space: nowrap;

}



.quest-proof-input {

  width: 100%;

  padding: 8px 10px;

  border-radius: 8px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(0, 0, 0, 0.2);

  color: inherit;

  font-size: 0.82rem;

  resize: vertical;

  min-height: 52px;

}



.quest-hint-err {

  color: #ff6b6b;

}



.quest-row strong {

  color: var(--accent-2);

  white-space: nowrap;

}



.toast {

  position: fixed;

  bottom: 28px;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(14, 16, 28, 0.96);

  border: 1px solid rgba(139, 108, 255, 0.45);

  padding: 14px 22px;

  border-radius: 14px;

  font-size: 0.9rem;

  font-weight: 600;

  z-index: 100;

  max-width: 90%;

  text-align: center;

  backdrop-filter: blur(12px);

  box-shadow: var(--shadow);

}



.crit {

  color: var(--gold);

  font-weight: 800;

  border-color: rgba(255, 204, 85, 0.5);

  animation: critFlash 0.4s ease;

}



@keyframes critFlash {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.7; transform: translateX(-50%) scale(1.04); }

}



.game-intro {

  text-align: center;

  padding: 8px 0 20px;

}



.game-intro .big-emoji {

  font-size: 3.5rem;

  display: block;

  margin-bottom: 12px;

  filter: drop-shadow(0 8px 24px rgba(139, 108, 255, 0.4));

}



.game-intro-branded {

  padding-top: 4px;

}



.game-logo {

  width: 72px;

  height: 72px;

  border-radius: 18px;

  object-fit: cover;

  display: block;

  margin: 0 auto 12px;

  border: 2px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);

}



.wheel-logo {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  margin: 0;

  object-fit: cover;

  border: 2px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);

}



.game-card-logo {

  width: 2.6rem;

  height: 2.6rem;

  border-radius: 14px;

  object-fit: cover;

  display: block;

  margin: 0 auto 8px;

  border: 2px solid rgba(255, 255, 255, 0.1);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

}



code {

  font-size: 0.85em;

  background: rgba(255, 255, 255, 0.06);

  padding: 2px 6px;

  border-radius: 4px;

}

/* Language FAB + bottom sheet */
.screen {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Pages hub: no reserved bottom gap — nav is a flex sibling */
body.kyber-layout-pages .screen.pages-hub,
body.kyber-layout-pages #screen.pages-hub {
  padding: 0 !important;
  padding-bottom: 0 !important;
}

.lang-fab {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  right: max(16px, calc(50% - 224px));
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(139, 108, 255, 0.45);
  background: rgba(14, 16, 28, 0.92);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(139, 108, 255, 0.2);
  backdrop-filter: blur(12px);
  transition: transform 0.15s, box-shadow 0.15s;
}

.lang-fab:active {
  transform: scale(0.94);
}

.lang-fab-icon {
  font-size: 1rem;
  line-height: 1;
}

.lang-fab-code {
  letter-spacing: 0.04em;
  color: var(--accent-2);
}

.lang-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(4, 5, 10, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

.lang-overlay.open {
  opacity: 1;
}

.lang-sheet {
  width: 100%;
  max-width: 420px;
  max-height: 70vh;
  background: rgba(18, 20, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 16px 16px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lang-overlay.open .lang-sheet {
  transform: translateY(0);
}

.lang-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lang-sheet-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.lang-sheet-close {
  width: 34px;
  height: 34px;
  font-size: 0.95rem;
}

.lang-sheet-list {
  padding: 8px 12px 16px;
  overflow-y: auto;
}

.lang-sheet-sub {
  margin: 4px 4px 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.lang-sheet-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.lang-sheet-row:active {
  transform: scale(0.99);
}

.lang-sheet-row.active {
  border-color: rgba(139, 108, 255, 0.45);
  background: linear-gradient(135deg, rgba(139, 108, 255, 0.18), rgba(0, 232, 200, 0.08));
}

.lang-sheet-row.locked {
  opacity: 0.55;
}

.lang-sheet-flag {
  font-size: 1.35rem;
  width: 28px;
  text-align: center;
}

.lang-sheet-name {
  flex: 1;
  font-weight: 600;
}

.lang-sheet-check {
  color: var(--accent-2);
  font-weight: 800;
}

.lang-sheet-lock {
  font-size: 0.85rem;
}

.lang-sheet-hint {
  margin: 10px 4px 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

/* ============================================================
   Polish esthétique — quick wins visuels
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* Sélection de texte aux couleurs de la marque */
::selection {
  background: rgba(139, 108, 255, 0.35);
  color: #fff;
}

/* Scrollbar discrète et brandée */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 108, 255, 0.4) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 999px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* Accessibilité — focus clavier visible */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Titre héro — dégradé animé */
.hero h1 {
  background: linear-gradient(110deg, #fff 20%, var(--accent-2) 45%, var(--accent) 70%, #fff 95%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroShine 6s linear infinite;
}
@keyframes heroShine {
  to { background-position: 220% center; }
}

/* Brand mark — pulsation douce */
.brand-mark {
  animation: brandPulse 3.2s ease-in-out infinite;
}
@keyframes brandPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 232, 200, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 16px rgba(0, 232, 200, 0.85)); transform: scale(1.08); }
}

/* Points pill — reflet + pop au survol */
.points-pill {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.points-pill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: pillShine 4.5s ease-in-out infinite;
}
@keyframes pillShine {
  0%, 65% { left: -60%; }
  85%, 100% { left: 160%; }
}
.points-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow), 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Boutons — élévation + balayage lumineux au survol */
.btn {
  position: relative;
  overflow: hidden;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 232, 200, 0.4);
}
.btn-gold:hover:not(:disabled) {
  box-shadow: 0 14px 34px rgba(255, 204, 85, 0.4);
}
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
.btn:hover:not(:disabled)::before {
  left: 130%;
}

/* Cartes de jeux — liseré supérieur + élévation plus douce */
.game-card {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, box-shadow 0.2s;
}
.game-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.game-card:hover:not(.locked) {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.game-card:hover:not(.locked)::after {
  opacity: 1;
}

/* Cartes stats — léger lift au survol */
.stat-card {
  transition: transform 0.18s ease, border-color 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 108, 255, 0.35);
}

/* Barre d'énergie — reflet animé */
.energy-fill {
  position: relative;
  overflow: hidden;
}
.energy-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  animation: energyShine 2.4s ease-in-out infinite;
}
@keyframes energyShine {
  to { transform: translateX(100%); }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .brand-mark,
  .points-pill::after,
  .energy-fill::after,
  .stagger-in,
  .screen-leave,
  .screen-enter {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Stagger, transitions, skeletons, confetti
   ============================================================ */

.screen.hub-ready .stagger-in {
  opacity: 1;
  transform: none;
}

.stagger-in {
  opacity: 0;
  animation: staggerIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--stagger, 0s);
}

@keyframes staggerIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.screen-leave {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.screen-enter {
  animation: screenEnter 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.boot-loading {
  min-height: 50vh;
  padding: 8px 0;
}

.screen-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 24px;
}

.sk-block {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

.sk-hero { height: 88px; border-radius: var(--radius); }
.sk-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sk-stat { height: 72px; }
.sk-panel { height: 110px; border-radius: var(--radius); }
.sk-panel.sk-short { height: 72px; }
.sk-intro { height: 96px; border-radius: var(--radius); }
.sk-games-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sk-game { height: 108px; border-radius: var(--radius); }

.confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* ============================================================
   Empty states
   ============================================================ */

.empty-state {
  text-align: center;
  padding: 32px 20px;
  animation: staggerIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.empty-state-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 6px 18px rgba(139, 108, 255, 0.35));
  animation: emptyFloat 3.4s ease-in-out infinite;
}

@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.empty-state-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 30%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.empty-state-body {
  margin: 0 auto;
  max-width: 300px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.empty-state-body code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.82em;
}

.empty-state .btn {
  margin-top: 16px;
  width: auto;
  padding: 10px 20px;
}

@media (prefers-reduced-motion: reduce) {
  .empty-state,
  .empty-state-icon {
    animation: none !important;
  }
}

/* Boost shop (TonConnect) */
.boost-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
}
.boost-overlay.hidden { display: none; }
.boost-sheet {
  width: min(100%, 420px);
  max-height: 85vh;
  overflow: auto;
  background: var(--panel, #1a1a2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px 18px 14px 14px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.boost-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.boost-sheet-head h3 { margin: 0; font-size: 1.05rem; }
.boost-modal-intro { margin: 0 0 8px; font-size: 0.9rem; color: var(--muted); }
.boost-modal-current { margin: 0 0 14px; }
.boost-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.boost-tier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1px solid rgba(139, 108, 255, 0.35);
  background: rgba(139, 108, 255, 0.12);
  color: inherit;
  cursor: pointer;
}
.boost-tier-mult { font-size: 1.35rem; font-weight: 800; }
.boost-tier-price { font-size: 0.85rem; font-weight: 600; }
.boost-tier-hint { font-size: 0.72rem; color: var(--muted); }
.boost-stat-card { cursor: pointer; }
.boost-stat-card:active { transform: scale(0.98); }

.transparency-panel { margin-top: 4px; }
.transparency-intro { font-size: 0.85rem; color: var(--muted); margin: 0 0 12px; line-height: 1.45; }
.transparency-trust {
  font-size: 0.78rem; color: #6ee7b7; background: rgba(110, 231, 183, 0.08);
  border: 1px solid rgba(110, 231, 183, 0.2); border-radius: 10px; padding: 10px 12px;
  margin: 0 0 12px; line-height: 1.45;
}
.transparency-wallet.tge-wallet { border-color: rgba(110, 231, 183, 0.25); }
.transparency-wallet.flex-wallet { border-color: rgba(255, 204, 85, 0.2); }
.badge-lock {
  font-size: 0.62rem; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: rgba(110, 231, 183, 0.15); color: #6ee7b7; vertical-align: middle; margin-left: 6px;
}
.transparency-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.transparency-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.transparency-stat .lbl { font-size: 0.68rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; }
.transparency-stat .val { font-size: 1rem; font-weight: 800; color: var(--accent2); }
.transparency-stat .sub { font-size: 0.72rem; color: var(--muted); }
.transparency-table-wrap { overflow-x: auto; margin-top: 8px; }
.transparency-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.transparency-table th, .transparency-table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); }
.transparency-table th { color: var(--muted); font-weight: 600; }
.transparency-table .tx-link { color: var(--accent); text-decoration: none; }
.deposit-addr { word-break: break-all; font-size: 0.78rem; margin: 0; }
.deposit-link { color: var(--accent); text-decoration: none; }
.transparency-updated { font-size: 0.72rem; margin-top: 12px; }
.transparency-teaser { padding: 12px 14px; }

/* Neon city arcade map (modern VFX) */
.arcade-arena-host { margin: 10px 0 12px; }
.arcade-start-btn { width: 100%; min-height: 52px; font-size: 1.05rem; font-weight: 900; }
.arcade-stats { margin-bottom: 4px; }
.arcade-lobby-card {
  position: relative;
  margin: 10px 0 12px;
  border: 3px solid #1a1c2c;
  border-radius: 10px;
  overflow: hidden;
  background: #5c94fc;
  min-height: 120px;
}
.arcade-lobby-sky {
  position: relative;
  height: 120px;
  overflow: hidden;
}
.arcade-lobby-cloud {
  position: absolute;
  top: 14px;
  width: 42px;
  height: 14px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 10px 4px 0 #fff, -8px 6px 0 #fff;
  opacity: 0.95;
  animation: arcadeCloudDrift 8s linear infinite;
}
.arcade-lobby-cloud.c1 { left: 12%; }
.arcade-lobby-cloud.c2 { left: 58%; top: 28px; animation-duration: 11s; animation-delay: -3s; }
@keyframes arcadeCloudDrift {
  0% { transform: translateX(0); }
  50% { transform: translateX(12px); }
  100% { transform: translateX(0); }
}
.arcade-lobby-hill {
  position: absolute;
  bottom: 22px;
  left: -10%;
  width: 120%;
  height: 48px;
  background: #00a800;
  border-radius: 50% 50% 0 0;
}
.arcade-lobby-pipe {
  position: absolute;
  bottom: 22px;
  right: 18%;
  width: 28px;
  height: 36px;
  background: #00a800;
  border: 2px solid #004800;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 4px 0 0 #80d010;
}
.arcade-lobby-pipe::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -4px;
  right: -4px;
  height: 10px;
  background: #00b800;
  border: 2px solid #004800;
  border-radius: 3px;
}
.arcade-lobby-hero {
  position: absolute;
  bottom: 26px;
  left: 22%;
  width: 18px;
  height: 22px;
  background: #e52521;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 14px 0 #3b5dc9, inset 0 -6px 0 #f8d878;
  animation: arcadeHeroBob 0.7s ease infinite;
  z-index: 2;
}
.arcade-lobby-hero::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--lobby-aura, transparent);
  opacity: 0.35;
  z-index: -1;
  filter: blur(4px);
}
.arcade-lobby-sword {
  position: absolute;
  bottom: 34px;
  left: calc(22% + 16px);
  width: 3px;
  height: 14px;
  background: var(--lobby-sword, #e2e8f0);
  border-radius: 1px;
  box-shadow: 0 0 6px var(--lobby-sword, #e2e8f0);
  transform: rotate(18deg);
  z-index: 3;
  animation: arcadeHeroBob 0.7s ease infinite;
}
.arcade-lobby-loadout {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: "Courier New", Courier, monospace;
}
@keyframes arcadeHeroBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.arcade-lobby-goomba {
  position: absolute;
  bottom: 26px;
  left: 48%;
  width: 20px;
  height: 14px;
  background: #6b3e26;
  border-radius: 10px 10px 4px 4px;
  animation: arcadeGoombaWalk 1.6s ease-in-out infinite;
}
@keyframes arcadeGoombaWalk {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(18px); }
}
.arcade-lobby-coin {
  position: absolute;
  top: 36px;
  left: 40%;
  color: #ffcc55;
  font-size: 1.1rem;
  font-weight: 900;
  animation: arcadeCoinSpin 1.2s ease infinite;
}
@keyframes arcadeCoinSpin {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.2); opacity: 0.7; }
}
.arcade-lobby-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, #c84c0c 0 14px, #803000 14px 16px),
    #c84c0c;
  border-top: 2px solid #5a2000;
}
.arcade-lobby-night {
  background: linear-gradient(180deg, #0b1020 0%, #1a1440 45%, #312e81 78%, #1e1b4b 100%) !important;
  height: 120px;
}
.arcade-lobby-moon {
  position: absolute;
  top: 14px;
  right: 18%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2e8f0;
  box-shadow: -6px -2px 0 0 #0b1020 inset, 0 0 16px rgba(226, 232, 240, 0.35);
}
.arcade-lobby-bldg {
  position: absolute;
  bottom: 22px;
  background: #1e293b;
  border: 1px solid #0f172a;
  box-shadow: inset 0 0 0 2px #0f172a;
}
.arcade-lobby-bldg::after {
  content: "";
  position: absolute;
  inset: 6px 4px auto;
  height: 60%;
  background:
    repeating-linear-gradient(90deg, #fde68a 0 3px, transparent 3px 8px),
    repeating-linear-gradient(#fde68a 0 4px, transparent 4px 10px);
  opacity: 0.55;
}
.arcade-lobby-bldg.b1 { left: 8%; width: 28px; height: 54px; }
.arcade-lobby-bldg.b2 { left: 28%; width: 40px; height: 72px; }
.arcade-lobby-bldg.b3 { right: 22%; width: 34px; height: 64px; }
.arcade-lobby-neon {
  position: absolute;
  top: 28px;
  left: 36%;
  width: 48px;
  height: 8px;
  background: #22d3ee;
  border-radius: 2px;
  box-shadow: 0 0 12px #22d3ee, 0 0 24px rgba(34, 211, 238, 0.4);
  animation: arcadeNeonPulse 1.4s ease infinite;
}
@keyframes arcadeNeonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.arcade-lobby-street {
  background:
    repeating-linear-gradient(90deg, #fbbf24 0 10px, transparent 10px 22px),
    #2a2f3a !important;
  border-top: 2px solid #475569 !important;
  height: 22px;
}
.arcade-lobby-urban .arcade-lobby-tag {
  color: #67e8f9;
}
.arcade-jumps {
  color: #67e8f9;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.arcade-jumps.is-empty { color: #64748b; }
.arcade-lives {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fda4af;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(251, 113, 133, 0.12);
  border: 1px solid rgba(251, 113, 133, 0.28);
}
.arcade-lives.is-low {
  animation: arcade-lives-pulse 0.9s ease-in-out infinite;
}
.arcade-lives.is-empty { opacity: 0.45; }
.arcade-buff {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
}
.arcade-buff--star {
  color: #422006;
  background: linear-gradient(135deg, #fde047, #fbbf24);
  box-shadow: 0 0 10px rgba(253, 224, 71, 0.45);
}
.arcade-buff--shield {
  color: #e0f2fe;
  background: rgba(14, 165, 233, 0.25);
  border: 1px solid rgba(125, 211, 252, 0.5);
}
@keyframes arcade-lives-pulse {
  0%, 100% { transform: scale(1); filter: none; }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.65)); }
}
.arcade-run--urban .arcade-stage {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: inset 0 0 40px rgba(34, 211, 238, 0.08);
}
.arcade-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  max-width: 160px;
  gap: 10px;
}
.arcade-howto {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.arcade-howto li {
  font-size: 0.82rem;
  color: var(--muted, #94a3b8);
  padding: 8px 10px;
  border-left: 3px solid #80d010;
  background: rgba(128, 208, 16, 0.06);
  border-radius: 0 8px 8px 0;
}
.arcade-hud-right { display: flex; gap: 12px; align-items: center; }
.arcade-stomps { color: #c4b5fd; }
.arcade-combat-banner {
  text-align: center;
  font-family: system-ui, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fb923c;
  margin-bottom: 6px;
  font-size: 0.95rem;
  text-shadow: 0 0 16px rgba(251, 146, 60, 0.45);
}
.arcade-timing--finisher .arcade-strike-big {
  margin-top: 4px;
  min-height: 64px;
  font-size: 1.25rem;
}
.arcade-strike-big {
  width: 100%;
  margin-top: 10px;
  min-height: 56px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #38bdf8, #6366f1 55%, #a855f7);
  color: #f8fafc;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45), 0 2px 0 rgba(15, 23, 42, 0.35);
  font-family: system-ui, "Segoe UI", sans-serif;
}
.arcade-strike-big:disabled {
  opacity: 0.35;
  filter: grayscale(0.35);
  cursor: not-allowed;
  box-shadow: none;
}
.arcade-strike-big.arcade-strike-pulse,
.arcade-strike-big.arcade-strike--hot {
  animation: arcadePulse 0.85s ease infinite;
  box-shadow: 0 0 28px rgba(163, 230, 53, 0.55), 0 8px 24px rgba(99, 102, 241, 0.4);
}
body.arcade-fs-active .topbar .brand,
body.arcade-fs-active .topbar .points-pill,
body.arcade-fs-active #pages-nav,
body.arcade-fs-active .pages-dots,
body.arcade-fs-active .game-intro,
body.arcade-fs-active .arcade-stats,
body.arcade-fs-active .arcade-skins,
body.arcade-fs-active .arcade-cosmo,
body.arcade-fs-active .arcade-start-btn,
body.arcade-fs-active .arcade-lobby-card,
body.arcade-fs-active .arcade-lobby-actions,
body.arcade-fs-active .arcade-lobby-top,
body.arcade-fs-active .arcade-howto,
body.arcade-fs-active .arcade-howto-details,
body.arcade-fs-active .prize-chips,
body.arcade-fs-active #arcade-result {
  display: none !important;
}
body.arcade-fs-active .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  padding: max(8px, env(safe-area-inset-top, 0px)) 10px 0;
}
body.arcade-fs-active #btn-back {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.arcade-fs-active #app,
body.dungeon-fs-active #app {
  max-width: none !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.arcade-fs-active #screen,
body.dungeon-fs-active #screen {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  flex: 1 !important;
}
body.arcade-fs-active .arcade-panel {
  background: #070a12 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
body.arcade-fs-active .arcade-arena-host {
  margin: 0;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #070a12;
  position: relative;
  z-index: 2;
}
/* Hide animated app backdrop during premium runs — was bleeding through arcade canvas */
body.premium-fs-active #app-backdrop,
body.arcade-fs-active #app-backdrop,
body.dungeon-fs-active #app-backdrop,
body.tower-fs-active #app-backdrop,
body.bull-fs-active #app-backdrop {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.premium-fs-active,
body.arcade-fs-active,
body.dungeon-fs-active,
body.tower-fs-active,
body.bull-fs-active {
  background: #070a12 !important;
}

.arcade-run {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #0f1424, #080b14);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arcade-run--modern {
  image-rendering: auto;
}
.arcade-run--fs {
  position: fixed;
  inset: 0;
  z-index: 80;
  border: none;
  border-radius: 0;
  padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 0%, #12182c 0%, #070a12 55%);
  gap: 6px;
}
.arcade-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.03em;
  padding: 2px 4px;
  flex-shrink: 0;
}
.arcade-hud-left {
  display: flex;
  gap: 10px;
  align-items: center;
}
.arcade-mode {
  color: #67e8f9;
  font-size: 0.62rem;
  border: 1px solid rgba(103, 232, 249, 0.55);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.1);
}
.arcade-coins { color: #fde68a; }
.arcade-build {
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.65rem;
}
.arcade-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050814;
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 14px;
  overflow: hidden;
}
.arcade-run--fs .arcade-stage {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 12px;
}
#arcade-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 400 / 240;
  background: #0a0e1a;
  image-rendering: auto;
  touch-action: none;
}
.arcade-run--fs #arcade-canvas {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  aspect-ratio: auto;
}
.arcade-dock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arcade-timing {
  margin: 0;
}
.arcade-timing-hint {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #94a3b8;
  text-align: center;
  font-family: system-ui, "Segoe UI", sans-serif;
}
.arcade-timing.arcade-timing--hot {
  box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.45), 0 0 28px rgba(163, 230, 53, 0.25);
}
.arcade-timing.arcade-timing--open {
  padding: 10px 8px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(8, 10, 18, 0.96));
  border: 1px solid rgba(34, 211, 238, 0.28);
  backdrop-filter: blur(8px);
}
.arcade-style-bonus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 0.7rem;
  color: #94a3b8;
}
.arcade-style-live { color: #fcbc78; }
.arcade-style-proj {
  color: #67e8f9;
  font-weight: 700;
}
.arcade-style-proj--hot {
  color: #fde047;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.45);
}
.arcade-coins--pulse,
.arcade-stomps--pulse {
  animation: arcade-stat-pulse 1.2s ease-in-out infinite;
}
@keyframes arcade-stat-pulse {
  50% { filter: brightness(1.25); }
}
.arcade-boss-cue {
  text-align: center;
  font-family: system-ui, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: #f87171;
  text-shadow: 0 0 16px rgba(248, 113, 113, 0.7);
  margin-bottom: 4px;
}
.arcade-boss-cue--pulse {
  animation: arcade-boss-pulse 0.55s ease-in-out infinite alternate;
}
@keyframes arcade-boss-pulse {
  from { transform: scale(1); opacity: 0.85; }
  to { transform: scale(1.06); opacity: 1; }
}
body.arcade-timing-active .arcade-dock {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(10, 12, 20, 0.95));
}
.arcade-dock--combat {
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.25);
}
.dungeon-map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 4px;
}
.dungeon-map-chip {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}
.dungeon-map-chip--rolled {
  border-color: rgba(34, 211, 238, 0.45);
  color: #67e8f9;
}
.dungeon-map-chip--active {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
}
.dmap8-tap-cue {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 4;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: #fde047;
  text-shadow: 0 0 10px rgba(253, 224, 71, 0.7);
  pointer-events: none;
}
.dmap8-tap-cue--pulse {
  animation: dmap8-tap-pulse 0.45s ease-in-out infinite alternate;
}
@keyframes dmap8-tap-pulse {
  from { opacity: 0.65; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
.dmap8-stage { position: relative; }
.arcade-timing--hot .arcade-timing-green {
  filter: brightness(1.25);
}
.arcade-strike-big.arcade-strike--hot {
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(168, 224, 48, 0.7), 0 5px 0 #92400e;
}
.arcade-pad-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 2px;
}
.arcade-move,
.arcade-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.arcade-btn {
  border: 3px solid #0a0c14;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.05s ease;
}
.arcade-btn-dir {
  width: 64px;
  height: 64px;
  font-size: 1.35rem;
  background: linear-gradient(180deg, #f04438, #c81e1e);
  box-shadow: 0 5px 0 #6b0f0f, 0 8px 16px rgba(0,0,0,0.35);
}
.arcade-btn-a,
.arcade-btn-b {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4f7cff, #2f4db8);
  box-shadow: 0 6px 0 #1a2a6e, 0 10px 18px rgba(0,0,0,0.4);
}
.arcade-btn-b {
  background: linear-gradient(180deg, #ffcc55, #e0a020);
  box-shadow: 0 6px 0 #8a6200, 0 10px 18px rgba(0,0,0,0.4);
  color: #1a1c2c;
}
.arcade-btn-b:disabled {
  opacity: 0.35;
  filter: grayscale(0.4);
  cursor: not-allowed;
  box-shadow: 0 4px 0 #5a4200;
}
.arcade-btn-b.arcade-btn-ready {
  opacity: 1;
  animation: arcadePulse 0.7s ease infinite;
  filter: none;
}
@keyframes arcadePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 0 #8a6200, 0 0 0 0 rgba(255,204,85,0.5); }
  50% { transform: scale(1.06); box-shadow: 0 6px 0 #8a6200, 0 0 0 10px rgba(255,204,85,0); }
}
.arcade-btn-key {
  font-size: 1.05rem;
  line-height: 1;
  font-family: "Courier New", Courier, monospace;
}
.arcade-btn-label {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  font-family: "Courier New", Courier, monospace;
}
.arcade-btn.is-pressed,
.arcade-btn:active {
  transform: translateY(4px) scale(0.97);
  box-shadow: 0 2px 0 #3a0808, 0 4px 8px rgba(0,0,0,0.3);
}
.arcade-btn-a.is-pressed,
.arcade-btn-a:active {
  box-shadow: 0 2px 0 #1a2a6e, 0 4px 8px rgba(0,0,0,0.3);
}
.arcade-btn-b.is-pressed,
.arcade-btn-b:active {
  box-shadow: 0 2px 0 #8a6200, 0 4px 8px rgba(0,0,0,0.3);
}
@media (max-width: 420px) {
  .arcade-btn-dir { width: 60px; height: 58px; font-size: 1.1rem; }
  .arcade-btn-a, .arcade-btn-b { width: 72px; height: 72px; }
  .arcade-strike-big { min-height: 56px; font-size: 1.1rem; }
  .arcade-dock { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .arcade-hud-left .arcade-build { font-size: 0.58rem; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dmap8-btn-dir { width: 58px; height: 52px; font-size: 1rem; }
  .dmap8-strike-btn { min-height: 58px; font-size: 1.12rem; }
  .dmap8-dock { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .dmap8-build { font-size: 0.58rem; }
  body.arcade-fs-active .arcade-hud-left .arcade-mode,
  body.dungeon-fs-active .dmap8-mode { display: none; }
  body.dungeon-fs-active .dungeon-mission {
    transform: scale(0.92);
    transform-origin: top center;
  }
}

.arcade-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  color: #f8d878;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  padding: 0 2px;
}
.arcade-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.arcade-pad {
  display: flex;
  gap: 6px;
}
.arcade-pad button {
  width: 48px;
  height: 44px;
  border: 3px solid #1a1c2c;
  border-radius: 4px;
  background: #e52521;
  color: #fff;
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #803000;
  touch-action: manipulation;
}
.arcade-pad button.arcade-jump {
  background: #3b5dc9;
  box-shadow: 0 3px 0 #1a1c2c;
}
.arcade-pad button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #803000;
}
.arcade-strike {
  /* legacy class kept for strike button styling hooks */
}

.arcade-cosmo { margin: 8px 0 12px; }
.arcade-cosmo-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.arcade-cosmo-tab {
  flex: 1;
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: rgba(15, 23, 42, 0.7);
  color: #94a3b8;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.arcade-cosmo-tab.active {
  color: #0f172a;
  background: linear-gradient(180deg, #67e8f9, #22d3ee);
  border-color: #22d3ee;
}
.arcade-cosmo-pane.hidden { display: none; }
.arcade-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin: 0 auto 2px;
  border: 2px solid #0f172a;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}
.arcade-color-btn.equipped {
  box-shadow: 0 0 0 2px var(--swatch, #22d3ee);
}
.arcade-skins-title { display: block; font-size: 0.8rem; margin-bottom: 8px; }
.arcade-skins-row { display: flex; flex-wrap: wrap; gap: 8px; }
.arcade-skin-btn {
  position: relative;
  min-width: 64px;
  padding: 8px 6px 6px;
  border-radius: 10px;
  border: 2px solid #1a1c2c;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  font-family: "Courier New", Courier, monospace;
}
.arcade-skin-btn.equipped {
  border-color: #ffcc55;
  box-shadow: 0 0 0 1px rgba(255,204,85,0.4);
}
.arcade-skin-btn.locked { opacity: 0.4; cursor: not-allowed; }
.arcade-skin-emoji { display: block; font-size: 1.2rem; }
.arcade-skin-name { display: block; font-size: 0.62rem; margin-top: 3px; }
.arcade-skin-prem {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.65rem;
  color: #fbbf24;
}

.arcade-skin-gold .arcade-run {
  border-color: #f8d878;
  box-shadow: 0 0 0 2px rgba(248, 216, 120, 0.35);
}

.aarena {
  border-radius: 16px;
  border: 2px solid rgba(255, 200, 80, 0.4);
  background: linear-gradient(180deg, #0b1020 0%, #12182c 55%, #1a1030 100%);
  padding: 10px 10px 12px;
  overflow: hidden;
  position: relative;
}
.aarena-skin-gold {
  border-color: rgba(255, 215, 0, 0.65);
  box-shadow: 0 0 24px rgba(255, 200, 80, 0.2);
}
.aarena-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  color: #ffcc55;
}
.aarena-hud-enemy { color: #fb7185; letter-spacing: 0.04em; }
.aarena-stage {
  position: relative;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, rgba(80, 60, 140, 0.35), transparent 55%),
    linear-gradient(180deg, #0a0e1a 0%, #151b2e 70%, #1c1428 100%);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}
.aarena-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,0.03) 12% 13%, transparent 13% 37%, rgba(255,255,255,0.03) 37% 38%, transparent 38% 62%, rgba(255,255,255,0.03) 62% 63%, transparent 63% 87%, rgba(255,255,255,0.03) 87% 88%, transparent 88%),
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(110,231,183,0.04) 14px, rgba(110,231,183,0.04) 15px);
  pointer-events: none;
}
.aarena-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.55), transparent);
  opacity: 0.7;
  pointer-events: none;
  animation: aarenaTwinkle 3s ease-in-out infinite alternate;
}
@keyframes aarenaTwinkle {
  from { opacity: 0.45; }
  to { opacity: 0.85; }
}
.aarena-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.45)),
    repeating-linear-gradient(90deg, #1e293b 0 18px, #0f172a 18px 36px);
  border-top: 2px solid rgba(110, 231, 183, 0.25);
}
.aarena-hero, .aarena-enemy {
  position: absolute;
  bottom: 22%;
  font-size: 2.4rem;
  line-height: 1;
  z-index: 3;
  transition: left 0.18s ease, transform 0.18s ease;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.45));
}
.aarena-hero { left: 18%; }
.aarena-hero[data-lane="0"] { left: 8%; }
.aarena-hero[data-lane="1"] { left: 22%; }
.aarena-hero[data-lane="2"] { left: 38%; }
.aarena-hero--lunge { transform: scale(1.08); }
.aarena-hero-step { animation: aarenaStep 0.2s ease; }
.aarena-hero--attack { animation: aarenaLunge 0.28s ease; }
@keyframes aarenaStep {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@keyframes aarenaLunge {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(28px) scale(1.12); }
  100% { transform: translateX(0) scale(1); }
}
.aarena-enemy {
  right: 12%;
  animation: aarenaBob 1.4s ease-in-out infinite;
}
.aarena-enemy--aggro {
  animation: aarenaBob 0.55s ease-in-out infinite, aarenaGlow 0.9s ease-in-out infinite;
}
.aarena-enemy--hit {
  animation: aarenaHit 0.4s ease !important;
  filter: brightness(1.4) drop-shadow(0 0 12px #fb7185);
}
@keyframes aarenaBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes aarenaGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(251,113,133,0.3)); }
  50% { filter: drop-shadow(0 0 14px rgba(251,113,133,0.8)); }
}
@keyframes aarenaHit {
  0% { transform: translateX(0); }
  30% { transform: translateX(10px) rotate(6deg); }
  100% { transform: translateX(0); }
}
.aarena-laser {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14%;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255,255,255,0.12);
  z-index: 4;
  overflow: hidden;
}
.aarena-laser-green {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(90deg, #22c55e, #86efac);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
  border-radius: 999px;
}
.aarena-laser-needle {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  background: #f8fafc;
  border-radius: 2px;
  box-shadow: 0 0 8px #fff, 0 0 14px #ffcc55;
}
.aarena-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
}
.aarena-fx--play { opacity: 1; }
.aarena-fx--hit.aarena-fx--play::before,
.aarena-fx--perfect.aarena-fx--play::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 35%;
  width: 50%;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #fef08a, #fb923c);
  box-shadow: 0 0 16px #fbbf24;
  transform: rotate(-18deg) scaleX(0.2);
  animation: aarenaSlash 0.45s ease-out forwards;
}
.aarena-fx--perfect.aarena-fx--play::before {
  background: linear-gradient(90deg, transparent, #fff, #22d3ee, #a78bfa);
  box-shadow: 0 0 20px #22d3ee;
}
.aarena-fx--miss.aarena-fx--play {
  animation: aarenaFlashRed 0.4s ease;
  background: rgba(239, 68, 68, 0.22);
}
.aarena-fx--perfect.aarena-fx--play {
  box-shadow: inset 0 0 40px rgba(34, 211, 238, 0.35);
}
@keyframes aarenaSlash {
  0% { transform: rotate(-18deg) scaleX(0.15); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: rotate(-18deg) scaleX(1.15); opacity: 0; }
}
@keyframes aarenaFlashRed {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}
.aarena-shake { animation: dungeonShake 0.35s ease; }
.aarena-popup {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translate(-50%, 8px);
  font-weight: 900;
  font-size: 1.05rem;
  color: #ffcc55;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
}
.aarena-popup--show {
  animation: aarenaPopup 0.9s ease forwards;
}
@keyframes aarenaPopup {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.9); }
  25% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(1); }
}
.aarena-hint {
  margin: 8px 0 6px;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
}
.aarena-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.aarena-pad {
  display: flex;
  gap: 8px;
}
.aarena-pad button {
  width: 52px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 200, 80, 0.35);
  background: rgba(255, 200, 80, 0.1);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}
.aarena-pad button:active { background: rgba(255, 200, 80, 0.3); }
.aarena-attack {
  flex: 1;
  min-height: 44px;
}
.aarena-attack:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.aarena--fight .aarena-stage {
  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.25);
}

/* legacy cabinet (unused but keep soft) */
.arcade-cabinet {
  margin: 14px 0;
  border-radius: 16px;
  border: 2px solid rgba(255, 200, 80, 0.35);
  background: linear-gradient(160deg, #1a1228 0%, #0d1628 100%);
  padding: 18px 14px;
  text-align: center;
}
.arcade-cabinet.arcade-running { animation: arcadePulse 0.45s ease infinite; }
.arcade-cabinet.arcade-flash { box-shadow: 0 0 28px rgba(255, 204, 85, 0.45); }
@keyframes arcadePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.arcade-screen {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.arcade-logo {
  font-weight: 900;
  letter-spacing: 0.18em;
  font-size: 1.1rem;
  color: #ffcc55;
}
.arcade-skin-gold .arcade-cabinet,
.arcade-skin-gold .aarena {
  border-color: rgba(255, 215, 0, 0.55);
}
.arcade-timing { margin-top: 10px; }
.game-badge.soon {
  background: rgba(255, 204, 85, 0.15);
  color: #ffcc55;
}

/* Premium dungeon */
.dungeon-panel .dungeon-room {
  text-align: center;
  margin: 12px 0;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dungeon-room-chest { border-color: rgba(255, 204, 85, 0.35); background: rgba(255, 180, 40, 0.06); }
.dungeon-room-boss { border-color: rgba(255, 80, 100, 0.4); background: rgba(180, 30, 50, 0.1); }
.dungeon-room-shrine { border-color: rgba(34, 211, 238, 0.45); background: rgba(14, 116, 144, 0.12); }
.dungeon-room-elite { border-color: rgba(251, 146, 60, 0.5); background: rgba(154, 52, 18, 0.12); }

/* Lobby — clear play CTA */
.dungeon-lobby { padding: 4px 2px 8px; }
.dungeon-hero {
  text-align: center;
  padding: 18px 12px 14px;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(110,231,183,0.18), transparent 60%),
              linear-gradient(180deg, #121a28, #0a1018);
  border: 1px solid rgba(110, 231, 183, 0.25);
  margin-bottom: 14px;
}
.dungeon-hero-badge {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: #6ee7b7;
  border: 1px solid rgba(110,231,183,0.4);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.dungeon-hero-title {
  margin: 0 0 6px;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
}
.dungeon-hero-sub {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
}
.dungeon-play-btn {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
}
.dungeon-abandon-btn {
  width: 100%;
  margin-top: 0;
}
.dungeon-play-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
.dungeon-howto {
  margin: 0 0 14px;
  padding: 12px 14px;
  list-style: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.dungeon-howto li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: var(--text);
}
.dungeon-howto li:last-child { margin-bottom: 0; }
.dungeon-howto strong {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(110,231,183,0.2);
  color: #6ee7b7;
  font-size: 0.75rem;
}
.dungeon-stat-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.dungeon-chip {
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.dungeon-chip span {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.dungeon-chip strong { font-size: 0.95rem; }
.dungeon-chip-hot { border-color: rgba(110,231,183,0.45); }
.dungeon-bag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dungeon-bag-pill {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(110,231,183,0.12);
  border: 1px solid rgba(110,231,183,0.3);
}
.dungeon-skins-details,
.dungeon-board-details {
  margin: 8px 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 10px;
  background: rgba(0,0,0,0.2);
}
.dungeon-skins-details summary,
.dungeon-board-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  color: #94a3b8;
}
.dungeon-cosmo-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 8px;
}
.cosmo-tab {
  flex: 1;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.cosmo-tab.active {
  color: #6ee7b7;
  border-color: rgba(110,231,183,0.45);
  background: rgba(110,231,183,0.12);
}
.dungeon-cosmo-pane.hidden { display: none; }
.dungeon-skins-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dungeon-skin-btn.rarity-rare { border-color: #60a5fa; }
.dungeon-skin-btn.rarity-epic { border-color: #a78bfa; }
.dungeon-skin-btn.rarity-legendary {
  border-color: #fbbf24;
  box-shadow: 0 0 0 1px rgba(251,191,36,0.35);
}
.dungeon-skin-lock {
  display: block;
  font-size: 0.55rem;
  color: #94a3b8;
  margin-top: 2px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aura-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  border: 1px solid #000;
}
.shop-group { margin-bottom: 14px; }
.shop-group-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: #67e8f9;
  font-weight: 800;
}
.shop-item-kind {
  display: block;
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.shop-item-desc {
  display: block;
  font-size: 0.68rem;
  color: #94a3b8;
  margin: 4px 0;
}
.shop-item-highlight {
  outline: 2px solid #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25);
}
.cosmo-buy-tag {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7rem;
}
.arcade-skin-btn.shop-locked,
.dungeon-skin-btn.shop-locked {
  opacity: 0.85;
  cursor: pointer;
  border-style: dashed;
  border-color: rgba(34, 211, 238, 0.55);
}
.arcade-lobby-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
}
.arcade-lobby-actions--sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 10px 0 8px;
  margin-top: 4px;
  background: linear-gradient(180deg, rgba(8, 10, 18, 0.96) 55%, rgba(8, 10, 18, 0.72) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.arcade-lobby-top {
  margin-bottom: 4px;
}
.arcade-stats--compact {
  margin-top: 4px;
}
.arcade-howto-details {
  margin: 8px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  background: rgba(8, 16, 28, 0.55);
  padding: 0 12px;
}
.arcade-howto-details summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #a5f3fc;
}
.arcade-howto-details summary::-webkit-details-marker { display: none; }
.arcade-howto-details[open] summary {
  border-bottom: 1px solid rgba(34, 211, 238, 0.12);
  margin-bottom: 8px;
}
.arcade-howto-details .arcade-howto {
  margin: 0 0 12px;
  padding-left: 18px;
}
.dungeon-shop-btn { margin-top: 0; width: 100%; }
.dungeon-lobby-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 12px;
}
.dungeon-lobby-actions--sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 10px 0 8px;
  background: linear-gradient(180deg, rgba(12, 8, 20, 0.96) 55%, rgba(12, 8, 20, 0.72) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dungeon-howto-details {
  margin: 8px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  background: rgba(16, 10, 28, 0.55);
  padding: 0 12px;
}
.dungeon-howto-details summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ddd6fe;
}
.dungeon-howto-details summary::-webkit-details-marker { display: none; }
.dungeon-howto-details[open] summary {
  border-bottom: 1px solid rgba(167, 139, 250, 0.14);
  margin-bottom: 8px;
}
.dungeon-howto-details .dungeon-howto {
  margin: 0 0 12px;
  padding-left: 4px;
}
.dungeon-play-btn {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 900;
}
.arcade-next-unlocks {
  margin: 10px 0 4px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.25);
}
.arcade-next-unlocks strong {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 8px;
  color: #67e8f9;
}
.arcade-next-list { display: flex; flex-direction: column; gap: 8px; }
.arcade-next-item {
  display: grid;
  grid-template-columns: 1fr 88px 52px;
  gap: 8px;
  align-items: center;
  font-size: 0.72rem;
}
.arcade-next-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.arcade-next-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
}
.arcade-next-item small { color: #94a3b8; text-align: right; }

.dungeon-next-unlocks {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dungeon-next-unlocks strong {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 8px;
  color: #fde68a;
}
.dungeon-next-item {
  display: grid;
  grid-template-columns: 1fr 80px 40px;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 6px;
}
.dungeon-next-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.dungeon-next-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6ee7b7, #fde68a);
}
.dungeon-mission {
  margin-bottom: 8px;
}
.dungeon-mission-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dungeon-hud-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.78rem;
}
.dungeon-bank-pill,
.dungeon-combo-pill,
.dungeon-shield-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-family: "Courier New", Courier, monospace;
  font-weight: 800;
}
.dungeon-combo-pill { color: #fb923c; border: 1px solid rgba(251,146,60,0.4); }
.dungeon-shield-pill { color: #67e8f9; border: 1px solid rgba(103,232,249,0.4); }
.dungeon-objective {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(110,231,183,0.12), rgba(0,0,0,0.2));
  border: 1px solid rgba(110,231,183,0.3);
}
.dungeon-objective-emoji { font-size: 1.6rem; }
.dungeon-objective strong { display: block; font-size: 0.9rem; }
.dungeon-objective p { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted); }
.dungeon-coach {
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(110,231,183,0.08);
  border: 1px dashed rgba(110,231,183,0.35);
  margin-top: 8px;
}
.dungeon-coach p { margin: 0 0 10px; font-weight: 600; color: #6ee7b7; }
.dungeon-sheet {
  margin-top: 8px;
}
.dungeon-actions {
  margin-top: 10px;
}
.dungeon-combat-cmds.is-fight .dungeon-combat-lead {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: #6ee7b7;
  text-align: center;
  font-weight: 600;
}
.dungeon-attack-main {
  width: 100%;
  min-height: 54px !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em;
}
.dungeon-combat-sec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.dungeon-combat-during {
  margin-top: 10px;
}
.dungeon-combat-live {
  text-align: center;
  padding: 4px 0 2px;
}
.dungeon-combat-live-title {
  font-family: "Courier New", Courier, monospace;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fb923c;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.dungeon-strike-btn {
  width: 100%;
  min-height: 56px !important;
  margin-top: 12px;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em;
}
.dungeon-attack-pulse {
  animation: dungeonAttackPulse 0.85s ease infinite;
}
@keyframes dungeonAttackPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.45); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
}
.dungeon-timing-track {
  height: 22px !important;
  border-width: 3px !important;
  margin-top: 4px;
}
.dungeon-combat-tip {
  margin: 8px 0 0 !important;
  font-size: 0.7rem !important;
}

.dungeon-act-primary { grid-column: 1 / -1; min-height: 48px; }
.dungeon-reward-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.8rem;
}
.dungeon-reward-grid span { display: block; color: var(--muted); font-size: 0.7rem; }
.dungeon-panel.fx-pray .dungeon-room { animation: dungeonPulse 0.45s ease; box-shadow: 0 0 20px rgba(34,211,238,0.35); }
.dungeon-panel.fx-shield_block { animation: dungeonPulse 0.4s ease; }
.dungeon-panel.fx-start .dungeon-objective { animation: dungeonPulse 0.5s ease; }

.dungeon-gate { text-align: center; padding: 12px 0; }
.dungeon-type-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  margin-bottom: 8px;
}
.dungeon-enemy { font-size: 2.6rem; line-height: 1.2; animation: dungeonFloat 2.4s ease-in-out infinite; }
.dungeon-enemy-name { display: block; margin-top: 4px; font-size: 1.05rem; }
@keyframes dungeonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.dungeon-chance { margin: 10px 0 8px; text-align: left; }
.dungeon-chance-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 4px; }
.dungeon-chance-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.dungeon-chance-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ee7b7, #ffcc55);
  transition: width 0.35s ease;
}
.dungeon-trap-hint { color: #fca5a5 !important; margin: 6px 0 0; }
.dungeon-timing {
  margin: 12px 0 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(110, 231, 183, 0.35);
  background: rgba(16, 40, 32, 0.55);
  cursor: pointer;
  user-select: none;
  animation: dungeonTimingIn 0.35s ease;
}
@keyframes dungeonTimingIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.dungeon-timing-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: #6ee7b7;
  font-weight: 700;
  text-align: center;
}
.dungeon-timing-track {
  position: relative;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,80,80,0.25), rgba(255,180,40,0.2) 40%, rgba(255,180,40,0.2) 60%, rgba(255,80,80,0.25));
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  margin-bottom: 10px;
}
.dungeon-timing-green {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(110, 231, 183, 0.85), rgba(52, 211, 153, 0.55));
  box-shadow: 0 0 14px rgba(110, 231, 183, 0.45);
  border-radius: 4px;
}
.dungeon-timing-needle {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.7);
  left: 50%;
  z-index: 2;
}
.dungeon-strike-btn { width: 100%; }
.dungeon-panel.fx-timing_start .dungeon-timing { animation: dungeonPulse 0.45s ease; }
.dungeon-panel.fx-fight_perfect .dungeon-room {
  animation: dungeonPulse 0.5s ease;
  border-color: rgba(255, 204, 85, 0.7);
  box-shadow: 0 0 18px rgba(255, 204, 85, 0.35);
}
.dungeon-actions {
  margin-top: 12px;
}
.dungeon-actions .btn { width: 100%; }
.dungeon-gate { text-align: center; padding: 12px 0; }
.dungeon-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 4px;
}
.dungeon-path-step {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.45;
  font-size: 0.95rem;
}
.dungeon-path-step.done { opacity: 0.85; border-color: rgba(110, 231, 183, 0.35); }
.dungeon-path-step.current {
  opacity: 1;
  border-color: rgba(255, 204, 85, 0.55);
  box-shadow: 0 0 12px rgba(255, 204, 85, 0.25);
  transform: scale(1.08);
}
.dungeon-path-sep { color: var(--muted); font-size: 0.75rem; opacity: 0.6; }
.dungeon-log-msg { animation: dungeonLogIn 0.35s ease; }
@keyframes dungeonLogIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.dungeon-panel.fx-shake { animation: dungeonShake 0.4s ease; }
.dungeon-panel.fx-fight_win .dungeon-room,
.dungeon-panel.fx-chest_ok .dungeon-room { animation: dungeonPulse 0.45s ease; }
.dungeon-panel.fx-heal .dungeon-hp { animation: dungeonPulse 0.4s ease; }
.dungeon-panel.fx-buff .dungeon-buff-tag { animation: dungeonPulse 0.4s ease; color: #ffcc55; }
.dungeon-panel.fx-victory { animation: dungeonPulse 0.6s ease; }
@keyframes dungeonShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes dungeonPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.dungeon-board {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dungeon-board-title {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.dungeon-board-list { margin: 0; }
.dungeon-board-row { margin-bottom: 6px; }
.dungeon-board-empty { margin: 4px 0 0; text-align: center; }
.dungeon-map-wrap {
  margin: 10px 0 14px;
  text-align: center;
}
body.dungeon-fs-active .topbar .brand,
body.dungeon-fs-active .topbar .points-pill,
body.dungeon-fs-active #pages-nav,
body.dungeon-fs-active .pages-dots,
body.dungeon-fs-active .game-intro,
body.dungeon-fs-active .dungeon-panel > .stat-row,
body.dungeon-fs-active .dungeon-panel > .hint,
body.dungeon-fs-active .dungeon-skins,
body.dungeon-fs-active .dungeon-path,
body.dungeon-fs-active .dungeon-board,
body.dungeon-fs-active .dungeon-gate,
body.dungeon-fs-active #dungeon-log {
  display: none !important;
}
body.dungeon-fs-active .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  padding: max(8px, env(safe-area-inset-top, 0px)) 10px 0;
}
body.dungeon-fs-active #btn-back {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.dungeon-fs-active .dungeon-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.dungeon-fs-active .dungeon-map-wrap {
  margin: 0;
}
body.dungeon-fs-active .dungeon-mission {
  position: fixed;
  left: 8px;
  right: 8px;
  top: max(8px, env(safe-area-inset-top));
  z-index: 92;
  background: rgba(7, 10, 18, 0.92);
  border: 1px solid rgba(110, 231, 183, 0.3);
  border-radius: 12px;
  padding: 8px 10px;
  pointer-events: auto;
}

.dmap8-combat {
  position: relative;
  z-index: 10;
  padding: 4px 2px 6px;
  pointer-events: auto;
  touch-action: manipulation;
}
.dmap8-combat-live { text-align: center; }
.dmap8-combat-title {
  font-family: "Courier New", Courier, monospace;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fb923c;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.dmap8-combat-hint {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: "Courier New", Courier, monospace;
}
.dmap8-timing-track {
  position: relative;
  height: 18px;
  border-radius: 4px;
  background: #1a1c2c;
  border: 2px solid #6ee7b7;
  overflow: hidden;
}
.dmap8-timing-green {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(180deg, #a8e030, #80d010);
}
.dmap8-timing-needle {
  position: absolute;
  top: -2px;
  width: 4px;
  height: 22px;
  margin-left: -2px;
  background: #fff;
  border: 1px solid #1a1c2c;
}
.dmap8-strike-btn {
  width: 100%;
  margin-top: 10px;
  min-height: 52px;
  border: 3px solid #0a0c14;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  color: #1a1c2c;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 5px 0 #92400e;
}
.dmap8-strike-pulse {
  animation: dungeonAttackPulse 0.85s ease infinite;
}
.dmap8-timing--hot {
  box-shadow: 0 0 0 2px rgba(168, 224, 48, 0.55), 0 0 12px rgba(128, 208, 16, 0.4);
}
.dmap8-timing--hot .dmap8-timing-green {
  filter: brightness(1.25);
}
.dmap8-strike-btn.dmap8-strike--hot {
  filter: brightness(1.1);
  box-shadow: 0 0 0 2px rgba(168, 224, 48, 0.65), 0 5px 0 #92400e;
}
.dmap8-title {
  display: block;
  font-size: 0.68rem;
  color: #fde68a;
  margin-top: 2px;
}
.dmap8-combat-sec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.dmap8-sec-btn {
  min-height: 40px;
  border: 2px solid #1a1c2c;
  border-radius: 10px;
  background: #1e293b;
  color: #e2e8f0;
  font-weight: 700;
  cursor: pointer;
}
.dmap8-quick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 76px;
  z-index: 8;
  pointer-events: auto;
}
.dmap8-quick-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid #1a1c2c;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 1.1rem;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
}
.dmap8-quick-btn--primary {
  width: 100%;
  min-width: 76px;
  height: auto;
  min-height: 52px;
  padding: 8px 6px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.15;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  color: #1a1c2c;
  border-color: #92400e;
  box-shadow: 0 4px 0 #78350f;
}
.dmap8-quick-btn--primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #78350f;
}
.dmap8-strike-btn,
.dmap8-sec-btn,
.dmap8-combat-live {
  pointer-events: auto;
  touch-action: manipulation;
}

.dmap8 {
  border: 3px solid #1a1c2c;
  border-radius: 10px;
  background: #070a12;
  padding: 8px;
  image-rendering: pixelated;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dmap8--fs {
  position: fixed;
  inset: 0;
  z-index: 80;
  border: none;
  border-radius: 0;
  padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: #05070e;
  gap: 6px;
}
.dmap8-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #6ee7b7;
  flex-shrink: 0;
  padding: 2px 4px;
}
.dmap8-hud-left {
  display: flex;
  gap: 10px;
  align-items: center;
}
.dmap8-mode {
  color: #80d010;
  font-size: 0.6rem;
  border: 1px solid #80d010;
  padding: 1px 6px;
  border-radius: 3px;
}
.dmap8-label { color: #94a3b8; }
.dmap8-stage {
  flex: 1 1 auto;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 2px solid #1a1c2c;
  border-radius: 6px;
  overflow: hidden;
}
.dmap8--fs .dmap8-stage {
  min-height: 0;
}
#dmap8-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  background: #121a28;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}
.dmap8-dock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dmap8-hint {
  margin: 0;
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
}
.dmap8-pad-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.dmap8-dpad {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  gap: 6px;
}
.dmap8-dpad-mid { display: flex; gap: 48px; }
.dmap8-btn {
  border: 3px solid #0a0c14;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.dmap8-btn-dir {
  width: 58px;
  height: 52px;
  border-radius: 12px;
  font-size: 1.15rem;
  background: linear-gradient(180deg, #34d399, #059669);
  box-shadow: 0 5px 0 #064e3b, 0 8px 14px rgba(0,0,0,0.35);
}
.dmap8-btn-dir.is-pressed,
.dmap8-btn-dir:active {
  transform: translateY(3px) scale(0.97);
  box-shadow: 0 2px 0 #064e3b, 0 4px 8px rgba(0,0,0,0.3);
}
.dmap8-pad-tip {
  flex: 1;
  text-align: right;
  font-family: "Courier New", Courier, monospace;
  padding-right: 4px;
}
.dmap8-tip-title {
  display: block;
  color: #6ee7b7;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.dmap8-tip-body {
  display: block;
  color: #64748b;
  font-size: 0.65rem;
  margin-top: 2px;
}
.dmap8--neon { border-color: #22d3ee; }
.dmap8--neon .dmap8-hud { color: #22d3ee; }
.dmap8--ice { border-color: #7dd3fc; }
.dmap8--ice .dmap8-hud { color: #7dd3fc; }
.dmap8--lava { border-color: #fb923c; }
.dmap8--lava .dmap8-hud { color: #fb923c; }
.dmap8--forest { border-color: #86efac; }
.dmap8--forest .dmap8-hud { color: #86efac; }
@media (max-width: 380px) {
  .dmap8-btn-dir { width: 52px; height: 46px; }
  .dmap8-dpad-mid { gap: 40px; }
}

.dmap {
  padding: 12px 10px 14px;
  border-radius: 14px;
  border: 2px solid rgba(110, 231, 183, 0.45);
  background: linear-gradient(180deg, rgba(16, 28, 42, 0.95), rgba(8, 12, 20, 0.98));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 8px 28px rgba(0,0,0,0.35);
}
.dmap-title {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: #6ee7b7;
  margin-bottom: 10px;
}
.dmap-grid {
  display: grid;
  gap: 2px;
  width: min(100%, 320px);
  margin: 0 auto;
  background: #05080f;
  padding: 4px;
  border-radius: 10px;
}
.dmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.7rem, 3.6vw, 0.95rem);
  line-height: 1;
  user-select: none;
}
.dmap-cell.wall { background: #121a28; }
.dmap-cell.floor { background: #243044; }
.dmap-cell.player {
  background: #14532d;
  box-shadow: inset 0 0 0 2px #6ee7b7;
}
.dmap-cell.ent.enemy { background: #7f1d1d; }
.dmap-cell.ent.chest { background: #78350f; }
.dmap-cell.ent.boss { background: #4c1d95; }
.dmap-hint { margin: 10px 0 4px; font-size: 0.74rem; color: var(--muted); }
.dungeon-explore-hint { text-align: center; margin: 8px 0; font-weight: 600; color: #6ee7b7 !important; }
.dungeon-dpad {
  display: inline-grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  gap: 6px;
  margin-top: 10px;
}
.dungeon-dpad-mid { display: flex; gap: 36px; }
.dungeon-dpad button {
  width: 52px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(110, 231, 183, 0.35);
  background: rgba(110, 231, 183, 0.12);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}
.dungeon-dpad button:active { background: rgba(110, 231, 183, 0.35); }

/* Map themes */
.dmap-stage { position: relative; width: min(100%, 320px); margin: 0 auto; }
.dmap-fx {
  pointer-events: none;
  position: absolute;
  inset: 4px;
  border-radius: 10px;
  opacity: 0;
}
.dmap-fx--play { opacity: 1; }
.dmap-fx--slash.dmap-fx--play::before,
.dmap-fx--shadow.dmap-fx--play::before,
.dmap-fx--neon.dmap-fx--play::before,
.dmap-fx--ember.dmap-fx--play::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 35%;
  width: 64%;
  height: 4px;
  border-radius: 4px;
  transform: rotate(-28deg) scaleX(0.2);
  animation: dmapSlash 0.45s ease-out forwards;
}
.dmap-fx--slash.dmap-fx--play::before { background: linear-gradient(90deg, transparent, #f8fafc, #6ee7b7); box-shadow: 0 0 12px #6ee7b7; }
.dmap-fx--shadow.dmap-fx--play::before { background: linear-gradient(90deg, transparent, #a78bfa, #1e1b4b); box-shadow: 0 0 14px #7c3aed; }
.dmap-fx--neon.dmap-fx--play::before { background: linear-gradient(90deg, transparent, #22d3ee, #f0abfc); box-shadow: 0 0 16px #22d3ee; }
.dmap-fx--ember.dmap-fx--play::before { background: linear-gradient(90deg, transparent, #fb923c, #ef4444); box-shadow: 0 0 16px #f97316; }
.dmap-fx--miss.dmap-fx--play { animation: dmapFlashRed 0.4s ease; background: rgba(239, 68, 68, 0.25); }
.dmap-fx--charge.dmap-fx--play { animation: dmapCharge 0.55s ease; box-shadow: inset 0 0 30px rgba(110, 231, 183, 0.35); }
.dmap-shake { animation: dungeonShake 0.35s ease; }
@keyframes dmapSlash {
  0% { transform: rotate(-28deg) scaleX(0.15); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: rotate(-28deg) scaleX(1.1); opacity: 0; }
}
@keyframes dmapFlashRed {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dmapCharge {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.dmap--neon {
  border-color: rgba(34, 211, 238, 0.55);
  background: linear-gradient(180deg, rgba(12, 20, 40, 0.98), rgba(8, 6, 24, 0.99));
}
.dmap--neon .dmap-title { color: #22d3ee; }
.dmap--neon .dmap-cell.wall { background: #0f172a; }
.dmap--neon .dmap-cell.floor { background: #1e293b; }
.dmap--neon .dmap-cell.player { background: #0e7490; box-shadow: inset 0 0 0 2px #22d3ee; }

.dmap--ice {
  border-color: rgba(125, 211, 252, 0.55);
  background: linear-gradient(180deg, rgba(15, 28, 42, 0.98), rgba(8, 18, 32, 0.99));
}
.dmap--ice .dmap-title { color: #7dd3fc; }
.dmap--ice .dmap-cell.wall { background: #1e3a5f; }
.dmap--ice .dmap-cell.floor { background: #334155; }
.dmap--ice .dmap-cell.player { background: #0c4a6e; box-shadow: inset 0 0 0 2px #7dd3fc; }

.dmap--lava {
  border-color: rgba(251, 146, 60, 0.55);
  background: linear-gradient(180deg, rgba(40, 16, 12, 0.98), rgba(20, 8, 8, 0.99));
}
.dmap--lava .dmap-title { color: #fb923c; }
.dmap--lava .dmap-cell.wall { background: #3f1510; }
.dmap--lava .dmap-cell.floor { background: #5c2a1a; }
.dmap--lava .dmap-cell.player { background: #9a3412; box-shadow: inset 0 0 0 2px #fb923c; }

.dmap--forest {
  border-color: rgba(134, 239, 172, 0.5);
  background: linear-gradient(180deg, rgba(12, 28, 18, 0.98), rgba(6, 16, 10, 0.99));
}
.dmap--forest .dmap-title { color: #86efac; }
.dmap--forest .dmap-cell.wall { background: #14532d; }
.dmap--forest .dmap-cell.floor { background: #1f3d2a; }
.dmap--forest .dmap-cell.player { background: #166534; box-shadow: inset 0 0 0 2px #86efac; }

.dmap-cell.player.skin-knight { background: #1e3a5f; box-shadow: inset 0 0 0 2px #93c5fd; }
.dmap-cell.player.skin-shadow { background: #1e1b4b; box-shadow: inset 0 0 0 2px #a78bfa; }
.dmap-cell.player.skin-neon { background: #0e7490; box-shadow: inset 0 0 0 2px #22d3ee, 0 0 10px rgba(34,211,238,0.5); }
.dmap-cell.player.skin-ember { background: #9a3412; box-shadow: inset 0 0 0 2px #fb923c, 0 0 10px rgba(249,115,22,0.45); }

.dungeon-skins { margin: 10px 0 4px; }
.dungeon-skins-title { display: block; font-size: 0.8rem; margin-bottom: 8px; }
.dungeon-skins-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dungeon-skin-btn {
  position: relative;
  min-width: 64px;
  padding: 8px 6px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
}
.dungeon-skin-btn.equipped {
  border-color: #6ee7b7;
  box-shadow: 0 0 0 1px rgba(110,231,183,0.35);
}
.dungeon-skin-btn.locked {
  opacity: 0.4;
  cursor: not-allowed;
}
.dungeon-skin-emoji { display: block; font-size: 1.25rem; line-height: 1; }
.dungeon-skin-name { display: block; font-size: 0.62rem; margin-top: 4px; opacity: 0.85; }
.dungeon-skin-prem {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.65rem;
  color: #fbbf24;
}
/* ═══ Premium Tower / Outpost — modern TD ═══ */
.tower-screen {
  --td-bg: #12151a;
  --td-panel: rgba(22, 26, 32, 0.92);
  --td-line: rgba(255, 255, 255, 0.08);
  --td-cyan: #8fa8a0;
  --td-amber: #c9a66b;
  --td-coral: #c07870;
  --td-mint: #7a9a88;
  --td-muted: #8a929c;
  --td-text: #e6e2d8;
  position: relative;
}
.tower-lobby {
  padding: 16px 14px 18px;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 8% -8%, rgba(140, 160, 140, 0.1), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(180, 150, 100, 0.07), transparent 50%),
    linear-gradient(180deg, #1a1e26 0%, #12151a 100%);
  border: 1px solid var(--td-line);
}
.tower-lobby-hero { text-align: center; margin-bottom: 14px; }
.tower-lobby-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--td-amber);
  margin-bottom: 6px;
}
.tower-lobby-title {
  margin: 0 0 6px;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--td-text);
}
.tower-lobby-sub {
  margin: 0 0 12px;
  color: var(--td-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.tower-attempts { margin: 0 auto 12px; max-width: 280px; text-align: left; }
.tower-attempts-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--td-text);
  margin-bottom: 5px;
}
.tower-attempts-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.tower-attempts-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6a8070, var(--td-amber));
}
.tower-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.tower-cta {
  min-width: min(100%, 220px);
  min-height: 48px;
  font-weight: 800 !important;
}
.tower-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.tower-stats > div {
  background: rgba(8, 14, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}
.tower-stats span {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--td-muted);
  margin-bottom: 4px;
}
.tower-stats strong {
  font-size: 1.15rem;
  color: var(--td-amber);
  font-variant-numeric: tabular-nums;
}
.tower-howto {
  margin: 0 0 14px;
  padding: 12px 14px;
  list-style: none;
  border-radius: 14px;
  background: rgba(8, 14, 28, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.tower-howto li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 8px;
  font-size: 0.84rem;
  color: var(--td-text);
  line-height: 1.35;
}
.tower-howto li:last-child { margin-bottom: 0; }
.tower-howto strong {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 166, 107, 0.15);
  color: var(--td-amber);
  font-size: 0.72rem;
}
.tower-maps-pool, .tower-camos { margin-bottom: 12px; }
.tower-maps-label, .tower-camos-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--td-muted);
  margin-bottom: 8px;
}
.tower-maps-chips, .tower-camos-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tower-map-chip {
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #c8c2b4;
}
.tower-map-chip[data-theme="volcano"] { border-color: rgba(180, 100, 80, 0.35); color: #d4a090; background: rgba(180, 100, 80, 0.08); }
.tower-map-chip[data-theme="night"] { border-color: rgba(100, 120, 150, 0.35); color: #a8b8c8; background: rgba(100, 120, 150, 0.08); }
.tower-map-chip[data-theme="mountain"] { border-color: rgba(140, 148, 156, 0.35); color: #c0c4c8; }
.tower-map-chip[data-theme="arctic"] { border-color: rgba(140, 170, 180, 0.35); color: #c0d0d8; }
.tower-camo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 68px;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 14, 28, 0.7);
  color: var(--td-text);
  font-size: 0.68rem;
  transition: border-color 0.15s, transform 0.15s;
}
.tower-camo-btn .swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
}
.tower-camo-btn.equipped {
  border-color: rgba(201, 166, 107, 0.55);
  box-shadow: 0 0 0 1px rgba(201, 166, 107, 0.25);
}
.tower-camo-btn.locked { opacity: 0.4; }
.tower-camo-btn:not(.locked):active { transform: scale(0.96); }

/* Battle — fullscreen centered command layout */
.tower-battle {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 0;
}
.tower-hud {
  flex-shrink: 0;
  padding: 8px 10px 8px;
  border-radius: 14px;
  background: rgba(16, 18, 22, 0.94);
  border: 1px solid var(--td-line);
  backdrop-filter: blur(12px);
}
.tower-hud-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tower-hud-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.tower-map-name {
  color: var(--td-text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%;
}
.tower-hud-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.tower-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.06);
  color: #c8c2b4;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.tower-pill-cash {
  background: rgba(201, 166, 107, 0.14);
  border-color: rgba(201, 166, 107, 0.3);
  color: #d4b87a;
}
.tower-pill-kill {
  background: rgba(120, 150, 130, 0.12);
  border-color: rgba(120, 150, 130, 0.25);
  color: #a8c0b0;
}
.tower-battle-btns { display: flex; gap: 5px; flex-shrink: 0; }
.tower-icon-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--td-text);
  font-weight: 800;
  font-size: 0.75rem;
}
.tower-icon-btn.on {
  border-color: rgba(201, 166, 107, 0.5);
  color: var(--td-amber);
  background: rgba(201, 166, 107, 0.12);
}
.tower-icon-btn.danger {
  color: var(--td-coral);
  border-color: rgba(192, 120, 112, 0.4);
}
.tower-meters {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.tower-hp-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--td-muted);
}
.tower-hp-val {
  font-size: 0.72rem;
  color: var(--td-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 3.2rem;
  text-align: right;
}
.tower-hp-wrap {
  height: 7px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.tower-hp-bar {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5a7a68, #8aaa90);
  transition: width 0.2s ease;
}
.tower-hp-bar.low {
  background: linear-gradient(90deg, #a06058, #c07870);
}
.tower-combo {
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 900;
  color: transparent;
  letter-spacing: 0.02em;
}
.tower-combo.on {
  color: var(--td-amber);
  padding: 0 4px;
  animation: towerPulse 0.35s ease;
}
@keyframes towerPulse {
  from { transform: scale(1.2); }
  to { transform: scale(1); }
}
.tower-threat-row {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  justify-content: center;
}
.tower-threat-row.on { display: flex; }
.tower-threat-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #d4c4a0;
  background: rgba(201, 166, 107, 0.1);
  border: 1px solid rgba(201, 166, 107, 0.22);
}
.tower-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0e1116;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}
.tower-stage-frame {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 20%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}
.tower-canvas {
  position: relative;
  z-index: 0;
  display: block;
  margin: 0 auto;
  background: #12151a;
  touch-action: none;
  border-radius: 2px;
}
.tower-dock {
  flex-shrink: 0;
  padding: 8px 8px 6px;
  border-radius: 16px;
  background: rgba(16, 18, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tower-dock-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tower-cmd-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.tower-cmd {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--td-text);
  font-weight: 700;
  font-size: 0.68rem;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.tower-cmd-ico { font-size: 0.95rem; line-height: 1; }
.tower-cmd-txt { line-height: 1.1; }
.tower-cmd em {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--td-amber);
  font-variant-numeric: tabular-nums;
}
.tower-cmd:active:not(:disabled) { transform: scale(0.97); }
.tower-cmd.on {
  border-color: rgba(192, 120, 112, 0.5);
  color: #e8a8a0;
  background: rgba(192, 120, 112, 0.12);
}
.tower-cmd.accent {
  border-color: rgba(201, 166, 107, 0.35);
  background: rgba(201, 166, 107, 0.08);
  color: #e8d4a0;
}
.tower-cmd.accent.on {
  border-color: rgba(201, 166, 107, 0.55);
  background: rgba(201, 166, 107, 0.16);
}
.tower-cmd:disabled { opacity: 0.38; }
.tower-sel-info {
  display: none;
  margin: 0 0 6px;
  font-size: 0.68rem;
  text-align: center;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #c8c2b4;
}
.tower-sel-info.on { display: block; }
.tower-build-wrap { width: 100%; }
.tower-build-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}
.tower-build-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 2px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--td-text);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.12s, background 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.tower-build-glow {
  position: absolute;
  inset: auto 15% -45% 15%;
  height: 70%;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.3;
  pointer-events: none;
  background: var(--tw-accent, #c9a66b);
}
.tower-build-ico {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  line-height: 1;
}
.tower-build-btn small {
  position: relative;
  z-index: 1;
  font-size: 0.52rem;
  color: var(--td-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tower-build-role {
  display: none; /* role lives in title tooltip — keeps dock compact */
}
.tower-build-btn em {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--td-amber);
}
.tower-t-mg { --tw-accent: #7a8a5a; }
.tower-t-mortar { --tw-accent: #8a7a52; }
.tower-t-aa { --tw-accent: #6a7a58; }
.tower-t-bunker { --tw-accent: #9a8a60; }
.tower-t-sniper { --tw-accent: #6a7050; }
.tower-t-flamer { --tw-accent: #8a6a48; }
.tower-build-btn.on {
  border-color: color-mix(in srgb, var(--tw-accent, #c9a66b) 55%, transparent);
  background: color-mix(in srgb, var(--tw-accent, #c9a66b) 16%, rgba(18, 20, 24, 0.95));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tw-accent, #c9a66b) 22%, transparent);
}
.tower-build-btn.on .tower-build-glow { opacity: 0.5; }
.tower-build-btn.broke { opacity: 0.4; }
.tower-build-btn:not(.broke):active { transform: scale(0.96); }

/* Fullscreen battle — edge-to-edge like arcade-run--fs */
html.tower-fs-active,
body.tower-fs-active {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none;
}
body.tower-fs-active #pages-nav,
body.tower-fs-active .pages-dots,
body.tower-fs-active .lang-fab,
body.tower-fs-active .game-intro,
body.tower-fs-active .tower-lobby,
body.tower-fs-active .kyber-watermark,
body.tower-fs-active .footer-links {
  display: none !important;
}
body.tower-fs-active .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  padding: max(8px, env(safe-area-inset-top, 0px)) 10px 0;
  display: flex !important;
}
body.tower-fs-active .topbar .brand,
body.tower-fs-active .topbar .points-pill {
  visibility: hidden;
}
body.tower-fs-active #btn-back {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.tower-fs-active #app {
  max-width: none !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.tower-fs-active #screen {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  flex: 1 !important;
}
body.tower-fs-active .tower-battle,
.tower-battle.tower-battle--fs {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(8px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(8px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box;
  background:
    radial-gradient(120% 55% at 50% -10%, rgba(48, 56, 64, 0.45), transparent 50%),
    #0a0c10;
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.tower-fs-active .tower-hud,
body.tower-fs-active .tower-dock {
  max-width: 560px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}
body.tower-fs-active .tower-stage {
  flex: 1 1 auto;
  min-height: 0;
  margin: 6px auto;
  width: 100%;
  max-width: 720px;
}
body.tower-fs-active .tower-canvas {
  max-width: 100%;
  max-height: 100%;
}

/* Military mini tower icons in build shop */
.tower-build-art {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}
.tower-art {
  display: block;
  width: 22px;
  height: 22px;
  position: relative;
  border-radius: 4px;
  background: linear-gradient(160deg, #6a727c, #2a3038);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 2px 5px rgba(0,0,0,0.4);
}
.tower-art::before,
.tower-art::after {
  content: "";
  position: absolute;
}
.tower-art-mg {
  clip-path: polygon(25% 8%, 75% 8%, 92% 50%, 75% 92%, 25% 92%, 8% 50%);
  background: linear-gradient(160deg, #9ab0b8, #3a484c 55%, #1e282c);
}
.tower-art-mg::before {
  left: 52%; top: 42%;
  width: 12px; height: 3.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, #d8e0e4, #6a7478);
  box-shadow: 0 4px 0 #c0c8cc;
  transform: translateY(-50%);
}
.tower-art-mg::after {
  left: 42%; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2a3438;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 1.5px #a8b4b8;
}
.tower-art-mortar {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #d0b888, #6a4a28 55%, #2a1c10);
}
.tower-art-mortar::before {
  left: 46%; top: 14%;
  width: 5px; height: 13px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, #e8d8a8, #8a6a40);
  transform: rotate(32deg);
  transform-origin: bottom center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.tower-art-mortar::after {
  left: 50%; top: 58%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1a1410;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 2px #c0a070;
}
.tower-art-aa {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #a8c0d4, #2a3848 60%, #121820);
}
.tower-art-aa::before {
  inset: 3px;
  border: 1.6px solid rgba(220,230,240,0.65);
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(-20deg);
}
.tower-art-aa::after {
  left: 54%; top: 48%;
  width: 3px; height: 10px;
  border-radius: 1px;
  background: #e0e8f0;
  box-shadow: -4px 1px 0 #c8d4e0;
  transform: translate(-50%, -85%) rotate(28deg);
  transform-origin: bottom center;
}
.tower-art-bunker {
  background: linear-gradient(180deg, #9a9aac, #3a3a48 70%, #1e1e28);
  border-radius: 3px 3px 2px 2px;
}
.tower-art-bunker::before {
  left: 18%; right: 18%; top: -4px;
  height: 6px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #6a6a78, #404050);
}
.tower-art-bunker::after {
  left: 50%; top: 8%;
  width: 2px; height: 7px;
  background: #c8d0e8;
  transform: translateX(-50%);
  box-shadow: 0 -2px 0 1.5px rgba(160,180,220,0.45);
}
.tower-art-sniper {
  background: linear-gradient(160deg, #d0c090, #5a4a28 55%, #2a2010);
  border-radius: 2px;
  width: 14px;
  height: 22px;
  margin: 0 auto;
}
.tower-art-sniper::before {
  left: 70%; top: 38%;
  width: 14px; height: 2.5px;
  background: linear-gradient(90deg, #e8dcb0, #6a5a38);
  transform: rotate(-18deg);
  transform-origin: left center;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2);
}
.tower-art-sniper::after {
  left: 50%; top: 42%;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.4px solid rgba(240,230,190,0.85);
  background: rgba(20,16,8,0.5);
  transform: translate(-50%, -50%);
}
.tower-art-flamer {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #d08868, #4a2418 55%, #1a100c);
}
.tower-art-flamer::before {
  left: 52%; top: 28%;
  width: 12px; height: 9px;
  background: linear-gradient(95deg, #ffb060 10%, #ff7040 55%, transparent);
  border-radius: 40% 70% 60% 30%;
  filter: blur(0.3px);
}
.tower-art-flamer::after {
  left: 36%; top: 50%;
  width: 7px; height: 10px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8a4840, #3a2018);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(200,120,90,0.35);
}
.tower-build-ico { display: none; }

/* ===== Premium showcase shell (FS + result modal + dock tokens) ===== */
html.premium-fs-active,
body.premium-fs-active,
html.kyber-game-lock,
body.kyber-game-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
  height: 100%;
  max-height: 100dvh;
}
/* Lobby stays clickable — only lock pans once a run is fullscreen */
body.kyber-game-open #pages-nav,
body.kyber-game-lock #pages-nav,
body.premium-fs-active #pages-nav,
body.kyber-game-open .pages-dots,
body.kyber-game-lock .pages-dots,
body.premium-fs-active .pages-dots,
body.kyber-game-open .lang-fab,
body.premium-fs-active .kyber-watermark,
body.premium-fs-active .footer-links,
body.premium-fs-active .lang-fab {
  display: none !important;
}
/* Pages layout locks body scroll — restore scrollable lobby so Play is reachable */
body.kyber-layout-pages.kyber-game-open #app {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body.kyber-layout-pages.kyber-game-open #screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  pointer-events: auto;
  touch-action: pan-y;
}
body.kyber-layout-pages.kyber-game-open .arcade-start-btn,
body.kyber-layout-pages.kyber-game-open .dungeon-play-btn,
body.kyber-layout-pages.kyber-game-open .arcade-lobby-actions,
body.kyber-layout-pages.kyber-game-open .dungeon-hero {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}
body.premium-fs-active .pages-viewport,
body.kyber-game-lock .pages-viewport {
  touch-action: none !important;
  pointer-events: none !important;
}
body.premium-fs-active .arcade-run--fs,
body.premium-fs-active .dmap8--fs,
body.premium-fs-active .tower-battle,
body.premium-fs-active .bull-battle--fs,
.bull-fs-host,
.bull-fs-host .bull-battle--fs {
  touch-action: none;
  pointer-events: auto;
  z-index: 100;
}
body.premium-fs-active .arcade-dock,
body.premium-fs-active .dmap8-dock,
body.premium-fs-active .tower-dock,
body.premium-fs-active .bull-dock,
.bull-fs-host .bull-dock,
body.kyber-game-open .arcade-lobby-actions,
body.kyber-game-open .dungeon-play-btn,
body.kyber-game-open .arcade-start-btn,
body.kyber-game-open .btn {
  touch-action: manipulation;
  pointer-events: auto;
}

:root {
  --premium-dock-h: 132px;
  --premium-safe-b: env(safe-area-inset-bottom, 0px);
  --premium-hud-top: max(8px, env(safe-area-inset-top, 0px));
}
.tower-dock,
.arcade-dock,
.dmap8-dock {
  padding-bottom: max(10px, var(--premium-safe-b));
  min-height: calc(var(--premium-dock-h) * 0.55);
  position: relative;
  z-index: 40;
  pointer-events: auto;
  touch-action: manipulation;
}
.arcade-run--fs .arcade-dock,
.dmap8--fs .dmap8-dock {
  z-index: 90;
}
.arcade-btn,
.dmap8-btn {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.premium-result-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: auto;
}
.premium-result-modal.on { opacity: 1; }
.premium-result-card {
  width: min(360px, 94vw);
  border-radius: 18px;
  padding: 22px 20px 18px;
  background:
    linear-gradient(165deg, rgba(28, 38, 52, 0.96), rgba(12, 16, 24, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  text-align: center;
  transform: translateY(12px) scale(0.96);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.premium-result-modal.on .premium-result-card {
  transform: none;
}
.premium-result-modal.is-win .premium-result-card {
  border-color: rgba(250, 204, 21, 0.45);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.15), 0 24px 60px rgba(0,0,0,0.55);
}
.premium-result-modal.is-lose .premium-result-card {
  border-color: rgba(248, 113, 113, 0.35);
}
.premium-result-badge {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}
.premium-result-modal.is-win .premium-result-badge {
  background: rgba(250, 204, 21, 0.18);
  color: #fde68a;
}
.premium-result-modal.is-lose .premium-result-badge {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}
.premium-result-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #f8fafc;
}
.premium-result-sub {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: #94a3b8;
}
.premium-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.premium-result-stat {
  background: rgba(15, 23, 42, 0.55);
  border-radius: 10px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.premium-result-stat span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.premium-result-stat strong {
  font-size: 1rem;
  color: #e2e8f0;
}
.premium-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.premium-result-actions .btn { width: 100%; }

/* Tower lobby live preview */
.tower-lobby-preview {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin: 12px 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #0b1220;
  aspect-ratio: 16 / 10;
}
.tower-lobby-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.tower-lobby-preview-tag {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.75);
  pointer-events: none;
}
.tower-camo-preview {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin: 0 auto 4px;
  position: relative;
  background: linear-gradient(160deg, #6a727c, #2a3038);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.tower-camo-preview::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  background: var(--camo-tint, #22d3ee);
  opacity: 0.85;
  mix-blend-mode: soft-light;
}
.tower-camo-btn .swatch { display: none; }

/* Vector dock icons (no emoji) */
.tower-cmd-ico {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.tower-cmd-ico svg { width: 18px; height: 18px; display: block; }
.tower-cmd-ico.emoji { display: none; }

.tower-wave-banner {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%) scale(0.9);
  z-index: 8;
  padding: 10px 22px;
  border-radius: 12px;
  background: rgba(8, 12, 20, 0.82);
  border: 1px solid rgba(250, 204, 21, 0.4);
  color: #fde68a;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.35s ease;
}
.tower-wave-banner.on {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.tower-battle.shake {
  animation: tower-shake 0.45s ease;
}
@keyframes tower-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* Arcade neon lobby canvas */
.arcade-lobby-canvas-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin: 10px 0 12px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  background: #050816;
  aspect-ratio: 16 / 9;
}
.arcade-lobby-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.arcade-lobby-canvas-tag {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: rgba(165, 243, 252, 0.8);
}
.arcade-lobby-lore {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(186, 230, 253, 0.88);
}
.arcade-keys {
  font-variant-numeric: tabular-nums;
  color: #67e8f9;
  font-weight: 700;
}
.arcade-keys--ready {
  color: #fde047;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.45);
}

/* Dungeon lobby poster */
.dungeon-lobby-poster {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin: 10px 0 12px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: #0c0814;
  min-height: 140px;
}
.dungeon-lobby-poster .dmap8 {
  min-height: 160px;
  pointer-events: none;
}
.dungeon-cosmo-grid {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
}
.dungeon-cosmo-grid:not(.hidden) { display: grid; }
.dungeon-skins-details { display: none !important; }


/* Dungeon poster + unified hearts */
.dungeon-lobby-poster { position: relative; }
.dungeon-poster-stage {
  position: relative;
  height: 150px;
  background: radial-gradient(ellipse at 50% 20%, #2a1840, #0c0814 70%);
  overflow: hidden;
}
.dungeon-poster-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(167,139,250,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  animation: dungeon-poster-scroll 8s linear infinite;
}
@keyframes dungeon-poster-scroll {
  from { background-position: 0 0; }
  to { background-position: 16px 16px; }
}
.dungeon-poster-hero {
  position: absolute; left: 28%; bottom: 28px;
  width: 22px; height: 28px;
  background: linear-gradient(180deg, #e9d5ff, #7c3aed);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(167,139,250,0.5);
  animation: dungeon-poster-bob 1.2s ease-in-out infinite;
}
.dungeon-poster-foe {
  position: absolute; right: 30%; bottom: 30px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fca5a5, #7f1d1d);
  animation: dungeon-poster-bob 1.4s ease-in-out infinite reverse;
}
.dungeon-poster-glow {
  position: absolute; left: 50%; top: 40%;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,204,21,0.35), transparent 70%);
  animation: dungeon-poster-pulse 1.6s ease-in-out infinite;
}
.dungeon-poster-tag {
  position: absolute; left: 10px; bottom: 8px;
  font-size: 0.62rem; letter-spacing: 0.12em;
  color: rgba(216,180,254,0.85);
}
@keyframes dungeon-poster-bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes dungeon-poster-pulse {
  0%,100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
}
.dungeon-cosmo-head {
  font-size: 0.78rem;
  font-weight: 700;
  color: #c4b5fd;
  margin-bottom: 6px;
}
.dmap8-hearts {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.dmap8-heart {
  width: 10px;
  height: 10px;
  display: inline-block;
  background: #334155;
  clip-path: polygon(50% 100%, 0 35%, 18% 0, 50% 18%, 82% 0, 100% 35%);
  opacity: 0.45;
}
.dmap8-heart.on {
  background: #f43f5e;
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(244,63,94,0.6));
}
.tower-map-chip {
  cursor: pointer;
  font: inherit;
}
.tower-map-chip.on {
  border-color: rgba(250, 204, 21, 0.55);
  color: #fde68a;
  background: rgba(250, 204, 21, 0.12);
}
.arcade-lobby-loadout {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0 0 8px;
  text-align: center;
}

/* ===== Base minigames — look / VFX pack ===== */
.panel.base-game {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.panel.base-game::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 55%),
    radial-gradient(ellipse at 90% 20%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 50%),
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 45%);
  animation: baseGameAura 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.panel.base-game > * {
  position: relative;
  z-index: 1;
}
@keyframes baseGameAura {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  to { transform: translate3d(2%, -3%, 0) scale(1.06); opacity: 1; }
}

.fx-spark-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  z-index: 40;
  pointer-events: none;
}
.fx-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--spark-color, #00e8c8);
  box-shadow: 0 0 10px var(--spark-color, #00e8c8);
  animation: fxSparkFly 0.5s cubic-bezier(0.15, 0.85, 0.3, 1) forwards;
  transform: scale(var(--spark-scale, 1));
}
@keyframes fxSparkFly {
  0% { opacity: 1; transform: translate(0, 0) scale(var(--spark-scale, 1)); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.15); }
}
.fx-ring-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-2) 80%, white);
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent-2) 50%, transparent);
  animation: fxRingBurst 0.65s ease-out forwards;
  pointer-events: none;
  z-index: 35;
}
@keyframes fxRingBurst {
  0% { opacity: 0.95; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(4.2); }
}
.fx-float-text {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, 0);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 204, 85, 0.7);
  animation: fxFloatUp 0.75s ease-out forwards;
  pointer-events: none;
  z-index: 45;
  white-space: nowrap;
}
.fx-float-text.is-crit {
  font-size: 1.45rem;
  color: #fff;
  text-shadow: 0 0 16px var(--accent-2), 0 0 28px var(--gold);
}
@keyframes fxFloatUp {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -36px) scale(1); }
}
.fx-shake { animation: fxShakeAnim 0.42s ease; }
@keyframes fxShakeAnim {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.fx-flash-win { animation: fxFlashWin 0.65s ease; }
.fx-flash-lose { animation: fxFlashLose 0.55s ease; }
@keyframes fxFlashWin {
  0% { box-shadow: 0 0 0 rgba(0, 232, 200, 0); }
  35% { box-shadow: 0 0 48px rgba(0, 232, 200, 0.55), inset 0 0 40px rgba(255, 204, 85, 0.18); }
  100% { box-shadow: var(--shadow); }
}
@keyframes fxFlashLose {
  0% { filter: brightness(1); }
  30% { filter: brightness(0.75) saturate(0.7); box-shadow: 0 0 28px rgba(255, 92, 122, 0.35); }
  100% { filter: brightness(1); }
}
.fx-pulse { animation: fxPulseAnim 0.55s ease; }
@keyframes fxPulseAnim {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.04); }
}
.fx-stagger-in {
  animation: fxStaggerIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--stagger, 0s);
}
@keyframes fxStaggerIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Memory upgrades */
.base-game--memory .memory-grid {
  gap: 12px;
  perspective: 1000px;
}
.base-game--memory .memory-card {
  transform-style: preserve-3d;
  border-width: 2px;
  background:
    linear-gradient(145deg, rgba(55, 48, 98, 0.95), rgba(18, 16, 36, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.35);
}
.base-game--memory .memory-card.back {
  background:
    radial-gradient(circle at 30% 25%, rgba(139, 108, 255, 0.35), transparent 45%),
    linear-gradient(145deg, #1f2340, #0c0e1a);
  animation: memCardIdle 3.2s ease-in-out infinite;
}
.base-game--memory .memory-card.back::after {
  content: "✦";
  font-size: 1.35rem;
  color: color-mix(in srgb, var(--accent) 80%, white);
  filter: drop-shadow(0 0 10px rgba(139, 108, 255, 0.75));
}
@keyframes memCardIdle {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 16px rgba(0,0,0,0.3); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 22px rgba(139, 108, 255, 0.28); }
}
.base-game--memory .memory-card.flipped {
  background: linear-gradient(145deg, #4c3d8a, #231c48);
  border-color: var(--accent-2);
  box-shadow: 0 0 24px rgba(0, 232, 200, 0.35), inset 0 0 20px rgba(0, 232, 200, 0.08);
  animation: memFlipIn 0.38s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes memFlipIn {
  0% { transform: rotateY(90deg) scale(0.9); }
  100% { transform: rotateY(180deg) scale(1); }
}
.base-game--memory .memory-card.matched {
  opacity: 1;
  border-color: var(--gold);
  background: linear-gradient(145deg, #5a4818, #2a220c);
  box-shadow: 0 0 28px rgba(255, 204, 85, 0.45);
  filter: saturate(1.15);
}
.base-game--memory .memory-card.miss-shake {
  animation: fxShakeAnim 0.4s ease;
  border-color: var(--danger) !important;
}

/* Spin upgrades */
.base-game--spin .wheel-wrap {
  width: min(280px, 88vw);
  height: min(280px, 88vw);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
.base-game--spin .wheel-ring {
  padding: 10px;
  background: conic-gradient(from 20deg, var(--gold), #ff9f43, var(--accent), var(--accent-2), var(--gold));
  animation: wheelRingGlow 3.5s ease-in-out infinite alternate;
}
@keyframes wheelRingGlow {
  from { box-shadow: var(--glow), 0 0 40px rgba(255, 204, 85, 0.2); }
  to { box-shadow: var(--glow), 0 0 70px rgba(0, 232, 200, 0.35), 0 0 40px rgba(255, 204, 85, 0.35); }
}
.base-game--spin .wheel-pointer {
  font-size: 1.6rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  animation: pointerBob 1.1s ease-in-out infinite;
  z-index: 6;
}
@keyframes pointerBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(3px); }
}
.base-game--spin .wheel-hub {
  box-shadow: 0 0 20px rgba(255, 204, 85, 0.55), inset 0 0 12px rgba(255, 255, 255, 0.25);
}
.base-game--spin .btn-gold {
  min-height: 52px;
  font-weight: 900;
  letter-spacing: 0.03em;
  animation: spinBtnPulse 2.4s ease-in-out infinite;
}
.base-game--spin .btn-gold:disabled {
  animation: none;
}
@keyframes spinBtnPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 204, 85, 0); }
  50% { box-shadow: 0 0 28px rgba(255, 204, 85, 0.45); }
}
.base-game--spin .spin-result.win {
  animation: spinResultPop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes spinResultPop {
  0% { opacity: 0; transform: scale(0.7) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Box upgrades */
.base-game--box .box-row {
  gap: 16px;
  margin: 32px 0 20px;
}
.base-game--box .chest {
  max-width: 118px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #7a5420 0%, #3d2610 42%, #1a1005 100%);
  overflow: hidden;
}
.base-game--box .chest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.18), transparent 40%, transparent 60%, rgba(255,204,85,0.12));
  pointer-events: none;
}
.base-game--box .chest-emoji {
  position: relative;
  z-index: 1;
  font-size: 2.55rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
  transition: transform 0.25s ease;
}
.base-game--box .chest.idle-bounce .chest-emoji {
  animation: chestEmojiBob 2.2s ease-in-out infinite;
}
@keyframes chestEmojiBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-3deg); }
}
.base-game--box .chest.open .chest-emoji {
  animation: chestEmojiOpen 0.55s ease;
}
@keyframes chestEmojiOpen {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.25) rotate(-12deg); }
  100% { transform: scale(1.05) rotate(0); }
}
.base-game--box .chest.winner {
  border-color: var(--accent-2);
  animation: chestWin 0.7s ease, chestWinnerGlow 1.4s ease-in-out infinite;
}
@keyframes chestWinnerGlow {
  0%, 100% { box-shadow: 0 0 28px rgba(0, 232, 200, 0.4); }
  50% { box-shadow: 0 0 48px rgba(255, 204, 85, 0.55); }
}
.base-game--box .box-reveal {
  animation: spinResultPop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
  padding: 14px;
  border-radius: 14px;
  background: rgba(0, 232, 200, 0.08);
  border: 1px solid rgba(0, 232, 200, 0.25);
  text-align: center;
}

/* Quiz upgrades */
.base-game--quiz .quiz-question {
  font-size: 1.12rem;
  line-height: 1.45;
  padding: 16px 14px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
  animation: quizQIn 0.45s ease;
}
@keyframes quizQIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.base-game--quiz .quiz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.base-game--quiz .quiz-opt-letter {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--accent-2);
  background: rgba(0, 232, 200, 0.12);
  border: 1px solid rgba(0, 232, 200, 0.3);
}
.base-game--quiz .quiz-opt-text {
  flex: 1;
  line-height: 1.3;
}
.base-game--quiz .quiz-opt:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-1px);
}
.base-game--quiz .quiz-opt.correct {
  border-color: var(--accent-2) !important;
  background: linear-gradient(135deg, rgba(0, 232, 200, 0.22), rgba(0, 232, 200, 0.08)) !important;
  box-shadow: 0 0 28px rgba(0, 232, 200, 0.4);
  animation: quizCorrectPop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.base-game--quiz .quiz-opt.wrong {
  border-color: var(--danger) !important;
  background: linear-gradient(135deg, rgba(255, 92, 122, 0.2), rgba(255, 92, 122, 0.06)) !important;
}
@keyframes quizCorrectPop {
  0% { transform: scale(0.97); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.base-game--quiz #quiz-explain .hint {
  animation: spinResultPop 0.45s ease;
  border: 1px solid rgba(139, 108, 255, 0.3) !important;
  background: rgba(139, 108, 255, 0.1) !important;
}

/* Tap upgrades */
.base-game--tap .tap-zone {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 48px color-mix(in srgb, var(--accent) 28%, transparent);
  animation: tapZoneAura 2.8s ease-in-out infinite alternate;
}
@keyframes tapZoneAura {
  from { filter: brightness(1); }
  to { filter: brightness(1.08); }
}
.base-game--tap .combo-badge {
  letter-spacing: 0.04em;
}
.base-game--tap .energy-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* -- Bull Run (premium endless runner) -- */
.bull-screen { display: flex; flex-direction: column; gap: 12px; }
.bull-lobby { padding: 16px 14px 18px; }
.bull-lobby-hero { text-align: center; margin-bottom: 14px; }
.bull-lobby-badge {
  display: inline-block; font-size: 10px; letter-spacing: 0.12em; font-weight: 700;
  color: #f0c060; background: rgba(240, 192, 96, 0.12); border: 1px solid rgba(240, 192, 96, 0.28);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.bull-lobby-title {
  margin: 0 0 6px; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em;
  color: #f5efe0;
}
.bull-lobby-sub {
  margin: 0 auto 12px; max-width: 28ch; font-size: 0.88rem; line-height: 1.35;
  color: rgba(200, 220, 210, 0.72);
}
.bull-attempts { margin: 0 auto 12px; max-width: 280px; text-align: left; }
.bull-attempts-row {
  display: flex; justify-content: space-between; font-size: 0.78rem;
  color: rgba(180, 200, 190, 0.75); margin-bottom: 4px;
}
.bull-attempts-bar {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden;
}
.bull-attempts-bar i {
  display: block; height: 100%; background: linear-gradient(90deg, #e8a838, #2dd4a8);
  border-radius: inherit;
}
.bull-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.bull-cta { font-weight: 700; letter-spacing: 0.02em; }
.bull-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px;
}
.bull-stats > div {
  text-align: center; padding: 10px 6px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
.bull-stats span {
  display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(160, 180, 170, 0.65); margin-bottom: 4px;
}
.bull-stats strong { font-size: 1.05rem; color: #e8f5ef; }
.bull-howto {
  margin: 0; padding: 0; list-style: none; font-size: 0.82rem; color: rgba(190, 210, 200, 0.78);
}
.bull-howto li {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; line-height: 1.35;
}
.bull-howto li:last-child { margin-bottom: 0; }
.bull-howto strong {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 8px;
  display: grid; place-items: center; font-size: 0.72rem;
  background: rgba(45, 212, 168, 0.15); color: #2dd4a8;
}

.bull-battle {
  display: flex; flex-direction: column; gap: 0;
  min-height: 0; flex: 1;
}
.bull-battle--fs {
  position: fixed; inset: 0; z-index: 80;
  background: #050a10;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  display: flex; flex-direction: column;
}

/* Body-level host — escapes pages-viewport pointer-events:none */
.bull-fs-host {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: #050a10;
  pointer-events: auto;
  touch-action: none;
  overflow: hidden;
}
.bull-fs-host .bull-battle--fs {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bull-fs-host .bull-battle--fs[hidden] { display: none !important; }
.bull-fs-host--teardown { opacity: 0; pointer-events: none; }

html.kyber-want-landscape,
html.kyber-want-landscape body {
  overflow: hidden !important;
  touch-action: none;
}

/* Clean wait screen — no CSS rotate (that looked broken) */
.bull-rotate-gate {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: 28px 20px;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(232,168,56,0.2), transparent 55%),
    #050a10;
}
.bull-rotate-gate[hidden] { display: none !important; }
.bull-rotate-card { text-align: center; max-width: 280px; }
.bull-rotate-phone {
  width: 64px; height: 104px; margin: 0 auto 18px;
  position: relative;
  animation: bull-rotate-phone 1.7s ease-in-out infinite;
}
.bull-rotate-phone-body {
  display: block; width: 100%; height: 100%;
  border: 3px solid rgba(232, 168, 56, 0.9);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(45,212,168,0.14), rgba(5,10,16,0.5));
  position: relative;
}
.bull-rotate-phone-body::after {
  content: ""; position: absolute; left: 50%; bottom: 8px;
  width: 16px; height: 3px; border-radius: 2px;
  background: rgba(232,168,56,0.55); transform: translateX(-50%);
}
.bull-rotate-arrow {
  position: absolute; right: -26px; top: 50%;
  width: 22px; height: 22px;
  border-top: 3px solid #2dd4a8; border-right: 3px solid #2dd4a8;
  transform: translateY(-50%) rotate(45deg);
}
@keyframes bull-rotate-phone {
  0%, 18% { transform: rotate(0deg); }
  42%, 68% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}
.bull-rotate-title {
  margin: 0 0 8px; font-size: 1.12rem; font-weight: 800;
  letter-spacing: 0.03em; color: #f5e6c8;
}
.bull-rotate-sub {
  margin: 0 0 16px; font-size: 0.86rem; line-height: 1.4;
  color: rgba(180, 200, 190, 0.72);
}
.bull-rotate-ok { min-width: 148px; }

/* Portrait fallback — landscape-shaped stage, no transform */
.bull-fs-host--letterbox .bull-battle--fs {
  justify-content: space-between;
}
.bull-fs-host--letterbox .bull-stage {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(48vh, 56vw);
  margin: auto 0;
}
.bull-fs-host--letterbox .bull-tip { display: none; }
.bull-fs-host--letterbox .bull-dock {
  max-width: 420px; margin: 0 auto; width: 100%;
}

.bull-fs-host--landscape .bull-hud { padding: 6px 16px 4px; }
.bull-fs-host--landscape .bull-tip { display: none; }
.bull-fs-host--landscape .bull-dock {
  grid-template-columns: 1fr 1fr;
  max-width: 420px; margin: 0 auto; width: 100%;
  padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0));
  gap: 12px;
}
.bull-fs-host--landscape .bull-dock-btn { min-height: 44px; }
@media (orientation: landscape) {
  .bull-battle--fs .bull-hud { padding: 6px 16px 4px; }
  .bull-battle--fs .bull-tip { display: none; }
  .bull-battle--fs .bull-dock {
    grid-template-columns: 1fr 1fr;
    max-width: 420px; margin: 0 auto; width: 100%;
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0));
    gap: 12px;
  }
  .bull-battle--fs .bull-dock-btn { min-height: 44px; }
}
.bull-hud {
  flex-shrink: 0; padding: 10px 14px 8px;
  background: linear-gradient(180deg, rgba(5,10,16,0.92), rgba(5,10,16,0.2));
  position: relative; z-index: 2;
}
.bull-hud-row {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.bull-brand {
  font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 800; color: #e8a838;
  text-shadow: 0 0 18px rgba(232,168,56,0.45);
}
.bull-hud-stats { display: flex; gap: 6px; flex: 1; justify-content: center; }
.bull-pill {
  font-size: 0.74rem; font-weight: 800; padding: 5px 10px; border-radius: 999px;
  background: rgba(10, 24, 28, 0.75); border: 1px solid rgba(45, 212, 168, 0.28);
  color: #e8f5ef; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 12px rgba(45,212,168,0.12);
}
.bull-pill-spd { color: #2dd4a8; border-color: rgba(232,168,56,0.35); }
.bull-icon-btn {
  width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06); color: #e8f0ec; font-size: 14px; cursor: pointer;
  backdrop-filter: blur(8px);
}
.bull-icon-btn.danger { color: #f87171; border-color: rgba(248,113,113,0.4); background: rgba(80,20,20,0.35); }
.bull-tip {
  margin: 6px 0 0; font-size: 0.7rem; color: rgba(160, 180, 170, 0.55); text-align: center;
  letter-spacing: 0.02em;
}
.bull-stage {
  flex: 1; min-height: 200px; position: relative; margin: 0;
  border-radius: 0; overflow: hidden;
  border: none;
  box-shadow: none;
}
.bull-canvas {
  width: 100%; height: 100%; display: block; touch-action: none;
  background: #050a10;
}
.bull-dock {
  flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(0deg, rgba(5,10,16,0.95), rgba(5,10,16,0.55));
  position: relative; z-index: 2;
}
.bull-dock-btn {
  min-height: 50px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 14px !important;
}
.bull-dock-btn#bull-jump, .bull-dock #bull-jump {
  background: linear-gradient(135deg, #e8a838, #c48428) !important;
  color: #1a1208 !important; border: none !important;
  box-shadow: 0 6px 20px rgba(232,168,56,0.35);
}

.bull-pill-tier { color: #ffe08a; border-color: rgba(232,168,56,0.4); }
.bull-pill-tier[data-tier="2"] { color: #f0c060; }
.bull-pill-tier[data-tier="3"] { color: #fb923c; border-color: rgba(251,146,60,0.45); }
.bull-pill-tier[data-tier="4"] { color: #f87171; border-color: rgba(248,113,113,0.5); box-shadow: 0 0 12px rgba(248,113,113,0.25); }