/* ===== Fundo animado do site inteiro (Atualização 16) ===== */
/* GIF animado → camada escura → conteúdo do XadrezON, atrás de TODAS as
   telas (fixed no <body>, não só a tela inicial).
   Truque do "trilho duplicado": a faixa tem o dobro da largura, com o GIF
   repetido duas vezes lado a lado, e desliza de -50% até 0% — isso cria um
   loop perfeitamente contínuo da esquerda pra direita, sem depender de
   saber a largura exata do GIF. */
.site-bg-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 200%;
  height: 100%;
  animation: siteBgSlide 22s linear infinite;
}
.site-bg-img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
@keyframes siteBgSlide {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-bg-track { animation: none; transform: translateX(-25%); }
}


        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        :root {
            --bg-main: #0f172a; --bg-panel: rgba(30, 41, 59, 0.8); --border-panel: rgba(51, 65, 85, 0.8);
            --text-main: #f8fafc; --text-muted: #94a3b8;
            --board-border: #334155; --board-light: #cbd5e1; --board-dark: #64748b;
        }

        .theme-light {
            --bg-main: #f8fafc; --bg-panel: #ffffff; --border-panel: #e2e8f0;
            --text-main: #0f172a; --text-muted: #64748b;
            --board-border: #cbd5e1; --board-light: #f1f5f9; --board-dark: #94a3b8;
        }

        body {
            background-color: var(--bg-main); color: var(--text-main);
            font-family: 'Inter', sans-serif; overflow-x: hidden; user-select: none;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .panel-bg { background-color: var(--bg-panel); border-color: var(--border-panel); }

        .chessboard {
            display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
            border: 2px solid var(--board-border); border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            overflow: hidden; width: 100%; height: 100%;
        }

        .square { transition: background-color 0.2s; }
        .square.light { background-color: var(--board-light); }
        .square.dark { background-color: var(--board-dark); }
        .square.selected { background-color: var(--chess-highlight) !important; }
        .square.hint { background-color: var(--chess-hint) !important; }
        .square.highlight { position: relative; cursor: pointer; }
        .square.highlight::after {
            content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 25%; height: 25%; background-color: rgba(56, 189, 248, 0.7); border-radius: 50%; pointer-events: none;
        }
        .square.highlight.capture::after {
            width: 80%; height: 80%; background-color: transparent; border: 4px solid rgba(56, 189, 248, 0.7);
        }

        .chess-piece {
            font-size: clamp(2rem, 5vw, 3.5rem); cursor: grab;
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex; align-items: center; justify-content: center;
            width: 100%; height: 100%; filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.4));
        }
        .chess-piece:active { cursor: grabbing; transform: scale(1.15) translateY(-5px); }
        .piece-white { color: #ffffff; -webkit-text-stroke: 1px #333; }
        .piece-black { color: #1a1a1a; -webkit-text-stroke: 1px #555; }

        .eval-bar-container { width: 16px; height: 100%; background-color: #1a1a1a; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid var(--board-border); }
        .eval-bar-fill { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #ffffff; transition: height 0.5s ease; height: 50%; }

        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border-panel); border-radius: 4px; }
        .turn-banner {
            width: 100%;
            margin-bottom: 14px;
            padding: 16px 20px;
            border: 1px solid rgba(56, 189, 248, 0.35);
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.92));
            box-shadow: 0 8px 30px rgba(0,0,0,.20);
            text-align: center;
        }
        .turn-banner .turn-main { font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: .02em; }
        .turn-banner .turn-sub { margin-top: 4px; font-size: .82rem; color: #94a3b8; }
        .turn-banner.my-turn { border-color: rgba(34,197,94,.55); box-shadow: 0 0 28px rgba(34,197,94,.12); }
        .turn-banner.wait-turn { border-color: rgba(148,163,184,.35); }
        .turn-banner.first-turn { border-color: rgba(56,189,248,.65); }

        /* ===== Indicador lateral de quem joga (lado esquerdo do tabuleiro) ===== */
        .turn-side {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            width: 84px; /* Atualização 24: era 46px — bem mais larga e legível */
            flex-shrink: 0;
            padding: 16px 8px;
            border: 1px solid rgba(56,189,248,.35);
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(30,41,59,.92));
            box-shadow: 0 8px 24px rgba(0,0,0,.18);
            transition: border-color .3s ease, box-shadow .3s ease;
        }
        .turn-side-dot {
            width: 20px; height: 20px; border-radius: 50%;
            background: #f8fafc; border: 2px solid #94a3b8;
            flex-shrink: 0;
            transition: background .3s ease, border-color .3s ease;
        }
        .turn-side-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: .2em;
            color: #e2e8f0;
            white-space: nowrap;
        }
        .turn-side-sub {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            font-size: .8rem;
            letter-spacing: .08em;
            color: #94a3b8;
            white-space: nowrap;
            max-height: 220px;
            overflow: hidden;
        }
        .turn-side.my-turn { border-color: rgba(34,197,94,.6); box-shadow: 0 0 22px rgba(34,197,94,.14); }
        .turn-side.my-turn .turn-side-text { color: #4ade80; }
        .turn-side.wait-turn { border-color: rgba(148,163,184,.35); }
        .turn-side.wait-turn .turn-side-text { color: #94a3b8; }
        .turn-side.first-turn { border-color: rgba(56,189,248,.65); }
        .turn-side.first-turn .turn-side-text { color: #38bdf8; }
        .turn-side-dot.pretas { background: #1e293b; border-color: #475569; }

        /* Rodapé com o link para os Termos do Site: some durante a partida para não atrapalhar o tabuleiro */
        html.jogo-ativo #site-footer { display: none; }
        html.jogo-ativo #app-nav-bar { display: none; }

        /* ===== Botões de compartilhamento ===== */
        .share-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .share-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #64748b; margin-right: 2px; }
        .share-btn {
            width: 30px; height: 30px; border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: .85rem; color: #cbd5e1;
            background: rgba(15,23,42,.6); border: 1px solid rgba(148,163,184,.25);
            transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
        }
        .share-btn:hover { transform: translateY(-2px); color: #fff; }
        .share-wa:hover { background: #25D366; border-color: #25D366; }
        .share-fb:hover { background: #1877F2; border-color: #1877F2; }
        .share-x:hover  { background: #000; border-color: #444; }
        .share-dc:hover { background: #5865F2; border-color: #5865F2; }
        .share-ig:hover { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color: #DD2A7B; }

        /* ===== Menu de três pontos (compartilhar) ===== */
        .share-menu-wrap { position: relative; display: inline-block; }
        .share-dots-btn {
            width: 34px; height: 34px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: .95rem; color: #cbd5e1;
            background: rgba(15,23,42,.6); border: 1px solid rgba(148,163,184,.25);
            transition: background .2s ease, color .2s ease, border-color .2s ease;
            cursor: pointer;
        }
        .share-dots-btn:hover { background: rgba(56,189,248,.15); color: #38bdf8; border-color: rgba(56,189,248,.4); }
        .share-dropdown {
            position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
            display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 220px;
            background: rgba(15,23,42,.98); border: 1px solid rgba(148,163,184,.25);
            border-radius: 12px; padding: 8px 10px; box-shadow: 0 12px 28px rgba(0,0,0,.4);
        }
        .share-dropdown.hidden { display: none !important; }

        /* ===== Timers da partida ===== */
        .game-timer { display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .3s ease, box-shadow .3s ease, color .3s ease; }
        .game-timer.timer-active { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
        .game-timer.timer-urgent { color: #f87171 !important; border-color: #f87171 !important; animation: timerPulso 1s ease-in-out infinite; }
        @keyframes timerPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,.35); } 50% { box-shadow: 0 0 0 6px rgba(248,113,113,0); } }

        /* ===== Peças capturadas (lado esquerdo do tabuleiro) ===== */
        .captured-mini { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 3px; max-width: 64px; min-height: 18px; }
        .captured-mini i { font-size: .8rem; }
        .captured-mini.captured-w i { color: #f8fafc; text-shadow: 0 0 2px rgba(0,0,0,.6); }
        .captured-mini.captured-b i { color: #64748b; }

        /* Aviso flutuante (usado por copiar/compartilhar) */
        #toast {
            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
            background: #0f172a; color: #e2e8f0; border: 1px solid rgba(56,189,248,.5);
            padding: 12px 20px; border-radius: 12px; font-size: .85rem; z-index: 200;
            opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 90vw; text-align: center;
        }
        #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* Prévia de imagem na comunidade */
        .preview-img { max-height: 180px; border-radius: 12px; border: 1px solid rgba(148,163,184,.25); }
        .post-img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 12px; background: rgba(0,0,0,.25); margin-top: 8px; cursor: zoom-in; }

        /* ===== Botão de idioma (agora dentro da barra de menu, ao lado do logo) ===== */
        #lang-switcher { position: relative; z-index: 60; }
        #lang-switcher .lang-btn {
            display: flex; align-items: center; gap: 6px; background: var(--bg-panel);
            border: 1px solid var(--border-panel); color: var(--text-main);
            padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
            cursor: pointer; backdrop-filter: blur(6px);
        }
        #lang-switcher .lang-menu {
            position: absolute; top: calc(100% + 6px); left: 0; background: var(--bg-panel);
            border: 1px solid var(--border-panel); border-radius: 10px; overflow: hidden;
            min-width: 140px; box-shadow: 0 10px 25px rgba(0,0,0,.3); display: none;
        }
        #lang-switcher .lang-menu.open { display: block; }
        #lang-switcher .lang-menu button {
            width: 100%; text-align: left; padding: 10px 14px; font-size: 13px; color: var(--text-main);
            background: transparent; border: none; cursor: pointer;
        }
        #lang-switcher .lang-menu button:hover { background: rgba(56,189,248,0.15); color: #38bdf8; }

        /* ===== Navegação entre páginas ===== */
        #app-nav { display: flex; gap: 6px; }
        #app-nav.hidden { display: none !important; }
        #app-nav button {
            padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
            color: var(--text-muted); background: transparent; border: 1px solid transparent; transition: all .2s;
        }
        #app-nav button.active { color: #38bdf8; border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.1); }
        #app-nav button:hover:not(.active) { color: var(--text-main); }

        /* ===== Página de jogo fixa, sem barra de rolagem ===== */
        html.jogo-ativo, html.jogo-ativo body { overflow: hidden !important; height: 100%; }
        .board-main { width: min(92vw, 66dvh, 650px); height: min(92vw, 66dvh, 650px); flex-shrink: 0; }
        /* Atualização 24: a barra lateral de "vez" ficou ~38px mais larga — aumenta
           a área do jogo na mesma medida pra o tabuleiro não encolher. */
        @media (min-width: 640px) {
            .board-main { width: calc(min(92vw, 66dvh, 650px) + 38px); }
        }
        .board-aside { height: min(92vw, 66dvh, 650px); }
        @media (max-width: 1023px) {
            .board-aside { height: 220px; }
        }


/* ===== Fim dos estilos movidos do index.html ===== */

/* XadrezON — Redesign 3.0 */
:root{
  --xo-bg:#07111f;
  --xo-surface:rgba(15,27,45,.82);
  --xo-surface-2:rgba(19,35,57,.92);
  --xo-line:rgba(148,163,184,.14);
  --xo-text:#f8fafc;
  --xo-muted:#8fa2ba;
  --xo-accent:#38bdf8;
  --xo-accent-2:#0ea5e9;
  --xo-success:#22c55e;
  --xo-danger:#fb7185;
  --xo-radius:22px;
}

html,body{min-height:100%;}
body{
  background:
    radial-gradient(circle at 12% 8%,rgba(14,165,233,.13),transparent 30%),
    radial-gradient(circle at 90% 18%,rgba(59,130,246,.09),transparent 28%),
    linear-gradient(135deg,#050b14 0%,#07111f 48%,#0b1422 100%) !important;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}

/* Navegação */
#app-nav-bar{
  position:sticky;top:0;padding:12px 22px !important;
  background:rgba(5,12,22,.78) !important;border:0 !important;
  border-bottom:1px solid var(--xo-line) !important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#app-nav{width:min(1120px,100%);justify-content:center;gap:7px;}
#app-nav button{
  border:1px solid transparent !important;border-radius:13px !important;
  padding:10px 15px !important;color:#91a3b8 !important;
}
#app-nav button:hover:not(.active){background:rgba(148,163,184,.07);color:#e2e8f0 !important;}
#app-nav button.active{
  color:#7dd3fc !important;background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(14,165,233,.07)) !important;
  border-color:rgba(56,189,248,.25) !important;box-shadow:0 8px 25px rgba(14,165,233,.08);
}

/* Idioma */
#lang-switcher .lang-btn{background:rgba(8,18,31,.75);border-color:var(--xo-line);backdrop-filter:blur(14px);border-radius:12px;}
#lang-switcher .lang-menu{background:#0b1727;border-color:var(--xo-line);border-radius:14px;}

/* Landing */
#landing-screen{max-width:1120px !important;gap:42px !important;}
#landing-screen > div:first-child{
  position:relative;padding:48px 42px;border:1px solid var(--xo-line);border-radius:30px;overflow:hidden;
  background:linear-gradient(135deg,rgba(15,29,48,.92),rgba(7,17,30,.72));
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}
#landing-screen > div:first-child:after{
  content:"♞";position:absolute;right:5%;top:-45px;font-size:260px;line-height:1;color:rgba(56,189,248,.035);pointer-events:none;
}
#landing-screen .text-sky-400{color:#7dd3fc !important;}
#landing-screen .text-slate-300{color:#b8c5d6 !important;}
#landing-screen button[data-i18n="cta_comecar"]{
  position:relative;z-index:1;border-radius:14px !important;padding:14px 28px !important;
  background:linear-gradient(135deg,#0ea5e9,#2563eb) !important;
  box-shadow:0 12px 35px rgba(14,165,233,.22) !important;
}
#landing-screen button[data-i18n="cta_comecar"]:hover{transform:translateY(-2px);filter:brightness(1.08);}
#landing-screen img{transition:transform .5s ease,filter .5s ease;}
#landing-screen .relative.rounded-3xl:hover img{transform:scale(1.035);filter:saturate(1.1);}
#landing-screen .grid.sm\:grid-cols-3 > div{
  border:1px solid var(--xo-line) !important;border-radius:20px !important;
  background:linear-gradient(145deg,rgba(17,32,52,.9),rgba(10,21,36,.82)) !important;
  padding:25px !important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
#landing-screen .grid.sm\:grid-cols-3 > div:hover{transform:translateY(-5px);border-color:rgba(56,189,248,.24) !important;box-shadow:0 18px 40px rgba(0,0,0,.2);}

/* Autenticação */
#auth-screen,#menu-screen{background:linear-gradient(145deg,rgba(17,31,50,.96),rgba(8,19,32,.94)) !important;border:1px solid var(--xo-line) !important;border-radius:26px !important;box-shadow:0 30px 80px rgba(0,0,0,.32) !important;}
#auth-screen input,#menu-screen input,#amigos-screen input,#amigos-screen textarea{background:rgba(4,12,22,.75) !important;border-color:var(--xo-line) !important;border-radius:13px !important;}
#auth-screen input:focus,#amigos-screen input:focus,#amigos-screen textarea:focus{box-shadow:0 0 0 3px rgba(56,189,248,.08);}

/* Cards gerais */
#estatisticas-screen > div > div,
#comunidade-screen > div > div,
#amigos-screen > div > div{
  background:linear-gradient(145deg,rgba(15,29,48,.88),rgba(8,19,32,.88)) !important;
  border:1px solid var(--xo-line) !important;border-radius:20px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.16) !important;
}
#estatisticas-screen h1,#comunidade-screen h1,#amigos-screen h1{letter-spacing:-.035em;}

/* Tela de jogo */
#game-header{
  background:rgba(5,12,22,.84) !important;border:0 !important;border-bottom:1px solid var(--xo-line) !important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#game-header .text-sky-500{color:#7dd3fc !important;}
#game-ui{gap:28px !important;}
.board-main{filter:drop-shadow(0 25px 45px rgba(0,0,0,.26));}
.chessboard{border:8px solid #111d2d;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 25px 60px rgba(0,0,0,.4);}
.square.light{background:#e8edf2 !important;}
.square.dark{background:#4b6b82 !important;}
.square.selected{background:rgba(56,189,248,.68) !important;}
.square.highlight::after{background:rgba(14,165,233,.72);box-shadow:0 0 0 3px rgba(255,255,255,.12);}
.square.highlight.capture::after{border-color:rgba(14,165,233,.78);}
.chess-piece{font-size:clamp(2.15rem,5vw,3.75rem);}
.board-aside{
  width:370px !important;background:linear-gradient(145deg,rgba(15,29,48,.94),rgba(8,19,32,.94)) !important;
  border:1px solid var(--xo-line) !important;border-radius:22px !important;box-shadow:0 22px 55px rgba(0,0,0,.25) !important;
}
.eval-bar-container{width:13px;border-radius:8px;}

/* Relógios e banners */
#timer-white,#timer-black{
  min-width:105px;text-align:center;border-radius:12px !important;border:1px solid var(--xo-line) !important;
  background:rgba(8,17,29,.9) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#timer-white{color:#7dd3fc !important;}
.turn-banner{background:linear-gradient(135deg,rgba(11,27,45,.96),rgba(7,17,29,.92));border-radius:16px;}

/* Tabelas, feed e chat */
#jogadores-lista-tabela tr{border-color:rgba(148,163,184,.08) !important;}
#jogadores-lista-tabela tr:hover{background:rgba(56,189,248,.035);}
#chat-mensagens{background:rgba(2,9,17,.48) !important;border:1px solid var(--xo-line);}

/* Scroll */
.custom-scrollbar::-webkit-scrollbar{width:6px;}
.custom-scrollbar::-webkit-scrollbar-thumb{background:#33465d;border-radius:20px;}

/* Microinterações */
button{transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;}
button:active{transform:scale(.98);}

/* Tema claro */
body.theme-light{
  background:radial-gradient(circle at 15% 10%,rgba(14,165,233,.12),transparent 28%),linear-gradient(135deg,#eef5fa,#f8fafc 55%,#edf4f8) !important;
}
body.theme-light #app-nav-bar,body.theme-light #game-header{background:rgba(255,255,255,.82) !important;}
body.theme-light #landing-screen > div:first-child,
body.theme-light #auth-screen,body.theme-light #menu-screen,
body.theme-light #estatisticas-screen > div > div,
body.theme-light #comunidade-screen > div > div,
body.theme-light #amigos-screen > div > div,
body.theme-light .board-aside{background:rgba(255,255,255,.88) !important;border-color:#dce5ed !important;}
body.theme-light #landing-screen .text-slate-300{color:#475569 !important;}
body.theme-light #landing-screen .grid.sm\:grid-cols-3 > div{background:#fff !important;border-color:#e2e8f0 !important;}
body.theme-light #landing-screen .grid.sm\:grid-cols-3 h3{color:#0f172a !important;}
body.theme-light #landing-screen .grid.sm\:grid-cols-3 p{color:#64748b !important;}
body.theme-light #auth-screen input,body.theme-light #amigos-screen input,body.theme-light #amigos-screen textarea{background:#f8fafc !important;color:#0f172a !important;border-color:#dbe4ec !important;}
body.theme-light #timer-white,body.theme-light #timer-black{background:#fff !important;}

/* Mobile */
@media(max-width:900px){
  #app-nav-bar{overflow-x:auto;justify-content:flex-start;}
  #app-nav{justify-content:flex-start;min-width:max-content;}
  #landing-screen{padding:10px !important;gap:24px !important;}
  #landing-screen > div:first-child{padding:30px 22px;border-radius:24px;}
  #landing-screen > div:first-child:after{font-size:150px;top:10px;right:-20px;}
  #game-ui{padding:10px !important;gap:15px !important;}
  .board-aside{width:100% !important;max-width:650px;}
}
@media(max-width:560px){
  #app-nav button{padding:9px 11px !important;font-size:12px !important;}
  #landing-screen .text-2xl{font-size:1.45rem;}
  #landing-screen p{font-size:1rem !important;}
  .chessboard{border-width:5px;border-radius:10px;}
  #timer-white,#timer-black{min-width:82px;font-size:1rem;}
}