*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;background:#d8c9b5;color:#514840;display:flex;justify-content:center;align-items:center}
main{width:min(760px,94vw)} section{background:#fcf8ee;border-radius:18px;padding:24px;box-shadow:0 12px 32px #684f3a22}
h1,h2,p{margin:0}h1{font-size:28px}.brand{text-align:center;margin:6px 0 24px}.brand p,.game-head p{color:#897b6e;font-size:13px;margin-top:5px}.game-head p+p{font-weight:600}
.panel-block{border:1px solid #e6ddcf;border-radius:12px;padding:14px;margin-bottom:14px}.section-title,.game-head,.game-tools{display:flex;align-items:center;justify-content:space-between;gap:10px}
.room{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f3eee3;padding:12px;margin-top:8px;border-radius:10px}.room small{display:block;color:#897b6e;font-size:12px;margin-top:4px}.room-actions{display:flex;gap:6px}
button{border:0;border-radius:8px;padding:9px 14px;cursor:pointer;background:#a98963;color:#fff;font-size:14px}.primary{background:#ae6b58}.danger{background:#b55f54}.quiet{background:transparent;color:#967454;padding:4px 8px}.wide{display:block;width:100%;font-size:16px;padding:12px}
.empty,#notice{text-align:center;color:#9b8b7c;font-size:13px;padding:18px 4px;min-height:20px}#notice:empty{display:none}.error{color:#b85a4c!important}
.game-head{align-items:flex-start;border-bottom:1px solid #e6ddcf;padding-bottom:12px}.players{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0;justify-content:center}.player{padding:6px 9px;border-radius:7px;background:#eee8dc;font-size:13px}.current{outline:2px solid #a98963}
#board{display:grid;gap:10px;width:min(82vmin,650px);aspect-ratio:1;margin:18px auto}.cell{position:relative;background:#f1eee4;border-radius:21px;cursor:pointer;transition:filter .15s}.cell:hover{filter:brightness(.97)}.cell.current-owner{box-shadow:inset 0 0 0 3px #ffffff66}
.piece{position:absolute;width:76%;height:76%;left:12%;top:12%;border-radius:50%;display:flex;align-items:center;justify-content:center}.p0{background:#f1675f}.p1{background:#f8c34e}.p2{background:#51b8df}.p3{background:#8bc94a}.p4{background:#a879df}.p5{background:#e787bb}.p6{background:#55c6aa}
.dot{width:16%;height:16%;border-radius:50%;background:#fff;position:absolute;transform:translate(-50%,-50%)}.game-tools{justify-content:center;flex-wrap:wrap}.game-tools button:disabled{opacity:.45;cursor:not-allowed}
@keyframes count-change{0%{transform:scale(.86)}55%{transform:scale(1.06)}100%{transform:scale(1)}}@keyframes split-change{0%{transform:scale(.96);filter:brightness(1)}45%{transform:scale(1.025);filter:brightness(1.08)}100%{transform:scale(1);filter:brightness(1)}}.piece.count-change{animation:count-change .18s ease-out}.cell.split-change{animation:split-change .2s ease-out}
#replayPanel{display:flex;justify-content:center;gap:8px;align-items:center;margin-top:12px}#replayPanel[hidden]{display:none}#replayInfo{font-size:12px;color:#897b6e}
dialog{border:0;border-radius:16px;padding:22px;background:#fcf8ee;color:#514840;box-shadow:0 14px 50px #684f3a44;min-width:min(420px,90vw)}dialog::backdrop{background:#5b463866}dialog h2{margin-bottom:16px}dialog label{display:block;font-size:13px;margin:11px 0}dialog small{display:block;color:#897b6e;font-size:11px;margin:4px 0}dialog input{width:100%;padding:9px;border:1px solid #d8cdbc;border-radius:7px;font:inherit;background:#fffdf8}dialog menu{padding:8px 0 0;display:flex;justify-content:flex-end;gap:8px}#joinRoomHint{color:#897b6e;font-size:13px;margin-bottom:12px}
@media(max-width:600px){body{align-items:flex-start;padding:14px 0}section{padding:16px}#board{gap:6px}.cell{border-radius:12px}.room{align-items:flex-start;flex-direction:column}.room-actions{width:100%}.room-actions button{flex:1}}