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

/*
 * AQUA ROYALE shell stylesheet.
 * Identity: teal/cyan gradient (#7BBBBB -> #478787) + warm gold (#FFC141)
 * on a deep teal-charcoal ground, Roboto throughout. Modelled on the
 * reference "digital game graphic" portal look: dark-teal header, running
 * marquee, quick category rail, big banner slider, jackpot ticker, dense
 * game/provider grids, payment strip. Loaded only when the shell is active
 * (body.aqua-royale-shell). All selectors use the `ar-` prefix so nothing
 * leaks into other templates.
 */

.aqua-royale-shell {
    --ar-teal:        #478787;
    --ar-teal-2:      #7bbbbb;
    --ar-teal-soft:   #a4f8f8;
    --ar-teal-deep:   #2d8484;
    --ar-header:      #0d2929;
    --ar-ground:      #0e1d1e;
    --ar-ground-2:    #12262a;
    --ar-panel:       #142a2c;
    --ar-panel-2:     #183234;
    --ar-line:        rgba(123, 187, 187, 0.26);
    --ar-line-soft:   rgba(164, 248, 248, 0.16);
    --ar-gold:        #ffc141;
    --ar-gold-2:      #ffd97a;
    --ar-gold-deep:   #d99a1f;
    --ar-text:        #eaf5f4;
    --ar-muted:       #8fb0af;
    --ar-green:       #22e08a;
    --ar-red:         #ff5b6b;
    --ar-radius:      12px;
    --ar-shell-w:     1240px;
    --ar-grad-teal:   linear-gradient(180deg, #7bbbbb 0%, #478787 100%);
    --ar-grad-teal-x: linear-gradient(120deg, #2d8484 0%, #7bbbbb 50%, #478787 100%);
    --ar-grad-gold:   linear-gradient(120deg, #d99a1f 0%, #ffd97a 45%, #ffc141 55%, #d99a1f 100%);
    --ar-glow-teal:   0 0 20px rgba(123, 187, 187, 0.42);
    --ar-glow-gold:   0 0 18px rgba(255, 193, 65, 0.38);
}

body.aqua-royale-shell {
    background:
        radial-gradient(1200px 480px at 50% -160px, rgba(123, 187, 187, 0.16), transparent 70%),
        radial-gradient(900px 420px at 50% -60px, rgba(255, 193, 65, 0.08), transparent 70%),
        linear-gradient(180deg, #0f2223 0%, var(--ar-ground) 260px) !important;
    color: var(--ar-text);
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    letter-spacing: .1px;
    padding-bottom: 0;
}

.aqua-royale-shell main { background: transparent; }
.aqua-royale-shell a { text-decoration: none; }
.aqua-royale-shell img { max-width: 100%; }
.aqua-royale-shell h1, .aqua-royale-shell h2, .aqua-royale-shell h3 {
    font-family: 'Roboto', sans-serif; font-weight: 700;
}

/* ---------- Layout primitives ---------- */
.ar-shell { width: min(var(--ar-shell-w), calc(100% - 24px)); margin-inline: auto; }
.ar-desktop-only { display: flex; }
.ar-mobile-only { display: none; }
.ar-empty {
    padding: 26px 14px; text-align: center; color: var(--ar-muted); font-size: 14px;
    border: 1px dashed var(--ar-line); border-radius: var(--ar-radius); grid-column: 1 / -1;
}

/* ---------- Buttons ---------- */
.ar-btn {
    font-weight: 700; letter-spacing: .6px; text-transform: uppercase; font-size: 13px;
    padding: 9px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ar-grad-teal); color: #04201f; box-shadow: var(--ar-glow-teal);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; white-space: nowrap;
}
.ar-btn:hover { transform: translateY(-1px); filter: brightness(1.08); color: #04201f; }
.ar-btn--gold {
    background: var(--ar-grad-gold); color: #2a1c00; box-shadow: var(--ar-glow-gold);
    background-size: 200% 100%; animation: arGoldShift 6s linear infinite;
}
@keyframes arGoldShift { to { background-position: 200% 0; } }
.ar-btn--ghost { background: transparent; border-color: var(--ar-line); color: var(--ar-teal-soft); box-shadow: none; }
.ar-btn--ghost:hover { background: rgba(123, 187, 187, 0.12); color: var(--ar-teal-soft); }

.ar-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--ar-line);
    background: var(--ar-panel); color: var(--ar-teal-soft); font-size: 20px; cursor: pointer;
}

/* ---------- Section heads ---------- */
.ar-section-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 12px; }
.ar-section-head h2 {
    font-size: 19px; text-transform: uppercase; letter-spacing: 1px; margin: 0; color: #fff;
    display: inline-flex; align-items: center; gap: 9px;
}
.ar-section-head h2 i { color: var(--ar-gold); }
.ar-section-head > a {
    font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ar-teal-soft);
    border: 1px solid var(--ar-line); padding: 5px 12px; border-radius: 20px;
}
.ar-section-head > a:hover { background: rgba(123, 187, 187, 0.12); }

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
.ar-header {
    position: sticky; top: 0; z-index: 1040;
    background: linear-gradient(180deg, #0f3132 0%, var(--ar-header) 100%);
    border-bottom: 2px solid var(--ar-gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 1px 0 rgba(123, 187, 187, .3);
}
.ar-header__top { border-bottom: 1px solid rgba(123, 187, 187, .16); }
.ar-header__top-inner, .ar-header__main-inner { display: flex; align-items: center; gap: 14px; }
.ar-header__top-inner { min-height: 64px; justify-content: space-between; }
.ar-brand img { height: 46px; width: auto; filter: drop-shadow(0 2px 8px rgba(123,187,187,.4)); }
.ar-header__contact { gap: 16px; }
.ar-header__contact a { color: var(--ar-text); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; letter-spacing: .3px; }
.ar-header__contact a i { color: var(--ar-teal-2); font-size: 17px; }
.ar-header__contact a:hover { color: var(--ar-teal-soft); }

.ar-member {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, rgba(123,187,187,.12), rgba(255,193,65,.06));
    border: 1px solid var(--ar-line); border-radius: 30px; padding: 5px 6px 5px 14px;
}
.ar-member__name { color: var(--ar-text); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.ar-member__name i { color: var(--ar-gold); }
.ar-member__bal { color: var(--ar-gold-2); font-weight: 700; letter-spacing: .4px; }
.ar-member__depo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; background: var(--ar-grad-teal); color: #04201f;
}
.ar-login-trigger {
    background: var(--ar-grad-gold); color: #2a1c00; border: 0; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; padding: 8px 16px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
}

.ar-header__main { background: linear-gradient(180deg, #123638 0%, #0c2122 100%); }
.ar-header__main-inner { min-height: 52px; justify-content: space-between; }
.ar-nav { gap: 2px; flex-wrap: wrap; }
.ar-nav a {
    text-transform: uppercase; letter-spacing: .6px; font-weight: 500; font-size: 13.5px;
    color: var(--ar-text); padding: 9px 13px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 7px; position: relative;
    transition: color .15s ease, background .15s ease;
}
.ar-nav a i { color: var(--ar-gold); font-size: 17px; }
.ar-nav a:hover { background: rgba(123, 187, 187, .12); color: var(--ar-teal-soft); }
.ar-nav a.active {
    background: linear-gradient(180deg, rgba(123,187,187,.22), rgba(123,187,187,.05));
    color: #fff; box-shadow: inset 0 -2px 0 var(--ar-gold);
}
.ar-nav a.active i { color: var(--ar-teal-soft); }

.ar-authbar { gap: 10px; }
.ar-authbar__link { color: var(--ar-text); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.ar-authbar__link i { color: var(--ar-teal-2); }
.ar-authbar__link:hover { color: var(--ar-teal-soft); }

.ar-login-form { display: flex; align-items: center; gap: 6px; }
.ar-login-form label {
    display: flex; align-items: center; gap: 5px; background: var(--ar-ground);
    border: 1px solid var(--ar-line); border-radius: 7px; padding: 0 8px; margin: 0;
}
.ar-login-form label i { color: var(--ar-muted); font-size: 15px; }
.ar-login-form input { background: transparent; border: 0; outline: 0; color: var(--ar-text); font-size: 13px; padding: 8px 2px; width: 104px; }
.ar-login-form__captcha input { width: 60px; }
.ar-captcha-box { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 34px; background: #fff; border-radius: 6px; overflow: hidden; }
.ar-captcha-box img { height: 34px; }
.ar-captcha-refresh { background: var(--ar-panel); border: 1px solid var(--ar-line); color: var(--ar-teal-2); border-radius: 7px; width: 34px; height: 34px; cursor: pointer; }

/* Mobile promo strip inside main bar */
.ar-mobile-promo { width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.ar-mobile-promo span { font-size: 12px; color: var(--ar-muted); display: inline-flex; align-items: center; gap: 6px; }
.ar-mobile-promo span i { color: var(--ar-teal-2); }
.ar-mobile-promo button { background: var(--ar-grad-gold); color: #2a1c00; border: 0; font-weight: 700; letter-spacing: .6px; padding: 5px 14px; border-radius: 6px; }

/* Mobile login modal */
.ar-mobile-login { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; padding: 20px; }
.ar-mobile-login.open { display: flex; }
.ar-mobile-login__backdrop { position: absolute; inset: 0; background: rgba(3, 12, 12, .78); backdrop-filter: blur(3px); }
.ar-mobile-login__panel {
    position: relative; width: min(360px, 100%);
    background: linear-gradient(180deg, var(--ar-panel-2), var(--ar-ground));
    border: 1px solid var(--ar-gold); border-radius: 16px; padding: 26px 20px 20px;
    text-align: center; box-shadow: var(--ar-glow-gold);
}
.ar-mobile-login__panel img { height: 46px; margin-bottom: 14px; }
.ar-mobile-login__close { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; color: var(--ar-muted); font-size: 22px; cursor: pointer; }
.ar-mobile-login__panel form { display: flex; flex-direction: column; gap: 10px; }
.ar-mobile-login__panel input { background: var(--ar-ground); border: 1px solid var(--ar-line); color: var(--ar-text); border-radius: 8px; padding: 11px 12px; font-size: 14px; width: 100%; }
.ar-mobile-login__captcha { display: flex; gap: 8px; align-items: center; }
.ar-mobile-login__captcha input { flex: 1; }
.ar-mobile-login__reg { display: block; margin-top: 12px; color: var(--ar-muted); font-size: 13px; }
.ar-mobile-login__reg strong { color: var(--ar-gold); }

/* =========================================================
   MOBILE SIDE MENU
   ========================================================= */
.ar-side-backdrop { position: fixed; inset: 0; background: rgba(3, 12, 12, .7); z-index: 1060; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.ar-side-backdrop.open { opacity: 1; visibility: visible; }
.ar-side {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); z-index: 1070;
    background: linear-gradient(180deg, var(--ar-panel-2), #081617);
    border-right: 2px solid var(--ar-gold); transform: translateX(-102%); transition: transform .25s ease;
    overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px;
}
.ar-side.open { transform: translateX(0); }
.ar-side__head { display: flex; align-items: center; justify-content: space-between; }
.ar-side__head img { height: 40px; }
.ar-side__head button { background: var(--ar-panel); border: 1px solid var(--ar-line); color: var(--ar-muted); width: 36px; height: 36px; border-radius: 8px; font-size: 20px; }
.ar-side__member { background: linear-gradient(180deg, rgba(123,187,187,.12), rgba(255,193,65,.05)); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); padding: 12px; }
.ar-side__member-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ar-side__member-top span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.ar-side__member-top strong { color: var(--ar-gold-2); font-weight: 700; }
.ar-side__member-act { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ar-side__member-act a { font-size: 11px; text-align: center; color: var(--ar-text); background: var(--ar-ground); border: 1px solid var(--ar-line); border-radius: 8px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ar-side__member-act a i { color: var(--ar-teal-2); font-size: 16px; }
.ar-side__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ar-side__auth .ar-btn { justify-content: center; }
.ar-side__app { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--ar-panel); border: 1px dashed var(--ar-line); border-radius: 10px; padding: 10px 12px; }
.ar-side__app span { font-size: 12px; color: var(--ar-muted); display: inline-flex; align-items: center; gap: 6px; }
.ar-side__app span i { color: var(--ar-teal-2); }
.ar-side__app button { background: var(--ar-grad-gold); color: #2a1c00; border: 0; border-radius: 6px; padding: 6px 12px; font-weight: 700; letter-spacing: .4px; }
.ar-side__links { display: flex; flex-direction: column; }
.ar-side__links > a, .ar-side__details > summary {
    display: flex; align-items: center; gap: 10px; padding: 12px 8px; color: var(--ar-text); font-size: 14px;
    border-bottom: 1px solid rgba(123, 187, 187, .12); cursor: pointer; list-style: none;
}
.ar-side__links > a i, .ar-side__details > summary > i:first-child { color: var(--ar-gold); font-size: 18px; }
.ar-side__links > a:hover { color: var(--ar-teal-soft); }
.ar-side__details > summary::-webkit-details-marker { display: none; }
.ar-side__chev { margin-left: auto; color: var(--ar-muted); transition: transform .2s ease; }
.ar-side__details[open] .ar-side__chev { transform: rotate(180deg); }
.ar-side__details a { display: block; padding: 9px 8px 9px 38px; font-size: 13px; color: var(--ar-muted); }
.ar-side__details a:hover { color: var(--ar-teal-soft); }
.ar-side__social { display: flex; gap: 10px; justify-content: center; padding: 8px 0 20px; }
.ar-side__social a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ar-panel); border: 1px solid var(--ar-line); color: var(--ar-teal-2); font-size: 19px; }
.ar-side__social a:hover { color: var(--ar-teal-soft); box-shadow: var(--ar-glow-teal); }

/* =========================================================
   HOME
   ========================================================= */
.ar-home { padding-bottom: 40px; }

/* Ticker / marquee */
.ar-ticker { background: linear-gradient(90deg, #103032, #0c2426); border-bottom: 1px solid var(--ar-line); }
.ar-ticker__inner { display: flex; align-items: center; gap: 12px; min-height: 42px; overflow: hidden; }
.ar-ticker__tag { font-weight: 700; letter-spacing: .6px; color: #2a1c00; background: var(--ar-grad-gold); padding: 4px 12px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; }
.ar-ticker__track { flex: 1; overflow: hidden; white-space: nowrap; }
.ar-ticker__track span { display: inline-block; padding-left: 100%; color: var(--ar-teal-soft); font-size: 14px; animation: arMarquee 28s linear infinite; }
@keyframes arMarquee { to { transform: translateX(-100%); } }

/* Category rail */
.ar-cats { padding: 16px 0 6px; }
.ar-cats__scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.ar-cats__scroll::-webkit-scrollbar { display: none; }
.ar-cat { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ar-cat__ic {
    width: 66px; height: 66px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; color: #04201f; background: var(--ar-grad-teal);
    border: 2px solid rgba(255,255,255,.14); box-shadow: var(--ar-glow-teal);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ar-cat:hover .ar-cat__ic { transform: translateY(-4px) scale(1.03); box-shadow: var(--ar-glow-gold); }
.ar-cat__label { font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--ar-text); }

/* Hero */
.ar-hero { padding: 14px 0; }
.ar-hero__grid { display: grid; grid-template-columns: 1fr 264px; gap: 16px; }
.ar-slider { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--ar-line); box-shadow: var(--ar-glow-teal); background: var(--ar-panel); aspect-ratio: 1920 / 780; }
.ar-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.ar-slide.active { opacity: 1; pointer-events: auto; }
.ar-slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ar-slide--fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; gap: 12px; background: linear-gradient(135deg, #06201f, #0a2224 50%, #123638); }
.ar-slide--fallback img { width: auto; height: 70px; aspect-ratio: auto; }
.ar-slide--fallback strong { color: var(--ar-gold-2); font-size: 20px; font-weight: 900; text-transform: uppercase; }
.ar-slider__dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.ar-slider__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.ar-slider__dots button.active { background: var(--ar-teal-2); box-shadow: var(--ar-glow-teal); width: 22px; border-radius: 5px; }

.ar-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-mini__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(180deg, var(--ar-panel-2), var(--ar-panel)); border: 1px solid var(--ar-line);
    border-radius: 12px; padding: 12px 6px; color: var(--ar-text); font-size: 12px; text-align: center;
    transition: transform .15s ease, border-color .15s ease;
}
.ar-mini__item i { font-size: 24px; color: var(--ar-teal-2); }
.ar-mini__item span { font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.ar-mini__item:hover { transform: translateY(-3px); border-color: var(--ar-line-soft); color: var(--ar-teal-soft); }

/* Jackpot ticker */
.ar-jackpot { padding: 8px 0 16px; }
.ar-jackpot__inner {
    display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
    background: radial-gradient(600px 120px at 50% 0, rgba(123,187,187,.18), transparent 70%), linear-gradient(180deg, #16110a 0%, #0d2122 100%);
    border: 1px solid var(--ar-gold); border-radius: 16px; padding: 16px 22px; position: relative; overflow: hidden;
}
.ar-jackpot__inner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,193,65,.05) 22px 23px); pointer-events: none; }
.ar-jackpot__label { display: flex; align-items: center; gap: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--ar-muted); font-size: 14px; }
.ar-jackpot__label i { color: var(--ar-teal-2); font-size: 22px; }
.ar-jackpot__value {
    font-weight: 900; font-size: clamp(24px, 5vw, 40px); letter-spacing: 1px;
    background: var(--ar-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 26px rgba(255, 193, 65, .35);
}
.ar-jackpot__cta { z-index: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 14px; padding: 10px 20px; border-radius: 8px; background: var(--ar-grad-teal); color: #04201f; box-shadow: var(--ar-glow-teal); }
.ar-jackpot__cta:hover { filter: brightness(1.1); color: #04201f; }

/* Spotlight (two-column) */
.ar-spotlight { padding: 8px 0; }
.ar-spotlight__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ar-panel { background: linear-gradient(180deg, var(--ar-panel-2) 0%, var(--ar-ground) 100%); border: 1px solid var(--ar-line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; }
.ar-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,193,65,.16); }
.ar-panel__head h2 { font-size: 17px; text-transform: uppercase; letter-spacing: .8px; margin: 0; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.ar-panel__head h2 i { color: var(--ar-gold); }
.ar-panel__head a { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ar-teal-soft); }
.ar-panel__cta { margin-top: 12px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 14px; padding: 11px; border-radius: 10px; color: #2a1c00; background: var(--ar-grad-gold); display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--ar-glow-gold); }
.ar-panel__cta:hover { filter: brightness(1.06); color: #2a1c00; }

/* Pasaran market cards */
.ar-pasaran__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-market { background: linear-gradient(180deg, var(--ar-panel), #0d2021); border: 1px solid var(--ar-line); border-top: 2px solid var(--ar-gold); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 9px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.ar-market:hover { transform: translateY(-3px); box-shadow: var(--ar-glow-teal); border-color: var(--ar-line-soft); }
.ar-market__top { display: flex; align-items: center; gap: 7px; }
.ar-market__code { font-weight: 700; font-size: 12px; letter-spacing: .5px; color: #04201f; background: var(--ar-grad-teal); padding: 2px 8px; border-radius: 5px; }
.ar-market__name { font-size: 12px; color: var(--ar-text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ar-market__live { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; letter-spacing: 1px; color: var(--ar-green); }
.ar-market__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ar-green); box-shadow: 0 0 8px var(--ar-green); animation: arPulse 1.4s ease-in-out infinite; }
@keyframes arPulse { 50% { opacity: .35; } }
.ar-market__digits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ar-market__digits span { font-weight: 900; font-size: 22px; text-align: center; color: var(--ar-gold-2); background: #08201f; border: 1px solid rgba(123,187,187,.22); border-radius: 7px; padding: 6px 0; text-shadow: 0 0 12px rgba(255,193,65,.4); }
.ar-market__foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--ar-muted); }
.ar-market__foot i { color: var(--ar-teal-2); }
.ar-market__more { color: var(--ar-gold); font-weight: 700; letter-spacing: .3px; }

/* Popular / hot games */
.ar-hotgames__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ar-game { position: relative; background: var(--ar-panel); border: 1px solid var(--ar-line); border-radius: 12px; padding: 8px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 4px; transition: transform .16s ease, box-shadow .16s ease; }
.ar-game:hover { transform: translateY(-3px); box-shadow: var(--ar-glow-gold); border-color: var(--ar-gold); }
.ar-game__badge { position: absolute; top: 6px; left: 6px; z-index: 2; font-weight: 700; font-size: 9px; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; color: #2a1c00; background: var(--ar-grad-gold); }
.ar-game__thumb { position: relative; border-radius: 9px; overflow: hidden; aspect-ratio: 1; }
.ar-game__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ar-game__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,20,20,.55); color: var(--ar-teal-soft); font-size: 30px; opacity: 0; transition: opacity .16s ease; }
.ar-game:hover .ar-game__play { opacity: 1; }
.ar-game__name { font-weight: 500; font-size: 12px; color: var(--ar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-game small { font-size: 10px; color: var(--ar-muted); }

/* Providers */
.ar-providers { padding: 4px 0; }
.ar-provider-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ar-provider { background: linear-gradient(180deg, var(--ar-panel), var(--ar-panel-2)); border: 1px solid var(--ar-line); border-radius: 12px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.ar-provider:hover { transform: translateY(-3px); box-shadow: var(--ar-glow-teal); border-color: var(--ar-line-soft); }
.ar-provider__logo { height: 40px; display: flex; align-items: center; justify-content: center; }
.ar-provider__logo img { max-height: 40px; object-fit: contain; }
.ar-provider__logo strong { font-weight: 700; font-size: 14px; color: var(--ar-gold-2); text-transform: uppercase; }
.ar-provider em { font-style: normal; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--ar-muted); }

/* New games */
.ar-newgames { padding: 4px 0; }
.ar-newgames__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.ar-newgames__row::-webkit-scrollbar { display: none; }
.ar-newgame { flex: 0 0 auto; width: 118px; background: var(--ar-panel); border: 1px solid var(--ar-line); border-radius: 11px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: center; transition: transform .16s ease, box-shadow .16s ease; }
.ar-newgame:hover { transform: translateY(-3px); box-shadow: var(--ar-glow-gold); }
.ar-newgame img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.ar-newgame span { font-weight: 500; font-size: 11px; color: var(--ar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Payment methods */
.ar-payments { padding: 6px 0; }
.ar-payments__strip {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
    background: linear-gradient(180deg, var(--ar-panel-2), var(--ar-ground));
    border: 1px solid var(--ar-line); border-radius: 16px; padding: 18px 16px;
}
.ar-payments__strip span { background: #fff; border-radius: 8px; padding: 6px 10px; height: 40px; display: inline-flex; align-items: center; }
.ar-payments__strip img { max-height: 26px; object-fit: contain; }
.ar-payments__note { text-align: center; color: var(--ar-muted); font-size: 12px; margin-top: 10px; }

/* Content / markdown */
.ar-content { padding: 20px 0 0; }
.ar-markdown { background: linear-gradient(180deg, var(--ar-panel-2), var(--ar-ground)); border: 1px solid var(--ar-line); border-radius: 16px; padding: 22px; color: var(--ar-muted); font-size: 14px; line-height: 1.7; }
.ar-markdown h1, .ar-markdown h2, .ar-markdown h3 { color: var(--ar-gold-2); text-transform: uppercase; letter-spacing: .6px; }
.ar-markdown a { color: var(--ar-teal-soft); }
.ar-markdown strong { color: var(--ar-text); }
.ar-markdown img { border-radius: 10px; }

/* =========================================================
   FOOTER
   ========================================================= */
.ar-footer { background: linear-gradient(180deg, #0c2324 0%, #081617 100%); border-top: 2px solid var(--ar-gold); margin-top: 30px; padding: 30px 0 24px; }
.ar-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
.ar-footer__brand img { height: 46px; margin-bottom: 12px; }
.ar-footer__brand p { color: var(--ar-muted); font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.ar-footer__social { display: flex; gap: 8px; }
.ar-footer__social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ar-panel); border: 1px solid var(--ar-line); color: var(--ar-teal-2); font-size: 18px; }
.ar-footer__social a:hover { color: var(--ar-teal-soft); box-shadow: var(--ar-glow-teal); }
.ar-footer__group h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .8px; color: var(--ar-gold); margin-bottom: 12px; }
.ar-footer__group a { display: block; color: var(--ar-muted); font-size: 13px; padding: 5px 0; }
.ar-footer__group a:hover { color: var(--ar-teal-soft); }
.ar-footer__vip { font-weight: 700 !important; letter-spacing: .4px; color: var(--ar-gold-2) !important; border: 1px solid var(--ar-line); border-radius: 8px; padding: 8px 10px !important; margin-bottom: 8px; text-align: center; }
.ar-footer__vip:hover { background: rgba(255,193,65,.1); }
.ar-footer__payments { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 22px 0; margin-top: 20px; border-top: 1px solid rgba(255,193,65,.14); border-bottom: 1px solid rgba(255,193,65,.14); }
.ar-footer__payments span { background: #fff; border-radius: 6px; padding: 5px 8px; height: 34px; display: inline-flex; align-items: center; }
.ar-footer__payments img { max-height: 24px; }
.ar-footer__bottom { text-align: center; color: var(--ar-muted); font-size: 12px; padding-top: 18px; }

/* =========================================================
   BOTTOM NAV (mobile) + QUICK MENU
   ========================================================= */
.ar-bottom-nav { display: none; }
.ar-quick-toggle { position: fixed; right: 14px; bottom: 84px; z-index: 1050; width: 52px; height: 52px; border-radius: 50%; background: var(--ar-grad-gold); color: #2a1c00; border: 2px solid rgba(255,255,255,.2); font-size: 24px; box-shadow: var(--ar-glow-gold); cursor: pointer; }
.ar-quick {
    position: fixed; right: 14px; bottom: 148px; z-index: 1050; width: min(300px, calc(100vw - 28px));
    background: linear-gradient(180deg, var(--ar-panel-2), var(--ar-ground)); border: 1px solid var(--ar-gold);
    border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
    transform: translateY(14px) scale(.96); opacity: 0; visibility: hidden;
    transform-origin: bottom right; transition: all .2s ease; box-shadow: var(--ar-glow-gold);
}
.ar-quick.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.ar-quick__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid rgba(255,193,65,.16); }
.ar-quick__head strong { font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ar-gold); }
.ar-quick__head button { background: transparent; border: 0; color: var(--ar-muted); font-size: 20px; cursor: pointer; }
.ar-quick__item { display: flex; align-items: center; gap: 12px; background: var(--ar-panel); border: 1px solid var(--ar-line); border-radius: 10px; padding: 10px 12px; color: var(--ar-text); text-align: left; cursor: pointer; }
.ar-quick__item i { font-size: 22px; color: var(--ar-teal-2); flex-shrink: 0; }
.ar-quick__item span { display: flex; flex-direction: column; }
.ar-quick__item strong { font-weight: 700; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; }
.ar-quick__item small { font-size: 11px; color: var(--ar-muted); }
.ar-quick__item:hover { border-color: var(--ar-line-soft); box-shadow: var(--ar-glow-teal); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px) {
    .ar-hero__grid { grid-template-columns: 1fr; }
    .ar-mini { grid-template-columns: repeat(3, 1fr); }
    .ar-spotlight__grid { grid-template-columns: 1fr; }
    .ar-provider-row { grid-template-columns: repeat(4, 1fr); }
    .ar-footer__top { grid-template-columns: 1fr 1fr; }
    .ar-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .ar-desktop-only { display: none !important; }
    .ar-mobile-only { display: flex; }
    .ar-header__main-inner { min-height: 0; }
    .ar-hotgames__grid { grid-template-columns: repeat(3, 1fr); }
    .ar-pasaran__grid { grid-template-columns: 1fr; }
    .ar-provider-row { grid-template-columns: repeat(3, 1fr); }
    .ar-jackpot__inner { flex-direction: column; gap: 10px; text-align: center; }
    .ar-footer__top { grid-template-columns: 1fr 1fr; gap: 18px; }
    .aqua-royale-shell { padding-bottom: 66px !important; }
    .ar-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045; background: linear-gradient(180deg, #103032, #081617); border-top: 2px solid var(--ar-gold); padding: 6px 4px; justify-content: space-around; align-items: flex-end; }
    .ar-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--ar-muted); flex: 1; padding: 4px 0; }
    .ar-bottom-nav a i { font-size: 21px; }
    .ar-bottom-nav a.active { color: var(--ar-teal-soft); }
    .ar-bottom-nav a.active i { color: var(--ar-teal-2); }
    .ar-bottom-nav__main { position: relative; }
    .ar-bottom-nav__main-ic { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--ar-grad-gold); color: #2a1c00; display: flex; align-items: center; justify-content: center; border: 3px solid #0d2929; box-shadow: var(--ar-glow-gold); }
    .ar-bottom-nav__main-ic i { font-size: 22px !important; color: #2a1c00 !important; }
    .ar-bottom-nav__main span:last-child { color: var(--ar-gold-2); }
    .ar-quick-toggle { bottom: 78px; }
    .ar-quick { bottom: 140px; }
}

@media (max-width: 480px) {
    .ar-hotgames__grid { grid-template-columns: repeat(2, 1fr); }
    .ar-provider-row { grid-template-columns: repeat(2, 1fr); }
    .ar-mini { grid-template-columns: repeat(2, 1fr); }
    .ar-cat { width: 78px; }
    .ar-cat__ic { width: 58px; height: 58px; font-size: 24px; }
}