/* ══════════════════════════════════════════════════════════
   MOONHEM THEME — Dark (default)
   Accent #c4b5fd · Purple #7000ff · Cyan #4cd6ff
   ══════════════════════════════════════════════════════════ */

/* ── GLOBAL TOKENS ── */
:root {
  --mn-bg:      #0e0b1d;
  --mn-surface: #17122a;
  --mn-accent:  #c4b5fd;
  --mn-purple:  #7c3aed;
  --mn-cyan:    #38bdf8;
  --mn-text:    #ede8f8;
  /* Warm brand accents (from the logo pink #e6007e) — used additively for "adorable" warmth */
  --mn-pink:      #e6007e;
  --mn-pink-soft: #ff5ca0;
  --mn-pink-tint: #ffc0dd;
  --mn-sticker:    #241a36;
  --mn-sticker-bd: #4a3a6b;
}

/* ── BODY & BACKGROUND ── */
body {
  background-color: var(--mn-bg) !important;
  background-image:
    radial-gradient(ellipse at 88% -5%, rgba(230,0,126,.14) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 5%,  rgba(124,58,237,.20) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 88%, rgba(56,189,248,.11) 0%, transparent 52%),
    radial-gradient(ellipse at 45% 50%, rgba(230,0,126,.05) 0%, transparent 65%) !important;
  font-family: 'Almarai', 'Plus Jakarta Sans', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
  color: var(--mn-text) !important;
}

/* ── AMBIENT ORBS ── */
.mn-orb1 { background: rgba(112,0,255,.10) !important; }
.mn-orb2 { background: rgba(196,181,253,.055) !important; }
.mn-orb3 { background: rgba(76,214,255,.042) !important; }
.orb1    { background: rgba(112,0,255,.10) !important; }
.orb2    { background: rgba(196,181,253,.055) !important; }
.orb3    { background: rgba(76,214,255,.042) !important; }
.orb4    { background: rgba(112,0,255,.07) !important; }

/* ── TAP HIGHLIGHT ── */
* { -webkit-tap-highlight-color: transparent; }

/* ── PAGE TITLES ── */
h1 {
  background: linear-gradient(135deg, #fff 18%, #ffc0dd 52%, #c4b5fd 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.app-title {
  background: linear-gradient(135deg, #fff 18%, #ffc0dd 52%, #c4b5fd 90%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}
.app-tagline { color: rgba(231,223,245,.35) !important; }
.page-title {
  background: linear-gradient(135deg, #fff 18%, #ffc0dd 52%, #c4b5fd 90%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}
.header h1, .header-row h1 {
  background: linear-gradient(135deg, #fff 18%, #ffc0dd 52%, #c4b5fd 90%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── STICKER SURFACE (opt-in: solid fill + visible border + offset shadow) ── */
.mn-sticker {
  background: var(--mn-sticker, #241a36) !important;
  border: 2px solid var(--mn-sticker-bd, #4a3a6b) !important;
  border-radius: 22px !important;
  box-shadow: 3px 4px 0 rgba(0,0,0,.38) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.mn-sticker.is-pink { border-color: var(--mn-pink) !important; box-shadow: 3px 4px 0 rgba(230,0,126,.30) !important; }
[dir="rtl"] .mn-sticker { box-shadow: -3px 4px 0 rgba(0,0,0,.38) !important; }
[dir="rtl"] .mn-sticker.is-pink { box-shadow: -3px 4px 0 rgba(230,0,126,.30) !important; }

/* ── GAME NIGHT SECTION ── */
.gn-card {
  background: rgba(23,18,42,.80) !important;
  border-color: rgba(196,181,253,.28) !important;
  box-shadow: 0 0 80px rgba(124,58,237,.12), 0 0 120px rgba(124,58,237,.05), inset 0 0 80px rgba(255,255,255,.03) !important;
}
.gn-title { color: var(--mn-accent) !important; }

@keyframes moonGlow {
  from { filter: drop-shadow(0 0 6px rgba(196,181,253,.35)); }
  to   { filter: drop-shadow(0 0 22px rgba(196,181,253,.80)); }
}

.gn-pill.on {
  border-color: var(--mn-accent) !important;
  color: var(--mn-accent) !important;
  background: rgba(196,181,253,.10) !important;
  box-shadow: 0 0 14px rgba(196,181,253,.12) !important;
}
.gn-pill.on .pill-dot {
  background: var(--mn-accent) !important;
  box-shadow: 0 0 9px var(--mn-accent) !important;
}

.gn-start {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #e0d6ff !important;
  box-shadow: 0 6px 28px rgba(124,58,237,.40) !important;
}
@keyframes gnPulse {
  0%,100% { box-shadow: 0 6px 28px rgba(124,58,237,.35); }
  50%      { box-shadow: 0 6px 38px rgba(124,58,237,.60), 0 0 0 7px rgba(124,58,237,.08); }
}
.gn-start:hover {
  box-shadow: 0 12px 42px rgba(124,58,237,.60) !important;
  animation: none !important;
}

/* ── GAME CARDS ── */
.game-card {
  background: rgba(23,18,40,.85) !important;
  border-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.game-card:hover {
  border-color: rgba(196,181,253,.28) !important;
  box-shadow: 0 20px 50px rgba(124,58,237,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.card-top,
.c-gold .card-top, .c-purple .card-top, .c-blue .card-top,
.c-green .card-top, .c-orange .card-top, .c-teal .card-top,
.c-lime .card-top, .c-violet .card-top {
  background: linear-gradient(150deg, rgba(40,33,58,1) 0%, rgba(28,22,42,1) 100%) !important;
}

.card-glow { opacity: .10 !important; }
.game-card:hover .card-glow { opacity: .35 !important; }
.c-gold .card-glow   { background: radial-gradient(ellipse at 50% 100%, rgba(196,181,253,.8), transparent 68%) !important; }
.c-purple .card-glow { background: radial-gradient(ellipse at 50% 100%, rgba(112,0,255,.8),   transparent 68%) !important; }
.c-blue .card-glow   { background: radial-gradient(ellipse at 50% 100%, rgba(76,214,255,.8),  transparent 68%) !important; }
.c-green .card-glow  { background: radial-gradient(ellipse at 50% 100%, rgba(74,222,128,.7),  transparent 68%) !important; }
.c-orange .card-glow { background: radial-gradient(ellipse at 50% 100%, rgba(112,0,255,.8),   transparent 68%) !important; }
.c-teal .card-glow   { background: radial-gradient(ellipse at 50% 100%, rgba(76,214,255,.8),  transparent 68%) !important; }
.c-lime .card-glow   { background: radial-gradient(ellipse at 50% 100%, rgba(196,181,253,.8), transparent 68%) !important; }
.c-violet .card-glow { background: radial-gradient(ellipse at 50% 100%, rgba(112,0,255,.9),   transparent 68%) !important; }

.c-gold .card-name, .c-green .card-name, .c-lime .card-name { color: var(--mn-accent) !important; }
.c-purple .card-name, .c-violet .card-name, .c-orange .card-name { color: #a78bfa !important; }
.c-blue .card-name, .c-teal .card-name { color: var(--mn-cyan) !important; }

.c-gold:hover, .c-green:hover, .c-lime:hover     { box-shadow: 0 18px 46px rgba(196,181,253,.14) !important; border-color: rgba(196,181,253,.28) !important; }
.c-purple:hover, .c-violet:hover, .c-orange:hover { box-shadow: 0 18px 46px rgba(112,0,255,.20)   !important; border-color: rgba(112,0,255,.40)   !important; }
.c-blue:hover, .c-teal:hover     { box-shadow: 0 18px 46px rgba(76,214,255,.18)  !important; border-color: rgba(76,214,255,.35)  !important; }

.card-play,
.c-gold .card-play, .c-purple .card-play, .c-blue .card-play,
.c-green .card-play, .c-orange .card-play, .c-teal .card-play,
.c-lime .card-play, .c-violet .card-play {
  background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(91,33,182,.85)) !important; color: #fff !important;
  box-shadow: 0 4px 18px rgba(124,58,237,.40) !important;
}
.c-lime .card-play, .c-gold .card-play {
  background: rgba(196,181,253,.25) !important;
  box-shadow: 0 4px 16px rgba(196,181,253,.15) !important;
}
.card-play:hover { filter: brightness(1.15) !important; transform: scale(1.02) !important; }

/* ── SURFACE CARDS ── */
.rivalry-card {
  background: rgba(29,25,40,.80) !important;
  border-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) !important;
}
.team-card {
  background: rgba(29,25,40,.75) !important;
  border-color: rgba(255,255,255,.06) !important;
}
.team-card.t1.active { border-color: rgba(79,143,255,.55) !important; }
.team-card.t2.active { border-color: rgba(255,92,122,.55) !important; }

/* ── WIN BADGES ── */
.wins-badge.t1b.leader { box-shadow: 0 0 18px rgba(79,143,255,.35) !important; }
.wins-badge.t2b.leader { box-shadow: 0 0 18px rgba(255,92,122,.35) !important; }

/* ── ACHIEVEMENT / TOAST ── */
.save-bar  { color: var(--mn-accent) !important; }
.gnd-title { color: var(--mn-accent) !important; }
.gnd-inner { background: rgba(196,181,253,.06) !important; border-color: rgba(196,181,253,.22) !important; }

/* ── QUICK-PLAY BUTTON ── */
.quick-btn:hover {
  background: rgba(196,181,253,.08) !important;
  border-color: rgba(196,181,253,.25) !important;
  color: var(--mn-accent) !important;
}

/* ── HOW-TO-PLAY ICONS ── */
.game-card .gc-icon { filter: drop-shadow(0 0 12px rgba(196,181,253,.30)) !important; }

/* ── GN RESUME BANNER ── */
#gnResumeBanner .gnr-inner {
  background: rgba(29,25,40,.80) !important;
  border-color: rgba(196,181,253,.22) !important;
}
#gnResumeBanner .gnr-btn {
  background: linear-gradient(135deg, #7000ff, #5500cc) !important;
  color: #fff !important;
}

/* ── ACHIEVEMENT TOAST ── */
.ach-toast { border-color: var(--mn-accent) !important; }

/* ── QUIZ CORRECT ── */
.opt-btn.correct { border-color: var(--mn-accent) !important; background: rgba(196,181,253,.08) !important; }
.toast-correct   { background: var(--mn-accent) !important; color: #110820 !important; }

/* ── BACK / HOME LINK ── */
.back-btn:hover, .home-link:hover {
  border-color: rgba(196,181,253,.35) !important;
  color: var(--mn-accent) !important;
}

/* ── WIN SCREEN SCORE ── */
.win-screen .score-val, .win-banner .pts { color: var(--mn-accent) !important; }

/* ── DRAWING TOOLBAR ── */
.tool-btn.active    { background: rgba(196,181,253,.15) !important; border-color: var(--mn-accent) !important; }
.color-swatch.active { box-shadow: 0 0 0 3px var(--mn-accent) !important; }

/* ── PROGRESS BAR ── */
.progress-fill, .prog-fill { background: var(--mn-accent) !important; }

/* ── TIMER ── */
.timer-ring { stroke: var(--mn-accent) !important; }

/* ── SELECTION ── */
::selection { background: rgba(196,181,253,.22) !important; }

/* ══ FIXED HEADER ══ */
.mn-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px;
  background: rgba(15,12,24,.92);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(196,181,253,.06), 0 4px 24px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; gap: 10px;
}
.mn-header-start { display: flex; align-items: center; gap: 8px; }
.mn-hbtn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; color: rgba(255,255,255,.65); padding: 7px 11px;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .1s;
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  font-family: inherit; line-height: 1;
}
.mn-hbtn:hover {
  background: rgba(196,181,253,.12); color: #c4b5fd;
  border-color: rgba(196,181,253,.28);
}
.mn-hbtn:active { transform: scale(.93); }
.mn-htitle {
  font-family: 'Almarai', 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 800;
  background: linear-gradient(135deg, #ffffff 30%, #c4b5fd 85%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -.3px;
}

/* ══ BOTTOM NAV ══ */
.mn-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(15,11,26,.98);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex; justify-content: space-around; align-items: center;
  height: calc(72px + env(safe-area-inset-bottom));
  padding: 0 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 -8px 32px rgba(0,0,0,.5);
  border-top: 1px solid rgba(255,255,255,.05);
}
.mn-bottom-nav::before {
  content: '';
  position: absolute; bottom: 100%; left: 0; right: 0; height: 130px;
  background: linear-gradient(to bottom,
    transparent          0%,
    rgba(15,11,26,.25)  30%,
    rgba(15,11,26,.80)  60%,
    rgba(15,11,26,.97) 100%);
  pointer-events: none;
}
.mn-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: rgba(255,255,255,.35);
  font-size: .65rem; font-weight: 600; padding: 7px 18px; border-radius: 999px;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
  background: none; border: none; cursor: pointer; font-family: inherit; min-width: 60px;
}
.mn-nav-item .material-symbols-outlined {
  font-size: 1.4rem; transition: transform .2s cubic-bezier(.2,.8,.2,1), filter .2s;
}
.mn-nav-item.active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff;
  box-shadow: 0 0 20px rgba(124,58,237,.60), inset 0 0 0 1px rgba(255,255,255,.15);
  animation: mn-navPulse 2s ease-in-out infinite;
}
@keyframes mn-navPulse {
  0%,100% { box-shadow: 0 0 18px rgba(124,58,237,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
  50%      { box-shadow: 0 0 32px rgba(124,58,237,.80), inset 0 0 0 1px rgba(255,255,255,.2); }
}
.mn-nav-item.active .material-symbols-outlined {
  filter: drop-shadow(0 0 6px rgba(255,255,255,.5));
}
.mn-nav-item:not(.active):hover { color: #c4b5fd; }
.mn-nav-item:not(.active):hover .material-symbols-outlined { transform: scale(1.08); }
.mn-nav-item:active .material-symbols-outlined { transform: scale(.9) !important; }

/* ══ PAGE FADE-IN ══ */
@keyframes mnFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mnFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
body { animation: mnFadeIn .28s ease-out both; }
body.mn-exit { animation: mnFadeOut .18s ease-in forwards; pointer-events: none; }

/* ══ SECTION DIVIDER ══ */
.mn-sec {
  display: flex; align-items: center; gap: 10px;
  font-size: .7rem; font-weight: 700; color: rgba(231,223,245,.25);
  letter-spacing: 3px; text-transform: uppercase;
  margin: 28px 0 14px; position: relative; z-index: 1;
}
.mn-sec::before, .mn-sec::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07);
}

/* ══ SMOOTH SCROLLBAR ══ */
* { scrollbar-width: thin; scrollbar-color: rgba(196,181,253,.25) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(196,181,253,.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(196,181,253,.5); }