/* ============================================================
   PIRATE KNOWLEDGE WORLD - Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=MedievalSharp&family=Inter:wght@400;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Splash Screen ---- */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splashFade 0.5s ease 3s forwards;
}
#splash-img {
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
  animation: splashZoom 3.5s ease-out forwards;
}
@keyframes splashZoom {
  0% { transform: scale(0.8); opacity: 0; }
  15% { transform: scale(1); opacity: 1; }
  85% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}
@keyframes splashFade {
  to { opacity: 0; pointer-events: none; }
}

/* ---- Story Modal ---- */
#story-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
}
#story-modal.active { display: flex; }
#story-modal-content {
  background: linear-gradient(135deg, rgba(20,10,5,.98), rgba(40,20,10,.98));
  border: 2px solid rgba(243,156,18,.3);
  border-radius: 16px;
  padding: 36px 40px;
  max-width: 620px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 0 60px rgba(0,0,0,.8), 0 0 30px rgba(243,156,18,.15);
}
#story-modal-content h1 {
  font-family: 'Pirata One', cursive;
  font-size: 32px;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(243,156,18,.5);
  margin-bottom: 20px;
}

body {
  overflow: hidden;
  background: #0a1628;
  font-family: 'Inter', sans-serif;
  color: #fff;
}

canvas { display: block; }

/* ---- HUD ---- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 100%);
  pointer-events: none;
  z-index: 10;
}

#hud h1 {
  font-family: 'Pirata One', cursive;
  font-size: 28px;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(243,156,18,.6);
}

#hud .stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
}

#hud .stat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.4);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.15);
}

#hud .stat .icon { font-size: 18px; }

/* ---- XP Bar ---- */
#xp-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  pointer-events: none;
}
#xp-bar-label {
  font-family: 'Pirata One', cursive;
  font-size: 18px;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255,215,0,.5);
  min-width: 40px;
}
#xp-bar-track {
  flex: 1;
  height: 10px;
  background: rgba(0,0,0,.5);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,215,0,.25);
  min-width: 160px;
  max-width: 260px;
}
#xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f39c12, #ffd700);
  border-radius: 5px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(255,215,0,.4);
}
#xp-text {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
#open-skills-btn { pointer-events: auto; }

/* ---- Skill Panel ---- */
#skill-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(20,10,5,.96), rgba(40,20,10,.96));
  border: 2px solid rgba(243,156,18,.4);
  border-radius: 12px;
  padding: 24px;
  z-index: 450;
  display: none;
  box-shadow: 0 0 40px rgba(0,0,0,.8), 0 0 20px rgba(243,156,18,.2);
}
#skill-panel.active { display: block; }

/* ---- Copilot CLI Terminal ---- */
#cli-terminal {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  max-height: 380px;
  background: rgba(13, 17, 23, 0.96);
  border: 1px solid rgba(48, 54, 61, 0.8);
  border-radius: 10px;
  z-index: 460;
  display: none;
  flex-direction: column;
  font-family: 'Consolas', 'Courier New', monospace;
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(139,148,158,.1);
  overflow: hidden;
}
#cli-terminal.active { display: flex; }
#cli-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(22, 27, 34, 0.95);
  border-bottom: 1px solid rgba(48, 54, 61, 0.6);
}
#cli-title {
  font-size: 13px;
  color: #58a6ff;
  font-weight: 600;
}
#cli-hint {
  flex: 1;
  font-size: 11px;
  color: #484f58;
  text-align: right;
}
#cli-hint kbd {
  background: rgba(110,118,129,.2);
  border: 1px solid rgba(110,118,129,.3);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
  color: #8b949e;
}
#cli-close {
  background: none;
  border: none;
  color: #8b949e;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
#cli-close:hover { color: #f85149; }
#cli-output {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #c9d1d9;
  max-height: 280px;
}
#cli-output .cli-line { margin: 2px 0; }
#cli-output .cli-cmd { color: #58a6ff; }
#cli-output .cli-label { color: #f0883e; font-weight: 600; }
#cli-output .cli-game { color: #3fb950; }
#cli-output .cli-real { color: #8b949e; font-style: italic; }
#cli-output .cli-error { color: #f85149; }
#cli-output .cli-highlight { color: #ffd700; }
#cli-output .cli-divider {
  border: none;
  border-top: 1px solid rgba(48,54,61,.5);
  margin: 6px 0;
}
#cli-input-row {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid rgba(48, 54, 61, 0.6);
  background: rgba(13, 17, 23, 0.98);
}
#cli-prompt {
  color: #3fb950;
  font-size: 13px;
  margin-right: 8px;
  white-space: nowrap;
}
#cli-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #c9d1d9;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  caret-color: #58a6ff;
}

/* ---- Progress bar ---- */
#progress-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: rgba(0,0,0,.5);
  z-index: 10;
}

#progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f39c12, #e74c3c);
  transition: width .6s ease;
  border-radius: 0 3px 3px 0;
}

/* ---- Island label ---- */
#island-label {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(243,156,18,.4);
  padding: 10px 24px;
  border-radius: 12px;
  font-family: 'MedievalSharp', cursive;
  font-size: 18px;
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 10;
  pointer-events: none;
}

#island-label.visible { opacity: 1; }

#island-label .subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
}

/* ---- Controls hint ---- */
#controls-hint {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  z-index: 10;
  pointer-events: none;
  text-align: right;
}

/* ---- Cannon Cooldown ---- */
#cannon-cooldown {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  text-align: center;
}
#cannon-cooldown-label {
  font-family: 'Pirata One', cursive;
  font-size: 16px;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(243,156,18,.4);
}
#cannon-cooldown-bar {
  width: 260px;
  height: 14px;
  background: rgba(0,0,0,.6);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(243,156,18,.3);
  box-shadow: 0 0 12px rgba(0,0,0,.4);
}
#cannon-cooldown-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #f39c12, #e74c3c);
  border-radius: 7px;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(243,156,18,.5);
}
#cannon-cooldown-fill.reloading {
  background: linear-gradient(90deg, #555, #888);
  box-shadow: none;
}

/* ---- Quiz Modal ---- */
#quiz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

#quiz-overlay.active { display: flex; }

#quiz-modal {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 2px solid rgba(243,156,18,.4);
  border-radius: 20px;
  padding: 36px 40px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(243,156,18,.15);
  animation: modalIn .3s ease;
}

@keyframes modalIn {
  from { transform: scale(.9) translateY(30px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

#quiz-modal .island-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

#quiz-modal .island-banner .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

#quiz-modal .island-banner h2 {
  font-family: 'Pirata One', cursive;
  font-size: 26px;
}

#quiz-modal .lesson-tag {
  font-size: 12px;
  color: #999;
  margin-bottom: 20px;
}

#quiz-modal .question-counter {
  font-size: 13px;
  color: #f39c12;
  margin-bottom: 8px;
  font-weight: 600;
}

#quiz-modal .question-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
}

#quiz-modal .options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#quiz-modal .option-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 18px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: all .2s ease;
  font-family: 'Inter', sans-serif;
}

#quiz-modal .option-btn:hover {
  background: rgba(243,156,18,.15);
  border-color: rgba(243,156,18,.4);
  transform: translateX(4px);
}

#quiz-modal .option-btn.correct {
  background: rgba(46,204,113,.2);
  border-color: #2ecc71;
  color: #2ecc71;
}

#quiz-modal .option-btn.wrong {
  background: rgba(231,76,60,.2);
  border-color: #e74c3c;
  color: #e74c3c;
}

#quiz-modal .option-btn.disabled {
  pointer-events: none;
  opacity: .5;
}

/* ---- Result feedback ---- */
#quiz-modal .result-feedback {
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  display: none;
  line-height: 1.5;
}

#quiz-modal .result-feedback.show { display: block; }

#quiz-modal .result-feedback.correct-feedback {
  background: rgba(46,204,113,.1);
  border: 1px solid rgba(46,204,113,.3);
}

#quiz-modal .result-feedback.wrong-feedback {
  background: rgba(231,76,60,.1);
  border: 1px solid rgba(231,76,60,.3);
}

#quiz-modal .result-feedback h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

#quiz-modal .result-feedback p {
  font-size: 13px;
  color: #ccc;
}

#quiz-modal .next-btn {
  margin-top: 16px;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border: none;
  padding: 12px 28px;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: transform .15s, box-shadow .15s;
}

#quiz-modal .next-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(243,156,18,.4);
}

/* ---- Battle Overlay ---- */
#battle-overlay {
  position: fixed;
  inset: 0;
  background: rgba(139,0,0,.15);
  display: none;
  z-index: 50;
  pointer-events: none;
}

#battle-overlay.active {
  display: block;
  animation: battleFlash 0.5s ease-in-out 3;
}

@keyframes battleFlash {
  0%, 100% { background: rgba(139,0,0,.05); }
  50% { background: rgba(139,0,0,.25); }
}

#battle-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Pirata One', cursive;
  font-size: 52px;
  color: #e74c3c;
  text-shadow: 0 0 30px rgba(231,76,60,.8), 0 0 60px rgba(231,76,60,.4);
  z-index: 51;
  display: none;
  pointer-events: none;
  animation: battleTextPulse 0.8s ease-in-out;
}

#battle-text.active { display: block; }

@keyframes battleTextPulse {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ---- Conquest Banner ---- */
#conquest-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: none;
  justify-content: center;
  z-index: 60;
  pointer-events: none;
  animation: conquestSlideIn 0.5s ease-out;
}
#conquest-banner.active { display: flex; }
#conquest-content {
  margin-top: 80px;
  text-align: center;
  padding: 24px 48px;
  background: linear-gradient(135deg, rgba(46,204,113,.25), rgba(39,174,96,.35));
  border: 2px solid rgba(46,204,113,.6);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(46,204,113,.4), 0 8px 32px rgba(0,0,0,.5);
}
.conquest-icon { font-size: 48px; margin-bottom: 8px; }
#conquest-title {
  font-family: 'Pirata One', cursive;
  font-size: 36px;
  color: #2ecc71;
  text-shadow: 0 0 20px rgba(46,204,113,.6);
  margin-bottom: 4px;
}
#conquest-name {
  font-family: 'MedievalSharp', cursive;
  font-size: 18px;
  color: #a8e6cf;
}
@keyframes conquestSlideIn {
  0% { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Victory Overlay ---- */
#victory-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(10px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

#victory-overlay.active { display: flex; }

#victory-content {
  text-align: center;
  animation: modalIn .5s ease;
}

#victory-content h1 {
  font-family: 'Pirata One', cursive;
  font-size: 56px;
  color: #f39c12;
  text-shadow: 0 0 30px rgba(243,156,18,.6);
  margin-bottom: 16px;
}

#victory-content p {
  font-size: 20px;
  color: #ccc;
  margin-bottom: 32px;
}

#victory-content .replay-btn {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border: none;
  padding: 16px 40px;
  border-radius: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Pirata One', cursive;
  letter-spacing: 2px;
  transition: transform .15s;
}

#victory-content .replay-btn:hover {
  transform: scale(1.06);
}

/* ---- Intro overlay ---- */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #16213e 0%, #0a1628 70%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
  transition: opacity .8s ease;
}

#intro-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#intro-content {
  text-align: center;
  max-width: 600px;
  padding: 40px;
}

#intro-content h1 {
  font-family: 'Pirata One', cursive;
  font-size: 52px;
  color: #f39c12;
  text-shadow: 0 0 30px rgba(243,156,18,.5);
  margin-bottom: 12px;
}

#intro-content .subtitle {
  font-family: 'MedievalSharp', cursive;
  font-size: 20px;
  color: #aaa;
  margin-bottom: 28px;
}

#intro-story {
  text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(243,156,18,.15);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
#intro-story .story-text {
  font-family: 'MedievalSharp', cursive;
  font-size: 16px;
  line-height: 1.6;
  color: #ddd;
  margin-bottom: 10px;
}
#intro-story .story-text:first-child {
  font-size: 20px;
  color: #f39c12;
  text-shadow: 0 0 10px rgba(243,156,18,.3);
}
#intro-story .story-text:last-child { margin-bottom: 0; }
#intro-story em { color: #e74c3c; font-style: italic; }
#intro-story strong { color: #ffd700; }

#intro-content .rules {
  text-align: left;
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
  line-height: 1.8;
  font-size: 15px;
}

#intro-content .rules span { color: #f39c12; }

#intro-content .start-btn {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border: none;
  padding: 16px 48px;
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Pirata One', cursive;
  letter-spacing: 3px;
  transition: transform .15s, box-shadow .15s;
}

#intro-content .start-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 30px rgba(243,156,18,.4);
}

/* ---- Minimap ---- */
#minimap {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 180px;
  height: 180px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  z-index: 10;
  pointer-events: none;
}

#minimap canvas {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* ---- Conquered stamp ---- */
.conquered-stamp {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #2ecc71;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(243,156,18,.3); border-radius: 3px; }

/* ---- Captain Selection ---- */
#captain-select-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #16213e 0%, #0a1628 70%);
  display: flex; justify-content: center; align-items: flex-start;
  z-index: 400; overflow-y: auto; padding: 40px 20px;
}
#captain-select-overlay.hidden { display: none; }
#captain-select-content {
  text-align: center; max-width: 1100px; width: 100%;
}
#captain-select-content h1 {
  font-family: 'Pirata One', cursive; font-size: 48px;
  color: #f39c12; text-shadow: 0 0 30px rgba(243,156,18,.5); margin-bottom: 8px;
}
.captain-subtitle {
  font-family: 'MedievalSharp', cursive; font-size: 16px;
  color: #aaa; margin-bottom: 28px;
}
#captain-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.captain-section-title {
  font-family: 'Pirata One', cursive;
  font-size: 30px;
  color: #ffd700;
  margin-bottom: 6px;
}
.captain-section-subtitle {
  color: #8b949e;
  margin-bottom: 16px;
}
.captain-grid-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  justify-items: center;
}
.captain-card {
  position: relative;
  background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 20px 16px; cursor: pointer;
  transition: all .2s; width: 100%; text-align: center;
  overflow: hidden;
}
.captain-card:hover {
  border-color: #f39c12; background: rgba(243,156,18,.12);
  transform: translateY(-4px); box-shadow: 0 8px 24px rgba(243,156,18,.3);
}
.captain-card.current {
  border-color: #ffd700;
  box-shadow: 0 0 24px rgba(255,215,0,.28);
}
.captain-card.locked {
  background: rgba(13,17,23,.9);
  border-color: rgba(110,118,129,.3);
}
.captain-card.locked img {
  filter: grayscale(1) brightness(0.7);
}
.captain-card.locked:hover {
  border-color: rgba(110,118,129,.45);
  background: rgba(22,27,34,.95);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.captain-card img {
  width: 100px; height: 100px; border-radius: 50%;
  border: 3px solid rgba(243,156,18,.4); margin-bottom: 10px;
  object-fit: cover;
}
.captain-card .pirate-name {
  font-family: 'Pirata One', cursive; font-size: 20px;
  color: #f39c12; margin-bottom: 4px; line-height: 1.2;
}
.captain-card .real-name {
  font-size: 12px; color: #888; margin-bottom: 6px;
}
.captain-card .captain-specialty {
  font-size: 12px; color: #aaa; font-style: italic;
}
.captain-card .captain-quest {
  margin-top: 10px;
  padding: 8px 10px;
  min-height: 54px;
  border-radius: 10px;
  background: rgba(13,17,23,.65);
  border: 1px solid rgba(88,166,255,.18);
  color: #c9d1d9;
  font-size: 12px;
  line-height: 1.35;
}
.captain-card .captain-stats-preview {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 10px; font-size: 13px; color: #ccc;
}
.captain-lock-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,17,23,.92);
  border: 1px solid rgba(110,118,129,.45);
  box-shadow: 0 0 18px rgba(0,0,0,.45);
}
.legendary-section .captain-section-title {
  color: #58a6ff;
}
.legendary-section .captain-card:not(.locked) {
  border-color: rgba(88,166,255,.45);
  box-shadow: 0 0 24px rgba(88,166,255,.18);
}

/* ---- Captain Avatar (top-right) ---- */
#top-right-actions {
  position: fixed; top: 80px; right: 210px;
  z-index: 15; display: flex; align-items: center; gap: 10px;
}
#terminal-btn {
  cursor: pointer; font-size: 24px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(88,166,255,.4);
  border-radius: 50%; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
#terminal-btn:hover {
  background: rgba(88,166,255,.2); border-color: #58a6ff;
  box-shadow: 0 0 12px rgba(88,166,255,.4);
}
#captain-avatar {
  cursor: pointer;
  display: none; align-items: center; gap: 8px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(243,156,18,.4);
  border-radius: 30px; padding: 4px 6px 4px 4px;
  transition: all .2s;
}
#captain-avatar:hover {
  background: rgba(243,156,18,.2); border-color: #f39c12;
}
#captain-avatar img {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #f39c12;
}
#captain-avatar-name {
  font-family: 'Pirata One', cursive; font-size: 14px; color: #f39c12;
}
#open-badges-btn {
  pointer-events: auto;
  border: 1px solid rgba(255,215,0,.4);
  background: rgba(255,215,0,.12);
  color: #ffd700;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 18px;
  transition: all .2s;
}
#open-badges-btn:hover {
  background: rgba(255,215,0,.24);
  box-shadow: 0 0 14px rgba(255,215,0,.25);
}
#badge-panel {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  z-index: 455;
}
#badge-panel.active { display: flex; }
#badge-panel-content {
  position: relative;
  width: min(980px, 92vw);
  max-height: 82vh;
  overflow: auto;
  padding: 28px;
  border-radius: 18px;
  border: 1px solid rgba(48,54,61,.9);
  background: linear-gradient(180deg, rgba(13,17,23,.98), rgba(22,27,34,.98));
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(88,166,255,.08);
}
#badge-panel-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: #8b949e;
  font-size: 22px;
  cursor: pointer;
}
#badge-panel-close:hover { color: #f85149; }
#badge-panel-header h2 {
  font-family: 'Pirata One', cursive;
  font-size: 34px;
  color: #ffd700;
}
#badge-panel-summary {
  margin-top: 6px;
  color: #8b949e;
}
#badge-panel-tabs {
  display: flex;
  gap: 10px;
  margin: 22px 0 18px;
}
.badge-tab-btn {
  border: 1px solid rgba(48,54,61,.9);
  background: rgba(22,27,34,.95);
  color: #c9d1d9;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all .2s;
}
.badge-tab-btn.active,
.badge-tab-btn:hover {
  border-color: rgba(88,166,255,.65);
  background: rgba(56,139,253,.12);
  color: #58a6ff;
}
#badge-panel-body { color: #c9d1d9; }
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.badge-card {
  position: relative;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(48,54,61,.9);
  background: rgba(22,27,34,.92);
  min-height: 180px;
}
.badge-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.badge-icon {
  font-size: 32px;
}
.badge-tier {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .12em;
  color: #8b949e;
}
.badge-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #f0f6fc;
}
.badge-card p {
  color: #8b949e;
  line-height: 1.45;
  font-size: 13px;
}
.badge-card.earned {
  opacity: 1;
  border-color: rgba(255,215,0,.45);
  box-shadow: 0 0 24px rgba(255,215,0,.16), inset 0 0 0 1px rgba(255,215,0,.18);
}
.badge-card.earned.gold { box-shadow: 0 0 28px rgba(255,215,0,.2), inset 0 0 0 1px rgba(255,215,0,.22); }
.badge-card.earned.silver { box-shadow: 0 0 24px rgba(192,199,209,.14), inset 0 0 0 1px rgba(192,199,209,.2); }
.badge-card.earned.bronze { box-shadow: 0 0 24px rgba(205,127,50,.14), inset 0 0 0 1px rgba(205,127,50,.2); }
.badge-card.locked {
  opacity: .45;
  filter: grayscale(1);
}
.quest-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 16px;
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(48,54,61,.9);
  background: rgba(22,27,34,.94);
}
.quest-title-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 12px;
  align-items: start;
}
.quest-icon { font-size: 28px; }
.quest-title-row h3 { font-size: 20px; margin-bottom: 6px; color: #f0f6fc; }
.quest-title-row p { color: #8b949e; line-height: 1.45; }
.quest-status { font-size: 24px; text-align: right; }
.quest-progress-text { margin: 14px 0 8px; color: #c9d1d9; font-size: 13px; }
.quest-progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(48,54,61,.8);
}
.quest-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f6feb, #58a6ff);
}
.quest-card.complete { border-color: rgba(63,185,80,.45); }
.quest-card.complete .quest-progress-fill { background: linear-gradient(90deg, #238636, #3fb950); }
.quest-captain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(13,17,23,.8);
  border: 1px solid rgba(48,54,61,.8);
}
.quest-captain img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(88,166,255,.28);
}
.quest-captain.locked img { filter: grayscale(1) brightness(0.6); }
.quest-captain-name { text-align: center; color: #c9d1d9; font-size: 13px; }

/* ---- Captain Stats Panel ---- */
#captain-stats-panel {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 150; display: none;
}
#captain-stats-panel.active { display: block; }
#captain-stats-content {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 2px solid rgba(243,156,18,.5); border-radius: 20px;
  padding: 32px 36px; min-width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(243,156,18,.2);
  animation: modalIn .3s ease; position: relative;
}
#captain-stats-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: #888; font-size: 20px;
  cursor: pointer; transition: color .2s;
}
#captain-stats-close:hover { color: #f39c12; }
#captain-stats-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
#captain-stats-header img {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid #f39c12;
}
#captain-stats-header h2 {
  font-family: 'Pirata One', cursive; font-size: 24px; color: #f39c12;
}
#captain-stats-header p {
  font-size: 12px; color: #888; font-style: italic;
}
#stats-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: rgba(255,255,255,.04);
  border-radius: 8px; font-size: 14px;
}
.stat-row span:last-child { color: #f39c12; font-weight: 700; }

/* ---- Loot Notifications ---- */
#loot-notifications {
  position: fixed; bottom: 120px; left: 50%;
  transform: translateX(-50%); z-index: 60; pointer-events: none;
  display: flex; flex-direction: column-reverse; gap: 8px; align-items: center;
}
.loot-notification {
  background: rgba(0,0,0,.75); border: 1px solid rgba(243,156,18,.5);
  border-radius: 12px; padding: 10px 20px;
  font-size: 15px; font-weight: 700; color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,.5);
  animation: lootPop 2.5s ease-out forwards; white-space: nowrap;
}
.loot-notification.quest-toast {
  border-color: rgba(88,166,255,.55);
  color: #58a6ff;
  text-shadow: 0 0 10px rgba(88,166,255,.35);
}
#badge-notifications {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 520;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.badge-notification {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 360px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--tier-color, #ffd700);
  background: linear-gradient(135deg, rgba(36,20,5,.96), rgba(63,39,8,.96));
  color: #fff8dc;
  box-shadow: 0 16px 36px rgba(0,0,0,.4), 0 0 24px rgba(255,215,0,.18);
  overflow: hidden;
  animation: badgeSlideIn .4s ease, badgeFadeOut .45s ease 3.7s forwards;
}
.badge-notification::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.18) 45%, transparent 70%);
  transform: translateX(-130%);
  animation: badgeShimmer 1.6s ease .2s;
}
.badge-notification.quest-notification {
  background: linear-gradient(135deg, rgba(13,17,23,.98), rgba(30,58,95,.96));
}
.badge-notification-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
.badge-notification-title {
  font-family: 'Pirata One', cursive;
  font-size: 22px;
  color: var(--tier-color, #ffd700);
}
.badge-notification-text {
  font-size: 13px;
  color: #e6edf3;
}
@keyframes lootPop {
  0% { opacity: 0; transform: translateY(20px) scale(0.8); }
  15% { opacity: 1; transform: translateY(0) scale(1.1); }
  30% { transform: translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px); }
}
@keyframes badgeSlideIn {
  from { opacity: 0; transform: translateX(36px) scale(.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes badgeFadeOut {
  to { opacity: 0; transform: translateX(20px); }
}
@keyframes badgeShimmer {
  to { transform: translateX(130%); }
}

/* ---- Main Menu (ESC) ---- */
#main-menu-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8); backdrop-filter: blur(12px);
  display: none; justify-content: center; align-items: center;
  z-index: 350;
}
#main-menu-overlay.active { display: flex; }
#main-menu {
  text-align: center; min-width: 320px;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 2px solid rgba(243,156,18,.4); border-radius: 24px;
  padding: 40px 48px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(243,156,18,.15);
  animation: modalIn .3s ease;
}
#main-menu h1 {
  font-family: 'Pirata One', cursive; font-size: 36px;
  color: #f39c12; text-shadow: 0 0 20px rgba(243,156,18,.5);
  margin-bottom: 16px;
}
#share-bar {
  display: flex; align-items: center; gap: 6px;
}
.share-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: #fff; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; font-weight: bold;
}
.share-btn:hover {
  transform: scale(1.15);
}
#share-x:hover { background: #1da1f2; border-color: #1da1f2; }
#share-linkedin:hover { background: #0077b5; border-color: #0077b5; }
#share-bluesky:hover { background: #0085ff; border-color: #0085ff; }
#share-reddit:hover { background: #ff4500; border-color: #ff4500; }
#share-copy:hover { background: rgba(243,156,18,.3); border-color: #f39c12; }
.menu-btn {
  display: block; width: 100%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 14px 24px; margin-bottom: 12px;
  color: #fff; font-size: 18px; font-family: 'MedievalSharp', cursive;
  cursor: pointer; transition: all .2s; text-align: left;
}
.menu-btn:hover {
  background: rgba(243,156,18,.15); border-color: #f39c12;
  transform: translateX(4px);
}
.menu-btn:last-child { margin-bottom: 0; }

/* ---- Credits ---- */
#credits-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85); backdrop-filter: blur(12px);
  display: none; justify-content: center; align-items: center;
  z-index: 360;
}
#credits-overlay.active { display: flex; }
#credits-content {
  text-align: center; max-width: 500px; width: 90%;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 2px solid rgba(243,156,18,.4); border-radius: 24px;
  padding: 36px 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  animation: modalIn .3s ease;
}
#credits-content h1 {
  font-family: 'Pirata One', cursive; font-size: 36px;
  color: #f39c12; margin-bottom: 24px;
}
.credits-section {
  margin-bottom: 16px; padding: 12px 16px;
  background: rgba(255,255,255,.04); border-radius: 10px;
  text-align: left;
}
.credits-section h3 {
  font-size: 15px; color: #f39c12; margin-bottom: 4px;
}
.credits-section p {
  font-size: 13px; color: #ccc; line-height: 1.4;
}
.credits-section a {
  color: #5dade2; text-decoration: none;
}
.credits-section a:hover { text-decoration: underline; }

/* ---- Settings ---- */
#settings-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85); backdrop-filter: blur(12px);
  display: none; justify-content: center; align-items: center;
  z-index: 360;
}
#settings-overlay.active { display: flex; }
#settings-content {
  text-align: center; max-width: 440px; width: 90%;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 2px solid rgba(243,156,18,.4); border-radius: 24px;
  padding: 36px 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  animation: modalIn .3s ease;
}
#settings-content h1 {
  font-family: 'Pirata One', cursive; font-size: 32px;
  color: #f39c12; margin-bottom: 24px;
}
.setting-group {
  margin-bottom: 20px; padding: 14px 18px;
  background: rgba(255,255,255,.04); border-radius: 12px;
  text-align: left;
}
.setting-group h3 {
  font-size: 14px; color: #f39c12; margin-bottom: 10px;
}
#time-of-day-btns {
  display: flex; gap: 8px;
}
.tod-btn {
  flex: 1; padding: 10px 8px; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05);
  color: #ccc; font-size: 14px; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: all .2s;
}
.tod-btn:hover {
  border-color: rgba(243,156,18,.4); background: rgba(243,156,18,.08);
}
.tod-btn.active {
  border-color: #f39c12; background: rgba(243,156,18,.2); color: #f39c12; font-weight: 700;
}
.slider-row {
  display: flex; align-items: center; gap: 12px;
}
.slider-row input[type="range"] {
  flex: 1; -webkit-appearance: none; height: 6px;
  background: rgba(255,255,255,.15); border-radius: 3px; outline: none;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  background: #f39c12; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff;
}
.slider-row span {
  font-size: 13px; color: #ccc; min-width: 36px; text-align: right;
}