.gomoku-section {
    text-align: center;
    padding: 1.5em;
}

.controls .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .8em;
    margin-bottom: .8em;
}

.controls label { opacity: .9; }
.controls .ml { margin-left: .5em; }

.controls button, .controls select {
    padding: .5em .9em;
    border-radius: 8px;
    border: 1px solid #4a90e2;
    background: #fff;
    color: #4a90e2;
    cursor: pointer;
    transition: .2s;
}
.controls button:hover, .controls select:hover { transform: translateY(-1px); }
.controls .primary { background: #4a90e2; color: #fff; }
.controls .danger { border-color: #e74c3c; color: #e74c3c; }
.controls .danger:hover { background: #e74c3c; color: #fff; }

.status-row {
    gap: 1.2em;
}
.status {
    min-height: 1.6em;
    font-weight: 600;
}

.timers {
    display: flex;
    gap: 1.2em;
    align-items: center;
    justify-content: center;
}
.timer { font-variant-numeric: tabular-nums; }
.dot {
    display: inline-block;
    width: .9em; height: .9em;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: .4em;
    border: 1px solid #999;
}
.dot-black { background:#000; }
.dot-white { background:#fff; }

.board-wrap {
    display: inline-block;
    position: relative;
    margin-top: .8em;
    padding: .5em;
    background: #fafafa;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
#board {
    max-width: 92vw;
    width: min(92vw, 560px);
    height: auto;
    touch-action: manipulation;
    background:
            linear-gradient(#dcb35c,#dcb35c);
    border-radius: 8px;
}
.board-wrap.shake {
    animation: shake .5s ease-in-out;
}
@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

.hint {
    margin-top: .6em;
    color: #666;
    font-size: .95em;
}

@media (max-width: 600px) {
    .controls .row { gap: .6em; }
    .timers { gap: .8em; }
}
