:root {
  --wood-dark: #8a5a2b;
  --wood-mid: #9c6a2f;
  --wood-light: #b47d34;
  --gold-rim: #ffd78a;
  --gold-deep: #e8a52e;
}

html, body {
  overflow: hidden;
}

body {
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #6ec6ff 0%, #a6e2ff 30%, #d7f1ff 52%, #ffe4f0 74%, #ffd7ea 100%);
}

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

body::before {
  left: -18%;
  bottom: -7%;
  width: 136%;
  height: 34%;
  border-radius: 48% 52% 0 0 / 62% 74% 0 0;
  transform: translateX(-6%);
  background:
    radial-gradient(ellipse 26% 40% at 22% 88%, rgba(28,118,58,.35), transparent 60%),
    radial-gradient(ellipse 22% 34% at 68% 92%, rgba(28,118,58,.3), transparent 60%),
    linear-gradient(180deg, #7bd97e 0%, #3aa95e 100%);
}

body::after {
  left: -10%;
  bottom: -5%;
  width: 120%;
  height: 22%;
  border-radius: 50% 50% 0 0 / 78% 78% 0 0;
  background:
    radial-gradient(ellipse 18% 50% at 30% 90%, rgba(0,80,40,.25), transparent 65%),
    radial-gradient(ellipse 16% 40% at 78% 95%, rgba(0,80,40,.28), transparent 65%),
    linear-gradient(180deg, #5cc86e 0%, #2a9d4f 100%);
}

#bgDecor {
  z-index: 0;
}

#bgDecor .blob {
  opacity: 1;
  background:
    radial-gradient(ellipse 24% 20% at 16% 70%, rgba(255,255,255,.9) 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 30% 26% at 36% 52%, rgba(255,255,255,.96) 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 34% 30% at 58% 46%, rgba(255,255,255,1) 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 28% 24% at 78% 56%, rgba(255,255,255,.93) 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 20% 18% at 92% 74%, rgba(255,255,255,.85) 0 60%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 55% 34% at 50% 100%, rgba(255,255,255,.92) 0 58%, rgba(255,255,255,0) 100%);
  filter: drop-shadow(0 10px 12px rgba(90,120,200,.16));
}

#bgDecor .blob::before {
  content: none;
}

#bgDecor .b1 {
  background:
    radial-gradient(circle at 42% 36%, #fff9d8 0 10%, #ffe27a 30%, #ffc628 55%, #ffab1f 72%),
    radial-gradient(circle at 50% 50%, rgba(255,214,80,.9) 0 30%, rgba(255,214,80,0) 62%);
  box-shadow: 0 0 46px 22px rgba(255,214,74,.5), 0 0 120px 64px rgba(255,214,74,.24);
  animation: sunGlow 4.5s ease-in-out infinite;
}

#bgDecor .b2 { animation: cloudDrift 26s ease-in-out infinite alternate; }
#bgDecor .b3 { animation: cloudDrift 32s ease-in-out infinite alternate-reverse; }
#bgDecor .b4 { animation: cloudDrift 22s ease-in-out infinite alternate; }
#bgDecor .b5 { animation: cloudDrift 34s ease-in-out infinite alternate-reverse; }
#bgDecor .b6 { animation: cloudDrift 28s ease-in-out infinite alternate; }

@keyframes cloudDrift {
  0% { transform: translateX(-16px); }
  100% { transform: translateX(16px); }
}

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

#app {
  z-index: 1;
}

#hud {
  border: 3px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(180deg, #fffaf0 0%, #ffeede 100%) padding-box,
    linear-gradient(180deg, #ffe9a3 0%, #e8a52d 100%) border-box;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 6px 0 rgba(120,70,20,.28),
    0 16px 30px rgba(0,0,0,.3),
    inset 0 2px 0 rgba(255,255,255,.9);
}

#modeBadge {
  background: linear-gradient(180deg, #c9a4ff 0%, #8a5cff 100%);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.18),
    0 3px 0 rgba(120,70,20,.3),
    0 0 0 2px rgba(255,215,130,.5);
}

#statWrap {
  background: linear-gradient(180deg, #fff 0%, #fff3df 100%);
  box-shadow:
    inset 0 2px 4px rgba(43,26,74,.16),
    0 0 0 2px rgba(255,215,130,.55);
}

#scoreCount {
  border: 2px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, #ffe76b 0%, #ffab1f 100%);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 4px 0 rgba(120,70,20,.3);
}

#board {
  border: 14px solid transparent;
  border-radius: 26px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.26), transparent 55%) padding-box,
    radial-gradient(140% 120% at 50% 120%, rgba(20,10,50,.35), transparent 60%) padding-box,
    linear-gradient(168deg, #a06bff 0%, #6f4bd6 50%, #5638c0 100%) padding-box,
    repeating-linear-gradient(158deg, var(--wood-light) 0 9px, var(--wood-dark) 9px 18px, var(--wood-mid) 18px 26px) border-box;
  box-shadow:
    0 0 0 3px rgba(255,222,150,.55),
    0 14px 0 rgba(70,42,18,.4),
    0 34px 64px rgba(40,12,70,.5),
    inset 0 0 0 4px rgba(255,255,255,.25),
    inset 0 8px 18px rgba(0,0,0,.32);
}

.overlay, #modal {
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(120,60,140,.35), transparent 60%),
    rgba(40,14,66,.62);
}

.modal-card {
  position: relative;
  border: 4px solid transparent;
  border-radius: 34px;
  background:
    linear-gradient(180deg, #fffdf6 0%, #ffeede 100%) padding-box,
    linear-gradient(180deg, #ffd75e 0%, #f0a51d 100%) border-box;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 12px 0 rgba(120,60,10,.4),
    0 30px 60px rgba(40,10,60,.5),
    inset 0 3px 0 rgba(255,255,255,.95);
}

.modal-card::before, .modal-card::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7d0 0 30%, #ffc81f 70%, #e8a52e 100%);
  box-shadow: 0 3px 0 rgba(120,60,10,.4);
}

.modal-card::before { left: 16px; }
.modal-card::after { right: 16px; }

.mode-btn {
  border: 3px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #9fe8ff 0%, #4fc7ff 100%) padding-box,
    linear-gradient(180deg, #fff3c4 0%, #e0a52e 100%) border-box;
  box-shadow:
    0 6px 0 rgba(60,40,20,.35),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -5px 8px rgba(0,0,0,.18);
}

.mode-btn.alt {
  background:
    linear-gradient(180deg, #ffe2a0 0%, #ff9d1f 100%) padding-box,
    linear-gradient(180deg, #fff3c4 0%, #e0a52e 100%) border-box;
}

.mode-btn .mode-ico {
  border: 2px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, #fff 0%, #fff0d8 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.95),
    0 3px 0 rgba(120,70,20,.3);
}

#modalBtn {
  border: 3px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, #ff9acd 0%, #ff3b7b 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -4px 6px rgba(0,0,0,.15),
    0 5px 0 rgba(120,60,10,.35);
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
}