/* =========================================================
   TEMAS VISUAIS — Clássico (padrão, chave "pet") · Pixel · Museu
   ========================================================= */

.temas { display: flex; gap: 6px; align-items: center; }
.temas button {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); padding: 0;
  background: var(--amostra); position: relative; transition: transform .2s var(--mola);
}
@media (hover: hover) { .temas button:hover { transform: scale(1.12); } }
.temas button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.topo-dir { display: flex; align-items: center; gap: 10px; }
.deco { display: none; }

/* ---------------- PIXEL ---------------- */
[data-tema="pixel"] {
  --creme: #f3f8e6; --papel: #e6efd6; --superficie: #f8fbee; --linha: #5b2d4c;
  --tinta: #3a1f33; --tinta-2: #6e4d63; --titulo: #4a1f3d;
  --coral: #b3407f; --laranja: #d9a441; --verde: #5f8f3e; --ouro: #e0b84f; --petroleo: #5b2d4c; --petroleo-3: #2e1427;
  --c0: #b3407f; --c1: #5f8f3e; --c2: #d9a441; --c3: #3f7d8c; --c4: #5b2d4c; --c5: #c0603a;
  --btn-fundo: #5b2d4c; --btn-texto: #f3f8e6; --btn-sombra: #2e1427;
  --destaque: #b3407f; --destaque-texto: #fff; --destaque-sombra: #5b2d4c;
  --topo-fundo: #4a1f3d; --topo-texto: #f3f8e6;
  --ativo-fundo: #5b2d4c; --ativo-texto: #f3f8e6;
  --jogo-fundo: #cfe6cf; --jogo-texto: #3a1f33;
  --verso-a: #7a3d66; --verso-b: #5b2d4c; --verso-c: #43203a;
  --serif: 'Pixelify Sans', 'Courier New', monospace;
  --raio: 0px;
  --sombra: 4px 4px 0 #5b2d4c;
  --sombra-alta: 6px 6px 0 #5b2d4c;
}
[data-tema="pixel"] body { background: #d8ecd9; }
[data-tema="pixel"] body[data-tela="jogo"], [data-tema="pixel"] body[data-tela="crono"] { background: var(--jogo-fundo); }
[data-tema="pixel"] *, [data-tema="pixel"] *::before, [data-tema="pixel"] *::after { border-radius: 0 !important; }
[data-tema="pixel"] .deco { display: block; position: fixed; pointer-events: none; z-index: 0; image-rendering: pixelated; }
[data-tema="pixel"] .deco-grama { left: 0; right: 0; bottom: 0; height: 128px; background: url(/ui/grama.svg) repeat-x bottom left / 480px 128px; }
[data-tema="pixel"] .deco-pix-e { left: 0; top: 0; width: 360px; height: 260px; background: url(/ui/pixels.svg) no-repeat; opacity: .5; }
[data-tema="pixel"] .deco-pix-d { right: 0; top: 0; width: 360px; height: 260px; background: url(/ui/pixels.svg) no-repeat; transform: scaleX(-1); opacity: .5; }
[data-tema="pixel"] main, [data-tema="pixel"] .rodape { position: relative; z-index: 1; }
[data-tema="pixel"] .topo { backdrop-filter: none; box-shadow: 0 4px 0 #2e1427; }
[data-tema="pixel"] .rodape { padding-bottom: 120px; }
[data-tema="pixel"] body[data-tela="jogo"] main { padding-bottom: 90px; }
[data-tema="pixel"] .marca-selo { background: var(--ouro); box-shadow: 3px 3px 0 #2e1427; }
[data-tema="pixel"] .hero h1 { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #4a1f3d; text-shadow: 5px 5px 0 rgba(179, 64, 127, .22); }
[data-tema="pixel"] .hero h1 em { font-style: normal; color: #b3407f; }
[data-tema="pixel"] .hero-kicker { color: #5f8f3e; font-family: var(--serif); letter-spacing: .2em; }
[data-tema="pixel"] :is(.pacote, .modo, .ajustes, .rev, .sobre-modos li, .creditos details) { box-shadow: 4px 4px 0 #5b2d4c, inset 0 0 0 3px #5b2d4c; }
[data-tema="pixel"] .fim-placar div:not(.bonus) { box-shadow: 4px 4px 0 #5b2d4c, inset 0 0 0 3px #5b2d4c; }
@media (hover: hover) { [data-tema="pixel"] .pacote:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #5b2d4c, inset 0 0 0 3px #5b2d4c; } }
[data-tema="pixel"] .pacote[aria-checked="true"] { box-shadow: 6px 6px 0 var(--cor), inset 0 0 0 3px #5b2d4c; transform: translate(-2px, -2px); }
[data-tema="pixel"] .pacote-capa { border-bottom: 3px solid #5b2d4c; }
[data-tema="pixel"] .pacote-capa img { filter: saturate(.8) contrast(1.05); }
@media (hover: hover) { [data-tema="pixel"] .modo:hover { transform: translate(-2px, -2px); } }
[data-tema="pixel"] .btn { box-shadow: 4px 4px 0 var(--btn-sombra); font-family: var(--serif); letter-spacing: .06em; text-transform: uppercase; }
[data-tema="pixel"] .btn-grande { box-shadow: 5px 5px 0 var(--destaque-sombra), inset 0 0 0 3px #5b2d4c; }
[data-tema="pixel"] .btn-grande::after { content: "\25B6"; font-size: .7em; margin-left: 4px; }
[data-tema="pixel"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--btn-sombra); }
[data-tema="pixel"] .btn-leve { box-shadow: inset 0 0 0 3px currentColor; }
[data-tema="pixel"] .seg { box-shadow: inset 0 0 0 3px #5b2d4c; }
[data-tema="pixel"] .carta-verso {
  background:
    conic-gradient(from 90deg at 50% 50%, transparent 25%, rgba(255, 255, 255, .08) 0 50%, transparent 0 75%, rgba(255, 255, 255, .08) 0) 0 0 / 16cqw 16cqw,
    var(--verso-b);
  box-shadow: inset 0 0 0 3cqw #f3f8e6, inset 0 0 0 5cqw #5b2d4c, 4px 4px 0 #2e1427;
}
[data-tema="pixel"] .verso-selo { background: var(--ouro); box-shadow: 1.5cqw 1.5cqw 0 #2e1427, 0 0 0 2cqw #f3f8e6; }
[data-tema="pixel"] .carta-frente { box-shadow: inset 0 0 0 3px #5b2d4c, 4px 4px 0 #2e1427; }
[data-tema="pixel"] .carta.achada .carta-frente { box-shadow: inset 0 0 0 4px var(--dono, var(--verde)), 5px 5px 0 var(--dono, var(--verde)); }
[data-tema="pixel"] .f-rotulo { border-top-width: 3px; }
[data-tema="pixel"] :is(.placar-num span, .vez-j) { background: #f3f8e6; box-shadow: 3px 3px 0 #5b2d4c, inset 0 0 0 2px #5b2d4c; opacity: 1; }
[data-tema="pixel"] .vez-j:not(.ativo) { opacity: .65; }
[data-tema="pixel"] .btn-voltar { background: #5b2d4c; color: #f3f8e6; box-shadow: 3px 3px 0 #2e1427; }
[data-tema="pixel"] :is(.modal, .tuto-caixa) { box-shadow: 8px 8px 0 #2e1427, inset 0 0 0 4px #5b2d4c; }
[data-tema="pixel"] .tuto-caixa { background: #e3f1dc; color: #3a1f33; }
[data-tema="pixel"] :is(.tuto-fala p b, .tuto-etapa) { color: #b3407f; }
[data-tema="pixel"] .tuto-pular { background: #5b2d4c; color: #f3f8e6; }
[data-tema="pixel"] .tuto-rodape .btn-leve { color: #5b2d4c; box-shadow: inset 0 0 0 3px #5b2d4c; }
[data-tema="pixel"] .alt { box-shadow: inset 0 0 0 3px rgba(91, 45, 76, .2); }
@media (hover: hover) { [data-tema="pixel"] .alt:hover:not(:disabled) { box-shadow: inset 0 0 0 3px #5b2d4c, 3px 3px 0 #5b2d4c; } }
[data-tema="pixel"] .estrelas span.on { color: var(--ouro); text-shadow: 4px 4px 0 #5b2d4c; }
[data-tema="pixel"] .crono-linha::before { background: repeating-linear-gradient(90deg, #5b2d4c 0 12px, transparent 12px 18px); }
[data-tema="pixel"] .slot::before { box-shadow: 0 0 0 3px #5b2d4c; }
[data-tema="pixel"] .slot-vazio { border: 3px dashed rgba(91, 45, 76, .45); }
[data-tema="pixel"] .combo { color: #b3407f; text-shadow: 4px 4px 0 #f3f8e6, 7px 7px 0 #5b2d4c; }
[data-tema="pixel"] .crono-banco { background: rgba(243, 248, 230, .6); box-shadow: inset 0 0 0 3px rgba(91, 45, 76, .3); }
[data-tema="pixel"] .dica { opacity: .8; }

/* ---------------- MUSEU ---------------- */
[data-tema="museu"] {
  --creme: #f6eedb; --papel: #2a241d; --superficie: #211c16; --linha: #3e3528;
  --tinta: #efe6d2; --tinta-2: #b8ab92; --titulo: #f1e2bd;
  --coral: #c8574b; --laranja: #c9a45c; --verde: #6fa58f; --ouro: #d4b06a; --petroleo: #c9a45c;
  --c0: #c9a45c; --c1: #c8574b; --c2: #6fa58f; --c3: #9b7bb5; --c4: #d98a5a; --c5: #8fa7c9;
  --btn-fundo: #c9a45c; --btn-texto: #17130e; --btn-sombra: #7d6230;
  --destaque: #c8574b; --destaque-texto: #fff6ea; --destaque-sombra: #7e2e26;
  --topo-fundo: #110e0a; --topo-texto: #efe6d2;
  --ativo-fundo: #c9a45c; --ativo-texto: #17130e;
  --jogo-fundo: #120f0b; --jogo-texto: #efe6d2;
  --verso-a: #3a2c1d; --verso-b: #231a11; --verso-c: #150f09;
  --serif: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  --sombra: 0 1px 0 rgba(0, 0, 0, .4), 0 14px 30px -14px rgba(0, 0, 0, .9);
  --sombra-alta: 0 24px 50px -20px rgba(0, 0, 0, .95), 0 0 0 1px rgba(201, 164, 92, .35);
}
[data-tema="museu"] body {
  background-color: #17130e;
  background-image:
    radial-gradient(900px 500px at 50% -10%, rgba(201, 164, 92, .16), transparent 65%),
    radial-gradient(700px 400px at 100% 100%, rgba(200, 87, 75, .08), transparent 60%);
}
[data-tema="museu"] body[data-tela="jogo"], [data-tema="museu"] body[data-tela="crono"] { background: var(--jogo-fundo); }
[data-tema="museu"] :is(.carta-frente, .modal, .toast, .leitor-pista, .mini, .tuto-perg) {
  --tinta: #2a2118; --tinta-2: #5d5040; --titulo: #2a2118; --linha: #e3d6b8; --superficie: #fffaf0; --papel: #efe4c8; --petroleo: #2a2118;
}
[data-tema="museu"] .hero h1 { font-weight: 700; font-size: clamp(46px, 8vw, 90px); letter-spacing: -.01em; }
[data-tema="museu"] .hero h1 em { color: var(--ouro); }
[data-tema="museu"] .hero-kicker { color: var(--ouro); }
[data-tema="museu"] .hero::after { content: ""; display: block; width: 120px; height: 2px; margin-top: 26px; background: linear-gradient(90deg, var(--ouro), transparent); }
[data-tema="museu"] .marca-selo { background: transparent; color: var(--ouro); box-shadow: inset 0 0 0 1.5px var(--ouro); }
[data-tema="museu"] :is(.pacote, .modo, .ajustes) { box-shadow: var(--sombra), inset 0 0 0 1px #3e3528; }
[data-tema="museu"] .pacote-capa img { filter: sepia(.35) brightness(.85); }
@media (hover: hover) { [data-tema="museu"] .pacote:hover .pacote-capa img { filter: none; } }
[data-tema="museu"] .pacote-periodo { filter: none; }
[data-tema="museu"] .pacote-txt b, [data-tema="museu"] .modo-txt b { font-size: 1.12em; }
[data-tema="museu"] .modo:not(.ativo) .ico svg { stroke: var(--ouro); fill: rgba(201, 164, 92, .12); }
[data-tema="museu"] .ativo .ico svg { stroke: #17130e; fill: rgba(0, 0, 0, .12); }
[data-tema="museu"] .modo-como { color: var(--ouro); }
[data-tema="museu"] .modo.ativo .modo-como { color: #17130e; }
[data-tema="museu"] .modo.ativo .modo-como::before { color: var(--ouro); }
[data-tema="museu"] .modo-como::before { color: #17130e; }
[data-tema="museu"] .seg { background: #17130e; }
[data-tema="museu"] .nomes input { background: #17130e; color: var(--tinta); }
[data-tema="museu"] .carta-verso {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 25%, rgba(212, 176, 106, .35) 25.5% 26.5%, transparent 27%),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(212, 176, 106, .15) 34.5% 35%, transparent 35.5%),
    linear-gradient(160deg, var(--verso-a), var(--verso-b) 50%, var(--verso-c));
  box-shadow: inset 0 0 0 clamp(3px, 3cqw, 6px) #2a1f14, inset 0 0 0 clamp(4px, 4cqw, 8px) #d4b06a, inset 0 0 0 clamp(6px, 6cqw, 11px) #2a1f14, inset 0 0 0 clamp(7px, 6.8cqw, 12px) #8a6d38, 0 10px 20px -8px #000;
}
[data-tema="museu"] .verso-selo { background: transparent; color: #d4b06a; box-shadow: 0 0 0 1.5cqw #d4b06a; font-style: italic; }
[data-tema="museu"] .carta-frente { box-shadow: inset 0 0 0 2cqw #fffaf0, inset 0 0 0 2.8cqw #c9a45c, 0 10px 20px -8px #000; }
[data-tema="museu"] .f-img img { padding: 2.8cqw 2.8cqw 0; }
[data-tema="museu"] .f-rotulo { border-top: 0; background: #fffaf0; }
[data-tema="museu"] .f-rotulo b { font-size: max(11px, 12cqw); }
[data-tema="museu"] .f-pista { box-shadow: inset 0 0 0 2cqw #fffaf0, inset 0 0 0 2.8cqw #c8574b; background: #fdf6e6; }
[data-tema="museu"] :is(.placar-num span, .vez-j) { background: rgba(212, 176, 106, .08); box-shadow: inset 0 0 0 1px rgba(212, 176, 106, .25); }
[data-tema="museu"] .estrelas span { color: #3e3528; }
[data-tema="museu"] .estrelas span.on { color: var(--ouro); text-shadow: 0 0 24px rgba(212, 176, 106, .6); }
[data-tema="museu"] .tuto-caixa { box-shadow: 0 40px 90px -20px #000, inset 0 0 0 1px rgba(201, 164, 92, .35); }
[data-tema="museu"] :is(.tuto-fala p b, .tuto-etapa) { color: var(--ouro); }
[data-tema="museu"] .ficha figure { background: #120f0b; }
[data-tema="museu"] .modal::backdrop { background: rgba(0, 0, 0, .8); }
[data-tema="museu"] .rev-q { background: #3a211d; }
[data-tema="museu"] .rev-erro { box-shadow: inset 0 0 0 1px var(--coral); }
[data-tema="museu"] .imp-cab .btn-voltar { color: #17130e; background: var(--ouro); }
[data-tema="museu"] .troca input { background: #3e3528; }
[data-tema="museu"] .slot::before { box-shadow: 0 0 0 3px #120f0b; }

/* pergaminhos por cima da grama pixelada */
[data-tema="pixel"] .poderes-jogo { position: relative; z-index: 2; }
[data-tema="pixel"] .poderes-jogo .poder { background: var(--superficie); box-shadow: 3px 3px 0 var(--btn-sombra); }
[data-tema="pixel"] .poderes-jogo .poder:disabled { opacity: .6; }
[data-tema="pixel"] .poder b { font-family: 'Pixelify Sans', var(--sans); font-weight: 600; }

/* marca nas cores de cada tema */
[data-tema="pixel"] .marca-selo { background: none; box-shadow: none; }
[data-tema="pixel"] .m-tras { fill: #5b2d4c; }
[data-tema="pixel"] .m-coluna, [data-tema="pixel"] .m-seta { stroke: var(--ouro); }
[data-tema="pixel"] .marca-svg rect { rx: 0; }
[data-tema="museu"] .marca-selo { background: none; box-shadow: none; }
[data-tema="museu"] .m-tras { fill: #6e4b2a; }
[data-tema="museu"] .m-frente { fill: #f3e9cf; stroke: #17130e; }
[data-tema="museu"] .m-tinta { stroke: #17130e; }
[data-tema="museu"] .m-coluna, [data-tema="museu"] .m-seta { stroke: var(--ouro); }
[data-tema="pixel"] .m-frente { stroke: #2e1427; } [data-tema="pixel"] .m-tinta { stroke: #2e1427; }