@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Space+Grotesk:wght@400;500;600;700&display=swap');


:root {
    --clr-bg-base:            #07070f;
    --clr-bg-surface:         #0d0d1a;
    --clr-bg-elevated:        #12121f;

    --clr-glass-bg:           rgba(255, 255, 255, 0.05);
    --clr-glass-bg-hover:     rgba(255, 255, 255, 0.08);
    --clr-glass-border:       rgba(255, 255, 255, 0.09);
    --clr-glass-border-hover: rgba(255, 255, 255, 0.18);

    --clr-accent-primary:     #c0392b;  /* crimson red — home */
    --clr-accent-secondary:   #c9962a;  /* deep gold */
    --clr-accent-jade:        #0d9488;  /* jade teal — cinema */
    --clr-accent-purple-gray: #7e6f9e;  /* muted purple — forum */
    --clr-accent-danger:      #ef4444;
    --clr-accent-success:     #22c55e;
    --clr-accent-warning:     #f59e0b;

    --clr-brand-from:         #c0392b;
    --clr-brand-to:           #c9962a;

    --clr-text-primary:       #f5f0e8;
    --clr-text-secondary:     #9e9494;
    --clr-text-muted:         #4a3e40;

    --clr-link:               #e6a045;
    --clr-link-hover:         #f0c060;
    --clr-link-visited:       #c9962a;
    --clr-link-active:        #b87333;
    --clr-link-nav:           #d4c8b8;
    --clr-link-nav-hover:     #f5f0e8;
    --clr-link-nav-active:    #e6a045;

    --clr-header-bg:          rgba(7, 7, 15, 0.80);
    --clr-header-border:      rgba(255, 255, 255, 0.07);

    --clr-discord-brand:      #5865f2;
    --clr-discord-online:     #57f287;
    --clr-discord-idle:       #fee75c;
    --clr-discord-dnd:        #ed4245;
    --clr-discord-offline:    #747f8d;

    --bg-home:                url('assets/bg-home.png');
    --bg-wiki:                url('assets/bg-utils.png');
    --bg-cinema:              url('assets/bg-utils.png');
    --bg-forum:               url('assets/bg-utils.png');
    --bg-legal:               url('assets/bg-utils.png');
    --bg-about:               url('assets/bg-utils.png');
    --bg-contact:             url('assets/bg-utils.png');
    --bg-error:               url('assets/bg-error.png');
    --bg-maintenance:         url('assets/bg-maintenance.png');
    --bg-login:               url('assets/bg-login.png');
    
    --asset-warrior-guarding: url('assets/man-guarding.png');
    --asset-warrior-accepting:url('assets/man-guarding.png');
    --asset-warrior-bowing:   url('assets/man-guarding.png');

    --font-sans:    'Quicksand', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Quicksand', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    --shadow-sm:           0 1px 3px  rgba(0, 0, 0, 0.4);
    --shadow-md:           0 4px 8px  rgba(0, 0, 0, 0.5);
    --shadow-lg:           0 10px 20px rgba(0, 0, 0, 0.6);
    --shadow-xl:           0 20px 40px rgba(0, 0, 0, 0.7);
    --shadow-glow-primary:   0 0 24px rgba(192, 57, 43, 0.40);  /* overridden per page */
    --shadow-glow-secondary: 0 0 24px rgba(201, 150, 42, 0.40);

    --transition-fast: 120ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 380ms ease;

    --z-base:     0;
    --z-above:    10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-header:   300;
    --z-modal:    400;
    --z-toast:    500;

    --header-height:  68px;
    --content-max:    1200px;
    --content-narrow: 780px;
    --content-wide:   1440px;
}



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


html
{
    font-size:                16px;
    scroll-behavior:        smooth;
    -webkit-text-size-adjust: 100%;
}


body
{
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-base);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body::before
{
    content: '';
    position: fixed;
    inset: 0;
    background:          var(--background);
    background-size:     cover;
    background-position: center;
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
}


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


a
{
    text-decoration: none;
    transition:      color var(--transition-fast);
    color:           var(--clr-link);
}
a:hover   { color: var(--clr-link-hover);   }
a:visited { color: var(--clr-link-visited); }
a:active  { color: var(--clr-link-active);  }


h1, h2, h3, h4, h5, h6
{
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--clr-text-primary);
}


ul, ol { list-style: none; }


button
{
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select
{
    font-family: inherit;
    font-size:   inherit;
}

::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: var(--clr-bg-surface); }
::-webkit-scrollbar-thumb   { background: var(--clr-glass-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-muted); }





@media (max-width: 1024px)
{
    .footer-grid  { grid-template-columns: 1fr 1fr; }
    .grid-4       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px)
{
    .container    { padding-inline: var(--space-4); }
    .footer-grid  { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .section      { padding-block: var(--space-10); }
    .page-hero__subtitle { font-size: var(--text-base); }
}

@media (max-width: 480px)
{
    .grid-4       { grid-template-columns: 1fr; }
    .btn-lg       { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
}


/* ═══════════════════════════════════════════════════════════
   Shared utilities
   ═══════════════════════════════════════════════════════════ */

/* ─── Page-center: vertically + horizontally centers content */

.page-center
{
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    /* extra right/bottom space for corner characters */
    padding:         var(--space-16) calc(var(--space-6) + 5rem) calc(var(--space-16) + 1.5rem) var(--space-6);
    min-height:      calc(100dvh - var(--header-height));
    /* no overflow-y: auto — that would clip position:absolute children */
}


/* ─── Buttons ─────────────────────────────────────────────── */

.btn
{
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         var(--space-3) var(--space-8);
    border-radius:   var(--radius-md);
    font-family:     var(--font-display);
    font-size:       var(--text-base);
    font-weight:     600;
    text-decoration: none;
    transition:      all var(--transition-base);
    cursor:          pointer;
    border:          none;
    white-space:     nowrap;
}

.btn-primary
{
    background: linear-gradient(135deg, var(--clr-brand-from), var(--clr-brand-to));
    color:      #fff;
    box-shadow: var(--shadow-glow-primary);
}

.btn-primary:hover
{
    opacity:    0.9;
    box-shadow: 0 0 32px rgba(192, 57, 43, 0.6);
    color:      #fff;
    transform:  translateY(-2px);
}

.btn-outline
{
    background:     var(--clr-glass-bg);
    color:          var(--clr-text-primary);
    border:         1px solid var(--clr-glass-border);
    backdrop-filter: blur(10px);
}

.btn-outline:hover
{
    background:    var(--clr-glass-bg-hover);
    border-color:  var(--clr-glass-border-hover);
    color:         var(--clr-text-primary);
    transform:     translateY(-2px);
}

.btn-discord
{
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-3);
    padding:         var(--space-3) var(--space-6);
    background:      var(--clr-discord-brand);
    color:           #fff;
    border-radius:   var(--radius-md);
    font-family:     var(--font-display);
    font-size:       var(--text-sm);
    font-weight:     600;
    border:          none;
    cursor:          pointer;
    transition:      all var(--transition-base);
    width:           100%;
    text-decoration: none;
}

.btn-discord:hover
{
    background: #4752c4;
    transform:  translateY(-1px);
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
    color:      #fff;
}

.btn-discord ion-icon { font-size: 1.25rem; }


/* ─── Auth / status card ──────────────────────────────────── */

.auth-card
{
    position:        relative;
    overflow:        visible;
    width:           360px;
    max-width:       calc(100vw - var(--space-8));
    background:      rgba(13, 13, 26, 0.88);
    border:          1px solid var(--clr-glass-border);
    border-radius:   var(--radius-xl);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding:         var(--space-10) var(--space-8);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--space-5);
    box-shadow:      var(--shadow-xl), 0 0 60px rgba(192, 57, 43, 0.12);
    text-align:      center;
}

.auth-card .card-subtitle
{
    font-size:   var(--text-sm);
    color:       var(--clr-text-secondary);
    line-height: 1.6;
}

.auth-card .character
{
    width:        140px;
    height:       140px;
    object-fit:   contain;
    filter:       drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
    flex-shrink:  0;
}

/* ─── Corner character — positioned at card's bottom-right ── */

.character-corner
{
    position:       absolute;
    right:          0;
    bottom:         0;
    width:          160px;
    height:         auto;
    /* fixed offsets: ~half outside right, slightly below bottom */
    transform:      translate(50%, 12%);
    z-index:        2;
    pointer-events: none;
    object-fit:     contain;
    filter:         drop-shadow(0 4px 20px rgba(0, 0, 0, 0.6));
}


/* ─── Loading spinner ─────────────────────────────────────── */

.spinner
{
    width:       48px;
    height:      48px;
    border:      3px solid var(--clr-glass-border);
    border-top-color: var(--clr-accent-primary);
    border-radius: 50%;
    animation:   spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ─── Page-label (header center on utility pages) ─────────── */

.page-label
{
    font-family:    var(--font-display);
    font-size:      var(--text-sm);
    font-weight:    500;
    color:          var(--clr-text-secondary);
    letter-spacing: 0.04em;
    white-space:    nowrap;
}