@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Playfair+Display:wght@700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── ROOT ── */
#arrays-ab-root {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    background: radial-gradient(circle at top, #3a2210 0%, #0d1117 80%);
    position: relative;
    overflow: hidden;
    max-width: 1100px;
    height: 680px;
    margin: 20px auto;
    border-radius: 0px;
    user-select: none;
}

/* ── TOP BAR ── */
.ab-topbar {
    position: absolute; top: 0; left: 0; right: 0; height: 56px;
    background: #161b22;
    display: flex; align-items: center; padding: 0 20px; gap: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 10;
}
.ab-topbar-menu {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.85);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; cursor: pointer; flex-shrink: 0;
}
.ab-topbar-menu span { display: block; width: 16px; height: 2px; background: #333; border-radius: 2px;}
.ab-topbar-balance { font-size: 1.3rem; font-weight: 700; color: #fff; }
.ab-topbar-hint { flex: 1; text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.5); }

/* ── MAIN LAYOUT ── */
.ab-body {
    position: absolute; top: 56px; bottom: 0; left: 0; right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
}



/* ── CENTER: TABLE AREA ── */
.ab-table {
    width: 100%; max-width: 900px; height: 100%; max-height: 540px;
    display: flex; flex-direction: column;
    padding: 30px 120px 20px 100px; /* Right padding to make room for buttons */
    align-items: center;
    justify-content: center;
    position: relative;
    /* Create the grand table look */
    background: radial-gradient(ellipse at center, #23ab3b 0%, #10591f 90%);
    border: 15px solid #2f1d10; /* Dark wood outer rim */
    border-radius: 200px; /* Make it a pill shape like the image */
    box-shadow: 
        0 0 20px #cc7a00, /* Gold outer glow */
        inset 0 0 15px #f4c02f, /* Gold inner rim highlight */
        inset 0 0 50px rgba(0,0,0,0.8); /* Inner shadow on felt */
}

/* ANDAR / BAHAR zones */
.ab-zones-row {
    display: flex; gap: 20px; width: 100%; max-width: 600px;
    margin-bottom: 5px;
    flex: 1;
}
.ab-zone {
    flex: 1; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 6px;
    background: rgba(255, 255, 255, 0.05); /* Very faint highlight inside lines */
    touch-action: pan-y;
    min-height: 220px; position: relative; display: flex; flex-direction: column;
    cursor: pointer; transition: background 0.15s, border-color 0.15s; overflow: hidden;
}
.ab-zone:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.8); }
.ab-zone.active-bet { border-color: #ffd700; box-shadow: inset 0 0 20px rgba(255,215,0,0.2); }

.ab-zone-label {
    text-align: center; padding: 10px 0;
    font-size: 1.4rem; font-weight: 900; color: rgba(255,255,255,0.75);
    letter-spacing: 3px; text-transform: uppercase; flex-shrink: 0;
}
.ab-zone-cards { flex: 1; position: relative; overflow: hidden; }

/* JOKER & DECK row — between shoe and zones */
.ab-joker-row {
    width: 100%; max-width: 560px; display: flex; justify-content: center; align-items: center; gap: 40px; margin-bottom: 10px; position: relative;
}

/* DECK */
.ab-deck-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ab-deck {
    width: 50px; height: 72px; border-radius: 4px;
    background: repeating-linear-gradient(135deg, #1a5f9e 0px, #1a5f9e 4px, #174f84 4px, #174f84 8px);
    border: 3px solid #fff;
    box-shadow: -1px -1px 0 #ccc, -2.5px -2.5px 0 #fff, -3.5px -3.5px 0 #ccc, -5px -5px 0 #fff, -6px -6px 8px rgba(0,0,0,0.6);
    position: relative;
}
.ab-joker-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ab-slot-label {
    font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 1px; text-transform: uppercase;
}

.ab-joker-slot {
    width: 56px; height: 78px; border: 2px dashed rgba(255,215,0,0.5);
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    color: rgba(255,215,0,0.4); font-size: 0.6rem; font-weight: 700; letter-spacing: 1px;
    background: rgba(255,215,0,0.04); position: relative;
}
.ab-joker-slot.has-card { border-color: rgba(255,215,0,0.8); background: transparent; color: transparent; }

/* Limits label */
.ab-limits-text {
    font-size: 0.72rem; color: rgba(255,255,255,0.35);
    margin-bottom: 10px; letter-spacing: 0.5px;
}

/* CHIP RAIL */
.ab-chip-rail {
    display: flex; gap: 16px; align-items: center; padding: 10px 0;
}
.ab-chip {
    width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 900; color: #fff;
    position: relative; transition: transform 0.12s;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.ab-chip:hover { transform: scale(1.08); }
.ab-chip.selected { transform: scale(1.15); box-shadow: 0 0 18px rgba(255,255,255,0.6); }
/* Notch ring */
.ab-chip::after {
    content: ''; position: absolute; inset: 4px;
    border-radius: 50%; border: 2px dashed rgba(255,255,255,0.5);
    pointer-events: none;
}
.ab-chip-1  { background: radial-gradient(circle, #888 30%, #555 100%); }
.ab-chip-5  { background: radial-gradient(circle, #e84040 30%, #a01010 100%); }
.ab-chip-25 { background: radial-gradient(circle, #3dcc7a 30%, #1a8a45 100%); }
.ab-chip-100 { background: radial-gradient(circle, #444 30%, #222 100%); }
.ab-chip-500 { background: radial-gradient(circle, #d460a8 30%, #8a2070 100%); }

/* Placed chips (inside zones) */
.ab-placed-chip {
    position: absolute; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 900; color: #fff; z-index: 20;
    pointer-events: none; box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%);
}
.ab-placed-chip::after { content:''; position:absolute; inset:3px; border-radius:50%; border:2px dashed rgba(255,255,255,0.5); }

/* ── RIGHT: ACTION BUTTONS ── */
.ab-actions {
    position: absolute;
    right: 40px; /* Position floating over the right side of the main body */
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    display: flex; flex-direction: column; align-items: center;
    gap: 15px; z-index: 20;
}
.ab-action-btn {
    width: 72px; height: 72px; border-radius: 50%;
    background: #2c4f6e; border: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; cursor: pointer; color: rgba(255,255,255,0.55);
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; transition: background 0.15s, color 0.15s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4); margin-bottom: 20px;
}
.ab-action-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(1); }
.ab-action-btn svg { width: 24px; height: 24px; fill: currentColor; }

#ab-btn-clearall {
    background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; border: 2px solid #ec7063;
}
#ab-btn-clearall:not(:disabled):hover { background: linear-gradient(135deg, #c0392b, #a53125); }

#ab-btn-clear {
    background: linear-gradient(135deg, #f1c40f, #e67e22); color: #fff; border: 2px solid #f4d03f;
}
#ab-btn-clear:not(:disabled):hover { background: linear-gradient(135deg, #e67e22, #d35400); }

.ab-action-btn.deal-btn {
    background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; border: 2px solid #58d68d; box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
}
.ab-action-btn.deal-btn:not(:disabled):hover { background: linear-gradient(135deg, #27ae60, #1e8449); }

/* ── CARDS ── */
.ab-card {
    position: absolute;
    width: 50px; height: 72px; border-radius: 4px;
    background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3px 4px; font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 0.9rem; line-height: 1;
    transition: left 0.35s cubic-bezier(0.25,0.8,0.25,1), top 0.35s cubic-bezier(0.25,0.8,0.25,1),
                opacity 0.25s;
}
.ab-card.red { color: #cc1111; }
.ab-card.black { color: #111; }
.ab-card .ab-card-suit-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 1.6rem; opacity: 0.12;
}
.ab-card-back {
    background: repeating-linear-gradient(
        135deg, #1a5f9e 0px, #1a5f9e 4px, #174f84 4px, #174f84 8px
    ) !important;
    border: 3px solid #fff;
}
.ab-card-back > * { display: none; }

/* ── RESULT OVERLAY ── */
.ab-result {
    position: absolute; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.65);
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
    flex-direction: column; gap: 14px;
}
.ab-result.show { opacity: 1; pointer-events: auto; }
.ab-result-box {
    background: #17293a; border: 2px solid rgba(255,215,0,0.4);
    border-radius: 10px; padding: 30px 50px; text-align: center;
    min-width: 300px;
}
.ab-result-title { font-size: 2rem; font-weight: 900; letter-spacing: 2px; font-family: 'Playfair Display', serif; }
.ab-result-win { font-size: 1.2rem; margin-top: 8px; color: #4cd964; font-weight: 700; }
.ab-result-lose { color: #ff4444; }
.ab-result-btn {
    margin-top: 20px; padding: 10px 32px; background: #e0d08e;
    border: none; border-radius: 4px; font-weight: 900; font-size: 0.9rem;
    color: #111; cursor: pointer; transition: filter 0.15s;
}
.ab-result-btn:hover { filter: brightness(1.1); }

/* ── HUD BOTTOM ── */
.ab-hud {
    position: absolute; bottom: 0; left: 0; right: 0; height: 34px;
    background: #161b22; border-top: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px; font-size: 0.72rem; color: rgba(255,255,255,0.6);
    z-index: 9;
}
.ab-hud strong { color: #fff; font-size: 0.85rem; }
.ab-hud-center { color: #4cd964; font-weight: 600; }

/* ── MOBILE PORTRAIT ── */
@media (max-width: 700px) {
    #arrays-ab-root {
        height: auto;
        min-height: unset;
        overflow: visible;
        border-radius: 0;
        margin: 0;
        max-width: 100%;
    }

    /* Topbar: back in normal flow so it doesn't overlap body */
    .ab-topbar {
        position: relative;
        top: auto; left: auto; right: auto;
    }

    /* Body: stack vertically, no absolute offset needed */
    .ab-body {
        position: static;
        flex-direction: column;
        align-items: center;
        padding-bottom: 10px;
    }

    /* Table full width */
    .ab-table {
        width: 100%;
        padding: 10px 10px 10px 10px; /* Symmetrical padding, no right gap needed anymore */
        border-radius: 30px; /* Fits narrow screens better */
        border-width: 6px;
        max-height: none;
        margin: 5px 0;
    }

    /* Joker & zones full width */
    .ab-joker-row { max-width: 100%; gap: 20px; }
    .ab-zones-row { max-width: 100%; gap: 5px; }

    /* Fix zone text on mobile */
    .ab-zone-label {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    /* Zones shorter on mobile */
    .ab-zone { min-height: 130px; }

    /* Chip rail wraps */
    .ab-chip-rail { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .ab-chip { width: 38px; height: 38px; font-size: 0.65rem; }

    /* Actions: revert to horizontal below table for mobile */
    .ab-actions {
        position: static;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        padding: 10px 0;
        gap: 20px;
        transform: none;
    }
    .ab-action-btn { margin-bottom: 0; width: 60px; height: 60px; font-size: 0.55rem; box-shadow: 0 4px 6px rgba(0,0,0,0.5); border-width: 1px; }
    .ab-action-btn svg { width: 22px; height: 22px; }

    /* HUD: static at bottom of flow */
    .ab-hud {
        position: static;
        height: auto;
        padding: 8px 14px;
    }

    /* Hide hint in topbar on small screens */
    .ab-topbar-hint { display: none; }
}