/* ============================================================
   64 KARE — atın gördüğü satranç
   Vanilla CSS. Monokrom tahta + tek vurgu.
   ============================================================ */

:root{
  --bg:        #0c0c0c;
  --sq-light:  #dedad0;
  --sq-dark:   #1c1c1a;
  --sq-light-used: #b9b5ab;
  --sq-dark-used:  #262622;
  --ink:       #e9e5dc;
  --muted:     #7b776e;
  --accent:    #ff4425;
  --line:      #232320;

  --hud: 52px;
  --hint: 46px;
  --pad: clamp(14px, 2.4vw, 34px);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-hop: cubic-bezier(.34,1.3,.5,1);

  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

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

/* ---------------- HUD ---------------- */

.hud{
  height:var(--hud);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px, 3vw, 34px);
  border-bottom:1px solid var(--line);
}

.hud__brand{
  margin:0;
  font-size:15px; font-weight:800;
  letter-spacing:.14em;
  display:flex; gap:.5em;
}
.hud__brand span{ color:var(--muted); font-weight:600; }

.hud__right{ display:flex; align-items:center; gap:clamp(10px,2vw,22px); }

.hud__count{
  margin:0;
  font-family:var(--mono); font-size:14px; font-weight:700;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.hud__count span{ color:var(--muted); font-weight:400; }

.hud__time{
  margin:0;
  padding-left:clamp(10px,2vw,22px);
  border-left:1px solid var(--line);
  font-family:var(--mono); font-size:14px;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  transition:color .4s var(--ease);
}
.hud__time.tick{ color:var(--ink); }

.hud__btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--muted);
  padding:5px 0;
  position:relative;
  transition:color .3s var(--ease);
}
.hud__btn::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.hud__btn:hover{ color:var(--ink); }
.hud__btn:hover::after{ transform:scaleX(1); transform-origin:left; }
.hud__btn[aria-pressed="false"]{ color:#4a4842; text-decoration:line-through; }

/* ---------------- Sahne ---------------- */

.stage{
  height:calc(100dvh - var(--hud) - var(--hint));
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px, 34vw);
}

/* ---------------- Tahta ---------------- */

.boardzone{
  display:grid; place-items:center;
  padding:var(--pad);
  min-width:0; min-height:0;
}

.boardframe{
  position:relative;
  /* kare kalsın: hem sütun genişliğini hem kalan ekran yüksekliğini aş­ma */
  width:min(100%, calc(100dvh - var(--hud) - var(--hint) - var(--pad) * 2));
  aspect-ratio:1;
  box-shadow:0 0 0 1px var(--line), 0 30px 90px -40px #000;
}

.board{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
}

.sq{
  position:relative;
  display:grid; place-items:center;
  padding:0;
  transition:background-color .5s var(--ease), opacity .5s var(--ease);
  /* giriş koreografisi */
  opacity:0;
  transform:scale(.86);
  animation:sqIn .6s var(--ease) forwards;
  animation-delay:calc(var(--d) * 22ms);
}
@keyframes sqIn{ to{ opacity:1; transform:none; } }

.sq--l{ background:var(--sq-light); color:#141412; }
.sq--d{ background:var(--sq-dark);  color:var(--ink); }

/* kenar koordinatları */
.sq__coord{
  position:absolute;
  font-family:var(--mono); font-size:clamp(8px,.85vw,11px);
  letter-spacing:.05em;
  opacity:.42;
  pointer-events:none;
}
.sq__coord--r{ top:5%; left:7%; }
.sq__coord--f{ bottom:4%; right:7%; }

/* ziyaret sırası */
.sq__no{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(11px, 1.6vw, 20px);
  font-variant-numeric:tabular-nums;
  opacity:0; transform:scale(.7);
  transition:opacity .45s var(--ease), transform .45s var(--ease-hop);
  pointer-events:none;
}

.sq.is-used{ cursor:pointer; }
.sq.is-used.sq--l{ background:var(--sq-light-used); }
.sq.is-used.sq--d{ background:var(--sq-dark-used); }
.sq.is-used .sq__no{ opacity:.5; transform:none; }
.sq.is-used:hover .sq__no{ opacity:.95; }

/* olası hamleler */
.sq__dot{
  position:absolute;
  width:14%; height:14%;
  border-radius:50%;
  background:var(--accent);
  opacity:0; transform:scale(.2);
  transition:opacity .35s var(--ease), transform .45s var(--ease-hop);
  pointer-events:none;
}
.sq.is-open{ cursor:pointer; }
.sq.is-open .sq__dot{ opacity:1; transform:none; }
.sq.is-open::after{
  content:''; position:absolute; inset:0;
  background:var(--accent); opacity:0;
  transition:opacity .3s var(--ease);
}
.sq.is-open:hover::after{ opacity:.16; }
.sq.is-open:hover .sq__dot{ transform:scale(1.9); }

/* olası hamle kısayol rakamı */
.sq__key{
  position:absolute; top:6%; right:8%;
  font-family:var(--mono); font-size:clamp(8px,.85vw,11px); font-weight:700;
  color:var(--accent);
  opacity:0;
  transition:opacity .3s var(--ease);
  pointer-events:none;
}
.sq.is-open .sq__key{ opacity:.85; }

/* atın durduğu kare */
.sq.is-now{ box-shadow:inset 0 0 0 2px var(--accent); z-index:2; }
.sq.is-now .sq__no{ opacity:0; }

/* serbest mod */
body.free .sq:not(.is-used){ cursor:pointer; }
body.free .sq:not(.is-used):hover::after{ content:''; position:absolute; inset:0; background:var(--accent); opacity:.16; }

/* açılış: her kare seçilebilir */
body.opening .sq{ cursor:pointer; }
body.opening .sq:hover::after{ content:''; position:absolute; inset:0; background:var(--accent); opacity:.14; }

/* ---------------- İz ---------------- */

.trail{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:3;
  opacity:.72;
  mix-blend-mode:normal;
}
#izCizgi{ stroke-width:2px; }

/* ---------------- At ---------------- */

.knight{
  position:absolute; top:0; left:0;
  width:12.5%; height:12.5%;
  z-index:4;
  pointer-events:none;
  opacity:0;
  transition:transform .46s var(--ease), opacity .4s var(--ease);
}
.knight.on{ opacity:1; }

.knight__in{
  width:100%; height:100%;
  display:grid; place-items:center;
}
.knight__in svg{
  width:84%; height:84%;
  overflow:visible;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
/* taş bir tipografik işaret: satranç atı karakteri, SVG içinde ölçeklenir */
.knight__in text{
  font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2','DejaVu Sans',serif;
  font-size:92px;
  fill:var(--accent);
}
.knight.hop .knight__in{ animation:hop .46s var(--ease); }
@keyframes hop{
  0%   { transform:translateY(0) scale(1); }
  45%  { transform:translateY(-24%) scale(1.16); }
  100% { transform:translateY(0) scale(1); }
}

/* ---------------- Panel ---------------- */

.panel{
  border-left:1px solid var(--line);
  padding:clamp(20px, 3vw, 46px) clamp(20px, 3vw, 44px);
  display:flex; align-items:center;
  overflow-y:auto;
  min-width:0;
}

.panel__inner{ width:100%; }
.panel__inner.swap{ animation:swapIn .55s var(--ease); }
@keyframes swapIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

.panel__eyebrow{
  margin:0 0 clamp(16px,2.4vw,26px);
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
}
.panel__eyebrow .sq{
  background:var(--accent); color:#0c0c0c;
  padding:3px 7px; font-weight:700;
  /* .sq sınıfı tahtayla çakışmasın */
  position:static; display:inline-block; animation:none; opacity:1; transform:none;
}
.panel__eyebrow .cat{ color:var(--muted); }

.panel__title{
  margin:0 0 clamp(14px,2vw,22px);
  font-size:clamp(34px, 4.6vw, 62px);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.panel__body{
  margin:0;
  font-size:clamp(15px, 1.15vw, 18px);
  line-height:1.62;
  color:#c4c0b6;
  max-width:38ch;
}

.panel__note{
  margin:clamp(18px,2.6vw,30px) 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--muted);
  max-width:40ch;
}

/* ---------------- Alt ipucu ---------------- */

.hint{
  height:var(--hint);
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid var(--line);
  padding:0 16px;
}
.hint p{
  margin:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--muted);
  text-align:center;
}
.key{
  display:inline-block;
  padding:1px 5px;
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:2px;
}

/* ---------------- Perde ---------------- */

.veil{
  position:fixed; inset:0; z-index:20;
  display:grid; place-items:center;
  background:rgba(12,12,12,.93);
  padding:24px;
  animation:veilIn .5s var(--ease);
}
@keyframes veilIn{ from{ opacity:0; } to{ opacity:1; } }
.veil[hidden]{ display:none; }

.veil__card{
  max-width:52ch; width:100%;
  text-align:center;
  max-height:92dvh; overflow-y:auto;
  padding:4px;
}

.veil__eyebrow{
  margin:0 0 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  color:var(--accent);
}
.veil__title{
  margin:0 0 16px;
  font-size:clamp(32px,5vw,58px); font-weight:800;
  line-height:.96; letter-spacing:-.03em;
}
.veil__body{
  margin:0 0 clamp(26px,4vw,38px);
  color:#c4c0b6; font-size:16px; line-height:1.6;
}
.veil__acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* sonuç istatistikleri */
.stats{
  margin:0 0 clamp(20px,3vw,30px);
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stats[hidden]{ display:none; }
.stats > div{ padding:14px 6px; }
.stats > div + div{ border-left:1px solid var(--line); }
.stats dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--muted); margin-bottom:6px;
}
.stats dd{
  margin:0;
  font-family:var(--mono); font-weight:700; font-size:clamp(18px,2.4vw,24px);
  font-variant-numeric:tabular-nums;
}
.stats dd.hot{ color:var(--accent); }

/* isim alanı */
.save{ margin:0 0 clamp(18px,2.6vw,26px); }
.save[hidden]{ display:none; }
.save__lbl{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--muted);
}
.save__inp{
  width:100%;
  background:none; border:none; border-bottom:1px solid var(--line);
  padding:8px 0;
  font-family:var(--mono); font-size:16px; letter-spacing:.14em;
  text-align:center; text-transform:uppercase;
  color:var(--ink);
  transition:border-color .3s var(--ease);
}
.save__inp::placeholder{ color:#413f3a; }
.save__inp:focus{ outline:none; border-color:var(--accent); }

/* sıralama listesi */
.rank{
  list-style:none; margin:0 0 clamp(20px,3vw,30px); padding:0;
  text-align:left;
}
.rank:empty{ display:none; }
.rank li{
  display:grid;
  grid-template-columns:2.4em minmax(0,1fr) auto 2.6em 3.4em;
  gap:10px; align-items:baseline;
  padding:9px 4px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.rank li:first-child{ border-top:1px solid var(--line); }
.rank__ad{
  color:var(--ink); letter-spacing:.1em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rank__gun{ color:#4f4d47; font-size:11px; }
.rank__kare{ color:var(--ink); font-weight:700; text-align:right; }
.rank li.me{ color:var(--accent); }
.rank li.me .rank__ad,
.rank li.me .rank__kare{ color:var(--accent); }
.rank li.tam .rank__kare::after{
  content:'●'; font-size:7px; vertical-align:middle; margin-left:5px; color:var(--accent);
}
.rank li.rank__bos{
  display:block;
  padding:16px 4px;
  border-top:1px solid var(--line);
  font-size:11px; color:var(--muted); text-align:center;
}

.btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  padding:12px 18px;
  border:1px solid var(--line);
  color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.btn:hover{ color:var(--ink); border-color:var(--muted); }
.btn--solid{ background:var(--accent); color:#0c0c0c; border-color:var(--accent); font-weight:700; }
.btn--solid:hover{ background:#ff6146; border-color:#ff6146; color:#0c0c0c; }

/* ---------------- Responsive ---------------- */

@media (max-width: 980px){
  body{ overflow:auto; }
  .stage{
    height:auto;
    grid-template-columns:1fr;
  }
  .boardzone{ padding:18px; }
  .boardframe{ width:100%; }
  .panel{
    border-left:none; border-top:1px solid var(--line);
    align-items:flex-start;
    padding:26px 20px 40px;
  }
  .panel__body{ max-width:none; }
  .hint{ position:sticky; bottom:0; background:var(--bg); }
  .hint p .key{ display:none; }
}

@media (max-width: 560px){
  .hud__btn{ font-size:10px; }
  .sq__key{ display:none; }
  .rank li{ grid-template-columns:2.2em minmax(0,1fr) 2.6em 3.4em; }
  .rank__gun{ display:none; }
  .hud__time{ padding-left:10px; }
}

/* ---------------- Erişilebilirlik ---------------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .sq{ opacity:1; transform:none; }
}