/*
 * Veltrion Web Platform Phase 25
 * Premium visual polish layer
 * Additive only: no payment/reward/backend behavior changes.
 */

:root {
    --v25-bg-deep: #040405;
    --v25-bg-panel: rgba(12, 10, 9, 0.78);
    --v25-bg-panel-strong: rgba(18, 13, 11, 0.92);
    --v25-border: rgba(222, 181, 104, 0.22);
    --v25-border-strong: rgba(255, 211, 128, 0.38);
    --v25-border-cold: rgba(178, 207, 255, 0.12);
    --v25-gold: #e4be73;
    --v25-gold-soft: #9d7c45;
    --v25-red: #a52a24;
    --v25-red-deep: #4c0d0a;
    --v25-ivory: #fff0cf;
    --v25-muted: rgba(255, 237, 202, 0.68);
    --v25-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
    --v25-shadow-hard: 0 38px 120px rgba(0, 0, 0, 0.66);
    --v25-radius-xl: 24px;
    --v25-radius-lg: 18px;
    --v25-radius-md: 14px;
    --v25-ease: cubic-bezier(.2,.8,.2,1);
}

html.veltrion-phase25-root {
    background: #030304;
}

body.veltrion-phase25 {
    color: var(--v25-ivory);
    background:
        radial-gradient(circle at 18% -8%, rgba(154, 31, 28, 0.24), transparent 31%),
        radial-gradient(circle at 78% 7%, rgba(220, 179, 95, 0.16), transparent 30%),
        radial-gradient(circle at 50% 105%, rgba(62, 13, 10, 0.54), transparent 38%),
        linear-gradient(180deg, #060607 0%, #040405 52%, #070504 100%);
    letter-spacing: -0.015em;
}

body.veltrion-phase25::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.72), transparent 76%);
    opacity: .42;
}

body.veltrion-phase25::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 18%, transparent 0 28%, rgba(0, 0, 0, 0.18) 62%, rgba(0,0,0,.66) 100%),
        linear-gradient(90deg, rgba(0,0,0,.42), transparent 20% 80%, rgba(0,0,0,.42));
    mix-blend-mode: multiply;
}

.veltrion-phase25 .vweb-shell,
.veltrion-phase25 .vweb-main {
    position: relative;
}

.veltrion-phase25 .vweb-bg__orb {
    filter: blur(2px) saturate(1.16);
    opacity: .86;
}

.veltrion-phase25 .vweb-bg__noise {
    opacity: .12;
    mix-blend-mode: overlay;
}

/* Ambient ember layer generated by JS */
.v25-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: .78;
}

.v25-ember {
    position: absolute;
    width: var(--s, 3px);
    height: var(--s, 3px);
    left: var(--x, 50%);
    top: var(--y, 50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 207, 117, .95), rgba(177, 43, 31, .48) 48%, transparent 72%);
    box-shadow: 0 0 16px rgba(218, 117, 54, .42);
    animation: v25-ember-float var(--d, 10s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes v25-ember-float {
    0% { transform: translate3d(0, 40px, 0) scale(.72); opacity: 0; }
    16% { opacity: .72; }
    100% { transform: translate3d(var(--dx, 20px), -120px, 0) scale(1.12); opacity: 0; }
}

/* Header polish */
.veltrion-phase25 .vweb-header--portal,
.veltrion-phase25 .vweb-header,
.veltrion-phase25 header[data-vweb-header] {
    border-bottom: 1px solid rgba(226, 190, 111, .17);
    background:
        linear-gradient(180deg, rgba(9, 8, 8, .92), rgba(7, 6, 6, .74)),
        radial-gradient(circle at 50% 0, rgba(163, 36, 29, .18), transparent 52%);
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
    backdrop-filter: blur(18px) saturate(1.25);
}

.veltrion-phase25 .vweb-brand__crest {
    position: relative;
    border: 1px solid rgba(255, 217, 140, .44);
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 231, 162, .78), transparent 22%),
        linear-gradient(145deg, #a62b23, #49100c 48%, #c39147);
    box-shadow:
        0 0 0 4px rgba(224, 182, 102, .08),
        0 12px 32px rgba(139, 29, 22, .42),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.veltrion-phase25 .vweb-brand__text strong,
.veltrion-phase25 .vweb-brand__text b {
    color: #fff3d2;
    text-shadow: 0 0 24px rgba(226, 189, 114, .28);
}

.veltrion-phase25 .vweb-nav--portal a,
.veltrion-phase25 .vweb-nav a {
    position: relative;
    color: rgba(255, 238, 205, .78);
    transition: color .18s var(--v25-ease), text-shadow .18s var(--v25-ease);
}

.veltrion-phase25 .vweb-nav--portal a::after,
.veltrion-phase25 .vweb-nav a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230, 187, 102, .85), transparent);
    transform: scaleX(0);
    opacity: 0;
    transition: transform .2s var(--v25-ease), opacity .2s var(--v25-ease);
}

.veltrion-phase25 .vweb-nav--portal a:hover,
.veltrion-phase25 .vweb-nav a:hover {
    color: #fff7df;
    text-shadow: 0 0 18px rgba(227, 188, 106, .22);
}

.veltrion-phase25 .vweb-nav--portal a:hover::after,
.veltrion-phase25 .vweb-nav a:hover::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Universal premium panel layer */
.veltrion-phase25 .vweb-portal,
.veltrion-phase25 .vweb-portal-panel,
.veltrion-phase25 .vweb-start-gate,
.veltrion-phase25 .vweb-login-card,
.veltrion-phase25 .vweb-community-card,
.veltrion-phase25 .vweb-server-strip,
.veltrion-phase25 .vweb-hub-card,
.veltrion-phase25 .vweb-competition-panel,
.veltrion-phase25 .vweb-competition-class,
.veltrion-phase25 .vweb-rank-board,
.veltrion-phase25 .vweb-boss-card,
.veltrion-phase25 .vweb-shop-preview,
.veltrion-phase25 .vweb-cash-charge-panel,
.veltrion-phase25 .vweb-coupon-panel,
.veltrion-phase25 .vweb-attendance-panel,
.veltrion-phase25 .vweb-mission-panel,
.veltrion-phase25 .vweb-guide-panel,
.veltrion-phase25 .vweb-season-pass-panel,
.veltrion-phase25 .vweb-support-panel,
.veltrion-phase25 .vweb-payment-panel,
.veltrion-phase25 .vweb-operation-status,
.veltrion-phase25 .vweb-feature-card,
.veltrion-phase25 .vweb-world-card,
.veltrion-phase25 .vweb-card,
.veltrion-phase25 [data-v25-polished="panel"] {
    position: relative;
    border-color: var(--v25-border) !important;
    background:
        linear-gradient(180deg, rgba(255, 236, 196, .045), transparent 34%),
        radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(227, 185, 102, .12), transparent 34%),
        linear-gradient(180deg, rgba(17, 14, 13, .86), rgba(8, 8, 9, .84)) !important;
    box-shadow:
        var(--v25-shadow),
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -1px 0 rgba(0,0,0,.44);
}

.veltrion-phase25 .vweb-hub-card::before,
.veltrion-phase25 .vweb-competition-panel::before,
.veltrion-phase25 .vweb-portal-panel::before,
.veltrion-phase25 .vweb-login-card::before,
.veltrion-phase25 .vweb-start-gate::before,
.veltrion-phase25 .vweb-server-strip::before,
.veltrion-phase25 [data-v25-polished="panel"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 1px;
    background:
        linear-gradient(135deg, rgba(255, 223, 151, .42), rgba(255,255,255,0) 18% 72%, rgba(139, 34, 28, .32)),
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .58;
}

.veltrion-phase25 .vweb-hub-card::after,
.veltrion-phase25 .vweb-competition-panel::after,
.veltrion-phase25 .vweb-portal-panel::after,
.veltrion-phase25 [data-v25-polished="panel"]::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 224, 148, .58), transparent);
    opacity: .76;
    pointer-events: none;
}

.veltrion-phase25 [data-v25-polished="panel"] {
    transition: transform .22s var(--v25-ease), border-color .22s var(--v25-ease), box-shadow .22s var(--v25-ease), filter .22s var(--v25-ease);
}

.veltrion-phase25 [data-v25-polished="panel"]:hover {
    transform: translateY(-2px);
    border-color: var(--v25-border-strong) !important;
    box-shadow:
        var(--v25-shadow-hard),
        0 0 34px rgba(154, 39, 31, .14),
        inset 0 1px 0 rgba(255,255,255,.09);
    filter: saturate(1.04);
}

/* Hero premium finish */
.veltrion-phase25 .vweb-portal {
    overflow: hidden;
    border-radius: clamp(18px, 2.8vw, 34px) !important;
    background:
        radial-gradient(circle at 62% 34%, rgba(225, 178, 88, .16), transparent 26%),
        radial-gradient(circle at 40% 72%, rgba(151, 33, 28, .34), transparent 30%),
        linear-gradient(120deg, rgba(5, 5, 7, .96), rgba(17, 10, 8, .89) 46%, rgba(5, 5, 8, .94)) !important;
}

.veltrion-phase25 .vweb-portal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.72), transparent 36%, rgba(0,0,0,.18)),
        radial-gradient(circle at 70% 18%, rgba(255, 218, 132, .14), transparent 25%),
        linear-gradient(180deg, transparent, rgba(0,0,0,.44));
    z-index: 1;
}

.veltrion-phase25 .vweb-portal > * {
    position: relative;
    z-index: 2;
}

.veltrion-phase25 .vweb-portal__eyebrow,
.veltrion-phase25 small,
.veltrion-phase25 .vweb-hub-card__head small,
.veltrion-phase25 .vweb-competition__head small {
    color: var(--v25-gold) !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(225, 184, 98, .24);
}

.veltrion-phase25 .vweb-portal h1,
.veltrion-phase25 .vweb-portal__title,
.veltrion-phase25 h1 {
    color: #fff4d8;
    text-shadow:
        0 2px 0 rgba(0,0,0,.56),
        0 0 38px rgba(226, 188, 105, .18),
        0 0 90px rgba(154, 39, 31, .18);
}

.veltrion-phase25 .vweb-portal__desc,
.veltrion-phase25 .vweb-portal p,
.veltrion-phase25 .vweb-hub-card p,
.veltrion-phase25 .vweb-competition p {
    color: var(--v25-muted);
}

.veltrion-phase25 .vweb-heroic {
    filter:
        drop-shadow(0 26px 30px rgba(0,0,0,.66))
        drop-shadow(0 0 24px rgba(224, 177, 96, .12));
}

.veltrion-phase25 .vweb-heroic--knight {
    filter:
        drop-shadow(0 30px 40px rgba(0,0,0,.76))
        drop-shadow(0 0 36px rgba(227, 190, 110, .18));
}

/* Buttons */
.veltrion-phase25 .vweb-btn,
.veltrion-phase25 button,
.veltrion-phase25 .vweb-start-gate__button,
.veltrion-phase25 .vweb-login-card__login,
.veltrion-phase25 .vweb-login-card__join,
.veltrion-phase25 a[class*="button"],
.veltrion-phase25 a[class*="btn"] {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    transition: transform .18s var(--v25-ease), box-shadow .18s var(--v25-ease), border-color .18s var(--v25-ease), filter .18s var(--v25-ease);
}

.veltrion-phase25 .vweb-btn--primary,
.veltrion-phase25 .vweb-start-gate__button,
.veltrion-phase25 .vweb-login-card__login,
.veltrion-phase25 .is-primary {
    border: 1px solid rgba(255, 223, 148, .42) !important;
    color: #1b0805 !important;
    background:
        linear-gradient(180deg, rgba(255, 236, 169, .96), rgba(211, 151, 67, .96) 48%, rgba(139, 48, 31, .96)) !important;
    box-shadow:
        0 16px 38px rgba(134, 31, 24, .34),
        inset 0 1px 0 rgba(255,255,255,.52),
        inset 0 -1px 0 rgba(62, 19, 12, .36);
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

.veltrion-phase25 .vweb-btn--primary::after,
.veltrion-phase25 .vweb-start-gate__button::after,
.veltrion-phase25 .vweb-login-card__login::after,
.veltrion-phase25 .is-primary::after {
    content: "";
    position: absolute;
    inset: -35% -70%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 49%, transparent 62%);
    transform: translateX(-55%);
    transition: transform .58s var(--v25-ease);
    pointer-events: none;
}

.veltrion-phase25 .vweb-btn--primary:hover,
.veltrion-phase25 .vweb-start-gate__button:hover,
.veltrion-phase25 .vweb-login-card__login:hover,
.veltrion-phase25 .is-primary:hover {
    transform: translateY(-2px);
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
        0 22px 58px rgba(154, 39, 31, .42),
        0 0 28px rgba(226, 189, 114, .18),
        inset 0 1px 0 rgba(255,255,255,.58);
}

.veltrion-phase25 .vweb-btn--primary:hover::after,
.veltrion-phase25 .vweb-start-gate__button:hover::after,
.veltrion-phase25 .vweb-login-card__login:hover::after,
.veltrion-phase25 .is-primary:hover::after {
    transform: translateX(55%);
}

.veltrion-phase25 .vweb-btn--ghost,
.veltrion-phase25 .vweb-btn--glass,
.veltrion-phase25 .vweb-login-card__join,
.veltrion-phase25 .vweb-community-grid a,
.veltrion-phase25 .vweb-quick-tiles a {
    border: 1px solid rgba(226, 190, 111, .22) !important;
    color: rgba(255, 241, 215, .9) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.26);
}

.veltrion-phase25 .vweb-btn--ghost:hover,
.veltrion-phase25 .vweb-btn--glass:hover,
.veltrion-phase25 .vweb-login-card__join:hover,
.veltrion-phase25 .vweb-community-grid a:hover,
.veltrion-phase25 .vweb-quick-tiles a:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 222, 148, .42) !important;
    background: linear-gradient(180deg, rgba(255, 230, 163, .11), rgba(117, 30, 25, .10)) !important;
}

/* Server and status indicators */
.veltrion-phase25 .vweb-server-list article,
.veltrion-phase25 .vweb-status-pill,
.veltrion-phase25 .vweb-session-pill {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.veltrion-phase25 .is-green,
.veltrion-phase25 .status-online,
.veltrion-phase25 [data-status="online"] {
    color: #8ff0aa !important;
    text-shadow: 0 0 18px rgba(70, 220, 126, .24);
}

.veltrion-phase25 .is-orange,
.veltrion-phase25 .is-yellow,
.veltrion-phase25 .status-busy {
    color: #ffd37a !important;
    text-shadow: 0 0 18px rgba(255, 184, 87, .24);
}

/* Content hierarchy */
.veltrion-phase25 h2,
.veltrion-phase25 h3 {
    color: #fff0ce;
    text-shadow: 0 0 26px rgba(226, 188, 105, .12);
}

.veltrion-phase25 .vweb-hub-card__head,
.veltrion-phase25 .vweb-competition__head,
.veltrion-phase25 .vweb-portal-panel__head {
    border-bottom-color: rgba(226, 190, 111, .16) !important;
}

.veltrion-phase25 .vweb-hub-list a,
.veltrion-phase25 .vweb-portal-list a,
.veltrion-phase25 .vweb-rank-row,
.veltrion-phase25 .vweb-portal-rank-list article {
    border-color: rgba(255,255,255,.07) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
}

.veltrion-phase25 .vweb-hub-list a:hover,
.veltrion-phase25 .vweb-portal-list a:hover,
.veltrion-phase25 .vweb-rank-row:hover,
.veltrion-phase25 .vweb-portal-rank-list article:hover {
    border-color: rgba(226, 190, 111, .26) !important;
    background: linear-gradient(180deg, rgba(226, 190, 111, .09), rgba(139, 36, 28, .06)) !important;
}

.veltrion-phase25 .vweb-media-item,
.veltrion-phase25 .vweb-hub-feature,
.veltrion-phase25 .vweb-class-card,
.veltrion-phase25 .vweb-competition-class {
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 40px rgba(0,0,0,.34);
}

.veltrion-phase25 .vweb-media-item::after,
.veltrion-phase25 .vweb-hub-feature::after,
.veltrion-phase25 .vweb-class-card::after,
.veltrion-phase25 .vweb-competition-class::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.42));
}

/* Ranking emphasis */
.veltrion-phase25 [data-rank="1"],
.veltrion-phase25 .rank-1,
.veltrion-phase25 .vweb-rank-row:first-child,
.veltrion-phase25 .vweb-portal-rank-list article:first-child {
    border-color: rgba(255, 220, 133, .34) !important;
    background:
        radial-gradient(circle at 0 0, rgba(255, 222, 133, .14), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.024)) !important;
}

.veltrion-phase25 .vweb-rank-medal,
.veltrion-phase25 .rank-medal,
.veltrion-phase25 .vweb-portal-rank-list b:first-child {
    color: var(--v25-gold);
    text-shadow: 0 0 18px rgba(226, 188, 105, .22);
}

/* Footer / section divider */
.veltrion-phase25 .v25-section-divider {
    width: min(100%, 1480px);
    height: 1px;
    margin: clamp(18px, 3vw, 34px) auto;
    background: linear-gradient(90deg, transparent, rgba(226,190,111,.28), rgba(154,39,31,.18), rgba(226,190,111,.28), transparent);
    opacity: .78;
}

.veltrion-phase25 footer,
.veltrion-phase25 .vweb-footer {
    border-top: 1px solid rgba(226,190,111,.14);
    background: linear-gradient(180deg, rgba(10, 8, 8, .38), rgba(0,0,0,.45));
}

/* Polished loading / empty states */
.veltrion-phase25 .vweb-empty,
.veltrion-phase25 .vweb-hub-empty,
.veltrion-phase25 [data-loading="true"] {
    color: rgba(255, 237, 202, .54) !important;
}

.veltrion-phase25 .v25-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.045) !important;
}

.veltrion-phase25 .v25-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
    animation: v25-skeleton 1.4s var(--v25-ease) infinite;
}

@keyframes v25-skeleton {
    to { transform: translateX(120%); }
}

/* Accessibility finish */
.veltrion-phase25 a:focus-visible,
.veltrion-phase25 button:focus-visible,
.veltrion-phase25 input:focus-visible,
.veltrion-phase25 select:focus-visible,
.veltrion-phase25 textarea:focus-visible {
    outline: 2px solid rgba(255, 220, 132, .92) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(154, 39, 31, .22) !important;
}

.veltrion-phase25 ::selection {
    color: #1b0906;
    background: #e5bd70;
}

/* Mobile polish inherited from Phase 24 */
@media (max-width: 760px) {
    .veltrion-phase25 .vweb-portal,
    .veltrion-phase25 .vweb-hub-card,
    .veltrion-phase25 .vweb-competition-panel,
    .veltrion-phase25 .vweb-portal-panel {
        border-radius: 16px !important;
    }

    .veltrion-phase25 .vweb-header--portal,
    .veltrion-phase25 .vweb-header {
        box-shadow: 0 12px 28px rgba(0,0,0,.34);
    }

    .veltrion-phase25 .v25-section-divider {
        margin: 16px auto;
    }

    .veltrion-phase25 [data-v25-polished="panel"]:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v25-ember,
    .veltrion-phase25 .v25-skeleton::after {
        animation: none !important;
    }

    .veltrion-phase25 [data-v25-polished="panel"],
    .veltrion-phase25 .vweb-btn,
    .veltrion-phase25 button,
    .veltrion-phase25 a {
        transition: none !important;
    }
}