/* Seerah Quiz — overrides on top of the shared Hajj/Salaah style.css */
:root {
  --bg: #0b1f1a;
  --card: #133229;
  --card2: #1d4538;
  --muted: #8fb3a6;
  --accent: #e9c46a;
  --y5: #e9c46a;
  --y6: #2a9d8f;
  --y7: #e76f51;
  --y8: #8ab4f8;
}
body { background: radial-gradient(1200px 600px at 50% -10%, #17453a 0%, var(--bg) 60%); }
.card.station.y5 { border-left: 6px solid var(--y5); }
.card.station.y6 { border-left: 6px solid var(--y6); }
.card.station.y7 { border-left: 6px solid var(--y7); }
.card.station.y8 { border-left: 6px solid var(--y8); }
.card.station.whoami { border-left: 6px solid #c77dff; }
.station-name .pip { background: var(--accent); }

/* Header clock */
.hdr-right { display: flex; gap: 14px; align-items: center; }
.clock { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.clock.late { color: #ff8a7a; }

a.class-btn { display: block; text-decoration: none; }
.btn-big { font-size: 26px; padding: 24px; width: 100%; }
.btn-end { background: #6b2b23; color: #fff; border: 0; border-radius: 14px; font-weight: 700; }
.btn-secondary.small, .btn-danger.small { padding: 10px 14px; font-size: 15px; border-radius: 10px; text-decoration: none; color: #fff; display: inline-block; }
button:disabled { opacity: 0.45; cursor: default; }
a.btn-back { display: block; text-align: center; text-decoration: none; }

.ready-card { background: var(--card); border-radius: 18px; padding: 28px 22px; text-align: center; }
.ready-card.done { background: linear-gradient(135deg, #1f6f5a, #164c3f); }
.ready-title { font-size: 34px; font-weight: 800; margin-bottom: 10px; }
.ready-hint { color: var(--muted); font-size: 19px; line-height: 1.5; }
.ready-card.done .ready-hint { color: #d6efe7; }

.student-spotlight { position: relative; }
.repick {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.15); color: #1a1308; border: 0; border-radius: 999px;
  padding: 6px 12px; font-size: 13px; font-weight: 700;
}

.verdict-banner { border-radius: 18px; padding: 22px; font-size: 34px; font-weight: 800; text-align: center; color: #fff; }
.verdict-banner.ok { background: linear-gradient(135deg, #2ecc71, #1f9d55); }
.verdict-banner.no { background: linear-gradient(135deg, #e74c3c, #a8322a); }
.answer-note .why { margin-top: 8px; }

.review { background: var(--card); border-radius: 14px; padding: 12px 14px; }
.review summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.review .recap-list { margin-top: 10px; }

/* Teacher */
.teacher-view .hint { color: var(--muted); margin: -6px 0 12px; }
.teacher-view .title small { color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 6px; }
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rooms .attendance-class { margin: 0; }
.room-status { color: var(--muted); min-height: 2.6em; }
.room-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
details.attendance-class summary { cursor: pointer; margin: 0; }
details.attendance-class[open] summary { margin-bottom: 10px; }
.attendance-item small { color: var(--muted); margin-left: auto; }
.err { color: #ff8a7a; margin-top: 8px; min-height: 1.2em; }

/* Big screen — progress (scores hidden) */
.display-body { min-height: 100vh; }
.progress-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; }
.pcard { background: var(--card); border-radius: 20px; padding: 28px 22px; text-align: center; }
.pcard.done { box-shadow: 0 0 0 3px var(--accent) inset; }
.pname { font-size: 44px; font-weight: 800; }
.psub { color: var(--muted); font-size: 20px; margin-bottom: 22px; }
.pbar { height: 18px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.pfill { height: 100%; background: linear-gradient(90deg, #2a9d8f, var(--accent)); border-radius: 999px; transition: width 0.8s ease; }
.pstatus { margin-top: 14px; font-size: 22px; color: #d6efe7; }
.pscore { margin-top: 18px; font-size: 54px; font-weight: 800; color: var(--accent); letter-spacing: 6px; opacity: 0.6; }
@media (max-width: 900px) { .progress-grid { grid-template-columns: 1fr 1fr; } .pname { font-size: 30px; } }

/* Big screen — reveal */
.podium-col { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,1,.36,1); }
.podium-col.hidden { opacity: 0; transform: translateY(40px); }
.podium-col.winner .podium-block { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 0%,100% { box-shadow: 0 10px 36px rgba(233,196,106,0.30); } 50% { box-shadow: 0 10px 60px rgba(233,196,106,0.75); } }
.podium-pts span { font-size: 26px; opacity: 0.75; margin-left: 6px; }

/* Who am I? */
.wa-home, .wa-ready { max-width: 760px; margin: 6vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 18px; }
.wa-home h1, .wa-ready h1 { font-size: 46px; margin: 0; }
.wa-home p, .wa-ready p { font-size: 21px; color: var(--muted); line-height: 1.5; }
.wa-count { color: var(--muted); font-size: 20px; font-weight: 700; }
.wa-card { min-height: calc(100vh - 48px); display: flex; flex-direction: column; justify-content: center; gap: 22px; text-align: center; }
.wa-word { font-size: clamp(48px, 11vw, 140px); font-weight: 800; line-height: 1.1; color: #fff; }
.wa-word.small { font-size: clamp(36px, 7vw, 72px); }
.wa-timer { height: 22px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.wa-fill { height: 100%; width: 100%; background: var(--accent); border-radius: 999px; }
.wa-fill.warn { background: #e76f51; }
.wa-secs { font-size: 54px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wa-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wa-btns button { font-size: 26px; padding: 24px; }