/* Home (Main board): the room, its tap spots and the HUD */
.home .room { position: absolute; inset: 0; }
.home .room > svg { position: absolute; left: 0; top: 0; }
.home-ui { position: absolute; inset: 0; }
.hot { position: absolute; display: block; padding: 0; border: none; background: transparent; outline: none; transition: background .15s, box-shadow .15s; }
.hot:not([data-hl]):hover, .hot:not([data-hl]):focus-visible { background: rgba(255, 251, 242, .28); box-shadow: 0 0 0 2px #FFFBF2, 0 0 0 4px var(--ink); }
/* a thing you can tap lights up along its own outline, not a box (owner, 8 Oct 2026): its spot (data-hl) traces the
   drawing it opens (data-hl-art, src/art/gen/room.js) in a cream line and an ink one */
/* (at rest a filter that changes nothing, so a hover only swaps one filter for another and the rest of the room is drawn
   exactly as before: switching a filter on used to shift how the weather's see-through layers blend, owner 11 Oct 2026) */
[data-hl-art] { filter: url(#hlRest); }
.home:has(.hot[data-hl="board"]:is(:hover, :focus-visible)) [data-hl-art="board"],
.home:has(.hot[data-hl="jar"]:is(:hover, :focus-visible)) [data-hl-art="jar"],
.home:has(.hot[data-hl="cat"]:is(:hover, :focus-visible)) [data-hl-art="cat"],
.home:has(.hot[data-hl="marker"]:is(:hover, :focus-visible)) [data-hl-art="marker"] { filter: url(#hlEdge); }
.home:has(.hot[data-hl="cat"]:is(:hover, :focus-visible)) [data-hl-art="cat"].hl-small { filter: url(#hlEdgeSmall); } /* (the balcony cat is drawn small) */
.hud-panel {
  text-decoration: none; color: var(--ink); position: absolute; left: 48px; bottom: 21px; display: flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px; background: var(--card); border: 2px solid var(--ink); border-radius: 16px;
}
.hud-round { position: relative; width: 56px; height: 56px; border-radius: 28px; background: var(--card); border: 2px solid var(--ink); color: var(--ink); box-shadow: var(--edge); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; text-decoration: none; }
.hud-round span { font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; }
.hud-round:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.hud-play { width: 66px; height: 66px; border-radius: 33px; background: var(--honey); }
.hud-top { position: absolute; right: 16px; top: 10px; display: flex; align-items: center; gap: 8px; }
.hud-caption { position: absolute; left: 48px; right: 16px; bottom: 21px; display: flex; justify-content: center; pointer-events: none; }
.hud-caption > div { display: flex; align-items: center; gap: 8px; padding: 3px 14px; background: var(--honey); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--edge); pointer-events: auto; font-size: 14px; font-weight: 800; max-width: 380px; text-align: center; line-height: 1.25; }
.pm-bg { position: absolute; inset: 0; background: rgba(43, 38, 34, 0.28); border: none; padding: 0; }
.pm-list { position: absolute; right: 16px; bottom: 100px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pm-pill {
  position: relative; background: var(--card); border: 2px solid var(--ink); color: var(--ink); box-shadow: var(--edge); height: 46px; border-radius: 23px;
  display: flex; align-items: center; gap: 8px; padding: 0 16px 0 6px; transform-origin: calc(100% - 33px) 50%;
}
.pm-pill .ic { width: 32px; height: 32px; border-radius: 16px; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.pm-pill .tx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.pm-pill .tx b { font-size: 15px; font-weight: 800; }
.pm-pill .tx small { font-size: 11px; font-weight: 700; color: var(--muted); }
@keyframes pmIn { 0% { opacity: 0; transform: translateY(var(--dy, 60px)) scale(.35); } 55% { opacity: 1; } 78% { transform: translateY(-4px) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes pmOut { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(var(--dy, 60px)) scale(.35); } }
@keyframes pmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pmSpin { from { opacity: 0; transform: rotate(-120deg) scale(.5); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-pm] { animation-duration: 1ms !important; animation-delay: 0ms !important; } }
.bubble { position: absolute; width: 116px; height: 34px; pointer-events: none; }
.bubble .b { position: absolute; left: 0; top: 0; width: 116px; height: 24px; border-radius: 12px; background: #FFFFFF; border: 1.4px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
/* Decorate */
.dec-dim { position: absolute; inset: 0; background: rgba(43, 38, 34, 0.12); pointer-events: none; }
.dec-spot { position: absolute; padding: 0; border-radius: 14px; }
.dec-spot.off { border: 2.5px dashed #FFFBF2; background: rgba(255, 251, 242, 0.16); box-shadow: 0 0 0 1.5px rgba(43, 38, 34, 0.6), 0 0 14px rgba(255, 251, 242, 0.9); }
.dec-spot.on { border: 3px solid var(--honey); background: rgba(242, 201, 76, 0.2); box-shadow: 0 0 0 2px var(--ink); }
.dec-spot .tag { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; border-radius: 9px; background: var(--card); border: 1.5px solid var(--ink); font-size: 11px; font-weight: 800; color: var(--ink); }
.dec-sheet { position: absolute; left: 92px; right: 16px; bottom: 21px; height: 84px; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--edge); display: flex; align-items: center; gap: 12px; padding: 0 14px; }
/* the options scroll sideways when a spot has more than fit (six sofas) */
.dec-opts { display: flex; gap: 10px; min-width: 0; overflow-x: auto; padding: 4px 3px; scrollbar-width: none; }
.dec-opts::-webkit-scrollbar { display: none; }
.dec-opt { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 6px 4px; border-radius: 12px; color: var(--ink); background: #FFFFFF; border: 2px solid var(--ink); }
.dec-opt.on { background: var(--honey-soft); box-shadow: 0 0 0 3px var(--honey); }
.dec-opt .pic { width: 58px; height: 44px; border-radius: 8px; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dec-opt .nm { font-size: 11px; font-weight: 800; white-space: nowrap; }
/* on the thing that is there, where the spot can stand empty: a tap takes it away (owner, 6 Oct 2026) */
.dec-opt { position: relative; }
.dec-x { position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 9px; background: var(--card); border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; }
/* level 10: fireworks over the Dragon Bridge, each burst blooming and fading on its own beat (owner, 9 Oct 2026) */
.fw { transform-box: fill-box; transform-origin: center; animation: fw 3.6s ease-out infinite both; }
@keyframes fw { 0% { opacity: 0; transform: scale(.25); } 12% { opacity: 1; } 55% { opacity: .95; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .fw { animation: none; opacity: .9; } }
/* the Dragon Bridge's fire (weekend nights, 9:00 to 9:15 pm; tools/view_art.py dragon_fire): a burst out of its mouth
   every few seconds, flickering, sparks flying off, and its light on the river; with reduced motion, a steady flame */
.df-burst { transform-origin: 0 0; animation: dfBurst 2.8s ease-out infinite both; }
@keyframes dfBurst { 0% { opacity: 0; transform: scale(.12, .35); } 9% { opacity: 1; transform: scale(.8, .85); } 34% { opacity: 1; transform: scale(1); }
  52% { opacity: .75; transform: scale(1.1, 1.18); } 66%, 100% { opacity: 0; transform: scale(1.18, 1.3); } }
.df-flicker { transform-origin: 0 0; animation: dfFlicker .2s ease-in-out infinite alternate; }
@keyframes dfFlicker { from { transform: scale(1, 1); } to { transform: scale(1.05, .9); } }
.df-spark { animation: dfSpark 1.1s ease-out infinite both; }
@keyframes dfSpark { 0% { opacity: 0; transform: translate(-8px, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -4px); } }
.df-glow { animation: dfGlow 2.8s ease-out infinite both; }
@keyframes dfGlow { 0% { opacity: 0; } 14% { opacity: .9; } 50% { opacity: .7; } 70%, 100% { opacity: 0; } }
/* ...and its water (owner, 17 Oct 2026): fire and water take turns, about 18 s each, crossfading; the streams flow, drops
   fall, the mist and the splash breathe. With reduced motion, a steady flame */
.df-fire { animation: dfFirePart 40s linear infinite both; }
.df-water { animation: dfWaterPart 40s linear infinite both; }
@keyframes dfFirePart { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dfWaterPart { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
.df-flow { stroke-dasharray: 4 3; animation: dfFlow .45s linear infinite; }
@keyframes dfFlow { to { stroke-dashoffset: -7; } }
.df-drop { animation: dfDrop 1.1s ease-in infinite both; }
@keyframes dfDrop { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(2px, 8px); } }
.df-mist { animation: dfMist 1.6s ease-in-out infinite alternate; }
@keyframes dfMist { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .df-burst, .df-flicker, .df-spark, .df-glow, .df-fire, .df-flow, .df-drop, .df-mist { animation: none; }
  .df-water { animation: none; opacity: 0; }
}
/* the night's lights reflected in the water sparkle, the dashes of their ripples brightening in turn (tools/view_art.py) */
.shimmer-a, .shimmer-b { animation: shimmer 2.2s ease-in-out infinite alternate; }
.shimmer-b { animation-delay: -1.1s; }
@keyframes shimmer { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shimmer-a, .shimmer-b { animation: none; } }
/* the weather's layers fade in and out as the sky changes (src/art/bind.js FADE_MS; owner, 11 Oct 2026) */
[data-fade] { transition: opacity 1.2s ease; }
@media (prefers-reduced-motion: reduce) { [data-fade] { transition: none; } }
/* level 8, the weather at the window (tools/weather_art.py): rain in two veils falling a window-height (down to the
   balcony floor) and drifting a little left, the near one faster; snow drifting down and right, slowly; fog's bands
   wandering; with reduced motion all of it holds still */
.rain-far, .rain-near { animation: rainFall 1.27s linear infinite; }
.rain-near { animation-duration: .8s; } /* (owner, 11 Oct 2026: half the speed it had, then 50% faster than that) */
@keyframes rainFall { from { transform: translate(0, 0); } to { transform: translate(-23px, 127px); } }
.snow-far, .snow-near { animation: snowFall 9s linear infinite; }
.snow-near { animation-duration: 5.5s; }
@keyframes snowFall { from { transform: translate(0, 0); } to { transform: translate(12px, 127px); } }
/* fog: two drifts of soft puffs, crossing each other slowly */
.fog-drift-a { animation: fogDrift 26s ease-in-out infinite alternate; }
.fog-drift-b { animation: fogDrift 19s ease-in-out infinite alternate-reverse; }
@keyframes fogDrift { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) { .rain-far, .rain-near, .snow-far, .snow-near, .fog-drift-a, .fog-drift-b { animation: none; } }