/* Regras da casa: a lua, a cerca e o gato */
.regras { --sim: #4ade80; --nao: #ff5c7a; --lua: #ece4ff; --lua-dir: clamp(-60px, 8vw, 160px); --lua-tam: clamp(260px, 34vw, 460px); --gato: clamp(120px, 12vw, 170px); }
.regras .site-header { position: sticky; }

.casa-hero { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(56px, 9vw, 120px); }
.ceu { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 78% 70%, #1d1538 0%, #110c22 38%, var(--noite) 78%); }
.lua { position: absolute; right: var(--lua-dir); bottom: 70px; width: var(--lua-tam); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fbf8ff 0%, var(--lua) 38%, #c9b8f5 72%, #a48be6 100%);
  box-shadow: 0 0 80px 20px rgb(200 180 255 / .28), 0 0 240px 80px rgb(139 92 246 / .22); }
.lua::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background:
  radial-gradient(circle at 30% 62%, rgb(150 120 210 / .35) 0 7%, transparent 8%),
  radial-gradient(circle at 62% 30%, rgb(150 120 210 / .28) 0 5%, transparent 6%),
  radial-gradient(circle at 70% 70%, rgb(150 120 210 / .25) 0 9%, transparent 10%); }
.casa-hero-inner { position: relative; padding-bottom: clamp(40px, 6vw, 72px); }
.casa-hero h1 { font-size: clamp(3rem, 8.5vw, 7.5rem); max-width: 7em; }
.casa-lede { margin-top: 28px; max-width: 34em; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: #d4cde3; }
.casa-data { margin-top: 18px; font-size: .875rem; color: var(--sombra); }

.cerca-cena { position: relative; height: clamp(110px, 12vw, 150px); }
.cerca { position: absolute; inset: 0; width: 100%; height: 100%; fill: #030309; }
/* o corpo acaba em y=112 de 130 no desenho: esse pedaço fica abaixo da travessa de cima (y=46 de 150) */
.gato { position: absolute; right: calc(var(--lua-dir) + var(--lua-tam) / 2 - var(--gato) / 2); bottom: calc(69.3% - var(--gato) * .135); width: var(--gato); padding: 0; cursor: pointer; }
.gato svg { width: 100%; fill: #030309; overflow: visible; display: block; }
.gato-rabo path { fill: none; stroke: #030309; stroke-width: 7; stroke-linecap: round; }
.gato-rabo { transform-origin: 42px 109px; animation: rabo 3.2s ease-in-out infinite; }
.gato-olhos { fill: #c7a6ff; transform-box: fill-box; transform-origin: center; animation: piscar 5.5s infinite; filter: drop-shadow(0 0 3px #b48cff); }
.gato-cabeca { transform-origin: 71px 56px; transition: transform .3s; }
.gato:hover .gato-cabeca, .gato.miando .gato-cabeca { transform: rotate(-8deg); }
.gato:focus-visible { outline-offset: 2px; }
@keyframes rabo { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(16deg); } }
@keyframes piscar { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.miau { position: absolute; bottom: 100%; left: 30%; margin-bottom: 4px; padding: 6px 12px; border-radius: 12px 12px 12px 2px; background: var(--osso); color: var(--noite); font-weight: 650; font-size: .9375rem; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.9); transform-origin: bottom left; transition: opacity .2s, transform .2s; pointer-events: none; }
.miau:not(:empty) { opacity: 1; transform: none; }

.regras-bloco { padding-block: clamp(72px, 10vw, 128px); border-top: 1px solid var(--linha); }
#liberado { border-top: 0; background: #030309; }
.bloco-titulo { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.bloco-titulo.menor { font-size: clamp(1.6rem, 3vw, 2.3rem); }

.duas-listas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.lista h2 { display: flex; align-items: center; gap: 16px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.sinal { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.lista-sim .sinal { background: var(--sim); box-shadow: 0 0 18px var(--sim); }
.lista-nao .sinal { background: var(--nao); box-shadow: 0 0 18px var(--nao); }
.lista ul { margin-top: 28px; }
.lista li { padding-block: 20px; border-top: 1px solid var(--linha); }
.lista-sim li { border-color: rgb(74 222 128 / .18); }
.lista-nao li { border-color: rgb(255 92 122 / .2); }
.lista h3 { font-size: 1.125rem; }
.lista p { margin-top: 6px; color: var(--nevoa); max-width: 36em; }

.tres-lugares { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tres-lugares article { padding: 28px; border-radius: 16px; background: var(--pedra); border: 1px solid var(--linha); }
.tres-lugares h3 { font-family: var(--titulo); font-size: 1.375rem; font-weight: 600; }
.tres-lugares p { margin-top: 12px; color: var(--nevoa); }

.seguranca-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fatos div { padding-block: 20px; border-top: 1px solid var(--linha); }
.fatos div:first-child { border-top: 0; padding-top: 0; }
.fatos dt { font-weight: 650; font-size: 1.125rem; }
.fatos dd { margin-top: 6px; color: var(--nevoa); }

.denunciar-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.denunciar-layout p { margin-top: 20px; color: var(--nevoa); max-width: 34em; }
.email a { display: inline-block; font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 650; color: var(--osso); border-bottom: 2px solid var(--vitral); padding-bottom: 4px; word-break: break-all; }
.email a:hover { color: #fff; border-color: #fff; }
.escada { margin-top: 24px; counter-reset: passo; list-style: none; }
.escada li { counter-increment: passo; position: relative; padding: 16px 0 16px 52px; border-top: 1px solid var(--linha); color: var(--nevoa); }
.escada li::before { content: counter(passo); position: absolute; left: 0; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-weight: 650; color: var(--osso); background: var(--pedra-2); border: 1px solid var(--linha); }
.escada li:last-child::before { background: rgb(255 92 122 / .16); border-color: rgb(255 92 122 / .5); color: var(--nao); }
.escada b { color: var(--osso); font-weight: 650; }

.rodape-gato { padding-block: clamp(72px, 10vw, 120px); border-top: 1px solid var(--linha); text-align: center; }
.rodape-gato p { max-width: 30em; margin: 0 auto 32px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 500; line-height: 1.45; color: #e2dbef; }
.link-sub { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(180 140 255 / .5); }
.link-sub:hover { color: var(--osso); }

@media (max-width: 960px) {
  .duas-listas, .seguranca-layout, .denunciar-layout, .tres-lugares { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .regras { --lua-dir: -50px; --lua-tam: 220px; --gato: 100px; }
  .lua { bottom: 50px; }
  .casa-hero-inner { padding-bottom: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .gato-rabo, .gato-olhos { animation: none; }
}