@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

#kp-root{
  --bg:      #0d1117;
  --surf:    #161b22;
  --surf2:   #21262d;
  --bdr:     #30363d;
  --teal:    #00b4d8;
  --gold:    #d4af37;
  --lt-sq:   #e8d5b0;
  --dk-sq:   #7c5a2e;
  --off-sq:  #141a21;
  --txt:     #e6edf3;
  --txt2:    #8b949e;
  --hl:      rgba(0,230,120,.35);
  --hl-bdr:  #00e676;
  --cell:    100px;
  --piece:   calc(var(--cell) * .82);
  --piece-f: calc(var(--cell) * .56);
}

#kp-root,#kp-root *{box-sizing:border-box;margin:0;padding:0;}

#kp-root{
  font-family:'Inter',sans-serif;
  color:var(--txt);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px;
  touch-action:none;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.kp-wrap{
  display:flex;
  gap:28px;
  align-items:flex-start;
  width:100%;
  max-width:1160px;
}
.kp-board-area{
  flex:0 0 auto;
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:14px;
  padding:24px 24px 16px;
}
.kp-panel{flex:0 1 360px;min-width:260px;margin-left:auto;}

/* ── Header ─────────────────────────────────────────────────────── */
.kp-header{margin-bottom:28px;}
.kp-title{
  display:block;
  font-family:'Playfair Display',Georgia,serif;
  font-size:2.2rem;font-weight:700;
  color:var(--gold);line-height:1;letter-spacing:-.5px;
}
.kp-title em{font-style:italic;color:var(--teal);}
.kp-sub{display:block;font-size:.8rem;color:var(--txt2);margin-top:5px;}

/* ── Board ──────────────────────────────────────────────────────── */
.kp-left{flex:0 0 auto;display:flex;gap:6px;align-items:flex-start;}
.kp-board-col{display:flex;flex-direction:column;}
.kp-row-axis{
  display:flex;flex-direction:column;
  padding-top:2px; /* tahta border offset */
}
.kp-row-axis span{
  height:var(--cell);width:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-family:'IBM Plex Mono',monospace;
  color:var(--txt2);
}
.kp-board{
  display:grid;
  grid-template-columns:repeat(5,var(--cell));
  grid-template-rows:repeat(5,var(--cell));
  touch-action:none;
  border:2px solid var(--bdr);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 0 0 4px var(--surf),0 0 0 6px var(--bdr),0 12px 40px rgba(0,0,0,.6);
}
.kp-col-axis{
  display:flex;
  margin-top:6px;
  padding-left:0; /* board-col handles alignment */
}
.kp-col-axis span{
  width:var(--cell);
  text-align:center;
  font-size:.72rem;
  font-family:'IBM Plex Mono',monospace;
  color:var(--txt2);
}

/* ── Cells ──────────────────────────────────────────────────────── */
.kp-cell{position:relative;display:flex;align-items:center;justify-content:center;}
.kp-off{background:var(--off-sq);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,transparent 0 8px);}
.kp-lt{background:var(--lt-sq);}
.kp-dk{background:var(--dk-sq);}
.kp-hl{background:var(--hl)!important;outline:2px inset var(--hl-bdr);cursor:pointer;}
.kp-hl::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(0,230,120,.45) 0%,transparent 70%);pointer-events:none;animation:kp-pulse 1.1s ease-in-out infinite;}
@keyframes kp-pulse{0%,100%{opacity:.5;}50%{opacity:1;}}


/* ── Pieces ─────────────────────────────────────────────────────── */
.kp-piece{
  width:var(--piece);height:var(--piece);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--piece-f);line-height:1;
  border-radius:50%;
  cursor:grab;
  user-select:none;
  touch-action:none;
  transition:transform .12s,filter .12s;
  position:relative;z-index:1;
}
.kp-piece:hover{transform:scale(1.12) translateY(-3px);}
.kp-piece:active{cursor:grabbing;}
.kp-bk,.kp-bn{color:#080808;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));}
.kp-wk,.kp-wn{
  color:#ffffff;
  filter:
    drop-shadow(0 0 1px #000)
    drop-shadow(0 0 2px rgba(0,0,0,.9))
    drop-shadow(0 2px 6px rgba(0,0,0,.8));
}
.kp-bk{filter:drop-shadow(0 0 8px rgba(0,180,216,.8)) drop-shadow(0 2px 6px rgba(0,0,0,.7));}
.kp-wk{
  filter:
    drop-shadow(0 0 1px #000)
    drop-shadow(0 0 2px rgba(0,0,0,.9))
    drop-shadow(0 0 10px rgba(212,175,55,.9))
    drop-shadow(0 2px 6px rgba(0,0,0,.8));
}

/* ── Panel ──────────────────────────────────────────────────────── */
.kp-panel{
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:12px;
  padding:24px;
  display:flex;flex-direction:column;gap:20px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}

/* Stats */
.kp-stats{display:flex;gap:10px;}
.kp-stat{flex:1;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;padding:12px 8px;text-align:center;}
.kp-sl{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.8px;color:var(--txt2);margin-bottom:5px;}
.kp-sv{display:block;font-family:'IBM Plex Mono',monospace;font-size:1.4rem;font-weight:500;color:var(--txt);}
.kp-gold{color:var(--gold)!important;}
.kp-teal{color:var(--teal)!important;}

/* Buttons */
.kp-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.kp-btn{
  padding:10px 12px;
  border:1px solid var(--bdr);border-radius:7px;
  background:var(--surf2);color:var(--txt);
  font-size:.82rem;font-family:'Inter',sans-serif;font-weight:500;
  cursor:pointer;transition:background .13s,border-color .13s,transform .1s;
  white-space:nowrap;text-align:center;
}
.kp-btn:hover{background:var(--bdr);border-color:var(--txt2);transform:translateY(-1px);}
.kp-btn:active{transform:translateY(0);}
.kp-btn-gold{grid-column:1/-1;border-color:var(--gold);color:var(--gold);}
.kp-btn-gold:hover{background:rgba(212,175,55,.12);}
.kp-btn-teal{background:var(--teal);border-color:var(--teal);color:#000;font-weight:600;}
.kp-btn-teal:hover{background:#0096c7;border-color:#0096c7;}
.kp-btn-ghost{background:transparent;border-color:var(--bdr);color:var(--txt2);font-size:.75rem;width:100%;margin-top:6px;}

/* Legend */
.kp-legend{font-size:.76rem;color:var(--txt2);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.kp-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.kp-dot-b{background:#0a0a0a;border:1px solid var(--teal);box-shadow:0 0 4px var(--teal);}
.kp-dot-w{background:#f5f5f0;border:1px solid var(--gold);box-shadow:0 0 4px var(--gold);}

/* History */
.kp-hist-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.8px;color:var(--txt2);}
.kp-hist{list-style:none;overflow-y:auto;max-height:200px;display:flex;flex-direction:column;gap:2px;padding-right:4px;}
.kp-hist::-webkit-scrollbar{width:3px;}
.kp-hist::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.kp-hist li{font-family:'IBM Plex Mono',monospace;font-size:.69rem;padding:3px 8px;border-radius:4px;color:var(--txt2);}
.kp-hist li:first-child{background:var(--surf2);border:1px solid var(--bdr);color:var(--txt);}
.kp-hist li.bl::before{content:'♚ ';color:var(--teal);}
.kp-hist li.wh::before{content:'♔ ';color:var(--gold);}

/* ── Modals ─────────────────────────────────────────────────────── */
.kp-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:10000;align-items:center;justify-content:center;}
.kp-backdrop.open{display:flex;animation:kp-fi .2s ease;}
@keyframes kp-fi{from{opacity:0;}to{opacity:1;}}
.kp-modal{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:32px 28px;max-width:420px;width:90%;box-shadow:0 24px 64px rgba(0,0,0,.8);animation:kp-su .22s ease;}
@keyframes kp-su{from{transform:translateY(18px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.kp-mt{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--gold);text-align:center;margin-bottom:16px;}
.kp-ms{display:flex;gap:24px;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;color:var(--teal);margin-bottom:20px;}
.kp-mr{display:flex;gap:8px;margin-bottom:0;}
.kp-input{flex:1;background:var(--surf2);border:1px solid var(--bdr);border-radius:7px;padding:10px 12px;color:var(--txt);font-size:.9rem;font-family:'Inter',sans-serif;outline:none;transition:border-color .13s;}
.kp-input:focus{border-color:var(--teal);}
.kp-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.kp-table th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--bdr);color:var(--txt2);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;}
.kp-table td{padding:8px 10px;border-bottom:1px solid rgba(48,54,61,.4);font-family:'IBM Plex Mono',monospace;color:var(--txt2);}
.kp-table tr.top td{color:var(--gold);}
.kp-empty{text-align:center;color:var(--txt2);padding:20px!important;}

/* ── Responsive ─────────────────────────────────────────────────── */
@media(max-width:920px){
  #kp-root{
    --cell: clamp(54px, calc((100vw - 48px) / 5), 100px);
    --piece: calc(var(--cell) * .82);
    --piece-f: calc(var(--cell) * .56);
  }
  .kp-wrap{flex-direction:column;align-items:center;}
  .kp-board-area{width:100%;}
  .kp-header{text-align:center;}
  .kp-panel{width:100%;max-width:520px;margin-left:0;flex:0 0 auto;}
}
@media(max-width:560px){
  .kp-title{font-size:1.6rem;}
}