/* Bil ve Dokun — ortak stil */
:root {
  --brand: #ff2e63;
  --brand-dark: #c21747;
  --bg: #571a9e;
  --bg-2: rgba(30, 8, 62, .42);
  --bg-3: rgba(30, 8, 62, .62);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .75);
  --ok: #2ecc71;
  --bad: #ff5252;
  --opt-a: #0da99a;
  --opt-b: #7c4fd8;
  --opt-c: #e8702e;
  --opt-d: #d63384;
  --line: rgba(255, 255, 255, .22);
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(255, 255, 255, .16), transparent 55%),
    radial-gradient(900px 600px at 108% 108%, rgba(255, 170, 60, .25), transparent 60%),
    linear-gradient(160deg, #5b1fae 0%, #8b2fc9 34%, #c2378f 68%, #e8542f 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.45;
}
/* Işın demeti (sunburst) katmanı */
body::before {
  content: '';
  position: fixed; left: 50%; top: 38%;
  width: 240vmax; height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, .065) 0deg 9deg, transparent 9deg 20deg);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* --- "BİL ve DOKUN!" logosu --- */
.bvd-logo {
  display: flex; flex-direction: column; align-items: center;
  line-height: .95; transform: rotate(-4deg);
  font-style: italic; font-weight: 900; user-select: none;
}
.bvd-logo .l1 {
  font-size: 20px; letter-spacing: .42em; padding-left: .42em;
  color: #ffe9a8; text-shadow: 0 2px 0 rgba(140, 30, 90, .6);
}
.bvd-logo .l2 {
  font-size: 58px; letter-spacing: .01em; color: #fff;
  text-shadow:
    0 2px 0 #ffb3d2, 0 5px 0 #d63384, 0 8px 0 #8b2158,
    0 16px 30px rgba(0, 0, 0, .45);
}
.bvd-logo.big .l1 { font-size: 24px; }
.bvd-logo.big .l2 { font-size: 72px; }
.bvd-mini {
  font-style: italic; font-weight: 900; font-size: 19px; color: #fff;
  text-shadow: 0 2px 0 #d63384, 0 4px 8px rgba(0, 0, 0, .35);
  white-space: nowrap; user-select: none;
}

/* --- TEMA: Düz Siyah --- */
body.theme-siyah {
  background: linear-gradient(180deg, #101016 0%, #0a0a0f 100%);
}
body.theme-siyah::before { display: none; }
body.theme-siyah .q-ready { background: #08080e; }

/* --- TEMA: Gri Tonlar --- */
body.theme-gri {
  --brand: #8a919c;
  --brand-dark: #656b75;
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(255, 255, 255, .10), transparent 55%),
    linear-gradient(160deg, #50535b 0%, #3b3e45 38%, #292b31 72%, #191a1e 100%);
}
body.theme-gri::before {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, .04) 0deg 9deg, transparent 9deg 20deg);
}
body.theme-gri .bvd-logo .l1 { color: #e6e8ec; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
body.theme-gri .bvd-logo .l2 {
  text-shadow: 0 2px 0 #b9bec7, 0 5px 0 #6e747e, 0 8px 0 #43474e, 0 16px 30px rgba(0, 0, 0, .5);
}
body.theme-gri .bvd-mini { text-shadow: 0 2px 0 #6e747e, 0 4px 8px rgba(0, 0, 0, .4); }
body.theme-gri .q-ready { background: #181a1d; }

/* --- TEMA: Stadyum (gece maçı atmosferi, özgün CSS tasarım) --- */
body.theme-stadyum {
  --brand: #1fbf57;
  --brand-dark: #148a3d;
  background:
    /* projektör parlamaları (üst köşeler + tepe) */
    radial-gradient(closest-side at 15% 6%, rgba(200, 230, 255, .55), transparent 62%),
    radial-gradient(closest-side at 85% 6%, rgba(200, 230, 255, .55), transparent 62%),
    radial-gradient(closest-side at 50% 0%, rgba(210, 235, 255, .40), transparent 55%),
    /* saha sisi/ışık yansıması */
    radial-gradient(120% 45% at 50% 100%, rgba(80, 200, 120, .35), transparent 70%),
    /* çim */
    linear-gradient(to top, #0a3f13 0%, #10531d 10%, rgba(16, 83, 29, 0) 32%),
    /* gökyüzü */
    linear-gradient(to bottom, #08152c 0%, #0c2247 38%, #0f2c56 66%, #0a1c38 100%);
  background-attachment: fixed;
}
/* projektörlerden yayılan ışık huzmeleri */
body.theme-stadyum::before {
  top: 6%;
  background: repeating-conic-gradient(from 0deg at 50% 0%,
    rgba(200, 230, 255, .06) 0deg 7deg, transparent 7deg 20deg);
}
/* saha orta yuvarlağı ve çizgi ipucu (ince, atmosferik) */
body.theme-stadyum::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 30vh;
  background-image:
    radial-gradient(closest-side at 50% 130%, transparent 44%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.10) 46%, transparent 47%);
  pointer-events: none; z-index: 0;
}
body.theme-stadyum .q-ready { background: #08122a; }

/* --- TEMA: VakıfBank (kulüp renkleri logodan örneklendi: sarı #fbba00, siyah #1d1d1b;
   amblemdeki yıldızlar .vb-stars katmanında süzülür — katmanı theme.js ekler) --- */
body.theme-vakifbank {
  --brand: #fbba00;
  --brand-dark: #c99300;
  --bg-2: rgba(0, 0, 0, .42);
  --bg-3: rgba(0, 0, 0, .62);
  --line: rgba(251, 186, 0, .26);
  background:
    radial-gradient(1100px 650px at 50% -10%, rgba(251, 186, 0, .30), transparent 60%),
    radial-gradient(900px 600px at 105% 110%, rgba(251, 186, 0, .16), transparent 60%),
    linear-gradient(165deg, #2b2b28 0%, #1d1d1b 45%, #0e0e0d 100%);
  background-attachment: fixed;
}
body.theme-vakifbank::before {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(251, 186, 0, .07) 0deg 9deg, transparent 9deg 20deg);
  animation: vbSpin 140s linear infinite;
}
@keyframes vbSpin { to { transform: rotate(360deg); } }
body.theme-vakifbank .btn:not(.secondary):not(.ghost):not(.danger),
body.theme-vakifbank .timer-pill,
body.theme-vakifbank .cat-chip.on,
body.theme-vakifbank .tabs button.active { color: #1d1d1b; }
body.theme-vakifbank .logo-bar::after { background: linear-gradient(90deg, #fbba00, #ffd95a); }
body.theme-vakifbank .bvd-logo .l1 { color: #fbba00; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
body.theme-vakifbank .bvd-logo .l2 {
  text-shadow: 0 2px 0 #ffe27a, 0 5px 0 #fbba00, 0 8px 0 #8a6500, 0 16px 30px rgba(0, 0, 0, .55);
}
body.theme-vakifbank .bvd-mini { text-shadow: 0 2px 0 #c99300, 0 4px 8px rgba(0, 0, 0, .45); }
body.theme-vakifbank .q-ready { background: #121211; }

body > .vb-stars {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.vb-stars i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  opacity: .35;
  animation: vbFloat var(--d) ease-in-out var(--dl) infinite;
  will-change: transform, opacity;
}
.vb-stars svg {
  display: block; width: 100%; height: 100%;
  fill: #fbba00;
  filter: drop-shadow(0 0 calc(var(--s) * .25) rgba(251, 186, 0, .75));
}
@keyframes vbFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(.8); opacity: .25; }
  50% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.08); opacity: var(--o); }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-vakifbank::before, .vb-stars i { animation: none; }
  .vb-stars i { opacity: .5; }
}


/* --- TEMA: İstanbul Maratonu (Spor İstanbul · 48. İstanbul Maratonu, 1 Kasım 2026)
   Renkler Spor İstanbul logosundan ve maraton görselinden piksel örneklemesiyle:
   lacivert #1d2172, kırmızı #ec1f26. Köprü/koşucu katmanını (.mr-scene) theme.js ekler. --- */
body.theme-maraton {
  --brand: #ec1f26;
  --brand-dark: #b3141a;
  --bg-2: rgba(8, 11, 52, .55);
  --bg-3: rgba(8, 11, 52, .78);
  --line: rgba(255, 255, 255, .2);
  background:
    radial-gradient(900px 560px at 84% -6%, rgba(255, 138, 90, .30), transparent 60%),
    radial-gradient(1000px 640px at 10% -14%, rgba(110, 140, 255, .22), transparent 62%),
    linear-gradient(180deg, #232a8a 0%, #1d2172 38%, #141861 70%, #0b0e42 100%);
  background-attachment: fixed;
}
body.theme-maraton::before { display: none; }
body.theme-maraton .q-ready { background: #12165c; }
body.theme-maraton .logo-bar::after { background: linear-gradient(90deg, #ec1f26, #ff6a5c); }
body.theme-maraton .bvd-logo .l1 { color: #ffd2cf; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
body.theme-maraton .bvd-logo .l2 { text-shadow: 0 2px 0 #ffb3ad, 0 5px 0 #ec1f26, 0 8px 0 #7d0d12, 0 16px 30px rgba(0, 0, 0, .5); }
body.theme-maraton .bvd-mini { text-shadow: 0 2px 0 #ec1f26, 0 4px 8px rgba(0, 0, 0, .4); }

body > .mr-scene {
  position: fixed; left: 0; right: 0; bottom: 0; height: 44vh;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.mr-scene .mr-city { position: absolute; inset: 0; width: 100%; height: 100%; }
.mr-city .mr-sun { opacity: .9; }
.mr-city .mr-hill, .mr-city .mr-old { fill: rgba(255, 255, 255, .06); }
.mr-city .mr-water { fill: rgba(4, 6, 34, .45); }
.mr-city .mr-glint path { stroke: rgba(255, 255, 255, .22); stroke-width: 2.5; stroke-linecap: round; }
.mr-city .mr-glint { animation: mrGlint 4s ease-in-out infinite; }
.mr-city .mr-cable { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 4; }
.mr-city .mr-hangers { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.4; }
.mr-city .mr-tower rect { fill: rgba(255, 255, 255, .62); }
.mr-city .mr-deck { fill: rgba(255, 255, 255, .78); }
.mr-city .mr-rail { stroke: rgba(236, 31, 38, .9); stroke-width: 3; }
.mr-city .mr-cont { fill: rgba(255, 255, 255, .45); font: 900 22px/1 system-ui, sans-serif; letter-spacing: .32em; }
.mr-city .mr-km { fill: rgba(255, 255, 255, .5); font: 800 15px/1 system-ui, sans-serif; letter-spacing: .22em; }
.mr-city .mr-arrow { fill: none; stroke: rgba(236, 31, 38, .75); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 10; animation: mrDash 1.2s linear infinite; }
/* Koşucular köprünün tabliyesinde (viewBox'ta y=294 → kabın %26.5 üstü) */
.mr-runners { position: absolute; left: 0; right: 0; bottom: 26.5%; height: 15%; }
.mr-r {
  position: absolute; bottom: 0; left: 0; height: 100%; aspect-ratio: 40 / 56;
  transform-origin: bottom center;
  animation: mrRun var(--d) linear var(--dl) infinite;
  will-change: transform;
}
.mr-r svg { display: block; width: 100%; height: 100%; transform: scale(var(--sc)); transform-origin: bottom center; }
.mr-r.w { color: #ffffff; } .mr-r.r { color: #ff4a42; }
.mr-r svg g g { stroke: currentColor; } .mr-r svg circle { fill: currentColor; }
.mr-r .p2 { opacity: 0; }
.mr-r .p1 { animation: mrStepA .42s steps(1) infinite; }
.mr-r .p2 { animation: mrStepB .42s steps(1) infinite; }
.mr-gull { position: absolute; top: var(--y); left: var(--x); width: 2.6vh; animation: mrGull var(--d) linear var(--dl) infinite; opacity: .7; }
.mr-gull svg { display: block; width: 100%; }
.mr-gull path { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; animation: mrFlap .8s ease-in-out infinite; transform-origin: center; }
@keyframes mrRun { from { transform: translateX(105vw); } to { transform: translateX(-12vw); } }
@keyframes mrStepA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mrStepB { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes mrGull { from { transform: translate(110vw, 0); } 50% { transform: translate(40vw, -3vh); } to { transform: translate(-30vw, 1vh); } }
@keyframes mrFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes mrGlint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@keyframes mrDash { to { stroke-dashoffset: -24; } }

/* Bekleme ekranındaki bilgi şeridi (sahne + telefon): cümleler sırayla geçer */
[data-mr-ticker] { position: relative; display: grid; place-items: center; min-height: 2.6em; }
[data-mr-ticker][hidden] { display: none; }
[data-mr-ticker] > span {
  grid-area: 1 / 1; text-align: center; font-weight: 800; opacity: 0;
  transform: translateY(.6em); transition: opacity .6s ease, transform .6s ease;
}
[data-mr-ticker] > span.on { opacity: 1; transform: none; }
[data-mr-ticker] b { color: #ff4a42; }

/* Telefonda sahne katmanı daha alçak ve soluk: butonlar ve yazılar okunsun */
@media (max-width: 700px) {
  body > .mr-scene { height: 30vh; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-r, .mr-gull, .mr-city .mr-glint, .mr-city .mr-sun, .mr-city .mr-arrow, .mr-r .p1, .mr-r .p2, .mr-gull path { animation: none; }
  .mr-r { transform: translateX(40vw); }
}

/* --- Özel arka plan görseli --- */
body.custom-bg::before { display: none; }

/* --- Özel logo --- */
.custom-logo { display: none; }
body.has-custom-logo .bvd-logo { transform: none; }
body.has-custom-logo .bvd-logo .l1,
body.has-custom-logo .bvd-logo .l2,
body.has-custom-logo .bvd-mini .t { display: none; }
/* Özel logo çerçevesi — logo hangi ölçüde olursa olsun (kare, geniş, uzun)
   çerçevenin içine orantılı sığar. Çerçeve = .bvd-logo / .bvd-mini kabı;
   içindeki görsel yalnızca max-en/max-boy ile sınırlanır (bozulmaz). */
body.has-custom-logo .bvd-logo {
  position: relative; transform: none; align-self: center;
  background: linear-gradient(155deg, #ffffff 0%, #f4f5f8 74%, #e8eaf0 100%);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 18px; padding: 15px 28px 17px;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .34),
    inset 0 2px 0 rgba(255, 255, 255, .95);
}
body.has-custom-logo .bvd-logo .custom-logo {
  display: block; width: auto; height: auto;
  max-height: 58px; max-width: 72vw; object-fit: contain;
}
body.has-custom-logo .bvd-logo.big .custom-logo { max-height: 82px; }
/* başlıklardaki küçük çerçeve */
body.has-custom-logo .bvd-mini {
  display: inline-flex; align-items: center;
  background: linear-gradient(155deg, #ffffff, #eceef3);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px; padding: 6px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
body.has-custom-logo .bvd-mini .custom-logo {
  display: inline-block; width: auto; height: auto;
  max-height: 1.9em; max-width: 42vw; vertical-align: middle; object-fit: contain;
}
/* "Çerçevesiz logo" — bazı markaların logosu (örn. Güneşoğlu) zaten kendi
   oval/rozet arka planını taşıyor; üstüne bir de bizim beyaz kartımızı
   koymak "kutu içinde kutu" gibi görünüyordu. Bu seçenek açıkken kart
   tamamen kaldırılıyor, yalnız logo görseli kalıyor (31 Ağustos 2026). */
body.has-custom-logo.logo-no-frame .bvd-logo,
body.has-custom-logo.logo-no-frame .bvd-mini {
  background: none; border: none; padding: 0; box-shadow: none;
}
body.has-custom-logo.logo-no-frame .bvd-logo .custom-logo { max-height: 74px; }
body.has-custom-logo.logo-no-frame .bvd-logo.big .custom-logo { max-height: 98px; }
button { font: inherit; cursor: pointer; border: none; }
input, select, textarea { font: inherit; }
img { max-width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand); color: #fff; font-weight: 700;
  padding: 14px 22px; border-radius: var(--radius);
  transition: transform .08s, filter .15s;
}
.btn:active { transform: scale(.97); }
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.secondary { background: var(--bg-3); color: var(--text); }
.btn.ghost { background: transparent; border: 2px solid var(--bg-3); color: var(--muted); }
.btn.danger { background: #7a1220; }

.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
  backdrop-filter: blur(6px);
}

.logo-bar {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 22px 0 10px;
}
.logo-bar img {
  height: 40px;
  filter: drop-shadow(0 0 14px rgba(189, 22, 34, .35));
}
.logo-bar::after {
  content: '';
  width: 54px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), #ff5b67);
}

.muted { color: var(--muted); }
.center { text-align: center; }

/* ---- Kahoot tarzı seçenek renkleri ---- */
.opt-0 { background: var(--opt-a); }
.opt-1 { background: var(--opt-b); }
.opt-2 { background: var(--opt-c); }
.opt-3 { background: var(--opt-d); }

/* ---- Katılımcı (mobil) ---- */
.phone-wrap {
  max-width: 520px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column; padding: 0 16px 24px;
}
.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }

.join-title { font-size: 22px; font-weight: 800; text-align: center; margin: 6px 0 18px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.field input {
  width: 100%; padding: 14px 16px; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--bg-2); color: var(--text);
  font-size: 17px; outline: none;
}
.field input:focus { border-color: var(--brand); }

.avatar-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.avatar-grid button {
  aspect-ratio: 1; border-radius: 12px; background: var(--bg-2);
  border: 2px solid var(--line); padding: 0; overflow: hidden;
  display: block;
}
.avatar-grid button.sel { border-color: var(--brand); box-shadow: 0 0 10px rgba(189, 22, 34, .55); }

.err { color: #ff6b6b; font-size: 14px; min-height: 20px; margin: 8px 0; text-align: center; }

.big-avatar { font-size: 72px; text-align: center; margin: 24px 0 4px; }
.lobby-nick { font-size: 26px; font-weight: 800; text-align: center; }
.pulse-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: pulse 1.2s infinite; margin-right: 8px; }
@keyframes pulse { 0%,100% { opacity: .3 } 50% { opacity: 1 } }

.q-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 10px; font-weight: 700;
}
.timer-pill {
  background: var(--brand); border-radius: 999px; padding: 6px 16px;
  font-variant-numeric: tabular-nums; font-size: 18px; min-width: 64px; text-align: center;
}
.timer-pill.warn { animation: pulse .6s infinite; }
.q-text { font-size: 19px; font-weight: 700; margin: 6px 0 12px; }
.q-img { width: 100%; max-height: 32dvh; object-fit: contain; border-radius: var(--radius); background: #000; margin-bottom: 12px; }

.opts { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: auto; min-width: 0; }
.opts.three { grid-template-columns: 1fr; }
.opt-btn {
  min-height: 76px; min-width: 0; border-radius: var(--radius); color: #fff;
  font-size: 16px; font-weight: 700; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; text-align: left;
  transition: transform .08s, opacity .2s;
}
/* Uzun şık metni (özellikle uzun Türkçe cümleler) grid hücresini genişletip
   şıkkın yarısını ekran dışına itiyordu — flex/grid öğelerinin varsayılan
   min-width:auto davranışı yüzünden. min-width:0 + kelime kaydırma ile
   düzeltildi (31 Ağustos 2026, gerçek etkinlikte fark edildi). */
.opt-btn > span:last-child {
  min-width: 0; flex: 1; overflow-wrap: break-word; word-break: break-word;
}
.opt-btn:active { transform: scale(.97); }
.opt-btn .shape {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .28); display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900;
}
.opt-btn.dim { opacity: .25; }
.opt-btn.picked { outline: 4px solid #fff; }

/* Soru öncesi 3-2-1 geri sayım kaplaması */
.q-ready {
  position: fixed; inset: 0; z-index: 50;
  background: #2e0a52;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.q-ready.show { display: flex; }
.q-ready .lbl { color: var(--muted); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.q-ready .num {
  font-size: 120px; font-weight: 900; line-height: 1; color: var(--brand);
  animation: readyPulse 1s infinite;
}
@keyframes readyPulse { 0% { transform: scale(.7); opacity: .4 } 25% { transform: scale(1.15); opacity: 1 } 100% { transform: scale(1); opacity: .9 } }

.result-face { font-size: 84px; text-align: center; margin-top: 40px; }
.result-title { font-size: 30px; font-weight: 900; text-align: center; margin: 8px 0; }
.result-gain { font-size: 20px; text-align: center; }
.stat-row { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.stat-box { background: var(--bg-2); border-radius: var(--radius); padding: 14px 20px; text-align: center; min-width: 110px; }
.stat-box .v { font-size: 26px; font-weight: 900; }
.stat-box .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.top3-list { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.top3-item {
  display: flex; align-items: center; gap: 12px; background: var(--bg-2);
  border-radius: var(--radius); padding: 12px 16px; font-weight: 700;
}
.top3-item .medal { font-size: 24px; }
.top3-item .pts { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Genel tablolar (mod) ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* --- Soru havuzu kategori sekmeleri (11 Eylül 2026) --- */
.cat-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cat-chip {
  border: 2px solid var(--line); background: var(--bg-3); color: var(--muted);
  border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; line-height: 1.2; white-space: nowrap;
}
.cat-chip:hover { color: var(--text); border-color: var(--brand); }
.cat-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cat-chip .n { opacity: .65; font-weight: 600; margin-left: 3px; }
.cat-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px; background: var(--bg-3);
  border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-tag:hover { border-color: var(--brand); color: var(--text); }