/* Mapa 3D do Complexo Juistreet — palco em tela cheia; por cima, a estrutura de reservas (cabeçalho, vistas, painel de espaços, card e barra). */
@font-face { font-family: "DM Sans"; src: url(/assets/fontes/dm-sans.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url(/assets/fontes/bebas-neue.woff2) format("woff2"); font-display: swap; }
:root {
  --noite: #0e0c17; --vidro: rgba(16,14,26,.78); --vidro-2: rgba(16,14,26,.92); --linha: rgba(255,255,255,.12);
  --texto: #f4f1ff; --suave: #b9b2cf; --rosa: #ff3d8f; --rosa-escuro: #d81b6f; --ambar: #ffcf7a; --ok: #7ce0a3;
  --ft: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fd: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--noite); color: var(--texto); font: 400 14px/1.4 var(--ft); }
#palco { position: fixed; inset: 0; }
#palco canvas { display: block; touch-action: none; width: 100%; height: 100%; }
button, .btn { font: 600 13px/1 var(--ft); color: var(--texto); background: var(--vidro); border: 1px solid var(--linha); border-radius: 999px; padding: 10px 14px; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; flex: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:hover, .btn:hover { border-color: rgba(255,255,255,.32); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
button[aria-pressed="true"] { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.btn.primary { background: var(--rosa); border-color: var(--rosa); color: #fff; font-weight: 700; }
.btn.primary:hover { background: var(--rosa-escuro); }
.btn.primary[aria-disabled="true"] { background: rgba(255,255,255,.12); border-color: transparent; color: var(--suave); cursor: default; pointer-events: none; }
.btn.ghost { background: transparent; }

/* cabeçalho (identidade da casa) */
.brand { position: fixed; z-index: 4; top: calc(10px + env(safe-area-inset-top, 0px)); left: max(14px, env(safe-area-inset-left, 0px)); display: flex; align-items: flex-start; gap: 12px; pointer-events: none; text-shadow: 0 1px 10px rgba(0,0,0,.7); max-width: min(62vw, 520px); }
.brand .inicio { pointer-events: auto; white-space: nowrap; font: 600 12px/1 var(--ft); color: var(--texto); background: var(--vidro); border: 1px solid var(--linha); border-radius: 999px; padding: 9px 12px; text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin-top: 2px; }
.brand .inicio:hover { border-color: rgba(255,255,255,.32); }
.brand .t0 { font: 700 11px/1 var(--ft); letter-spacing: .2em; text-transform: uppercase; color: var(--rosa); }
.brand .t1 { font: 400 clamp(26px, 4vw, 40px)/.95 var(--fd); text-transform: uppercase; letter-spacing: .02em; margin-top: 4px; }
.brand .t2 { font-size: 12px; color: var(--suave); margin-top: 4px; }
.brand .t2 b { color: var(--texto); }
.promo { position: fixed; z-index: 4; top: calc(10px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); background: var(--vidro); border: 1px solid var(--linha); border-radius: 999px; padding: 9px 12px; font-size: 12px; color: var(--texto); text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.promo b { color: var(--ambar); }

/* vistas prontas (trilho rolável) */
.topo-vistas { position: fixed; z-index: 3; left: 0; right: 0; top: calc(88px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 8px; padding: 0 max(14px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.topo-vistas .rot { font: 700 10px/1 var(--ft); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); text-shadow: 0 1px 6px rgba(0,0,0,.8); flex: none; }
#vistas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; pointer-events: auto; padding: 2px 0; max-width: 100%; }
#vistas::-webkit-scrollbar { display: none; }
#vistas button { padding: 8px 12px; font-size: 12px; }

/* painel de espaços (direita no computador, gaveta embaixo no celular) */
.panel { position: fixed; z-index: 5; right: max(14px, env(safe-area-inset-right, 0px)); top: calc(140px + env(safe-area-inset-top, 0px)); width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - 230px); background: var(--vidro-2); border: 1px solid var(--linha); border-radius: 18px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.panel-head { all: unset; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--linha); }
.panel-head h2 { margin: 0; font: 400 24px/1 var(--fd); letter-spacing: .04em; text-transform: uppercase; }
.panel-head .avail { margin-left: auto; font-size: 12px; color: var(--suave); }
.panel-head .seta { width: 10px; height: 10px; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); transform: rotate(45deg); transition: transform .2s; margin-left: 4px; }
.panel-head[aria-expanded="false"] .seta { transform: rotate(-135deg); }
.panel-cols { display: flex; justify-content: space-between; padding: 8px 16px 4px; font: 700 10px/1 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.panel-body { overflow: auto; padding: 4px 8px 8px; }
.panel.fechado .panel-cols, .panel.fechado .panel-body, .panel.fechado .legend, .panel.fechado .panel-nota { display: none; }
.tier { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 8px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; align-items: center; }
.tier:hover { background: rgba(255,255,255,.05); }
.tier.active { border-color: var(--rosa); background: rgba(255,61,143,.12); }
.tier .tier-name { font: 400 20px/1 var(--fd); letter-spacing: .03em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.tier .tier-name i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.tier .tier-price { font-weight: 700; font-size: 13px; text-align: right; color: var(--texto); }
.tier .tier-price.indef { color: var(--suave); font-weight: 500; }
.tier .tier-meta { grid-column: 1 / -1; font-size: 12px; color: var(--suave); }
.tier .tag-out { font: 700 10px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); border: 1px solid var(--ambar); border-radius: 999px; padding: 3px 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px 4px; font-size: 11px; color: var(--suave); border-top: 1px solid var(--linha); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.panel-nota { margin: 0; padding: 6px 16px 14px; font-size: 11px; color: var(--suave); }

/* card do espaço */
.card { position: fixed; z-index: 6; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(110px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 28px)); background: var(--vidro-2); border: 1px solid var(--linha); border-radius: 18px; padding: 18px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.card .close { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; }
.card-top { display: flex; gap: 14px; align-items: flex-start; padding-right: 36px; }
.card-id { font: 400 44px/1 var(--fd); color: var(--rosa); letter-spacing: .02em; min-width: 54px; }
.card-kind { font: 400 22px/1 var(--fd); text-transform: uppercase; letter-spacing: .03em; }
.card-local { font-size: 12px; color: var(--suave); margin-top: 3px; }
.pill { display: inline-block; margin-top: 6px; font: 700 10px/1 var(--ft); letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; padding: 5px 8px; background: rgba(255,255,255,.1); color: var(--suave); }
.pill.ok { background: rgba(124,224,163,.16); color: var(--ok); }
.pill.res { background: rgba(255,207,122,.16); color: var(--ambar); }
.pill.vend { background: rgba(255,61,143,.16); color: var(--rosa); }
.card-desc { margin: 12px 0 0; font-size: 13px; color: var(--suave); }
.card dl { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; gap: 2px 10px; margin: 14px 0 0; }
.card dt { font: 700 10px/1 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.card dd { margin: 4px 0 0; font-weight: 700; font-size: 15px; }
.card dd.indef { color: var(--suave); font-weight: 500; font-size: 13px; }
.card .actions { display: flex; gap: 8px; margin-top: 16px; }
.card .actions .btn { flex: 1; padding: 12px 10px; }

/* barra de baixo (controles do 3D) */
.baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); pointer-events: none; }
.barra { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; pointer-events: auto; }
.grupo { display: flex; gap: 0; border-radius: 999px; overflow: hidden; border: 1px solid var(--linha); background: var(--vidro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.grupo button { border: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.grupo button[aria-pressed="true"] { background: var(--rosa); }
#ajuda { font-size: 12px; color: var(--suave); text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.8); max-width: 60ch; }
#tip { position: fixed; z-index: 7; transform: translate(-50%, calc(-100% - 14px)); background: var(--vidro); border: 1px solid var(--ambar); color: var(--texto); padding: 7px 11px; border-radius: 10px; font-size: 13px; font-weight: 600; pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: min(70vw, 320px); }
#joy { position: fixed; z-index: 4; left: calc(22px + env(safe-area-inset-left, 0px)); bottom: calc(100px + env(safe-area-inset-bottom, 0px)); width: 110px; height: 110px; border-radius: 50%; background: rgba(16,14,26,.45); border: 1px solid var(--linha); display: none; place-items: center; touch-action: none; }
#joy i { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.85); display: block; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
body.andando #joy { display: grid; }
@media (pointer: fine) { body.andando #joy { display: none; } }
#mira { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,255,255,.7); z-index: 2; display: none; pointer-events: none; }
body.andando #mira { display: block; }
#carregando { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: var(--noite); text-align: center; }
#carregando b { font: 400 44px/1 var(--fd); letter-spacing: .08em; display: block; margin-bottom: 8px; }
#carregando b i { font-style: normal; color: var(--rosa); }
#carregando span { color: var(--suave); font-size: 13px; }
.toast { position: fixed; z-index: 8; left: 50%; bottom: calc(120px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--vidro-2); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; font-size: 13px; }

@media (max-width: 720px) {
  .brand { max-width: calc(100vw - 28px); }
  .brand .t1 { font-size: 24px; }
  .topo-vistas { top: calc(112px + env(safe-area-inset-top, 0px)); }
  .brand .t2 { font-size: 11px; }
  .panel { right: 0; left: 0; width: auto; top: auto; bottom: 0; max-height: 62vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .panel.fechado { bottom: 0; }
  .panel .panel-head { padding: 12px 16px; }
  .baixo { bottom: 54px; }
  .panel:not(.fechado) ~ .baixo { display: none; }
  .card { bottom: calc(236px + env(safe-area-inset-bottom, 0px)); left: 14px; right: 14px; width: auto; padding: 14px; }
  .card-id { font-size: 36px; min-width: 44px; }
  .card dl { grid-template-columns: repeat(3, 1fr); }
  button, .btn { padding: 8px 11px; font-size: 12px; }
  #ajuda { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }