:root {
    --bg-dark: #1e1e2e; --bg-panel: #2a2a35; --text: #cdd6f4;
    --primary: #cba6f7; --accent: #f38ba8; --success: #a6e3a1; --btn-hover: #b48ead;
    --turn-color: #f9e2af; --death: #45475a;
}

body { margin: 0; font-family: 'Segoe UI', sans-serif; color: var(--text); background-color: var(--bg-dark); height: 100vh; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Telas Setup */
.tela { display: none; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; text-align: center; }
.tela.ativa { display: flex; }
.titulo-jogo { 
    color: var(--primary); 
    font-size: 3.5em; 
    margin-top: 0;
    margin-bottom: 30px; /* Dá um bom espaço antes dos botões */
}
.logo-jogo {
    width: 250px; /* Você pode aumentar aqui se quiser a logo maior, ex: 300px */
    max-width: 80%;
    margin-bottom: 15px; /* Desgruda a logo do título ou da caixa de botões */
    filter: drop-shadow(0 0 15px rgba(203, 166, 247, 0.5)); /* Aumentei um pouco o brilho pra destacar a pena */
}
.caixa-menu { background-color: var(--bg-panel); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); width: 450px; max-width: 90%; }
#lista-lobby { list-style: none; padding: 0; margin: 15px 0; max-height: 200px; overflow-y: auto; }
#lista-lobby li { background-color: #181825; padding: 12px; margin-bottom: 8px; border-radius: 8px; font-weight: bold; color: var(--accent); font-size: 1.1em;}
#ordem-final-lista { list-style: none; padding: 0; font-size: 1.8em; display: none; text-align: left; }
#ordem-final-lista li { margin-bottom: 15px; padding: 12px; background-color: rgba(0,0,0,0.3); border-left: 5px solid var(--primary); border-radius: 0 8px 8px 0; }

/* Inputs e Botões */
input, select { width: 100%; padding: 10px; margin: 4px 0; border: 1px solid #555; border-radius: 6px; background-color: #181825; color: white; font-size: 0.95em; outline: none;}
.btn-padrao { background-color: var(--primary); color: #111; border: none; padding: 10px 15px; margin: 5px 0; width: 100%; font-size: 1em; font-weight: bold; border-radius: 6px; cursor: pointer; transition: 0.2s;}
.btn-padrao:hover { background-color: var(--btn-hover); transform: translateY(-2px); }
.btn-padrao:disabled { background-color: #555; color: #888; cursor: not-allowed; transform: none; }
.btn-ferramenta { flex: 1; padding: 8px; font-weight: bold; border-radius: 6px; border: none; cursor: pointer; background-color: rgba(255,255,255,0.1); color: var(--text); transition: 0.2s; }
.btn-ferramenta:hover { background-color: rgba(255,255,255,0.2); }

/* Layout Jogo */
#container-jogo { display: none; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden; }
#banner-turno { flex-shrink: 0; background-color: var(--turn-color); color: #111; text-align: center; padding: 8px; font-size: 1.5em; font-weight: bold; text-transform: uppercase; letter-spacing: 2px;}
#tela-jogo-grade { flex: 1; min-height: 0; padding: 15px; display: grid; grid-template-columns: 400px 1fr 350px; gap: 15px; overflow: hidden; }

/* Painéis */
.painel-lateral { border-radius: 10px; padding: 15px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;}
.painel-mestre { background-color: rgba(42,42,53, 0.8); }
.painel-live { background-color: rgba(30,30,46, 0.8); }
.titulo-painel { margin-top: 0; color: var(--primary); font-size: 1.2em; text-align: center; border-bottom: 2px solid #555; padding-bottom: 8px; margin-bottom: 15px; }
.subtitulo { margin: 0 0 10px 0; color: var(--text); border-bottom: 1px solid #444; padding-bottom: 4px; font-size: 0.95em; text-transform: uppercase; }
.caixa-interna { background-color: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; border: 1px solid #444; display: flex; flex-direction: column;}
#tabuleiro-visual { flex: 1; min-height: 0; border-radius: 10px; background-color: rgba(0,0,0,0.5); border: 2px dashed #666; width: 100%; outline: none; overflow: hidden; }

/* ESTADO DE MORTE */
.jogador-card { background-color: rgba(255,255,255,0.08); margin-bottom: 12px; padding: 12px; border-radius: 8px; border-left: 4px solid transparent; font-size: 0.95em; transition: 0.5s; position: relative; overflow: hidden;}
.jogador-ativo { border-left-color: var(--turn-color); background-color: rgba(249, 226, 175, 0.15);}
.jogador-morto { background-color: var(--death); opacity: 0.7; filter: grayscale(100%); pointer-events: none; }
.jogador-morto::after { content: "MORREU ☠️"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); font-size: 2em; color: #f38ba8; font-weight: bold; border: 4px solid #f38ba8; padding: 5px 15px; background: rgba(0,0,0,0.8); z-index: 10; border-radius: 8px; letter-spacing: 2px;}

.status-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 0.9em; font-weight: bold; }
.status-item { background-color: rgba(0,0,0,0.6); padding: 4px 8px; border-radius: 4px; border: 1px solid #555;}
.inventario-box { margin-top: 8px; font-size: 0.85em; color: #a6adc8; border-top: 1px solid #555; padding-top: 6px; }

/* Controles Mestre */
.controles-jogador-master { background-color: rgba(255,255,255,0.08); padding: 12px; border-radius: 8px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #555; position: relative;}
.controles-jogador-master.morto-master { filter: grayscale(100%); opacity: 0.5; }
.nome-master { font-weight: bold; font-size: 1.1em; color: var(--primary); border-bottom: 1px solid #555; padding-bottom: 4px; margin-bottom: 2px;}
.status-grid-master { display: flex; flex-wrap: wrap; gap: 8px; }
.status-control-box { display: flex; align-items: center; background-color: rgba(0,0,0,0.6); padding: 3px; border-radius: 6px; border: 1px solid #444; }
.status-control-box span { display: inline-block; min-width: 55px; text-align: center; font-size: 0.9em; font-weight: bold; color: white; padding: 0 4px; }
.btn-pequeno { width: 28px !important; height: 28px; padding: 0 !important; margin: 0 !important; font-size: 1.2em; display: flex; justify-content: center; align-items: center; border-radius: 4px; background-color: var(--primary); color: #111; border: none; font-weight: bold; cursor: pointer;}
.acoes-extras-master { display: flex; gap: 6px; align-items: center;}
.acoes-extras-master select { margin: 0; flex: 1; padding: 6px; font-size: 0.85em; }

/* CARTÕES DA LIVE (Regras e Loja) */
.lista-cards { display: flex; flex-direction: column; gap: 8px; padding-right: 5px; }
.regra-card { background-color: rgba(203, 166, 247, 0.1); border: 1px solid var(--primary); padding: 10px; border-radius: 8px; font-size: 0.95em; line-height: 1.4;}
.regra-card strong { color: var(--primary); font-size: 1.1em; display: block; margin-bottom: 3px;}
.item-loja-card { background-color: rgba(166, 227, 161, 0.15); border: 1px solid var(--success); padding: 10px; border-radius: 8px; font-size: 0.95em;}

/* JANELAS MODAIS */
.modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); justify-content: center; align-items: center; }
.modal-content { background-color: var(--bg-panel); padding: 30px; border-radius: 12px; width: 800px; max-width: 95%; max-height: 90vh; overflow-y: auto; border: 2px solid var(--primary); position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.8);}
.fechar-modal { color: #aaa; position: absolute; right: 20px; top: 15px; font-size: 28px; font-weight: bold; cursor: pointer; transition: 0.2s;}
.fechar-modal:hover { color: var(--accent); }
.grade-modal { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; }

/* Botões de Edição */
.btn-edicao { padding: 4px 8px; font-size: 0.8em; margin: 0 2px; width: auto; background-color: #555;}
.item-edicao { display: flex; justify-content: space-between; align-items: center; background-color: rgba(0,0,0,0.4); padding: 8px; margin-bottom: 5px; border-radius: 6px; border: 1px solid #444;}

/* MENSAGENS EXCLUSIVAS DO JOGADOR */
#chat-jogador-atual { background-color: rgba(0,0,0,0.5); padding: 10px; border-radius: 8px; margin-bottom: 15px; max-height: 650px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; border: 1px solid #444; }

.chat-bolha { 
    background-color: var(--primary); 
    color: #111; 
    padding: 12px 20px; 
    border-radius: 12px; 
    font-size: 1.4em; /* Fonte gigante pra live! */
    font-weight: bold; 
    width: fit-content; 
    max-width: 90%; 
    word-break: break-word; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); 
    align-self: flex-start; 
}

/* TOOLTIP DO INVENTÁRIO (DESCRIÇÃO DOS ITENS) */
.tooltip-item {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--success);
    color: var(--success);
    font-weight: bold;
}
.tooltip-item:hover::after {
    content: attr(data-efeito);
    position: absolute;
    bottom: 125%; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.9); color: white;
    padding: 8px 12px; border-radius: 8px;
    white-space: pre-wrap; width: max-content; max-width: 250px;
    font-size: 0.9em; z-index: 1000;
    border: 1px solid var(--success);
    pointer-events: none;
    text-shadow: none;
}