/*!
 * Toplanga — arayüz stilleri
 *
 * Bütün kurallar .tg altında kapsanmıştır; mevcut sitenizin CSS'ini bozmaz.
 *
 * YERLEŞİM
 *   Tuş takımları tahtanın iki yanında, toplama işlemi altta ortada.
 *   .tg--fit sınıfı varsa oyun ekrana tam sığar (kaydırma yok): tahtanın
 *   boyutu --board değişkeninden gelir ve kalan yüksekliğe göre hesaplanır.
 *   Tuşlar, yazı boyutları ve boşluklar hep --board üzerinden türetilir,
 *   böylece akıllı tahtada da telefonda da oranlar aynı kalır.
 */

.tg {
  --tg-bg:#fff; --tg-panel:#f6f7f9; --tg-border:#dfe3e8;
  --tg-text:#1b1f24; --tg-muted:#6b7480;
  --tg-cell:#fff; --tg-cell-hov:#eef2f7;
  --tg-p1:#2563eb; --tg-p1-soft:#dbe6fe; --tg-p1-glow:rgba(37,99,235,.20);
  --tg-p2:#dc2626; --tg-p2-soft:#fcdcdc; --tg-p2-glow:rgba(220,38,38,.18);
  --tg-accent:#0f766e; --tg-accent-glow:rgba(15,118,110,.28);
  --tg-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 20px rgba(16,24,40,.06);

  box-sizing:border-box;
  color:var(--tg-text);
  background:var(--tg-bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.4;
}
.tg *,.tg *::before,.tg *::after { box-sizing:inherit; }
.tg [hidden] { display:none !important; }

@media (prefers-color-scheme:dark) {
  .tg:not([data-theme="light"]) {
    --tg-bg:#14171c; --tg-panel:#1c2027; --tg-border:#2c323b;
    --tg-text:#e8ebef; --tg-muted:#98a2b0;
    --tg-cell:#1a1e25; --tg-cell-hov:#242a33;
    --tg-p1:#60a5fa; --tg-p1-soft:#1e3356; --tg-p1-glow:rgba(96,165,250,.26);
    --tg-p2:#f87171; --tg-p2-soft:#4d2020; --tg-p2-glow:rgba(248,113,113,.24);
    --tg-accent:#2dd4bf; --tg-accent-glow:rgba(45,212,191,.30);
    --tg-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.3);
  }
}
.tg[data-theme="dark"] {
  --tg-bg:#14171c; --tg-panel:#1c2027; --tg-border:#2c323b;
  --tg-text:#e8ebef; --tg-muted:#98a2b0;
  --tg-cell:#1a1e25; --tg-cell-hov:#242a33;
  --tg-p1:#60a5fa; --tg-p1-soft:#1e3356; --tg-p1-glow:rgba(96,165,250,.26);
  --tg-p2:#f87171; --tg-p2-soft:#4d2020; --tg-p2-glow:rgba(248,113,113,.24);
  --tg-accent:#2dd4bf; --tg-accent-glow:rgba(45,212,191,.30);
  --tg-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.3);
}

/* ========================= ana çerçeve ve ölçek =========================
 * Her şey tek bir sayıdan türer: --board (tahtanın kenar uzunluğu).
 * Akan (gömülü) kullanımda yükseklik serbest, tam ekran kipinde
 * kalan yüksekliğe göre hesaplanır.
 * ===================================================================== */

.tg { display:flex; flex-direction:column; gap:10px; padding:14px; margin:0 auto; }

.tg--fit {
  height:100vh;
  height:100dvh;
  overflow:hidden;
  gap:clamp(4px,1vh,10px);
  padding:clamp(6px,1.2vh,14px);
}

.tg-play {
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,2.2vw,34px);
}

/* Yedek ölçü: container query birimi olmayan tarayıcılar için kaba tahmin. */
.tg-play > * { --board:min(62vh,48vw); }

/* Kesin ölçü: tahta, oyun alanının tam yüksekliğini kaplar.
   Genişlik payının %48'i tahtaya, kalanı iki tuş takımına gider. */
@supports (height:1cqh) {
  .tg--fit .tg-play { container-type:size; }
  .tg--fit .tg-play > * { --board:min(100cqh,48cqw); }
}

/* ============================== üst şerit ============================== */

.tg-bar {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.tg-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.tg-mark {
  display:grid; place-items:center;
  width:clamp(28px,4.4vh,40px); height:clamp(28px,4.4vh,40px);
  border-radius:10px;
  background:linear-gradient(140deg,var(--tg-p1),var(--tg-accent));
  color:#fff; font-size:clamp(16px,2.6vh,22px); font-weight:700; line-height:1;
}
.tg-title {
  margin:0;
  font-size:clamp(15px,2.6vh,22px); font-weight:800; letter-spacing:-.01em;
  white-space:nowrap;
}

.tg-tools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.tg-btn, .tg-icon {
  height:clamp(30px,4.6vh,40px);
  border:1px solid var(--tg-border); border-radius:9px;
  background:var(--tg-bg); color:var(--tg-text);
  font:inherit; font-size:clamp(12px,1.9vh,15px); font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.tg-btn { padding:0 clamp(9px,1.6vw,16px); }
.tg-icon { width:clamp(30px,4.6vh,40px); padding:0; font-size:clamp(13px,2.1vh,17px); }
.tg-btn:hover, .tg-icon:hover { background:var(--tg-cell-hov); }
.tg-btn--primary { background:var(--tg-p1); border-color:var(--tg-p1); color:#fff; }
.tg-btn--primary:hover { background:var(--tg-p1); filter:brightness(1.08); }
.tg-icon.is-off { opacity:.45; }

.tg-cred { line-height:0; margin-left:2px; }
/* Kaynak görsel 512x512 ve altlı üstlü boşluğu var; cover boşluğu kırpar. */
.tg-cred img {
  display:block;
  width:clamp(62px,9vh,88px); height:clamp(36px,5.2vh,51px);
  object-fit:cover; object-position:center;
}

/* ================================ tahta ================================ */

.tg-boardwrap { flex:0 0 auto; width:var(--board); height:var(--board); }

.tg-board {
  width:100%; height:100%;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(6,1fr);
  gap:calc(var(--board)/95);
  padding:calc(var(--board)/70);
  border:1px solid var(--tg-border);
  border-radius:calc(var(--board)/38);
  background:var(--tg-panel);
  box-shadow:var(--tg-shadow);
}

.tg-cell {
  position:relative;
  display:grid; place-items:center;
  min-width:0; min-height:0;
  border:1px solid var(--tg-border);
  border-radius:calc(var(--board)/62);
  background:var(--tg-cell);
  font-variant-numeric:tabular-nums;
  transition:background .12s,border-color .12s,transform .12s;
}
.tg-cell-num { font-size:calc(var(--board)/17); font-weight:600; line-height:1; }
.tg-cell-eq {
  position:absolute; bottom:4%;
  font-size:calc(var(--board)/40); font-weight:700; color:var(--tg-accent); line-height:1;
}
.tg-cell.is-p1 { background:var(--tg-p1-soft); border-color:var(--tg-p1); color:var(--tg-p1); }
.tg-cell.is-p2 { background:var(--tg-p2-soft); border-color:var(--tg-p2); color:var(--tg-p2); }
.tg-cell.is-last { box-shadow:0 0 0 2px var(--tg-accent) inset; }
.tg-cell.is-preview {
  border-color:var(--tg-accent); border-style:dashed;
  background:var(--tg-cell-hov); transform:scale(1.05);
}
.tg-cell.is-win { box-shadow:0 0 0 3px var(--tg-accent) inset; animation:tg-pop .5s ease; }
@keyframes tg-pop { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* Kare seçimi — aynı toplam birden çok kareye denk geldiğinde adaylar.
   Önizlemeden (kesik çizgi) ayrılsın diye nabız gibi atar ve tıklanabilir. */
.tg-cell.is-candidate {
  border-color:var(--tg-accent);
  background:var(--tg-cell-hov);
  cursor:pointer;
  animation:tg-pulse 1.15s ease-in-out infinite;
}
.tg-cell.is-candidate:hover { transform:scale(1.07); }
@keyframes tg-pulse {
  0%,100% { box-shadow:0 0 0 0 var(--tg-accent-glow); }
  50%     { box-shadow:0 0 0 5px var(--tg-accent-glow); }
}

/* Seçimi bekleyen tuş — hangi sayıya bastığın belli olsun. */
.tg-key.is-pending { outline:3px solid var(--tg-accent); outline-offset:2px; }

/* ============================= tuş takımları =========================== */

.tg-pad {
  flex:0 0 auto;
  padding:calc(var(--board)/56);
  border:2px solid var(--tg-border);
  border-radius:calc(var(--board)/28);
  background:var(--tg-panel);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.tg-pad.is-active { background:var(--tg-bg); }
.tg-pad--1.is-active { border-color:var(--tg-p1); box-shadow:0 0 0 5px var(--tg-p1-glow); }
.tg-pad--2.is-active { border-color:var(--tg-p2); box-shadow:0 0 0 5px var(--tg-p2-glow); }

.tg-padhead {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin-bottom:calc(var(--board)/70); padding:0 2px;
}
/* Başlık yazıları tuş satırından dar kalmalı, yoksa takımı genişletirler. */
.tg-padname {
  font-size:max(11px,calc(var(--board)/42)); font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:var(--tg-muted);
  white-space:nowrap;
}
.tg-pad--1.is-active .tg-padname { color:var(--tg-p1); }
.tg-pad--2.is-active .tg-padname { color:var(--tg-p2); }
.tg-padrole { font-size:max(9px,calc(var(--board)/56)); color:var(--tg-muted); white-space:nowrap; }

.tg-keys { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--board)/85); }

/* Tuşlar tahtadan türer, ama küçük ekranda 44px'in altına inmez —
   dokunmatikte rahat basılabilir en küçük hedef budur. */
.tg-key {
  width:max(44px,calc(var(--board)/7.6));
  height:max(44px,calc(var(--board)/7.6));
  border:1px solid var(--tg-border);
  border-radius:calc(var(--board)/48);
  background:var(--tg-bg); color:var(--tg-text);
  font:inherit; font-size:max(18px,calc(var(--board)/19)); font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1;
  cursor:pointer;
  transition:background .1s,border-color .1s,transform .1s,opacity .15s;
}
.tg-key:hover:not(:disabled) {
  background:var(--tg-cell-hov); border-color:var(--tg-accent); transform:translateY(-1px);
}
.tg-key:disabled { cursor:default; }
.tg-pad:not(.is-active) .tg-key { opacity:.42; }

.tg-key.is-current { opacity:1; color:#fff; }
.tg-pad--1 .tg-key.is-current { background:var(--tg-p1); border-color:var(--tg-p1); }
.tg-pad--2 .tg-key.is-current { background:var(--tg-p2); border-color:var(--tg-p2); }

.tg-key.is-taken { text-decoration:line-through; opacity:.28; }

/* ========================= alt: toplama işlemi ========================= */

.tg-foot {
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  text-align:center;
}
.tg-eqrow { display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.6vw,18px); }

.tg-eq {
  display:flex; align-items:baseline; gap:clamp(5px,.9vw,10px);
  margin:0;
  font-size:clamp(22px,5.2vh,48px); font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.1;
}
.tg-eq-a   { color:var(--tg-p1); }
.tg-eq-b   { color:var(--tg-p2); }
.tg-eq-op  { color:var(--tg-muted); font-weight:600; }
.tg-eq-res { color:var(--tg-accent); }

.tg-arrow {
  flex:0 0 auto;
  font-size:clamp(18px,3.6vh,32px); line-height:1;
  opacity:0; transition:opacity .2s;
}
.tg-arrow.is-on { opacity:1; }
.tg-arrow--l { color:var(--tg-p1); }
.tg-arrow--r { color:var(--tg-p2); }
.tg-arrow--l.is-on { animation:tg-nudge-l 1.2s ease-in-out infinite; }
.tg-arrow--r.is-on { animation:tg-nudge-r 1.2s ease-in-out infinite; }
@keyframes tg-nudge-l { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-7px)} }
@keyframes tg-nudge-r { 0%,100%{transform:translateX(0)} 50%{transform:translateX(7px)} }

.tg-turn { margin:0; font-size:clamp(13px,2.3vh,19px); font-weight:700; }
.tg-turn.is-p1   { color:var(--tg-p1); }
.tg-turn.is-p2   { color:var(--tg-p2); }
.tg-turn.is-over { color:var(--tg-accent); }

.tg-hint {
  margin:0; max-width:70ch;
  font-size:clamp(10px,1.6vh,13px); line-height:1.35; color:var(--tg-muted);
}
/* Çok kısa ekranlarda ipucu satırı yer kaplamasın */
@media (max-height:430px) { .tg--fit .tg-hint { display:none; } }

/* ============================ açılır paneller ========================== */

.tg-scrim { position:fixed; inset:0; z-index:40; background:rgba(8,10,14,.55); }

.tg-panel {
  position:fixed; z-index:41;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:86vh; overflow:auto;
  padding:18px 20px 20px;
  border:1px solid var(--tg-border); border-radius:16px;
  background:var(--tg-bg); color:var(--tg-text);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  font-size:15px;
}
.tg-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.tg-panel-head h2 { margin:0; font-size:18px; }
.tg-panel-note { margin:14px 0 0; font-size:12.5px; color:var(--tg-muted); }

.tg-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.tg-fields label {
  display:flex; flex-direction:column; gap:5px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tg-muted);
}
.tg-fields select {
  height:38px; padding:0 10px;
  border:1px solid var(--tg-border); border-radius:9px;
  background:var(--tg-bg); color:var(--tg-text);
  font:inherit; font-size:14px; cursor:pointer;
}

.tg-rules { margin:0; padding-left:20px; }
.tg-rules li { margin-bottom:7px; font-size:13.5px; line-height:1.45; color:var(--tg-muted); }
.tg-rules strong { color:var(--tg-text); }

/* ========================== dikey ekran uyarısı ======================== */

.tg-rotate { display:none; }

@media (orientation:portrait) and (max-width:600px) {
  .tg-rotate {
    display:grid; place-items:center;
    position:fixed; inset:0; z-index:60;
    padding:28px; text-align:center;
    background:var(--tg-bg); color:var(--tg-text);
  }
  .tg-rotate-icon {
    display:block; font-size:64px; line-height:1; margin-bottom:14px;
    animation:tg-turn 2.2s ease-in-out infinite;
  }
  .tg-rotate-title { margin:0 0 8px; font-size:20px; font-weight:800; }
  .tg-rotate-text  { margin:0; font-size:14px; color:var(--tg-muted); max-width:30ch; }
}
@keyframes tg-turn { 0%,45%{transform:rotate(0)} 65%,100%{transform:rotate(-90deg)} }

/* ============================== tam ekran ============================= */

.tg:fullscreen { width:100%; height:100%; background:var(--tg-bg); }
.tg:-webkit-full-screen { width:100%; height:100%; background:var(--tg-bg); }

/* ============================ erişilebilirlik ========================= */

.tg :focus-visible { outline:3px solid var(--tg-accent); outline-offset:2px; }

@media (prefers-reduced-motion:reduce) {
  .tg-cell, .tg-cell.is-win, .tg-cell.is-candidate, .tg-arrow, .tg-key, .tg-pad, .tg-rotate-icon {
    transition:none; animation:none;
  }
}