/*
  Kimdi O? teması: "Avrupa gecesi". Lacivert gece göğü, gümüş çizgiler, yıldız tozu ve stadyum ışığı.
  (Esinti: büyük Avrupa maç geceleri. Hiçbir turnuvanın logosu, yıldız amblemi ya da adı kullanılmaz.)
  Sayfaların kendi stillerinden SONRA yüklenir; renkleri, yazı tiplerini ve ana bileşenleri günceller.
*/
:root{
  color-scheme:dark;
  --bg:#060A26;            /* gece mavisi */
  --bg-2:#0B1440;
  --panel:#0E1748;         /* kartlar */
  --panel-2:#16215C;
  --line:#2A3784;
  --ink:#F3F6FF;
  --muted:#A3AEDB;
  --silver:#D9E1F5;        /* gümüş çizgiler */
  --lamp:#5EF0FF;          /* stadyum ışığı: vurgu */
  --lamp-2:#9B8CFF;        /* mor ışık: degrade ucu */
  --on-lamp:#071036;
  --p1:#FF4D6D; --p1-deep:#B0123C;   /* 1. oyuncu: gece kırmızısı */
  --p2:#2FD3FF; --p2-deep:#1554D6;   /* 2. oyuncu: elektrik mavisi */
  --good:#3DF5A6; --warn:#FFC94D; --bad:#FF6B7A;
  --display:'Saira Condensed','Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Manrope','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --glow:0 0 0 1px rgba(94,240,255,.25), 0 10px 40px rgba(20,40,160,.45);
}

/* Gece göğü: derin degrade + seyrek yıldızlar + stadyum ışığı halesi */
html{background:var(--bg)}
body{
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 32%, rgba(217,225,245,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 61%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 86%, rgba(217,225,245,.4) 50%, transparent 51%),
    radial-gradient(120% 60% at 50% -10%, rgba(94,240,255,.16), transparent 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(155,140,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 55%, #040620 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
}

/* Başlık: büyük, yatık, gümüşten ışığa degrade, yanında yıldız */
.brand{
  font:900 italic clamp(3rem,13vw,4.4rem)/.88 var(--display);
  letter-spacing:.005em; text-transform:uppercase;
  background:linear-gradient(100deg,#FFFFFF 0%,var(--silver) 45%,var(--lamp) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 18px rgba(94,240,255,.25));
}
.brand span{color:transparent;background:linear-gradient(100deg,var(--lamp),var(--lamp-2));-webkit-background-clip:text;background-clip:text}
.brand::after{content:" ✦";font-style:normal;font-size:.5em;vertical-align:.6em;color:var(--lamp);-webkit-text-fill-color:var(--lamp);filter:drop-shadow(0 0 8px var(--lamp))}
.sub{color:var(--muted)}

/* Kartlar: cam gibi lacivert, ince gümüş kenar */
.panel,.qcard,.team,.log,.sheet,.tn-kart{
  background:linear-gradient(160deg,rgba(28,42,120,.72),rgba(12,20,70,.78));
  border:1px solid rgba(160,180,255,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 12px 36px rgba(2,6,30,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.panel{border-radius:20px}
.qcard{border-radius:22px}
.label{color:var(--silver);opacity:.85;letter-spacing:.14em}

/* Düğmeler */
.btn{border-radius:14px;background:rgba(30,44,120,.7);border-color:rgba(160,180,255,.25);font-family:var(--body);font-weight:700}
.btn:hover{filter:brightness(1.12)}
.btn.primary,.tn-alt button.ana{
  background:linear-gradient(100deg,var(--lamp) 0%,#8FD0FF 45%,var(--lamp-2) 100%);
  border-color:transparent; color:var(--on-lamp);
  font:900 italic 1.45rem/1 var(--display); letter-spacing:.06em;
  box-shadow:0 8px 28px rgba(94,240,255,.28), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.btn.primary:disabled{filter:grayscale(.6) brightness(.7);box-shadow:none}
.small-btn{border-color:rgba(160,180,255,.3);color:var(--silver)}
.seg span{background:rgba(30,44,120,.6);border-color:rgba(160,180,255,.25)}
.seg input:checked+span{background:linear-gradient(100deg,var(--lamp),var(--lamp-2));border-color:transparent;color:var(--on-lamp);box-shadow:0 4px 16px rgba(94,240,255,.25)}
input[type=text],textarea,select{background:rgba(8,14,56,.75);border-color:rgba(160,180,255,.28);color:var(--ink);font-family:var(--body)}
.check input{accent-color:var(--lamp)}

/* Skor tabelası: stadyum ekranı */
.team .nm{font-family:var(--display);font-weight:800;font-style:italic;letter-spacing:.03em}
.team .sc{font:900 italic 3rem/1 var(--display);color:#fff;text-shadow:0 0 22px rgba(94,240,255,.45)}
.team .marks i{background:rgba(160,180,255,.25)}
.mid b{font-family:var(--display);font-style:italic}

/* Soru kartı: takımlar "maç afişi" gibi */
.chip{
  font-family:var(--display);font-weight:900;font-style:italic;letter-spacing:.01em;
  background:linear-gradient(180deg,rgba(40,58,150,.9),rgba(18,28,90,.9));
  border:1px solid rgba(190,205,255,.35); border-radius:14px;
  box-shadow:0 6px 20px rgba(2,6,30,.5), 0 1px 0 rgba(255,255,255,.12) inset;
}
.chip.empty{background:rgba(18,28,90,.5);border-style:dashed}
.chip.mine,.chip.picked{border-color:var(--lamp);box-shadow:0 0 0 1px var(--lamp), 0 6px 22px rgba(94,240,255,.25)}
.plus{color:var(--lamp);text-shadow:0 0 12px rgba(94,240,255,.5)}
.qtype{color:var(--silver);letter-spacing:.14em}

/* Süre çubuğu: ışık şeridi */
.track{background:rgba(8,14,56,.85);box-shadow:0 0 0 1px rgba(160,180,255,.18) inset}
.fill{background:linear-gradient(90deg,var(--lamp-2),var(--lamp));box-shadow:0 0 14px rgba(94,240,255,.6)}
.fill.low{background:linear-gradient(90deg,#FF2E63,var(--bad));box-shadow:0 0 14px rgba(255,80,110,.6)}
.secs{font-family:var(--display);font-style:italic}

/* Mesajlar */
.msg.good{color:var(--good)} .msg.bad{color:var(--bad)} .msg.warn{color:var(--warn)}

/* Konuş / buzzer düğmeleri: oyuncu renginde ışıklı */
.mic[data-p="0"],.buzz[data-p="1"]{background:radial-gradient(120% 95% at 50% 15%,#FF7A93 0%,var(--p1) 35%,var(--p1-deep) 100%);box-shadow:0 14px 40px rgba(255,77,109,.35)}
.mic[data-p="1"],.buzz[data-p="2"]{background:radial-gradient(120% 95% at 50% 15%,#7BE6FF 0%,var(--p2) 35%,var(--p2-deep) 100%);box-shadow:0 14px 40px rgba(47,211,255,.35)}
.mic b,.buzz b{font-family:var(--display);font-weight:900;font-style:italic;letter-spacing:.03em;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.mic.listening{box-shadow:inset 0 0 0 4px rgba(255,255,255,.9), 0 0 50px rgba(255,255,255,.35)}

/* Görev kutusu ve davet */
.gorev{border-color:var(--lamp);background:linear-gradient(160deg,rgba(94,240,255,.14),rgba(155,140,255,.10));box-shadow:0 0 0 1px rgba(94,240,255,.25), 0 10px 30px rgba(20,40,160,.35)}
.gorev b{color:#fff;font-family:var(--display);font-style:italic;text-shadow:0 0 18px rgba(94,240,255,.45)}
.gorev.bekle{background:rgba(18,28,90,.6);border-color:rgba(160,180,255,.25)}
.invite{background:linear-gradient(160deg,rgba(94,240,255,.14),rgba(155,140,255,.10));border-color:var(--lamp)}
.invite b{color:var(--lamp)}
.bigcode{font-family:var(--display);font-style:italic;color:#fff;text-shadow:0 0 30px rgba(94,240,255,.55)}

/* Geri sayım: yıldızlı perde */
.countdown{
  background:radial-gradient(70% 60% at 50% 45%,rgba(30,50,160,.92),rgba(5,8,34,.97));
  color:#fff; font-family:var(--display); font-style:italic;
  text-shadow:0 0 40px rgba(94,240,255,.7);
}
.countdown small{color:var(--silver);font-family:var(--body);font-style:normal;text-shadow:none}

/* Maç sonu */
.over h2{font-family:var(--display);font-style:italic;background:linear-gradient(100deg,#fff,var(--lamp));-webkit-background-clip:text;background-clip:text;color:transparent}
.final{font-family:var(--display);font-style:italic;text-shadow:0 0 30px rgba(94,240,255,.4)}

/* Afiş, hata, modal */
.banner{background:rgba(60,40,0,.85);border-color:var(--warn)}
.error{background:rgba(90,10,30,.6);border-color:var(--bad)}
.modal,.tn-ort{background:rgba(3,6,28,.82)}
.clip{background:rgba(30,44,120,.7);border-color:rgba(160,180,255,.25)}
.clip i{border-left-color:var(--lamp)}
.ck{background:rgba(18,28,90,.65)}

@media (prefers-reduced-motion: reduce){ .brand{filter:none} }

/* Tanıtım kartları ve "ana ekrana ekle" şeridi */
.tn-b{color:#fff;font-family:var(--display);font-style:italic;text-shadow:0 0 18px rgba(94,240,255,.4)}
.tn-no{color:var(--silver)}
.tn-ornek span{background:linear-gradient(180deg,rgba(40,58,150,.9),rgba(18,28,90,.9));border-color:rgba(190,205,255,.35);font-family:var(--display);font-style:italic}
.tn-ornek i{color:var(--lamp)}
.tn-nokta i{background:rgba(160,180,255,.3)} .tn-nokta i.on{background:var(--lamp);box-shadow:0 0 8px var(--lamp)}
.tn-alt button{background:rgba(30,44,120,.7);border-color:rgba(160,180,255,.25);font-family:var(--body)}
.tn-serit{background:linear-gradient(160deg,rgba(28,42,120,.95),rgba(12,20,70,.95));border-color:var(--lamp)}
.tn-serit b{color:var(--lamp)}
.tn-serit button.ana{background:var(--lamp);color:var(--on-lamp)}