/* 🎮 Game Layout */
.game-wrapper {
    text-align: left;
    padding: 1rem 0;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.score-bar {
    background: #f3e5ab;
    color: #333;
    font-weight: bold;
    text-align: center;
    padding: 0.75rem 1rem;
    width: 100%;
    border-radius: 6px 6px 0 0;
    font-size: 1.1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

#game-board {
    --tile-gap: 8px;
    --tile-count: 4;
    display: grid;
    grid-template-columns: repeat(var(--tile-count), 1fr);
    grid-template-rows: repeat(var(--tile-count), 1fr);
    gap: var(--tile-gap);
    background: #bbada0;
    padding: var(--tile-gap);
    border-radius: 6px;
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    touch-action: pan-y;
}

.background-tile {
    background: rgba(238, 228, 218, 0.35);
    border-radius: 4px;
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* 💠 Tiles */
.tile {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 10;
    background: var(--color-tile);
    color: var(--color-tile-text);
    border-radius: 4px;
    transition: top .2s ease, left .2s ease;
}

/* 🎨 Tile Colors by Value */
.tile[data-value="2"] {
    background: #eee4da;
    color: #776e65;
}

.tile[data-value="4"] {
    background: #ede0c8;
    color: #776e65;
}

.tile[data-value="8"] {
    background: #f2b179;
    color: #f9f6f2;
}

.tile[data-value="16"] {
    background: #f59563;
    color: #f9f6f2;
}

.tile[data-value="32"] {
    background: #f67c5f;
    color: #f9f6f2;
}

.tile[data-value="64"] {
    background: #f65e3b;
    color: #f9f6f2;
}

.tile[data-value="128"] {
    background: #edcf72;
    color: #f9f6f2;
}

.tile[data-value="256"] {
    background: #edcc61;
    color: #f9f6f2;
}

.tile[data-value="512"] {
    background: #edc850;
    color: #f9f6f2;
}

.tile[data-value="1024"] {
    background: #edc53f;
    color: #f9f6f2;
}

.tile[data-value="2048"] {
    background: #edc22e;
    color: #f9f6f2;
}

.tile[data-value="4096"] {
    background: #3c3a32;
    color: #fff;
}

/* ✨ Animations */
.tile.fade-in {
    animation: fadeIn .3s ease-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(.6);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tile.merge {
    animation: glowMerge .4s ease;
    z-index: 20;
}

@keyframes glowMerge {
    0% {
        box-shadow: 0 0 0 rgba(255, 165, 0, .8);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 165, 0, 1);
    }

    100% {
        box-shadow: 0 0 0 rgba(255, 165, 0, .8);
    }
}

.game-controls {
    margin-top: 0.75rem;
}

.game-controls button {
    padding: 0.5rem 1rem;
}

/* 🔧 Overlays & Popups */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.popup {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.3s ease;
}

.popup h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.popup p {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: #333;
}

.popup button {
    background-color: #ffa500;
    color: #fff;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.popup button:hover {
    background-color: #e59400;
}

@keyframes fadeInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== RS2048 – Game Over popup (full-screen, single-column stats) ===== */

/* Theme tokens (tweak as you like) */
:root {
  --rs-bg: #0b1220;
  --rs-surface: #101827;
  --rs-border: rgba(255, 255, 255, .12);
  --rs-text: #e6edf3;
  --rs-muted: #a7b5c4;
  --rs-accent: #6b5cf6;
  --rs-accent-2: #8a7df8;
  --rs-accent-contrast: #fff;
  --rs-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
}

/* Prevent body scroll when overlay is open (your JS already toggles this class) */
body.popup-active { overflow: hidden; }

/* Full-screen scrim */
.rs2048-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background:
    radial-gradient(1200px circle at 50% -10%, rgba(107, 92, 246, .25), rgba(0, 0, 0, .6)) !important;
  backdrop-filter: blur(6px);
}

/* Dialog */
.rs2048-overlay .rs2048-popup-inner {
  width: min(92vw, 520px) !important;
  max-width: 520px !important;
  background: var(--rs-surface) !important;
  color: var(--rs-text) !important;
  border: 1px solid var(--rs-border) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  box-shadow: var(--rs-shadow);
  transform: translateY(6px);
  animation: rs-pop .18s ease-out forwards;
  text-align: center !important; /* center the whole dialog content */
}

/* Title */
.rs2048-popup-title {
  display: block !important;
  font-size: 1.375rem !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  margin: 0 0 .5rem !important;
  text-align: center !important;
}
/* remove emoji/prefix if any theme or old CSS added it */
.rs2048-popup-title::before { content: none !important; }

/* Stats: four lines (single column), each line is a label/value pair */
.rs2048-stats {
  display: grid !important;
  grid-template-columns: 1fr !important;   /* single column stack */
  gap: 0 !important;
  margin: .35rem 0 .7rem !important;
}

/* Each row: label (flex-grow) + value (auto width), with subtle divider */
.rs2048-stats .row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: .6rem 0 !important;
  background: transparent !important;      /* remove grey ovals */
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 0 !important;
}
.rs2048-stats .row:first-child { border-top: 0 !important; }

.rs2048-stats .row span {
  color: var(--rs-muted) !important;
  font-size: .95rem !important;
  margin-right: 1rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
}

.rs2048-stats .row strong {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Actions */
#popup-restart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: .25rem !important;
  padding: .8rem 1rem !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--rs-accent), var(--rs-accent-2)) !important;
  color: var(--rs-accent-contrast) !important;
  -webkit-text-fill-color: var(--rs-accent-contrast) !important; /* Safari/iOS */
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: .2px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(107, 92, 246, .35) !important;
  transition: transform .08s ease, filter .12s ease !important;
}
#popup-restart-btn:hover { filter: brightness(1.06) !important; }
#popup-restart-btn:active { transform: translateY(1px) scale(.995) !important; }

/* Subtle entrance */
@keyframes rs-pop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* (Optional) If any inline styles created a flex layout for .row, this wins */
.rs2048-stats .row{ display: grid !important; }