/* DARK FX — game-feel polish layer for 2048: DARK (DAJAI PLAY).
   Loaded after dark.css. Additive: overlays, mute button, particle/flash burst,
   juicier merge pop, high-value gold glow, mobile fit hardening.
   Palette: obsidian #0a0908, blood #FF2D55, gold #ffd400, off-white #f4f1ea. */

:root {
  --dk-obsidian: #0a0908;
  --dk-blood: #FF2D55;
  --dk-gold: #ffd400;
  --dk-text: #f4f1ea;
}

/* sharpen base obsidian + kill page scroll/zoom on phones */
html, body {
  background: var(--dk-obsidian) !important;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
.game-container {
  background: #07060b !important;
  border: 1px solid #1c1c28 !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  will-change: transform; /* smooth screen-shake */
  touch-action: none;     /* no scroll/zoom while swiping */
}

/* ---------- mute button ---------- */
.scores-container { position: relative; }
.dark-mute-btn {
  display: inline-block;
  vertical-align: top;
  margin-left: 8px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  padding: 0;
  font-size: 20px;
  text-align: center;
  border: 1px solid #2a2a38;
  border-radius: 6px;
  background: #15151e;
  color: var(--dk-gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.dark-mute-btn:hover { background: #1d1d2a; border-color: #3a3a4c; }
.dark-mute-btn:active { transform: scale(.9); }
.dark-mute-btn[aria-pressed="true"] { color: #6c6878; border-color: #232330; }

/* ---------- juicier merge pop (overrides main.css 'pop' feel) ---------- */
@keyframes dk-pop {
  0%   { transform: scale(0); }
  55%  { transform: scale(1.28); }
  78%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.tile-merged .tile-inner {
  animation: dk-pop 220ms cubic-bezier(.2,1.3,.4,1) 80ms !important;
  animation-fill-mode: backwards !important;
}

/* punchier spawn */
@keyframes dk-appear {
  0%   { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.tile-new .tile-inner {
  animation: dk-appear 200ms cubic-bezier(.2,1.2,.4,1) 80ms !important;
}

/* slightly snappier slide */
.tile { transition: transform 90ms ease-in-out !important; }

/* ---------- high-value gold glow (pulse) ---------- */
@keyframes dk-goldpulse {
  0%, 100% { box-shadow: 0 0 26px rgba(255,212,0,.45); }
  50%      { box-shadow: 0 0 44px rgba(255,212,0,.85); }
}
.tile.tile-512 .tile-inner,
.tile.tile-1024 .tile-inner,
.tile.tile-2048 .tile-inner {
  animation: dk-goldpulse 2.2s ease-in-out infinite;
  color: #1a1209 !important;
}
.tile.tile-2048 .tile-inner {
  background: linear-gradient(145deg, var(--dk-gold), #ffe98a) !important;
}

/* ---------- particle / flash burst layer ---------- */
.dark-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
  border-radius: 6px;
}
.dark-fx-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--dk-gold);
  box-shadow: 0 0 8px rgba(255,212,0,.9);
  animation: dk-particle 640ms cubic-bezier(.15,.6,.3,1) forwards;
}
.dark-fx-particle.big {
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
}
@keyframes dk-particle {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px,0), var(--py,0)) scale(.2); opacity: 0; }
}
.dark-fx-ring {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 2px solid rgba(255,212,0,.85);
  animation: dk-ring 480ms ease-out forwards;
}
.dark-fx-ring.big {
  border-color: rgba(255,45,85,.9);
  box-shadow: 0 0 22px rgba(255,45,85,.5);
}
@keyframes dk-ring {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(7); opacity: 0; }
}

/* ---------- polished WIN / GAME OVER overlay ---------- */
.game-container .game-message {
  background: radial-gradient(120% 120% at 50% 40%, rgba(10,9,8,.82), rgba(10,9,8,.96)) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 100;
  animation: dk-fade 360ms ease both !important;
}
@keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } }

.game-container .game-message p {
  color: var(--dk-text) !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  font-size: 40px !important;
  height: auto !important;
  line-height: 1.1 !important;
  margin-top: 150px !important;
  text-transform: uppercase;
}
.game-container .game-message.game-over p {
  color: var(--dk-blood) !important;
  text-shadow: 0 2px 30px rgba(255,45,85,.5);
}
.game-container .game-message.game-won p {
  color: var(--dk-gold) !important;
  text-shadow: 0 2px 34px rgba(255,212,0,.6);
}
.game-message-score {
  display: none;
  color: #c7c2d2;
  font-size: 18px;
  letter-spacing: .18em;
  margin-top: 14px;
  font-weight: 700;
}
.game-container .game-message.game-over .game-message-score,
.game-container .game-message.game-won .game-message-score {
  display: block;
}
.game-container .game-message.game-won {
  background: radial-gradient(120% 120% at 50% 40%, rgba(255,212,0,.10), rgba(10,9,8,.95)) !important;
}
.game-container .game-message .lower { margin-top: 30px !important; }
.game-container .game-message a {
  background: var(--dk-blood) !important;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(255,45,85,.35);
}
.game-container .game-message.game-won a.keep-playing-button {
  background: var(--dk-gold) !important;
  color: #1a1209 !important;
}

/* ---------- mobile fit: keep board on screen, portrait, no scroll ---------- */
@media screen and (max-width: 520px) {
  .game-container .game-message p {
    font-size: 30px !important;
    margin-top: 96px !important;
  }
  .game-message-score { font-size: 15px; }
  .dark-mute-btn {
    width: 38px; height: 38px; line-height: 38px; font-size: 17px; margin-left: 6px;
  }
}

/* respect reduced-motion: drop the looping glow + shake-y bits */
@media (prefers-reduced-motion: reduce) {
  .tile.tile-512 .tile-inner,
  .tile.tile-1024 .tile-inner,
  .tile.tile-2048 .tile-inner { animation: none; }
}