* {
    box-sizing: border-box;
}

:root {
    --panel: rgba(255,255,255,.07);
    --panel-border: rgba(255,255,255,.11);
    --muted: #9ca3af;
    --blue: #60a5fa;
    --red: #f87171;
    --green-light: #72ff9a;
}

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

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -10%, #263448 0%, #111823 38%, #070a0f 78%);
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
}

.game-container {
    width: min(98vw, 1600px);
    min-height: 100vh;
    padding: 10px 12px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* =========================================================
   CABEÇALHO HORIZONTAL
========================================================= */
.game-header {
    width: min(96vw, 1500px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 230px minmax(420px, 1fr) 330px;
    gap: 10px;
    align-items: stretch;
}

.brand-panel,
.top-panel,
.dice-area,
.info-panel,
.bottom-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.brand-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    text-align: center;
    overflow: hidden;
}

.brand-logo {
    width: 100%;
    max-width: 200px;
    max-height: 90px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.top-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
}

.player {
    flex: 1;
    padding: 9px 7px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 14px;
    white-space: nowrap;
}

.player.blue { color: var(--blue); }
.player.red { color: var(--red); }
.player.active { background: rgba(255,255,255,.13); }

.turn {
    font-weight: 900;
    font-size: 10px;
    white-space: nowrap;
    color: #e5e7eb;
    letter-spacing: .7px;
    margin-top: 2px;
}

/* =========================================================
   PLACAR ELETRÔNICO
========================================================= */
.top-panel {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
}

.electronic-scoreboard {
    min-width: 152px;
    padding: 4px 10px 5px;
    border-radius: 9px;
    background: linear-gradient(180deg, #090e14, #030609);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        inset 0 0 16px rgba(0,0,0,.85),
        0 2px 8px rgba(0,0,0,.35);
}

.score-label {
    color: #94a3b8;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
    line-height: 1;
    margin-bottom: 2px;
}

.score-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.score-number {
    min-width: 34px;
    padding: 1px 5px;
    border-radius: 5px;
    background: #050a10;
    border: 1px solid rgba(255,255,255,.10);
    font-family: "Courier New", Consolas, monospace;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: inset 0 0 8px rgba(0,0,0,.9);
}

.score-number.red-score {
    color: #ff606b;
    text-shadow: 0 0 9px rgba(255,70,80,.85);
}

.score-number.blue-score {
    color: #62aaff;
    text-shadow: 0 0 9px rgba(70,150,255,.85);
}

.score-separator {
    color: #fbbf24;
    font-family: "Courier New", Consolas, monospace;
    font-size: 20px;
    font-weight: 900;
    text-shadow: 0 0 7px rgba(251,191,36,.6);
}

.score-number.flash {
    animation: scoreFlash .55s ease-in-out 2;
}

@keyframes scoreFlash {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.22); filter: brightness(1.8); }
}

/* =========================================================
   DADO
========================================================= */
.dice-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    margin: 0;
}

.dice {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
    padding: 6px;
    background: linear-gradient(145deg, #ffffff 0%, #f2f4f7 42%, #d8dde3 100%);
    border-radius: 12px;
    border: 3px solid rgba(255,255,255,.98);
    box-shadow:
        0 6px 18px rgba(0,0,0,.42),
        inset 0 2px 0 rgba(255,255,255,.85),
        inset 0 -4px 8px rgba(0,0,0,.08);
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    overflow: hidden;
}

.dice::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.85), rgba(255,255,255,0) 46%);
    pointer-events: none;
}

.dice.empty::after {
    content: "?";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    color: rgba(17,24,39,.34);
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.dice .pip {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #2b3445, #0f172a 72%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.28);
    opacity: 0;
    transform: scale(.35);
    transition: opacity .12s ease, transform .12s ease;
    position: relative;
    z-index: 1;
}

.dice .pip.active {
    opacity: 1;
    transform: scale(1);
}

.dice.rolling {
    animation: diceRoll3d .74s cubic-bezier(.24,.85,.34,1);
    box-shadow:
        0 9px 24px rgba(0,0,0,.52),
        inset 0 2px 0 rgba(255,255,255,.85),
        inset 0 -4px 8px rgba(0,0,0,.08);
}

.dice.impact {
    animation: diceImpact .28s cubic-bezier(.2,1,.22,1);
}

@keyframes diceRoll3d {
    0%   { transform: perspective(420px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0) scale(1); }
    18%  { transform: perspective(420px) rotateX(120deg) rotateY(95deg) rotateZ(-18deg) translateY(-6px) scale(1.08); }
    36%  { transform: perspective(420px) rotateX(210deg) rotateY(-140deg) rotateZ(16deg) translateY(-2px) scale(1.12); }
    58%  { transform: perspective(420px) rotateX(305deg) rotateY(185deg) rotateZ(-12deg) translateY(-4px) scale(1.08); }
    82%  { transform: perspective(420px) rotateX(350deg) rotateY(28deg) rotateZ(5deg) translateY(1px) scale(.98); }
    100% { transform: perspective(420px) rotateX(360deg) rotateY(360deg) rotateZ(0deg) translateY(0) scale(1); }
}

@keyframes diceImpact {
    0%   { transform: scale(1); box-shadow: 0 6px 18px rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.85), inset 0 -4px 8px rgba(0,0,0,.08); }
    45%  { transform: scale(1.14); box-shadow: 0 0 0 5px rgba(245,158,11,.25), 0 12px 24px rgba(0,0,0,.46), inset 0 2px 0 rgba(255,255,255,.92), inset 0 -4px 8px rgba(0,0,0,.08); }
    100% { transform: scale(1); box-shadow: 0 6px 18px rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.85), inset 0 -4px 8px rgba(0,0,0,.08); }
}

.dice-button {
    background: linear-gradient(145deg, #f59e0b, #d97706);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
    white-space: nowrap;
}

.dice-button:hover { transform: translateY(-2px); }
.dice-button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.dice-info {
    min-width: 65px;
    color: #d1d5db;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
}

.dice-value {
    color: #fbbf24;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}

/* =========================================================
   CAMPO HORIZONTAL COMPLETO
   18 colunas visuais x 11 linhas visuais
========================================================= */
.pitch-shell {
    width: min(96vw, 1500px, calc((100vh - 205px) * 20 / 11));
    aspect-ratio: 20 / 11;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 18fr 1fr;
    overflow: hidden;
    background: linear-gradient(135deg, #075e32, #0a7a40);
    border-radius: 16px;
    border: 4px solid #e5e7eb;
    box-shadow: 0 18px 42px rgba(0,0,0,.5);
}

.board {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(11, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    position: relative;
    isolation: isolate;
    border-left: 2px solid white;
    border-right: 2px solid white;
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.85) 49.8%, rgba(255,255,255,.85) 50.2%, transparent 50.2%),
        linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05));
}

/* Marca d’água central do gramado, acima das casas e abaixo das peças.
   Arquivo esperado: imagens/geral/bola-cardbol-centro-jogo-opacity.png */
.board::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("../imagens/geral/bola-cardbol-centro-jogo-opacity.png") center / contain no-repeat;
    opacity: .95; /* 95% de opacidade */
    pointer-events: none;
    z-index: 3;
}

/* Linhas de referência do campo: divisão central e limite dos GO. */
.board::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(90deg,
            transparent calc(50% - 2px),
            rgba(255,255,255,.95) calc(50% - 2px),
            rgba(255,255,255,.95) calc(50% + 2px),
            transparent calc(50% + 2px)
        ),
        linear-gradient(90deg,
            transparent calc(16.6667% - 2px),
            rgba(250, 204, 21, .95) calc(16.6667% - 2px),
            rgba(250, 204, 21, .95) calc(16.6667% + 2px),
            transparent calc(16.6667% + 2px)
        ),
        linear-gradient(90deg,
            transparent calc(83.3333% - 2px),
            rgba(250, 204, 21, .95) calc(83.3333% - 2px),
            rgba(250, 204, 21, .95) calc(83.3333% + 2px),
            transparent calc(83.3333% + 2px)
        );
}

.cell {
    position: relative;
    /* Sem z-index: a casa não cria uma camada que prenda a peça por baixo das linhas. */
    border: 1px solid rgba(0,0,0,.18);
    cursor: pointer;
    min-width: 0;
    min-height: 0;
    transition: outline-color .15s ease;
}

.cell.check-light { background: rgba(162, 181, 86, .92); }
.cell.check-dark  { background: rgba(72, 114, 63, .92); }
.cell:hover { outline: 2px solid rgba(255,255,255,.16); outline-offset: -2px; }

/* As linhas iniciais agora ficam nas laterais do campo. */
.red-start { box-shadow: inset 4px 0 0 #f87171; }
.blue-start { box-shadow: inset -4px 0 0 #60a5fa; }

/* =========================================================
   GOLS VERTICAIS - 7 CÉLULAS CENTRALIZADAS
========================================================= */
.goal-line {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(11, 1fr);
    border: 0;
    margin: 0;
    position: relative;
}

.goal-cell {
    border-top: 1px solid rgba(255,255,255,.72);
    border-bottom: 1px solid rgba(255,255,255,.72);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(10px, 1.2vw, 16px);
    font-weight: bold;
    cursor: pointer;
    position: relative;
    min-height: 0;
}

/* data-col 2..8 corresponde às linhas visuais 3..9 */
.goal-cell:nth-child(1) { grid-row: 5; }
.goal-cell:nth-child(2) { grid-row: 6; }
.goal-cell:nth-child(3) { grid-row: 7; }

.red-goal-line { background: transparent; }
.red-goal-line .goal-cell {
    background: linear-gradient(90deg, rgba(153,27,27,.88), rgba(239,68,68,.78));
    border: 1px solid rgba(255,255,255,.75);
}

.blue-goal-line { background: transparent; }
.blue-goal-line .goal-cell {
    background: linear-gradient(90deg, rgba(59,130,246,.78), rgba(30,64,175,.9));
    border: 1px solid rgba(255,255,255,.75);
}

.goal-cell.possible {
    background: rgba(80,255,140,.68) !important;
    box-shadow: inset 0 0 0 3px var(--green-light), 0 0 14px rgba(100,255,150,.8);
    z-index: 4;
}

.goal-cell.possible::after {
    content: "";
    position: absolute;
    width: 22%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: var(--green-light);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(100,255,150,.95);
}

/* =========================================================
   CASAS POSSÍVEIS
========================================================= */
.cell.possible {
    background: rgba(80,255,140,.45) !important;
    box-shadow: inset 0 0 0 2px var(--green-light);
}

.cell.possible::after {
    content: "";
    position: absolute;
    width: 24%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: var(--green-light);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(100,255,150,.9);
}

/* =========================================================
   PEÇAS
========================================================= */
.piece {
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    max-height: 72%;
    left: 14%;
    top: 14%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(9px, 1vw, 15px);
    font-weight: 900;
    color: white;
    z-index: 10;
    user-select: none;
    border: clamp(1px, .18vw, 3px) solid rgba(255,255,255,.88);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

.piece.blue {
    background: radial-gradient(circle at 35% 25%, #67b7ff, #1764d1 65%, #0b3d91);
}

.piece.red {
    background: radial-gradient(circle at 35% 25%, #ff8585, #d52f2f 65%, #8c1010);
}

.piece {
    letter-spacing: -0.2px;
}

.piece.selected {
    border-color: #ffe04b;
    box-shadow: 0 0 0 3px rgba(255,224,75,.25), 0 0 18px rgba(255,224,75,.9);
    transform: scale(1.08);
}

.piece.moving {
    z-index: 30;
    pointer-events: none;
    filter: brightness(1.12);
    box-shadow: 0 6px 15px rgba(0,0,0,.58), 0 0 12px rgba(255,255,255,.20);
    will-change: transform;
}

.game-container.move-in-progress {
    cursor: progress;
}

/* =========================================================
   RODAPÉ / MENSAGEM
========================================================= */
.info-panel {
    width: min(96vw, 1500px);
    margin: 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 5px;
}

.message {
    flex: 1;
    min-height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .45s ease, transform .45s ease;
}

.message.message-fade-out {
    opacity: .08;
    transform: translateY(2px);
}

.message.message-fade-in {
    opacity: 1;
    transform: translateY(0);
}

.new-game {
    border: none;
    border-radius: 9px;
    padding: 9px 15px;
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: white;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(0,0,0,.3);
}

.new-game:hover { transform: translateY(-1px); }

.fullscreen-button {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    padding: 9px 13px;
    background: linear-gradient(145deg, #334155, #111827);
    color: #f8fafc;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(0,0,0,.3);
    transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

.fullscreen-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);
    border-color: rgba(251,191,36,.48);
}

.fullscreen-button.is-fullscreen {
    border-color: rgba(251,191,36,.72);
    box-shadow: 0 0 0 1px rgba(251,191,36,.18), 0 3px 9px rgba(0,0,0,.3);
}


.formation-confirm-button {
    border: 1px solid rgba(251,191,36,.5);
    border-radius: 9px;
    padding: 9px 13px;
    background: linear-gradient(145deg, #8a5a08, #5b3b05);
    color: #fff7d6;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(0,0,0,.3);
    transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.formation-confirm-button:hover { transform: translateY(-1px); filter: brightness(1.12); }
.formation-confirm-button.hidden { display: none; }
.formation-confirm-button.red-formation {
    background: linear-gradient(145deg, #b91c1c, #7f1d1d);
    border-color: rgba(248,113,113,.7);
}
.formation-confirm-button.blue-formation {
    background: linear-gradient(145deg, #2563eb, #1e3a8a);
    border-color: rgba(96,165,250,.75);
}

.cell.formation-target {
    background: rgba(251,191,36,.34) !important;
    box-shadow: inset 0 0 0 2px rgba(253,224,71,.95), inset 0 0 14px rgba(251,191,36,.32);
    cursor: crosshair;
}

.cell.formation-target::after {
    content: "";
    position: absolute;
    width: 20%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: rgba(253,224,71,.95);
    box-shadow: 0 0 9px rgba(253,224,71,.8);
    z-index: 4;
}

.piece.formation-selectable {
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(251,191,36,.32), 0 3px 7px rgba(0,0,0,.55);
}

.piece.formation-muted {
    opacity: .42;
    filter: saturate(.6);
}

.piece.formation-selected {
    border-color: #fde047;
    box-shadow: 0 0 0 3px rgba(253,224,71,.28), 0 0 18px rgba(253,224,71,.92), 0 3px 7px rgba(0,0,0,.55);
    transform: scale(1.10);
}

/* Modo mesa digital: o jogo inteiro ocupa a área real do monitor. */
html:fullscreen .game-container,
html:-webkit-full-screen .game-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    min-height: 100vh;
    padding: 6px 8px 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% -10%, #263448 0%, #111823 38%, #070a0f 78%);
}

html:fullscreen .game-container .game-header,
html:fullscreen .game-container .match-stage,
html:fullscreen .game-container .info-panel,
html:fullscreen .game-container .bottom-panel,
html:-webkit-full-screen .game-container .game-header,
html:-webkit-full-screen .game-container .match-stage,
html:-webkit-full-screen .game-container .info-panel,
html:-webkit-full-screen .game-container .bottom-panel {
    width: 100%;
    max-width: none;
}

html:fullscreen .game-container .match-stage,
html:-webkit-full-screen .game-container .match-stage {
    flex: 1 1 auto;
    min-height: 0;
}

html:fullscreen .game-container .pitch-shell,
html:-webkit-full-screen .game-container .pitch-shell {
    max-height: calc(100vh - 190px);
}

.bottom-panel {
    width: min(96vw, 1500px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
    align-items: center;
    padding: 5px 8px;
}

.bottom-panel .dice-area {
    background: transparent;
    border: 0;
    padding: 0;
}

.rules {
    color: #aeb7c4;
    font-size: 10px;
    line-height: 1.35;
    text-align: left;
    margin: 0;
}

/* =========================================================
   CARTAS TÁTICAS - MÃO DE 3 CARTAS POR JOGADOR
========================================================= */
.cards-panel {
    width: min(96vw, 1500px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 150px 1fr;
    gap: 10px;
    align-items: stretch;
}

.card-hand {
    min-width: 0;
    padding: 5px 7px 7px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    transition: .18s ease;
}

.card-hand.active {
    box-shadow: inset 0 0 0 1px rgba(251,191,36,.45), 0 0 12px rgba(251,191,36,.12);
}

.card-hand-title {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
    margin-bottom: 4px;
    white-space: nowrap;
}

.card-hand.red-hand .card-hand-title { color: var(--red); }
.card-hand.blue-hand .card-hand-title { color: var(--blue); }

.card-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.card-slot {
    height: 54px;
    min-width: 0;
    border: 1px dashed rgba(255,255,255,.24);
    border-radius: 8px;
    background: rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.card-slot.empty::after {
    content: "SLOT VAZIO";
    color: rgba(255,255,255,.27);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .6px;
}

.tactical-card {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 4px 5px;
    color: white;
    cursor: pointer;
    background: linear-gradient(145deg, #991b1b, #dc2626 55%, #7f1d1d);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.tactical-card:hover { filter: brightness(1.12); }
.tactical-card .card-number {
    font-size: 7px;
    font-weight: 800;
    opacity: .85;
    letter-spacing: .5px;
}
.tactical-card .card-name {
    font-size: clamp(8px, .72vw, 11px);
    line-height: 1.05;
    font-weight: 1000;
    white-space: nowrap;
}
.tactical-card .card-effect {
    font-size: 7px;
    line-height: 1.05;
    opacity: .88;
    white-space: nowrap;
}
.tactical-card.active-card {
    box-shadow: inset 0 0 0 3px #fbbf24, 0 0 14px rgba(251,191,36,.75);
    filter: brightness(1.12);
}

.card-deck-info {
    min-height: 70px;
    border-radius: 12px;
    border: 1px solid rgba(251,191,36,.25);
    background: linear-gradient(145deg, rgba(35,28,11,.92), rgba(12,15,20,.96));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-shadow: inset 0 0 16px rgba(0,0,0,.5);
}

.card-deck-icon { font-size: 21px; line-height: 1; }
.card-deck-title {
    color: #fbbf24;
    font-size: 9px;
    font-weight: 1000;
    margin-top: 2px;
    letter-spacing: .7px;
}
.card-deck-rule {
    color: #d1d5db;
    font-size: 8px;
    font-weight: 800;
    margin-top: 2px;
}

.piece.goalkeeper {
    font-size: clamp(7px, .75vw, 11px);
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251,191,36,.18), 0 3px 6px rgba(0,0,0,.5);
}

.piece.card-target {
    cursor: crosshair;
    animation: cardTargetPulse .75s ease-in-out infinite alternate;
    box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 0 18px rgba(248,113,113,.95);
}

.piece.goalkeeper-protected {
    cursor: not-allowed;
    opacity: .74;
}

@keyframes cardTargetPulse {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

@media (max-width: 780px) {
    .cards-panel { width: 748px; grid-template-columns: 1fr 120px 1fr; gap: 5px; }
    .card-slot { height: 48px; }
    .card-deck-info { min-height: 64px; }
    .tactical-card .card-effect { display: none; }
}

/* =========================================================
   BANCO DE RESERVAS E EXPULSOS
========================================================= */
.squads-panel {
    width: min(96vw, 1500px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 150px 1fr;
    gap: 10px;
    align-items: stretch;
}

.squad-box {
    min-width: 0;
    padding: 6px 8px;
    border-radius: 12px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
}

.squad-box.red-squad { box-shadow: inset 3px 0 0 rgba(248,113,113,.7); }
.squad-box.blue-squad { box-shadow: inset -3px 0 0 rgba(96,165,250,.7); }

.squad-title {
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .8px;
    margin-bottom: 5px;
}
.red-squad .squad-title { color: var(--red); }
.blue-squad .squad-title { color: var(--blue); }

.squad-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.squad-section {
    min-width: 0;
    border-radius: 8px;
    background: rgba(0,0,0,.18);
    padding: 5px;
    border: 1px solid rgba(255,255,255,.07);
}

.squad-label {
    color: #cbd5e1;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .6px;
    margin-bottom: 4px;
}

.player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 23px;
}

.player-chip {
    min-width: 30px;
    height: 23px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: white;
    font-size: 8px;
    font-weight: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.player-chip { cursor: default; font-family: inherit; }
button.player-chip.reserve-selectable {
    cursor: pointer;
    border-color: #fbbf24;
    box-shadow: 0 0 9px rgba(251,191,36,.28);
}
button.player-chip.reserve-selectable:hover { filter: brightness(1.25); }
button.player-chip.reserve-selected {
    background: #b7791f;
    border-color: #fde68a;
    box-shadow: 0 0 12px rgba(251,191,36,.7);
}
.player-chip.expelled {
    color: #fecaca;
    border-color: rgba(248,113,113,.45);
    background: rgba(127,29,29,.34);
    text-decoration: line-through;
}
button.player-chip.expelled.reserve-selectable {
    cursor: pointer;
    color: #fff7ed;
    text-decoration: none;
    border-color: #fbbf24;
    box-shadow: 0 0 9px rgba(251,191,36,.38);
}
button.player-chip.expelled.reserve-selected {
    color: white;
    text-decoration: none;
    background: #b7791f;
    border-color: #fde68a;
    box-shadow: 0 0 12px rgba(251,191,36,.72);
}
.player-chip.used-reserve {
    opacity: .28;
    text-decoration: line-through;
}
.empty-bench {
    color: rgba(255,255,255,.3);
    font-size: 8px;
    font-weight: 800;
    padding: 4px 2px;
}

.bench-center {
    border-radius: 12px;
    border: 1px solid rgba(16,185,129,.22);
    background: linear-gradient(145deg, rgba(6,38,31,.9), rgba(12,15,20,.96));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #a7f3d0;
    font-size: 8px;
    font-weight: 900;
    line-height: 1.25;
    padding: 5px;
}
.bench-center strong { color: #34d399; font-size: 10px; }

.tactical-card.card-2 {
    background: linear-gradient(145deg, #065f46, #059669 55%, #064e3b);
}

.tactical-card.card-3 {
    background: linear-gradient(145deg, #7c2d12, #ea580c 55%, #9a3412);
}

.tactical-card.card-4 {
    background: linear-gradient(145deg, #4c1d95, #7c3aed 55%, #5b21b6);
}

.tactical-card.card-7 {
    background: linear-gradient(145deg, #92400e, #f59e0b 55%, #b45309);
}

.tactical-card.card-8 {
    background: linear-gradient(145deg, #374151, #111827 58%, #f59e0b);
}

.tactical-card.card-9 {
    background: linear-gradient(145deg, #0f172a, #334155 52%, #0891b2);
}

.tactical-card.card-10 {
    background: linear-gradient(145deg, #3f3f46, #71717a 52%, #ca8a04);
}

.piece.card3-target {
    cursor: pointer;
    animation: card3TargetPulse .75s ease-in-out infinite alternate;
    box-shadow: 0 0 0 3px rgba(251,191,36,.34), 0 0 18px rgba(249,115,22,.95);
}

.piece.card4-target {
    cursor: pointer;
    animation: card3TargetPulse .75s ease-in-out infinite alternate;
    box-shadow: 0 0 0 3px rgba(196,181,253,.36), 0 0 18px rgba(139,92,246,.95);
}

.piece.card7-target {
    cursor: pointer;
    animation: card3TargetPulse .75s ease-in-out infinite alternate;
    box-shadow: 0 0 0 3px rgba(253,230,138,.4), 0 0 18px rgba(245,158,11,.95);
}

.piece.card9-target {
    cursor: pointer;
    animation: card3TargetPulse .75s ease-in-out infinite alternate;
    box-shadow: 0 0 0 3px rgba(103,232,249,.42), 0 0 18px rgba(6,182,212,.95);
}

@keyframes card3TargetPulse {
    from { transform: scale(1); }
    to   { transform: scale(1.10); }
}

/* =========================================================
   EFEITOS VISUAIS DAS CARTAS 3, 4, 7 E 9
========================================================= */
.card-special-fx-layer {
    position: fixed;
    inset: 0;
    z-index: 115;
    pointer-events: none;
    overflow: hidden;
}

.card3-trail-ghost {
    position: fixed;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 1000;
    color: white;
    border: 2px solid rgba(255,255,255,.72);
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    box-shadow: 0 0 16px rgba(251,191,36,.72);
    opacity: .68;
    animation: card3TrailFade 3s ease-out forwards;
}

.card3-trail-ghost.red {
    background: rgba(220,38,38,.72);
}

.card3-trail-ghost.blue {
    background: rgba(37,99,235,.72);
}

@keyframes card3TrailFade {
    0%   { opacity: .75; filter: blur(0); transform: scale(.86); }
    20%  { opacity: .62; transform: scale(1); }
    72%  { opacity: .34; filter: blur(.2px); }
    100% { opacity: 0; filter: blur(2px); transform: scale(1.28); }
}

.card4-pass-arrow,
.card9-retreat-arrow {
    position: fixed;
    height: 5px;
    transform-origin: 0 50%;
    border-radius: 999px;
    opacity: .95;
    animation: tacticalArrowFade 3s ease-out forwards;
}

.card4-pass-arrow {
    background: linear-gradient(90deg, rgba(196,181,253,.25), #a78bfa 28%, #7c3aed);
    box-shadow: 0 0 12px rgba(139,92,246,.9);
}

.card9-retreat-arrow {
    background: linear-gradient(90deg, rgba(103,232,249,.25), #22d3ee 28%, #0891b2);
    box-shadow: 0 0 12px rgba(6,182,212,.88);
}

.card4-pass-arrow::after,
.card9-retreat-arrow::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.card4-pass-arrow::after {
    border-left: 15px solid #7c3aed;
}

.card9-retreat-arrow::after {
    border-left: 15px solid #0891b2;
}

.card4-pass-arrow::before {
    content: "PASSE!";
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 1000;
    color: #ddd6fe;
    text-shadow: 0 2px 4px #000;
    white-space: nowrap;
}

.card9-retreat-arrow::before {
    content: "RECUO!";
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 1000;
    color: #cffafe;
    text-shadow: 0 2px 4px #000;
    white-space: nowrap;
}

@keyframes tacticalArrowFade {
    0%   { opacity: 0; filter: brightness(1.7); }
    8%   { opacity: .98; }
    68%  { opacity: .92; }
    100% { opacity: 0; filter: blur(1.4px); }
}

/* Fogo da Carta 7 sem substituir a animação de seleção já existente. */
.piece.card7-fire {
    filter: drop-shadow(0 0 5px rgba(251,146,60,.95))
            drop-shadow(0 0 9px rgba(239,68,68,.72));
}

.piece.card7-fire::after {
    content: "🔥";
    position: absolute;
    left: 50%;
    top: -55%;
    transform: translateX(-50%);
    font-size: clamp(15px, 1.45vw, 24px);
    line-height: 1;
    z-index: 12;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(251,146,60,.95));
    animation: card7FireDance .46s ease-in-out infinite alternate;
}

.piece.card7-fire-lingering::after {
    animation:
        card7FireDance .46s ease-in-out infinite alternate,
        card7FireFade 3s ease-out forwards;
}

@keyframes card7FireDance {
    from { transform: translateX(-50%) translateY(1px) scale(.92) rotate(-4deg); }
    to   { transform: translateX(-50%) translateY(-3px) scale(1.12) rotate(4deg); }
}

@keyframes card7FireFade {
    0%, 68% { opacity: 1; }
    100% { opacity: 0; }
}

.card9-pusher {
    position: fixed;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    margin-top: -17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.72));
    opacity: 1;
    z-index: 2;
    will-change: transform, opacity;
}

@media (max-width: 900px) {
    .card3-trail-ghost {
        width: 24px;
        height: 24px;
        margin-left: -12px;
        margin-top: -12px;
        font-size: 6px;
    }

    .piece.card7-fire::after {
        font-size: 16px;
        top: -48%;
    }

    .card9-pusher {
        font-size: 21px;
    }
}

.cell.reserve-target {
    background: rgba(251,191,36,.42) !important;
    box-shadow: inset 0 0 0 2px #fbbf24, inset 0 0 15px rgba(251,191,36,.35);
    cursor: crosshair;
}
.cell.block-target {
    background: rgba(249,115,22,.38) !important;
    box-shadow: inset 0 0 0 2px #fb923c, inset 0 0 16px rgba(249,115,22,.42);
    cursor: crosshair;
}

.cell.block-target::after {
    content: "🚧";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: clamp(11px, 1.2vw, 18px);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.8));
    z-index: 8;
}

.block-object {
    position: absolute;
    inset: 7% 6%;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 6px;
    background: linear-gradient(145deg, #f59e0b, #ea580c 55%, #111827 56%, #1f2937);
    border: 2px solid rgba(255,255,255,.9);
    color: white;
    font-size: clamp(5px, .55vw, 8px);
    line-height: 1;
    font-weight: 1000;
    letter-spacing: .35px;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    box-shadow: 0 3px 8px rgba(0,0,0,.62), inset 0 0 0 1px rgba(0,0,0,.35);
    pointer-events: none;
    user-select: none;
}

.block-object .block-icon {
    font-size: clamp(9px, .9vw, 14px);
    line-height: .9;
}

.block-object.block-blue {
    box-shadow: 0 0 0 2px rgba(96,165,250,.8), 0 3px 8px rgba(0,0,0,.62);
}

.block-object.block-red {
    box-shadow: 0 0 0 2px rgba(248,113,113,.8), 0 3px 8px rgba(0,0,0,.62);
}

.cell.reserve-target::after {
    content: "+";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbbf24;
    color: #111827;
    font-size: clamp(10px,1vw,16px);
    font-weight: 1000;
    z-index: 8;
    box-shadow: 0 0 12px rgba(251,191,36,.85);
}

@media (max-width: 780px) {
    .squads-panel { width: 748px; grid-template-columns: 1fr 120px 1fr; gap: 5px; }
    .squad-rows { gap: 4px; }
    .player-chip { min-width: 27px; padding: 0 5px; }
}


/* =========================================================
   LAYOUT HORIZONTAL COM BANCO + EXPULSOS + CARTAS NAS LATERAIS
========================================================= */
.match-stage {
    width: min(98vw, 1600px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: clamp(168px, 14.2vw, 215px) minmax(0, 1fr) clamp(168px, 14.2vw, 215px);
    gap: 8px;
    align-items: stretch;
}

.match-stage .pitch-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    align-self: center;
}

.team-side {
    min-width: 0;
    border-radius: 14px;
    padding: 7px;
    background: rgba(13,18,25,.88);
    border: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
    box-shadow: inset 0 0 18px rgba(0,0,0,.28);
}

.team-side.red-side {
    border-left: 3px solid rgba(248,113,113,.8);
}

.team-side.blue-side {
    border-right: 3px solid rgba(96,165,250,.8);
}

.side-team-title {
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.055);
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .8px;
}
.red-side .side-team-title { color: var(--red); }
.blue-side .side-team-title { color: var(--blue); }

.team-side .squad-box {
    padding: 5px;
    border-radius: 9px;
    flex: 0 0 auto;
}

.team-side .squad-title {
    margin-bottom: 4px;
    font-size: 8px;
}

.team-side .squad-rows {
    grid-template-columns: 1fr;
    gap: 5px;
}

.team-side .squad-section {
    padding: 4px;
}

.team-side .squad-label {
    margin-bottom: 3px;
    font-size: 7px;
}

.team-side .player-chips {
    min-height: 22px;
    gap: 3px;
}

.team-side .player-chip {
    min-width: 27px;
    height: 21px;
    padding: 0 5px;
    font-size: 7px;
}

.team-side .card-hand {
    padding: 5px;
    border-radius: 9px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.team-side .card-hand-title {
    margin-bottom: 4px;
    font-size: 8px;
    text-align: center;
}

.team-side .card-slots {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(48px, 1fr));
    gap: 5px;
}

.team-side .card-slot {
    width: 100%;
    height: auto;
    min-height: 48px;
}

.team-side .tactical-card .card-name {
    font-size: clamp(8px, .68vw, 10px);
}

.team-side .tactical-card .card-effect {
    font-size: 6px;
}

.side-card-rule {
    flex: 0 0 auto;
    padding: 5px 4px;
    border-radius: 8px;
    border: 1px solid rgba(251,191,36,.22);
    background: rgba(45,34,8,.32);
    color: #d1d5db;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.25;
}
.side-card-rule strong { color: #fbbf24; }

/* Sem as antigas faixas inferiores, o campo pode usar mais altura útil. */
.pitch-shell {
    width: 100%;
}

@media (max-width: 1180px) {
    .match-stage {
        grid-template-columns: 150px minmax(0, 1fr) 150px;
        gap: 5px;
    }
    .team-side { padding: 5px; gap: 5px; }
    .team-side .player-chip { min-width: 24px; padding: 0 4px; font-size: 6px; }
    .team-side .tactical-card .card-effect { display: none; }
}

@media (max-width: 880px) {
    body { overflow-x: auto; }
    .game-container { min-width: 1040px; }
    .match-stage {
        width: 1020px;
        grid-template-columns: 130px 750px 130px;
    }
    .team-side .player-chip { min-width: 22px; height: 19px; }
}

/* =========================================================
   VITÓRIA
========================================================= */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.overlay.show { display: flex; }
.victory {
    width: min(90vw,450px);
    padding: 35px;
    border-radius: 20px;
    background: linear-gradient(145deg, #202938, #0e131c);
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.victory h1 { font-size: 38px; margin: 0 0 10px; }
.victory p { color: #d1d5db; margin-bottom: 25px; }
.victory button {
    border: none;
    border-radius: 9px;
    padding: 13px 22px;
    background: #2563eb;
    color: white;
    font-weight: bold;
    cursor: pointer;
}


/* =========================================================
   COMEMORAÇÃO DE GOL
========================================================= */
.pitch-shell {
    position: relative;
}

.pitch-shell.goal-celebration::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: rgba(0,0,0,.34);
    animation: goalFieldDim .28s ease-out both;
}

@keyframes goalFieldDim {
    from { background: rgba(0,0,0,0); }
    to   { background: rgba(0,0,0,.34); }
}

.pitch-shell.goal-celebration .goal-line.goal-flash {
    z-index: 22;
}

.goal-line.goal-flash-blue .goal-cell {
    animation: goalFlashBlue .22s ease-in-out 6 alternate;
}

.goal-line.goal-flash-red .goal-cell {
    animation: goalFlashRed .22s ease-in-out 6 alternate;
}

@keyframes goalFlashBlue {
    from { filter: brightness(1); box-shadow: 0 0 0 rgba(96,165,250,0); }
    to   { filter: brightness(1.9); box-shadow: 0 0 24px rgba(96,165,250,.95), inset 0 0 18px rgba(147,197,253,.8); }
}

@keyframes goalFlashRed {
    from { filter: brightness(1); box-shadow: 0 0 0 rgba(248,113,113,0); }
    to   { filter: brightness(1.9); box-shadow: 0 0 24px rgba(248,113,113,.95), inset 0 0 18px rgba(254,202,202,.8); }
}

.goal-fx-layer {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    overflow: hidden;
}

.goal-confetti {
    position: absolute;
    top: -5vh;
    left: var(--x);
    width: var(--size);
    height: calc(var(--size) * .58);
    border-radius: 2px;
    background: var(--confetti-color);
    opacity: .92;
    transform: translate3d(0,-20px,0) rotate(0deg);
    animation: goalConfettiFall var(--duration) cubic-bezier(.18,.72,.24,1) var(--delay) forwards;
}

@keyframes goalConfettiFall {
    0% {
        opacity: 0;
        transform: translate3d(0,-20px,0) rotate(0deg);
    }
    10% { opacity: .92; }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift),108vh,0) rotate(var(--spin));
    }
}

.overlay.goal-mode {
    background: rgba(0,0,0,.16);
    backdrop-filter: blur(1px);
}

.overlay.goal-mode .victory {
    width: min(92vw, 520px);
    padding: 28px 30px 24px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(7,12,18,.84);
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    animation: goalPanelPop .52s cubic-bezier(.18,.9,.28,1.25) both;
}

.overlay.goal-mode .victory h1 {
    font-size: clamp(42px, 5.5vw, 68px);
    line-height: .95;
    letter-spacing: 2px;
    text-shadow: 0 4px 18px rgba(0,0,0,.65);
}

.overlay.goal-mode .victory p {
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 800;
}

.overlay.goal-mode:not(.goal-ready) .victory button {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.overlay.goal-mode.goal-ready .victory button {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease;
}

.overlay.goal-mode.goal-blue .victory {
    border-color: rgba(96,165,250,.52);
}

.overlay.goal-mode.goal-red .victory {
    border-color: rgba(248,113,113,.52);
}

.overlay.goal-mode.match-mode {
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(3px);
    transition: background .5s ease, backdrop-filter .5s ease;
}

@keyframes goalPanelPop {
    0%   { opacity: 0; transform: scale(.72) translateY(14px); }
    70%  { opacity: 1; transform: scale(1.05) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================================
   COMEMORAÇÃO ESPECIAL DO CAMPEÃO — 5º GOL
========================================================= */
.champion-image {
    display: none;
    width: min(78vw, 630px);
    max-height: 54vh;
    aspect-ratio: 7 / 5;
    object-fit: contain;
    margin: 0 auto 10px;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.5));
}

.overlay.goal-mode.champion-mode {
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(4px);
}

.overlay.goal-mode.champion-mode .victory {
    width: min(94vw, 760px);
    padding: 18px 24px 22px;
    background: rgba(5,9,15,.72);
    border-width: 2px;
    overflow: visible;
    animation: championPanelEnter .55s cubic-bezier(.16,.9,.28,1.15) both;
}

.overlay.goal-mode.champion-mode .champion-image {
    display: block;
    animation: championImageEnter .78s cubic-bezier(.16,.92,.28,1.18) both;
}

.overlay.goal-mode.champion-mode .victory h1 {
    font-size: clamp(34px, 4.6vw, 58px);
    margin: 2px 0 7px;
    letter-spacing: 1.5px;
}

.overlay.goal-mode.champion-mode .victory p {
    margin: 0 0 14px;
    font-size: clamp(12px, 1.4vw, 16px);
}

.overlay.goal-mode.champion-mode.goal-blue .victory {
    border-color: rgba(96,165,250,.82);
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 34px rgba(37,99,235,.24);
}

.overlay.goal-mode.champion-mode.goal-red .victory {
    border-color: rgba(248,113,113,.82);
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 34px rgba(220,38,38,.24);
}

@keyframes championPanelEnter {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes championImageEnter {
    0%   { opacity: 0; transform: scale(.62) translateY(18px); filter: brightness(1.7) drop-shadow(0 0 0 transparent); }
    65%  { opacity: 1; transform: scale(1.045) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1) drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
}

.champion-confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 145;
    pointer-events: none;
    overflow: hidden;
}

.champion-confetti-rain,
.champion-confetti-burst {
    position: absolute;
    display: block;
    width: var(--size);
    height: calc(var(--size) * .58);
    border-radius: 2px;
    background: var(--confetti-color);
    will-change: transform, opacity;
}

.champion-confetti-rain {
    top: -8vh;
    left: var(--x);
    opacity: 0;
    animation: championConfettiRain var(--duration) cubic-bezier(.16,.7,.22,1) var(--delay) forwards;
}

.champion-confetti-burst {
    left: 50%;
    top: 48%;
    opacity: 0;
    animation: championConfettiBurst var(--duration) cubic-bezier(.13,.72,.25,1) var(--delay) forwards;
}

@keyframes championConfettiRain {
    0% {
        opacity: 0;
        transform: translate3d(0,-18px,0) rotate(0deg);
    }
    8% { opacity: .96; }
    88% { opacity: .9; }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift),112vh,0) rotate(var(--spin));
    }
}

@keyframes championConfettiBurst {
    0% {
        opacity: 1;
        transform: translate3d(-50%,-50%,0) scale(.6) rotate(0deg);
    }
    72% { opacity: .95; }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y)), 0) scale(1) rotate(var(--spin));
    }
}



.card-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px);
    padding: 18px;
}

.card-video-overlay.show {
    display: flex;
    animation: overlayFadeIn .22s ease-out;
}

.card-video-frame {
    width: min(82vw, 440px);
    max-height: 82vh;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.92);
    box-shadow: 0 18px 40px rgba(0,0,0,.48);
    background: #000;
    position: relative;
}

.card-video-frame::after {
    content: "🟥 CARTA 1 • TÁ NA RUA!";
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .4px;
    color: #fff;
    background: rgba(0,0,0,.55);
    pointer-events: none;
}

.card2-video-frame::after {
    content: "🎽 CARTA 2 • SANGUE NOVO!";
}

.card3-video-frame::after {
    content: "⚡ CARTA 3 • ARRANCADA!";
}

.card4-video-frame::after {
    content: "🤝 CARTA 4 • PASSE!";
}

.card7-video-frame::after {
    content: "🎯 CARTA 7 • JOGADA ENSAIADA!";
}

.card8-video-frame::after {
    content: "🚧 CARTA 8 • BLOCK!";
}

.card9-video-frame::after {
    content: "↩️ CARTA 9 • RECUO TÁTICO!";
}

.card10-video-frame::after {
    content: "🐢 CARTA 10 • CATIMBA!";
}

.card-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}
@media (max-width: 780px) {
    .champion-image {
        width: min(82vw, 570px);
        max-height: 50vh;
    }
    .overlay.goal-mode.champion-mode .victory {
        padding: 14px 16px 18px;
    }
}

/* =========================================================
   TELAS MENORES
========================================================= */
@media (max-width: 1050px) {
    .game-header {
        grid-template-columns: 180px 1fr 285px;
    }
    .title { font-size: 25px; }
    .player { font-size: 12px; }
    .turn { font-size: 9px; }
    .electronic-scoreboard { min-width: 132px; padding-left: 7px; padding-right: 7px; }
    .score-number { min-width: 30px; font-size: 23px; }
    .score-separator { font-size: 17px; }
    .dice-button { padding: 10px 10px; font-size: 11px; }
    .fullscreen-button, .formation-confirm-button { padding: 8px 10px; font-size: 10px; }
    .dice { width: 46px; height: 46px; flex-basis: 46px; padding: 5px; }
}

@media (max-width: 780px) {
    body { overflow-x: auto; }
    .game-container {
        width: 100%;
        min-width: 760px;
        padding: 6px;
    }
    .game-header,
    .info-panel,
    .bottom-panel {
        width: 748px;
    }
    .game-header {
        grid-template-columns: 150px 1fr 255px;
        gap: 5px;
    }
    .brand-panel { padding: 5px 8px; }
    .title { font-size: 20px; }
    .subtitle { font-size: 9px; }
    .pitch-shell {
        width: 748px;
        max-width: none;
    }
    .bottom-panel { grid-template-columns: 280px 1fr; }
    .rules { font-size: 9px; }
}


/* =========================================================
   MOBILE / TABLET — VERSÃO SEM ROLAGEM DA PÁGINA
========================================================= */
@media (max-width: 900px) {
    html, body {
        height: 100%;
        overflow: hidden !important;
    }

    body {
        align-items: stretch;
        overflow: hidden !important;
    }

    .game-container {
        width: 100vw !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 100dvh;
        height: 100dvh;
        padding: 5px;
        gap: 5px;
        overflow: hidden;
    }

    .game-header,
    .match-stage,
    .info-panel,
    .bottom-panel {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .brand-logo {
        max-width: 150px;
        max-height: 54px;
    }

    .top-panel {
        gap: 4px;
        padding: 5px 6px;
    }

    .player {
        font-size: 11px;
        padding: 6px 5px;
    }

    .turn {
        font-size: 8px;
        letter-spacing: .4px;
    }

    .electronic-scoreboard {
        min-width: 118px;
        padding: 4px 7px;
    }

    .score-number {
        min-width: 28px;
        font-size: 21px;
    }

    .score-separator {
        font-size: 16px;
    }

    .dice-area {
        gap: 6px;
        padding: 4px 6px;
    }

    .dice {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        padding: 5px;
    }

    .dice .pip {
        width: 7px;
        height: 7px;
    }

    .dice-button,
    .new-game,
    .fullscreen-button,
    .formation-confirm-button {
        padding: 8px 10px;
        font-size: 10px;
    }

    .dice-info {
        font-size: 9px;
    }

    .dice-value {
        font-size: 20px;
    }

    .message {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 10px;
    }

    .info-panel {
        padding: 4px;
        gap: 4px;
    }

    .bottom-panel {
        display: none !important;
    }

    .team-side {
        padding: 4px;
        gap: 4px;
        min-height: 0;
        overflow: auto;
        scrollbar-width: none;
    }

    .team-side::-webkit-scrollbar { display: none; }

    .side-team-title {
        min-height: 20px;
        font-size: 8px;
    }

    .team-side .squad-box,
    .team-side .card-hand {
        padding: 4px;
    }

    .team-side .squad-title,
    .team-side .card-hand-title {
        font-size: 7px;
        margin-bottom: 3px;
    }

    .team-side .squad-label {
        font-size: 6px;
        margin-bottom: 2px;
    }

    .team-side .player-chip {
        min-width: 22px;
        height: 18px;
        padding: 0 4px;
        font-size: 6px;
    }

    .team-side .player-chips {
        min-height: 18px;
        gap: 2px;
    }

    .team-side .tactical-card .card-number { font-size: 7px; }
    .team-side .tactical-card .card-name { font-size: 7px; }
    .team-side .tactical-card .card-effect { display: none; }

    .side-card-rule {
        display: none;
    }

    .piece {
        width: 74%;
    }

    .piece-label {
        font-size: clamp(5px, 1.3vw, 8px);
    }

    .goal-cell {
        font-size: clamp(8px, 2.2vw, 12px);
    }

    .cell:hover {
        outline-width: 1px;
    }
}

/* ---------------------------------------------------------
   MOBILE RETRATO
--------------------------------------------------------- */
@media (max-width: 900px) and (orientation: portrait) {
    .game-container {
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    .game-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand brand"
            "top dice";
        gap: 5px;
        align-items: stretch;
    }

    .brand-panel { grid-area: brand; padding: 4px 8px; }
    .top-panel { grid-area: top; }
    .game-header > .dice-area { grid-area: dice; }

    .match-stage {
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "pitch pitch"
            "red blue";
        gap: 5px;
        align-items: stretch;
    }

    .pitch-shell {
        grid-area: pitch;
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        justify-self: center;
        align-self: center;
        border-width: 3px;
        border-radius: 12px;
    }

    .red-side { grid-area: red; }
    .blue-side { grid-area: blue; }

    .team-side .squad-rows {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .team-side .card-slots {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        gap: 4px;
    }

    .team-side .card-slot {
        min-height: 40px;
    }

    .info-panel {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "message message message message"
            "formation fullscreen ranking newgame";
        align-items: stretch;
    }

    .message { grid-area: message; }
    .formation-confirm-button { grid-area: formation; }
    .fullscreen-button { grid-area: fullscreen; }
    .new-game { grid-area: newgame; }
}

/* ---------------------------------------------------------
   MOBILE PAISAGEM
--------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
    .game-container {
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    .game-header {
        grid-template-columns: 132px minmax(0, 1fr) 220px;
        gap: 5px;
    }

    .match-stage {
        min-height: 0;
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr) 112px;
        gap: 5px;
        align-items: stretch;
    }

    .pitch-shell {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        justify-self: center;
        align-self: center;
        border-width: 3px;
        border-radius: 12px;
    }

    .team-side .squad-rows {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .team-side .card-slots {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(34px, 1fr));
        gap: 4px;
    }

    .team-side .card-slot {
        min-height: 34px;
    }

    .info-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        align-items: center;
        gap: 4px;
    }

    .message {
        min-width: 0;
    }
}

/* ---------------------------------------------------------
   TELAS MUITO ESTREITAS
--------------------------------------------------------- */
@media (max-width: 480px) {
    .brand-logo {
        max-width: 136px;
        max-height: 48px;
    }

    .score-number {
        min-width: 24px;
        font-size: 18px;
    }

    .player {
        font-size: 10px;
        padding: 5px 4px;
    }

    .team-side .card-slot {
        min-height: 36px;
    }
}



/* =========================================================
   TELA DE ABERTURA DO CARDBOL
========================================================= */
.opening-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity .55s ease, visibility .55s ease;
}

.opening-screen.closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.opening-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.opening-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,0) 58%,
        rgba(0,0,0,.28) 100%
    );
}

.opening-play-button {
    position: relative;
    z-index: 3;
    align-self: flex-end;
    margin-bottom: clamp(38px, 8vh, 86px);
    border: 2px solid rgba(255,255,255,.86);
    border-radius: 999px;
    padding: 15px 30px;
    min-width: 210px;
    background: linear-gradient(145deg, rgba(22,163,74,.96), rgba(21,128,61,.96));
    color: #fff;
    font-family: inherit;
    font-size: clamp(16px, 1.65vw, 23px);
    font-weight: 1000;
    letter-spacing: .45px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 12px 30px rgba(0,0,0,.52),
        0 0 24px rgba(34,197,94,.26);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.96);
}

.opening-play-button.ready {
    visibility: visible;
    pointer-events: auto;
    animation:
        openingButtonEnter .48s cubic-bezier(.2,.85,.25,1.18) forwards,
        openingButtonPulse 1.45s ease-in-out .5s infinite alternate;
}

.opening-play-button:hover {
    filter: brightness(1.12);
}

.opening-play-button:active {
    transform: scale(.97);
}

@keyframes openingButtonEnter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Pulsa entre 100% e cerca de 30% de opacidade para chamar o clique. */
@keyframes openingButtonPulse {
    from {
        opacity: 1;
        box-shadow:
            0 12px 30px rgba(0,0,0,.52),
            0 0 26px rgba(34,197,94,.34);
    }
    to {
        opacity: .30;
        box-shadow:
            0 8px 18px rgba(0,0,0,.38),
            0 0 10px rgba(34,197,94,.16);
    }
}

@media (max-width: 780px) {
    .opening-video {
        object-fit: cover;
    }

    .opening-play-button {
        margin-bottom: max(32px, env(safe-area-inset-bottom));
        padding: 13px 24px;
        min-width: 190px;
        font-size: 15px;
    }
}

/* =========================================================
   ESCOLHA DO MODO DE JOGO
========================================================= */
.game-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: radial-gradient(circle at 50% 42%, rgba(24,35,48,.88), rgba(2,6,12,.97) 74%);
    backdrop-filter: blur(7px);
}
.game-mode-overlay.show { display:flex; animation:kickoffOverlayIn .25s ease-out both; }
.game-mode-panel {
    width:min(92vw,470px); padding:24px 20px 22px; border-radius:22px;
    border:1px solid rgba(255,255,255,.2); background:rgba(7,12,18,.94);
    box-shadow:0 28px 80px rgba(0,0,0,.68); text-align:center;
}
.game-mode-title { margin:0 0 5px; color:#fff; font-size:clamp(22px,4vw,32px); font-weight:1000; }
.game-mode-subtitle { margin:0 0 18px; color:#cbd5e1; font-size:12px; font-weight:700; }
.game-mode-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.game-mode-button {
    min-height:92px; border-radius:16px; border:2px solid rgba(255,255,255,.18);
    color:#fff; font-family:inherit; font-size:14px; font-weight:1000; cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.42); transition:transform .16s ease,filter .16s ease,border-color .16s ease;
}
.game-mode-button:hover { transform:translateY(-2px) scale(1.015); filter:brightness(1.1); border-color:rgba(255,255,255,.55); }
.game-mode-button.pvp-mode { background:linear-gradient(145deg,#7f1d1d 0%,#1e3a8a 100%); }
.game-mode-button.cpu-mode { background:linear-gradient(145deg,#1d4ed8,#172554); }
.game-mode-button small { display:block; margin-top:7px; font-size:10px; opacity:.78; font-weight:800; }
@media (max-width:520px) {
    .game-mode-buttons { grid-template-columns:1fr; }
    .game-mode-button { min-height:72px; }
}

/* =========================================================
   SORTEIO DO PONTAPÉ INICIAL
========================================================= */
.kickoff-overlay {
    position: fixed;
    inset: 0;
    z-index: 9200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 40%, rgba(30,41,59,.86), rgba(2,6,12,.96) 72%);
    backdrop-filter: blur(6px);
}

.kickoff-overlay.show {
    display: flex;
    animation: kickoffOverlayIn .28s ease-out both;
}

.kickoff-panel {
    width: min(92vw, 520px);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 18px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(7,12,18,.9);
    box-shadow:
        0 28px 80px rgba(0,0,0,.66),
        inset 0 0 35px rgba(255,255,255,.035);
    text-align: center;
}

.kickoff-title {
    margin: 0;
    font-size: clamp(20px, 3.2vw, 32px);
    font-weight: 1000;
    letter-spacing: .7px;
    color: #f8fafc;
}

.kickoff-subtitle {
    margin: -5px 0 1px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
}

.kickoff-wheel-wrap {
    position: relative;
    width: min(70vw, 330px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
}

.kickoff-pointer {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: -13px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 0;
    border-bottom: 31px solid #facc15;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.75));
}

.kickoff-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 7px solid #e5e7eb;
    background:
        conic-gradient(
            from 0deg,
            #2563eb 0deg 45deg,
            #dc2626 45deg 90deg,
            #2563eb 90deg 135deg,
            #dc2626 135deg 180deg,
            #2563eb 180deg 225deg,
            #dc2626 225deg 270deg,
            #2563eb 270deg 315deg,
            #dc2626 315deg 360deg
        );
    box-shadow:
        0 14px 36px rgba(0,0,0,.56),
        inset 0 0 0 4px rgba(255,255,255,.18);
    transform: rotate(0deg);
    will-change: transform;
}

.kickoff-wheel::before {
    content: "";
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.2);
    pointer-events: none;
}

.kickoff-wheel::after {
    content: "⚽";
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 25%;
    aspect-ratio: 1;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #fff, #d1d5db);
    border: 4px solid #111827;
    color: #111827;
    font-size: clamp(28px, 7vw, 48px);
    box-shadow: 0 5px 14px rgba(0,0,0,.46);
}

.kickoff-sector-label {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 38%;
    height: 0;
    margin-left: -19%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform:
        rotate(var(--sector-angle))
        translateY(-96px)
        rotate(calc(-1 * var(--sector-angle)));
    transform-origin: 50% 50%;
    pointer-events: none;
}

.kickoff-sector-logo-wrap {
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: rgba(255,255,255,.96);
    border: 2px solid rgba(17,24,39,.88);
    box-shadow:
        0 3px 9px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.95);
    overflow: hidden;
}

.kickoff-sector-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


@media (max-width: 768px) {
    .kickoff-sector-label {
        transform:
            rotate(var(--sector-angle))
            translateY(-82px)
            rotate(calc(-1 * var(--sector-angle)));
    }

    .kickoff-sector-logo-wrap {
        width: 34px;
        height: 34px;
        padding: 3px;
        border-width: 2px;
    }
}

.kickoff-result {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 3vw, 24px);
    font-weight: 1000;
    letter-spacing: .5px;
    color: #f8fafc;
    text-shadow: 0 2px 8px rgba(0,0,0,.65);
}

.kickoff-result.blue-result {
    color: #93c5fd;
}

.kickoff-result.red-result {
    color: #fca5a5;
}

.kickoff-button {
    border: 2px solid rgba(250,204,21,.82);
    border-radius: 999px;
    padding: 13px 23px;
    min-width: 220px;
    background: linear-gradient(145deg, #d97706, #92400e);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 1000;
    letter-spacing: .4px;
    cursor: pointer;
    box-shadow:
        0 8px 22px rgba(0,0,0,.44),
        0 0 18px rgba(250,204,21,.18);
    transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.kickoff-button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.12);
}

.kickoff-button:disabled {
    opacity: .46;
    cursor: wait;
}

.kickoff-overlay.finishing .kickoff-panel {
    animation: kickoffPanelOut .38s ease-in forwards;
}

@keyframes kickoffOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kickoffPanelOut {
    to {
        opacity: 0;
        transform: scale(.96);
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .kickoff-panel {
        width: min(88vw, 700px);
        padding: 10px 16px 12px;
        gap: 7px;
    }

    .kickoff-title {
        font-size: 19px;
    }

    .kickoff-subtitle {
        font-size: 9px;
    }

    .kickoff-wheel-wrap {
        width: min(48vh, 280px);
        margin-top: 1px;
    }

    /* Em paisagem a roleta fica muito menor por causa do limite em vh.
       Reposiciona os escudos proporcionalmente para dentro das fatias. */
    .kickoff-sector-label {
        transform:
            rotate(var(--sector-angle))
            translateY(-56px)
            rotate(calc(-1 * var(--sector-angle)));
    }

    .kickoff-sector-logo-wrap {
        width: 28px;
        height: 28px;
        padding: 2px;
        border-width: 1.5px;
        box-shadow:
            0 2px 6px rgba(0,0,0,.42),
            inset 0 1px 0 rgba(255,255,255,.92);
    }

    .kickoff-button {
        padding: 9px 18px;
        min-width: 200px;
        font-size: 12px;
    }

    .kickoff-result {
        min-height: 23px;
        font-size: 16px;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    .kickoff-wheel-wrap {
        width: min(76vw, 300px);
    }

    .kickoff-sector-label {
        transform:
            rotate(var(--sector-angle))
            translateY(-103px)
            rotate(calc(-1 * var(--sector-angle)));
    }
}


/* =========================================================
   CRONÔMETROS DA PARTIDA
========================================================= */
.match-clock-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 1px 0 2px;
    font-family: "Courier New", Consolas, monospace;
    font-weight: 1000;
    line-height: 1;
}

.match-phase-label {
    color: #94a3b8;
    font-size: 8px;
    letter-spacing: .65px;
}

.match-clock {
    min-width: 47px;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(255,255,255,.07);
    color: #f8fafc;
    font-size: 13px;
    letter-spacing: .6px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.65);
}

.match-clock.warning {
    color: #facc15;
    animation: matchClockPulse .8s ease-in-out infinite alternate;
}

.match-clock.danger {
    color: #fb7185;
    animation: matchClockPulse .45s ease-in-out infinite alternate;
}

.turn-clock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #dbeafe;
    font-family: "Courier New", Consolas, monospace;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .3px;
}

.turn-clock.warning {
    color: #fde047;
    background: rgba(250,204,21,.12);
}

.turn-clock.danger {
    color: #fca5a5;
    background: rgba(239,68,68,.16);
    animation: turnClockPulse .45s ease-in-out infinite alternate;
}

@keyframes matchClockPulse {
    from { opacity: 1; }
    to { opacity: .55; }
}

@keyframes turnClockPulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.06); opacity: .62; }
}

/* Intervalo / prorrogação */
.period-overlay {
    position: fixed;
    inset: 0;
    z-index: 9350;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at 50% 38%, rgba(30,41,59,.9), rgba(2,6,12,.97) 74%);
    backdrop-filter: blur(7px);
}

.period-overlay.show {
    display: flex;
    animation: kickoffOverlayIn .25s ease-out both;
}

.period-panel {
    width: min(90vw, 520px);
    padding: 24px 22px 22px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(7,12,18,.94);
    box-shadow: 0 28px 80px rgba(0,0,0,.68);
    text-align: center;
}

.period-title {
    margin: 0 0 8px;
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 1000;
}

.period-score {
    margin: 4px 0 8px;
    font-family: "Courier New", Consolas, monospace;
    font-size: clamp(30px, 6vw, 46px);
    font-weight: 1000;
}

.period-detail {
    margin: 0 auto 16px;
    max-width: 430px;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.period-button {
    border: 2px solid rgba(250,204,21,.82);
    border-radius: 999px;
    padding: 12px 24px;
    min-width: 220px;
    background: linear-gradient(145deg, #d97706, #92400e);
    color: white;
    font-family: inherit;
    font-size: 13px;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

@media (max-width: 900px) {
    .electronic-scoreboard {
        min-width: 148px;
    }

    .match-clock-row {
        gap: 4px;
    }

    .match-phase-label {
        font-size: 7px;
    }

    .match-clock {
        min-width: 41px;
        font-size: 11px;
    }

    .turn-clock {
        font-size: 8px;
        min-width: 36px;
        margin-left: 3px;
    }
}


/* =========================================================
   PEÇAS COM IMAGENS INDIVIDUAIS
========================================================= */
.piece.blue,
.piece.red {
    background: transparent;
}

.piece {
    color: transparent;
    background: transparent;
}

.piece-player-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 1;
}

.piece-image-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: clamp(7px, .8vw, 11px);
    font-weight: 1000;
    background: rgba(15,23,42,.92);
    z-index: 1;
}

.piece.image-error .piece-image-fallback {
    display: flex;
}

.piece.image-error .piece-player-image {
    display: none;
}

/* O fogo e demais efeitos continuam acima da imagem do jogador. */
.piece.card7-fire::after {
    z-index: 14;
}

/* =========================================================
   MINI-CARROSSEL — RESERVAS E EXPULSOS
========================================================= */
.team-side .player-chips {
    position: relative;
    min-height: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bench-carousel {
    position: relative;
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bench-carousel-item {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(3,7,18,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    font-family: inherit;
    cursor: default;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
    animation: benchCarouselIn .28s ease-out both;
}

button.bench-carousel-item {
    cursor: pointer;
}

button.bench-carousel-item:hover {
    transform: scale(1.07);
    filter: brightness(1.12);
}

.bench-carousel-item.reserve-selectable {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251,191,36,.16), 0 0 12px rgba(251,191,36,.42);
}

.bench-carousel-item.reserve-selected {
    border-color: #fde68a;
    box-shadow: 0 0 0 3px rgba(251,191,36,.24), 0 0 15px rgba(251,191,36,.68);
    transform: scale(1.06);
}

.bench-carousel-item.expelled-player {
    border-color: rgba(248,113,113,.72);
    box-shadow: 0 0 10px rgba(239,68,68,.25);
}

.bench-carousel-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.bench-carousel-counter {
    position: absolute;
    right: -7px;
    bottom: -4px;
    min-width: 23px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(2,6,23,.92);
    border: 1px solid rgba(255,255,255,.18);
    color: #e2e8f0;
    font-size: 7px;
    line-height: 13px;
    font-weight: 1000;
    pointer-events: none;
}

.bench-carousel-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(2,6,23,.62);
    color: rgba(255,255,255,.74);
    font-size: 13px;
    font-weight: 1000;
    cursor: pointer;
    opacity: .58;
    transition: opacity .15s ease, background .15s ease;
}

.bench-carousel-arrow:hover {
    opacity: 1;
    background: rgba(15,23,42,.94);
}

.bench-carousel-arrow.prev {
    left: 1px;
}

.bench-carousel-arrow.next {
    right: 1px;
}

.bench-carousel-empty {
    color: rgba(255,255,255,.34);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .5px;
}

@keyframes benchCarouselIn {
    from { opacity: 0; transform: scale(.86); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
    .team-side .player-chips,
    .bench-carousel {
        min-height: 44px;
        height: 44px;
    }

    .bench-carousel-item {
        width: 39px;
        height: 39px;
    }

    .bench-carousel-arrow {
        width: 18px;
        height: 24px;
        font-size: 10px;
    }

    .bench-carousel-counter {
        min-width: 20px;
        height: 13px;
        line-height: 11px;
        font-size: 6px;
    }
}


/* =========================================================
   AJUSTE DE ESCALA DAS PEÇAS
   - tamanho normal: +30%
   - selecionada: +50% adicional
========================================================= */
.piece {
    width: 93.6%;
    max-height: 93.6%;
    left: 3.2%;
    top: 3.2%;
}

.piece.selected,
.piece.formation-selected {
    transform: scale(1.5);
    z-index: 40;
}

/* Durante animação, preserva o destaque caso a peça já esteja selecionada. */
.piece.moving.selected,
.piece.moving.formation-selected {
    z-index: 45;
}


/* =========================================================
   ESCUDOS NO PLACAR
========================================================= */
.score-team {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
}

.score-club-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}

/* =========================================================
   IDENTIDADE DO CLUBE + ARTILHEIRO NA COMEMORAÇÃO
========================================================= */
.goal-identity {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 12px;
}

.overlay.goal-mode .goal-identity {
    display: flex;
    animation: goalIdentityEnter .48s cubic-bezier(.18,.9,.28,1.18) both;
}

.goal-club-badge,
.goal-scorer-card {
    width: clamp(72px, 9vw, 112px);
    height: clamp(72px, 9vw, 112px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3,7,18,.78);
    border: 2px solid rgba(255,255,255,.78);
    box-shadow: 0 10px 24px rgba(0,0,0,.48);
    overflow: hidden;
}

.goal-club-logo {
    width: 76%;
    height: 76%;
    object-fit: contain;
    display: block;
}

.goal-scorer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Ao entrar na tela final de campeão, a imagem tradicional do campeão
   assume o protagonismo; o autor do gol já apareceu no primeiro impacto. */
.overlay.champion-mode .goal-identity {
    display: none;
}

@keyframes goalIdentityEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.82);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 900px) {
    .score-club-logo {
        width: 21px;
        height: 21px;
    }

    .score-team {
        gap: 3px;
    }

    .goal-identity {
        gap: 10px;
        margin-bottom: 8px;
    }

    .goal-club-badge,
    .goal-scorer-card {
        width: 68px;
        height: 68px;
    }
}


/* =========================================================
   SELEÇÃO DE TIME (12 QUADRADOS)
========================================================= */
.team-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at center, rgba(2,6,23,.12), rgba(2,6,23,.80)),
        rgba(2,6,23,.78);
    backdrop-filter: blur(8px);
}

.team-select-overlay.show {
    display: flex;
    animation: kickoffOverlayIn .25s ease-out both;
}

.team-select-panel {
    width: min(1220px, 97vw);
    border-radius: 28px;
    padding: 20px 20px 16px;
    border: 1px solid rgba(255,255,255,.16);
    background:
        linear-gradient(180deg, rgba(8,15,28,.84), rgba(5,10,20,.72));
    box-shadow: 0 24px 60px rgba(0,0,0,.48);
}

.team-select-panel-stadium {
    position: relative;
    overflow: hidden;
}

.team-select-panel-stadium::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2,6,23,.36), rgba(2,6,23,.16) 22%, rgba(2,6,23,.16) 78%, rgba(2,6,23,.38)),
        url("../imagens/geral/img-bg-menu-times-modo-pc.png") center center / cover no-repeat;
    opacity: .95;
    pointer-events: none;
}

.team-select-panel-stadium > * {
    position: relative;
    z-index: 1;
}

.team-select-title {
    margin: 0 0 6px;
    text-align: center;
    color: #fff;
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 1000;
    letter-spacing: .06em;
}

.team-select-subtitle {
    margin: 0 0 16px;
    text-align: center;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
}

.team-select-layout {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(220px, 28vw) minmax(300px, 1fr);
    gap: 18px;
    align-items: stretch;
}

.team-select-grid {
    display: grid;
    gap: 12px;
}

.team-select-grid-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
}

.team-select-center {
    min-height: 366px;
    border-radius: 24px;
    background: transparent;
}

.team-card,
.team-card-locked {
    min-height: 120px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        linear-gradient(180deg, #172033, #0f1728);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
    color: #fff;
    font-weight: 1000;
    text-align: center;
}

.team-card:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.08);
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 14px 30px rgba(0,0,0,.34);
}

.team-card.active-team-card {
    border-color: rgba(250,204,21,.75);
    box-shadow: 0 0 0 2px rgba(250,204,21,.25), 0 16px 32px rgba(0,0,0,.35);
}

.team-card-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}

.team-card-label {
    font-size: 15px;
    line-height: 1.08;
    letter-spacing: .03em;
}

.team-card-role {
    font-size: 10px;
    font-weight: 800;
    color: #cbd5e1;
    opacity: .9;
}

.team-card.barcelona-card {
    background:
        linear-gradient(145deg, rgba(153,27,27,.85), rgba(30,41,59,.65)),
        linear-gradient(180deg, #1e3a8a, #7f1d1d);
}

.team-card.real-card {
    background:
        linear-gradient(145deg, rgba(29,78,216,.82), rgba(15,23,42,.66)),
        linear-gradient(180deg, #1d4ed8, #0f172a);
}

.team-card-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(203,213,225,.44);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.team-card-locked::before {
    content: "🔒";
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 18px;
    opacity: .7;
}

.team-select-footer {
    margin-top: 14px;
    text-align: center;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 980px) {
    .team-select-layout {
        grid-template-columns: minmax(240px, 1fr) minmax(150px, 22vw) minmax(240px, 1fr);
        gap: 12px;
    }

    .team-select-grid-side {
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .team-select-panel {
        padding: 18px 14px 14px;
    }

    .team-select-layout {
        grid-template-columns: minmax(0, 1fr) minmax(74px, 19vw) minmax(0, 1fr);
        gap: 8px;
    }

    .team-select-grid-side {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .team-select-center {
        min-height: 100%;
        border-radius: 16px;
    }

    .team-card,
    .team-card-locked {
        min-height: 86px;
    }
    .team-card-logo {
        width: 44px;
        height: 44px;
    }
    .team-card-label {
        font-size: 13px;
    }
}

/* =========================================================
   MOBILE PAISAGEM — PROPORÇÃO CORRETA DO CAMPO
   Otimização baseada em gravação real no celular.
========================================================= */
@media (orientation: landscape) and (max-height: 650px) {
    html, body { width:100%; height:100%; min-height:100%; overflow:hidden !important; }
    body { align-items:stretch; }

    .game-container {
        width:100vw !important; height:100dvh !important; min-height:100dvh !important;
        max-width:none !important; min-width:0 !important;
        padding:3px !important; gap:3px !important;
        display:grid !important;
        grid-template-rows:60px minmax(0,1fr) 30px !important;
        overflow:hidden !important;
    }

    .game-header {
        width:100% !important; height:60px !important; min-height:0 !important;
        display:grid !important;
        grid-template-columns:100px minmax(0,1fr) 190px !important;
        gap:3px !important; margin:0 !important;
    }

    .brand-panel { padding:2px 5px !important; min-height:0 !important; }
    .brand-logo { width:auto !important; max-width:94px !important; max-height:52px !important; }

    .top-panel {
        min-height:0 !important; gap:3px !important; padding:2px 4px !important;
        grid-template-columns:minmax(82px,1fr) auto minmax(82px,1fr) !important;
    }

    .player { padding:4px 3px !important; font-size:8px !important; overflow:hidden; text-overflow:ellipsis; }
    .electronic-scoreboard { min-width:108px !important; padding:2px 5px 3px !important; }
    .score-label { font-size:6px !important; }
    .score-club-logo { width:18px !important; height:18px !important; }
    .score-number { min-width:22px !important; font-size:18px !important; }
    .score-separator { font-size:13px !important; }
    .match-clock-row { gap:4px !important; margin:0 !important; }
    .match-phase-label { font-size:6px !important; }
    .match-clock { font-size:9px !important; }
    .turn { margin-top:0 !important; font-size:6px !important; letter-spacing:.15px !important; }
    .turn-clock { font-size:7px !important; }

    .dice-area { min-height:0 !important; gap:4px !important; padding:2px 4px !important; }
    .dice { width:38px !important; height:38px !important; flex-basis:38px !important; padding:4px !important; }
    .dice .pip { width:6px !important; height:6px !important; }
    .dice-button { padding:6px 7px !important; font-size:8px !important; }
    .dice-info { font-size:7px !important; }
    .dice-value { font-size:16px !important; }

    .match-stage {
        width:100% !important; height:100% !important;
        min-width:0 !important; min-height:0 !important; margin:0 !important;
        display:grid !important;
        grid-template-columns:100px minmax(0,1fr) 100px !important;
        gap:3px !important; align-items:center !important;
        overflow:hidden !important;
    }

    .pitch-shell,
    .match-stage .pitch-shell {
        width:min(100%, calc((100dvh - 99px) * 20 / 11)) !important;
        height:auto !important;
        max-width:100% !important;
        max-height:calc(100dvh - 99px) !important;
        aspect-ratio:20 / 11 !important;
        min-width:0 !important; min-height:0 !important;
        align-self:center !important; justify-self:center !important;
        border-width:2px !important; border-radius:9px !important;
        flex:none !important;
    }

    .team-side {
        width:100% !important; height:100% !important;
        max-height:calc(100dvh - 99px) !important;
        min-height:0 !important; padding:3px !important; gap:3px !important;
        overflow-y:auto !important; overflow-x:hidden !important;
    }

    .side-team-title { min-height:16px !important; font-size:6px !important; letter-spacing:.25px !important; }
    .team-side .squad-box, .team-side .card-hand { padding:2px !important; border-radius:6px !important; }
    .team-side .squad-title, .team-side .card-hand-title { margin-bottom:2px !important; font-size:5px !important; }
    .team-side .squad-section { padding:2px !important; }
    .team-side .squad-label { margin-bottom:1px !important; font-size:5px !important; }
    .team-side .player-chips, .bench-carousel { min-height:32px !important; height:32px !important; }
    .bench-carousel-item { width:29px !important; height:29px !important; }
    .bench-carousel-arrow { width:15px !important; height:20px !important; font-size:9px !important; }
    .bench-carousel-counter { min-width:17px !important; height:11px !important; line-height:9px !important; font-size:5px !important; }
    .team-side .card-slots { grid-template-columns:1fr !important; grid-template-rows:repeat(3,minmax(28px,1fr)) !important; gap:2px !important; }
    .team-side .card-slot { min-height:28px !important; }
    .team-side .tactical-card .card-number, .team-side .tactical-card .card-name { font-size:6px !important; }
    .team-side .tactical-card .card-effect { display:none !important; }

    .info-panel {
        width:100% !important; height:30px !important; min-height:0 !important;
        padding:2px !important; gap:3px !important;
        display:grid !important; grid-template-columns:minmax(0,1fr) auto auto auto !important;
        align-items:center !important;
    }
    .message { min-height:24px !important; height:24px !important; padding:3px 6px !important; font-size:7px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .fullscreen-button, .formation-confirm-button, .new-game { padding:5px 7px !important; font-size:7px !important; white-space:nowrap; }

    .piece {
        width:93.6% !important; height:auto !important;
        max-width:93.6% !important; max-height:93.6% !important;
        aspect-ratio:1 / 1 !important;
        left:3.2% !important; top:3.2% !important;
    }
    .piece-player-image { aspect-ratio:1 / 1; object-fit:contain !important; }
}

@media (orientation: landscape) and (max-height: 430px) {
    .game-container { grid-template-rows:54px minmax(0,1fr) 27px !important; }
    .game-header { height:54px !important; grid-template-columns:88px minmax(0,1fr) 176px !important; }
    .brand-logo { max-width:82px !important; max-height:46px !important; }
    .match-stage { grid-template-columns:92px minmax(0,1fr) 92px !important; }
    .pitch-shell, .match-stage .pitch-shell {
        width:min(100%, calc((100dvh - 90px) * 20 / 11)) !important;
        max-height:calc(100dvh - 90px) !important;
    }
    .team-side { max-height:calc(100dvh - 90px) !important; }
    .info-panel { height:27px !important; }
    .message { min-height:21px !important; height:21px !important; font-size:6px !important; }
}
/* =========================================================
   ABERTURA — ESCOLHA TELA CHEIA / MODO NORMAL
========================================================= */
.opening-display-choices {
    position: relative;
    z-index: 4;
    align-self: flex-end;
    width: min(720px, calc(100vw - 28px));
    margin: 0 auto clamp(34px, 7vh, 76px);
    padding: 14px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 22px;
    background: rgba(2,6,23,.68);
    backdrop-filter: blur(9px);
    box-shadow: 0 18px 42px rgba(0,0,0,.46);
    animation: openingChoiceEnter .48s cubic-bezier(.2,.85,.25,1.18) both;
}

.opening-display-choices.hidden {
    display: none;
}

.opening-display-title {
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
    font-size: clamp(13px, 1.35vw, 18px);
    font-weight: 1000;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0,0,0,.65);
}

.opening-display-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.opening-display-button {
    min-height: 76px;
    border: 2px solid rgba(255,255,255,.52);
    border-radius: 16px;
    padding: 10px 14px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(13px, 1.35vw, 18px);
    font-weight: 1000;
    letter-spacing: .35px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 10px 24px rgba(0,0,0,.36);
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}

.opening-display-button.fullscreen-choice {
    background: linear-gradient(145deg, rgba(22,163,74,.97), rgba(21,128,61,.97));
    box-shadow: 0 10px 26px rgba(0,0,0,.38), 0 0 22px rgba(34,197,94,.22);
}

.opening-display-button.normal-choice {
    background: linear-gradient(145deg, rgba(30,64,175,.96), rgba(30,58,138,.96));
    box-shadow: 0 10px 26px rgba(0,0,0,.38), 0 0 22px rgba(59,130,246,.18);
}

.opening-display-button:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.1);
    border-color: rgba(255,255,255,.86);
}

.opening-display-button:active {
    transform: scale(.98);
}

.opening-display-icon {
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1;
}

.opening-display-button small {
    margin-top: 2px;
    color: rgba(255,255,255,.76);
    font-size: clamp(8px, .85vw, 11px);
    font-weight: 800;
    letter-spacing: 0;
}

@keyframes openingChoiceEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* No celular em retrato, empilha os dois modos para facilitar o toque. */
@media (orientation: portrait) and (max-width: 780px) {
    .opening-display-choices {
        width: min(420px, calc(100vw - 22px));
        margin-bottom: max(28px, env(safe-area-inset-bottom));
        padding: 10px;
    }

    .opening-display-buttons {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .opening-display-button {
        min-height: 62px;
        padding: 8px 12px;
        font-size: 14px;
    }

    .opening-display-icon {
        font-size: 20px;
    }
}

/* Em landscape baixo, mantém os dois botões lado a lado e compactos. */
@media (orientation: landscape) and (max-height: 650px) {
    .opening-display-choices {
        width: min(610px, calc(100vw - 24px));
        margin-bottom: max(12px, env(safe-area-inset-bottom));
        padding: 8px;
        border-radius: 15px;
    }

    .opening-display-title {
        margin-bottom: 6px;
        font-size: 10px;
    }

    .opening-display-buttons {
        gap: 7px;
    }

    .opening-display-button {
        min-height: 48px;
        padding: 5px 9px;
        border-radius: 11px;
        font-size: 11px;
    }

    .opening-display-icon {
        font-size: 16px;
    }

    .opening-display-button small {
        font-size: 7px;
    }

    /* O botão final de entrada também fica mais acessível em landscape. */
    .opening-play-button {
        margin-bottom: max(14px, env(safe-area-inset-bottom)) !important;
        padding: 10px 20px !important;
        min-width: 180px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   JANELA DE REGRAS OBRIGATÓRIA
========================================================= */
.rules-overlay {
    position: fixed;
    inset: 0;
    z-index: 9520;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: radial-gradient(circle at 50% 42%, rgba(20,30,44,.90), rgba(2,6,12,.97) 76%);
    backdrop-filter: blur(8px);
}

.rules-overlay.show {
    display: flex;
    animation: kickoffOverlayIn .25s ease-out both;
}

.rules-panel {
    width: min(92vw, 760px);
    max-height: min(92vh, 760px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px 18px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.20);
    background: linear-gradient(180deg, rgba(11,19,30,.98), rgba(6,12,20,.95));
    box-shadow: 0 28px 80px rgba(0,0,0,.68);
    color: #fff;
}

.rules-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rules-kicker {
    color: #93c5fd;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.rules-title {
    margin: 3px 0 0;
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.05;
    font-weight: 1000;
}

.rules-skip-button {
    align-self: flex-start;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
    color: #dbeafe;
    font-family: inherit;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .6px;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, background .16s ease;
}

.rules-skip-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    background: rgba(255,255,255,.14);
}

.rules-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(148,163,184,.10);
    border: 1px solid rgba(255,255,255,.08);
}

.rules-progress-label {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
}

.rules-progress-label strong { color: #fff; }

.rules-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rules-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.rules-dot.active {
    background: #22c55e;
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.rules-pages {
    position: relative;
    min-height: 260px;
}

.rules-page {
    display: none;
    padding: 18px 18px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(30,41,59,.48), rgba(15,23,42,.34));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.rules-page.active {
    display: block;
    animation: rulesPageIn .22s ease-out both;
}

.rules-page h3 {
    margin: 0 0 12px;
    font-size: clamp(18px, 2.1vw, 25px);
    font-weight: 1000;
    color: #fff;
}

.rules-page ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
}

.rules-page li {
    color: #e2e8f0;
    font-size: clamp(14px, 1.55vw, 17px);
    line-height: 1.42;
    font-weight: 700;
}

.rules-page strong { color: #fef08a; }

.rules-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rules-nav-button {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 1000;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}

.rules-nav-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.rules-nav-button.secondary {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    color: #e2e8f0;
}

.rules-nav-button.primary {
    margin-left: auto;
    border: 2px solid rgba(255,255,255,.24);
    background: linear-gradient(145deg, #166534, #15803d);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 24px rgba(34,197,94,.18);
}

.rules-nav-button[disabled] {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

@keyframes rulesPageIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .rules-panel {
        width: min(94vw, 520px);
        max-height: 92vh;
        padding: 16px 14px 14px;
        gap: 10px;
        border-radius: 18px;
    }

    .rules-header {
        gap: 8px;
    }

    .rules-title {
        font-size: 22px;
    }

    .rules-progress {
        padding: 9px 10px;
        gap: 8px;
    }

    .rules-progress-label {
        font-size: 11px;
    }

    .rules-pages {
        min-height: 232px;
    }

    .rules-page {
        padding: 14px 14px 10px;
        border-radius: 14px;
    }

    .rules-page h3 {
        margin-bottom: 10px;
        font-size: 17px;
    }

    .rules-page ul {
        gap: 8px;
        padding-left: 16px;
    }

    .rules-page li {
        font-size: 13px;
        line-height: 1.34;
    }

    .rules-actions {
        gap: 8px;
    }

    .rules-nav-button {
        min-height: 42px;
        padding: 0 14px;
        font-size: 12px;
    }
}

@media (orientation: landscape) and (max-height: 650px) {
    .rules-overlay {
        padding: 10px;
    }

    .rules-panel {
        width: min(96vw, 880px);
        max-height: 94vh;
        padding: 12px 12px 10px;
        gap: 8px;
        border-radius: 16px;
    }

    .rules-kicker {
        font-size: 9px;
    }

    .rules-title {
        font-size: 18px;
    }

    .rules-skip-button {
        padding: 5px 10px;
        font-size: 10px;
    }

    .rules-progress {
        padding: 7px 10px;
    }

    .rules-progress-label {
        font-size: 10px;
    }

    .rules-dot {
        width: 8px;
        height: 8px;
    }

    .rules-pages {
        min-height: 168px;
    }

    .rules-page {
        padding: 10px 12px 8px;
        border-radius: 12px;
    }

    .rules-page h3 {
        margin-bottom: 7px;
        font-size: 15px;
    }

    .rules-page ul {
        gap: 6px;
        padding-left: 16px;
    }

    .rules-page li {
        font-size: 11px;
        line-height: 1.26;
    }

    .rules-nav-button {
        min-height: 34px;
        padding: 0 12px;
        font-size: 11px;
        border-radius: 10px;
    }
}


/* =========================================================
   REGRAS COMPLETAS — ROLAGEM INTERNA SEGURA
========================================================= */
.rules-pages { overflow: hidden; }

.rules-page {
    max-height: min(56vh, 430px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 14px;
}

.rules-page::-webkit-scrollbar { width: 6px; }
.rules-page::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.42);
    border-radius: 999px;
}
.rules-page::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
}

@media (orientation: landscape) and (max-height: 650px) {
    .rules-page {
        max-height: 48vh;
        padding-right: 10px;
    }
}

@media (orientation: portrait) and (max-width: 640px) {
    .rules-page { max-height: 52vh; }
}
/* =========================================================
   SELEÇÃO DE TIMES — MOBILE COMPACTO
   Mantém os 12 clubes visíveis sem cortar em tela cheia.
========================================================= */

/* Retrato mobile */
@media (orientation: portrait) and (max-width: 700px) {
    .team-select-overlay {
        padding: 6px !important;
        overflow: hidden !important;
    }

    .team-select-panel {
        width: min(96vw, 500px) !important;
        max-height: 94dvh !important;
        padding: 9px 9px 8px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .team-select-title {
        margin: 0 0 2px !important;
        font-size: 16px !important;
        line-height: 1.05 !important;
    }

    .team-select-subtitle {
        margin: 0 0 6px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
    }

    .team-select-layout {
        grid-template-columns: minmax(0, 1fr) minmax(54px, 16vw) minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    .team-select-grid {
        gap: 5px !important;
    }

    .team-select-grid-side {
        grid-template-columns: 1fr !important;
    }

    .team-select-center {
        min-height: 100% !important;
        border-radius: 10px !important;
    }

    .team-card,
    .team-card-locked {
        min-height: 62px !important;
        height: 62px !important;
        border-radius: 9px !important;
    }

    .team-card {
        gap: 2px !important;
        padding: 3px !important;
    }

    .team-card-logo {
        width: 30px !important;
        height: 30px !important;
    }

    .team-card-label {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .team-card-role {
        font-size: 6px !important;
        line-height: 1 !important;
    }

    .team-card-locked {
        font-size: 7px !important;
        letter-spacing: .03em !important;
    }

    .team-card-locked::before {
        top: 4px !important;
        right: 5px !important;
        font-size: 10px !important;
    }

    .team-select-footer {
        margin-top: 5px !important;
        font-size: 7px !important;
        line-height: 1.12 !important;
    }
}

/* Paisagem / tela cheia mobile */
@media (orientation: landscape) and (max-height: 700px) {
    .team-select-overlay {
        padding: 4px !important;
        overflow: hidden !important;
    }

    .team-select-panel {
        width: min(82vw, 760px) !important;
        max-height: 94dvh !important;
        padding: 7px 9px 6px !important;
        border-radius: 13px !important;
        overflow: hidden !important;
    }

    .team-select-title {
        margin: 0 0 1px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        letter-spacing: .03em !important;
    }

    .team-select-subtitle {
        margin: 0 0 5px !important;
        font-size: 7px !important;
        line-height: 1.08 !important;
    }

    .team-select-layout {
        grid-template-columns: minmax(0, 1fr) minmax(78px, 16vw) minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    .team-select-grid {
        gap: 4px !important;
    }

    .team-select-grid-side {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .team-select-center {
        min-height: 100% !important;
        border-radius: 10px !important;
    }

    .team-card,
    .team-card-locked {
        min-height: 50px !important;
        height: 50px !important;
        border-radius: 8px !important;
    }

    .team-card {
        gap: 1px !important;
        padding: 2px !important;
    }

    .team-card-logo {
        width: 25px !important;
        height: 25px !important;
    }

    .team-card-label {
        font-size: 8px !important;
        line-height: 1 !important;
    }

    .team-card-role {
        font-size: 5px !important;
        line-height: 1 !important;
    }

    .team-card-locked {
        font-size: 6px !important;
        letter-spacing: .02em !important;
    }

    .team-card-locked::before {
        top: 3px !important;
        right: 4px !important;
        font-size: 9px !important;
    }

    .team-select-footer {
        margin-top: 4px !important;
        font-size: 6px !important;
        line-height: 1.05 !important;
    }
}

/* Landscape extremamente baixo: corta ainda mais o excesso visual. */
@media (orientation: landscape) and (max-height: 430px) {
    .team-select-panel {
        width: min(76vw, 700px) !important;
        padding: 5px 7px !important;
    }

    .team-select-title {
        font-size: 13px !important;
    }

    .team-select-subtitle {
        margin-bottom: 3px !important;
        font-size: 6px !important;
    }

    .team-select-layout {
        gap: 4px !important;
    }

    .team-select-grid {
        gap: 3px !important;
    }

    .team-card,
    .team-card-locked {
        min-height: 43px !important;
        height: 43px !important;
    }

    .team-card-logo {
        width: 21px !important;
        height: 21px !important;
    }

    .team-card-label {
        font-size: 7px !important;
    }

    .team-card-role,
    .team-select-footer {
        font-size: 5px !important;
    }
}


/* =========================================================
   NOVOS CLUBES — ARSENAL / CHELSEA
========================================================= */
.team-card.arsenal-card {
    background:
        linear-gradient(145deg, rgba(185,28,28,.92), rgba(127,29,29,.72)),
        linear-gradient(180deg, #dc2626, #450a0a);
}

.team-card.chelsea-card {
    background:
        linear-gradient(145deg, rgba(29,78,216,.92), rgba(30,58,138,.72)),
        linear-gradient(180deg, #2563eb, #172554);
}

.team-card.team-card-disabled,
.team-card.team-card-disabled:hover {
    cursor: not-allowed;
    opacity: .38;
    filter: grayscale(.35);
    transform: none;
    border-color: rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
/* =========================================================
   CLUBES — BAYERN, BORUSSIA DORTMUND E VASCO
========================================================= */
.team-card.bayern-card {
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(145deg, #b91c1c 0%, #dc2626 52%, #1d4ed8 100%);
}

.team-card.dortmund-card {
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.18), transparent 42%),
        linear-gradient(145deg, #facc15 0%, #eab308 58%, #111827 100%);
    color: #111827;
    border-color: rgba(255,255,255,.48);
}

.team-card.dortmund-card .team-card-role {
    color: rgba(17,24,39,.78);
}

.team-card.vasco-card {
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.12), transparent 42%),
        linear-gradient(145deg, #111827 0%, #030712 62%, #b91c1c 100%);
}

/* =========================================================
   IDENTIFICAÇÃO DO JOGADOR — USUÁRIO + PIN
========================================================= */
.player-identity-overlay {
    position: fixed;
    inset: 0;
    z-index: 9540;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 38%, rgba(19,78,74,.25), transparent 34%),
        radial-gradient(circle at 50% 42%, rgba(24,35,48,.90), rgba(2,6,12,.98) 74%);
    backdrop-filter: blur(8px);
}

.player-identity-overlay.show {
    display: flex;
    animation: kickoffOverlayIn .25s ease-out both;
}

.player-identity-panel {
    width: min(92vw, 440px);
    padding: 24px 22px 22px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.20);
    background: linear-gradient(180deg, rgba(8,15,25,.98), rgba(5,10,17,.96));
    box-shadow: 0 28px 80px rgba(0,0,0,.68);
    color: #fff;
}

.player-identity-kicker {
    color: #86efac;
    text-align: center;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.player-identity-title {
    margin: 4px 0 5px;
    text-align: center;
    color: #fff;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 1000;
}

.player-identity-subtitle {
    margin: 0 0 18px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

.player-identity-field {
    display: block;
    margin-top: 12px;
}

.player-identity-field > span {
    display: block;
    margin: 0 0 6px 2px;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .55px;
}

.player-identity-field input {
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(148,163,184,.35);
    border-radius: 13px;
    outline: none;
    background: rgba(15,23,42,.78);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.player-identity-field input:focus {
    border-color: rgba(34,197,94,.85);
    background: rgba(15,23,42,.96);
    box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}

#playerPinInput {
    letter-spacing: 9px;
    font-size: 21px;
}

.player-identity-field small {
    display: block;
    margin: 5px 2px 0;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
}

.player-identity-error {
    min-height: 18px;
    margin-top: 9px;
    color: #fca5a5;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
}

.player-identity-submit {
    width: 100%;
    min-height: 50px;
    margin-top: 6px;
    border: 2px solid rgba(255,255,255,.22);
    border-radius: 14px;
    background: linear-gradient(145deg, #166534, #15803d);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 24px rgba(34,197,94,.15);
    transition: transform .16s ease, filter .16s ease;
}

.player-identity-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.player-identity-submit:active {
    transform: scale(.985);
}

@media (orientation: landscape) and (max-height: 650px) {
    .player-identity-overlay {
        padding: 7px;
    }

    .player-identity-panel {
        width: min(70vw, 430px);
        max-height: 94dvh;
        padding: 12px 15px 11px;
        border-radius: 15px;
    }

    .player-identity-kicker {
        font-size: 7px;
    }

    .player-identity-title {
        margin: 2px 0;
        font-size: 17px;
    }

    .player-identity-subtitle {
        margin-bottom: 7px;
        font-size: 9px;
    }

    .player-identity-field {
        margin-top: 7px;
    }

    .player-identity-field > span {
        margin-bottom: 3px;
        font-size: 8px;
    }

    .player-identity-field input {
        min-height: 35px;
        padding: 0 10px;
        border-radius: 9px;
        font-size: 12px;
    }

    #playerPinInput {
        font-size: 15px;
        letter-spacing: 7px;
    }

    .player-identity-field small {
        margin-top: 2px;
        font-size: 7px;
    }

    .player-identity-error {
        min-height: 12px;
        margin-top: 4px;
        font-size: 8px;
    }

    .player-identity-submit {
        min-height: 34px;
        margin-top: 2px;
        border-radius: 10px;
        font-size: 10px;
    }
}


/* LOGIN SUPABASE — estado de conexão */
.player-identity-submit:disabled {
    opacity: .64;
    cursor: wait;
    transform: none !important;
    filter: none !important;
}


/* =========================================================
   STATUS DE REGISTRO NO RANKING
========================================================= */
.ranking-save-status {
    display: none;
    width: min(92%, 520px);
    margin: 8px auto 2px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
    text-align: center;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(15,23,42,.72);
}

.ranking-save-status.pending {
    color: #fde68a;
    border-color: rgba(250,204,21,.30);
}

.ranking-save-status.success {
    color: #bbf7d0;
    border-color: rgba(34,197,94,.34);
    background: rgba(20,83,45,.42);
}

.ranking-save-status.error {
    color: #fecaca;
    border-color: rgba(248,113,113,.34);
    background: rgba(127,29,29,.36);
}

@media (orientation: landscape) and (max-height: 650px) {
    .ranking-save-status {
        margin-top: 4px;
        padding: 5px 9px;
        font-size: 9px;
        border-radius: 8px;
    }
}
/* =========================================================
   RANKING CARDBOL
========================================================= */
.game-mode-ranking-button {
    margin: 14px auto 0;
    min-height: 38px;
    padding: 8px 18px;
    border: 1px solid rgba(250,204,21,.46);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(120,53,15,.82), rgba(161,98,7,.78));
    color: #fef3c7;
    font-family: inherit;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .35px;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(0,0,0,.28);
}

.ranking-game-button {
    border: 1px solid rgba(250,204,21,.44);
    border-radius: 9px;
    padding: 9px 12px;
    background: linear-gradient(145deg, #854d0e, #713f12);
    color: #fef3c7;
    font-family: inherit;
    font-weight: 1000;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(0,0,0,.30);
}

.ranking-game-button:hover,
.game-mode-ranking-button:hover,
.victory-ranking-button:hover,
.ranking-refresh-button:hover,
.ranking-close-button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.victory-ranking-button {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 8px auto 6px;
    padding: 9px 16px;
    border: 1px solid rgba(250,204,21,.46);
    border-radius: 11px;
    background: linear-gradient(145deg, #a16207, #713f12);
    color: #fff7cc;
    font-family: inherit;
    font-size: 12px;
    font-weight: 1000;
    cursor: pointer;
}

.victory-hub-button {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 8px auto 0;
    padding: 11px 18px !important;
    border: 1px solid rgba(56,189,248,.48) !important;
    border-radius: 11px !important;
    background: linear-gradient(145deg, #075985, #0c4a6e) !important;
    color: #e0f2fe !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .25px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(2,132,199,.16);
}

.victory-hub-button:hover {
    filter: brightness(1.14);
    transform: translateY(-1px);
}

.ranking-overlay {
    position: fixed;
    inset: 0;
    z-index: 9900;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background:
        radial-gradient(circle at 50% 36%, rgba(30,41,59,.90), rgba(2,6,12,.98) 75%);
    backdrop-filter: blur(8px);
}

.ranking-overlay.show {
    display: flex;
    animation: kickoffOverlayIn .22s ease-out both;
}

.ranking-panel {
    width: min(94vw, 900px);
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(13,22,35,.98), rgba(5,11,19,.98));
    color: #f8fafc;
    box-shadow:
        0 30px 90px rgba(0,0,0,.72),
        0 0 0 1px rgba(250,204,21,.05) inset;
}

.ranking-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ranking-kicker {
    margin-bottom: 2px;
    color: #fbbf24;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 1.15px;
}

.ranking-title {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1;
    font-weight: 1000;
}

.ranking-close-button {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 1000;
    cursor: pointer;
}

.ranking-summary {
    padding: 8px 20px;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.ranking-summary strong:first-child { color: #86efac; }
.ranking-summary strong:last-child { color: #fca5a5; }

.ranking-loading,
.ranking-error,
.ranking-empty {
    margin: 18px;
    padding: 18px;
    border-radius: 14px;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}

.ranking-loading {
    color: #fde68a;
    background: rgba(113,63,18,.22);
}

.ranking-error {
    display: none;
    color: #fecaca;
    background: rgba(127,29,29,.32);
    border: 1px solid rgba(248,113,113,.24);
}

.ranking-empty {
    display: none;
    color: #cbd5e1;
    background: rgba(30,41,59,.46);
}

.ranking-table-wrap {
    display: none;
    overflow: auto;
    min-height: 0;
    padding: 10px 14px 6px;
}

.ranking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
    table-layout: fixed;
}

.ranking-table th {
    padding: 7px 9px;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .25px;
    text-align: center;
    white-space: nowrap;
}

.ranking-table th:nth-child(1) { width: 14%; }
.ranking-table th:nth-child(2) { width: 32%; text-align: left; }
.ranking-table th:nth-child(3) { width: 16%; }
.ranking-table th:nth-child(4) { width: 17%; }
.ranking-table th:nth-child(5) { width: 21%; }

.ranking-table td {
    padding: 10px 9px;
    background: rgba(30,41,59,.62);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.ranking-table td:first-child {
    border-left: 1px solid rgba(255,255,255,.07);
    border-radius: 10px 0 0 10px;
}

.ranking-table td:last-child {
    border-right: 1px solid rgba(255,255,255,.07);
    border-radius: 0 10px 10px 0;
}

.ranking-player-cell {
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-position-cell {
    color: #fde68a !important;
    font-size: 13px !important;
}

.ranking-top-1 td {
    background: linear-gradient(90deg, rgba(161,98,7,.38), rgba(30,41,59,.72));
}

.ranking-top-2 td {
    background: linear-gradient(90deg, rgba(100,116,139,.35), rgba(30,41,59,.72));
}

.ranking-top-3 td {
    background: linear-gradient(90deg, rgba(146,64,14,.30), rgba(30,41,59,.72));
}

.ranking-current-user td {
    box-shadow: inset 0 0 0 1px rgba(34,197,94,.52);
}

.ranking-current-user .ranking-player-cell::after {
    content: " • VOCÊ";
    color: #86efac;
    font-size: 8px;
    font-weight: 1000;
}

.ranking-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px 13px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #94a3b8;
    font-size: 9px;
    font-weight: 800;
}

.ranking-refresh-button {
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    color: #f8fafc;
    font-family: inherit;
    font-size: 9px;
    font-weight: 1000;
    cursor: pointer;
}

@media (max-width: 900px) {
    .ranking-game-button {
        padding: 8px 9px;
        font-size: 9px;
    }

    .info-panel {
        grid-template-columns: minmax(0,1fr) auto auto auto auto !important;
    }
}

@media (orientation: landscape) and (max-height: 650px) {
    .ranking-overlay {
        padding: 6px;
    }

    .ranking-panel {
        width: min(94vw, 820px);
        max-height: 94dvh;
        border-radius: 14px;
    }

    .ranking-header {
        padding: 8px 11px 6px;
    }

    .ranking-kicker {
        font-size: 6px;
    }

    .ranking-title {
        font-size: 17px;
    }

    .ranking-close-button {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 12px;
    }

    .ranking-summary {
        padding: 5px 11px;
        font-size: 7px;
    }

    .ranking-loading,
    .ranking-error,
    .ranking-empty {
        margin: 8px;
        padding: 9px;
        font-size: 8px;
    }

    .ranking-table-wrap {
        padding: 4px 8px 2px;
    }

    .ranking-table {
        border-spacing: 0 3px;
    }

    .ranking-table th {
        padding: 3px 5px;
        font-size: 6px;
    }

    .ranking-table td {
        padding: 5px;
        font-size: 8px;
    }

    .ranking-position-cell {
        font-size: 9px !important;
    }

    .ranking-current-user .ranking-player-cell::after {
        font-size: 5px;
    }

    .ranking-footer {
        padding: 5px 9px 6px;
        font-size: 6px;
    }

    .ranking-refresh-button {
        padding: 4px 8px;
        font-size: 6px;
    }

    .game-mode-ranking-button {
        margin-top: 8px;
        min-height: 28px;
        padding: 5px 12px;
        font-size: 8px;
    }

    .ranking-game-button {
        padding: 5px 6px !important;
        font-size: 7px !important;
    }
}

@media (max-width: 560px) and (orientation: portrait) {
    .ranking-panel {
        width: 96vw;
        max-height: 90dvh;
        border-radius: 16px;
    }

    .ranking-header {
        padding: 13px 12px 8px;
    }

    .ranking-title {
        font-size: 22px;
    }

    .ranking-table-wrap {
        padding: 7px 6px 4px;
    }

    .ranking-table th {
        padding: 5px 3px;
        font-size: 6px;
        white-space: normal;
        line-height: 1.05;
    }

    .ranking-table td {
        padding: 8px 4px;
        font-size: 8px;
    }

    .ranking-position-cell {
        font-size: 9px !important;
    }

    .ranking-player-cell {
        font-size: 8px !important;
    }
}

@media (min-width: 901px) {
    .ranking-game-button { grid-area: ranking; }
}


/* =========================================================
   MODO 1×1 ONLINE — LOBBY BETA
========================================================= */
.game-mode-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-mode-button.online-mode {
    background: linear-gradient(145deg, #047857, #064e3b);
    box-shadow: 0 10px 25px rgba(0,0,0,.42), 0 0 24px rgba(16,185,129,.16);
}

.online-lobby-overlay {
    position: fixed;
    inset: 0;
    z-index: 9580;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background:
        radial-gradient(circle at 50% 36%, rgba(6,78,59,.34), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(30,41,59,.92), rgba(2,6,12,.98) 76%);
    backdrop-filter: blur(8px);
}

.online-lobby-overlay.show {
    display: flex;
    animation: kickoffOverlayIn .22s ease-out both;
}

.online-lobby-panel {
    width: min(94vw, 860px);
    max-height: 94dvh;
    overflow: auto;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(8,18,29,.98), rgba(4,10,17,.98));
    box-shadow: 0 30px 90px rgba(0,0,0,.72);
    color: #f8fafc;
}

.online-lobby-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.online-lobby-kicker {
    color: #6ee7b7;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 1px;
}

.online-lobby-title {
    margin: 2px 0 0;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1;
    font-weight: 1000;
}

.online-lobby-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 1000;
    cursor: pointer;
}

.online-player-logged {
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(52,211,153,.18);
    color: #d1fae5;
    font-size: 11px;
    font-weight: 800;
}

.online-lobby-intro {
    margin: 12px 0;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.35;
}

.online-lobby-main-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.online-main-button {
    min-height: 92px;
    border: 2px solid rgba(255,255,255,.16);
    border-radius: 16px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
}

.online-main-button.create {
    background: linear-gradient(145deg, #059669, #065f46);
}

.online-main-button.join {
    min-height: 42px;
    background: linear-gradient(145deg, #2563eb, #1e3a8a);
}

.online-main-button small {
    display: block;
    margin-top: 6px;
    font-size: 9px;
    opacity: .78;
}

.online-join-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(30,41,59,.38);
}

.online-join-box label {
    color: #94a3b8;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .8px;
}

.online-room-code-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 2px solid rgba(255,255,255,.15);
    border-radius: 10px;
    outline: none;
    background: rgba(2,6,23,.70);
    color: #fff;
    text-align: center;
    font-family: monospace;
    font-size: 22px;
    font-weight: 1000;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.online-room-code-input:focus {
    border-color: rgba(96,165,250,.72);
}

.online-room-view {
    display: none;
}

.online-room-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(15,23,42,.66);
    border: 1px solid rgba(255,255,255,.09);
}

.online-room-label {
    color: #94a3b8;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .8px;
}

.online-room-code {
    margin-top: 2px;
    color: #fef08a;
    font-family: monospace;
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1;
    font-weight: 1000;
    letter-spacing: 5px;
}

.online-copy-code,
.online-leave-room {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: #e2e8f0;
    padding: 8px 11px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 1000;
    cursor: pointer;
}

.online-room-status {
    margin: 9px 0;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(113,63,18,.26);
    color: #fde68a;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
}

.online-room-status.connected {
    background: rgba(30,64,175,.26);
    color: #bfdbfe;
}

.online-room-status.ready {
    background: rgba(20,83,45,.34);
    color: #bbf7d0;
}

.online-players-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 9px;
}

.online-player-card {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.13);
    text-align: center;
}

.online-player-card.red {
    background: linear-gradient(145deg, rgba(127,29,29,.72), rgba(69,10,10,.64));
}

.online-player-card.blue {
    background: linear-gradient(145deg, rgba(30,64,175,.72), rgba(23,37,84,.68));
}

.online-player-side {
    color: rgba(255,255,255,.72);
    font-size: 8px;
    font-weight: 900;
}

.online-player-name {
    color: #fff;
    font-size: 16px;
    font-weight: 1000;
}

.online-player-club {
    color: #e2e8f0;
    font-size: 9px;
    font-weight: 800;
}

.online-versus {
    align-self: center;
    color: #64748b;
    font-size: 24px;
    font-weight: 1000;
}

.online-club-section {
    display: none;
    margin-top: 12px;
}

.online-club-title {
    margin-bottom: 7px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 1000;
}

.online-club-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.online-club-card {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 2px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: linear-gradient(145deg, #334155, #0f172a);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: transform .14s ease, filter .14s ease, border-color .14s ease;
}

.online-club-card:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.online-club-card img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.online-club-card span {
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 1000;
}

.online-club-card small {
    color: #86efac;
    font-size: 6px;
    font-weight: 1000;
}

.online-club-disabled {
    opacity: .28;
    filter: grayscale(.7);
    cursor: not-allowed;
}

.online-club-selected {
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34,197,94,.14), 0 0 20px rgba(34,197,94,.12);
}

.online-ready-box {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 11px;
    padding: 11px;
    border-radius: 13px;
    background: rgba(20,83,45,.34);
    border: 1px solid rgba(34,197,94,.28);
    color: #dcfce7;
    text-align: center;
    font-size: 10px;
}

.online-ready-box strong {
    font-size: 13px;
}

.online-ready-box small {
    color: #86efac;
    font-size: 7px;
}

.online-lobby-error {
    display: none;
    margin-top: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(127,29,29,.36);
    border: 1px solid rgba(248,113,113,.28);
    color: #fecaca;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}

.online-room-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    color: #64748b;
    font-size: 7px;
    font-weight: 800;
}

@media (max-width: 760px) {
    .game-mode-buttons {
        grid-template-columns: 1fr;
    }

    .game-mode-button {
        min-height: 64px;
    }

    .online-lobby-main-actions {
        grid-template-columns: 1fr;
    }

    .online-club-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (orientation: landscape) and (max-height: 650px) {
    .online-lobby-overlay {
        padding: 5px;
    }

    .online-lobby-panel {
        width: min(94vw, 840px);
        max-height: 95dvh;
        padding: 9px;
        border-radius: 13px;
    }

    .online-lobby-header {
        margin-bottom: 6px;
    }

    .online-lobby-kicker {
        font-size: 6px;
    }

    .online-lobby-title {
        font-size: 17px;
    }

    .online-lobby-close {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 11px;
    }

    .online-player-logged,
    .online-lobby-intro {
        font-size: 8px;
        padding: 6px 8px;
        margin: 6px 0;
    }

    .online-lobby-main-actions {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .online-main-button {
        min-height: 55px;
        font-size: 10px;
        border-radius: 10px;
    }

    .online-main-button.join {
        min-height: 28px;
        font-size: 8px;
    }

    .online-join-box {
        padding: 6px;
        gap: 4px;
        border-radius: 10px;
    }

    .online-room-code-input {
        padding: 4px 7px;
        font-size: 15px;
        letter-spacing: 3px;
    }

    .online-room-top {
        padding: 6px 8px;
    }

    .online-room-code {
        font-size: 19px;
    }

    .online-copy-code {
        padding: 5px 7px;
        font-size: 6px;
    }

    .online-room-status {
        margin: 5px 0;
        padding: 5px 7px;
        font-size: 7px;
    }

    .online-player-card {
        min-height: 52px;
        gap: 2px;
    }

    .online-player-side {
        font-size: 5px;
    }

    .online-player-name {
        font-size: 10px;
    }

    .online-player-club {
        font-size: 6px;
    }

    .online-club-section {
        margin-top: 6px;
    }

    .online-club-title {
        margin-bottom: 4px;
        font-size: 7px;
    }

    .online-club-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .online-club-card {
        min-height: 44px;
        gap: 1px;
        border-radius: 7px;
    }

    .online-club-card img {
        width: 22px;
        height: 22px;
    }

    .online-club-card span {
        font-size: 5px;
    }

    .online-ready-box {
        margin-top: 5px;
        padding: 6px;
        font-size: 6px;
    }

    .online-ready-box strong {
        font-size: 8px;
    }

    .online-ready-box small {
        font-size: 5px;
    }

    .online-room-footer {
        margin-top: 5px;
        font-size: 5px;
    }

    .online-leave-room {
        padding: 4px 6px;
        font-size: 5px;
    }
}

/* =========================================================
   MODO 1×1 ONLINE — LOBBY BETA
========================================================= */
.game-mode-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
.game-mode-button.online-mode { background:linear-gradient(145deg,#047857,#064e3b); box-shadow:0 10px 25px rgba(0,0,0,.42),0 0 24px rgba(16,185,129,.16); }

.online-lobby-overlay { position:fixed; inset:0; z-index:9580; display:none; align-items:center; justify-content:center; padding:14px; background:radial-gradient(circle at 50% 36%,rgba(6,78,59,.34),transparent 34%),radial-gradient(circle at 50% 48%,rgba(30,41,59,.92),rgba(2,6,12,.98) 76%); backdrop-filter:blur(8px); }
.online-lobby-overlay.show { display:flex; animation:kickoffOverlayIn .22s ease-out both; }
.online-lobby-panel { width:min(94vw,860px); max-height:94dvh; overflow:auto; padding:18px; border-radius:22px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg,rgba(8,18,29,.98),rgba(4,10,17,.98)); box-shadow:0 30px 90px rgba(0,0,0,.72); color:#f8fafc; }
.online-lobby-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.online-lobby-kicker { color:#6ee7b7; font-size:9px; font-weight:1000; letter-spacing:1px; }
.online-lobby-title { margin:2px 0 0; font-size:clamp(24px,4vw,34px); line-height:1; font-weight:1000; }
.online-lobby-close { width:34px; height:34px; flex:0 0 34px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(255,255,255,.07); color:#fff; font-family:inherit; font-size:15px; font-weight:1000; cursor:pointer; }

.online-player-logged { padding:9px 12px; border-radius:12px; background:rgba(16,185,129,.10); border:1px solid rgba(52,211,153,.18); color:#d1fae5; font-size:11px; font-weight:800; }
.online-lobby-intro { margin:12px 0; color:#cbd5e1; font-size:12px; line-height:1.35; }
.online-lobby-main-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.online-main-button { min-height:92px; border:2px solid rgba(255,255,255,.16); border-radius:16px; color:#fff; font-family:inherit; font-size:14px; font-weight:1000; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.32); }
.online-main-button.create { background:linear-gradient(145deg,#059669,#065f46); }
.online-main-button.join { min-height:42px; background:linear-gradient(145deg,#2563eb,#1e3a8a); }
.online-main-button small { display:block; margin-top:6px; font-size:9px; opacity:.78; }
.online-join-box { display:flex; flex-direction:column; justify-content:center; gap:6px; padding:11px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(30,41,59,.38); }
.online-join-box label { color:#94a3b8; font-size:8px; font-weight:1000; letter-spacing:.8px; }
.online-room-code-input { width:100%; box-sizing:border-box; padding:9px 12px; border:2px solid rgba(255,255,255,.15); border-radius:10px; outline:none; background:rgba(2,6,23,.70); color:#fff; text-align:center; font-family:monospace; font-size:22px; font-weight:1000; letter-spacing:5px; text-transform:uppercase; }
.online-room-code-input:focus { border-color:rgba(96,165,250,.72); }
.online-room-view { display:none; }

.online-room-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; background:rgba(15,23,42,.66); border:1px solid rgba(255,255,255,.09); }
.online-room-label { color:#94a3b8; font-size:8px; font-weight:1000; letter-spacing:.8px; }
.online-room-code { margin-top:2px; color:#fef08a; font-family:monospace; font-size:clamp(24px,4vw,36px); line-height:1; font-weight:1000; letter-spacing:5px; }
.online-copy-code,.online-leave-room { border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.07); color:#e2e8f0; padding:8px 11px; font-family:inherit; font-size:9px; font-weight:1000; cursor:pointer; }
.online-room-status { margin:9px 0; padding:9px 12px; border-radius:12px; background:rgba(113,63,18,.26); color:#fde68a; text-align:center; font-size:10px; font-weight:900; }
.online-room-status.connected { background:rgba(30,64,175,.26); color:#bfdbfe; }
.online-room-status.ready { background:rgba(20,83,45,.34); color:#bbf7d0; }

.online-players-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:9px; }
.online-player-card { min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:15px; border:1px solid rgba(255,255,255,.13); text-align:center; }
.online-player-card.red { background:linear-gradient(145deg,rgba(127,29,29,.72),rgba(69,10,10,.64)); }
.online-player-card.blue { background:linear-gradient(145deg,rgba(30,64,175,.72),rgba(23,37,84,.68)); }
.online-player-side { color:rgba(255,255,255,.72); font-size:8px; font-weight:900; }
.online-player-name { color:#fff; font-size:16px; font-weight:1000; }
.online-player-club { color:#e2e8f0; font-size:9px; font-weight:800; }
.online-versus { align-self:center; color:#64748b; font-size:24px; font-weight:1000; }

.online-club-section { display:none; margin-top:12px; }
.online-club-title { margin-bottom:7px; color:#fff; text-align:center; font-size:11px; font-weight:1000; }
.online-club-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.online-club-card { min-height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:2px solid rgba(255,255,255,.12); border-radius:12px; background:linear-gradient(145deg,#334155,#0f172a); color:#fff; font-family:inherit; cursor:pointer; transition:transform .14s ease,filter .14s ease,border-color .14s ease; }
.online-club-card:hover { transform:translateY(-1px); filter:brightness(1.08); }
.online-club-card img { width:38px; height:38px; object-fit:contain; }
.online-club-card span { max-width:95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; font-weight:1000; }
.online-club-card small { color:#86efac; font-size:6px; font-weight:1000; }
.online-club-disabled { opacity:.28; filter:grayscale(.7); cursor:not-allowed; }
.online-club-selected { border-color:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.14),0 0 20px rgba(34,197,94,.12); }

.online-ready-box { display:none; flex-direction:column; align-items:center; gap:3px; margin-top:11px; padding:11px; border-radius:13px; background:rgba(20,83,45,.34); border:1px solid rgba(34,197,94,.28); color:#dcfce7; text-align:center; font-size:10px; }
.online-ready-box strong { font-size:13px; }
.online-ready-box small { color:#86efac; font-size:7px; }
.online-lobby-error { display:none; margin-top:9px; padding:8px 10px; border-radius:10px; background:rgba(127,29,29,.36); border:1px solid rgba(248,113,113,.28); color:#fecaca; font-size:9px; font-weight:800; text-align:center; }
.online-room-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; color:#64748b; font-size:7px; font-weight:800; }

@media (max-width:760px) {
    .game-mode-buttons { grid-template-columns:1fr; }
    .game-mode-button { min-height:64px; }
    .online-lobby-main-actions { grid-template-columns:1fr; }
    .online-club-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (orientation:landscape) and (max-height:650px) {
    .online-lobby-overlay { padding:5px; }
    .online-lobby-panel { width:min(94vw,840px); max-height:95dvh; padding:9px; border-radius:13px; }
    .online-lobby-header { margin-bottom:6px; }
    .online-lobby-kicker { font-size:6px; }
    .online-lobby-title { font-size:17px; }
    .online-lobby-close { width:27px; height:27px; flex-basis:27px; font-size:11px; }
    .online-player-logged,.online-lobby-intro { font-size:8px; padding:6px 8px; margin:6px 0; }
    .online-lobby-main-actions { grid-template-columns:1fr 1fr; gap:7px; }
    .online-main-button { min-height:55px; font-size:10px; border-radius:10px; }
    .online-main-button.join { min-height:28px; font-size:8px; }
    .online-join-box { padding:6px; gap:4px; border-radius:10px; }
    .online-room-code-input { padding:4px 7px; font-size:15px; letter-spacing:3px; }
    .online-room-top { padding:6px 8px; }
    .online-room-code { font-size:19px; }
    .online-copy-code { padding:5px 7px; font-size:6px; }
    .online-room-status { margin:5px 0; padding:5px 7px; font-size:7px; }
    .online-player-card { min-height:52px; gap:2px; }
    .online-player-side { font-size:5px; }
    .online-player-name { font-size:10px; }
    .online-player-club { font-size:6px; }
    .online-club-section { margin-top:6px; }
    .online-club-title { margin-bottom:4px; font-size:7px; }
    .online-club-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
    .online-club-card { min-height:44px; gap:1px; border-radius:7px; }
    .online-club-card img { width:22px; height:22px; }
    .online-club-card span { font-size:5px; }
    .online-ready-box { margin-top:5px; padding:6px; font-size:6px; }
    .online-ready-box strong { font-size:8px; }
    .online-ready-box small { font-size:5px; }
    .online-room-footer { margin-top:5px; font-size:5px; }
    .online-leave-room { padding:4px 6px; font-size:5px; }
}

/* =========================================================
   ONLINE FASE 2 — INICIAR FORMAÇÃO
========================================================= */
.online-start-formation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
    min-height: 38px;
    padding: 7px 15px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    background: linear-gradient(145deg,#16a34a,#166534);
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(0,0,0,.26), 0 0 18px rgba(34,197,94,.13);
}

.online-start-formation-button:disabled {
    opacity: .5;
    cursor: default;
}

@media (orientation: landscape) and (max-height:650px) {
    .online-start-formation-button {
        margin-top: 3px;
        min-height: 25px;
        padding: 4px 9px;
        font-size: 6px;
        border-radius: 7px;
    }
}

/* =========================================================
   ONLINE FASE 3 — CONTADORES E RECONEXÃO
========================================================= */
.online-phase-timer-badge {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: 50%;
    z-index: 12050;
    display: none;
    transform: translateX(-50%);
    min-width: 150px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    background: rgba(2,6,23,.90);
    color: #fef3c7;
    box-shadow: 0 8px 24px rgba(0,0,0,.48);
    backdrop-filter: blur(8px);
    text-align: center;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .35px;
    pointer-events: none;
}

.online-phase-timer-badge.show {
    display: block;
}

.online-reconnect-overlay {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2,6,12,.82);
    backdrop-filter: blur(7px);
}

.online-reconnect-overlay.show {
    display: flex;
    animation: kickoffOverlayIn .2s ease-out both;
}

.online-reconnect-panel {
    width: min(90vw, 430px);
    padding: 22px 18px;
    border-radius: 20px;
    border: 1px solid rgba(251,191,36,.28);
    background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(7,12,20,.98));
    box-shadow: 0 28px 80px rgba(0,0,0,.68);
    color: #fff;
    text-align: center;
}

.online-reconnect-icon {
    margin-bottom: 6px;
    font-size: 34px;
}

.online-reconnect-panel h2 {
    margin: 0 0 7px;
    color: #fde68a;
    font-size: 20px;
    font-weight: 1000;
}

.online-reconnect-panel p {
    margin: 0 auto 12px;
    max-width: 350px;
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}

.online-reconnect-countdown {
    margin: 2px auto 8px;
    color: #fff;
    font-size: 42px;
    line-height: 1;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
}

.online-reconnect-interruptions {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(127,29,29,.34);
    border: 1px solid rgba(248,113,113,.20);
    color: #fecaca;
    font-size: 9px;
    font-weight: 1000;
}

@media (orientation: landscape) and (max-height: 650px) {
    .online-phase-timer-badge {
        top: max(4px, env(safe-area-inset-top));
        min-width: 110px;
        padding: 5px 10px;
        font-size: 8px;
    }

    .online-reconnect-panel {
        width: min(72vw, 390px);
        padding: 12px 14px;
        border-radius: 14px;
    }

    .online-reconnect-icon {
        margin-bottom: 2px;
        font-size: 22px;
    }

    .online-reconnect-panel h2 {
        margin-bottom: 4px;
        font-size: 14px;
    }

    .online-reconnect-panel p {
        margin-bottom: 7px;
        font-size: 8px;
    }

    .online-reconnect-countdown {
        margin-bottom: 5px;
        font-size: 27px;
    }

    .online-reconnect-interruptions {
        padding: 4px 8px;
        font-size: 7px;
    }
}

/* =========================================================
   HUMOR DA CPU NO PLACAR — CHACOTA / RAIVA
========================================================= */
.cpu-score-mood {
    display: none;
    width: 0;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    font-size: 22px;
    line-height: 1;
    transform-origin: center;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}

.cpu-score-mood.show {
    display: inline-flex;
    width: 26px;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.cpu-score-mood.taunt {
    text-shadow: 0 0 9px rgba(250,204,21,.48);
}

.cpu-score-mood.anger {
    text-shadow: 0 0 10px rgba(239,68,68,.52);
}

.cpu-score-mood.mood-bounce { animation: cpuMoodBounce .72s ease-in-out infinite; }
.cpu-score-mood.mood-spin   { animation: cpuMoodSpin 1.05s ease-in-out infinite; }
.cpu-score-mood.mood-wiggle { animation: cpuMoodWiggle .58s ease-in-out infinite; }
.cpu-score-mood.mood-shake  { animation: cpuMoodShake .24s linear infinite; }
.cpu-score-mood.mood-pulse  { animation: cpuMoodPulse .62s ease-in-out infinite; }
.cpu-score-mood.mood-stomp  { animation: cpuMoodStomp .48s ease-in-out infinite; }

@keyframes cpuMoodBounce {
    0%,100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-6px) scale(1.12); }
    70% { transform: translateY(1px) scale(.96); }
}

@keyframes cpuMoodSpin {
    0%,100% { transform: rotate(-8deg) scale(1); }
    50% { transform: rotate(16deg) scale(1.16); }
}

@keyframes cpuMoodWiggle {
    0%,100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-13deg) scale(1.08); }
    75% { transform: rotate(13deg) scale(1.08); }
}

@keyframes cpuMoodShake {
    0%,100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-2px) rotate(-5deg); }
    75% { transform: translateX(2px) rotate(5deg); }
}

@keyframes cpuMoodPulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

@keyframes cpuMoodStomp {
    0%,100% { transform: translateY(0) scale(1); }
    55% { transform: translateY(3px) scale(1.13); }
}

@media (max-width: 900px) {
    .cpu-score-mood {
        font-size: 17px;
    }

    .cpu-score-mood.show {
        width: 20px;
    }
}

@media (orientation: landscape) and (max-height: 650px) {
    .cpu-score-mood {
        font-size: 14px !important;
    }

    .cpu-score-mood.show {
        width: 16px !important;
    }
}


/* =========================================================
   REAÇÕES DO JOGADOR — CPU / MULTIPLAYER
========================================================= */
.game-container { position: relative; }

.reaction-control {
    position: fixed;
    top: max(9px, env(safe-area-inset-top));
    right: max(9px, env(safe-area-inset-right));
    z-index: 7350;
    display: none;
    align-items: flex-start;
    gap: 6px;
}

.reaction-control.show { display: flex; }

.reaction-toggle-button {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(7,12,18,.86);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.42);
    backdrop-filter: blur(7px);
}

.reaction-menu {
    display: none;
    grid-template-columns: repeat(3, 34px);
    gap: 5px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(7,12,18,.94);
    box-shadow: 0 10px 28px rgba(0,0,0,.48);
    backdrop-filter: blur(8px);
}

.reaction-menu.show { display: grid; }

.reaction-menu button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}

.reaction-menu button:hover {
    transform: scale(1.12);
    background: rgba(255,255,255,.14);
}

.player-score-reaction {
    display: none;
    width: 0;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    font-size: 22px;
    line-height: 1;
    transform-origin: center;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}

.player-score-reaction.show {
    display: inline-flex;
    width: 26px;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.player-score-reaction.taunt { text-shadow: 0 0 9px rgba(250,204,21,.48); }
.player-score-reaction.anger { text-shadow: 0 0 10px rgba(239,68,68,.52); }
.player-score-reaction.mood-bounce { animation: cpuMoodBounce .72s ease-in-out infinite; }
.player-score-reaction.mood-spin { animation: cpuMoodSpin 1.05s ease-in-out infinite; }
.player-score-reaction.mood-wiggle { animation: cpuMoodWiggle .58s ease-in-out infinite; }
.player-score-reaction.mood-shake { animation: cpuMoodShake .24s linear infinite; }
.player-score-reaction.mood-pulse { animation: cpuMoodPulse .62s ease-in-out infinite; }
.player-score-reaction.mood-stomp { animation: cpuMoodStomp .48s ease-in-out infinite; }

@media (max-width:900px) {
    .reaction-toggle-button { width:30px; height:30px; font-size:14px; }
    .reaction-menu { grid-template-columns:repeat(3,29px); gap:4px; padding:5px; }
    .reaction-menu button { width:29px; height:29px; font-size:17px; }
    .player-score-reaction { font-size:17px; }
    .player-score-reaction.show { width:20px; }
}

@media (orientation:landscape) and (max-height:650px) {
    .reaction-control { top:max(5px,env(safe-area-inset-top)); right:max(5px,env(safe-area-inset-right)); }
    .reaction-toggle-button { width:25px; height:25px; font-size:12px; }
    .reaction-menu { grid-template-columns:repeat(6,24px); gap:3px; padding:4px; border-radius:8px; }
    .reaction-menu button { width:24px; height:24px; font-size:14px; border-radius:6px; }
    .player-score-reaction { font-size:14px !important; }
    .player-score-reaction.show { width:16px !important; }
}

/* =========================================================
   REAÇÕES — CONTROLE FLUTUANTE (não ocupa espaço no layout)
========================================================= */
.reaction-control,
.reaction-control.show {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 12050 !important;
    width: 36px !important;
    height: 36px !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

.reaction-control.show {
    display: block !important;
}

.reaction-toggle-button {
    position: absolute !important;
    inset: 0 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    pointer-events: auto;
}

.reaction-menu {
    position: absolute !important;
    top: 0 !important;
    right: calc(100% + 7px) !important;
    width: auto !important;
    margin: 0 !important;
    pointer-events: auto;
}

.reaction-menu:not(.show) {
    display: none !important;
}

.reaction-menu.show {
    display: grid !important;
}

@media (orientation: landscape) and (max-height: 650px) {
    .reaction-control,
    .reaction-control.show {
        top: max(5px, env(safe-area-inset-top)) !important;
        right: max(5px, env(safe-area-inset-right)) !important;
        width: 27px !important;
        height: 27px !important;
    }
    .reaction-toggle-button {
        width: 27px !important;
        height: 27px !important;
    }
    .reaction-menu {
        right: calc(100% + 4px) !important;
    }
}

/* =========================================================
   RANKING POR NÍVEIS
========================================================= */
.ranking-level-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 9px 14px 3px;
}

.ranking-level-tab {
    min-height: 42px;
    padding: 6px 5px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(30,41,59,.58);
    color: #cbd5e1;
    font-family: inherit;
    font-size: 9px;
    line-height: 1.05;
    font-weight: 1000;
    cursor: pointer;
}
.ranking-level-tab small { font-size: 6px; opacity: .72; }
.ranking-level-tab.active {
    color: #fff;
    border-color: rgba(250,204,21,.58);
    background: linear-gradient(145deg, rgba(133,77,14,.74), rgba(69,26,3,.72));
    box-shadow: 0 0 16px rgba(250,204,21,.12);
}
.ranking-level-tab[data-level="level2"].active {
    border-color: rgba(216,180,254,.72);
    background: linear-gradient(145deg, rgba(107,33,168,.88), rgba(76,29,149,.82));
    box-shadow: 0 0 18px rgba(192,132,252,.23);
}
.ranking-level-tab[data-level="level3"].active {
    color: #fff7cc;
    border-color: rgba(253,224,71,.82);
    background: linear-gradient(145deg, rgba(180,83,9,.92), rgba(113,63,18,.88));
    box-shadow: 0 0 18px rgba(250,204,21,.26);
}
.ranking-level-info {
    min-height: 24px;
    padding: 5px 14px 7px;
    color: #94a3b8;
    text-align: center;
    font-size: 8px;
    font-weight: 900;
}

/* =========================================================
   PRESTÍGIO VISUAL DO JOGADOR
   Nível 1 mantém o visual original.
========================================================= */
body.cardbol-level-2 {
    background: radial-gradient(circle at 50% -10%, #5b21b6 0%, #251044 37%, #08050f 80%);
}
.game-container.level-theme-2 {
    --panel: rgba(91,33,182,.19);
    --panel-border: rgba(216,180,254,.30);
    --green-light: #e9d5ff;
}
.game-container.level-theme-2 .pitch-shell {
    background: linear-gradient(135deg, #4c1d95, #7e22ce) !important;
    border-color: #d8b4fe !important;
    box-shadow: 0 0 18px rgba(192,132,252,.55), 0 18px 48px rgba(0,0,0,.58) !important;
}
.game-container.level-theme-2 .cell.check-light { background: rgba(109,40,217,.90) !important; }
.game-container.level-theme-2 .cell.check-dark { background: rgba(67,25,114,.94) !important; }
.game-container.level-theme-2 .electronic-scoreboard {
    border-color: rgba(216,180,254,.48);
    box-shadow: inset 0 0 18px rgba(88,28,135,.62), 0 0 14px rgba(192,132,252,.22);
}
.game-container.level-theme-2 .brand-panel,
.game-container.level-theme-2 .top-panel,
.game-container.level-theme-2 .dice-area,
.game-container.level-theme-2 .info-panel,
.game-container.level-theme-2 .bottom-panel {
    box-shadow: inset 0 0 16px rgba(126,34,206,.11), 0 0 10px rgba(126,34,206,.08);
}

body.cardbol-level-3 {
    background: radial-gradient(circle at 50% -10%, #b45309 0%, #422006 39%, #0d0903 82%);
}
.game-container.level-theme-3 {
    --panel: rgba(146,64,14,.20);
    --panel-border: rgba(253,224,71,.34);
    --green-light: #fef08a;
}
.game-container.level-theme-3 .pitch-shell {
    background: linear-gradient(135deg, #78350f, #d97706) !important;
    border-color: #fde68a !important;
    box-shadow: 0 0 20px rgba(250,204,21,.56), 0 18px 50px rgba(0,0,0,.60) !important;
}
.game-container.level-theme-3 .cell.check-light { background: rgba(202,138,4,.90) !important; }
.game-container.level-theme-3 .cell.check-dark { background: rgba(120,53,15,.94) !important; }
.game-container.level-theme-3 .electronic-scoreboard {
    border-color: rgba(253,224,71,.52);
    box-shadow: inset 0 0 18px rgba(146,64,14,.65), 0 0 15px rgba(250,204,21,.24);
}
.game-container.level-theme-3 .brand-panel,
.game-container.level-theme-3 .top-panel,
.game-container.level-theme-3 .dice-area,
.game-container.level-theme-3 .info-panel,
.game-container.level-theme-3 .bottom-panel {
    box-shadow: inset 0 0 16px rgba(217,119,6,.12), 0 0 11px rgba(250,204,21,.09);
}

@media (orientation: landscape) and (max-height: 650px) {
    .ranking-level-tabs { gap:3px; padding:5px 8px 2px; }
    .ranking-level-tab { min-height:27px; padding:3px 2px; border-radius:6px; font-size:6px; }
    .ranking-level-tab small { font-size:4px; }
    .ranking-level-info { min-height:14px; padding:2px 8px 4px; font-size:5px; }
}
\n\n/* =========================================================\n   REAÇÕES — OVERLAY TOTALMENTE FORA DO LAYOUT DO JOGO\n========================================================= */\nbody > .reaction-control,\nbody > .reaction-control.show {\n    position: fixed !important;\n    inset: auto max(10px, env(safe-area-inset-right)) auto auto !important;\n    top: max(10px, env(safe-area-inset-top)) !important;\n    width: 38px !important;\n    height: 38px !important;\n    min-width: 0 !important;\n    min-height: 0 !important;\n    max-width: 38px !important;\n    max-height: 38px !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    border: 0 !important;\n    z-index: 30000 !important;\n    overflow: visible !important;\n    pointer-events: none !important;\n    contain: layout style !important;\n}\n\nbody > .reaction-control {\n    display: none !important;\n}\n\nbody > .reaction-control.show {\n    display: block !important;\n}\n\nbody > .reaction-control .reaction-toggle-button {\n    position: absolute !important;\n    top: 0 !important;\n    right: 0 !important;\n    width: 38px !important;\n    height: 38px !important;\n    min-width: 38px !important;\n    min-height: 38px !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    pointer-events: auto !important;\n}\n\nbody > .reaction-control .reaction-menu {\n    position: absolute !important;\n    top: 0 !important;\n    right: 46px !important;\n    width: max-content !important;\n    height: auto !important;\n    margin: 0 !important;\n    padding: 6px !important;\n    grid-template-columns: repeat(6, 34px) !important;\n    gap: 5px !important;\n    pointer-events: auto !important;\n    transform-origin: right center;\n}\n\nbody > .reaction-control .reaction-menu:not(.show) {\n    display: none !important;\n}\n\nbody > .reaction-control .reaction-menu.show {\n    display: grid !important;\n    animation: reactionMenuExpand .16s ease-out both;\n}\n\n@keyframes reactionMenuExpand {\n    from { opacity: 0; transform: translateX(8px) scale(.94); }\n    to   { opacity: 1; transform: translateX(0) scale(1); }\n}\n\n@media (orientation: landscape) and (max-height: 650px) {\n    body > .reaction-control,\n    body > .reaction-control.show {\n        top: max(5px, env(safe-area-inset-top)) !important;\n        right: max(5px, env(safe-area-inset-right)) !important;\n        width: 28px !important;\n        height: 28px !important;\n        max-width: 28px !important;\n        max-height: 28px !important;\n    }\n\n    body > .reaction-control .reaction-toggle-button {\n        width: 28px !important;\n        height: 28px !important;\n        min-width: 28px !important;\n        min-height: 28px !important;\n        font-size: 13px !important;\n    }\n\n    body > .reaction-control .reaction-menu {\n        right: 34px !important;\n        grid-template-columns: repeat(6, 25px) !important;\n        gap: 3px !important;\n        padding: 4px !important;\n    }\n\n    body > .reaction-control .reaction-menu button {\n        width: 25px !important;\n        height: 25px !important;\n        font-size: 14px !important;\n    }\n}\n
/* =========================================================
   RANKING — NÍVEL AUTOMÁTICO DO USUÁRIO
   Sem abas: mostra somente a classificação da faixa atual.
========================================================= */
.ranking-level-tabs {
    display: none !important;
}

.ranking-level-info {
    min-height: 0 !important;
    margin: 10px 14px 4px !important;
    padding: 9px 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    border-radius: 12px;
    border: 1px solid rgba(250,204,21,.22);
    background: linear-gradient(90deg, rgba(120,53,15,.24), rgba(30,41,59,.42));
    color: #cbd5e1 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-align: center;
}

.ranking-level-info strong {
    color: #fde68a;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .35px;
}

.ranking-level-info span {
    color: #cbd5e1;
}

body.cardbol-level-2 .ranking-level-info {
    border-color: rgba(192,132,252,.44);
    background: linear-gradient(90deg, rgba(107,33,168,.38), rgba(30,41,59,.50));
}

body.cardbol-level-2 .ranking-level-info strong {
    color: #e9d5ff;
    text-shadow: 0 0 10px rgba(192,132,252,.55);
}

body.cardbol-level-3 .ranking-level-info {
    border-color: rgba(250,204,21,.52);
    background: linear-gradient(90deg, rgba(161,98,7,.38), rgba(30,41,59,.50));
}

body.cardbol-level-3 .ranking-level-info strong {
    color: #fef08a;
    text-shadow: 0 0 10px rgba(250,204,21,.55);
}

@media (orientation: landscape) and (max-height: 650px) {
    .ranking-level-info {
        margin: 4px 8px 2px !important;
        padding: 4px 8px !important;
        gap: 5px;
        border-radius: 7px;
        font-size: 5px !important;
    }

    .ranking-level-info strong {
        font-size: 7px;
    }
}


/* =========================================================
   FEEDBACK DE TURNO — BRILHO NA LATERAL ATIVA
========================================================= */
.team-side {
    transition:
        box-shadow .22s ease,
        border-color .22s ease,
        filter .22s ease;
}

.team-side.red-side.turn-active {
    border-color: rgba(248,113,113,.72) !important;
    box-shadow:
        inset 0 0 0 1px rgba(248,113,113,.34),
        inset 0 0 24px rgba(239,68,68,.13),
        0 0 18px rgba(239,68,68,.22);
}

.team-side.blue-side.turn-active {
    border-color: rgba(96,165,250,.75) !important;
    box-shadow:
        inset 0 0 0 1px rgba(96,165,250,.34),
        inset 0 0 24px rgba(59,130,246,.14),
        0 0 18px rgba(59,130,246,.24);
}

.team-side.turn-active .side-team-title {
    filter: brightness(1.15);
}

/* =========================================================
   DESTINO QUE RESULTA DIRETAMENTE EM GOL
========================================================= */
.goal-cell.possible.goal-chance {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,248,130,.95), rgba(250,204,21,.80) 46%, rgba(234,88,12,.82)) !important;
    box-shadow:
        inset 0 0 0 3px #fff7a8,
        0 0 13px rgba(250,204,21,.95),
        0 0 25px rgba(249,115,22,.62) !important;
    animation: goalChancePulse .72s ease-in-out infinite alternate;
}

.goal-cell.possible.goal-chance::after {
    content: "GOL!";
    width: auto;
    aspect-ratio: auto;
    padding: 2px 4px;
    background: rgba(17,24,39,.88);
    color: #fef08a;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(250,204,21,.78);
    font-size: clamp(5px,.62vw,8px);
    line-height: 1;
    font-weight: 1000;
    letter-spacing: .2px;
}

@keyframes goalChancePulse {
    from { transform: scale(.96); filter: brightness(.96); }
    to   { transform: scale(1.04); filter: brightness(1.18); }
}

/* =========================================================
   CPU FAZENDO CERA — CONTADOR JUNTO AO ESCUDO
========================================================= */
.cpu-cera-status {
    display: none;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #fde68a;
    font-size: 7px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: .1px;
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

.cpu-cera-status.show {
    display: inline-flex;
    max-width: 150px;
    padding: 3px 5px;
    border: 1px solid rgba(250,204,21,.36);
    border-radius: 999px;
    background: rgba(113,63,18,.64);
    animation: cpuCeraBadgePulse .8s ease-in-out infinite alternate;
}

@keyframes cpuCeraBadgePulse {
    from { opacity:.76; transform:scale(.98); }
    to   { opacity:1; transform:scale(1.02); }
}

@media (orientation: landscape) and (max-height:650px) {
    .cpu-cera-status.show {
        max-width: 115px;
        padding: 2px 4px;
        font-size: 5px;
    }

    .team-side.red-side.turn-active,
    .team-side.blue-side.turn-active {
        box-shadow:
            inset 0 0 0 1px currentColor,
            inset 0 0 14px rgba(255,255,255,.06),
            0 0 10px rgba(255,255,255,.10);
    }
}


/* =========================================================
   CLUBE — FLAMENGO
========================================================= */
.team-card.flamengo-card,
.online-club-card.flamengo-card {
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.12), transparent 42%),
        linear-gradient(145deg, #b91c1c 0%, #dc2626 50%, #111827 100%);
}


/* =========================================================
   CENTRAL DE JOGOS — BLUE TECH
   Fluxo: login obrigatório -> hub -> CardBol
========================================================= */
.cardbol-hub-overlay {
    position: fixed;
    inset: 0;
    z-index: 9580;
    display: none;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 20% 18%, rgba(0, 153, 255, .18), transparent 30%),
        radial-gradient(circle at 84% 82%, rgba(37, 99, 235, .18), transparent 34%),
        linear-gradient(145deg, #020817 0%, #061329 48%, #020814 100%);
}

.cardbol-hub-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: kickoffOverlayIn .3s ease-out both;
}

.cardbol-hub-tech-grid {
    position: absolute;
    inset: -30%;
    opacity: .19;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(56, 189, 248, .24) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, .24) 1px, transparent 1px);
    background-size: 42px 42px;
    transform: perspective(520px) rotateX(63deg) translateY(29%);
    transform-origin: center bottom;
    mask-image: linear-gradient(to bottom, transparent 6%, #000 38%, #000 80%, transparent 100%);
}

.cardbol-hub-glow {
    position: absolute;
    width: 34vw;
    height: 34vw;
    min-width: 260px;
    min-height: 260px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .22;
    pointer-events: none;
}

.hub-glow-one { left: -12vw; top: -13vw; background: #0284c7; }
.hub-glow-two { right: -12vw; bottom: -15vw; background: #2563eb; }

.cardbol-hub-shell {
    position: relative;
    z-index: 2;
    width: min(1040px, calc(100vw - 44px));
    min-height: min(620px, calc(100dvh - 44px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3.2vw, 42px);
    border: 1px solid rgba(56, 189, 248, .26);
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(8, 23, 48, .90), rgba(2, 10, 25, .78));
    box-shadow:
        0 34px 100px rgba(0, 0, 0, .58),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 55px rgba(14, 165, 233, .08);
    backdrop-filter: blur(16px);
}

.cardbol-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(125, 211, 252, .13);
}

.cardbol-hub-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cardbol-hub-brand-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(56, 189, 248, .36));
}

.cardbol-hub-eyebrow {
    color: #38bdf8;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 2.2px;
}

.cardbol-hub-brand h1 {
    margin: 3px 0 0;
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1;
    letter-spacing: .6px;
    font-weight: 1000;
    text-shadow: 0 0 18px rgba(56, 189, 248, .12);
}

.cardbol-hub-user {
    flex: 0 0 auto;
    max-width: 240px;
    padding: 9px 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(56, 189, 248, .24);
    border-radius: 999px;
    background: rgba(8, 47, 73, .36);
    color: #bae6fd;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .7px;
}

.cardbol-hub-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 6vh, 62px) 0;
}

.cardbol-game-card {
    position: relative;
    width: min(560px, 100%);
    min-height: 154px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    overflow: hidden;
    padding: 25px 28px;
    border: 1px solid rgba(56, 189, 248, .46);
    border-radius: 22px;
    background:
        linear-gradient(115deg, rgba(3, 105, 161, .32), rgba(15, 23, 42, .78) 42%, rgba(30, 64, 175, .24));
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow:
        0 22px 50px rgba(0, 0, 0, .36),
        inset 0 0 34px rgba(14, 165, 233, .05),
        0 0 0 1px rgba(14, 165, 233, .03);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cardbol-game-card:hover {
    transform: translateY(-4px) scale(1.012);
    border-color: rgba(125, 211, 252, .85);
    box-shadow:
        0 28px 62px rgba(0, 0, 0, .43),
        0 0 34px rgba(14, 165, 233, .16),
        inset 0 0 35px rgba(14, 165, 233, .08);
    filter: brightness(1.06);
}

.cardbol-game-card:active { transform: translateY(-1px) scale(.995); }

.cardbol-game-card::before,
.cardbol-game-card::after {
    content: "";
    position: absolute;
    width: 55px;
    height: 55px;
    pointer-events: none;
}

.cardbol-game-card::before {
    left: 10px;
    top: 10px;
    border-left: 2px solid rgba(56, 189, 248, .6);
    border-top: 2px solid rgba(56, 189, 248, .6);
}

.cardbol-game-card::after {
    right: 10px;
    bottom: 10px;
    border-right: 2px solid rgba(56, 189, 248, .38);
    border-bottom: 2px solid rgba(56, 189, 248, .38);
}

.cardbol-game-card-scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 18%;
    opacity: .22;
    background: linear-gradient(90deg, transparent, rgba(186, 230, 253, .72), transparent);
    transform: skewX(-17deg);
    animation: cardbolHubScan 4.4s linear infinite;
    pointer-events: none;
}

@keyframes cardbolHubScan {
    0%, 35% { left: -30%; }
    72%, 100% { left: 120%; }
}

.cardbol-game-icon {
    position: relative;
    z-index: 1;
    width: clamp(66px, 9vw, 94px);
    height: clamp(66px, 9vw, 94px);
    object-fit: contain;
    filter: drop-shadow(0 0 17px rgba(56, 189, 248, .38));
}

.cardbol-game-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.cardbol-game-copy strong {
    display: block;
    color: #f8fafc;
    font-size: clamp(27px, 4vw, 46px);
    line-height: .95;
    font-weight: 1000;
    letter-spacing: 1.1px;
}

.cardbol-game-copy small {
    display: block;
    margin-top: 8px;
    color: #7dd3fc;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 2px;
}

.cardbol-game-action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: 12px;
    background: rgba(2, 132, 199, .13);
    color: #bae6fd;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 1px;
}

.cardbol-game-action b {
    color: #38bdf8;
    font-size: 22px;
    line-height: .6;
}

.cardbol-hub-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-top: 17px;
    border-top: 1px solid rgba(125, 211, 252, .10);
    color: #64748b;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: 1.6px;
}

.hub-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 10px rgba(34, 211, 238, .9);
}

@media (max-width: 620px) {
    .cardbol-hub-shell {
        width: calc(100vw - 24px);
        min-height: calc(100dvh - 24px);
        padding: 20px 17px;
        border-radius: 22px;
    }

    .cardbol-hub-header {
        align-items: flex-start;
        gap: 12px;
    }

    .cardbol-hub-brand { gap: 10px; }
    .cardbol-hub-brand-icon { width: 42px; height: 42px; }
    .cardbol-hub-eyebrow { font-size: 8px; letter-spacing: 1.5px; }
    .cardbol-hub-brand h1 { font-size: 20px; }
    .cardbol-hub-user { max-width: 118px; padding: 7px 9px; font-size: 8px; }

    .cardbol-game-card {
        min-height: 136px;
        grid-template-columns: auto 1fr;
        gap: 16px;
        padding: 21px 18px;
    }

    .cardbol-game-icon { width: 70px; height: 70px; }
    .cardbol-game-copy strong { font-size: 31px; }
    .cardbol-game-copy small { font-size: 8px; letter-spacing: 1.4px; }
    .cardbol-game-action { grid-column: 1 / -1; justify-self: stretch; justify-content: center; padding: 8px 11px; }
}

@media (orientation: landscape) and (max-height: 650px) {
    .cardbol-hub-shell {
        width: min(92vw, 880px);
        min-height: auto;
        height: calc(100dvh - 16px);
        padding: 13px 20px;
        border-radius: 18px;
    }

    .cardbol-hub-header { padding-bottom: 10px; }
    .cardbol-hub-brand-icon { width: 36px; height: 36px; }
    .cardbol-hub-eyebrow { font-size: 7px; }
    .cardbol-hub-brand h1 { font-size: 18px; }
    .cardbol-hub-user { padding: 6px 9px; font-size: 8px; }
    .cardbol-hub-content { padding: 12px 0; }

    .cardbol-game-card {
        width: min(510px, 80vw);
        min-height: 104px;
        padding: 14px 20px;
        gap: 17px;
        border-radius: 17px;
    }

    .cardbol-game-icon { width: 60px; height: 60px; }
    .cardbol-game-copy strong { font-size: 28px; }
    .cardbol-game-copy small { margin-top: 5px; font-size: 8px; }
    .cardbol-game-action { padding: 8px 10px; font-size: 8px; }
    .cardbol-hub-footer { padding-top: 8px; font-size: 7px; }
}

/* =========================================================
   CARDBOL — NOVO LAYOUT MOBILE EM MODO RETRATO
   Campo realmente vertical: adversário em cima, jogador embaixo.
   A versão desktop/paisagem permanece inalterada.
========================================================= */
@media (max-width: 900px) and (orientation: portrait) {
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }

    .game-container {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 4px !important;
        gap: 4px !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
    }

    /* Cabeçalho mais compacto para entregar a maior parte da tela ao campo. */
    .game-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "top dice" !important;
        gap: 4px !important;
        min-height: 0 !important;
    }

    .brand-panel {
        display: none !important;
    }

    .top-panel {
        grid-area: top !important;
        min-width: 0 !important;
        padding: 3px 4px !important;
        gap: 3px !important;
        grid-template-columns: minmax(60px, 1fr) auto minmax(60px, 1fr) !important;
    }

    .game-header > .dice-area {
        grid-area: dice !important;
        padding: 3px 4px !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    .player {
        padding: 4px 3px !important;
        font-size: 8px !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .electronic-scoreboard {
        min-width: 108px !important;
        padding: 3px 5px !important;
    }

    .score-label { font-size: 6px !important; }
    .score-number { min-width: 21px !important; font-size: 17px !important; padding: 1px 3px !important; }
    .score-separator { font-size: 13px !important; }
    .score-club-logo { width: 20px !important; height: 20px !important; }
    .match-clock-row { gap: 4px !important; margin: 0 !important; }
    .match-phase-label { font-size: 6px !important; }
    .match-clock { min-width: 38px !important; font-size: 10px !important; }
    .turn { font-size: 6px !important; letter-spacing: .15px !important; }

    .dice {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        border-width: 2px !important;
        border-radius: 8px !important;
        padding: 4px !important;
    }

    .dice .pip { width: 5px !important; height: 5px !important; }
    .dice.empty::after { font-size: 19px !important; }
    .dice-button { padding: 6px 7px !important; font-size: 8px !important; border-radius: 7px !important; }
    .dice-info { min-width: 0 !important; font-size: 6px !important; line-height: 1.05 !important; }
    .dice-value { font-size: 14px !important; }

    /* Estrutura: adversário -> campo vertical -> jogador local. */
    .match-stage {
        min-height: 0 !important;
        height: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 72px minmax(0, 1fr) 72px !important;
        grid-template-areas:
            "blue"
            "pitch"
            "red" !important;
        gap: 4px !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        overflow: hidden !important;
    }

    /* Se o jogador local online for o lado azul, inverte os painéis. */
    .game-container.portrait-local-blue .match-stage {
        grid-template-areas:
            "red"
            "pitch"
            "blue" !important;
    }

    .red-side { grid-area: red !important; }
    .blue-side { grid-area: blue !important; }

    /* Faixas compactas de cada time: nome | banco | cartas. */
    .team-side {
        width: 100% !important;
        height: 72px !important;
        min-height: 0 !important;
        padding: 3px !important;
        gap: 3px !important;
        display: grid !important;
        grid-template-columns: minmax(58px, .55fr) minmax(105px, 1fr) minmax(0, 1.45fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        align-items: stretch !important;
        overflow: hidden !important;
        border-radius: 9px !important;
    }

    .team-side.red-side {
        border-left: 1px solid var(--panel-border) !important;
        border-bottom: 3px solid rgba(248,113,113,.8) !important;
    }

    .team-side.blue-side {
        border-right: 1px solid var(--panel-border) !important;
        border-top: 3px solid rgba(96,165,250,.8) !important;
    }

    .game-container.portrait-local-blue .team-side.red-side {
        border-bottom: 1px solid var(--panel-border) !important;
        border-top: 3px solid rgba(248,113,113,.8) !important;
    }

    .game-container.portrait-local-blue .team-side.blue-side {
        border-top: 1px solid var(--panel-border) !important;
        border-bottom: 3px solid rgba(96,165,250,.8) !important;
    }

    .side-team-title {
        min-height: 0 !important;
        height: 100% !important;
        padding: 3px !important;
        font-size: 7px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .team-side .squad-box,
    .team-side .card-hand {
        height: 100% !important;
        min-height: 0 !important;
        padding: 2px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .team-side .squad-title,
    .team-side .card-hand-title {
        margin: 0 0 2px !important;
        font-size: 6px !important;
        line-height: 1 !important;
    }

    .team-side .squad-rows {
        height: calc(100% - 8px) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px !important;
    }

    .team-side .squad-section {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 1px !important;
        overflow: hidden !important;
    }

    .team-side .squad-label {
        margin: 0 !important;
        font-size: 5px !important;
        line-height: 1 !important;
    }

    .team-side .player-chips,
    .team-side .bench-carousel {
        height: 34px !important;
        min-height: 34px !important;
        gap: 1px !important;
    }

    .bench-carousel-item {
        width: 30px !important;
        height: 30px !important;
    }

    .bench-carousel-arrow {
        width: 14px !important;
        height: 20px !important;
        font-size: 8px !important;
    }

    .team-side .card-slots {
        height: calc(100% - 8px) !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: 2px !important;
    }

    .team-side .card-slot {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .team-side .tactical-card .card-number,
    .team-side .tactical-card .card-name { font-size: 6px !important; }
    .team-side .tactical-card .card-effect { display: none !important; }
    .side-card-rule { display: none !important; }

    /* CAMPO EM PÉ: 11 colunas, 18 linhas + um gol em cada extremidade. */
    .pitch-shell {
        grid-area: pitch !important;
        width: auto !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        aspect-ratio: 11 / 20 !important;
        justify-self: center !important;
        align-self: center !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 1fr 18fr 1fr !important;
        grid-template-areas:
            "topgoal"
            "field"
            "bottomgoal" !important;
        border-width: 3px !important;
        border-radius: 11px !important;
    }

    .board {
        grid-area: field !important;
        grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(18, minmax(0, 1fr)) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 2px solid white !important;
        border-bottom: 2px solid white !important;
        background:
            linear-gradient(to bottom, transparent 49.8%, rgba(255,255,255,.85) 49.8%, rgba(255,255,255,.85) 50.2%, transparent 50.2%),
            linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)) !important;
    }

    .board::after {
        background:
            linear-gradient(to bottom,
                transparent calc(50% - 2px),
                rgba(255,255,255,.95) calc(50% - 2px),
                rgba(255,255,255,.95) calc(50% + 2px),
                transparent calc(50% + 2px)
            ),
            linear-gradient(to bottom,
                transparent calc(16.6667% - 2px),
                rgba(250,204,21,.95) calc(16.6667% - 2px),
                rgba(250,204,21,.95) calc(16.6667% + 2px),
                transparent calc(16.6667% + 2px)
            ),
            linear-gradient(to bottom,
                transparent calc(83.3333% - 2px),
                rgba(250,204,21,.95) calc(83.3333% - 2px),
                rgba(250,204,21,.95) calc(83.3333% + 2px),
                transparent calc(83.3333% + 2px)
            ) !important;
    }

    /* Por padrão: azul/adversário em cima e vermelho/jogador embaixo. */
    .blue-goal-line { grid-area: topgoal !important; }
    .red-goal-line { grid-area: bottomgoal !important; }

    /* Online com jogador local azul: vermelho sobe e azul desce. */
    .game-container.portrait-local-blue .red-goal-line { grid-area: topgoal !important; }
    .game-container.portrait-local-blue .blue-goal-line { grid-area: bottomgoal !important; }

    .goal-line {
        width: 100% !important;
        height: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }

    .goal-cell {
        min-width: 0 !important;
        min-height: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-left: 1px solid rgba(255,255,255,.72) !important;
        border-right: 1px solid rgba(255,255,255,.72) !important;
        font-size: clamp(8px, 2.8vw, 12px) !important;
    }

    .goal-cell:nth-child(1) { grid-row: 1 !important; grid-column: 5 !important; }
    .goal-cell:nth-child(2) { grid-row: 1 !important; grid-column: 6 !important; }
    .goal-cell:nth-child(3) { grid-row: 1 !important; grid-column: 7 !important; }

    .red-goal-line .goal-cell {
        background: linear-gradient(180deg, rgba(153,27,27,.88), rgba(239,68,68,.78)) !important;
    }

    .blue-goal-line .goal-cell {
        background: linear-gradient(180deg, rgba(59,130,246,.78), rgba(30,64,175,.9)) !important;
    }

    /* Linhas de saída acompanham quem está em cima/embaixo. */
    .red-start { box-shadow: inset 0 -4px 0 #f87171 !important; }
    .blue-start { box-shadow: inset 0 4px 0 #60a5fa !important; }
    .game-container.portrait-local-blue .red-start { box-shadow: inset 0 4px 0 #f87171 !important; }
    .game-container.portrait-local-blue .blue-start { box-shadow: inset 0 -4px 0 #60a5fa !important; }

    .piece {
        width: 88% !important;
        max-height: 88% !important;
        left: 6% !important;
        top: 6% !important;
    }

    .piece-label { font-size: clamp(5px, 1.75vw, 8px) !important; }

    /* Rodapé de comandos compacto e sem rolagem da página. */
    .info-panel {
        padding: 3px !important;
        gap: 3px !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-areas:
            "message message message message"
            "formation fullscreen ranking newgame" !important;
        align-items: stretch !important;
    }

    .message {
        grid-area: message !important;
        min-height: 24px !important;
        padding: 4px 6px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
    }

    .formation-confirm-button { grid-area: formation !important; }
    .fullscreen-button { grid-area: fullscreen !important; }
    .ranking-game-button { grid-area: ranking !important; }
    .new-game { grid-area: newgame !important; }

    .formation-confirm-button,
    .fullscreen-button,
    .ranking-game-button,
    .new-game {
        min-width: 0 !important;
        padding: 6px 3px !important;
        font-size: 7px !important;
        white-space: normal !important;
        line-height: 1.05 !important;
    }
}

/* Em aparelhos muito baixos, reduz as faixas dos times para preservar o campo. */
@media (max-width: 900px) and (orientation: portrait) and (max-height: 740px) {
    .match-stage {
        grid-template-rows: 60px minmax(0, 1fr) 60px !important;
    }

    .team-side { height: 60px !important; }
    .team-side .squad-title,
    .team-side .card-hand-title { display: none !important; }
    .team-side .squad-rows,
    .team-side .card-slots { height: 100% !important; }
    .team-side .player-chips,
    .team-side .bench-carousel { height: 28px !important; min-height: 28px !important; }
    .bench-carousel-item { width: 25px !important; height: 25px !important; }
}

/* =========================================================
   SELEÇÃO DE TIMES — BACKGROUND TOTAL + CLUBES CIRCULARES
   Fundo sem frame, colunas laterais únicas e curvadas.
========================================================= */
.team-select-overlay {
    padding: 0 !important;
    background:
        linear-gradient(180deg, rgba(2,6,23,.52), rgba(2,6,23,.30) 20%, rgba(2,6,23,.30) 80%, rgba(2,6,23,.56)),
        radial-gradient(circle at center, rgba(255,255,255,.03), rgba(2,6,23,.18) 58%, rgba(2,6,23,.52) 100%),
        url("../imagens/geral/img-bg-menu-times-modo-pc.png") center center / cover no-repeat !important;
    backdrop-filter: none !important;
}

.team-select-panel,
.team-select-panel-stadium {
    width: min(1380px, 100vw) !important;
    height: min(96dvh, 860px) !important;
    max-width: 100vw !important;
    max-height: 96dvh !important;
    padding: 18px 28px 18px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
}

.team-select-panel-stadium::before {
    display: none !important;
}

.team-select-title,
.team-select-subtitle,
.team-select-footer {
    text-shadow: 0 3px 12px rgba(0,0,0,.65);
}

.team-select-title {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    font-size: clamp(26px, 4.2vw, 54px) !important;
}

.team-select-subtitle {
    margin-bottom: 10px !important;
    font-size: clamp(12px, 1.1vw, 16px) !important;
    color: #eef6ff !important;
}

.team-select-layout {
    width: min(1320px, 100%);
    margin: 0 auto;
    min-height: min(72dvh, 650px);
    grid-template-columns: 230px 1fr 230px !important;
    gap: 26px !important;
    align-items: center !important;
}

.team-select-grid-side {
    grid-template-columns: 1fr !important;
    justify-items: center;
    align-content: center;
    gap: 14px !important;
}

.team-select-center {
    min-height: 100% !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.team-select-grid-left > *,
.team-select-grid-right > * {
    --curve-shift: 0px;
}

.team-select-grid-left > *:nth-child(1),
.team-select-grid-right > *:nth-child(1) { --curve-shift: 0px; }
.team-select-grid-left > *:nth-child(2) { --curve-shift: 34px; }
.team-select-grid-left > *:nth-child(3) { --curve-shift: 60px; }
.team-select-grid-left > *:nth-child(4) { --curve-shift: 60px; }
.team-select-grid-left > *:nth-child(5) { --curve-shift: 34px; }
.team-select-grid-left > *:nth-child(6) { --curve-shift: 0px; }
.team-select-grid-right > *:nth-child(2) { --curve-shift: -34px; }
.team-select-grid-right > *:nth-child(3) { --curve-shift: -60px; }
.team-select-grid-right > *:nth-child(4) { --curve-shift: -60px; }
.team-select-grid-right > *:nth-child(5) { --curve-shift: -34px; }
.team-select-grid-right > *:nth-child(6) { --curve-shift: 0px; }

.team-card,
.team-card-locked {
    width: 128px !important;
    min-width: 128px;
    height: 128px !important;
    min-height: 128px !important;
    border-radius: 50% !important;
    padding: 10px 8px !important;
    transform: translateX(var(--curve-shift, 0));
    border: 2px solid rgba(255,255,255,.32) !important;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.24), rgba(255,255,255,.02) 40%),
        linear-gradient(180deg, rgba(8,15,28,.78), rgba(8,15,28,.58)) !important;
    box-shadow:
        0 16px 34px rgba(0,0,0,.34),
        inset 0 2px 12px rgba(255,255,255,.08) !important;
    backdrop-filter: blur(4px);
}

.team-card {
    gap: 5px !important;
}

.team-card:hover {
    transform: translateX(var(--curve-shift, 0)) translateY(-3px) scale(1.04) !important;
    box-shadow:
        0 20px 40px rgba(0,0,0,.40),
        inset 0 2px 14px rgba(255,255,255,.12) !important;
}

.team-card.active-team-card {
    border-color: rgba(250,204,21,.95) !important;
    box-shadow:
        0 0 0 4px rgba(250,204,21,.24),
        0 18px 34px rgba(0,0,0,.42),
        inset 0 2px 16px rgba(255,255,255,.12) !important;
}

.team-card-logo {
    width: 44px !important;
    height: 44px !important;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.42));
}

.team-card-label {
    font-size: 12px !important;
    line-height: 1.05 !important;
    max-width: 100px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,.65);
}

.team-card-role {
    font-size: 9px !important;
    color: #f1f5f9 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.team-card-locked {
    font-size: 11px !important;
    color: rgba(241,245,249,.74) !important;
    text-align: center;
    letter-spacing: .06em !important;
}

.team-card-locked::before {
    top: 14px !important;
    right: 16px !important;
    font-size: 16px !important;
}

.team-card.team-card-disabled,
.team-card.team-card-disabled:hover {
    transform: translateX(var(--curve-shift, 0)) !important;
    opacity: .42 !important;
}

.team-select-footer {
    margin-top: 12px !important;
    color: #dbeafe !important;
    font-size: 12px !important;
}

@media (max-width: 1100px) {
    .team-select-layout {
        grid-template-columns: 180px 1fr 180px !important;
        gap: 18px !important;
    }

    .team-card,
    .team-card-locked {
        width: 106px !important;
        min-width: 106px;
        height: 106px !important;
        min-height: 106px !important;
    }

    .team-card-logo {
        width: 38px !important;
        height: 38px !important;
    }

    .team-card-label { font-size: 10px !important; max-width: 84px; }
    .team-card-role { font-size: 8px !important; }

    .team-select-grid-left > *:nth-child(2) { --curve-shift: 22px; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 38px; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 38px; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 22px; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -22px; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -38px; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -38px; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -22px; }
}

@media (orientation: portrait) and (max-width: 700px) {
    .team-select-panel,
    .team-select-panel-stadium {
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 12px 8px 10px !important;
    }

    .team-select-title {
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }

    .team-select-subtitle {
        font-size: 9px !important;
        margin-bottom: 8px !important;
    }

    .team-select-layout {
        min-height: auto;
        grid-template-columns: 92px 1fr 92px !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .team-select-grid-side {
        gap: 8px !important;
    }

    .team-card,
    .team-card-locked {
        width: 78px !important;
        min-width: 78px;
        height: 78px !important;
        min-height: 78px !important;
        padding: 6px 4px !important;
    }

    .team-card-logo {
        width: 24px !important;
        height: 24px !important;
    }

    .team-card-label {
        font-size: 7px !important;
        max-width: 62px;
    }

    .team-card-role {
        font-size: 5px !important;
    }

    .team-card-locked {
        font-size: 7px !important;
    }

    .team-card-locked::before {
        top: 7px !important;
        right: 10px !important;
        font-size: 10px !important;
    }

    .team-select-grid-left > *:nth-child(2) { --curve-shift: 6px; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 12px; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 12px; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 6px; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -6px; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -12px; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -12px; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -6px; }

    .team-select-footer {
        margin-top: 8px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        padding: 0 8px;
    }
}

@media (orientation: landscape) and (max-height: 700px) {
    .team-select-panel,
    .team-select-panel-stadium {
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 10px 14px 8px !important;
    }

    .team-select-title {
        font-size: 22px !important;
        margin-bottom: 2px !important;
    }

    .team-select-subtitle {
        font-size: 9px !important;
        margin-bottom: 5px !important;
    }

    .team-select-layout {
        grid-template-columns: 128px 1fr 128px !important;
        gap: 8px !important;
        min-height: auto;
    }

    .team-select-grid-side {
        gap: 6px !important;
    }

    .team-card,
    .team-card-locked {
        width: 66px !important;
        min-width: 66px;
        height: 66px !important;
        min-height: 66px !important;
        padding: 4px 3px !important;
    }

    .team-card-logo {
        width: 20px !important;
        height: 20px !important;
    }

    .team-card-label {
        font-size: 6px !important;
        max-width: 54px;
    }

    .team-card-role,
    .team-card-locked {
        font-size: 4px !important;
    }

    .team-card-locked::before {
        top: 6px !important;
        right: 8px !important;
        font-size: 8px !important;
    }

    .team-select-grid-left > *:nth-child(2) { --curve-shift: 8px; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 14px; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 14px; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 8px; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -8px; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -14px; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -14px; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -8px; }

    .team-select-footer {
        margin-top: 5px !important;
        font-size: 6px !important;
    }
}

/* =========================================================
   AJUSTE FINO — MENU DE TIMES SEM CORTE
   Título embaixo, times mais altos e sem círculo de fundo.
========================================================= */
.team-select-panel,
.team-select-panel-stadium {
    display: grid !important;
    grid-template-rows: 1fr auto auto auto !important;
    align-items: stretch !important;
    padding: 10px 22px 14px !important;
}

.team-select-layout {
    align-self: start !important;
    margin-top: -6px !important;
    min-height: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 170px) !important;
    grid-template-columns: 190px 1fr 190px !important;
    gap: 10px !important;
}

.team-select-grid-side {
    gap: 10px !important;
    align-content: start !important;
    padding-top: 2px !important;
}

.team-select-title {
    order: 2;
    margin: 8px 0 2px !important;
    font-size: clamp(24px, 3.7vw, 52px) !important;
    line-height: 1 !important;
}

.team-select-subtitle {
    order: 3;
    margin: 0 0 4px !important;
    font-size: clamp(11px, 1vw, 15px) !important;
}

.team-select-footer {
    order: 4;
    margin-top: 4px !important;
    font-size: 10px !important;
}

.team-card,
.team-card-locked {
    width: 140px !important;
    min-width: 140px !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 0 !important;
    padding: 2px 2px 4px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.team-card {
    gap: 4px !important;
}

.team-card:hover {
    transform: translateX(var(--curve-shift, 0)) translateY(-2px) scale(1.03) !important;
    box-shadow: none !important;
    filter: brightness(1.08);
}

.team-card.active-team-card {
    box-shadow: none !important;
    border: none !important;
}

.team-card.active-team-card .team-card-logo {
    filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 12px rgba(250,204,21,.85));
}

.team-card-logo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
}

.team-card-label {
    max-width: 128px !important;
    font-size: 13px !important;
}

.team-card-role {
    font-size: 9px !important;
}

.team-card-locked {
    color: rgba(255,255,255,.75) !important;
    font-size: 11px !important;
}

.team-card-locked::before {
    position: static !important;
    display: block;
    margin-bottom: 3px;
    font-size: 15px !important;
}

.team-card.team-card-disabled,
.team-card.team-card-disabled:hover {
    transform: translateX(var(--curve-shift, 0)) !important;
    opacity: .42 !important;
}

.team-select-grid-left > *:nth-child(2) { --curve-shift: 16px !important; }
.team-select-grid-left > *:nth-child(3) { --curve-shift: 28px !important; }
.team-select-grid-left > *:nth-child(4) { --curve-shift: 28px !important; }
.team-select-grid-left > *:nth-child(5) { --curve-shift: 16px !important; }
.team-select-grid-right > *:nth-child(2) { --curve-shift: -16px !important; }
.team-select-grid-right > *:nth-child(3) { --curve-shift: -28px !important; }
.team-select-grid-right > *:nth-child(4) { --curve-shift: -28px !important; }
.team-select-grid-right > *:nth-child(5) { --curve-shift: -16px !important; }

@media (max-width: 1100px) {
    .team-select-layout {
        grid-template-columns: 154px 1fr 154px !important;
        max-height: calc(100dvh - 150px) !important;
    }

    .team-card,
    .team-card-locked {
        width: 116px !important;
        min-width: 116px !important;
    }

    .team-card-logo {
        width: 54px !important;
        height: 54px !important;
    }

    .team-card-label {
        max-width: 108px !important;
        font-size: 11px !important;
    }
}

@media (orientation: portrait) and (max-width: 700px) {
    .team-select-panel,
    .team-select-panel-stadium {
        padding: 8px 6px 10px !important;
        grid-template-rows: 1fr auto auto auto !important;
    }

    .team-select-layout {
        grid-template-columns: 84px 1fr 84px !important;
        gap: 1px !important;
        max-height: calc(100dvh - 122px) !important;
        margin-top: -2px !important;
    }

    .team-select-grid-side {
        gap: 4px !important;
    }

    .team-card,
    .team-card-locked {
        width: 74px !important;
        min-width: 74px !important;
        padding: 1px 1px 2px !important;
    }

    .team-card-logo {
        width: 28px !important;
        height: 28px !important;
    }

    .team-card-label {
        max-width: 70px !important;
        font-size: 7px !important;
        line-height: 1.02 !important;
    }

    .team-card-role {
        font-size: 5px !important;
    }

    .team-card-locked,
    .team-card-locked::before {
        font-size: 7px !important;
    }

    .team-select-title {
        margin-top: 4px !important;
        font-size: 18px !important;
    }

    .team-select-subtitle {
        font-size: 8px !important;
    }

    .team-select-footer {
        font-size: 7px !important;
        line-height: 1.08 !important;
    }

    .team-select-grid-left > *:nth-child(2) { --curve-shift: 3px !important; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 6px !important; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 6px !important; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 3px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -3px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -6px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -6px !important; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -3px !important; }
}

@media (orientation: landscape) and (max-height: 700px) {
    .team-select-panel,
    .team-select-panel-stadium {
        padding: 6px 10px 8px !important;
    }

    .team-select-layout {
        grid-template-columns: 114px 1fr 114px !important;
        gap: 4px !important;
        max-height: calc(100dvh - 96px) !important;
    }

    .team-select-grid-side {
        gap: 2px !important;
    }

    .team-card,
    .team-card-locked {
        width: 62px !important;
        min-width: 62px !important;
        padding: 1px !important;
    }

    .team-card-logo {
        width: 20px !important;
        height: 20px !important;
    }

    .team-card-label {
        max-width: 60px !important;
        font-size: 6px !important;
        line-height: 1 !important;
    }

    .team-card-role,
    .team-card-locked,
    .team-card-locked::before {
        font-size: 4px !important;
        line-height: 1 !important;
    }

    .team-select-title {
        font-size: 18px !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    .team-select-subtitle {
        font-size: 7px !important;
        margin-bottom: 2px !important;
    }

    .team-select-footer {
        font-size: 5px !important;
        margin-top: 2px !important;
    }

    .team-select-grid-left > *:nth-child(2) { --curve-shift: 4px !important; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 7px !important; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 7px !important; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 4px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -4px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -7px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -7px !important; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -4px !important; }
}


/* =========================================================
   MENU DE TIMES — ARCO PARA DENTRO
========================================================= */
.team-select-grid-left > *:nth-child(1) { --curve-shift: 6px !important; }
.team-select-grid-left > *:nth-child(2) { --curve-shift: 18px !important; }
.team-select-grid-left > *:nth-child(3) { --curve-shift: 32px !important; }
.team-select-grid-left > *:nth-child(4) { --curve-shift: 32px !important; }
.team-select-grid-left > *:nth-child(5) { --curve-shift: 18px !important; }
.team-select-grid-left > *:nth-child(6) { --curve-shift: 6px !important; }
.team-select-grid-right > *:nth-child(1) { --curve-shift: -6px !important; }
.team-select-grid-right > *:nth-child(2) { --curve-shift: -18px !important; }
.team-select-grid-right > *:nth-child(3) { --curve-shift: -32px !important; }
.team-select-grid-right > *:nth-child(4) { --curve-shift: -32px !important; }
.team-select-grid-right > *:nth-child(5) { --curve-shift: -18px !important; }
.team-select-grid-right > *:nth-child(6) { --curve-shift: -6px !important; }

@media (max-width: 1100px) {
    .team-select-grid-left > *:nth-child(1) { --curve-shift: 4px !important; }
    .team-select-grid-left > *:nth-child(2) { --curve-shift: 12px !important; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 22px !important; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 22px !important; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 12px !important; }
    .team-select-grid-left > *:nth-child(6) { --curve-shift: 4px !important; }
    .team-select-grid-right > *:nth-child(1) { --curve-shift: -4px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -12px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -22px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -22px !important; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -12px !important; }
    .team-select-grid-right > *:nth-child(6) { --curve-shift: -4px !important; }
}

@media (orientation: portrait) and (max-width: 700px) {
    .team-select-grid-left > *:nth-child(1) { --curve-shift: 2px !important; }
    .team-select-grid-left > *:nth-child(2) { --curve-shift: 5px !important; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 9px !important; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 9px !important; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 5px !important; }
    .team-select-grid-left > *:nth-child(6) { --curve-shift: 2px !important; }
    .team-select-grid-right > *:nth-child(1) { --curve-shift: -2px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -5px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -9px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -9px !important; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -5px !important; }
    .team-select-grid-right > *:nth-child(6) { --curve-shift: -2px !important; }
}

@media (orientation: landscape) and (max-height: 700px) {
    .team-select-grid-left > *:nth-child(1) { --curve-shift: 2px !important; }
    .team-select-grid-left > *:nth-child(2) { --curve-shift: 4px !important; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 7px !important; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 7px !important; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 4px !important; }
    .team-select-grid-left > *:nth-child(6) { --curve-shift: 2px !important; }
    .team-select-grid-right > *:nth-child(1) { --curve-shift: -2px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -4px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -7px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -7px !important; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -4px !important; }
    .team-select-grid-right > *:nth-child(6) { --curve-shift: -2px !important; }
}


/* =========================================================
   MENU DE TIMES — AJUSTES PEDIDOS PELO USUÁRIO
   Retrato: 12 itens na coluna direita.
   Paisagem: ícones maiores e mais para o centro.
========================================================= */
@media (orientation: portrait) and (max-width: 700px) {
    .team-select-layout {
        width: 100% !important;
        grid-template-columns: 1fr 80px !important;
        gap: 0 !important;
        max-height: calc(100dvh - 128px) !important;
        align-items: start !important;
    }

    .team-select-grid-left {
        display: none !important;
    }

    .team-select-center {
        grid-column: 1 !important;
        min-height: calc(100dvh - 128px) !important;
    }

    .team-select-grid-right {
        grid-column: 2 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: end !important;
        align-content: start !important;
        gap: 2px !important;
        padding-top: 2px !important;
        padding-right: 2px !important;
    }

    .team-select-grid-right > * {
        --curve-shift: 0px !important;
    }

    .team-card,
    .team-card-locked {
        width: 70px !important;
        min-width: 70px !important;
        padding: 1px 0 2px !important;
    }

    .team-card-logo {
        width: 22px !important;
        height: 22px !important;
    }

    .team-card-label {
        max-width: 68px !important;
        font-size: 5.8px !important;
        line-height: 1.02 !important;
        letter-spacing: .01em !important;
    }

    .team-card-role {
        font-size: 4.2px !important;
        line-height: 1 !important;
    }

    .team-card-locked,
    .team-card-locked::before {
        font-size: 5.5px !important;
        line-height: 1 !important;
    }

    .team-select-title {
        margin-top: 5px !important;
        font-size: 18px !important;
    }

    .team-select-subtitle {
        font-size: 7px !important;
        margin-bottom: 3px !important;
    }

    .team-select-footer {
        font-size: 6px !important;
        line-height: 1.08 !important;
        margin-top: 3px !important;
        padding: 0 6px !important;
    }
}

@media (orientation: landscape) and (max-height: 700px) {
    .team-select-layout {
        width: min(92vw, 980px) !important;
        margin: 0 auto !important;
        grid-template-columns: 148px 1fr 148px !important;
        gap: 12px !important;
        max-height: calc(100dvh - 96px) !important;
    }

    .team-select-grid-side {
        gap: 6px !important;
    }

    .team-card,
    .team-card-locked {
        width: 76px !important;
        min-width: 76px !important;
        padding: 1px 0 2px !important;
    }

    .team-card-logo {
        width: 25px !important;
        height: 25px !important;
    }

    .team-card-label {
        max-width: 74px !important;
        font-size: 7px !important;
        line-height: 1.02 !important;
    }

    .team-card-role,
    .team-card-locked,
    .team-card-locked::before {
        font-size: 4.8px !important;
    }

    .team-select-grid-left > *:nth-child(1) { --curve-shift: 8px !important; }
    .team-select-grid-left > *:nth-child(2) { --curve-shift: 12px !important; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 18px !important; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 18px !important; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 12px !important; }
    .team-select-grid-left > *:nth-child(6) { --curve-shift: 8px !important; }
    .team-select-grid-right > *:nth-child(1) { --curve-shift: -8px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -12px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -18px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -18px !important; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -12px !important; }
    .team-select-grid-right > *:nth-child(6) { --curve-shift: -8px !important; }
}


/* =========================================================
   MENU DE TIMES — REAJUSTE FINAL MOBILE
   Retrato: 12 opções maiores à direita em ordem alfabética.
   Paisagem mobile: 6/6 maiores e mais próximas do centro.
========================================================= */
@media (orientation: portrait) and (max-width: 700px) {
    .team-select-panel,
    .team-select-panel-stadium {
        padding: 6px 4px 10px !important;
        grid-template-rows: 1fr auto auto auto !important;
    }

    .team-select-layout {
        width: 100% !important;
        grid-template-columns: 1fr 100px !important;
        gap: 0 !important;
        max-height: calc(100dvh - 122px) !important;
        min-height: calc(100dvh - 122px) !important;
        align-items: stretch !important;
    }

    .team-select-grid-left {
        display: none !important;
    }

    .team-select-center {
        grid-column: 1 !important;
        min-height: calc(100dvh - 122px) !important;
    }

    .team-select-grid-right {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        height: calc(100dvh - 122px) !important;
        gap: 0 !important;
        padding: 0 2px 0 0 !important;
    }

    .team-select-grid-right > * {
        --curve-shift: 0px !important;
    }

    .team-card,
    .team-card-locked {
        width: 96px !important;
        min-width: 96px !important;
        padding: 2px 0 3px !important;
    }

    .team-card-logo {
        width: 28px !important;
        height: 28px !important;
    }

    .team-card-label {
        max-width: 92px !important;
        font-size: 8px !important;
        line-height: 1.03 !important;
        letter-spacing: .01em !important;
    }

    .team-card-role {
        font-size: 5.5px !important;
        line-height: 1 !important;
    }

    .team-card-locked,
    .team-card-locked::before {
        font-size: 7px !important;
        line-height: 1 !important;
    }

    .team-select-title {
        margin-top: 4px !important;
        font-size: 17px !important;
    }

    .team-select-subtitle {
        font-size: 7px !important;
        margin-bottom: 3px !important;
    }

    .team-select-footer {
        font-size: 6px !important;
        line-height: 1.08 !important;
        margin-top: 3px !important;
        padding: 0 6px !important;
    }
}

@media (orientation: landscape) and (max-height: 700px) {
    .team-select-layout {
        width: min(94vw, 1080px) !important;
        margin: 0 auto !important;
        grid-template-columns: 168px 1fr 168px !important;
        gap: 14px !important;
        max-height: calc(100dvh - 96px) !important;
    }

    .team-select-grid-side {
        gap: 6px !important;
    }

    .team-card,
    .team-card-locked {
        width: 90px !important;
        min-width: 90px !important;
        padding: 2px 0 3px !important;
    }

    .team-card-logo {
        width: 28px !important;
        height: 28px !important;
    }

    .team-card-label {
        max-width: 86px !important;
        font-size: 8px !important;
        line-height: 1.03 !important;
    }

    .team-card-role,
    .team-card-locked,
    .team-card-locked::before {
        font-size: 5.5px !important;
        line-height: 1 !important;
    }

    .team-select-title {
        font-size: 19px !important;
    }

    .team-select-subtitle {
        font-size: 7px !important;
    }

    .team-select-footer {
        font-size: 5px !important;
    }

    .team-select-grid-left > *:nth-child(1) { --curve-shift: 12px !important; }
    .team-select-grid-left > *:nth-child(2) { --curve-shift: 18px !important; }
    .team-select-grid-left > *:nth-child(3) { --curve-shift: 26px !important; }
    .team-select-grid-left > *:nth-child(4) { --curve-shift: 26px !important; }
    .team-select-grid-left > *:nth-child(5) { --curve-shift: 18px !important; }
    .team-select-grid-left > *:nth-child(6) { --curve-shift: 12px !important; }
    .team-select-grid-right > *:nth-child(1) { --curve-shift: -12px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -18px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -26px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -26px !important; }
    .team-select-grid-right > *:nth-child(5) { --curve-shift: -18px !important; }
    .team-select-grid-right > *:nth-child(6) { --curve-shift: -12px !important; }
}


/* =========================================================
   MENU DE TIMES INTERATIVO — PAISAGEM MOBILE
========================================================= */
.team-select-mobile-nav {
    display: none;
}

.team-select-mobile-nav.show {
    display: flex;
}

.team-select-nav-button {
    border: none;
    border-radius: 999px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-weight: 1000;
    font-size: 14px;
    color: #fff;
    background: rgba(15,23,42,.74);
    box-shadow: 0 8px 18px rgba(0,0,0,.34);
}

.team-select-nav-button:disabled {
    opacity: .35;
    cursor: default;
}

@media (orientation: landscape) and (max-height: 700px) {
    .team-select-layout {
        position: relative;
        width: min(94vw, 960px) !important;
        margin: 0 auto !important;
        grid-template-columns: 1fr 126px !important;
        gap: 0 !important;
        max-height: calc(100dvh - 96px) !important;
        min-height: calc(100dvh - 96px) !important;
        align-items: stretch !important;
    }

    .team-select-grid-left {
        display: none !important;
    }

    .team-select-center {
        grid-column: 1 !important;
        min-height: calc(100dvh - 96px) !important;
    }

    .team-select-grid-right {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 12px !important;
        padding: 0 18px 0 0 !important;
        min-height: calc(100dvh - 96px) !important;
    }

    .team-select-grid-right > *:nth-child(1) { --curve-shift: -6px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -22px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -22px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -6px !important; }

    .team-select-mobile-nav {
        position: absolute;
        right: 6px;
        top: 10px;
        bottom: 10px;
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        pointer-events: none;
    }

    .team-select-mobile-nav.show {
        display: flex;
    }

    .team-select-nav-button {
        pointer-events: auto;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .team-card,
    .team-card-locked {
        width: 112px !important;
        min-width: 112px !important;
        padding: 4px 0 5px !important;
    }

    .team-card-logo {
        width: 34px !important;
        height: 34px !important;
    }

    .team-card-label {
        max-width: 104px !important;
        font-size: 10px !important;
        line-height: 1.03 !important;
    }

    .team-card-role,
    .team-card-locked,
    .team-card-locked::before {
        font-size: 6px !important;
        line-height: 1 !important;
    }

    .team-select-title {
        font-size: 19px !important;
    }

    .team-select-subtitle {
        font-size: 7px !important;
    }

    .team-select-footer {
        font-size: 5px !important;
    }
}


/* =========================================================
   MENU INTERATIVO NO RETRATO + TOUCH/DRAG
========================================================= */
@media (orientation: portrait) and (max-width: 700px) {
    .team-select-layout {
        position: relative;
        width: 100% !important;
        grid-template-columns: 1fr 116px !important;
        gap: 0 !important;
        max-height: calc(100dvh - 122px) !important;
        min-height: calc(100dvh - 122px) !important;
        align-items: stretch !important;
    }

    .team-select-grid-left {
        display: none !important;
    }

    .team-select-center {
        grid-column: 1 !important;
        min-height: calc(100dvh - 122px) !important;
    }

    .team-select-grid-right {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 12px !important;
        padding: 0 18px 0 0 !important;
        min-height: calc(100dvh - 122px) !important;
        touch-action: none !important;
        user-select: none !important;
    }

    .team-select-grid-right > *:nth-child(1) { --curve-shift: -4px !important; }
    .team-select-grid-right > *:nth-child(2) { --curve-shift: -16px !important; }
    .team-select-grid-right > *:nth-child(3) { --curve-shift: -16px !important; }
    .team-select-grid-right > *:nth-child(4) { --curve-shift: -4px !important; }

    .team-select-mobile-nav {
        position: absolute;
        right: 6px;
        top: 10px;
        bottom: 10px;
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        pointer-events: none;
    }

    .team-select-mobile-nav.show {
        display: flex;
    }

    .team-select-nav-button {
        pointer-events: auto;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .team-card,
    .team-card-locked {
        width: 100px !important;
        min-width: 100px !important;
        padding: 3px 0 4px !important;
    }

    .team-card-logo {
        width: 30px !important;
        height: 30px !important;
    }

    .team-card-label {
        max-width: 94px !important;
        font-size: 8.5px !important;
        line-height: 1.04 !important;
        letter-spacing: .01em !important;
    }

    .team-card-role,
    .team-card-locked,
    .team-card-locked::before {
        font-size: 6px !important;
        line-height: 1 !important;
    }
}

@media (orientation: landscape) and (max-height: 700px) {
    .team-select-grid-right {
        touch-action: none !important;
        user-select: none !important;
    }
}


/* =========================================================
   CLUBE — CORINTHIANS
========================================================= */
.team-card.corinthians-card,
.online-club-card.corinthians-card {
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.18), transparent 42%),
        linear-gradient(145deg, #f8fafc 0%, #d1d5db 45%, #111827 100%);
    color: #111827;
}

.online-club-card.corinthians-card span {
    color: #111827;
    text-shadow: 0 1px 2px rgba(255,255,255,.45);
}


/* =========================================================
   MINI GAME — PÊNALTIS CARDBOL / PROTÓTIPO DE ANIMAÇÃO
========================================================= */
.cardbol-hub-content {
    gap: 18px;
    flex-wrap: wrap;
}

.cardbol-hub-content .cardbol-game-card {
    width: min(480px, 100%);
}

.penalty-hub-card {
    border-color: rgba(34,197,94,.48);
    background:
        linear-gradient(115deg, rgba(21,128,61,.30), rgba(15,23,42,.80) 42%, rgba(5,150,105,.20));
}

.penalty-hub-card:hover {
    border-color: rgba(134,239,172,.88);
    box-shadow: 0 28px 62px rgba(0,0,0,.43), 0 0 34px rgba(34,197,94,.15), inset 0 0 35px rgba(34,197,94,.07);
}

.penalty-hub-ball {
    border-radius: 50%;
    filter: drop-shadow(0 0 18px rgba(255,255,255,.22));
}

.penalty-mini-overlay {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: none;
    color: #fff;
    background:
        radial-gradient(circle at 50% 26%, rgba(56,189,248,.08), transparent 28%),
        linear-gradient(180deg, #07111f 0%, #0a251c 46%, #0d351d 100%);
    overflow: hidden;
}

.penalty-mini-overlay.show {
    display: block;
    animation: kickoffOverlayIn .24s ease-out both;
}

.penalty-mini-stage {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.penalty-mini-header {
    position: relative;
    z-index: 20;
    min-height: 64px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px clamp(12px, 2vw, 28px);
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: rgba(3,10,18,.82);
    backdrop-filter: blur(12px);
}

.penalty-mini-title-wrap { text-align: center; }
.penalty-mini-kicker { color: #86efac; font-size: 8px; font-weight: 1000; letter-spacing: 1.7px; }
.penalty-mini-title-wrap h2 { margin: 2px 0 0; font-size: clamp(20px, 2.4vw, 34px); line-height: 1; letter-spacing: .6px; }

.penalty-back-button,
.penalty-again-button {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(15,23,42,.74);
    color: #fff;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 1000;
    cursor: pointer;
}
.penalty-back-button { justify-self: start; padding: 9px 12px; font-size: 9px; }
.penalty-test-score { justify-self: end; color: #d1fae5; font-size: 9px; font-weight: 1000; letter-spacing: .7px; }

.penalty-pitch {
    position: relative;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.02) 40%, rgba(0,0,0,.16)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 9%, transparent 9% 18%),
        linear-gradient(180deg, #1f6a38 0%, #267c3f 48%, #1a612f 100%);
}

.penalty-pitch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: min(1100px, 88vw);
    height: 85%;
    transform: translateX(-50%) perspective(520px) rotateX(58deg);
    transform-origin: center top;
    border: 2px solid rgba(255,255,255,.38);
    border-top: 0;
    pointer-events: none;
    z-index: 0;
}

.penalty-goal {
    position: absolute;
    z-index: 5;
    top: clamp(28px, 5vh, 58px);
    left: 50%;
    width: min(690px, 68vw);
    height: min(280px, 34vh);
    transform: translateX(-50%);
    border: clamp(7px, .65vw, 11px) solid #fff;
    border-bottom-width: clamp(5px, .48vw, 8px);
    box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 0 24px rgba(255,255,255,.04);
}

.penalty-goal-net {
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image:
        linear-gradient(rgba(255,255,255,.75) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.75) 1px, transparent 1px);
    background-size: 24px 24px;
}

.penalty-zones {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.penalty-zone {
    position: relative;
    border: 1px dashed rgba(255,255,255,.24);
    background: rgba(2,6,23,.025);
    color: transparent;
    cursor: crosshair;
    transition: background .15s ease, box-shadow .15s ease;
}

.penalty-zone span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    transform: translate(-50%,-50%);
    border: 2px solid rgba(255,255,255,.55);
    border-radius: 50%;
    color: rgba(255,255,255,.78);
    font-size: 18px;
    background: rgba(3,10,18,.24);
    opacity: .58;
    transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

.penalty-zone:hover,
.penalty-zone:focus-visible {
    outline: none;
    background: rgba(34,197,94,.13);
    box-shadow: inset 0 0 28px rgba(34,197,94,.14);
}
.penalty-zone:hover span,
.penalty-zone:focus-visible span { transform: translate(-50%,-50%) scale(1.12); opacity: 1; background: rgba(22,101,52,.54); }

.penalty-goalkeeper {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: -9%;
    width: min(330px, 36vw);
    height: auto;
    transform: translateX(-50%);
    transform-origin: center 75%;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 12px 12px rgba(0,0,0,.38));
}

.penalty-kicker-player {
    position: absolute;
    z-index: 6;
    left: 61%;
    bottom: -7%;
    width: min(340px, 30vw);
    height: auto;
    transform: translateX(-50%);
    transform-origin: center bottom;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 16px 16px rgba(0,0,0,.30));
}

.penalty-ball {
    position: absolute;
    z-index: 11;
    left: 50%;
    bottom: 20%;
    width: clamp(42px, 4vw, 64px);
    height: auto;
    transform: translate(-50%, 50%);
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 7px 5px rgba(0,0,0,.35));
}

.penalty-spot {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 18.6%;
    width: 78px;
    height: 30px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,.30);
    box-shadow: 0 0 0 2px rgba(255,255,255,.16);
}

.penalty-instruction {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: 5.5%;
    transform: translateX(-50%);
    width: min(660px, 74vw);
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(2,10,18,.68);
    color: #ecfdf5;
    text-align: center;
    font-size: clamp(9px, 1vw, 13px);
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.penalty-result {
    position: absolute;
    z-index: 40;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(.82);
    opacity: 0;
    pointer-events: none;
    font-size: clamp(38px, 8vw, 96px);
    line-height: .9;
    font-weight: 1000;
    letter-spacing: 1px;
    text-shadow: 0 8px 30px rgba(0,0,0,.58);
}
.penalty-result.show { animation: penaltyResultPop .7s cubic-bezier(.18,.8,.2,1.2) both; }
.penalty-result.goal { color: #facc15; }
.penalty-result.save { color: #7dd3fc; }
@keyframes penaltyResultPop {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.58); }
    55% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

.penalty-again-button {
    position: absolute;
    z-index: 42;
    left: 50%;
    bottom: 5.5%;
    transform: translateX(-50%);
    padding: 11px 18px;
    border-color: rgba(134,239,172,.42);
    background: rgba(20,83,45,.82);
    color: #dcfce7;
    font-size: 10px;
    letter-spacing: .7px;
}

.penalty-pitch.is-shooting .penalty-zone { pointer-events: none; }
.penalty-pitch.is-shooting .penalty-zone span { opacity: .15; }

@media (max-width: 700px) and (orientation: portrait) {
    .penalty-mini-header { grid-template-columns: auto 1fr; padding: 8px 9px; }
    .penalty-mini-title-wrap { text-align: right; }
    .penalty-test-score { display: none; }
    .penalty-mini-kicker { font-size: 6px; }
    .penalty-mini-title-wrap h2 { font-size: 18px; }
    .penalty-back-button { padding: 7px 8px; font-size: 7px; }
    .penalty-goal { top: 9vh; width: 91vw; height: 27vh; }
    .penalty-goalkeeper { width: 53vw; bottom: -4%; }
    .penalty-kicker-player { width: 53vw; left: 64%; bottom: 3%; }
    .penalty-ball { width: 42px; bottom: 27%; }
    .penalty-spot { bottom: 25.8%; width: 58px; height: 22px; }
    .penalty-instruction { bottom: 1.8%; width: 88vw; font-size: 9px; border-radius: 14px; }
    .penalty-again-button { bottom: 1.8%; }
    .penalty-zone span { width: 34px; height: 34px; font-size: 15px; }
}

@media (orientation: landscape) and (max-height: 650px) {
    .penalty-mini-header { min-height: 46px; padding: 5px 10px; }
    .penalty-back-button { padding: 6px 8px; font-size: 7px; }
    .penalty-mini-kicker { font-size: 6px; }
    .penalty-mini-title-wrap h2 { font-size: 18px; }
    .penalty-test-score { font-size: 7px; }
    .penalty-goal { top: 8px; width: min(560px, 61vw); height: min(190px, 42vh); }
    .penalty-goalkeeper { width: min(235px, 26vw); bottom: -11%; }
    .penalty-kicker-player { width: min(230px, 24vw); bottom: -16%; left: 64%; }
    .penalty-ball { width: 38px; bottom: 22%; }
    .penalty-spot { bottom: 20%; width: 54px; height: 18px; }
    .penalty-instruction { bottom: 2%; font-size: 8px; padding: 7px 11px; }
    .penalty-again-button { bottom: 2%; padding: 7px 12px; font-size: 8px; }
    .penalty-zone span { width: 30px; height: 30px; font-size: 13px; }
}

/* =========================================================
   GAME HUB — CARDBOL PRINCIPAL + PROTÓTIPO 3D + MINI GAME
========================================================= */
.cardbol-hub-content {
    flex-direction: column;
    gap: 18px;
}

.cardbol-hub-content .primary-hub-card {
    width: min(560px, 100%);
}

.cardbol-hub-secondary {
    width: min(560px, 100%);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
}

.mode3d-hub-card {
    width: min(330px, calc(100% - 142px));
    min-height: 82px;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 18px;
    border-color: rgba(167, 139, 250, .48);
    background: linear-gradient(115deg, rgba(91,33,182,.30), rgba(15,23,42,.84) 44%, rgba(37,99,235,.20));
    box-shadow: 0 14px 30px rgba(0,0,0,.30), inset 0 0 24px rgba(139,92,246,.05);
}
.mode3d-hub-card:hover {
    border-color: rgba(196,181,253,.86);
    box-shadow: 0 18px 36px rgba(0,0,0,.36), 0 0 26px rgba(139,92,246,.14), inset 0 0 26px rgba(139,92,246,.06);
}
.mode3d-hub-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(196,181,253,.52);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(124,58,237,.72), rgba(30,64,175,.44));
    color: #ede9fe;
    font-size: 17px;
    letter-spacing: .5px;
    box-shadow: inset -7px -7px 14px rgba(0,0,0,.16), 0 0 18px rgba(139,92,246,.14);
    transform: perspective(100px) rotateX(8deg) rotateY(-10deg);
}
.mode3d-hub-card .cardbol-game-copy strong { font-size: 22px; }
.mode3d-hub-card .cardbol-game-copy small { margin-top: 5px; font-size: 7px; letter-spacing: 1.25px; color: #c4b5fd; }
.mode3d-hub-card .cardbol-game-action { padding: 8px 10px; border-color: rgba(167,139,250,.24); background: rgba(124,58,237,.12); color: #ddd6fe; font-size: 8px; }

.penalty-hub-card {
    width: 130px;
    min-height: 82px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    padding: 10px 8px;
    border-radius: 18px;
    border-color: rgba(34,197,94,.38);
    background: linear-gradient(145deg, rgba(21,128,61,.24), rgba(15,23,42,.86));
    box-shadow: 0 12px 26px rgba(0,0,0,.28);
    text-align: center;
}
.penalty-hub-card::before,
.penalty-hub-card::after,
.penalty-hub-card .cardbol-game-card-scan,
.penalty-hub-card .cardbol-game-action,
.penalty-hub-card .cardbol-game-copy small { display: none; }
.penalty-hub-card .cardbol-game-icon { width: 32px; height: 32px; }
.penalty-hub-card .cardbol-game-copy strong { font-size: 12px; letter-spacing: .5px; }

@media (max-width: 620px) {
    .cardbol-hub-secondary { gap: 9px; }
    .mode3d-hub-card {
        width: calc(100% - 104px);
        min-height: 70px;
        padding: 10px 11px;
        gap: 9px;
        grid-template-columns: auto 1fr;
    }
    .mode3d-hub-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
    .mode3d-hub-card .cardbol-game-copy strong { font-size: 17px; }
    .mode3d-hub-card .cardbol-game-copy small { font-size: 6px; }
    .mode3d-hub-card .cardbol-game-action { display: none; }
    .penalty-hub-card { width: 95px; min-height: 70px; padding: 8px 6px; }
    .penalty-hub-card .cardbol-game-icon { width: 27px; height: 27px; }
    .penalty-hub-card .cardbol-game-copy strong { font-size: 10px; }
}

@media (orientation: landscape) and (max-height: 650px) {
    .cardbol-hub-content { gap: 9px; }
    .cardbol-hub-secondary { gap: 9px; }
    .mode3d-hub-card { min-height: 58px; padding: 8px 12px; }
    .mode3d-hub-icon { width: 34px; height: 34px; font-size: 12px; }
    .mode3d-hub-card .cardbol-game-copy strong { font-size: 17px; }
    .mode3d-hub-card .cardbol-game-copy small { font-size: 6px; }
    .penalty-hub-card { min-height: 58px; width: 94px; padding: 6px; }
    .penalty-hub-card .cardbol-game-icon { width: 24px; height: 24px; }
}