:root{
    --bg:#262421; --panel:#302e2b; --panel2:#3b3936; --text:#e8e6e3; --dim:#9e9c99;
    --light:#f0d9b5; --dark:#b58863; --accent:#81b64c; --accent2:#5d9948;
    --sel:rgba(255,255,80,.45); --last:rgba(155,199,0,.41); --chk:rgba(255,60,60,.6);
    --bs:min(94vw, calc(100vh - 150px), 640px);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,-apple-system,sans-serif; min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:16px; gap:18px; flex-wrap:wrap;}
  #boardWrap{position:relative;}
  #board{width:var(--bs); height:var(--bs); display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); border-radius:6px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.5); user-select:none;}
  .cell{position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .cell.light{background:var(--light);} .cell.dark{background:var(--dark);}
  .cell.sel{box-shadow:inset 0 0 0 999px var(--sel);}
  .cell.last{box-shadow:inset 0 0 0 999px var(--last);}
  .cell.check{background:radial-gradient(circle, var(--chk) 30%, transparent 75%), var(--cellbg);}
  .cell.check.light{background:radial-gradient(circle, var(--chk) 25%, transparent 80%), var(--light);}
  .cell.check.dark{background:radial-gradient(circle, var(--chk) 25%, transparent 80%), var(--dark);}
  .cell.hint::after{content:''; position:absolute; width:30%; height:30%; border-radius:50%; background:rgba(20,20,20,.25);}
  .cell.caphint::after{content:''; position:absolute; inset:4%; border-radius:50%; border:calc(var(--bs)/90) solid rgba(20,20,20,.28); background:none; width:auto; height:auto;}
  .pc{font-size:calc(var(--bs)/8*.76); line-height:1; pointer-events:none; z-index:1;}
  .wp{color:#f9f9f9; text-shadow:0 0 2px #444, 0 2px 3px rgba(0,0,0,.45);}
  .bp{color:#211f1c; text-shadow:0 0 2px rgba(255,255,255,.25), 0 2px 3px rgba(0,0,0,.35);}
  .coord{position:absolute; font-size:calc(var(--bs)/48); font-weight:700; pointer-events:none; opacity:.85;}
  .coord.rank{top:3%; left:5%;} .coord.file{bottom:2%; right:6%;}
  .light .coord{color:var(--dark);} .dark .coord{color:var(--light);}
  #panel{width:300px; max-width:94vw; background:var(--panel); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:0 6px 24px rgba(0,0,0,.4);}
  h1{font-size:20px; letter-spacing:.5px;}
  .row{display:flex; gap:8px; align-items:center;}
  .row label{width:52px; color:var(--dim); font-size:13px;}
  select{flex:1; background:var(--panel2); color:var(--text); border:1px solid #4a4844; border-radius:6px; padding:7px 8px; font-size:14px; cursor:pointer;}
  button{background:var(--panel2); color:var(--text); border:none; border-radius:6px; padding:9px 10px; font-size:14px; cursor:pointer; font-weight:600;}
  button:hover{filter:brightness(1.15);}
  button.primary{background:var(--accent); color:#fff; box-shadow:0 3px 0 var(--accent2);}
  .btns{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  #newBtn{grid-column:1 / -1;}
  #status{background:var(--panel2); border-radius:6px; padding:10px 12px; font-size:15px; font-weight:600; min-height:42px; display:flex; align-items:center; gap:8px;}
  #status.over{background:var(--accent); color:#fff;}
  .spin{width:14px; height:14px; border:2px solid rgba(255,255,255,.25); border-top-color:var(--text); border-radius:50%; animation:sp .8s linear infinite; flex:none;}
  @keyframes sp{to{transform:rotate(360deg);}}
  #moves{background:var(--panel2); border-radius:6px; padding:8px 10px; height:180px; overflow-y:auto; font-size:13.5px; font-family:ui-monospace,Consolas,monospace; line-height:1.7;}
  #moves .num{color:var(--dim); margin-right:4px;}
  #moves span.mv{margin-right:10px;}
  .capRow{font-size:13px; color:var(--dim); display:flex; align-items:center; gap:6px; min-height:20px;}
  .capRow .pcs{font-size:18px; color:var(--text); letter-spacing:1px;}
  .capRow .adv{color:var(--accent); font-weight:700;}
  #promo{position:absolute; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:10; border-radius:6px;}
  #promo .box{background:var(--panel); border-radius:10px; padding:14px; display:flex; gap:10px;}
  #promo button{font-size:calc(var(--bs)/10); width:calc(var(--bs)/7); height:calc(var(--bs)/7); display:flex; align-items:center; justify-content:center; background:var(--panel2);}
  .hintTxt{font-size:12px; color:var(--dim);}