/* Home: each goblin's own place (looks.home, rolled once): a cave, a sewer or a burrow in the woods.
   static/homes.js draws them; this lays them out. Replaces the old fence. The pen keeps its size, the desk
   stays at the left and the toys on the floor, and the goblin walks in front of every piece. */
.pen[data-room=home][data-home]::before{display:none}
.pen[data-room=home][data-home]{transition:background .3s}
.pen[data-room=home] .hwall{left:0;top:0;width:100%;height:58%;overflow:hidden}
.pen[data-room=home] .penscene .piece:not(.hwall) svg,.pen[data-room=home] .penscene svg.piece{overflow:visible}

/* Cave: rock wall with stalactites, the cave mouth onto the hills, a campfire, glow mushrooms, a straw bed */
.pen[data-room=home][data-home=cave]{background:linear-gradient(#6b6356 0 58%,#3f3a33 58% calc(58% + 2px),#7a6648 calc(58% + 2px) 100%)}
.pen[data-home=cave] .cmouth{right:3%;bottom:calc(42% - 2px);width:74px;height:62px}
.pen[data-home=cave] .cshroom{left:calc(4% + 34px);bottom:calc(42% - 9px);width:30px;height:20px}
.pen[data-home=cave] .cnest{left:calc(4% + 70px);bottom:24px;width:50px;height:18px}
.pen[data-home=cave] .cfire{right:calc(3% + 86px);bottom:20px;width:28px;height:27px}

/* Sewer: brick wall gone green at the bottom, a sludge channel along the back, a dribbling pipe,
   a ladder up to a manhole with light falling down it, a puddle, and a crate with a candle stub */
.pen[data-room=home][data-home=sewer]{background:linear-gradient(#6e6a5c 0 58%,#3d3f37 58% calc(58% + 2px),#556a3a calc(58% + 2px) calc(58% + 9px),#3d3f37 calc(58% + 9px) calc(58% + 11px),#575c4f calc(58% + 11px) 100%)}
.pen[data-home=sewer] .sshaft{left:calc(30% - 22px);top:0;width:64px;height:100%}
.pen[data-home=sewer] .sladder{left:30%;top:0;width:20px;height:calc(58% + 2px)}
.pen[data-home=sewer] .spipe{right:5%;top:14px;width:40px;height:58px}
.pen[data-home=sewer] .spuddle{right:calc(5% - 4px);bottom:30px;width:50px;height:11px}
.pen[data-home=sewer] .scrate{left:calc(30% + 42px);bottom:26px;width:26px;height:30px}

/* Burrow in the woods: daub walls with posts and dangling roots, a round window onto the trees, a round
   green door, a shelf with jars and a fern, a hanging lantern, plank floor and a rug */
.pen[data-room=home][data-home=burrow]{background:
  linear-gradient(#c9a06a 0 58%,#7a5a38 58% calc(58% + 3px),transparent calc(58% + 3px)),
  repeating-linear-gradient(90deg,#a47e52 0 38px,#7f6040 38px 40px)}
.pen[data-home=burrow] .bdoor{right:4%;bottom:calc(42% - 3px);width:46px;height:56px}
.pen[data-home=burrow] .bwindow{right:calc(4% + 70px);top:14px;width:40px;height:40px}
.pen[data-home=burrow] .bshelf{left:calc(4% + 44px);top:18px;width:44px;height:29px}
.pen[data-home=burrow] .blamp{left:46%;top:8px;width:14px;height:30px}
.pen[data-home=burrow] .brug{left:calc(50% - 40px);bottom:4px;width:80px;height:16px}

/* a little life: the fire and the candle flicker, the pipe drips */
.pen[data-room=home] .flame{transform-box:fill-box;transform-origin:50% 100%;animation:hmflick .9s ease-in-out infinite alternate}
.pen[data-room=home] .flame + .flame{animation-duration:.6s}
.pen[data-room=home] .drip{animation:hmdrip 2.4s ease-in infinite}
@keyframes hmflick{from{transform:scale(1,1)}to{transform:scale(.88,1.12)}}
@keyframes hmdrip{0%,40%{transform:translateY(-14px);opacity:0}55%{opacity:1}100%{transform:translateY(10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.pen[data-room=home] .flame,.pen[data-room=home] .drip{animation:none}}

/* narrow phones: pull the far pieces in a little so nothing crowds the desk */
@media (max-width:360px){
  .pen[data-home=cave] .cnest{left:calc(4% + 62px);width:42px}
  .pen[data-home=cave] .cfire{right:calc(3% + 78px)}
  .pen[data-home=burrow] .bwindow{right:calc(4% + 58px)}
  .pen[data-home=burrow] .blamp{left:44%}
}