:root{font-family:Arial,sans-serif;color:#111;background:#f5f7fb}body{margin:0}.wrap{max-width:900px;margin:auto;padding:1rem}.panel{background:#fff;border:2px solid #243b67;border-radius:12px;padding:1rem;margin:1rem 0}.controls{display:grid;gap:.8rem}.btn,button,input,select{font:inherit;padding:.75rem}.btn,button{background:#173f7a;color:#fff;border:2px solid #08234c;border-radius:8px;font-weight:700}.secondary{background:#fff;color:#173f7a}.status{border-left:6px solid #173f7a;padding:.75rem;background:#eef4ff}.room-code{font-size:1.5rem;letter-spacing:.2rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.board{display:grid;grid-template-columns:repeat(7,minmax(42px,1fr));gap:5px;max-width:560px}.cell{aspect-ratio:1;border:2px solid #333;border-radius:50%;background:#fff}.cell.p1{background:#ffd43b}.cell.p2{background:#e64980}.columns{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.columns button{padding:.5rem}.topnav{background:#12284c;padding:1rem}.topnav a{color:#fff;font-weight:bold}button:focus,input:focus,select:focus,a:focus{outline:4px solid #ffbf00;outline-offset:3px}@media(max-width:600px){.wrap{padding:.5rem}.columns button{font-size:.8rem;padding:.4rem}}
.sound-panel input[type="range"]{width:min(100%,24rem);vertical-align:middle}.sound-panel output{display:inline-block;min-width:6rem;margin-left:.5rem}.sound-panel button{margin:.2rem}

.voice-panel button { margin: .2rem .35rem .35rem 0; }
.voice-panel ul { margin-top: .4rem; }
.voice-panel .status { font-weight: 700; }