/* ═══════════════════════════════════════════════════════════════
   LAYOUT.CSS — screens, chrome, canvas, HUD, overlay, toast
   ═══════════════════════════════════════════════════════════════ */
#cosmos{ position:fixed; inset:0; z-index:0; }

@media (pointer:fine){
  .cursor{ position:fixed; pointer-events:none; z-index:9999; mix-blend-mode:difference; }
  #cd{ width:5px; height:5px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); box-shadow:0 0 10px var(--accent); transition:width .15s,height .15s; }
  #cr{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(200,169,110,0.3); transform:translate(-50%,-50%); transition:all .1s ease; }
}

.screen{
  position:fixed; inset:0; z-index:10;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding:calc(var(--safe-top) + 12px) 16px calc(var(--safe-bot) + 16px);
  opacity:0; pointer-events:none;
  transition:opacity .7s ease;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.screen.active{ opacity:1; pointer-events:all; }
.screen-inner{ width:100%; max-width:560px; margin:0 auto; padding:20px 0 40px; }

/* Journal/About icons hide during the immersive intention + journey
   screens so a wandering tap can't pull someone out of the moment;
   they stay reachable from landing, reflection, and each other. */
body[data-screen="si"] .nav-only-btn,
body[data-screen="sj"] .nav-only-btn{ display:none; }

.lang-bar{
  position:fixed; top:0; left:0; right:0; z-index:300;
  padding:calc(var(--safe-top) + 6px) 12px 6px;
  display:flex; justify-content:flex-end; align-items:center; gap:6px;
  background:linear-gradient(to bottom,rgba(2,3,8,.9),transparent);
  pointer-events:none;
}
.lang-bar > *{ pointer-events:all; }
.lang-select{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50px; padding:5px 12px;
  color:var(--dim); font-size:.7rem;
  font-family:'Hind Siliguri',sans-serif;
  cursor:pointer; outline:none;
  -webkit-appearance:none;
  letter-spacing:.5px;
}

.bw-hud{
  position:fixed; bottom:calc(var(--safe-bot) + 10px); right:12px;
  z-index:200; pointer-events:none;
  text-align:right; opacity:0; transition:opacity .5s;
}
.bw-hud.visible{ opacity:1; }
.bw-state{ font-size:.58rem; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:2px; }
.bw-hz{ font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:rgba(200,169,110,.5); }
.bw-bar{ width:60px; height:2px; background:rgba(255,255,255,.06); border-radius:1px; margin-left:auto; margin-top:4px; overflow:hidden; }
.bw-fill{ height:100%; background:linear-gradient(90deg,var(--accent),#fff); border-radius:1px; transition:width 2s ease; }

.overlay{ position:fixed; inset:0; z-index:500; background:var(--void); opacity:0; pointer-events:none; transition:opacity .55s ease; }
.overlay.on{ opacity:1; pointer-events:all; }

/* ─── Toast ─── */
#toast{
  position:fixed; bottom:calc(var(--safe-bot) + 16px); left:50%; z-index:600;
  transform:translate(-50%, 12px);
  background:rgba(10,12,20,.94); border:1px solid rgba(200,169,110,.3);
  color:var(--text); font-size:.78rem; letter-spacing:.3px;
  padding:10px 18px; border-radius:50px;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
  max-width:90vw; text-align:center;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ─── Back button used on Journal / About screens ─── */
.screen-topbar{ width:100%; display:flex; align-items:center; margin-bottom:18px; }