/* 2048 for GameOS - styles (prefix g2048-).
   Pairs with js/newgames/g2048.html + g2048.js.
   Window chrome stays Win95; only the tiles use the warm 2048 palette. */

.window-g2048 { width: auto; min-width: unset; }

#g2048-window .g2048-body {
    padding: 10px;
    background: var(--win-bg);
    text-align: center;
}

#g2048-window .g2048-stats {
    font-size: 11px;
    margin-bottom: 8px;
}

#g2048-window .g2048-status {
    font-size: 11px;
    margin-top: 8px;
    min-height: 14px;
}

#g2048-window .g2048-help {
    font-size: 10px;
    color: var(--win-dark);
    margin-top: 4px;
}

/* Beveled Win95 well holding the board */
#g2048-window .g2048-board {
    display: grid;
    grid-template-columns: repeat(4, 56px);
    grid-template-rows: repeat(4, 56px);
    gap: 6px;
    padding: 6px;
    margin: 0 auto;
    width: max-content;
    background: #b8b0a0;
    border-top: 2px solid var(--win-darker);
    border-left: 2px solid var(--win-darker);
    border-right: 2px solid var(--win-white);
    border-bottom: 2px solid var(--win-white);
}

#g2048-window .g2048-tile {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Tahoma, 'MS Sans Serif', sans-serif;
    font-weight: bold;
    font-size: 22px;
    color: #776e65;
    background: #cdc1b4;
    border-radius: 3px;
    transition: background 0.08s ease-in, color 0.08s ease-in;
}

#g2048-window .g2048-empty {
    background: #cdc1b4;
}

/* Familiar warm 2048 tile palette */
#g2048-window .g2048-t2    { background: #eee4da; color: #776e65; }
#g2048-window .g2048-t4    { background: #ede0c8; color: #776e65; }
#g2048-window .g2048-t8    { background: #f2b179; color: #f9f6f2; }
#g2048-window .g2048-t16   { background: #f59563; color: #f9f6f2; }
#g2048-window .g2048-t32   { background: #f67c5f; color: #f9f6f2; }
#g2048-window .g2048-t64   { background: #f65e3b; color: #f9f6f2; }
#g2048-window .g2048-t128  { background: #edcf72; color: #f9f6f2; font-size: 19px; }
#g2048-window .g2048-t256  { background: #edcc61; color: #f9f6f2; font-size: 19px; }
#g2048-window .g2048-t512  { background: #edc850; color: #f9f6f2; font-size: 19px; }
#g2048-window .g2048-t1024 { background: #edc53f; color: #f9f6f2; font-size: 15px; }
#g2048-window .g2048-t2048 { background: #edc22e; color: #f9f6f2; font-size: 15px; }
/* Beyond 2048 */
#g2048-window .g2048-t4096,
#g2048-window .g2048-t8192,
#g2048-window .g2048-t16384,
#g2048-window .g2048-t32768 { background: #3c3a32; color: #f9f6f2; font-size: 15px; }

/* 16px 2048 icon: two stacked warm tiles with a beveled top-left highlight */
.icon-g2048-sm {
    width: 16px; height: 16px; position: relative; display: inline-block;
}
.icon-g2048-sm::before {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 8px; height: 8px;
    background: #edc22e;
    box-shadow: 4px 4px 0 #f2b179, 8px 8px 0 #ede0c8;
}
.icon-g2048-sm::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 2px; height: 2px;
    background: #f9f6f2;
}