/* ============================================================================
 * 2048 Hub — Halloween theme
 * Spooky palette: pumpkin orange, witch purple, ghost white, blood red.
 * Dark backdrop; tile colours flip from dark → vivid as values grow.
 * ============================================================================ */

body { background: #14101a; color: #f3c97d; }
.title, .content h1, .content h2 { color: #f3a05a; }
.content strong { color: #f3a05a; }
.content { color: #d8c7b0; }
.hint, .lang-switch { color: #a99b8a; }
.hint kbd { background: #3a1f4a; color: #f3c97d; }
.score-box { background: #3a1f4a; }
.score-box .lbl { color: #d8c7b0; }
.btn { background: #6e2a8a; color: #f3c97d; }
.btn:hover { background: #8a39a8; }
.btn:active { background: #5a2070; }
.btn.ghost { color: #f3a05a; border-color: #f3a05a; }

.grid { background: #2a1538; }
.cell { background: rgba(243, 160, 90, 0.10); }
.overlay { background: rgba(20, 16, 26, 0.78); }
.overlay .msg { color: #f3a05a; }
.overlay .sub-msg { color: #d8c7b0; }

a { color: #f3a05a; }
.site-nav { border-top-color: rgba(243, 160, 90, 0.25); }
.site-nav a { color: #f3a05a; }

/* Tiles — dark → fiery orange as values grow */
.tile[data-v="2"]    { background: #1a1426; color: #8a6db0; }
.tile[data-v="4"]    { background: #25193a; color: #b58fd9; }
.tile[data-v="8"]    { background: #4a1f6e; color: #f3c97d; }
.tile[data-v="16"]   { background: #6e2a8a; color: #fff0c2; }
.tile[data-v="32"]   { background: #8a1f5e; color: #fff0c2; }
.tile[data-v="64"]   { background: #b51f3a; color: #fff0c2; }
.tile[data-v="128"]  { background: #f3a05a; color: #14101a;
                       box-shadow: 0 0 20px 5px rgba(243, 160, 90, 0.5); }
.tile[data-v="256"]  { background: #ff7c1f; color: #14101a;
                       box-shadow: 0 0 25px 8px rgba(255, 124, 31, 0.55); }
.tile[data-v="512"]  { background: #ff5e1f; color: #fff0c2;
                       box-shadow: 0 0 28px 12px rgba(255, 94, 31, 0.6); }
.tile[data-v="1024"] { background: #ffd23a; color: #14101a;
                       box-shadow: 0 0 32px 14px rgba(255, 210, 58, 0.55); }
.tile[data-v="2048"] { background: #ffec4a; color: #14101a;
                       box-shadow: 0 0 36px 18px rgba(255, 236, 74, 0.65); }
.tile[data-v="4096"] { background: #c0c0c0; color: #14101a; }
.tile[data-v="8192"] { background: #f8f8f8; color: #14101a; }