/* ================================================
   2048 – Init Manga
   File: assets/css/2048.css
   Only layout & visual. No JS logic here.
================================================== */

.init-2048 {
    max-width: 420px;
    margin: 0 auto;
}

/* Status text (start / playing / game over) */
.init-2048__status {
    min-height: 24px;
    font-size: 14px;
    line-height: 1.4;
}

/* Score + Best */
.init-2048__meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
}

.init-2048__score,
.init-2048__best {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
}

.uk-light .init-2048__score,
.uk-light .init-2048__best {
    background: #272727;
}

.init-2048__score-label,
.init-2048__best-label {
    font-weight: 600;
}

.init-2048__score-value,
.init-2048__best-value {
    font-weight: 700;
}

/* Board wrapper */
.init-2048__grid-wrapper {
    display: inline-block;
}

/* Ngăn trình duyệt scroll khi vuốt trong vùng 2048 */
.init-2048__grid-wrapper,
.init-2048__grid {
    touch-action: none;          /* Chuẩn modern browser */
    -ms-touch-action: none;      /* Legacy MS */
}

/* Hạn chế bớt chain scroll trong một số trình duyệt */
.init-2048__grid-wrapper {
    overscroll-behavior: contain;
}

/* Main grid container */
.init-2048__grid {
    --init-2048-gap: 10px;
    --init-2048-radius: 8px;

    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--init-2048-gap);
    padding: var(--init-2048-gap);
    border-radius: 12px;
    background: #bbada0;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Base cell background (skeleton)
   => JS có thể tạo 16 cell cố định với class này */
.init-2048__cell {
    width: 72px;
    aspect-ratio: 1 / 1;
    border-radius: var(--init-2048-radius);
    background: rgba(238, 228, 218, 0.35);
}

/* Responsive shrink */
@media (max-width: 480px) {
    .init-2048__grid {
        --init-2048-gap: 8px;
    }

    .init-2048__cell {
        width: 64px;
    }
}

/* Tile hiển thị số – JS có thể dùng:
   <div class="init-2048__tile init-2048__tile--v2" data-pos="0">2</div>
   Đặt tile vào grid cell bằng JS (grid-row/column hoặc absolute + transform) */
.init-2048__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--init-2048-radius);
    font-weight: 700;
    font-size: 24px;
    color: #776e65;
    background: #eee4da;
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    user-select: none;
}

/* Optional: khi dùng absolute cho animation mượt
   (JS tự set width/height/transform) */
.init-2048__tile--abs {
    position: absolute;
    top: 0;
    left: 0;
}

/* Màu theo giá trị – classic 2048 */

.init-2048__tile--v2 {
    background: #eee4da;
    color: #776e65;
}

.init-2048__tile--v4 {
    background: #ede0c8;
    color: #776e65;
}

.init-2048__tile--v8 {
    background: #f2b179;
    color: #f9f6f2;
}

.init-2048__tile--v16 {
    background: #f59563;
    color: #f9f6f2;
}

.init-2048__tile--v32 {
    background: #f67c5f;
    color: #f9f6f2;
}

.init-2048__tile--v64 {
    background: #f65e3b;
    color: #f9f6f2;
}

.init-2048__tile--v128 {
    background: #edcf72;
    color: #f9f6f2;
    font-size: 20px;
}

.init-2048__tile--v256 {
    background: #edcc61;
    color: #f9f6f2;
    font-size: 20px;
}

.init-2048__tile--v512 {
    background: #edc850;
    color: #f9f6f2;
    font-size: 20px;
}

.init-2048__tile--v1024 {
    background: #edc53f;
    color: #f9f6f2;
    font-size: 18px;
}

.init-2048__tile--v2048 {
    background: #edc22e;
    color: #f9f6f2;
    font-size: 18px;
}

.init-2048__tile--v4096,
.init-2048__tile--v8192,
.init-2048__tile--v16384 {
    background: #3c3a32;
    color: #f9f6f2;
    font-size: 18px;
}

/* Actions */
.init-2048__actions .init-2048__start {
    font-weight: 600;
}

/* Top players block */
.init-2048-top-players h3 {
    margin-bottom: 10px;
}

.init-2048-top-players .uk-margin-small {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* Actions row: Start (expand) + AI Hint (auto) */
.init-2048__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* khoảng cách 2 nút */
}

/* Start Game = full width */
.init-2048__start {
    flex: 1 1 auto; /* full width */
}

/* AI Hint = auto width */
.init-2048__hint {
    flex: 0 0 auto;
    width: auto !important;
    margin-top: 0 !important;
    white-space: nowrap;
}