/* ─────────────────────────────────────────────────────────────────────
   Avenger Showcase — frontend styles
   Page layout: header (from avenger-landing) → showcase content → footer
   Showcase content: page head → game image hero → withdrawals list

   Two modes:
   • .avs-page--avl-chrome  → wrapper also has .avl-page → inherits the landing
     page's background, font, padding-top (topbar offset), and design tokens
     (--avl-gold, --avl-px, etc.). We only style the showcase content.
   • .avs-page--standalone  → no parent plugin; we paint our own dark theme.
   ───────────────────────────────────────────────────────────────────── */

/* ── Shared local tokens (available in both chrome and standalone modes) */
.avs-page {
    --avs-line:      rgba(97, 180, 255, 0.22);
    --avs-line-gold: rgba(255, 203, 74, 0.4);
    --avs-text:      #f5f9ff;
    --avs-muted:     #9bb0d4;
    --avs-gold:      #ffcb4a;
    --avs-gold-deep: #b8801f;
    --avs-green:     #27f58a;
    --avs-px:        clamp(14px, 3.5vw, 48px);
}

/* ── Standalone fallback theme — only kicks in when chrome is missing ── */
.avs-page--standalone {
    background:
        radial-gradient(circle at 50% 0%, rgba(22, 168, 255, 0.18), transparent 45%),
        linear-gradient(180deg, #020814 0%, #06162c 50%, #020814 100%);
    color: var(--avs-text);
    font-family: Inter, "Noto Sans Thai", "Prompt", Arial, sans-serif;
    min-height: 100vh;
    padding-top: clamp(20px, 3vw, 48px);
}

/* ── Showcase content shell — full viewport width with 48px side padding ─ */
.avs-showcase {
    width: 100%;
    max-width: 100%;
    margin: 0 auto clamp(40px, 4vw, 80px);
    /* Top: moderate clearance below the topbar.
       Left/right: 48px at desktop (per spec), shrinks to 16px on small phones
       so content doesn't squeeze itself off-screen. Symmetric on both sides. */
    padding: clamp(24px, 2.4vw, 48px) clamp(16px, 2.5vw, 48px) 0;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 1.8vw, 32px);
}

.avs-page--standalone .avs-showcase {
    /* No topbar to clear — bring the head closer to the top */
    padding-top: clamp(20px, 2vw, 40px);
    /* In standalone the .avl-page background/gutter don't exist so use our own */
    width: 100%;
    padding-left: var(--avs-px);
    padding-right: var(--avs-px);
}

/* ── Page head ─────────────────────────────────────────────────────── */

.avs-showcase-head {
    text-align: center;
    padding-top: clamp(10px, 0.9vw, 18px);
}

.avs-showcase-head h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 2.4vw, 48px);
    line-height: 1.16;
    font-weight: 1000;
    color: transparent;
    background: linear-gradient(90deg, #b8801f 0%, #ffcb4a 30%, #ffe9a8 50%, #ffcb4a 70%, #b8801f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: 0.5px;
}

.avs-showcase-head p {
    margin: 0;
    color: #9bb0d4;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.35;
}

/* ── Showcase body — 2-column on desktop, stacks on tablet/mobile ───── */

.avs-showcase-body {
    display: grid;
    /* Cap the whole image+withdrawals block at 1500px and centre it inside
       the container — without a cap, withdrawals stretches to fill 1fr and
       visually hugs the right edge of wide viewports. */
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: minmax(280px, 620px) minmax(0, 1fr);
    gap: clamp(16px, 1.8vw, 32px);
    align-items: start;
}

@media (max-width: 1024px) {
    .avs-showcase-body {
        grid-template-columns: 1fr;
    }
}

/* ── Game image + CTA (left column) ────────────────────────────────── */

.avs-game-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 1.6vw, 24px);
}

.avs-game-frame {
    position: relative;
    width: min(620px, 100%);             /* hero size — fits side-by-side at 1920 */
    aspect-ratio: 1 / 1;
    border-radius: clamp(16px, 1.4vw, 28px);
    overflow: hidden;
    border: 2px solid rgba(255, 203, 74, 0.4);
    background: linear-gradient(180deg, rgba(8, 28, 60, 0.85), rgba(4, 14, 32, 0.92));
    box-shadow:
        0 0 0 6px rgba(255, 203, 74, 0.06),
        0 20px 50px rgba(0, 0, 0, 0.55),
        inset 0 0 40px rgba(53, 228, 255, 0.08);
}

.avs-game-frame::after {
    /* subtle shine sweep */
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%);
    pointer-events: none;
}

.avs-game-frame img,
.avs-game-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avs-game-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(80px, 12vw, 200px);
    color: rgba(255, 203, 74, 0.35);
}

/* CTA block (countdown + play button) — sits below the image, same width */
.avs-game-cta {
    width: min(620px, 100%);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 16px);
}

/* Countdown pill — eye-catching cyan glow, monospace digits */
.avs-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.2vw, 18px);
    padding: clamp(12px, 1.4vw, 18px) clamp(16px, 1.8vw, 24px);
    border-radius: clamp(12px, 1vw, 16px);
    border: 1px solid rgba(53, 228, 255, 0.4);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(53, 228, 255, 0.18), transparent 70%),
        linear-gradient(180deg, rgba(8, 28, 60, 0.92), rgba(4, 14, 32, 0.96));
    box-shadow:
        0 0 0 1px rgba(53, 228, 255, 0.1) inset,
        0 6px 20px rgba(53, 228, 255, 0.15);
}

.avs-countdown-icon {
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(53, 228, 255, 0.6));
}

.avs-countdown-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.avs-countdown-label {
    color: var(--avs-muted);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.avs-countdown-time {
    color: #36e0ff;
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 1000;
    line-height: 1;
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    letter-spacing: 2px;
    text-shadow:
        0 0 12px rgba(53, 228, 255, 0.7),
        0 0 24px rgba(53, 228, 255, 0.4);
    font-variant-numeric: tabular-nums;       /* steady width per digit so it doesn't jitter as numbers tick */
}

/* Play-now button — red-gold gradient, large click target */
.avs-play-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(14px, 1.5vw, 20px) clamp(28px, 2.4vw, 40px);
    border-radius: 999px;
    background: linear-gradient(135deg, #ff3a3a 0%, #e31b23 50%, #b8141a 100%);
    color: #fff !important;
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 1000;
    letter-spacing: 1px;
    text-decoration: none !important;
    text-align: center;
    box-shadow:
        0 0 0 2px rgba(255, 100, 100, 0.25) inset,
        0 10px 28px rgba(227, 27, 35, 0.5),
        0 0 40px rgba(227, 27, 35, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    position: relative;
    overflow: hidden;
}

.avs-play-now::before {
    /* subtle shine sweep on hover */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.55s ease;
}

.avs-play-now:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 2px rgba(255, 150, 150, 0.4) inset,
        0 14px 36px rgba(227, 27, 35, 0.65),
        0 0 60px rgba(227, 27, 35, 0.35);
    filter: brightness(1.08);
}

.avs-play-now:hover::before {
    transform: translateX(100%);
}

.avs-play-now-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2.4vw, 36px);
    height: clamp(28px, 2.4vw, 36px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: clamp(13px, 1.2vw, 17px);
    padding-left: 2px;                        /* visual centre of "▶" glyph */
}

.avs-play-now-text {
    white-space: nowrap;
}

/* Subtle attention pulse on the countdown when < 1 minute left */
.avs-countdown.is-ending .avs-countdown-time {
    animation: avs-countdown-flash 1s ease-in-out infinite;
}

@keyframes avs-countdown-flash {
    50% { color: #ffcb4a; text-shadow: 0 0 12px rgba(255, 203, 74, 0.7), 0 0 24px rgba(255, 203, 74, 0.4); }
}

/* ── Withdrawals section (right column on desktop) ─────────────────── */

.avs-withdrawals {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--avs-line);
    border-radius: clamp(16px, 1.4vw, 24px);
    background: linear-gradient(180deg, rgba(8, 28, 60, 0.8), rgba(4, 14, 32, 0.9));
    overflow: hidden;
    align-self: stretch;
}

.avs-withdrawals-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 28px);
    border-bottom: 1px solid var(--avs-line);
    background: radial-gradient(ellipse at 0% 50%, rgba(53, 228, 255, 0.14), transparent 60%);
}

.avs-withdrawals-head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(16px, 1.3vw, 22px);
    font-weight: 900;
}

/* Live indicator (pulsing dot) */
.avs-live-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(39, 245, 138, 0.12);
    border: 1px solid rgba(39, 245, 138, 0.45);
    color: var(--avs-green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.avs-live-dot-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--avs-green);
    box-shadow: 0 0 0 0 rgba(39, 245, 138, 0.7);
    animation: avs-pulse 1.6s ease-out infinite;
}

@keyframes avs-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(39, 245, 138, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(39, 245, 138, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(39, 245, 138, 0);   }
}

/* ── Withdrawal list rows ──────────────────────────────────────────── */

.avs-withdraw-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}

.avs-withdraw-row {
    box-sizing: border-box;
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    /* Game column widened (1.4fr → 1.9fr) so the icon + name have breathing
       room; bank column naturally shifts rightward as a result. */
    grid-template-columns: 140px minmax(0, 1.9fr) 100px minmax(0, 1fr) 130px;
    align-items: center;
    gap: clamp(8px, 1vw, 18px);
    padding: clamp(5px, 0.62vw, 9px) clamp(18px, 1.8vw, 28px);
    border-bottom: 1px solid rgba(97, 180, 255, 0.1);
    font-size: clamp(13px, 1vw, 15px);
    transition: background 0.15s;
}

.avs-withdraw-row:last-child {
    border-bottom: 0;
}

.avs-withdraw-row:hover {
    background: rgba(22, 168, 255, 0.05);
}

/* Smooth fade-in when JS inserts new rows */
.avs-withdraw-row.is-new {
    animation: avs-row-in 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes avs-row-in {
    from { opacity: 0; transform: translateY(-6px); background: rgba(39, 245, 138, 0.12); }
    to   { opacity: 1; transform: translateY(0);    background: transparent; }
}

.avs-w-phone {
    color: var(--avs-text);
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.avs-w-game {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #cfeaff;
    font-weight: 600;
}

.avs-w-game-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 10, 25, 0.5);
}

.avs-w-game-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.avs-w-bank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bank-color, #888) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--bank-color, #888) 55%, transparent);
    color: var(--bank-color, #fff);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: max-content;
    justify-self: start;
}

/* Fallback for browsers without color-mix (caniuse: ~93%, but be safe) */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .avs-w-bank {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.18);
        color: var(--bank-color, #fff);
    }
}

.avs-w-amount {
    color: var(--avs-green);
    font-weight: 900;
    text-align: right;
    text-shadow: 0 0 12px rgba(39, 245, 138, 0.35);
}

.avs-w-time {
    color: var(--avs-muted);
    font-size: clamp(11px, 0.9vw, 13px);
    text-align: right;
    white-space: nowrap;
}

.avs-withdraw-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 40px 20px;
    text-align: center;
    color: var(--avs-muted);
    font-style: italic;
}

.avs-withdraw-pages {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px clamp(14px, 1.6vw, 22px);
    border-top: 1px solid var(--avs-line);
    background: rgba(2, 10, 25, 0.34);
}

.avs-withdraw-pages[hidden] {
    display: none;
}

.avs-page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.avs-page-btn {
    min-width: 34px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(97, 180, 255, 0.24);
    border-radius: 999px;
    background: rgba(8, 28, 60, 0.8);
    color: #d8ecff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.avs-page-btn:hover:not(:disabled),
.avs-page-btn.is-current {
    border-color: rgba(255, 203, 74, 0.68);
    background: rgba(255, 203, 74, 0.14);
    color: #ffdf86;
}

.avs-page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.avs-page-gap {
    color: var(--avs-muted);
    font-weight: 800;
}

.avs-page-summary {
    flex-basis: 100%;
    color: var(--avs-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .avs-withdraw-row {
        /* Stack into 2 rows on tablet: identity row + amount/time row */
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "phone  amount"
            "game   time"
            "bank   .";
        gap: 4px 12px;
        padding: 12px 16px;
    }
    .avs-w-phone  { grid-area: phone; }
    .avs-w-game   { grid-area: game;  font-size: 12px; color: var(--avs-muted); }
    .avs-w-bank   { grid-area: bank;  margin-top: 4px; }
    .avs-w-amount { grid-area: amount; font-size: 15px; }
    .avs-w-time   { grid-area: time;   font-size: 11px; }
    .avs-withdraw-pages {
        justify-content: space-between;
    }
    .avs-page-numbers {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .avs-showcase {
        padding-left: 12px;
        padding-right: 12px;
        gap: 24px;
    }
    .avs-game-frame {
        width: 100%;
    }
    .avs-withdrawals-head {
        padding: 14px 16px;
    }
    .avs-withdraw-row {
        padding: 10px 14px;
        font-size: 12px;
    }
    .avs-w-amount { font-size: 14px; }
    .avs-w-bank   { font-size: 10px; padding: 3px 8px; }
}