@import "https://fonts.googleapis.com/css2?family=Special+Elite&display=swap";.gomoku-container{text-align:center;flex-direction:column;align-items:center;width:100%;max-width:600px;padding:10px;display:flex}.board-container{justify-content:center;margin:10px 0;display:flex}.gomoku-board{touch-action:none;box-sizing:border-box;background:#e6d7be;border:3px solid #3d312a;grid-template-rows:repeat(12,28px);grid-template-columns:repeat(12,28px);max-width:95vw;padding:5px;display:grid;box-shadow:4px 4px #3d312a33}.cell{cursor:pointer;border:1px solid #3d312a40;justify-content:center;align-items:center;width:28px;height:28px;display:flex;position:relative}.cell:hover{background:#3d312a14}.piece{pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.piece.black{color:#1a1412;font-size:22px;transform:rotate(-6deg)}.piece.white{color:#6b584a;transform:rotate(8deg)}.piece.black:before,.piece.black:after{content:"";background-color:#1a1412;border-radius:2px;width:18px;height:3px;position:absolute}.piece.black:before{transform:rotate(45deg)}.piece.black:after{transform:rotate(-45deg)}.piece.white:before{content:"";box-sizing:border-box;border:3px solid #6b584a;border-radius:50%;width:16px;height:16px;position:absolute}#status-bar{margin:8px 0;font-size:15px;font-weight:700}h1{letter-spacing:2px;border-bottom:2px dashed #3d312a;margin:5px 0;padding-bottom:5px;font-size:24px}h3{color:#5c4a3d;margin:8px 0;font-size:16px;font-weight:700}#menu-section{border-radius:4px;max-width:400px;margin:20px auto;padding:5px}body{color:#2c221e;background:#c8ad88 url(/paper-texture.webp);flex-direction:column;align-items:center;margin:0;padding:20px;font-family:Special Elite,monospace,sans-serif;display:flex}.btn{cursor:pointer;color:#1a1412;-webkit-appearance:none;background:0 0;border:2px solid #3d312a;border-radius:4px;margin:5px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:700;transition:all .1s;box-shadow:2px 2px #3d312a}.btn:active{transform:translate(2px,2px);box-shadow:0 0 #3d312a}input{color:#3d312a;background:0 0;border:2px solid #3d312a;border-radius:4px;outline:none;padding:7px;font-family:inherit;font-size:14px;box-shadow:inset 1px 1px 3px #0000001a}input::placeholder{color:#7a6655;opacity:1}input::placeholder{color:#7a6655;opacity:1}input::placeholder{color:#7a6655;opacity:1}