:root{
  --bg:#0b0d12; --panel:#121522; --panel-2:#171b2a; --text:#e9ecf1; --muted:#9aa3b2;
  --accent:#4f8cff; --danger:#ff6b6b; --square-light:#c7d0ea; --square-dark:#5d6a99; --hint:#97a5cc;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1c2140 0%,#0b0d12 60%, #06070c 100%);
  color:var(--text);
}
.hidden{display:none!important}
.wrap{max-width:1250px;margin:0 auto;padding:16px}
#board { position: relative; overflow: visible; }
#board .coords { position:absolute; pointer-events:none; color:rgba(255,255,255,.7); font:12px/1 system-ui, sans-serif; }
#board .coords.files { left:0; right:0; bottom:-18px; display:grid; grid-template-columns:repeat(var(--N),1fr); text-align:center; }
#board .coords.ranks { top:0; bottom:0; left:-18px; display:grid; grid-template-rows:repeat(var(--N),1fr); }
#board .coords.ranks span { display:flex; align-items:center; justify-content:center; }
/* header */
.site-header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(6,7,12,.9),rgba(6,7,12,.65));backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .wrap{display:flex;align-items:center;gap:16px}
.brand{font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:12px;margin-left:auto}
.nav-link{padding:8px 12px;border-radius:12px;color:var(--muted);text-decoration:none}
.nav-link.active{color:var(--text);background:var(--panel)}
.nav-link.muted{opacity:.6;cursor:not-allowed}

/* layout 3-kolumnowy */
.layout{display:grid;grid-template-columns:240px 1fr 340px;gap:16px}
@media (max-width:1100px){ .layout{grid-template-columns:1fr} .sidebar-left,.sidebar-right{order:2} .center{order:1} }

/* lewy sidebar */
.sidebar-left{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px;box-shadow:var(--shadow);height:fit-content}
.side-link{display:block;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none}
.side-link.active{background:#1f2540}
.side-link.muted{opacity:.6;cursor:not-allowed}
.side-small{color:var(--muted);font-size:.9rem}
.sidebar-left hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:10px 0}

/* przyciski */
.btn{border:none;cursor:pointer;border-radius:12px;padding:12px 16px;background:#2a3356;color:var(--text);transition:.15s transform ease,.15s filter ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.primary{background:linear-gradient(180deg,#5a7cff,#325bff);box-shadow:0 8px 20px rgba(79,140,255,.35);color:#fff}
.btn.block{width:100%}
.side-note{color:var(--muted);font-size:.9rem;margin:6px 0 4px}

/* środek */
.center{}
.status{color:var(--muted);margin:10px 0;text-align:center}
.board-wrap{position:relative;margin:10px auto 8px auto;max-width:min(92vw,740px)}
.board{
  width:100%; aspect-ratio:1/1; display:grid;
  grid-template-columns:repeat(var(--N,10),1fr); grid-template-rows:repeat(var(--N,10),1fr);
  border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow); background:linear-gradient(180deg,#2c3453,#1f2540); position:relative; isolation:isolate;
}
.board.disabled{pointer-events:none; filter:saturate(.92) brightness(.98)}
.board-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(60% 50% at 50% 45%, rgba(255,255,255,.06), rgba(0,0,0,.45));
  z-index:5;
}
.overlay-inner{background:rgba(18,21,34,.85); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; text-align:center; max-width:320px; width:90%; box-shadow:var(--shadow)}
.overlay-inner h3{margin:0 0 6px}
.overlay-inner p{margin:0 0 12px; color:var(--muted)}

.square{position:relative; display:flex; align-items:center; justify-content:center; user-select:none}
.square.light{background:linear-gradient(180deg,var(--square-light),#dde5ff)}
.square.dark{ background:linear-gradient(180deg,#485582,var(--square-dark))}
.square.sel{ outline:3px solid var(--accent); outline-offset:-3px }

/* KOORDYNATY */
.coord{
  position:absolute; font-size:12px; line-height:1; color:var(--muted);
  text-shadow:0 1px 1px rgba(0,0,0,.5); pointer-events:none;
}
.rank{ left:6px; top:6px; }
.file{ right:6px; bottom:6px; }

/* podpowiedzi */
.board .hint{
  position:absolute; top:50%; left:50%; width:24px; height:24px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, var(--hint));
  opacity:.9; pointer-events:none; z-index:2;
}
.board .hint.capture{ background:radial-gradient(circle at 30% 30%, #fff, var(--danger))}

/* pionki */
.piece{width:76%; height:76%; border-radius:999px; display:grid; place-items:center;
  box-shadow:inset 0 6px 10px rgba(255,255,255,.25), inset 0 -10px 16px rgba(0,0,0,.35), 0 10px 18px rgba(0,0,0,.35)}
.piece.white{background:radial-gradient(120% 120% at 26% 20%, #fff 0%, #e8ecff 35%, #cfd9ff 65%, #b5c2ff 100%); border:1px solid rgba(0,0,0,.06); color:#1b2342}
.piece.black{background:radial-gradient(120% 120% at 26% 20%, #5462a0 0%, #3c497c 35%, #2a355d 70%, #1d2544 100%); border:1px solid rgba(255,255,255,.06); color:#eef2ff}
.piece.king::after{content:"♚"; font-size:1.6rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.piece.white.king::after{content:"♔"}

/* legenda */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0;justify-content:center}
.legend-item{display:flex;align-items:center;gap:8px;color:var(--muted)}
.piece.demo{width:18px;height:18px;box-shadow:none}
.legend .hint{position:static; transform:none; display:inline-block; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--hint)); box-shadow:none; opacity:1; vertical-align:middle}
.legend .hint.capture{ background:radial-gradient(circle at 30% 30%, #fff, var(--danger))}
#btnClose{ width:auto; }

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:100}
.modal-content{background:var(--panel); border-radius:20px; padding:20px; width:min(90vw,360px); box-shadow:var(--shadow); text-align:center}
.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.modal-head h3 {
  margin:0;
  font-size:1.3rem;
  font-weight:600;
}

.modal-x {
  background:transparent;
  border:none;
  color:#fff;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  transition:color .2s;
}
.modal-x:hover {
  color:var(--accent);
}
#btnGameOverClose{
	width:auto !important;
}
.modal-content select{width:100%;margin:8px 0 12px 0; padding:10px;border-radius:12px;background:var(--panel-2);color:var(--text);border:1px solid rgba(255,255,255,.08)}
.modal-content button{width:100%;padding:12px;border-radius:12px;border:none;cursor:pointer;background:linear-gradient(180deg,#5a7cff,#325bff);color:#fff;font-weight:600}
.sr-only{position:absolute;left:-9999px}

/* modal końca gry */
#gameOverModal .modal-content { text-align:center; }
#gameOverModal h3 { margin-bottom:16px; font-size:1.5rem; }
#btnRestart {
  padding:12px 20px;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg,#5a7cff,#325bff);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
#btnRestart:hover { background:#325bff; }


/* prawy panel */
.sidebar-right{display:flex;flex-direction:column;gap:12px}
.panel-title{margin:0 0 4px 0; font-size:1.2rem; color:#fff}
.card{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow);
  position:relative;
}
.card.clickable{cursor:pointer; transition:.15s transform ease,.15s filter ease}
.card.clickable:hover{transform:translateY(-1px); filter:brightness(1.03)}
.card.disabled{opacity:.6; cursor:not-allowed}
.card-icon{font-size:1.4rem; width:34px; text-align:center}
.card-title{font-weight:700}
.card-sub{color:var(--muted); font-size:.95rem}
.badge{position:absolute; right:10px; top:10px; font-size:.75rem; background:#333b66; color:#cfe2ff; padding:4px 8px; border-radius:999px}