/* Building interiors (room.js): shared room shell, doors, header, speech bubble,
   clay buttons. Cool daylight indoors, whatever the time outside. */
.room{
  --wall:#EEF5F9;--wall-2:#E1ECF3;--floor-a:#DCE7EF;--floor-b:#EEF4F8;
  --paper:#FFFFFF;--paper-2:#F2F7FA;--ink:#23303C;--ink-soft:#586775;--line:#D5E1E9;
  --clay-shadow:0 4px 0 #C7D6E1,0 16px 28px -16px rgba(30,60,90,.42);
  --s:1;
  position:fixed;inset:0;z-index:30;overflow:hidden;color:var(--ink);color-scheme:light;background:var(--wall);
}
[dir="rtl"] .room{--s:-1}
.room-backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.room:focus{outline:none}
.room-inner{position:absolute;inset:0;z-index:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.bunting{position:absolute;top:0;inset-inline:0;width:100%;height:58px;pointer-events:none;z-index:-1}
@media (max-width:600px){.bunting{height:40px;opacity:.9}}

.room-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(244,249,252,.97) 60%,rgba(244,249,252,0));
  padding:calc(env(safe-area-inset-top,0px) + 12px) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.room-plaque{display:inline-flex;align-items:center;gap:8px;min-width:0;margin-inline-end:auto;padding:6px 16px 4px 8px;border-radius:999px;background:#fff;box-shadow:var(--clay-shadow)}
.room-plaque .ico{width:28px;height:28px;flex:none}
.room-title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(16px,4.2vw,21px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-exit,.room-back{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;border-radius:999px;padding:6px 14px 4px;background:#fff;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);box-shadow:var(--clay-shadow);transition:transform .12s,box-shadow .12s}
.room-exit .ico{width:22px;height:22px}
.room-exit:active,.room-back:active{transform:translateY(3px);box-shadow:0 1px 0 #C7D6E1}
.room-back .chev{width:10px;height:10px;border-inline-start:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(calc(45deg * var(--s)));margin-inline-start:4px}
@media (max-width:400px){.room-exit span{display:none}.room-exit{padding-inline:11px}}
@media (max-width:600px){.room-head:has(.room-back:not([hidden])) .room-title{display:none}.room-head:has(.room-back:not([hidden])) .room-plaque{padding-inline-end:8px}}

.room :focus-visible{outline:3px solid var(--k-blue);outline-offset:3px}

/* speech bubble */
.room .bubble{position:relative;margin:0;padding:12px 16px 10px;border-radius:20px;background:#fff;font-family:var(--display);font-weight:600;font-size:clamp(14px,3.7vw,17px);line-height:1.45;color:var(--ink);box-shadow:var(--clay-shadow);text-wrap:pretty}
.room .bubble::after{content:"";position:absolute;bottom:-11px;inset-inline-start:42%;width:22px;height:14px;background:#fff;clip-path:polygon(0 0,100% 0,30% 100%)}
[dir="rtl"] .room .bubble::after{clip-path:polygon(0 0,100% 0,70% 100%)}

/* clay buttons used inside rooms */
.clay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:0;border-radius:999px;padding:10px 22px 7px;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.2;transition:transform .12s,box-shadow .12s,filter .2s}
.clay.go{color:#fff;background:linear-gradient(180deg,#45BDF0,#1EA3DF 60%,#1A93CB);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 #13759F,0 14px 22px -12px rgba(19,117,159,.7)}
.clay.go:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 #13759F}
.clay.ghost{color:var(--ink);background:#fff;box-shadow:0 3px 0 #C7D6E1}
.clay.ghost:active{transform:translateY(2px);box-shadow:0 1px 0 #C7D6E1}
.clay:disabled{filter:saturate(.4) brightness(1.05);cursor:default}
.clay.busy{position:relative;color:transparent}
.clay.busy::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.5);border-top-color:#fff;animation:roomspin .8s linear infinite}
@keyframes roomspin{to{transform:rotate(360deg)}}

/* doors: the room opens like walking through the building's front doors */
.room-doors{position:absolute;inset:0;z-index:20;display:flex;pointer-events:none}
.room:not(.entering):not(.leaving) .room-doors{display:none}
.room-doors i{position:relative;flex:1;background:linear-gradient(180deg,var(--door-a,#5CC4F0),var(--door-b,#1791C8));box-shadow:inset 0 0 0 10px rgba(255,255,255,.18)}
.room-doors i::before{content:"";position:absolute;inset:14% 18% 40%;border-radius:999px 999px 24px 24px;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(220,240,250,.35));box-shadow:inset 0 0 0 6px rgba(255,255,255,.35)}
.room-doors i::after{content:"";position:absolute;top:52%;width:12px;height:70px;border-radius:8px;background:linear-gradient(90deg,#FFE47E,#E0AA10);box-shadow:0 3px 0 rgba(0,0,0,.15)}
.room-doors i:first-child::after{inset-inline-end:22px}
.room-doors i:last-child::after{inset-inline-start:22px}
.room.entering{animation:roomfade .25s ease both}
.room.entering .room-doors i:first-child{animation:doorA .85s cubic-bezier(.65,0,.25,1) .2s both}
.room.entering .room-doors i:last-child{animation:doorB .85s cubic-bezier(.65,0,.25,1) .2s both}
.room.entering .room-inner{animation:walkin .9s cubic-bezier(.2,.8,.25,1) .15s both}
.room.leaving .room-doors i:first-child{animation:doorA .34s cubic-bezier(.5,0,.75,0) reverse both}
.room.leaving .room-doors i:last-child{animation:doorB .34s cubic-bezier(.5,0,.75,0) reverse both}
.room.leaving{animation:roomfade .2s ease .32s reverse both}
@keyframes doorA{to{transform:translateX(calc(-101% * var(--s)))}}
@keyframes doorB{to{transform:translateX(calc(101% * var(--s)))}}
@keyframes walkin{from{transform:scale(1.08) translateY(10px);opacity:.3}}
@keyframes roomfade{from{opacity:0}}

@media (prefers-reduced-motion:reduce){.room-doors{display:none!important}}

/* ---------- characters (chars.js): alive, gently ---------- */
.room .breathe{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.012,1.022)}}
.room .blink{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
.visitors-art .blink,.kid-art .blink{animation-duration:4.3s;animation-delay:1.1s}
@keyframes blink{0%,93%,100%{transform:none}95.5%{transform:scaleY(.08)}}
.room .arm-wave{opacity:0;transform-box:view-box;transition:opacity .25s}
.room.greet .arm-wave{opacity:1;animation:hostwave .55s ease-in-out .5s 5 alternate}
.room.greet .arm-rest{opacity:0}
.room .arm-rest{transition:opacity .25s}
@keyframes hostwave{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
.room .kid-wave{transform-box:fill-box;transform-origin:20% 100%}
.room.greet .kid-wave{animation:kidwave .5s ease-in-out .8s 6 alternate}
@keyframes kidwave{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
.room .writing{transform-box:fill-box;transform-origin:center;animation:write 1.8s ease-in-out infinite}
@keyframes write{25%{transform:translate(3px,-1px)}50%{transform:translate(6px,1px)}75%{transform:translate(2px,0)}}
.room .pin-card{transform-box:fill-box;transform-origin:center;animation:pinpress 3s ease-in-out infinite}
.room .tiptoe{transform-box:fill-box;transform-origin:50% 100%;animation:tiptoe 3s ease-in-out infinite}
@keyframes pinpress{40%,60%{transform:translateY(-3px)}}
@keyframes tiptoe{40%,60%{transform:translateY(-2px)}}
.room .balloon{transform-box:fill-box;transform-origin:50% 100%;animation:balloon 4s ease-in-out infinite}
@keyframes balloon{50%{transform:rotate(5deg) translateY(-2px)}}

/* clay characters (roomcast.js): one canvas at the back of the stage, under the furniture;
   the SVG people step aside while it draws (they stay as the fallback and keep the layout) */
.clay-stage{position:absolute;inset:-48px -48px 0;width:calc(100% + 96px);height:calc(100% + 48px);pointer-events:none;z-index:-1}
.clay-on .svg-char{display:none}
.clay-on .visitors-art,.clay-on .kid-wait .kid-art{visibility:hidden}