/* App shell (loaded after style.css): the page doesn't scroll as a whole. The header sits on top, the middle
   (banners, needs, chat) scrolls, and the dock (place actions, pen, chat box, tab bar) is pinned at the bottom,
   like Talkie or Poly Buzz. */
html,body{height:100%;overflow:hidden}
.app{height:100vh;height:100dvh;min-height:0;padding-bottom:0;overflow:visible} /* visible, so the full-width tab bar isn't cut to the 680px column on wide screens (body still clips) */
.top{position:static;flex:none;padding:10px 0 8px}
.mid{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;margin:0 -14px;padding:0 14px}
#petView{display:flex;flex-direction:column;flex:1 0 auto}
#petView[hidden],#dock[hidden]{display:none}
.log{flex:1 0 auto}
.needs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 14px;margin:8px 0 2px}
.dock{position:static;flex:none;padding-top:6px;border-top:1px solid var(--rule)}
.dock .count{margin:2px 6px 0}
.dock .composer{padding-top:4px;padding-bottom:6px}

/* tab bar: five equal tabs, edge to edge across the whole bottom of the screen */
.tabs{display:grid;grid-template-columns:repeat(5,1fr);width:100vw;margin:0 calc(50% - 50vw);background:var(--card);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;min-width:0;margin:0;padding:6px 2px;border:0;border-radius:0;background:none;color:var(--muted);font:600 11px/1 var(--sans);cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.tabs button svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs button[aria-pressed=true]{color:var(--ink)}
.tabs button[aria-pressed=true]::before{content:'';position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:#6f8f3a}
.tabs button:focus-visible{outline:3px solid #e8d36a;outline-offset:-3px}

/* place actions: one short row above the pen (the bar's and restaurant's drink/food buttons are #quickBar) */
.roombox{display:flex;padding:0 0 7px;border:0;border-radius:0;background:none}
.roombox .how{flex-basis:100%;margin:0;font-size:12px}

/* the Food place's hand-drawn paper menu (#quickBar.menucard): tap a dish, the goblin orders it */
.quick.menucard{display:block;position:relative;margin:0 2px 8px;padding:7px 10px 6px;background:#fbf3d9;border:1.8px solid #1d1b18;border-radius:255px 14px 225px 12px/12px 225px 14px 255px;box-shadow:2px 3px 0 #1d1b18;rotate:-.4deg;font-family:Georgia,serif}
.menucard .menutitle{text-align:center;font:italic 700 15px/1.1 Georgia,serif;color:#1d1b18;letter-spacing:.3px}
.menucard .menuhint{text-align:center;font:italic 11px/1.2 Georgia,serif;color:#6b5338;margin:1px 0 4px}
.menucard .menugrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.menucard .menugrid.specials{margin-top:4px;padding-top:5px;border-top:1.6px dashed #6b5338}
.menucard .menuitem{display:flex;align-items:center;gap:5px;width:100%;min-width:0;min-height:30px;margin:0;padding:2px 3px;background:none;border:0;border-radius:6px;color:#1d1b18;font:600 13px/1.1 Georgia,serif;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.menucard .menuitem:active{background:#efe0a8;transform:translate(1px,1px)}
.menucard .menuitem:focus-visible{outline:3px solid #e8d36a;outline-offset:1px}
.menucard .menuitem.pricey{opacity:.5}
.menucard .menupic{flex:none;width:22px;height:20px;display:block}
.menucard .menupic svg{width:100%;height:100%;display:block}
.menucard .menuwords{display:flex;flex-direction:column;min-width:0}
.menucard .menuname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menucard .menunote{font:italic 600 10.5px/1.1 Georgia,serif;color:#b8473a;white-space:nowrap}
.menucard .menudots{flex:1 1 6px;min-width:6px;align-self:flex-end;margin-bottom:6px;border-bottom:2px dotted #8a6a45}
.menucard .menuprice{flex:none;font:700 13px/1 Georgia,serif}

/* the pen has a little depth now: it walks toward the back (higher, slightly smaller) and the front */
.pen{height:118px}
.walker{transition-property:left,bottom,scale;transition-timing-function:linear,ease-in-out,ease-in-out;transform-origin:50% 100%}

/* tap the goblin: Info / Pet, in a little bubble where its speech bubble goes */
.gobtap{position:absolute;left:50%;bottom:0;width:var(--tap-w,60px);margin-left:calc(var(--tap-w,60px) / -2);height:max(48px,calc(var(--bubble-y,62px) - 4px));margin:0;padding:0;border:0;border-radius:40% 40% 30% 30%;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.gobtap:focus-visible{outline:3px solid #e8d36a;outline-offset:2px}
.walker.menu-open .bubble{display:none}
.gobmenu{position:absolute;bottom:var(--bubble-y,62px);left:50%;z-index:6;display:flex;gap:6px;padding:6px;transform:translateX(calc(-50% + var(--menu-dx,0px)));background:#fffdf4;border:1.6px solid #1d1b18;border-radius:12px 14px 11px 13px;box-shadow:2px 2px 0 #1d1b18;pointer-events:auto}
.gobmenu[hidden]{display:none}
.gobmenu::after{content:'';position:absolute;left:calc(50% - var(--menu-dx,0px));bottom:-7px;width:10px;height:10px;margin-left:-5px;background:#fffdf4;border:1.6px solid #1d1b18;border-top:0;border-left:0;rotate:45deg}
.gobmenu button{min-width:64px;min-height:40px;padding:8px 12px;font:600 14px/1 Georgia,serif;color:#1d1b18;background:#f5f0dc;border:1.6px solid #1d1b18;border-radius:9px 11px 8px 10px;cursor:pointer;touch-action:manipulation}
.gobmenu button:active{transform:translate(1px,1px)}
.gobmenu button:focus-visible{outline:3px solid #e8d36a;outline-offset:2px}

/* Info, Friends, Settings and the wardrobe open as sheets that rise from the bottom */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:680px;max-height:85dvh;box-sizing:border-box;overflow-y:auto;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));border:1px solid var(--rule);border-bottom:0;border-radius:16px 16px 0 0;background:var(--card);color:var(--ink)}
dialog.sheet::backdrop{background:rgba(0,0,0,.45)}
.sheethead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.sheethead h2{margin:0;font:400 20px/1.2 var(--serif)}
.sheethead .sub{display:block;font-size:13px;color:var(--muted)}
#infoState{font-size:14px;margin:4px 0 10px}
/* room chat (goblin to goblin): the switch over the chat box, the room's own log, bubbles over other goblins */
.log[hidden]{display:none}
.talkto{display:flex;gap:6px;padding:0 0 4px}
.talkto[hidden]{display:none}
.talkto button{flex:1;min-width:0;min-height:36px;padding:6px 10px;font:600 13px/1 var(--sans);color:var(--ink);background:var(--card);border:1.6px solid var(--rule);border-radius:999px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;touch-action:manipulation}
.talkto button[aria-pressed=true]{background:#6f8f3a;border-color:#4f6a27;color:#fff}
.talkto button:focus-visible{outline:3px solid #e8d36a;outline-offset:2px}
.unread{display:inline-block;min-width:18px;margin-left:4px;padding:2px 5px;border-radius:999px;background:#b8473a;color:#fff;font:700 11px/1 var(--sans)}
.unread[hidden]{display:none}
.rmsg .rwho{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:2px;font:12px/1.3 var(--sans)}
.rmsg .rwho .rkind{font-size:14px;line-height:1}
.rmsg .rwho .tag{font:11px/1.3 var(--mono);color:inherit;opacity:.8}
.rmsg .mute{margin-left:auto;padding:3px 8px;font-size:11px;color:inherit}
.rmsg.bot{border-style:dashed}
.visitor .vbubble{position:absolute;bottom:calc(var(--tag-y,100%) + 22px);left:50%;transform:translateX(-50%);max-width:160px;width:max-content;font:12px/1.25 var(--sans);color:#1d1b18;background:#fffdf4;border:1.6px solid #1d1b18;border-radius:12px 14px 12px 10px;padding:4px 7px;z-index:3}
.visitor.bot .tag{border-style:dashed}
@media (prefers-reduced-motion:reduce){.walker{transition:none}}

/* portraits: the Info sheet shows the goblin framed big (hat and all), not at its growth size. The header has no picture now. */
.top .gob{width:72px;height:88px;overflow:hidden;background:#e7e9d2;border:1.6px solid var(--rule);border-radius:14px;box-sizing:border-box}
.infoportrait{display:flex;justify-content:center;margin:2px 0 8px}
.infoportrait svg{width:150px;height:180px;max-width:60vw;overflow:hidden;background:#e7e9d2;border:1.8px solid #1d1b18;border-radius:18px;box-shadow:2px 3px 0 #1d1b18}