:root {
    --coc-green: #4e9421;
    --coc-dark-green: #3a7217;
    --wood-dark: #5d3a1a;
    --wood-light: #7d522a;
    --paper: #e6cc9e;
    --gold: #fcc200;
    --arena-playa: rgb(171, 140, 85);
}

body {
    font-family: 'Montserrat', 'Ubuntu', sans-serif;
    margin: 0;
    overflow-x: hidden;
    background-color: #1a1a1a;
}

/* --- PARALLAX --- */
.parallax-wrapper {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 2px;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%;
    background-image: url('../recursos/img/fondo.webp');
    background-size: cover;
    background-position: center;
    transform: translateZ(-1px) scale(2.2);
    z-index: -1;
    filter: blur(6px) brightness(0.5) saturate(0.7);
}

.content-layer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120vh;
    padding: 60px 20px;
}

/* --- GRID DEL TABLÓN --- */
.board-grid {
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    grid-template-rows: 80px 1fr 80px;
    max-width: 700px;
    width: 100%;
    position: relative;
}

.coc-font {
    font-family: 'Luckiest Guy', cursive;
    text-shadow: 2px 2px 0px #000;
}

/* Círculos de las esquinas */
.corner {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, #92400e, #45220a);
    border: 5px solid #2a1808;
    border-radius: 50%;
    z-index: 40;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.corner:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.corner:active {
    transform: scale(0.9);
}

/* Solo mostrar el punto dorado decorativo si NO tiene contenido interno */
.corner:not(.home-btn):not(.debate-btn):not(.estatus-btn):not(.admin-btn)::after {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--gold);
    border-radius: 50%;
    border: 2px solid #000;
}

.tl {
    grid-area: 1/1;
}

.tr {
    grid-area: 1/3;
}

.bl {
    grid-area: 3/1;
}

.br {
    grid-area: 3/3;
}

/* Estilo de los círculos interiores de los botones corregido para Chromium */
.gold-circle {
    width: 40px;
    height: 40px;
    background: var(--gold);
    border: 2px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 50;
    position: relative;
    overflow: hidden;
    /* Evita desbordes de sombras en algunos motores */
}

.blue-vibe {
    background: #3b82f6 !important;
}

.ruby-vibe {
    background: #991b1b !important;
}

.dark-vibe{
    background: #334155 !important;
}

/* Pergamino */
.paper {
    grid-area: 1/1/4/4;
    background: var(--paper);
    border: 7px solid var(--wood-dark);
    border-radius: 15px;
    z-index: 20;
    margin: 25px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), inset 0 0 60px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.paper-header {
    padding: 30px 20px 10px;
}

.tabs-container {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid var(--wood-dark);
}

.tab-btn {
    flex: 1;
    padding: 15px;
    background: var(--arena-playa);
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    color: #3a2410;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    outline: none;
}

.border {
    border: 1px solid var(--arena-playa);
}

.tab-btn.active {
    background: var(--paper);
    box-shadow: inset 0 -4px 0 var(--gold);
}

.sub-tab-btn.active {
    border: 1px solid var(--wood-dark);
}

.scroll-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 25px;
    text-align: left;
}

.ocultar {
    display: none;
}

.article-title {
    color: #c2410c;
    border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    font-weight: 800;
}

.rule-list {
    list-style: none;
    padding: 0;
}

.rule-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.95rem;
    color: #45220a;
}

/* Responsive */
@media (max-width: 600px) {
    .board-grid {
        grid-template-columns: 40px 1fr 40px;
        grid-template-rows: 40px 1fr 40px;
    }

    .corner {
        width: 50px;
        height: 50px;
        border-width: 3px;
    }

    .gold-circle {
        width: 30px;
        height: 30px;
    }

    .gold-circle svg {
        width: 16px;
        height: 16px;
    }

    .gold-circle span {
        font-size: 14px;
    }

    .paper {
        margin: 10px;
    }
}