/* =========================================================
   BINGO DAS FÉRIAS COM IA
   Tese visual: ruído que se resolve em informação.
   ========================================================= */

:root{
  /* Superfícies e tinta */
  --papel:      #F2F4F8;
  --papel-alto: #FFFFFF;
  --linha:      #DCE1EC;
  --tinta:      #171A26;
  --grafite:    #5A6478;
  --caneta:     #3B2FE0;   /* único acento não-pastel: controles e foco */
  --marcatexto: #FFD84D;

  /* Categorias — pastéis idênticos à cartela impressa */
  --cat-pastel: var(--papel-alto);
  --cat-tinta:  var(--grafite);

  /* Tipografia */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --leitura: "Newsreader", Georgia, serif;
  --mono:    "DM Mono", ui-monospace, monospace;

  /* Ritmo */
  --r-p: 10px;
  --r-g: 22px;
  --sombra: 0 1px 0 var(--linha), 0 10px 30px -18px rgba(23,26,38,.45);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  background-position: -1px -1px;
  color: var(--tinta);
  font-family: var(--leitura);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Grão de ruído sobre todo o papel: a textura da tese */
body::after{
  content:"";
  position:fixed; inset:0; z-index:900;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible{
  outline:3px solid var(--caneta);
  outline-offset:3px;
}

.visual-oculto{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ---------------- Tipos utilitários ---------------- */

.sobrancelha{
  margin:0 0 18px;
  font-family: var(--mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--grafite);
}

.rotulo{
  margin:0 0 14px;
  font-family: var(--mono);
  font-size:.74rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--grafite);
}

.titulao{
  margin:0 0 20px;
  font-family: var(--display);
  font-weight:800;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height:.94;
  letter-spacing:-.03em;
}
.titulao__quebra{ display:block; color: var(--caneta); }
.titulao--medio{ font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom:10px; }

kbd{
  font-family: var(--mono);
  font-size:.78em;
  padding:.12em .42em;
  border:1px solid var(--linha);
  border-bottom-width:2px;
  border-radius:6px;
  background: var(--papel-alto);
  color: var(--grafite);
}

/* ---------------- Botões ---------------- */

.botao{
  font-family: var(--display);
  font-weight:600;
  font-size:1rem;
  line-height:1;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.3em;
  border:1.5px solid var(--tinta);
  border-radius: var(--r-p);
  background: var(--papel-alto);
  color: var(--tinta);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.botao:hover{ transform: translateY(-2px); }
.botao:active{ transform: translateY(0); }
.botao:focus-visible{
  outline:3px solid var(--caneta);
  outline-offset:3px;
}

.botao--principal{
  background: var(--caneta);
  border-color: var(--caneta);
  color:#fff;
  box-shadow: 0 4px 0 #241BA8;
}
.botao--principal:hover{ box-shadow: 0 6px 0 #241BA8; }
.botao--principal:active{ box-shadow: 0 2px 0 #241BA8; }

.botao--grande{ font-size:1.22rem; padding:1em 1.6em; }

.botao--vazado{ background:transparent; }
.botao--vazado:hover{ background: var(--papel-alto); }

.botao--fantasma{
  border-color:transparent;
  background:transparent;
  color: var(--grafite);
  padding:.6em .8em;
}
.botao--fantasma:hover{ color: var(--tinta); background: var(--papel-alto); }

.botao--icone{ padding:.6em; border-color: var(--linha); }
.botao__som{
  display:block; width:18px; height:18px;
  background: currentColor;
  clip-path: polygon(0 32%, 32% 32%, 62% 4%, 62% 96%, 32% 68%, 0 68%);
}
.botao--icone[aria-pressed="false"]{ color: var(--linha); }
.botao--icone[aria-pressed="false"] .botao__som{ opacity:.55; }

.botao--perigo{ border-color:#C0453C; color:#C0453C; }
.botao--perigo:hover{ background:#FDEDEC; }

.botao--carta{
  font-size:.86rem;
  padding:.55em .9em;
  border-color: var(--cat-tinta);
  color: var(--cat-tinta);
  background: rgba(255,255,255,.72);
}

/* ---------------- Telas ---------------- */

.tela{ display:block; }
.tela[hidden]{ display:none; }

/* ======================= INÍCIO ======================= */

.tela--inicio{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: clamp(24px, 4vw, 64px);
}

.inicio__grade{
  width:min(1180px, 100%);
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items:start;
}

.inicio__cabeca{ grid-column:1; }

.inicio__linha{
  margin:0 0 32px;
  max-width:42ch;
  font-size:1.16rem;
  color: var(--grafite);
}

.inicio__acoes{ display:flex; flex-wrap:wrap; gap:14px; }

.inicio__regras{
  grid-column:2; grid-row:1;
  padding:26px;
  border:1.5px solid var(--tinta);
  border-radius: var(--r-g);
  background: var(--papel-alto);
  box-shadow: var(--sombra);
}

.regras{ margin:0; padding:0; list-style:none; display:grid; gap:16px; }
.regras li{ display:grid; grid-template-columns:2.4em 1fr; align-items:baseline; }
.regras__num{
  font-family: var(--mono);
  font-size:.82rem;
  color: var(--caneta);
}
.regras__nota{
  margin:22px 0 0; padding-top:18px;
  border-top:1px solid var(--linha);
  font-style:italic;
  color: var(--grafite);
}

.inicio__categorias{ grid-column:1 / -1; }

.fichas{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:12px; }

.ficha{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px 12px 14px;
  border:1.5px solid var(--tinta);
  border-radius:999px;
  background: var(--cat-pastel);
  font-family: var(--display);
  font-weight:600;
  font-size:.98rem;
  color: var(--tinta);
  text-align:left;
}
.ficha__faixa{
  font-family: var(--mono);
  font-weight:400;
  font-size:.78rem;
  padding:.25em .6em;
  border-radius:999px;
  background: rgba(255,255,255,.8);
  color: var(--cat-tinta);
}

/* ======================= SORTEIO ======================= */

.tela--sorteio{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap: clamp(12px, 1.6vh, 24px);
  padding: clamp(14px, 2vw, 30px);
}

.barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.barra__placar{
  margin:0;
  font-family: var(--mono);
  font-size:1rem;
  color: var(--grafite);
}
.barra__placar #placar-saiu{ color: var(--tinta); font-weight:500; }
.barra__sep{ margin:0 .2em; opacity:.5; }
.barra__legenda{
  margin-left:.7em;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.barra__direita{ display:flex; align-items:center; gap:8px; }

.palco{
  display:grid;
  grid-template-columns: minmax(230px, 27%) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  align-items:stretch;
  min-height:0;
}

/* --- A ficha do número: o elemento assinatura --- */

.ficha-numero{
  display:flex; flex-direction:column; gap:14px;
  min-height:0;
}
.ficha-numero__corpo{
  position:relative;
  flex:1;
  display:grid; place-items:center;
  border:2px solid var(--tinta);
  border-radius: var(--r-g);
  background: var(--cat-pastel);
  box-shadow: var(--sombra);
  overflow:hidden;
  transition: background-color .5s ease;
}
.ruido-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  transition: opacity .3s ease;
}
.ficha-numero__corpo[data-sorteando="true"] .ruido-canvas{ opacity:1; }

.numerao{
  position:relative;
  margin:0;
  font-family: var(--mono);
  font-weight:500;
  font-size: clamp(4.5rem, 15vw, 12rem);
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.ficha-numero__corpo[data-sorteando="true"] .numerao{ color: var(--grafite); }

.ficha-numero__categoria{
  margin:0;
  padding:12px 16px;
  border:1.5px solid var(--cat-tinta);
  border-radius: var(--r-p);
  background: var(--papel-alto);
  font-family: var(--mono);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--cat-tinta);
  text-align:center;
}

/* --- Situação e cartas --- */

.palco__conteudo{
  display:grid;
  grid-template-rows:auto 1fr;
  gap: clamp(14px, 2vh, 26px);
  min-height:0;
}

.situacao{
  margin:0;
  padding: clamp(18px, 2.4vh, 30px) clamp(20px, 2vw, 34px);
  border:2px solid var(--tinta);
  border-radius: var(--r-g);
  background: var(--papel-alto);
  box-shadow: var(--sombra);
  font-family: var(--display);
  font-weight:600;
  font-size: clamp(1.3rem, 2.5vw, 2.3rem);
  line-height:1.16;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.cartas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
  min-height:0;
}

.carta{
  display:flex; flex-direction:column; gap:14px;
  padding: clamp(16px, 2vh, 24px);
  border:1.5px solid var(--linha);
  border-radius: var(--r-g);
  background: var(--papel-alto);
  min-height:0;
}
.carta--senso{ background: color-mix(in srgb, var(--cat-pastel) 45%, #fff); }
.carta--fato{
  border-color: var(--cat-tinta);
  border-width:2px;
  background: var(--cat-pastel);
}

.carta__cabeca{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.carta__rotulo{
  margin:0;
  font-family: var(--mono);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--cat-tinta);
}
.carta__aparte{ opacity:.6; }

.carta__texto{
  margin:0;
  overflow-y:auto;
  font-size: clamp(1rem, 1.35vw, 1.4rem);
  line-height:1.42;
}

/* Estado velado: o texto existe, mas como ruído */
.carta[data-revelada="false"] .carta__texto{
  filter: blur(7px);
  opacity:.5;
  user-select:none;
  color: var(--grafite);
}
.carta[data-revelada="true"] .carta__texto{
  filter: blur(0);
  opacity:1;
  transition: filter .55s ease, opacity .55s ease;
}

/* O Fato entra com traço de marca-texto */
.carta--fato[data-revelada="true"] .carta__rotulo{
  color: var(--tinta);
  background:
    linear-gradient(var(--marcatexto), var(--marcatexto)) left center / 100% 68% no-repeat;
  box-shadow: 4px 0 0 var(--marcatexto), -4px 0 0 var(--marcatexto);
  animation: pincelar .5s ease both;
}
@keyframes pincelar{
  from{ background-size:0 68%; }
  to{ background-size:100% 68%; }
}

.rodape{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.atalhos{
  margin:0;
  font-family: var(--mono);
  font-size:.8rem;
  color: var(--grafite);
}

/* Fim da rodada */
.palco[data-fim="true"] .situacao{
  background: var(--marcatexto);
}

/* ======================= GUIA ======================= */

.tela--guia{
  max-width:1080px;
  margin:0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(18px, 4vw, 32px) 80px;
}

.guia__cabeca{ margin-bottom:36px; }
.guia__linha{ margin:0 0 26px; max-width:56ch; color: var(--grafite); font-size:1.08rem; }

.guia__ferramentas{ display:grid; gap:16px; justify-items:start; }

.busca{ display:block; width:min(440px, 100%); }
.busca input{
  width:100%;
  padding:.85em 1.1em;
  border:1.5px solid var(--tinta);
  border-radius: var(--r-p);
  background: var(--papel-alto);
  font-family: var(--leitura);
  font-size:1rem;
  color: var(--tinta);
}
.busca input:focus-visible{ outline:3px solid var(--caneta); outline-offset:2px; }

.fichas--filtro .ficha{
  cursor:pointer;
  font-size:.88rem;
  padding:9px 15px;
  border-color: var(--linha);
  opacity:.62;
}
.fichas--filtro .ficha[aria-pressed="true"]{
  border-color: var(--tinta);
  opacity:1;
}

.guia__vazio{
  padding:24px;
  border:1.5px dashed var(--linha);
  border-radius: var(--r-g);
  color: var(--grafite);
}

.guia__grupo{ margin:0 0 46px; }
.guia__grupo-titulo{
  position:sticky; top:0; z-index:5;
  margin:0 0 18px;
  padding:12px 18px;
  border:1.5px solid var(--tinta);
  border-radius:999px;
  background: var(--cat-pastel);
  font-family: var(--display);
  font-weight:600;
  font-size:1.05rem;
}

.verbete{
  display:grid;
  grid-template-columns:4.2rem 1fr;
  gap:6px 20px;
  padding:22px 0;
  border-top:1px solid var(--linha);
  break-inside:avoid;
}
.verbete__numero{
  grid-row:1 / span 3;
  font-family: var(--mono);
  font-size:1.5rem;
  font-weight:500;
  color: var(--cat-tinta);
  padding-top:.1em;
}
.verbete__situacao{
  margin:0 0 12px;
  font-family: var(--display);
  font-weight:600;
  font-size:1.28rem;
  line-height:1.2;
  letter-spacing:-.01em;
}
.verbete__bloco{ margin:0 0 12px; max-width:74ch; }
.verbete__bloco:last-child{ margin-bottom:0; }
.verbete__chave{
  display:block;
  font-family: var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--grafite);
  margin-bottom:4px;
}
.verbete__bloco--fato .verbete__chave{ color: var(--cat-tinta); }
.verbete__bloco--senso{ color: var(--grafite); font-style:italic; }
.verbete__bloco--fato{
  padding-left:16px;
  border-left:3px solid var(--cat-pastel);
}

/* ======================= PAINEL 1–40 ======================= */

.painel{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:24px;
  background: rgba(23,26,38,.55);
  backdrop-filter: blur(3px);
}
.painel[hidden]{ display:none; }

.painel__caixa{
  width:min(880px, 100%);
  max-height:88vh;
  overflow:auto;
  padding: clamp(20px, 3vw, 34px);
  border:2px solid var(--tinta);
  border-radius: var(--r-g);
  background: var(--papel);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.painel__cabeca{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; margin-bottom:24px;
}
.painel__titulo{
  margin:0 0 6px;
  font-family: var(--display);
  font-weight:800;
  font-size:1.6rem;
  letter-spacing:-.02em;
}
.painel__ajuda{ margin:0; max-width:48ch; font-size:.94rem; color: var(--grafite); }

.grade-numeros{
  margin:0 0 24px; padding:0; list-style:none;
  display:grid;
  grid-template-columns:repeat(8, minmax(0,1fr));
  gap:10px;
}
.pedra{
  width:100%;
  aspect-ratio:1;
  display:grid; place-items:center;
  padding:0;
  border:1.5px solid var(--linha);
  border-radius:12px;
  background: var(--papel-alto);
  font-family: var(--mono);
  font-size:1.1rem;
  color: var(--grafite);
  cursor:pointer;
  transition: transform .1s ease;
}
.pedra:hover{ transform:scale(1.06); }
.pedra:focus-visible{ outline:3px solid var(--caneta); outline-offset:2px; }
.pedra[data-saiu="true"]{
  border-color: var(--tinta);
  border-width:2px;
  background: var(--cat-pastel);
  color: var(--tinta);
  font-weight:500;
}
.pedra[data-atual="true"]{
  box-shadow:0 0 0 3px var(--caneta);
}

.painel__rodape{ display:flex; justify-content:flex-end; }

/* ======================= AVISO DE ERRO ======================= */

.aviso{
  position:fixed; inset:0; z-index:1100;
  display:grid; place-items:center;
  padding:24px;
  background: var(--papel);
}
.aviso[hidden]{ display:none; }
.aviso__caixa{
  width:min(620px,100%);
  padding:32px;
  border:2px solid #C0453C;
  border-radius: var(--r-g);
  background: var(--papel-alto);
}
.aviso__titulo{
  margin:0 0 14px;
  font-family: var(--display);
  font-weight:800;
  font-size:1.5rem;
}
.aviso__texto{ margin:0 0 12px; color: var(--grafite); }
.aviso__texto code{
  font-family: var(--mono);
  font-size:.9em;
  padding:.1em .35em;
  border-radius:5px;
  background: var(--papel);
  color: var(--tinta);
}

/* ======================= RESPONSIVO ======================= */

@media (max-width: 1080px){
  .palco{ grid-template-columns:1fr; }
  .ficha-numero{ flex-direction:row; align-items:center; }
  .ficha-numero__corpo{ min-height:150px; min-width:180px; }
  .ficha-numero__categoria{ flex:1; text-align:left; }
  .numerao{ font-size: clamp(3.6rem, 12vw, 7rem); }
}

@media (max-width: 860px){
  .inicio__grade{ grid-template-columns:1fr; }
  .inicio__cabeca, .inicio__regras, .inicio__categorias{ grid-column:1; }
  .inicio__regras{ grid-row:auto; }
  .cartas{ grid-template-columns:1fr; }
  .grade-numeros{ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .rodape{ flex-direction:column-reverse; align-items:stretch; }
  .rodape .botao--grande{ justify-content:center; }
  .atalhos{ display:none; }
  .verbete{ grid-template-columns:1fr; }
  .verbete__numero{ grid-row:auto; }
}

/* ======================= MOVIMENTO REDUZIDO ======================= */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .botao:hover{ transform:none; }
  .pedra:hover{ transform:none; }
}

/* ======================= IMPRESSÃO ======================= */

@media print{
  body{ background:#fff; color:#000; font-size:11pt; }
  body::after{ display:none; }
  .tela--inicio, .tela--sorteio, .painel, .aviso, .nao-imprimir{ display:none !important; }
  .tela--guia{ display:block !important; max-width:none; padding:0; }
  .guia__grupo-titulo{ position:static; background:#fff; border-radius:0; border:0; border-bottom:2px solid #000; padding:0 0 6px; }
  .verbete__bloco--fato{ border-left-color:#999; }
  .guia__ferramentas{ display:none; }
  .verbete{ page-break-inside:avoid; }
}