/* ================================
   사천성 게임 스타일 - 다크 테마
   동적 보드 크기 지원 (JSON 설정 기반)
================================ */

:root {
    --sacheonseong-board-cols: 17;
    --sacheonseong-board-rows: 9;
}

.sacheonseong-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sacheonseong-container h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.sacheonseong-container .page-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.sacheonseong-main-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}

.sacheonseong-game-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sacheonseong-game-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

/* 가로 모드 유도 오버레이 (모바일 세로일 때만 표시, JS로 .hidden 토글) */
.sacheonseong-rotate-prompt {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 15px;
}

.sacheonseong-rotate-prompt-inner {
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.5;
}

.sacheonseong-rotate-prompt-inner p {
    margin: 12px 0 0;
}

.sacheonseong-rotate-icon {
    font-size: 52px;
    display: block;
}

/* 일시정지 오버레이 (게임 카드 전체 덮음, 완전 불투명으로 보드 미리보기 불가) */
.sacheonseong-pause-overlay {
    position: absolute;
    inset: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0d0d0d;
    border-radius: 15px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.sacheonseong-pause-overlay p {
    margin: 8px 0 16px;
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.9;
}

.sacheonseong-pause-overlay .sacheonseong-resume-btn {
    margin-top: 8px;
    cursor: pointer;
    pointer-events: auto;
}

/* 숨김 시 완전히 비표시·비접근(미리 보기 불가) */
.sacheonseong-pause-overlay.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sacheonseong-game-card h3 {
    font-size: 1.2rem;
    margin-bottom: 6px;
    color: var(--text-primary);
    text-align: center;
}

.sacheonseong-game-desc {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 0.9rem;
    text-align: center;
}

.sacheonseong-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.sacheonseong-buttons.in-game {
    display: none;
}

.sacheonseong-btn {
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.sacheonseong-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.sacheonseong-btn-start {
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
    color: #000;
}

.sacheonseong-btn-start:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.sacheonseong-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 상단 상태 바 */
.sacheonseong-status-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 20px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.sacheonseong-score strong { color: var(--gold-primary); }
.sacheonseong-matchable strong { color: var(--neon-green, #00ff88); }
.sacheonseong-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--neon-green); }
.sacheonseong-timer.warning { color: #ff9500; }
.sacheonseong-timer.danger { color: #ff3b30; }
.sacheonseong-count-display strong { color: var(--gold-primary); }

/* 스테이지 표시 */
.sacheonseong-stage {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sacheonseong-stage strong {
    color: var(--gold-primary);
    font-size: 1.1em;
}

.sacheonseong-stage-name {
    font-size: 0.85em;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 4px;
}

/* 스테이지 진행 표시 바 */
.sacheonseong-stage-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 10px;
}

.sacheonseong-stage-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sacheonseong-stage-title {
    font-weight: 600;
    color: var(--text-primary);
}

.sacheonseong-stage-desc {
    font-size: 0.8em;
    color: var(--text-secondary);
}

/* 보드 컨테이너: 동적 그리드, 연결선 레이어 */
.sacheonseong-board-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 12px 0;
    overflow: auto;
    touch-action: manipulation; /* 모바일에서 빠른 터치 반응, 더블탭 지연 제거 */
}

.sacheonseong-board {
    display: grid;
    grid-template-columns: repeat(var(--board-cols, 17), 1fr);
    grid-template-rows: repeat(var(--board-rows, 9), 1fr);
    gap: 2px;
    padding: 8px;
    background: linear-gradient(145deg, rgba(30, 30, 35, 0.9), rgba(20, 20, 25, 0.95));
    border-radius: 10px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4);
    touch-action: manipulation; /* 모바일에서 빠른 터치 반응, 더블탭 지연 제거 */
    transition: all 0.3s ease;
}

/* 타일 셀: 포켓몬 구분 쉽게 48x56 기본, 고해상도 official-artwork 사용 */
.sacheonseong-cell {
    width: 48px;
    height: 56px;
    min-width: 36px;
    min-height: 42px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    position: relative;
    overflow: hidden;
    background-size: 95%;
    background-position: center;
    background-repeat: no-repeat;
    user-select: none;
    -webkit-user-select: none;
}

.sacheonseong-cell:hover:not(.empty) {
    transform: scale(1.08);
    z-index: 5;
}

.sacheonseong-cell.selected {
    transform: scale(1.12);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
    z-index: 10;
}

/* 오답 피드백: 짧은 shake 애니메이션 */
.sacheonseong-cell.wrong {
    animation: sacheonseongWrongShake 0.2s ease-in-out;
}

@keyframes sacheonseongWrongShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.sacheonseong-cell.empty {
    background: transparent;
    cursor: default;
    box-shadow: none;
}

/* 장애물(벽) 셀: 블록 놓을 수 없고, 선만 지나감. 스테이지별 다양한 맵용 */
.sacheonseong-cell.wall {
    background: linear-gradient(145deg, rgba(50, 50, 60, 0.95), rgba(35, 35, 45, 0.98));
    cursor: default;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.sacheonseong-cell.wall::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,0.03) 3px,
        rgba(255,255,255,0.03) 4px
    );
    border-radius: 4px;
    pointer-events: none;
}

/* 힌트: 눈에 잘 띄는 네온 테두리 + 밝은 그림자 */
.sacheonseong-cell.hint {
    animation: sacheonseongHintPulse 1s ease-in-out infinite;
    border: 3px solid var(--neon-green, #00ff88) !important;
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.7), 0 0 24px rgba(0, 255, 136, 0.4);
}

@keyframes sacheonseongHintPulse {
    0%, 100% {
        box-shadow: 0 0 14px rgba(0, 255, 136, 0.7), 0 0 24px rgba(0, 255, 136, 0.4);
        border-color: var(--neon-green, #00ff88);
    }
    50% {
        box-shadow: 0 0 22px rgba(0, 255, 136, 1), 0 0 36px rgba(0, 255, 136, 0.7);
        border-color: #66ffbb;
    }
}

/* 36종 포켓몬 타일 - PokeAPI official-artwork (고해상도, 구분 용이) */
.sacheonseong-cell[data-type="1"] { background-color: #f5d876; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png'); }
.sacheonseong-cell[data-type="2"] { background-color: #b8d4e8; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/133.png'); }
.sacheonseong-cell[data-type="3"] { background-color: #f5a85a; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/4.png'); }
.sacheonseong-cell[data-type="4"] { background-color: #7dd3fc; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/7.png'); }
.sacheonseong-cell[data-type="5"] { background-color: #86efac; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png'); }
.sacheonseong-cell[data-type="6"] { background-color: #fde047; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/144.png'); }
.sacheonseong-cell[data-type="7"] { background-color: #c4b5fd; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/150.png'); }
.sacheonseong-cell[data-type="8"] { background-color: #a78bfa; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/94.png'); }
.sacheonseong-cell[data-type="9"] { background-color: #93c5fd; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/393.png'); }
.sacheonseong-cell[data-type="10"] { background-color: #bbf7d0; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/906.png'); }
.sacheonseong-cell[data-type="11"] { background-color: #fdba74; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/909.png'); }
.sacheonseong-cell[data-type="12"] { background-color: #67e8f9; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/258.png'); }
.sacheonseong-cell[data-type="13"] { background-color: #fca5a5; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/155.png'); }
.sacheonseong-cell[data-type="14"] { background-color: #86efac; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/387.png'); }
.sacheonseong-cell[data-type="15"] { background-color: #c4b5fd; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/495.png'); }
.sacheonseong-cell[data-type="16"] { background-color: #a5f3fc; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/656.png'); }
.sacheonseong-cell[data-type="17"] { background-color: #fde047; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/722.png'); }
.sacheonseong-cell[data-type="18"] { background-color: #bbf7d0; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/810.png'); }
.sacheonseong-cell[data-type="19"] { background-color: #fde68a; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/39.png'); }
.sacheonseong-cell[data-type="20"] { background-color: #d6d3d1; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/52.png'); }
.sacheonseong-cell[data-type="21"] { background-color: #7dd3fc; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/129.png'); }
.sacheonseong-cell[data-type="22"] { background-color: #c4b5fd; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/63.png'); }
.sacheonseong-cell[data-type="23"] { background-color: #a78bfa; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/92.png'); }
.sacheonseong-cell[data-type="24"] { background-color: #93c5fd; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/147.png'); }
.sacheonseong-cell[data-type="25"] { background-color: #fed7aa; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/246.png'); }
.sacheonseong-cell[data-type="26"] { background-color: #fecdd3; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/371.png'); }
.sacheonseong-cell[data-type="27"] { background-color: #a8d5a2; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/443.png'); }
.sacheonseong-cell[data-type="28"] { background-color: #c4b5fd; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/610.png'); }
.sacheonseong-cell[data-type="29"] { background-color: #bbf7d0; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/704.png'); }
.sacheonseong-cell[data-type="30"] { background-color: #e0e7ff; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/16.png'); }
.sacheonseong-cell[data-type="31"] { background-color: #d9f99d; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/43.png'); }
.sacheonseong-cell[data-type="32"] { background-color: #d6d3d1; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/74.png'); }
.sacheonseong-cell[data-type="33"] { background-color: #a78bfa; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/88.png'); }
.sacheonseong-cell[data-type="34"] { background-color: #fde047; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/100.png'); }
.sacheonseong-cell[data-type="35"] { background-color: #67e8f9; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/118.png'); }
.sacheonseong-cell[data-type="36"] { background-color: #fca5a5; background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/123.png'); }

/* 매칭 제거 애니메이션 (빠른 연속 매칭을 위해 단축) */
.sacheonseong-cell.matched {
    animation: sacheonseongMatchPop 0.18s ease-out forwards;
}

@keyframes sacheonseongMatchPop {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); }
    100% { transform: scale(0); opacity: 0; }
}

/* 연결선 레이어 (JS에서 SVG/라인 그림) */
.sacheonseong-line-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

/* 하단 버튼 (회전 유도 오버레이 100 위에 두어 일시정지 등 항상 클릭 가능) */
.sacheonseong-bottom-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    position: relative;
    z-index: 105;
}

.sacheonseong-bottom-buttons .sacheonseong-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    position: relative;
}

/* 단축키 표시 스타일 */
.sacheonseong-btn .shortcut-key {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--text-primary);
    opacity: 0.8;
    font-family: 'Courier New', monospace;
}

/* 순위 사이드바 */
.sacheonseong-ranking-sidebar {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.sacheonseong-ranking-sidebar h4 {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.sacheonseong-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.sacheonseong-ranking-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.9rem;
}

.sacheonseong-ranking-item.rank-1 { background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(240, 208, 96, 0.1)); border: 1px solid var(--gold-primary); }
.sacheonseong-ranking-item.rank-2 { background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(220, 220, 220, 0.1)); border: 1px solid rgba(192, 192, 192, 0.5); }
.sacheonseong-ranking-item.rank-3 { background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(222, 184, 135, 0.1)); border: 1px solid rgba(205, 127, 50, 0.5); }

.sacheonseong-ranking-rank { font-size: 0.95rem; font-weight: 700; min-width: 28px; flex-shrink: 0; color: var(--gold-primary); }

.sacheonseong-ranking-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sacheonseong-ranking-avatar.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
}

.sacheonseong-ranking-nickname { flex: 1; min-width: 0; max-width: 85px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sacheonseong-ranking-record { flex-shrink: 0; margin-left: 4px; font-size: 0.9rem; color: var(--gold-primary); font-weight: 600; }

/* 명예의 전당 - 애니팡/테트리스와 동일 간격 */
.sacheonseong-ranking-sidebar .hall-of-fame-title {
    font-size: 1rem;
    margin-top: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.sacheonseong-hall-of-fame-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 160px;
    overflow-y: auto;
}

.sacheonseong-hall-of-fame-list .empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 12px 0;
}

.sacheonseong-hall-of-fame-list .sacheonseong-ranking-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.9rem;
}

/* 반응형: 17x9가 넓으므로 작은 화면에서 셀 축소 (기본 확대에 맞춰 min 유지) */
@media (max-width: 1200px) {
    .sacheonseong-cell { width: 40px; height: 46px; min-width: 32px; min-height: 36px; }
}

@media (max-width: 900px) {
    .sacheonseong-main-layout { grid-template-columns: 1fr; }
    .sacheonseong-ranking-sidebar { position: static; margin-top: 16px; order: 2; }
    .sacheonseong-game-area { order: 1; }
    .sacheonseong-cell { width: 36px; height: 42px; min-width: 28px; min-height: 32px; }
}

@media (max-width: 768px) {
    .sacheonseong-container { padding: 12px; }
    .sacheonseong-game-card { padding: 12px; }
    .sacheonseong-board { gap: 1px; padding: 4px; }
    .sacheonseong-cell { width: 30px; height: 36px; min-width: 24px; min-height: 28px; background-size: 90%; border-radius: 6px; }
    .sacheonseong-status-bar { font-size: 0.85rem; gap: 8px 12px; padding: 8px; }
}

@media (orientation: portrait) and (max-width: 768px) {
    .sacheonseong-rotate-prompt:not(.hidden) {
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .sacheonseong-cell { width: 26px; height: 30px; min-width: 20px; min-height: 24px; background-size: 85%; }
}