:root{
  --navy:#171945;
  --navy2:#20245a;
  --navy3:#303669;
  --purple:#6d18f5;
  --purple2:#8c3cff;
  --purpleSoft:#eee7ff;
  --white:#ffffff;
  --cream:#f7e2bd;
  --brown:#b77e48;
  --ink:#17162c;
  --muted:#6e7087;
  --green:#6cc14a;
  --yellow:#ffb81d;
  --red:#f04d54;
  --shadow:0 18px 45px rgba(26,24,70,.15);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f6f7fb}
button{font:inherit}
button:focus-visible,.square:focus-visible{outline:3px solid #9d7cff;outline-offset:2px}
.app{width:min(1480px,100%);margin:auto;padding:18px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px
}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;color:#25245b}
.brandLogo{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--purple),#3e0dbd);color:#fff;
  box-shadow:0 9px 22px rgba(109,24,245,.25);font-weight:1000
}
.brand small{display:block;color:#81839a;font-size:11px;font-weight:750;margin-top:2px}
.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.stat{
  padding:8px 12px;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(40,42,80,.08);
  font-size:13px;font-weight:850;color:#55566f
}
.hero{
  background:
    radial-gradient(circle at 62% 35%,rgba(115,65,235,.20),transparent 20%),
    linear-gradient(135deg,#1b1d4d,#11173c 74%);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(520px,1.55fr) minmax(210px,.48fr) minmax(300px,.72fr);
  gap:18px;
  min-height:690px
}
.boardColumn{min-width:0;display:flex;flex-direction:column;justify-content:center}
.boardTopline{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-bottom:10px;min-height:35px
}
.gameTitle{font-weight:950;font-size:18px}
.turnBadge{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.11);padding:8px 11px;border-radius:12px;
  font-size:12px;font-weight:850
}
.turnDot{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid rgba(255,255,255,.45)}
.turnDot.black{background:#111}
.boardFrame{
  position:relative;
  width:100%;
  max-width:690px;
  margin:auto;
  padding:28px 28px 30px 30px;
  border-radius:13px;
  background:#252757;
  box-shadow:0 16px 36px rgba(0,0,0,.20)
}
#board{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-template-rows:repeat(8,minmax(0,1fr));
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 0 0 3px #637949,0 9px 24px rgba(0,0,0,.20);
  touch-action:manipulation;
  margin:0 auto;
}
.square{
  position:relative;
  border:0;
  padding:0;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  line-height:1;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}
.square.light{background:#eef0d4}
.square.dark{background:#7f9e5c}
.square.last::after{
  content:"";position:absolute;inset:0;background:rgba(255,224,74,.38);pointer-events:none
}
.square.selected::after{
  content:"";position:absolute;inset:5px;border:4px solid rgba(112,32,246,.90);
  border-radius:8px;pointer-events:none;z-index:2
}
.square.hintFrom::after,.square.hintTo::after{
  content:"";position:absolute;inset:5px;border:4px dashed #ffdc3d;border-radius:9px;z-index:4;pointer-events:none
}
.square.check::after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,70,70,.52),rgba(255,70,70,.12));z-index:1
}
.moveDot{
  position:absolute;width:22%;aspect-ratio:1;border-radius:50%;background:rgba(72,47,112,.36);z-index:3;pointer-events:none
}
.captureRing{
  position:absolute;inset:7px;border:5px solid rgba(102,35,175,.48);border-radius:50%;z-index:3;pointer-events:none
}
.piece{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",sans-serif;
  font-weight:600;
  line-height:1;
  user-select:none;
  -webkit-user-select:none;
}

.piece.white{
  color:#ffffff;
  -webkit-text-stroke:0.9px #171717;
  text-shadow:
    -0.9px -0.9px 0 #171717,
     0.9px -0.9px 0 #171717,
    -0.9px  0.9px 0 #171717,
     0.9px  0.9px 0 #171717,
     0 0 1px rgba(255,255,255,.55),
     0 0 2px rgba(255,255,255,.28);
}

.piece.black{
  color:#1f1f1f;
  -webkit-text-stroke:0.2px #1f1f1f;
  text-shadow:none;
}
.coords{position:absolute;font-size:12px;font-weight:900;color:#fff;opacity:.88}
.coordRanks{left:8px;top:29px;bottom:31px;display:flex;flex-direction:column;justify-content:space-around}
.coordFiles{left:31px;right:28px;bottom:8px;display:flex;justify-content:space-around}
.boardActions{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.smallBtn{
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.10);color:#fff;
  border-radius:11px;padding:8px 11px;font-size:12px;font-weight:850;cursor:pointer
}
.smallBtn:hover{background:rgba(255,255,255,.16)}
.metiColumn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0
}
.thought{
  width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.06);
  border-radius:22px;padding:20px 16px;min-height:145px;display:flex;flex-direction:column;justify-content:center
}
.thought strong{font-size:15px;margin-bottom:9px}.thought span{font-size:13px;line-height:1.45;color:#e7e7f6}
.typing{display:flex;gap:5px;margin-top:15px}
.typing i{width:8px;height:8px;border-radius:50%;background:#7b30ed;animation:pulse 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.metiVisual{
  width:100%;
  height:285px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.metiImage{
  display:block;
  max-width:100%;
  max-height:280px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 15px 15px rgba(0,0,0,.23));
  transform:translateZ(0);
  transition:opacity .16s ease, transform .20s ease;
}
.metiImage.poseChanging{
  opacity:.45;
  transform:scale(.97);
}
.metiSpeech{
  width:100%;background:#2a2c61;border:1px solid rgba(255,255,255,.08);border-radius:17px;padding:14px;
  font-size:12.5px;line-height:1.45;min-height:80px
}
.metiSpeech b{display:block;margin-bottom:5px;color:#fff}.metiSpeech span{color:#e9e9f7}
.optionsColumn{display:flex;flex-direction:column;justify-content:center;min-width:0}
.sectionTitle{font-size:16px;font-weight:900;margin:0 0 9px}
.optionStack{display:grid;gap:8px}
.choice{
  border:2px solid transparent;background:#fff;color:#202039;border-radius:13px;padding:12px;
  display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;min-height:72px
}
.choice:hover{transform:translateY(-1px)}
.choice.selected{border-color:#8c35ff;background:#faf7ff;box-shadow:0 0 0 2px rgba(140,53,255,.08)}
.choiceIcon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px;flex:0 0 auto}
.choiceIcon.metiThumb{
  background:#efe7ff;
  overflow:hidden;
}
.modeMetiThumb{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}
.choiceIcon.friendsIcon{
  background:#ecf3ff;
}
.friendsSvg{
  width:28px;
  height:28px;
  display:block;
}

.choiceIcon.purple{background:#eee6ff}.choiceIcon.blue{background:#e6f0ff}
.choiceText{flex:1;min-width:0}.choiceText b{display:block;font-size:13px}.choiceText span{font-size:11px;color:#77798f;margin-top:3px;display:block}
.radio{width:17px;height:17px;border-radius:50%;border:2px solid #b7bbcc;position:relative;flex:0 0 auto}
.choice.selected .radio{border-color:#7a21f3}.choice.selected .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#7a21f3}
.difficulty{margin-top:18px}
.diffList{background:#fff;border-radius:13px;overflow:hidden}
.diff{
  display:flex;align-items:center;gap:9px;padding:12px;border:0;width:100%;background:#fff;cursor:pointer;text-align:left;color:#212139;border-bottom:1px solid #e6e6ef
}
.diff:last-child{border-bottom:0}.diff.selected{background:#faf7ff}
.face{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;flex:0 0 auto}
.face.easy{background:var(--green)}.face.medium{background:var(--yellow)}.face.hard{background:var(--red)}
.diffText{flex:1}.diffText b{font-size:12px;display:block}.diffText span{font-size:10px;color:#75778d}
.sideRadio{width:17px;height:17px;border-radius:50%;border:2px solid #b9bdcc}
.diff.selected .sideRadio{border-color:#7521f1;box-shadow:inset 0 0 0 3px #fff;background:#7521f1}
.colorPick{
  margin-top:12px;background:rgba(255,255,255,.09);border-radius:13px;padding:11px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px
}
.colorButtons{display:flex;gap:6px}
.colorBtn{
  border:1px solid rgba(255,255,255,.20);border-radius:9px;background:transparent;color:#fff;
  padding:7px 9px;cursor:pointer;font-weight:800
}
.colorBtn.selected{background:#fff;color:#1d1e49}
.startBtn{
  margin-top:12px;border:0;border-radius:12px;background:linear-gradient(135deg,#7611f6,#5600d8);
  color:#fff;padding:14px 16px;font-weight:950;font-size:16px;cursor:pointer;
  box-shadow:0 9px 22px rgba(99,0,222,.28)
}
.startBtn:hover{filter:brightness(1.06)}
.mobileOnly{display:none}
.contentGrid{
  margin-top:13px;display:grid;grid-template-columns:1.65fr .85fr;gap:13px
}
.infoCard,.hintCard{
  background:#fff;border-radius:15px;box-shadow:0 4px 18px rgba(36,39,80,.06);padding:16px
}
.tabs{display:flex;gap:22px;border-bottom:1px solid #e7e8ef;overflow-x:auto}
.tab{
  border:0;background:transparent;padding:0 0 10px;white-space:nowrap;font-weight:850;font-size:12px;color:#45465b;cursor:pointer
}
.tab.active{color:#6919f2;border-bottom:3px solid #741cff}
.tabBody{padding-top:15px;min-height:128px;color:#52536b;font-size:13px;line-height:1.55}
.steps{display:grid;gap:8px}
.step{display:flex;align-items:flex-start;gap:8px}
.stepNo{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#6819ed;color:#fff;font-size:10px;font-weight:900;flex:0 0 auto;margin-top:1px}
.hintCard{background:linear-gradient(135deg,#fffdf5,#fff5cf);position:relative;overflow:hidden}
.hintTitle{font-weight:900;color:#9a6b00;display:flex;align-items:center;gap:7px}
.hintBubble{margin-top:13px;background:#fff;border-radius:14px;padding:14px;min-height:86px;font-size:12px;line-height:1.5;color:#5d5661}
.hintAction{
  margin-top:10px;border:0;border-radius:10px;background:#ffb800;color:#fff;padding:9px 12px;font-size:12px;font-weight:900;cursor:pointer
}
.promotionOverlay,.resultOverlay{
  position:fixed;inset:0;background:rgba(16,17,53,.62);backdrop-filter:blur(5px);display:grid;place-items:center;z-index:100;padding:18px
}
.hidden{display:none!important}
.promoCard,.resultCard{background:#fff;border-radius:20px;padding:22px;width:min(420px,94vw);text-align:center;box-shadow:0 28px 80px rgba(17,19,59,.28)}
.promoPieces{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.promoPiece{border:2px solid #ebe7f7;background:#faf8ff;border-radius:13px;padding:11px;font-size:40px;cursor:pointer}
.resultIcon{display:none}.resultCard h2{margin:6px 0 7px}.resultCard p{color:#6a6b80;line-height:1.45}
.resultMetiWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 0 10px;
}
.resultMetiImage{
  width:min(190px,44vw);
  max-width:190px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(25,20,61,.18));
}

.resultActions{display:flex;gap:8px;margin-top:15px}
.resultActions button{flex:1;border:0;border-radius:11px;padding:11px;font-weight:900;cursor:pointer}
.resultActions .primary{background:#6816ec;color:#fff}.resultActions .secondary{background:#eeeff5;color:#46475d}
.toast{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,30px);opacity:0;pointer-events:none;
  background:#17183e;color:#fff;border-radius:999px;padding:10px 15px;font-size:12px;font-weight:850;transition:.25s;z-index:120
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pulse{50%{opacity:.25;transform:translateY(-2px)}}

@media(max-width:1080px){
  .hero{grid-template-columns:minmax(480px,1.4fr) minmax(190px,.48fr) minmax(270px,.68fr);padding:14px;gap:12px}
  .metiVisual{height:250px}.metiImage{max-height:245px}
  .choice{padding:9px;min-height:64px}.diff{padding:10px}
}
@media(max-width:820px){
  .app{padding:8px}
  .topbar{margin-bottom:7px}.brand small{display:none}.stat{padding:7px 9px;font-size:11px}
  .hero{
    min-height:0;border-radius:15px;padding:9px;
    display:flex;flex-direction:column;gap:10px
  }
  .boardColumn{order:1}
  .boardTopline{margin:2px 2px 7px}
  .gameTitle{font-size:15px}
  .boardFrame{width:100%;max-width:none;padding:22px 22px 25px 25px}
  .square{font-size:clamp(35px,10.2vw,60px)}
  .coordRanks{left:7px;top:22px;bottom:26px}.coordFiles{left:27px;right:22px;bottom:6px}
  .metiColumn{
    order:2;display:grid;grid-template-columns:100px 1fr;align-items:center;gap:10px;
    background:#26285b;border-radius:14px;padding:10px
  }
  .thought{display:none}
  .metiVisual{width:100px;height:118px;margin:0}.metiImage{max-width:100px;max-height:116px}
  .metiSpeech{min-height:72px;padding:11px}
  .optionsColumn{order:3;background:#212351;border-radius:14px;padding:10px}
  .sectionTitle{font-size:13px;margin:2px 0 7px}
  .optionStack{grid-template-columns:1fr 1fr}
  .choice{min-height:62px;padding:8px}.choiceIcon{width:32px;height:32px}.choiceText span{display:none}
  .difficulty{margin-top:10px}.diffList{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:transparent}
  .diff{border-radius:10px;border:0;padding:8px;min-height:54px}.diffText span{display:none}.sideRadio{display:none}
  .colorPick{margin-top:8px}
  .startBtn{margin-top:8px;width:100%}
  .boardActions{margin-top:8px}
  .contentGrid{grid-template-columns:1fr;margin-top:8px}
  .hintCard{display:none}
  .infoCard{padding:12px}.tabs{gap:16px}.tabBody{min-height:110px}
}
@media(max-width:520px){
  .stats .stat:nth-child(2){display:none}
  .hero{padding:7px}
  .boardFrame{padding:20px 18px 23px 23px}
  .coordFiles{left:24px;right:18px}.coordRanks{left:6px}
  .square{font-size:clamp(33px,10.6vw,54px)}
  .optionStack{grid-template-columns:1fr 1fr}
  .choiceText b{font-size:11px}.choiceIcon{display:grid;width:28px;height:28px}.modeMetiThumb{width:24px;height:24px}.friendsSvg{width:22px;height:22px}
  .diffText b{font-size:10px}
  .tabs{gap:13px}.tab{font-size:10px}
}


/* MATOSFER sade tek-ekran sürümü */
body{min-height:100vh;overflow-x:hidden}
.app{width:min(1480px,100%);padding:14px 18px 18px}
.topbar{
  display:none;
}
.topbar .brand{justify-self:start}
.topbar .turnBadge{justify-self:center;background:#fff;color:#3f4058;border:1px solid #ececf5;box-shadow:0 4px 14px rgba(35,36,76,.08)}
.topbar .turnDot{border-color:#d7d8e4}
.headerSpacer{justify-self:end}
.hero{min-height:calc(100vh - 36px);align-items:center;padding:18px;grid-template-columns:minmax(520px,1.5fr) minmax(215px,.48fr) minmax(310px,.74fr)}
.boardColumn{justify-content:center}
.boardFrame{max-width:700px}
.metiColumn{align-self:center}
.optionsColumn{align-self:center}
@media(max-width:820px){
  body{overflow:auto}
  .app{padding:8px}
  .topbar{display:none}
  .headerSpacer{display:none}
  .topbar .turnBadge{justify-self:end;font-size:11px;padding:7px 9px}
  .hero{min-height:0;padding:8px;display:flex;flex-direction:column}
  .boardColumn{width:100%}
  .boardFrame{max-width:none;width:100%}
  .metiColumn{width:100%}
  .optionsColumn{width:100%}
}


/* =========================================================
   STABİL MOBİL SATRANÇ TAHTASI
   JavaScript #board genişlik/yüksekliğini 8'e tam bölünen
   piksel değeriyle kilitler. Böylece farklı mobil tarayıcılarda
   satır/sütun yuvarlama farkları oluşmaz.
   ========================================================= */
.boardColumn,
.boardFrame,
#board{
  min-width:0;
  min-height:0;
}

#board > .square{
  box-sizing:border-box;
}

@media (max-width:820px){
  .boardColumn{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .boardFrame{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  #board{
    aspect-ratio:auto;
    flex:none;
    grid-template-columns:repeat(8,minmax(0,1fr));
    grid-template-rows:repeat(8,minmax(0,1fr));
  }

  #board .square{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    overflow:hidden;
    font-size:0 !important;
  }

  #board .piece{
    width:84%;
    height:84%;
  }

  #board .pieceSvg{
    width:100%;
    height:100%;
  }
}

@media (max-width:520px){
  #board .piece{
    width:86%;
    height:86%;
  }
}

/* Piyon terfi ekranında SVG taşlar */
.promoPiece{
  display:grid;
  place-items:center;
}
.promoPiece .piece{
  width:52px;
  height:52px;
  margin:auto;
}


/* =========================================================
   MATOSFER - PIXEL STABİL SATRANÇ TAHTASI
   Grid kullanılmaz. Her kare JS ile aynı fiziksel piksel
   boyutunda absolute olarak konumlandırılır.
   ========================================================= */

#board{
  position:relative !important;
  display:block !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  margin-left:auto !important;
  margin-right:auto !important;
  contain:layout paint;
}

#board > .square{
  position:absolute !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  appearance:none;
  -webkit-appearance:none;
  border-radius:0;
  transform:none !important;
}

#board .piece{
  position:absolute !important;
  inset:8% !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  transform:none !important;
  display:block !important;
  pointer-events:none;
}

#board .pieceSvg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  overflow:visible !important;
}

@media(max-width:820px){
  .boardColumn,
  .boardFrame{
    min-width:0 !important;
    max-width:100% !important;
  }

  #board{
    flex:none !important;
  }

  /* Önceki mobil font/ölçek kurallarını etkisiz bırak. */
  #board .square{
    font-size:0 !important;
  }

  #board .piece{
    inset:7% !important;
  }
}

@media(max-width:420px){
  #board .piece{
    inset:6.5% !important;
  }
}


/* =========================================================
   KLASİK TAŞ STİLİ - İLK SÜRÜME YAKIN
   Pixel-stabil tahta korunur, sadece taş görünümü değişir.
   ========================================================= */
#board .piece{
  font-size:calc(var(--cell-size, 56px) * 0.78) !important;
  transform:translateY(1px);
  overflow:visible !important;
}

#board .pieceSvg{
  display:none !important;
}

@media(max-width:820px){
  #board .piece{
    font-size:calc(var(--cell-size, 46px) * 0.76) !important;
    transform:translateY(0.5px);
  }
}

@media(max-width:420px){
  #board .piece{
    font-size:calc(var(--cell-size, 42px) * 0.74) !important;
  }
}

/* Terfi kutusunda daha temiz görünüm */
.promoPiece .piece{
  position:static !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  font-size:46px !important;
  transform:none !important;
}