:root{font-family:system-ui,Yu Gothic,sans-serif;color:#30291f;background:#f4eee3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}.app{max-width:1180px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;align-items:center;padding:12px 0 24px;border-bottom:1px solid #d3c5ae;color:#6c5c48}.brand{font-family:Georgia,serif;font-size:27px;font-weight:700;letter-spacing:.08em;color:#332a1f}.brand small{font:700 11px system-ui,sans-serif;letter-spacing:.25em;background:#744f36;color:#fff;padding:4px 7px;border-radius:4px}.lobby{max-width:880px;margin:40px auto}.lobby h1,.room-head h1{font-family:Georgia,Yu Mincho,serif;font-size:clamp(28px,4vw,42px);margin:0}.lobby p,.room-head p{color:#776b59}.lobby-grid,.table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px}.card{background:#fffaf1;border:1px solid #dfd1bd;border-radius:18px;padding:24px;box-shadow:0 5px 15px #33220d10}.card h2{font-size:18px;margin:0 0 22px}label{display:block;font-weight:700;margin:14px 0}select,input{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #cabcaa;border-radius:9px;background:#fff}button:not(.square-board button):not(.hex-cell):not(.pieces button){border:1px solid #bca78e;border-radius:9px;background:#f9f0df;padding:10px 14px;color:#3a2d21;font-weight:700}.primary{background:#9a5039!important;color:#fff!important;border-color:#9a5039!important;width:100%;margin-top:12px}.room-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:28px 0}.room-head strong{font:800 20px ui-monospace,monospace;letter-spacing:.12em;color:#9a5039}.table{grid-template-columns:minmax(0,620px) minmax(230px,1fr);align-items:start}.board-wrap{display:grid;justify-items:center;padding:22px;background:#584637;border-radius:18px;box-shadow:0 8px #3c2e25,0 14px 25px #29170c40;min-width:0}.square-board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));gap:3px;background:#3b3329;padding:6px;border-radius:9px}.square-board button{min-width:0;min-height:0;padding:0;border:0;border-radius:4px;background:linear-gradient(145deg,#d5ae79,#b68b58);display:grid;place-items:center}.square-board.reversi button,.square-board.holeReversi button{background:#436d51}.square-board.gomoku button{background:#d1aa6b;border-radius:0}.square-board.dropFour button{background:#315979}.square-board.isolation button{background:#d6af79}.square-board button.removed{background:#28251f}.square-board button:not(:disabled):hover{outline:3px solid #ffd370;z-index:1}.square-board button.last{box-shadow:inset 0 0 0 2px #ffda76}.stone{display:block;width:72%;aspect-ratio:1;border-radius:50%;box-shadow:1px 3px 4px #0007}.stone.side-1,.hex-cell.side-1{background:radial-gradient(circle at 35% 25%,#68747a,#15232c 70%)}.stone.side-2,.hex-cell.side-2{background:radial-gradient(circle at 35% 25%,#fff,#c5bdab 75%)}.dropFour .stone.side-1{background:#b44f43}.dropFour .stone.side-2{background:#d9ad43}.dot{width:18%;aspect-ratio:1;border-radius:50%;background:#e7ca86}.quarto{grid-template-columns:repeat(4,1fr);max-width:540px}.quarto-piece{width:65%;aspect-ratio:1;display:grid;place-items:center;border-radius:15%;background:#ead2a9;box-shadow:2px 3px #70472b;font-weight:800}.quarto-piece.dark{background:#66462c;color:#fff}.pieces{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;width:100%;margin-top:18px}.pieces button{border:1px solid #b58d5d;background:#ead2a9;border-radius:6px;padding:8px 0}.pieces button:disabled{opacity:.35}.hex-board{width:100%;display:grid;justify-items:center;gap:2px;padding:15px 0}.hex-row{display:flex;justify-content:center;gap:3px;width:100%}.hex-cell{width:10%;aspect-ratio:1;border:0;border-radius:50%;background:#786f61;box-shadow:inset 0 3px 4px #0006}.hex-cell.selected{outline:3px solid #f5c766}.directions{display:flex;gap:5px;margin-top:16px}.directions button{min-width:46px}.hint{font-size:13px;color:#81725d}.board-wrap .hint{color:#e6d1ae}.turn{font-size:22px;font-weight:800}.notice{margin-top:20px;background:#fff5dc;border:1px solid #dabf8d;padding:12px;border-radius:9px}.status button{margin-top:16px}@media(max-width:760px){.app{padding:12px}.lobby-grid,.table{grid-template-columns:1fr}.board-wrap{padding:10px}.room-head{align-items:flex-start;flex-direction:column}.hex-cell{width:9.6%}header span{display:none}}.checkbox{display:flex;align-items:center;gap:9px;font-weight:600}.checkbox input{width:18px;height:18px;margin:0}.public-rooms{margin-top:20px}.public-rooms ul{list-style:none;margin:0;padding:0}.public-rooms li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #e4d6c5}.public-rooms small{display:block;color:#887761}.public-rooms p{margin-bottom:0}