/* ── LAYOUT ──────────────────────────────────────────────────
   App-workbench grid, all screen layouts, intro/door modes
──────────────────────────────────────────────────────────── */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: var(--mono); color: var(--parch); }

/* ═══════════════════════════════════════════════════════════
   DOOR SCREEN
═══════════════════════════════════════════════════════════ */
#door-screen {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: radial-gradient(ellipse 80% 80% at 50% 60%, #110d08 0%, #060402 100%);
  transition: opacity 0.6s ease;
}
#door-screen.gone {
  opacity: 0;
  pointer-events: none;
}
#door-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The sign */
#door-sign {
  position: relative;
  z-index: 10;
  background: rgba(6,4,1,.9);
  border: 2.5px solid rgba(200,144,58,.8);
  padding: 16px 36px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  border-radius: 3px;
  box-shadow: 0 4px 32px rgba(0,0,0,.85);
  pointer-events: none;
  white-space: nowrap;
}
#door-sign span {
  display: block;
  font-size: 20px;
  color: rgba(245,222,155,.98);
  line-height: 1.8;
  text-shadow: 0 1px 6px rgba(0,0,0,1);
}

/* (menu/panel base styles moved to positioned block above) */
#door-menu.hidden,
.door-panel.hidden { display: none; }

/* Door bg — fade in once background image is applied */
#door-bg {
  transition: opacity .8s ease;
  opacity: 0;
}
#door-bg.loaded { opacity: 1; }

/* Darkening overlay sits on top of door-bg but under content */
#door-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 100% 90% at 50% 55%,
    rgba(4,2,0,.45) 0%,
    rgba(4,2,0,.75) 55%,
    rgba(2,1,0,.92) 100%);
  pointer-events: none;
}

/* ── Positioned elements — all sit above the overlay (z:10) ── */

/* "Assistant Wanted" sign — upper center, over the door arch */
#door-sign {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  white-space: nowrap;
}

/* Menu + panels — right wall, vertically centered */
#door-menu,
.door-panel {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Two hanging signs stacked on the right wall */
.door-signs-row {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* Save list scrollable area */
#door-save-list {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#door-save-list::-webkit-scrollbar { width: 3px; }
#door-save-list::-webkit-scrollbar-thumb { background: rgba(200,144,58,.2); }

/* ═══════════════════════════════════════════════════════════
   APP WORKBENCH GRID
   Navigation lives inside the scene (books on shelf).
   Header / full-width scene / footer dialogue bar.
═══════════════════════════════════════════════════════════ */
#app-workbench {
  display: grid;
  grid-template-areas:
    "header"
    "active"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr 160px;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* Sidebar is retired — navigation is now books on the shelf */
#library-shelf { display: none !important; }

/* Intro/door mode — full screen, no chrome */
body.intro-mode #app-workbench {
  grid-template-rows: 0 1fr 0;
}
body.intro-mode #ui-header    { display: none; }
body.intro-mode #dialogue-bar { display: none; }

/* ── HEADER ── */
#ui-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.2);
  min-height: 44px;
}

/* ── SCENE CONTAINER ── */
#scene-container {
  grid-area: active;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
#scene-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0604;
}
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#scene-dim {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  transition: background .3s;
  background: transparent;
}
#scene-dim.narrative { background: rgba(0,0,0,.3); }
#scene-dim.task      { background: rgba(0,0,0,.55); }

/* Lesson screen overlays the scene area */
#lesson-screen {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(8,5,2,.98);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#lesson-screen.open { display: flex; }

/* Room navigation arrows */
#nav-left, #nav-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(200,144,58,.7);
  background: rgba(6,4,2,.7);
  border: 1px solid rgba(200,144,58,.25);
  padding: 8px 10px;
  border-radius: 2px;
  user-select: none;
}
#nav-left  { left: 8px; }
#nav-right { right: 8px; }
#nav-left.visible, #nav-right.visible { opacity: 1; pointer-events: all; }

/* ── LIBRARY SHELF ── */
#library-shelf {
  grid-area: library;
  background: var(--bg2);
  border-left: 2px solid var(--amber);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  box-shadow: inset 10px 0 20px rgba(0,0,0,0.3);
}
#library-shelf::-webkit-scrollbar { width: 3px; }
#library-shelf::-webkit-scrollbar-thumb { background: rgba(200,144,58,.2); }
.shelf-spacer { flex: 1; min-height: 20px; }

/* ── DIALOGUE BAR (grid footer) ── */
#dialogue-bar {
  grid-area: footer;
  height: 160px;
  background: linear-gradient(180deg, rgba(6,4,2,0) 0%, rgba(6,4,2,.97) 18%);
  display: flex;
  align-items: center;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
  border-top: 1px solid rgba(200,144,58,.1);
}
#dialogue-bar.open {
  transform: translateY(0);
  pointer-events: all;
}

/* ── FULL-SCREEN OVERLAY PANELS ── */
.panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(8,5,2,.98);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.panel-overlay.open { display: flex; }