.secret-body { min-height: 100vh; display: grid; place-items: center; }
.room { position: relative; z-index: 2; width: min(560px, 92vw); text-align: center; padding: 2rem 0; }
.room h1 { font-family: var(--display); font-size: clamp(2rem, 6vw, 3.2rem); margin: .4rem 0; }
.room .back { color: var(--muted); font-size: .9rem; }
#form { display: flex; gap: .6rem; justify-content: center; margin: 1.4rem 0 .6rem; }
#code { flex: 1; max-width: 300px; padding: .8rem 1rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--fg); font: inherit; text-align: center; letter-spacing: .15em; }
#code:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
#form button { padding: .8rem 1.3rem; border-radius: 999px; border: 0; background: var(--accent);
  color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; }
#verdict { min-height: 1.6em; font-weight: 600; color: var(--accent); }
#reveal { margin-top: 1rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: var(--bg2);
  border: 1px solid var(--border); box-shadow: var(--shadow); text-align: left; animation: pop .45s ease; }
#reveal h2 { font-family: var(--display); margin: 0 0 .6rem; }
#reveal .big { font-size: 1.5rem; text-align: center; }
#reveal .sig { color: var(--muted); text-align: right; }
.shake { animation: shake .45s; }
.flipped { transform: rotate(180deg); transition: transform .6s; }
body:not(.flipped) { transition: transform .6s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
#fx span { position: absolute; bottom: -10vh; font-size: 2rem; animation: float linear forwards; }
@keyframes float { to { transform: translateY(-120vh) rotate(25deg); opacity: .2; } }
.kitty { font-size: 4rem; text-align: center; margin: .4rem 0; animation: bounce 1s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(-12px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { #fx { display: none; } .shake, .kitty, #reveal { animation: none; } }