body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

header {
    margin-bottom: 20px;
}

h1 {
    color: #333;
    font-size: 1.8em;
}

main {
    width: 100%;
    max-width: 400px; /* Constrain size for mobile focus */
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#connection-area p, #connection-area input, #connection-area button {
    margin-bottom: 10px;
}

#peer-id {
    font-weight: bold;
    color: #007bff;
    word-break: break-all;
}

#target-id, #connect-btn {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
}

#target-id {
    border: 1px solid #ccc;
}

#connect-btn {
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
}

#connect-btn:hover {
    background-color: #218838;
}

#status-message {
    font-weight: bold;
    text-align: center;
    padding: 5px;
}

#game-area {
    text-align: center;
}

#turn-display {
    font-size: 1.2em;
    margin-bottom: 15px;
    min-height: 1.2em; /* Ensure layout stability */
}

#board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    /* Ensure the board is square relative to its container */
    aspect-ratio: 1 / 1; 
    border: none;
    margin: 0 auto 20px;
}

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #333;
    user-select: none;
    transition: background-color 0.1s;
}

.cell:hover:not(.x):not(.o) {
    background-color: #e9e9e9;
}

/* Custom border styling for grid */
.cell:nth-child(3n) { border-right-width: 0; }
.cell:nth-child(3n + 1) { border-left-width: 0; }
.cell:nth-child(-n + 3) { border-top-width: 0; }
.cell:nth-child(n + 7) { border-bottom-width: 0; }

.x {
    color: #dc3545; /* Red for X */
}

.o {
    color: #007bff; /* Blue for O */
}

#reset-btn {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #ffc107;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
}

#sound-control {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}