/* Global theme */
:root{ --bg:#070a0f; --ink:#e6edf7; --ink-dim:#9fb0c8; --accent:#4da3ff; --glow:#7cc4ff; --gold:#ffd76a; }

/* Oracle proposals UI (align with HUD aesthetic) */
.oracle-proposals{ background: linear-gradient(180deg, rgba(18,33,54,0.35), rgba(14,27,45,0.22)); border:1px solid rgba(38,59,90,0.65); box-shadow: inset 0 0 0 1px rgba(36,72,91,0.35), 0 8px 24px rgba(0,0,0,0.35); }
.oracle-proposals .card-title{ font-family: Cinzel, serif; letter-spacing:.03em; color:#eaf7ff; margin-bottom:8px; }
.oracle-proposals .proposal-list{ display:grid; gap:8px; }
.oracle-proposals .proposal-row{ display:grid; grid-template-columns: auto 1fr auto auto; gap:8px; align-items:center; }
.oracle-proposals .proposal-row .prop-title{ width:100%; padding:8px 10px; border-radius:10px; border:1px solid rgba(38,59,90,0.6); background: linear-gradient(180deg, rgba(15,28,44,0.32), rgba(12,24,39,0.20)); color:#d7ecff; font-family:"Cardo", serif; box-shadow: inset 0 0 0 1px rgba(36,72,91,0.3), 0 6px 18px rgba(0,0,0,0.25); }
.oracle-proposals .proposal-row .prop-diff,
.oracle-proposals .proposal-row .prop-cat{ appearance:none; -webkit-appearance:none; padding:8px 10px; border-radius:10px; border:1px solid rgba(38,59,90,0.6); background: linear-gradient(180deg, rgba(15,28,44,0.32), rgba(12,24,39,0.20)); color:#d7ecff; font-family:"Cardo", serif; box-shadow: inset 0 0 0 1px rgba(36,72,91,0.3), 0 6px 18px rgba(0,0,0,0.25); }
.oracle-proposals input[type="checkbox"]{ width:18px; height:18px; accent-color: #ffd76a; }
.oracle-proposals .proposal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.oracle-proposals .proposal-actions .btn{ font-family: Cinzel, serif; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(124,196,255,0.16), rgba(124,196,255,0.06)); color:#eaf7ff; cursor:pointer; }
.oracle-proposals .proposal-actions .btn.btn-ghost{ background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); }
*{ box-sizing:border-box } html,body{ height:100% }
body{ margin:0; font-family:"Cardo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink);
      background:radial-gradient(1200px 800px at 50% 20%, #0b1220 0%, #0a0f18 40%, var(--bg) 100%) fixed; overflow:hidden; }

/* Date row and badges (shared) */
.hud-date-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hud-date-row .ghost{ font-family: Cinzel, serif; padding: 6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); color:#eaf7ff; cursor:pointer; }
.hud-date-row .ghost:hover{ transform: translateY(-1px); }
.date-pill{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; border:1px solid rgba(38,59,90,0.6); background: linear-gradient(180deg, rgba(15,28,44,0.32), rgba(12,24,39,0.20)); box-shadow: inset 0 0 0 1px rgba(36,72,91,0.3), 0 6px 18px rgba(0,0,0,0.25); }
.date-pill #selectedDateLabel{ font-family:Cinzel, serif; letter-spacing:.02em; color:#eaf7ff; }
.badge{ padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; color:#eaf7ff; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); }
.badge-sealed{ border-color: rgba(207,176,110,0.45); color:#ffeab1; background: linear-gradient(180deg, rgba(207,176,110,0.18), rgba(207,176,110,0.08)); }
.hidden{ display:none !important; }

/* Chronicle actions */
.chronicle-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chronicle-actions .primary{ font-family: Cinzel, serif; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(124,196,255,0.16), rgba(124,196,255,0.06)); color:#eaf7ff; cursor:pointer; }
.chronicle-actions .accent{ font-family: Cinzel, serif; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(207,176,110,0.18), rgba(207,176,110,0.08)); color:#ffeab1; cursor:pointer; }
.chronicle-actions .danger{ font-family: Cinzel, serif; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,105,97,0.16), rgba(255,105,97,0.06)); color:#ffe6e4; cursor:pointer; }
.chronicle-actions button[disabled]{ opacity:.6; cursor:not-allowed; }

/* Quests inline create */
.quest-inline-create{ display:grid; grid-template-columns: 1fr auto auto auto auto; gap:8px; align-items:center; }
.quest-inline-create input[type="text"],
.quest-inline-create input[type="number"],
.quest-inline-create select{ appearance:none; -webkit-appearance:none; border-radius:10px; border:1px solid rgba(38,59,90,0.6); background: linear-gradient(180deg, rgba(15,28,44,0.32), rgba(12,24,39,0.20)); color:#d7ecff; font-family:"Cardo", serif; padding:8px 10px; box-shadow: inset 0 0 0 1px rgba(36,72,91,0.3), 0 6px 18px rgba(0,0,0,0.25); }
.quest-inline-create .primary{ font-family: Cinzel, serif; padding: 8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(124,196,255,0.16), rgba(124,196,255,0.06)); color:#eaf7ff; cursor:pointer; }
.quest-inline-create .meter{ font-size:12px; color:#aecdde; }
.quest-inline-create .empty{ opacity:.85; color:#9fb4c2; font-style:italic; }

/* Class selector cards */
.class-card{
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: inset 0 0 0 1px rgba(36,72,91,0.25), 0 6px 18px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
}
.class-card.unlocked{ border-color: rgba(120,255,180,0.30); }
.class-card.locked{ opacity:0.8; }
.class-header{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.class-name{ font-family: Cinzel, serif; letter-spacing:.5px; }
.class-guild{ opacity:.85; font-size:.9em; }
.class-summary{ opacity:.95; margin-bottom:8px; font-family: Cardo, serif; }
.class-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.chip{ padding:2px 8px; border-radius:999px; font-size:.8em; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); }
.chip.req{ border-color: rgba(255,220,120,0.35); }
.chip.you{ border-color: rgba(140,200,255,0.35); }
.chip.tags{ opacity:.85; }
.class-actions{ display:flex; align-items:center; gap:10px; }
.btn-select{ padding:6px 10px; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(124,196,255,0.16), rgba(124,196,255,0.06)); color:#eaf7ff; font-family:Cinzel, serif; }
.btn-select[disabled]{ opacity:.5; cursor:not-allowed; }
.current-mark{ font-size:.85em; opacity:.85; }

/* Oracle panel */
.oracle-feed{ max-height:260px; overflow:auto; padding:6px 2px; }
.oracle-msg{ margin:6px 0; opacity:.96; padding:8px 12px; border-radius:10px; display:inline-block; max-width:92%; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.oracle-msg.me{ margin-left:auto; display:block; color:#eaf7ff; background: linear-gradient(180deg, rgba(124,196,255,0.14), rgba(124,196,255,0.06)); border:1px solid rgba(124,196,255,0.22); text-shadow: 0 0 6px #081423; }
.oracle-msg.oracle{ color:#ffeab1; background: linear-gradient(180deg, rgba(207,176,110,0.14), rgba(207,176,110,0.06)); border:1px solid rgba(207,176,110,0.28); text-shadow: 0 0 6px #2b1c08; }
.icon-pulse{ animation: pulseGlow 1.5s ease-out 3; }
@keyframes pulseGlow{
  0%{ filter: drop-shadow(0 0 0px rgba(120,200,255,.0)); }
  50%{ filter: drop-shadow(0 0 12px rgba(120,200,255,.65)); }
  100%{ filter: drop-shadow(0 0 0px rgba(120,200,255,.0)); }
}
/* Oracle typing indicator */
.typing{ opacity:.85; font-style:italic; letter-spacing:.3px; }
.typing .dot{ animation: blink 1.2s infinite; display:inline-block; }
.typing .dot:nth-child(2){ animation-delay:.2s }
.typing .dot:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,20%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
/* Reusable pulse for icon buttons */
.pulse-glow{ position:relative; box-shadow:0 0 0 0 rgba(255,215,0,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,215,0,.55); transform: translateZ(0); }
  70%{ box-shadow:0 0 0 14px rgba(255,215,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,215,0,0); }
}
/* XP bar pulse + shimmer */
.xpbar-pulse{ animation: xpPulse 1.4s ease-out 1; box-shadow:0 0 0 0 rgba(255,215,0,.6); }
@keyframes xpPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,215,0,.6); transform: translateZ(0);} 40%{ box-shadow:0 0 12px 6px rgba(255,215,0,.25);} 100%{ box-shadow:0 0 0 0 rgba(255,215,0,0);} }
.xpfill-shimmer{ position:relative; overflow:hidden; }
.xpfill-shimmer::after{ content:''; position:absolute; inset:0 auto 0 0; width:80px; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation: xpShimmer 1.2s ease-out 1; }
@keyframes xpShimmer{ 0%{ transform: translateX(-120%);} 100%{ transform: translateX(220%);} }

/* XP floater */
.xp-floater{ position:absolute; right:8px; top:-8px; transform: translateY(0); background: rgba(255,215,0,0.9); color:#111; font-weight:700; padding:2px 8px; border-radius:999px; opacity:0; pointer-events:none; animation: xpFloat 1.2s ease-out 1; }
@keyframes xpFloat{ 0%{ opacity:0; transform: translateY(8px);} 15%{ opacity:1; transform: translateY(0);} 100%{ opacity:0; transform: translateY(-18px);} }

/* Toast */
.toast{ position:fixed; bottom:24px; right:24px; min-width:200px; max-width:300px; background: rgba(20,20,28,0.9); color:#ffd966; font-weight:600; padding:12px 16px; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.4); opacity:0; transform: translateY(20px); transition: opacity .3s ease, transform .3s ease; pointer-events:none; z-index:9999; }
.toast.show{ opacity:1; transform: translateY(0); }

/* Simplified Oracle UI styles */
.pulse{ animation:pulse 1.1s ease-in-out 2; }
@keyframes pulse{ 0%{ transform:scale(1); filter: drop-shadow(0 0 0 rgba(255,215,0,0)); } 50%{ transform:scale(1.03); filter: drop-shadow(0 0 12px rgba(255,215,0,.65)); } 100%{ transform:scale(1); filter: drop-shadow(0 0 0 rgba(255,215,0,0)); } }
/* typing already exists above; keep a simpler fallback here */
.typing{ font-style:italic; opacity:.9; }
.suggestions{ margin-top:8px; padding:12px; border:1px dashed rgba(255,255,255,.25); border-radius:12px; display:none; }
.toast-root{ position:fixed; right:16px; bottom:16px; display:grid; gap:8px; z-index:9999; }
.toast-root .toast{ position:static; opacity:1; transform:none; pointer-events:auto; min-width:auto; max-width:none; }
.toast.success{ border-color: rgba(80,200,120,.5); }
.toast.warn{ border-color: rgba(255,196,0,.6); }
.toast.error{ border-color: rgba(255,80,80,.6); }
/* Accessibility utilities */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
button:focus-visible, .choice:focus-visible, .field:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

/* Stars background */
.bg-video{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.45; }
.is-hud #bgVideoHud{ display:block !important; }
.is-hud #bgVideo{ display:none !important; }
.is-hud #bgVideoHud{ opacity:1; }
.is-hud .stars{ opacity:0; }
.stars, .stars:before, .stars:after{ content:""; position:absolute; inset:-200vh; background-repeat:repeat; pointer-events:none; z-index:1;
  background-image: radial-gradient(1px 1px at 20px 30px, #ffffff66 99%, transparent 100%),
                    radial-gradient(1px 1px at 150px 80px, #7cc4ff66 99%, transparent 100%),
                    radial-gradient(1px 1px at 300px 200px, #ffffff55 99%, transparent 100%);
  background-size:400px 300px; animation:drift 120s linear infinite; opacity:.15; }
.stars:before{ animation-duration:180s; opacity:.12 } .stars:after{ animation-duration:240s; opacity:.10 }
@keyframes drift { to { transform: translate3d(200px, -150px, 0) } }

/* Layout */
.wrap{ position:relative; z-index:2; display:grid; place-items:center; height:100%; padding: clamp(16px, 4vw, 48px); }
/* Enhanced onboarding overlay with smooth transitions */
.video-dim{ 
  position:fixed; 
  inset:0; 
  z-index:9998; 
  pointer-events:none; 
  opacity:0; 
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); 
  background: radial-gradient(120% 140% at 50% 20%, 
    rgba(0,0,0,0.4) 0%, 
    rgba(0,0,0,0.6) 60%, 
    rgba(0,0,0,0.8) 100%); 
}
.video-dim[style*="display: block"] { pointer-events: all; }

.intro-video{ 
  position:fixed; 
  inset:0; 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  z-index:9999; 
  display:none; 
  opacity:0; 
  transition: opacity 600ms ease; 
  background:#000; 
}
.intro-video.show{ display:block; opacity:1; }
.intro-video.fadeout{ opacity:0; }

.intro-hint{ 
  position:fixed; 
  right:20px; 
  bottom:20px; 
  z-index:10000; 
  padding:12px 20px; 
  border-radius:12px; 
  border:2px solid rgba(0,255,0,0.3);
  background: linear-gradient(135deg, rgba(12,22,36,0.9), rgba(20,35,50,0.8)); 
  backdrop-filter: blur(10px) saturate(150%); 
  color:#90EE90; 
  font-family:"Cinzel", serif; 
  font-size:14px; 
  font-weight:600;
  opacity:0; 
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1); 
  pointer-events:none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 30px rgba(0,255,0,0.2);
  animation: hintPulse 2s ease-in-out infinite;
}
.intro-hint.show{ opacity:1; }
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 30px rgba(0,255,0,0.2); }
  50% { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 40px rgba(0,255,0,0.4); }
}
.panel{ position:relative; width:min(92vmin, 900px); border-radius:18px; overflow:hidden;
  background: radial-gradient(180% 120% at 50% -20%, #7cc4ff10, #0000 70%), linear-gradient(180deg, #0c1624 0%, #0a111b 100%);
  border:1px solid #21314c; box-shadow: inset 0 0 50px #0d1b2b, 0 10px 60px #0a1726;
  opacity:0; transform: translateY(10px); transition: opacity 300ms ease, transform 300ms ease; }
.head{ padding:22px 24px; text-align:center; text-shadow: 0 0 14px #0b1a28; }
.lead{ font-family:"Cinzel", serif; font-weight:900; letter-spacing:.06em; font-size: clamp(22px, 3vw, 36px); color:#cfe3ff; }
.alias{ color:#89a2c4; margin-top:6px; font-size:14px }
.body{ padding:14px 18px; }
.field{ width:100%; min-height:120px; resize:vertical; padding:14px 16px; border-radius:14px; color:var(--ink);
  background: linear-gradient(#0b1422, #0a111b) padding-box, radial-gradient(120% 200% at 0% 0%, #2a3a55, #0b1422) border-box;
  border:1px solid #1c2a43; outline:none; font-size:16px; line-height:1.4; text-shadow:0 0 4px #081019; }
.field:focus{ border-color:#2f6fb8; box-shadow: 0 0 0 2px #2f6fb844; }
.field[aria-invalid="true"]{ border-color:#b82f2f; box-shadow: 0 0 0 2px #b82f2f44; }
.btnrow{ display:flex; justify-content:center; gap:12px; padding: 0 18px 18px }
.btn{ padding:12px 18px; border-radius:12px; border:1px solid #263b5a; background:linear-gradient(#122136, #0e1b2d); color:#d7ecff;
  font-family:"Cinzel", serif; cursor:pointer }
.btn:hover{ border-color:#2f6fb8 }
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.footer{ padding:14px 18px; text-align:center; color:#7ba1cc; font-size:12px; opacity:.85 }

.hidden{ display:none }

/* Sorting choice cards */
.choices{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; padding: 18px; }
.choice{ position:relative; padding:22px 18px; border-radius:14px; border:1px solid #263b5a;
  background:linear-gradient(#122136, #0e1b2d); color:#cfe3ff; font-family:"Cinzel", serif; font-size:16px;
  text-shadow:0 0 6px #0b1a28; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 4px 16px #071120; overflow:hidden; }
.choice:hover{ transform: translateY(-2px) scale(1.02); border-color:#7cc4ff; box-shadow: 0 0 18px #7cc4ff88; }
.choice::after{ content:""; position:absolute; inset:-10%; opacity:.08; pointer-events:none; background-size:contain;
  background-repeat:no-repeat; background-position:center; filter: drop-shadow(0 0 10px #000); }
/* Use external PNGs instead of embedded base64 */
.choice[data-guild="Everstead"]::after{ background-image:url('./Everstead.png'); }
.choice[data-guild="Ironwake"]::after{ background-image:url('./Ironwake.png'); }
.choice[data-guild="Veilborn"]::after{ background-image:url('./Veilborn v2.png'); }
.choice[data-guild="Stormbreaker"]::after{ background-image:url('./Stormbreaker.png'); }

/* Reveal specifics */
.center{ text-align:center }
.crest{ display:inline-block; max-width:min(74vmin, 560px); width:100%; filter: drop-shadow(0 0 24px #0b1a28) drop-shadow(0 0 48px #0b1a28); }
.xpbar{ position:relative; overflow:hidden; width:min(82vmin, 700px); height:14px; border-radius:999px; margin: 16px auto; background:#0a0f16; box-shadow: inset 0 2px 6px #000; }
.xpfill{ position:relative; height:100%; border-radius:999px; width:0%; background:linear-gradient(#ffe08a, #ffcd5a); box-shadow: 0 0 18px #ffcd5aaa; transition: width 1200ms ease; }
@keyframes xpShimmer {
  0% { transform: translateX(-120%); }
  60% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
.xpfill::after{ content:""; position:absolute; top:-40%; bottom:-40%; left:-30%; right:-30%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen; filter: blur(2px); pointer-events:none; animation: xpShimmer 2200ms ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .xpfill::after{ animation: none; } }
.gold{ color:var(--gold) }

/* HUD */
.grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; padding:18px }
.card{ padding:16px; border-radius:14px; border:1px solid #263b5a; background:linear-gradient(#122136, #0e1b2d);
  box-shadow: 0 4px 16px #071120; color:#cfe3ff; font-family:"Cinzel", serif; }

/* Floating audio widget (less prominent) */
.audio-widget{ position:fixed; top:12px; right:12px; z-index:4; display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px; border:1px solid rgba(38,59,90,0.6);
  background: rgba(12,22,36,0.22); backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 6px 22px rgba(7,17,32,0.5); opacity:.55; transition: opacity 180ms ease; }
.audio-widget:hover{ opacity:1; }
.audio-widget input[type="range"]{ width:120px }

/* Reveal panel floats over video with subtle blur */
#scene-reveal.panel{ background: rgba(12, 22, 36, 0.22) !important; border-color: rgba(124,196,255,0.22); box-shadow: 0 10px 60px #0a1726; backdrop-filter: blur(6px) saturate(120%); }
#scene-reveal .head, #scene-reveal .body, #scene-reveal .btnrow, #scene-reveal .footer { background: transparent; }
/* Ambient vignette within reveal */
#scene-reveal.panel::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:0;
  background: radial-gradient(120% 120% at 50% 35%, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.28) 100%);
}

/* Mirror and Sorting panels float over video with subtle blur */
#scene-m1.panel, #scene-m2.panel, #scene-m3.panel,
#scene-s1.panel, #scene-s2.panel, #scene-s3.panel, #scene-s4.panel, #scene-s5.panel{
  background: rgba(12, 22, 36, 0.18) !important; border-color: rgba(124,196,255,0.18); box-shadow: 0 10px 60px #0a1726; backdrop-filter: blur(6px) saturate(120%);
}
#scene-m1 .head, #scene-m1 .body, #scene-m1 .btnrow, #scene-m1 .footer,
#scene-m2 .head, #scene-m2 .body, #scene-m2 .btnrow, #scene-m2 .footer,
#scene-m3 .head, #scene-m3 .body, #scene-m3 .btnrow, #scene-m3 .footer,
#scene-s1 .head, #scene-s1 .body, #scene-s1 .btnrow, #scene-s1 .footer,
#scene-s2 .head, #scene-s2 .body, #scene-s2 .btnrow, #scene-s2 .footer,
#scene-s3 .head, #scene-s3 .body, #scene-s3 .btnrow, #scene-s3 .footer,
#scene-s4 .head, #scene-s4 .body, #scene-s4 .btnrow, #scene-s4 .footer,
#scene-s5 .head, #scene-s5 .body, #scene-s5 .btnrow, #scene-s5 .footer{
  background: transparent;
}

/* Onboarding panels are fully transparent to feel like floating UI */
#scene-entry.panel,
#scene-portal.panel,
#scene-m1.panel, #scene-m2.panel, #scene-m3.panel,
#scene-s1.panel, #scene-s2.panel, #scene-s3.panel, #scene-s4.panel, #scene-s5.panel,
#scene-reveal.panel{
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
}
#scene-portal .head, #scene-portal .body, #scene-portal .btnrow, #scene-portal .footer{ background: transparent; }
#scene-m1 .head, #scene-m1 .body, #scene-m1 .btnrow, #scene-m1 .footer,
#scene-m2 .head, #scene-m2 .body, #scene-m2 .btnrow, #scene-m2 .footer,
#scene-m3 .head, #scene-m3 .body, #scene-m3 .btnrow, #scene-m3 .footer,
#scene-s1 .head, #scene-s1 .body, #scene-s1 .btnrow, #scene-s1 .footer,
#scene-s2 .head, #scene-s2 .body, #scene-s2 .btnrow, #scene-s2 .footer,
#scene-s3 .head, #scene-s3 .body, #scene-s3 .btnrow, #scene-s3 .footer,
#scene-s4 .head, #scene-s4 .body, #scene-s4 .btnrow, #scene-s4 .footer,
#scene-s5 .head, #scene-s5 .body, #scene-s5 .btnrow, #scene-s5 .footer,
#scene-reveal .head, #scene-reveal .body, #scene-reveal .btnrow, #scene-reveal .footer{ background: transparent; }

/* Apparition-style buttons and choices (onboarding only) */
#scene-entry .btn, #scene-entry .choice,
#scene-portal .btn, #scene-portal .choice,
#scene-m1 .btn, #scene-m1 .choice,
#scene-m2 .btn, #scene-m2 .choice,
#scene-m3 .btn, #scene-m3 .choice,
#scene-s1 .btn, #scene-s1 .choice,
#scene-s2 .btn, #scene-s2 .choice,
#scene-s3 .btn, #scene-s3 .choice,
#scene-s4 .btn, #scene-s4 .choice,
#scene-s5 .btn, #scene-s5 .choice,
#scene-reveal .btn, #scene-reveal .choice{
  background: linear-gradient(rgba(18,33,54,0.14), rgba(14,27,45,0.08));
  border-color: rgba(38,59,90,0.38);
  box-shadow: 0 6px 22px rgba(7,17,32,0.18);
}
#scene-entry .btn:hover, #scene-entry .choice:hover,
#scene-portal .btn:hover, #scene-portal .choice:hover,
#scene-m1 .btn:hover, #scene-m1 .choice:hover,
#scene-m2 .btn:hover, #scene-m2 .choice:hover,
#scene-m3 .btn:hover, #scene-m3 .choice:hover,
#scene-s1 .btn:hover, #scene-s1 .choice:hover,
#scene-s2 .btn:hover, #scene-s2 .choice:hover,
#scene-s3 .btn:hover, #scene-s3 .choice:hover,
#scene-s4 .btn:hover, #scene-s4 .choice:hover,
#scene-s5 .btn:hover, #scene-s5 .choice:hover,
#scene-reveal .btn:hover, #scene-reveal .choice:hover{
  background: linear-gradient(rgba(18,33,54,0.22), rgba(14,27,45,0.12));
  border-color: rgba(47,111,184,0.55);
}
/* Keep choices looking like lightweight cards while transparent */
.choice{
  color:#d7ecff; text-align:left; cursor:pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

/* Mirror scenes: make free-form dialogue boxes (textareas) fully transparent */
#scene-m1 .field, #scene-m2 .field, #scene-m3 .field{
  background: transparent !important;
  border:1px solid rgba(38,59,90,0.35) !important;
  box-shadow: none !important;
  color:#d7ecff;
}
#scene-m1 .field::placeholder, #scene-m2 .field::placeholder, #scene-m3 .field::placeholder{ color:#9fb4c2; opacity:.8; }
#scene-m1 .field:focus, #scene-m2 .field:focus, #scene-m3 .field:focus{
  outline:none; border-color: rgba(207,176,110,0.55) !important; box-shadow: 0 0 0 2px rgba(207,176,110,0.18) inset;
}

/* Portal alias input: transparent, centered typing */
#aliasInput{
  background: transparent !important;
  border:1px solid rgba(38,59,90,0.35) !important;
  box-shadow:none !important;
  color:#d7ecff;
  text-align:center;
}
#aliasInput::placeholder{ color:#9fb4c2; opacity:.8; text-align:center; }
#aliasInput:focus{ outline:none; border-color: rgba(207,176,110,0.55) !important; box-shadow: 0 0 0 2px rgba(207,176,110,0.18) inset; }

/* Entry scene styling */
/* Make the entry panel completely transparent to fully reveal the background */
#scene-entry.panel{ background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
#scene-entry .lead{ color:#ffd76a; text-shadow: 0 0 18px rgba(255,215,106,0.3); }
#scene-entry .alias{ color:#cfe3ffcc; }
#scene-entry .head, #scene-entry .body, #scene-entry .btnrow, #scene-entry .footer{ background: transparent; }

/* Entry scene flourishes */
@keyframes entryFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}
@keyframes entryGlow {
  0%,100% { text-shadow: 0 0 10px rgba(255,215,106,0.22), 0 0 28px rgba(255,215,106,0.12); }
  50% { text-shadow: 0 0 18px rgba(255,215,106,0.45), 0 0 40px rgba(255,215,106,0.25); }
}
#scene-entry .lead{
  animation: entryFloat 6s ease-in-out infinite, entryGlow 3.6s ease-in-out infinite, entrySwayX 10s ease-in-out infinite;
}
#scene-entry #entryBegin{
  opacity:0; transform: translateY(8px);
  animation: entryButtonIn 700ms ease forwards; animation-delay: 600ms;
}
@keyframes entryButtonIn{
  to { opacity:1; transform: translateY(0); }
}

/* Gentle horizontal drift for the entry phrase */
@keyframes entrySwayX{
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(6px) translateY(-6px); }
  100% { transform: translateX(0) translateY(0); }
}

/* Subtle hover bloom for the entry CTA */
#scene-entry #entryBegin:hover{
  box-shadow: 0 0 0 0 rgba(255,215,106,0), 0 0 24px rgba(255,215,106,0.25);
  border-color: rgba(255,215,106,0.5);
}

/* Reduced motion: disable entry animations */
@media (prefers-reduced-motion: reduce){
  #scene-entry .lead, #scene-entry #entryBegin{ animation: none !important; }
}

/* Entry: ensure absolutely no panel box effect */
#scene-entry.panel::before{ content:none !important; animation:none !important; }

/* Embers layer (shown only on entry) */
.embers{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.25; display:none; }
.is-entry .embers{ display:block; }
/* Ember opacity pulse for a breathing effect */
.is-entry .embers{ animation: emberPulse 8s ease-in-out infinite; }
@keyframes emberPulse{ 0%,100%{ opacity:.22 } 50%{ opacity:.32 } }
@keyframes emberDrift {
  0% { transform: translateY(10px); opacity: .2; }
  50% { opacity: .35; }
  100% { transform: translateY(-20px); opacity: .2; }
}
/* Two pseudo layers for parallax */
.embers::before, .embers::after{
  content:""; position:absolute; inset:-50vh -50vw; 
  background-repeat:repeat; background-size: 320px 240px;
  animation: emberDrift 18s linear infinite;
}
.embers::after{ animation-duration: 28s; opacity:.65; }
/* Dot field in warm hues */
.embers::before{
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,160,80,.28) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 140px 90px, rgba(255,220,160,.22) 99%, transparent 100%),
    radial-gradient(1.8px 1.8px at 260px 180px, rgba(255,140,60,.18) 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 340px 120px, rgba(255,200,140,.18) 99%, transparent 100%);
}
.embers::after{
  background-image:
    radial-gradient(1.6px 1.6px at 80px 60px, rgba(255,190,120,.22) 99%, transparent 100%),
    radial-gradient(1.4px 1.4px at 220px 140px, rgba(255,120,60,.2) 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 320px 200px, rgba(255,220,160,.16) 99%, transparent 100%),
    radial-gradient(1px 1px at 420px 260px, rgba(255,180,100,.16) 99%, transparent 100%);
}

/* Optional: tiny spark layer for extra depth */
.embers .sparks{ position:absolute; inset:-60vh -60vw; background-repeat:repeat; background-size: 280px 220px; opacity:.35; animation: emberDrift 36s linear infinite; }
.embers .sparks{ background-image:
  radial-gradient(1px 1px at 60px 80px, rgba(255,215,106,.25) 99%, transparent 100%),
  radial-gradient(1px 1px at 180px 40px, rgba(255,160,80,.22) 99%, transparent 100%),
  radial-gradient(1px 1px at 260px 160px, rgba(255,220,160,.2) 99%, transparent 100%);
}

/* HUD panel floats over video with subtle blur, capped height with internal scroll */
#scene-hud.panel{ background: rgba(12, 22, 36, 0.18) !important; border-color: rgba(124,196,255,0.18); box-shadow: 0 10px 60px #0a1726; backdrop-filter: blur(6px) saturate(120%); max-height: 90vh; display:flex; }
#scene-hud .head, #scene-hud .body, #scene-hud .btnrow, #scene-hud .footer{ background: transparent; }

/* HUD modern layout */
.hud-wrap{ display:flex; flex-direction:column; gap:14px; width:100%; min-height:0; }
.hud-header{ display:flex; flex-wrap:wrap; column-gap:12px; row-gap:2px; align-items:flex-start; justify-content:space-between; }
/* Nudge XP row slightly closer to pills */
.hud-header .hud-xp{ margin-top:-2px; }
.hud-header{ position:relative; }
.hud-header::before{ content:""; position:absolute; inset:-20px -20px auto -20px; height:80px; pointer-events:none; z-index:0;
  background:
    radial-gradient(2px 2px at 20px 18px, rgba(255,215,106,.18) 99%, transparent 100%),
    radial-gradient(1.6px 1.6px at 160px 22px, rgba(124,196,255,.16) 99%, transparent 100%),
    radial-gradient(1.4px 1.4px at 320px 10px, rgba(200,230,255,.14) 99%, transparent 100%);
  transform: translateY(0);
  animation: hudDrift 18s ease-in-out infinite;
}
@keyframes hudDrift{ 50% { transform: translateY(6px); opacity:.9 } }
.hud-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.hud-pills.row1, .hud-pills.row2, .hud-pills.row3{ width:100%; }
.hud-pills.row1, .hud-pills.row2{ justify-content:flex-start; }
.hud-pills.row3{ justify-content:center; }
.hud-pill{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid rgba(38,59,90,0.5);
  background: linear-gradient(rgba(12,22,36,0.28), rgba(12,22,36,0.18)); box-shadow: inset 0 0 0 1px rgba(36,72,91,0.35); }
.hud-pill.small{ padding:6px 10px; }
.hud-pill.guild-pill{ gap:10px; }
.hud-pill.guild-pill .crest{ width:18px; height:18px; object-fit:contain; border-radius:50%; filter: drop-shadow(0 1px 1px #000); }
.hud-pill .ico{ width:18px; height:18px; background-size:contain; background-repeat:no-repeat; border-radius:50%; filter: drop-shadow(0 1px 1px #000); }
.hud-pill .t{ font-size:12px; color:#cfe4ff; letter-spacing:.02em; }
.hud-pill:hover{ border-color: rgba(47,111,184,0.55); box-shadow: inset 0 0 0 1px rgba(47,111,184,0.4); }
.hud-pill:focus-visible{ outline:2px solid rgba(207,176,110,0.45); }
.hud-motto{ width:100%; text-align:center; font-family:"Cinzel", serif; letter-spacing:.05em; color:#ffd76a; text-shadow: 0 0 18px rgba(255,215,106,0.3); margin-top:2px; }
.hud-motto:empty{ display:none; }
.hud-xp{ min-width:220px; width:100%; display:flex; align-items:center; gap:10px; }
.hud-xpbar{ flex:1 1 auto; min-width:0; position:relative; height:14px; border-radius:10px; overflow:hidden; border:1px solid rgba(34,61,77,0.7); background: rgba(13,31,41,0.6); box-shadow: inset 0 0 0 1px rgba(37,68,87,0.35); }
.hud-xpbar.bump{ animation: xpBump 460ms ease; }
@keyframes xpBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.02); box-shadow: 0 0 20px rgba(213,182,118,0.18), inset 0 0 0 1px rgba(37,68,87,0.35); } 100%{ transform:scale(1); } }
.hud-xpfill{ height:100%; background: linear-gradient(90deg,#e8c373,#d5a951); box-shadow: 0 0 10px #d5b67677 inset; transition: width 400ms ease; }
.hud-xplabel{ position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:#0b111b; font-weight:700; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.hud-xptext{ margin-top:6px; text-align:center; font-size:12px; color:#cfe2ee; text-shadow:0 1px 0 #0009; }
.hud-main{ display:grid; grid-template-columns: 260px 1fr; gap:14px; flex:1 1 auto; min-height:0; overflow:hidden; }
.hud-nav{ overflow:auto; min-height:0; }
.hud-panel{ overflow:auto; min-height:0; }
.hud-nav{ display:flex; flex-direction:column; gap:10px; }
.tile{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid rgba(28,63,82,0.7);
  background: linear-gradient(rgba(19,58,75,0.28), rgba(17,47,60,0.18)); box-shadow: inset 0 0 0 1px rgba(36,74,94,0.35); color:#d7ecff; cursor:pointer; text-align:left; }
.tile:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(42,87,112,0.6); }
.tile.active{ outline: 2px solid rgba(207,176,110,0.35); background:linear-gradient(rgba(20,46,60,0.32), rgba(16,41,53,0.22)); }
.tile:focus-visible{ outline:2px solid rgba(207,176,110,0.55); }
.tile .ico{ width:34px; height:34px; border-radius:8px; background-size:contain; background-repeat:no-repeat; background-position:center; box-shadow:0 1px 2px rgba(0,0,0,0.5); }
.tile .label{ display:flex; flex-direction:column; line-height:1.1; }
.tile .label .h{ font-family:"Cinzel", serif; letter-spacing:.04em; }
.tile .label .s{ font-size:12px; color:#9fb4c2; }
.hud-panel{ min-height:420px; padding:12px; border-radius:14px; border:1px solid rgba(26,56,71,0.8); background: linear-gradient(rgba(21,47,61,0.22), rgba(17,41,54,0.12)); box-shadow: inset 0 0 0 1px rgba(36,72,91,0.35); }
.hud-panel .section{ background: linear-gradient(rgba(21,47,61,0.26), rgba(17,41,54,0.16)); border:1px solid rgba(26,57,74,0.8); border-radius:12px; box-shadow: inset 0 0 0 1px rgba(36,72,91,0.35); padding:12px 14px; margin-top:10px; }
.hud-panel-inner.hidden{ display:none; }

/* HUD icons (local to Onboarding folder) */
.ico-oracle{ background-image:url('Oracle.png'); }
.ico-quests{ background-image:url('Quests.png'); }
.ico-inventory{ background-image:url('Inventory.png'); }
.ico-guild{ background-image:url('Guild.png'); }
.ico-chronicle{ background-image:url('Chronicle.png'); }
.ico-map{ background-image:url('Map.png'); }
.ico.rank{ background-image:url('Rank.png'); }
.ico.level{ background-image:url('Level.png'); }
.ico.class{ background-image:url('Class.png'); }
.ico.arc{ background-image:url('Map.png'); }
.ico.episode{ background-image:url('Chronicle.png'); }
.ico.alias{ background-image:url('Class.png'); }

/* Crest halo pulse */
#hudGuildCrest{ filter: drop-shadow(0 0 8px rgba(255,215,106,0.22)); }
#hudGuildCrest{ animation: crestHalo 5s ease-in-out infinite; }
@keyframes crestHalo{ 50% { filter: drop-shadow(0 0 14px rgba(255,215,106,0.35)) drop-shadow(0 0 28px rgba(255,215,106,0.18)); } }

/* Fallback if backdrop-filter is not supported (prevents white box) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #scene-hud.panel{ backdrop-filter:none; -webkit-backdrop-filter:none; background: rgba(12,22,36,0.45) !important; }
}

/* Subtle pulse/glow for reveal buttons */
@keyframes pulseGlowBlue {
  0%, 100% { box-shadow: 0 0 0 rgba(124,196,255,0); }
  50% { box-shadow: 0 0 22px rgba(124,196,255,0.45), 0 0 48px rgba(124,196,255,0.22); }
}

/* HUD Quests minimal styling (non-invasive) */
.pill-title { font-family: Cinzel, serif; margin: 12px 0 6px; opacity: 0.9; }
.quest-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; margin:6px 0; background:rgba(255,255,255,0.03);
}
.quest-title { font-family: Cardo, serif; font-size: 0.95rem; }
.quest-actions { display:flex; gap:10px; align-items:center; }
.btn-complete {
  padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  cursor:pointer; font-family: Cinzel, serif;
}
.btn-complete:hover { transform: translateY(-1px); }
.quest-completed {
  color:#1db954; /* noble green */
  font-weight:600; font-family: Cinzel, serif;
}

/* Intro skip hint: move to top-left to avoid overlap with bottom-right utilities */
#introHint{
  position:fixed; top:14px; left:14px; right:auto; bottom:auto;
  z-index:10000; padding:6px 10px; border-radius:10px;
  background: rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(3px);
}
@keyframes pulseGlowGold {
  0%, 100% { box-shadow: 0 0 0 rgba(255,215,106,0); }
  50% { box-shadow: 0 0 22px rgba(255,215,106,0.45), 0 0 48px rgba(255,215,106,0.22); }
}
#revealOverride.btn{
  border-color:#2f6fb8;
  animation: pulseGlowBlue 2800ms ease-in-out infinite;
}
#revealOverride.btn:hover{
  box-shadow: 0 0 26px rgba(124,196,255,0.55), 0 0 60px rgba(124,196,255,0.25);
}

/* Oracle Journal: immersive glassy textarea styling */
#scene-hud #oracle #journalText{
  width:100%;
  min-height:140px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(38,59,90,0.65);
  background: linear-gradient(180deg, rgba(15,28,44,0.35), rgba(12,24,39,0.22));
  box-shadow:
    inset 0 0 0 1px rgba(36,72,91,0.35),
    0 8px 24px rgba(0,0,0,0.35);
  color:#d7ecff;
  font-family: "Cardo", serif;
  font-size: 0.98rem;
  line-height:1.45;
  caret-color:#ffd76a;
  transition: border-color 180ms ease, box-shadow 200ms ease, background 200ms ease;
  resize: vertical;
}
#scene-hud #oracle #journalText::placeholder{ color:#a8c1d1; opacity:.85; }
#scene-hud #oracle #journalText:focus{
  outline:none;
  border-color: rgba(207,176,110,0.65);
  box-shadow:
    0 0 0 2px rgba(207,176,110,0.20) inset,
    0 12px 30px rgba(0,0,0,0.45),
    0 0 22px rgba(207,176,110,0.12);
  background: linear-gradient(180deg, rgba(18,33,54,0.42), rgba(14,27,45,0.26));
}
@supports ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))){
  #scene-hud #oracle #journalText{
    backdrop-filter: blur(3px) saturate(120%);
    -webkit-backdrop-filter: blur(3px) saturate(120%);
  }
}
@media (prefers-reduced-motion: reduce){
  #scene-hud #oracle #journalText{ transition: none; }
}
/* Generic HUD textarea styling for other panels (matches journal aesthetic) */
#scene-hud .hud-panel .section textarea{
  width:100%;
  min-height:120px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(38,59,90,0.6);
  background: linear-gradient(180deg, rgba(15,28,44,0.32), rgba(12,24,39,0.20));
  box-shadow: inset 0 0 0 1px rgba(36,72,91,0.3), 0 6px 18px rgba(0,0,0,0.3);
  color:#d7ecff;
  font-family: "Cardo", serif;
  font-size: 0.96rem;
  line-height:1.45;
  caret-color:#ffd76a;
  transition: border-color 180ms ease, box-shadow 200ms ease, background 200ms ease;
  resize: vertical;
}
#scene-hud .hud-panel .section textarea::placeholder{ color:#a8c1d1; opacity:.85; }
#scene-hud .hud-panel .section textarea:focus{
  outline:none;
  border-color: rgba(207,176,110,0.6);
  box-shadow: 0 0 0 2px rgba(207,176,110,0.18) inset, 0 10px 26px rgba(0,0,0,0.4), 0 0 18px rgba(207,176,110,0.1);
  background: linear-gradient(180deg, rgba(18,33,54,0.38), rgba(14,27,45,0.24));
}
@supports ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))){
  #scene-hud .hud-panel .section textarea{
    backdrop-filter: blur(3px) saturate(120%);
    -webkit-backdrop-filter: blur(3px) saturate(120%);
  }
}
@media (prefers-reduced-motion: reduce){
  #scene-hud .hud-panel .section textarea{ transition: none; }
}
#revealAccept.btn{
  border-color:#d2a83a;
  animation: pulseGlowGold 2800ms ease-in-out infinite;
}
#revealAccept.btn:hover{
  box-shadow: 0 0 26px rgba(255,215,106,0.55), 0 0 60px rgba(255,215,106,0.25);
}
@media (prefers-reduced-motion: reduce){
  #scene-reveal .btn{ animation: none; }
}
/* XP bar subtle pulse on increase */
@keyframes xpPulseGlow {
  0% { box-shadow: 0 0 0 rgba(255,215,106,0); }
  40% { box-shadow: 0 0 18px rgba(255,215,106,0.35), 0 0 36px rgba(124,196,255,0.25); }
  100% { box-shadow: 0 0 0 rgba(255,215,106,0); }
}
#hudXpFill.xp-pulse, #xp-bar-fill.xp-pulse{
  animation: xpPulseGlow 700ms ease-out;
}
/* Chronicle panel controls */
#chronicle-close{
  font-family: Cinzel, serif;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  cursor: pointer;
}
#chronicle-close:hover{ transform: translateY(-1px); }
#chronicle-status{ margin-left: 8px; opacity: 0.8; }

/* Chronicle list styles */
.chronicle-list { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0; }
.chronicle-list li { margin: 4px 0; }

/* Seal icon sizing (for Chronicle status and button) */
.seal-icon{
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  margin-right: 8px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 4px rgba(255,215,106,0.35));
}

/* Chronicle header controls: match HUD glass aesthetic */
#chronicle-date{
  appearance: none;
  -webkit-appearance: none;
  border-radius: 10px;
  border: 1px solid rgba(38,59,90,0.6);
  background: linear-gradient(180deg, rgba(15,28,44,0.32), rgba(12,24,39,0.20));
  color: #d7ecff;
  font-family: "Cardo", serif;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1px rgba(36,72,91,0.3), 0 6px 18px rgba(0,0,0,0.25);
}
#chronicle-date::-webkit-calendar-picker-indicator{ filter: invert(85%); opacity: .9; }
#chronicle-date:focus{
  outline: none;
  border-color: rgba(207,176,110,0.6);
  box-shadow: 0 0 0 2px rgba(207,176,110,0.18) inset, 0 10px 26px rgba(0,0,0,0.35), 0 0 18px rgba(207,176,110,0.10);
}
@supports ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))){
  #chronicle-date{ backdrop-filter: blur(3px) saturate(120%); -webkit-backdrop-filter: blur(3px) saturate(120%); }
}

/* Quests header date input should match Chronicle aesthetic */
#quests #qDate{
  appearance: none;
  -webkit-appearance: none;
  border-radius: 10px;
  border: 1px solid rgba(38,59,90,0.6);
  background: linear-gradient(180deg, rgba(15,28,44,0.32), rgba(12,24,39,0.20));
  color: #d7ecff;
  font-family: "Cardo", serif;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1px rgba(36,72,91,0.3), 0 6px 18px rgba(0,0,0,0.25);
}
#quests #qDate::-webkit-calendar-picker-indicator{ filter: invert(85%); opacity: .9; }
#quests #qDate:focus{
  outline: none;
  border-color: rgba(207,176,110,0.6);
  box-shadow: 0 0 0 2px rgba(207,176,110,0.18) inset, 0 10px 26px rgba(0,0,0,0.35), 0 0 18px rgba(207,176,110,0.10);
}
@supports ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))){
  #quests #qDate{ backdrop-filter: blur(3px) saturate(120%); -webkit-backdrop-filter: blur(3px) saturate(120%); }
}

/* Chronicle action buttons */
#chronicle-load,
#chronicle-seal,
#chronicle-reopen{
  font-family: Cinzel, serif;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  cursor: pointer;
}
#quests .glass-input,
#quests .glass-select{
  appearance: none;
  -webkit-appearance: none;
  border-radius: 10px;
  border: 1px solid rgba(38,59,90,0.6);
  background: linear-gradient(180deg, rgba(15,28,44,0.32), rgba(12,24,39,0.20));
  color: #d7ecff;
  font-family: "Cardo", serif;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1px rgba(36,72,91,0.3), 0 6px 18px rgba(0,0,0,0.25);
}
#quests .glass-button{
  font-family: Cinzel, serif;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  color: #eaf7ff;
  cursor: pointer;
}
#quests .glass-button:hover{ transform: translateY(-1px); }

/* Quest cards */
.quest-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width: 720px){ .quest-grid{ grid-template-columns: 1fr; } }
.quest-card-old{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter: blur(12px);
  transition: box-shadow 200ms ease;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
}
.quest-card-old:hover{ box-shadow: 0 12px 30px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.08); }
.quest-card-old::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}
.quest-card-old.cat-body::before{ background: radial-gradient(120px 80px at 25% 35%, rgba(255,177,66,0.18), transparent 60%); }
.quest-card-old.cat-mind::before{ background: radial-gradient(120px 80px at 25% 35%, rgba(88,171,255,0.18), transparent 60%); }
.quest-card-old.cat-spirit::before{ background: radial-gradient(120px 80px at 25% 35%, rgba(178,102,255,0.18), transparent 60%); }
.quest-card-old:hover::before{ opacity: 1; }
.quest-card-old.cat-body{ border-color: rgba(255, 177, 66, 0.40); box-shadow: 0 10px 26px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255, 177, 66, 0.18); }
.quest-card-old.cat-mind{ border-color: rgba(88, 171, 255, 0.40); box-shadow: 0 10px 26px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(88, 171, 255, 0.18); }
.quest-card-old.cat-spirit{ border-color: rgba(178, 102, 255, 0.40); box-shadow: 0 10px 26px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(178, 102, 255, 0.18); }
.quest-card-old.cat-general{ border-color: rgba(255,255,255,0.12); }
.quest-main-old{ display:flex; flex-direction:column; gap:4px; }
.quest-title-old{ font-weight: 600; color:#eaf7ff; }
.quest-meta-old{ opacity:.85; font-size: 12px; color:#bcd3ea; }
.quest-actions-old{ display:flex; align-items:center; gap:8px; }
.quest-emoji{ width:18px; height:18px; object-fit:contain; vertical-align:middle; margin-right:6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.badge-completed{
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(46,204,113,0.22), rgba(46,204,113,0.12));
  border: 1px solid rgba(46,204,113,0.45);
  color: #eafff0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 6px 14px rgba(0,0,0,0.25);
}
.badge-completed.pop-in{ animation: popIn 260ms ease-out; transform-origin: center; }
@keyframes popIn { 0%{ transform: scale(0.86); opacity: 0; } 60%{ transform: scale(1.04); opacity: 1; } 100%{ transform: scale(1); } }
.pill-open{
  background: rgba(255,255,255,0.10);
  color: #d7ecff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 600; font-size: 12px;
  border: 1px solid rgba(255,255,255,0.16);
}
/* Category-tinted hover for Complete buttons */
.quest-card-old .glass-button{ transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.quest-card-old.cat-body .glass-button:hover{ border-color: rgba(255,177,66,0.55); background-color: rgba(255,177,66,0.10); box-shadow: 0 0 0 1px rgba(255,177,66,0.25) inset, 0 6px 14px rgba(0,0,0,0.25); }
.quest-card-old.cat-mind .glass-button:hover{ border-color: rgba(88,171,255,0.55); background-color: rgba(88,171,255,0.10); box-shadow: 0 0 0 1px rgba(88,171,255,0.25) inset, 0 6px 14px rgba(0,0,0,0.25); }
.quest-card-old.cat-spirit .glass-button:hover{ border-color: rgba(178,102,255,0.55); background-color: rgba(178,102,255,0.10); box-shadow: 0 0 0 1px rgba(178,102,255,0.25) inset, 0 6px 14px rgba(0,0,0,0.25); }
.group-title{ font-family: Cinzel, serif; margin:12px 4px 6px; color:#e7f0ff; }
.group-title .title-row{ display:flex; align-items:center; gap:8px; }
.group-title .medallion{ width:24px; height:24px; object-fit:contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
#btnSignIn.account-btn, #btnSignOut.account-btn{
  font-family: Cinzel, serif;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  cursor: pointer;
}
#chronicle-load:hover,
#chronicle-seal:hover,
#chronicle-reopen:hover{ transform: translateY(-1px); }
#btnSignIn.account-btn:hover, #btnSignOut.account-btn:hover{ transform: translateY(-1px); }

/* Slight differentiation: Reopen can have a subtle caution tint */
#chronicle-reopen{
  border-color: rgba(255,215,106,0.45);
  background: linear-gradient(180deg, rgba(255,215,106,0.18), rgba(255,215,106,0.06));
  box-shadow: 0 0 0 1px rgba(255,215,106,0.16) inset, 0 8px 24px rgba(0,0,0,0.25);
}
#chronicle-reopen:hover{
  box-shadow: 0 0 0 2px rgba(255,215,106,0.20) inset, 0 10px 28px rgba(0,0,0,0.32);
}

/* Crest synchronized glow */
@keyframes pulseCrest {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(124,196,255,0.20)) drop-shadow(0 0 0 rgba(255,215,106,0)); }
  50% { filter: drop-shadow(0 0 26px rgba(124,196,255,0.35)) drop-shadow(0 0 38px rgba(255,215,106,0.18)); }
}
#revealCrest{ animation: pulseCrest 2800ms ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  #revealCrest{ animation: none; }
}

/* Sparkle burst (gold) */
.sparkle{ position:absolute; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,215,106,1) 0%, rgba(255,215,106,0.8) 40%, rgba(255,215,106,0) 70%);
  pointer-events:none; filter: drop-shadow(0 0 8px rgba(255,215,106,0.6)); opacity:0; z-index:5;
  animation: sparkleFly var(--dur,700ms) ease-out var(--delay,0ms) forwards;
}
@keyframes sparkleFly{
  0%{ opacity:0; transform: translate(-50%, -50%) scale(0.6); }
  8%{ opacity:1; }
  100%{ opacity:0; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -60px))) scale(var(--scale,1)); }
}
@media (prefers-reduced-motion: reduce){ .sparkle{ animation: none; opacity:0; } }

/* Fix pulse animation overflow and improve aesthetics */
.tile {
  overflow: hidden !important;
  position: relative !important;
}

.tile .ico {
  overflow: hidden !important;
}

/* Quest PILL pulsing when approving - ENTIRE PILL GLOWS BRIGHT GREEN */
.hud-nav .tile.pulse,
.hud-nav .tile.pulse-glow,
.hud-nav .tile.icon-pulse,
.hud-nav .tile[data-panel="quests"].pulse,
.hud-nav .tile[data-panel="quests"].pulse-glow,
.hud-nav .tile[data-panel="quests"].icon-pulse {
  animation: questPillPulse 1s ease-in-out infinite !important;
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
}

@keyframes questPillPulse {
  0%, 100% { 
    transform: scale(1) !important;
    background: linear-gradient(135deg, 
      rgba(0, 255, 0, 0.15), 
      rgba(0, 200, 0, 0.1)) !important;
    box-shadow: 
      0 0 0 rgba(0, 255, 0, 0),
      inset 0 0 0 rgba(0, 255, 0, 0) !important;
    border-color: rgba(0, 255, 0, 0.3) !important;
  }
  50% { 
    transform: scale(1.1) !important;
    background: linear-gradient(135deg, 
      rgba(0, 255, 0, 0.4), 
      rgba(0, 200, 0, 0.25)) !important;
    box-shadow: 
      0 0 40px rgba(0, 255, 0, 0.9),
      0 0 80px rgba(0, 255, 0, 0.5),
      0 0 120px rgba(0, 255, 0, 0.3),
      inset 0 0 20px rgba(0, 255, 0, 0.4) !important;
    border-color: rgba(0, 255, 0, 0.8) !important;
  }
}

/* Make the entire quest pill content glow */
.hud-nav .tile[data-panel="quests"].pulse,
.hud-nav .tile[data-panel="quests"].pulse-glow,
.hud-nav .tile[data-panel="quests"].icon-pulse {
  border: 2px solid rgba(0, 255, 0, 0.5) !important;
}

.hud-nav .tile[data-panel="quests"].pulse .ico,
.hud-nav .tile[data-panel="quests"].pulse-glow .ico,
.hud-nav .tile[data-panel="quests"].icon-pulse .ico,
.hud-nav .tile[data-panel="quests"].pulse .label,
.hud-nav .tile[data-panel="quests"].pulse-glow .label,
.hud-nav .tile[data-panel="quests"].icon-pulse .label {
  filter: brightness(1.4) drop-shadow(0 0 10px rgba(0, 255, 0, 0.8)) !important;
}

.pulse-glow {
  animation: pulse-glow-contained 2s infinite !important;
}

@keyframes pulse-glow-contained {
  0%, 100% { 
    transform: scale(1) !important;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.4) !important;
  }
  50% { 
    transform: scale(1.03) !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.7) !important;
  }
}

/* Enhanced quest form styling */
.quest-inline-create input[type="text"],
.quest-inline-create select,
#quest-title-input,
#quest-difficulty-select,
#quest-category-select {
  font-family: 'Cardo', serif !important;
  background: linear-gradient(180deg, rgba(15,28,44,0.4), rgba(12,24,39,0.25)) !important;
  border: 1px solid rgba(38,59,90,0.8) !important;
  color: #d7ecff !important;
  box-shadow: inset 0 0 0 1px rgba(36,72,91,0.4), 0 8px 20px rgba(0,0,0,0.3) !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.quest-inline-create input[type="text"]:focus,
.quest-inline-create select:focus,
#quest-title-input:focus,
#quest-difficulty-select:focus,
#quest-category-select:focus {
  outline: none !important;
  border-color: rgba(124,196,255,0.6) !important;
  box-shadow: inset 0 0 0 1px rgba(124,196,255,0.3), 0 0 20px rgba(124,196,255,0.2) !important;
}

#quest-title-input::placeholder {
  color: rgba(159, 176, 200, 0.7) !important;
  font-style: italic !important;
}

/* Enhanced quest completion button styling */
.quest-complete-btn {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.quest-complete-btn:not(.completed):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(124,196,255,0.3) !important;
}

/* Completed quest button - enhanced aesthetics */
.quest-complete-btn.completed,
.quest-complete-btn:contains("✓ Done") {
  background: linear-gradient(135deg, rgba(0,255,0,0.25), rgba(0,200,0,0.15)) !important;
  color: #90EE90 !important;
  border: 1px solid rgba(0,255,0,0.5) !important;
  box-shadow: 0 0 15px rgba(0,255,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  text-shadow: 0 0 8px rgba(0,255,0,0.6) !important;
}

/* Standardized tab pills with consistent icon sizing */
.hud-nav .tile {
  padding: 10px 12px !important;
  min-width: auto !important;
  width: auto !important;
  max-width: 160px !important;
  gap: 12px !important;
}

.hud-nav .tile .ico {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}

.hud-nav .tile .label {
  gap: 2px !important;
  flex: 1 !important;
}

.hud-nav .tile .label .h {
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
}

.hud-nav .tile .label .s {
  font-size: 11px !important;
  line-height: 1 !important;
  opacity: 0.8 !important;
}

/* Match gap between nav and content area to player pill spacing */
.hud-main {
  gap: 10px !important;
  display: flex !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  overflow: visible !important;
}

/* Expand content area to use ALL available space */
.hud-panel {
  flex: 1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.hud-panel-inner {
  height: 100% !important;
  overflow-y: auto !important;
  width: 100% !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Ensure navigation stays compact */
.hud-nav {
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: auto !important;
  gap: 8px !important;
}