*{box-sizing:border-box}
:root{color-scheme:only light}
html{scrollbar-width:thin;scrollbar-color:#785a87 #1e1a22}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#1e1a22}
::-webkit-scrollbar-thumb{background:#785a87;border-radius:4px}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#101010;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
}

#viewport{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#101010;
}

#layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,25vw,390px);width:100vw;height:100vh;height:100dvh}
.chat-panel{display:flex;flex-direction:column;min-height:0;min-width:0;background:linear-gradient(150deg,#251f26,#19171d 55%);color:#eee8e0;border-left:3px solid #614332;font-size:14px}
.chat-header{padding:18px 16px 14px;background:linear-gradient(110deg,#302017e8,#352139df),url("seniorenstift_bg.png") center 16%/cover;border-top:4px solid #ad6948;border-bottom:1px solid #74513e;box-shadow:0 3px 12px #0003}
.chat-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.chat-brand>img{flex:none;padding:3px;border-radius:9px;background:#f5dfb9;box-shadow:0 2px 7px #0004}
.chat-eyebrow{font-size:9px;letter-spacing:1.1px;color:#ebcda2;font-weight:700}
.chat-header h1{font-size:22px;line-height:1.2;margin:5px 0 0;color:#fff7e8;display:flex;align-items:center;gap:9px}
.twitch-badge{padding:3px 6px;border-radius:4px;color:#e8d7ff;background:#9146ff35;border:1px solid #ae7cfb80;font-size:10px;font-weight:700;letter-spacing:.4px}
.chat-open{display:inline-block;padding:8px 11px;border:1px solid #b38ae1;border-radius:6px;color:#faf4ff;background:#7940bb;text-decoration:none;font-size:12px;font-weight:600;transition:background .15s}
.chat-open:hover{background:#9146ff}
.chat-connection{padding:10px 15px 6px;margin:0;font-size:10px;line-height:1.5;color:#c5b7ca}
.chat-connection::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#dbb671}
.chat-connection[data-state="connected"]::before{background:#69d5a0;box-shadow:0 0 7px #69d5a040}
.chat-tabs{display:flex;gap:6px;padding:4px 12px 8px}
.chat-tabs button{font-size:11px;border-color:#67566f;background:#27212e;color:#cab7da;padding:5px 9px}
.chat-tabs button[aria-pressed="true"]{background:#473050;border-color:#9264b4;color:#f5e9ff}
.chat-feed{flex:1;min-height:0;overflow:auto;padding:3px 13px 14px;scrollbar-width:thin;scrollbar-color:#785a87 #1e1a22;overflow-wrap:anywhere}
.chat-feed::-webkit-scrollbar{width:6px}
.chat-feed::-webkit-scrollbar-thumb{background:#785a87;border-radius:4px}
.chat-empty{color:#b9a6bb;font-size:12px;line-height:1.6;padding:10px 2px}
.chat-line{padding:4px 2px;line-height:1.5;font-size:13px;border:0;border-radius:3px}
.chat-line:hover{background:#b58ad00d}
.chat-line-name{font-size:13px;font-weight:700;color:#cf9fff;margin-right:5px}
.chat-line time{font-size:10px;color:#a297a9;margin-right:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chat-line-text{font-size:13px;white-space:pre-wrap}
.chat-footer{font-size:10px;line-height:1.5;color:#b8a6b7;padding:10px 14px;margin:0;background:#30232b;border-top:1px solid #594133}
.twitch-chat-container{flex:1;min-height:0;display:flex}
.twitch-chat-container iframe{width:100%;height:100%;border:0}
.chat-feed[hidden],.twitch-chat-container[hidden]{display:none!important}
.bubble.chat-message{background:#fff;border-color:#285b81;color:#142f45;max-width:250px;overflow-wrap:anywhere}
.bubble.chat-message::after{background:#fff;border-color:#285b81}
@media(max-width:720px){
  #layout{grid-template-columns:minmax(0,1fr);grid-template-rows:55dvh minmax(0,1fr)}
  .chat-panel{border-left:0;border-top:2px solid #614332}
  .chat-header{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .chat-header h1{font-size:18px;margin:4px 0 0}
  .chat-eyebrow{font-size:8px}
  .chat-footer{padding:7px 13px}
}

#stage{
  position:absolute;
  width:1648px;
  height:928px;
  transform-origin:top left;
  overflow:hidden;
  background:#0e67bd;
  image-rendering:auto;
}

#background{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;
}

/* Sky follows the roof silhouette, including both chimneys. */
.sky{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(#0958ee 0%,#1881f5 23%,#40aff4 40%);
  clip-path:polygon(0% 0%,100% 0%,100% 19.979%,99.821% 19.979%,85.287% 5.420%,81.459% 5.420%,81.459% 2.019%,77.333% 2.019%,77.333% 5.420%,67.644% 5.420%,65.311% 2.338%,51.077% 2.338%,50.060% 1.382%,49.103% 2.338%,34.868% 2.338%,32.297% 5.420%,22.847% 5.420%,22.847% 2.444%,22.309% 1.913%,18.840% 1.913%,18.840% 5.420%,14.713% 5.420%,0.419% 19.979%,0% 19.979%);
}
.cloud{
  position:absolute;
  left:0;
  width:190px;
  height:76px;
  background:url("cloud.svg") center/contain no-repeat;
  image-rendering:auto;
  animation:cloudDrift 260s linear infinite;
}
.cloud-one{top:22px;animation-delay:-43s;opacity:.88;--rest-x:85px}
.cloud-two{top:40px;width:230px;height:92px;animation-duration:340s;animation-delay:-270s;opacity:.78;--rest-x:1455px}
.cloud-three{top:6px;width:130px;height:52px;animation-duration:300s;animation-delay:-125s;opacity:.54;--rest-x:640px}
@keyframes cloudDrift{
  from{transform:translateX(-260px)}
  to{transform:translateX(1900px)}
}
@media(prefers-reduced-motion:reduce){
  .cloud{animation:none;transform:translateX(var(--rest-x))}
}

.resident{
  position:absolute;
  left:1270px;
  top:690px;
  width:56px;
  height:106px;
  z-index:50;
  transition:opacity .28s ease;
  pointer-events:none;
}

.resident.hidden{
  opacity:0;
}
#stage[data-world-state="loading"] .resident{visibility:hidden}

/* Eigene Pflegefigur; teilt sich dieselben Laufwege mit den Bewohnern. */
.nurse{
  left:1450px;
  top:238px;
}
.nurse .body{
  background:#f2fbff;
  border-color:#254253;
}
.nurse .shirt-line{background:#70c6d5}
.nurse .body::after{
  content:"";
  position:absolute;
  right:3px;
  top:6px;
  width:6px;
  height:8px;
  background:#339eb5;
  border:1px solid #254253;
}
.nurse .leg{background:#65b9cb}
.nurse .shoe{background:#e7f3f7}
.nurse .hair{
  background:#69452e;
  height:9px;
  border-radius:3px 3px 0 0;
}
.nurse .hair::after{
  content:"";
  position:absolute;
  right:-8px;
  top:-3px;
  width:11px;
  height:11px;
  border:2px solid #252525;
  border-radius:50%;
  background:#69452e;
}
.nurse .nameplate{
  font-size:11px;
}
.desk-chair{display:none}
.nurse[data-work="desk"] .sprite{animation:none;transform:none}
.nurse[data-work="desk"] .head{bottom:64px}
.nurse[data-work="desk"] .shadow{visibility:hidden}
.nurse[data-work="desk"] .body{bottom:24px;height:27px}
.nurse[data-work="desk"] .leg{bottom:13px;height:14px;transform-origin:50% 2px}
.nurse[data-work="desk"] .leg.left{left:10px;transform:rotate(-22deg)}
.nurse[data-work="desk"] .leg.right{left:36px;transform:rotate(22deg)}
.nurse[data-work="desk"] .shoe{width:11px;height:6px}
.nurse[data-work="desk"] .arm{top:31px;bottom:auto;height:14px;transform-origin:50% 4px;animation:deskTyping 1s ease-in-out infinite;animation-delay:var(--desk-delay,0s)}
.nurse[data-work="desk"] .arm.left{left:9px;rotate:105deg}
.nurse[data-work="desk"] .arm.right{left:37px;rotate:-105deg;animation-direction:reverse}
.nurse[data-work="desk"] .arm::before{content:"";position:absolute;left:-2px;top:-2px;width:8px;height:8px;border:2px solid #254253;border-radius:3px;background:#f2fbff}
.nurse[data-work="desk"] .head{animation:deskReading 4s ease-in-out infinite;animation-delay:var(--desk-delay,0s);transform-origin:50% 100%}
.nurse[data-work="desk"] .desk-chair{display:block;position:absolute;left:6px;top:18px;width:45px;height:65px;z-index:20;background:url('seniorenstift_bg.png') -1365px -256px/1648px 928px no-repeat;clip-path:polygon(35% 0,80% 0,89% 7%,92% 17%,92% 42%,87% 49%,95% 52%,97% 61%,90% 66%,59% 66%,59% 80%,88% 86%,98% 92%,98% 100%,85% 100%,82% 91%,59% 88%,59% 100%,44% 100%,44% 88%,17% 93%,16% 100%,0 100%,0 91%,10% 85%,43% 79%,43% 66%,8% 66%,0 60%,0 53%,22% 50%,22% 17%,26% 7%);pointer-events:none}
@keyframes deskTyping{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes deskReading{0%,100%{transform:rotate(0)}35%{transform:rotate(-4deg)}70%{transform:translateY(1px) rotate(2deg)}}
.office-monitor{position:absolute;left:1303.5px;top:244px;width:24px;height:19px;z-index:11;overflow:hidden;background:#e7f0f3;pointer-events:none;font:2.6px/1.4 Arial,sans-serif;color:#334455}
.office-monitor>div{display:none;height:100%;padding:2px;background:#f5f7fb}.office-monitor b{display:block;background:#2b5aab;color:#fff;margin:-2px -2px 2px;padding:1px;font-size:3px;line-height:1}
.office-monitor[data-mode="document"] .office-document,.office-monitor[data-mode="sheet"] .office-sheet,.office-monitor[data-mode="calendar"] .office-calendar{display:block}
.office-document i{display:block;height:1px;background:#aebdc9;margin:2px 2px 0}.office-document i:nth-child(3){width:65%}.office-document span{display:block;height:1px;width:8px;background:#657587;margin:2px}
.office-sheet b{background:#2a7d57}.office-sheet div{height:11px;background:repeating-linear-gradient(0deg,transparent 0 3px,#a9bdb2 3px 3.5px),repeating-linear-gradient(90deg,transparent 0 5px,#a9bdb2 5px 5.5px)}
.office-sheet span{position:absolute;left:7px;top:9px;width:6px;height:4px;border:.7px solid #168552}
.office-calendar b{background:#7956a3}.office-calendar div{height:11px;background:repeating-linear-gradient(90deg,transparent 0 4px,#d4c6e2 4px 4.5px),repeating-linear-gradient(0deg,transparent 0 4px,#ddd5e4 4px 4.5px)}
.office-calendar span{position:absolute;left:8px;top:9px;width:6px;height:3px;background:#aa7acc}
.office-monitor.active span{animation:officeEditing 4s steps(3,end) infinite}
@keyframes officeEditing{0%,100%{translate:0 0}50%{translate:2px 3px}}
@media(prefers-reduced-motion:reduce){.nurse[data-work="desk"] .head,.nurse[data-work="desk"] .arm,.office-monitor.active span{animation:none}}

.sprite{
  position:relative;
  width:56px;
  height:82px;
  transform-origin:50% 100%;
}

.shadow{
  position:absolute;
  left:13px;
  bottom:0;
  width:30px;
  height:8px;
  border-radius:50%;
  background:rgba(0,0,0,.24);
}

.leg{
  position:absolute;
  bottom:6px;
  width:9px;
  height:30px;
  background:var(--resident-trousers,#4d4f76);
  border:2px solid #232323;
  transform-origin:50% 3px;
}
.leg.left{left:16px}
.leg.right{left:30px}

.shoe{
  position:absolute;
  left:-3px;
  bottom:-5px;
  width:15px;
  height:7px;
  background:#332a25;
  border:2px solid #202020;
  border-radius:2px;
}

.body{
  position:absolute;
  left:12px;
  bottom:31px;
  width:32px;
  height:31px;
  background:var(--resident-shirt,#4da35f);
  border:3px solid #252525;
  border-radius:4px 4px 2px 2px;
}

.shirt-line{
  position:absolute;
  left:50%;
  top:4px;
  width:2px;
  height:22px;
  background:rgba(255,255,255,.28);
}

.arm{
  position:absolute;
  bottom:34px;
  width:8px;
  height:27px;
  background:#e8b98d;
  border:2px solid #282828;
  transform-origin:50% 3px;
  border-radius:2px;
}
.arm.left{left:6px}
.arm.right{left:42px}

.hand{
  position:absolute;
  left:-1px;
  bottom:-6px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#efc39a;
  border:2px solid #282828;
}

.head{
  position:absolute;
  left:14px;
  bottom:59px;
  width:28px;
  height:24px;
  background:#efc39a;
  border:3px solid #252525;
  border-radius:5px;
}

.hair{
  position:absolute;
  left:0;
  top:0;
  width:22px;
  height:7px;
  background:var(--resident-hair,#d9d9d9);
  border-right:2px solid #252525;
}

.ear{
  position:absolute;
  top:8px;
  width:5px;
  height:7px;
  background:#e4b184;
  border:2px solid #252525;
}
.ear.left{left:-6px}
.ear.right{right:-6px}

.eye{
  position:absolute;
  top:9px;
  width:3px;
  height:3px;
  background:#222;
}
.e1{left:6px}
.e2{right:6px}

.nose{
  position:absolute;
  left:11px;
  top:12px;
  width:4px;
  height:4px;
  background:#d89e73;
}

.mouth{
  position:absolute;
  left:8px;
  top:17px;
  width:8px;
  height:3px;
  border-bottom:2px solid #8d5a55;
}

.nameplate{
  position:absolute;
  top:83px;
  left:50%;
  transform:translateX(-50%);
  display:inline-block;
  margin:0;
  padding:2px 6px;
  border-radius:3px;
  background:rgba(20,20,20,.86);
  color:#fff;
  border:1px solid rgba(255,255,255,.26);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.bubble{
  position:absolute;
  left:50%;
  bottom:101px;
  transform:translateX(-50%);
  min-width:145px;
  max-width:220px;
  padding:8px 10px;
  background:#fff;
  border:3px solid #3d2d23;
  border-radius:8px;
  box-shadow:0 5px 12px rgba(0,0,0,.22);
  color:#2c231d;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  opacity:0;
  transition:opacity .18s ease;
}
.bubble::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:14px;
  height:14px;
  background:#fff;
  border-right:3px solid #3d2d23;
  border-bottom:3px solid #3d2d23;
  transform:translateX(-50%) rotate(45deg);
}
.bubble{pointer-events:none}
.bubble.show{opacity:1;pointer-events:auto}
.sss-choice-icon{float:left;width:28px;height:28px;object-fit:contain;margin:0 6px 3px 0}
.sss-choice-icon[hidden]{display:none}

.resident[data-view="side"].facing-left .sprite{
  transform:scaleX(-1);
}

/* A true profile is narrower, with one eye, a visible nose and layered limbs. */
.resident[data-view="side"] .head{left:17px;width:23px;z-index:5}
.resident[data-view="side"] .hair{width:12px;height:18px;border-right:0;border-radius:2px 0 3px 0}
.resident[data-view="side"] .ear.left{left:-2px;top:9px;z-index:1}
.resident[data-view="side"] .ear.right,.resident[data-view="side"] .eye.e1{display:none}
.resident[data-view="side"] .eye.e2{right:3px}
.resident[data-view="side"] .nose{left:18px;top:10px;width:7px;height:6px;border:1px solid #825c43;border-left:0;border-radius:0 3px 2px 0}
.resident[data-view="side"] .mouth{left:12px;top:17px;width:7px}
.resident[data-view="side"] .body{left:18px;width:22px;z-index:3;border-radius:5px 6px 2px 2px}
.resident[data-view="side"] .shirt-line{left:14px}
.resident[data-view="side"] .arm{left:25px}
.resident[data-view="side"] .arm.left{z-index:1;filter:brightness(.84)}
.resident[data-view="side"] .arm.right{z-index:4}
.resident[data-view="side"] .leg{left:25px}
.resident[data-view="side"] .leg.left{z-index:1;filter:brightness(.8)}
.resident[data-view="side"] .leg.right{z-index:2}
.resident[data-view="side"] .shoe{left:-1px;width:15px}
.nurse[data-view="side"] .hair::after{left:-9px;right:auto;top:3px}

/* Rear view: hair and the back of the shirt, without facial/front details. */
.resident[data-view="back"] .eye,.resident[data-view="back"] .nose,
.resident[data-view="back"] .mouth,.resident[data-view="back"] .shirt-line,
.nurse[data-view="back"] .body::after{display:none}
.resident[data-view="back"] .head{background:var(--resident-hair,#d9d9d9)}
.resident[data-view="back"] .hair{width:22px;height:18px;border-right:0;border-radius:2px}
.nurse[data-view="back"] .head{background:#69452e}

.resident.walking .leg{animation:legStride .8s ease-in-out infinite;animation-delay:var(--gait-delay,0s)}
.resident.walking .leg.right{animation-delay:calc(var(--gait-delay,0s) - .4s)}
.resident.walking .arm{animation:armSwing .8s ease-in-out infinite;animation-delay:var(--gait-delay,0s)}
.resident.walking .arm.left{animation-delay:calc(var(--gait-delay,0s) - .4s)}
.resident.walking[data-view="side"] .leg{animation-name:sideLegStride}
.resident.walking[data-view="side"] .arm{animation-name:sideArmSwing}
.resident.walking .sprite{animation:walkBob .2s ease-in-out infinite alternate}
.resident.standing .sprite{animation:idleBob 1.1s infinite alternate}

/* Frontal sprite: swing forwards/backwards in depth instead of sideways.
   Opposite arm and leg share a phase; the other pair is half a stride apart. */
@keyframes legStride{
  0%,100%{transform:perspective(140px) rotateX(-24deg) translateY(1.5px)}
  50%{transform:perspective(140px) rotateX(24deg) translateY(-1.5px)}
}
@keyframes armSwing{
  0%,100%{transform:perspective(140px) rotateX(-28deg) translateY(2px)}
  50%{transform:perspective(140px) rotateX(28deg) translateY(-2px)}
}
@keyframes sideLegStride{
  0%,100%{transform:rotate(-24deg)}
  50%{transform:rotate(24deg)}
}
@keyframes sideArmSwing{
  0%,100%{transform:rotate(-18deg)}
  50%{transform:rotate(18deg)}
}

/* Shared Schnick, Schnack, Schnuck: three pumps, then a held hand sign. */
.resident[data-sss-phase="shake"] .sprite,.resident[data-sss-phase="reveal"] .sprite{animation:none}
.resident:is([data-sss-phase="shake"],[data-sss-phase="reveal"],[data-sss-phase="kneel"]).facing-right .bubble{left:0;transform:translateX(-80%)}
.resident:is([data-sss-phase="shake"],[data-sss-phase="reveal"],[data-sss-phase="kneel"]).facing-right .bubble::after{left:80%}
.resident:is([data-sss-phase="shake"],[data-sss-phase="reveal"],[data-sss-phase="kneel"]).facing-left .bubble{left:100%;transform:translateX(-20%)}
.resident:is([data-sss-phase="shake"],[data-sss-phase="reveal"],[data-sss-phase="kneel"]).facing-left .bubble::after{left:20%}
.resident[data-sss-phase="shake"] .arm.right{
  animation:sssPump .6s ease-in-out infinite;
  animation-delay:var(--sss-delay,0s);
}
.resident[data-sss-phase="reveal"] .arm.right{animation:none;transform:rotate(-72deg)}
.resident[data-sss-phase="shake"] .arm.right .hand{width:10px;height:10px;border-radius:4px}
.resident[data-sss-phase="reveal"] .arm.right .hand{width:11px;height:10px;border-radius:4px}
.resident[data-sss-choice="paper"] .arm.right .hand{width:12px;height:13px;border-radius:3px 3px 5px 5px}
.resident[data-sss-choice="paper"] .arm.right .hand::after{
  content:"";position:absolute;left:0;bottom:-5px;width:2px;height:6px;
  background:#efc39a;border:1px solid #825c43;border-radius:2px;
  box-shadow:3px 0 #efc39a,6px 0 #efc39a;
}
.resident[data-sss-choice="scissors"] .arm.right .hand::before,
.resident[data-sss-choice="scissors"] .arm.right .hand::after{
  content:"";position:absolute;bottom:-9px;width:4px;height:10px;
  background:#efc39a;border:1px solid #825c43;border-radius:3px;
  transform-origin:50% 0;
}
.resident[data-sss-choice="scissors"] .arm.right .hand::before{left:0;transform:rotate(22deg)}
.resident[data-sss-choice="scissors"] .arm.right .hand::after{right:0;transform:rotate(-22deg)}
.sss-score{
  position:absolute;top:104px;left:50%;transform:translateX(-50%);
  padding:2px 7px;border:1px solid #e3c477;border-radius:5px;background:#3e2a50;
  color:#ffe9a4;font-size:12px;font-weight:800;white-space:nowrap;
}
.sss-score[hidden]{display:none}
.crown{
  display:none;position:absolute;left:50%;bottom:calc(100% - 1px);
  width:34px;height:24px;transform:translateX(-50%);z-index:12;
  background:url("crown.svg") center/contain no-repeat;filter:drop-shadow(0 1px 2px #633b1480);
}
.resident.crowned .crown{display:block}
.resident[data-sss-phase="kneel"] .sprite{
  animation:sssKneel .55s ease-out both;animation-delay:var(--sss-delay,0s);
  --kneel-lean:8deg;
}
.resident[data-sss-phase="kneel"].facing-left .sprite{--kneel-lean:-8deg}
.resident[data-sss-phase="kneel"] .leg{display:none}
.resident[data-sss-phase="kneel"] .sprite::after{
  content:"";position:absolute;left:8px;top:43px;width:42px;height:25px;
  background:url("sss-kneel-legs.svg") center/contain no-repeat;z-index:2;
}
.resident[data-sss-phase="kneel"] .arm.right{animation:none;transform:rotate(-15deg)}
.resident[data-sss-phase="kneel"] .arm.left{animation:none;transform:rotate(5deg)}
@keyframes sssKneel{from{translate:0 0;rotate:0deg}to{translate:0 16px;rotate:var(--kneel-lean)}}
@keyframes sssPump{0%,100%{transform:rotate(-65deg)}50%{transform:rotate(-15deg)}}
@keyframes walkBob{from{translate:0 0}to{translate:0 -2px}}
@keyframes idleBob{from{translate:0 0}to{translate:0 -1px}}

.hud{
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:80;
  padding:9px 12px;
  background:rgba(13,18,22,.78);
  color:#fff;
  border:2px solid rgba(255,255,255,.24);
  border-radius:8px;
  backdrop-filter:blur(2px);
  box-shadow:0 5px 14px rgba(0,0,0,.2);
  font-size:14px;
}
.hud-row{
  display:flex;
  align-items:center;
  gap:7px;
}
.hud-row.muted{
  margin-top:3px;
  color:#d6d6d6;
  font-size:11px;
}
.lamp{
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#5ee273;
  border:1px solid #1c5a28;
}

.devpanel{
  position:absolute;
  left:18px;
  top:18px;
  z-index:100;
  width:410px;
  padding:12px;
  background:rgba(12,12,12,.9);
  color:#fff;
  border:2px solid rgba(255,255,255,.35);
  border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.3);
}
.devpanel.hidden{display:none}
.dev-title{
  font-size:16px;
  font-weight:800;
  margin-bottom:9px;
}
.dev-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:9px;
}
button,input{
  font:inherit;
}
button{
  cursor:pointer;
  padding:6px 8px;
  border:1px solid #5b5b5b;
  border-radius:5px;
  background:#f2f2f2;
  color:#222;
}
.command-form{
  display:flex;
  gap:6px;
}
#commandInput{
  flex:1;
  padding:7px 9px;
  border:1px solid #555;
  border-radius:5px;
}
.hint{
  margin-top:7px;
  color:#bbb;
  font-size:11px;
}

/* Stadelhuber: shorter, broad build; the feet keep the floor anchor. */
.caretaker .sprite{scale:1.13 .80;transform-origin:50% 100%}
.caretaker .body{left:8px;width:40px;border-radius:9px 9px 7px 7px;background:#54724c}
.caretaker .shirt-line{background:#d8b96c;width:5px;left:8px;box-shadow:16px 0 #d8b96c}
.caretaker .arm.left{left:1px}.caretaker .arm.right{left:48px}
.caretaker .hair{background:#607041;width:27px;left:-3px;top:-4px;border:2px solid #293322;border-radius:4px 4px 0 0;height:10px}
.caretaker .hair::after{content:"";position:absolute;left:-2px;top:5px;width:32px;height:4px;background:#3b482c;border-radius:2px}
.caretaker .mouth{height:4px;top:15px;background:#68513c;border-radius:4px}
.caretaker .nameplate{font-size:10px;color:#f2dfb5;border-color:#998153}
.caretaker[data-view="side"] .body{left:14px;width:31px;border-radius:10px}
.caretaker[data-view="side"] .arm{left:29px}
.caretaker[data-view="side"] .shirt-line{box-shadow:none;left:8px}
.caretaker[data-view="back"] .head{background:#607041}
.caretaker .work-tool{display:none;position:absolute;left:39px;bottom:0;width:65px;height:75px;z-index:6;background:center bottom/contain no-repeat;transform-origin:10% 50%}
.caretaker[data-work="vacuum"] .work-tool{display:block;background-image:url('caretaker-vacuum.svg');animation:vacuumPush 1.7s ease-in-out infinite}
.caretaker[data-work="sweep"] .work-tool{display:block;width:46px;background-image:url('caretaker-broom.svg');animation:broomSweep 1.4s ease-in-out infinite}
.caretaker[data-work="repair"] .work-tool{display:block;left:34px;bottom:28px;width:45px;height:60px;background-image:url('caretaker-hammer.svg');animation:hammerTap .85s ease-in-out infinite}
.caretaker:is([data-work="vacuum"],[data-work="sweep"],[data-work="repair"]) .sprite{animation:none}
.caretaker:is([data-work="vacuum"],[data-work="sweep"]) .arm.right{animation:cleaningArm 1.5s ease-in-out infinite}
.caretaker[data-work="repair"] .arm.right{animation:repairArm .85s ease-in-out infinite}
@keyframes vacuumPush{50%{translate:10px 0;rotate:-7deg}}
@keyframes broomSweep{0%,100%{rotate:12deg}50%{rotate:-15deg;translate:7px 0}}
@keyframes hammerTap{0%,100%{rotate:-40deg}60%{rotate:15deg}}
@keyframes cleaningArm{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(-55deg)}}
@keyframes repairArm{0%,100%{transform:rotate(-90deg)}60%{transform:rotate(-40deg)}}
/* Light follows only the three existing panes in the background (1672 x 941). */
.cellar-window{position:absolute;left:1263.6px;top:831.3px;width:56.5px;height:18.5px;z-index:12;pointer-events:none;opacity:0;transition:opacity 1s;mix-blend-mode:screen}
.cellar-window.lit{opacity:.85}
.cellar-window i{position:absolute;top:0;height:18px;background:linear-gradient(150deg,#fff1b2,#eab34d);clip-path:polygon(0 0,100% 0,100% 96%,0 100%);overflow:hidden}
.cellar-window i:nth-child(1){left:0;width:18.5px;clip-path:polygon(0 0,100% 0,100% 100%,80% 100%,73% 85%,61% 78%,49% 100%,0 96%)}
.cellar-window i:nth-child(2){left:22.7px;width:13.5px;height:18.5px}
.cellar-window i:nth-child(3){left:40.4px;width:15.5px;height:18px}
.cellar-window i:nth-child(2){--pane-left:22.7px}.cellar-window i:nth-child(3){--pane-left:40.4px}
.cellar-window i::after{content:"";display:none;position:absolute;left:calc(var(--cellar-shadow-x,-24px) - var(--pane-left,0px));top:2px;width:19px;height:23px;background:url('caretaker-shadow.svg') center/contain no-repeat;opacity:.68;filter:blur(1.6px)}
.cellar-window.lit.shadow-passing i::after{display:block}
@media(prefers-reduced-motion:reduce){.cellar-window.lit.shadow-passing i::after{display:none}}
@media(prefers-reduced-motion:reduce){.caretaker .work-tool,.caretaker .arm{animation:none!important}}

/* Keep the house artwork and its light speech/skin colours as authored. */
#stage{color-scheme:only light}
#worldSurface{position:relative;overflow:hidden;flex:none}
#viewport.zoomed{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#785a87 #101010}
.house-view-tools{display:none;position:sticky;top:10px;left:10px;width:max-content;height:0;z-index:1000;gap:5px}
.house-view-tools button{height:44px;min-width:44px;padding:0 12px;border:1px solid #b59ac5;border-radius:8px;background:#292331ed;color:#fff;font:700 14px/1.2 "Segoe UI",sans-serif;box-shadow:0 2px 7px #0005;cursor:pointer;touch-action:manipulation}
.house-view-tools button:disabled{opacity:.45;cursor:default}
.house-view-tools button:focus-visible{outline:3px solid #8ce2c2;outline-offset:2px}
@media(pointer:coarse),(max-width:1100px){
  .house-view-tools{display:flex}
  .si-monitor-start::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,calc(44px / var(--world-scale,1)));height:max(100%,calc(44px / var(--world-scale,1)));transform:translate(-50%,-50%)}
  .chat-panel{padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
  #invadersGame button{min-height:44px;font-size:14px}
  #invadersGame .si-touch button{min-height:52px}
  #invadersGame select{font-size:16px}
}
@media(max-width:380px) and (orientation:portrait){.chat-header .chat-open{display:none}}
@media(max-width:1100px) and (orientation:portrait){
  html,body{height:auto;min-height:100%;overflow:auto}
  #layout{display:flex;flex-direction:column;width:100%;height:auto;min-height:100vh;min-height:100dvh}
  #viewport{width:100%;height:auto;aspect-ratio:1648/928;flex:none;min-height:0}
  .chat-panel{height:clamp(430px,65dvh,800px);flex:none;border-left:0;border-top:2px solid #614332}
  .chat-header{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .chat-brand{margin:0}.chat-header h1{font-size:19px}.chat-brand>img{width:32px;height:32px}
  .chat-open{font-size:11px;padding:9px;white-space:nowrap}
  .chat-connection{padding:7px 12px;font-size:11px}
  .chat-footer{padding:8px 12px;font-size:11px}
  .twitch-chat-container{min-height:220px}
}
@media(max-width:1100px) and (orientation:landscape) and (max-height:600px){
  #layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,34vw);grid-template-rows:minmax(0,1fr);height:100dvh}
  .chat-panel{border-left:2px solid #614332;border-top:0;min-height:0}
  .chat-header{padding:6px 10px;border-top-width:2px}.chat-brand{margin:0;gap:7px}
  .chat-brand>img{width:26px;height:26px}.chat-header h1{font-size:16px;margin:2px 0 0}
  .chat-eyebrow{font-size:8px}.chat-open{display:none}.chat-connection{padding:5px 10px;font-size:10px}
  .chat-footer{padding:5px 10px;font-size:10px}
}