/* custom.css */

/* FIX: Corrigir dupla barra de rolagem e proporções */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
    height: auto !important;
    min-height: 100vh;
}

body {
    margin: 0;
    padding: 0;
}

/* Corrigir overflow do .page que causa dupla barra */
.page {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Responsividade geral do site */
* {
    box-sizing: border-box;
}

/* Container geral */
.container, .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* Wrapper principal - Remove overflow-x para evitar barras duplas */
.wrapper, .main-wrapper, [class*="wrapper"] {
    overflow: visible;
}

/* Imagens responsivas */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Tabelas responsivas */
table {
    width: 100%;
    table-layout: auto;
}

@media (max-width: 768px) {
    table {
        font-size: 0.8rem;
    }
}

/* Prevenção de overflow em elementos de texto */
h1, h2, h3, h4, h5, h6, p, div, span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Videos e iframes responsivos */
iframe, video, embed, object {
    max-width: 100%;
    height: auto;
}

/* Ajustes customizados do site */

/* Corrigir posicionamento da imagem do personagem em telas grandes */
@media (min-width: 1200px) {
    .char {
        left: calc(50% - 52.5rem) !important; /* Ajusta para telas maiores */
    }
}

@media (min-width: 1600px) {
    .char {
        left: calc(50% - 65rem) !important; /* Ajusta ainda mais para telas muito grandes */
    }
}

@media (min-width: 1920px) {
    .char {
        left: calc(50% - 75rem) !important; /* Ajusta para telas Full HD+ */
    }
}

/* Lives section */
.lives {
    padding: 40px 0;
}

.lives__title {
    margin-bottom: 10px;
}

.lives__desc {
    max-width: 760px;
    margin-bottom: 24px;
}

.lives__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.livecard {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.livecard__media iframe {
    display: block;
}

.livecard__info {
    padding: 12px 14px 16px;
}

.livecard__title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.livecard__meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 10px;
}

.livecard__link {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lives__empty {
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Downloads page improvements */
.resources {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 40px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.resources__box {
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
    padding: 50px 40px;
    background-color: rgba(26,12,7,.95) !important;
    border: 2px solid rgba(255,194,76,.3);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,.8);
}

.resources__ttl {
    font-size: 3.2rem !important;
    margin-bottom: 40px !important;
    text-align: center;
    color: #f4d18a;
    text-shadow: 2px 2px 4px rgba(0,0,0,.8);
}

.file__title {
    font-size: 1.8rem !important;
    margin-bottom: 30px !important;
    text-align: center;
    color: #f4d18a;
    font-weight: 600;
}

.file__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.file__btn {
    padding: 15px 25px !important;
    background: linear-gradient(145deg, #2a1810, #1a0f08) !important;
    border: 2px solid rgba(255,194,76,.6) !important;
    border-radius: 8px !important;
    color: #f4d18a !important;
    text-decoration: none !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file__btn:hover {
    background: linear-gradient(145deg, #3a2420, #2a1810) !important;
    border-color: #ffc24c !important;
    color: #ffc24c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(255,194,76,.3) !important;
}

.resources__help {
    background: rgba(16,8,4,.7);
    padding: 25px;
    border-radius: 10px;
    margin: 30px 0;
    border: 1px solid rgba(255,194,76,.2);
}

.resources__help-list {
    margin: 0;
    padding-left: 20px;
    line-height: 1.6;
}

.resources__help-list li {
    margin-bottom: 8px;
    color: #d4af37;
}

.resources__tablebox {
    background: rgba(16,8,4,.7);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255,194,76,.2);
}

.table-style-1 {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.table-style-1 th,
.table-style-1 td {
    padding: 12px 15px;
    border: 1px solid rgba(255,194,76,.2);
    text-align: left;
}

.table-style-1 th {
    background: rgba(255,194,76,.15);
    color: #f4d18a;
    font-weight: 600;
    text-align: center;
}

.table-style-1 td.td-name {
    font-weight: 600;
    color: #d4af37;
    width: 200px;
}

/* Responsive improvements */
@media (max-width: 1200px) {
    .resources__box {
        width: 90%;
        padding: 40px 30px;
    }
    
    .file__list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .resources {
        padding: 30px 15px;
    }
    
    .resources__box {
        width: 95%;
        padding: 30px 20px;
        margin: 0 10px;
    }
    
    .resources__ttl {
        font-size: 2.4rem !important;
    }
    
    .file__title {
        font-size: 1.4rem !important;
    }
    
    .file__list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
    
    .file__btn {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
        min-height: 45px;
    }
    
    .table-style-1 {
        font-size: 0.85rem;
    }
    
    .table-style-1 td.td-name {
        width: auto;
    }
    
    .resources__help,
    .resources__tablebox {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {
    .resources {
        padding: 20px 10px;
        min-height: 70vh;
    }
    
    .resources__box {
        width: 98%;
        padding: 25px 15px;
        margin: 0 5px;
    }
    
    .resources__ttl {
        font-size: 2rem !important;
        margin-bottom: 30px !important;
    }
    
    .file__title {
        font-size: 1.2rem !important;
    }
    
    .file__list {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .file__btn {
        padding: 15px 20px !important;
        font-size: 1rem !important;
        min-height: 50px;
    }
    
    .resources__help,
    .resources__tablebox {
        padding: 15px 10px;
    }
    
    .table-style-1 th,
    .table-style-1 td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }
}

/* Responsividade geral adicional para todo o site */
@media (max-width: 1024px) {
    /* Navegação e header */
    .header__title {
        font-size: 2.5rem !important;
    }
    
    .header__subtitle {
        font-size: 1.8rem !important;
    }
    
    /* Botões gerais */
    .btn, .button {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    /* Seções gerais */
    section {
        padding: 40px 20px;
    }
}

/* ===== Players online overrides (force-loaded file) ===== */
/* Ensure wrapper is positioned relative to logo and not too large */
/* If .logo has been removed (no image), make .logo static so wrapper
   positions relative to .navigation__logotype (which already is relative). */
.navigation__logotype {
    position: relative !important;
}
.navigation__logotype > .logo {
    position: static !important;
    display: inline-flex !important;
}

#players-online-wrapper {
    position: absolute;
    /* place at left side of the logotype area (where the logo sits) */
    left: 1120px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999 !important;
    margin-top: 0 !important;
    pointer-events: auto !important;
}

/* Force SVG size to small icon (overrides inline width/height) */
#players-online-wrapper #players-online-circle svg { width: 36px !important; height: 36px !important; display: block !important; }

/* Make sure SVG content is visible when scaled */
#players-online-wrapper #players-online-circle svg { overflow: visible; }

/* Aquarela spin applied to the circle element */
#players-online-wrapper #players-online-circle circle#aquarela-circle {
    -webkit-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    animation: players-spin 6s linear infinite;
    opacity: 1 !important;
}

@keyframes players-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Progress stroke behaviour */
#players-online-wrapper #players-online-circle circle#progress-circle {
    transition: stroke-dashoffset 600ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease !important;
    opacity: 1 !important;
}

#players-online-wrapper.no-online circle#progress-circle { opacity: 0 !important; }
#players-online-wrapper.has-online circle#progress-circle { opacity: 1 !important; }

/* Slight glow for aquarela when no players */
#players-online-wrapper.no-online circle#aquarela-circle { filter: drop-shadow(0 6px 8px rgba(255,200,90,0.25)); }

/* Tooltip style: single-line, centered above the icon, dark bubble like the reference */
#players-online-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px); /* show below the icon */
    transform: translateX(-50%);
    white-space: nowrap; /* keep single line */
    padding: 8px 12px;
    background: rgba(40,40,40,0.95);
    color: #ffffff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
    visibility: hidden; /* JS toggles visibility/opac */
    opacity: 0;
    pointer-events: none;
    z-index: 10001;
}

/* show on hover (JS also controls visibility) */
#players-online-wrapper:hover #players-online-tooltip,
#players-online-wrapper:focus-within #players-online-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Mobile: make icon slightly smaller */
@media (max-width: 480px) {
    #players-online-wrapper #players-online-circle svg { width: 28px !important; height: 28px !important; }
}


@media (max-width: 768px) {
    /* Header principal */
    .header__title {
        font-size: 2rem !important;
        text-align: center;
    }
    
    .header__subtitle {
        font-size: 1.4rem !important;
        text-align: center;
    }
    
    .header__content {
        font-size: 1rem !important;
        text-align: center;
        padding: 0 10px;
    }
    
    /* Navegação */
    .navigation {
        padding: 0 15px;
    }
    
    /* Botões */
    .btn, .button {
        padding: 10px 15px;
        font-size: 0.9rem;
        min-width: auto;
    }
    
    /* Seções */
    section {
        padding: 30px 15px;
    }
    
    /* Títulos gerais */
    .title {
        font-size: 2rem !important;
    }
    
    .subtitle {
        font-size: 1.2rem !important;
    }
    
    /* Grid layouts */
    .grid, [class*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Cards e boxes */
    .box, .card, [class*="box"], [class*="card"] {
        margin: 10px 0;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    /* Header mobile */
    .header__title {
        font-size: 1.6rem !important;
    }
    
    .header__subtitle {
        font-size: 1.1rem !important;
    }
    
    .header__content {
        font-size: 0.9rem !important;
        padding: 0 5px;
    }
    
    /* Navegação mobile */
    .navigation {
        padding: 0 10px;
    }
    
    /* Botões mobile */
    .btn, .button {
        padding: 12px 20px;
        font-size: 1rem;
        width: 100%;
        margin: 5px 0;
    }
    
    /* Seções mobile */
    section {
        padding: 20px 10px;
    }
    
    /* Títulos mobile */
    .title {
        font-size: 1.5rem !important;
    }
    
    /* Formulários */
    input, textarea, select {
        width: 100% !important;
        padding: 12px;
        font-size: 16px; /* Previne zoom no iOS */
    }
    
    /* Tabelas mobile */
    table {
        font-size: 0.8rem;
    }
    
    th, td {
        padding: 6px 4px !important;
    }
}