/* Story pieces: conversations, the Guide, popups, reveals, the opening,
   room actions and the Inventory. Values come from the Canvas story screens. */

/* ---------- conversations ---------- */
@keyframes wordIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.wd { opacity: 0; display: inline; animation: wordIn .25s ease forwards; }
.dlg-shown .wd, .reduce-motion .wd { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wd { animation: none; opacity: 1; } }

.convo { position: absolute; left: 16px; right: 16px; z-index: 30; display: flex; flex-direction: column; gap: 10px; font-family: var(--f-body); }
.convo-guide { bottom: calc(90px + var(--safe-bottom)); }
.dlg-box {
  display: block; width: 100%; text-align: left; cursor: pointer; padding: 12px 16px 14px;
  border: 1px solid var(--accent, rgba(243, 220, 160, .55)); border-radius: 16px;
  background: var(--dialog-bg, rgba(10, 14, 36, .92)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); max-height: 52vh; overflow-y: auto;
}
.dlg-narration { border-color: rgba(255, 255, 255, .28); }
.dlg-speaker { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, var(--gold-soft)); }
.guide-orb { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #cfe3ff 40%, rgba(160, 190, 255, 0) 72%); box-shadow: 0 0 10px 3px rgba(190, 215, 255, .7); }
.dlg-text { font-size: calc(19px * var(--ts)); line-height: 1.38; color: #f1e8cf; }
.dlg-narration .dlg-text { font-style: italic; color: #d9d0b8; line-height: 1.4; }
.dlg-placeholder { display: inline-block; margin-bottom: 6px; padding: 0 8px; border: 1px dashed rgba(239, 228, 200, .6); border-radius: 999px; font-family: var(--f-display); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.dlg-system { cursor: default; text-align: center; border-width: 2px; box-shadow: 0 0 24px rgba(255, 150, 40, .55), 0 8px 24px rgba(0, 0, 0, .5); }
.sys-icon { display: block; margin: 0 auto 6px; width: 54px; height: 54px; }
.sys-label { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent, var(--gold-soft)); }
.sys-name { font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: .06em; color: var(--cream); margin-top: 2px; }
.dlg-next {
  min-height: 48px; padding: 8px 14px; border: 1px solid var(--accent, var(--gold-soft)); border-radius: 12px;
  background: var(--btn-bg, rgba(36, 34, 78, .92)); color: var(--gold); cursor: pointer;
  font-family: var(--f-display); font-weight: 600; font-size: 14.5px; line-height: 1.2; letter-spacing: .02em;
  transition: box-shadow .15s ease, transform .15s ease;
}
.convo-totem .dlg-next { color: var(--cream); font-size: 15px; }
.dlg-next:hover { box-shadow: 0 0 18px rgba(255, 224, 138, .55); transform: translateY(-1px); }

/* The Guide: darkened room and a soft glowing figure (Canvas StoryGuideMeet) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes guideGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.guide-shade { position: absolute; inset: 0; z-index: 20; background: rgba(6, 5, 16, .5); animation: fadeIn 1.4s ease both; }
.guide-figure { position: absolute; left: 50%; top: calc(130px + var(--safe-top)); margin-left: -90px; width: 180px; height: 300px; z-index: 25; pointer-events: none; animation: fadeIn 1.4s ease both, guideGlow 3s ease-in-out infinite; }
.guide-head { position: absolute; left: 50%; top: 0; margin-left: -34px; width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #d9e8ff 38%, rgba(170, 200, 255, 0) 72%); filter: blur(2px); }
.guide-body { position: absolute; left: 0; right: 0; top: 50px; bottom: 0; border-radius: 50% 50% 40% 40% / 38% 38% 62% 62%; background: radial-gradient(ellipse at 50% 30%, rgba(235, 244, 255, .95), rgba(170, 200, 255, .55) 45%, rgba(150, 180, 255, 0) 78%); filter: blur(10px); }
/* Zeus at the Spirit Gate (Canvas GateZeus): the same figure in gold, with a wide gold aura. */
.orb-zeus { background: radial-gradient(circle, #fff 0, rgba(255, 214, 92, .95) 40%, rgba(255, 214, 92, 0) 72%); box-shadow: 0 0 10px 3px rgba(255, 214, 92, .7); }
.zeus-aura { position: absolute; left: 50%; top: calc(90px + var(--safe-top)); margin-left: -200px; width: 400px; height: 400px; border-radius: 50%; z-index: 22; pointer-events: none; background: radial-gradient(circle, rgba(255, 214, 92, .28), rgba(255, 214, 92, 0) 68%); animation: fadeIn 1.4s ease both; }
.figure-zeus { top: calc(120px + var(--safe-top)); margin-left: -95px; width: 190px; height: 330px; }
.figure-zeus .guide-head { margin-left: -36px; width: 72px; height: 72px; background: radial-gradient(circle, #fff 0, rgba(255, 214, 92, .95) 38%, rgba(255, 214, 92, 0) 72%); }
.figure-zeus .guide-body { top: 54px; background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .92), rgba(255, 214, 92, .6) 45%, rgba(255, 214, 92, 0) 78%); }
.convo-zeus .dlg-box { border-color: rgba(255, 214, 92, .6); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 214, 92, .25); }
.overlay-layer > * { z-index: 30; }
.dlg-choices { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; }
.dlg-choices .dlg-next { font-size: 14px; line-height: 1.1; padding: 0 10px; }
/* While anyone is talking, hide the Energy bar so it doesn't show behind the response button. */
.screen:has(.convo, .help-card, .void-card) .ebar-wrap { visibility: hidden; }

/* Help questions and the Void (Spirit Gate) */
.help-card, .void-card {
  position: absolute; left: 16px; right: 16px; bottom: calc(90px + var(--safe-bottom)); z-index: 30; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border: 1px solid rgba(243, 220, 160, .55); border-radius: 16px; background: rgba(10, 14, 36, .94); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.help-prompt { margin: 0 0 4px; font-size: calc(19px * var(--ts)); color: #f1e8cf; }
.help-questions { display: flex; flex-direction: column; gap: 6px; }
.help-questions .btn { margin: 0; min-height: 44px; font-size: 14px; }
.help-answer { font-size: calc(17px * var(--ts)); line-height: 1.38; color: #f1e8cf; min-height: 0; }
.help-answer:empty { display: none; }

/* ---------- notification ---------- */
@keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.25); opacity: 1; } }
.tab-alert { position: relative; }
.tab-alert::after {
  content: ''; position: absolute; top: 6px; right: 8px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d6, #ffd36a 55%, #c9902a);
  box-shadow: 0 0 8px 2px rgba(255, 210, 110, .8); animation: dotPulse 1.6s ease-in-out infinite;
}
.spot.alert img { animation: spotFlash 1.25s ease-in-out infinite; }
.spot.alert .name { color: #fff6d6; text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(5, 8, 22, .9), 0 0 14px rgba(255, 214, 120, .7); }
@keyframes spotFlash {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 233, 168, .55)) drop-shadow(0 0 4px rgba(255, 214, 120, .25)) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
  50% { filter: drop-shadow(0 0 1.5px #fff6d6) drop-shadow(0 0 5px #ffe08a) drop-shadow(0 0 14px rgba(255, 200, 90, .95)) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
}
.reduce-motion .spot.alert img { filter: drop-shadow(0 0 1.5px #fff6d6) drop-shadow(0 0 6px #ffe08a) drop-shadow(0 0 12px rgba(255, 200, 90, .8)) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }

/* Popup over the Temple (Canvas HomeCastOut): nothing to press, fades away */
@keyframes popFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.notice-stack { position: absolute; left: 30px; right: 30px; top: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; justify-content: center; gap: 10px; text-align: center; pointer-events: none; } /* centred on the page (Steve, 2026-10-23) */
.notice-popup {
  padding: 16px 18px;
  border: 1px solid rgba(243, 220, 160, .6); border-radius: 12px; background: rgba(16, 13, 34, .94); backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: popFade 6.5s ease-out forwards;
}
.reduce-motion .notice-popup { animation: popFade 6.5s step-end forwards !important; }
.notice-title { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: .08em; color: var(--gold); margin-bottom: 6px; }
.notice-text { font-size: calc(16px * var(--ts)); line-height: 1.4; color: var(--parchment); }

/* ---------- room actions ---------- */
.loc {
  position: absolute; left: 50%; margin-left: -150px; width: 300px; height: 52px; z-index: 6;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid rgba(243, 220, 160, .55); border-radius: 14px; background: rgba(10, 14, 36, .72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer;
  font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: 1.5px; color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.loc:hover { box-shadow: 0 0 18px rgba(255, 224, 138, .55); border-color: var(--gold); transform: translateY(-1px); }
@keyframes locGlow { 0%, 100% { box-shadow: 0 0 6px rgba(255, 214, 120, .35); } 50% { box-shadow: 0 0 22px rgba(255, 214, 120, .85); border-color: var(--gold); } }
.loc-alert { animation: locGlow 1.25s ease-in-out infinite; }
.rate-pill {
  position: absolute; top: calc(140px + var(--safe-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 5;
  padding: 6px 14px; border-radius: 999px; background: rgba(10, 14, 36, .72); border: 1px solid rgba(243, 220, 160, .45); backdrop-filter: blur(4px);
  font-family: var(--f-numbers); font-weight: 800; font-size: 15px; color: var(--parchment); white-space: nowrap;
}
.rate-pill img { width: 26px; height: 26px; }
.idle-bubble {
  position: absolute; left: 50%; margin-left: -150px; width: 300px; bottom: calc(256px + var(--safe-bottom)); padding: 14px 18px; text-align: center;
  border: 1px solid rgba(243, 220, 160, .45); border-radius: 18px; background: rgba(10, 14, 36, .72); backdrop-filter: blur(4px);
  font-style: italic; font-size: calc(19px * var(--ts)); line-height: 1.3; color: var(--body-text); text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* ---------- opening (Canvas OpeningExposition) ---------- */
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ember { 0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
.pg { animation: pageIn 1.4s ease both; }
.eyebrow { font-family: var(--f-display); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); font-size: 15px; }
.opening { background: radial-gradient(ellipse at 50% -10%, #241c4a 0%, #0d0b20 62%); }
.opening-ember { position: absolute; left: 50%; bottom: -120px; width: var(--size, 520px); height: var(--size, 520px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 90, .55) 0%, rgba(255, 140, 50, .22) 38%, rgba(255, 120, 40, 0) 70%); animation: ember 3.2s ease-in-out infinite; transition: width 1.2s ease, height 1.2s ease; }
.opening-eyebrow { position: absolute; top: calc(76px + var(--safe-top)); left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: .34em; color: var(--label); }
.opening-page { position: absolute; left: 30px; right: 30px; top: calc(150px + var(--safe-top)); bottom: calc(130px + var(--safe-bottom)); overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; }
.opening-page p { margin: 20px 0 0; text-align: center; font-size: calc(22px * var(--ts)); line-height: 1.55; color: var(--body-text); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.opening-welcome { margin-top: 90px; text-align: center; }
.welcome-line { font-style: italic; font-size: calc(24px * var(--ts)); color: var(--body-text); margin-bottom: 26px; }
.opening-page .welcome-notice { margin: 28px auto 0; max-width: 340px; font-size: calc(13px * var(--ts)); line-height: 1.4; color: var(--body-text); opacity: .75; }
.welcome-title { font-family: var(--f-display); font-weight: 700; font-size: min(36px, 9vw); line-height: 1.1; letter-spacing: 3px; color: var(--cream); text-shadow: 0 0 20px rgba(236, 205, 142, .8), 0 2px 6px rgba(0, 0, 0, .85); text-wrap: balance; }
.opening-btn { position: absolute; left: 16px; right: 16px; bottom: calc(56px + var(--safe-bottom)); width: auto; min-height: 52px; font-size: 16px; }

/* ---------- reveals (Canvas RevealInventory) ---------- */
.reveal { background: radial-gradient(ellipse at 50% 30%, #2b2456 0%, #0d0b20 66%); }
.reveal-body { position: absolute; left: 28px; right: 28px; top: calc(150px + var(--safe-top)); text-align: center; }
.reveal-body .eyebrow { font-size: 13px; letter-spacing: .34em; color: var(--label); }
.reveal-icon { margin: 26px auto 20px; width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(236, 205, 142, .6); background: radial-gradient(circle, rgba(236, 205, 142, .2), rgba(236, 205, 142, 0) 70%); box-shadow: 0 0 28px rgba(236, 205, 142, .35); }
.reveal-icon img { width: 70px; height: 70px; object-fit: contain; }
.reveal-title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: 2px; color: var(--cream); text-shadow: 0 0 18px rgba(236, 205, 142, .7), 0 2px 6px rgba(0, 0, 0, .85); }
.reveal-lead { margin: 22px 0 0; font-style: italic; font-size: calc(19px * var(--ts)); line-height: 1.4; color: var(--muted); }
.reveal-text { margin: 16px 0 0; font-size: calc(22px * var(--ts)); line-height: 1.5; color: var(--body-text); }
.reveal-btn { position: absolute; left: 16px; right: 16px; bottom: calc(56px + var(--safe-bottom)); width: auto; min-height: 52px; font-size: 16px; }

/* ---------- whittling (Canvas WorkshopWhittle) ---------- */
@keyframes wandIn { 0% { opacity: 0; transform: translateY(40px) rotate(-8deg) scale(.9); } 100% { opacity: 1; transform: none; } }
.whittle-bg { position: absolute; inset: -30px; background: center top / cover no-repeat; filter: blur(9px); }
.whittle-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 6, 20, .35), rgba(10, 6, 20, .55) 60%, rgba(10, 6, 20, .8)); }
.whittle-wand { position: absolute; left: 50%; top: calc(90px + var(--safe-top)); margin-left: -70px; width: 140px; height: min(480px, 52vh); z-index: 10; animation: wandIn 1.8s ease-out both; }
.whittle-wand img { position: absolute; left: 50%; top: 0; width: 74px; height: 100%; margin-left: -37px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255, 214, 120, .8)); }
.wand-halo { position: absolute; left: 50%; top: 4%; bottom: 4%; width: 120px; margin-left: -60px; background: radial-gradient(ellipse, rgba(255, 214, 120, .45), rgba(255, 214, 120, 0) 68%); }
.whittle .convo-guide { bottom: calc(90px + var(--safe-bottom)); }
.whittle .dlg-text { font-size: calc(20px * var(--ts)); }

/* ---------- Inventory (Canvas Inventory draft) ---------- */
.inventory { background: radial-gradient(ellipse at 50% 0%, #1d1a3d 0%, #0e0d24 60%, #08071a 100%); font-family: var(--f-numbers); }
.inv-title { position: absolute; left: 0; right: 0; top: calc(56px + var(--safe-top)); text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.inv-panel { position: absolute; left: 16px; right: 16px; border: 1px solid rgba(236, 205, 142, .7); border-radius: 12px; background: linear-gradient(to bottom, rgba(24, 22, 56, .95), rgba(12, 12, 32, .95)); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .5); padding: 10px 12px 12px; }
.inv-wand { top: calc(104px + var(--safe-top)); height: 128px; }
.wand-img { position: absolute; left: 14px; right: 14px; top: 38px; width: calc(100% - 28px); height: 50px; object-fit: contain; }
.wand-name { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--f-body); font-size: 18px; color: #f1e8cf; }
.inv-satchel, .inv-carried { display: flex; flex-direction: column; overflow-y: auto; }
.inv-satchel .card-label { margin: 0 0 8px 2px; }
.slot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.slot { position: relative; min-width: 0; width: 100%; aspect-ratio: 1 / 1; padding: 6px; border: 1px solid rgba(236, 205, 142, .3); border-radius: 8px; background: radial-gradient(circle at 50% 40%, rgba(80, 70, 140, .55), rgba(20, 18, 48, .9)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); cursor: pointer; }
/* The art sits inside the square; it never sets the square's size. */
.slot img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.slot-empty { background: rgba(6, 6, 20, .55); cursor: default; }
.slot-selected { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 2px var(--gold), 0 0 12px rgba(255, 224, 138, .6); }
.item-detail { margin-top: 12px; min-height: 92px; padding: 10px 12px; border: 1px solid rgba(236, 205, 142, .35); border-radius: 10px; background: rgba(6, 6, 20, .7); }
.inv-carried .item-detail { margin-top: 12px; }
.item-name { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--gold-soft); letter-spacing: .06em; }
.item-desc { font-family: var(--f-body); font-size: calc(16px * var(--ts)); line-height: 1.3; color: #d9d0b8; margin-top: 2px; }
.item-empty { font-family: var(--f-body); font-style: italic; font-size: 16px; color: #a99f86; }

/* Inventory: Equip beside the selected wand (Canvas Inventory), the Conch drawing, and the equip tutorial. */
.item-row { display: flex; align-items: center; gap: 10px; }
.item-text { flex: 1; min-width: 0; }
.eq-btn { flex: none; height: 44px; padding: 0 16px; border: 1px solid var(--gold-soft); border-radius: 10px; background: rgba(36, 34, 78, .9); color: var(--gold); cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.slot-svg { position: absolute; inset: 6px; display: block; }
.slot-svg svg { width: 100%; height: 100%; display: block; }
.equip-tutorial .ebar-wrap { visibility: hidden; }

/* The Clear Quartz's +1 beside a spell's damage, and on the Wand panel. */
.quartz-badge { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px 0 5px; padding: 0 5px 0 3px; border: 1px solid rgba(214, 232, 255, .45); border-radius: 9px; background: rgba(190, 215, 255, .12); font-family: var(--f-numbers); font-size: 12px; line-height: 17px; color: #e4f0ff; vertical-align: middle; white-space: nowrap; }
span.quartz-badge img { width: 13px; height: 13px; margin: 0; object-fit: contain; }
.wand-effect { position: absolute; top: 10px; right: 12px; display: flex; align-items: center; font-family: var(--f-display); font-size: 13px; letter-spacing: 1px; color: var(--parchment); }
.wand-effect-icon { width: 18px; height: 18px; }

/* Row 52: Tezcatlipoca at the Spirit Gate, a crimson presence (Canvas GateTezcatlipoca). */
.orb-tezcatlipoca { background: radial-gradient(circle, #fff 0, rgba(220, 40, 60, .95) 40%, rgba(220, 40, 60, 0) 72%); box-shadow: 0 0 10px 3px rgba(220, 40, 60, .7); }
.tezcatlipoca-aura { position: absolute; left: 50%; top: calc(90px + var(--safe-top)); margin-left: -200px; width: 400px; height: 400px; border-radius: 50%; z-index: 22; pointer-events: none; background: radial-gradient(circle, rgba(200, 30, 50, .34), rgba(200, 30, 50, 0) 68%); animation: fadeIn 1.4s ease both; }
.figure-tezcatlipoca { top: calc(120px + var(--safe-top)); margin-left: -95px; width: 190px; height: 330px; }
.figure-tezcatlipoca .guide-head { margin-left: -36px; width: 72px; height: 72px; background: radial-gradient(circle, #ffe6e6 0, rgba(210, 30, 50, .95) 38%, rgba(210, 30, 50, 0) 72%); }
.figure-tezcatlipoca .guide-body { top: 54px; background: radial-gradient(ellipse at 50% 30%, rgba(255, 220, 220, .85), rgba(170, 20, 40, .65) 45%, rgba(170, 20, 40, 0) 78%); }
.convo-tezcatlipoca .dlg-box { border-color: rgba(220, 50, 70, .65); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(220, 50, 70, .3); }

/* Row 68: Vairocana at the Spirit Gate, a pink radiance (Canvas GateVairocana). */
.orb-vairocana { background: radial-gradient(circle, #fff 0, rgba(240, 140, 210, .95) 40%, rgba(240, 140, 210, 0) 72%); box-shadow: 0 0 10px 3px rgba(240, 140, 210, .7); }
.vairocana-aura { position: absolute; left: 50%; top: calc(90px + var(--safe-top)); margin-left: -200px; width: 400px; height: 400px; border-radius: 50%; z-index: 22; pointer-events: none; background: radial-gradient(circle, rgba(240, 140, 210, .3), rgba(240, 140, 210, 0) 68%); animation: fadeIn 1.4s ease both; }
.figure-vairocana { top: calc(120px + var(--safe-top)); margin-left: -95px; width: 190px; height: 330px; }
.figure-vairocana .guide-head { margin-left: -36px; width: 72px; height: 72px; background: radial-gradient(circle, #fff 0, rgba(240, 140, 210, .95) 38%, rgba(240, 140, 210, 0) 72%); }
.figure-vairocana .guide-body { top: 54px; background: radial-gradient(ellipse at 50% 30%, rgba(255, 240, 250, .9), rgba(240, 140, 210, .6) 45%, rgba(240, 140, 210, 0) 78%); }
.convo-vairocana .dlg-box { border-color: rgba(240, 140, 210, .6); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(240, 140, 210, .25); }
/* Phase 7: a move's glyph, and the line under an announcement (Canvas StoryGuideMana). */
.sys-move { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff5, #0000 60%), #3f9a3a; padding: 12px; box-sizing: border-box; }
.sys-move svg { width: 100%; height: 100%; display: block; }
.sys-body { margin-top: 8px; font-family: var(--f-body); font-size: 18px; line-height: 1.4; color: #efe4c8; }

/* Rows 85-87: the Library (Canvas Library). The in-progress row is Claude's design (no Canvas state yet). */
.loc.loc-library { width: 200px; height: 46px; margin-left: -100px; font-size: 17px; }
.lib-panel { position: absolute; left: 16px; right: 16px; top: 150px; z-index: 5; padding: 12px; border: 1px solid rgba(236, 205, 142, .7); border-radius: 16px; background: rgba(10, 14, 36, .74); backdrop-filter: blur(4px); }
.lib-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.lib-tab { flex: 1; min-height: 42px; border-radius: 10px; border: 1px solid rgba(236, 205, 142, .35); background: transparent; color: #f3dca0; font-family: var(--f-display); font-size: 15px; cursor: pointer; }
.lib-tab.on { border-color: #ffe9a8; background: rgba(36, 34, 78, .92); color: #ffe9a8; }
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 8px 14px 12px; border-radius: 10px; border: 1px solid rgba(236, 205, 142, .35); background: rgba(13, 11, 31, .6); color: #fff3d6; font-family: var(--f-display); font-size: 17px; text-align: left; cursor: pointer; overflow: hidden; }
.lib-row.current { border-color: #ffe9a8; box-shadow: 0 0 14px rgba(255, 224, 138, .35); }
.lib-row.done { cursor: default; }
.lib-name { display: flex; flex-direction: column; }
.lib-status { font-family: var(--f-body); font-size: 13px; color: #d8c08a; }
.lib-status:empty { display: none; }
.lib-time-wrap { display: flex; align-items: center; gap: 6px; flex: none; font-family: var(--f-body); font-size: 14px; color: #f3dca0; }
.lib-clock { width: 16px; height: 16px; display: block; }
.lib-clock svg { width: 100%; height: 100%; display: block; }
.lib-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.lib-fill { height: 100%; width: 0; border-radius: 2px; background: #ffe08a; transition: width .3s linear; }
.lib-done { flex: none; font-family: var(--f-body); font-size: 14px; color: #9be08a; }
.lib-empty { margin: 8px 4px; font-family: var(--f-body); font-size: 17px; color: #d9d0b8; }
.sys-move.sys-dodge { background: radial-gradient(circle at 35% 30%, #fff5, #0000 60%), #e2bf2f; }
/* Row 109: Ahura Mazda's emerald glow (Canvas GateAhuraMazda). */
.orb-ahura { background: radial-gradient(circle, #fff 0, rgba(80, 220, 150, .95) 40%, rgba(80, 220, 150, 0) 72%); box-shadow: 0 0 10px 3px rgba(80, 220, 150, .7); }
.ahura-aura { position: absolute; left: 50%; top: calc(90px + var(--safe-top)); margin-left: -200px; width: 400px; height: 400px; border-radius: 50%; z-index: 22; pointer-events: none; background: radial-gradient(circle, rgba(80, 220, 150, .3), rgba(80, 220, 150, 0) 68%); animation: fadeIn 1.4s ease both; }
.figure-ahura { top: calc(120px + var(--safe-top)); margin-left: -95px; width: 190px; height: 330px; }
.figure-ahura .guide-head { margin-left: -36px; width: 72px; height: 72px; background: radial-gradient(circle, #fff 0, rgba(80, 220, 150, .95) 38%, rgba(80, 220, 150, 0) 72%); }
.figure-ahura .guide-body { top: 54px; background: radial-gradient(ellipse at 50% 30%, rgba(235, 255, 245, .9), rgba(80, 220, 150, .6) 45%, rgba(80, 220, 150, 0) 78%); }
.convo-ahura .dlg-box { border-color: rgba(80, 220, 150, .6); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(80, 220, 150, .25); }
.sys-move.sys-quicken { background: radial-gradient(circle at 35% 30%, #fff5, #0000 60%), #d8452f; }
.sys-move.sys-reflect { background: radial-gradient(circle at 35% 30%, #fff5, #0000 60%), #2f63d6; }
/* A cast-out message on the fight screen: it stays until the player goes home, 2.5 s (Steve, 2026-10-28). */
.notice-here .notice-popup { animation: noticeIn .2s ease-out both; }
.reduce-motion .notice-here .notice-popup { animation: none !important; }
@keyframes noticeIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* A stacked page (Steve, 2026-10-29): several lines stay on screen, one under another,
   and the page scrolls when they outgrow it. Each line keeps its own box. */
.dlg-page { display: flex; flex-direction: column; gap: 8px; max-height: 58vh; overflow-y: auto; }
.dlg-page .dlg-box { max-height: none; overflow: visible; flex: none; }
/* Place names stand out in every conversation (Steve, 2026-10-29). */
.dlg-text .place { font-weight: 700; color: #ffd76a; }
.dlg-narration .dlg-text .place { color: #f0cf7a; }
/* The opening's welcome card changes to the Temple's sky (Steve, 2026-10-29). */
.opening .opening-sky-bg { opacity: 0; transition: opacity 1.4s ease; }
.opening.opening-sky .opening-sky-bg { opacity: 1; }
.opening.opening-sky .opening-ember { opacity: 0; transition: opacity 1.2s ease; }
.opening-picture { margin: 0 auto; max-width: 320px; }
.opening-picture img { display: block; width: 100%; max-height: 26vh; object-fit: contain; }
.opening-picture + p { margin-top: 8px; }
.opening-picture.fit-bottom img { width: 100%; height: 13vh; object-fit: cover; object-position: 50% 100%; }
.void-quiet { margin: 0; font-style: italic; font-size: calc(17px * var(--ts)); line-height: 1.4; color: #d9d0b8; }
.opening.opening-sky .opening-page .welcome-line, .opening.opening-sky .opening-page .welcome-notice { text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 12px rgba(5, 8, 22, .9); opacity: 1; }
/* A tutorial's Yes/No question: two answers, one under the other (Steve, 2026-10-29). */
.dlg-ask { display: flex; flex-direction: column; gap: 8px; }
.dlg-ask .dlg-next + .dlg-next { min-height: 44px; background: rgba(20, 20, 44, .85); color: var(--cream); border-color: rgba(243, 220, 160, .35); }

/* Tutorials (Steve, 2026-10-29). While the Guide points at something the room isn't
   darkened, so the glowing part shows; the tour's tab and buttons stay tappable. */
.overlay-layer .guide-shade, .overlay-layer .guide-figure { transition: opacity .3s ease; }
.overlay-layer.pointing .guide-shade, .overlay-layer.pointing .guide-figure { opacity: 0; }
.tour-layer { pointer-events: none; }
.tour-layer > * { pointer-events: auto; }
.navbar .tab.pointed { border-radius: 14px; }
.help-tutorials { margin-top: 2px; }
.tour-layer.box-top .convo-guide { top: calc(60px + var(--safe-top)); bottom: auto; }