/* ==========================================================================
   REDESIGN SYSTEM: PURPLE LIGHTING, REVERTED OUTLINES & STATIC VIEW CONTROL
   ========================================================================== */

:root {
  --screen: #ff9ebb;
  --tv-edge: rgba(255, 158, 187, 0.25);
}

/* --------------------------------------------------------------------------
   1. LOADING / TRAINING SCREEN HINT
   -------------------------------------------------------------------------- */
.boot-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .03em;
  margin: -10px 0 0;
  padding-left: 1.4em;
}

.boot-hint strong {
  color: var(--text);
  font-weight: 400;
}

@media (width<=480px) {
  .boot-hint {
    font-size: 11px;
    padding-left: 1.2em;
  }
}

/* --------------------------------------------------------------------------
   2. STATIC VERSION BUTTON (bottom-right, flush with the main nav)
   The main index is pinned to the bottom-left in the room. This control
   mirrors its height and sits on the same baseline, on the right edge.
   -------------------------------------------------------------------------- */
.static-view-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: auto;
  z-index: 6;
  background: var(--scan), var(--tv-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--tv-edge);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-glow);
  padding: 5px;
  transition: opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.2,1);
}

body.opening .static-view-container {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}

.static-view-btn {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--tv-radius) - 4px);
  padding: 9px 15px;
  color: #d9cdd0;
  font: 12px "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s, background-color .3s;
}

.static-view-btn:hover {
  background: #ff9ebb14;
  color: #fff;
}

.static-view-btn:focus-visible {
  outline: 2px solid #ff9ebb;
  outline-offset: 2px;
}

@media (width<=700px) {
  /* Leave room for the static control. The nav stays on the left and lets
     its items scroll sideways on very narrow screens. */
  html:not(.flat) .index {
    right: auto;
    max-width: calc(100vw - 158px);
    overflow-x: auto;
    gap: 5px;
    padding: 5px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html:not(.flat) .index::-webkit-scrollbar {
    display: none;
  }

  /* Keep each label at its natural width instead of squeezing five words
     into the same narrow bar. Narrow phones can still swipe the index. */
  html:not(.flat) .index button {
    flex: 0 0 auto;
  }

  .static-view-container {
    left: auto;
    right: 12px;
    bottom: 12px;
    border-radius: 16px;
  }

  .static-view-btn {
    border-radius: 11px;
    padding: 9px 12px;
    font-size: 9.5px;
  }

  .drag-hint {
    bottom: 96px;
  }
}

@media (width<=480px) {
  html:not(.flat) .index {
    max-width: calc(100vw - 150px);
  }

  .static-view-btn {
    padding: 8px 10px;
    font-size: 9px;
  }
}

/* --------------------------------------------------------------------------
   3. STATIC MODE HEADER (Return to 3D Room)
   -------------------------------------------------------------------------- */
.static-return-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(15, 18, 32, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 158, 187, 0.25);
  padding: 10px 24px;
}

.static-return-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.static-badge {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  color: #b9b2c4;
  letter-spacing: 0.05em;
}

.static-return-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ff9ebb;
  color: #0f1220;
  border: none;
  border-radius: 18px;
  padding: 6px 16px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.static-return-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 158, 187, 0.5);
}

/* --------------------------------------------------------------------------
   4. CV PLACEHOLDERS
   The old resume files have been removed. These controls are inert until a
   new CV is uploaded, so they never start a download or a navigation.
   -------------------------------------------------------------------------- */
.pw.cv[data-cv],
.board .cv[data-cv] {
  border: 0;
  font: inherit;
  text-align: left;
  cursor: not-allowed;
}

.pw.cv[data-cv] {
  color: #17121c;
  background: #ff9ebb;
  opacity: .72;
}

.pw.cv[data-cv]:hover,
.pw.cv[data-cv]:active {
  background: #ff9ebb;
  transform: none;
}

.board .cv[data-cv] {
  color: #1b1f33;
  background: #ff9ebb;
  opacity: .72;
}

.board .cv[data-cv]:hover {
  background: #ff9ebb;
}

.pw.cv[data-cv]:focus-visible,
.board .cv[data-cv]:focus-visible {
  outline: 2px solid #ff9ebb;
  outline-offset: 2px;
}


/* ---- Now Playing page: custom art + audio controls (moved off the room's top-right) ---- */
.music{grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-content:center;align-items:center;gap:.7em 1em;padding:.75em 1.1em}
.music .art{width:5.6em;height:7.5em;border-radius:.3em;object-fit:cover}
.music h3{font-size:1.6em}
.music .artist:empty{display:none}
.music .vol{grid-column:1/-1;flex:none;width:100%;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.55em .6em}
.music .vol[hidden]{display:flex}
.music .vol .track{flex:1 1 0;min-width:0;height:.3em}
.music .vol .pct{flex:none;min-width:3.2em;text-align:right;font:700 .62em "Space Mono",ui-monospace,monospace;color:#f4e7e2}
.music .vol .presets{flex:1 0 100%;display:flex;gap:.45em}
.music .vol .presets button{flex:1;width:auto;height:auto;padding:.4em 0;font:700 .6em "Space Mono",ui-monospace,monospace;letter-spacing:.06em;color:#b9b2c4;background:#ffffff1f;border:1px solid #ffffff33;border-radius:.4em;cursor:pointer}
.music .vol .presets button[data-active]{color:#08130c;background:#39ff88;border-color:#39ff88}