/* FLUXO / JOSHUA TREE — the FLUXO Lote 001 design system over the shared engine chrome.
   Paper / ink / graphite (monochrome since 2026-10-27; cobalt only marks something live: voice on, someone speaking).
   Archivo. No monospace, no glass blur, no glow. */
:root{
  --fx-paper:oklch(0.97 0 0);--fx-ink:oklch(0.19 0.008 260);--fx-cobalt:oklch(0.3 0.004 260);--fx-signal:oklch(0.42 0.17 272);--fx-abyss:oklch(0.22 0.09 272);
  --fx-slip:oklch(0.15 0.01 260);--fx-ice:oklch(0.93 0.03 260);--fx-caramel:oklch(0.55 0.12 62);--fx-hair:oklch(0.19 0.008 260 / .16);
  --fx-display:'Bodoni Moda',Didot,'Times New Roman',serif;--fx-body:'Archivo',system-ui,sans-serif;
  --ss-surface:var(--fx-paper);--ss-surface-solid:var(--fx-paper);--ss-blur:none;--ss-ink:var(--fx-ink);--ss-ink2:oklch(0.19 0.008 260 / .66);--ss-ink3:oklch(0.19 0.008 260 / .46);
  --ss-stroke:var(--fx-hair);--ss-hover:oklch(0.19 0.004 260 / .06);--ss-active:oklch(0.19 0.004 260 / .1);--ss-bronze:var(--fx-cobalt);--ss-r:3px;--ss-r-sm:2px;
  --ss-shadow:0 1px 0 oklch(0.19 0.008 260 / .06),0 14px 34px -22px oklch(0.15 0.01 260 / .55);
  --ss-ui:var(--fx-body);--ss-display:var(--fx-display);--ui-paper:var(--fx-paper)}
body,#experience{font-family:var(--fx-body)}
.identity,.header-actions,.scene-controls>summary,.scene-controls-body,.tour-dock,#settings,#people,#info{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important}
/* identity */
.fluxo-identity{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 16px!important}
.fluxo-identity .brand{display:block}
.fluxo-identity .fx-mark{height:15px;width:auto;display:block}
.fluxo-identity .property-heading{border-left:1px solid var(--fx-hair);padding-left:14px}
.fluxo-identity h1{margin:0;font:italic 400 24px/1 var(--fx-display)!important;letter-spacing:0!important;color:var(--fx-ink)}
.fluxo-identity .property-location{margin:4px 0 0;font:600 10px/1 var(--fx-body)!important;letter-spacing:.09em!important;text-transform:uppercase;color:oklch(0.19 0.008 260 / .55)}
.scene-caption{font-family:var(--fx-body)!important}
.scene-caption #sceneLabel{font:italic 400 1.2em/1 var(--fx-display)}
/* loader */
.fx-loader .ld-shade{background:linear-gradient(180deg,oklch(0.15 0.01 260 / .25),transparent 35%,transparent 45%,oklch(0.15 0.01 260 / .86))!important}
.fx-loader .fx-ld-mark{width:min(200px,46vw);height:auto;margin-bottom:18px}
.fx-loader h2{font:900 clamp(44px,6.4vw,92px)/.95 var(--fx-display)!important;letter-spacing:-.01em!important;color:var(--fx-paper)!important}
.fx-loader h2 em{font-weight:400;color:var(--fx-ice)}
.fx-loader p{font:400 16px/1.5 var(--fx-body)!important;max-width:44ch;color:var(--fx-ice)}
.fx-loader small{font:600 11px/1 var(--fx-body)!important;letter-spacing:.09em!important;text-transform:uppercase}
.fx-loader .ld-line i{background:#f4f4f2!important}
/* dock */
.tour-dock button,.views button,#walkButton,#roomViewsButton,.tour-dock .orn.in-dock button{font:600 12px/1 var(--fx-body)!important;letter-spacing:.06em!important;text-transform:uppercase}
.tour-dock .book-btn.fx-shop{background:var(--fx-ink)!important;color:var(--fx-paper)!important;position:relative}
.tour-dock .book-btn.fx-shop svg{stroke:var(--fx-paper)!important}
.tour-dock .book-btn.fx-shop:hover{background:var(--fx-cobalt)!important}
.fx-count:empty{display:none}
.fx-count{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--fx-caramel);color:var(--fx-paper);font:700 10px/16px var(--fx-body);font-style:normal;text-align:center}
#info h2,#settings h2,#people h2{font:900 34px/1 var(--fx-display)!important;letter-spacing:-.01em!important}
/* spatial layer: solid paper, square-ish, ink type */
#spatial{--g-bg:var(--fx-paper);--g-line:transparent;--g-hi:transparent;--ink:var(--fx-ink);--ink2:oklch(0.19 0.008 260 / .66);--ink3:oklch(0.19 0.008 260 / .46);--radius:4px;font-family:var(--fx-body)}
#spatial .glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:0 18px 40px -24px oklch(0.15 0.01 260 / .6)!important}
#spatial .tag .cap{border-radius:2px;padding:5px 12px 5px 5px}
#spatial .tag .ic{border-radius:1px;background:var(--fx-ink);box-shadow:none}
#spatial .tag .ic svg{stroke:var(--fx-paper)}
#spatial .tag small{color:var(--ss-ink3,#7d7f87);font-weight:600;letter-spacing:.09em}
#spatial .tag b{font-weight:600}
#spatial .tag .stem{background:linear-gradient(var(--fx-paper),transparent)}
#spatial .tag.gaze .cap,#spatial .tag:hover .cap{box-shadow:0 0 0 2px var(--fx-cobalt),0 18px 40px -20px oklch(0.15 0.01 260 / .6)!important}
#spatial .panel{border-radius:3px!important}
#spatial .panel h3{font:900 34px/1 var(--fx-display)!important;letter-spacing:-.01em}
#spatial .panel .hd small{color:oklch(0.19 0.008 260 / .5)!important;letter-spacing:.09em}
#spatial .panel .hd .ic{border-radius:1px!important;background:var(--fx-ink)!important}
#spatial .panel .hd .ic svg{stroke:var(--fx-paper)!important}
#spatial .toast,#spatial .toast.glass{border-radius:2px!important;background:var(--fx-ink)!important;color:var(--fx-paper)!important;font-weight:600;box-shadow:var(--ss-shadow)!important}
#spatial .btn{border-radius:2px!important}
#spatial .btn.primary{background:var(--fx-ink)!important;color:var(--fx-paper)!important}
/* FLUXO panels */
#spatial .fx-body{display:grid;gap:12px}
#spatial .fx-label{width:100%;max-height:230px;object-fit:cover;object-position:50% 0;display:block;background:#fff;box-shadow:0 0 0 1px var(--fx-hair)}
#spatial .fx-prose{margin:0;font-size:14.5px;line-height:1.55;color:oklch(0.3 0.01 260)}
#spatial .fx-specs{margin:0;display:grid}
#spatial .fx-specs div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--fx-hair);padding:8px 0}
#spatial .fx-specs dt,#spatial .fx-specs dd{margin:0;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
#spatial .fx-specs dt{color:oklch(0.45 0.01 260)}
#spatial .fx-specs dd{text-align:right}
#spatial .fx-loop{display:flex;gap:3px}
#spatial .fx-loop i{flex:1;height:6px;background:var(--fx-hair)}
#spatial .fx-loop i.on{background:var(--fx-ink)}
#spatial .fx-loop i.now{background:var(--fx-caramel)}
#spatial .fx-stages{display:flex;justify-content:space-between;font-size:9.5px;font-weight:600;letter-spacing:.06em;color:oklch(0.45 0.01 260);margin-top:-6px}
#spatial .fx-actions{display:flex;flex-wrap:wrap;gap:8px}
#spatial .fx-btn{appearance:none;border:0;background:var(--fx-ink);color:var(--fx-paper);padding:13px 20px;font:600 12px/1 var(--fx-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0}
#spatial .fx-btn:hover{background:var(--fx-cobalt)}
#spatial .fx-btn.ghost{background:transparent;color:var(--fx-ink);box-shadow:inset 0 0 0 1px var(--fx-ink)}
#spatial .fx-btn.ghost:hover{background:var(--fx-ink);color:var(--fx-paper)}
#spatial .fx-note{margin:0;font-size:12.5px;line-height:1.5;color:oklch(0.45 0.01 260);border-top:1px solid var(--fx-hair);padding-top:10px}
#spatial .fx-list{display:grid}
#spatial .fx-row{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;border:0;border-top:1px solid var(--fx-hair);background:none;padding:12px 2px;color:var(--fx-ink);text-decoration:none;font:inherit;cursor:pointer}
#spatial .fx-row span{display:flex;flex-direction:column;gap:2px}
#spatial .fx-row b{font-size:14.5px;font-weight:600}
#spatial .fx-row small{font-size:12px;color:oklch(0.45 0.01 260)}
#spatial .fx-row em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:oklch(0.19 0.008 260 / .55);white-space:nowrap}
#spatial .fx-row:hover b{color:var(--fx-cobalt)}
#spatial .fx-row.off{cursor:default;opacity:.62}
#spatial .fx-row.off:hover b{color:inherit}
/* chess */
#spatial .fx-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;width:100%;max-width:420px;margin:0 auto;box-shadow:0 0 0 1px var(--fx-ink)}
#spatial .fx-board .sq{appearance:none;border:0;padding:0;display:grid;place-items:center;font-size:clamp(22px,5.4vw,36px);line-height:1;cursor:pointer;position:relative}
#spatial .fx-board .sq.l{background:oklch(0.9 0.02 80)}
#spatial .fx-board .sq.d{background:oklch(0.62 0.05 60)}
#spatial .fx-board .sq.last{box-shadow:inset 0 0 0 100px oklch(0.42 0.17 272 / .22)}
#spatial .fx-board .sq.sel{box-shadow:inset 0 0 0 3px var(--fx-cobalt)}
#spatial .fx-board .sq.tgt::after{content:'';position:absolute;width:26%;height:26%;border-radius:50%;background:oklch(0.42 0.17 272 / .55)}
#spatial .fx-board .sq span.w{color:#fbfaf6;-webkit-text-stroke:1px oklch(0.19 0.008 260)}
#spatial .fx-board .sq span.b{color:oklch(0.17 0.01 260)}
#spatial .fx-status{margin:0;font:italic 400 19px/1.3 var(--fx-display);text-align:center}
#spatial .fx-chess .fx-actions{justify-content:center}
#spatial .panel.fx-chess-panel{width:min(460px,calc(100vw - 32px))!important;max-height:min(780px,calc(100vh - 140px))!important}
@media (max-width:600px){.fluxo-identity h1{font-size:19px!important}.fluxo-identity .property-location{display:none}#spatial .panel h3{font-size:28px!important}}
#doorButton{display:none!important}

/* Quiet, named places make the whole café explorable without knowing game controls. */
#spatial .fx-places{display:grid;gap:0}
#spatial .fx-place{appearance:none;display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 0;background:transparent;border:0;border-bottom:1px solid var(--fx-hair);color:var(--fx-ink);font:500 15px/1.3 var(--fx-body);text-align:left;cursor:pointer}
#spatial .fx-place:hover{color:var(--fx-cobalt)}
#spatial .fx-place:focus-visible,.tour-dock button:focus-visible{outline:2px solid var(--fx-cobalt);outline-offset:3px}
#spatial .fx-place svg{width:17px;height:17px;color:var(--fx-cobalt)}
#spatial .fx-places+.fx-prose{margin-top:12px}
::selection{background:var(--fx-cobalt);color:var(--fx-paper)}

/* Legible compact controls, even over a bright sky or dark loader. */
.header-actions{padding:4px 8px!important;gap:5px!important}
.fluxo-identity .property-location{font-size:11px!important;letter-spacing:.06em!important}
#progress,.fx-loader small{color:var(--fx-ice)!important}
#sticks .stick span{font-size:11px!important}
#people label,#nameInput{font-size:12px!important}
#spatial .tag .cap{border:0!important}
/* ── café shop rows (catalog + shared bag) ── */
#spatial .fx-prod{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;border-top:1px solid var(--fx-hair);padding:10px 2px}
#spatial .fx-prod img{width:52px;height:65px;object-fit:cover;background:var(--fx-ice)}
#spatial .fx-prod span{display:flex;flex-direction:column;gap:2px;min-width:0}
#spatial .fx-prod b{font-size:14.5px;font-weight:600}
#spatial .fx-prod small{font-size:12px;color:oklch(0.45 0.01 260)}
#spatial .fx-buy{display:flex;align-items:center;gap:10px}
#spatial .fx-price{font:italic 400 18px/1 var(--fx-display);white-space:nowrap}
#spatial .fx-price small{font:600 10px var(--fx-body);letter-spacing:.06em;margin-left:2px}
#spatial .fx-soon{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:oklch(0.45 0.01 260);white-space:nowrap}
#spatial .fx-btn.sm{padding:9px 14px;font-size:11px}
#spatial .fx-bagfoot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--fx-ink);padding-top:12px;font-size:12.5px;font-weight:600}
#spatial .fx-bagfoot>span{flex:1}
#spatial .fx-qty{display:flex;align-items:center;box-shadow:inset 0 0 0 1px var(--fx-hair)}
#spatial .fx-qty button{appearance:none;border:0;background:none;width:32px;height:32px;font:500 16px var(--fx-body);color:var(--fx-ink);cursor:pointer}
#spatial .fx-qty button:hover{color:var(--fx-cobalt)}
#spatial .fx-qty output{min-width:18px;text-align:center;font-weight:600;font-size:13px}
#spatial .fx-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--fx-ink);padding-top:12px}
#spatial .fx-total span{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
#spatial .fx-total b{font:italic 400 24px/1 var(--fx-display)}
@media (max-width:600px){#spatial .fx-prod{grid-template-columns:44px 1fr;row-gap:6px}#spatial .fx-prod img{width:44px;height:55px}#spatial .fx-prod .fx-buy,#spatial .fx-prod .fx-qty{grid-column:2}}

/* ── café chat + voice (social.js) ── */
.fx-chat{position:fixed;left:16px;bottom:96px;z-index:40;width:min(340px,calc(100vw - 32px));font:400 13px/1.4 var(--fx-body);color:var(--fx-ink);pointer-events:none}
.fx-chat .log{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px;max-height:34vh;overflow:hidden}
.fx-chat.open .log{overflow-y:auto;pointer-events:auto}
.fx-chat .log li{align-self:flex-start;max-width:100%;background:var(--fx-paper);padding:6px 10px;box-shadow:var(--ss-shadow);transition:opacity .8s;overflow-wrap:anywhere}
.fx-chat .log li b{font-weight:600;margin-right:6px;color:var(--fx-ink);border-bottom:2px solid var(--c)}
.fx-chat .log li.act{background:oklch(0.97 0 0 / .8);box-shadow:none;padding:3px 9px;font-size:12px;color:oklch(0.3 0.01 260)}
.fx-chat .log li.act b{border:0}
.fx-chat .say{display:flex;gap:6px;pointer-events:auto}
.fx-chat input{flex:1;min-width:0;border:0;background:var(--fx-paper);box-shadow:var(--ss-shadow),inset 0 0 0 1px var(--fx-hair);padding:10px 12px;font:400 13px var(--fx-body);color:var(--fx-ink);border-radius:0;opacity:.72;transition:opacity .2s}
.fx-chat.open input,.fx-chat input:hover{opacity:1}
.fx-chat input:focus{outline:2px solid var(--fx-cobalt);outline-offset:0}
.fx-chat .say button{display:flex;align-items:center;gap:6px;border:0;background:var(--fx-paper);color:var(--fx-ink);box-shadow:var(--ss-shadow),inset 0 0 0 1px var(--fx-hair);padding:0 12px;font:600 11px var(--fx-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.fx-chat .say button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.fx-chat .say button:hover{color:var(--fx-cobalt)}
.fx-chat .say .mic[aria-pressed=true]{background:var(--fx-ink);color:var(--fx-paper)}
.fx-chat .say .mute{padding:0 10px}
.fx-chat .say .mute[aria-pressed=true]{color:var(--fx-caramel)}
.fx-chat .say .mute.live{box-shadow:var(--ss-shadow),inset 0 0 0 2px var(--fx-signal)}
.fx-chat .say button[hidden]{display:none}
.name-tag.orb-tag{flex-direction:column;align-items:center}
.name-tag.orb-tag em{display:block;font-style:normal;max-width:220px;background:var(--fx-paper);color:var(--fx-ink);padding:5px 9px;margin-bottom:4px;font:400 12.5px/1.35 var(--fx-body);white-space:normal;text-align:left;box-shadow:var(--ss-shadow)}
.name-tag.orb-tag.voice span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:1px;background:var(--fx-hair)}
.name-tag.orb-tag.speaking span::before{background:var(--fx-signal);box-shadow:0 0 0 3px oklch(0.42 0.17 272 / .25)}
@media (max-width:600px),(pointer:coarse){.fx-chat{bottom:150px;width:min(300px,calc(100vw - 32px))}.fx-chat .say .mic span{display:none}}
body.clean .fx-chat,body.clean .fx-sip{display:none}

/* ── the cup in your hand (life.js) ── */
.fx-sip{position:fixed;right:22px;bottom:110px;z-index:40;border:0;background:var(--fx-paper);color:var(--fx-ink);box-shadow:var(--ss-shadow);padding:10px 14px;font:600 11px var(--fx-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.fx-sip kbd{font:600 10px var(--fx-body);margin-left:6px;padding:2px 5px;box-shadow:inset 0 0 0 1px var(--fx-hair)}
.fx-sip:hover{color:var(--fx-cobalt)}
.fx-sip[hidden]{display:none}
@media (pointer:coarse){.fx-sip kbd{display:none}}

/* ── VR (xr.js) ── */
.fx-vr-go{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;border:0;background:var(--fx-ink);color:var(--fx-paper);padding:22px 30px;font:600 11px/1.4 var(--fx-body);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:var(--ss-shadow)}
.fx-vr-go b{font:italic 400 30px/1 var(--fx-display);letter-spacing:0;text-transform:none}
.fx-vr-go:hover{background:var(--fx-cobalt)}
body.in-vr .fx-chat,body.in-vr .fx-sip{display:none}