/*!
 * Carpimus — arayüz stilleri
 *
 * Bütün kurallar .cm altında kapsanmıştır; mevcut sitenizin CSS'ini bozmaz.
 *
 * YERLEŞİM
 *   Tuş takımları tahtanın iki yanında, çarpma işlemi altta ortada.
 *   .cm--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.
 */

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

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

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

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

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

.cm-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. */
.cm-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) {
  .cm--fit .cm-play { container-type:size; }
  .cm--fit .cm-play > * { --board:min(100cqh,48cqw); }
}

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

.cm-bar {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.cm-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.cm-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(--cm-p1),var(--cm-accent));
  color:#fff; font-size:clamp(16px,2.6vh,22px); font-weight:700; line-height:1;
}
.cm-title {
  margin:0;
  font-size:clamp(15px,2.6vh,22px); font-weight:800; letter-spacing:-.01em;
  white-space:nowrap;
}

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

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

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

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

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

.cm-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(--cm-border);
  border-radius:calc(var(--board)/38);
  background:var(--cm-panel);
  box-shadow:var(--cm-shadow);
}

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

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

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

.cm-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. */
.cm-padname {
  font-size:max(11px,calc(var(--board)/42)); font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:var(--cm-muted);
  white-space:nowrap;
}
.cm-pad--1.is-active .cm-padname { color:var(--cm-p1); }
.cm-pad--2.is-active .cm-padname { color:var(--cm-p2); }
.cm-padrole { font-size:max(9px,calc(var(--board)/56)); color:var(--cm-muted); white-space:nowrap; }

.cm-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. */
.cm-key {
  width:max(44px,calc(var(--board)/7.6));
  height:max(44px,calc(var(--board)/7.6));
  border:1px solid var(--cm-border);
  border-radius:calc(var(--board)/48);
  background:var(--cm-bg); color:var(--cm-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;
}
.cm-key:hover:not(:disabled) {
  background:var(--cm-cell-hov); border-color:var(--cm-accent); transform:translateY(-1px);
}
.cm-key:disabled { cursor:default; }
.cm-pad:not(.is-active) .cm-key { opacity:.42; }

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

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

/* ========================= alt: çarpma işlemi ========================== */

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

.cm-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;
}
.cm-eq-a   { color:var(--cm-p1); }
.cm-eq-b   { color:var(--cm-p2); }
.cm-eq-op  { color:var(--cm-muted); font-weight:600; }
.cm-eq-res { color:var(--cm-accent); }

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

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

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

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

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

.cm-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(--cm-border); border-radius:16px;
  background:var(--cm-bg); color:var(--cm-text);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  font-size:15px;
}
.cm-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.cm-panel-head h2 { margin:0; font-size:18px; }
.cm-panel-note { margin:14px 0 0; font-size:12.5px; color:var(--cm-muted); }

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

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

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

.cm-rotate { display:none; }

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

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

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

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

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

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