* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background-color: #1a1a1a; color: #fff; text-align: center; }

#login-screen { padding: 40px 20px; }
.info-box { background: #333; padding: 15px; margin: 20px auto; border-radius: 8px; max-width: 300px; }
#my-id { color: #4cd137; user-select: all; }
input, button { padding: 12px; font-size: 16px; margin: 10px; border-radius: 5px; width: 80%; max-width: 300px; }
button { background-color: #007bff; color: white; border: none; font-weight: bold; cursor: pointer; }
#connection-status { color: #e1b12c; margin-top: 10px; }

#game-screen { display: flex; flex-direction: column; align-items: center; padding: 10px; }
#status-bar { font-size: 16px; font-weight: bold; margin-bottom: 10px; padding: 10px; background: #333; width: 100%; border-radius: 5px;}

.board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    width: 95vw;
    max-width: 400px;
    aspect-ratio: 1;
    gap: 2px;
    background-color: #444;
    border: 2px solid #666;
    margin: 10px 0;
}

.cell { background-color: #2a2a2a; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;}
.cell.inner { background-color: #3a3a3a; }
.cell.border { background-color: #555; cursor: pointer; }
.cell.border:active { background-color: #777; }

.cell.atom { background-color: #e74c3c; border-radius: 50%; transform: scale(0.8); }
.cell.marker { background-color: #f1c40f; border-radius: 50%; transform: scale(0.5); }

/* 座標ラベルと軌跡のスタイル */
.cell.border { position: relative; } /* ラベル配置の基準 */
.coord-label { position: absolute; font-size: 10px; color: #aaa; opacity: 0.6; pointer-events: none; }
.res-text { position: relative; z-index: 2; font-size: 14px; font-weight: bold; color: #fff; }
.trace { background-color: rgba(52, 152, 219, 0.5) !important; transition: background-color 0.3s; }

#log { margin-top: 10px; font-size: 13px; color: #aaa; height: 80px; overflow-y: auto; text-align: left; width: 95vw; max-width: 400px; background: #222; padding: 5px;}