/* ─────────────────────────────────────────────
   MÕ CỐC CỐC — Brand styling
   Dark wooden temple aesthetic with gold accents
   ───────────────────────────────────────────── */

:root {
  --bg-deep: #0d0907;
  --bg-mid: #1a1410;
  --bg-card: #221a14;
  --wood-light: #a87b54;
  --wood-mid: #7a5235;
  --wood-dark: #3a2515;
  --gold: #d4a857;
  --gold-light: #f0d28e;
  --red-seal: #a01923;
  --cream: #faf6ec;
  --text: #e8d8c0;
  --text-dim: #a89580;
  --text-faint: #6a5840;
  --shadow-glow: 0 0 30px rgba(212, 168, 87, 0.3);
}

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

html, body {
  height: 100%;
  font-family: "Inter", "Be Vietnam Pro", system-ui, sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(ellipse at top, #2a1a10 0%, var(--bg-deep) 70%),
    var(--bg-deep);
  min-height: 100vh;
  position: relative;
}

/* Subtle smoke/incense background */
.incense-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(212, 168, 87, 0.08), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(160, 25, 35, 0.05), transparent 50%);
  animation: incense-drift 20s ease-in-out infinite;
}
@keyframes incense-drift {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-10px); }
}

/* ─── TOPBAR ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: rgba(13, 9, 7, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 168, 87, 0.15);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-mark {
  font-size: 22px;
  color: var(--gold);
}
.brand-name {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.topbar-actions {
  display: flex;
  gap: 4px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.icon-btn:hover, .icon-btn:focus-visible {
  background: rgba(212, 168, 87, 0.1);
  color: var(--gold);
  border-color: rgba(212, 168, 87, 0.2);
}

/* ─── GAME LAYOUT ─── */
.game {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 60px);
}

/* ─── RANK CARD ─── */
.rank-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rank-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.04), transparent);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer { 50% { opacity: 0.5; } }

.rank-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.rank-name {
  font-family: "Noto Serif", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-shadow: 0 0 15px rgba(212, 168, 87, 0.4);
}
.rank-progress {
  height: 6px;
  background: rgba(212, 168, 87, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.rank-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 999px;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(212, 168, 87, 0.5);
}
.rank-progress-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-faint);
}

/* ─── COUNTER ─── */
.counter {
  text-align: center;
  padding: 8px 0;
}
.counter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.counter-value {
  font-family: "Noto Serif", serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  text-shadow: 0 0 20px rgba(212, 168, 87, 0.5);
  font-variant-numeric: tabular-nums;
  min-height: 56px;
}
.counter-rate {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
}
.counter-value.pulse {
  animation: counter-pulse 0.2s ease;
}
@keyframes counter-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ─── MO BUTTON ─── */
.mo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.mo {
  position: relative;
  width: 280px;
  height: 280px;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

.mo-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.6));
  transition: transform 0.06s ease-out;
}

.mo:active .mo-svg {
  transform: scale(0.92);
}

.mo.struck .mo-svg {
  animation: mo-strike 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mo-strike {
  0% { transform: scale(1); }
  35% { transform: scale(0.92) rotate(-1deg); }
  70% { transform: scale(1.02) rotate(0.5deg); }
  100% { transform: scale(1); }
}

.mo-shadow {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 18px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%);
  filter: blur(4px);
  z-index: -1;
}

.mo-ripple-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.mo-ripple {
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: mo-ripple 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes mo-ripple {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
  animation: hint-fade 2s ease-in-out infinite;
}
.hint.hidden { display: none; }
@keyframes hint-fade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ─── FLOATING +N TEXT ─── */
.float-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.float-text {
  position: absolute;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(212, 168, 87, 0.8), 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: float-up 1s ease-out forwards;
  white-space: nowrap;
}
@keyframes float-up {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  100% { transform: translate(-50%, -100px) scale(1); opacity: 0; }
}

/* ─── STATS ─── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
}

.stat {
  background: var(--bg-card);
  border: 1px solid rgba(212, 168, 87, 0.1);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.stat-value {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── CTA ─── */
.cta-share {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.btn-share {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212, 168, 87, 0.3);
  transition: all 0.2s ease;
  font-family: inherit;
}
.btn-share:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(212, 168, 87, 0.5);
}
.btn-share:active {
  transform: translateY(0);
}

/* ─── MODAL ─── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-in 0.2s ease;
}
.modal[hidden] { display: none !important; }

@keyframes modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  background: var(--bg-mid);
  border: 1px solid rgba(212, 168, 87, 0.25);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), var(--shadow-glow);
  animation: modal-card-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-card-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(212, 168, 87, 0.15);
}
.modal-header h2 {
  font-family: "Noto Serif", serif;
  font-size: 20px;
  color: var(--gold);
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(212, 168, 87, 0.15);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* ─── TABS ─── */
.tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
}
.tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.tab.active {
  background: rgba(212, 168, 87, 0.15);
  color: var(--gold);
}

/* ─── LEADERBOARD ─── */
.leaderboard-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 20px;
}
.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.lb-row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.lb-row.me {
  background: rgba(212, 168, 87, 0.1);
  border: 1px solid rgba(212, 168, 87, 0.3);
}
.lb-rank {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: var(--text-dim);
}
.lb-row:nth-child(1) .lb-rank { color: #ffd700; font-size: 20px; }
.lb-row:nth-child(2) .lb-rank { color: #c0c0c0; font-size: 18px; }
.lb-row:nth-child(3) .lb-rank { color: #cd7f32; font-size: 18px; }

.lb-name { color: var(--text); font-weight: 500; }
.lb-tier { font-size: 11px; color: var(--text-faint); }
.lb-score {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--gold-light);
}
.loading { text-align: center; padding: 40px 20px; color: var(--text-dim); }

.my-rank { text-align: center; color: var(--text-dim); }
.my-rank strong { color: var(--gold); }

/* ─── SKINS ─── */
.skin-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.skin-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.15);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.skin-card:hover {
  border-color: rgba(212, 168, 87, 0.4);
  transform: translateY(-2px);
}
.skin-card.equipped {
  border-color: var(--gold);
  background: rgba(212, 168, 87, 0.1);
}
.skin-card.equipped::after {
  content: "✓ Đang dùng";
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--gold);
  color: var(--bg-deep);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}
.skin-card.locked { opacity: 0.6; cursor: not-allowed; }
.skin-preview {
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.skin-name {
  font-family: "Noto Serif", serif;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 2px;
}
.skin-price {
  font-size: 12px;
  color: var(--text-dim);
}
.skin-price.free { color: #6dbf6d; font-weight: 600; }
.skin-price.locked { color: var(--text-faint); }

/* ─── INFO ─── */
.info-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.7;
}
.info-content h3 {
  font-family: "Noto Serif", serif;
  color: var(--gold);
  margin: 16px 0 8px;
  font-size: 16px;
}
.info-content p, .info-content li { color: var(--text); font-size: 14px; }
.info-content ul, .info-content ol { padding-left: 22px; }
.info-content ul li, .info-content ol li { margin-bottom: 4px; }
.info-tagline {
  text-align: center;
  font-size: 16px !important;
  color: var(--gold-light) !important;
  margin-bottom: 16px;
}
.info-credit {
  text-align: center;
  margin-top: 24px;
  color: var(--text-faint) !important;
  font-size: 12px !important;
}
.info-credit a { color: var(--gold); text-decoration: none; }

.ranks-list {
  list-style: none;
  padding: 0 !important;
  margin: 8px 0;
}
.ranks-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px dashed rgba(212, 168, 87, 0.1);
  font-size: 14px;
}
.ranks-list .rank-name-li {
  font-family: "Noto Serif", serif;
  color: var(--gold);
  font-weight: 600;
}
.ranks-list .rank-cost-li {
  color: var(--text-faint);
  font-family: "JetBrains Mono", monospace;
}
.ranks-list li.unlocked .rank-name-li { color: var(--gold-light); }
.ranks-list li.locked { opacity: 0.4; }

/* ─── PROFILE MODAL ─── */
.profile-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.profile-section {
  margin-bottom: 8px;
}
.profile-divider {
  height: 1px;
  background: rgba(212, 168, 87, 0.15);
  margin: 16px 0;
}
.profile-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 600;
}
.profile-help {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 10px;
  line-height: 1.5;
}
.profile-input {
  width: 100%;
  height: 44px;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 8px;
}
.profile-input:focus {
  outline: none;
  border-color: var(--gold);
}
.btn-profile-save {
  background: var(--gold);
  color: var(--bg-deep);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.btn-profile-save:hover { background: var(--gold-light); }
.btn-profile-save.danger-btn {
  background: transparent;
  color: var(--red-seal);
  border: 1.5px solid var(--red-seal);
}
.btn-profile-save.danger-btn:hover { background: var(--red-seal); color: var(--cream); }

.profile-code-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.profile-code {
  flex: 1;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  border-radius: 8px;
  padding: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--gold-light);
  text-align: center;
  letter-spacing: 1px;
  word-break: break-all;
}
.btn-profile-copy {
  background: rgba(212, 168, 87, 0.15);
  color: var(--gold);
  border: 1px solid rgba(212, 168, 87, 0.3);
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.btn-profile-copy:hover { background: rgba(212, 168, 87, 0.25); }

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.profile-stat {
  background: var(--bg-card);
  border: 1px solid rgba(212, 168, 87, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.profile-stat-value {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
}
.profile-stat-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ─── SHARE MODAL ─── */
.share-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.share-preview {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(212, 168, 87, 0.2);
  margin-bottom: 12px;
  display: block;
}
.share-hint {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 12px;
}
.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-share-action {
  background: var(--gold);
  color: var(--bg-deep);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
}
.btn-share-action:hover { background: var(--gold-light); }
.share-text {
  width: 100%;
  height: 80px;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.15);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  resize: none;
}

/* ─── BREAKTHROUGH OVERLAY ─── */
.breakthrough-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(circle at center, rgba(212, 168, 87, 0.4), rgba(0, 0, 0, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bt-overlay-in 0.4s ease;
}
.breakthrough-overlay[hidden] { display: none !important; }
@keyframes bt-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.breakthrough-content {
  text-align: center;
  position: relative;
  animation: bt-content 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bt-content {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.breakthrough-rays {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(212, 168, 87, 0.4) 5deg, transparent 10deg,
    transparent 30deg, rgba(212, 168, 87, 0.3) 35deg, transparent 40deg,
    transparent 60deg, rgba(212, 168, 87, 0.4) 65deg, transparent 70deg,
    transparent 90deg, rgba(212, 168, 87, 0.3) 95deg, transparent 100deg,
    transparent 120deg, rgba(212, 168, 87, 0.4) 125deg, transparent 130deg,
    transparent 150deg, rgba(212, 168, 87, 0.3) 155deg, transparent 160deg,
    transparent 180deg, rgba(212, 168, 87, 0.4) 185deg, transparent 190deg,
    transparent 210deg, rgba(212, 168, 87, 0.3) 215deg, transparent 220deg,
    transparent 240deg, rgba(212, 168, 87, 0.4) 245deg, transparent 250deg,
    transparent 270deg, rgba(212, 168, 87, 0.3) 275deg, transparent 280deg,
    transparent 300deg, rgba(212, 168, 87, 0.4) 305deg, transparent 310deg,
    transparent 330deg, rgba(212, 168, 87, 0.3) 335deg, transparent 340deg,
    transparent 360deg);
  animation: bt-rays-spin 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes bt-rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.breakthrough-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 168, 87, 0.6), transparent 70%);
  filter: blur(20px);
  animation: bt-glow-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes bt-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.breakthrough-title {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 8px;
  margin-bottom: 16px;
  text-shadow: 0 0 20px rgba(212, 168, 87, 0.8);
}
.breakthrough-rank {
  font-family: "Noto Serif", serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(212, 168, 87, 1), 0 0 60px rgba(212, 168, 87, 0.6);
  margin-bottom: 16px;
}
.breakthrough-sub {
  font-size: 14px;
  color: var(--text);
  letter-spacing: 1px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 380px) {
  .mo { width: 240px; height: 240px; }
  .counter-value { font-size: 48px; }
  .rank-name { font-size: 24px; }
  .breakthrough-rank { font-size: 44px; }
}

@media (min-width: 600px) {
  .game { padding: 32px 24px 48px; }
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-bottom)) {
  .game { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .topbar { padding-top: calc(14px + env(safe-area-inset-top)); }
}