/* ===== StarrKit — Module 7 : Brawl Merge Game ===== */
.merge { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.merge-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Grille : largeur fluide, ratio carré global, rows en 1fr pour symétrie. */
.merge-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    width: 100%; max-width: 420px; aspect-ratio: 1 / 1;
    background: var(--surface); border: 3px solid var(--border); border-radius: 18px; padding: 10px;
    box-shadow: 0 6px 0 var(--border), 0 10px 18px rgba(0, 0, 0, .3);
    overflow: visible;
}

/* Chaque slot est carré strict (parade au browser qui ignore aspect-ratio parent
   dans certains contextes flex) — compatible iOS Safari ≥ 15 / Android Chrome ≥ 90.
   /!\ overflow: visible pour ne PAS clipper le bouton X au coin de la tile. */
.merge-cell {
    background: var(--surface-2);
    border-radius: 12px;
    display: grid; place-items: center;
    aspect-ratio: 1 / 1;
    min-width: 0; min-height: 0;
    overflow: visible;
    position: relative;
}

/* Le brawler dans une cellule : carré, ne sort jamais du slot. */
.merge-tile {
    width: 86%; aspect-ratio: 1 / 1; height: auto;
    border-radius: 12px; cursor: grab; user-select: none;
    display: grid; place-items: center; text-align: center; padding: 2px;
    font-family: var(--display); font-size: .72rem; color: #fff; border: 2px solid rgba(0, 0, 0, .35);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .3); animation: sk-pop .25s ease;
    overflow: visible;  /* permet au bouton X de dépasser */
    position: relative;
}
.merge-tile:active { cursor: grabbing; }

/* Bouton "supprimer" — visible, contrasté, au 1er plan, dépasse de la tile.
   !important nécessaire : merge.js applique aussi un style inline (historique). */
.merge-del {
    position: absolute !important;
    top: -10px !important; right: -10px !important;
    width: 28px !important; height: 28px !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 15px !important; font-weight: 900 !important; line-height: 1 !important;
    cursor: pointer !important; padding: 0 !important;
    z-index: 50 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 0 0 2px rgba(239, 68, 68, .25) !important;
    display: grid !important; place-items: center !important;
    transition: transform .12s ease, background .12s ease !important;
}
.merge-del:hover { background: #dc2626 !important; transform: scale(1.1) !important; }
.merge-del:active { transform: scale(.95) !important; }

.lvl-1 { background: #9ca3af; } .lvl-2 { background: #4f7cff; } .lvl-3 { background: #3ad17a; }
.lvl-4 { background: #f59e0b; } .lvl-5 { background: #ec4899; } .lvl-6 { background: #c084fc; }
.lvl-7 { background: #ef4444; } .lvl-8 { background: var(--gold); color: #3a2a00; }

.merge-hint { color: var(--text-dim); font-size: .85rem; text-align: center; max-width: 420px; padding: 0 8px; }

/* Mobile : on garde la lisibilité du bouton spawn. */
@media (max-width: 420px) {
    .merge-actions .btn { font-size: .92rem; padding: 10px 14px; }
    .merge-tile { font-size: .65rem; }
    /* Légèrement réduit sur mobile pour ne pas masquer trop de la cell adjacente */
    .merge-del {
        width: 26px !important; height: 26px !important;
        top: -8px !important; right: -8px !important;
        font-size: 14px !important;
    }
}

/* --- Extension du plateau --- */
.merge-expand-btn { background: linear-gradient(135deg, #22c55e, #059669) !important; }
.merge-max { align-self: center; font-weight: 800; color: var(--gold, #f4c443); }
.merge-size-label { text-align: center; font-size: .85rem; color: var(--text-dim); margin: 8px 0 0; font-weight: 700; }