/* =========================================================
   SUPPORT VALRYN — LOCKED ROOM BUILD
   support.css
   Production Replacement
   PART 1
   ========================================================= */

:root{
    --sv-bg:#130a0a;
    --sv-panel:rgba(35,18,18,.90);
    --sv-panel-strong:#2b1818;

    --sv-gold:#d4af37;
    --sv-gold-light:#f6d365;

    --sv-red:#c62828;
    --sv-crimson:#e53935;

    --sv-text:#ffffff;
    --sv-muted:#d0c7be;

    --sv-border:rgba(255,255,255,.08);

    --sv-shadow:0 24px 70px rgba(0,0,0,.45);

    --sv-radius:28px;
}

/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    width:100%;
    min-height:100%;
    scroll-behavior:smooth;
}

body{
    min-width:320px;

    min-height:100vh;
    min-height:100dvh;

    overflow:hidden;

    color:var(--sv-text);
    background:var(--sv-bg);

    font-family:"Inter",sans-serif;
    -webkit-font-smoothing:antialiased;
}

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible{
    outline:3px solid var(--sv-gold-light);
    outline-offset:3px;
}

[hidden]{
    display:none !important;
}

/* =========================================================
   APP
   ========================================================= */

.sv-app{

    position:relative;

    width:100%;

    min-height:100vh;
    min-height:100dvh;

    overflow:hidden;

    isolation:isolate;

}

/* =========================================================
   BACKGROUND
   ========================================================= */

.sv-background{

    position:fixed;
    inset:0;

    z-index:-10;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.18),
            transparent 34%
        ),

        radial-gradient(
            circle at 84% 78%,
            rgba(198,40,40,.18),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #130a0a 0%,
            #1a0d0d 52%,
            #130a0a 100%
        );

}

.sv-particles{

    position:fixed;
    inset:0;

    z-index:-8;

    pointer-events:none;

    opacity:.23;

    background-image:
        radial-gradient(
            circle,
            var(--sv-gold-light) 1px,
            transparent 1px
        );

    background-size:88px 88px;

    animation:svStars 34s linear infinite;

}

/* =========================================================
   HEADER
   ========================================================= */

.sv-header{

    position:relative;
    z-index:100;

    width:min(94%,1650px);

    min-height:86px;

    margin:
        max(24px,env(safe-area-inset-top))
        auto
        0;

    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items:center;

    gap:26px;

    padding:16px 28px;

    border:1px solid var(--sv-border);

    border-radius:24px;

    background:rgba(33,18,18,.88);

    box-shadow:var(--sv-shadow);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

}

.sv-logo{

    display:flex;
    align-items:center;
    gap:14px;

    color:var(--sv-text);

    text-decoration:none;

}

.sv-logo-mark{

    width:56px;
    height:56px;

    display:grid;
    place-items:center;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            var(--sv-gold),
            var(--sv-gold-light)
        );

    color:#2b1818;

    font-family:"Playfair Display",serif;

    font-size:2rem;

    font-weight:700;

    box-shadow:
        0 0 28px
        rgba(212,175,55,.42);

}

.sv-logo strong{

    display:block;

    letter-spacing:.18em;

}

.sv-logo span{

    display:block;

    margin-top:2px;

    color:var(--sv-gold-light);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.28em;

}

.sv-nav{

    display:flex;

    justify-content:center;

    gap:12px;

    overflow-x:auto;

    scrollbar-width:none;

}

.sv-nav::-webkit-scrollbar{

    display:none;

}

.sv-nav-button{

    flex:0 0 auto;

    min-height:42px;

    padding:0 15px;

    color:var(--sv-muted);

    border:1px solid transparent;

    border-radius:13px;

    background:transparent;

    font-size:.85rem;

    font-weight:800;

    white-space:nowrap;

    transition:
        .22s ease;

}

.sv-nav-button:hover,
.sv-nav-button.active{

    color:var(--sv-gold-light);

    border-color:
        rgba(212,175,55,.18);

    background:
        rgba(212,175,55,.07);

}
/* =========================================================
   MAIN
   ========================================================= */

.sv-main {
    width: min(94%, 1650px);

    height: calc(100vh - 134px);
    height: calc(100dvh - 134px);

    margin: 0 auto;

    padding: 14px 0 18px;
}

/* =========================================================
   SCREEN SYSTEM
   ========================================================= */

.sv-screen {
    width: 100%;
    height: 100%;
}

.sv-screen:not(.active) {
    display: none;
}

.sv-screen.active {
    display: block;
}

.sv-screen-shell {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr);

    gap: 14px;
}

.sv-screen-header {
    min-height: 128px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 22px;

    padding: 20px 24px;

    border: 1px solid var(--sv-border);

    border-radius: 24px;

    background: var(--sv-panel);

    box-shadow: var(--sv-shadow);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.sv-screen-header h2 {
    margin-top: 5px;

    font-family: "Playfair Display", serif;

    font-size: clamp(2.2rem, 4vw, 4rem);

    line-height: 1;
}

.sv-screen-header p:last-child {
    max-width: 850px;

    margin-top: 8px;

    color: var(--sv-muted);

    line-height: 1.65;
}

.sv-back-button {
    min-height: 44px;

    padding: 0 17px;

    color: var(--sv-text);

    border: 1px solid rgba(212, 175, 55, 0.22);

    border-radius: 14px;

    background: rgba(212, 175, 55, 0.07);

    font-weight: 800;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        background 0.22s ease;
}

/* =========================================================
   HOME
   ========================================================= */

.sv-home-layout {
    position: relative;

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(380px, 0.85fr);

    align-items: center;

    gap: 60px;

    overflow: hidden;
}

.sv-home-content {
    padding: clamp(12px, 2.2vw, 34px);
}

.sv-label {
    color: var(--sv-gold-light);

    font-size: 0.76rem;

    font-weight: 900;

    letter-spacing: 0.28em;

    text-transform: uppercase;
}

.sv-home-content h1 {
    margin-top: 16px;

    font-family: "Playfair Display", serif;

    font-size: clamp(4rem, 6.6vw, 6.8rem);

    line-height: 0.92;
}

.sv-description {
    max-width: 790px;

    margin-top: 24px;

    color: var(--sv-muted);

    font-size: 1.02rem;

    line-height: 1.82;
}

/* =========================================================
   HOME BUTTONS
   ========================================================= */

.sv-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 30px;
}

.sv-primary,
.sv-secondary {
    min-height: 52px;

    padding: 0 28px;

    border-radius: 17px;

    font-weight: 900;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.sv-primary {
    color: #2b1818;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--sv-gold),
            var(--sv-gold-light)
        );

    box-shadow:
        0 16px 34px
        rgba(212, 175, 55, 0.25);
}

.sv-secondary {
    color: var(--sv-text);

    border:
        1px solid
        rgba(212, 175, 55, 0.3);

    background:
        rgba(255, 255, 255, 0.025);
}

.sv-primary:hover,
.sv-secondary:hover,
.sv-back-button:hover,
.sv-support-option:hover {
    transform: translateY(-4px);
}

/* =========================================================
   QUOTE
   ========================================================= */

.sv-quote {
    max-width: 720px;

    margin-top: 26px;

    padding: 16px 20px;

    border-left:
        4px solid
        var(--sv-gold);

    border-radius:
        0
        16px
        16px
        0;

    background:
        rgba(255, 255, 255, 0.028);
}

.sv-quote span {
    color: var(--sv-gold-light);

    font-style: italic;

    line-height: 1.6;
}

/* =========================================================
   HOME VISUAL
   ========================================================= */

.sv-home-visual {
    position: relative;

    min-height: 100%;

    display: grid;

    place-items: center;
}

.sv-heart {
    position: relative;

    z-index: 5;

    width: 180px;
    height: 180px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--sv-red),
            var(--sv-crimson)
        );

    font-size: 5rem;

    box-shadow:
        0 0 60px
        rgba(229, 57, 53, 0.35);
}

.sv-ring {
    position: absolute;

    border:
        1px solid
        rgba(212, 175, 55, 0.24);

    border-radius: 50%;

    animation:
        svPulse
        6s
        ease-in-out
        infinite;
}

.ring1 {
    width: min(280px, 46vw);
    height: min(280px, 46vw);
}

.ring2 {
    width: min(390px, 60vw);
    height: min(390px, 60vw);

    animation-delay: 1.5s;
}

.ring3 {
    width: min(500px, 74vw);
    height: min(500px, 74vw);

    animation-delay: 3s;
}
/* =========================================================
   DASHBOARD
   ========================================================= */

.sv-dashboard-grid {
    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.sv-dashboard-card {
    min-height: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 28px;

    border: 1px solid var(--sv-border);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            var(--sv-panel),
            rgba(43, 24, 24, 0.94)
        );

    box-shadow: var(--sv-shadow);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease;
}

.sv-dashboard-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(212, 175, 55, 0.34);
}

.sv-icon {
    width: 66px;
    height: 66px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            var(--sv-gold),
            var(--sv-gold-light)
        );

    font-size: 1.9rem;
}

.sv-dashboard-card h3 {
    color: var(--sv-gold-light);

    font-size: 1.35rem;
}

.sv-dashboard-card p {
    margin-top: 10px;

    color: var(--sv-muted);

    line-height: 1.7;
}

/* =========================================================
   COMMUNITY
   ========================================================= */

.sv-community-dashboard {
    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-template-rows:
        minmax(0, 0.72fr)
        minmax(0, 1.28fr);

    gap: 14px;
}

.sv-stat-card,
.sv-community-message {
    border: 1px solid var(--sv-border);

    border-radius: 24px;

    background: var(--sv-panel);

    box-shadow: var(--sv-shadow);
}

.sv-stat-card {
    display: grid;

    place-items: center;

    align-content: center;

    padding: 20px;

    text-align: center;
}

.sv-stat-card h3 {
    color: var(--sv-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2rem, 4vw, 3.6rem);
}

.sv-stat-card span {
    margin-top: 8px;

    color: var(--sv-muted);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.sv-community-message {
    grid-column: 1 / -1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 34px;

    text-align: center;
}

.sv-community-message h3 {
    margin-top: 10px;

    color: var(--sv-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 2.4rem;
}

.sv-community-message p:last-child {
    max-width: 900px;

    margin:
        14px
        auto
        0;

    color: var(--sv-muted);

    line-height: 1.75;
}

/* =========================================================
   SUPPORT HUB
   ========================================================= */

.sv-support-hub-grid {
    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, minmax(0, 1fr))
        auto;

    gap: 14px;
}

.sv-support-option {
    min-height: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: 24px;

    color: var(--sv-text);

    border: 1px solid var(--sv-border);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            var(--sv-panel),
            rgba(43, 24, 24, 0.96)
        );

    box-shadow: var(--sv-shadow);

    text-align: left;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease;
}

.sv-support-option.featured {
    border-color:
        rgba(212, 175, 55, 0.5);

    background:
        radial-gradient(
            circle at top right,
            rgba(212, 175, 55, 0.16),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--sv-panel),
            rgba(43, 24, 24, 0.96)
        );
}

.sv-support-icon {
    font-size: 2.4rem;
}

.sv-option-label {
    margin-top: 16px;

    color: var(--sv-gold-light);

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.sv-support-option strong {
    margin-top: 8px;

    font-size: 1.25rem;
}

.sv-support-option small {
    margin-top: 9px;

    color: var(--sv-muted);

    font-size: 0.76rem;

    line-height: 1.55;
}

/* =========================================================
   SUPPORT FOOTER
   ========================================================= */

.sv-support-footer {
    position: static;

    grid-column: 1 / -1;

    padding:
        4px
        22px
        0;

    text-align: center;

    pointer-events: none;
}

.sv-support-footer p {
    color: var(--sv-muted);

    font-size: 0.72rem;
}
/* =========================================================
   TOAST
   ========================================================= */

.sv-toast {
    position: fixed;

    right:
        max(
            22px,
            env(safe-area-inset-right)
        );

    bottom:
        max(
            22px,
            env(safe-area-inset-bottom)
        );

    z-index: 1000;

    max-width:
        min(
            400px,
            calc(100% - 44px)
        );

    padding: 14px 18px;

    color: var(--sv-text);

    border:
        1px solid
        rgba(212, 175, 55, 0.25);

    border-radius: 14px;

    background:
        rgba(33, 18, 18, 0.97);

    box-shadow: var(--sv-shadow);

    font-size: 0.8rem;

    font-weight: 800;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes svPulse {
    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.24;
    }

    50% {
        transform: scale(1);
        opacity: 0.72;
    }
}

@keyframes svStars {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-88px);
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {
    body {
        overflow: auto;
    }

    .sv-app {
        min-height: 100vh;
        min-height: 100dvh;

        height: auto;

        overflow: visible;
    }

    .sv-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .sv-nav {
        justify-content: flex-start;

        -webkit-overflow-scrolling: touch;
    }

    .sv-main {
        height: auto;

        min-height:
            calc(
                100vh - 150px
            );

        min-height:
            calc(
                100dvh - 150px
            );
    }

    .sv-screen,
    .sv-screen-shell {
        height: auto;
    }

    .sv-home-layout {
        min-height: 620px;

        height: auto;

        grid-template-columns: 1fr;

        gap: 30px;

        overflow: visible;

        text-align: center;
    }

    .sv-buttons {
        justify-content: center;
    }

    .sv-quote {
        margin-left: auto;
        margin-right: auto;
    }

    .sv-home-visual {
        display: none;
    }

    .sv-dashboard-grid,
    .sv-community-dashboard,
    .sv-support-hub-grid {
        grid-template-columns: 1fr;

        grid-template-rows: auto;
    }

    .sv-dashboard-card,
    .sv-stat-card,
    .sv-support-option {
        min-height: 190px;
    }

    .sv-community-message,
    .sv-support-footer {
        grid-column: auto;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
    .sv-header,
    .sv-main {
        width:
            min(
                100% - 24px,
                1650px
            );
    }

    .sv-header {
        padding: 16px;

        border-radius: 18px;
    }

    .sv-logo-mark {
        width: 48px;
        height: 48px;

        border-radius: 15px;

        font-size: 1.7rem;
    }

    .sv-logo strong {
        font-size: 0.92rem;

        letter-spacing: 0.14em;
    }

    .sv-logo span {
        font-size: 0.62rem;

        letter-spacing: 0.18em;
    }

    .sv-nav-button {
        min-height: 44px;

        padding: 0 13px;

        font-size: 0.78rem;
    }

    .sv-main {
        padding-top: 12px;
    }

    .sv-screen-header {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 16px;

        padding: 20px;

        border-radius: 20px;

        text-align: center;
    }

    .sv-back-button {
        width: 100%;
    }

    .sv-home-layout {
        min-height: auto;

        padding: 34px 0 20px;
    }

    .sv-home-content {
        padding: 8px 0;
    }

    .sv-home-content h1 {
        font-size:
            clamp(
                3rem,
                15vw,
                4rem
            );
    }

    .sv-description {
        font-size: 0.94rem;

        line-height: 1.72;
    }

    .sv-buttons {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .sv-primary,
    .sv-secondary {
        width: 100%;
    }

    .sv-quote {
        padding: 15px 16px;
    }

    .sv-dashboard-card,
    .sv-stat-card,
    .sv-support-option,
    .sv-community-message {
        min-height: 0;

        padding: 22px;

        border-radius: 20px;
    }

    .sv-community-message h3 {
        font-size: 1.9rem;
    }

    .sv-toast {
        right: 12px;

        bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            );

        left: 12px;

        max-width: none;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {
    .sv-header,
    .sv-main {
        width:
            min(
                100% - 18px,
                1650px
            );
    }

    .sv-logo strong {
        font-size: 0.82rem;
    }

    .sv-logo span {
        display: none;
    }

    .sv-label {
        font-size: 0.66rem;

        letter-spacing: 0.22em;
    }

    .sv-home-content h1 {
        font-size: 2.8rem;
    }

    .sv-screen-header h2 {
        font-size: 2rem;
    }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
    .sv-primary:hover,
    .sv-secondary:hover,
    .sv-back-button:hover,
    .sv-support-option:hover,
    .sv-dashboard-card:hover {
        transform: none;
    }

    .sv-nav-button,
    .sv-primary,
    .sv-secondary,
    .sv-back-button {
        min-height: 44px;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }
}