/* styles.css — SEHS Triangle Quiz (with Explain button support) */

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

:root{
  --primary-blue:#004587;
  --accent-yellow:#fbba07;
  --accent-red:#e73037;
  --success-green:#28a745;
  --neutral-gray:#6c757d;

  --text-dark:#333;
  --text-light:#666;
  --bg-light:#f8f9fa;
  --white:#ffffff;

  --shadow:0 4px 6px rgba(0,0,0,0.10);
  --shadow-lg:0 10px 25px rgba(0,0,0,0.15);
}

body{
  font-family:'Gotham','Montserrat','Avenir Next','Helvetica Neue',Arial,sans-serif;
  background:var(--primary-blue);
  min-height:100vh;
  color:var(--text-dark);
}

/* Screens */
.screen{ display:none; min-height:100vh; padding:20px; }
.screen.active{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:10px; }
.screen-content{ max-width:900px; width:100%; }

/* Difficulty screen */
#difficulty-screen{ background:var(--primary-blue); }
#difficulty-screen .screen-content{
  background:var(--white);
  padding:2.5rem 2rem 3rem 2rem;
  border-radius:15px;
  box-shadow:var(--shadow-lg);
  border:4px solid var(--accent-yellow);
  max-height:96vh;
  overflow-y:auto;
}
#difficulty-screen h1{
  color:var(--primary-blue);
  text-align:center;
  font-size:3rem;
  margin-bottom:0.5rem;
  font-weight:800;
}
.subtitle{
  color:var(--text-light);
  text-align:center;
  font-size:1.2rem;
  margin-bottom:2.25rem;
  font-weight:600;
}
.filter-section{ margin-bottom:2rem; }
.filter-section h3{
  color:var(--primary-blue);
  font-size:1.25rem;
  margin-bottom:1.25rem;
  text-align:center;
  font-weight:800;
}
.difficulty-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1.25rem;
}
.difficulty-card{
  background:var(--white);
  border:3px solid var(--accent-yellow);
  border-radius:15px;
  padding:1.8rem 1.3rem;
  text-align:center;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;
}
.difficulty-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--primary-blue);
  background:#f0f8ff;
}
.difficulty-card.selected{
  border-color:var(--primary-blue);
  background:#f0f8ff;
  transform:translateY(-4px);
}
.difficulty-card h2{
  color:var(--primary-blue);
  font-size:1.4rem;
  margin-bottom:.4rem;
  font-weight:900;
}
.difficulty-card p{
  color:var(--text-light);
  font-size:.95rem;
  font-weight:600;
}

.question-count-buttons{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.count-btn{
  padding:0.85rem 1.75rem;
  background:var(--white);
  border:3px solid var(--accent-yellow);
  border-radius:10px;
  color:var(--text-dark);
  font-size:1.05rem;
  font-weight:900;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  min-width:90px;
}
.count-btn:hover{
  background:var(--bg-light);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.count-btn.active{
  background:var(--primary-blue);
  color:var(--white);
  border-color:var(--primary-blue);
}
.start-button-container{
  margin-top:2.25rem;
  text-align:center;
  padding-top:2rem;
  border-top:2px solid var(--bg-light);
}
.start-btn{
  padding:1.1rem 3.2rem;
  background:var(--success-green);
  color:var(--white);
  border:none;
  border-radius:12px;
  font-size:1.35rem;
  font-weight:900;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:var(--shadow-lg);
}
.start-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,0.20);
  background:#218838;
}

.how-to-play{ margin: 1.25rem auto 0 auto; padding-top: 1.25rem; border-top: 2px solid var(--bg-light); }
.how-to-play h2{ text-align:center; color:var(--primary-blue); font-weight:900; font-size:1.15rem; margin-bottom:0.9rem; }
.how-to-img{ display:block; width:100%; max-width:720px; height:auto; margin:0 auto 0.9rem auto; border-radius:10px; box-shadow:var(--shadow); }

/* Quiz screen */
#quiz-screen{ background:var(--bg-light); }
.quiz-header{
  background:var(--white);
  padding:0.75rem 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:var(--shadow);
  border-radius:10px;
  margin-bottom:1rem;
  border-top:4px solid var(--accent-yellow);
}
.quiz-info{
  display:flex;
  gap:1rem;
  align-items:center;
  font-weight:800;
  color:var(--primary-blue);
  font-size:0.95rem;
  flex-wrap:wrap;
}
.divider{ color:var(--text-light); }
.quit-btn{
  padding:0.45rem 0.9rem;
  background:var(--accent-red);
  color:var(--white);
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:900;
  font-size:1.05rem;
  transition:transform .2s ease, background .2s ease;
}
.quit-btn:hover{ background:#c51f25; transform:scale(1.03); }

.question-container{
  background:var(--white);
  padding:1.25rem;
  border-radius:10px;
  box-shadow:var(--shadow);
  margin-bottom:1rem;
  border-left:6px solid var(--accent-yellow);
}
.question-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.75rem;
  flex-wrap:wrap;
  gap:0.5rem;
}
.question-topic{ color:var(--primary-blue); font-weight:900; font-size:0.9rem; }
.question-level{
  background:var(--accent-yellow);
  color:var(--primary-blue);
  padding:0.25rem 0.7rem;
  border-radius:5px;
  font-weight:900;
  font-size:0.85rem;
}
.question-text{ color:var(--text-dark); font-size:1.2rem; line-height:1.45; font-weight:650; }

/* Answers (read-only) */
.answers-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:auto auto;
  gap:0.75rem;
  margin-bottom:1rem;
  padding:1.35rem 1rem;
  background:var(--white);
  border-radius:15px;
  box-shadow:var(--shadow);
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
#btn-A{ grid-column:1 / -1; grid-row:1; justify-self:center; max-width:60%; }
#btn-B{ grid-column:1; grid-row:2; }
#btn-C{ grid-column:2; grid-row:2; }

.answer-btn{
  background:var(--white);
  border:3px solid var(--accent-yellow);
  border-radius:12px;
  padding:1rem 0.85rem;
  display:flex;
  align-items:center;
  gap:0.75rem;
  width:100%;
  font-family:inherit;
  text-align:left;
  pointer-events:none; /* keep read-only */
}
.answer-label{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--accent-yellow);
  color:var(--primary-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  font-weight:1000;
  flex-shrink:0;
}
.answer-text{
  color:var(--text-dark);
  font-size:1rem;
  line-height:1.35;
  font-weight:650;
  flex:1;
  word-wrap:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
}
.answer-btn.correct{
  background:rgba(40,167,69,0.14);
  border-color:var(--success-green);
  border-width:5px;
  box-shadow:0 0 0 4px rgba(40,167,69,0.22);
}

/* Justify the question text */
.question-text{
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Center content inside answer boxes (label + text) */
.answer-btn{ justify-content: center; text-align: center; }
.answer-text{ text-align: center; }

/* Make A the same width as B and C (half the grid width) */
#btn-A{
  grid-column: 1 / -1;        /* keep it on its own row */
  justify-self: center;       /* center the button in the grid */
  width: calc(50% - 0.375rem);/* match B/C column width */
  max-width: none;            /* override earlier max-width */
}

/* Triangle */
.triangle-container{
  background:var(--white);
  padding:0.75rem 0.5rem;
  border-radius:15px;
  box-shadow:var(--shadow);
  margin-bottom:1rem;
  border:3px solid var(--primary-blue);
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.triangle-instruction{
  text-align:center;
  color:var(--primary-blue);
  font-weight:900;
  font-size:1rem;
  margin-bottom:0.5rem;
}
.confidence-triangle{
  width:100%;
  max-width:520px;
  height:auto;
  display:block;
  margin:0 auto;
}
.conf-circle{
  fill:var(--white);
  stroke:var(--accent-yellow);
  stroke-width:3;
  cursor:pointer;
  transition:all .15s ease;
  pointer-events:all;
}
.conf-circle:hover:not(.disabled){
  fill:var(--accent-yellow);
  stroke:var(--primary-blue);
  stroke-width:4;
}
.conf-circle.selected{
  fill:var(--primary-blue);
  stroke:var(--accent-yellow);
  stroke-width:4;
}
.conf-circle.disabled{
  pointer-events:none;
  opacity:0.5;
}

/* NEW: Explain + Next row */
.nav-buttons{
  display:flex;
  justify-content:center;
  gap:12px;
  align-items:center;
  margin-top:12px;
}

/* Hide until answered (JS adds .show) */
.next-btn,
.explain-btn{
  display:none;
  padding:0.9rem 1.75rem;
  color:var(--white);
  border:3px solid var(--accent-yellow);
  border-radius:12px;
  font-size:1.1rem;
  font-weight:950;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  margin:0;
  box-shadow:var(--shadow);
  max-width:280px;
}

.next-btn{ background:var(--success-green); }
.explain-btn{ background:var(--neutral-gray); }

.next-btn.show,
.explain-btn.show{ display:block; }

.next-btn:hover{
  background:var(--primary-blue);
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}
.explain-btn:hover{
  background:#5a6268;
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}

/* NEW: Explanation panel */
.explanation-box{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  border:2px solid var(--primary-blue);
  background:rgba(0,69,135,0.06);
  color:var(--text-dark);
  font-weight:650;
}

/* Points overlay */
.points-display{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,0.9);
  color:var(--white);
  padding:1.5rem 2.25rem;
  border-radius:15px;
  font-size:1.7rem;
  font-weight:950;
  display:none;
  z-index:1000;
  border:3px solid var(--accent-yellow);
}
.points-display.show{ display:block; }
.points-display.positive{ background:var(--success-green); }
.points-display.negative{ background:var(--accent-red); }
.points-display.neutral{ background:var(--neutral-gray); }

/* Results screen (compact) */
#results-screen{ background:var(--primary-blue); }
#results-screen .screen-content{
  background:var(--white);
  border-radius:15px;
  padding:1.5rem;
  box-shadow:var(--shadow-lg);
  border:5px solid var(--accent-yellow);
  max-width:700px;
}
#results-screen h1{
  color:var(--primary-blue);
  text-align:center;
  font-size:2.2rem;
  margin-bottom:1rem;
  font-weight:950;
}
.score-summary{
  background:var(--white);
  border-radius:12px;
  padding:1.25rem;
  margin-bottom:1rem;
  box-shadow:var(--shadow);
  display:flex;
  gap:1rem;
  align-items:center;
  border:3px solid var(--accent-yellow);
}
.result-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.primary-btn{
  padding:1rem 2rem;
  background:var(--success-green);
  color:var(--white);
  border:3px solid var(--accent-yellow);
  border-radius:12px;
  font-size:1.1rem;
  font-weight:950;
  cursor:pointer;
  box-shadow:var(--shadow);
}
.secondary-btn{
  padding:1rem 2rem;
  background:var(--neutral-gray);
  color:var(--white);
  border:3px solid transparent;
  border-radius:12px;
  font-size:1.1rem;
  font-weight:950;
  cursor:pointer;
}

@media (max-width: 768px){
  #difficulty-screen h1{ font-size:2rem; }
  .subtitle{ font-size:1rem; }
  .difficulty-grid{ grid-template-columns:1fr; }
  #btn-A{ max-width:75%; }
  .confidence-triangle{ max-width:420px; }
}

/* MacBook Air sizing (short-ish height + not huge width) */
@media (max-height: 820px) and (max-width: 1440px){
  .quiz-header{ margin-bottom: 0.6rem; padding: 0.55rem 0.8rem; }
  .question-container{ padding: 0.95rem; margin-bottom: 0.6rem; }
  .question-text{ font-size: 1.05rem; line-height: 1.35; }

  .answers-grid{ padding: 0.9rem 0.75rem; gap: 0.55rem; margin-bottom: 0.6rem; }
  #btn-A{ max-width: 75%; }

  .answer-btn{ padding: 0.75rem 0.7rem; border-radius: 10px; }
  .answer-label{ width: 36px; height: 36px; font-size: 1.1rem; }
  .answer-text{ font-size: 0.92rem; line-height: 1.25; }

  .triangle-container{ padding: 0.6rem 0.45rem; margin-bottom: 0.6rem; }
  .triangle-instruction{ font-size: 0.9rem; margin-bottom: 0.35rem; }

  /* Key: limit triangle by viewport height */
  .confidence-triangle{ max-width: 500px; max-height: 32vh; }

  /* Make both buttons less chunky */
  .next-btn, .explain-btn{ padding: 0.75rem 1.35rem; font-size: 1rem; max-width: 240px; }
}
/* Topic breakdown bars (Results screen) */
.topic-list{
  display:flex;
  flex-direction:column;
  gap:0.85rem;
}

.topic-item{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}

.topic-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:0.9rem;
  gap:0.75rem;
}

.topic-name{
  font-weight:800;
  color:var(--text-dark);
  flex:1;
}

.topic-avg{
  font-weight:950;
  color:var(--primary-blue);
  white-space:nowrap;
}

/* The actual “bar” */
.topic-bar{
  position:relative;
  height:12px;
  border-radius:999px;
  background: linear-gradient(
    to right,
    #e8e8e8 0%,
    #e8e8e8 49%,
    #666 49%,
    #666 51%,
    #e8e8e8 51%,
    #e8e8e8 100%
  );
  overflow:hidden;
}

.topic-fill{
  position:absolute;
  top:0;
  height:100%;
  border-radius:999px;
  transition:width 0.35s ease;
}

.topic-fill.positive{
  left:50%;
  background: var(--success-green);
}

.topic-fill.negative{
  right:50%;
  background: var(--accent-red);
}
/* Results: make the "keep practicing" line its own card */
.performance-message{
  background: var(--white);
  border: 3px solid var(--accent-yellow);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem;
  margin: 0.75rem 0 1.1rem 0;
  color: var(--text-dark);
  font-weight: 800;
  text-align: center;
}

/* Results: space above Restart / Change mode */
.result-actions{
  margin-top: 1.25rem;
}

.difficulty-icon{
  font-size: 4.5rem;   /* make the emojis big */
  line-height: 1;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px){
  .difficulty-icon{ font-size: 3.6rem; }
}

#quiz-screen{
  background: #004587;
}

#score{
  font-size: 1.6rem;
  font-weight: 950;
}