/* =========================================================
   2048 — Navy Blue & White Edition
   All colors driven by CSS variables for easy customization.
   ========================================================= */

:root {
  /* ---- Brand colors ---- */
  --navy: #0C346C;
  --navy-deep: #081D3D;
  --white: #FFFFFF;

  /* ---- Layout tokens ---- */
  --page-bg-1: #F5F8FD;
  --page-bg-2: #E7EEF9;
  --board-bg: var(--navy);
  --board-padding: clamp(8px, 1.6vw, 14px);
  --cell-bg: #274B85;          /* empty tile (light navy) */
  --cell-bg-2: #ffffff14;      /* subtle overlay for empty cell */
  --board-radius: 16px;
  --tile-radius: 12px;
  --gap: clamp(8px, 1.6vw, 12px);

  /* ---- Text ---- */
  --text-main: var(--navy);
  --text-muted: #4C6690;
  --text-on-navy: var(--white);

  /* ---- UI chrome ---- */
  --btn-bg: var(--navy);
  --btn-bg-hover: #0F3E82;
  --btn-text: var(--white);
  --btn-secondary-bg: #E7EEF9;
  --btn-secondary-text: var(--navy);

  --shadow-soft: 0 8px 24px rgba(12, 52, 108, 0.16);
  --shadow-tile: 0 2px 6px rgba(12, 52, 108, 0.18);

  /* ---- Tile value colors: white -> deep navy as values grow ---- */
  --tile-2-bg: #FFFFFF;       --tile-2-text: var(--navy);
  --tile-4-bg: #EAF1FB;       --tile-4-text: var(--navy);
  --tile-8-bg: #CFE0F5;       --tile-8-text: var(--navy);
  --tile-16-bg: #9CC0EA;      --tile-16-text: var(--navy);
  --tile-32-bg: #6FA1DE;      --tile-32-text: #FFFFFF;
  --tile-64-bg: #4884D1;      --tile-64-text: #FFFFFF;
  --tile-128-bg: #2E67B0;     --tile-128-text: #FFFFFF;
  --tile-256-bg: #1F4E8C;     --tile-256-text: #FFFFFF;
  --tile-512-bg: #163C70;     --tile-512-text: #FFFFFF;
  --tile-1024-bg: #0F2C58;    --tile-1024-text: #FFFFFF;
  --tile-2048-bg: #081D3D;    --tile-2048-text: #FFFFFF;
  --tile-super-bg: #051530;   --tile-super-text: #FFFFFF;

  --tile-2048-glow: 0 0 0 2px #FFD56680, 0 0 18px 2px #FFD56666;

  --font-display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --transition-fast: 120ms ease;
  --transition-med: 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Dark mode: same hues, inverted surfaces ---- */
body.dark-mode {
  --page-bg-1: #081226;
  --page-bg-2: #0A1A38;
  --board-bg: #071B3C;
  --cell-bg: #14356B;
  --cell-bg-2: #ffffff0f;
  --text-main: #EAF1FB;
  --text-muted: #9FB6DD;
  --btn-bg: #1F4E8C;
  --btn-bg-hover: #2E67B0;
  --btn-secondary-bg: #10254A;
  --btn-secondary-text: #EAF1FB;
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.45);

  --tile-2-bg: #14356B;       --tile-2-text: #EAF1FB;
  --tile-4-bg: #1A417D;       --tile-4-text: #EAF1FB;
  --tile-8-bg: #204E90;       --tile-8-text: #FFFFFF;
  --tile-16-bg: #2861AA;      --tile-16-text: #FFFFFF;
  --tile-32-bg: #3373C2;      --tile-32-text: #FFFFFF;
  --tile-64-bg: #4884D1;      --tile-64-text: #FFFFFF;
  --tile-128-bg: #6FA1DE;     --tile-128-text: #081D3D;
  --tile-256-bg: #9CC0EA;     --tile-256-text: #081D3D;
  --tile-512-bg: #CFE0F5;     --tile-512-text: #081D3D;
  --tile-1024-bg: #EAF1FB;    --tile-1024-text: #081D3D;
  --tile-2048-bg: #FFFFFF;    --tile-2048-text: #081D3D;
  --tile-super-bg: #FFD566;   --tile-super-text: #081D3D;
}

/* =========================================================
   Reset & base
   ========================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-display);
  background: linear-gradient(160deg, var(--page-bg-1), var(--page-bg-2));
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-med), color var(--transition-med);
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* =========================================================
   App shell
   ========================================================= */
.app {
  width: 100%;
  max-width: 500px;
  padding: clamp(10px, 3vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
}

/* ---- Header ---- */
.app-header {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.title-block { text-align: left; }

.logo {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -1px;
  line-height: 1;
}

.tagline {
  margin: 4px 0 0;
  font-size: clamp(0.75rem, 2.2vw, 0.9rem);
  color: var(--text-muted);
}

.scores {
  display: flex;
  gap: 8px;
}

.score-box {
  position: relative;
  background: var(--navy);
  color: var(--white);
  border-radius: 10px;
  padding: 6px clamp(10px, 3vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  box-shadow: var(--shadow-tile);
}

.score-label {
  font-size: clamp(0.55rem, 1.6vw, 0.65rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.75;
}

.score-value {
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.score-popup {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFD566;
  opacity: 0;
  pointer-events: none;
}

.score-popup.pop {
  animation: scorePop 700ms ease-out;
}

@keyframes scorePop {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -28px); }
}

/* ---- Toolbar ---- */
.toolbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
}

.btn {
  border-radius: 10px;
  font-weight: 600;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  touch-action: manipulation;
}

.btn:active { transform: scale(0.95); }

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: clamp(10px, 2.4vw, 12px) clamp(16px, 4vw, 22px);
  font-size: clamp(0.85rem, 2.6vw, 0.95rem);
  box-shadow: var(--shadow-tile);
}
.btn-primary:hover { background: var(--btn-bg-hover); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  padding: clamp(10px, 2.4vw, 12px) clamp(16px, 4vw, 22px);
  font-size: clamp(0.85rem, 2.6vw, 0.95rem);
}

.btn-icon {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(8px, 2.2vw, 10px) clamp(10px, 3vw, 14px);
  font-size: clamp(0.75rem, 2.2vw, 0.85rem);
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
}
.btn-icon:hover { background: var(--btn-bg-hover); color: var(--white); }
.btn-icon[aria-pressed="true"] { background: var(--btn-bg); color: var(--white); }

.btn-icon span { display: none; }
@media (min-width: 420px) {
  #undo-btn span { display: inline; }
}

/* ---- Board ---- */
.board-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.board {
  position: relative;
  width: min(500px, 92vw);
  aspect-ratio: 1 / 1;
  background: var(--board-bg);
  border-radius: var(--board-radius);
  padding: var(--board-padding);
  box-shadow: var(--shadow-soft);
  touch-action: none;
  outline: none;
  transition: background var(--transition-med);
}

.board:focus-visible {
  box-shadow: var(--shadow-soft), 0 0 0 3px #FFD56699;
}

.grid-layer {
  position: absolute;
  inset: var(--board-padding);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
}

.grid-cell {
  background: var(--cell-bg);
  border-radius: var(--tile-radius);
}

.tile-layer {
  position: absolute;
  inset: var(--board-padding);
}

/* ---- Tiles ---- */
.tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tile-radius);
  font-weight: 800;
  box-shadow: var(--shadow-tile);
  font-size: clamp(1rem, 6vw, 2rem);
  transition: top var(--transition-med), left var(--transition-med), width var(--transition-med), height var(--transition-med);
  will-change: top, left;
  user-select: none;
}

.tile-inner {
  animation: spawnIn 160ms ease-out;
}

.tile.merged .tile-inner {
  animation: mergePop 200ms ease-out;
}

@keyframes spawnIn {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes mergePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Tile value coloring */
.tile[data-value="2"]    { background: var(--tile-2-bg);    color: var(--tile-2-text); }
.tile[data-value="4"]    { background: var(--tile-4-bg);    color: var(--tile-4-text); }
.tile[data-value="8"]    { background: var(--tile-8-bg);    color: var(--tile-8-text); }
.tile[data-value="16"]   { background: var(--tile-16-bg);   color: var(--tile-16-text); }
.tile[data-value="32"]   { background: var(--tile-32-bg);   color: var(--tile-32-text); }
.tile[data-value="64"]   { background: var(--tile-64-bg);   color: var(--tile-64-text); }
.tile[data-value="128"]  { background: var(--tile-128-bg);  color: var(--tile-128-text); font-size: clamp(0.9rem, 5.4vw, 1.8rem); }
.tile[data-value="256"]  { background: var(--tile-256-bg);  color: var(--tile-256-text); font-size: clamp(0.9rem, 5.4vw, 1.8rem); }
.tile[data-value="512"]  { background: var(--tile-512-bg);  color: var(--tile-512-text); font-size: clamp(0.9rem, 5.4vw, 1.8rem); }
.tile[data-value="1024"] { background: var(--tile-1024-bg); color: var(--tile-1024-text); font-size: clamp(0.75rem, 4.6vw, 1.5rem); }
.tile[data-value="2048"] { background: var(--tile-2048-bg); color: var(--tile-2048-text); font-size: clamp(0.75rem, 4.6vw, 1.5rem); box-shadow: var(--shadow-tile), var(--tile-2048-glow); }
.tile.tile-super         { background: var(--tile-super-bg); color: var(--tile-super-text); font-size: clamp(0.65rem, 4vw, 1.3rem); }

/* ---- Overlay (win / game over) ---- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 29, 61, 0.55);
  border-radius: var(--board-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--transition-med);
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.overlay-card {
  background: var(--white);
  color: var(--navy);
  border-radius: var(--tile-radius);
  padding: clamp(18px, 6vw, 28px);
  text-align: center;
  max-width: 85%;
  box-shadow: var(--shadow-soft);
  animation: spawnIn 220ms ease-out;
}

.overlay-card h2 {
  margin: 0 0 6px;
  font-size: clamp(1.3rem, 6vw, 1.8rem);
}

.overlay-card p {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: clamp(0.85rem, 3vw, 0.95rem);
}

.overlay-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Hint / footer ---- */
.hint {
  margin: 0;
  font-size: clamp(0.75rem, 2.4vw, 0.85rem);
  color: var(--text-muted);
  text-align: center;
}

.mobile-hint { display: none; }

.app-footer {
  width: 100%;
  text-align: center;
}
.app-footer p {
  margin: 0;
  font-size: clamp(0.7rem, 2.2vw, 0.8rem);
  color: var(--text-muted);
}

/* =========================================================
   Responsive breakpoints
   ========================================================= */

/* Tablet */
@media (max-width: 768px) {
  .app { max-width: 450px; }
}

/* Mobile */
@media (max-width: 480px) {
  .app-header { align-items: center; }
  .title-block { text-align: left; }
  .board { width: 92vw; }
  .desktop-hint { display: none; }
  .mobile-hint { display: inline; }
}

@media (max-width: 340px) {
  .scores { gap: 6px; }
  .score-box { min-width: 52px; padding: 4px 8px; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}