/* Sherloku — look moderno: de dia «claro limpo» (branco quente, vermelho de destaque), à noite «noir» (azul-noite com dourado).
   Carrega depois de estilo.css e sobrepõe-se-lhe sem o reescrever: tira as molduras de cantos cortados, a textura de papel e as
   maiúsculas pequenas, e põe cartões arredondados, sombras suaves e letra sem serifas. Por isso há !important em vários sítios
   (o estilo.css tem seletores mais específicos, como `.puzzle:nth-child(odd)`). Tudo o que muda entre dia e noite são variáveis
   (--m-*), definidas uma só vez em cada modo; as regras abaixo só usam variáveis.
   O modo noite segue o mesmo mecanismo do estilo.css: automático pelo sistema, ou à mão com o botão ◐ (data-tema). */

:root {
  --fundo: #f5f3ee; --papel: #ffffff; --papel-2: #f0ede6; --tinta: #1c1b1f; --texto: #1c1b1f; --suave: #6b6a72; --linha: #e4e0d6;
  --parede: #1c1b1f; --verde: #ffffff; --verde-texto: #1c1b1f; --acento: #d7263d; --acento-texto: #ffffff;
  --ouro: #f2b134; --ouro-escuro: #b57d0e; --ouro-claro: #ffd27a; --selo: #d7263d; --ok: #2e9b5a;
  --sombra: 0 4px 18px rgba(28, 27, 31, .08); --decor-filtro: none;
  --serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sala-0: #f6d9d4; --sala-1: #d7ebd6; --sala-2: #fbe7b0; --sala-3: #d0e5f2; --sala-4: #ecd5e6;
  --sala-5: #eadfc4; --sala-6: #cfeadf; --sala-7: #f7dcc2; --sala-8: #dcd6f0;
  /* específicas do look moderno */
  --m-fundo: #f5f3ee;
  --m-topo: #ffffff; --m-topo-linha: #e4e0d6;
  --m-cartao: #ffffff; --m-cartao-sombra: 0 4px 18px rgba(28, 27, 31, .08);
  --m-btn: #ffffff; --m-btn-sombra: 0 1px 2px rgba(28, 27, 31, .08), inset 0 0 0 1px #e4e0d6; --m-btn-ico: #d7263d;
  --m-prim: #2f6f73; --m-prim-cor: #ffffff; --m-prim-sombra: 0 6px 16px rgba(47, 111, 115, .28);
  --m-chip: #ffffff; --m-chip-borda: #e4e0d6; --m-chip-ativo: #1c1b1f; --m-chip-ativo-cor: #ffffff;
  --m-etiq: #1c1b1f; --m-etiq-cor: #ffffff;
  --m-moldura: #ffffff; --m-moldura-borda: transparent; --m-tab: #ffffff;
  --m-rotulo: rgba(255, 255, 255, .94); --m-rotulo-cor: #1c1b1f;
  --m-env-1: #e7d6b4; --m-env-2: #d8c192; --m-env-bolso: #e2cd9f; --m-env-aba: #ecdcb8;
  --m-ficha-borda: #ffffff; --m-selecao: #f2b134; --m-pressionado: #fff4d9; --m-pressionado-cor: #1c1b1f;
  --m-logo: #1c1b1f; --m-logo-ico: #d7263d; --m-tab-linha: rgba(28, 27, 31, .08); --m-piso: .12;
  color-scheme: light;
}

:root[data-tema="escuro"],
:root[data-theme="dark"]:not([data-tema="claro"]) {
  --fundo: #0e1117; --papel: #171b24; --papel-2: #1e2430; --tinta: #eef1f7; --texto: #e9ecf3; --suave: #9aa3b5; --linha: #2c3445;
  --parede: #05070a; --verde: #0e1117; --verde-texto: #eef1f7; --acento: #d8434b; --acento-texto: #ffffff;
  --ouro: #e6b450; --ouro-escuro: #b98a2c; --ouro-claro: #ffd98a; --selo: #ff5a63; --ok: #6fd08c;
  --sombra: 0 8px 24px rgba(0, 0, 0, .45); --decor-filtro: none;
  --sala-0: #3b2d3a; --sala-1: #27403a; --sala-2: #46391f; --sala-3: #22394a; --sala-4: #43283a;
  --sala-5: #3a3426; --sala-6: #25402f; --sala-7: #473025; --sala-8: #342e4a;
  --m-fundo: radial-gradient(1200px 600px at 50% -10%, #1b2233 0%, #0e1117 60%);
  --m-topo: rgba(14, 17, 23, .72); --m-topo-linha: rgba(255, 255, 255, .07);
  --m-cartao: linear-gradient(180deg, #1c2230, #161a23); --m-cartao-sombra: 0 10px 28px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07);
  --m-btn: rgba(255, 255, 255, .07); --m-btn-sombra: inset 0 0 0 1px rgba(255, 255, 255, .1); --m-btn-ico: #e6b450;
  --m-prim: linear-gradient(135deg, #e6b450, #d08c2c); --m-prim-cor: #1a1305; --m-prim-sombra: 0 6px 18px rgba(230, 180, 80, .28);
  --m-chip: rgba(255, 255, 255, .06); --m-chip-borda: transparent; --m-chip-ativo: #e6b450; --m-chip-ativo-cor: #1a1305;
  --m-etiq: transparent; --m-etiq-cor: #e6b450;
  --m-moldura: #0b0e14; --m-moldura-borda: rgba(255, 255, 255, .08); --m-tab: #0b0e14;
  --m-rotulo: rgba(14, 17, 23, .86); --m-rotulo-cor: #f1d58f;
  --m-env-1: #2a3144; --m-env-2: #1a1f2b; --m-env-bolso: #313a50; --m-env-aba: #3a4560;
  --m-ficha-borda: #e6b450; --m-selecao: #e6b450; --m-pressionado: rgba(230, 180, 80, .18); --m-pressionado-cor: #ffd98a;
  --m-logo: #eef1f7; --m-logo-ico: #e6b450; --m-tab-linha: rgba(255, 255, 255, .07); --m-piso: .22;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-theme="light"]) {
    --fundo: #0e1117; --papel: #171b24; --papel-2: #1e2430; --tinta: #eef1f7; --texto: #e9ecf3; --suave: #9aa3b5; --linha: #2c3445;
    --parede: #05070a; --verde: #0e1117; --verde-texto: #eef1f7; --acento: #d8434b; --acento-texto: #ffffff;
    --ouro: #e6b450; --ouro-escuro: #b98a2c; --ouro-claro: #ffd98a; --selo: #ff5a63; --ok: #6fd08c;
    --sombra: 0 8px 24px rgba(0, 0, 0, .45); --decor-filtro: none;
    --sala-0: #3b2d3a; --sala-1: #27403a; --sala-2: #46391f; --sala-3: #22394a; --sala-4: #43283a;
    --sala-5: #3a3426; --sala-6: #25402f; --sala-7: #473025; --sala-8: #342e4a;
    --m-fundo: radial-gradient(1200px 600px at 50% -10%, #1b2233 0%, #0e1117 60%);
    --m-topo: rgba(14, 17, 23, .72); --m-topo-linha: rgba(255, 255, 255, .07);
    --m-cartao: linear-gradient(180deg, #1c2230, #161a23); --m-cartao-sombra: 0 10px 28px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07);
    --m-btn: rgba(255, 255, 255, .07); --m-btn-sombra: inset 0 0 0 1px rgba(255, 255, 255, .1); --m-btn-ico: #e6b450;
    --m-prim: linear-gradient(135deg, #e6b450, #d08c2c); --m-prim-cor: #1a1305; --m-prim-sombra: 0 6px 18px rgba(230, 180, 80, .28);
    --m-chip: rgba(255, 255, 255, .06); --m-chip-borda: transparent; --m-chip-ativo: #e6b450; --m-chip-ativo-cor: #1a1305;
    --m-etiq: transparent; --m-etiq-cor: #e6b450;
    --m-moldura: #0b0e14; --m-moldura-borda: rgba(255, 255, 255, .08); --m-tab: #0b0e14;
    --m-rotulo: rgba(14, 17, 23, .86); --m-rotulo-cor: #f1d58f;
    --m-env-1: #2a3144; --m-env-2: #1a1f2b; --m-env-bolso: #313a50; --m-env-aba: #3a4560;
    --m-ficha-borda: #e6b450; --m-selecao: #e6b450; --m-pressionado: rgba(230, 180, 80, .18); --m-pressionado-cor: #ffd98a;
    --m-logo: #eef1f7; --m-logo-ico: #e6b450; --m-tab-linha: rgba(255, 255, 255, .07); --m-piso: .22;
    color-scheme: dark;
  }
}

/* ---------- fundo e topo: sem papel antigo, sem vinheta, sem objetos de secretária ---------- */
body { background: var(--m-fundo) !important; background-attachment: fixed !important; font-family: var(--serif) !important; }
body::before, .decor, .topo::before { display: none !important; }
.topo { background: var(--m-topo) !important; color: var(--m-logo) !important; border-bottom: 1px solid var(--m-topo-linha) !important; box-shadow: none !important; backdrop-filter: blur(14px); }
.logo { color: var(--m-logo) !important; letter-spacing: .14em !important; font-weight: 800 !important; font-size: 1.2rem !important; }
.logo span { background: none !important; -webkit-text-fill-color: var(--m-logo) !important; color: var(--m-logo) !important; filter: none !important; }
.logo svg { color: var(--m-logo-ico) !important; }
.logo .logo-palavra { width: 156px; height: auto; display: block; }
@media (min-width: 768px) { .logo .logo-palavra { width: 240px; } }
.topo-acoes button { border: 1px solid var(--m-topo-linha) !important; background: var(--m-btn) !important; box-shadow: none !important; color: var(--texto) !important; }

/* ---------- texto de abertura, pastas e filtros ---------- */
.intro h1 { font-variant: normal !important; letter-spacing: 0 !important; font-size: 1.7rem !important; font-weight: 800 !important; }
.intro p { color: var(--suave) !important; font-style: normal !important; }
.intro::after, .cartao::after, .canto { display: none !important; }
.etiqueta { clip-path: none !important; background: var(--m-etiq) !important; color: var(--m-etiq-cor) !important; border-radius: 999px; padding: 4px 14px !important; letter-spacing: .14em !important; font-size: .72rem !important; }
:root[data-tema="escuro"] .etiqueta { padding-left: 0 !important; }
.nivel h2::after { border-top: 1px solid var(--linha) !important; }
.nivel h2 .contagem { font-style: normal !important; }
.filtro { border: 1px solid var(--m-chip-borda) !important; background: var(--m-chip) !important; color: var(--texto) !important; }
.filtro.ativo { background: var(--m-chip-ativo) !important; color: var(--m-chip-ativo-cor) !important; border-color: transparent !important; }
.filtro b, .filtro.ativo b { color: inherit !important; }

/* ---------- cartões e janelas ---------- */
.puzzle, .cartao, .gerais, .modal-caixa {
  border: 0 !important; border-image: none !important; border-radius: 20px !important; background: var(--m-cartao) !important;
  box-shadow: var(--m-cartao-sombra) !important; transform: none !important;
}
.puzzle { padding: 10px !important; }
.puzzle::before { display: none !important; }
.puzzle .mini { border: 0 !important; border-radius: 14px !important; }
.puzzle strong { font-size: .98rem !important; }
.puzzle small { font-style: normal !important; }
.puzzle .estado { font-variant: normal !important; letter-spacing: 0 !important; color: var(--suave) !important; }
.puzzle .estado.meio { color: var(--acento) !important; }
.puzzle.feito { padding: 6px !important; }
.puzzle.feito .estado { color: var(--suave) !important; }
.puzzle.fechado strong { font-style: normal !important; }
.puzzle.fechado .envelope { border: 0 !important; border-radius: 14px; background: linear-gradient(160deg, var(--m-env-1), var(--m-env-2)) !important; }
.puzzle .envelope .bolso { background: var(--m-env-bolso) !important; }
.puzzle .envelope .aba { background: var(--m-env-aba) !important; }
.puzzle .envelope .folha { background: var(--papel) !important; border: 0 !important; }
.puzzle .vitima-selo { outline: 0 !important; border-color: var(--papel) !important; }
.modal-caixa h2 { font-variant: normal !important; }
.modal-caixa h2::after { display: none !important; }
.modal-caixa h3 { color: var(--acento) !important; }
.gerais h3 { color: var(--acento) !important; }

/* ---------- botões ---------- */
.btn {
  border: 0 !important; border-radius: 14px !important; background: var(--m-btn) !important; color: var(--texto) !important;
  box-shadow: var(--m-btn-sombra) !important; font-variant: normal !important; letter-spacing: .01em !important;
}
.btn .ico { color: var(--m-btn-ico) !important; }
.btn.primario { background: var(--m-prim) !important; color: var(--m-prim-cor) !important; box-shadow: var(--m-prim-sombra) !important; }
.btn.primario .ico { color: var(--m-prim-cor) !important; }
.btn[aria-pressed="true"] { background: var(--m-pressionado) !important; color: var(--m-pressionado-cor) !important; box-shadow: inset 0 0 0 2px var(--ouro) !important; }
.btn.atalho small { opacity: .8; }
.jogo-cabeca .voltar, .relogio { border: 0 !important; background: var(--m-btn) !important; box-shadow: var(--m-btn-sombra) !important; border-radius: 14px !important; color: var(--texto) !important; }
.jogo-cabeca .titulo span { font-style: normal !important; }

/* ---------- o mapa ---------- */
.moldura { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 10px 12px 0 !important; }   /* sem caixa branca: a sombra da planta assenta no fundo da página */
.tabuleiro { border: 0 !important; border-radius: 0; overflow: hidden; background: transparent !important; }
.celula { border-color: var(--m-tab-linha); }   /* só as arestas interiores: as paredes (.pt/.pr/.pb/.pl) vêm de estilo.css e ficam escuras */
.celula::before { opacity: var(--m-piso) !important; }
.rotulo { background: var(--m-rotulo) !important; color: var(--m-rotulo-cor) !important; border: 0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .22) !important; backdrop-filter: blur(4px); }
.legenda { font-style: normal !important; }
.legenda i { border: 0 !important; border-radius: 4px; background-color: color-mix(in srgb, var(--cs) 30%, var(--cp, var(--cs))) !important; }
.ficha { border: 2px solid var(--m-ficha-borda) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, .3) !important; }

/* ---------- cartões das pessoas ---------- */
.cartao .nome { font-weight: 800 !important; }
.cartao::before { background: var(--m-etiq-cor) !important; color: var(--m-etiq) !important; border: 0 !important; border-radius: 8px !important; }
:root[data-tema="escuro"] .cartao::before { background: var(--ouro) !important; color: #1a1305 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .cartao::before { background: var(--ouro) !important; color: #1a1305 !important; } }
.cartao.vitima::before { background: var(--selo) !important; color: #ffffff !important; }
.cartao.sel { box-shadow: 0 0 0 4px var(--m-selecao), 0 0 0 7px color-mix(in srgb, var(--m-selecao) 28%, transparent), var(--m-cartao-sombra) !important; }
.cartao .retrato { border-bottom: 0 !important; }
.carimbo-grande { background: color-mix(in srgb, var(--papel) 75%, transparent) !important; }
.legenda i.v1 { background-color: color-mix(in srgb, var(--cs) 30%, color-mix(in srgb, var(--cp, var(--cs)) 82%, #fff)) !important; }
.legenda i.v2 { background-color: color-mix(in srgb, var(--cs) 30%, color-mix(in srgb, var(--cp, var(--cs)) 80%, #3a1c00)) !important; }

/* ---------- réplica das proporções da referência (murdoku.com): linhas, letras, cartões e barra de botões ---------- */
@font-face { font-family: "Inter"; src: url("../assets/fontes/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../assets/fontes/caveat-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --serif: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --letra-nomes: "Caveat", "Segoe Script", cursive;
  --pes-0: #c0563f; --pes-1: #2f8f4e; --pes-2: #3aa0ad; --pes-3: #5f79c8; --pes-4: #7a4f9a; --pes-5: #a64a6a; --pes-6: #e0793f; --pes-7: #3f4aa6; --pes-8: #8a7a2a; --pes-v: #d58a8a;
}
body { font-family: var(--serif) !important; }

/* Linhas do mapa em proporção à casa (--u = 1 % da casa): grelha 4 %, paredes entre divisões 12 % (6 % em cada casa vizinha),
   contorno do mapa 10 %. Tudo a preto como na referência. */
.celula { --u: calc(1cqw / var(--n)); border: max(1px, calc(var(--u) * 2)) solid color-mix(in srgb, var(--parede) 55%, transparent); }
.celula.pt { border-top: max(2px, calc(var(--u) * 6)) solid var(--parede) !important; }
.celula.pr { border-right: max(2px, calc(var(--u) * 6)) solid var(--parede) !important; }
.celula.pb { border-bottom: max(2px, calc(var(--u) * 6)) solid var(--parede) !important; }
.celula.pl { border-left: max(2px, calc(var(--u) * 6)) solid var(--parede) !important; }
.celula.xf-t { border-top-width: max(3px, calc(var(--u) * 10)) !important; } .celula.xf-r { border-right-width: max(3px, calc(var(--u) * 10)) !important; }
.celula.xf-b { border-bottom-width: max(3px, calc(var(--u) * 10)) !important; } .celula.xf-l { border-left-width: max(3px, calc(var(--u) * 10)) !important; }
/* nome da divisão: branco com contorno preto grosso, sem etiqueta */
.rotulo {
  background: none !important; box-shadow: none !important; backdrop-filter: none; border: 0 !important; border-radius: 0 !important; padding: .25em .3em !important; margin: -.25em -.3em; color: #fff !important;
  font-family: var(--serif) !important; font-weight: 900 !important; letter-spacing: .03em; line-height: 1; text-align: left;
  font-size: clamp(8px, 2.8vw, 12px) !important; -webkit-text-stroke: .3em #000; paint-order: stroke fill;
}

/* Cartões das personagens: retrato à esquerda, letra a cor, nome manuscrito, pista com o essencial a negrito */
.tit-suspeitos { margin: 18px 2px 8px; font-size: .875rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--suave); }
.cartoes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.cartao {
  --cp: var(--pes-0);
  display: flex !important; flex-direction: row !important; align-items: stretch; gap: 5px; padding: 0 6px 0 11px !important; overflow: hidden;
  border: 2px solid var(--tinta) !important; border-radius: 8px !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--cp) 16%, var(--papel)) !important; text-align: left;
}
.cartao::before { content: "" !important; position: absolute !important; inset: 0 auto 0 0 !important; width: 5px !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--cp) !important; }
.cartao.vitima::before { background: var(--cp) !important; content: "" !important; }
.cartao::after { display: none !important; }
.cartao .retrato { flex: none; width: 58px !important; height: 72px !important; aspect-ratio: auto !important; align-self: center; object-fit: contain; border: 0 !important; }
.cartao .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 4px 4px 6px 2px; }
.cartao .nome { display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 0 6px; padding: 0 !important; font-weight: 700 !important; font-size: 1.3rem !important; line-height: 1.1; }
.cartao .nome .nm { font-family: var(--letra-nomes); font-size: 1.3rem; font-weight: 700; }
.cartao .nome .letra { font: 900 1.08rem var(--serif); color: var(--cp); }
.cartao .nome small { font: 600 .72rem var(--serif); opacity: .7; }
.cartao .textos { padding: 2px 0 0 !important; font-size: .935rem !important; line-height: 1.25; }
.cartao .textos p { margin: 2px 0 !important; }
.cartao .textos b { font-weight: 900; }
.cartao.vitima .nome { color: inherit; }
.cartao.colocado .nome::after { content: ""; display: none; }
.cartao.colocado { opacity: .62; }
.cartao.sel { opacity: 1; box-shadow: 0 0 0 3px var(--m-selecao) !important; }

@media (max-width: 700px) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartao .nome { font-size: 1.1rem !important; } .cartao .nome .nm { font-size: 1.2rem; }
  .cartao .textos { font-size: .8rem !important; }
  /* regras gerais (e nota do inspetor) com o tamanho do texto das pistas, para gastar menos ecrã */
  .gerais { padding: 5px 10px 6px !important; margin-bottom: 10px !important; font-size: .8rem; line-height: 1.25; }
  .gerais h3 { font-size: .68rem !important; margin-bottom: 2px !important; }
  .gerais p { margin: 2px 0 !important; }
  .cartao .retrato { width: 48px !important; height: 62px !important; }
  /* o mapa primeiro, depois os suspeitos; objetos e legenda no fim; botões numa barra fixa em baixo */
  .jogo-corpo { display: flex !important; flex-direction: column; padding-bottom: 84px; }
  .lado-tabuleiro { display: contents !important; }
  .lado-tabuleiro .moldura { order: 0; } .lado-tabuleiro .dica-rolar { order: 1; }
  .lado-cartoes { order: 2; } .lado-tabuleiro .tipos-obj { order: 3; margin-top: 18px; } .lado-tabuleiro .legenda { order: 4; }
  .ferramentas {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0 !important; max-width: none !important; gap: 10px !important;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: var(--m-topo); border-top: 1px solid var(--m-topo-linha);
  }
  .ferramentas .btn {
    flex: 1 1 0 !important; height: 48px; min-height: 48px; padding: 0 4px !important; justify-content: center; gap: 2px !important;
    border: 2px solid var(--tinta) !important; border-radius: 10px !important; background: var(--papel-2) !important; box-shadow: none !important;
    font: 900 .72rem/1.1 var(--serif) !important; text-transform: uppercase; letter-spacing: 0 !important; font-variant: normal !important; color: var(--suave) !important;
  }
  .ferramentas .btn#b-desfazer { flex: 1.5 1 0 !important; }
  .ferramentas .btn#b-cruz, .ferramentas .btn#b-limpar, .ferramentas .btn#b-dica { flex: 0.9 1 0 !important; }
  .ferramentas .btn.primario { flex: 1.5 1 0 !important; background: var(--acento) !important; color: var(--acento-texto) !important; border-color: var(--tinta) !important; }
  .ferramentas .btn .ico { width: 16px; height: 16px; }
}

/* paredes entre divisões: linhas contínuas de 12 % da casa, prolongadas meia espessura onde encontram outra parede
   (os bordos das casas ficam só com a grelha fina; o contorno do mapa continua nos bordos, a 10 %) */
.tabuleiro { position: relative; --u: calc(1cqw / var(--n)); }
.muro { position: absolute; z-index: 2; pointer-events: none; background: var(--parede); }
.muro.h {
  left: calc(var(--x) / var(--n) * 100% - var(--e0) * var(--u) * 6); top: calc(var(--y) / var(--n) * 100% - var(--u) * 6);
  width: calc(var(--len) / var(--n) * 100% + (var(--e0) + var(--e1)) * var(--u) * 6); height: calc(var(--u) * 12);
}
.muro.v {
  top: calc(var(--y) / var(--n) * 100% - var(--e0) * var(--u) * 6); left: calc(var(--x) / var(--n) * 100% - var(--u) * 6);
  height: calc(var(--len) / var(--n) * 100% + (var(--e0) + var(--e1)) * var(--u) * 6); width: calc(var(--u) * 12);
}
.celula.pt:not(.xf-t) { border-top: max(1px, calc(var(--u) * 2)) solid color-mix(in srgb, var(--parede) 55%, transparent) !important; }
.celula.pr:not(.xf-r) { border-right: max(1px, calc(var(--u) * 2)) solid color-mix(in srgb, var(--parede) 55%, transparent) !important; }
.celula.pb:not(.xf-b) { border-bottom: max(1px, calc(var(--u) * 2)) solid color-mix(in srgb, var(--parede) 55%, transparent) !important; }
.celula.pl:not(.xf-l) { border-left: max(1px, calc(var(--u) * 2)) solid color-mix(in srgb, var(--parede) 55%, transparent) !important; }
/* na montagem as paredes só aparecem quando as divisões assentam */
@keyframes surge-muro { from { opacity: 0; } to { opacity: 1; } }
.tabuleiro.montando .muro { animation: surge-muro .3s ease-out calc(var(--assenta, 1.6s) - 300ms) both; }
@media (prefers-reduced-motion: reduce) { .tabuleiro.montando .muro { animation: none; } }
/* telemóvel: o mapa ocupa a largura toda (sem as margens automáticas de centrar), com a sombra a sair para a direita */
@media (max-width: 700px) {
  .lado-tabuleiro .moldura { width: calc(100% + 12px) !important; align-self: center; margin: 0 -6px !important; max-width: none !important; padding: 0 8px 8px 0 !important; }
  .tabuleiro { max-width: none !important; }
}

/* Fundo da página por cenário: cada caso tem o seu tom (body[data-cenario] é posto ao abrir o caso). */
body[data-cenario] { --m-fundo: linear-gradient(180deg, var(--cen-a) 0%, var(--cen-b) 100%); transition: background-color .4s; }
body[data-cenario="mansao"]    { --cen-a: #f6efe4; --cen-b: #ecdcc6; }
body[data-cenario="estacao"]   { --cen-a: #eef0f2; --cen-b: #d9dee3; }
body[data-cenario="casacha"]   { --cen-a: #f8eded; --cen-b: #efd6d9; }
body[data-cenario="museu"]     { --cen-a: #eef2ea; --cen-b: #d8e2d0; }
body[data-cenario="boticario"] { --cen-a: #e9f3f1; --cen-b: #cfe3df; }
body[data-cenario="porto"]     { --cen-a: #e8f2f8; --cen-b: #c4dcea; }
body[data-cenario="circo"] { --cen-a: #fbeaea; --cen-b: #f3cfcf; }
body[data-cenario="hotel"] { --cen-a: #f2ebe3; --cen-b: #dccdbb; }
body[data-cenario="estudio"] { --cen-a: #efeaf5; --cen-b: #d9cfe8; }
body[data-cenario="quinta"] { --cen-a: #f3ecd9; --cen-b: #e2d3a8; }
body[data-cenario="colegio"] { --cen-a: #e7f0e8; --cen-b: #c9dccb; }
body[data-cenario="transatlantico"] { --cen-a: #e6eef7; --cen-b: #c3d4e6; }
:root[data-tema="escuro"] body[data-cenario="mansao"]    { --cen-a: #1f1a16; --cen-b: #120f0d; }
:root[data-tema="escuro"] body[data-cenario="estacao"]   { --cen-a: #1a1e24; --cen-b: #0e1116; }
:root[data-tema="escuro"] body[data-cenario="casacha"]   { --cen-a: #241a1c; --cen-b: #140f10; }
:root[data-tema="escuro"] body[data-cenario="museu"]     { --cen-a: #181f19; --cen-b: #0d120e; }
:root[data-tema="escuro"] body[data-cenario="boticario"] { --cen-a: #162221; --cen-b: #0c1413; }
:root[data-tema="escuro"] body[data-cenario="porto"]     { --cen-a: #142331; --cen-b: #0a1119; }
:root[data-tema="escuro"] body[data-cenario="circo"] { --cen-a: #2a1416; --cen-b: #150a0b; }
:root[data-tema="escuro"] body[data-cenario="hotel"] { --cen-a: #261d16; --cen-b: #120d09; }
:root[data-tema="escuro"] body[data-cenario="estudio"] { --cen-a: #1f1a2b; --cen-b: #0e0b15; }
:root[data-tema="escuro"] body[data-cenario="quinta"] { --cen-a: #2a2412; --cen-b: #14110a; }
:root[data-tema="escuro"] body[data-cenario="colegio"] { --cen-a: #14241a; --cen-b: #0a120d; }
:root[data-tema="escuro"] body[data-cenario="transatlantico"] { --cen-a: #121d33; --cen-b: #090e1a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) body[data-cenario="mansao"]    { --cen-a: #1f1a16; --cen-b: #120f0d; }
  :root:not([data-tema="claro"]) body[data-cenario="estacao"]   { --cen-a: #1a1e24; --cen-b: #0e1116; }
  :root:not([data-tema="claro"]) body[data-cenario="casacha"]   { --cen-a: #241a1c; --cen-b: #140f10; }
  :root:not([data-tema="claro"]) body[data-cenario="museu"]     { --cen-a: #181f19; --cen-b: #0d120e; }
  :root:not([data-tema="claro"]) body[data-cenario="boticario"] { --cen-a: #162221; --cen-b: #0c1413; }
  :root:not([data-tema="claro"]) body[data-cenario="porto"]     { --cen-a: #142331; --cen-b: #0a1119; }
  :root:not([data-tema="claro"]) body[data-cenario="circo"] { --cen-a: #2a1416; --cen-b: #150a0b; }
  :root:not([data-tema="claro"]) body[data-cenario="hotel"] { --cen-a: #261d16; --cen-b: #120d09; }
  :root:not([data-tema="claro"]) body[data-cenario="estudio"] { --cen-a: #1f1a2b; --cen-b: #0e0b15; }
  :root:not([data-tema="claro"]) body[data-cenario="quinta"] { --cen-a: #2a2412; --cen-b: #14110a; }
  :root:not([data-tema="claro"]) body[data-cenario="colegio"] { --cen-a: #14241a; --cen-b: #0a120d; }
  :root:not([data-tema="claro"]) body[data-cenario="transatlantico"] { --cen-a: #121d33; --cen-b: #090e1a; }
}

/* Capítulos no ecrã inicial */
.nivel-cab h2 .cap-ico { font-size: 1.6rem; line-height: 1; margin-right: 0.6rem; flex: none; }
.nivel-cab h2 .cap-titulo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--tinta, inherit); line-height: 1.15; }
.nivel-cab h2 .cap-num { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; font-weight: 600; }

.cap-ico .cap-img { width: 2rem; height: 2rem; object-fit: contain; display: block; }

/* filtros do ecrã inicial: uma só linha no telemóvel */
@media (max-width: 480px) {
  .filtros { flex-wrap: nowrap; gap: 4px; }
  .filtro { flex: 1 1 auto; min-width: 0; padding: 5px 6px; font-size: .75rem; white-space: nowrap; }
  .filtro b { margin-left: 2px; }
}

/* tapetes decorativos (zonas em retângulo ou em L): cada casa desenha a sua parte; só os lados expostos têm margem, orla e franja */
.tz { --tc: #a8453f; --d: calc(5cqw / var(--n)); --g: calc(13cqw / var(--n)); position: absolute; z-index: 0; inset: 0; box-sizing: border-box; pointer-events: none; background-color: var(--tc);
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 240, 200, .28) 0 14%, transparent 15%), radial-gradient(circle at 0 0, rgba(255, 240, 200, .16) 0 12%, transparent 13%); background-size: 50% 50%;
  --st: 0px; --sr: 0px; --sb: 0px; --sl: 0px;
  box-shadow: inset 0 var(--st) 0 0 #3a1c10, inset calc(-1 * var(--sr)) 0 0 0 #3a1c10, inset 0 calc(-1 * var(--sb)) 0 0 #3a1c10, inset var(--sl) 0 0 0 #3a1c10; }
/* cor e motivo conforme o piso da divisão: persa na madeira, damasco no salão de losangos, tapete liso de riscas no ladrilho */
.tz-p-madeira.tz-c0 { --tc: #9a3f36; } .tz-p-madeira.tz-c1 { --tc: #35607a; } .tz-p-madeira.tz-c2 { --tc: #5f7f43; }
.tz-p-losango { box-shadow: inset 0 var(--st) 0 0 #3a1c28, inset calc(-1 * var(--sr)) 0 0 0 #3a1c28, inset 0 calc(-1 * var(--sb)) 0 0 #3a1c28, inset var(--sl) 0 0 0 #3a1c28; }
.tz-p-losango.tz-c0 { --tc: #8a3558; } .tz-p-losango.tz-c1 { --tc: #2f6e6b; } .tz-p-losango.tz-c2 { --tc: #a3762f; }
.tz-p-losango { background-image: linear-gradient(45deg, rgba(255, 240, 210, .2) 25%, transparent 25% 75%, rgba(255, 240, 210, .2) 75%), linear-gradient(45deg, rgba(255, 240, 210, .2) 25%, transparent 25% 75%, rgba(255, 240, 210, .2) 75%); background-size: 50% 50%; background-position: 0 0, 25% 25%; }
.tz-p-pedra.tz-c0 { --tc: #7a4a3a; } .tz-p-pedra.tz-c1 { --tc: #4a5f6e; } .tz-p-pedra.tz-c2 { --tc: #6b6a3f; }
.tz-p-ladrilho.tz-c0 { --tc: #5d86a0; } .tz-p-ladrilho.tz-c1 { --tc: #7f9d7c; } .tz-p-ladrilho.tz-c2 { --tc: #a8946c; }
.tz-p-ladrilho { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0 7%, transparent 7% 22%); background-size: auto; box-shadow: inset 0 var(--st) 0 0 #2b3a44, inset calc(-1 * var(--sr)) 0 0 0 #2b3a44, inset 0 calc(-1 * var(--sb)) 0 0 #2b3a44, inset var(--sl) 0 0 0 #2b3a44; }
.tz.tz-t { top: 9%; --st: var(--d); } .tz.tz-r { right: 9%; --sr: var(--d); } .tz.tz-b { bottom: 9%; --sb: var(--d); } .tz.tz-l { left: 9%; --sl: var(--d); }
.tz.tz-t.tz-l { border-top-left-radius: 22%; } .tz.tz-t.tz-r { border-top-right-radius: 22%; } .tz.tz-b.tz-r { border-bottom-right-radius: 22%; } .tz.tz-b.tz-l { border-bottom-left-radius: 22%; }
.celula .icone.sup { z-index: 1; }

/* Realce das pistas da pessoa escolhida: contorno azul à volta do conjunto de casas e véu azul leve */
.celula .alvo { --az: #2f7bff; --e: max(3px, calc(var(--u) * 9)); position: absolute; inset: 0; z-index: 4; pointer-events: none; background: color-mix(in srgb, var(--az) 14%, transparent);
  box-shadow: inset 0 var(--s-t, 0) 0 0 var(--az), inset calc(-1 * var(--s-r, 0px)) 0 0 0 var(--az), inset 0 calc(-1 * var(--s-b, 0px)) 0 0 var(--az), inset var(--s-l, 0px) 0 0 0 var(--az); }
.celula .alvo.a-t { --s-t: var(--e); } .celula .alvo.a-r { --s-r: var(--e); } .celula .alvo.a-b { --s-b: var(--e); } .celula .alvo.a-l { --s-l: var(--e); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .celula .alvo { --az: #6aa6ff; } }
:root[data-theme="dark"] .celula .alvo { --az: #6aa6ff; }

/* ecrã inicial no telemóvel: tamanhos de letra e botões como no murdoku.com (texto ~10-11 px, botões de ~26 px, casos em duas colunas) */
@media (max-width: 480px) {
  .topo { padding-top: 6px !important; padding-bottom: 6px !important; }
  .logo { font-size: 1.05rem !important; }
  .logo .logo-palavra { width: 138px !important; }
  .topo-acoes button { width: 30px !important; height: 30px !important; min-width: 0 !important; font-size: .8rem !important; }
  .intro { margin: 6px 0 8px !important; }
  .intro h1 { font-size: 1.05rem !important; margin-bottom: 3px !important; line-height: 1.2 !important; }
  .intro p { font-size: .7rem !important; line-height: 1.35 !important; }
  .intro::after { display: none !important; }
  .atalhos { grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin: 0 0 8px !important; }
  .btn.atalho { padding: 5px 8px !important; min-height: 36px !important; font-size: .76rem !important; line-height: 1.2 !important; border-radius: 10px !important; }
  .btn.atalho small { font-size: .62rem !important; line-height: 1.25 !important; }
  .filtro { padding: 0 6px !important; height: 28px !important; min-height: 28px !important; font-size: .66rem !important; }
  .nivel { margin: 12px 0 4px !important; }
  .nivel h2 { margin-bottom: 8px !important; gap: 8px !important; font-size: .75rem !important; }
  .cap-ico { transform: scale(.7); transform-origin: center; }
  .cap-titulo { font-size: .85rem !important; line-height: 1.15 !important; }
  .cap-num { font-size: .58rem !important; }
  .contagem { font-size: .68rem !important; }
  .lista { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .lista.compacta { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .puzzle { padding: 6px !important; }
  .puzzle .envelope { aspect-ratio: 16 / 9 !important; height: auto !important; }
  .puzzle strong { font-size: .85rem !important; }
  .puzzle small { font-size: .62rem !important; }
  .puzzle .estado { font-size: .62rem !important; }
  .puzzle em { font-size: .5rem !important; }
}

/* ---------- mapa mais legível: chão por divisão, etiquetas no mesmo canto, objetos mais calmos ---------- */
.celula { background-color: color-mix(in srgb, var(--cs) 50%, var(--cp, var(--cs))) !important; }
.celula.v1 { background-color: color-mix(in srgb, var(--cs) 50%, color-mix(in srgb, var(--cp, var(--cs)) 82%, #fff)) !important; }
.celula.v2 { background-color: color-mix(in srgb, var(--cs) 50%, color-mix(in srgb, var(--cp, var(--cs)) 80%, #3a1c00)) !important; }
.celula::before { opacity: calc(var(--m-piso) * 2.4) !important; }
.rotulo { top: auto !important; bottom: 1px; left: 3px; }
.rotulo.dir { left: auto !important; right: 3px; }
.celula .icone { inset: 8% !important; width: 84% !important; height: 84% !important; }
.celula .icone.obst { filter: saturate(.82) drop-shadow(1px 2px 1px rgba(43, 25, 8, .4)) !important; }
.celula .icone.sup { filter: saturate(.8) !important; }
.objeto-grande { padding: 7% !important; }
.objeto-grande.obst { filter: saturate(.82) drop-shadow(1px 2px 1px rgba(43, 25, 8, .4)) !important; }