/* ===================================
   SWORD SLASH EFFECT ANIMATION
   ================================== */

/* Slash effect overlay container */
.slash-effect-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slash-fade-in-out 300ms ease-out;
  background: transparent;
}

/* Slash effect image */
.slash-effect-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
  background: transparent;
}

/* Optional animation for the slash appearance */
@keyframes slash-fade-in-out {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
/* ===================================
   FIREBALL PROJECTILE ANIMATION
   ================================== */

.fireball-projectile {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
}

.fireball-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.8));
}

.fireball-impact {
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  border-radius: 50%;
}

@keyframes fireball-impact-expand {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* ===================================
   SHARINGAN GENJUTSU EFFECT
   ================================== */

.sharingan-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10002;
}

.sharingan-flash {
  position: fixed;
  pointer-events: none;
  z-index: 10003;
}

/* ===================================
   FROST NOVA AOE SPRITE ANIMATION
   (9-frame horizontal sprite sheet)
   ================================== */

.frost-nova-effect {
  position: fixed;
  pointer-events: none;
  image-rendering: pixelated;
}

@keyframes frost-nova-animate {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

/* ===================================
   CT BAR STYLING
   ================================== */

.ct-fill {
  height: 100%;
  background: linear-gradient(90deg, #888, #fff);
  transition: width 1s linear;
}

.enemy-ct-bar-container {
  width: 100%;
  height: 4px;
  background: #333;
  margin-top: 2px;
  border: 1px solid #000;
}

.enemy-ct-bar {
  width: 100%;
  height: 100%;
}

/* Account Storage / Vault Styles */
#account-storage-modal.account-storage-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  width: min(96vw, 1120px);
  max-height: 90vh;
  display: block;
}

#account-storage-modal .modal-content.account-storage-content {
  background: linear-gradient(180deg, rgba(12,8,25,0.98), rgba(18,12,40,0.96));
  border: 2px solid #daa520;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 40px rgba(138,103,255,0.06) inset;
  overflow: hidden;
  /* override global .modal-content max-width */
  width: 100%;
  max-width: 1100px;
  max-height: 86vh;
  padding: 12px 14px 18px 14px;
}

#account-storage-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(90deg, rgba(10,6,20,0.6), rgba(30,18,60,0.3));
}

.modal-title {
  font-size: 1.2rem;
  color: #f4e4c1;
  font-weight: 700;
}

.close-button {
  background: transparent;
  border: 1px solid transparent;
  color: #f4e4c1;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}
.close-button:hover { background: rgba(218,165,32,0.06); border-color:#daa520; }

.account-storage-body {
  display: flex;
  gap: 16px;
  padding: 14px;
  align-items: flex-start;
}

.storage-list-panel { flex: 1; min-width: 260px; }
.storage-characters-panel { width: 300px; display:flex; flex-direction:column; gap:8px; }

.panel-title { margin: 6px 0 10px 0; color: #f4e4c1; font-size: 0.95rem; }

.account-storage-list, .account-storage-characters {
  background: linear-gradient(180deg,#0c0a12,#0f0d1a);
  border: 1px solid rgba(255,255,255,0.03);
  padding: 10px;
  border-radius: 6px;
  max-height: 60vh;
  overflow: auto;
}

.vault-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  transition: background 0.15s, transform 0.08s;
}
.vault-item:hover { background: rgba(138,103,255,0.03); transform: translateY(-1px); }

.vault-item-meta { display:flex; flex-direction:column; gap:4px; }
.vault-item-name { color:#f4e4c1; font-weight:600; }
.vault-item-sub { color:#c9a870; font-size:12px; }

.vault-action-btn {
  background: linear-gradient(135deg,#5a3a8a,#7a54c8);
  color: #f4e4c1;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.vault-action-btn:hover { filter:brightness(1.05); box-shadow:0 6px 14px rgba(90,58,138,0.18); }

.account-char-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.02); }
.account-char-row .char-info { display:flex; flex-direction:column; }
.char-actions button { padding:6px 8px; }

.panel-actions { display:flex; justify-content:flex-end; margin-top:8px; }

.account-storage-pager { display:flex; gap:10px; align-items:center; justify-content:center; padding:8px 0; }
.pager-btn { padding:6px 10px; border-radius:6px; background: linear-gradient(135deg,#3d2463,#5a3a8a); color:#f4e4c1; border:1px solid rgba(255,255,255,0.04); }
.pager-info { color:#c9a870; }

.muted { color:#a8a0a0; }
.small { font-size:12px; }

/* improved scrollbar for modal lists */
.account-storage-list::-webkit-scrollbar, .account-storage-characters::-webkit-scrollbar { width:10px; }
.account-storage-list::-webkit-scrollbar-thumb, .account-storage-characters::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5a3a8a, #7a54c8); border-radius: 8px; }

/* Inventory deposit button polish */
.inventory-item { position: relative; padding: 10px; border-radius: 6px; }
.inventory-item .deposit-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(135deg,#5a3a8a,#7a54c8);
  color: #fff;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.inventory-item .deposit-btn:hover { box-shadow: 0 6px 14px rgba(90,58,138,0.16); }

/* Larger, friendly vault layout */
.account-storage-modal { width: min(96vw, 1180px); }
.account-storage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.vault-card { display:flex; align-items:flex-start; gap: 12px; padding:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-radius:8px; border:1px solid rgba(255,255,255,0.02); }
.vault-card-left { width:56px; display:flex; align-items:center; justify-content:center; }
.vault-card-icon { width:48px; height:48px; object-fit:contain; border-radius:6px; background: rgba(255,255,255,0.02); }
.vault-card-icon.placeholder { display:flex; align-items:center; justify-content:center; font-size:20px; }
.vault-card-body { flex:1; }
.vault-card-title { font-weight:700; color:#f4e4c1; margin-bottom:4px; }
.vault-card-desc { margin-top:6px; color:#bfb0a0; }
.vault-card-actions { display:flex; align-items:center; }
.vault-action-btn.large { padding:10px 14px; font-size:14px; }

/* selected character styling */
.account-char-row.selected { outline: 2px solid rgba(218,165,32,0.18); background: rgba(218,165,32,0.02); border-radius:6px; }
.account-char-row { padding:8px; border-radius:6px; }

/* overlay dim */
.account-storage-overlay { position:fixed; inset:0; background: rgba(0,0,0,0.55); z-index:1190; display:none; }

/* ============================================
   Backstory Questionnaire Styles
   ============================================ */

.questionnaire-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: radial-gradient(circle at center, #1a0f2e 0%, #0a0612 100%);
}

.questionnaire-content {
  max-width: 800px;
  width: 100%;
  background: linear-gradient(135deg, rgba(26, 15, 46, 0.95) 0%, rgba(10, 6, 18, 0.95) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.questionnaire-progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-bottom: 30px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #d4af37 0%, #f4e4c1 100%);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.questionnaire-header {
  text-align: center;
  margin-bottom: 40px;
}

.questionnaire-title {
  font-size: 2.5rem;
  color: #d4af37;
  margin-bottom: 10px;
  font-weight: 700;
  text-shadow: 2px 2px 8px rgba(212, 175, 55, 0.3);
}

.questionnaire-step {
  color: #a89968;
  font-size: 0.95rem;
  font-style: italic;
}

.questionnaire-question {
  margin-bottom: 40px;
}

.question-text {
  font-size: 1.3rem;
  line-height: 1.6;
  color: #f4e4c1;
  margin-bottom: 30px;
  text-align: center;
  font-style: italic;
}

.questionnaire-answers {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.answer-button {
  background: linear-gradient(135deg, rgba(26, 15, 46, 0.6) 0%, rgba(10, 6, 18, 0.6) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 20px;
  color: #e8d4a0;
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.answer-button:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(244, 228, 193, 0.1) 100%);
  border-color: #d4af37;
  transform: translateX(5px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
}

.answer-button:active {
  transform: translateX(3px) scale(0.98);
}

.questionnaire-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.skip-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #a89968;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.skip-button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: #d4af37;
}

/* Path Reveal Screen */
.path-reveal-content {
  max-width: 900px;
  width: 100%;
  background: linear-gradient(135deg, rgba(26, 15, 46, 0.95) 0%, rgba(10, 6, 18, 0.95) 100%);
  border: 2px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 50px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
}

.path-reveal-header {
  text-align: center;
  margin-bottom: 40px;
}

.path-reveal-title {
  font-size: 2rem;
  color: #a89968;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.path-reveal-body {
  margin-bottom: 40px;
}

.path-name {
  font-size: 2.5rem;
  color: #d4af37;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
  text-shadow: 2px 2px 12px rgba(212, 175, 55, 0.4);
}

.signature-moment {
  background: rgba(0, 0, 0, 0.3);
  border-left: 4px solid #d4af37;
  padding: 25px 30px;
  margin: 30px 0;
  border-radius: 4px;
}

.signature-quote {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #f4e4c1;
  font-style: italic;
  text-align: center;
}

.path-description {
  margin: 25px 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #d4c5a0;
  text-align: center;
}

.emotional-core {
  text-align: center;
  margin-top: 20px;
  padding: 15px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 6px;
}

.core-label {
  color: #d4af37;
  font-weight: 700;
  margin-right: 8px;
}

.core-text {
  color: #e8d4a0;
  font-style: italic;
}

.path-reveal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Path Selection Screen */
.path-selection-content {
  max-width: 1200px;
  width: 100%;
  padding: 40px;
  margin: 0 auto;
}

.path-selection-title {
  font-size: 2.5rem;
  color: #d4af37;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 700;
}

.path-selection-subtitle {
  text-align: center;
  color: #a89968;
  margin-bottom: 40px;
  font-size: 1.1rem;
}

.path-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.path-card {
  background: linear-gradient(135deg, rgba(26, 15, 46, 0.8) 0%, rgba(10, 6, 18, 0.8) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.path-card:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(244, 228, 193, 0.1) 100%);
  border-color: #d4af37;
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
}

.path-card-name {
  font-size: 1.4rem;
  color: #d4af37;
  margin-bottom: 15px;
  font-weight: 700;
}

.path-card-description {
  color: #d4c5a0;
  line-height: 1.5;
  margin-bottom: 15px;
  font-size: 0.95rem;
}

.path-card-quote {
  font-size: 0.9rem;
  color: #a89968;
  font-style: italic;
  padding-top: 15px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.path-selection-actions {
  display: flex;
  justify-content: center;
}

/* Character Path Display in Creation Screen */
.character-path-info {
  background: linear-gradient(135deg, rgba(26, 15, 46, 0.6) 0%, rgba(10, 6, 18, 0.6) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
}

.path-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.path-info-header h3 {
  color: #d4af37;
  font-size: 1.3rem;
  margin: 0;
}

.change-path-btn {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #d4af37;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.change-path-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: #d4af37;
}

.path-info-content {
  color: #d4c5a0;
}

.path-name-badge {
  display: inline-block;
  background: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.path-info-content .path-description {
  text-align: left;
  font-size: 1rem;
  margin: 10px 0;
}

.path-info-content .path-emotional-core {
  text-align: left;
  margin-top: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-size: 0.95rem;
}

.path-info-content .path-emotional-core strong {
  color: #d4af37;
}

/* ===================================
   ORIGIN PATH QUEST UI STYLING
   ================================== */

.quest-trigger-modal .quest-trigger-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 3px solid #d4af37;
  border-radius: 12px;
  padding: 0;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.4);
}

.quest-trigger-header {
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
  color: #1a1a2e;
  padding: 20px;
  border-radius: 9px 9px 0 0;
  text-align: center;
}

.quest-trigger-header h2 {
  margin: 0;
  font-size: 1.8rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.quest-trigger-body {
  padding: 20px;
}

.quest-trigger-message {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(212, 175, 55, 0.1);
  border-left: 4px solid #d4af37;
  border-radius: 4px;
}

.quest-preview {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 20px;
}

.quest-preview h3 {
  color: #d4af37;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.5rem;
}

.quest-description {
  color: #e0e0e0;
  line-height: 1.5;
  margin-bottom: 15px;
}

.quest-info {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.quest-level {
  color: #d4af37;
}

.quest-objectives,
.quest-rewards {
  margin-top: 15px;
}

.quest-objectives strong,
.quest-rewards strong {
  color: #d4af37;
  display: block;
  margin-bottom: 8px;
}

.quest-objectives ul,
.quest-rewards ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.quest-objectives li,
.quest-rewards li {
  padding: 6px 0 6px 25px;
  position: relative;
  color: #e0e0e0;
}

.quest-objectives li::before {
  content: 'ΓÜí';
  position: absolute;
  left: 0;
}

.quest-rewards li {
  color: #90ee90;
}

.quest-trigger-actions {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 0 9px 9px;
}

.accept-quest-btn,
.decline-quest-btn {
  flex: 1;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.accept-quest-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  box-shadow: 0 4px 6px rgba(76, 175, 80, 0.3);
}

.accept-quest-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
  box-shadow: 0 6px 8px rgba(76, 175, 80, 0.4);
  transform: translateY(-2px);
}

.decline-quest-btn {
  background: linear-gradient(135deg, #666 0%, #555 100%);
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.decline-quest-btn:hover {
  background: linear-gradient(135deg, #555 0%, #444 100%);
  transform: translateY(-2px);
}

/* Origin Quest Badge */
.origin-quest-badge {
  display: inline-block;
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
  color: #1a1a2e;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.origin-quest {
  border-left: 4px solid #d4af37 !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* Origin Path Section in Quest Log */
.origin-path-section {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(26, 26, 46, 0.9) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.origin-path-section h3 {
  color: #d4af37;
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.origin-emotional-core {
  color: #b8b8b8;
  font-style: italic;
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.origin-description {
  color: #e8d4a0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Character Quest Tabs */
.quest-character-tabs {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(138, 103, 255, 0.3);
}

.quest-character-tabs h4 {
  color: #8a67ff;
  margin: 0 0 8px 0;
  font-size: 0.9rem;
}

.character-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.character-tab-btn {
  background: rgba(138, 103, 255, 0.2);
  border: 1px solid rgba(138, 103, 255, 0.4);
  border-radius: 4px;
  color: #e8d4a0;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  position: relative;
}

.character-tab-btn:hover {
  background: rgba(138, 103, 255, 0.3);
  border-color: rgba(138, 103, 255, 0.6);
}

.character-tab-btn.active {
  background: rgba(138, 103, 255, 0.4);
  border-color: #8a67ff;
  color: #fff;
}

.quest-count-badge {
  display: inline-block;
  background: #d4af37;
  color: #1a1a2e;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: bold;
  margin-left: 6px;
  min-width: 16px;
  text-align: center;
}

/* Quest Character Header (for multi-character display) */
.quest-character-header {
  color: #8a67ff;
  padding: 8px 0;
  margin-top: 16px;
  border-bottom: 1px solid rgba(138, 103, 255, 0.2);
  font-size: 0.9rem;
}

.quest-character-header:first-of-type {
  margin-top: 0;
}

/* Completed Quest Summary */
.completed-summary {
  color: #888;
  font-size: 0.9rem;
}

.completed-summary a {
  color: #d4af37;
  text-decoration: none;
}

.completed-summary a:hover {
  text-decoration: underline;
}

/* Locked Location Styling */
.locked-location {
  opacity: 0.7;
  cursor: not-allowed;
}

.quest-lore {
  margin: 12px 0;
  padding: 12px;
  background: rgba(212, 175, 55, 0.05);
  border-left: 3px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  font-style: italic;
  color: #b8b8b8;
}

/* Quest Notification Toast */
.quest-notification {
  position: fixed;
  top: 20px;
  right: -400px;
  z-index: 10000;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #d4af37;
  border-radius: 8px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 300px;
  transition: right 0.3s ease;
}

.quest-notification.visible {
  right: 20px;
}

.quest-notification-icon {
  font-size: 2rem;
}

.quest-notification-text {
  color: #e0e0e0;
  font-size: 1rem;
  line-height: 1.3;
}

.quest-notification-trigger {
  border-color: #d4af37;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.quest-notification-progress {
  border-color: #4CAF50;
}

.quest-notification-complete {
  border-color: #FFD700;
  animation: quest-complete-pulse 1s ease-in-out;
}

@keyframes quest-complete-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Quest Objective Progress Bar */
.objective-progress-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 5px;
}

.objective-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4af37 0%, #b8941f 100%);
  transition: width 0.5s ease;
  border-radius: 10px;
}

.objective-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.quest-rewards-preview {
  margin-top: 12px;
  padding: 10px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 6px;
  font-size: 0.9rem;
}

.quest-rewards-preview strong {
  color: #4CAF50;
}

/* Rest at Inn Modal Styles */
#rest-options-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.rest-modal-content {
  background: linear-gradient(135deg, #1a0f2e 0%, #2a1f3e 100%);
  border: 3px solid #d4af37;
  border-radius: 15px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

.rest-modal-header {
  background: linear-gradient(135deg, #5c4d7d, #7a6b9d);
  padding: 15px 20px;
  border-bottom: 2px solid #d4af37;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rest-modal-header h2 {
  color: #fff;
  margin: 0;
  font-size: 1.4em;
}

.rest-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  color: #e0d4f0;
}

.rest-description {
  color: #c0b4d0;
  margin-bottom: 20px;
  font-style: italic;
}

.rest-party-status {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}

.rest-party-status h3 {
  color: #d4af37;
  margin: 0 0 10px 0;
  font-size: 1.1em;
}

.rest-character-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  margin: 5px 0;
  border-radius: 8px;
  background: rgba(20, 10, 35, 0.5);
  border-left: 4px solid;
}

.rest-character-status.needs-rest {
  border-color: #ff6b6b;
}

.rest-character-status.full-health {
  border-color: #4CAF50;
}

.rest-char-name {
  font-weight: bold;
  color: #fff;
  flex-basis: 100%;
}

.rest-char-hp {
  color: #ff6b6b;
  font-size: 0.9em;
}

.rest-char-mp {
  color: #6bc5ff;
  font-size: 0.9em;
}

.rest-cost-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  margin-bottom: 15px;
}

.rest-cost {
  color: #ffd700;
}

.rest-gold {
  color: #c0b4d0;
}

.rest-not-needed {
  color: #4CAF50;
  text-align: center;
  padding: 10px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 8px;
  margin: 10px 0;
}

.rest-cannot-afford {
  color: #ff6b6b;
  text-align: center;
  padding: 10px;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 8px;
  margin: 10px 0;
}

.rest-modal-footer {
  display: flex;
  gap: 15px;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  justify-content: center;
}

.rest-confirm-btn {
  padding: 12px 25px;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: 2px solid #d4af37;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  transition: all 0.3s;
}

.rest-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #5DBF61, #4CAF50);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.rest-confirm-btn:disabled {
  background: #555;
  border-color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}

.rest-cancel-btn {
  padding: 12px 25px;
  background: rgba(100, 100, 100, 0.5);
  color: #c0b4d0;
  border: 2px solid #666;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1em;
  transition: all 0.3s;
}

.rest-cancel-btn:hover {
  background: rgba(150, 150, 150, 0.5);
  border-color: #999;
}