/* App shell layout — named-area CSS grid, mode variants via classes on #app. */

#app {
  display: grid;
  height: 100vh;
  grid-template-columns: var(--lesson-w) minmax(0, 1fr) var(--controls-w);
  grid-template-rows: var(--header-h) minmax(0, 1fr) var(--status-h);
  grid-template-areas:
    "header header header"
    "lesson stage  controls"
    "lesson status status";
}

#app.lesson-closed { grid-template-columns: 0 minmax(0, 1fr) var(--controls-w); }
#app.lesson-closed #lessonArea { display: none; }

#app.quiz-full {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "lesson" "status";
}
#app.quiz-full #stageArea, #app.quiz-full #controlsArea { display: none; }

/* ---- Header ---- */
#header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--hairline);
}

.brand { display: flex; align-items: baseline; gap: 8px; margin-right: 8px; }
.brand .brand-name {
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
}
.brand .brand-name em { color: var(--ice); font-style: normal; }
.brand a.brand-name:hover { color: var(--ice); }
.brand a.brand-name:hover em { color: var(--ink); }
.brand .brand-sub {
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.header-spacer { flex: 1; }
.header-group { display: flex; align-items: center; gap: 6px; }
.btn.nav-active { border-color: var(--ice); color: var(--ice); }

/* ---- Stage (test section) ---- */
#stageArea {
  grid-area: stage;
  position: relative;
  background: var(--bg-inset);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
#fieldCanvas, #overlayCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#overlayCanvas { pointer-events: none; }

#stageHint {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  color: var(--ink-faint);
  font-size: 0.78rem;
  background: #0b0f15c0;
  padding: 3px 12px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
}

.stage-banner {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--warn);
  color: var(--warn);
  padding: 6px 16px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  z-index: 5;
}

/* ---- Side panels ---- */
#lessonArea {
  grid-area: lesson;
  background: var(--bg-panel);
  border-right: 1px solid var(--hairline);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#controlsArea {
  grid-area: controls;
  background: var(--bg-panel);
  border-left: 1px solid var(--hairline);
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Status bar ---- */
#statusBar {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  background: var(--bg-panel);
  border-top: 1px solid var(--hairline);
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
}
#statusBar .status-spacer { flex: 1; }
#statusBar .chip-dev { color: var(--warn); }

/* ---- Boot splash ---- */
#bootCheck {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  z-index: 100;
}
#bootCheck .boot-title { font-size: 1.4rem; letter-spacing: 0.2em; font-weight: 700; }
#bootCheck .boot-title em { color: var(--ice); font-style: normal; }
#bootCheck .boot-msg { color: var(--ink-dim); font-size: 0.85rem; max-width: 460px; text-align: center; }
#bootCheck .boot-err { color: var(--bad); }

/* ---- Modal root ---- */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: #05070ac0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-card {
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  max-width: min(860px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 18px 60px #00000090;
}

/* ---- Responsive ---- */
@media (max-width: 1250px) {
  :root { --lesson-w: 330px; --controls-w: 270px; }
}
@media (max-width: 1050px) {
  #app { grid-template-columns: 0 minmax(0, 1fr) var(--controls-w); }
  #lessonArea {
    position: fixed;
    left: 0; top: var(--header-h); bottom: var(--status-h);
    width: min(380px, 88vw);
    z-index: 20;
    box-shadow: 12px 0 40px #00000070;
  }
  #app.lesson-closed #lessonArea { display: none; }
}