*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1a2e;--board-bg: #DEB887;--board-line: #8B4513;--black-stone: #1a1a1a;--white-stone: #f5f5f5;--accent: #e07b39;--text: #f0e6d3;--text-muted: #a0947a;--danger: #c0392b;--success: #27ae60}body{background:var(--bg);color:var(--text);font-family:Inter,Noto Sans SC,sans-serif;min-height:100vh;display:flex;justify-content:center}.app{width:100%;max-width:600px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px}.header{text-align:center}.header h1{font-family:"Noto Serif SC",serif;font-size:2rem;color:var(--text);letter-spacing:.1em}.subtitle{font-size:.75rem;color:var(--text-muted);letter-spacing:.3em;text-transform:uppercase}.mode-selector{display:flex;gap:8px}.mode-btn{padding:8px 20px;border:2px solid var(--accent);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:.9rem;transition:all .2s}.mode-btn.active{background:var(--accent);color:#fff}.mode-btn:hover:not(.active){border-color:var(--text)}.difficulty-selector{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.diff-btn{padding:5px 12px;border:1px solid var(--text-muted);border-radius:20px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.8rem;transition:all .2s}.diff-btn.active{border-color:var(--accent);color:var(--accent);background:#e07b391a}.diff-btn:hover:not(.active){color:var(--text);border-color:var(--text)}.status-bar{display:flex;justify-content:space-between;width:100%;padding:8px 16px;background:#ffffff0d;border-radius:8px;font-size:.9rem}.thinking{color:var(--accent);animation:pulse 1s infinite}.winner-text{color:var(--success);font-weight:700}.replay-hint{color:var(--text-muted);font-style:italic}.board-wrapper{padding:12px;background:var(--board-bg);border-radius:8px;box-shadow:0 4px 20px #00000080,inset 0 2px 4px #ffffff1a}.board{position:relative;width:calc(var(--cell-size) * (14));height:calc(var(--cell-size) * (14));background:var(--board-bg);background-image:linear-gradient(var(--board-line) 1px,transparent 1px),linear-gradient(90deg,var(--board-line) 1px,transparent 1px);background-size:var(--cell-size) var(--cell-size);cursor:pointer;-webkit-user-select:none;user-select:none}.grid-line{position:absolute;background:var(--board-line);pointer-events:none}.grid-line.horizontal{width:100%;height:1px}.grid-line.vertical{height:100%;width:1px}.star-point{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--board-line);transform:translate(-50%,-50%);pointer-events:none}.stone{position:absolute;width:calc(var(--cell-size) - 4px);height:calc(var(--cell-size) - 4px);border-radius:50%;transform:translate(-50%,-50%);transition:transform .15s ease-out;animation:placeStone .15s ease-out}.stone.black{background:radial-gradient(circle at 35% 35%,#4a4a4a,var(--black-stone));box-shadow:2px 2px 4px #00000080,inset -1px -1px 2px #ffffff1a}.stone.white{background:radial-gradient(circle at 35% 35%,#fff,#d0d0d0);box-shadow:2px 2px 4px #0000004d,inset -1px -1px 2px #0000000d}.stone.last-move{box-shadow:2px 2px 4px #00000080,0 0 0 3px var(--accent),0 0 12px #e07b3980}.stone.winner-stone{box-shadow:0 0 0 4px var(--success),0 0 16px #27ae6099}.action-buttons{display:flex;gap:12px}.action-btn{padding:8px 16px;border:1px solid var(--text-muted);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;font-size:.85rem;transition:all .2s}.action-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn.undo:hover:not(:disabled){border-color:#e74c3c;color:#e74c3c}.stats{display:flex;gap:20px;font-size:.85rem;color:var(--text-muted)}.stats span{display:flex;align-items:center;gap:4px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}.modal{background:#2a2a3e;border-radius:16px;padding:32px 40px;text-align:center;max-width:320px;width:90%;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease}.modal h2{font-size:1.5rem;margin-bottom:8px;color:var(--success)}.modal p{color:var(--text-muted);margin-bottom:20px}.modal-buttons{display:flex;flex-direction:column;gap:8px}.modal-btn{padding:10px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s;border:none}.modal-btn.primary{background:var(--accent);color:#fff}.modal-btn.primary:hover{background:#c96a2d}.modal-btn.secondary{background:#ffffff1a;color:var(--text)}.modal-btn.secondary:hover{background:#ffffff26}.history{width:100%;margin-top:8px}.history h3{font-size:.9rem;color:var(--text-muted);margin-bottom:8px;text-align:center}.history-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffff0d;border-radius:6px;cursor:pointer;font-size:.8rem;color:var(--text-muted);transition:background .2s}.history-item:hover{background:#ffffff1a}.history-item .result{margin-left:auto;font-weight:700}.history-item .black-win{color:var(--black-stone)}.history-item .white-win{color:#aaa}.replay-controls{display:flex;gap:12px}@keyframes placeStone{0%{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media(max-width:480px){.app{padding:8px}.status-bar{font-size:.8rem;padding:6px 10px}.stats{font-size:.75rem;gap:12px}}