body{font-family:Inter,Noto Sans JP,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f0f4f8;color:#334155}.board-container{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:90%;max-width:800px;aspect-ratio:1 / 1;background-color:#16a34a;border-radius:8px;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.cell{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:background-color .2s ease}.cell:hover{background-color:#0000001a}.cell.valid-move{background-color:#ffffff4d}.cell.valid-move:hover{background-color:#ffffff80}.piece{width:80%;height:80%;border-radius:50%;box-shadow:0 2px 4px #0003;transition:transform .3s ease-in-out}.piece.black{background-color:#1a202c}.piece.white{background-color:#f8fafc}.piece.flipping{animation:flip .3s forwards}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(180deg)}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 6px #0000001a;max-width:400px;width:90%;text-align:center}