:root {
    --fundo: #0f1f18;
    --feltro: #17382a;
    --feltro-claro: #1f4a37;
    --painel: #13241c;
    --borda: #2a5240;
    --texto: #eef3ef;
    --texto-suave: #9db5a8;
    --ouro: #f2c14e;
    --ouro-escuro: #c9922a;
    --azul: #5ab0ff;
    --perigo: #e0685a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #1a3a2c 0%, var(--fundo) 70%);
    color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* ---------------- Topo ---------------- */

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--borda);
    background: rgba(0, 0, 0, 0.2);
}

.logo { margin: 0; font-size: 26px; letter-spacing: 1px; }
.logo span { color: var(--ouro); }

.placar { text-align: center; }
.placar-ouro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 34px;
    font-weight: 800;
    color: var(--ouro);
    font-variant-numeric: tabular-nums;
}
.moeda {
    width: 24px; height: 24px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe08a, var(--ouro-escuro));
    box-shadow: 0 0 0 2px #8a6318 inset;
}
.placar-sub { color: var(--texto-suave); font-size: 14px; font-variant-numeric: tabular-nums; }

.botao-fantasma {
    background: none;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--texto-suave);
    font-size: 13px;
}
.botao-fantasma:hover { border-color: var(--ouro); color: var(--ouro); }

.menu { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.contador {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(242, 193, 78, 0.15);
    color: var(--ouro);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.botao-admin { border-style: dashed; }

/* ---------------- Layout ---------------- */

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 860px) {
    .layout { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .topo { flex-wrap: wrap; padding: 12px 16px; }
    .placar { order: 3; width: 100%; }
    .menu { justify-content: flex-start; }
}

/* ---------------- Mesa ---------------- */

.area-rolagem {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 28px 20px 22px;
    border-radius: 18px;
    background: radial-gradient(ellipse at center, var(--feltro-claro), var(--feltro));
    border: 6px solid #3b2a1a;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s;
}

body.sorte-ativa .area-rolagem {
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 0 28px rgba(242, 193, 78, 0.55);
}

.bandeja {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 14px;
    min-height: 150px;
    padding-top: 18px; /* espaço para o salto do dado */
}

.slot-dado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 96px;
}

/*
 * Cada tipo de dado tem uma cor e um formato (clip-path) próprios.
 * O brilho fica no filtro do .slot-dado, porque o clip-path cortaria um box-shadow.
 */
.dado {
    --cor: #ccc;
    --cor-clara: #fff;
    --forma: inset(0 round 14%);
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    clip-path: var(--forma);
    background: linear-gradient(145deg, var(--cor-clara), var(--cor));
    color: #15201a;
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* Palco: o dado pula aqui dentro; a sombra fica presa ao "chão". */
.dado-palco {
    position: relative;
    width: 72px;
    height: 84px;
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
    transition: filter 0.25s;
}
.slot-dado.maximo .dado-palco { filter: drop-shadow(0 0 9px rgba(242, 193, 78, 0.95)); }
.slot-dado.maximo .dado-valor { text-decoration: underline; text-underline-offset: 3px; }

.dado-sombra {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
}

/* Explosão dourada quando o dado pousa no valor máximo. */
.dado-palco::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 36px;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    border: 3px solid var(--ouro);
    opacity: 0;
    pointer-events: none;
}
.dado-palco.impacto-maximo::after { animation: anel 0.5s ease-out; }
@keyframes anel {
    from { opacity: 0.9; transform: scale(0.6); }
    to   { opacity: 0; transform: scale(1.6); }
}

.tipo-d4  { --cor: #c0443f; --cor-clara: #f08a80; --forma: polygon(50% 3%, 98% 94%, 2% 94%); padding-top: 24px; font-size: 20px; }
.tipo-d6  { --cor: #cfc6b0; --cor-clara: #fffaf0; --forma: inset(3% round 16%); }
.tipo-d8  { --cor: #3a7bc8; --cor-clara: #8fc2ff; --forma: polygon(50% 1%, 99% 50%, 50% 99%, 1% 50%); font-size: 22px; }
.tipo-d10 { --cor: #7e4cc4; --cor-clara: #c3a0f5; --forma: polygon(50% 1%, 97% 44%, 50% 99%, 3% 44%); padding-bottom: 6px; font-size: 22px; }
.tipo-d12 { --cor: #d2801f; --cor-clara: #ffc672; --forma: polygon(50% 2%, 98% 37%, 80% 96%, 20% 96%, 2% 37%); padding-top: 6px; }
.tipo-d20 { --cor: #d6a51c; --cor-clara: #fff0a8; --forma: polygon(25% 4%, 75% 4%, 99% 50%, 75% 96%, 25% 96%, 1% 50%); }

/*
 * Arremesso. As variáveis são sorteadas por rolagem em interface.js:
 *   --duracao  tempo total (encurta quando a rolagem automática é rápida)
 *   --altura   altura do salto
 *   --giro     rotação total (múltiplo de 360°, para o número terminar de pé)
 *   --desvio   pequeno deslocamento lateral no ar
 * O pouso acontece em 72% da animação (FRACAO_POUSO no JS), que é quando o valor final aparece.
 */
.dado.rolando { animation: arremesso var(--duracao, 620ms) linear both; }
@keyframes arremesso {
    0%   { transform: translate(0, 0) rotate(0) scale(1, 1); animation-timing-function: ease-out; }
    10%  { transform: translate(0, 4px) rotate(0) scale(1.12, 0.84); animation-timing-function: ease-out; }  /* agacha */
    40%  { transform: translate(var(--desvio), calc(var(--altura) * -1)) rotate(calc(var(--giro) * 0.55)) scale(0.96, 1.06); animation-timing-function: ease-in; } /* topo do salto */
    72%  { transform: translate(0, 0) rotate(var(--giro)) scale(1.16, 0.82); animation-timing-function: ease-out; }  /* pousa e achata */
    84%  { transform: translate(0, -7px) rotate(var(--giro)) scale(0.96, 1.05); animation-timing-function: ease-in; } /* quica */
    100% { transform: translate(0, 0) rotate(var(--giro)) scale(1, 1); }
}

.dado-sombra.rolando { animation: sombra var(--duracao, 620ms) linear both; }
@keyframes sombra {
    0%, 10% { transform: scaleX(1.05); opacity: 1; animation-timing-function: ease-out; }
    40%     { transform: scaleX(0.55); opacity: 0.35; animation-timing-function: ease-in; }
    72%     { transform: scaleX(1.15); opacity: 1; }
    84%     { transform: scaleX(0.9); opacity: 0.8; }
    100%    { transform: scaleX(1); opacity: 1; }
}

/* Faces trocando no ar: levemente borradas e apagadas. */
.dado-valor { display: inline-block; }
.dado-valor.girando { filter: blur(0.6px); opacity: 0.75; }
.dado-valor.pousou { animation: revelar 0.3s ease-out; }
@keyframes revelar {
    0%   { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Rolagem automática muito rápida: só um pulso curto. */
.dado.pulso { animation: pulso 0.14s ease-out; }
@keyframes pulso {
    0%   { transform: scale(0.88); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dado.rolando, .dado-sombra.rolando, .dado-valor.pousou, .dado.pulso, .dado-palco.impacto-maximo::after { animation: none; }
}

.dado-rotulo { font-size: 12px; font-weight: 700; color: var(--texto-suave); letter-spacing: 1px; }

.botao-evoluir {
    width: 100%;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}
.botao-evoluir:not(:disabled):hover { border-color: var(--ouro); color: var(--ouro); }
.botao-evoluir:disabled { opacity: 0.45; }

.ultima-rolagem {
    min-height: 22px;
    color: var(--texto-suave);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    overflow-wrap: anywhere;
}

.botao-rolar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 48px;
    font-size: 22px;
    font-weight: 800;
    color: #2b1d05;
    border: none;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffd873, var(--ouro-escuro));
    box-shadow: 0 5px 0 #8a6318, 0 8px 18px rgba(0, 0, 0, 0.4);
    transition: transform 0.05s, box-shadow 0.05s;
    user-select: none;
}
.botao-rolar small { font-size: 11px; font-weight: 600; opacity: 0.7; letter-spacing: 1px; text-transform: uppercase; }
.botao-rolar:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a6318, 0 3px 8px rgba(0, 0, 0, 0.4); }

.auto { width: min(360px, 100%); }
.auto-rotulo {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--texto-suave);
    margin-bottom: 4px;
}
.barra { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.barra-preenchida {
    height: 100%;
    background: var(--azul);
    transform: scaleX(0);
    transform-origin: left;
}
body.sobrecarga-ativa .barra-preenchida { background: linear-gradient(90deg, var(--azul), #b8ecff); }
body.sobrecarga-ativa #autoIntervalo { color: var(--azul); font-weight: 700; }

/* Números de ganho que sobem e somem */
.ganho {
    position: absolute;
    top: 38%;
    pointer-events: none;
    font-size: 26px;
    font-weight: 800;
    color: var(--ouro);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    animation: subir 0.9s ease-out forwards;
}
.ganho-auto { font-size: 18px; color: #ffe7a6; }
.ganho-sorte { color: #fff3c4; text-shadow: 0 0 10px var(--ouro); }
@keyframes subir {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -70px); }
}

/* ---------------- Habilidades ---------------- */

.habilidades {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}
@media (max-width: 520px) { .habilidades { grid-template-columns: 1fr; } }

.habilidade {
    --cor-hab: var(--azul);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    text-align: left;
    background: var(--painel);
    border: 1px solid var(--borda);
    border-radius: 12px;
}
.hab-sorte { --cor-hab: var(--ouro); }

.hab-preenchimento {
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: var(--cor-hab);
    transform-origin: left;
}
.hab-nome { font-weight: 700; color: var(--cor-hab); }
.hab-desc { font-size: 13px; color: var(--texto-suave); }
.hab-status { font-size: 13px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

.habilidade:not(:disabled):hover { border-color: var(--cor-hab); }
.habilidade.ativa { border-color: var(--cor-hab); box-shadow: 0 0 16px color-mix(in srgb, var(--cor-hab) 45%, transparent); }
.habilidade.recarga .hab-preenchimento { opacity: 0.4; }
.habilidade:disabled:not(.ativa) .hab-nome { opacity: 0.6; }

kbd {
    font-family: inherit;
    font-size: 11px;
    padding: 1px 5px;
    border: 1px solid var(--borda);
    border-radius: 4px;
    color: var(--texto-suave);
    margin-left: 4px;
}

/* ---------------- Loja ---------------- */

.loja {
    background: var(--painel);
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 18px;
    align-self: start;
}
.loja h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-suave); }

.item-loja { padding: 14px 0; border-top: 1px solid var(--borda); }
.item-cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.item-cabecalho h3 { margin: 0; font-size: 16px; }
.item-nivel { font-size: 13px; color: var(--ouro); font-variant-numeric: tabular-nums; }
.item-desc { margin: 6px 0; font-size: 13px; color: var(--texto-suave); line-height: 1.4; }
.item-detalhe { margin: 6px 0; font-size: 13px; font-variant-numeric: tabular-nums; }

.botao-comprar {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffd873, var(--ouro-escuro));
    color: #2b1d05;
}
.botao-comprar:disabled { background: #2a3a32; color: #6f8a7c; }

.grafico {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 70px;
    margin-top: 10px;
    padding: 0 2px;
    border-bottom: 1px solid var(--borda);
}
.grafico-coluna { position: relative; flex: 1; height: 100%; }
.grafico-barra {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ouro);
    border-radius: 2px 2px 0 0;
}
.grafico-barra.fantasma { background: none; border: 1px dashed rgba(242, 193, 78, 0.6); border-bottom: none; }
.grafico-rotulo { margin: 4px 0 0; font-size: 11px; color: var(--texto-suave); }

.dica { margin: 8px 0 0; font-size: 12px; color: var(--texto-suave); line-height: 1.4; }

/* ---------------- Explosões e combos ---------------- */

.dado-extra {
    position: absolute;
    top: -6px;
    right: -14px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #ff7a2f;
    color: #2a0f00;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
    z-index: 2;
}
.dado-extra.visivel { opacity: 1; transform: scale(1); }
.dado-extra.pop { animation: selo 0.25s ease-out; }
@keyframes selo {
    0%   { transform: scale(1.6); }
    100% { transform: scale(1); }
}

/* Cada explosão dá um tranco no dado e um clarão laranja. */
.dado-palco.explodindo .dado { animation: tranco 0.15s ease-out; }
.dado-palco.explodindo { filter: drop-shadow(0 0 10px rgba(255, 122, 47, 0.95)); }
@keyframes tranco {
    0%   { transform: translateY(-6px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

.combo-banner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--borda);
    color: var(--texto);
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}
.combo-banner.raro { border-color: var(--azul); color: #bfe0ff; }
.combo-banner.epico { border-color: var(--ouro); color: var(--ouro); text-shadow: 0 0 8px rgba(242, 193, 78, 0.6); }
.combo-banner.mostrar { animation: banner 1.4s ease-out forwards; }
@keyframes banner {
    0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.8); }
    12%  { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
    22%  { transform: translate(-50%, 0) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -6px); }
}

.painel-combos {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--painel);
    border: 1px solid var(--borda);
    border-radius: 12px;
}
.painel-combos summary { cursor: pointer; font-weight: 700; }

/* ---------------- Tabelas e grades de números ---------------- */

.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th, .tabela td { padding: 6px 8px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela th { color: var(--texto-suave); font-weight: 600; }
.tabela td:first-child { font-weight: 600; white-space: nowrap; }
.tabela td:nth-child(2) { color: var(--texto-suave); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela td.num { color: var(--texto); }

.stats-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--borda);
}
.stat span { font-size: 12px; color: var(--texto-suave); }
.stat strong { font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---------------- Janelas ---------------- */

.janela {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0 20px 20px;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: var(--painel);
    color: var(--texto);
}
.janela-pequena { width: min(420px, calc(100vw - 32px)); text-align: center; }
.janela-larga { width: min(980px, calc(100vw - 32px)); }
.janela::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }

.janela-topo {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 12px;
    background: var(--painel);
    border-bottom: 1px solid var(--borda);
}
.janela-topo h2 { margin: 0; font-size: 18px; }
.fechar {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--texto-suave);
    font-size: 22px;
    line-height: 1;
}
.fechar:hover { background: rgba(255, 255, 255, 0.08); color: var(--texto); }
.fechar:focus { outline: none; }
.fechar:focus-visible { outline: 2px solid var(--ouro); }

.janela-secao { padding: 14px 0; border-bottom: 1px solid var(--borda); }
.janela-secao:last-child { border-bottom: none; }
.janela-secao h3 { margin: 4px 0 8px; font-size: 15px; }
.janela-secao h3:not(:first-child) { margin-top: 18px; }
.janela-secao.perigo h3 { color: var(--perigo); }
.janela-resumo { color: var(--texto-suave); font-size: 14px; }

.codigo {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--texto);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    resize: vertical;
    word-break: break-all;
}
.codigo:focus, .campo:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }

.botoes, .campos { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-suave); }
.campos label.check { flex-direction: row; align-items: center; padding-bottom: 8px; }
.campo {
    width: 110px;
    padding: 7px 8px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--texto);
    font: inherit;
    font-size: 14px;
}

.botao-secundario {
    padding: 8px 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 14px;
}
.botao-secundario:hover:not(:disabled) { border-color: var(--ouro); color: var(--ouro); }
.botao-secundario:disabled { opacity: 0.5; }
.botao-perigo {
    padding: 8px 14px;
    border: 1px solid var(--perigo);
    border-radius: 8px;
    background: none;
    color: var(--perigo);
    font-weight: 700;
}
.botao-perigo:hover { background: var(--perigo); color: #fff; }
.botao-compacto { width: auto; margin-top: 0; padding: 8px 16px; }

.preview-import { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: var(--texto-suave); }
.preview-import.ok { color: #8fe0a8; }
.preview-import.erro, .erro-texto { color: var(--perigo); }

.texto-offline { font-size: 16px; line-height: 1.6; margin: 18px 0; }
.ouro-texto { color: var(--ouro); font-size: 20px; }

/* ---------------- Conquistas ---------------- */

.lista-conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding-bottom: 4px; }
.conquista {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}
.conquista.feita { opacity: 1; border-color: rgba(242, 193, 78, 0.5); background: rgba(242, 193, 78, 0.07); }
.conq-icone { font-size: 20px; color: var(--texto-suave); line-height: 1.2; }
.conquista.feita .conq-icone { color: var(--ouro); }
.conq-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.conq-texto > span { font-size: 13px; color: var(--texto-suave); }
.conq-progresso { height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.conq-progresso div { height: 100%; background: var(--azul); transform-origin: left; }
.conq-texto .conq-numeros, .conq-texto .conq-data { font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---------------- Avisos ---------------- */

.toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    border-left: 4px solid var(--azul);
    background: #0c1a14;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    animation: entrar 0.25s ease-out;
    transition: opacity 0.4s, transform 0.4s;
}
.toast span { font-size: 13px; color: var(--texto-suave); }
.toast.conquista { border-left-color: var(--ouro); }
.toast.conquista strong { color: var(--ouro); }
.toast.erro { border-left-color: var(--perigo); }
.toast.saindo { opacity: 0; transform: translateX(20px); }
@keyframes entrar {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------- Admin ---------------- */

.abas { display: flex; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--borda); }
.aba {
    padding: 8px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--texto-suave);
    font-weight: 600;
}
.aba.ativa { color: var(--ouro); border-bottom-color: var(--ouro); }

.editor-config { margin: 12px 0; }
.editor-config summary, .log-compras summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

.resultado-sim { margin-top: 12px; }
.resultado-sim h3 { margin: 18px 0 8px; font-size: 15px; }
.sim-fim { font-size: 16px; }
.carregando { color: var(--texto-suave); }
.alerta {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--perigo);
    background: rgba(224, 104, 90, 0.08);
    font-size: 13px;
}
.alerta ul { margin: 6px 0 0; padding-left: 18px; }
.alerta.ok { border-color: #4f9e6a; background: rgba(79, 158, 106, 0.1); }
.log-compras { margin-top: 12px; }

.grafico-sim { position: relative; }
.grafico-sim svg { display: block; width: 100%; height: auto; }
.sim-grade { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.sim-eixo { fill: var(--texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.sim-linha { fill: none; stroke: var(--ouro); stroke-width: 2; stroke-linejoin: round; }
.sim-cursor { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.sim-ponto { fill: var(--ouro); stroke: var(--painel); stroke-width: 2; }
.sim-alvo { fill: transparent; cursor: crosshair; }
.sim-tooltip {
    position: absolute;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 180px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: #0c1a14;
    font-size: 12px;
    pointer-events: none;
}
.sim-tooltip .suave { color: var(--texto-suave); }
.sim-tooltip[hidden] { display: none; }
.tabela .col-tempo { width: 110px; }