/* =========================================================
   afterlife?  —  interface styles
   Palette is deliberately narrow: void, ash, moon, and a single
   warm ember that only appears where the story turns.
   ========================================================= */

:root{
  --void:      #04060a;
  --ash:       #0b1016;
  --smoke:     #161d26;
  --moon:      #cdd6e0;
  --moon-dim:  #7d8996;
  --ember:     #ff7a45;
  --glass:     rgba(18, 24, 32, 0.42);
  --edge:      rgba(205, 214, 224, 0.14);
  --edge-lit:  rgba(205, 214, 224, 0.38);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; height:100%;
  background: var(--void);
  color: var(--moon);
  font-family: var(--sans);
  overflow: hidden;
  overscroll-behavior: none;
}

body{ cursor: default; }
body.pointer-locked{ cursor: none; }

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

/* ---------- cinematic letterbox ---------- */
.bar{
  position: fixed; left:0; right:0; height: 0;
  background:#000; z-index: 40; pointer-events:none;
  transition: height 1.6s var(--ease);
}
.bar-top{ top:0; } .bar-bottom{ bottom:0; }
body.cinema .bar{ height: 7.2vh; }

/* ---------- full-screen screens ---------- */
.screen{
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 6vh 6vw;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(22,29,38,0.85) 0%, rgba(4,6,10,0.98) 62%),
    var(--void);
  opacity: 1;
  transition: opacity 1.2s var(--ease);
}
.screen[hidden]{ display:none; }
.screen.fading{ opacity: 0; pointer-events: none; }

.loader-inner, .endcard-inner{
  width: min(58ch, 100%);
  text-align: center;
}

/* ---------- wordmark ---------- */
.wordmark{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 13vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0 0 0.4em;
  color: var(--moon);
  text-shadow: 0 0 60px rgba(150,180,220,0.22);
  animation: breathe 7s ease-in-out infinite;
}
.wordmark .q{
  color: var(--moon-dim);
  display:inline-block;
  animation: flickerq 6s steps(1) infinite;
}
@keyframes breathe{
  0%,100%{ opacity: .92; letter-spacing: .02em; }
  50%    { opacity: 1;   letter-spacing: .045em; }
}
@keyframes flickerq{
  0%,88%,100%{ opacity:.55 } 90%{ opacity:.08 } 93%{ opacity:.7 } 95%{ opacity:.15 }
}

.tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  color: var(--moon-dim);
  margin: 0 0 3.2em;
  line-height: 1.5;
}

/* ---------- progress ---------- */
.meter{
  height: 1px; width: 100%;
  background: rgba(205,214,224,0.12);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.meter-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, rgba(205,214,224,0.3), var(--moon));
  box-shadow: 0 0 14px rgba(205,214,224,0.6);
  transition: width .5s var(--ease);
}
.loader-status{
  font-size: .74rem; font-weight: 300;
  letter-spacing: .12em;
  color: var(--moon-dim);
  min-height: 1.2em;
  margin: 0 0 2.6rem;
}

/* ---------- buttons ---------- */
.btn{
  font-family: var(--sans);
  font-size: .82rem; font-weight: 400;
  letter-spacing: .16em;
  padding: 1rem 2.6rem;
  border-radius: 2px;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--moon);
  cursor: pointer;
  transition: background .5s var(--ease), border-color .5s var(--ease),
              color .5s var(--ease), letter-spacing .5s var(--ease), opacity .4s;
}
.btn:hover:not(:disabled){
  border-color: var(--edge-lit);
  background: rgba(205,214,224,0.05);
  letter-spacing: .22em;
}
.btn:disabled{ opacity:.28; cursor: not-allowed; }
.btn:focus-visible{ outline: 1px solid var(--moon); outline-offset: 4px; }
.btn-primary{ border-color: var(--edge-lit); }
.btn-ghost{ border-color: transparent; color: var(--moon-dim); }
.btn-ghost:hover{ color: var(--moon); }

.fine-print{
  margin-top: 2.4rem;
  font-size: .7rem; font-weight: 300;
  color: rgba(125,137,150,0.7);
  letter-spacing: .06em;
  line-height: 1.7;
}

/* ---------- HUD ---------- */
.hud{
  position: fixed; inset: 0; z-index: 45;
  pointer-events: none;
}
.hud[hidden]{ display:none; }

.chapter-mark{
  position: absolute; left: 4vw; bottom: 12vh;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  font-style: italic;
  color: var(--moon);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2s var(--ease), transform 2s var(--ease);
  text-shadow: 0 2px 30px rgba(0,0,0,.9);
}
.chapter-mark.show{ opacity:.85; transform: translateY(0); }

.subtitle{
  position: absolute; left: 50%; bottom: 13.5vh;
  transform: translateX(-50%);
  width: min(46ch, 84vw);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.5vw, 1.55rem);
  line-height: 1.55;
  color: var(--moon);
  text-shadow: 0 2px 26px rgba(0,0,0,.95);
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.subtitle.show{ opacity: .94; }

.prompt{
  position: absolute; right: 4vw; bottom: 12vh;
  font-size: .7rem; letter-spacing: .18em;
  color: var(--moon-dim);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  text-shadow: 0 2px 20px #000;
}
.prompt.show{ opacity: .7; }

/* ---------- toolbar ---------- */
.toolbar{
  position: fixed; top: max(2.2vh, 14px); right: max(2.2vw, 14px);
  z-index: 55; display:flex; gap: 8px;
}
.toolbar[hidden]{ display:none; }

.icon-btn{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  cursor: pointer;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.icon-btn:hover{ border-color: var(--edge-lit); }
.icon-btn:focus-visible{ outline: 1px solid var(--moon); outline-offset: 3px; }

.skip-btn{
  height: 38px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 400; letter-spacing: .16em;
  color: var(--moon-dim);
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  cursor: pointer;
  transition: color .4s var(--ease), border-color .4s var(--ease), opacity .6s var(--ease);
}
.skip-btn:hover{ color: var(--moon); border-color: var(--edge-lit); }
.skip-btn:focus-visible{ outline: 1px solid var(--moon); outline-offset: 3px; }
.skip-btn[disabled]{ opacity: 0; pointer-events: none; }

@media (max-width: 640px){ .skip-btn{ padding: 0 11px; font-size: .62rem; } }

.icon-sound, .icon-gear{ display:block; width:16px; height:16px; opacity:.85; }
.icon-sound{
  background: var(--moon);
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 2v2a8 8 0 0 1 0 16v2a10 10 0 0 0 0-20z'/></svg>");
          mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 2v2a8 8 0 0 1 0 16v2a10 10 0 0 0 0-20z'/></svg>");
}
.icon-btn[aria-pressed="false"] .icon-sound{ opacity:.3; }
.icon-gear{
  background: var(--moon);
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4a7 7 0 0 0-.1-1.2l2.1-1.6-2-3.4-2.5 1a7.3 7.3 0 0 0-2-1.2L16 3H8l-.5 2.6a7.3 7.3 0 0 0-2 1.2l-2.5-1-2 3.4L3.1 11a7 7 0 0 0 0 2.4L1 15l2 3.4 2.5-1c.6.5 1.3.9 2 1.2L8 21h8l.5-2.4c.7-.3 1.4-.7 2-1.2l2.5 1 2-3.4-2.1-1.6c.1-.4.1-.8.1-1.4z'/></svg>");
          mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4a7 7 0 0 0-.1-1.2l2.1-1.6-2-3.4-2.5 1a7.3 7.3 0 0 0-2-1.2L16 3H8l-.5 2.6a7.3 7.3 0 0 0-2 1.2l-2.5-1-2 3.4L3.1 11a7 7 0 0 0 0 2.4L1 15l2 3.4 2.5-1c.6.5 1.3.9 2 1.2L8 21h8l.5-2.4c.7-.3 1.4-.7 2-1.2l2.5 1 2-3.4-2.1-1.6c.1-.4.1-.8.1-1.4z'/></svg>");
}

/* ---------- glass panel ---------- */
.panel{
  position: fixed; z-index: 70;
  top: 50%; right: max(2.2vw, 14px);
  transform: translateY(-50%);
  width: min(360px, 92vw);
  padding: 28px 26px 22px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--glass);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.panel[hidden]{ display:none; }

.panel-title{
  font-family: var(--serif); font-weight: 300; font-size: 1.5rem;
  margin: 0 0 1.6rem; color: var(--moon);
}
.field{ margin-bottom: 1.35rem; }
.field.row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.field label{
  display:block; font-size:.72rem; letter-spacing:.1em;
  color: var(--moon-dim); margin-bottom:.55rem;
}
.field.row label{ margin-bottom:0; }
.hint{ font-size:.66rem; color: rgba(125,137,150,.65); margin:.5rem 0 0; }

.segmented{ display:flex; border:1px solid var(--edge); border-radius:2px; overflow:hidden; }
.segmented button{
  flex:1; padding:.6rem 0; font-size:.66rem; letter-spacing:.06em;
  background:transparent; border:0; color: var(--moon-dim); cursor:pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.segmented button + button{ border-left:1px solid var(--edge); }
.segmented button[aria-checked="true"]{ background: rgba(205,214,224,.1); color: var(--moon); }

input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:1px;
  background: rgba(205,214,224,.2); outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background: var(--moon); cursor:pointer; box-shadow:0 0 10px rgba(205,214,224,.7);
}
input[type="range"]::-moz-range-thumb{
  width:11px; height:11px; border:0; border-radius:50%; background: var(--moon); cursor:pointer;
}
input[type="checkbox"]{ accent-color: var(--moon); width:15px; height:15px; cursor:pointer; }

.panel-actions{ display:flex; flex-direction:column; gap:8px; margin-top: 1.8rem; }
.panel-actions .btn{ padding:.8rem 1rem; font-size:.74rem; }
.keys{
  margin: 1.4rem 0 0; font-size:.62rem; line-height:1.9;
  color: rgba(125,137,150,.6); letter-spacing:.06em;
}

/* ---------- end card ---------- */
.end-eyebrow{
  font-size:.7rem; letter-spacing:.24em; color: var(--moon-dim); margin:0 0 1rem;
}
.end-title{
  font-family: var(--serif); font-weight:300;
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  margin:0 0 .5em; line-height:1;
}
.end-line{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: var(--moon-dim); margin: 0 0 3rem; line-height:1.6;
}
.collection{ margin-bottom: 2.6rem; }
.collection-label{ font-size:.68rem; letter-spacing:.18em; color: var(--moon-dim); margin:0 0 .9rem; }
.collection-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.collection-list li{
  font-size:.68rem; letter-spacing:.14em;
  padding:.45rem .9rem; border:1px solid var(--edge); border-radius:2px;
  color: rgba(125,137,150,.55);
}
.collection-list li.found{ color: var(--moon); border-color: var(--edge-lit); }
.end-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- tint the end card by realm ---------- */
body[data-realm="heaven"]   #endcard{ background: radial-gradient(ellipse at 50% 45%, rgba(58,48,36,.7), rgba(6,6,8,.98) 65%), var(--void); }
body[data-realm="hell"]     #endcard{ background: radial-gradient(ellipse at 50% 65%, rgba(52,14,6,.75), rgba(4,3,3,.99) 62%), var(--void); }
body[data-realm="darkness"] #endcard{ background: #000; }
body[data-realm="rebirth"]  #endcard{ background: radial-gradient(ellipse at 50% 55%, rgba(20,52,44,.65), rgba(4,7,7,.98) 65%), var(--void); }
body[data-realm="unknown"]  #endcard{ background: radial-gradient(ellipse at 50% 50%, rgba(28,26,60,.7), rgba(4,4,10,.98) 65%), var(--void); }

/* ---------- responsive ---------- */
@media (max-width: 640px){
  .panel{ top:auto; bottom:0; right:0; left:0; width:100%; transform:none;
          border-radius: 3px 3px 0 0; max-height: 82vh; overflow-y:auto; }
  .subtitle{ bottom: 16vh; }
  .chapter-mark{ bottom: 20vh; }
  .prompt{ left:4vw; right:auto; bottom: 8vh; }
}

@media (prefers-reduced-motion: reduce){
  .wordmark{ animation: none; }
  .wordmark .q{ animation: none; opacity:.55; }
  *{ transition-duration: .01ms !important; }
}

/* =========================================================
   GAME SHELL — menu, pause, reticle, title cards, photo mode
   Added in the release pass. Everything above stays as-is.
   ========================================================= */

/* ---------- screens that sit over live 3D ---------- */
.screen--live{
  background:
    linear-gradient(100deg, rgba(4,6,10,.94) 0%, rgba(4,6,10,.80) 38%, rgba(4,6,10,.18) 78%, rgba(4,6,10,.05) 100%);
  place-items: stretch;
  padding: 0;
}
.screen--dim{ background: rgba(3,5,9,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- main menu ---------- */
.menu-grid{
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-content: center;
  padding: 8vh 6vw;
  max-width: 640px;
}
.menu-head{ align-self: end; padding-bottom: 3.5rem; }
.wordmark--menu{
  font-size: clamp(3rem, 10vw, 6.4rem);
  margin: 0 0 .25em;
  text-align: left;
  animation-duration: 9s;
}
.tagline--menu{ text-align: left; margin: 0; font-size: clamp(.95rem, 2vw, 1.15rem); }

.menu-nav{ display: flex; flex-direction: column; gap: 2px; }
.menu-item{
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 0 .85rem 1.6rem;
  background: none; border: 0; border-left: 1px solid transparent;
  color: var(--moon-dim);
  text-align: left; cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              padding-left .35s var(--ease), opacity .35s var(--ease);
}
.menu-item span{
  font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  font-weight: 300; line-height: 1; color: inherit;
}
.menu-item em{
  font-style: normal; font-size: .66rem; letter-spacing: .14em;
  color: rgba(125,137,150,.55); transition: color .35s var(--ease);
}
.menu-item:hover, .menu-item:focus-visible, .menu-item.on{
  color: var(--moon); border-left-color: var(--moon); padding-left: 2.1rem; outline: none;
}
.menu-item:hover em, .menu-item.on em{ color: var(--moon-dim); }
.menu-item[disabled]{ opacity: .3; cursor: not-allowed; }
.menu-item[hidden]{ display: none; }

.menu-foot{
  align-self: end; margin: 0;
  font-size: .66rem; letter-spacing: .1em; color: rgba(125,137,150,.5);
}

/* ---------- pause ---------- */
.pause-inner{ width: min(420px, 88vw); margin: auto; }
.pause-eyebrow{
  font-family: var(--serif); font-style: italic;
  font-size: 1.5rem; color: var(--moon-dim); margin: 0 0 2rem;
}
.menu-nav--pause .menu-item span{ font-size: clamp(1.2rem, 3vw, 1.55rem); }

/* ---------- sheets (chapters, endings) ---------- */
.sheet{
  width: min(720px, 92vw); margin: auto;
  padding: 6vh 5vw; text-align: left;
}
.sheet-title{ font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 .3em; }
.sheet-sub{ font-size: .78rem; letter-spacing: .06em; color: var(--moon-dim); margin: 0 0 2.6rem; }

.chapter-list{ list-style: none; margin: 0 0 2.4rem; padding: 0; }
.chapter-list li{ border-top: 1px solid var(--edge); }
.chapter-list li:last-child{ border-bottom: 1px solid var(--edge); }
.chapter-list button{
  width: 100%; display: flex; align-items: baseline; gap: 1.2rem;
  padding: 1rem .4rem; background: none; border: 0; cursor: pointer;
  color: var(--moon-dim); text-align: left;
  transition: color .3s var(--ease), background .3s var(--ease), padding-left .3s var(--ease);
}
.chapter-list button:hover:not([disabled]){ color: var(--moon); background: rgba(205,214,224,.04); padding-left: 1rem; }
.chapter-list button[disabled]{ opacity: .32; cursor: not-allowed; }
.chapter-list .ch-num{ font-size: .68rem; letter-spacing: .18em; min-width: 3.2em; color: rgba(125,137,150,.6); }
.chapter-list .ch-name{ font-family: var(--serif); font-size: 1.25rem; flex: 1; }
.chapter-list .ch-note{ font-size: .64rem; letter-spacing: .12em; color: rgba(125,137,150,.5); }

.ending-grid{
  list-style: none; margin: 0 0 2.4rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.ending-grid li{
  border: 1px solid var(--edge); border-radius: 2px;
  padding: 1.3rem 1.2rem; min-height: 140px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(12,16,22,.5);
}
.ending-grid li.found{ border-color: var(--edge-lit); }
.ending-grid .eg-name{ font-family: var(--serif); font-size: 1.3rem; margin: 0 0 .4rem; }
.ending-grid .eg-line{ font-size: .68rem; line-height: 1.6; color: var(--moon-dim); margin: 0; }
.ending-grid li:not(.found) .eg-name{ color: rgba(125,137,150,.45); }
.ending-grid li.found[data-r="heaven"]  { background: linear-gradient(160deg, rgba(70,58,40,.55), rgba(12,16,22,.5)); }
.ending-grid li.found[data-r="hell"]    { background: linear-gradient(160deg, rgba(64,18,8,.55), rgba(12,16,22,.5)); }
.ending-grid li.found[data-r="darkness"]{ background: linear-gradient(160deg, rgba(10,12,16,.9), rgba(4,5,8,.9)); }
.ending-grid li.found[data-r="rebirth"] { background: linear-gradient(160deg, rgba(16,60,52,.5), rgba(12,16,22,.5)); }
.ending-grid li.found[data-r="unknown"] { background: linear-gradient(160deg, rgba(36,32,74,.55), rgba(12,16,22,.5)); }

/* ---------- cinematic title card ---------- */
.titlecard{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center; width: min(46ch, 84vw);
  opacity: 0; pointer-events: none;
  transition: opacity 1.8s var(--ease);
}
.titlecard.show{ opacity: 1; }
.titlecard-num{
  font-size: .68rem; letter-spacing: .42em; margin: 0 0 1.1rem;
  color: var(--moon-dim); text-indent: .42em;
}
.titlecard-name{
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(2.2rem, 7vw, 4rem); margin: 0 0 1.4rem;
  color: var(--moon); text-shadow: 0 2px 50px rgba(0,0,0,.95);
}
.titlecard-rule{
  height: 1px; width: 0; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--moon-dim), transparent);
}
.titlecard.show .titlecard-rule{ width: 68%; transition: width 2.8s var(--ease) .3s; }

/* ---------- reticle + hold ring ---------- */
.reticle{
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  opacity: 0; transition: opacity .4s var(--ease);
}
.reticle.show{ opacity: .9; }
.reticle-ring{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track{ fill: none; stroke: rgba(205,214,224,.16); stroke-width: 1.5; }
.ring-fill{
  fill: none; stroke: var(--moon); stroke-width: 1.5;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  filter: drop-shadow(0 0 4px rgba(205,214,224,.7));
}
.reticle-dot{
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%; background: var(--moon);
  box-shadow: 0 0 6px rgba(0,0,0,.9);
  transition: transform .3s var(--ease);
}
.reticle.active .reticle-dot{ transform: scale(2.2); }

.interact-label{
  position: absolute; left: 50%; top: calc(50% + 42px);
  transform: translateX(-50%);
  font-size: .7rem; letter-spacing: .18em;
  color: var(--moon); text-shadow: 0 2px 18px #000;
  opacity: 0; transition: opacity .35s var(--ease);
  white-space: nowrap; pointer-events: none;
}
.interact-label.show{ opacity: .9; }

/* ---------- objective line ---------- */
.objective{
  position: absolute; left: 4vw; top: 12vh;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: var(--moon); opacity: 0;
  text-shadow: 0 2px 24px #000;
  transition: opacity 1.2s var(--ease);
  max-width: 30ch;
}
.objective.show{ opacity: .8; }

/* ---------- settings tabs ---------- */
.tabs{ display: flex; gap: 0; margin-bottom: 1.6rem; border-bottom: 1px solid var(--edge); }
.tabs button{
  flex: 1; padding: .6rem 0 .7rem; background: none; border: 0;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  font-size: .68rem; letter-spacing: .12em; color: var(--moon-dim); cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.tabs button.on{ color: var(--moon); border-bottom-color: var(--moon); }
.tab-body[hidden]{ display: none; }
.field label b{ font-weight: 400; color: var(--moon); float: right; }

select{
  width: 100%; padding: .5rem .6rem; font-family: var(--sans); font-size: .72rem;
  background: rgba(10,14,20,.9); color: var(--moon);
  border: 1px solid var(--edge); border-radius: 2px; cursor: pointer;
}

/* ---------- toolbar icons added in this pass ---------- */
.icon-cam, .icon-pause{ display: block; width: 16px; height: 16px; opacity: .85; background: var(--moon); }
.icon-cam{
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3l-1.5 2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.5L15 3H9zm3 5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z'/></svg>");
          mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3l-1.5 2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.5L15 3H9zm3 5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z'/></svg>");
}
.icon-pause{
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h4v16H7zM13 4h4v16h-4z'/></svg>");
          mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h4v16H7zM13 4h4v16h-4z'/></svg>");
}

/* ---------- photo mode ---------- */
.photobar{
  position: fixed; left: 50%; bottom: max(3vh, 18px);
  transform: translateX(-50%);
  z-index: 65;
  display: flex; align-items: flex-end; gap: 18px;
  padding: 16px 20px;
  border: 1px solid var(--edge); border-radius: 3px;
  background: var(--glass);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  box-shadow: 0 24px 70px rgba(0,0,0,.7);
  max-width: 94vw; flex-wrap: wrap; justify-content: center;
}
.photobar[hidden]{ display: none; }
.photo-group{ min-width: 120px; }
.photo-group label{ display: block; font-size: .64rem; letter-spacing: .12em; color: var(--moon-dim); margin-bottom: .5rem; }
.photo-group label b{ font-weight: 400; color: var(--moon); float: right; }
.photobar .btn{ padding: .62rem 1.3rem; font-size: .7rem; }
body.photo .hud, body.photo .toolbar{ opacity: 0; pointer-events: none; }
body.photo .bar{ height: 0; }

/* ---------- toast ---------- */
.toast{
  position: fixed; left: 50%; bottom: 14vh; transform: translateX(-50%) translateY(8px);
  z-index: 80; padding: .75rem 1.4rem;
  border: 1px solid var(--edge); border-radius: 2px;
  background: var(--glass); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: .7rem; letter-spacing: .12em; color: var(--moon);
  opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.toast[hidden]{ display: none; }
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- loader tip ---------- */
.loader-tip{
  margin: 2.4rem auto 0; max-width: 44ch;
  font-family: var(--serif); font-style: italic;
  font-size: .95rem; line-height: 1.6; color: rgba(125,137,150,.7);
  min-height: 3em;
}

.end-stat{ font-size: .68rem; letter-spacing: .14em; color: var(--moon-dim); margin: -1.6rem 0 2.6rem; }

@media (max-width: 640px){
  .menu-grid{ padding: 6vh 8vw; }
  .photobar{ gap: 12px; padding: 12px 14px; }
  .photo-group{ min-width: 96px; }
  .objective{ top: 14vh; font-size: .9rem; }
}


/* ---------- desktop build only ---------- */
.icon-expand{ display:block; width:16px; height:16px; opacity:.85; background: var(--moon);
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm14 0h2v6h-6v-2h4v-4z'/></svg>");
          mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm14 0h2v6h-6v-2h4v-4z'/></svg>");
}
#buildtag{ margin-left: .8em; opacity: .6; }