/* The Haunt (docs/44): a light left on for the pages that are gone. Candles drawn in CSS; the flames flicker. */
.ht-head { text-align: center; padding: 14px 10px 8px; }
.ht-moon { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 64% 30%, rgba(160, 140, 100, .35) 0 9%, transparent 10%), radial-gradient(circle at 34% 58%, rgba(160, 140, 100, .3) 0 12%, transparent 13%), radial-gradient(circle at 58% 70%, rgba(160, 140, 100, .25) 0 6%, transparent 7%), radial-gradient(circle at 38% 36%, #fffef6, #f1e7c4 55%, #cfbf91 100%); box-shadow: 0 0 22px rgba(255, 244, 210, .75), 0 0 64px rgba(255, 150, 40, .4); }
.nx-console .ht-head h1 { font-size: 46px; letter-spacing: .08em; color: #ffb84d; text-shadow: 0 0 10px #ff7a00, 0 0 28px rgba(160, 60, 255, .65); margin: 0; }
.ht-yr { color: #c9a6ff; }
.nx-console .ht-sub { color: var(--nx-text-dim); margin: 6px 0; font-size: 16px; }
.nx-console .ht-count { font-family: var(--nx-font-console); color: var(--nx-volt); letter-spacing: .06em; }
.ht-count b { font-size: 22px; }
.ht-form { margin: 14px 0 18px; padding: 12px 14px; border: 1px solid #5b2a86; background: rgba(30, 8, 48, .6); border-radius: 6px; box-shadow: inset 0 0 18px rgba(160, 60, 255, .2); }
.ht-form label { display: block; font: 600 12px var(--nx-font-console); color: #ffb84d; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .1em; }
.ht-row { display: flex; gap: 8px; } .ht-row input { flex: 1; min-width: 0; }
.ht-form .dim { margin: 8px 0 0; font-size: 13px; }
.nx-console .ht-closed { text-align: center; color: var(--nx-text-dim); margin: 14px 0 18px; }
.ht-lights { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ht-light { position: relative; padding: 12px 12px 10px 42px; background: linear-gradient(180deg, rgba(42, 14, 62, .78), rgba(8, 12, 24, .9)); border: 1px solid #3a1d55; border-radius: 6px; scroll-margin-top: 80px; }
.ht-light:target { border-color: #ffb84d; box-shadow: 0 0 16px rgba(255, 150, 40, .5); }
.nx-console .ht-light p { margin: 0 0 6px; color: var(--nx-text); line-height: 1.35; overflow-wrap: anywhere; }
.ht-light p b { color: #ffe6b0; font-weight: 600; }
.ht-light small { color: var(--nx-text-dim); }
.ht-light.ai { border-color: #26305e; }
.ht-light .ht-report { color: var(--nx-text-dim); }
/* A candle: the wax, and a flame that flickers. */
.ht-flame { position: absolute; left: 14px; top: 14px; width: 14px; height: 32px; }
.ht-flame::after { content: ''; position: absolute; left: 2px; bottom: 0; width: 10px; height: 17px; background: linear-gradient(90deg, #e8d6b0, #fff4dc 45%, #d9c49a); border-radius: 2px 2px 1px 1px; }
.ht-flame i { position: absolute; left: 3px; top: 0; width: 8px; height: 13px; background: radial-gradient(ellipse at 50% 72%, #fff7c2 0 24%, #ffb000 46%, #ff5a00 74%, transparent 76%); border-radius: 50% 50% 45% 45%; box-shadow: 0 0 10px #ffae00, 0 0 24px rgba(255, 140, 0, .6); animation: ht-flicker 1.6s infinite ease-in-out; transform-origin: 50% 100%; }
.ht-light:nth-child(3n) .ht-flame i { animation-duration: 1.15s; }
.ht-light:nth-child(4n+1) .ht-flame i { animation-duration: 2.1s; animation-delay: -.7s; }
@keyframes ht-flicker { 0%, 100% { transform: scale(1, 1) rotate(-2deg); opacity: 1; } 30% { transform: scale(.9, 1.1) rotate(2deg); } 55% { transform: scale(1.05, .93) rotate(-1deg); opacity: .88; } 80% { transform: scale(.96, 1.06) rotate(1deg); } }
.nx-console .ht-empty { color: var(--nx-text-dim); padding: 24px; text-align: center; grid-column: 1 / -1; border: 1px dashed #3a1d55; }
.nx-console .ht-also { text-align: center; margin-top: 18px; }
.ht-years { text-align: center; margin-top: 10px; font-family: var(--nx-font-console); }
.ht-ok { border-color: #ffb84d; }
@media (max-width: 600px) { .nx-console .ht-head h1 { font-size: 34px; } .ht-row { flex-direction: column; } .ht-lights { grid-template-columns: 1fr; } }