/* ============================================
   TRUCO PAULISTA - Estilos Modernos (Figma)
   ============================================ */

:root {
    --bg0: #0b1220;
    --bg1: #111a2b;
    --panel: rgba(255,255,255,.06);
    --panel2: rgba(0,0,0,.35);
    --stroke: rgba(255,255,255,.14);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --green: #0f8b5a;
    --green2: #0c6f49;
    --red: #e53935;
    --blue: #4aa3ff;
    --yellow: #ffcc33;
    --radius: 18px;
    --shadow: 0 20px 50px rgba(0,0,0,.45);
    --cardW: 74px;
    --cardH: 104px;
    --cardR: 14px;
    --safeTop: env(safe-area-inset-top, 0px);
    --safeBot: env(safe-area-inset-bottom, 0px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(1100px 700px at 50% 0%, #1a2a4b 0%, rgba(26,42,75,0) 55%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
    overflow-x: hidden;
    overflow-y: auto;
}

/* ====== OVERLAY INICIAR JOGO ====== */
.start-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 18, 32, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    border-radius: 26px;
}

.start-overlay.hidden {
    display: none;
}

.start-content {
    text-align: center;
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.start-title {
    font-size: 3em;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
}

.start-subtitle {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
}

.start-btn {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    color: #fff;
    font-size: 1.5em;
    font-weight: 700;
    padding: 18px 50px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 40px rgba(78, 205, 196, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.start-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 50px rgba(78, 205, 196, 0.5);
}

.start-btn:active {
    transform: scale(0.98);
}

/* ====== APP FRAME (mobile-first) ====== */
.app {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    justify-content: center;
    padding: calc(10px + var(--safeTop)) 10px calc(10px + var(--safeBot));
}

.screen {
    width: min(520px, 100%);
    min-height: 100%;
    border-radius: 26px;
    position: relative;
    overflow: visible;
    background:
        radial-gradient(900px 600px at 50% -10%, rgba(90,140,255,.18) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.10);
}

.game-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ====== TOPBAR ====== */
.topbar {
    height: 80px;
    padding: 10px 14px 6px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.top-left {
    display: flex;
    gap: 10px;
    min-width: 120px;
    justify-content: flex-end;
}

.btn-icon {
    width: 40px;
    height: 40px;
    background-image: url('./assets/button-back.webp');
    background-size: 100%;
}

.btn-icon:active {
    transform: scale(.97);
}

.mode-pill {
    display: flex;
    align-items: center;
    width: 128px;
    height: 68px;
    gap: 8px;
    padding: 8px 10px;
    background-image: url('assets/partida-paulista.webp');
}

.top-right {
    display: flex;
    gap: 10px;
    min-width: 120px;
    justify-content: flex-end;
}

.badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.badge .big {
    font-weight: 900;
    font-size: 18px;
    color: var(--text);
    line-height: 1;
}

 .badge.tentos {
      background-image: url('./assets/tentos.webp');
      height: 50px;
      background-size: 100% 100%;
      height: 70px;
      width: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #1f2b35;
    }

    .badge.tentos .number {
        font-size: 30px;
        font-weight: bold;  
        margin-top: 18px;
    }

    .badge.rodada {
      background-image: url('./assets/rodada.webp');
      background-size: 100% 100%;
      height: 96px;
      width: 78px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #1f2b35;
    }

    .badge.rodada .number {
        font-size: 30px;
        font-weight: bold;  
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .badge.rodada .rounds {
        display: flex;
        gap: 6px;
        justify-content: center;
    }
    .badge.rodada .rounds .round {
        width: 16px;
        height: 16px;
        border-radius: 50%; 
        background: #1f2b35;
        margin-top: 2px;
        transition: background-color 0.3s ease;
    }
    
    .badge.rodada .rounds .round.player {
        background: var(--green);
        box-shadow: 0 0 8px rgba(15, 139, 90, 0.6);
    }
    
    .badge.rodada .rounds .round.bot {
        background: var(--red);
        box-shadow: 0 0 8px rgba(229, 57, 53, 0.6);
    }
    
    .badge.rodada .rounds .round.tie {
        background: var(--yellow);
        box-shadow: 0 0 8px rgba(255, 204, 51, 0.6);
    }

/* ====== CENTER LAYOUT ====== */
.center {
    flex: 1;
    display: grid;
    grid-template-rows: 140px 1fr 180px;
    padding: 0 14px 10px;
    gap: 6px;
    overflow: hidden;
    min-height: 0;
}

/* ====== ENEMY AREA ====== */
.enemy-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
}

.enemy-score {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('assets/ponto-red.webp');
    background-size: cover;
    background-position: center;
    height: 62px;
    width: 62px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.enemy-score .points {
    font-size: 25px;
    font-weight: 900;
    color: #fff;
}

.enemy-avatar {
    margin-top: 6px;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
    font-size: 34px;
}

.enemy-name {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ====== TIMER DO BOT EM VOLTA DO AVATAR ====== */
.bot-avatar-timer-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
}

.bot-avatar-timer-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bot-avatar-timer-ring.active {
    opacity: 1;
}

.bot-avatar-timer-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 6;
}

.bot-avatar-timer-progress {
    fill: none;
    stroke: #4ecdc4;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

.bot-avatar-timer-progress.warning {
    stroke: #ffaa00;
}

.bot-avatar-timer-progress.danger {
    stroke: #ff4444;
    animation: timerPulse 0.5s ease-in-out infinite;
}

.bot-avatar-timer-text {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border: 2px solid #4ecdc4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.bot-avatar-timer-wrapper.timing .bot-avatar-timer-text {
    opacity: 1;
}

.bot-avatar-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* ====== BALÃOZINHO DE FALA (QUADRINHOS) ====== */
.speech-bubble {
    position: absolute;
    left: 110px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #1a1a2e;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 18px;
    font-style: italic;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: none;
    white-space: nowrap;
    z-index: 50;
    animation: bubblePop 0.3s ease-out;
}

.speech-bubble.show {
    display: block;
}

/* Rabinho do balão apontando para o avatar */
.speech-bubble::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #fff;
}

@keyframes bubblePop {
    0% { 
        opacity: 0; 
        transform: translateY(-50%) scale(0.5); 
    }
    50% { 
        transform: translateY(-50%) scale(1.1); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(-50%) scale(1); 
    }
}

/* Animação de pulso para chamar atenção */
.speech-bubble.pulse {
    animation: bubblePulse 1s ease-in-out infinite;
}

@keyframes bubblePulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.05); }
}

.enemy-hand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    margin-top: -36px;
    scale: 0.70;
    z-index: 1;
}

.enemy-hand .card-ui:nth-child(1) {
    transform: translateY(0px) rotate(40deg);
    margin-right: -25px;
}
.enemy-hand .card-ui:nth-child(2) {
    transform: translateY(0px) rotate(0deg);
    z-index: 1;
}
.enemy-hand .card-ui:nth-child(3) {
    margin-left: -25px;
    transform: translateY(0px) rotate(-40deg);
}

/* Legado */
.bot-area {
    display: none;
}

/* ====== BOARD / TABLE ====== */
.board {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-wrap {
    width: 100%;
    max-width: 349px;
    height: 298px;
    border-radius: 26px;
    background-image: url('assets/mesa.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.table-wrap::after {
    content: "Truco-Online";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 40px;
    opacity: .09;
    transform: rotate(-12deg);
    letter-spacing: .04em;
}

/* Slots da mesa */
.slot {
    position: absolute;
    width: var(--cardW);
    height: var(--cardH);
    border-radius: var(--cardR);
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
}

.slot.bot {
    left: 48%;
    top: 34%;
    transform: translate(-50%,-50%) rotate(8deg);
}

.slot.player {
    left: 34%;
    top: 54%;
    transform: translate(-50%,-50%) rotate(-7deg);
}

/* Vira (lado direito) */
.vira {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    height: 100px;
    z-index: 3;
}

/* Deck de cartas atrás da vira */
.deck-stack {
    position: absolute;
    top: 10px;
    left: -50px;
    width: 60px;
    height: 84px;
    z-index: 10;
}

.deck-card {
    position: absolute !important;
    width: 60px !important;
    height: 84px !important;
    border-radius: 6px !important;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4) !important;
}

.deck-1 {
    top: 8px;
    left: -2px;
    transform: rotate(-1.5deg);
}

.deck-2 {
    top: 6px;
    left: 1px;
    transform: rotate(1deg);
}

.deck-3 {
    top: 4px;
    left: -1px;
    transform: rotate(-0.5deg);
}

.deck-4 {
    top: 2px;
    left: 1px;
    transform: rotate(0.5deg);
}

.deck-5 {
    top: 0px;
    left: 0px;
    transform: rotate(0deg);
}

/* Carta virada EMBAIXO do deck - horizontal como no truco real */
.vira-on-deck {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: -5px;
}

.vira-on-deck .card-ui {
    transform: rotate(90deg) !important;
    transform-origin: center center;
}

.vira .vira-label {
    font-size: 11px;
    font-weight: 900;
    color: var(--yellow);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(255,204,51,.35);
}

/* Legado */
.table-area, .vira-area {
    display: none;
}

/* ====== PLAYER AREA ====== */
.player-area {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
}

.player-score {
    position: absolute;
    right: 0;
    top: 0;
    background-image: url('assets/ponto-blue.webp');
    background-size: cover;
    background-position: center;
    height: 62px;
    width: 62px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.player-score .points {
    font-size: 25px;
    font-weight: 900;
    color: #fff;
}

.hand-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 120px;
    position: relative;
}

/* Mão em leque */
.hand {
    position: relative;
    width: 280px;
    height: 120px;
}

.hand .card-ui {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: 50% 120%;
    cursor: pointer;
    touch-action: manipulation;
}



.hand .card-ui:nth-child(1) { transform: translateX(-120%) rotate(-10deg); }
.hand .card-ui:nth-child(2) { transform: translateX(-50%) rotate(0deg); }
.hand .card-ui:nth-child(3) { transform: translateX(20%) rotate(10deg); }

/* ====== ACTIONS ====== */
.actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* ====== ACTION PANEL ====== */
.action-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('./assets/painel.webp') no-repeat center center;
    background-size: 100% 100%;
    padding: 6px 12px;
    min-height: 80px;
    margin-top: 5px;
}

.action-panel .btn {
    flex: 0 0 auto;
    height: 38px;
    font-size: 10px;
    padding: 0 6px;
    margin-top: -19px;
}

/* Botão CORRER - largura fixa */
.action-panel .btn-run {
    width: 80px;
}

/* Centro do painel (avatar com timer) */
.panel-center {
    flex: 0 0 120px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* Wrapper do avatar com timer */
.avatar-timer-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    margin-top: -45px;
}

.avatar-timer-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.avatar-timer-ring.active {
    opacity: 1;
}

.avatar-timer-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 6;
}

.avatar-timer-progress {
    fill: none;
    stroke: #4ecdc4;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

.avatar-timer-progress.warning {
    stroke: #ffaa00;
}

.avatar-timer-progress.danger {
    stroke: #ff4444;
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { stroke-width: 6; }
    50% { stroke-width: 8; }
}

.avatar-timer-text {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.avatar-timer-wrapper.timing .avatar-timer-text {
    opacity: 1;
}

.panel-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Botões da direita */
.panel-right-btns {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    width: 80px;
}

/* Stack para empilhar AUMENTAR em cima de ACEITO */
.btn-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

/* Botão AUMENTAR (foguinho) - em cima */
.btn-stack .btn-raise {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    z-index: 20;
    margin-top: 0;
}

/* Botão ACEITO - embaixo */
.btn-stack .btn-accept {
    width: 80px;
}

/* Botão TRUCO normal */
.panel-right-btns .btn.danger {
    width: 80px;
}

/* Balãozinho do jogador (acima do avatar) */
.player-bubble {
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #1a1a2e;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 18px;
    font-style: italic;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: none;
    white-space: nowrap;
    z-index: 100;
}

.player-bubble.show {
    display: block;
    animation: bubblePopUp 0.3s ease-out;
}

/* Rabinho do balão apontando para baixo (avatar) */
.player-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #fff;
}

@keyframes bubblePopUp {
    0% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.5) translateY(10px); 
    }
    50% { 
        transform: translateX(-50%) scale(1.1) translateY(-5px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(-50%) scale(1) translateY(0); 
    }
}

/* Botão desabilitado */
.btn:disabled,
.btn-run:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

.btn-hide,
.action-panel .btn-hide {
    background: linear-gradient(90deg, #9A7B0A 0%, #D4AC0D 47.12%, #9A7B0A 100%) !important;
    color: #1a1a2e !important;
    font-weight: 900;
    border-radius: 10px;
    border: none !important;
    letter-spacing: 0.03em;
    box-shadow: 0 3px 10px rgba(212, 172, 13, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-hide:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(212, 172, 13, 0.5);
}

.btn-hide:active {
    transform: scale(0.98);
}

/* Botão CORRER (vermelho vinho) */
.btn-run,
.action-panel .btn-run {
    background: linear-gradient(90deg, #6B2D3A 0%, #8B3A4A 47.12%, #6B2D3A 100%) !important;
    color: #fff !important;
    font-weight: 900;
    border-radius: 10px;
    border: none !important;
    letter-spacing: 0.03em;
    box-shadow: 0 3px 10px rgba(107, 45, 58, 0.5);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-run:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(139, 58, 74, 0.6);
}

.btn-run:active {
    transform: scale(0.98);
}

/* Botão ACEITO (verde) */
.btn-accept,
.action-panel .btn-accept {
    background: linear-gradient(90deg, #2C6935 0%, #3D8B47 47.12%, #2C6935 100%) !important;
    color: #fff !important;
    font-weight: 900;
    border-radius: 10px;
    border: none !important;
    letter-spacing: 0.03em;
    box-shadow: 0 3px 10px rgba(44, 105, 53, 0.5);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-accept:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(61, 139, 71, 0.6);
}

.btn-accept:active {
    transform: scale(0.98);
}

/* Botão AUMENTAR (laranja/amarelo) */
.btn-raise,
.action-panel .btn-raise {
    background: linear-gradient(90deg, #B8860B 0%, #DAA520 47.12%, #B8860B 100%) !important;
    color: #fff !important;
    font-weight: 900;
    font-style: italic;
    font-size: 20px !important;
    border-radius: 10px;
    border: none !important;
    letter-spacing: 0;
    box-shadow: 0 3px 10px rgba(218, 165, 32, 0.5);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    z-index: 10;
    overflow: visible;
    text-shadow: 
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 -2px 0 #000,
        0 2px 0 #000,
        -2px 0 0 #000,
        2px 0 0 #000,
        0 0 5px #000;
}

.btn-raise:hover {
    box-shadow: 0 5px 15px rgba(218, 165, 32, 0.6);
}

.btn-raise:active {
    transform: scale(0.98);
}

/* Botão TRUCO no action-panel */
.action-panel .btn.danger {
    background: linear-gradient(90deg, #2C6935 0%, #558E5E 47.12%, #2C6935 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.03em;
    box-shadow: 0 3px 10px rgba(44, 105, 53, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.action-panel .btn.danger:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(44, 105, 53, 0.5);
}

.action-panel .btn.danger:active {
    transform: scale(0.98);
}

.btn {
    flex: 1;
    height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: var(--text);
    font-weight: 900;
    letter-spacing: .04em;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, background .12s ease, opacity .12s ease;
    font-size: 14px;
}

.btn:active {
    transform: scale(.98);
}

.btn.primary, .btn-play {
    background: linear-gradient(135deg, rgba(0,200,140,.35), rgba(0,120,90,.25));
    border-color: rgba(0,220,160,.30);
}

.btn.danger, .btn-truco {
    background: linear-gradient(135deg, rgba(255,50,50,.35), rgba(140,0,0,.25));
    border-color: rgba(255,80,80,.30);
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.btn-accept {
    background: linear-gradient(90deg, #2C6935 0%, #558E5E 47.12%, #2C6935 100%);
    border: 2px solid #9FD0A3;
    box-shadow: inset 0 0 0 1px #D4E8D8, 0 4px 12px rgba(76, 175, 80, 0.35);
}

.btn-accept:active {
    box-shadow: inset 0 0 0 1px #D4E8D8, 0 2px 6px rgba(76, 175, 80, 0.25);
}

.btn-raise {
    position: relative;
    background: linear-gradient(90deg, #3B425F 0%, #7A89C5 47.12%, #3B425F 100%);
    border: 2px solid #5A94C8;
    box-shadow: inset 0 0 0 1px #8FC0E8, 0 4px 12px rgba(41, 128, 185, 0.35);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .04em;
    display: grid;
    place-items: center;
    overflow: visible;
}

.btn-raise::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-image: url('./assets/btn-icon-3.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: -1;
    filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.6));
    opacity: 0.7;
}

.btn-raise:active {
    box-shadow: inset 0 0 0 1px #F0A8BB, 0 2px 6px rgba(229, 57, 53, 0.25);
}

.btn-run {
    background: linear-gradient(90deg, #752435 0%, #A5475C 47.12%, #752435 100%);
    border: 2px solid #E07575;
    box-shadow: inset 0 0 0 1px #F0A8BB, 0 4px 12px rgba(229, 57, 53, 0.35);
}

.btn-run:active {
    box-shadow: inset 0 0 0 1px #F0A8BB, 0 2px 6px rgba(229, 57, 53, 0.25);
}

.btn-new {
    background: linear-gradient(135deg, rgba(255,200,50,.35), rgba(200,150,0,.25));
    border-color: rgba(255,200,50,.30);
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ====== CARD UI ====== */
.card-ui {
    width: var(--cardW);
    height: var(--cardH);
    border-radius: var(--cardR);
    background: #f7f7f7;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 16px 30px rgba(0,0,0,.30);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 10px;
    position: relative;
    color: #111;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.card-ui .v {
    font-weight: 1000;
    font-size: 22px;
    line-height: 1;
}

.card-ui .s {
    font-weight: 900;
    font-size: 30px;
    opacity: .9;
    margin-top: 0px;
    margin-left: -4px;
}

.card-ui.red { color: #c62828; }
.card-ui.black { color: #111; }

.card-ui.back {
    background-image: url('assets/background-card.webp');
    background-size: 16px;
    background-color: #1c4da9;
    border: solid 4px #fff;
    box-shadow: 0 0 0 4px #1c4da9, 0 16px 30px rgba(0,0,0,.30);
    padding: 0;
    display: grid;
    place-items: center;
}

.card-ui:hover:not(.back):not(.in-slot) {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px rgba(0,0,0,.38);
}

.card-ui.manilha {
    border: 2px solid var(--yellow);
    box-shadow: 0 0 15px rgba(255,204,51,.4), 0 16px 30px rgba(0,0,0,.30);
}

/* Cartas jogadas nos slots */
.slot .card-ui {
    width: 68px;
    height: 96px;
    border-radius: 14px;
    box-shadow: 0 12px 22px rgba(0,0,0,.33);
    cursor: default;
}

.slot .card-ui.in-slot {
    transform: none !important;
}

/* Animação de jogar carta */
@keyframes throwToTable {
    0% { transform: translate(var(--fromX), var(--fromY)) rotate(var(--fromR)) scale(1.0); opacity: 1; }
    100% { transform: translate(0px, 0px) rotate(var(--toR)) scale(1.0); opacity: 1; }
}

.throwing {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    animation: throwToTable .38s cubic-bezier(.2,.9,.2,1) forwards;
    pointer-events: none;
}

/* ====== VAZAS / ROUNDS ====== */
.rounds-display {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.round-indicator {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    font-size: 11px;
    color: var(--muted);
    border: 1px solid rgba(255,255,255,.10);
}

.round-indicator.won-player {
    background: rgba(74,163,255,.25);
    border-color: rgba(74,163,255,.40);
    color: var(--blue);
}

.round-indicator.won-bot {
    background: rgba(229,57,53,.25);
    border-color: rgba(229,57,53,.40);
    color: var(--red);
}

.round-indicator.tie {
    background: rgba(255,204,51,.25);
    border-color: rgba(255,204,51,.40);
    color: var(--yellow);
}

/* ====== STATUS ====== */
.status {
    display: none;
}

/* ====== LOG ====== */
.game-log {
    display: none;
}

/* Legado: esconde placar antigo e controles antigos */
.scoreboard {
    display: none;
}

.play-area {
    display: none;
}

/* ====== TRUCO DIALOG ====== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.55);
    z-index: 150;
    display: none;
}

.overlay.show {
    display: block;
}

/* Toast Message */
.toast-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    padding: 20px 40px;
    border-radius: 16px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    border: 3px solid #e94560;
    box-shadow: 0 10px 40px rgba(233, 69, 96, 0.4);
    min-width: 250px;
}

.toast-message.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.toast-message.accept {
    border-color: #4CAF50;
    box-shadow: 0 10px 40px rgba(76, 175, 80, 0.4);
}

.toast-message.run {
    border-color: #ff9800;
    box-shadow: 0 10px 40px rgba(255, 152, 0, 0.4);
}

.toast-message.raise {
    border-color: #e94560;
    box-shadow: 0 10px 40px rgba(233, 69, 96, 0.4);
}

.truco-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url(assets/popup-red.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 0;
    max-width: 364px;
    z-index: 200;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    width: 100%;
    height: 446px;
    display: none;
}

.truco-dialog.show {
    display: block;
}

.truco-header {
    text-align: center;
    padding-top: 10px;
}

.truco-dialog h2 {
    margin: 0;
    color: #fff;
    letter-spacing: .06em;
    font-size: 2.5em;
    font-weight: 900;
    margin-bottom: 18px;
}

.truco-dialog p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.8);
    font-size: 0.9em;
    font-style: italic;
}

.truco-content {
    padding: 24px;
    padding-top: 0px;
}

.truco-info {
        font-weight: 900;
    font-size: 30px;
    opacity: .9;
    margin-top: 0px;
    margin-left: -4px;
}

.truco-row {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.info-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 100px;
    max-width: 160px;
}

.info-row {
        display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    margin-top: 15px;
}

.info-row label,
.info-col label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.truco-cards-display {
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    position: relative;
}

.truco-cards-display .card-ui {
    width: 50px;
    height: 75px;
    border-radius: 10px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Leque de cartas - rotação suave */
.truco-cards-display .card-ui:nth-child(1) {
    transform: rotate(-12deg);
    margin-right: -8px;
    z-index: 1;
}

.truco-cards-display .card-ui:nth-child(2) {
    transform: rotate(0deg);
    z-index: 2;
}

.truco-cards-display .card-ui:nth-child(3) {
    transform: rotate(12deg);
    margin-left: -8px;
    z-index: 1;
}

/* Carta virada (não gira) */
#trucoViraCard .card-ui {
    transform: rotate(0deg) !important;
    margin: 0 !important;
}

.truco-dialog .controls {
    display: flex;
    gap: 8px;
    margin-top: 0;
    padding: 0 24px 24px;
    flex-wrap: wrap;
}

.truco-dialog .btn {
    min-width: 80px;
    padding: 14px 6px;
    font-size: 13px;
    border-radius: 12px;
    height: 54px;
    display: grid;
    grid-template-columns: auto 1fr;
    place-items: center;
    gap: 4px;
}

/* ====== POPUP JOGADOR PEDIU TRUCO ====== */
.player-truco-dialog {
    background-image: url(assets/popup-silver.webp) !important;
}

.player-truco-dialog .popup-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    color: #333;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s;
}

.player-truco-dialog .popup-close-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.player-truco-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
    font-size: 1.8em !important;
    line-height: 1.1;
    margin-top: 15px !important;
}

.player-truco-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 24px !important;
}

.vira-stack {
    position: relative;
    width: 180px;
    height: 150px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-back-diagonal {
    position: absolute;
    width: 90px !important;
    height: 126px !important;
    transform: rotate(-15deg);
    left: 10px;
    top: 10px;
    z-index: 1;
}

.vira-card-front {
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 2;
}

.vira-card-front .card-ui {
    width: 90px !important;
    height: 126px !important;
    font-size: 1.1em !important;
    min-width: 90px !important;
}

.player-hand-section {
    text-align: center;
    width: 100%;
}

.player-hand-section label {
    color: #fff;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.player-truco-controls {
    justify-content: center !important;
}

.player-truco-controls .btn-run {
    min-width: 140px;
}

/* ====== MÃO DE ONZE DIALOG ====== */
.mao-de-onze-dialog {
    background: url('./assets/popup-red.webp') no-repeat center center !important;
    background-size: 100% 100% !important;
    z-index: 250 !important;
}

.mao-de-onze-dialog .controls {
    position: relative;
    z-index: 260;
}

.mao-de-onze-dialog .btn {
    cursor: pointer;
    pointer-events: auto;
}

.mao-onze-title {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-size: 1.6em !important;
    line-height: 1.2;
    margin-top: 10px !important;
}

.mao-onze-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 24px !important;
}

.mao-onze-vira {
    margin-bottom: 15px;
}

.mao-onze-hand-section {
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
}

.mao-onze-hand-section label {
    color: #fff;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mao-onze-controls {
    justify-content: center !important;
    gap: 15px !important;
    position: relative !important;
    z-index: 300 !important;
}

.mao-onze-controls .btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 310 !important;
}

/* ====== MÃO DE ONZE ESPERA DIALOG ====== */
.mao-de-onze-espera-dialog {
    background: url('./assets/popup-silver.webp') no-repeat center center !important;
    background-size: 100% 100% !important;
}

/* Cartas da vira menores neste popup específico */
.mao-de-onze-espera-dialog .vira-stack {
    transform: scale(0.7);
    margin-bottom: -10px;
}

.mao-de-onze-espera-dialog .vira-stack .card-ui {
    width: 50px !important;
    height: 75px !important;
}

.mao-onze-aguarde {
    color: #1a1a2e;
    font-size: 13px;
    text-align: center;
    padding: 15px;
    margin-top: 15px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    line-height: 1.4;
    font-weight: 500;
}

/* ====== POPUP VITÓRIA/DERROTA ====== */
.game-result-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.game-result-overlay.show {
    display: flex;
}

.game-result-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.game-result-image {
    max-width: 300px;
    width: 80%;
    height: auto;
    animation: resultBounce 0.5s ease-out;
}

@keyframes resultBounce {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.game-result-btn {
    background: linear-gradient(180deg, #56935F 0%, #275D30 49.53%, #56935F 100%);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 900;
    padding: 16px 50px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 15px rgba(44, 105, 53, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-result-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(44, 105, 53, 0.7);
}

.game-result-btn:active {
    transform: scale(0.98);
}

/* ====== MÃO DE FERRO DIALOG ====== */
.mao-de-ferro-dialog {
    background: url('./assets/popup-red.webp') no-repeat center center !important;
    background-size: 100% 100% !important;
    z-index: 250 !important;
}

.mao-de-ferro-dialog .controls {
    position: relative;
    z-index: 260;
}

.mao-de-ferro-dialog .btn {
    cursor: pointer;
    pointer-events: auto;
}

.mao-ferro-title {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-size: 1.8em !important;
    line-height: 1.2;
    margin-top: 10px !important;
}

.mao-ferro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px !important;
    text-align: center;
}

.mao-ferro-desc {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mao-ferro-value {
    background: linear-gradient(90deg, #2C6935 0%, #558E5E 47.12%, #2C6935 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    padding: 12px 30px;
    border-radius: 10px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 15px rgba(44, 105, 53, 0.4);
}

/* ====== TELA INICIAL ====== */
.welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(1100px 700px at 50% 0%, #1a2a4b 0%, rgba(26,42,75,0) 55%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.welcome-screen.hidden {
    display: none;
}

.welcome-title {
    font-size: 3em;
    font-weight: 900;
    color: var(--yellow);
    text-shadow: 0 0 30px rgba(255, 204, 51, 0.5);
    margin-bottom: 15px;
    letter-spacing: .02em;
}

.welcome-subtitle {
    font-size: 1.2em;
    opacity: 0.7;
    margin-bottom: 40px;
    color: var(--muted);
}

.welcome-cards {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.welcome-cards .card {
    width: 70px;
    height: 100px;
    background: #f7f7f7;
    border-radius: var(--cardR);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    font-weight: bold;
    border: 2px solid rgba(0,0,0,.15);
    box-shadow: 0 16px 30px rgba(0,0,0,.30);
    animation: floatCard 3s ease-in-out infinite;
    cursor: default;
}

.welcome-cards .card.hearts,
.welcome-cards .card.diamonds { color: #c62828; }
.welcome-cards .card.clubs,
.welcome-cards .card.spades { color: #111; }

.welcome-cards .card.manilha {
    border: 2px solid var(--yellow);
    box-shadow: 0 0 20px rgba(255,204,51,.4), 0 16px 30px rgba(0,0,0,.30);
}

.welcome-cards .card:nth-child(2) { animation-delay: 0.5s; }
.welcome-cards .card:nth-child(3) { animation-delay: 1s; }

@keyframes floatCard {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

.btn-start {
    background: linear-gradient(135deg, var(--yellow) 0%, #ffaa00 100%);
    color: #1a472a;
    padding: 18px 50px;
    font-size: 1.3em;
    font-weight: bold;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 8px 25px rgba(255, 204, 51, 0.35);
}

.btn-start:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(255, 204, 51, 0.5);
}

/* ====== TELA DE CONFIGURAÇÃO ====== */
.config-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(1100px 700px at 50% 0%, #1a2a4b 0%, rgba(26,42,75,0) 55%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 200;
    overflow-y: auto;
    padding: 20px;
}

.config-screen.hidden {
    display: none;
}

.config-title {
    font-size: 2.2em;
    font-weight: 900;
    color: var(--yellow);
    text-shadow: 0 0 20px rgba(255, 204, 51, 0.4);
    margin-bottom: 20px;
    margin-top: 20px;
}

.config-container {
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    padding: 25px;
    max-width: 450px;
    width: 100%;
}

.config-section {
    margin-bottom: 22px;
}

.config-section-title {
    font-size: 1.1em;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--yellow);
}

.config-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.config-btn {
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.08);
    color: var(--text);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95em;
}

.config-btn:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.35);
}

.config-btn.selected {
    background: linear-gradient(135deg, rgba(0,200,140,.35), rgba(0,120,90,.25));
    border-color: rgba(0,220,160,.50);
}

.config-description {
    font-size: 0.85em;
    opacity: 0.65;
    margin-top: 10px;
    line-height: 1.4;
}

.config-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.config-checkbox:hover {
    background: rgba(255,255,255,.10);
}

.config-checkbox input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--green);
}

.config-checkbox label {
    cursor: pointer;
    flex: 1;
    font-size: 0.9em;
    line-height: 1.4;
}

.config-randomize {
    margin-top: 15px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(155,89,182,.35), rgba(100,50,130,.25));
    border: 1px solid rgba(155,89,182,.40);
    border-radius: 14px;
    color: var(--text);
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.config-randomize:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(155, 89, 182, 0.3);
}

.config-preview {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    font-size: 0.9em;
}

.config-preview-title {
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--yellow);
}

.btn-play-config {
    margin-top: 20px;
    background: linear-gradient(135deg, var(--yellow) 0%, #ffaa00 100%);
    color: #1a472a;
    padding: 16px;
    font-size: 1.2em;
    font-weight: bold;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(255, 204, 51, 0.3);
    width: 100%;
}

.btn-play-config:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 204, 51, 0.45);
}

/* ====== INDICADORES ====== */
.bot-profile-indicator {
    display: none;
}

.peek-indicator {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(229,57,53,.9);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75em;
    white-space: nowrap;
    animation: peekBlink 1s ease-in-out;
}

@keyframes peekBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ====== TIMER DO TRUCO (barra amarela no popup) ====== */
.truco-timer-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.truco-timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ffcc33, #ff9900);
    box-shadow: 0 0 10px rgba(255, 204, 51, 0.6);
    /* Transição controlada via JavaScript */
}

/* ====== TIMER DO TURNO (escondido - usando circular agora) ====== */
.turn-timer-container {
    display: none !important;
}

/* ====== TIMERS CIRCULARES ====== */
.circular-timer {
    position: fixed;
    width: 50px;
    height: 50px;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}

.circular-timer.show {
    display: flex;
    animation: timerFadeIn 0.3s ease-out;
}

@keyframes timerFadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Posição do timer do jogador - canto inferior esquerdo fixo */
.player-timer {
    position: fixed;
    bottom: 180px;
    left: 20px;
    transform: none;
}

/* Posição do timer do bot - canto superior direito fixo */
.bot-timer {
    position: fixed;
    top: 120px;
    right: 20px;
    transform: none;
}

.timer-svg {
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}

.timer-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 3;
}

.timer-progress {
    fill: none;
    stroke: #4ade80;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.1s linear, stroke 0.3s ease;
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.5));
}

.timer-progress.warning {
    stroke: #ffcc33;
    filter: drop-shadow(0 0 4px rgba(255, 204, 51, 0.6));
}

.timer-progress.danger {
    stroke: #ef4444;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.7));
    animation: timerGlow 0.5s ease-in-out infinite;
}

/* Timer do bot tem cor diferente (azul) */
.timer-progress.bot-progress {
    stroke: #60a5fa;
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.5));
}

.timer-progress.bot-progress.warning {
    stroke: #fbbf24;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

.timer-progress.bot-progress.danger {
    stroke: #f87171;
    filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.7));
    animation: timerGlow 0.5s ease-in-out infinite;
}

@keyframes timerGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.7)); }
    50% { filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.9)); }
}

.timer-text {
    position: absolute;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .circular-timer {
        width: 40px;
        height: 40px;
    }
    
    .timer-svg {
        width: 40px;
        height: 40px;
    }
    
    .timer-text {
        font-size: 12px;
    }
    
    .player-timer {
        bottom: 180px;
        left: calc(50% - 90px);
    }
    
    .bot-timer {
        top: 160px;
        right: calc(50% - 90px);
    }
}

/* ====== DESKTOP ====== */
@media (min-width: 900px) {
    body {
        overflow-y: auto;
    }
    
    .app { 
        padding: 10px;
        min-height: 100vh;
    }
    
    .screen { 
        width: 100%;
        max-width: 600px;
        min-height: calc(100vh - 20px);
        border-radius: 20px;
    }
    
    :root { 
        --cardW: 70px; 
        --cardH: 98px; 
    }
    
    .table-wrap { 
        max-width: 320px; 
        height: 270px; 
    }
    
    .welcome-title { 
        font-size: 3.5em; 
    }
    
    .topbar {
        padding: 8px 16px;
        height: 60px;
    }
    
    .player-hand {
        gap: 8px;
    }
    
    .action-panel {
        min-height: 80px;
        padding: 8px 16px;
    }
    
    .panel-avatar {
        width: 80px;
        height: 80px;
    }
    
    .avatar-timer-wrapper {
        width: 100px;
        height: 100px;
        margin-top: -35px;
    }
    
    .bot-avatar-timer-wrapper {
        width: 100px;
        height: 100px;
    }
    
    .bot-avatar-img {
        width: 80px;
        height: 80px;
    }
    
    .panel-center {
        flex: 0 0 100px;
    }
    
    .enemy-area {
        padding: 5px 0;
    }
    
    .player-area {
        padding: 5px 0;
    }
    
    .center {
        padding: 10px;
        flex: 1;
    }
    
    .game-container {
        height: 100%;
        max-height: 100%;
    }
    
    .enemy-score,
    .player-score {
        width: 45px;
        height: 50px;
        font-size: 28px;
    }
    
    .enemy-hand .card-ui.back {
        width: 50px;
        height: 70px;
    }
    
    .action-panel .btn {
        height: 40px;
        font-size: 12px;
    }
    
    .action-panel .btn-run,
    .panel-right-btns .btn.danger {
        width: 90px;
    }
}

/* Extra large desktop */
@media (min-width: 1200px) {
    .screen { 
        max-width: 700px;
    }
    
    .topbar {
        padding: 10px 24px;
    }
    
    .action-panel {
        padding: 10px 24px;
    }
}

.turn-coin img {
    position: absolute;
    width: 65px;
    display: none !important; 
}

/* Posição final: jogador (embaixo esquerda) */
.turn-coin.myturn img {
    top: 500px;
    left: 16px;
    animation: coinToPlayer 0.5s ease-in-out forwards;
}

/* Posição final: bot (em cima direita) */
.turn-coin.yourturn img {
    top: 150px;
    left: calc(100% - 100px);
    animation: coinToBot 0.5s ease-in-out forwards;
}

/* Animação diagonal natural: de cima direita pra baixo esquerda */
@keyframes coinToPlayer {
    0% {
        top: 150px;
        left: calc(100% - 100px);
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        top: 530px;
        left: 10px;
        transform: scale(1);
    }
}

/* Animação diagonal natural: de baixo esquerda pra cima direita */
@keyframes coinToBot {
    0% {
        top: 530px;
        left: 10px;
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        top: 150px;
        left: calc(100% - 100px);
        transform: scale(1);
    }
}

/* ====== SEO CONTENT - REGRAS DO TRUCO ====== */
.seo-content {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px 20px;
    color: var(--text);
}

.seo-content h1 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

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

.seo-card {
    background: var(--panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 20px;
    backdrop-filter: blur(10px);
}

.seo-card h2 {
    font-size: 1.1em;
    margin-bottom: 12px;
    color: var(--blue);
}

.seo-card p {
    font-size: 0.95em;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

.seo-note {
    font-size: 0.85em !important;
    color: var(--yellow) !important;
    margin-top: 10px;
}

.seo-example {
    background: rgba(255,255,255,0.05);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9em;
}

/* Tabela de força das cartas */
.force-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.force-table td {
    text-align: center;
    padding: 8px;
    font-size: 1.2em;
    font-weight: bold;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--stroke);
    color: #fff;
}

.force-table tr:first-child td {
    color: var(--muted);
}

.force-table tr:last-child td {
    color: var(--green);
}

/* Ordem dos naipes */
.naipes-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 15px 0;
}

.naipe {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9em;
}

.naipe.diamonds {
    background: rgba(229, 57, 53, 0.2);
    color: #ff6b6b;
}

.naipe.spades {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.naipe.hearts {
    background: rgba(229, 57, 53, 0.2);
    color: #ff6b6b;
}

.naipe.clubs {
    background: rgba(74, 163, 255, 0.2);
    color: var(--blue);
    border: 1px solid var(--blue);
}

.naipe-arrow {
    color: var(--muted);
    font-size: 0.8em;
}

/* Valores do truco */
.truco-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.truco-val {
    background: rgba(255,255,255,0.05);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.9em;
    color: var(--muted);
}

.truco-val strong {
    color: var(--green);
}

/* Mobile ajustes */
@media (max-width: 600px) {
    .seo-content h1 {
        font-size: 1.5em;
    }
    
    .seo-grid {
        grid-template-columns: 1fr;
    }
    
    .naipes-order {
        flex-direction: column;
    }
    
    .naipe-arrow {
        transform: rotate(90deg);
    }
}