/* ==========================================================================
   PREMIUM VISUAL LAYER v4 — dramatic, high-specificity overrides
   Additive stylesheet layered AFTER the game's own <style>. Every rule uses
   maximum specificity + !important where the base rule fights back.
   ========================================================================== */

body {
  font-family: 'Nunito', 'Noto Sans Devanagari', "Segoe UI", system-ui, Arial, sans-serif !important;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, .brand, .splashTitle, .brandTitle, #splashDev {
  font-family: 'Poppins', 'Nunito', "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0.005em;
  font-weight: 700;
}

/* Theme palette variables */
:root {
  --pr-bg-1: #1f2358;
  --pr-bg-2: #12142a;
  --pr-bg-3: #0a0c1e;
  --pr-card-1: #1c2044;
  --pr-card-2: #14172e;
  --pr-gold-1: #ffd94a;
  --pr-gold-2: #facc15;
  --pr-gold-3: #f59e0b;
  --pr-accent: #facc15;
}
body.pr-obsidian {
  --pr-bg-1: #1a1029; --pr-bg-2: #0e0620; --pr-bg-3: #05010f;
  --pr-card-1: #221338; --pr-card-2: #150826;
  --pr-gold-1: #c084fc; --pr-gold-2: #a855f7; --pr-gold-3: #7c3aed; --pr-accent: #a855f7;
}
body.pr-rose {
  --pr-bg-1: #3d1a34; --pr-bg-2: #260f21; --pr-bg-3: #170716;
  --pr-card-1: #421b3b; --pr-card-2: #2a1128;
  --pr-gold-1: #fda4af; --pr-gold-2: #f472b6; --pr-gold-3: #ec4899; --pr-accent: #f472b6;
}

body {
  background: radial-gradient(1400px 900px at 50% -14%, var(--pr-bg-1) 0%, var(--pr-bg-2) 55%, var(--pr-bg-3) 100%) fixed !important;
}
body.light {
  background: radial-gradient(1400px 900px at 50% -12%, #f5f4ff 0%, #e9ecf6 55%, #dde1ee 100%) fixed !important;
}

.card {
  background: linear-gradient(160deg, var(--pr-card-1) 0%, var(--pr-card-2) 100%) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.09) !important;
  border: 1px solid rgba(140,150,220,.20) !important;
  border-radius: 20px !important;
}
body.light .card {
  background: linear-gradient(160deg, #ffffff 0%, #f2f4fb 100%) !important;
  box-shadow: 0 10px 24px rgba(20,25,60,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-color: rgba(30,40,90,.10) !important;
}

.btn {
  transition: transform .13s ease, filter .13s ease, box-shadow .13s ease !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn:hover::after { animation: _prBtnShine 1.1s ease-out; }
@keyframes _prBtnShine { to { transform: translateX(120%); } }
.btn:active { transform: translateY(1px) scale(.985) !important; filter: brightness(.92); }
.btn.green {
  background: linear-gradient(180deg, #34d97a 0%, #16a34a 100%) !important;
  color: #052613 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
}
.btn.alt {
  background: linear-gradient(180deg, #2e3577 0%, #191d47 100%) !important;
  color: #e8ecff !important;
}

@keyframes _prCoinShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
#coins, #menuCoins, #gameCoins {
  background: linear-gradient(90deg, var(--pr-gold-2) 0%, #fef3c7 25%, var(--pr-gold-2) 50%, var(--pr-gold-3) 75%, var(--pr-gold-2) 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
  animation: _prCoinShimmer 3.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

.splashTitle, .brand {
  background: linear-gradient(90deg, var(--pr-gold-1) 0%, #fef3c7 25%, var(--pr-gold-2) 50%, var(--pr-gold-3) 75%, var(--pr-gold-1) 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: _prCoinShimmer 4s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(250,204,21,.28), 0 3px 0 rgba(0,0,0,.35);
}

.pr-badge {
  position: fixed; top: 8px; right: 8px; z-index: 500;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-family: 'Poppins', 'Nunito', "Segoe UI", Arial, sans-serif;
  font-weight: 800; font-size: 11px; letter-spacing: .08em;
  background: linear-gradient(135deg, #ffd94a 0%, #f59e0b 100%);
  color: #1a1200;
  box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
  border: 1px solid rgba(255,255,255,.35);
  pointer-events: none; user-select: none;
}
.pr-badge::before { content: '✨ '; margin-right: 2px; }

.userBtn {
  background: linear-gradient(180deg, #2f3578 0%, #1a1e44 100%) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(140,150,220,.20) !important;
}
.belt {
  box-shadow: 0 3px 8px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.42) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
}

#nmRewardOv, #rbOverlay {
  background: radial-gradient(600px 400px at 50% 40%, rgba(250,204,21,.16) 0%, rgba(6,8,20,.90) 60%, rgba(6,8,20,.96) 100%) !important;
}

.tile.filled {
  box-shadow: 0 8px 16px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.18) !important;
  transition: transform .15s ease, box-shadow .2s ease;
  font-weight: 900 !important;
}
.cell { transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.cell:hover:not(.correct):not(.wrong) { filter: brightness(1.10); box-shadow: 0 4px 12px rgba(250,204,21,.18); }

#nmUpdBar, #mlUpdBar {
  background: linear-gradient(135deg, var(--pr-gold-1) 0%, var(--pr-gold-2) 40%, var(--pr-gold-3) 100%) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35) !important;
  color: #1a1200 !important;
  font-weight: 800 !important;
}
.overlay { backdrop-filter: blur(2px); }

/* ============ COIN FLY v4 — moderate size + gold glow ============ */
.coinfly {
  font-size: 52px !important;
  filter: drop-shadow(0 0 10px rgba(250,204,21,0.8)) drop-shadow(0 4px 4px rgba(0,0,0,0.4)) !important;
  text-shadow: 0 0 12px rgba(255,217,74,0.9) !important;
  z-index: 99997 !important;
}
.pr-coin-rain-emoji {
  font-size: 40px !important;
  filter: drop-shadow(0 0 8px rgba(255,217,74,.7)) drop-shadow(0 4px 4px rgba(0,0,0,.35));
}

/* Floating "+N" counter that pops above the coin counter each time a coin lands */
.pr-coin-plus {
  position: fixed;
  z-index: 99998;
  font: 900 26px/1 'Poppins', 'Nunito', "Segoe UI", Arial, sans-serif;
  color: #facc15;
  text-shadow: 0 0 12px rgba(250,204,21,0.9), 0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
}

/* ============ PREMIUM SPLASH LOGO — HIGH SPECIFICITY ============ */
@keyframes _prLogoGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(250,204,21,0), 0 12px 32px rgba(0,0,0,0.5); }
  50%     { box-shadow: 0 0 0 8px rgba(250,204,21,0.16), 0 20px 40px rgba(250,204,21,0.20); }
}
@keyframes _prLogoRotateHint { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes _prLogoTileShine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Prefix with body #viewSplash for maximum specificity beating base rules */
body #viewSplash .applogo,
body #viewWelcome .applogo,
body .applogo {
  position: relative !important;
  width: 140px !important;
  height: 140px !important;
  margin: 20px auto 16px !important;
  border-radius: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  overflow: visible !important;
  display: block !important;
}
body .applogo::before {
  content: '' !important;
  position: absolute !important;
  inset: -8px !important;
  border-radius: 30px !important;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.35) 0%, rgba(250, 204, 21, 0) 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
body .applogo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 20px !important;
  display: block !important;
  user-select: none !important;
  pointer-events: none !important;
  position: relative;
  z-index: 1;
}
/* Hide the old CSS-drawn 2x2 grid — the real icon is now the <img> */
body .applogo .logoGrid,
body #viewSplash .applogo .logoGrid,
body #viewWelcome .applogo .logoGrid {
  display: none !important;
}

/* ============ RETENTION: Continue / Play-Again to the TOP of game-over ============ */
#failBtns { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#failBtns > button { order: 10; }
#failBtns > button.btn.green,
#failBtns > button[class*="btn"][style*="0ea5e9"],
#failBtns > button[class*="btn"][style*="6366f1"] { order: 1 !important; }
#failBtns > button[style*="f59e0b"] { order: 5 !important; }
#failBtns > button.btn.alt:not([style*="f59e0b"]):last-child { order: 20 !important; }

#overOverlay .card { display: flex; flex-direction: column; }
#overOverlay .card > button { order: 10; }
#overOverlay .card > h2, #overOverlay .card > #overMsg { order: 0; }
#overOverlay #overCoinsContinue { order: 1 !important; }
#overOverlay #overNew { order: 2 !important; }
#overOverlay #overExtra { order: 3 !important; }
#overOverlay #overInvite { order: 4 !important; }
#overOverlay #overShare { order: 8 !important; }
#overOverlay #overMenu { order: 9 !important; }