/* single_play.php 전용 CSS */

#status-bar { color: #000 !important; }
#move-log   { color: #000 !important; }

/* 11x11 보드 그리드 */
#board {
    grid-template-columns: repeat(10, var(--cell-size));
    grid-template-rows: repeat(10, var(--cell-size));
}
#hit-layer {
    grid-template-columns: repeat(11, var(--cell-size));
    grid-template-rows: repeat(11, var(--cell-size));
}
.coord-letters {
    width: calc(10 * var(--cell-size) + 2 * var(--game-pad) + 1px) !important;
}

/* 그리드 크기 고정 */
.grid-center { padding: 0 !important; }

/* 좌표 색상 (기본: 검정) */
.coord-nums span  { color: #000000; font-weight: normal; }
.coord-letters span { color: #000000; font-weight: normal; }

/* 아이콘 버튼: 테마 적응 색상 */
.icon-btn { color: var(--line-color); }
.icon-btn:hover, .icon-btn:active { color: var(--line-color); }

/* 온보딩 도전 아이콘 */
html .icon-btn.ob-challenge { color: #27ae60 !important; cursor: default; pointer-events: auto; }
html .icon-btn.ob-challenge.done { color: rgba(0,0,0,0.35) !important; }

/* 격자선 두께 */
.cell::before { height: 0.5px; top: -0.25px; }
.cell::after  { width: 0.5px;  left: -0.25px; }

/* 사이드 컬럼 */
.grid-left, .grid-right { min-width: 300px; }
.status-container { width: 100% !important; max-width: none !important; margin: 6px 0 !important; }
.user-info b { color: var(--orange); }

/* 테마 피커 */
.sp-theme-picker { position: relative; width: 100%; }
.sp-theme-trigger {
    width: 100%; display: flex; align-items: center; gap: 8px;
    background: #3a3a3a; border: 1px solid #555;
    color: #eee; padding: 10px; border-radius: 6px; font-size: 0.9rem;
    cursor: pointer; text-align: left;
}
.sp-theme-trigger:hover { background: #444; }
.sp-theme-trigger .arrow { margin-left: auto; opacity: 0.6; font-size: 0.75rem; }
.sp-theme-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 999; width: 100%;
    background: #2c2c2c; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px; max-height: 200px; overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.sp-theme-picker.open .sp-theme-menu { display: block; }
.sp-theme-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; font-size: 0.88rem;
    color: #eee; background: #2c2c2c;
}
.sp-theme-item:hover { background: #3a3a3a; }
.sp-theme-item.selected { background: #444; font-weight: bold; }

@media (max-width: 600px) {
    .grid-center { width: 100% !important; }
    .grid-right { width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0 4px !important; box-sizing: border-box !important; }
}