*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
  background:linear-gradient(135deg,#f5f0e8 0%,#e8dcc3 100%);
  min-height:100vh;display:flex;justify-content:center;align-items:center;padding:12px;
}
#app{display:flex;flex-direction:column;align-items:center;gap:10px;user-select:none;width:100%;max-width:640px;}
#header{text-align:center;}
#header h1{font-size:26px;color:#4a3520;letter-spacing:6px;font-weight:700;}
#info{margin-top:6px;font-size:17px;color:#5c3a21;min-height:26px;font-weight:600;transition:color 0.3s;}
#info.win{color:#1a7a1a;}
#info.lose{color:#b01010;}
#info.draw{color:#7a5a10;}
#sub-status{margin-top:2px;font-size:12px;color:#8a7355;letter-spacing:1px;min-height:16px;}

.ctrl-row{display:flex;align-items:center;gap:8px;font-size:14px;color:#4a3520;font-weight:600;flex-wrap:wrap;justify-content:center;}
select.wood{
  padding:5px 28px 5px 10px;font-size:14px;font-family:inherit;
  border:2px solid #6b4226;background-color:#e8c882;color:#4a3520;
  border-radius:6px;cursor:pointer;font-weight:600;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0 L5 6 L10 0 Z' fill='%234a3520'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
select.wood:focus{outline:none;box-shadow:0 0 2px rgba(107,66,38,0.35);}
input[type=range]{
  -webkit-appearance:none;appearance:none;height:6px;border-radius:5px;
  background:#c9a15a;outline:none;width:120px;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:#6b4226;cursor:pointer;
}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#6b4226;border:none;cursor:pointer;}

#board-wrapper{display:flex;justify-content:center;align-items:center;}
#board{
  position:relative;background:#dcb35c;
  border:2px solid #6b4226;border-radius:4px;
  box-shadow:3px 3px 12px rgba(0,0,0,0.28),inset 0 0 28px rgba(0,0,0,0.09);
  touch-action:manipulation;
}
.grid-line{position:absolute;background:#3a2410;pointer-events:none;}
.star-point{position:absolute;width:8px;height:8px;background:#3a2410;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2;}
.coord-label{position:absolute;color:#5a3512;pointer-events:none;font-weight:700;opacity:0.55;z-index:3;line-height:1;text-align:center;transform:translate(-50%,-50%);}

.stone{position:absolute;border-radius:50%;z-index:10;transform:translate(-50%,-50%);}
.stone-b{background:radial-gradient(circle at 34% 34%,#777,#000 72%);box-shadow:1px 2px 4px rgba(0,0,0,0.6);}
.stone-w{background:radial-gradient(circle at 34% 34%,#fff,#cfcfcf 78%);box-shadow:1px 2px 4px rgba(0,0,0,0.35);border:0.5px solid #aaa;}
@keyframes stone-drop{0%{transform:translate(-50%,-50%) scale(0.3);opacity:0.4;}70%{transform:translate(-50%,-50%) scale(1.1);opacity:1;}100%{transform:translate(-50%,-50%) scale(1);opacity:1;}}
.stone-new{animation:stone-drop 0.18s cubic-bezier(.34,1.3,.64,1) forwards;}

.last-marker{position:absolute;z-index:11;border-radius:50%;background:rgba(220,40,40,0.92);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 5px rgba(220,40,40,0.75);}
.win-marker{position:absolute;z-index:12;border-radius:50%;background:rgba(30,190,30,0.88);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 7px rgba(30,190,30,0.85);animation:win-pulse 0.85s ease-in-out infinite alternate;}
@keyframes win-pulse{from{opacity:0.7;transform:translate(-50%,-50%) scale(0.88);}to{opacity:1;transform:translate(-50%,-50%) scale(1.12);}}

#hit-layer{position:absolute;left:0;top:0;z-index:20;cursor:pointer;}

#controls{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap;justify-content:center;}
#controls button,#ai-ctrl button{
  padding:9px 20px;font-size:15px;font-family:inherit;
  border:2px solid #6b4226;background:#e8c882;color:#4a3520;
  border-radius:8px;cursor:pointer;
  transition:background 0.15s,box-shadow 0.15s,transform 0.1s;
  letter-spacing:1px;font-weight:600;touch-action:manipulation;
}
#controls button:hover,#ai-ctrl button:hover{background:#d4b06a;box-shadow:0 2px 8px rgba(0,0,0,0.14);}
#controls button:active,#ai-ctrl button:active{transform:scale(0.96);}
#controls button:disabled,#ai-ctrl button:disabled{opacity:0.42;cursor:not-allowed;transform:none;box-shadow:none;}
#ai-ctrl{display:none;gap:10px;justify-content:center;}

#stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:2px;}
.stat{background:#fff8ec;border:1px solid #d8bd8a;border-radius:8px;padding:6px 12px;text-align:center;min-width:64px;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.stat .v{font-size:18px;font-weight:700;color:#6b4226;}
.stat .l{font-size:11px;color:#8a7355;}

#victory{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden;}
.confetti{position:absolute;top:-20px;width:10px;height:10px;opacity:0;}
@keyframes fall{0%{transform:translateY(-40px) rotate(0);opacity:1;}100%{transform:translateY(105vh) rotate(720deg);opacity:0;}}

:fullscreen{background:linear-gradient(135deg,#f5f0e8 0%,#e8dcc3 100%);}
:-webkit-full-screen{background:linear-gradient(135deg,#f5f0e8 0%,#e8dcc3 100%);}
@media(max-width:480px){
  #header h1{font-size:22px;}
  #info{font-size:15px;}
  #controls button,#ai-ctrl button{padding:8px 14px;font-size:13px;}
}