/* 13 Nights only: the haunted house. The header, status lines and puzzles are in ../shared/calendar/calendar.css;
   shared rules in ../shared/base.css. Candle light inside a window or a pumpkin is the scene, not a surface, so it may glow. */
/* ---- the house ---- */
.house-wrap { display: grid; gap: 8px 40px; }
.house-top { min-height: 3.2em; }
.house-svg { display: block; width: 100%; height: auto; max-height: max(340px, calc(100vh - 180px)); max-height: max(340px, calc(100dvh - 180px)); margin: 0 auto; }
.house-more .share-text { margin-top: 12px; }
@media (min-width: 860px) {
  .house-wrap { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); grid-template-rows: auto 1fr; }
  .house-art { grid-column: 1; grid-row: 1 / 3; }
  .house-top { grid-column: 2; grid-row: 1; align-self: end; margin-top: 40px; }
  .house-more { grid-column: 2; grid-row: 2; }
  .house-svg { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .status { font-size: 24px; }
}

.house-svg text { font-family: "Lexend", system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.star { fill: #F5F3EA; opacity: 0.7; }
.moon { fill: #F5F3EA; }
.crater { fill: #DEDACB; }
.bat path { fill: #05081A; }
.tree path { fill: none; stroke: #090E25; stroke-linecap: round; }
.tree .trunk { stroke-width: 13; } .tree .branch { stroke-width: 6; } .tree .twig { stroke-width: 3; }
.hill { fill: #0A0F27; }
.wall { fill: #0E1536; }
.siding { stroke: #1E2A5C; stroke-width: 3; }
.roof, .trim-fill { fill: #080C24; }
.trim { fill: none; stroke: #2A3570; stroke-width: 5; stroke-linejoin: round; }
.door { fill: #1A1430; stroke: #3A4785; stroke-width: 3; }
.door-line { stroke: #3A4785; stroke-width: 2; }
.knob { fill: #BCC2DD; }
.step { fill: #2A3570; }
.grave { fill: #2A3570; }
.fence { fill: #070A1E; }
.fog { fill: #9FB4FF; opacity: 0.08; }
.pk { fill: #7A3A12; } .pk2 { fill: #8E4516; } .pk-face { fill: #1A0C04; } .pk-stem { fill: #3F5622; }
.all-lit .pk { fill: #E8741E; } .all-lit .pk2 { fill: #F28A2E; } .all-lit .pk-face { fill: #FFE7A3; }
.all-lit .door { fill: #FFC14D; }

/* windows: dark (not yet, shows its date), open (yellow outline, a candle flickering), lit (solid warm light),
   boarded (dashed outline and planks). The words and outlines carry the state as well as the colour. */
.win { cursor: pointer; outline: none; }
.win.dark { cursor: default; }
.win .glass { fill: #161F48; }
.win .glow { fill: url(#nl-candle); opacity: 0; }
.win .halo { fill: url(#nl-halo); opacity: 0; transition: opacity 600ms; pointer-events: none; }
.win .bars { fill: none; stroke: #3A4785; stroke-width: 3; }
.win .frame { fill: none; stroke: #3A4785; stroke-width: 3; }
.win .boards { display: none; }
.win .boards rect { fill: #6B4A2B; stroke: #2B1A0C; stroke-width: 2; stroke-dasharray: 3 9; }
.win .day { font-size: 30px; font-weight: 800; fill: #BCC2DD; }
.win .mon { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; fill: #BCC2DD; }
.win .ring { fill: none; stroke: transparent; stroke-width: 4; }
.win:focus-visible .ring { stroke: var(--accent); }
.win.open .frame { stroke: var(--accent); stroke-width: 4; }
.win.open .glow { opacity: 0.4; animation: flicker 3.2s infinite; }
.win.open .day, .win.open .mon { fill: var(--accent); paint-order: stroke; stroke: #121A3A; stroke-width: 4px; }
.win.lit .glow { opacity: 1; }
.win.lit .halo { opacity: 1; }
.win.lit .bars { stroke: #6E2E08; }
.win.lit .frame { stroke: #FFE7A3; stroke-width: 4; }
.win.lit .day, .win.lit .mon { fill: #3A1A00; }
.win.lit .mon { display: none; }
.win.boarded .boards { display: inline; }
.win.boarded .frame { stroke: var(--wrong); stroke-dasharray: 8 6; }
.win.boarded .day { fill: #F5F3EA; paint-order: stroke; stroke: #121A3A; stroke-width: 5px; }
.win.boarded .mon { display: none; }
.win.dark .day { opacity: 0.8; }
@media (hover: hover) { .win.open:hover .glow { opacity: 0.75; } }

@keyframes flicker { 0%, 100% { opacity: 0.38; } 12% { opacity: 0.55; } 20% { opacity: 0.32; } 47% { opacity: 0.6; } 55% { opacity: 0.42; } 80% { opacity: 0.52; } }
.win.lit .glow { animation: glow 5s infinite; }
@keyframes glow { 0%, 100% { opacity: 1; } 30% { opacity: 0.88; } 60% { opacity: 0.97; } }
.win.just.lit .glow { animation: ignite 1.6s ease-out; }
.win.just.lit .halo { animation: ignite 1.6s ease-out; }
@keyframes ignite { 0% { opacity: 0; } 15% { opacity: 0.8; } 22% { opacity: 0.2; } 35% { opacity: 1; } 45% { opacity: 0.5; } 100% { opacity: 1; } }
.win.just.boarded .boards rect { animation: board 450ms ease-out backwards; transform-box: fill-box; transform-origin: center; }
.win.just.boarded .boards rect + rect { animation-delay: 250ms; }
@keyframes board { from { transform: scale(0, 1); } }
.star.s1 { animation: twinkle 4s infinite; } .star.s2 { animation: twinkle 6s 1s infinite; }
@keyframes twinkle { 50% { opacity: 0.2; } }
.bat { animation: fly 16s linear infinite; }
.bat.b2 { animation-duration: 21s; animation-delay: -6s; } .bat.b3 { animation-duration: 26s; animation-delay: -15s; }
@keyframes fly { 0% { transform: translate(-60px, 150px); } 50% { transform: translate(300px, 60px); } 100% { transform: translate(600px, 120px); } }
.bat.b2 { animation-name: fly2; }
@keyframes fly2 { 0% { transform: translate(580px, 40px); } 50% { transform: translate(260px, 130px); } 100% { transform: translate(-60px, 70px); } }
.fog.f1 { animation: drift 18s ease-in-out infinite alternate; } .fog.f2 { animation: drift 23s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translateX(60px); } }
@media (prefers-reduced-motion: reduce) {
  .win.open .glow, .win.lit .glow, .win.just .glow, .win.just .halo, .win.just .boards rect, .star, .bat, .fog { animation: none !important; }
  .bat { transform: translate(380px, 60px); } .bat.b2 { transform: translate(440px, 120px); } .bat.b3 { transform: translate(330px, 100px); }
}