/* The stage covers the scene area: the 3D room and, over it, the interaction layer (targets, menus, speech). */
.age-stage-root { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.age-stage-root canvas { display: block; width: 100%; height: 100%; pointer-events: auto; transition: opacity 0.25s; }
.age-stage-root.stage-loading canvas { opacity: 0; }
/* The 3D stage fits any shape of window (its camera adapts), so it takes the whole page: not the
   painted scene's 46:25 frame, nor the 1440px cap, which left black bands above and below or at the sides. */
.rich-app-stage:has(.stage3d-on) { width: 100%; height: 100vh; height: 100dvh; justify-content: stretch; }
.rich-app-stage:has(.stage3d-on) > #scene-stage { flex: 1 1 auto; min-height: 0; }
.rich-app-stage:has(.stage3d-on) .rich-scene-shell { height: 100%; }
.rich-app-stage:has(.stage3d-on) .rich-scene-canvas { aspect-ratio: auto; height: 100%; }
.age-ui {
  --ui-ink: #f3e7cf;
  --ui-dim: #b9a98d;
  --ui-panel: rgba(18, 12, 24, 0.9);
  --ui-edge: #6b5a8e;
  --ui-hot: #ffcf6a;
  position: absolute; inset: 0; pointer-events: none;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  color: var(--ui-ink);
}
.age-ui > * { position: absolute; }

.age-target {
  display: none; padding: 2px 8px 2px 3px; border-radius: 3px; white-space: nowrap;
  background: var(--ui-panel); border: 1px solid var(--ui-edge); font-size: 14px;
  animation: age-bob 1.6s ease-in-out infinite;
}
.age-target.age-open { display: block; }
.age-mode {
  display: none; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 3px 9px; border-radius: 3px; white-space: nowrap;
  background: var(--ui-panel); border: 1px solid var(--ui-hot); font-size: 13px; pointer-events: none;
}
.age-mode.age-open { display: block; }
.age-closeup {
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: 90%; overflow: auto;
  box-sizing: border-box; padding: 10px 16px 14px; text-align: center; pointer-events: auto;
  background: radial-gradient(circle at 50% 40%, rgba(60, 40, 90, 0.92), var(--ui-panel) 70%);
  border: 1px solid var(--ui-edge); border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 12px 40px rgba(0, 0, 0, 0.6);
}
.age-closeup canvas { display: block; margin: 0 auto; image-rendering: pixelated; max-width: 100%; max-height: 46vh; }
.age-closeup-name { margin: 2px 0 6px; font-size: 22px; letter-spacing: 0.02em; color: var(--ui-hot); }
.age-closeup-text { margin-top: 8px; text-align: left; font-size: 16px; line-height: 1.4; }
.age-closeup-text p { margin: 0 0 0.5em; }
.age-closeup-text p:last-child { margin-bottom: 0; }
.age-bag { pointer-events: auto; cursor: pointer; padding: 0; } /* looks: .rich-floating-control (game.css) */
@keyframes age-bob { 50% { transform: translateY(-3px); } }
.age-key {
  display: inline-block; min-width: 1.3em; margin-right: 6px; padding: 0 3px; text-align: center;
  font: 600 11px/1.5 "SF Mono", Menlo, monospace; color: #1a1020; background: var(--ui-hot); border-radius: 2px;
}

.age-menu {
  display: none; min-width: 180px; max-width: 320px; padding: 6px; pointer-events: auto;
  background: var(--ui-panel); border: 1px solid var(--ui-edge); border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0, 0, 0, 0.5);
}
.age-menu.age-open { display: block; }
.age-menu--general { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); min-width: 260px; max-height: 80%; overflow: auto; }
.age-menu-title { padding: 4px 8px 2px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-dim); }
.age-menu-empty { padding: 2px 10px 6px; color: var(--ui-dim); font-style: italic; }
.age-menu-item {
  display: block; width: 100%; padding: 4px 10px 4px 22px; text-align: left; position: relative;
  font: inherit; font-size: 15px; color: inherit; background: none; border: 0; border-radius: 2px; cursor: pointer;
}
.age-menu-item.age-selected { background: rgba(255, 207, 106, 0.16); color: #fff; }
.age-menu-item.age-selected::before { content: "▸"; position: absolute; left: 8px; color: var(--ui-hot); }

.age-speech, .age-bark, .age-narration {
  background: var(--ui-panel); border: 1px solid var(--ui-edge); border-radius: 6px; pointer-events: auto;
  box-shadow: 0 0 0 1px #000, 0 6px 20px rgba(0, 0, 0, 0.45);
}
.age-speech { max-width: min(420px, 70%); max-height: 45%; overflow: auto; padding: 8px 12px; font-size: 15px; line-height: 1.35; }
.age-answer { display: flex; gap: 6px; margin-top: 8px; }
.age-answer input {
  flex: 1; min-width: 0; padding: 5px 8px; font: inherit; font-size: 15px; color: inherit;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--ui-edge); border-radius: 4px; outline: none;
}
.age-answer input:focus { border-color: var(--ui-hot); box-shadow: 0 0 0 2px rgba(255, 207, 106, 0.25); }
.age-answer button {
  padding: 4px 12px; font: inherit; font-size: 14px; color: #1a1020; background: var(--ui-hot);
  border: 0; border-radius: 4px; cursor: pointer;
}
.age-speech-name { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-hot); margin-bottom: 2px; }
.age-speech p, .age-narration p { margin: 0 0 0.5em; }
.age-speech p:last-child, .age-narration p:last-child { margin-bottom: 0; }
.age-bark { max-width: 240px; padding: 4px 9px; font-size: 14px; border-radius: 10px; transition: opacity 0.6s; }
.age-fade { opacity: 0; }
.age-narration {
  left: 50%; bottom: 72px; transform: translateX(-50%); width: min(640px, calc(100% - 32px));
  max-height: 38%; overflow: auto; padding: 10px 14px; font-size: 16px; line-height: 1.4;
}
.age-hint {
  right: 18px; bottom: 82px; font: 600 11px/1.5 "SF Mono", Menlo, monospace; padding: 1px 6px;
  color: #1a1020; background: var(--ui-hot); border-radius: 2px; animation: age-bob 1.2s ease-in-out infinite;
}