/* =====================================================
   🌟 Knowledge Quest — Minecraft Theme
   Built on the Marble OS Taxonomy
   ===================================================== */

/* ── Design Tokens ──────────────────────────── */
:root {
  --mc-dirt: #8B6914;
  --mc-dirt-dark: #6B5B3A;
  --mc-grass: #5D8C3E;
  --mc-grass-light: #7EC850;
  --mc-stone: #7F7F7F;
  --mc-stone-dark: #555555;
  --mc-stone-light: #999999;
  --mc-sky: #87CEEB;
  --mc-obsidian: #1A1A2E;
  --mc-panel: #3C3C3C;
  --mc-panel-border: #1E1E1E;
  
  --color-math: #DD3333; /* Redstone */
  --color-english: #17D461; /* Emerald */
  --color-science: #2CB9AA; /* Diamond */
  --color-history: #FCDB05; /* Gold */
  --color-computing: #345EC3; /* Lapis */
  --color-life: #B5813A; /* Wheat/Hay */
  --color-psd: #D9909E; /* Pink Wool */
  --color-learn: #A852D2; /* Enchanting */

  --text-primary: #FFFFFF;
  --text-secondary: #AAAAAA;
  --text-yellow: #FFFF55;
  
  --font-heading: 'Press Start 2P', monospace;
  --font-body: 'VT323', monospace;
}

/* ── Reset ──────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family: var(--font-body);
  background-color: var(--mc-obsidian);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 1.2rem;
  image-rendering: pixelated;
}
a{color:var(--text-yellow);text-decoration:none;transition:color .2s}
a:hover{color:#FFAA00}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hidden{display:none !important}

/* ── Particle canvas ────────────────────────── */
.bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none; opacity: 0.5;}

/* ── Splash ─────────────────────────────────── */
.splash-screen{position:fixed;inset:0;z-index:9999;background:var(--mc-obsidian);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,transform .6s ease}
.splash-screen.fade-out{opacity:0;transform:scale(1.05);pointer-events:none}
.splash-content{text-align:center; display: flex; flex-direction: column; align-items: center;}
.splash-logo{
  width: 64px; height: 64px; margin-bottom: 30px;
  background-color: var(--mc-grass);
  border: 4px solid var(--mc-grass-light);
  border-bottom-color: var(--mc-dirt-dark);
  border-right-color: var(--mc-dirt-dark);
  box-shadow: 0 10px 0 rgba(0,0,0,0.5);
  animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.splash-title{font-family:var(--font-heading);font-size:1.5rem;color:var(--text-yellow);text-shadow: 4px 4px 0 #3F3F3F; margin-bottom:16px; line-height: 1.5;}
.splash-subtitle{color:var(--text-secondary);font-size:1.2rem;margin-bottom:36px}
.splash-loading{width:300px;height:24px;margin:0 auto 12px;background:#000;border: 2px solid #555;}
.splash-loading-bar{height:100%;width:0;background:var(--mc-grass-light);animation:loading-bar 2s linear forwards}
@keyframes loading-bar{to{width:100%}}
.splash-hint{color:var(--text-secondary);font-size:1rem}

/* ── Top Nav ────────────────────────────────── */
.top-nav{position:sticky;top:0;z-index:100;background:rgba(26, 26, 46, 0.9);border-bottom:4px solid var(--mc-panel-border);padding:10px 20px;}
.nav-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center;gap:10px; font-family: var(--font-heading); font-size: 0.8rem;}
.nav-icon{font-size:1.4rem}
.nav-title{color: var(--text-primary); text-shadow: 2px 2px 0 #000;}
.nav-score{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#000;border:2px solid #555;font-family: var(--font-heading); font-size:0.8rem;transition:transform .1s}
.nav-score.pop{animation:pop .2s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.nav-score-icon{color: var(--text-yellow);}

/* ── Section ────────────────────────────────── */
.section{position:relative;z-index:1;min-height:calc(100vh - 58px);padding:40px 20px 80px}

/* ── MC Panel Mixin ─────────────────────────── */
.mc-panel {
  background-color: var(--mc-panel);
  border: 4px solid var(--mc-panel-border);
  border-top-color: #5A5A5A;
  border-left-color: #5A5A5A;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.5), inset 2px 2px 0 rgba(255,255,255,0.2), 0 8px 0 rgba(0,0,0,0.3);
  padding: 24px;
}

.mc-button {
  background-color: var(--mc-stone);
  border: 4px solid #000;
  border-top-color: var(--mc-stone-light);
  border-left-color: var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  color: #FFF;
  font-family: var(--font-heading);
  text-shadow: 2px 2px 0 #333;
  padding: 12px 24px;
  cursor: pointer;
  text-align: center;
}
.mc-button:hover {
  background-color: #8C8C8C;
}
.mc-button:active {
  border-top-color: var(--mc-stone-dark);
  border-left-color: var(--mc-stone-dark);
  border-bottom-color: var(--mc-stone-light);
  border-right-color: var(--mc-stone-light);
  padding: 14px 22px 10px 26px; /* Shift text slightly */
}

/* ── Setup ──────────────────────────────────── */
.setup-container{max-width:900px;margin:0 auto}
.setup-header{text-align:center;margin-bottom:40px}
.setup-title{font-family:var(--font-heading);font-size:1.8rem;color:var(--text-yellow);text-shadow: 4px 4px 0 #000;margin-bottom:16px;line-height: 1.4;}
.setup-desc{color:var(--text-primary);font-size:1.4rem;max-width:600px;margin:0 auto; text-shadow: 2px 2px 0 #000;}

/* Subject grid */
.subject-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:48px}
.subject-card{
  position:relative;padding:24px 16px;
  background-color: var(--mc-stone);
  border: 4px solid var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  cursor:pointer;transition:transform .1s;
  text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,0.5);
}
.subject-card:hover{transform:translateY(-2px); background-color: #8C8C8C;}
.subject-card:active{transform:translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.5);}
.subject-card.active{
  background-color: var(--subj-color, var(--mc-stone-dark));
  border-color: #FFF;
  transform:translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
.subject-card .card-emoji{font-size:3rem;display:block;margin-bottom:14px; text-shadow: 2px 2px 0 rgba(0,0,0,0.5);}
.subject-card .card-name{font-family:var(--font-heading);font-size:0.8rem;margin-bottom:10px; text-shadow: 2px 2px 0 #000; color: #FFF; line-height: 1.4;}
.subject-card .card-count{font-size:1.2rem;color:var(--text-secondary); text-shadow: 1px 1px 0 #000;}

/* Chips */
.age-selector,.count-selector{text-align:center;margin-bottom:36px;animation:slideUp .2s ease both}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.age-title,.count-title{font-family:var(--font-heading);font-size:1rem;margin-bottom:20px;color:var(--text-primary); text-shadow: 2px 2px 0 #000;}
.age-chips,.count-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{
  padding:12px 20px;
  background-color: var(--mc-stone);
  border: 4px solid var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  color:var(--text-primary);font-family:var(--font-heading);font-size:0.8rem;
  text-shadow: 2px 2px 0 #000;
}
.chip:hover{background-color: #8C8C8C;}
.chip.active{
  background-color: var(--mc-grass-light);
  border-top-color: #A0F070;
  border-left-color: #A0F070;
  border-bottom-color: var(--mc-grass);
  border-right-color: var(--mc-grass);
  color: #000; text-shadow: none;
}
.chip:disabled{opacity: 0.5; cursor: not-allowed; filter: grayscale(100%);}

/* Start button */
.start-btn{
  display:block;margin:24px auto 0;
  font-size:1.2rem;
  background-color: var(--mc-grass);
  border-top-color: var(--mc-grass-light);
  border-left-color: var(--mc-grass-light);
  border-bottom-color: #3B5B25;
  border-right-color: #3B5B25;
}
.start-btn:hover { background-color: var(--mc-grass-light); }

/* ── Exam ───────────────────────────────────── */
.exam-container{max-width:720px;margin:0 auto}

/* XP Progress Bar */
.progress-bar-wrapper{margin-bottom:32px; text-align: center;}
.progress-bar{
  height:16px;background:#000;border:2px solid #555;
  margin-bottom:8px; width: 100%; position: relative;
}
.progress-fill{
  height:100%;
  background: linear-gradient(to bottom, #7EFC20, #4AA52E);
  transition:width .2s ease;width:0;
  position: relative; overflow: hidden;
}
.progress-fill::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  animation: xp-shimmer 2s infinite linear;
}
@keyframes xp-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.progress-info{display:flex;justify-content:space-between;font-size:1.2rem;color:var(--text-primary); text-shadow: 2px 2px 0 #000; font-family: var(--font-heading); font-size: 0.7rem;}
.progress-subject{color: var(--text-yellow);}

/* Question card */
.question-card{
  background-color: var(--mc-panel);
  border: 4px solid #5A5A5A;
  border-bottom-color: var(--mc-panel-border);
  border-right-color: var(--mc-panel-border);
  padding:30px;
  animation:cardIn .3s ease both;
  position: relative;
}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.question-header{display:flex;align-items:center;gap:12px;margin-bottom:20px; flex-wrap: wrap;}
.question-badge{
  padding:6px 12px;font-family:var(--font-heading);font-size:0.6rem;
  background-color: #000; color: var(--text-yellow); border: 2px solid #555;
  text-transform:uppercase;
}
.question-domain{font-size:1.2rem;color:var(--text-secondary);}
.question-title{font-size:1.8rem;line-height:1.3;margin-bottom:16px; text-shadow: 2px 2px 0 #000;}
.question-desc{
  background-color: #000; border: 2px solid #555; padding: 10px;
  color: var(--text-secondary);font-size:1.2rem;margin-bottom:28px;
  border-left: 4px solid var(--text-yellow);
}

/* Options */
.options-list{display:flex;flex-direction:column;gap:16px}
.option-btn{
  display:flex;align-items:center;gap:16px;padding:14px 20px;
  background-color: var(--mc-stone);
  border: 4px solid var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  text-align:left;font-size:1.4rem;color:var(--text-primary);
  transition:all .1s;cursor:pointer;
  text-shadow: 2px 2px 0 #000;
}
.option-btn:hover{background-color: #8C8C8C;}
.option-btn .option-letter{
  font-family:var(--font-heading);font-size:1rem;color:var(--text-yellow);
  min-width: 30px;
}
.option-btn .option-text{flex:1;}
.option-btn.correct{
  background-color: var(--mc-grass);
  border-top-color: var(--mc-grass-light);
  border-left-color: var(--mc-grass-light);
  border-bottom-color: #3B5B25;
  border-right-color: #3B5B25;
  pointer-events:none;
}
.option-btn.correct .option-letter{color:#FFF;}
.option-btn.wrong{
  background-color: var(--color-math); /* Red */
  border-top-color: #FF5555;
  border-left-color: #FF5555;
  border-bottom-color: #AA0000;
  border-right-color: #AA0000;
  pointer-events:none;
}
.option-btn.wrong .option-letter{color:#FFF;}
.option-btn.disabled{pointer-events:none;opacity:0.6; filter: grayscale(100%);}

/* Feedback */
.feedback-area{margin-top:24px;animation:slideUp .2s ease both}
.feedback-card{
  background-color: #000; border: 4px solid #555; padding: 20px;
  text-align:left; position: relative;
}
.feedback-card.correct-feedback{border-color: var(--mc-grass-light);}
.feedback-card.wrong-feedback{border-color: #FF5555;}
.feedback-header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.feedback-icon{font-size:2rem;}
.feedback-title{font-family:var(--font-heading);font-size:1rem;color:var(--text-yellow);}
.feedback-explain{font-size:1.2rem;color:var(--text-primary);line-height:1.4;margin-bottom:20px;}
.mc-flavor { color: #FFAA00; font-style: italic; margin-bottom: 20px; display: block; }
button.next-btn.mc-button{
  padding:16px 24px;
  font-size:1.4rem;
  margin-top: 24px;
  width: 100%;
  display: block;
}
.next-btn.mc-button.primary {
  background-color: var(--mc-grass);
  border-top-color: var(--mc-grass-light);
  border-left-color: var(--mc-grass-light);
  border-bottom-color: #3B5B25;
  border-right-color: #3B5B25;
}
.next-btn.mc-button.primary:hover {
  background-color: var(--mc-grass-light);
}

/* ── Results ────────────────────────────────── */
.result-container{max-width:760px;margin:0 auto;position:relative}
.result-card{
  background-color: var(--mc-panel);
  border: 4px solid #5A5A5A;
  border-bottom-color: var(--mc-panel-border);
  border-right-color: var(--mc-panel-border);
  padding:40px;text-align:center;animation:cardIn .3s ease both
}

/* Score ring -> Hearts */
.result-score-ring{display: flex; justify-content: center; gap: 4px; margin-bottom: 20px; flex-wrap: wrap;}
.mc-heart {
  width: 32px; height: 32px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9"><path fill="%23FF0000" d="M1 2h2v1H1zm2-1h2v1H3zm2 1h2v1H5zm2 1h1v2H8zm-1 2h-1v1H7zm-1 1H5v1H4zm-1-1H3v-1H2zm-1-1H1v-2H0v2z"/><path fill="%23FFFFFF" d="M1 2h1v1H1z"/></svg>') no-repeat center/contain;
}
.mc-heart.empty {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9"><path fill="%23000000" d="M1 2h2v1H1zm2-1h2v1H3zm2 1h2v1H5zm2 1h1v2H8zm-1 2h-1v1H7zm-1 1H5v1H4zm-1-1H3v-1H2zm-1-1H1v-2H0v2z"/></svg>') no-repeat center/contain;
}

.score-inner{margin-bottom: 20px;}
.score-number{font-family:var(--font-heading);font-size:2.5rem;color:var(--text-yellow);text-shadow:4px 4px 0 #000;}
.result-title{font-family:var(--font-heading);font-size:1.5rem;color:#55FF55;margin-bottom:12px;text-shadow: 2px 2px 0 #000;}
.result-desc{color:var(--text-primary);margin-bottom:32px; font-size: 1.4rem;}

/* Stats */
.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:32px}
.stat-item{
  padding:16px;background-color:var(--mc-stone);
  border:4px solid var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
.stat-emoji{font-size:2rem;margin-bottom:8px; text-shadow: 2px 2px 0 rgba(0,0,0,0.5);}
.stat-label{font-family:var(--font-heading);font-size:0.6rem;color:#FFF;margin-bottom:8px; text-shadow: 1px 1px 0 #000;}
.stat-value{font-size:1.4rem;color:var(--text-yellow); text-shadow: 2px 2px 0 #000;}

/* Details */
.result-details-toggle{margin-bottom: 16px;}
.toggle-details-btn{font-size:1.2rem;color:var(--text-yellow); text-decoration: underline;}
.result-details{text-align:left;max-height:400px;overflow-y:auto;padding-right:8px; margin-bottom: 24px;}
.result-details::-webkit-scrollbar{width:12px; background: #000; border: 2px solid #555;}
.result-details::-webkit-scrollbar-thumb{background: var(--mc-stone); border: 2px solid var(--mc-stone-light);}
.detail-item{
  display:flex;align-items:flex-start;gap:12px;padding:16px;
  background-color: #000; border: 2px solid #555;
  margin-bottom:12px;font-size:1.2rem;
}
.detail-item.detail-correct{border-color: var(--mc-grass-light);}
.detail-item.detail-wrong{border-color: #FF5555;}
.detail-icon{font-size:1.4rem;}
.detail-text{flex:1}
.detail-topic{font-weight:bold;margin-bottom:4px; color: var(--text-yellow);}
.detail-answer{color:var(--text-secondary);font-size:1.1rem; margin-top: 4px;}

/* Action buttons */
.result-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.action-btn{font-size:0.9rem;}
.action-btn.primary{
  background-color: var(--mc-grass);
  border-top-color: var(--mc-grass-light);
  border-left-color: var(--mc-grass-light);
  border-bottom-color: #3B5B25;
  border-right-color: #3B5B25;
}
.action-btn.secondary{/* default mc-button */}
.action-btn.accent{
  background-color: var(--color-science);
  border-top-color: #55FFFF;
  border-left-color: #55FFFF;
  border-bottom-color: #00AAAA;
  border-right-color: #00AAAA;
}

/* Confetti -> XP Orbs */
.result-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden; z-index: 10;}
.confetti-piece{
  position:absolute;width:12px;height:12px;
  background-color: #7EFC20;
  box-shadow: 0 0 10px #7EFC20, inset 2px 2px 0 #D4FF55, inset -2px -2px 0 #4AA52E;
  animation:confetti-fall 3s linear forwards
}
@keyframes confetti-fall{
  0%{opacity:1;transform:translateY(-20px) rotate(0deg)}
  100%{opacity:0;transform:translateY(500px) rotate(360deg)}
}

/* ── Footer ─────────────────────────────────── */
.app-footer{position:relative;z-index:1;text-align:center;padding:30px 20px;color:var(--text-secondary);font-size:1rem;}

/* ── Responsive ─────────────────────────────── */
@media(max-width:640px){
  .setup-title{font-size:1.2rem}
  .subject-grid{grid-template-columns:1fr;gap:16px}
  .question-card{padding:20px 16px}
  .question-title{font-size:1.4rem}
  .result-card{padding:24px 16px}
  .result-actions{flex-direction:column}
  .action-btn{width:100%}
  .mc-button { padding: 12px; font-size: 0.7rem; }
  button.next-btn.mc-button { padding: 16px; font-size: 1.2rem; margin-top: 20px; }
}

/* ── Utilities ──────────────────────────────── */
.shake{animation:shake .4s ease-in-out}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-10px)}
  75%{transform:translateX(10px)}
}

/* Victory Animations */
@keyframes correctGlow {
  0% { box-shadow: 0 0 0 rgba(126, 252, 32, 0); border-color: var(--mc-panel-border); }
  50% { box-shadow: 0 0 50px rgba(126, 252, 32, 0.8); border-color: #7EFC20; transform: scale(1.02); }
  100% { box-shadow: 0 0 15px rgba(126, 252, 32, 0.4); border-color: #7EFC20; }
}
.question-card.victory {
  animation: correctGlow 0.8s ease forwards;
}

.xp-orb {
  position: absolute;
  width: 16px; height: 16px;
  background-color: #7EFC20;
  border-radius: 50%;
  box-shadow: 0 0 15px #7EFC20, inset 2px 2px 0 #D4FF55, inset -2px -2px 0 #4AA52E;
  animation: xp-float 1.2s ease-out forwards;
  pointer-events: none;
  z-index: 50;
}
@keyframes xp-float {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  50% { transform: translate(var(--dx), -80px) scale(1.5); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.5), -150px) scale(1); }
}