/* ============================================================
 * xx3.click - base stylesheet (basefiles)
 * All custom classes / variables use the `v804-` prefix.
 * Palette: #1C2833 (bg) | #98FB98 (light) | #8A2BE2 | #EE82EE | #6A5ACD
 * Comments in English.
 * ============================================================ */

:root {
    --v804-bg: #1C2833;
    --v804-bg-2: #141d26;
    --v804-bg-3: #0e151c;
    --v804-panel: #1f2c39;
    --v804-panel-2: #26364a;
    --v804-line: #2f4153;
    --v804-text: #f3fff0;
    --v804-text-mute: #98FB98;
    --v804-text-dim: #7c9489;
    --v804-accent: #8A2BE2;
    --v804-accent-2: #EE82EE;
    --v804-accent-3: #6A5ACD;
    --v804-soft: #98FB98;
    --v804-warn: #ffd76a;
    --v804-danger: #ff6b6b;
    --v804-radius: 12px;
    --v804-radius-sm: 8px;
    --v804-radius-lg: 18px;
    --v804-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    --v804-shadow-lg: 0 12px 36px rgba(0, 0, 0, .45);
    --v804-header-h: 56px;
    --v804-bottom-h: 64px;
    --v804-maxw: 480px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(1100px 360px at 50% -120px, rgba(138, 43, 226, .22), transparent 70%),
        radial-gradient(900px 320px at 100% 12%, rgba(238, 130, 238, .14), transparent 72%),
        linear-gradient(180deg, #1C2833 0%, #141d26 60%, #0e151c 100%);
    color: var(--v804-text);
    font-family: "Hind Siliguri", "Noto Sans Bengali", "Shonar Bangla", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.62;
    min-height: 100vh;
    word-break: break-word;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a {
    color: var(--v804-soft);
    text-decoration: none;
    transition: color .18s ease;
}

a:hover { color: var(--v804-accent-2); text-decoration: underline; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    line-height: 1.32;
    font-weight: 700;
    color: #ffffff;
}

p { margin: 0 0 .85em; }

ul, ol { margin: 0 0 .9em; padding-left: 1.2em; }

li { margin-bottom: .35em; }

/* page shell - mobile-first, capped on wide screens */
.v804-shell {
    max-width: var(--v804-maxw);
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(31, 44, 57, .35), rgba(20, 29, 38, .9));
    box-shadow: var(--v804-shadow-lg);
    min-height: 100vh;
    position: relative;
}

/* ============================================================
 * Header
 * ============================================================ */
.v804-header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--v804-header-h);
    background: linear-gradient(90deg, rgba(20, 29, 38, .96), rgba(31, 44, 57, .96));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--v804-line);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
}

.v804-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.v804-brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: radial-gradient(circle at 30% 30%, #ee82ee55, transparent 65%), #1f2c39;
    border: 1px solid var(--v804-line);
    object-fit: cover;
    flex-shrink: 0;
}

.v804-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.v804-brand-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .4px;
    color: #fff;
    white-space: nowrap;
}

.v804-brand-name b { color: var(--v804-accent-2); }

.v804-brand-tag {
    font-size: 10.5px;
    color: var(--v804-text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v804-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.v804-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    padding: 9px 14px;
    cursor: pointer;
    line-height: 1;
    color: #fff;
    transition: transform .14s ease, box-shadow .14s ease, background .2s ease;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.v804-btn--login {
    background: linear-gradient(90deg, #2b3c4f, #3a5168);
    border: 1px solid var(--v804-line);
    color: #eafff0;
}

.v804-btn--register {
    background: linear-gradient(90deg, var(--v804-accent), var(--v804-accent-2));
    color: #fff;
    box-shadow: 0 4px 14px rgba(138, 43, 226, .35);
}

.v804-btn:hover { transform: translateY(-1px); }
.v804-btn:active { transform: translateY(0) scale(.98); }

.v804-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--v804-line);
    color: var(--v804-text-mute);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.v804-icon-btn:hover { color: #fff; background: rgba(138, 43, 226, .22); }

.v804-icon-btn svg { width: 20px; height: 20px; }

/* ============================================================
 * Side rail (expandable nav)
 * ============================================================ */
.v804-rail {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(82vw, 340px);
    background: linear-gradient(180deg, #141d26, #0e151c);
    border-left: 1px solid var(--v804-line);
    box-shadow: -18px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(105%);
    transition: transform .28s cubic-bezier(.2, .8, .25, 1);
    z-index: 120;
    overflow-y: auto;
    padding: 14px 14px calc(var(--v804-bottom-h) + 24px);
}

.v804-rail--open { transform: translateX(0); }

.v804-mask {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 18, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 110;
}

.v804-mask--show { opacity: 1; pointer-events: auto; }

.v804-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.v804-rail-head h3 {
    margin: 0;
    font-size: 14px;
    color: var(--v804-text-mute);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.v804-rail-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--v804-line);
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

.v804-rail-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #eafff0;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 4px;
    border: 1px solid transparent;
}

.v804-rail-link:hover {
    background: rgba(138, 43, 226, .18);
    border-color: var(--v804-line);
    color: #fff;
    text-decoration: none;
}

.v804-rail-link .v804-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--v804-accent-2);
    flex-shrink: 0;
    box-shadow: 0 0 8px var(--v804-accent-2);
}

.v804-rail-section {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed var(--v804-line);
}

.v804-rail-section-title {
    font-size: 12px;
    color: var(--v804-text-dim);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
    padding-left: 4px;
}

.v804-rail-cta {
    display: block;
    text-align: center;
    margin-top: 18px;
    padding: 12px;
    border-radius: 12px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--v804-accent), var(--v804-accent-2));
    color: #fff;
}

.v804-rail-cta:hover { opacity: .92; color: #fff; text-decoration: none; }

/* ============================================================
 * Hero / banner carousel
 * ============================================================ */
.v804-banner {
    position: relative;
    margin: 12px;
    border-radius: var(--v804-radius-lg);
    overflow: hidden;
    background: #0e151c;
    box-shadow: var(--v804-shadow);
    aspect-ratio: 16 / 9;
}

.v804-banner-track { position: absolute; inset: 0; }

.v804-banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}

.v804-banner-slide--active { opacity: 1; pointer-events: auto; }

.v804-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.v804-banner-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 10px 14px 12px;
    background: linear-gradient(180deg, transparent, rgba(8, 12, 18, .85));
    color: #fff;
}

.v804-banner-overlay span {
    font-size: 10.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--v804-accent-2);
    font-weight: 700;
}

.v804-banner-overlay strong {
    display: block;
    font-size: 14.5px;
    margin-top: 2px;
    color: #fff;
}

.v804-banner-dots {
    position: absolute;
    bottom: 8px;
    right: 12px;
    display: flex;
    gap: 5px;
    z-index: 4;
}

.v804-banner-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width .25s ease, background .25s ease;
}

.v804-banner-dot--active {
    width: 18px;
    border-radius: 6px;
    background: var(--v804-accent-2);
}

.v804-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(8, 12, 18, .55);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    padding: 0;
}

.v804-banner-arrow svg { width: 16px; height: 16px; }
.v804-banner-arrow--prev { left: 8px; }
.v804-banner-arrow--next { right: 8px; }

/* ============================================================
 * Section primitives
 * ============================================================ */
.v804-section { padding: 18px 12px; }

.v804-section--alt {
    background: linear-gradient(180deg, rgba(31, 44, 57, .5), rgba(20, 29, 38, .2));
}

.v804-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.v804-section-title {
    font-size: 17px;
    margin: 0;
    color: #fff;
}

.v804-section-title em {
    color: var(--v804-accent-2);
    font-style: normal;
}

.v804-section-more {
    font-size: 12px;
    color: var(--v804-text-mute);
}

.v804-chip-row {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scrollbar-width: none;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
}

.v804-chip-row::-webkit-scrollbar { display: none; }

.v804-chip {
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--v804-line);
    color: #eafff0;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, transform .14s ease;
}

.v804-chip:hover { background: rgba(138, 43, 226, .25); color: #fff; }

/* ============================================================
 * Game grid - compact, 4 columns at 320px+
 * ============================================================ */
.v804-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (min-width: 360px) {
    .v804-grid { gap: 9px; }
}

@media (min-width: 400px) {
    .v804-grid--cols5 { grid-template-columns: repeat(5, 1fr); }
}

.v804-card {
    background: linear-gradient(180deg, var(--v804-panel), var(--v804-bg-2));
    border: 1px solid var(--v804-line);
    border-radius: var(--v804-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    display: block;
    color: #eafff0;
}

.v804-card:hover {
    transform: translateY(-2px);
    border-color: var(--v804-accent);
    box-shadow: 0 8px 18px rgba(138, 43, 226, .3);
    color: #fff;
    text-decoration: none;
}

.v804-card:active { transform: translateY(0) scale(.98); }

.v804-card-img {
    aspect-ratio: 1 / 1;
    background: #0e151c center/cover no-repeat;
    position: relative;
}

.v804-card-img img {
    width: 100%; height: 100%; object-fit: cover;
}

.v804-card-tag {
    position: absolute;
    top: 4px; left: 4px;
    background: rgba(138, 43, 226, .85);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: .4px;
}

.v804-card-tag--hot { background: linear-gradient(90deg, #ff5f6d, #ffc371); }

.v804-card-name {
    font-size: 10.5px;
    text-align: center;
    padding: 5px 4px 6px;
    line-height: 1.25;
    color: #dfeede;
    min-height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.v804-card:hover .v804-card-name { color: #fff; }

/* ============================================================
 * Info / highlight blocks
 * ============================================================ */
.v804-panel {
    background: linear-gradient(180deg, var(--v804-panel), rgba(20, 29, 38, .6));
    border: 1px solid var(--v804-line);
    border-radius: var(--v804-radius);
    padding: 14px;
    box-shadow: var(--v804-shadow);
    margin-bottom: 12px;
}

.v804-panel--accent {
    border-left: 4px solid var(--v804-accent-2);
}

.v804-panel h2 { font-size: 16px; }
.v804-panel h3 { font-size: 14.5px; color: #fff; }

.v804-prose { color: #d6e8d2; font-size: 14px; }
.v804-prose p { color: #cfe3cb; }
.v804-prose strong { color: var(--v804-accent-2); }

.v804-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.v804-mini {
    background: rgba(31, 44, 57, .55);
    border: 1px solid var(--v804-line);
    border-radius: var(--v804-radius-sm);
    padding: 10px 11px;
}

.v804-mini-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--v804-soft);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.v804-mini-title .v804-bullet {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--v804-accent-2);
    box-shadow: 0 0 8px var(--v804-accent-2);
}

.v804-mini p {
    margin: 0;
    font-size: 12.2px;
    color: #b9cdb5;
    line-height: 1.5;
}

/* checklist for practical checks */
.v804-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.v804-checklist li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--v804-line);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 12.8px;
    color: #cfe3cb;
}

.v804-checklist li::before {
    content: "✓";
    color: var(--v804-soft);
    font-weight: 800;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(152, 251, 152, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* big CTA */
.v804-cta {
    display: block;
    text-align: center;
    background: linear-gradient(90deg, var(--v804-accent), var(--v804-accent-2));
    color: #fff;
    padding: 14px 16px;
    border-radius: var(--v804-radius);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(138, 43, 226, .35);
    margin: 8px 0 4px;
}

.v804-cta:hover { color: #fff; text-decoration: none; opacity: .94; transform: translateY(-1px); }

.v804-cta--ghost {
    background: transparent;
    border: 1px solid var(--v804-line);
    color: var(--v804-soft);
    box-shadow: none;
}

.v804-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 10px;
}

/* feature highlight horizontal scroller */
.v804-feat-row {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
}

.v804-feat-row::-webkit-scrollbar { display: none; }

.v804-feat {
    flex: 0 0 160px;
    background: linear-gradient(160deg, rgba(106, 90, 205, .22), rgba(31, 44, 57, .9));
    border: 1px solid var(--v804-line);
    border-radius: var(--v804-radius);
    padding: 12px;
}

.v804-feat-ico {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--v804-accent), var(--v804-accent-3));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 8px;
}

.v804-feat-ico svg { width: 18px; height: 18px; }

.v804-feat h4 {
    font-size: 13px;
    margin: 0 0 4px;
    color: #fff;
}

.v804-feat p {
    font-size: 11.8px;
    color: #b9cdb5;
    margin: 0;
    line-height: 1.45;
}

/* tips list */
.v804-tips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.v804-tips li {
    background: rgba(20, 29, 38, .65);
    border: 1px solid var(--v804-line);
    border-left: 3px solid var(--v804-accent-2);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: #d4e6d0;
}

.v804-tips li strong { color: var(--v804-soft); }

/* inline link list inside body */
.v804-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.v804-inline-links li a {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(138, 43, 226, .18);
    border: 1px solid var(--v804-line);
    color: #eafff0;
    font-size: 11.8px;
    font-weight: 600;
}

.v804-inline-links li a:hover { background: rgba(238, 130, 238, .25); color: #fff; text-decoration: none; }

/* ============================================================
 * Extended footer (two-column directory)
 * ============================================================ */
.v804-ext-footer {
    padding: 18px 12px 8px;
    background: linear-gradient(180deg, rgba(20, 29, 38, .2), rgba(8, 12, 18, .85));
    border-top: 1px solid var(--v804-line);
}

.v804-ext-footer h3 {
    font-size: 13.5px;
    color: var(--v804-soft);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 10px;
}

.v804-directory {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 14px;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.v804-directory li a {
    display: block;
    padding: 7px 9px;
    font-size: 12.5px;
    color: #d6e8d2;
    border-radius: 7px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--v804-line);
}

.v804-directory li a:hover {
    color: #fff;
    background: rgba(138, 43, 226, .22);
    text-decoration: none;
}

.v804-brand-block {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: var(--v804-radius);
    background: rgba(31, 44, 57, .55);
    border: 1px solid var(--v804-line);
}

.v804-brand-block p {
    margin: 0;
    font-size: 12.6px;
    color: #b9cdb5;
    line-height: 1.55;
}

.v804-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.v804-promo-grid button {
    background: linear-gradient(135deg, rgba(138, 43, 226, .25), rgba(31, 44, 57, .8));
    border: 1px solid var(--v804-line);
    color: #fff;
    padding: 10px 8px;
    border-radius: 9px;
    font-size: 12.3px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: transform .14s ease, background .18s ease;
}

.v804-promo-grid button:hover {
    background: linear-gradient(135deg, rgba(238, 130, 238, .35), rgba(31, 44, 57, .8));
    transform: translateY(-1px);
}

.v804-promo-grid button small {
    display: block;
    color: var(--v804-soft);
    font-weight: 500;
    font-size: 10.5px;
    margin-top: 2px;
}

.v804-disclaimer {
    font-size: 11.6px;
    color: #8aa590;
    line-height: 1.55;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(8, 12, 18, .55);
    border: 1px dashed var(--v804-line);
}

.v804-disclaimer strong { color: var(--v804-warn); }

/* ============================================================
 * Bottom navigation - layered bar, raised active, press feedback
 * ============================================================ */
.v804-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: linear-gradient(180deg, rgba(20, 29, 38, .98), rgba(8, 12, 18, .99));
    border-top: 1px solid var(--v804-line);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    max-width: var(--v804-maxw);
    margin: 0 auto;
}

.v804-nav-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--v804-text-dim);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    transition: color .18s ease, transform .14s ease;
    -webkit-tap-highlight-color: transparent;
}

.v804-nav-btn svg {
    width: 22px; height: 22px;
    transition: transform .18s ease;
}

.v804-nav-btn:hover { color: var(--v804-soft); }

.v804-nav-btn--pressed { transform: scale(.92); }

.v804-nav-btn--promo { color: var(--v804-accent-2); }

.v804-nav-btn--promo svg {
    filter: drop-shadow(0 0 6px rgba(238, 130, 238, .55));
}

.v804-nav-btn--active {
    color: #fff;
}

.v804-nav-btn--active svg {
    transform: translateY(-3px);
}

.v804-nav-btn--active::before {
    content: "";
    position: absolute;
    top: -2px;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--v804-accent), var(--v804-accent-2));
    box-shadow: 0 0 8px var(--v804-accent-2);
}

.v804-nav-btn { position: relative; }

/* ============================================================
 * Page padding helpers
 * ============================================================ */
.v804-main {
    padding-bottom: calc(var(--v804-bottom-h) + 24px);
}

.v804-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}

.v804-reveal--seen { opacity: 1; transform: none; }

/* screen reader only */
.v804-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* disclaimer 18+ strip */
.v804-age-strip {
    margin: 0 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 215, 106, .08);
    border: 1px solid rgba(255, 215, 106, .35);
    color: var(--v804-warn);
    font-size: 11.5px;
    text-align: center;
    font-weight: 600;
}

/* breadcrumb */
.v804-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 12px 0;
    font-size: 11.5px;
    color: var(--v804-text-dim);
}

.v804-crumb a { color: var(--v804-soft); }
.v804-crumb span { color: var(--v804-text-dim); }

/* ============================================================
 * Wide-screen behavior - keep mobile canvas centered
 * ============================================================ */
@media (min-width: 481px) {
    body { background-attachment: fixed; }
    .v804-shell { border-left: 1px solid var(--v804-line); border-right: 1px solid var(--v804-line); }
}

/* ============================================================
 * Mobile breakpoint max-width 430px
 * ============================================================ */
@media (max-width: 430px) {
    body { font-size: 14px; }
    .v804-header { height: 54px; padding: 0 10px; gap: 8px; }
    .v804-brand-logo { width: 30px; height: 30px; }
    .v804-brand-name { font-size: 15px; }
    .v804-brand-tag { font-size: 9.5px; }
    .v804-btn { font-size: 12px; padding: 8px 12px; min-height: 32px; }
    .v804-icon-btn { width: 34px; height: 34px; }
    .v804-icon-btn svg { width: 18px; height: 18px; }
    .v804-banner { margin: 10px; }
    .v804-banner-overlay { padding: 8px 12px 10px; }
    .v804-banner-overlay strong { font-size: 13px; }
    .v804-banner-overlay span { font-size: 9.5px; }
    .v804-banner-arrow { width: 28px; height: 28px; }
    .v804-banner-arrow svg { width: 14px; height: 14px; }
    .v804-section { padding: 16px 10px; }
    .v804-section-title { font-size: 15px; }
    .v804-section-more { font-size: 11px; }
    .v804-chip { padding: 6px 11px; font-size: 11.5px; }
    .v804-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .v804-grid--cols5 { grid-template-columns: repeat(4, 1fr); }
    .v804-card-name { font-size: 9.5px; padding: 4px 3px 5px; min-height: 26px; }
    .v804-card-tag { font-size: 8px; padding: 2px 4px; }
    .v804-panel { padding: 12px; margin-bottom: 10px; }
    .v804-panel h2 { font-size: 15px; }
    .v804-panel h3 { font-size: 13px; }
    .v804-prose { font-size: 13px; }
    .v804-grid-2 { gap: 8px; }
    .v804-mini { padding: 9px 10px; }
    .v804-mini-title { font-size: 12px; }
    .v804-mini p { font-size: 11.5px; }
    .v804-checklist li { padding: 8px 10px; font-size: 12px; }
    .v804-cta { padding: 12px 14px; font-size: 14px; }
    .v804-cta-row { gap: 8px; }
    .v804-feat { flex: 0 0 140px; padding: 11px; }
    .v804-feat h4 { font-size: 12px; }
    .v804-feat p { font-size: 11px; }
    .v804-feat-ico { width: 30px; height: 30px; }
    .v804-tips li { padding: 8px 11px; font-size: 12px; }
    .v804-inline-links li a { font-size: 11px; padding: 4px 9px; }
    .v804-ext-footer { padding: 16px 10px 6px; }
    .v804-ext-footer h3 { font-size: 12.5px; }
    .v804-directory { gap: 6px 12px; }
    .v804-directory li a { font-size: 11.5px; padding: 6px 8px; }
    .v804-promo-grid { gap: 7px; }
    .v804-promo-grid button { font-size: 11.5px; padding: 9px 7px; }
    .v804-disclaimer { font-size: 10.5px; padding: 9px 11px; }
    .v804-age-strip { margin: 0 10px; font-size: 10.5px; padding: 7px 10px; }
    .v804-crumb { padding: 8px 10px 0; font-size: 10.5px; }
    .v804-bottom { padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); }
    .v804-nav-btn { font-size: 9px; min-height: 48px; padding: 4px 2px; }
    .v804-nav-btn svg { width: 20px; height: 20px; }
}