*{box-sizing:border-box}html,body{margin:0;padding:0}body{color:#e5e9f0;background:radial-gradient(circle at 50% 0,#2c3448,#171b26 70%);min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif}#root{justify-content:center;align-items:center;min-height:100vh;display:flex}.app{flex-direction:column;align-items:center;gap:18px;width:min(94vw,640px);padding:24px 0 32px;display:flex}.header{text-align:center}.header h1{letter-spacing:12px;text-indent:12px;margin:0;font-size:34px}.header p{color:#8b95ab;letter-spacing:2px;margin:6px 0 0;font-size:14px}.status{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:10px;padding:8px 18px;font-size:16px;display:flex}.status.over{background:#4ade801f;border-color:#4ade8073}.mini-stone{border-radius:50%;flex-shrink:0;width:18px;height:18px}.mini-stone.black{background:radial-gradient(circle at 35% 30%,#667085,#14161c 60%)}.mini-stone.white{background:radial-gradient(circle at 35% 30%,#fff,#d7dbe3 70%);box-shadow:inset 0 -2px 3px #0000002e}.board{--line-c:#3e2812bf;aspect-ratio:1;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#e9bd72,#d9a05b 45%,#c8904a);border-radius:10px;grid-template-columns:repeat(15,1fr);width:min(94vw,600px);display:grid;box-shadow:0 18px 40px #00000080,inset 0 2px 6px #ffffff59}.cell{cursor:pointer;-webkit-tap-highlight-color:transparent;background-color:#0000;background-image:linear-gradient(to bottom, transparent calc(50% - 1px), var(--line-c) calc(50% - 1px), var(--line-c) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, transparent calc(50% - 1px), var(--line-c) calc(50% - 1px), var(--line-c) calc(50% + 1px), transparent calc(50% + 1px));border:0;padding:0;position:relative}.cell:disabled{cursor:default}.stone{z-index:2;border-radius:50%;animation:.14s ease-out drop;position:absolute;inset:7%}@keyframes drop{0%{opacity:.4;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.cell.black .stone{background:radial-gradient(circle at 35% 30%,#6b7280,#171920 60%,#000);box-shadow:0 2px 4px #00000073}.cell.white .stone{background:radial-gradient(circle at 35% 30%,#fff,#e8ebf1 60%,#c9cedb);box-shadow:0 2px 4px #0000004d,inset -2px -3px 6px #00000026}.cell.star:before{content:"";background:var(--line-c);z-index:1;border-radius:50%;width:20%;height:20%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cell.last .stone:after{content:"";background:#ef4444;border-radius:50%;width:26%;height:26%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cell.white.last .stone:after{background:#b91c1c}.cell.won .stone{animation:1s ease-in-out infinite pulse;box-shadow:0 0 0 2.5px #4ade80f2,0 0 14px 3px #4ade8099}@keyframes pulse{0%,to{filter:brightness()}50%{filter:brightness(1.25)}}.board[data-turn=black] .cell:not(.black):not(.white):hover:after,.board[data-turn=white] .cell:not(.black):not(.white):hover:after{content:"";z-index:1;border-radius:50%;position:absolute;inset:7%}.board[data-turn=black] .cell:not(.black):not(.white):hover:after{background:#14161e66}.board[data-turn=white] .cell:not(.black):not(.white):hover:after{background:#ffffffa6;box-shadow:inset -1px -2px 4px #00000026}.controls{gap:14px;display:flex}.btn{color:#e5e9f0;cursor:pointer;background:#ffffff12;border:1px solid #ffffff2e;border-radius:8px;padding:9px 26px;font-size:15px;transition:background .15s,transform 50ms}.btn:hover:not(:disabled){background:#ffffff24}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:#3b82f6;border-color:#0000}.btn.primary:hover:not(:disabled){background:#2f74e8}.hint{color:#8b95ab;letter-spacing:1px;margin:0;font-size:13px}