/* Furniture sized for the goblins (loaded after style.css and shell.css).
   Oct 15 evening: everything in the pen was reading tiny on a phone (newborns about 25px tall, a desk 27px
   wide), so the pen is taller (118 -> 160px) and goblins draw 1.5x bigger in it: the walker box is 120x150
   instead of 80x100 (visitors 84x105 instead of 56x70), and app.js measures the box, so bubbles, name tags,
   the tap area and the held mug follow on their own. Goblins now draw about 27-97px tall: a typical newborn
   about 43px (it hatches at 2/3 of its adult size, goblin_dna.NEWBORN_GROWTH), a typical adult about 64px.
   The furniture was drawn for a ~64px goblin, so it is back near its drawn size, on its own scale (--fs) and
   not tied to the goblin's: the Bog Bar counter top lands around a half-grown goblin's chest, the desk at a
   grown goblin's waist. Only the pieces change size; the tabs, order chips and sign/menu text keep theirs.
   Positions that depended on a piece's width scale with it, and standAt() / chefX() read the pieces' real
   boxes, so ordering still walks the goblin up to the counter/table. */
.pen{height:160px;--fs:.8;--fs-wall:.85;--fs-post:1}
.pen[data-room=bar]{--fs:.85;--fs-wall:.9}

/* the goblins themselves: 1.5x the old box (the drawing inside scales with the box) */
.walker{width:120px;height:150px;margin-left:-60px}
.pengob{width:120px;height:150px}
.visitor{width:84px;height:105px;margin-left:-42px}

/* Bog Bar: counter, two stools and the bottle shelf on the wall (the BOG BAR sign stays readable) */
.pen[data-room=bar] .counter{width:calc(124px * var(--fs));height:calc(58px * var(--fs))}
.pen[data-room=bar] .stool{width:calc(24px * var(--fs));height:calc(30px * var(--fs))}
.pen[data-room=bar] .stool.s1{right:calc(2% + 132px * var(--fs))}
.pen[data-room=bar] .stool.s2{right:calc(2% + 160px * var(--fs))}
.pen[data-room=bar] .shelf{width:calc(100px * var(--fs-wall));height:calc(42px * var(--fs-wall));top:30px}

/* Food: the table and the toadstool seat (the TODAY menu board stays readable) */
.pen[data-room=restaurant] .table{width:calc(110px * var(--fs));height:calc(52px * var(--fs))}
.pen[data-room=restaurant] .shroom{width:calc(30px * var(--fs));height:calc(34px * var(--fs));right:calc(4% + 122px * var(--fs))}

/* Hub: the stump, and a lantern post that still stands over a grown goblin */
.pen[data-room=square] .stump{width:calc(70px * var(--fs));height:calc(40px * var(--fs))}
.pen[data-room=square] .lantern{width:calc(24px * var(--fs-post));height:calc(70px * var(--fs-post))}

/* Home: the desk it works at, and its toys */
.pendesk{width:calc(60px * var(--fs));height:calc(44px * var(--fs))}
.pendesk svg{display:block;width:100%;height:100%}
.pentoy{width:26px;height:26px;margin-left:-13px;font-size:20px;line-height:26px}
.pentoy svg{display:block;width:100%;height:100%}

/* Home scenes (home.css drew them for the 118px pen): the same pieces about 1.3x, moved to clear the bigger
   desk at the left. Everything here only resizes/moves; homes.js draws the same pieces. */
.pen[data-room=home][data-home=cave] .cmouth{width:96px;height:80px}
.pen[data-room=home][data-home=cave] .cshroom{left:calc(4% + 56px);width:40px;height:27px}
.pen[data-room=home][data-home=cave] .cnest{left:calc(4% + 104px);bottom:30px;width:66px;height:24px}
.pen[data-room=home][data-home=cave] .cfire{right:calc(3% + 112px);bottom:26px;width:38px;height:37px}
.pen[data-room=home][data-home=sewer] .sshaft{left:calc(30% - 30px);width:84px}
.pen[data-room=home][data-home=sewer] .sladder{width:26px}
.pen[data-room=home][data-home=sewer] .spipe{top:18px;width:52px;height:76px}
.pen[data-room=home][data-home=sewer] .spuddle{bottom:38px;width:66px;height:14px}
.pen[data-room=home][data-home=sewer] .scrate{left:calc(30% + 52px);bottom:34px;width:34px;height:40px}
.pen[data-room=home][data-home=burrow] .bdoor{width:60px;height:74px}
.pen[data-room=home][data-home=burrow] .bwindow{right:calc(4% + 88px);top:18px;width:52px;height:52px}
.pen[data-room=home][data-home=burrow] .bshelf{left:calc(4% + 58px);top:24px;width:58px;height:38px}
.pen[data-room=home][data-home=burrow] .blamp{top:10px;width:18px;height:40px}
.pen[data-room=home][data-home=burrow] .brug{left:calc(50% - 52px);bottom:6px;width:104px;height:21px}
@media (max-width:360px){
  .pen[data-room=home][data-home=cave] .cnest{left:calc(4% + 94px);width:48px}
  .pen[data-room=home][data-home=cave] .cfire{right:calc(3% + 88px)}
  .pen[data-room=home][data-home=burrow] .bwindow{right:calc(4% + 72px)}
  .pen[data-room=home][data-home=burrow] .blamp{left:47%}
}

/* What it holds while it drinks or eats follows the goblin's size (--held-k from the pen, 0.6-1), and the
   1.5x goblin box: scaled from the hand side so app.js's mouth position (--held-x / --held-xl) still holds. */
.held{width:calc(20px * var(--held-k,1));height:calc(18px * var(--held-k,1));scale:1.5;transform-origin:0 100%}
.walker.face-left .held{transform-origin:100% 100%}
.walker.eating .held{width:calc(24px * var(--held-k,1));height:calc(22px * var(--held-k,1))}
.held svg{display:block;width:100%;height:100%}
@keyframes sip{from{rotate:0deg;translate:0 0}to{rotate:-35deg;translate:calc(-6px * var(--held-k,1)) calc(-12px * var(--held-k,1))}}
@keyframes sipl{from{rotate:0deg;translate:0 0}to{rotate:35deg;translate:calc(6px * var(--held-k,1)) calc(-12px * var(--held-k,1))}}
@keyframes nom{to{translate:calc(-4px * var(--held-k,1)) calc(-6px * var(--held-k,1))}}