@font-face{
    font-family:'BKoodak';
    src:url('../fonts/B%20Koodak%20Bold_0.ttf') format('truetype');
    font-style:normal;
    font-weight:400 900;
    font-display:swap;
}

/* =========================================================
   Parsnew — Splash / Login Screen
   Fully responsive rebuild
   ========================================================= */

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

a,
a:hover,
a:focus,
a:active{
    text-decoration:none !important;
}

html,body{
    width:100%;
    min-height:100%;
    background:#000;
}

body{
    background:url("../images/background.png") center center / cover no-repeat fixed;
    position:relative;
    min-height:100svh;
    overflow-x:hidden;
    font-family:'BKoodak',Tahoma,sans-serif;
}

@media (max-width:820px){
    body{
        background:url("../images/background_mini.png") center center / cover no-repeat fixed;
    }
}

/* dark overlay for legibility */
.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);
    z-index:1;
    pointer-events:none;
}

/* =========================================================
   CORNER BADGES (support / login-register)
   ========================================================= */

.corner-badge{
    position:absolute;
    top:clamp(14px, 2.2vw, 34px);
    z-index:100;
    display:flex;
    align-items:center;
    gap:clamp(6px, 0.6vw, 10px);
    text-decoration:none;
    background:linear-gradient(180deg, rgba(20,26,20,.55), rgba(10,14,10,.7));
    border:1.5px solid #caa24d;
    border-radius:clamp(8px, 1vw, 14px);
    padding:clamp(6px, 0.7vw, 10px) clamp(10px, 1.3vw, 18px) clamp(6px, 0.7vw, 10px) clamp(6px, 0.7vw, 10px);
    box-shadow:0 4px 14px rgba(0,0,0,.45);
    transition:transform .2s ease, filter .2s ease;
    -webkit-tap-highlight-color:transparent;
}

.corner-badge:hover{
    transform:translateY(-2px);
    filter:brightness(1.15);
}

.corner-badge--support{
    left:clamp(12px, 3vw, 48px);
    flex-direction:row-reverse;
    padding:clamp(6px, 0.7vw, 10px) clamp(6px, 0.7vw, 10px) clamp(6px, 0.7vw, 10px) clamp(10px, 1.3vw, 18px);
}
.corner-badge--account{ right:clamp(12px, 3vw, 48px); }

.corner-badge__icon{
    width:clamp(28px, 3.2vw, 46px);
    height:clamp(28px, 3.2vw, 46px);
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #3a3222, #14110a 75%);
    border:1px solid #caa24d;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f0d68c;
    flex-shrink:0;
}

.corner-badge__icon svg{
    width:55%;
    height:55%;
}

.corner-badge__label{
    color:#f0d68c;
    font-size:clamp(11px, 1.15vw, 16px);
    font-weight:700;
    white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,.7);
}

@media (max-width:560px){
    .corner-badge__label{ display:none; }
    .corner-badge{
        padding:clamp(6px, 1.6vw, 10px);
        border-radius:50%;
    }
    .corner-badge__icon{ width:clamp(34px, 8vw, 44px); height:clamp(34px, 8vw, 44px); }
}

/* =========================================================
   LOGO
   ========================================================= */

.logo{
    position:absolute;
    top:2%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:50;
    pointer-events:none;
    text-align:center;
}

.logo img{
    width:clamp(320px, 34vw, 760px);
    height:auto;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}

.logo-subtitle{
    display:none; /* subtitle is already baked into the logo artwork */
}

@media (max-width:820px){
    .logo{ top:64px; }
    .logo img{
        width:clamp(240px, 78vw, 620px);
    }
}

@media (max-width:400px){
    .logo{ top:56px; }
}

/* =========================================================
   MAIN CONTENT / BUTTONS
   ========================================================= */

.content{
    position:relative;
    z-index:2;
    width:100%;
    min-height:100svh;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(12px, 2vh, 22px);

    padding:clamp(140px, 22vh, 260px) 16px clamp(64px, 8vh, 100px);
}

.btn-login-page{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    outline:none;

    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:100%;
    max-width:450px;
    aspect-ratio:450 / 90;
    height:auto;

    transition:transform 0.2s ease, filter 0.2s ease;
    -webkit-tap-highlight-color:transparent;
}

.join-to-game{
    background:url('../images/join_to_game.png') no-repeat center center;
    background-size:contain;
}

.select-server{
    background:url('../images/select_server.png') no-repeat center center;
    background-size:contain;
    aspect-ratio:1041 / 145;
}

.login-guest{
    background:url('../images/login_guest.png') no-repeat center center;
    background-size:contain;
    aspect-ratio:1052 / 167;
}

.btn-text{
    color:#f6d365;
    font-family:'BKoodak',Tahoma,sans-serif;
    font-size:clamp(14px, 1.7vw, 20px);
    font-weight:bold;
    text-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);
}

.btn-login-page:hover{
    transform:scale(1.04);
    filter:brightness(1.2);
}

.btn-login-page:active{
    transform:scale(0.98);
    filter:brightness(0.95);
}

/* =========================================================
   FOOTER TEXT
   ========================================================= */

.footer-tagline{
    position:absolute;
    bottom:clamp(14px, 2.4vh, 28px);
    left:50%;
    transform:translateX(-50%);
    z-index:20;
    color:#e9d9a8;
    font-size:clamp(11px, 1.1vw, 15px);
    text-shadow:0 1px 4px rgba(0,0,0,.8);
    letter-spacing:.3px;
    white-space:nowrap;
    pointer-events:none;
}

.footer-version{
    position:absolute;
    bottom:clamp(10px, 1.6vh, 18px);
    left:clamp(12px, 2vw, 24px);
    z-index:20;
    color:rgba(255,255,255,.55);
    font-size:clamp(10px, 0.9vw, 13px);
    text-shadow:0 1px 3px rgba(0,0,0,.7);
    pointer-events:none;
}

@media (max-width:560px){
    .footer-tagline{
        max-width:92vw;
        white-space:normal;
        text-align:center;
    }
}

/* =========================================================
   SMALL PHONES — tighten vertical rhythm
   ========================================================= */

@media (max-width:400px){
    .content{
        gap:10px;
        padding-top:150px;
    }
}

@media (max-height:640px) and (orientation:landscape){
    .logo{ top:10px; }
    .logo img{ width:clamp(160px, 22vw, 360px); }
    .content{
        padding-top:clamp(90px, 20vh, 140px);
        gap:8px;
    }
    .footer-tagline{ display:none; }
}