/* =========================================================
   1) TEMEL DEĞİŞKENLER (site renkleri: lacivert, turuncu, krem)
   ========================================================= */
:root{
  --navy:#1b2a4a;
  --cream:#fbf6ec;
  --orange:#f28c28;
  --green:#2e9e4f;
  --yellow:#ffd23f;
  --line:#1b2a4a;
  --radius:16px;
  --merge-time:2.6s;   /* Birleşme animasyonu: zihinsel işlem için yavaş */
}
:where(#kcroot,#kcroot *){box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}   /* :where ⇒ sıfır özgüllük: sınıf kuralları (padding, margin) ezilmez */
/* Ortak oyun kabuğu (oyun_header.php / oyun_footer.php): oyun alanı ortak başlık ile alt çubuğun arasına oturur;
   yükseklikleri sayfadaki betik ölçüp --oyun-ust / --oyun-alt olarak yazar (telefonda oyun sırasında ikisi de gizli ⇒ 0). */
:root{--oyun-ust:59px;--oyun-alt:62px;}
html,body{margin:0;padding:0;overflow:hidden;}
#kcroot{
  position:fixed;top:var(--oyun-ust);bottom:var(--oyun-alt);left:0;right:0;
  font-family:"Segoe UI","Noto Sans","DejaVu Sans",Arial,sans-serif;
  background:var(--cream);color:var(--navy);
  overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
:where(#kcroot button){font-family:inherit;}
.hidden{display:none !important;}

/* =========================================================
   2) ÜST BAR
   ========================================================= */
#kcroot .kchead{
  height:70px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:12px;
}
#kcroot .kchead h1{font-size:24px;font-weight:700;}
#kcroot .kchead h1 span{color:var(--orange);}
#modeLabel{font-size:18px;font-weight:700;opacity:.85;}
.home-btn{
  font-size:19px;font-weight:700;padding:10px 22px;border-radius:999px;border:3px solid #fff;
  background:transparent;color:#fff;cursor:pointer;min-height:50px;
}

/* =========================================================
   3) ANA MENÜ (akıcı geçişli)
   ========================================================= */
#menu{
  height:calc(100% - 70px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:20px;
}
#menu h2{font-size:34px;text-align:center;}
.menu-row{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;transition:opacity .35s, transform .35s;}
.menu-row.fade{opacity:0;transform:translateY(25px);}
.menu-card{
  width:320px;min-height:200px;border:none;border-radius:24px;cursor:pointer;color:#fff;
  font-size:28px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:20px;box-shadow:0 8px 0 rgba(0,0,0,.25);transition:transform .15s;
}
.menu-card small{font-size:17px;font-weight:600;opacity:.9;}
.menu-card .ico{font-size:56px;}
.menu-card:active{transform:translateY(5px);}
.mc-navy{background:var(--navy);} .mc-orange{background:var(--orange);}
.mc-blue{background:#1e6fd9;} .mc-purple{background:#7b2cbf;}
.back-link{font-size:20px;font-weight:700;background:none;border:none;color:var(--navy);text-decoration:underline;cursor:pointer;padding:10px;}

/* =========================================================
   4) BÖLÜNMÜŞ EKRAN: %60 görsel – %40 işlem (ayırıcı çizgi yok)
   ========================================================= */
#app{display:flex;height:calc(100% - 70px);}
#visual{
  flex:0 0 60%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px;gap:18px;position:relative;
}
#panel{flex:0 0 40%;background:#fff;display:flex;flex-direction:column;padding:18px;gap:14px;overflow-y:auto;}

/* =========================================================
   5) DİKEY KESİR BİLEŞENİ — slash (3/5) ASLA kullanılmaz
      Üstte pay, ortada kalın çizgi (border-bottom), altta payda
   ========================================================= */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;}
.frac .num{border-bottom:5px solid currentColor;padding:0 6px 4px;margin-bottom:4px;}
.frac .num,.frac .den{font-size:40px;font-weight:800;line-height:1.1;min-width:1.5em;text-align:center;}
.op{font-size:40px;font-weight:800;margin:0 10px;color:var(--navy);}
.eq-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}

/* =========================================================
   6) GÖRSEL ALAN – iki dikdörtgen sahnesi
   ========================================================= */
.rect-labels{display:flex;justify-content:center;gap:6%;width:100%;max-width:900px;}
.rect-labels div{width:44%;text-align:center;font-size:18px;font-weight:700;}
#stage{position:relative;width:100%;max-width:900px;display:flex;justify-content:center;gap:6%;}
.rect{
  width:44%;aspect-ratio:4/3;position:relative;background:#fff;
  border:4px solid var(--line);border-radius:6px;overflow:hidden;display:grid;cursor:pointer;
}
.rect .cell{transition:background .25s;}
#rect1 .cell{border-bottom:2px solid var(--line);}           /* yatay parçalar */
#rect1 .cell:last-child{border-bottom:none;}
#rect2 .cell{border-right:2px solid var(--line);}            /* dikey parçalar */
#rect2 .cell:last-child{border-right:none;}
#rect2{z-index:2;transition:transform var(--merge-time) cubic-bezier(.45,.05,.35,1), opacity .6s;}
/* Kayarken 2. dikdörtgen saydamlaşır, böylece altındaki görünür */
#rect2.merging{background:transparent;}
#rect2.merging .cell{opacity:.6;}
#rect2.merging .cell.blank{background:transparent !important;}
/* Araç moduna göre imleç ipucu */
body.tool-scissors .rect{cursor:crosshair;}

/* Birleşmiş sonuç ızgarası */
.grid-result{position:absolute;inset:0;display:grid;opacity:0;transition:opacity .8s;z-index:3;background:#fff;}
.grid-result.show{opacity:1;}
.grid-result .cell{border-right:2px solid var(--line);border-bottom:2px solid var(--line);}

/* Şekilden Kesre: tek büyük hedef matris */
#target{width:72%;max-width:640px;aspect-ratio:4/3;position:relative;border:4px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;}
#target .grid-result{opacity:1;}

.legend{display:flex;gap:20px;font-size:18px;font-weight:600;flex-wrap:wrap;justify-content:center;}
.legend i{display:inline-block;width:24px;height:24px;border-radius:5px;vertical-align:middle;margin-right:6px;border:2px solid var(--line);}
.visual-title{font-size:24px;font-weight:800;text-align:center;}

/* =========================================================
   7) SAĞ PANEL – ortak parçalar
   ========================================================= */
.big-btn{
  font-size:24px;font-weight:800;border:none;border-radius:var(--radius);padding:16px;min-height:66px;
  cursor:pointer;color:#fff;background:var(--orange);box-shadow:0 5px 0 #b8640f;
}
.big-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b8640f;}
.big-btn.navy{background:var(--navy);box-shadow:0 5px 0 #0c1426;}
.big-btn.green{background:var(--green);box-shadow:0 5px 0 #1d6b34;}
.mid-btn{
  font-size:19px;font-weight:700;border:3px solid var(--navy);border-radius:14px;background:#fff;color:var(--navy);
  min-height:56px;padding:8px 12px;cursor:pointer;
}
.task-card{background:var(--cream);border-radius:var(--radius);padding:12px;text-align:center;}
.task-card .t{font-size:18px;font-weight:700;margin-bottom:6px;}
.qbox{display:inline-block;border:3px dashed currentColor;border-radius:10px;padding:0 10px;}

.score-bar{display:flex;justify-content:space-between;gap:8px;font-size:19px;font-weight:800;flex-wrap:wrap;}
.pill{background:var(--navy);color:#fff;padding:8px 16px;border-radius:999px;}
.pill.o{background:var(--orange);}

/* Dönüt balonu */
.bubble{
  position:relative;background:var(--cream);border:3px solid var(--navy);border-radius:18px;
  padding:12px 16px;font-size:18px;font-weight:600;min-height:64px;display:flex;align-items:center;
}
.bubble::after{content:"";position:absolute;bottom:-14px;left:40px;border:12px solid transparent;border-top-color:var(--navy);border-bottom:0;}
.bubble.warn{background:#fff1e0;border-color:var(--orange);} .bubble.warn::after{border-top-color:var(--orange);}
.bubble.bad{background:#ffe5e5;border-color:#e53935;}       .bubble.bad::after{border-top-color:#e53935;}
.bubble.ok{background:#e6f7ea;border-color:var(--green);}   .bubble.ok::after{border-top-color:var(--green);}

/* =========================================================
   8) ARAÇ ÇUBUĞU (Makas, Fırça, Palet)
   ========================================================= */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tool{
  font-size:21px;font-weight:800;min-height:64px;border-radius:14px;border:3px solid var(--navy);
  background:#fff;color:var(--navy);cursor:pointer;
}
.tool.active{background:var(--navy);color:#fff;box-shadow:0 0 0 4px var(--yellow);}
.palette{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.swatch{
  aspect-ratio:1;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px var(--navy);cursor:pointer;position:relative;
  min-width:40px;
}
.swatch.sel{box-shadow:0 0 0 4px var(--navy),0 0 0 8px var(--yellow);}
/* Rozet: rengin hangi dikdörtgende kullanıldığını gösterir (diğerine kilitli) */
.swatch .badge{
  position:absolute;right:-8px;top:-8px;background:var(--navy);color:#fff;font-size:13px;font-weight:800;
  border-radius:999px;padding:2px 6px;
}
.small-note{font-size:15px;text-align:center;color:#556;}

/* =========================================================
   9) KESİR KUTULARI + SANAL NUMPAD
   ========================================================= */
#writeEq.locked{opacity:.35;pointer-events:none;}
#writeEq{display:flex;align-items:center;justify-content:center;padding:6px 0;}
.wfrac{display:flex;flex-direction:column;align-items:center;}
.wfrac .gbar{width:84px;border-bottom:5px solid currentColor;margin:6px 0;border-radius:3px;}
.slot{
  width:72px;height:66px;border:4px solid;border-radius:12px;background:#fff;
  font-size:38px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:box-shadow .2s, background .3s;
}
.slot.focus{box-shadow:0 0 0 5px var(--yellow),0 0 22px 8px rgba(255,210,63,.9);}  /* Sarı parlama */
.slot.wrong{background:#ffe0e0;animation:shake .5s;}
.slot.right{background:#e3f6e8;}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)} 80%{transform:translateX(6px)}
}
#numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;}
#numpad button{
  font-size:32px;font-weight:800;min-height:64px;border-radius:14px;border:none;cursor:pointer;
  background:var(--cream);color:var(--navy);box-shadow:0 4px 0 #d8ccb3;
}
#numpad button:active{transform:translateY(3px);box-shadow:0 1px 0 #d8ccb3;}
#numpad .del{background:#ffd9c2;font-size:23px;}
#numpad .ok{background:var(--green);color:#fff;font-size:23px;box-shadow:0 4px 0 #1d6b34;}

/* =========================================================
   10) AFERİN EKRANI
   ========================================================= */
#bravo{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:80;
  opacity:0;
}
#bravo div{
  font-size:min(16vw,150px);font-weight:900;color:var(--green);
  text-shadow:0 6px 0 #1d6b34,0 0 40px rgba(255,255,255,.9);transform:scale(.2);
}
#bravo.go{animation:bravoFade 2s forwards;}
#bravo.go div{animation:bravoPop 2s forwards;}
@keyframes bravoFade{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes bravoPop{0%{transform:scale(.2) rotate(-8deg)}20%{transform:scale(1.15) rotate(3deg)}35%{transform:scale(1) rotate(0)}100%{transform:scale(1)}}
#flash{position:fixed;inset:0;pointer-events:none;z-index:70;}
#flash.go{animation:greenFlash 1s;}
@keyframes greenFlash{30%{box-shadow:inset 0 0 120px 40px rgba(46,158,79,.7);}}

/* =========================================================
   LİDERLİK TABLOSU, OYUN SONU, STANDART ALT BUTONLAR
   ========================================================= */
.modal{position:fixed;inset:0;background:rgba(27,42,74,.6);display:flex;align-items:center;justify-content:center;z-index:90;padding:16px;}
.modal-box{background:#fff;border-radius:22px;width:100%;max-width:620px;max-height:90vh;display:flex;flex-direction:column;padding:20px;gap:14px;}
.modal-box h3{font-size:28px;text-align:center;}
.end-score{font-size:64px;font-weight:900;color:var(--orange);text-align:center;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;} .btn-row>*{flex:1;}
/* =========================================================
   11) TELEFON / DAR EKRAN: alt alta yerleşim
   ========================================================= */
@media (max-width:820px){
  #kcroot{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #app{flex-direction:column;height:auto;min-height:calc(100% - 70px);}
  #visual,#panel{flex:none;width:100%;}
  #visual{padding:12px;gap:10px;}
  #kcroot .kchead{height:auto;min-height:60px;padding:8px 12px;flex-wrap:wrap;}
  #kcroot .kchead h1{font-size:18px;} #modeLabel{font-size:15px;}
  .home-btn{font-size:15px;padding:6px 14px;min-height:42px;}
  #menu{height:auto;min-height:calc(100% - 60px);} #menu h2{font-size:26px;}
  .menu-card{width:100%;max-width:340px;min-height:150px;font-size:24px;}
  .frac .num,.frac .den{font-size:30px;} .op{font-size:30px;margin:0 6px;}
  .slot{width:54px;height:52px;font-size:28px;} .wfrac .gbar{width:64px;}
  #numpad button{min-height:54px;font-size:26px;}
  .rect-labels div{font-size:13px;}
  #target{width:100%;}
  .tool{font-size:18px;min-height:54px;}
}
@media (max-height:860px) and (min-width:821px){
  .frac .num,.frac .den{font-size:32px;} .slot{width:62px;height:56px;font-size:32px;}
  #numpad button{min-height:54px;} .big-btn{min-height:56px;padding:10px;} .tool{min-height:54px;}
}

/* Ortak liderlik paneli / ad kutusu (lb/lb.css) bu oyunun açık kartıyla */
.mklb,.end-name{--lb-ink:var(--navy);--lb-muted:#667;--lb-line:#d6d0c2;--lb-glass:#fff;--lb-accent:var(--orange);--lb-on:var(--navy);--lb-on2:#0c1426;--lb-bg:var(--cream);--lb-row:#f6f0e2;--lb-well:#fff;--lb-me:#fff1e0;--lb-err:#e53935}
#lbModal .modal-box{max-width:680px}
.end-name{text-align:left}
.end-name[hidden]{display:none}