/* ========================================================================
   GLOBAL
   ===================================================================== */
:root{
    --gap:20px;            /* боковой «буфер» */
    --bg:#001038;
    --blue:#0047FF;
    --blue-dark:#0039d6;
    --radius:8px;
    --font-main:'Inter',sans-serif;
}

/* ----- базовый фон, шрифт, полное скрытие скроллов ----- */
html,body {
    height:100%;
    margin:0;
    background:var(--bg);
    color:#fff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    overflow:hidden;
    overscroll-behavior:none;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{display:none;}   /* Chrome / Safari */

/* ----- flex-центрирование на всём экране ----- */
body{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ========================================================================
   OUTER WRAPPER (оставляет «воздух» по бокам)
   ===================================================================== */
.content{
    width:100%;
    height:100%;
    padding:0 var(--gap);
    box-sizing:border-box;

    display:flex;
    justify-content:center;
    align-items:center;         /* вертикальное центрирование */
}

/* ========================================================================
   MAIN BLOCKS
   ===================================================================== */

/* Лобби / игровой интерфейс */
.inner {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 1;
    max-height: 100%;
    overflow: hidden;
	padding: 12px;
}

/* Авторизация */
.auth-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========================================================================
   HEADINGS
   ===================================================================== */
h1,
.auth-title {
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 12px; /* ← вот оно */
}



/* ========================================================================
   INPUTS
   ===================================================================== */
.auth-input{
    width:100%;
    padding:16px;
    font-size:18px;
    border:none;
    border-radius:var(--radius);
    box-sizing:border-box;
    background:#fff;
    color:#000;
}
input, button, select {
      /* gap: 12px; */
    padding: 8px;
    font-size: 16px;
    border-radius: var(--radius);
}


.error {
    color: red;
}

.message {
    color: green;
    font-weight: bold;
    margin-top: 10px;
}

.skins img {
    width: 70px;
    /* margin: 10px; */
    cursor: pointer;
    border: 3px solid transparent;
}

.skins img.selected {
    border-color: #00f;
}

/* ========================================================================
   SKINS SELECTOR
   ===================================================================== */
.skins{
    display:flex;
    justify-content:center;
    gap:12px;
}
.skins img{
    width:70px;
    border:3px solid transparent;
    border-radius:6px;
    cursor:pointer;
    transition:.2s;
}
.skins img.selected       {border-color:var(--blue);}
.skins img:hover:not(.selected){transform:scale(1.05);}

/* ========================================================================
   BUTTONS
   ===================================================================== */
.btn-robuxup {
    width: 100%;
    height: 46px;
    font-size: 17px;
    border: none;
    border-radius: var(--radius); /* ← только это */
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    box-shadow: inset 1px 4px 8px rgba(34,60,80,.42);
    transition: .2s;
}


.btn-robuxup:hover{background:var(--blue-dark)}

/* ========================================================================
   MEDIA QUERIES
   ===================================================================== */
@media(max-width:480px){
    :root{--gap:12px;}
    h1,.auth-title   {font-size:28px;}
    .auth-input      {padding:12px;font-size:16px;}
    .skins img       {width:80px;}
    .btn-robuxup     {height:70px;font-size:15px;}
}

@media(max-height:430px) and (orientation:landscape){
    :root{--gap:16px;}
    h1,.auth-title   {font-size:20px;}
    .auth-input      {padding:10px;font-size:14px;}
    .skins img       {width: 40px;}
    .btn-robuxup     {height:36px;font-size:14px;}
}
@media (max-width: 360px), (max-height: 500px) {
    h1, .auth-title { font-size: 22px; }
    .auth-input { padding: 10px; font-size: 14px; }
    /* .skins img { width: 40px; } */
    .btn-robuxup { height: 34px; font-size: 13px; }
    .inner { gap: 8px; }
}

html, body {
    touch-action: none;
    -ms-touch-action: none;         /* IE/Edge */
    overscroll-behavior: none;
}
input, select, textarea {
    font-size: 16px !important;
}
form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ← Растягивает по краям */
    width: 100%;
    font-size: 38px;
    margin-bottom: 10px;
}


.info-emoji {
    font-size: 32px;
    cursor: pointer;
    animation: pulse 1.5s ease-in-out infinite;
    transition: transform 0.3s;
}

.info-emoji:hover {
    transform: scale(1.2);
}

@keyframes pulse {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}



.lobby-title {
    display: flex;
    align-items: center;
}

.info-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex; /* ← важно! */
    justify-content: center;
    align-items: center;
    z-index: 5;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.info-popup.show {
    opacity: 1;
    pointer-events: all;
}


.info-text {
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    max-width: 340px;
}

.info-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
}
body.no-scroll .content {
    filter: blur(6px);
    transition: filter 0.4s ease;
}
@media (max-height: 430px), (max-width: 420px) {
    .info-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .info-close {
        top: 10px;
        right: 10px;
        font-size: 20px;
    }
}



.logout-fixed:hover {
    transform: scale(1.15);
}
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logout-btn {
    font-size: 28px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.logout-btn:hover {
    transform: scale(1.15);
}
.header-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #001038;
    /* z-index: 1002; /* Высокий z-index */ */
}

.back-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
.back-to-home {
    color: #aaa;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
}