/* ============================================================================
 * 2048 Hub — Doge / meme theme
 * Comic Sans for tile numbers, classic doge colours, playful.
 * ============================================================================ */

body { background: #fcf8e3; color: #4a3b00; }
.title, .content h1, .content h2 { color: #c9881d; }
.content strong { color: #c9881d; }
.content { color: #3b2f00; }
.hint, .lang-switch { color: #998060; }
.hint kbd { background: #c9881d; color: #fff; }
.score-box { background: #c9881d; }
.score-box .lbl { color: #fff5d6; }
.btn { background: #b56b1c; color: #fff; }
.btn:hover { background: #cf8228; }
.btn:active { background: #995910; }
.btn.ghost { color: #b56b1c; border-color: #b56b1c; }

.grid { background: #c9881d; }
.cell { background: rgba(255, 255, 255, 0.4); }
.overlay { background: rgba(252, 248, 227, 0.80); }
.overlay .msg { color: #b56b1c; }
.overlay .sub-msg { color: #4a3b00; }

a { color: #b56b1c; }
.site-nav { border-top-color: rgba(181, 107, 28, 0.25); }
.site-nav a { color: #b56b1c; }

/* Tiles — beige → doge gold → wow */
.tile {
  font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive !important;
  letter-spacing: -1px;
}
.tile[data-v="2"]    { background: #fdf2c4; color: #b56b1c; }
.tile[data-v="4"]    { background: #ffe89a; color: #b56b1c; }
.tile[data-v="8"]    { background: #ffd86b; color: #4a3b00; }
.tile[data-v="16"]   { background: #ffc94a; color: #4a3b00; }
.tile[data-v="32"]   { background: #ffb52d; color: #4a3b00; }
.tile[data-v="64"]   { background: #ff9b1c; color: #fff; }
.tile[data-v="128"]  { background: #ff8c1a; color: #fff;
                       box-shadow: 0 0 20px 5px rgba(255, 140, 26, 0.5); }
.tile[data-v="256"]  { background: #ff7a1f; color: #fff;
                       box-shadow: 0 0 25px 8px rgba(255, 122, 31, 0.55); }
.tile[data-v="512"]  { background: #ff5e1f; color: #fff;
                       box-shadow: 0 0 25px 10px rgba(255, 94, 31, 0.6); }
.tile[data-v="1024"] { background: #c9881d; color: #fff;
                       box-shadow: 0 0 30px 12px rgba(201, 136, 29, 0.55); }
.tile[data-v="2048"] { background: #b56b1c; color: #fff;
                       box-shadow: 0 0 32px 16px rgba(181, 107, 28, 0.65); }
.tile[data-v="4096"] { background: #4a3b00; color: #ffd86b; }
.tile[data-v="8192"] { background: #2a2200; color: #ffd86b; }