@font-face {
    font-family: 'CatComic';
    src: url('../../fonts/CatComic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


* {
    box-sizing: border-box;
}

body {
    background-color: #000000;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    touch-action: none;
    font-family: 'Montserrat', sans-serif;
}

#lobbyContainer {
    width: 100vw;
    height: 100vh;
    max-width: calc(100vh * (9 / 16));
    max-height: 100vh;
    aspect-ratio: 9 / 16;
    background-color: #ffffff;
    background-image: url('../../img/bg-pattern.png');
    background-repeat: repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 24px 20px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
}

.top-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.user-profile-area {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 12px 4px 6px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.username-tag {
    font-size: 13px;
    font-weight: 700;
    color: #333333;
}

.icon-profile, .icon-config {
    width: 34px;
    height: 34px;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.icon-config:active {
    transform: scale(0.9) rotate(45deg);
}

.main-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 6px;
}

.logo {
    max-width: 200px;
    width: 52%;
    height: auto;
    object-fit: contain;
}

.score-bubble {
    position: relative;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 14px;
    padding: 8px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
    margin-bottom: 5px;
}

.score-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.45) transparent transparent transparent;
}

.score-text {
    font-size: 12px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.score-number {
    font-family: 'CatComic', sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 1px;
}

.score-unit {
    font-family: 'CatComic', sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #ffffff;
    text-transform: uppercase;
}

.characters-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 40vh;
    overflow: hidden;
}

.fueguitos-img {
    max-width: 140%;
    max-height: 140%;
    object-fit: contain;
}

.button-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.btn-play {
    width: 80%;
    max-width: 260px;
    padding: 14px 20px;
    border-radius: 16px;
    font-family: 'CatComic', sans-serif;
    font-size: 26px;
    letter-spacing: 1.5px;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #e82e13, #ea6400);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(232, 46, 19, 0.4);
    animation: flotarBoton 2s ease-in-out infinite;
    transition: transform 0.1s ease, filter 0.1s ease;
}

@keyframes flotarBoton {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.btn-play:active {
    transform: scale(0.94) translateY(2px) !important;
    animation: none;
    filter: brightness(0.9);
}

.btn-positions {
    width: 65%;
    max-width: 210px;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background-color: #dddddd;
    color: #333333;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: transform 0.1s ease, background-color 0.1s ease;
}

.btn-positions:active {
    transform: scale(0.95);
    background-color: #cccccc;
}

.icon-svg-btn {
    width: 18px;
    height: 18px;
}

.btn-login-square {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #EA6400, #E82516);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(232, 37, 22, 0.3);
    transition: transform 0.1s ease, filter 0.1s ease;
    margin-top: 2px;
}

.btn-login-square:active {
    transform: scale(0.93);
    filter: brightness(0.9);
}

.icon-user-square {
    width: 24px;
    height: 24px;
}

.main-footer {
    position: relative;
    top: 2%;
    font-size: 11px;
    color: #555555;
    font-weight: 500;
    opacity: 0.5;
    text-align: center;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    transition: background 0.3s ease;
}

.modal-overlay.mostrar {
    background: rgba(0, 0, 0, 0.72);
    pointer-events: auto;
}

.picao-card-modal {
    width: 82%;
    max-width: 315px;
    background-color: #FFFFFF;
    background-image: url('../../img/gameover/patron_picao.png');
    background-repeat: repeat;
    background-size: 210px;
    border-radius: 24px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    position: relative;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.mostrar .picao-card-modal {
    opacity: 1;
    transform: scale(1);
}

.modal-picao-logo {
    max-width: 140px;
    height: auto;
    object-fit: contain;
    margin-bottom: 2px;
}

.modal-picao-title {
    font-family: 'CatComic', sans-serif;
    color: #681C0C;
    font-size: 38px;
    margin: 0 0 14px 0;
    line-height: 1;
    letter-spacing: 0.5px;
}

.modal-title-ajustes {
    color: #ADADAD;
    margin-top: 16px;
    margin-bottom: 18px;
}

.pause-icon-container {
    margin-bottom: 6px;
}

.pause-icon-svg {
    width: 65px;
    height: 65px;
}

.switches-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch-icon {
    width: 26px;
    height: 26px;
    color: #aaaaaa;
}

.switch-divider {
    width: 1px;
    height: 30px;
    background-color: #dddddd;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #b8b8b8;
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #EA6400, #E82516);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.modal-picao-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.btn-picao-orange {
    width: 100%;
    padding: 12px 10px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #EA6400, #E82516);
    color: #FFFFFF;
    font-family: 'CatComic', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(232, 37, 22, 0.35);
    transition: transform 0.1s ease, filter 0.1s ease;
}

.btn-picao-orange:active {
    transform: scale(0.96);
    filter: brightness(0.92);
}

.btn-picao-dark {
    width: 100%;
    padding: 10px 10px;
    border-radius: 12px;
    border: none;
    background-color: #5c180a;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(92, 24, 10, 0.3);
    transition: transform 0.1s ease, background-color 0.1s ease;
}

.btn-picao-dark:active {
    transform: scale(0.96);
    background-color: #451207;
}

.floating-popup-box {
    width: 90%;
    max-width: 340px;
    background-color: #ffffff;
    background-image: url('../../img/bg-pattern.png');
    background-repeat: repeat;
    border-radius: 24px;
    padding: 22px 18px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(234, 88, 4, 0.2);
    position: relative;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-overlay.mostrar .floating-popup-box {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.pos-header-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}

.pos-main-title {
    font-family: 'CatComic', sans-serif;
    color: #EA5804;
    font-size: 23px;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pos-subtitle {
    font-size: 11px;
    color: #777777;
    font-weight: 700;
    margin: 2px 0 6px 0;
    text-transform: uppercase;
}

.pos-header-img {
    width: 65%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
    margin-top: 2px;
    margin-bottom: 4px;
}

.pos-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 10px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 44vh;
    overflow-y: auto;
    margin-bottom: 12px;
}

.top3-container {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.top-card {
    flex: 1;
    background: #fdfdfd;
    border-radius: 12px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    border: 1.5px solid #eeeeee;
}

.top-card.oro {
    background: linear-gradient(135deg, #fffcf0, #fff3c4);
    border-color: #ffd700;
}

.top-card.plata {
    background: linear-gradient(135deg, #f8f9fa, #e2e8f0);
    border-color: #cbd5e1;
}

.top-card.bronce {
    background: linear-gradient(135deg, #fffaf5, #fed7aa);
    border-color: #fb923c;
}

.top-badge {
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 4px;
}

.top-avatar-frame {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-name {
    font-size: 10px;
    font-weight: 700;
    color: #333333;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.top-score {
    font-family: 'CatComic', sans-serif;
    font-size: 13px;
    color: #EA5804;
}

.pos-list-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pos-list-item {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-rank {
    font-family: 'CatComic', sans-serif;
    font-size: 13px;
    color: #64748b;
    width: 28px;
}

.pos-item-user {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.pos-item-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #cbd5e1;
}

.pos-item-name {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}

.pos-item-score {
    font-family: 'CatComic', sans-serif;
    font-size: 15px;
    color: #EA5804;
}

.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
    pointer-events: none;
    transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-modal-overlay.mostrar {
    background-color: rgba(0, 0, 0, 0.72);
    pointer-events: auto;
}

.auth-container {
    width: 100vw;
    height: 100vh;
    max-width: calc(100vh * (9 / 16));
    max-height: 100vh;
    aspect-ratio: 9 / 16;
    background-color: #ffffff;
    background-image: url('../../img/bg-pattern.png');
    background-repeat: repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px 14px 20px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.94) translateY(10px);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-overlay.mostrar .auth-container {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.auth-logo-area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* LOGO MÁS PEQUEÑO EN REGISTRO */
.auth-logo {
    max-width: 135px;
    width: 42%;
    height: auto;
    object-fit: contain;
}

.auth-card {
    width: 100%;
    max-width: 330px;
    background: #ffffff;
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-tabs {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 15px;
    margin-bottom: 12px;
}

.auth-tab {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 800;
    color: #aaaaaa;
    cursor: pointer;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.auth-tab.active {
    color: #EA5804;
    border-bottom: 2px solid #EA5804;
}

.auth-form-animated {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-form-animated.cambiando {
    opacity: 0;
    transform: translateY(-8px);
}

#formAuth {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-input-group {
    width: 100%;
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 9px 12px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input-group:focus-within {
    border-color: #EA5804;
    box-shadow: 0 0 0 3px rgba(234, 88, 4, 0.1);
}

.auth-input-icon {
    width: 18px;
    height: 18px;
    color: #EA5804;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-input-icon svg {
    width: 16px;
    height: 16px;
}

.auth-input-group input {
    border: none;
    outline: none;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #333333;
    background: transparent;
}

.auth-input-group input::placeholder {
    color: #b0b0b0;
    font-weight: 500;
}

.btn-photo-upload {
    width: 100%;
    background: #62efa6;
    color: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(98, 239, 166, 0.3);
    transition: transform 0.1s ease, filter 0.1s ease;
}

.btn-photo-upload:active {
    transform: scale(0.97);
    filter: brightness(0.95);
}

.icon-camera {
    display: flex;
    align-items: center;
}

.btn-auth-submit {
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #e82e13, #ea6400);
    color: #ffffff;
    font-family: 'CatComic', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(232, 46, 19, 0.35);
    transition: transform 0.1s ease, filter 0.1s ease;
}

.btn-auth-submit:active {
    transform: scale(0.96);
    filter: brightness(0.92);
}

.auth-footer {
    font-size: 11px;
    color: #777777;
    font-weight: 500;
    opacity: 0.6;
    text-align: center;
    margin-top: 2px;
}

#canvasJuego {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    display: block;
    object-fit: fill;
    aspect-ratio: auto;
    background: #102817;
    margin: 0;
    touch-action: none;
}

.alerta-nivel-popup {
    position: fixed;
    top: 135px;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    background: linear-gradient(135deg, rgba(20, 25, 20, 0.92), rgba(10, 15, 10, 0.95));
    border: 1.5px solid rgba(191, 255, 0, 0.5);
    border-radius: 20px;
    padding: 10px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(191, 255, 0, 0.15);
    z-index: 95;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
    pointer-events: none;
}

.alerta-nivel-popup.mostrar {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.alerta-popup-titulo {
    font-family: 'CatComic', sans-serif;
    color: #EA5804;
    font-size: 18px;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.alerta-popup-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

.alerta-record-popup {
    position: fixed;
    top: 135px;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    background: linear-gradient(135deg, rgba(40, 30, 5, 0.95), rgba(20, 15, 2, 0.98));
    border: 2px solid rgba(255, 215, 0, 0.8);
    border-radius: 20px;
    padding: 14px 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.35);
    z-index: 160;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
    pointer-events: none;
}

.alerta-record-popup.mostrar {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.alerta-record-titulo {
    font-family: 'CatComic', sans-serif;
    color: #ffd700;
    font-size: 21px;
    letter-spacing: 1.2px;
    margin: 0;
    text-shadow: 0 2px 6px rgba(255, 140, 0, 0.6);
    white-space: nowrap;
}

.gameover-card {
    width: 82%;
    max-width: 315px;
    background-color: #FFFFFF;
    background-image: url('../../img/gameover/patron_picao.png');
    background-repeat: repeat;
    background-size: 210px;
    border-radius: 24px;
    padding: 28px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    position: relative;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.mostrar .gameover-card,
.gameover-card.mostrar-card {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.go-banner-record {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 290px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.go-banner-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.go-banner-text {
    position: absolute;
    font-family: 'CatComic', sans-serif;
    color: #FFFFFF;
    font-size: 26px;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    top: 42%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.go-title {
    font-family: 'CatComic', sans-serif;
    color: #681C0C;
    font-size: 50px;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.5px;
}

.go-score {
    font-family: 'CatComic', sans-serif;
    color: #EA5804;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 2px;
}

.go-record-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #681C0C;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.go-avatar-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 2px 0 10px 0;
}

.go-avatar {
    max-width: 105px;
    height: auto;
    object-fit: contain;
}

.go-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.btn-play-again {
    width: 100%;
    padding: 11px 10px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #EA6400, #E82516);
    color: #FFFFFF;
    font-family: 'CatComic', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(232, 37, 22, 0.3);
    animation: flotarGameover 2.2s ease-in-out infinite;
    transition: transform 0.1s ease;
}

@keyframes flotarGameover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.btn-play-again:active {
    transform: scale(0.96);
}

.btn-ads {
    width: 85%;
    padding: 9px 8px;
    border-radius: 12px;
    border: none;
    background-color: #681C0C;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: transform 0.1s ease, background-color 0.1s ease;
}

.btn-ads:active {
    transform: scale(0.96);
    background-color: #521509;
}

.icon-ads {
    width: 16px;
    height: 16px;
}

.txt-ads-bold {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
}

.txt-ads-light {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    opacity: 0.9;
}

.btn-home {
    background: #F0F0F0;
    border: 1.5px solid #E0E0E0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    margin-top: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn-home:hover {
    background-color: #E5E5E5;
}

.btn-home:active {
    transform: scale(0.90);
    background-color: #D8D8D8;
}

.icon-home {
    width: 20px;
    height: 20px;
}

.profile-modal-container {
    width: 90%;
    max-width: 350px;
    height: auto;
    max-height: 90vh;
    border-radius: 24px;
    padding: 14px 18px 18px 18px !important;
    overflow-y: auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

.profile-header-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.profile-close-btn {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-weight: 700;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.profile-avatar-frame {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 3.5px solid #EA5804;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 12px rgba(234,88,4,0.2);
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info-text {
    text-align: center;
    margin-top: 0;
}

.profile-name-title {
    margin: 0;
    font-family: 'CatComic', sans-serif;
    font-size: 26px;
    color: #1e293b;
    line-height: 1.1;
}

.profile-location-sub {
    margin: 2px 0 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.profile-record-box {
    width: 100%;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1.5px solid #fdba74;
    border-radius: 14px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(234,88,4,0.06);
}

.profile-record-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-record-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EA5804;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.profile-record-title {
    font-size: 11px;
    font-weight: 800;
    color: #9a3412;
}

.profile-record-ranking {
    font-size: 10px;
    font-weight: 700;
    color: #c2410c;
}

.profile-record-points {
    font-family: 'CatComic', sans-serif;
    font-size: 24px;
    color: #EA5804;
}

.btn-edit-profile-gray {
    width: 100%;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    background-color: #f1f5f9;
    color: #334155;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.profile-history-section {
    width: 100%;
    border-top: 1.5px solid #e2e8f0;
    padding-top: 6px;
    margin-top: 0;
}

.profile-history-title {
    margin: 0 0 4px 0;
    color: #681C0C;
    font-size: 12px !important;;
    font-family: 'Montserrat', sans-serif !important; /* Cambia 'Montserrat' por la tipografía que quieras */
    letter-spacing: -0.5px;                          /* Espaciado horizontal entre letras */
    font-weight: 800 !important;
    text-align: center !important;;
}

.profile-history-scroll {
    width: 100%;
    max-height: 110px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.btn-logout-red {
    background: #fee2e2;
    color: #991b1b;
    border: 1.5px solid #fecaca;
    border-radius: 12px;
    width: 100%;
    padding: 8px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

/* Foto de perfil circular en el lobby */
.user-profile-area img, 
.icon-profile {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* --- Estilo base para las nubes en gris clarito sólido --- */
.nubeGris {
    position: absolute;
    width: 140px;
    height: 50px;
    background: #e2e8f0; /* Gris clarito sólido y elegante */
    border-radius: 50px;
    animation: moverNubesGris linear infinite;
    right: -200px;
    z-index: 1;
    opacity: 60%;
}

/* --- Efecto de formitas redondas de la nube --- */
.nubeGris::before, .nubeGris::after {
    content: '';
    position: absolute;
    background: #e2e8f0; /* Mismo gris clarito sólido */
    border-radius: 50%;
}

.nubeGris::before {
    width: 65px;
    height: 65px;
    top: -32px;
    left: 22px;
}

.nubeGris::after {
    width: 50px;
    height: 50px;
    top: -22px;
    right: 25px;
}

/* --- Animación de desplazamiento --- */
@keyframes moverNubesGris {
    0% {
        transform: translateX(0) scale(var(--nube-scale, 1));
    }
    100% {
        transform: translateX(calc(-100vw - 300px)) scale(var(--nube-scale, 1));
    }
}


/* Juego único vertical: ocupa la pantalla en móviles y tablets. */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { background: #102817; }
@media (min-aspect-ratio: 4/3) {
  #canvasJuego { left: 50%; right: auto; width: min(100vw, 75dvh); transform: translateX(-50%); }
}


/* ==========================================================================
   ESCALA PROPORCIONAL DE INTERFAZ
   --u equivale a 1px en un móvil de 390x660 y crece/encoge según la pantalla
   (se limita por ancho o por alto, lo que sea menor). Todo el lobby, las
   ventanas, las alertas y la carga se dimensionan con "Nu" = N * --u, así
   se ven igual de proporcionados en móvil, tablet y escritorio.
   ========================================================================== */
:root {
  --u: clamp(0.7px, min(100vw / 390, 100dvh / 660), 2.4px);
  --stage-w: min(100vw, 75dvh); /* columna 3:4 usada en escritorio para la carga */
}

/* ---------- LOBBY ---------- */
#lobbyContainer.game-container {
  width: 100vw; height: 100dvh; min-height: 100dvh; max-width: none; max-height: none;
  aspect-ratio: auto; margin: 0; border-radius: 0;
  padding: max(calc(24 * var(--u)), env(safe-area-inset-top)) max(calc(20 * var(--u)), env(safe-area-inset-right)) max(calc(20 * var(--u)), env(safe-area-inset-bottom)) max(calc(20 * var(--u)), env(safe-area-inset-left));
}
body .user-profile-area { gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); border-radius: calc(20 * var(--u)); }
body .username-tag { font-size: calc(13 * var(--u)); }
body .icon-profile, body .icon-config { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
body .main-header { gap: calc(6 * var(--u)); }
body .logo { width: calc(210 * var(--u)); max-width: 75%; }
body .score-bubble { border-radius: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(24 * var(--u)); min-width: calc(160 * var(--u)); margin-bottom: calc(5 * var(--u)); }
body .score-bubble::after { bottom: calc(-8 * var(--u)); border-width: calc(8 * var(--u)) calc(8 * var(--u)) 0 calc(8 * var(--u)); }
body .score-text { font-size: calc(12 * var(--u)); letter-spacing: calc(0.5 * var(--u)); }
body .score-number, body .score-unit { font-size: calc(26 * var(--u)); letter-spacing: calc(1 * var(--u)); }
body .characters-area { max-height: none; min-height: 0; }
body .fueguitos-img { width: min(100%, calc(360 * var(--u))); max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
body .button-area { gap: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u)); }
body .btn-play { width: calc(260 * var(--u)); max-width: 86%; padding: calc(14 * var(--u)) calc(20 * var(--u)); border-radius: calc(16 * var(--u)); font-size: calc(26 * var(--u)); letter-spacing: calc(1.5 * var(--u)); box-shadow: 0 calc(5 * var(--u)) calc(15 * var(--u)) rgba(232, 46, 19, 0.4); }
body .btn-positions { width: calc(210 * var(--u)); max-width: 70%; padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); font-size: calc(15 * var(--u)); gap: calc(8 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,0.2); }
body .icon-svg-btn { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
body .btn-login-square { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(14 * var(--u)); margin-top: calc(2 * var(--u)); }
body .icon-user-square { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
body .main-footer { font-size: calc(11 * var(--u)); }

/* ---------- VENTANA DE AJUSTES / PAUSA ---------- */
body .picao-card-modal { width: calc(280 * var(--u)); max-width: 92vw; padding: calc(22 * var(--u)) calc(18 * var(--u)); border-radius: calc(22 * var(--u)); background-size: calc(190 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,0.55); }
body .modal-picao-logo { max-width: calc(120 * var(--u)); margin-bottom: calc(2 * var(--u)); }
body .modal-picao-title { font-size: calc(34 * var(--u)); margin: 0 0 calc(12 * var(--u)) 0; letter-spacing: calc(0.5 * var(--u)); }
body .modal-title-ajustes { margin-top: calc(14 * var(--u)); margin-bottom: calc(16 * var(--u)); }
body .pause-icon-container { margin-bottom: calc(6 * var(--u)); }
body .pause-icon-svg { width: calc(58 * var(--u)); height: calc(58 * var(--u)); }
body .switches-container { gap: calc(14 * var(--u)); margin-bottom: calc(18 * var(--u)); }
body .switch-item { gap: calc(9 * var(--u)); }
body .switch-icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
body .switch-divider { height: calc(28 * var(--u)); }
body .toggle-switch { width: calc(48 * var(--u)); height: calc(26 * var(--u)); }
body .toggle-slider { border-radius: calc(30 * var(--u)); }
body .toggle-slider:before { height: calc(20 * var(--u)); width: calc(20 * var(--u)); left: calc(3 * var(--u)); bottom: calc(3 * var(--u)); }
body .toggle-switch input:checked + .toggle-slider:before { transform: translateX(calc(22 * var(--u))); }
body .modal-picao-buttons { gap: calc(9 * var(--u)); }
body .btn-picao-orange { padding: calc(11 * var(--u)) calc(10 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(18 * var(--u)); }
body .btn-picao-dark { padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(13 * var(--u)); }

/* ---------- GAME OVER ---------- */
body .gameover-card { width: calc(264 * var(--u)); max-width: 90vw; padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border-radius: calc(22 * var(--u)); background-size: calc(190 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,0.55); }
body .go-banner-record { top: calc(-46 * var(--u)); width: calc(250 * var(--u)); }
body .go-banner-text { font-size: calc(23 * var(--u)); letter-spacing: calc(1 * var(--u)); }
body .go-title { font-size: calc(36 * var(--u)); white-space: nowrap; letter-spacing: calc(0.5 * var(--u)); }  /* una sola línea */
body .go-score { font-size: calc(28 * var(--u)); margin-bottom: calc(2 * var(--u)); }
body .go-record-sub { font-size: calc(12 * var(--u)); margin-bottom: calc(6 * var(--u)); letter-spacing: calc(0.5 * var(--u)); }
body .go-avatar-container { margin: calc(2 * var(--u)) 0 calc(8 * var(--u)) 0; }
body .go-avatar { max-width: calc(92 * var(--u)); }
body .go-buttons { gap: calc(8 * var(--u)); }
body .btn-play-again { padding: calc(10 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(18 * var(--u)); }
body .btn-ads { width: 88%; padding: calc(8 * var(--u)); border-radius: calc(11 * var(--u)); gap: calc(5 * var(--u)); }
body .icon-ads { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
body .txt-ads-bold { font-size: calc(12 * var(--u)); }
body .txt-ads-light { font-size: calc(11 * var(--u)); }
body .btn-home { width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin-top: calc(3 * var(--u)); }
body .icon-home { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* ---------- ALERTAS EN PARTIDA (nivel / nuevo récord) ---------- */
body .alerta-nivel-popup { top: 16dvh; padding: calc(9 * var(--u)) calc(22 * var(--u)); border-radius: calc(18 * var(--u)); min-width: calc(200 * var(--u)); }
body .alerta-popup-titulo { font-size: calc(17 * var(--u)); letter-spacing: calc(1 * var(--u)); }
body .alerta-popup-sub { font-size: calc(12 * var(--u)); letter-spacing: calc(0.5 * var(--u)); }
body .alerta-record-popup { top: 16dvh; padding: calc(12 * var(--u)) calc(26 * var(--u)); border-radius: calc(18 * var(--u)); }
body .alerta-record-titulo { font-size: calc(19 * var(--u)); letter-spacing: calc(1.2 * var(--u)); }

/* ---------- POSICIONES ---------- */
body .floating-popup-box { width: calc(316 * var(--u)); max-width: 94vw; padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(22 * var(--u)); }
body .pos-header-area { margin-bottom: calc(8 * var(--u)); }
body .pos-main-title { font-size: calc(22 * var(--u)); letter-spacing: calc(1 * var(--u)); }
body .pos-subtitle { font-size: calc(11 * var(--u)); margin: calc(2 * var(--u)) 0 calc(6 * var(--u)) 0; }
body .pos-header-img { width: calc(150 * var(--u)); max-width: 70%; margin: calc(2 * var(--u)) 0 calc(4 * var(--u)) 0; }
body .pos-tabs-container { gap: calc(6 * var(--u)); margin-bottom: calc(11 * var(--u)); padding: calc(5 * var(--u)); border-radius: calc(14 * var(--u)); }
body .pos-tab-btn { padding: calc(8 * var(--u)) calc(4 * var(--u)); font-size: calc(12 * var(--u)); border-radius: calc(10 * var(--u)); }
body .pos-card { border-radius: calc(15 * var(--u)); padding: calc(11 * var(--u)) calc(9 * var(--u)); gap: calc(11 * var(--u)); margin-bottom: calc(11 * var(--u)); max-height: 44dvh; }
body .top3-container { gap: calc(6 * var(--u)); }
body .top-card { border-radius: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(4 * var(--u)); }
body .top-badge { font-size: calc(10 * var(--u)); margin-bottom: calc(4 * var(--u)); }
body .top-avatar-frame { width: calc(38 * var(--u)); height: calc(38 * var(--u)); margin-bottom: calc(4 * var(--u)); }
body .top-name { font-size: calc(10 * var(--u)); margin-bottom: calc(2 * var(--u)); }
body .top-score { font-size: calc(13 * var(--u)); }
body .pos-list-container { gap: calc(6 * var(--u)); }
body .pos-list-item { border-radius: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); }
body .pos-rank { font-size: calc(13 * var(--u)); width: calc(28 * var(--u)); }
body .pos-item-user { gap: calc(8 * var(--u)); }
body .pos-item-avatar { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
body .pos-item-name { font-size: calc(12 * var(--u)); }
body .pos-item-score { font-size: calc(15 * var(--u)); }

/* ---------- PERFIL ---------- */
body .profile-modal-container { width: calc(330 * var(--u)); max-width: 94vw; max-height: 92dvh; border-radius: calc(26 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) !important; }
body .profile-header-row { margin-bottom: calc(2 * var(--u)); }
body .profile-close-btn { width: calc(32 * var(--u)); height: calc(32 * var(--u)); font-size: calc(14 * var(--u)); }
body .profile-title-centered { font-size: calc(14 * var(--u)); margin: calc(-10 * var(--u)) 0 calc(10 * var(--u)) 0; }
body .profile-content-box { gap: calc(10 * var(--u)); }
body .profile-avatar-frame { width: calc(86 * var(--u)); height: calc(86 * var(--u)); border-width: calc(4 * var(--u)); }
body .profile-name-title { font-size: calc(25 * var(--u)); }
body .profile-location-sub { font-size: calc(12 * var(--u)); }
body .profile-record-box { border-radius: calc(15 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
body .profile-record-left { gap: calc(9 * var(--u)); }
body .profile-record-icon { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
body .profile-record-title { font-size: calc(11 * var(--u)); }
body .profile-record-ranking { font-size: calc(10.5 * var(--u)); }
body .profile-record-points { font-size: calc(25 * var(--u)); }
body .btn-edit-profile-gray { padding: calc(11 * var(--u)) calc(16 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(13 * var(--u)); }
body .btn-profile-action { padding: calc(10 * var(--u)) calc(4 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(12 * var(--u)); }
body .profile-history-section { padding-top: calc(7 * var(--u)); }
body .profile-history-title { font-size: calc(11 * var(--u)) !important; margin-bottom: calc(5 * var(--u)); }
body .profile-history-scroll { max-height: calc(110 * var(--u)); gap: calc(5 * var(--u)); }
body .btn-logout-red { padding: calc(9 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(12.5 * var(--u)); }

/* ---------- SELECTORES (país, etc.) ---------- */
body .selector-modal-box { width: calc(300 * var(--u)); max-width: 92vw; max-height: 82dvh; border-radius: calc(22 * var(--u)); padding: calc(18 * var(--u)); }
body .selector-list-scroll { gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
body .selector-item-row { padding: calc(11 * var(--u)) calc(13 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(13 * var(--u)); gap: calc(11 * var(--u)); }
body .searchable-input { padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(40 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(13 * var(--u)); }
body .flag-img { width: calc(22 * var(--u)); height: calc(15 * var(--u)); }

/* ---------- REGISTRO / LOGIN ---------- */
body .auth-container { padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u)); }
body .auth-logo { width: calc(135 * var(--u)); max-width: 50%; }
body .auth-card { max-width: calc(330 * var(--u)); border-radius: calc(20 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
body .auth-tabs { gap: calc(15 * var(--u)); margin-bottom: calc(12 * var(--u)); }
body .auth-tab { font-size: calc(13 * var(--u)); }
body .auth-form-animated, body #formAuth { gap: calc(10 * var(--u)); }
body .auth-input-group { border-radius: calc(12 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); }
body .auth-input-icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-right: calc(10 * var(--u)); }
body .auth-input-icon svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
body .auth-input-group input { font-size: calc(13 * var(--u)); }
body .btn-photo-upload { border-radius: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); font-size: calc(14 * var(--u)); gap: calc(10 * var(--u)); }
body .btn-auth-submit { padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u)); font-size: calc(24 * var(--u)); }
body .btn-oauth-google, body .btn-oauth-facebook { padding: calc(13 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u)); font-size: calc(13 * var(--u)); gap: calc(12 * var(--u)); }
body .auth-footer { font-size: calc(11 * var(--u)); }

/* ---------- ALERTAS SweetAlert ---------- */
body .picao-swal-popup { width: calc(300 * var(--u)) !important; max-width: 92vw !important; padding: calc(22 * var(--u)) calc(18 * var(--u)) !important; border-radius: calc(22 * var(--u)) !important; font-size: calc(16 * var(--u)) !important; }
body .picao-swal-confirm-btn { font-size: calc(13 * var(--u)) !important; padding: calc(11 * var(--u)) calc(26 * var(--u)) !important; border-radius: calc(12 * var(--u)) !important; }
body .picao-swal-cancel-btn { font-size: calc(13 * var(--u)) !important; padding: calc(11 * var(--u)) calc(22 * var(--u)) !important; border-radius: calc(12 * var(--u)) !important; }

/* ==========================================================================
   PANTALLA DE CARGA
   Escenario vertical 3:4 centrado (igual que en tablet vertical). En móvil y
   tablet ocupa toda la pantalla; en escritorio queda como una columna
   centrada con el fondo oscuro a los lados. loading.js usa la misma fórmula
   de --u para dibujar al personaje.
   ========================================================================== */
#loadingScreen { height: 100dvh !important; background-color: #030704 !important; }
#loadingScreen .lobbyContainer {
  width: var(--stage-w) !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important; aspect-ratio: auto !important;
  padding: max(calc(30 * var(--u)), env(safe-area-inset-top)) calc(24 * var(--u)) max(calc(20 * var(--u)), env(safe-area-inset-bottom)) calc(24 * var(--u)) !important;
}
#loadingScreen #canvasContenedorFlotante {
  width: var(--stage-w) !important; height: 100dvh !important;
  left: 50% !important; top: 0 !important; transform: translateX(-50%);
  overflow: hidden !important;
}
#loadingScreen #canvasLoadingSprite { width: 100% !important; height: 100% !important; max-width: none !important; display: block; }

#loadingScreen #tarjetaProgreso { width: calc(320 * var(--u)) !important; max-width: 90% !important; margin-top: calc(110 * var(--u)) !important; }
#tarjetaProgreso > div:nth-child(2) { padding: calc(18 * var(--u)) calc(20 * var(--u)) !important; border-radius: calc(22 * var(--u)) !important; border-width: calc(2.5 * var(--u)) !important; box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(234, 88, 4, 0.12) !important; }
#tarjetaProgreso > div:nth-child(2) > div:first-child { margin-bottom: calc(8 * var(--u)) !important; }
#tarjetaProgreso > div:nth-child(2) > div:nth-child(2) { height: calc(18 * var(--u)) !important; padding: calc(3 * var(--u)) !important; border-radius: calc(12 * var(--u)) !important; border-width: calc(2 * var(--u)) !important; }
#barraProgresoFill { border-radius: calc(7 * var(--u)) !important; }
#textoEstadoCarga { font-size: calc(10.5 * var(--u)) !important; letter-spacing: calc(1 * var(--u)) !important; }
#textoPorcentaje { font-size: calc(17 * var(--u)) !important; }
#efectoPuntoPlus { font-size: calc(20 * var(--u)) !important; top: calc(-35 * var(--u)) !important; }
#loadingScreen .main-footer { font-size: calc(11 * var(--u)) !important; margin-bottom: calc(5 * var(--u)) !important; }

/* Transición suave del mensaje (loading.js la usaba pero no existía en el CSS) */
@keyframes textoSuaveEntrada { from { opacity: 0; transform: translateY(calc(5 * var(--u))); } to { opacity: 1; transform: translateY(0); } }
.animarTextoSuave { animation: textoSuaveEntrada 0.4s ease-out both; }

/* Nubes proporcionales y recorriendo solo el ancho del escenario */
.nubeGris { width: calc(140 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(50 * var(--u)); right: calc(-200 * var(--u)); }
.nubeGris::before { width: calc(65 * var(--u)); height: calc(65 * var(--u)); top: calc(-32 * var(--u)); left: calc(22 * var(--u)); }
.nubeGris::after { width: calc(50 * var(--u)); height: calc(50 * var(--u)); top: calc(-22 * var(--u)); right: calc(25 * var(--u)); }
@keyframes moverNubesGris {
  0%   { transform: translateX(0) scale(var(--nube-scale, 1)); }
  100% { transform: translateX(calc(-1 * var(--stage-w) - 360 * var(--u))) scale(var(--nube-scale, 1)); }
}


/* Rendimiento móvil: el canvas va en su propia capa de GPU y no repinta el resto de la página */
#canvasJuego { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
@media (min-aspect-ratio: 4/3) { #canvasJuego { transform: translateX(-50%) translateZ(0); } }
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button, [onclick] { touch-action: manipulation; }


/* =====================================================================
   CLASIFICACIÓN rediseñada: podio real (2º·1º·3º) + lista con barras + "tu posición"
   ===================================================================== */
body .pos-card { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)); max-height: 54dvh; overflow: hidden; margin-bottom: 0;
    background: linear-gradient(180deg, #fff8f0 0%, #ffffff 46%); border: 1px solid rgba(234, 88, 4, .14); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .03); }
body .top3-container { display: flex; align-items: flex-end; justify-content: center; gap: calc(6 * var(--u)); flex: none; padding-top: calc(4 * var(--u)); }
.pos-msg { margin: calc(24 * var(--u)) 0; font-size: calc(12 * var(--u)); font-weight: 700; color: #94a3b8; text-align: center; }

.podio-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.podio-corona { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-bottom: calc(-4 * var(--u)); color: #f5b301; filter: drop-shadow(0 2px 2px rgba(180, 110, 0, .45)); z-index: 2; animation: podioFlota 2.4s ease-in-out infinite; }
@keyframes podioFlota { 50% { transform: translateY(calc(-3 * var(--u))); } }
.podio-av, .podio-av-vacio { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; overflow: hidden; background: #fff; border: calc(3 * var(--u)) solid var(--medalla); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .18); display: grid; place-items: center; box-sizing: border-box; }
.podio-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.podio-col.oro .podio-av { width: calc(56 * var(--u)); height: calc(56 * var(--u)); box-shadow: 0 0 calc(14 * var(--u)) rgba(255, 190, 0, .6), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .2); }
.podio-av-vacio { border-style: dashed; background: #f1f5f9; color: #cbd5e1; font: calc(18 * var(--u)) 'CatComic', sans-serif; }
.podio-nombre { width: 100%; margin-top: calc(5 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 800; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podio-pts { margin: calc(1 * var(--u)) 0 calc(5 * var(--u)); font: calc(15 * var(--u)) 'CatComic', sans-serif; color: #EA5804; line-height: 1.1; }
.podio-pts small, .pos-fila-pts small, .pos-yo-pts small { font: 700 calc(9 * var(--u)) 'Montserrat', sans-serif; color: #b45309; opacity: .8; }
.podio-base { width: 100%; height: calc(var(--h) * var(--u)); display: flex; align-items: center; justify-content: center; border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0; background: linear-gradient(180deg, var(--m1), var(--m2)); box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, .55); }
.podio-base span { font: calc(30 * var(--u)) 'CatComic', sans-serif; color: rgba(255, 255, 255, .92); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .18); }
.podio-col.oro   { --medalla: #f5b301; --m1: #ffd84d; --m2: #e0a100; }
.podio-col.plata { --medalla: #aab4c3; --m1: #d3dae4; --m2: #98a3b4; }
.podio-col.bronce{ --medalla: #d98a4e; --m1: #e9a56b; --m2: #b9692f; }
.podio-col.vacia { opacity: .45; }
.podio-col.yo .podio-nombre { color: #EA5804; }
.podio-col.yo .podio-av { outline: calc(2 * var(--u)) solid #EA5804; outline-offset: calc(1 * var(--u)); }

body .pos-list-container { display: flex; flex-direction: column; gap: calc(5 * var(--u)); flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: calc(2 * var(--u)); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #fdba74 transparent; }
.pos-fila { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; border: 1px solid #eef2f7; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(15, 23, 42, .04); }
.pos-fila.yo { background: linear-gradient(90deg, #fff1e3, #fff); border-color: #fdba74; }
.pos-fila-rank { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; color: #64748b; font: calc(12 * var(--u)) 'CatComic', sans-serif; }
.pos-fila.yo .pos-fila-rank { background: #EA5804; color: #fff; }
.pos-fila-av { flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; object-fit: cover; border: calc(2 * var(--u)) solid #fff; box-shadow: 0 0 0 1px #e2e8f0; }
.pos-fila-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.pos-fila-nombre { font-size: calc(12 * var(--u)); font-weight: 800; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-fila-nombre em { font-style: normal; margin-left: calc(4 * var(--u)); padding: calc(1 * var(--u)) calc(6 * var(--u)); border-radius: 99px; background: #EA5804; color: #fff; font-size: calc(8.5 * var(--u)); font-weight: 800; vertical-align: middle; }
.pos-fila-barra { display: block; height: calc(4 * var(--u)); border-radius: 99px; background: #f1f5f9; overflow: hidden; }
.pos-fila-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fda32a, #EA5804); }
.pos-fila-pts { flex: none; font: calc(15 * var(--u)) 'CatComic', sans-serif; color: #EA5804; }

.pos-vacio { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); padding: calc(26 * var(--u)) calc(10 * var(--u)); text-align: center; color: #94a3b8; font-size: calc(11.5 * var(--u)); font-weight: 600; }
.pos-vacio b { color: #64748b; font-size: calc(13 * var(--u)); font-weight: 800; }

.pos-yo { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(16 * var(--u)); background: linear-gradient(135deg, #f14712, #fda32a); color: #fff; box-shadow: 0 calc(3 * var(--u)) 0 #9a3412, 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(234, 88, 4, .3); }
.pos-yo[hidden] { display: none; }
.pos-yo-rank { flex: none; min-width: calc(38 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(6 * var(--u)); box-sizing: border-box; border-radius: calc(12 * var(--u)); display: grid; place-items: center; background: rgba(255, 255, 255, .22); font: calc(18 * var(--u)) 'CatComic', sans-serif; text-shadow: 0 calc(2 * var(--u)) 0 rgba(120, 30, 0, .45); }
.pos-yo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.pos-yo-info b { font-size: calc(12.5 * var(--u)); font-weight: 800; }
.pos-yo-info small { font-size: calc(10.5 * var(--u)); font-weight: 700; opacity: .92; }
.pos-yo-pts { flex: none; font: calc(20 * var(--u)) 'CatComic', sans-serif; text-shadow: 0 calc(2 * var(--u)) 0 rgba(120, 30, 0, .45); }
.pos-yo-pts small { color: #fff; }
@media (prefers-reduced-motion: reduce) { .podio-corona { animation: none; } }