:root{
    --bg: transparent;
    --text:#776e65;
    --board:#bbada0;
    --cell:#cdc1b4;

    --gap: 14px;
    --size: 110px; /* desktop tile size */
    --radius: 10px;

    --shadow: 0 6px 20px rgba(0,0,0,.10);
    --ease: cubic-bezier(.2,.8,.2,1);
}

@media (max-width: 520px){
    :root{ --gap: 10px; --size: 74px; }
}

*{ box-sizing:border-box; }

html, body{
    background: transparent;
}

body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: transparent;
    color:var(--text);
}

.wrap{
    max-width: 520px;
    margin: 0 auto;
    padding: 16px 12px 22px;

    /* 🔥 FIX: push content below navbar */
    margin-top: 90px;
}

/* ===== MAIN GAME PANEL ===== */
.wrap{
    max-width: 520px;
    margin: 0 auto;
    padding: 16px 12px 22px;

    height: auto;
    min-height: unset;
}

/* MOBILE: tighter padding */
@media (max-width: 520px){
    .wrap{
        max-width: 92vw;
        padding: 14px 10px 18px;
    }
}

/* ===== HEADER ===== */
.top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
}

.title{
    margin: 0;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -1px;
}

/* Reduce gap under title */
.subtitle{
    margin: 4px 0 2px; /* 🔥 tighter */
    font-size: 13px;
    color: #8f867c;
}


/* ===== SCORES ===== */
.scores{
    display:flex;
    gap: 8px;
}

.scorebox{
    min-width: 82px;
    background: #bbada0;
    color: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    text-align:center;
}

.scorebox .label{
    font-size: 11px;
    font-weight: 700;
    opacity: .85;
}

.scorebox .value{
    font-size: 20px;
    font-weight: 800;
    margin-top: 2px;
}

/* ===== ACTIONS (BUTTON AREA) ===== */
.actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin: 8px 0 6px;   /* 🔥 reduced spacing */
    gap: 10px;
}

.hint{
    font-size: 13px;
    color:#8f867c;
}

/* ===== BUTTON ===== */
.btn{
    appearance:none;
    border:none;
    background:#8f7a66;
    color:#fff;
    font-weight:800;
    border-radius: 8px;
    padding: 9px 14px;
    cursor:pointer;
    box-shadow: var(--shadow);
    transition: transform .08s var(--ease), filter .15s;
}

.btn:hover{ filter: brightness(1.04); }
.btn:active{ transform: translateY(1px) scale(.99); }

/* ===== GAME BOARD ===== */
.subtitle{
    margin: 4px 0 2px; /* 🔥 tighter */
    font-size: 13px;
    color: #8f867c;
}


.board{
    position:relative;
    width: calc(var(--size) * 4 + var(--gap) * 5);
    height: calc(var(--size) * 4 + var(--gap) * 5);
    background: var(--board);
    border-radius: var(--radius);
    padding: var(--gap);
    box-shadow: var(--shadow);
    touch-action: none;
}

/* Mobile board fit */
@media (max-width: 520px){
    .board{
        max-width: 92vw;
    }
}

/* ===== GRID ===== */
.grid{
    position:absolute;
    inset: var(--gap);
    display:grid;
    grid-template-columns: repeat(4, var(--size));
    grid-template-rows: repeat(4, var(--size));
    gap: var(--gap);
}

.cell{
    width: var(--size);
    height: var(--size);
    background: var(--cell);
    border-radius: 8px;
}

.tiles{
    position:absolute;
    inset: var(--gap);
}

/* ===== TILES ===== */
.tile{
    position:absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
    font-size: 42px;
    color:#776e65;

    transform: translate(var(--x), var(--y)) scale(1);
    transition: transform 120ms var(--ease), opacity 120ms var(--ease);
    will-change: transform;
}

.tile.small{ font-size: 38px; }
.tile.smaller{ font-size: 32px; }
.tile.tiny{ font-size: 26px; }

/* ===== ANIMATIONS ===== */
.tile.new{
    animation: pop 140ms var(--ease) both;
}
@keyframes pop{
    from{ transform: translate(var(--x), var(--y)) scale(.6); }
    to{ transform: translate(var(--x), var(--y)) scale(1); }
}

.tile.merge{
    animation: bump 160ms var(--ease) both;
}
@keyframes bump{
    0%{ transform: translate(var(--x), var(--y)) scale(1); }
    50%{ transform: translate(var(--x), var(--y)) scale(1.10); }
    100%{ transform: translate(var(--x), var(--y)) scale(1); }
}

/* ===== TILE COLORS ===== */
.tile.v2   { background:#eee4da; }
.tile.v4   { background:#ede0c8; }
.tile.v8   { background:#f2b179; color:#f9f6f2; }
.tile.v16  { background:#f59563; color:#f9f6f2; }
.tile.v32  { background:#f67c5f; color:#f9f6f2; }
.tile.v64  { background:#f65e3b; color:#f9f6f2; }
.tile.v128 { background:#edcf72; color:#f9f6f2; font-size: 34px; }
.tile.v256 { background:#edcc61; color:#f9f6f2; font-size: 34px; }
.tile.v512 { background:#edc850; color:#f9f6f2; font-size: 34px; }
.tile.v1024{ background:#edc53f; color:#f9f6f2; font-size: 28px; }
.tile.v2048{ background:#edc22e; color:#f9f6f2; font-size: 28px; }
.tile.big  { background:#3c3a32; color:#f9f6f2; font-size: 26px; }

/* ===== OVERLAY ===== */
.overlay{
    position:absolute;
    inset:0;
    background: rgba(238,228,218,.73);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: var(--radius);
}
.overlay.hidden{ display:none; }

.overlayCard{
    width: min(86%, 360px);
    background: rgba(255,255,255,.92);
    border-radius: 14px;
    padding: 18px 18px 14px;
    box-shadow: var(--shadow);
    text-align:center;
}

.footer{
    margin-top: 10px;
    font-size: 12px;
    color:#9b948c;
}

.grid{ z-index:1; }
.tiles{ z-index:2; }
.overlay{ z-index:3; }

@media (max-width: 520px){
    .top{ margin-bottom: 2px; }
    .actions{ margin-bottom: 0; }
}