/* ═══════════════════════════════════════════════
   css/overlays.css
═══════════════════════════════════════════════ */
.overlay {
  position: absolute; inset: 0;
  z-index: var(--z-overlay);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(13,10,5,.96); padding: 16px;
}
.overlay.active { display: flex; }

/* ── COMBAT ── */
#overlay-combat { background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(42,10,10,.95) 0%, rgba(13,10,5,.98) 70%); }
.combat-scene   { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 480px; }
.enemy-stage    { text-align: center; margin-bottom: 16px; }
.enemy-glyph    { font-size: 72px; animation: float 3s ease-in-out infinite; display: block; margin-bottom: 8px; }
.enemy-name-display { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--blood-light); letter-spacing: .08em; text-shadow: 0 0 20px rgba(139,26,26,.5); }
.enemy-hp-wrap  { margin: 8px auto 0; width: 220px; }
.enemy-hp-track { height: 7px; background: rgba(42,10,10,.8); border: 1px solid rgba(139,26,26,.4); border-radius: 2px; overflow: hidden; }
.enemy-hp-fill  { height: 100%; background: linear-gradient(90deg, var(--blood), var(--blood-mid)); transition: width .5s cubic-bezier(.4,0,.2,1); }
.enemy-hp-text  { font-size: 10px; color: var(--ash); text-align: center; margin-top: 3px; }
.enemy-desc-text{ font-style: italic; color: var(--ash); font-size: 12px; margin-top: 6px; text-align: center; }
.combat-log { width: 100%; max-width: 480px; background: rgba(26,18,8,.8); border: 1px solid var(--border); padding: 10px 12px; height: 90px; overflow-y: auto; font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.log-hit    { color: var(--blood-light); }
.log-heal   { color: #70C070; }
.log-dharma { color: var(--dharma-light); }
.log-mara   { color: var(--mara-light); }
.log-miss   { color: var(--ash); font-style: italic; }
.log-crit   { color: #FFD700; font-weight: 600; }
.combat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; max-width: 480px; }
.ca-btn {
  font-family: var(--font-display); font-size: 10px; letter-spacing: .1em;
  padding: 11px 8px; border: 1px solid; background: transparent; cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ca-btn .ca-cost { font-size: 9px; opacity: .7; font-family: var(--font-body); letter-spacing: .02em; }
.ca-attack { border-color: var(--blood);     color: #E07070; } .ca-attack:hover { background: rgba(139,26,26,.2); }
.ca-mantra { border-color: #2A5A8A;          color: #80B4E0; } .ca-mantra:hover { background: rgba(36,85,130,.2); }
.ca-dharma { border-color: var(--dharma);    color: var(--dharma-light); } .ca-dharma:hover { background: rgba(46,125,110,.2); }
.ca-item   { border-color: var(--gold-dark); color: var(--gold); }           .ca-item:hover   { background: rgba(107,82,24,.2); }
.ca-flee   { border-color: var(--stone);     color: var(--ash-light); grid-column: span 2; } .ca-flee:hover { background: rgba(74,55,40,.2); }
.ca-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── MARA DEBATE ── */
#overlay-debate { background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(42,10,60,.96) 0%, rgba(13,10,5,.99) 70%); }
.debate-scene   { width: 100%; max-width: 540px; animation: combatEntry .4s ease; }
.debate-title   { font-family: var(--font-display); font-size: 18px; color: var(--mara-light); letter-spacing: .12em; animation: maraShimmer 4s ease-in-out infinite; text-shadow: 0 0 30px rgba(138,80,192,.4); text-align: center; }
.debate-subtitle{ font-size: 13px; color: var(--ash); font-style: italic; margin-top: 4px; text-align: center; margin-bottom: 20px; }
.debate-mara-says { background: rgba(58,26,90,.3); border: 1px solid rgba(138,80,192,.3); padding: 14px 16px; margin-bottom: 14px; font-size: 14px; line-height: 1.7; color: var(--parch-dim); position: relative; }
.debate-mara-says::before { content: 'Mara speaks:'; font-family: var(--font-display); font-size: 9px; letter-spacing: .1em; color: var(--mara-light); position: absolute; top: -8px; left: 12px; background: rgba(13,10,5,.9); padding: 0 6px; }
.debate-mara-says em { color: var(--mara-light); }
.debate-hp          { margin-bottom: 12px; }
.debate-hp-label    { font-size: 10px; color: var(--ash); margin-bottom: 4px; }
.debate-hp-track    { height: 5px; background: rgba(58,26,90,.4); border: 1px solid rgba(138,80,192,.3); border-radius: 2px; overflow: hidden; }
.debate-hp-fill     { height: 100%; background: linear-gradient(90deg, var(--mara), var(--mara-light)); transition: width .5s; }
.debate-timer       { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.timer-label        { font-size: 10px; color: var(--ash); font-family: var(--font-display); letter-spacing: .06em; }
.timer-track        { flex: 1; height: 3px; background: rgba(42,26,16,.6); border-radius: 2px; overflow: hidden; }
.timer-fill         { height: 100%; background: linear-gradient(90deg, var(--gold), var(--blood-light)); transition: width .1s linear; }
.debate-choices     { display: flex; flex-direction: column; gap: 6px; }
.debate-choice      { background: rgba(26,18,8,.7); border: 1px solid rgba(58,26,90,.4); padding: 12px 14px; cursor: pointer; transition: all .2s; font-size: 13px; color: var(--parch-dim); text-align: left; line-height: 1.5; }
.debate-choice:hover { border-color: var(--mara-light); background: rgba(58,26,90,.2); color: var(--parch); }
.debate-choice .choice-hint { font-size: 10px; color: var(--ash); margin-top: 4px; font-style: italic; }
.debate-feedback    { padding: 12px 16px; margin-bottom: 14px; border: 1px solid; font-size: 13px; line-height: 1.6; }
.feedback-good      { border-color: var(--dharma);    color: var(--dharma-light); background: rgba(46,125,110,.1); }
.feedback-bad       { border-color: var(--blood);     color: var(--blood-light);  background: rgba(139,26,26,.1); }
.feedback-great     { border-color: var(--gold);      color: var(--gold);         background: rgba(201,168,76,.08); animation: glowPulse 2s infinite; }

/* ── MAP ── */
#overlay-map { background: radial-gradient(ellipse at 50% 30%, rgba(20,10,5,.97) 0%, rgba(13,10,5,.99) 60%); }
.map-title    { font-family: var(--font-display); font-size: 18px; color: var(--gold); letter-spacing: .1em; margin-bottom: 4px; text-align: center; }
.map-sub      { font-style: italic; color: var(--ash); font-size: 13px; text-align: center; margin-bottom: 20px; }
.map-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; max-width: 440px; width: 100%; margin-bottom: 16px; }
.map-loc      { background: rgba(26,18,8,.8); border: 1px solid var(--border); padding: 14px 10px; text-align: center; cursor: pointer; transition: all .2s; }
.map-loc:hover:not(.locked) { border-color: var(--gold-dim); background: rgba(42,26,16,.8); }
.map-loc.locked  { opacity: .4; cursor: not-allowed; }
.map-loc.current { border-color: var(--gold); background: rgba(42,26,16,.8); }
.map-loc-icon { font-size: 26px; margin-bottom: 5px; }
.map-loc-name { font-family: var(--font-display); font-size: 10px; color: var(--gold); letter-spacing: .06em; }
.map-loc-sub  { font-size: 10px; color: var(--ash); margin-top: 2px; }

/* ── SAVE/LOAD ── */
.save-panel       { max-width: 380px; width: 100%; }
.save-title       { font-family: var(--font-display); font-size: 16px; color: var(--gold); letter-spacing: .1em; margin-bottom: 16px; text-align: center; }
.save-slot        { background: rgba(26,18,8,.8); border: 1px solid var(--border); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 12px; }
.save-slot:hover  { border-color: var(--gold-dim); }
.save-slot-num    { font-family: var(--font-display); font-size: 20px; color: var(--gold-dark); }
.save-slot-info   { flex: 1; }
.save-slot-name   { font-size: 12px; color: var(--parch-dim); }
.save-slot-meta   { font-size: 10px; color: var(--ash); margin-top: 2px; }
.save-slot-action { font-size: 10px; color: var(--gold-dim); font-family: var(--font-display); letter-spacing: .06em; }

/* ── GAME OVER ── */
#overlay-gameover     { background: rgba(13,10,5,.99); text-align: center; }
.go-title             { font-family: var(--font-display); font-size: 28px; color: var(--blood-light); letter-spacing: .15em; margin-bottom: 8px; text-shadow: 0 0 30px rgba(139,26,26,.4); }
.go-sub               { font-style: italic; color: var(--ash); margin-bottom: 24px; }
.go-score             { font-family: var(--font-display); font-size: 40px; color: var(--gold); margin-bottom: 4px; }
.go-score-label       { font-size: 12px; color: var(--ash); letter-spacing: .1em; margin-bottom: 24px; }

/* ── ENDING ── */
#overlay-ending   { background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(26,20,10,.97) 0%, rgba(13,10,5,.99) 60%); }
.ending-container { max-width: 520px; width: 100%; text-align: center; padding: 20px 0; }
.ending-icon      { font-size: 64px; margin-bottom: 12px; animation: float 4s ease-in-out infinite; }
.ending-title     { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .1em; margin-bottom: 6px; }
.ending-dharma-label { font-size: 12px; color: var(--ash); margin-bottom: 20px; }
.ending-text      { font-size: 15px; line-height: 1.8; color: var(--parch-dim); text-align: left; margin-bottom: 20px; }
.ending-text em   { color: var(--gold); font-style: italic; }
.ending-text strong { color: var(--parch); }
.ending-stats     { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 24px; }
.ending-stat      { background: rgba(26,18,8,.8); border: 1px solid var(--border); padding: 12px 8px; text-align: center; }
.ending-stat-val  { font-family: var(--font-display); font-size: 20px; color: var(--gold); }
.ending-stat-key  { font-size: 10px; color: var(--ash); margin-top: 2px; }

/* ── NOTIFICATIONS ── */
.notif {
  position: fixed; top: 52px; right: 12px; z-index: var(--z-toast);
  padding: 8px 14px; border: 1px solid;
  font-size: 12px; max-width: 220px;
  animation: notifDrop 2.8s ease forwards;
  pointer-events: none;
}
.notif-gold   { border-color: var(--gold-dark); color: var(--gold);         background: rgba(13,10,5,.95); }
.notif-dharma { border-color: var(--dharma);    color: var(--dharma-light); background: rgba(13,10,5,.95); }
.notif-blood  { border-color: var(--blood);     color: var(--blood-light);  background: rgba(13,10,5,.95); }
.notif-lore   { border-color: var(--ash);       color: var(--parch-dim);    background: rgba(13,10,5,.95); }

/* Achievement toast */
.achievement-toast {
  position: fixed; bottom: 20px; left: 50%; z-index: var(--z-toast);
  background: rgba(13,10,5,.98); border: 1px solid var(--gold);
  padding: 12px 20px; text-align: center;
  animation: achievementPop 3.5s ease forwards;
  pointer-events: none; min-width: 240px;
}
.achievement-toast .ach-eyebrow { font-size: 9px; letter-spacing: .12em; color: var(--ash); font-family: var(--font-display); margin-bottom: 3px; }
.achievement-toast .ach-title   { font-family: var(--font-display); font-size: 14px; color: var(--gold); letter-spacing: .06em; }
.achievement-toast .ach-desc    { font-size: 11px; color: var(--parch-dim); margin-top: 3px; }