:root {
  --bg: #121016;
  --bg-elevated: #1a1820;
  --card: #201d27;
  --card-2: #262230;
  --border: #34303e;
  --border-soft: #2a2632;
  --text: #f3f0ec;
  --text-dim: #a9a3b3;
  --text-faint: #726c7c;
  --accent: #e08a4f;
  --accent-2: #f0a868;
  --accent-ink: #1a1008;
  --danger: #d9634f;
  --success: #6fbf8b;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --card-sheen: rgba(255,255,255,0.05);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 44px rgba(0,0,0,0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -8%, rgba(224,138,79,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(60,50,80,0.18), transparent 55%),
    radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.3px) 0 0/26px 26px,
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* fundo ambiente: 4 manchas de cor vivas, borradas e em deriva — atrás de tudo, mas bem mais
   presentes que um detalhe sutil (o usuário achou a versão anterior "sem cor nenhuma"). O
   mix-blend-mode:screen faz as cores clarearem de verdade sobre o fundo escuro (em vez de só
   tingir de leve) e, onde duas manchas se cruzam, brilham ainda mais — reforça a sensação de
   luzes de neon/holofote de investigação se movendo, sem virar uma lavagem de cor sólida. */
#ambientBg {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* ilustração de fundo (assets/ambient-bg.png) — skyline noturno discreto, sem texto nem
   elemento central, pensada pra ficar atrás dos cards. Zoom/pan bem lento (quase 1 minuto de
   ciclo) pra parecer viva sem chamar atenção — Ken Burns, não slideshow. */
.ambient-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  /* a imagem em si é discreta/baixo contraste por design (fundo, não protagonista) — mas
     ficou sutil demais num celular de verdade, então reforça aqui pra ela realmente aparecer. */
  filter: brightness(1.45) contrast(1.3) saturate(1.4);
}
@media (prefers-reduced-motion: no-preference) {
  .ambient-photo { animation: photoDrift 48s ease-in-out infinite alternate; }
}
@keyframes photoDrift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(-2%, -1.5%); }
}
/* manchas de cor vivas por cima da foto — o mix-blend-mode:screen clareia de verdade (não só
   tinge) e onde duas se cruzam brilham ainda mais, reforçando a sensação de luz de neon/
   holofote de investigação se movendo sobre a cidade. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  mix-blend-mode: screen;
}
.blob-a {
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  top: -130px; left: -110px;
  opacity: 0.48;
}
.blob-b {
  width: 440px; height: 440px;
  background: radial-gradient(circle, #8a6ae0, transparent 70%);
  bottom: -120px; right: -100px;
  opacity: 0.44;
}
.blob-c {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #4fd6b0, transparent 70%);
  top: 38%; right: -150px;
  opacity: 0.34;
}
.blob-d {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #e0527a, transparent 70%);
  bottom: 12%; left: -140px;
  opacity: 0.32;
}
@media (prefers-reduced-motion: no-preference) {
  .blob-a { animation: driftA 19s ease-in-out infinite alternate; }
  .blob-b { animation: driftB 25s ease-in-out infinite alternate; }
  .blob-c { animation: driftC 31s ease-in-out infinite alternate; }
  .blob-d { animation: driftD 22s ease-in-out infinite alternate; }
}
@keyframes driftA {
  from { transform: translate(0, 0) scale(1); opacity: 0.48; }
  to { transform: translate(110px, 130px) scale(1.3); opacity: 0.62; }
}
@keyframes driftB {
  from { transform: translate(0, 0) scale(1); opacity: 0.44; }
  to { transform: translate(-120px, -90px) scale(1.2); opacity: 0.58; }
}
@keyframes driftC {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-90px, 100px) scale(1.25); }
}
@keyframes driftD {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(100px, -80px) scale(1.15); }
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.2px;
}
p { margin: 0; }
button { font: inherit; }

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
/* foco é 100% mobile/tablet (sem versão desktop) — o board já tem teto próprio
   (.board{width:min(100%,520px)}), então alargar #app não estica o tabuleiro, só dá mais
   respiro pro texto/botões das telas de menu em telas de tablet. */
@media (min-width: 700px) {
  #app { max-width: 680px; }
}
@media (min-width: 1000px) {
  #app { max-width: 780px; }
}

.screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: calc(24px + var(--safe-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + var(--safe-top)) 16px 12px;
  position: sticky;
  top: 0;
  background: linear-gradient(var(--bg) 80%, transparent);
  z-index: 5;
}
.topbar-title { flex: 1; text-align: center; }
.topbar-title h2 { font-size: 1.05rem; }
.topbar-sub { font-size: 0.72rem; color: var(--text-dim); text-align: center; margin-top: 2px; }

.icon-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--card-2), var(--card));
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--card-sheen), var(--shadow-sm);
  transition: transform 0.08s ease;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn.active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* reação de toque: um brilho radial sobe rápido ao pressionar e desce devagar ao soltar —
   além do scale já existente, dá uma resposta visível/"viva" em botões, cards clicáveis e
   pílulas de filtro, sem precisar de JS pra rastrear a posição do toque. */
.btn, .icon-btn, .card.pressable, .filter-pill, .case-tile {
  position: relative;
  overflow: hidden;
}
.btn::after, .icon-btn::after, .card.pressable::after, .filter-pill::after, .case-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.32), transparent 70%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.btn:active::after, .icon-btn:active::after, .card.pressable:active::after, .filter-pill:active::after, .case-tile:active::after {
  opacity: 1;
  transform: scale(1.5);
  transition: opacity 0.05s ease, transform 0.05s ease;
}
.case-tile:active { transform: scale(0.92); }
.case-tile { transition: transform 0.08s ease; }

.content { padding: 0 16px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.menu-content {
  padding-top: 6px;
  padding-bottom: calc(24px + var(--safe-bottom));
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(24,22,30,0.98), rgba(14,13,18,0.99)),
    var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* telas com pouco conteúdo (temporadas, dificuldades, home, resultado) — sem isso, o flex:1
   empurra tudo pro topo e deixa um vão gigante e vazio embaixo em telas mais altas. */
.content-center { justify-content: center; }

/* entrada em cascata: cada filho direto de .content sobe e aparece com um pequeno atraso
   crescente, em vez de tudo estático de uma vez — só roda quando a TELA monta (os filhos
   raramente são recriados por re-render de estado, então não fica repetindo à toa). */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .content > * { animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .content > *:nth-child(1) { animation-delay: 0.02s; }
  .content > *:nth-child(2) { animation-delay: 0.08s; }
  .content > *:nth-child(3) { animation-delay: 0.14s; }
  .content > *:nth-child(4) { animation-delay: 0.20s; }
  .content > *:nth-child(5) { animation-delay: 0.26s; }
  .content > *:nth-child(n+6) { animation-delay: 0.30s; }
}

/* banner ilustrado (assets/hero-banner.png) já traz o letreiro "MURDOKU" pintado na própria
   arte — por isso não tem mais nenhum <h1> de texto sobreposto por cima, só a legenda. */
.hero-banner-wrap {
  padding-top: var(--safe-top);
  background: #10141f;
  width: 100%; overflow: hidden; line-height: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.hero-banner-wrap img { width: 100%; height: auto; display: block; }
.hero-title-wrap {
  text-align: center;
  position: relative; z-index: 2;
  padding: 10px 16px 6px;
}
.hero-title-wrap .tagline {
  color: var(--text-dim); font-style: italic; font-size: 0.95rem;
}

.card {
  background: linear-gradient(160deg, var(--card-2), var(--card));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: inset 0 1px 0 var(--card-sheen), var(--shadow-sm);
}
.card.pressable { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.card.pressable:active { transform: scale(0.98); box-shadow: inset 0 1px 0 var(--card-sheen); }

.section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-faint);
  margin-bottom: 8px;
  font-weight: 700;
}

/* selo de ícone da dificuldade, na linha de progress-row (Dificuldades) — antes ficava
   aninhado sob ".diff-card", uma classe que não existe mais em nenhum screen, então nunca
   era aplicado de verdade; o ícone aparecia "pelado", sem selo nem cor de fundo. */
.diff-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--diff-color) 26%, transparent), color-mix(in srgb, var(--diff-color) 12%, transparent));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--diff-color) 50%, transparent), inset 0 1px 0 var(--card-sheen);
}

.btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--card-sheen), var(--shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:active { transform: scale(0.97); box-shadow: inset 0 1px 0 var(--card-sheen); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 20px rgba(224,138,79,0.32);
}
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 10px rgba(224,138,79,0.26); }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn:disabled { opacity: 0.4; pointer-events: none; }

/* ---------- login local / perfil ---------- */
.login-screen {
  min-height: 100vh;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
}
.login-panel {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 24px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(34,31,42,0.98), rgba(18,16,22,0.99)),
    var(--card);
  box-shadow: inset 0 1px 0 var(--card-sheen), var(--shadow-lg);
  text-align: center;
}
.login-badge {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
}
.login-copy { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.login-copy h1 { font-size: 1.55rem; line-height: 1.08; }
.login-copy p {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.45;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.login-field span {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.login-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 14px 13px;
  font: inherit;
  outline: none;
}
.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224,138,79,0.16);
}
.login-error {
  min-height: 1.1em;
  color: #f2a999;
  font-size: 0.82rem;
  text-align: center;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(38,34,48,0.96), rgba(24,22,30,0.98));
  box-shadow: inset 0 1px 0 var(--card-sheen);
}
.player-avatar {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-weight: 900;
  font-size: 1.25rem;
}
.player-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.player-info span,
.player-info small {
  color: var(--text-dim);
  font-size: 0.75rem;
}
.player-info strong {
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-row { display: flex; gap: 10px; }
.stat-tile {
  flex: 1;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
  box-shadow: inset 0 1px 0 var(--card-sheen);
}
.stat-tile .stat-value { font-size: 1.2rem; font-weight: 800; font-family: var(--font-display); }
.stat-tile .stat-label { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }

.progress-bar {
  height: 6px; border-radius: 4px; background: var(--bg-elevated); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.progress-bar > div {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(224,138,79,0.5);
}

.progress-list { display: flex; flex-direction: column; gap: 10px; }
.progress-row { position: relative; overflow: hidden; }
.progress-row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--diff-color), color-mix(in srgb, var(--diff-color) 40%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--diff-color) 60%, transparent);
}
.progress-row-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.progress-row-name { font-weight: 800; font-size: 1.02rem; font-family: var(--font-display); }
.progress-row-stats { font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; }
.progress-row-actions { display: flex; gap: 8px; margin-top: 12px; }
.progress-row-actions .btn { flex: 1; padding: 10px 12px; font-size: 0.85rem; }
.btn-danger-outline { background: transparent; color: var(--danger); border-color: rgba(217,99,79,0.5); }

/* ---------- tela de jogo ---------- */

.play-header { padding: calc(10px + var(--safe-top)) 14px 6px; display: flex; align-items: center; gap: 10px; }
.play-header .case-info { flex: 1; min-width: 0; }
.play-header .case-title { font-size: 0.95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-header .case-sub { font-size: 0.7rem; color: var(--text-dim); }
.timer-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 6px 12px;
}
.timer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.timer-text { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--text); font-weight: 600; }

.board-wrap {
  margin: 4px 10px;
  padding: 10px;
  display: flex; justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, #1c1720, #16121a);
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.35);
}
.board-wrap-inspect {
  justify-content: flex-start;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.board-wrap-inspect .board {
  width: clamp(560px, 160vw, 680px);
  max-width: none;
  flex: 0 0 auto;
}
.board {
  display: grid;
  gap: 2px;
  background: #a89876;
  border: 3px solid #7d6d4d;
  border-radius: 10px;
  overflow: hidden;
  width: min(100%, 520px);
  touch-action: manipulation;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.cell {
  position: relative;
  aspect-ratio: 1;
  background: #c9c1b2;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: #3a2f20;
  cursor: pointer;
  user-select: none;
}
.cell::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1.3px);
  background-size: 9px 9px;
  background-position: 2px 2px;
  pointer-events: none;
  z-index: 0;
}
.cell.blocked { cursor: default; }

/* piso texturizado por tema da zona (ver data.js -> ZONE_NAMES.floorTexture) — sobrepõe
   o pontilhado padrão de .cell::before com a foto real do material do cômodo (assets/floors/).
   Só a camada de imagem, sem degradê de CSS por baixo: os 9 arquivos já existem de verdade,
   então manter o padrão procedural como "fallback" só fazia ele piscar por uma fração de
   segundo antes da foto real carregar por cima — sem essa camada extra, não tem mais o que
   piscar (a célula fica na cor neutra de .cell até a foto terminar de carregar). */
.cell.tex-grama::before { background-image: url("../assets/floors/grama.png"); background-size: cover; background-position: center; }
.cell.tex-agua::before { background-image: url("../assets/floors/agua.png"); background-size: cover; background-position: center; }
.cell.tex-pedra::before { background-image: url("../assets/floors/pedra.png"); background-size: cover; background-position: center; }
.cell.tex-madeira::before { background-image: url("../assets/floors/madeira.png"); background-size: cover; background-position: center; }
.cell.tex-ladrilho::before { background-image: url("../assets/floors/ladrilho.png"); background-size: cover; background-position: center; }
.cell.tex-tecido::before { background-image: url("../assets/floors/tecido.png"); background-size: cover; background-position: center; }
.cell.tex-terra::before { background-image: url("../assets/floors/terra.png"); background-size: cover; background-position: center; }
.cell.tex-ceu::before { background-image: url("../assets/floors/ceu.png"); background-size: cover; background-position: center; }
.cell.tex-cimento::before { background-image: url("../assets/floors/cimento.png"); background-size: cover; background-position: center; }
.cell .obj-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 0;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.3));
}
.cell .cell-mark {
  position: relative; z-index: 2;
  width: 62%; height: 62%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55));
  font-size: 0;
}
.cell .cell-mark::before,
.cell .cell-mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 82%; height: 16%;
  border-radius: 999px;
  background: #d9342d;
  box-shadow: 0 0 0 0.5px rgba(120,20,16,0.28);
  transform-origin: center;
}
.cell .cell-mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.cell .cell-mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.suspect-token {
  position: relative; z-index: 2;
  width: 68%; height: 68%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1em;
  box-sizing: border-box;
}
.suspect-token.filled { color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.28); }

/* notas: discretas mas legíveis, várias cabem na mesma célula, centralizadas no campo. */
.notes-cluster {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
  gap: 2px;
  width: 92%;
  max-width: 92%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  z-index: 2;
}
.note-chip {
  flex: 0 1 auto;
  width: clamp(6px, calc(84% / var(--note-count, 1)), 17px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
  font-weight: 900; color: #fff; line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.notes-1 .note-chip { font-size: 10px; }
.notes-2 .note-chip, .notes-3 .note-chip { font-size: 8px; }
.notes-4 .note-chip, .notes-5 .note-chip { font-size: 6px; }
.notes-6 .note-chip { font-size: 0; }

.icon-btn:disabled { opacity: 0.35; pointer-events: none; }

.zone-tag {
  /* font-size/max-width vêm inline por instância (js/screens/play.js) — max-width varia
     conforme quantas células vizinhas da MESMA zona estão disponíveis ao redor da âncora.
     width fica em max-content de propósito: um nome curto NUNCA vira uma barra grande —
     só cresce (sempre centralizado) até o teto quando o nome realmente precisa do espaço. */
  position: absolute; top: 3px; left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font-weight: 700; letter-spacing: 0.2px;
  line-height: 1.15; text-align: center;
  color: #3a2f20;
  background: #f4ecd8;
  border: 1px solid rgba(58,47,32,0.25);
  padding: 1px 5px; border-radius: 5px;
  box-sizing: border-box;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.victim-token { font-size: 1em; }

.cell.selected-highlight { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }

.suspect-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 12px 14px 4px;
  scrollbar-width: none;
}
.suspect-strip::-webkit-scrollbar { display: none; }
/* sombra de desvanecimento nas bordas — só liga quando REALMENTE sobra suspeito escondido
   (ver updateStripFade em js/screens/play.js), pra sinalizar que dá pra arrastar a tira. */
.suspect-strip.scroll-fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
.suspect-strip.scroll-fade-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
}
.suspect-strip.scroll-fade-left.scroll-fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.suspect-chip {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  flex: 0 0 auto;
  width: 58px;
  min-height: 82px;
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.chip-avatar {
  width: 58px; height: 58px; border-radius: 16px; overflow: hidden;
  border: 2.5px solid transparent; box-sizing: border-box;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.chip-avatar svg, .chip-avatar img { width: 100%; height: 100%; display: block; }
.suspect-chip.selected .chip-avatar { border-color: var(--accent); transform: scale(1.06); }
.suspect-chip .chip-name {
  font-size: 0.62rem; color: var(--text-dim); max-width: 58px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suspect-chip.selected .chip-name { color: var(--text); font-weight: 700; }
.victim-avatar {
  border-color: var(--danger) !important;
  border-style: dashed !important;
  filter: grayscale(40%);
}
.victim-chip.selected .victim-avatar { filter: grayscale(0%); }
.victim-chip .chip-name { color: var(--danger); }
.victim-chip.selected .chip-name { color: var(--danger); font-weight: 700; }
.suspect-chip .check-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--success); color: #06210f;
  border-radius: 50%; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; border: 2px solid var(--bg);
  z-index: 1;
}

.clue-panel { margin: 8px 14px 0; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px; }
.clue-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.clue-avatar {
  width: 46px; height: 46px; border-radius: 14px; overflow: hidden; flex: 0 0 auto;
  border: 2.5px solid; box-sizing: border-box;
}
.clue-avatar svg, .clue-avatar img { width: 100%; height: 100%; display: block; }
.clue-panel .clue-name { font-weight: 700; font-size: 1.02rem; }
.clue-text { color: var(--text-dim); font-size: 0.88rem; line-height: 1.35; }
.clue-panel .clue-text + .clue-text { margin-top: 4px; }
.clue-panel .clue-empty { color: var(--text-faint); font-size: 0.85rem; font-style: italic; }

.toolbar {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 8px 14px;
}
.tool-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 9px 4px;
  color: var(--text-dim);
  font-size: 0.62rem;
  cursor: pointer;
}
.tool-btn .tool-icon { font-size: 1.05rem; color: var(--text); }
.tool-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tool-btn.active .tool-icon { color: var(--accent-ink); }

.warning-banner {
  margin: 8px 14px 0;
  background: rgba(217, 99, 79, 0.12);
  border: 1px solid rgba(217, 99, 79, 0.4);
  color: #f2a999;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.accuse-bar { padding: 10px 14px 0; }

/* ---------- resultado ---------- */

.result-hero { text-align: center; padding: 28px 16px 8px; }
.case-stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.6rem; letter-spacing: 1.5px;
  color: var(--danger);
  border: 3px solid var(--danger);
  border-radius: 10px;
  padding: 6px 18px;
  transform: rotate(-4deg);
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(217,99,79,0.25), 0 8px 24px rgba(217,99,79,0.25);
}
.result-hero .sub { color: var(--text-dim); margin-top: 14px; }
.stars { font-size: 1.5rem; letter-spacing: 4px; margin-top: 10px; text-shadow: 0 0 14px rgba(224,138,79,0.35); }

.culprit-card { display: flex; align-items: center; gap: 14px; }
.culprit-avatar {
  width: 76px; height: 76px; border-radius: 20px; overflow: hidden; flex: 0 0 auto;
  border: 3px solid; box-sizing: border-box;
  box-shadow: var(--shadow-md);
}
.culprit-avatar svg, .culprit-avatar img { width: 100%; height: 100%; display: block; }

.explain-list {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(160deg, rgba(38,34,48,0.96), rgba(26,24,32,0.96));
}
.explain-list .clue-text { font-size: 0.88rem; color: var(--text); }

/* ---------- ranking ---------- */
.ranking-content { text-align: center; }
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(38,34,48,0.98), rgba(20,18,26,0.98));
}
.ranking-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.ranking-row:last-child { border-bottom: 0; }
.ranking-place {
  width: 34px; height: 34px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224,138,79,0.14);
  color: var(--accent-2);
  font-weight: 900;
  font-size: 0.78rem;
}
.ranking-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ranking-title {
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-meta {
  color: var(--text-dim);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ranking-badges span {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--text-dim);
  font-size: 0.68rem;
}
.ranking-score {
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 1.05rem;
  white-space: nowrap;
}
/* preenche o espaço sobrando quando um estado vazio (ranking sem registros, tutorial sem
   diagrama) fica sozinho embaixo de um cabeçalho curto — sem isso, o card fica grudado no
   topo e sobra um vão morto de fundo até o fim da tela. */
.empty-state-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.empty-ranking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.empty-ranking-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 2px; filter: drop-shadow(0 4px 10px rgba(224,138,79,0.25)); }
.empty-ranking p {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.bottom-nav {
  display: flex; justify-content: space-around;
  padding: 8px 6px calc(8px + var(--safe-bottom));
  border-top: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  position: sticky; bottom: 0;
}
.bottom-nav .nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-faint); font-size: 0.62rem; padding: 4px; cursor: pointer;
}
.bottom-nav .nav-item.active { color: var(--accent); }
.bottom-nav .nav-item .nav-icon { font-size: 1.15rem; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  padding: 24px;
}
.modal-card {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 20px; max-width: 380px; width: 100%; display: flex; flex-direction: column; gap: 14px;
}
.modal-card h3 { font-size: 1.1rem; }
.modal-card p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.4; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }

/* ---------- tutorial paginado (como jogar) ---------- */
.tutorial-progress { height: 4px; background: var(--bg-elevated); margin: 0 16px; border-radius: 3px; overflow: hidden; }
.tutorial-progress > div { transition: width 0.2s ease; }
.tutorial-counter { font-size: 0.76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 40px; text-align: right; }
.tutorial-page { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-top: 14px; flex: 1; }
.tutorial-nav {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  position: sticky; bottom: 0;
  background: linear-gradient(0deg, var(--bg) 70%, transparent);
}
.tutorial-nav .icon-btn { width: 52px; height: 44px; font-size: 1.3rem; }

.howto-block { display: flex; flex-direction: column; gap: 6px; }
.howto-block h3 { font-size: 1rem; }
.howto-block p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.4; }

/* mapa modelo do "Como jogar" — reaproveita .board/.cell/.note-chip/.cell-mark/.suspect-token
   do jogo de verdade (ver js/screens/play.js), só que montado à mão com dados de exemplo. */
.howto-demo-wrap { margin: 4px 0; padding: 8px; }
.howto-demo-board { width: min(100%, 300px); margin: 0 auto; }
.howto-callout {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.cell.howto-affected { position: relative; }
.cell.howto-affected::after {
  content: "";
  position: absolute; inset: 2px;
  border: 2px dashed #c79a2b;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}
.howto-legend { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 4px; }
.howto-legend-item { display: flex; gap: 10px; align-items: flex-start; }
.howto-legend-num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.howto-legend-item strong { font-size: 0.88rem; }
.howto-legend-item p { color: var(--text-dim); font-size: 0.85rem; line-height: 1.4; margin-top: 2px; }
.howto-toolbar-preview .tool-btn { cursor: default; }
.howto-toolbar-caption { margin-top: 4px; }

.mode-toggle { display: flex; gap: 8px; }
.mode-toggle .btn { flex: 1; }
.mode-toggle .btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mode-hint { color: var(--text-dim); font-size: 0.8rem; margin-top: 8px; line-height: 1.4; }

.empty-state { text-align: center; color: var(--text-faint); padding: 24px 12px; font-size: 0.9rem; }

/* ---------- campanha: temporadas / dificuldades / fases ---------- */
.command-briefing,
.case-briefing {
  position: relative;
  margin: 0 -16px 4px;
  padding: 17px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid var(--border-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--season-color, var(--accent)) 18%, rgba(38,34,48,0.98)), rgba(20,18,26,0.98)),
    var(--card);
  box-shadow: inset 0 1px 0 var(--card-sheen), 0 10px 28px rgba(0,0,0,0.18);
  text-align: center;
}
.command-briefing::before,
.case-briefing::before {
  content: "";
  position: absolute; left: 16px; right: 16px; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--season-color, var(--accent)), transparent);
  border-radius: 999px;
}
.command-briefing h2,
.case-briefing h2 {
  font-size: 1.28rem;
  line-height: 1.08;
}
.command-briefing p,
.case-briefing p {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.42;
  margin-top: 8px;
}
.command-briefing-compact { padding-top: 15px; padding-bottom: 15px; }
.command-kicker {
  color: var(--season-color, var(--accent-2));
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.briefing-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
/* tela de fases: sem cabeçalho de texto acima (o foco é a grade), então a tira de métricas
   fica sozinha e precisa do próprio espaçamento — 4 colunas pra caber a "próxima" junto. */
.case-metrics-strip { margin-top: 2px; }
.case-metrics-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.case-metrics-compact .metric-chip:first-child strong { color: var(--diff-color, var(--accent-2)); }
.metric-chip {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  padding: 9px 8px;
  background: rgba(18,16,22,0.56);
  box-shadow: inset 0 1px 0 var(--card-sheen);
  text-align: center;
}
.metric-chip strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-chip span {
  display: block;
  color: var(--text-dim);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-menu { gap: 14px; }
.home-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(18,16,22,0.92);
}
.menu-action,
button.card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.menu-action {
  min-height: 74px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04), transparent),
    linear-gradient(160deg, var(--card-2), var(--card));
  box-shadow: inset 0 1px 0 var(--card-sheen), var(--shadow-sm);
  cursor: pointer;
  text-align: center;
}
.menu-action:last-child { border-bottom: 0; }
.menu-action-primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent),
    linear-gradient(160deg, #2d211b, var(--card));
}
.menu-action-mark {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
}
.menu-action strong,
.menu-action small {
  display: block;
}
.menu-action strong { font-size: 1rem; }
.menu-action small {
  color: var(--text-dim);
  font-size: 0.76rem;
  margin-top: 3px;
}
.continue-dossier {
  display: block;
  border-left: 4px solid var(--accent);
}
.continue-dossier h3 { font-size: 1.08rem; margin-top: 7px; }
.continue-dossier p {
  color: var(--text-dim);
  margin: 5px 0 10px;
  font-size: 0.82rem;
}
.continue-dossier-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--accent-2);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.menu-section {
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 13px;
  background: rgba(18,16,22,0.92);
  box-shadow: inset 0 1px 0 var(--card-sheen);
  text-align: center;
}
.stat-row-dossier .stat-tile { background: rgba(18,16,22,0.64); }
.btn-hero {
  padding: 20px; font-size: 1.1rem; margin-bottom: 4px;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 32px rgba(224,138,79,0.38);
}

.season-list { display: flex; flex-direction: column; gap: 10px; }
.season-card {
  display: flex; flex-direction: column; gap: 0; margin-bottom: 0;
  border: 1px solid color-mix(in srgb, var(--season-color) 40%, var(--border-soft));
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  text-align: center;
  background: rgba(18,16,22,0.94);
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--season-color) 12%, transparent);
}
button.card.season-card { text-align: center; }

/* pôster no topo do card: foto real (assets/seasons/<id>.jpg) por cima de um degradê na cor
   da temporada — se a foto ainda não existir, a camada falha em silêncio (mesmo truque das
   texturas de piso) e sobra só o degradê + emblema, que já fica bonito sozinho. */
.season-art {
  position: relative;
  height: 78px;
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 8px;
}
.season-art-emblem {
  position: absolute; right: 6px; bottom: -10px;
  font-size: 2.8rem; line-height: 1;
  opacity: 0.16;
  filter: saturate(0) brightness(1.6);
  pointer-events: none;
}
.season-art-badge {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px; padding: 0 8px;
  border-radius: 8px;
  font-family: var(--font-display); font-weight: 900; font-size: 0.72rem; letter-spacing: 0.3px;
  color: var(--text);
  background: color-mix(in srgb, var(--season-color) 55%, rgba(14,13,18,0.7));
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.season-body { padding: 10px 14px 12px; }
.season-subtitle { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--season-color); font-weight: 700; }
.season-name { font-size: 1.05rem; font-weight: 800; margin-top: 1px; font-family: var(--font-display); }
.season-brief {
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.3;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  max-width: 28rem;
}
.season-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  margin-top: 6px;
}
.season-tags span {
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--season-color) 35%, var(--border-soft));
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--text-dim);
  background: rgba(18,16,22,0.42);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.season-meta { display: flex; justify-content: center; gap: 14px; font-size: 0.74rem; color: var(--text-dim); margin-top: 5px; }
.season-pct { color: var(--season-color); font-weight: 700; }

.season-context { border-bottom-color: color-mix(in srgb, var(--season-color) 45%, var(--border-soft)); }
.difficulty-list {
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  overflow: hidden;
  gap: 0;
  background: rgba(18,16,22,0.94);
}
.difficulty-row {
  display: block;
  border: 0;
  border-top: 4px solid var(--diff-color);
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 16px 14px;
  box-shadow: none;
  text-align: center;
}
button.card.difficulty-row { text-align: center; }
.difficulty-row:last-child { border-bottom: 0; }
.difficulty-row .progress-row-header { justify-content: center; }
.difficulty-row .progress-row-header > div:first-child { justify-content: center; }
.difficulty-row .progress-row-stats { margin-left: 8px; }
.difficulty-focus {
  color: var(--diff-color);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  margin-top: 2px;
}
.difficulty-summary {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.36;
  margin-top: 10px;
}
.difficulty-meta-row {
  display: flex; justify-content: center; gap: 14px;
  color: var(--text-faint);
  font-size: 0.7rem;
  margin-top: 8px;
}
.difficulty-meta-row span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-briefing { --season-color: var(--diff-color); }
.case-briefing-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  justify-items: center;
}
.case-briefing-next {
  min-height: 56px;
  min-width: 118px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--diff-color) 42%, var(--border-soft));
  background: rgba(18,16,22,0.62);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 var(--card-sheen);
}
.case-briefing-next span {
  color: var(--text-dim);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.case-briefing-next strong {
  color: var(--diff-color);
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.1;
}

.case-filter-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.filter-pill {
  padding: 8px 16px; border-radius: 999px;
  min-height: 44px;
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 0.82rem; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--card-sheen);
  transition: transform 0.08s ease;
}
.filter-pill:active { transform: scale(0.96); }
.filter-pill.active { background: color-mix(in srgb, var(--success) 18%, transparent); border-color: var(--success); color: var(--success); }

.case-total-badge {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--border-soft);
  font-size: 0.78rem; font-weight: 700; color: var(--text-dim);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--card-sheen);
}
.case-total-badge.done { background: color-mix(in srgb, var(--success) 20%, transparent); border-color: var(--success); color: var(--success); }

.case-list {
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(18,16,22,0.94);
}
.case-size-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 12px 7px 10px;
  border-radius: 0;
  border-left: 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, rgba(24,22,30,0.9)), rgba(24,22,30,0.9));
}
.case-size-header:first-child { margin-top: 0; border-top: 0; }
.case-size-label { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 800; color: var(--accent-2); letter-spacing: 0.02em; }
.case-size-icon { font-size: 0.58rem; opacity: 0.8; letter-spacing: 0.7px; }
.case-size-count {
  color: var(--text-dim); font-weight: 700; font-size: 0.72rem;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}

/* Grade compacta de fases — cada bloco de tamanho (6×6, 8×8...) vira uma grade de blocos
   numerados, tipo seletor de fase de puzzle game, em vez de uma lista de linhas com
   título+subtítulo repetidos 40 vezes (rolagem enorme pra escanear uma dificuldade). */
.case-tile-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.case-tile-grid:last-child { border-bottom: 0; }
.case-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg));
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 1px 0 var(--card-sheen);
  cursor: pointer;
}
.case-tile-number {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--text-dim);
}
.case-tile-badge {
  position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.56rem; font-weight: 800;
  background: var(--bg); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.case-tile-ping {
  position: absolute; top: 3px; right: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  .case-tile-ping::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--accent); animation: tilePing 1.6s ease-out infinite;
  }
  @keyframes tilePing {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(2.4); opacity: 0; }
  }
}

.case-tile-in_progress { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, var(--bg-elevated)), var(--bg)); }
.case-tile-in_progress .case-tile-number { color: var(--accent-2); }
.case-tile-in_progress .case-tile-badge { color: var(--accent-2); border-color: var(--accent); }

.case-tile-completed { opacity: 0.55; }
.case-tile-completed .case-tile-number { color: var(--success); }
.case-tile-completed .case-tile-badge { color: var(--success); border-color: var(--success); }

.case-tile-next {
  border-color: var(--diff-color, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--diff-color, var(--accent)) 55%, transparent), 0 6px 16px rgba(224,138,79,0.2);
}
.case-tile-next .case-tile-number { color: var(--text); }