/* ==========================================================================
   2048 Game - Style
   Only tile color classes + animations + responsive overrides
   Board / overlay layout is in index.html <style>
   ========================================================================== */

/* ==========================================================================
   Tile color & font-size by value
   ========================================================================== */
.tile-2    { background: var(--cell-2,    #EEE4DA); color: var(--text-dark,  #776E65); font-size: 2.2em; }
.tile-4    { background: var(--cell-4,    #EDE0C8); color: var(--text-dark,  #776E65); font-size: 2.2em; }
.tile-8    { background: var(--cell-8,    #F2B179); color: var(--text-light, #F9F6F2); font-size: 2.2em; }
.tile-16   { background: var(--cell-16,   #F59563); color: var(--text-light, #F9F6F2); font-size: 2em;   }
.tile-32   { background: var(--cell-32,   #F67C5F); color: var(--text-light, #F9F6F2); font-size: 2em;   }
.tile-64   { background: var(--cell-64,   #F65E3B); color: var(--text-light, #F9F6F2); font-size: 2em;   }
.tile-128  { background: var(--cell-128,  #EDCF72); color: var(--text-light, #F9F6F2); font-size: 1.7em;
            text-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tile-256  { background: var(--cell-256,  #EDCC61); color: var(--text-light, #F9F6F2); font-size: 1.7em;
            text-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tile-512  { background: var(--cell-512,  #EDC850); color: var(--text-light, #F9F6F2); font-size: 1.7em;
            text-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tile-1024 { background: var(--cell-1024, #EDC53F); color: var(--text-light, #F9F6F2); font-size: 1.4em;
            text-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tile-2048 { background: var(--cell-2048, #EDC22E); color: var(--text-light, #F9F6F2); font-size: 1.4em;
            text-shadow: 0 2px 6px rgba(0,0,0,0.15);
            box-shadow: 0 0 30px 10px rgba(237,194,46,0.4); }
.tile-super { background: var(--cell-super, #3C3A32); color: var(--text-light, #F9F6F2); font-size: 1.2em;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* ==========================================================================
   Tile animations  (class names: .new / .merged)
   ========================================================================== */
.tile.new {
    animation: tileAppear 0.18s ease-out;
}
@keyframes tileAppear {
    0%   { transform: scale(0);   opacity: 0; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1);   opacity: 1; }
}

.tile.merged {
    animation: tilePop 0.18s ease-out;
    z-index: 3;
}
@keyframes tilePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   Responsive overrides  (board size handled by index.html inline style)
   ========================================================================== */
@media (max-width: 480px) {
    .tile-2,  .tile-4,  .tile-8,
    .tile-16, .tile-32, .tile-64  { font-size: 1.8em; }
    .tile-128,.tile-256,.tile-512 { font-size: 1.4em; }
    .tile-1024,.tile-2048,.tile-super { font-size: 1.1em; }
}
@media (max-width: 360px) {
    .tile-2,  .tile-4,  .tile-8,
    .tile-16, .tile-32, .tile-64  { font-size: 1.5em; }
    .tile-128,.tile-256,.tile-512 { font-size: 1.2em; }
    .tile-1024,.tile-2048,.tile-super { font-size: 0.95em; }
}