/* ============================ Öğretmen (telefon) ekranı ============================ */
html, body { overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.pl { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pl-top {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem 1rem; background: rgba(3,12,48,.4); font-weight: 700; font-size: .9rem;
}
.pl-top .who { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.pl-top .who img { height: 30px; }
.pl-top .who span { font-family: var(--font-serif); font-weight: 400; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-top .pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .3em .8em; font-size: .82rem; white-space: nowrap; }
.pl-top .pill.gold { background: var(--gold-grad); color: var(--navy-950); border-color: transparent; }
.pl-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.1rem; gap: 1rem; }
.pl-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom));
  background: #fff; color: var(--navy-950); font-weight: 700; font-size: 1.02rem;
  border-top: 3px solid var(--gold-400);
}
.pl-bottom .score { background: var(--navy-800); color: #fff; border-radius: 8px; padding: .2em .75em; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Katılım */
.join { width: min(420px, 100%); margin: 0 auto; display: grid; gap: 1.2rem; }
.join-brand { text-align: center; }
.join-brand img { height: 110px; filter: drop-shadow(0 12px 26px rgba(0,0,0,.4)); }
.join-brand .o1 { font-family: var(--font-serif); font-size: 1.05rem; opacity: .85; margin-top: .9rem; }
.join-brand .o2 { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.05; }
.join-brand .rule { width: 56px; height: 3px; background: var(--gold-grad); border-radius: 2px; margin: .9rem auto; }
.join-brand .t { color: var(--gold-300); font-weight: 700; font-size: 1.05rem; }
.join-card { background: #fff; color: var(--ink); border-radius: 16px; padding: 1.3rem; display: grid; gap: .8rem; box-shadow: var(--shadow-lg); }
.join-card input { text-align: center; font-size: 1.2rem; font-weight: 700; padding: .85em; border-width: 1.5px; }
.join-card input:focus { outline: none; border-color: var(--navy-600); }
.join-card .pin-input { letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.join-card .btn { width: 100%; }
.pin-tag { display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; color: var(--muted); font-size: .9rem; }
.pin-tag b { color: var(--navy-700); letter-spacing: .12em; font-size: 1.1rem; }
.pin-tag a { font-size: .8rem; }

/* Mesaj ekranları */
.msg { text-align: center; display: grid; gap: 1rem; justify-items: center; }
.msg .badge-ic { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.18); }
.msg .badge-ic .ic { width: 44px; height: 44px; }
.msg .badge-ic.gold { background: var(--gold-grad); color: var(--navy-950); border-color: transparent; }
.msg h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 800; }
.msg p { font-size: 1.05rem; color: #c9d5f3; font-weight: 500; }

/* Soru */
.pq-text { background: #fff; color: var(--navy-950); border-radius: 14px; padding: 1rem; font-weight: 800; font-size: clamp(1.1rem, 5vw, 1.5rem); text-align: center; line-height: 1.3; box-shadow: 0 4px 0 var(--gold-500); }
.pq-img { max-height: 24vh; max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; }
.pq-time { display: flex; align-items: center; gap: .7rem; }
.pq-time .bar { flex: 1; height: 10px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.pq-time .bar i { display: block; height: 100%; width: 100%; background: var(--gold-grad); transform-origin: left; }
.pq-time.low .bar i { background: #ff5a6c; }
.pq-time b { font-size: 1.5rem; font-weight: 900; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.pbtns { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; min-height: 46vh; }
.pbtns.two { grid-template-columns: 1fr; }
.pbtn {
  border: 0; border-radius: 14px; color: #fff; cursor: pointer; background: var(--c);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem; font: 700 clamp(1rem, 4.4vw, 1.3rem) var(--font); line-height: 1.25;
  box-shadow: 0 6px 0 rgba(0,0,0,.28); transition: transform .08s, box-shadow .08s, opacity .2s;
  word-break: break-word;
}
.pbtn .lt { width: 2.6rem; height: 2.6rem; border-radius: 10px; background: rgba(255,255,255,.22); display: grid; place-items: center; font-weight: 900; font-size: 1.3rem; }
.pbtn.noTxt .lt { width: 5rem; height: 5rem; font-size: 2.6rem; border-radius: 16px; }
.pbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.pbtn:disabled { cursor: default; }
.chosen { display: inline-flex; align-items: center; gap: .6rem; background: var(--c); color: #fff; padding: .7rem 1.1rem; border-radius: 12px; font-weight: 700; }
.chosen .lt { width: 1.8rem; height: 1.8rem; border-radius: 6px; background: rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 900; }

/* Sonuç */
.pl.good { background: linear-gradient(160deg, #1a9a5d, #0d6a3d); }
.pl.bad { background: linear-gradient(160deg, #c3283a, #7f1422); }
.result .pts { background: rgba(0,0,0,.22); border-radius: 12px; padding: .45em 1.2em; font-weight: 900; font-size: 2rem; font-variant-numeric: tabular-nums; }
.result .streak { font-weight: 700; font-size: 1.05rem; }
.correct-was { background: rgba(0,0,0,.22); border-radius: 10px; padding: .6em 1em; font-weight: 700; display: inline-flex; align-items: center; gap: .55rem; }
.correct-was .lt { width: 1.7rem; height: 1.7rem; border-radius: 6px; background: var(--c); display: grid; place-items: center; font-weight: 900; font-size: .9rem; }
.rank-box { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: .9rem 1.6rem; text-align: center; font-weight: 600; min-width: 220px; }
.rank-box .r { font-size: 3rem; line-height: 1.05; font-weight: 900; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.rank-box .s { font-size: .88rem; opacity: .75; }
.behind { font-size: .95rem; color: #dfe6fa; font-weight: 600; }
.final-medal { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; font-weight: 900; color: var(--navy-950); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.final-medal.m1 { background: var(--gold-grad); }
.final-medal.m2 { background: linear-gradient(135deg, #fff, #b9c2d0); }
.final-medal.m3 { background: linear-gradient(135deg, #f6d8b8, #b5763d); }
.final-medal.mx { background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.2); }
.final-msg { font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold-200); line-height: 1.2; }