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

:root {
  --bg: #1e1b4b;      /* indigo-950 */
  --bg2: #0b1120;     /* slate-950  */
  --panel: #ffffff;
  --ink: #1e2340;
  --muted: #64708a;
  --gold: #fbbf24;
  --cyan: #22d3ee;
  /* answer palette A..F — deliberately not Kahoot's red/blue/yellow/green */
  --a0: #6366f1; --a1: #ec4899; --a2: #f59e0b;
  --a3: #10b981; --a4: #06b6d4; --a5: #a855f7;
  --ok: #10b981;
  --bad: #f43f5e;
}

html, body { height: 100%; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Inter, Roboto, sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, #312e81 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #0e7490 0%, transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  color: #eef1f8;
  min-height: 100vh;
  -webkit-user-select: none;
  user-select: none;
}

.screen { display: none; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.screen.active { display: flex; }

.brand {
  font-size: 2.6rem; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 4px;
  background: linear-gradient(90deg, #fff 0%, var(--cyan) 60%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .q { -webkit-text-fill-color: var(--gold); }
.subtitle { opacity: .78; margin-bottom: 26px; max-width: 540px; }

.card {
  background: var(--panel);
  color: var(--ink);
  border-radius: 18px;
  padding: 26px;
  width: min(430px, 94vw);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  /* lock to light inputs: OS dark mode mustn't repaint the login/name fields
     dark text on a dark auto-fill background */
  color-scheme: light;
}

input[type=text], input[type=password], input[type=number] {
  width: 100%;
  font-size: 1.35rem;
  padding: 14px 16px;
  border: 2px solid #d9def0;
  border-radius: 12px;
  text-align: center;
  outline: none;
  color: var(--ink);
  background: #fff;
}
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder { color: var(--muted); }
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {
  border-color: var(--a0); box-shadow: 0 0 0 4px rgba(99,102,241,.18);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 1.15rem; font-weight: 700;
  padding: 13px 30px; margin-top: 14px;
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  color: #fff; cursor: pointer;
  box-shadow: 0 8px 22px rgba(79,70,229,.4);
  transition: transform .06s, filter .15s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn.big { font-size: 1.5rem; padding: 17px 46px; }
.btn.gold { background: linear-gradient(180deg, #fcd34d, #f59e0b); color: #3a2a00; box-shadow: 0 8px 22px rgba(245,158,11,.4); }
.btn.ghost { background: transparent; border: 2px solid rgba(255,255,255,.4); box-shadow: none; }
.btn.danger { background: linear-gradient(180deg, #fb7185, #e11d48); box-shadow: 0 8px 22px rgba(225,29,72,.4); }
.btn:disabled { opacity: .5; cursor: default; }

.error-box { color: #fda4af; font-weight: 600; min-height: 1.4em; margin-top: 10px; }

.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.05);} }

.spin {
  width: 54px; height: 54px; margin: 18px auto;
  border: 6px solid rgba(255,255,255,.18);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bigcount {
  font-size: 7.5rem; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #fff, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pop .9s ease-in-out infinite;
}
@keyframes pop { 0% { transform: scale(.65); opacity:.4;} 40% { transform: scale(1.12); opacity:1;} 100% { transform: scale(1);} }

/* progress dots (question position) */
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); }
.dots i.on { background: var(--cyan); }
.dots i.done { background: var(--gold); }

/* ------- question layout ------- */
.qwrap { display: none; min-height: 100vh; flex-direction: column; padding: 14px; }
.qwrap.active { display: flex; }

.qtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px; }
.qmeta { font-weight: 700; opacity: .9; white-space: nowrap; }
.qtimer-num {
  font-size: 1.7rem; font-weight: 800; background: var(--cyan); color: #06303a;
  min-width: 62px; padding: 7px 14px; border-radius: 50px; text-align: center;
}

.qtext {
  background: rgba(255,255,255,.97); color: var(--ink);
  font-size: clamp(1.2rem, 3.4vw, 2.1rem);
  font-weight: 700;
  border-radius: 16px;
  padding: 20px 24px;
  margin: 10px 4px 14px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.timerbar-wrap { height: 9px; border-radius: 6px; background: rgba(255,255,255,.14); margin: 0 4px 14px; overflow: hidden; }
.timerbar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); transform-origin: left; }

.answers {
  flex: 1;
  display: grid;
  /* minmax(0,…) lets columns shrink below their content on narrow phones */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px;
  align-content: stretch;
}
.answers.single-col { grid-template-columns: minmax(0, 1fr); }

.ans {
  display: flex; align-items: center; gap: 14px;
  border: 0; border-radius: 14px;
  padding: 14px 16px;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 700;
  color: #fff; text-align: left;
  cursor: pointer;
  min-height: 76px;
  position: relative;
  background: #334155;
  transition: transform .06s, filter .12s, opacity .25s, box-shadow .12s;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}
.ans:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ans:active { transform: scale(.98); }
/* letter badge instead of Kahoot's shape */
.ans .shape {
  flex: none; width: 46px; height: 46px; line-height: 46px; text-align: center;
  font-size: 1.4rem; font-weight: 800;
  background: rgba(0,0,0,.26); border-radius: 11px;
}
.ans { min-width: 0; }
/* wrap between words; split a word only if it can't fit a line on its own */
.ans .atext { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* touch devices have no keyboard: drop the hotkey badge */
@media (hover: none) and (pointer: coarse) { .ans .key { display: none; } }
/* narrow screens (phones, or a narrow desktop window): give the text the room */
@media (max-width: 520px) {
  .answers { gap: 8px; }
  .ans { padding: 12px 10px; gap: 10px; }
  .ans .shape { width: 38px; height: 38px; line-height: 38px; font-size: 1.2rem; }
  .ans .key { display: none; }
}
.ans .key {
  flex: none; font-size: .95rem; font-weight: 800;
  background: rgba(255,255,255,.22); color: #fff;
  min-width: 1.9em; height: 1.9em; line-height: 1.9em; text-align: center;
  border-radius: 7px; margin-left: 8px;
}
.ans.k0 { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.ans.k1 { background: linear-gradient(135deg, #ec4899, #db2777); }
.ans.k2 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #3a2a00; }
.ans.k3 { background: linear-gradient(135deg, #10b981, #059669); }
.ans.k4 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.ans.k5 { background: linear-gradient(135deg, #a855f7, #9333ea); }
.ans.k2 .shape, .ans.k2 .key { color: #3a2a00; }
.ans.dim { opacity: .25; }
.ans.correct { outline: 5px solid var(--gold); box-shadow: 0 0 0 5px rgba(251,191,36,.3), 0 6px 18px rgba(0,0,0,.32); }
.ans:disabled { cursor: default; }

/* ------- result ------- */
.result-badge { font-size: 5rem; }
.result-points { font-size: 2.2rem; font-weight: 800; margin: 6px 0; color: var(--gold); }
.result-rank { font-size: 1.3rem; opacity: .92; }
.streak { color: var(--gold); font-weight: 700; font-size: 1.2rem; margin-top: 8px; }

/* ------- player scoreboard card ------- */
.rank-move { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; }
.rank-move.up { color: #34d399; }
.rank-move.down { color: #fb7185; }
.rank-move.flat { color: var(--cyan); }
.rank-big { font-size: 5rem; font-weight: 800; color: var(--gold); line-height: 1; }

/* ------- host lobby ------- */
.joinhint {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #fff, #eef1fb); color: var(--ink);
  border-radius: 16px; padding: 16px 30px;
  font-size: 1.6rem; font-weight: 800;
  margin-bottom: 18px; box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.joinhint span { color: var(--a0); }
.players-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 960px; margin: 18px 0; }
.chip {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50px; padding: 9px 20px;
  font-weight: 700; font-size: 1.1rem;
  animation: chipin .25s ease-out;
}
@keyframes chipin { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.counter { font-size: 1.2rem; opacity: .85; margin-bottom: 8px; }

/* ------- host reveal ------- */
.dist { display: flex; gap: 20px; align-items: flex-end; justify-content: center; height: 230px; margin: 20px 0 6px; }
.dist .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 118px; height: 100%; }
.dist .bar { width: 72px; flex-shrink: 0; border-radius: 8px 8px 0 0; min-height: 6px; transition: height .6s cubic-bezier(.22,1,.36,1); }
.dist .bar.wrong { opacity: .32; }
.dist .num { font-weight: 800; font-size: 1.3rem; margin-bottom: 6px; }
.dist .lbl { margin-top: 8px; font-size: 1.5rem; font-weight: 800; }
.dist .tick { color: var(--gold); font-size: 1.4rem; height: 1.5em; }

.lb { width: min(560px, 92vw); margin: 10px auto; }
.lb .row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 11px 18px; margin-bottom: 8px;
  font-size: 1.2rem; font-weight: 700;
}
.lb .row:first-child { background: linear-gradient(90deg, var(--gold), #f59e0b); color: #3a2a00; border: 0; }
.lb .row.me { outline: 2px solid var(--cyan); outline-offset: -1px; font-weight: 800; }

/* ------- animated scoreboard (host) ------- */
.sb-board { position: relative; width: min(700px, 94vw); margin: 16px auto; }
.sb-row {
  position: absolute; left: 0; right: 0; top: 0; height: 50px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 0 18px;
  font-size: 1.35rem; font-weight: 700;
  will-change: transform;
}
.sb-row.lead { background: linear-gradient(90deg, var(--gold), #f59e0b); color: #3a2a00; border: 0; }
.sb-rank { min-width: 1.6em; text-align: center; opacity: .85; }
.sb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-delta { font-size: 1rem; font-weight: 800; min-width: 2.4em; text-align: right; }
.sb-delta.up { color: #34d399; }
.sb-delta.down { color: #fb7185; }
.sb-row.lead .sb-delta.up { color: #166534; }
.sb-gain { font-size: 1rem; font-weight: 800; color: #34d399; min-width: 3.4em; text-align: right; }
.sb-row.lead .sb-gain { color: #166534; }
.sb-score { min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; }
.sb-streak { margin-left: 10px; font-size: .95rem; }
/* teacher-only: answers with suspicious timing (never rendered on /watch) */
.sb-flag { margin-left: 8px; font-size: .8rem; font-weight: 800; color: #fbbf24; cursor: help; }
.suspects {
  margin-top: 10px; max-width: 1100px; width: min(1100px, 96vw); text-align: left;
  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.45); border-radius: 14px; padding: 8px 14px;
  font-size: .95rem;
}
.sus-head { font-weight: 800; color: #fbbf24; margin-bottom: 4px; }
.sus-row { display: flex; gap: 10px; align-items: center; padding: 3px 0; flex-wrap: wrap; }
.sus-name { font-weight: 700; }
.sus-why { color: #fde68a; cursor: help; }
.sus-time { opacity: .75; font-variant-numeric: tabular-nums; margin-left: auto; }

/* ------- reveal analytics (host) ------- */
.rv-answer { font-size: 1.35rem; font-weight: 800; color: var(--gold); margin: -2px 0 4px; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; max-width: 1100px; }
.stat {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50px; padding: 9px 18px; font-weight: 700; font-size: 1.1rem;
}
.stat.good { background: rgba(16,185,129,.22); border-color: rgba(52,211,153,.5); }
.stat.mid  { background: rgba(245,158,11,.22); border-color: rgba(251,191,36,.5); }
.stat.bad  { background: rgba(244,63,94,.22);  border-color: rgba(251,113,133,.5); }
.stat.fast { background: rgba(34,211,238,.18); border-color: rgba(34,211,238,.5); }
.stat.trap { background: rgba(236,72,153,.18); border-color: rgba(236,72,153,.5); }

/* fastest-finger badge (player) */
.fastest-badge {
  display: none; margin: 6px 0 2px; padding: 6px 16px; border-radius: 50px;
  background: linear-gradient(90deg, var(--cyan), #0891b2); color: #04222a;
  font-weight: 800; font-size: 1.15rem; box-shadow: 0 6px 18px rgba(34,211,238,.35);
  animation: pulse 1.2s ease-in-out infinite;
}
.fastest-badge.show { display: inline-block; }

/* ------- podium ------- */
.podium { display: flex; align-items: flex-end; gap: 16px; margin: 28px 0; }
.podium .spot { display: flex; flex-direction: column; align-items: center; width: 160px; }
.podium .name { font-weight: 800; font-size: 1.3rem; margin-bottom: 6px; word-break: break-word; }
.podium .pts { opacity: .85; margin-bottom: 8px; }
.podium .block { width: 100%; border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 800; color: #1e2340; }
.podium .b1 { height: 180px; background: linear-gradient(180deg, #fde68a, var(--gold)); }
.podium .b2 { height: 128px; background: linear-gradient(180deg, #eef2ff, #c7d2fe); }
.podium .b3 { height: 90px; background: linear-gradient(180deg, #fed7aa, #fb923c); }
/* telefon: 3 blok yan yana sığsın */
@media (max-width: 600px) {
  .podium { gap: 8px; margin: 16px 0; }
  .podium .spot { width: 96px; }
  .podium .name { font-size: .95rem; }
  .podium .pts { font-size: .85rem; }
  .podium .block { font-size: 1.8rem; }
  .podium .b1 { height: 110px; }
  .podium .b2 { height: 78px; }
  .podium .b3 { height: 56px; }
  .podium .av.lg { width: 44px; height: 44px; font-size: 1.5rem; }
}

.standings { max-height: 32vh; overflow-y: auto; width: min(560px, 92vw); }

.topbar-note {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--bad); color: #fff;
  padding: 8px; text-align: center; font-weight: 700;
  display: none; z-index: 30;
}
.topbar-note.show { display: block; }

.quiz-list { display: flex; flex-direction: column; gap: 12px; width: min(540px, 94vw); }
.quiz-item {
  background: linear-gradient(180deg, #fff, #f1f3fb); color: var(--ink);
  border: 0; border-radius: 14px;
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.15rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  transition: transform .08s, box-shadow .15s;
  text-align: left;
}
.quiz-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.34); }
.quiz-list { max-height: 70vh; overflow-y: auto; padding: 4px 6px 8px; }
.quiz-list .back { align-self: flex-start; margin: 0 0 4px; padding: 8px 18px; font-size: 1rem; }
.quiz-item.course { font-size: 1.3rem; padding: 22px 24px; }
.quiz-item .n { opacity: .55; font-weight: 600; white-space: nowrap; margin-left: 12px; }
.quiz-item.broken { background: #fee2e2; cursor: default; }
.quiz-item.broken .err { font-size: .85rem; font-weight: 500; color: #b00020; }

/* ------- hotkey hint ------- */
.keyhint { text-align: center; opacity: .65; font-size: .95rem; padding: 10px 4px 2px; }
@media (hover: none) and (pointer: coarse) { .keyhint { display: none; } }

/* ------- present (host) tweaks ------- */
body.present .qtext.big { font-size: clamp(1.6rem, 4vw, 3rem); padding: 28px 32px; }
.present-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 1.3rem; }
.qtimer-ring {
  align-self: center; font-size: 2.4rem; font-weight: 800;
  width: 86px; height: 86px; line-height: 86px; text-align: center;
  background: var(--cyan); color: #06303a; border-radius: 50%;
  margin: 2px auto 14px; box-shadow: 0 8px 24px rgba(34,211,238,.4);
}
body.present .ans { min-height: 94px; font-size: clamp(1.2rem, 2.8vw, 1.9rem); }
body.present .ans .key { display: none; }

/* While a game runs the control bar owns a fixed strip at the bottom; every
   projector screen gets exactly the height above it (plus a gap) and its
   content shrinks to fit, so nothing ever sits under the buttons. */
body.present { --ctrl-h: 64px; }
body.present.running .screen.active, body.present.running .qwrap.active {
  height: calc(100vh - var(--ctrl-h)); height: calc(100dvh - var(--ctrl-h));
  min-height: 0; overflow: hidden; padding-bottom: 14px;
}
body.present.running .qwrap .answers { min-height: 0; grid-auto-rows: minmax(0, 1fr); }
body.present.running .ans { min-height: 0; font-size: clamp(1rem, min(2.8vw, 3.6vh), 1.9rem); padding-top: 8px; padding-bottom: 8px; }
body.present.running .ans .shape { width: clamp(30px, 6vh, 46px); height: clamp(30px, 6vh, 46px); line-height: clamp(30px, 6vh, 46px); }
body.present.running .qtext.big { font-size: clamp(1.15rem, min(4vw, 5.2vh), 3rem); padding: clamp(10px, 2.6vh, 28px) 28px; margin: 6px 4px clamp(6px, 1.4vh, 14px); }
body.present.running .qtimer-ring { width: clamp(48px, 10vh, 86px); height: clamp(48px, 10vh, 86px); line-height: clamp(48px, 10vh, 86px); font-size: clamp(1.4rem, 4.4vh, 2.4rem); margin: 0 auto clamp(4px, 1.2vh, 14px); }
body.present.running .present-head { padding: 4px 14px; }
/* 5-6 options on a wide projector: 2 columns x 3 rows instead of 6 rows */
body.present .answers.single-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.present.running .dist { height: clamp(90px, 26vh, 230px); margin: clamp(6px, 2vh, 20px) 0 4px; }
body.present.running #s-reveal .qtext.big { font-size: clamp(1.05rem, min(3.4vw, 4.2vh), 2.6rem); }
body.present.running .stats { margin-top: clamp(4px, 1.2vh, 12px); }
body.present.running .stat { padding: clamp(5px, 1vh, 9px) 16px; font-size: clamp(.9rem, 2.2vh, 1.1rem); }
.sb-row { height: var(--row-h, 50px); font-size: clamp(1rem, calc(var(--row-h, 50px) * .45), 1.35rem); }
.cx-title { font-size: clamp(2.4rem, 8vh, 4.5rem); font-weight: 800; color: #fb7185; margin: 4px 0 10px; }

/* teacher control bar — above the pause overlay (25), so Devam / Bitir stay
   clickable while paused */
.ctrlbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
  height: var(--ctrl-h, 64px); box-sizing: border-box;
  display: none; gap: 10px; justify-content: center; align-items: center;
  padding: 0 10px; background: rgba(5,8,20,.82);
  border-top: 1px solid rgba(255,255,255,.08);
}
.ctrlbar.show { display: flex; }
.ctrlbar .cbtn {
  font-size: 1rem; font-weight: 700; padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  transition: filter .12s, transform .06s;
}
.ctrlbar .cbtn:hover { filter: brightness(1.2); }
.ctrlbar .cbtn:active { transform: scale(.96); }
.ctrlbar .cbtn.danger { background: rgba(225,29,72,.28); border-color: rgba(251,113,133,.5); }
.ctrlbar .cbtn:disabled { opacity: .35; cursor: default; filter: none; }
.ctrlbar .cbtn.gold { background: rgba(251,191,36,.22); border-color: rgba(251,191,36,.5); }

/* AFK easter-egg screensaver: the original Johnny Castaway (engine in /johnny/) */
.saver {
  position: fixed; inset: 0; z-index: 60;
  display: none; flex-direction: column;
  background: #05070f; cursor: none;
  -webkit-touch-callout: none; touch-action: none;
}
.saver.show { display: flex; animation: saverfade .5s ease; }
/* purely visual fade: the waking press's click is swallowed in JS, so the
   fading overlay must not block a genuine click made right after waking */
.saver.closing { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
@keyframes saverfade { from { opacity: 0; } to { opacity: 1; } }
.saver-stage { position: absolute; inset: 0; }
/* the engine letterboxes its 640x480 screen itself; it never gets input —
   every tap/key lands on the overlay, which wakes the quiz */
.saver-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: #000; pointer-events: none;
}
.saver-label {
  /* dark pill: stays readable over the original's bright sky and clouds */
  position: relative; z-index: 2; align-self: center; margin-top: 10px;
  padding: 6px 18px; border-radius: 50px; background: rgba(5,8,20,.62);
  font-family: ui-monospace, "Courier New", monospace; letter-spacing: 4px;
  font-weight: 800; font-size: 1.1rem; color: var(--gold);
  text-shadow: 0 2px 8px #000;
}
.saver-hint {
  position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2;
  text-align: center; opacity: .5; font-size: .9rem; letter-spacing: 1px;
}

/* pause overlay */
.pause-ov {
  position: fixed; inset: 0; z-index: 25;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8,11,25,.82); backdrop-filter: blur(3px);
  text-align: center; padding: 20px;
}
.pause-ov.show { display: flex; }
.pause-ov .ic { font-size: 4.5rem; margin-bottom: 10px; }
.pause-ov h2 { font-size: 2rem; }

/* "why is this the answer" — from aciklama / açıklama: */
.expl:empty { display: none; }
.expl {
  margin-top: 12px; max-width: min(900px, 94vw);
  background: rgba(255,255,255,.08); border-left: 4px solid var(--gold);
  border-radius: 10px; padding: 10px 16px; text-align: left;
  font-size: clamp(.95rem, 2.2vh, 1.2rem); line-height: 1.4;
}

/* generated student icons */
.av {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.9em; height: 1.9em; border-radius: 50%; margin-right: .45em;
  font-size: 1em; line-height: 1; background: rgba(255,255,255,.2);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.av:empty { display: none; }
.chip { display: inline-flex; align-items: center; }
.av.sm { width: 1.6em; height: 1.6em; font-size: .9em; margin-right: .4em; }
.av.lg { width: 64px; height: 64px; font-size: 2.1rem; margin: 0 0 6px; }
.av.xl { width: 96px; height: 96px; font-size: 3.2rem; margin: 0 auto 6px; }
.lb .row .who { display: inline-flex; align-items: center; }

/* training-wide top 3, corner of the teacher screen while no quiz runs */
.overall {
  position: fixed; top: 16px; right: 16px; z-index: 15; display: none;
  min-width: 230px; max-width: 30vw; padding: 12px 14px; border-radius: 14px;
  background: rgba(10,14,32,.78); border: 1px solid rgba(251,191,36,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(4px);
}
.overall.show { display: block; }
.ov-head { font-weight: 800; color: var(--gold); margin-bottom: 6px; font-size: .95rem; }
.ov-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 4px 0; font-weight: 700; }
.ov-row .who { display: inline-flex; align-items: center; min-width: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.ov-score { font-variant-numeric: tabular-nums; opacity: .9; }
.pick-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pick-actions .btn { margin: 0; padding: 8px 18px; font-size: 1rem; }
@media (max-width: 900px) { .overall { position: static; max-width: none; margin: 12px auto 0; } }

/* generated nickname (adjective + the student's animal) */
.nick { font-size: .9rem; font-weight: 700; color: var(--cyan); opacity: .9; margin-bottom: 6px; }
.podium .nick { font-size: .85rem; margin: 2px 0 0; }
.chip-nick { margin-left: .5em; font-size: .8em; font-weight: 600; opacity: .65; }

/* ------- player (phone) competition panels on reveal / scoreboard ------- */
.pdist { display: flex; gap: 8px; align-items: flex-end; justify-content: center; height: 110px; margin: 10px auto 4px; max-width: 420px; }
.pdist .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1 1 0; min-width: 0; height: 100%; }
.pdist .bar { width: 100%; max-width: 44px; border-radius: 6px 6px 0 0; min-height: 4px; transition: height .5s cubic-bezier(.22,1,.36,1); }
.pdist .bar.wrong { opacity: .35; }
.pdist .num { font-weight: 800; font-size: .95rem; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.pdist .lbl { margin-top: 4px; font-size: 1rem; font-weight: 800; }
.pdist .tick { color: var(--gold); font-size: 1rem; height: 1.2em; }
.pstats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px auto; max-width: 420px; }
.pstats .stat { font-size: .78rem; padding: 4px 10px; }
.psb { width: min(380px, 94vw); margin: 10px auto; display: flex; flex-direction: column; gap: 4px; }
.psb .row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px;
            background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-weight: 700; font-size: .95rem; }
.psb .row.lead { background: linear-gradient(90deg, var(--gold), #f59e0b); color: #3a2a00; border: 0; }
.psb .row.me { outline: 2px solid var(--cyan); outline-offset: -1px; }
.psb .rank { min-width: 1.4em; text-align: right; opacity: .85; }
.psb .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psb .delta { font-size: .8rem; font-weight: 800; min-width: 2em; text-align: right; }
.psb .gain { font-size: .8rem; font-weight: 800; min-width: 3em; text-align: right; color: #34d399; }
.psb .row.lead .gain { color: #166534; }
.psb .name .streak { margin-left: 6px; font-size: .8rem; }
.chip.me { outline: 2px solid var(--cyan); outline-offset: -1px; }
.psb .delta.up { color: #34d399; } .psb .delta.down { color: #fb7185; }
.psb .score { min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.psb .divider { text-align: center; opacity: .55; font-size: .85rem; padding: 2px 0; }

/* overall ("eğitim geneli") top-3 corner on the player's idle screens */
.overall-ribbon {
  position: fixed; top: 10px; right: 10px; z-index: 15;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 8px 10px; font-size: .82rem;
  backdrop-filter: blur(4px); max-width: 190px;
  display: none; flex-direction: column; gap: 4px;
}
.overall-ribbon.show { display: flex; }
.overall-ribbon .h { font-weight: 800; font-size: .7rem; opacity: .75; letter-spacing: .05em; text-transform: uppercase; }
.overall-ribbon .r { display: flex; gap: 6px; align-items: center; font-weight: 700; }
.overall-ribbon .r .av { width: 22px; height: 22px; font-size: .85rem; flex: 0 0 auto; }
.overall-ribbon .r .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overall-ribbon .r .s { opacity: .9; font-variant-numeric: tabular-nums; }
/* a live question owns the whole screen on the student page */
body:has(#s-question.active) .overall-ribbon { display: none; }

/* ------- shared files (student corner button) ------- */
.dl-btn {
  position: fixed; top: 10px; right: 10px; z-index: 20;
  font: inherit; font-weight: 700; font-size: .95rem; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 7px 14px; backdrop-filter: blur(4px);
}
.dl-btn:hover { background: rgba(255,255,255,.22); }
.home-btn { right: auto; left: 10px; text-decoration: none; }
.sl-btn { right: auto; left: 140px; text-decoration: none; }
.pd-flow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
/* on the teacher screen the button only belongs to the quiz picker */
body.present:not(:has(#s-pick.active)) .sl-btn, body.present:not(:has(#s-pick.active)) .home-btn { display: none; }
.dl-ov {
  position: fixed; inset: 0; z-index: 24; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(8,11,25,.7); backdrop-filter: blur(3px);
}
.dl-ov.show { display: flex; }
.dl-card { width: min(520px, 100%); max-height: 80vh; display: flex; flex-direction: column; text-align: left; }
.dl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dl-head h3 { margin: 0; }
.dl-x { font: inherit; font-size: 1.2rem; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.dl-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.dl-item {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  border: 2px solid #e3e7f3; border-radius: 12px; padding: 10px 14px;
}
.dl-item:hover { border-color: var(--a0); }
.dl-name { flex: 1; font-weight: 700; overflow-wrap: anywhere; }
.dl-name::before { content: "⬇ "; color: var(--a0); }
.dl-size { color: var(--muted); font-size: .9rem; white-space: nowrap; }
/* folders in the shared tree: click to open; contents indented under it */
.dl-dir > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.25);
}
.dl-dir > summary::-webkit-details-marker { display: none; }
.dl-dir > summary .dl-name::before { content: "📁 "; }
.dl-dir[open] > summary .dl-name::before { content: "📂 "; }
.dl-sub { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 16px; padding-left: 10px; border-left: 2px solid rgba(255,255,255,.12); }
/* a live question owns the whole screen */
body:has(#s-question.active) .dl-btn, body:has(#s-question.active) .dl-ov { display: none; }