/* Layout: full-bleed low-poly world; HUD floats on top — clock & controls top-left, resident panel docked right (bottom sheet on phones).
   Deliberately single-theme: a late-night game-menu look over the 3D scene. */
:root{
  --bg:#1b1726; --panel:rgba(27,23,38,.9); --panel-2:rgba(255,244,222,.07); --ink:#f6ecd8; --muted:#b6a993; --line:rgba(246,236,216,.16);
  --sun:#ffc94a; --on-sun:#1b1726; --paper:#fff8e8; --good:#86d17c; --warn:#f2b64c; --bad:#ee6b5d; --rose:#f08cb4;
  --f-display:'Silkscreen','Courier New',monospace; --f-body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.4 var(--f-body);overflow:hidden}
[hidden]{display:none!important}
#app{position:relative;height:100%;overflow:hidden}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#view.retro{image-rendering:pixelated}
#view.dragging{cursor:grabbing}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
button,input,select{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

.topbar{position:absolute;top:12px;left:max(12px,env(safe-area-inset-left,0px));right:calc(360px + 24px + env(safe-area-inset-right,0px));display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;pointer-events:none;z-index:3}
.topbar>*{pointer-events:auto}
.box{background:var(--panel);border:1px solid var(--line);border-radius:6px;backdrop-filter:blur(6px)}
.brand{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:7px 12px}
.brand b{font-family:var(--f-display);font-weight:400;font-size:14px;letter-spacing:.03em;color:var(--sun)}
.live{font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.live.on::before{background:var(--good)}
.clock{display:flex;flex-direction:column;justify-content:center;padding:6px 12px;min-width:118px}
.clock .d{font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.clock .t{font-family:var(--f-display);font-size:16px;font-variant-numeric:tabular-nums}
.seg{display:flex;overflow:hidden}
.seg button{background:none;border:0;border-right:1px solid var(--line);padding:0 11px;min-height:40px;cursor:pointer;font-size:13px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--sun);color:var(--on-sun);font-weight:700}
.seg button:hover:not([aria-pressed="true"]){background:var(--panel-2)}
.seg.small{border:1px solid var(--line);border-radius:5px}
.seg.small button{min-height:26px;padding:0 8px;font-size:12px}

.panel{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:12px;bottom:12px;width:360px;display:flex;flex-direction:column;z-index:3;overflow:hidden;border-radius:8px}
.tabs{display:flex;gap:6px;padding:12px 14px 0;flex-wrap:wrap}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:6px;background:transparent;padding:8px 10px;cursor:pointer;font-weight:700;min-width:90px}
.tab[aria-selected="true"]{background:var(--panel-2);border-color:var(--pc)}
.tab.dead{opacity:.5;text-decoration:line-through}
.swatch{width:10px;height:10px;border-radius:2px;background:var(--pc);flex:none;display:inline-block}
.mdot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.scroll{overflow-y:auto;padding:14px 16px 16px;display:flex;flex-direction:column;gap:20px;min-height:0;flex:1}
h3{font-family:var(--f-display);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.who{display:flex;flex-direction:column;gap:8px}
.who-name{font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--pc);margin:0;line-height:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:var(--sun);color:var(--on-sun)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
.chip.mind{border-color:var(--pc)}
.now{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px}
.now span{min-width:0}
.pill{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:var(--on-sun);flex:none}
blockquote{margin:0;padding:10px 12px;border-left:3px solid var(--pc);background:var(--panel-2);border-radius:0 6px 6px 0;font-style:italic;line-height:1.45}
.needs{display:flex;flex-direction:column;gap:8px}
.need{display:grid;grid-template-columns:70px 1fr 18px 30px;gap:8px;align-items:center;font-size:13px}
.trend{font-size:9px;letter-spacing:-2px;text-align:center;line-height:1}
.trend.up{color:var(--good)}
.trend.down{color:var(--bad)}
.bar{height:10px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;position:relative}
.fill{height:100%;transition:width .3s linear,background-color .3s}
.num{font-variant-numeric:tabular-nums;text-align:right;color:var(--muted);font-size:12px}
.wallet{display:flex;flex-direction:column;gap:8px}
.coins{font-family:var(--f-display);font-size:18px;color:var(--sun)}
.coins::after{content:" coins";font-family:var(--f-body);font-size:12px;color:var(--muted)}
.inv{display:flex;flex-wrap:wrap;gap:6px}
.nudge-row{display:flex;gap:6px;margin-bottom:6px}
.nudge-row select,.nudge-row input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:8px}
.nudge-row input[type=number]{flex:0 0 70px}
.nudge-row button,.foot button{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:8px 12px;cursor:pointer}
.nudge-row button.primary{background:var(--sun);color:var(--on-sun);font-weight:700;border-color:var(--sun);flex:1}
select option{background:#231e31}
.ff{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.4}
.rel{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.rel:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.rel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.rel .bar.center::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--muted)}
.rel .fill{position:absolute;top:0;bottom:0}
.opinion{font-size:13px;font-style:italic;color:var(--ink);opacity:.9}
.entry{font-size:13px;line-height:1.5;margin-bottom:12px}
.entry time{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary h3::after{content:" ▸"}
details[open] summary h3::after{content:" ▾"}
.mem{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.mem time{color:var(--muted);font-size:11px;display:block}
.feed-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
.feed-head h3{margin:0}
.feed ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.feed li{display:grid;grid-template-columns:8px 1fr;gap:9px;font-size:13px;line-height:1.38}
.feed li i{width:8px;height:8px;border-radius:2px;margin-top:5px}
.feed li.say div{font-style:italic}
.feed li.muted div{color:var(--muted)}
.feed time{display:block;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;font-style:normal}
.foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.login label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.login input{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:8px}

.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;will-change:transform}
.tag .say{font-size:12px;background:var(--paper);color:var(--on-sun);padding:4px 9px;border-radius:6px;max-width:240px;text-align:center;line-height:1.3}
.tag .say.dots{font-family:var(--f-display)}
.tag .name{pointer-events:auto;cursor:pointer;font-weight:700;font-size:12px;background:var(--panel);border:1px solid var(--pc);padding:2px 8px;border-radius:4px;display:flex;gap:6px;align-items:center}
.tag .doing{font-size:11px;background:rgba(27,23,38,.7);padding:1px 6px;border-radius:3px;white-space:nowrap}
.place{position:absolute;left:0;top:0;font-family:var(--f-display);font-size:11px;color:var(--ink);opacity:.8;white-space:nowrap;letter-spacing:.04em;text-shadow:0 1px 0 rgba(0,0,0,.6)}

.helper{position:absolute;left:max(12px,env(safe-area-inset-left,0px));bottom:12px;font-size:12px;color:var(--muted);padding:7px 10px;z-index:3;transition:opacity .6s}
.toast{position:absolute;left:50%;top:76px;transform:translateX(-50%);z-index:5;background:var(--paper);color:var(--on-sun);font-weight:700;font-size:13px;padding:9px 14px;border-radius:6px;max-width:min(420px,80vw);text-align:center;transition:opacity .3s}
.fatal{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;z-index:9}

@media (max-width:760px){
  .topbar{right:max(12px,env(safe-area-inset-right,0px));gap:6px}
  .seg button{padding:0 9px}
  .panel{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));top:auto;bottom:8px;width:auto;max-height:50%}
  .helper{display:none}
  .toast{top:auto;bottom:calc(50% + 20px)}
}
@media (prefers-reduced-motion:reduce){.fill,.helper,.toast{transition:none}}

.ta{width:100%;min-height:70px;resize:vertical;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:8px;color:inherit;font:inherit;margin-bottom:6px}
.give-list{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;font-size:13px}
.give-list label{display:flex;align-items:center;gap:8px}
.give-list input[type=number]{width:56px;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:3px 5px;color:inherit}
#trChat li b{color:var(--pc,#d8b45a)}

.place.region{font-size:15px;opacity:.95;color:#f3e7c4;letter-spacing:.08em}
.regionbox select{background:transparent;color:var(--ink);border:0;font:inherit;font-family:var(--f-display);font-size:13px;padding:0;cursor:pointer;max-width:170px}
.regionbox select option{background:#1c2230;color:#eee}

/* speech bubble button over a person: opens their recent conversations */
.tag .talk{pointer-events:auto;cursor:pointer;position:relative;background:var(--paper);color:var(--on-sun);border:0;border-radius:9px;padding:0 9px;height:20px;font-family:var(--f-display);font-size:13px;line-height:18px;letter-spacing:1px;box-shadow:0 1px 0 rgba(0,0,0,.35)}
.tag .talk::after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-4px;border:4px solid transparent;border-top-color:var(--paper);border-bottom:0}
.tag .talk:hover{background:var(--sun)}
.tag .talk.live{animation:talkpulse 1.2s ease-in-out infinite}
@keyframes talkpulse{50%{transform:translateY(-2px)}}
.subtabs{margin-bottom:-8px}
.subtabs button{flex:1}
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(10,8,16,.55);padding:16px}
.modal[hidden]{display:none}
.modal-card{width:min(620px,100%);max-height:min(80vh,760px);display:flex;flex-direction:column;overflow:hidden;background:#1d1928}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:15px}
.modal-head button{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;width:32px;height:32px;cursor:pointer}
.modal-body{overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:18px}
.convo{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--panel-2)}
.convo-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-bottom:10px}
.convo-head b{color:var(--ink);font-size:13px}
.convo .live{color:var(--good)}
.line{display:flex;flex-direction:column;max-width:85%;margin-bottom:8px}
.line.me{align-self:flex-start}
.line.them{align-self:flex-end;align-items:flex-end;margin-left:auto}
.line .who{font-size:11px;font-weight:700;color:var(--pc);margin-bottom:2px}
.line .bub{background:#2a2537;border:1px solid var(--line);border-left:3px solid var(--pc);border-radius:8px;padding:6px 10px;font-size:13.5px;line-height:1.4}
.line.them .bub{border-left:1px solid var(--line);border-right:3px solid var(--pc)}
.line .act{font-size:12px;color:var(--muted);font-style:italic;margin-top:3px}
.convo .beats{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.convo .sum{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted);font-style:italic}
.talk-mini{display:flex;flex-direction:column;gap:8px}
.talk-mini button{text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:9px 10px;cursor:pointer;font-size:13px;line-height:1.4}
.talk-mini button:hover{border-color:var(--pc)}
.talk-mini time{display:block;font-size:11px;color:var(--muted)}

.subtabs{flex-shrink:0}
.scroll > section{flex-shrink:0}

.bel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.bel-head h3{margin:0}
.load{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.loadbar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden;margin-bottom:10px}
.loadbar .fill{height:100%;transition:width .3s}
.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.items li{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
.it-top{display:flex;align-items:baseline;gap:6px;font-size:13px}
.it-top .qty{color:var(--muted)}
.it-top .wt{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.fx{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.fxc{font-size:11.5px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);line-height:1.5}
.fxc.eat{color:#c4e39a;border-color:rgba(196,227,154,.35)}
.fxc.warm{color:#ffb38a;border-color:rgba(255,179,138,.4)}
.fxc.carry{color:#a9c8ff;border-color:rgba(169,200,255,.4)}
.fxc.tool{color:var(--sun);border-color:rgba(255,201,74,.4)}
.fxc.use{color:var(--ink)}
.fxc.none{color:var(--muted)}
.fxc.desc{border:0;padding:0;color:var(--muted);font-style:italic;width:100%}

.hovertip{position:absolute;left:0;top:0;z-index:6;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:12.5px;line-height:1.4;display:flex;flex-direction:column;gap:1px;max-width:260px;backdrop-filter:blur(6px)}
.hovertip[hidden]{display:none}
.hovertip b{font-size:13px}
.hovertip span{color:var(--muted)}

.tag .prog{width:46px;height:5px;border-radius:3px;background:rgba(10,8,16,.7);border:1px solid rgba(246,236,216,.35);overflow:hidden}
.tag .prog[hidden]{display:none}
.tag .prog i{display:block;height:100%;width:0;background:var(--sun);transition:width .35s linear}

.firebar{position:absolute;left:0;top:0;width:52px;height:7px;border-radius:4px;background:rgba(10,8,16,.85);border:1px solid rgba(255,244,220,.75);overflow:hidden;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.firebar[hidden]{display:none}
.firebar i{display:block;height:100%;width:0}

.chat-card{height:min(80vh,720px)}
.chat-head-btns{display:flex;gap:8px;align-items:flex-start}
.chat-log{flex:1;min-height:0;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column}
.chat-log .sys{align-self:center;font-size:12px;color:var(--muted);font-style:italic;margin:6px 0}
.chat-log .offer{margin-top:4px;font-size:12.5px;padding:6px 8px;border:1px dashed var(--line);border-radius:6px;background:rgba(255,255,255,.03)}
.chat-log .offer button{font-size:12px;padding:2px 8px;margin-left:4px}
.chat-trade{border-top:1px solid var(--line);padding:8px 16px}
.chat-trade summary{cursor:pointer;font-size:13px;color:var(--muted)}
.chat-input{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}
.chat-input input{flex:1;min-width:0}
.chat-msg{padding:0 16px 10px;margin:0;min-height:0}

.task{margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.task[hidden]{display:none}
.task .task-top{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.task .task-top span{color:var(--muted);font-variant-numeric:tabular-nums}
.task .task-bar{height:6px;margin:6px 0 4px;border-radius:3px;background:rgba(10,8,16,.7);border:1px solid var(--line);overflow:hidden}
.task .task-bar i{display:block;height:100%;background:var(--good)}
.task .hint{font-size:12px}