@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}.game-header{text-align:center;width:100%;max-width:700px}#fop-header-menu-btn{padding:0}h1{letter-spacing:3px;border-bottom:2px dashed #3d312a;margin:0 0 10px;padding-bottom:5px;font-size:32px}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;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}.top-nav{justify-content:flex-end;align-items:center;gap:15px;width:100%;max-width:700px;margin-bottom:20px;display:flex;position:relative}.user-badge{cursor:pointer;background:0 0;font-size:13px;display:flex;border:none!important}.menu-btn{cursor:pointer;background:0 0;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex;border:none!important}.dropdown-menu{z-index:100;background:#e6d7be;border:2.5px solid #3d312a;border-radius:4px;flex-direction:column;width:160px;position:absolute;top:45px;right:0;box-shadow:4px 4px #3d312a4d}.dropdown-item{color:#2c221e;border-bottom:1px dashed #3d312a;padding:10px 15px;font-size:14px;text-decoration:none;display:block}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover,.dropdown-item:active{cursor:pointer;background-color:#3d312a14}.modal-overlay{z-index:1000;box-sizing:border-box;background-color:#3d312a99;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.modal-content{box-sizing:border-box;color:#3d312a;background:#e6d7be;border:3px solid #3d312a;flex-direction:column;width:100%;max-width:650px;max-height:85vh;padding:24px;font-family:inherit;display:flex;position:relative;box-shadow:6px 6px #3d312a4d}.modal-header-row{border-bottom:2px dashed #3d312a4d;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;display:flex}.modal-header-row h2{letter-spacing:1px;margin:0;font-size:20px}.modal-close-btn{cursor:pointer;-webkit-text-fill-color:#3d312a;appearance:none;background:#d1bfa0;border:2px solid #3d312a;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;font-weight:700;transition:transform .1s;display:flex;box-shadow:2px 2px #3d312a;color:#3d312a!important}.modal-close-btn:active{box-shadow:none;transform:translate(2px,2px)}.modal-body{text-align:left;padding-right:8px;font-size:14px;line-height:1.6;overflow-y:auto}.modal-body h3{margin-top:16px;margin-bottom:6px;font-size:16px}.modal-body p{margin:8px 0}.legend-panel{color:#2c221e;z-index:15;background:0 0;justify-content:center;gap:20px;width:fit-content;margin:0 auto;padding:6px 16px;font-size:14px;font-weight:700;display:flex;position:relative}.legend-item{align-items:center;gap:5px;display:flex}.legend-symbol{vertical-align:middle;justify-content:center;align-items:center;width:16px;height:16px;margin-right:4px;display:inline-flex;position:relative}.legend-symbol.red-cross{color:#a63f3f;font-size:20px;font-weight:700;transform:rotate(-8deg)}.legend-symbol.black-cross{color:#3d312a;font-size:20px;font-weight:700;transform:rotate(-6deg)}.legend-symbol.circle{font-size:0}.legend-symbol.circle:before{content:"";box-sizing:border-box;border:2.5px solid #5c4a3d;border-radius:50%;width:11px;height:11px;position:absolute;top:0}