/* The house on /appartement: a cutaway canal house, Luuk walks between his rooms (house.js).
   Geometry is in % of the facade (.h-body): ground floor feet at y 94, top floor feet at y 44,
   stairs from (71,94) to (94,44). Keep house.js in step when moving anything. */
.apt-house{overflow-x:clip}
.house{position:relative;width:min(100%,560px);margin-inline:auto;-webkit-user-select:none;user-select:none;--brick:#B9583F;--brick-2:#A24B35;--wood:#C98A4B}
.house.is-night{--brick:#7E3B2C;--brick-2:#6C3226}

.h-gable{position:relative;aspect-ratio:10/2.4;margin-bottom:-3px;filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink))}
.h-gable-in{position:absolute;inset:0;background-color:var(--brick);
  background-image:repeating-linear-gradient(0deg,transparent 0 13px,rgba(15,52,96,.14) 13px 14px);
  clip-path:polygon(0 100%,0 74%,13% 74%,13% 50%,26% 50%,26% 26%,38% 26%,38% 3%,62% 3%,62% 26%,74% 26%,74% 50%,87% 50%,87% 74%,100% 74%,100% 100%)}
.h-attic{position:absolute;left:50%;top:40%;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#FFF8EC;border:3px solid var(--ink);transition:background .6s,box-shadow .6s}
.h-beam{position:absolute;left:50%;top:-2%;width:4%;height:16%;transform:translateX(-50%);background:var(--ink);border-radius:2px}
.h-beam::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:120%;background:var(--ink);transform:translateX(-50%)}
.is-night .h-attic{background:#FFD23F;box-shadow:0 0 16px 6px rgba(255,210,63,.55)}

.h-body{position:relative;aspect-ratio:10/8;background-color:var(--brick);border:3px solid var(--ink);border-radius:0 0 4px 4px;
  background-image:repeating-linear-gradient(0deg,transparent 0 13px,rgba(15,52,96,.14) 13px 14px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(15,52,96,.07) 27px 28px)}
.h-floor{position:absolute;left:4%;right:4%}
.h-up{top:4%;height:42%}
.h-down{top:50%;height:46%}
.h-room{position:absolute;top:0;bottom:0;overflow:hidden;border:3px solid var(--ink);border-radius:6px;background:#3a2c22;container-type:inline-size}
.h-up .h-room{left:0;right:0}
.h-keuken{left:0;width:49.4%}
.h-woonkamer{right:0;width:49.4%}
.h-room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .6s}
.h-balkon img{object-position:50% 62%}
/* lamp glow at night, and a wooden floor strip Luuk stands on */
.h-room::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(60% 70% at 50% 22%,rgba(255,196,87,.32),transparent 70%)}
.h-room::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7%;z-index:1;pointer-events:none;background:linear-gradient(var(--wood),#A86F38);border-top:2px solid var(--ink)}
.h-balkon::after{background:repeating-linear-gradient(90deg,#5d6b78 0 3px,#8796a3 3px 14px);height:6%}
.is-night .h-room img{filter:brightness(.55) saturate(.85)}
.is-night .h-room::before{opacity:1}
.h-hit{all:unset;position:absolute;inset:0;z-index:2;cursor:pointer;border-radius:3px}
.h-hit:focus-visible{outline:4px solid var(--orange);outline-offset:-6px}
.h-label{position:absolute;left:7px;top:7px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--paper);border:2px solid var(--ink);font-weight:900;font-size:12px;line-height:1.2;pointer-events:none}
.h-room.has-luuk .h-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--orange);animation:h-ping 1.8s ease-out infinite}
@keyframes h-ping{50%{box-shadow:0 0 0 2px var(--paper),0 0 0 6px rgba(232,90,38,0)}}
.h-go{position:absolute;right:7px;top:7px;z-index:4;display:none}
.h-room.picked{outline:4px solid var(--tulip);outline-offset:-7px}
.h-room.picked .h-go{display:inline-flex;animation:pop .3s var(--ease)}
@container (max-width:250px){
  .h-label{font-size:10.5px;padding:3px 8px}
  .h-go{font-size:11.5px;padding:6px 10px}
  .h-go .arr{display:none}
  .h-room.picked .h-label{display:none}
}

.h-stairs{position:absolute;left:70%;top:44%;width:25%;height:50%;z-index:3;pointer-events:none;filter:drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))}
.h-stairs::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#D99A5B,var(--wood) 60%,#9C6331);
  clip-path:polygon(0 100%,0 87.5%,12.5% 87.5%,12.5% 75%,25% 75%,25% 62.5%,37.5% 62.5%,37.5% 50%,50% 50%,50% 37.5%,62.5% 37.5%,62.5% 25%,75% 25%,75% 12.5%,87.5% 12.5%,87.5% 0,100% 0,100% 16%,15% 100%)}

.h-luuk{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:5;height:31%;aspect-ratio:160/293;transform:translate(-50%,-100%);pointer-events:none;transition:left var(--dur,0ms) linear,top var(--dur,0ms) linear}
.h-me{all:unset;display:block;width:100%;height:100%;cursor:pointer;pointer-events:auto;transform-origin:50% 100%;-webkit-tap-highlight-color:transparent}
.h-me:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:12px}
.h-luuk.flip .h-me{transform:scaleX(-1)}
.h-me img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 100%;filter:drop-shadow(0 4px 2px rgba(15,52,96,.28))}
.h-luuk.walking .h-me img{animation:h-step .46s ease-in-out infinite}
.h-luuk.hop .h-me img{animation:h-hop .5s var(--ease)}
.h-luuk.talking .h-me img{animation:h-talk .32s ease-in-out infinite alternate}
@keyframes h-step{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-5%) rotate(2.5deg)}}
@keyframes h-hop{40%{transform:translateY(-24%) scaleY(1.04)}70%{transform:translateY(0) scaleY(.94)}}
@keyframes h-talk{to{transform:scaleY(1.03) rotate(-1.5deg)}}

.h-bub{all:unset;box-sizing:border-box;position:absolute;bottom:calc(100% + 8px);left:50%;z-index:6;width:max-content;max-width:min(230px,62vw);padding:8px 12px;cursor:pointer;pointer-events:auto;
  transform:translateX(calc(-50% + var(--shift,0px)));background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink);
  font-size:15.5px;line-height:1.3;text-align:center;animation:h-bub-in .25s var(--ease)}
.h-bub[hidden]{display:none}
.h-bub::after{content:"";position:absolute;top:100%;left:calc(50% - var(--shift,0px));transform:translateX(-50%);border:8px solid transparent;border-top-color:var(--ink)}
.h-bub small{display:block;margin-top:3px;font-family:var(--f-ui);font-size:11.5px;font-weight:700;color:var(--ink-soft)}
.h-bub .h-ear{display:inline-grid;place-items:center;vertical-align:-2px;margin-left:6px;color:var(--orange-2)}
.h-bub:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.h-bub.zzz{font-family:var(--f-voice);font-style:italic;letter-spacing:.08em;color:var(--ink-soft);animation:h-zzz 2.6s ease-in-out infinite}
@keyframes h-bub-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes h-zzz{50%{translate:0 -4px}}

.h-water{position:relative;height:clamp(30px,6vw,44px);overflow:hidden;border:3px solid var(--ink);border-top:0;border-radius:0 0 18px 18px;
  background:repeating-radial-gradient(circle at 50% -60%,transparent 0 9px,rgba(255,255,255,.18) 9px 11px) 0 0/34px 22px,linear-gradient(#4A90E2,#2F6DB5)}
.is-night .h-water{background:repeating-radial-gradient(circle at 50% -60%,transparent 0 9px,rgba(255,210,63,.14) 9px 11px) 0 0/34px 22px,linear-gradient(#1D3B66,#0F2440)}
.h-boat{position:absolute;bottom:14%;left:-16%;width:clamp(38px,8%,58px);animation:h-boat 42s linear infinite;animation-delay:-9s}
@keyframes h-boat{to{left:112%}}
.h-hint{margin:12px 0 0;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  .h-luuk{transition:none}
  .h-luuk .h-me img,.h-boat,.h-bub.zzz,.h-room.has-luuk .h-label::before{animation:none}
}