/* UÇURTMA — gökyüzü & kâğıt */
:root{
  --gok:#4a8fce; --gok2:#2b4470; --kagit:#f4f1e8; --murekkep:#1b2028;
  --sari:#e8c34a; --kirmizi:#e2483c; --turuncu:#e8a33c; --yesil:#7fe0a8; --mavi:#8fd4e8;
  --kenar:rgba(244,241,232,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:#141922;color:var(--kagit);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;user-select:none}
#oyun{position:fixed;inset:0;display:flex;flex-direction:column}

/* ——— üst çubuk ——— */
#ust{display:flex;align-items:center;gap:10px;padding:6px 10px;background:linear-gradient(#242c37,#1a2028);
  border-bottom:1px solid var(--kenar);flex:0 0 auto}
.skorKutu{display:flex;align-items:center;gap:14px;flex:1;min-width:0;justify-content:center}
.tk{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:38%}
.tk0{align-items:flex-end;text-align:right}
.tk1{align-items:flex-start}
.tk .ad{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tk0 .ad{color:var(--sari)} .tk1 .ad{color:var(--mavi)}
.orta{text-align:center}
.skor{font-size:22px;font-weight:800;letter-spacing:1px;display:flex;gap:4px;align-items:baseline;justify-content:center}
.skor span{opacity:.4;font-size:16px}
.raunt{font-size:10px;letter-spacing:2px;opacity:.55}
.sure{font-variant-numeric:tabular-nums;font-weight:700;font-size:18px;min-width:56px;text-align:center}
.sure.az{color:var(--kirmizi)}
.ruzgar{font-size:14px;opacity:.7;min-width:44px;text-align:center}
.ruzgar.sert{opacity:1;color:var(--mavi)}
.araclar{display:flex;gap:6px}
#ust button{background:#2c333e;border:1px solid var(--kenar);color:var(--kagit);border-radius:8px;
  padding:6px 9px;font-size:15px;cursor:pointer}
#ust button:hover{background:#39414e}

/* ——— saha ——— */
#saha{position:relative;flex:1;min-height:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.duyuru{position:absolute;left:50%;top:12%;transform:translateX(-50%);font-size:clamp(18px,4.2vw,40px);
  font-weight:800;letter-spacing:1px;text-shadow:0 3px 0 rgba(0,0,0,.5);pointer-events:none;
  opacity:0;transition:opacity .18s;text-align:center;white-space:pre-line;line-height:1.18}
.duyuru.gor{opacity:1}
.ipucu{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:12px;opacity:0;
  background:rgba(20,25,34,.82);padding:5px 12px;border-radius:20px;transition:opacity .25s;pointer-events:none;
  border:1px solid var(--kenar);max-width:92%;text-align:center}
.ipucu.gor{opacity:.96}

/* ——— göstergeler ——— */
.gostergeler{position:absolute;top:8px;width:min(30%,240px);pointer-events:none;
  background:rgba(20,25,34,.42);border:1px solid var(--kenar);border-radius:10px;padding:6px 8px;
  backdrop-filter:blur(2px)}
.gostergeler.sol{left:8px}
.gostergeler.sag{right:8px}
.gostergeler .etiket{font-size:9px;letter-spacing:1.6px;opacity:.62;margin-bottom:4px}
.ipCubuk{display:flex;gap:1px;height:9px;margin-bottom:5px}
.ipCubuk i{flex:1;background:rgba(232,226,210,.5);border-radius:1px;transition:background .12s}
.satir{display:flex;align-items:center;gap:5px;margin-top:3px}
.satir .mini{font-size:8.5px;opacity:.55;width:52px;flex:0 0 auto;letter-spacing:.4px}
.bar{position:relative;flex:1;height:6px;background:rgba(255,255,255,.10);border-radius:4px;overflow:hidden}
.bar .dolu{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--mavi);border-radius:4px;transition:width .08s}
.bar .dolu.mak{background:var(--yesil)}
.bar .dolu.mak.az{background:var(--turuncu)}
.bar .dolu.kac{background:var(--kagit)}
.bar .dolu.kac.az{background:var(--kirmizi);animation:nabiz .7s ease-in-out infinite}
.satir.pasif{opacity:.42}
.satir.pasif .mini::after{content:' (kapışmadan sonra)';opacity:.7}
@keyframes nabiz{0%,100%{filter:brightness(1)}50%{filter:brightness(1.85)}}
.gerBar{overflow:visible}
.gerBar .dolu.tehlike{background:var(--kirmizi)}
.gerBar .sinir{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--kirmizi);opacity:.85;left:100%}

/* ——— dokunmatik ——— */
#dokunmatik{position:absolute;inset:0;pointer-events:none}
#dokunmatik.gizli{display:none}
.solTuslar{position:absolute;left:3%;bottom:5%;display:flex;gap:10px;pointer-events:auto}
.sagTuslar{position:absolute;right:3%;bottom:5%;display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
.dokunTus{border-radius:50%;border:2px solid rgba(244,241,232,.32);color:var(--kagit);font-weight:800;
  letter-spacing:.5px;background:rgba(40,48,60,.62);cursor:pointer;font-size:15px}
.dokunTus.yon{width:66px;height:66px;font-size:20px}
.dokunTus.cek{width:82px;height:82px;background:rgba(143,212,232,.42)}
.dokunTus.sal{width:82px;height:82px;background:rgba(232,195,74,.42)}
.dokunTus.silk{width:60px;height:60px;font-size:12px;background:rgba(226,72,60,.42)}
.dokunTus:active{transform:scale(.94)}

/* ——— ekranlar ——— */
.tamEkran{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(circle at 50% 30%,rgba(58,84,120,.96),rgba(14,18,24,.98));z-index:20;overflow:auto}
.tamEkran.gizli{display:none}
.giris,.pano,.kutu{background:linear-gradient(#28313d,#1c2229);border:1px solid var(--kenar);border-radius:16px;
  padding:22px;max-width:660px;width:100%;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.logo{font-size:52px;line-height:1}
h1{margin:6px 0 0;font-size:clamp(28px,7vw,46px);letter-spacing:3px}
.altBaslik{margin:2px 0 12px;opacity:.66;letter-spacing:2px;font-size:13px}
.vaat{font-size:13.5px;line-height:1.55;opacity:.9;margin:0 auto 16px;max-width:560px}
.butonlar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
button.birincil,button.ikincil,button.hayalet{border-radius:10px;padding:11px 16px;font-size:14px;font-weight:700;
  cursor:pointer;border:1px solid var(--kenar);color:var(--kagit)}
button.birincil{background:linear-gradient(#3f7fd6,#2b5da0);border-color:#5b9be8}
button.ikincil{background:#2e3742}
button.hayalet{background:transparent;opacity:.75}
button:hover{filter:brightness(1.12)}
h2{margin:0 0 6px;font-size:20px;letter-spacing:1px}
h3{margin:0 0 10px;font-size:18px}
.giris-metin{font-size:12.5px;opacity:.72;margin:0 0 12px;line-height:1.5}
.karsilasma{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0}
.taraf{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px}
.taraf small{opacity:.55;font-size:11px}
.rozet{font-size:22px}
.vs{opacity:.4}
.soz{font-style:italic;opacity:.85;font-size:13.5px;margin:6px 0 4px}
.not{font-size:12px;opacity:.68;line-height:1.5;margin:4px 0}
.not.hava{color:var(--mavi);opacity:.8}
.etiket{font-size:10px;letter-spacing:2px;opacity:.55;margin:14px 0 6px}
.secimIzgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.kart{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#2b333f;border:1px solid var(--kenar);
  border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--kagit);text-align:left}
.kart b{font-size:12.5px}
.kart small{font-size:10px;opacity:.6;line-height:1.3}
.kart.secili{border-color:var(--sari);background:#38424f}
.kart.kilit{opacity:.45;cursor:not-allowed}
.renkNokta{width:13px;height:13px;border-radius:3px;border:2px solid rgba(0,0,0,.3);display:inline-block}
.secimSatir{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
button.sec{background:#2b333f;border:1px solid var(--kenar);color:var(--kagit);border-radius:8px;padding:8px 12px;
  font-size:12px;cursor:pointer}
button.sec.secili{border-color:var(--sari);background:#38424f;font-weight:700}
.merdiven{display:flex;gap:4px;justify-content:center;margin:14px 0 4px;flex-wrap:wrap}
.basamak{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;opacity:.4;min-width:52px}
.basamak b{width:22px;height:22px;border-radius:50%;background:#2b333f;display:grid;place-items:center;font-size:11px;
  border:1px solid var(--kenar)}
.basamak.gecti{opacity:.75} .basamak.gecti b{background:var(--yesil);color:#12301f;border-color:var(--yesil)}
.basamak.simdi{opacity:1} .basamak.simdi b{background:var(--sari);color:#3a2c00;border-color:var(--sari)}
.ilerleme{font-size:11.5px;opacity:.6;margin-top:14px}
.semaSatir{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.sema{display:flex;flex-direction:column;gap:3px;background:#2b333f;border:1px solid var(--kenar);border-radius:10px;
  padding:10px 12px;min-width:180px;align-items:flex-start}
.sema b{font-size:12px;margin-bottom:2px}
.sema0 b{color:var(--sari)} .sema1 b{color:var(--mavi)}
.tus{font-size:11px;opacity:.72;font-family:ui-monospace,monospace}
.anlat{font-size:13px;line-height:1.55;margin:4px 0}
.anlat.kucuk{font-size:12px;opacity:.72}
.odul{font-size:12.5px;color:var(--sari);margin-top:8px}
ul.kural{text-align:left;font-size:12.5px;line-height:1.55;margin:8px 0 0;padding-left:18px;opacity:.9}
ul.kural li{margin-bottom:5px}

/* ——— küçük ekran ——— */
@media (max-width:760px){
  .gostergeler{width:min(42%,190px);padding:5px 6px}
  .satir .mini{width:44px}
  .ipCubuk{height:7px}
  .tk .ad{font-size:12px}
  .skor{font-size:18px}
}
/* Kısa ekranda göstergeleri GİZLEMEK yerine sıkıştır: makara ve kaçış payı
   oyunun çekirdek kaynakları, görünmeden oynanmaz. */
@media (max-height:430px){
  .gostergeler{padding:4px 6px;width:min(38%,180px)}
  .gostergeler .etiket{margin-bottom:2px}
  .ipCubuk{height:6px;margin-bottom:3px}
  .satir{margin-top:2px}
  .satir .mini{width:40px;font-size:8px}
  .bar{height:5px}
}