/* ============================================================
   Atlas Wardome 3D — mesma fundação do style.css (tokens
   duplicados porque 3d.html não importa o style.css)
   ============================================================ */

:root{
  --bg:#0f120f;
  --bg-deep:#080b09;
  --panel:#121713e8;
  --panel2:#1c221c;
  --ink:#ece7d6;
  --muted:#969b8e;
  --faint:#6b7064;
  --line:#2e352d;
  --gold:#cbb06b;
  --gold-deep:#8f7a44;
  --gold-soft:#cbb06b26;
  --shadow:0 18px 48px #0009;
  --radius:5px;
  --radius-lg:9px;
  --tr:.18s ease;
  --font-ui:Inter,ui-sans-serif,system-ui,sans-serif;
  --font-display:Georgia,'Times New Roman',serif;

  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--bg-deep);
}

*{box-sizing:border-box}

::selection{background:var(--gold-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}

*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

body{margin:0;overflow:hidden;background:radial-gradient(circle at 50% 30%,#1b251d,#080b09 65%)}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ---------- barra superior ---------- */
.bar{
  position:fixed;
  inset:0 0 auto;
  height:68px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
  background:#0c100dee;
  backdrop-filter:blur(12px);
}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;min-width:220px}
.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.sigil{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--gold-deep);
  color:var(--gold);
  font:23px var(--font-display);
  transform:rotate(45deg);
  box-shadow:inset 0 0 12px #cbb06b14;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.brand:hover .sigil{border-color:var(--gold);box-shadow:inset 0 0 14px #cbb06b2e,0 0 10px #cbb06b22}

nav{display:flex;align-items:center;gap:7px;min-width:0;overflow:auto}
nav button{border:0;background:none;color:var(--muted);cursor:pointer;white-space:nowrap;font:12px var(--font-ui);transition:color var(--tr)}
nav button:hover,nav button:last-child{color:var(--gold)}
nav i{color:var(--faint);font-style:normal}

.mode{
  margin-left:auto;
  color:var(--gold);
  border:1px solid #5d5741;
  text-decoration:none;
  padding:8px 12px;
  border-radius:var(--radius);
  font-size:12px;
  white-space:nowrap;
  transition:border-color var(--tr),background var(--tr);
}
.mode:hover{border-color:var(--gold);background:#2b2716}

/* ---------- painéis flutuantes ---------- */
.legend,.details{
  position:fixed;
  z-index:2;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.legend{left:22px;top:90px;width:280px;padding:20px}
.details{right:22px;top:90px;width:290px;max-height:calc(100vh - 115px);overflow:auto;padding:20px}

.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1{font:400 34px var(--font-display);margin:7px 0}
h2{font:400 24px var(--font-display);margin:8px 0}
.legend p,.details p{color:var(--muted);font-size:12px;line-height:1.55}
.details dl{font-size:12px}
.details dt{color:var(--muted);margin-top:13px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.details dd{margin:4px 0;line-height:1.5}
.details a{display:block;margin-top:15px;color:var(--gold)}

.level-key{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.floor-tag{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  border:1px solid var(--line);
  padding:9px 11px;
  border-radius:var(--radius);
  background:#ffffff05;
  cursor:pointer;
  user-select:none;
  transition:border-color var(--tr),opacity var(--tr),background var(--tr);
}
.floor-tag:hover{border-color:var(--faint);background:#ffffff09}
.floor-tag.off{opacity:.42}
.floor-tag i{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none}
.floor-tag .eye{margin-left:auto;color:var(--muted);font-size:13px;font-weight:400}

.help{border-top:1px solid var(--line);padding-top:12px;color:var(--muted);font-size:10px;line-height:1.8}
.help span{color:var(--gold);margin-right:3px}

.tooltip{
  display:none;
  position:fixed;
  z-index:5;
  pointer-events:none;
  padding:7px 10px;
  background:#080b09f2;
  border:1px solid #565b49;
  border-radius:var(--radius);
  color:var(--ink);
  font-size:11px;
  max-width:260px;
  box-shadow:var(--shadow);
}

.loading{
  position:fixed;
  z-index:6;
  inset:0;
  display:grid;
  place-items:center;
  background:var(--bg-deep);
  color:var(--gold);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  transition:opacity .4s;
}
.loading.done{opacity:0;pointer-events:none}

/* ---------- botão voltar flutuante ---------- */
.back-3d{
  position:fixed;
  left:calc(22px + 280px + 14px);
  top:90px;
  z-index:2;
  padding:9px 14px;
  border:1px solid var(--gold-deep);
  border-radius:var(--radius);
  background:var(--panel);
  color:var(--gold);
  font:12px var(--font-ui);
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  transition:border-color var(--tr),background var(--tr),transform var(--tr);
}
.back-3d:hover{border-color:var(--gold);background:#1d2418;transform:translateX(-2px)}
.back-3d.hidden{display:none}

/* ---------- rótulos sobre a cena ---------- */
.labels{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.zone-label{
  position:absolute;
  max-width:170px;
  transform:translate(-50%,-100%);
  padding:5px 8px;
  border:1px solid #ffffff2e;
  border-radius:var(--radius);
  background:#0a0d0ae0;
  color:#f3eee0;
  font-size:10px;
  line-height:1.25;
  text-align:center;
  box-shadow:0 4px 12px #0008;
}
.zone-label b{display:block;color:#fff}
.zone-label small{color:#a8a89c}

.room-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.room-legend span{font-size:10px}
.room-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}
.room-legend .entry{background:#e8e2cf}
.room-legend .death{background:#b71919}

/* ---------- responsivo ---------- */
@media(max-width:850px){
  .legend{width:220px}
  .details{top:auto;bottom:14px;right:14px;left:14px;width:auto;max-height:30vh}
  .bar{padding:0 12px;gap:14px}
  .brand{min-width:0}
  .brand span:last-child{display:none}
  .legend{left:14px;top:82px}
  .back-3d{left:auto;right:14px;top:82px;padding:8px 11px}
  .mode{padding:7px}
  .help{display:none}
}

/* ---------- telas grandes (1440p+): bump de legibilidade ---------- */
@media(min-width:2000px){
  .eyebrow{font-size:11px}
  nav button{font-size:14px}
  .mode{font-size:14px}
  .legend p,.details p,.details dl{font-size:14px}
  .floor-tag{font-size:14px}
  .tooltip{font-size:13px}
  .help{font-size:12px}
  .zone-label{font-size:12px}
  .back-3d{font-size:14px}
}