/* ===============================================================
   SHARED BASE STYLES

   IMPORTANT: this file is loaded by BOTH templates/index.html and
   templates/admin.html (admin loads it before admin.css and builds
   on top of it). Anything added here affects the admin panel too.

   The public leaderboard's own styling now lives in
   frontend/src/leaderboard.css, namespaced under `lb-`. Add board
   styles there, not here.
   =============================================================== */

:root
{
    --iconic : #e10600;
    --background:#15151e
}

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


@font-face {
    font-family: "f1"; /* The name you'll use in your CSS */
    src: url("/static/fonts/Vercetti-Regular.ttf") format("truetype"); /* Correct path and format for TTF */
    font-weight: normal; /* Use 'normal' unless the font is specifically 'light' */
    font-style: normal;
}
body {
    font-family: "f1", sans-serif;
    color: white;
    font-weight: 300;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative; /* needed for the pseudo-element */
    background: var(--background);
}

.bg-img {
    position: fixed;      /* stays in place even when scrolling */
    top: 0;
    left: 0;
    width: 100vw;         /* full viewport width */
    height: 100vh;        /* full viewport height */
    object-fit: cover;    /* cover the viewport without distortion */
    z-index: -1;          /* behind everything */
    pointer-events: none; /* allows clicks through the image */
    opacity: 0.25;        /* adjust transparency */
}



.rna{
    color: rgb(255, 234, 234);
    font-size: max(1.5vw,1rem);
    font-weight: 100;
    font-family: "Racing Sans One", sans-serif; 
}
.header {
    font-family: "Racing Sans One", sans-serif; 
    display: flex;
    align-items: center;
    align-items: center;
    justify-content: center;
    background-color: #2b050533;
    backdrop-filter: blur(6px); 
    
}

.header h1
{
    color: rgb(255, 234, 234);
    font-size: max(2vw,1.2rem);
}
.header {
    position: relative;       /* so img is positioned inside this box */
    display: flex;
    flex-direction: column;
    align-items: center;      /* center horizontally */
    justify-content: center;  /* center vertically */
    padding: 0.5rem 1rem;
    text-align: center;
    overflow: hidden;         /* keep image inside */
}

.header .streaks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;        /* keep ratio and fill box */
    z-index: -1;              /* behind text */
    opacity: 0.2;             /* optional: subtle */
}


/* ---------------------------------------------------------------
   Admin table primitives.
   Retained here because templates/admin.html's .leaderboard-row
   depends on these as its base; admin.css only partially overrides
   them. The public board no longer uses either class.
   --------------------------------------------------------------- */
.position {
    font-weight: bold;
    font-size: 1rem;
    min-width: 40px;
    text-align: center;
    margin-right: 15px;
    opacity: 0.9;
}

.player-name {
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 2px;
}


@media (max-width: 768px) {
    .header h1 {
        font-size: 2rem;
    }
}