:root{
  --bg:#12151c; --bg2:#1a1f2a; --line:#2b3342; --txt:#e8ecf3; --dim:#93a0b5;
  --acc:#6ea8fe; --acc2:#4ade80; --warn:#f87171; --gold:#f5c451;
  --sq-l:#c9ceda; --sq-d:#6f7b93;
  --half:rgba(110,168,254,.28);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background-color:var(--bg);
  background-image:radial-gradient(1200px 600px at 50% -10%,#1d2431,var(--bg));
  color:var(--txt); font:15px/1.5 "Segoe UI",system-ui,sans-serif; min-height:100vh;
}
h1,h3,h4{margin:0}
button,select{font:inherit;color:inherit}

#topbar{display:flex;align-items:baseline;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
#topbar h1{font-size:20px;letter-spacing:.5px}
#topbar .sub{font-size:12px;color:var(--dim);margin-left:10px;font-weight:400;letter-spacing:2px;text-transform:uppercase}
#modeBadge{margin-left:auto;font-size:13px;color:var(--acc);border:1px solid var(--line);
  background:var(--bg2);padding:4px 12px;border-radius:999px}

/* ---------- menü ---------- */
#menu{max-width:960px;margin:0 auto;padding:34px 20px 60px}
.lead{color:var(--dim);max-width:640px}
.lead b{color:var(--txt)}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:24px 0}
.mode-card{text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:16px;cursor:pointer;transition:.15s}
.mode-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.mode-card.sel{border-color:var(--acc);box-shadow:0 0 0 2px rgba(110,168,254,.25) inset}
.mode-card .tag{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--acc)}
.mode-card h3{margin:6px 0 8px;font-size:18px}
.mode-card p{margin:0;color:var(--dim);font-size:13px}
.primary{background:var(--acc);color:#0e1420;border:0;border-radius:10px;padding:12px 26px;
  font-weight:600;cursor:pointer}
.primary:disabled{opacity:.4;cursor:not-allowed}
#rules{margin-top:28px;color:var(--dim);font-size:13px}
#rules summary{cursor:pointer;color:var(--txt)}
#rules ul{margin:10px 0 0 0;padding-left:18px}
#rules li{margin:4px 0}

/* ---------- oyun düzeni ---------- */
#game{display:flex;gap:24px;padding:20px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.board-wrap{flex:0 0 auto}
.board{
  width:min(88vw,600px);aspect-ratio:1;display:grid;
  /* minmax(0,1fr): kareler içeriğe göre büyümesin, 8x8 daima eşit kalsın */
  grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));
  border-radius:8px;overflow:hidden;border:2px solid var(--line);touch-action:none;
  box-shadow:0 18px 50px rgba(0,0,0,.45);user-select:none;
}
.sq{position:relative;display:flex;align-items:center;justify-content:center;cursor:default;
  min-width:0;min-height:0;overflow:hidden}
.sq.l{background:var(--sq-l)} .sq.d{background:var(--sq-d)}
.sq .coord{position:absolute;font-size:10px;font-weight:700;opacity:.55;color:#12151c}
.sq .coord.f{right:3px;bottom:1px} .sq .coord.r{left:3px;top:1px}
.sq.half::after{content:"";position:absolute;inset:0;background:var(--half);pointer-events:none}
.sq.drop{outline:3px solid var(--acc2);outline-offset:-3px;cursor:pointer}
.sq.sel{outline:3px solid var(--gold);outline-offset:-3px}
.sq.last::before{content:"";position:absolute;inset:0;background:rgba(245,196,81,.30)}
.sq.check{background:radial-gradient(circle,#ff6b6b 20%,transparent 72%)!important}
.sq.movable{cursor:grab}
.piece{font-size:min(8.5vw,58px);line-height:1;pointer-events:none;position:relative;z-index:2}
.piece.w{color:#fff;text-shadow:0 0 1px #101318,1px 1px 0 #101318,-1px 1px 0 #101318,
  1px -1px 0 #101318,-1px -1px 0 #101318,0 3px 5px rgba(0,0,0,.4)}
.piece.b{color:#171b22;text-shadow:0 0 1px #e8ecf3,1px 1px 0 #cfd6e2,-1px 1px 0 #cfd6e2,
  1px -1px 0 #cfd6e2,-1px -1px 0 #cfd6e2,0 3px 5px rgba(0,0,0,.35)}
.hint{position:absolute;width:26%;height:26%;border-radius:50%;background:rgba(20,26,36,.45);z-index:1}
.hint.cap{width:88%;height:88%;background:none;border:5px solid rgba(20,26,36,.45);box-sizing:border-box}
.drag-ghost{position:fixed;z-index:99;pointer-events:none;transform:translate(-50%,-50%);
  font-size:min(8.5vw,58px);line-height:1}

/* ---------- panel ---------- */
#panel{flex:1 1 300px;max-width:380px;min-width:290px;display:flex;flex-direction:column;gap:14px}
#statusBox{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
#phaseLabel{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--acc)}
#statusMain{font-size:17px;font-weight:600;margin-top:2px}
#statusSub{font-size:13px;color:var(--dim);margin-top:4px;min-height:19px}
#statusSub.warn{color:var(--warn)}
#statusMain.over{color:var(--gold)}

.tray-block h4{font-size:12px;color:var(--dim);font-weight:600;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:1px}
.dot{width:10px;height:10px;border-radius:50%;border:1px solid #6b7688;display:inline-block}
.dot.w{background:#fff}.dot.b{background:#171b22}
.tray{display:flex;flex-wrap:wrap;gap:6px}
.tray-item{position:relative;display:flex;align-items:center;gap:4px;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;padding:4px 9px 4px 6px;cursor:pointer;
  font-size:13px;color:var(--dim);transition:.12s;touch-action:none}
.tray-item .g{font-size:26px;line-height:1}
.tray-item.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,196,81,.22) inset;color:var(--txt)}
.tray-item.forced{border-color:var(--acc2)}
.tray-item:disabled,.tray-item.off{opacity:.28;cursor:not-allowed}
.tray-block.idle{opacity:.42}

.row{display:flex;gap:8px}
.row button,.row select{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:9px 10px;cursor:pointer;font-size:13px}
.row button:hover:not(:disabled){border-color:var(--acc)}
.row button:disabled{opacity:.35;cursor:not-allowed}
.tpl-row select{flex:1.4}
.note{font-size:12px;color:var(--dim);margin:0}
.bottom{margin-top:auto}

.movelist-head,#moveList li{display:grid;grid-template-columns:34px 1fr 1fr;gap:6px;
  padding:3px 8px;font-size:13.5px}
.movelist-head{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:1px;
  border-bottom:1px solid var(--line);padding-bottom:6px}
#moveList{list-style:none;margin:6px 0 0;padding:0;max-height:46vh;overflow:auto}
#moveList li:nth-child(odd){background:rgba(255,255,255,.03)}
#moveList .n{color:var(--dim)}
#playUI{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px}

/* ---------- overlay ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,10,14,.72);display:flex;align-items:center;
  justify-content:center;z-index:50}
.promo-box{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px 24px;text-align:center}
#promoChoices{display:flex;gap:10px;margin-top:14px}
#promoChoices button{width:72px;height:72px;font-size:44px;line-height:1;background:var(--sq-l);
  border:1px solid var(--line);border-radius:12px;cursor:pointer}
#promoChoices button:hover{outline:3px solid var(--acc)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#2a1f22;
  border:1px solid var(--warn);color:#ffd9d9;padding:9px 16px;border-radius:10px;z-index:80;
  font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}

@media(max-width:900px){ #game{padding:12px} .board{width:min(94vw,520px)} }

/* ---------- rakip / zorluk seçimi ---------- */
.opts{display:flex;flex-wrap:wrap;gap:22px;margin:4px 0 10px}
.opt-group{display:flex;align-items:center;gap:10px}
.opt-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:none;border:0;padding:8px 14px;cursor:pointer;color:var(--dim);font-size:13px}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--acc);color:#0e1420;font-weight:600}
#oppNote{margin:0 0 18px}
.tray-block.ai h4::after{content:"yapay zekâ";margin-left:auto;color:var(--acc);letter-spacing:0;
  text-transform:none;font-weight:400}
#statusMain.thinking{color:var(--acc)}

/* ---------- saat ---------- */
#clockBox{display:flex;flex-direction:column;gap:6px}
.clock-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
#clocks{display:flex;gap:10px}
.clock{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:9px 12px;
  transition:border-color .15s}
.clock .side{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:1px}
.clock b{font-size:22px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.clock.active{border-color:var(--acc);box-shadow:0 0 0 2px rgba(110,168,254,.16) inset}
.clock.active b{color:var(--acc)}
.clock.low b{color:var(--warn)}
.clock.idle{opacity:.45}
.opt-group select{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;cursor:pointer;font-size:13px}

/* dil düğmesi */
.seg.lang{margin-left:12px}
.seg.lang button{padding:5px 11px;font-size:12px;letter-spacing:1px}

/* ---------- tanıtım ---------- */
.start-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ghost{background:none;border:1px solid var(--line);border-radius:10px;padding:12px 20px;
  cursor:pointer;color:var(--dim);font-size:14px}
.ghost:hover{border-color:var(--acc);color:var(--txt)}
.intro-box{background:var(--bg2);border:1px solid var(--line);border-radius:18px;
  padding:18px 20px 20px;width:min(92vw,430px);box-shadow:0 24px 70px rgba(0,0,0,.6)}
.intro-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.intro-step{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--acc);
  font-variant-numeric:tabular-nums}
.linkish{background:none;border:0;color:var(--dim);cursor:pointer;font-size:13px;padding:4px}
.linkish:hover{color:var(--txt)}
.intro-art{display:flex;justify-content:center;margin-bottom:16px}
.board.mini{width:min(74vw,268px);border-width:1px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.board.mini .piece{font-size:min(8vw,27px)}
.board.mini .sq.drop{outline-width:2px;outline-offset:-2px}
.board.mini .sq.sel{outline-width:2px;outline-offset:-2px}
.intro-box h3{font-size:19px;margin-bottom:6px}
.intro-box p{color:var(--dim);font-size:14px;margin:0 0 18px;line-height:1.55}
.intro-box p b{color:var(--txt);font-weight:600}
.intro-nav{display:flex;align-items:center;gap:12px}
.intro-nav button:first-child{background:none;border:1px solid var(--line);border-radius:10px;
  padding:9px 16px;cursor:pointer;color:var(--dim);font-size:13px}
.intro-nav button:first-child:disabled{opacity:.3;cursor:not-allowed}
.intro-nav .primary{padding:9px 20px;font-size:14px}
.dots{display:flex;gap:6px;margin:0 auto}
.dot-i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dot-i.on{background:var(--acc)}

/* ---------- mobil / dokunmatik ---------- */
body{overscroll-behavior-y:contain}          /* sürüklerken sayfa yenilenmesin */

@media(max-width:900px){
  /* tahta hem genişliğe hem yüksekliğe göre ölçeklensin ki taşlık ekranda kalsın */
  .board{width:min(94vw,max(50vh,240px))}
  #panel{max-width:none;min-width:0;width:100%}
  .opts{gap:14px}
  .start-row{width:100%}
  .start-row .primary,.start-row .ghost{flex:1}
}

/* dokunmatik cihazlarda hedefler en az 44px */
@media(pointer:coarse){
  .row button,.row select,.opt-group select{min-height:46px}
  .tray-item{min-height:46px;padding:6px 11px 6px 8px}
  .tray-item .g{font-size:29px}
  .seg button{min-height:44px}
  .seg.lang button{min-height:38px;padding:8px 13px}
  .mode-card{padding:18px}
  .linkish{padding:10px}
  .intro-nav button{min-height:46px}
}

/* alçak ekranlarda tanıtım kutusu sığsın */
@media(max-height:700px){
  .board.mini{width:min(58vw,196px)}
  .intro-box{padding:14px 16px 16px}
  .intro-box p{margin-bottom:14px;font-size:13.5px}
  .intro-art{margin-bottom:12px}
}

/* dar ekranda dikey alanı taşlığa ayır: saat/durum sıkışsın, pasif taşlık gizlensin */
@media(max-width:900px){
  #panel{gap:10px}
  #clockBox{gap:4px}
  .clock-label{display:none}
  .clock{padding:6px 11px}
  .clock b{font-size:19px}
  .clock .side{font-size:10px}
  #statusBox{padding:9px 12px}
  #statusMain{font-size:15px}
  #statusSub{font-size:12px;min-height:16px}
  #phaseLabel{font-size:10px}
  .tray-block.idle{display:none}         /* sırası olmayan taraf ekranı doldurmasın */
  .tray-block h4{margin-bottom:4px;font-size:11px}
  #moveList{max-height:34vh}
}

/* çok kısa ekranlar (≈640px): tahtayı biraz daha küçült, faz etiketini gizle */
@media(max-width:900px) and (max-height:700px){
  .board{width:min(94vw,46vh)}
  #phaseLabel{display:none}
  #statusMain{margin-top:0}
  #statusSub{min-height:0}
}

/* ---------- oyun sonu ---------- */
.over-box{background:var(--bg2);border:1px solid var(--line);border-radius:18px;
  padding:26px 26px 22px;width:min(92vw,380px);text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.over-glyph{font-size:66px;line-height:1;margin-bottom:6px}
.over-glyph.win{color:var(--acc2);text-shadow:0 0 26px rgba(74,222,128,.35)}
.over-glyph.lose{color:var(--warn);text-shadow:0 0 26px rgba(248,113,113,.3)}
.over-glyph.draw{color:var(--dim);font-size:52px}
.over-glyph.side{color:var(--gold);text-shadow:0 0 26px rgba(245,196,81,.3)}
.over-box h3{font-size:23px;margin-bottom:6px}
.over-box p{color:var(--dim);font-size:13.5px;margin:0 0 20px}
.over-nav{display:flex;flex-direction:column;gap:8px}
.over-nav .primary{width:100%;padding:12px}
.over-nav .ghost{width:100%;padding:11px;font-size:13.5px}
@media(min-width:420px){
  .over-nav{flex-direction:row}
  .over-nav .primary{flex:1.3}
  .over-nav .ghost{flex:1}
}