/*
 * Razeow theme — navy reskin of 2048 for the Telegram Mini App demo.
 * Loaded after main.css; overrides colors only, never layout or animation.
 *
 * Palette: deep navy page (#0a1630 -> #1a3357), darker navy board,
 * tiles climbing from muted navy through blues and teals to bright
 * accents (gold at 2048). White text throughout.
 */

:root {
  --rz-navy-0: #0a1630;   /* page, deepest */
  --rz-navy-1: #142647;   /* page, mid */
  --rz-navy-2: #1a3357;   /* page, lightest */
  --rz-board:  #0c1c3c;   /* board container */
  --rz-ink:    #dbe6fb;   /* body text */
  --rz-accent: #2f80ed;   /* buttons */
  --tg-bg:     #0a1630;   /* overridden at runtime by Telegram themeParams.bg_color */
}

html, body {
  background: var(--tg-bg);
  color: var(--rz-ink);
}

body {
  background-image: linear-gradient(165deg, #0a1630 0%, #142647 55%, #1a3357 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* --- Branding --- */

.app-brand {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #6f96d8;
}

h1.title {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(47, 128, 237, 0.35);
}

.app-footer {
  font-size: 13px;
  color: #7d9ac9;
}

a {
  color: #7fb3ff;
}

hr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- Score panels --- */

.score-container, .best-container {
  background: #16294f;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(127, 179, 255, 0.18);
}

.score-container:after, .best-container:after {
  color: #8fb0e8;
}

.score-container .score-addition, .best-container .score-addition {
  color: rgba(190, 216, 255, 0.95);
}

/* --- Buttons --- */

.restart-button,
.game-container .game-message a {
  background: var(--rz-accent);
  color: #ffffff;
}

/* --- Board --- */

.game-container {
  background: var(--rz-board);
  box-shadow: inset 0 0 0 1px rgba(127, 179, 255, 0.14),
              0 12px 34px rgba(4, 10, 24, 0.55);
}

.grid-cell {
  background: rgba(160, 195, 255, 0.07);
}

.game-container .game-message {
  background: rgba(10, 22, 48, 0.78);
  color: #ffffff;
}

.game-container .game-message.game-won {
  background: rgba(16, 32, 66, 0.85);
  color: #ffd166;
}

/* --- Tiles: navy -> blue -> teal -> bright accents --- */

.tile .tile-inner {
  background: #1d3a6e;
  color: #d5e3fb;
}

.tile.tile-2 .tile-inner {
  background: #1d3a6e;
  color: #d5e3fb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tile.tile-4 .tile-inner {
  background: #22488a;
  color: #e2ecfd;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tile.tile-8 .tile-inner {
  color: #ffffff;
  background: #2a5cad;
}

.tile.tile-16 .tile-inner {
  color: #ffffff;
  background: #2f73d0;
}

.tile.tile-32 .tile-inner {
  color: #ffffff;
  background: #338ae4;
}

.tile.tile-64 .tile-inner {
  color: #ffffff;
  background: #22a7e0;
}

.tile.tile-128 .tile-inner {
  color: #ffffff;
  background: #16b8d8;
  box-shadow: 0 0 30px 10px rgba(64, 204, 255, 0.16),
              inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.tile.tile-256 .tile-inner {
  color: #ffffff;
  background: #10c6c0;
  box-shadow: 0 0 30px 10px rgba(64, 224, 224, 0.22),
              inset 0 0 0 1px rgba(255, 255, 255, 0.19);
}

.tile.tile-512 .tile-inner {
  color: #04352e;
  background: #17d3a2;
  box-shadow: 0 0 30px 10px rgba(64, 230, 190, 0.28),
              inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.tile.tile-1024 .tile-inner {
  color: #04352b;
  background: #4be3c3;
  box-shadow: 0 0 30px 10px rgba(90, 240, 205, 0.34),
              inset 0 0 0 1px rgba(255, 255, 255, 0.29);
}

.tile.tile-2048 .tile-inner {
  color: #14264d;
  background: #ffd166;
  box-shadow: 0 0 30px 10px rgba(255, 209, 102, 0.42),
              inset 0 0 0 1px rgba(255, 255, 255, 0.33);
}

.tile.tile-super .tile-inner {
  color: #ffffff;
  background: #8a7bff;
  box-shadow: 0 0 30px 10px rgba(138, 123, 255, 0.35),
              inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}