/* ===================== Ποιος θέλει να γίνει πτυχιούχος; ===================== */
/* Φόντο: img/quiz_bg.jpg (τηλεοπτικό στούντιο, σκούρο από μόνο του — GEMINI_PROMPTS.md §10) με ήπιο φίλτρο ώστε να διαβάζεται το λευκό κείμενο· το ?v= αλλάζει όταν αλλάζει η εικόνα */
.qz-wrap { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(rgba(18, 10, 60, .28), rgba(10, 6, 40, .5)), url('../img/quiz_bg.jpg?v=2') center/cover no-repeat; color: #fff; }
/* το κοινό: συννεφάκια ομιλίας από τις κερκίδες (θέση --x/--y, καθυστέρηση --d), εμφανίζονται, ανεβαίνουν λίγο και σβήνουν */
.qz-crowd { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.qz-bubble { position: absolute; left: var(--x); top: var(--y); max-width: 190px; background: #fff; color: #1a237e; font-weight: 700; font-size: 15px; line-height: 1.2;
  padding: 6px 12px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.35); white-space: nowrap; opacity: 0; animation: qz-bubble 2.8s ease-out var(--d, 0s) both; }
.qz-bubble::after { content: ''; position: absolute; bottom: -9px; left: 18px; border: 7px solid transparent; border-top: 10px solid #fff; border-bottom: 0; }
.qz-bubble.r::after { left: auto; right: 18px; }
@keyframes qz-bubble { 0% { opacity: 0; transform: translateY(12px) scale(.5); } 12% { opacity: 1; transform: translateY(0) scale(1.08); } 20% { transform: scale(1); } 78% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-22px); } }

/* ---- επιλογή τάξης ---- */
.qz-select { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 16px; }
.qz-logo { z-index: 1; display: flex; align-items: center; gap: 18px; }
.qz-logo span { font-size: 84px; filter: drop-shadow(0 0 24px #ffd740); animation: bob 3s ease-in-out infinite; }
.qz-logo h2 { margin: 0; font-size: 30px; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.qz-logo h2 b { font-size: 44px; background: linear-gradient(90deg, #ffd740, #ff9100); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-grades { z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(120px, 170px)); gap: 14px; width: 100%; max-width: 1150px; justify-content: center; }
.qz-grade {
  font-family: inherit; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border: 3px solid rgba(255,255,255,.35); border-radius: 22px;
  padding: 14px 8px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s, border-color .15s, background .15s;
  backdrop-filter: blur(6px);
}
.qz-grade:hover { transform: translateY(-6px) scale(1.04); border-color: #ffd740; background: rgba(255,215,64,.18); }
.qz-grade .g { font-size: 44px; font-weight: 700; color: #ffd740; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.qz-grade .t { font-size: 16px; font-weight: 600; opacity: .9; }
.qz-grade .s { font-size: 16px; letter-spacing: 2px; margin-top: 4px; }
.qz-grade .b { font-size: 13px; font-weight: 700; color: #b9f6ca; min-height: 16px; }

/* ---- παρτίδα ---- */
.qz-game { display: grid; grid-template-columns: clamp(200px, 15vw, 290px) 1fr 190px; gap: 12px; padding: 12px; }
.qz-main { z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.qz-lifelines { display: flex; gap: 8px; align-items: center; }
.qz-life {
  font-family: inherit; font-weight: 700; font-size: 20px; color: #fff; width: 66px; height: 44px; border-radius: 22px;
  border: 3px solid #ffd740; background: linear-gradient(180deg, #303f9f, #1a237e); cursor: pointer; transition: transform .1s;
  box-shadow: 0 0 12px rgba(255,215,64,.35);
}
.qz-life:hover { transform: scale(1.08); }
.qz-life.used { opacity: .35; border-color: #78909c; box-shadow: none; text-decoration: line-through; cursor: default; }
.qz-gradebadge { margin-left: auto; font-weight: 700; font-size: 18px; background: rgba(255,255,255,.15); padding: 6px 14px; border-radius: 16px; }
.qz-help { display: none; background: rgba(255,255,255,.12); border-radius: 16px; padding: 10px 14px; font-size: 18px; }
.qz-help.show { display: block; animation: popin .3s; }
.qz-bars { display: flex; gap: 14px; align-items: flex-end; height: 110px; margin-top: 6px; padding: 0 10px; }
.qz-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.qz-bar i { display: block; width: 70%; background: linear-gradient(180deg, #ffd740, #ff9100); border-radius: 6px 6px 0 0; transition: height .6s; }
.qz-bar span { font-size: 14px; font-weight: 700; text-align: center; margin-top: 4px; }
.qz-phone b { color: #ffd740; font-size: 22px; }
.qz-qbox { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; padding: 10px 24px; }
.qz-subject { font-size: 15px; font-weight: 700; color: #ffd740; background: rgba(0,0,0,.3); padding: 4px 14px; border-radius: 14px; }
.qz-q { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.3; background: linear-gradient(90deg, rgba(13,17,69,0), #0d1145 15%, #0d1145 85%, rgba(13,17,69,0)); border-top: 3px solid #ffd740; border-bottom: 3px solid #ffd740; padding: 18px 30px; width: 100%; max-width: 900px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.qz-qbox.popin { animation: popin .35s; }
.qz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 0 10px 6px; }
.qz-ans {
  font-family: inherit; font-size: clamp(16px, 1.8vw, 21px); font-weight: 600; color: #fff; text-align: left;
  background: linear-gradient(180deg, #283593, #1a237e); border: 3px solid #5c6bc0; border-radius: 30px; padding: 12px 18px; cursor: pointer;
  display: flex; align-items: center; gap: 12px; transition: transform .1s, background .2s, border-color .2s, opacity .3s; min-height: 58px;
}
.qz-ans .l { flex: none; color: #ffd740; font-weight: 700; font-size: 20px; }
.qz-ans:hover { transform: scale(1.02); border-color: #ffd740; }
.qz-ans.picked { background: linear-gradient(180deg, #ff9100, #e65100); border-color: #ffd740; animation: qz-blink .45s 2; }
.qz-ans.right { background: linear-gradient(180deg, #43a047, #1b5e20); border-color: #b9f6ca; }
.qz-ans.wrong { background: linear-gradient(180deg, #e53935, #b71c1c); border-color: #ff8a80; }
.qz-ans.gone { opacity: .12; pointer-events: none; }
@keyframes qz-blink { 50% { filter: brightness(1.5); } }

/* ---- ο παίκτης στην «καυτή καρέκλα» (αριστερή στήλη): SVG από το qzPlayerSVG() με πόζες μέσω κλάσης ---- */
.qz-player { z-index: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; padding-bottom: 4px; }
.qz-player::before { content: ''; position: absolute; left: 50%; bottom: 10px; width: 260px; height: 92%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 45% 30% at 50% 100%, rgba(255,215,64,.35), transparent 70%), linear-gradient(180deg, rgba(120,160,255,.28), rgba(120,160,255,.05) 60%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.qz-fig { position: relative; width: 100%; max-width: 290px; max-height: calc(100% - 34px); height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); overflow: visible; }
.qz-fig g { transform-box: view-box; }
.qz-pname { position: relative; font-weight: 700; font-size: 15px; color: #ffd740; background: rgba(13,17,69,.85); border: 2px solid #ffd740; border-radius: 12px; padding: 2px 14px; margin-top: -6px; min-height: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-pname:empty { display: none; }
/* βραχίονες: --a = γωνία ώμου, --b = γωνία αγκώνα (θετική = δεξιόστροφη)· το κεφάλι γέρνει με --h */
.qz-fig .arm, .qz-fig .fore, .qz-fig .head { transition: rotate .5s cubic-bezier(.34, 1.56, .64, 1); }
.qz-fig .arm.l { rotate: var(--al, 3.2deg); } .qz-fig .arm.l .fore { rotate: var(--bl, -14.8deg); }
.qz-fig .arm.r { rotate: var(--ar, -3.2deg); } .qz-fig .arm.r .fore { rotate: var(--br, 14.8deg); }
.qz-fig .head { rotate: var(--h, 0deg); }
.qz-fig .body { animation: qz-bob 3.2s ease-in-out infinite; }
.qz-fig .shin { animation: qz-swing 1.7s ease-in-out infinite; }
.qz-fig .leg.r .shin { animation-delay: -.85s; }
/* πόζες */
.qz-player.think .qz-fig { --ar: 16.8deg; --br: 160.9deg; --h: -5deg; }                       /* χέρι στο πιγούνι */
.qz-player.nervous .qz-fig { --al: 28.2deg; --bl: -105.2deg; --ar: -28.2deg; --br: 105.2deg; } /* χέρια σφιγμένα μπροστά */
.qz-player.nervous .body { animation: qz-bob .55s ease-in-out infinite; }
.qz-player.cheer .qz-fig { --al: 143.4deg; --bl: 28.5deg; --ar: -143.4deg; --br: -28.5deg; }   /* χέρια ψηλά */
.qz-player.cheer .body { animation: qz-jump .5s ease-in-out infinite; }
.qz-player.cheer .arm { animation: qz-wiggle .5s ease-in-out infinite alternate; }
.qz-player.sad .qz-fig { --al: 140.8deg; --bl: 69.7deg; --ar: -140.8deg; --br: -69.7deg; --h: 7deg; }   /* χέρια στα μάγουλα */
.qz-player.sad .body { animation: qz-slump .9s ease-out forwards; }
.qz-player.phone .qz-fig { --ar: -81.1deg; --br: -136.1deg; --h: 6deg; }                       /* χέρι στο αυτί */
.qz-player.wave .qz-fig { --ar: -90deg; --br: -92.2deg; }                                      /* χαιρετάει */
.qz-player.wave .arm.r .fore { animation: qz-hello .4s ease-in-out infinite alternate; }
@keyframes qz-bob { 50% { transform: translateY(-3px); } }
@keyframes qz-swing { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } }
@keyframes qz-jump { 50% { transform: translateY(-16px); } }
@keyframes qz-wiggle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes qz-slump { to { transform: translateY(8px); } }
@keyframes qz-hello { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }

/* ---- η «σκάλα» των μορίων ---- */
.qz-ladder { z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: rgba(0,0,0,.35); border-radius: 18px; padding: 8px; overflow: hidden; }
.qz-rung { display: flex; justify-content: space-between; align-items: center; padding: 2px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; color: #b0bec5; line-height: 1.5; }
.qz-rung .n { color: #78909c; font-size: 12px; width: 18px; }
.qz-rung.safe { color: #fff; }
.qz-rung.top { color: #ffd740; }
.qz-rung.done { color: #b9f6ca; }
.qz-rung.done .n { color: #66bb6a; }
.qz-rung.cur { background: linear-gradient(90deg, #ff9100, #ffd740); color: #1a237e; transform: scale(1.06); }
.qz-rung.cur .n { color: #1a237e; }
.qz-diploma { display: flex; align-items: center; gap: 16px; justify-content: center; background: linear-gradient(135deg, #fff8e1, #ffecb3); border: 4px double #ffb300; border-radius: 16px; padding: 14px 24px; margin: 8px auto 14px; max-width: 460px; font-size: 18px; }
.qz-diploma svg { border-radius: 50%; }
.qz-diploma b { font-size: 26px; color: #7b1fa2; letter-spacing: 3px; }
.qz-diploma small { color: #607d8b; }

@media (max-width: 900px) {
  .qz-game { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .qz-player { display: none; }
  .qz-ladder { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .qz-rung { padding: 2px 6px; }
  .qz-answers { grid-template-columns: 1fr; }
  .qz-grades { grid-template-columns: repeat(3, 1fr); }
}