:root{--ground:#F1F0EE;--card:#FFFFFF;--ink:#141414;--muted:#6E6C68;--rule:#DCDAD5;--me:#141414;--me-ink:#F1F0EE;
--serif:Georgia,"Times New Roman",serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--ground:#0F0F0F;--card:#1B1B1B;--ink:#F1F0EE;--muted:#9C9994;--rule:#2C2C2C;--me:#F1F0EE;--me-ink:#141414;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font:15px/1.5 var(--sans)}
.app{max-width:680px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:0 14px 18px}
.top{display:flex;align-items:center;gap:12px;padding:14px 0 12px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--ground);z-index:2}
.who{flex:1;min-width:0}
h1{font:400 26px/1.1 var(--serif);margin:0}
.sub{margin:2px 0 0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode{font:11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--muted);border-radius:999px;padding:5px 8px;color:var(--muted)}
.mode.live{border-color:var(--ink);color:var(--ink)}
.banner{margin:10px 0 0;padding:10px 12px;border:1px dashed var(--muted);border-radius:8px;font-size:13px;color:var(--muted)}
.banner b{color:var(--ink)}
.log{flex:1;padding:14px 0 8px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;padding:10px 13px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word}
.msg.char{background:var(--card);border:1px solid var(--rule);align-self:flex-start;border-bottom-left-radius:4px}
.msg.you{background:var(--me);color:var(--me-ink);align-self:flex-end;border-bottom-right-radius:4px}
.msg.safety{border-color:var(--ink)}
.msg em{color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font:11px/1.3 var(--mono);color:var(--muted)}
.tag{border:1px solid var(--rule);border-radius:999px;padding:2px 7px}
.fb{font:12px/1 var(--sans);border:1px solid var(--rule);background:none;color:var(--ink);border-radius:999px;padding:5px 9px;cursor:pointer}
.fb[disabled]{opacity:.45;cursor:default}
.fb.chosen{background:var(--ink);color:var(--ground);opacity:1}
.change{align-self:center;font:11px/1.4 var(--mono);color:var(--muted);text-align:center;max-width:92%}
.typing{align-self:flex-start;font:13px var(--mono);color:var(--muted)}
.error{margin:6px 0;padding:8px 12px;border-radius:8px;border:1px solid var(--ink);font-size:13px}
.composer{display:flex;gap:8px;align-items:flex-end;background:var(--ground);padding-top:8px}
.composer textarea{flex:1;min-width:0;resize:none;max-height:140px;font:15px/1.4 var(--sans);padding:11px 15px;border:1px solid var(--rule);border-radius:20px;background:var(--card);color:var(--ink)}
.composer button{font:500 14px/1 var(--sans);border:0;border-radius:999px;padding:13px 18px;background:var(--ink);color:var(--ground);cursor:pointer}
.composer button[disabled]{opacity:.5;cursor:default}
.count{margin:4px 6px 0;text-align:right;font:11px var(--mono);color:var(--muted)}
.panel{margin-top:14px;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:12px 14px}
.panel summary{cursor:pointer;list-style:none;display:grid;gap:2px}
.panel summary::-webkit-details-marker{display:none}
.panel summary span{font-size:13px;color:var(--muted)}
.traits{display:grid;gap:8px;margin:14px 0}
.trait{display:grid;grid-template-columns:76px 1fr 34px;gap:10px;align-items:center;font-size:13px}
.bar{height:6px;background:var(--rule);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .5s}
.trait.off{opacity:.55}
.trait .v{font:12px var(--mono);color:var(--muted);text-align:right}
.lab{font:500 11px/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.words{margin:8px 0;font-size:14px}
.growth ul{margin:4px 0 10px;padding-left:18px;font-size:13px;color:var(--muted)}
.how{font-size:13px;color:var(--muted);margin:8px 0}
/* Goblin Pen, step 2 */
.gob{width:64px;height:80px;flex:none;overflow:visible;transform-origin:50% 100%;transition:transform .5s}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.shinies{font:12px/1 var(--mono);color:var(--ink)}
.banner.season{border-style:solid}
h2{font:400 22px/1.2 var(--serif);margin:18px 0 6px}
.hatch{padding:6px 0 20px}
.row{display:flex;gap:8px;align-items:flex-end}
.row.wrap{flex-wrap:wrap;align-items:center}
.stack{display:grid;gap:8px;margin:10px 0}
.grow{flex:1;min-width:0}
label.grow{display:grid;gap:4px}
input:not([type=checkbox]){font:15px/1.3 var(--sans);padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--card);color:var(--ink);width:100%}
.btn{font:13px/1 var(--sans);border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 13px;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--ground);border-color:var(--ink);padding:12px 18px}
.btn[disabled]{opacity:.5;cursor:default}
.sub-details{margin-top:14px;font-size:14px}
.sub-details summary{cursor:pointer;color:var(--muted)}
.needs{display:grid;gap:6px;margin:12px 0 4px}
.rooms{display:flex;gap:6px;margin:10px 0 6px;overflow-x:auto}
.rooms button{font:13px/1 var(--sans);border:1px solid var(--rule);background:none;color:var(--ink);border-radius:8px;padding:9px 12px;cursor:pointer;white-space:nowrap}
.rooms button[aria-pressed=true]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.roombox{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--card)}
.roombox .how{margin:0}
.group{display:grid;gap:4px}
.msg.failed{border-style:dashed}
.notice{align-self:stretch;font-size:13px;padding:8px 10px;border:1px dashed var(--ink);border-radius:8px;margin:0}
.place{font-style:italic}
.reveal{color:var(--ink)}
.scene{align-self:stretch;border:1px solid var(--rule);border-radius:8px;padding:8px 12px;background:var(--card);font-size:14px}
.scene p{margin:3px 0}
.scene .narr{color:var(--muted);font-style:italic}
.grounding{margin-top:8px;padding-top:6px;border-top:1px solid var(--rule);font-size:13px;white-space:normal}
.grounding .gq{margin:0 0 4px;color:var(--muted)}
.sources{margin:2px 0 6px;padding-left:18px}
.sources a{color:var(--ink);word-break:break-word}
.suggest{width:100%;height:64px;border:0;background:transparent;display:block}
.friends{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.friends li{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px}
.check{display:flex;gap:8px;align-items:center;font-size:14px;margin:8px 0}
.reset{font:13px/1 var(--sans);border:1px solid var(--rule);background:none;color:var(--ink);border-radius:999px;padding:9px 13px;cursor:pointer;margin-top:4px}
/* Goblin Pen, step 3: hub map */
.hub{margin:10px 0 6px;display:grid;gap:0}
.map{position:relative;width:100%;aspect-ratio:360/210;border-radius:14px 14px 0 0;overflow:hidden;background:#b9c79a}
.mapart{position:absolute;inset:0;width:100%;height:100%;display:block}
.spot{position:absolute;transform:translate(-50%,-50%);font:600 13px/1 Georgia,serif;color:#1d1b18;background:#f5f0dc;
 border:1.8px solid #1d1b18;border-radius:10px 13px 9px 12px;padding:7px 10px;cursor:pointer;white-space:nowrap;
 box-shadow:2px 2px 0 #1d1b18;transition:transform .15s}
.spot:hover{transform:translate(-50%,-50%) rotate(-2deg) scale(1.05)}
.spot[aria-pressed=true]{background:#1d1b18;color:#e9f1d6}
.spot:focus-visible{outline:3px solid #e8d36a;outline-offset:2px}
.here{position:absolute;width:16px;height:16px;border-radius:50% 50% 45% 55%;background:var(--gob,#6aa84f);border:1.8px solid #1d1b18;
 transform:translate(-50%,-50%);transition:left .6s ease,top .6s ease;pointer-events:none}
.here::after{content:"";position:absolute;left:3px;top:5px;width:2px;height:2px;border-radius:50%;background:#1d1b18;box-shadow:6px 0 0 #1d1b18}
.hub .roombox{border-top:0;border-radius:0 0 8px 8px}
.roombox .placehead{font:400 18px/1.2 var(--serif);margin:0}
/* Goblin Pen, step 4: the pen above the keyboard */
.dock{position:sticky;bottom:0;background:var(--ground);padding-top:6px;z-index:2}
.pen{position:relative;height:104px;border:1.8px solid #1d1b18;border-radius:12px 14px 10px 13px;overflow:visible;
 background:linear-gradient(#cfdcae 0 58%,#9a8a63 58% 100%)}
.pen::before{content:"";position:absolute;left:6px;right:6px;top:30px;height:30px;pointer-events:none;
 background:repeating-linear-gradient(90deg,transparent 0 26px,#6b5338 26px 30px),linear-gradient(transparent 6px,#6b5338 6px 9px,transparent 9px 19px,#6b5338 19px 22px,transparent 22px)}
.walker{position:absolute;bottom:4px;left:50%;width:80px;height:100px;margin-left:-40px;transition-property:left;transition-timing-function:linear}
.pengob{width:80px;height:100px;display:block;overflow:visible;transform-origin:50% 100%;transition:transform .25s}
.walker.walking .pengob{animation:waddle .36s ease-in-out infinite alternate}
.walker.tipsy .pengob{animation:sway calc(1.6s - var(--wob,0) * .006s) ease-in-out infinite alternate}
.walker.asleep .pengob{transform:rotate(-80deg) translate(10px,6px)}
.walker.glance .pengob{animation:tilt .5s ease-in-out 2 alternate}
.walker.poke .pengob{animation:poke .3s ease-in-out 2 alternate}
.walker.play .pengob{animation:hop .35s ease-in-out 6 alternate}
@keyframes waddle{from{rotate:-4deg}to{rotate:4deg}}
/* sway grows with the tipsy level: about 1deg buzzed (25), 4.5 tipsy (45), 8 drunk (65), 12 sloshed (85) */
@keyframes sway{from{rotate:calc((var(--wob,20) - 20) * -.18deg)}to{rotate:calc((var(--wob,20) - 20) * .18deg)}}
@keyframes tilt{to{rotate:8deg}}
@keyframes poke{to{translate:5px 0}}
@keyframes hop{to{translate:0 -12px}}
.bubble{position:absolute;bottom:var(--bubble-y,62px);left:50%;transform:translateX(-50%);max-width:200px;width:max-content;
 font:13px/1.25 var(--sans);color:#1d1b18;background:#fffdf4;border:1.6px solid #1d1b18;border-radius:12px 14px 12px 10px;padding:5px 8px;z-index:3}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:#fffdf4;border:1.6px solid #1d1b18;
 border-top:0;border-left:0;transform:translateX(-50%) rotate(45deg)}
.pentoy{position:absolute;bottom:6px;width:30px;height:30px;margin-left:-15px;font:24px/30px var(--sans);text-align:center}
@media (prefers-reduced-motion:reduce){.walker{transition:none}.pengob{animation:none!important}}
/* Goblin Pen, step 5: the desk and reading glasses */
.pendesk{position:absolute;left:4%;bottom:4px;width:60px;height:44px}
.glasses{display:none}
.walker.glasses-on .glasses{display:inline}
.walker.working .pengob{animation:scribble .4s ease-in-out infinite alternate}
@keyframes scribble{from{translate:0 0;rotate:-2deg}to{translate:-1px 1px;rotate:2deg}}
/* Goblin Pen, step 6: each place has its own furniture in the pen, and an order bar above it */
.penscene{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
/* live room: other players' goblins in the same place (app.js crowdRender) */
.crowd{position:absolute;inset:0;pointer-events:none}
.visitor{position:absolute;bottom:4px;left:50%;width:56px;height:70px;margin-left:-28px;transition:left 3s linear;pointer-events:none}
.visitor svg{display:block;width:100%;height:100%}
.visitor.walking svg{animation:waddle .36s ease-in-out infinite alternate}
.visitor .tag{position:absolute;bottom:var(--tag-y,calc(100% + 1px));left:50%;transform:translateX(calc(-50% + var(--tag-dx,0px)));transition:transform 3s linear;white-space:nowrap;z-index:2;font:600 10px/1.2 var(--sans);
 color:#1d1b18;background:rgba(255,253,244,.88);border:1px solid #1d1b18;border-radius:6px;padding:0 4px}
.visitor.house .tag{font-weight:400;opacity:.75}
/* Chef Incio at Food: a white name tag, a call-out bubble and the dish he hands over (app.js chefServe) */
.visitor.chef .tag{font-weight:700;opacity:1;background:#fbfaf3}
.visitor.chef,.visitor.chef .tag{transition:none}   /* he spawns at the table; never glides in from the middle */
.chefsay{position:absolute;right:-6px;bottom:calc(var(--tag-y,100%) + 22px);width:max-content;max-width:180px;font:12px/1.25 var(--sans);color:#1d1b18;
 background:#fbfaf3;border:1.6px solid #1d1b18;border-radius:12px 10px 12px 14px;padding:4px 7px;z-index:4;white-space:normal}
.chefsay::after{content:"";position:absolute;right:22px;bottom:-7px;width:9px;height:9px;background:#fbfaf3;border:1.6px solid #1d1b18;
 border-top:0;border-left:0;transform:rotate(45deg)}
.chefdish{position:absolute;left:-4px;bottom:24px;width:24px;height:22px;z-index:2}
.chefdish svg{display:block;width:100%;height:100%}
.chefsay[hidden],.chefdish[hidden]{display:none}
.crowdbar{position:absolute;left:6px;top:3px;max-width:calc(100% - 12px);margin:0;font:11px/1.3 var(--sans);color:#1d1b18;background:rgba(255,253,244,.85);
 border-radius:6px;padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:2}
@media (prefers-reduced-motion:reduce){.visitor,.visitor .tag{transition:none}.visitor svg{animation:none!important}}
.penscene .piece{position:absolute;display:block;overflow:visible}
.pen[data-room=bar],.pen[data-room=restaurant],.pen[data-room=square]{transition:background .3s}
.pen[data-room=bar]{background:linear-gradient(#7a6347 0 58%,#5e4a35 58% 100%)}
.pen[data-room=bar]::before{left:0;right:0;top:0;height:58%;
 background:repeating-linear-gradient(90deg,transparent 0 33px,rgba(29,27,24,.45) 33px 35px)}
.pen[data-room=bar] .sign{left:50%;top:3px;margin-left:-39px}
.pen[data-room=bar] .shelf{left:4%;top:4px}
.pen[data-room=bar] .counter{right:2%;bottom:2px}
.pen[data-room=bar] .stool.s1{right:calc(2% + 132px);bottom:3px}
.pen[data-room=bar] .stool.s2{right:calc(2% + 160px);bottom:3px}
.pen[data-room=restaurant]{background:linear-gradient(#e9dfc4 0 58%,#9a8a63 58% 100%)}
.pen[data-room=restaurant]::before{left:0;right:0;top:0;height:58%;
 background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(184,71,58,.18) 22px 24px)}
.pen[data-room=restaurant] .board{left:4%;top:5px}
.pen[data-room=restaurant] .table{right:4%;bottom:3px}
.pen[data-room=restaurant] .shroom{right:calc(4% + 122px);bottom:3px}
.pen[data-room=square]{background:linear-gradient(#dfe8cc 0 58%,#93ad6c 58% 100%)}
.pen[data-room=square]::before{display:none}
.pen[data-room=square] .lantern{left:6%;bottom:2px}
.pen[data-room=square] .stump{right:8%;bottom:2px}
.held{position:absolute;left:var(--held-x,36px);bottom:var(--held-y,26px);width:20px;height:18px;display:none;z-index:1}
.walker.face-left .held{left:var(--held-xl,-8px)}
.walker.holding .held{display:block}
.walker.drinking .held{animation:sip .5s ease-in-out infinite alternate}
.walker.eating .held{animation:nom .3s ease-in-out infinite alternate}
@keyframes sip{from{rotate:0deg;translate:0 0}to{rotate:-35deg;translate:-6px -12px}}
@keyframes nom{to{translate:-4px -6px}}
.walker.face-left.drinking .held{animation-name:sipl}
@keyframes sipl{from{rotate:0deg;translate:0 0}to{rotate:35deg;translate:6px -12px}}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 0 7px;min-width:0}
.quick[hidden]{display:none}
.quick .lab{flex-basis:100%;margin:0}
.chip{font:600 12.5px/1 Georgia,serif;color:#1d1b18;background:#f5f0dc;border:1.6px solid #1d1b18;
 border-radius:9px 12px 8px 11px;padding:7px 9px;white-space:nowrap;box-shadow:1.5px 1.5px 0 #1d1b18;cursor:pointer;max-width:100%}
.chip:active{transform:translate(1px,1px);box-shadow:0 0 0 #1d1b18}
.chip:focus-visible{outline:3px solid #e8d36a;outline-offset:2px}
.chip.pricey{opacity:.55}
@media (prefers-reduced-motion:reduce){.held{animation:none!important}}

/* food in its hands: a little bigger than a mug so each dish reads */
.walker.eating .held{width:24px;height:22px}
/* reset asks twice: the armed button turns red */
.btn.armed{background:#b8473a;border-color:#b8473a;color:#fff}
/* hats & allowance sheet (wardrobe.py) */
.hats{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:6px 0 10px}
.hatbtn{display:grid;justify-items:center;gap:2px;padding:6px 4px 8px;border:1.6px solid var(--rule);border-radius:10px;
  background:var(--card);color:var(--ink);font:12px/1.2 var(--sans);cursor:pointer;min-height:44px}
.hatbtn svg{width:56px;height:50px;overflow:visible}
.hatbtn[aria-pressed="true"]{border-color:#1d1b18;background:#f5f0dc;box-shadow:0 0 0 2px #e8d36a}
.hatbtn:focus-visible{outline:3px solid #e8d36a;outline-offset:2px}
/* holiday hats (wardrobe.SEASONAL_HATS): own heading, a small event tag, locked ones greyed until their event */
.hatgroup{grid-column:1/-1;margin:6px 0 0;font-size:.82rem;font-weight:700;color:var(--muted)}
.hatbtn .hattag{font-size:.68rem;line-height:1.1;text-align:center;color:#8a4a12}
.hatbtn.locked{opacity:.5;filter:grayscale(.85);cursor:not-allowed}
.hatbtn.locked .hattag{color:inherit}
@media (prefers-color-scheme:dark){.hatbtn .hattag{color:#f0a860}}
.giveamt{display:grid;gap:2px}
.giveamt input,.giveamt select{font:15px var(--sans);padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--card);color:var(--ink);min-width:7em}
#wardrobePanel .row{margin:6px 0}