/* ================================================================
   TESLA RAN ONLINE EP9 — PLAYER EXPERIENCE V3
   Unified public UI layer. Loaded after every page-level stylesheet.
   ================================================================ */

.tr-public-body {
    --tesla-bg: #020914;
    --tesla-deep: #041321;
    --tesla-panel: rgba(7, 27, 46, .94);
    --tesla-panel-2: rgba(10, 39, 64, .92);
    --tesla-line: rgba(113, 207, 239, .23);
    --tesla-line-strong: rgba(69, 218, 255, .62);
    --tesla-blue: #168cff;
    --tesla-cyan: #39ddff;
    --tesla-white: #f4fbff;
    --tesla-silver: #b9cad6;
    --tesla-muted: #7894a8;
    --tesla-success: #60efba;
    --tesla-danger: #ff718b;
    background:
        radial-gradient(circle at 18% 12%, rgba(22, 140, 255, .16), transparent 27rem),
        linear-gradient(180deg, #020914 0%, #041321 52%, #020914 100%) !important;
    color: var(--tesla-white) !important;
}

/* ciwa add PLAYER LOGOUT */
.tr-logout-button {
    min-height:46px;
    padding:0 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid rgba(185,222,238,.28);
    border-radius:5px;
    background:rgba(4,22,37,.72);
    color:#b9cad6;
    font:700 10px "Chakra Petch",sans-serif;
    letter-spacing:1.25px;
    transition:.22s ease;
}
.tr-logout-button b { color:#39ddff;font-size:15px; }
.tr-logout-button:hover {
    border-color:#39ddff;
    background:rgba(10,71,108,.84);
    color:#fff;
    box-shadow:0 0 24px rgba(57,221,255,.18);
}
.tr-mobile-auth { display:none; }

@media(max-width:820px) {
    .tr-mobile-auth {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:10px;
        padding-top:14px;
        border-top:1px solid rgba(88,211,246,.20);
    }
    .tr-mobile-auth a {
        min-height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(57,221,255,.35);
        border-radius:5px;
        background:rgba(13,71,108,.55);
        color:#eafaff !important;
        font:700 10px "Chakra Petch",sans-serif;
        letter-spacing:1.1px;
    }
    .tr-mobile-auth a.logout {
        background:rgba(5,26,43,.82);
        color:#b9cad6 !important;
    }
}
/* ciwa end PLAYER LOGOUT */

.tr-public-main {
    padding-top: 84px;
    background:
        linear-gradient(rgba(57, 221, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 221, 255, .025) 1px, transparent 1px);
    background-size: 72px 72px;
}

.tr-public-main > .tr-hero,
.tr-public-main > .tr-live-strip {
    transform: translateY(-84px);
    margin-bottom: -84px;
}

/* Page canvases */
.tr-public-body :is(
    .rv2-page,.apv2-page,.dv2-page,.npv2-page,.tuv2-page,.cv2-page,
    .mall-page,.daily-page,.roulette-page,.rcoin-page,.webpoint-page,
    .transaction-page,.event-page,.all-news-page,.player-profile-page,
    .server-status-page,.rules-page,.terms-page,.privacy-page
) {
    color: var(--tesla-white) !important;
    background:
        radial-gradient(circle at 82% 8%, rgba(22, 140, 255, .13), transparent 27rem),
        linear-gradient(180deg, #03101d 0%, #06192a 45%, #020914 100%) !important;
}

/* Hero system: reuse available artwork but apply Tesla blue transmission */
.tr-public-body :is(
    .rv2-hero,.apv2-hero,.dv2-hero,.npv2-hero,.tuv2-hero,.cv2-hero,
    .mv2-hero,.daily-hero,.rcoin-hero,.transaction-hero
) {
    border-bottom: 1px solid var(--tesla-line-strong) !important;
    box-shadow: inset 0 -80px 100px rgba(2, 9, 20, .86), 0 20px 60px rgba(0, 0, 0, .25) !important;
}

.tr-public-body :is(
    .rv2-hero,.apv2-hero,.dv2-hero,.npv2-hero,.tuv2-hero,.cv2-hero,
    .mv2-hero,.daily-hero,.rcoin-hero,.transaction-hero
)::before {
    background:
        linear-gradient(90deg, rgba(2, 9, 20, .90), rgba(5, 31, 53, .42) 50%, rgba(2, 9, 20, .82)),
        linear-gradient(180deg, rgba(22, 140, 255, .12), transparent 60%) !important;
}

.tr-public-body :is(
    .rv2-hero-content,.apv2-hero-content,.dv2-hero-content,.npv2-hero-content,
    .tuv2-hero-content,.cv2-hero-content
) > span,
.tr-public-body :is(.event-header,.all-news-header,.roulette-header,.rcoin-header,.webpoint-header) > span {
    color: var(--tesla-cyan) !important;
    font-family: "Chakra Petch", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 3.5px !important;
}

.tr-public-body :is(
    .rv2-hero,.apv2-hero,.dv2-hero,.npv2-hero,.tuv2-hero,.cv2-hero,
    .event-header,.all-news-header,.roulette-header,.rcoin-header,.webpoint-header,
    .daily-header
) h1 {
    color: var(--tesla-white) !important;
    font-family: "Chakra Petch", sans-serif !important;
    font-size: clamp(38px, 5vw, 72px) !important;
    font-weight: 700 !important;
    line-height: .95 !important;
    letter-spacing: -2px !important;
    text-shadow: 0 0 32px rgba(57, 221, 255, .18) !important;
}

.tr-public-body :is(
    .rv2-hero,.apv2-hero,.dv2-hero,.npv2-hero,.tuv2-hero,.cv2-hero,
    .event-header,.all-news-header,.roulette-header,.rcoin-header,.webpoint-header,
    .daily-header
) p {
    color: var(--tesla-silver) !important;
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    letter-spacing: .8px !important;
}

/* Unified panels */
.tr-public-body :is(
    [class*="-panel"],[class*="-card"],[class*="-strip"],
    .event-card,.news-card,.roulette-history,.daily-status-grid,
    .daily-reward-card,.rcoin-summary,.webpoint-balance-grid
) {
    border-color: var(--tesla-line) !important;
    background:
        linear-gradient(145deg, rgba(10, 39, 64, .94), rgba(4, 18, 32, .97)) !important;
    box-shadow: 0 18px 50px rgba(0, 5, 12, .25) !important;
}

.tr-public-body :is(
    [class*="-panel"],[class*="-card"],.event-card,.news-card,
    .daily-reward-card
):hover {
    border-color: rgba(57, 221, 255, .52) !important;
}

/* Buttons, filters and tabs */
.tr-public-body :is(
    button,.btn,[class*="-button"],[class*="-back"],
    .event-filter a,.news-filter a,.mall-category,.mall-type-tab,
    .rv2-tab,.rv2-filter-link
) {
    border-color: rgba(57, 221, 255, .32) !important;
    border-radius: 3px !important;
    color: var(--tesla-silver) !important;
    font-family: "Chakra Petch", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
}

.tr-public-body :is(
    button,.btn,[class*="-button"],[class*="-back"],
    .event-filter a,.news-filter a,.mall-category,.mall-type-tab,
    .rv2-tab,.rv2-filter-link
):hover,
.tr-public-body :is(
    .active,.selected,[aria-selected="true"]
) {
    border-color: var(--tesla-cyan) !important;
    color: #fff !important;
    box-shadow: 0 0 24px rgba(57, 221, 255, .16) !important;
}

.tr-public-body :is(
    button[type="submit"],.btn-primary,.mall-search-button,.mall-buy-button,
    .tuv2-submit,.daily-claim-button,.roulette-spin-button
) {
    background: linear-gradient(120deg, var(--tesla-blue), #00b8d8) !important;
    border-color: var(--tesla-cyan) !important;
    color: #fff !important;
}

/* Forms */
.tr-public-body :is(input,select,textarea,.happy-input,.mall-input,.mall-select) {
    min-height: 44px;
    border: 1px solid var(--tesla-line) !important;
    border-radius: 3px !important;
    outline: none !important;
    background: rgba(2, 14, 26, .88) !important;
    color: var(--tesla-white) !important;
    font-size: 13px !important;
}

.tr-public-body :is(input,select,textarea,.happy-input,.mall-input,.mall-select):focus {
    border-color: var(--tesla-cyan) !important;
    box-shadow: 0 0 0 3px rgba(57, 221, 255, .11) !important;
}

/* Account login/register: completely detached from old HappyRan card */
.tr-public-body .account-page {
    min-height: calc(100vh - 84px);
    display: grid;
    place-items: center;
    padding: 70px 20px;
    background:
        linear-gradient(90deg, rgba(2, 9, 20, .94), rgba(3, 21, 37, .70)),
        url('/images/tesla-hero-ep9.png') center / cover no-repeat !important;
}

.tr-public-body .account-card {
    width: min(470px, 100%) !important;
    padding: 38px !important;
    border: 1px solid var(--tesla-line-strong) !important;
    border-radius: 5px !important;
    background: linear-gradient(145deg, rgba(9, 36, 60, .96), rgba(2, 13, 25, .98)) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .45), 0 0 50px rgba(22, 140, 255, .10) !important;
}

.tr-public-body .account-title span { color: var(--tesla-cyan) !important; }
.tr-public-body .account-title h1 {
    color: var(--tesla-white) !important;
    font-family: "Chakra Petch", sans-serif !important;
}

/* Tables */
.tr-public-body table {
    color: var(--tesla-silver) !important;
    border-color: var(--tesla-line) !important;
    background: rgba(4, 18, 32, .72) !important;
}
.tr-public-body table th {
    color: var(--tesla-cyan) !important;
    border-color: var(--tesla-line) !important;
    background: rgba(8, 42, 68, .92) !important;
    font-family: "Chakra Petch", sans-serif !important;
    letter-spacing: .8px !important;
}
.tr-public-body table td { border-color: rgba(113, 207, 239, .12) !important; }
.tr-public-body table tbody tr:hover { background: rgba(57, 221, 255, .055) !important; }

/* Replace remaining HappyRan red/gold accents */
.tr-public-body :is(
    [class*="kicker"],[class*="eyebrow"],[class*="section-title"] > span,
    [class*="money"],[class*="point"],[class*="balance"] strong,
    [class*="icon"],time,a
) { color: var(--tesla-cyan); }

.tr-public-body :is(.success,.approved,.online) { color: var(--tesla-success) !important; }
.tr-public-body :is(.error,.failed,.rejected,.offline) { color: var(--tesla-danger) !important; }

/* Ranking readability */
.tr-public-body .rv2-page { font-size: 14px !important; }
.tr-public-body .rv2-container { padding-top: 34px !important; }
.tr-public-body .rv2-page h2 { font-size: clamp(24px, 3vw, 38px) !important; }
.tr-public-body .rv2-page h3 { font-size: 18px !important; }

/* Alerts */
.tr-public-body :is([class*="alert"],.validation-summary-errors) {
    border-color: var(--tesla-line-strong) !important;
    background: rgba(8, 42, 68, .78) !important;
    color: var(--tesla-white) !important;
}

@media (max-width: 900px) {
    .tr-public-main { padding-top: 70px; }
    .tr-public-body .account-card { padding: 28px 22px !important; }
    .tr-public-body :is(.rv2-hero,.apv2-hero,.dv2-hero,.npv2-hero,.tuv2-hero,.cv2-hero) {
        min-height: 270px !important;
    }
}

@media (max-width: 600px) {
    .tr-public-body :is(
        .rv2-hero,.apv2-hero,.dv2-hero,.npv2-hero,.tuv2-hero,.cv2-hero,
        .event-header,.all-news-header,.roulette-header,.rcoin-header,.webpoint-header
    ) h1 { font-size: 38px !important; }
    .tr-public-body :is([class*="-panel"],[class*="-card"]) { border-radius: 2px !important; }
}