/* ============================================================
   2048 — tema sunset pastel (mesma família visual da forca).
   Vars do engine sobrescritas no game-host para HUD herdar.
   ============================================================ */

.sj-game-host:has(.g2048) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-score-bg:       #fff;
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;

  /* Fundo: mesma família de gradientes (sunset + radiais sutis). */
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
body:has(.sj-game-stage) .sj-game-host:has(.g2048) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.g2048) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Tabuleiro ============ */
.g2048 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows:    repeat(4, minmax(0, 1fr));
  gap: 2.2%;
  padding: 2.2%;
  /* Card "translúcido" no lugar da cor sólida — combina com o glass theme. */
  background: rgba(255, 255, 255, 0.32);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.45),
    0 8px 28px rgba(45, 36, 56, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.g2048-tile {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: var(--g2048-fs, 28px);
  color: #fff;
  min-width: 0;
  min-height: 0;
  animation: g2048-fadein .12s ease-out;
  box-shadow: 0 2px 6px rgba(45, 36, 56, 0.06);
}
.g2048-tile.is-new   { animation: g2048-pop   .2s ease-out; }
.g2048-tile.is-merge { animation: g2048-merge .24s ease-out; }

@keyframes g2048-fadein { from { opacity: .6; }                          to { opacity: 1; } }
@keyframes g2048-pop    { from { transform: scale(0); opacity: 0; }      to { transform: scale(1); opacity: 1; } }
@keyframes g2048-merge  {   0% { transform: scale(1); }
                           45% { transform: scale(1.18); }
                          100% { transform: scale(1); } }

/* ============ Cores dos valores ============
   Slot vazio (data-v="0") fica quase invisível; só desenha sombra
   leve pra dar sensação de "buraco" no tabuleiro. */
.g2048-tile[data-v="0"]      { color: transparent; background: rgba(255,255,255,0.22); box-shadow: inset 0 1px 3px rgba(45,36,56,0.05); }
.g2048-tile[data-v="2"]      { background: #ff8a3d; box-shadow: 0 3px 10px rgba(255,138,61,0.35); }
.g2048-tile[data-v="4"]      { background: #5a7cff; box-shadow: 0 3px 10px rgba(90,124,255,0.35); }
.g2048-tile[data-v="8"]      { background: #2dd47a; color: #0a2d18; box-shadow: 0 3px 10px rgba(45,212,122,0.35); }
.g2048-tile[data-v="16"]     { background: #ff79c4; color: #3a0a2d; box-shadow: 0 3px 10px rgba(255,121,196,0.35); }
.g2048-tile[data-v="32"]     { background: #ef4444; box-shadow: 0 3px 10px rgba(239,68,68,0.40); }
.g2048-tile[data-v="64"]     { background: #d946a2; box-shadow: 0 3px 12px rgba(217,70,162,0.40); }
.g2048-tile[data-v="128"]    { background: #facc15; color: #3a2a02; font-size: calc(var(--g2048-fs, 28px) * 0.88); box-shadow: 0 4px 14px rgba(250,204,21,0.45); }
.g2048-tile[data-v="256"]    { background: #06b6d4; color: #02272d; font-size: calc(var(--g2048-fs, 28px) * 0.88); box-shadow: 0 4px 14px rgba(6,182,212,0.45); }
.g2048-tile[data-v="512"]    { background: #a855f7;                  font-size: calc(var(--g2048-fs, 28px) * 0.82); box-shadow: 0 4px 16px rgba(168,85,247,0.50); }
.g2048-tile[data-v="1024"]   { background: #84cc16; color: #1c2902; font-size: calc(var(--g2048-fs, 28px) * 0.68); box-shadow: 0 5px 18px rgba(132,204,22,0.50); }
.g2048-tile[data-v="2048"]   { background: linear-gradient(135deg, #fbbf24, #f97316); color: #3a1a02; font-size: calc(var(--g2048-fs, 28px) * 0.68); box-shadow: 0 6px 22px rgba(251,191,36,0.6); animation: g2048-glow 2s ease-in-out infinite; }
.g2048-tile[data-v="4096"]   { background: linear-gradient(135deg, #4338ca, #6b5bff);                  font-size: calc(var(--g2048-fs, 28px) * 0.68); box-shadow: 0 6px 22px rgba(67,56,202,0.55); }
.g2048-tile[data-v="8192"]   { background: linear-gradient(135deg, #14b8a6, #06b6d4);                  font-size: calc(var(--g2048-fs, 28px) * 0.68); box-shadow: 0 6px 22px rgba(20,184,166,0.55); }
.g2048-tile[data-v="16384"]  { background: linear-gradient(135deg, #fb923c, #f43f5e); color: #fff;     font-size: calc(var(--g2048-fs, 28px) * 0.56); box-shadow: 0 6px 22px rgba(244,63,94,0.55); }
.g2048-tile[data-v="32768"]  { background: linear-gradient(135deg, #c084fc, #ec4899); color: #2d0a40;  font-size: calc(var(--g2048-fs, 28px) * 0.56); }
.g2048-tile[data-v="65536"]  { background: #f5f5f5; color: #1d1d1d;                                    font-size: calc(var(--g2048-fs, 28px) * 0.56); }
.g2048-tile[data-v="131072"] {
  background: linear-gradient(135deg, #fbbf24 0%, #ec4899 45%, #4338ca 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  font-size: calc(var(--g2048-fs, 28px) * 0.56);
}

@keyframes g2048-glow {
  0%, 100% { box-shadow: 0 6px 22px rgba(251, 191, 36, 0.6); }
  50%      { box-shadow: 0 6px 30px rgba(251, 191, 36, 0.95), 0 0 18px rgba(251, 191, 36, 0.4); }
}

/* ============ Mini-board do guia (slides do tour) ============
   Pequeno tabuleiro usado dentro do balão do SJ.tour pra ilustrar
   o merge. Os elementos são gerados via JS no game.js. */
.g2048-help-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 10px;
}
.g2048-help-row {
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 3px;
  padding: 4px;
  background: rgba(45, 36, 56, 0.08);
  border-radius: 6px;
}
.g2048-help-cell {
  width: 36px; height: 36px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--sj-font-display); font-weight: 900;
  font-size: 14px;
  color: #fff;
  background: rgba(45, 36, 56, 0.1);
}
.g2048-help-cell[data-v="2"]  { background: #ff8a3d; }
.g2048-help-cell[data-v="4"]  { background: #5a7cff; }
.g2048-help-cell[data-v="8"]  { background: #2dd47a; color: #0a2d18; }
.g2048-help-cell[data-v="16"] { background: #ff79c4; color: #3a0a2d; }
.g2048-help-cell[data-v="32"] { background: #ef4444; }
.g2048-help-cell[data-v="2048"]{ background: linear-gradient(135deg, #fbbf24, #f97316); color: #3a1a02; font-size: 11px; }

.g2048-help-arrow {
  font-size: 22px;
  color: #6b5bff;
  font-weight: 900;
}

/* Mobile estreito: stack vertical na demo de merge (3 linhas: row1, ↓, row2)
   e wrap na progressão (cadeia 2 › 4 › 8 … 2048 quebra naturalmente). */
@media (max-width: 420px) {
  .g2048-help-cell { width: 28px; height: 28px; font-size: 11px; }
  .g2048-help-cell[data-v="2048"] { font-size: 9px; }
  .g2048-help-row { grid-template-columns: repeat(4, 28px); }
  .g2048-help-demo--merge {
    flex-direction: column;
    gap: 4px;
  }
  .g2048-help-demo--merge > .g2048-help-arrow {
    transform: rotate(90deg);
    line-height: 0.7;
  }
  .g2048-help-demo--chain {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}
.g2048-help-keys {
  display: flex; gap: 6px; justify-content: center;
  margin: 8px 0 12px;
}
.g2048-help-key {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: rgba(45, 36, 56, 0.08);
  border-radius: 6px;
  color: #2d2438;
  box-shadow: 0 2px 4px rgba(45, 36, 56, 0.08);
}
.g2048-help-key svg { width: 20px; height: 20px; display: block; }
.g2048-help-key[data-dir="left"]  svg { transform: rotate(180deg); }
.g2048-help-key[data-dir="up"]    svg { transform: rotate(-90deg); }
.g2048-help-key[data-dir="down"]  svg { transform: rotate(90deg); }