/* 테트리스 게임 — harulogs 스킨 통합용 (네온 아케이드 테마) */
.tetris-game {
    --tg-accent: #e94560;
    --tg-bg: #1a1a2e;
    --tg-panel: #16213e;
    --tg-board: #0f0f1a;
}

/* 히어로 */
.tetris-game .tg-hero {
    text-align: center;
    margin-bottom: 22px;
}
.tetris-game .tg-hero h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 6px;
}
.tetris-game .tg-hero h1 .tg-mark { color: var(--tg-accent); }
.tetris-game .tg-hero p {
    color: #6c757d;
    margin: 0;
    font-size: 15px;
}

/* 게임 스테이지 (어두운 아케이드 패널) */
.tetris-game .tg-stage {
    position: relative;
    background: var(--tg-bg);
    border-radius: 18px;
    padding: 28px 20px;
    box-shadow: 0 18px 50px rgba(26, 26, 46, 0.45);
    color: #eee;
    font-family: 'Courier New', monospace;
    overflow: hidden;
}

.tetris-game .game-wrapper {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: center;
}
.tetris-game .left-panel,
.tetris-game .right-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 132px;
}

.tetris-game canvas#gameCanvas {
    border: 3px solid var(--tg-accent);
    box-shadow: 0 0 20px var(--tg-accent), 0 0 40px rgba(233, 69, 96, 0.3);
    display: block;
    background: var(--tg-board);
    border-radius: 4px;
    touch-action: none;
    max-width: 100%;
    height: auto;
}

.tetris-game .panel-box {
    background: var(--tg-panel);
    border: 2px solid var(--tg-accent);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.2);
}
.tetris-game .panel-box h3 {
    font-size: 11px;
    color: var(--tg-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.tetris-game .panel-box .value {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px var(--tg-accent);
}
.tetris-game canvas#nextCanvas {
    border: 1px solid #444;
    background: var(--tg-board);
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}
.tetris-game .controls {
    background: var(--tg-panel);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 12px;
    font-size: 11px;
    color: #aaa;
    line-height: 1.85;
}
.tetris-game .controls h3 {
    color: var(--tg-accent);
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-size: 10px;
}
.tetris-game .controls .key { color: #fff; font-weight: bold; }

/* 오버레이 (게임 스테이지 내부로 한정) */
.tetris-game #overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    border-radius: 18px;
    text-align: center;
    padding: 20px;
}
.tetris-game #overlay h1 {
    font-size: 46px;
    color: var(--tg-accent);
    text-shadow: 0 0 20px var(--tg-accent);
    margin-bottom: 18px;
    letter-spacing: 4px;
}
.tetris-game #overlay p {
    font-size: 15px;
    color: #aaa;
    margin-bottom: 8px;
}
.tetris-game #overlay .final-score {
    font-size: 26px;
    color: #fff;
    margin: 8px 0 22px;
    text-shadow: 0 0 10px var(--tg-accent);
}
.tetris-game #startBtn {
    background: var(--tg-accent);
    color: #fff;
    border: none;
    padding: 14px 40px;
    font-size: 16px;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
}
.tetris-game #startBtn:hover {
    background: #ff6b6b;
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.8);
    transform: scale(1.05);
}
.tetris-game #overlayTitle { display: block; }
.tetris-game #gameoverText { display: none; }

/* 모바일 터치 조작 */
.tetris-game .tg-touch {
    display: none;
    margin-top: 18px;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.tetris-game .tg-touch button {
    flex: 1 1 0;
    min-width: 56px;
    max-width: 90px;
    aspect-ratio: 1 / 1;
    background: var(--tg-panel);
    border: 2px solid var(--tg-accent);
    color: #fff;
    border-radius: 12px;
    font-size: 22px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: background 0.12s;
}
.tetris-game .tg-touch button:active { background: var(--tg-accent); }
.tetris-game .tg-touch button.wide { font-size: 13px; letter-spacing: 1px; }

/* 반응형 */
@media (max-width: 720px) {
    .tetris-game .tg-stage { padding: 18px 12px; }
    .tetris-game .game-wrapper { gap: 10px; }
    .tetris-game .left-panel,
    .tetris-game .right-panel { min-width: 84px; gap: 10px; }
    .tetris-game .panel-box { padding: 8px; }
    .tetris-game .panel-box .value { font-size: 18px; }
    .tetris-game .panel-box h3 { font-size: 9px; }
    .tetris-game .controls { display: none; }
    .tetris-game canvas#nextCanvas { width: 72px; height: 72px; }
    .tetris-game .tg-touch { display: flex; }
}
@media (max-width: 420px) {
    .tetris-game canvas#gameCanvas { width: 210px; }
    .tetris-game .left-panel, .tetris-game .right-panel { min-width: 70px; }
}

/* 점수 등록 폼 (오버레이) */
.tetris-game #scoreSubmit { display: none; margin: 4px 0 18px; }
.tetris-game #nickInput {
    background: #0f0f1a;
    border: 2px solid var(--tg-accent);
    color: #fff;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 15px;
    font-family: 'Courier New', monospace;
    text-align: center;
    width: 180px;
    max-width: 60vw;
    outline: none;
}
.tetris-game #nickInput::placeholder { color: #888; }
.tetris-game #registerBtn {
    margin-left: 8px;
    background: #16213e;
    color: #fff;
    border: 2px solid var(--tg-accent);
    padding: 10px 16px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.tetris-game #registerBtn:hover:not(:disabled) { background: var(--tg-accent); }
.tetris-game #registerBtn:disabled { opacity: 0.55; cursor: default; }
.tetris-game #rankResult { margin-top: 10px; font-size: 14px; min-height: 18px; }
.tetris-game #rankResult.tg-ok { color: #00e676; }
.tetris-game #rankResult.tg-err { color: #ff6b6b; }

/* 랭킹 */
.tetris-game .tg-ranking {
    max-width: 460px;
    margin: 22px auto 0;
    background: var(--tg-panel);
    border: 2px solid var(--tg-accent);
    border-radius: 14px;
    padding: 16px 18px 10px;
    color: #eee;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.18);
}
.tetris-game .tg-ranking h3 {
    text-align: center;
    color: var(--tg-accent);
    letter-spacing: 2px;
    font-size: 15px;
    margin-bottom: 12px;
}
.tetris-game #rankingList { list-style: none; margin: 0; padding: 0; }
.tetris-game #rankingList li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
}
.tetris-game #rankingList li:last-child { border-bottom: none; }
.tetris-game .tg-rank-badge { width: 34px; text-align: center; font-size: 17px; }
.tetris-game .tg-rank-num { color: #aaa; font-weight: bold; font-size: 14px; }
.tetris-game .tg-rank-nick { flex: 1; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tetris-game .tg-rank-score { color: var(--tg-accent); font-weight: bold; text-shadow: 0 0 8px rgba(233, 69, 96, 0.4); }
.tetris-game .tg-rank-empty { justify-content: center; color: #888; }
.tetris-game .tg-rank-flag { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }