/* ════════════════════════════════════════════════════════════
   웰컴스 3D 테트리스 — HUD 스타일
   모든 셀렉터는 .tetris3d-wrap 스코프 내에서 동작
   ════════════════════════════════════════════════════════════ */

.tetris3d-wrap *,
.tetris3d-wrap *::before,
.tetris3d-wrap *::after { box-sizing:border-box; }

/* ── HUD 오버레이 (캔버스 위 전체) ── */
.tetris3d-wrap .tetris3d-hud {
    position:absolute; inset:0; z-index:10;
    pointer-events:none;
}

/* ── 상단 바 ── */
.tetris3d-wrap .tetris3d-top-bar {
    position:absolute; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; padding:12px 20px;
    background:linear-gradient(180deg, rgba(5,8,16,0.78) 0%, rgba(5,8,16,0) 100%);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    pointer-events:auto;
}

.tetris3d-wrap .tetris3d-title {
    font-size:0.95rem; font-weight:800; letter-spacing:0.04em;
    white-space:nowrap;
    background:linear-gradient(135deg,#00e5ff 0%,#00ff88 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.tetris3d-wrap .tetris3d-title .ver {
    font-size:0.6rem; font-weight:600;
    color:rgba(255,255,255,0.3);
    -webkit-text-fill-color:rgba(255,255,255,0.3);
    margin-left:4px;
}

/* ── 통계 블록 ── */
.tetris3d-wrap .tetris3d-stats {
    display:flex; gap:18px; align-items:center; flex:1; justify-content:center;
}
.tetris3d-wrap .tetris3d-stat {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; min-width:52px;
}
.tetris3d-wrap .tetris3d-stat .label {
    font-size:0.65rem; font-weight:700; line-height:1;
    color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.1em;
}
.tetris3d-wrap .tetris3d-stat .val {
    font-size:1.25rem; font-weight:800; line-height:1.2;
    color:#fff; min-height:1.25rem;
    display:flex; align-items:center; justify-content:center;
}
.tetris3d-wrap #t3d-score { color:#00e5ff; text-shadow:0 0 10px rgba(0,229,255,0.45); }
.tetris3d-wrap #t3d-high  { color:#ff9800; text-shadow:0 0 10px rgba(255,152,0,0.35); }
.tetris3d-wrap #t3d-level { color:#00ff88; text-shadow:0 0 10px rgba(0,255,136,0.4); }
.tetris3d-wrap #t3d-lines { color:#e040fb; text-shadow:0 0 10px rgba(224,64,251,0.4); }

/* ── 상단 액션 버튼 ── */
.tetris3d-wrap .tetris3d-actions {
    display:flex; align-items:center; gap:8px; pointer-events:auto;
}
.tetris3d-wrap .tetris3d-actions button {
    height:32px; padding:0 12px; border-radius:6px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    color:#fff; font-family:inherit; font-size:0.8rem; font-weight:600;
    cursor:pointer; transition:all 0.15s;
    display:inline-flex; align-items:center; justify-content:center;
}
.tetris3d-wrap .tetris3d-actions button:hover {
    background:rgba(0,229,255,0.15);
    border-color:rgba(0,229,255,0.4);
}
.tetris3d-wrap .tetris3d-actions button:active { transform:scale(0.96); }
.tetris3d-wrap #t3d-mute { width:32px; padding:0; font-size:1rem; }

/* ── 사이드 패널 (우측) ── */
.tetris3d-wrap .tetris3d-side-panel {
    position:absolute; top:72px; right:16px; z-index:10;
    display:flex; flex-direction:column; gap:14px;
    width:164px; pointer-events:auto;
}
.tetris3d-wrap .tetris3d-next-wrap,
.tetris3d-wrap .tetris3d-hold-wrap {
    background:rgba(10,14,26,0.72);
    border:1px solid rgba(0,229,255,0.15);
    border-radius:12px; padding:12px;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.tetris3d-wrap .side-label {
    display:block;
    font-size:0.6rem; font-weight:700; line-height:1;
    color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:0.15em;
    margin-bottom:6px;
}
.tetris3d-wrap #t3d-next,
.tetris3d-wrap #t3d-hold {
    display:block; width:140px; height:140px;
    background:rgba(0,0,0,0.4);
    border-radius:8px;
}

/* ── 컨트롤 힌트 ── */
.tetris3d-wrap .tetris3d-controls-hint {
    padding:10px 12px;
    background:rgba(10,14,26,0.6);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    font-size:0.65rem; line-height:1.7;
    color:rgba(255,255,255,0.4);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* ── 오버레이 (시작/게임오버/일시정지) ── */
.tetris3d-wrap .tetris3d-overlay {
    position:absolute; inset:0; z-index:100;
    display:none;
    align-items:center; justify-content:center;
    background:rgba(5,8,16,0.7);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tetris3d-wrap .tetris3d-overlay.visible { display:flex; pointer-events:auto; }

.tetris3d-wrap .t3d-modal {
    text-align:center; padding:40px; max-width:480px;
}
.tetris3d-wrap .t3d-modal h2 {
    margin:0;
    font-size:3rem; font-weight:900; letter-spacing:0.05em; line-height:1.1;
    background:linear-gradient(135deg,#00e5ff 0%,#e040fb 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 30px rgba(0,229,255,0.5);
}
.tetris3d-wrap .t3d-modal p {
    margin:16px 0 0;
    font-size:1.1rem; font-weight:500; line-height:1.5;
    color:rgba(255,255,255,0.7);
}
.tetris3d-wrap .t3d-overlay-extra {
    margin-top:24px;
    font-size:0.9rem; line-height:1.7;
    color:rgba(255,255,255,0.6);
}
.tetris3d-wrap .t3d-overlay-extra table { margin:0 auto; border-collapse:collapse; }
.tetris3d-wrap .t3d-overlay-extra td { padding:2px 10px; }
.tetris3d-wrap .t3d-overlay-extra .rk { color:rgba(255,255,255,0.35); text-align:right; }
.tetris3d-wrap .t3d-overlay-extra .nm { text-align:left; color:#00e5ff; }
.tetris3d-wrap .t3d-overlay-extra .sc { text-align:right; font-weight:700; color:#ff9800; }

/* ── 게임오버 액션 버튼 ── */
.tetris3d-wrap .t3d-gm-rank {
    margin-top:14px;
    font-size:1rem; font-weight:700;
    color:#00e5ff;
    text-shadow:0 0 12px rgba(0,229,255,0.55);
    min-height:1.2rem;
}
.tetris3d-wrap .t3d-gm-actions {
    margin-top:28px;
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.tetris3d-wrap .t3d-gm-btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:13px 30px; min-width:150px;
    border-radius:10px;
    font-family:inherit; font-size:0.95rem; font-weight:700; letter-spacing:0.02em;
    text-decoration:none; cursor:pointer;
    transition:transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s;
    border:none;
}
.tetris3d-wrap .t3d-gm-btn-primary {
    background:linear-gradient(135deg,#00e5ff 0%,#e040fb 100%);
    color:#050810;
    box-shadow:0 4px 22px rgba(0,229,255,0.45);
}
.tetris3d-wrap .t3d-gm-btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 30px rgba(224,64,251,0.6);
}
.tetris3d-wrap .t3d-gm-btn-primary:active { transform:translateY(0) scale(0.98); }
.tetris3d-wrap .t3d-gm-btn-home {
    background:transparent;
    color:rgba(255,255,255,0.85);
    border:1px solid rgba(255,255,255,0.22);
}
.tetris3d-wrap .t3d-gm-btn-home:hover {
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.4);
    color:#fff;
}
.tetris3d-wrap .t3d-gm-hint {
    margin-top:18px;
    font-size:0.78rem;
    color:rgba(255,255,255,0.45);
}
.tetris3d-wrap .t3d-key {
    display:inline-block;
    padding:1px 8px; margin:0 2px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:5px;
    font-family:'SF Mono','Consolas',monospace; font-size:0.74rem;
    color:rgba(255,255,255,0.75);
}

/* ══════════ 반응형 ══════════ */
.tetris3d-wrap canvas { touch-action:none; -webkit-touch-callout:none; }
html, body { overscroll-behavior:none; }
.tetris3d-wrap { overscroll-behavior:none; }

@media (max-width:992px) {
    .tetris3d-wrap .tetris3d-controls-hint { display:none; }
}
@media (max-width:768px) {
    .tetris3d-wrap .tetris3d-side-panel { display:none; }
    .tetris3d-wrap .tetris3d-top-bar { padding:8px 10px; gap:8px; }
    .tetris3d-wrap .tetris3d-stats { gap:8px; }
    .tetris3d-wrap .tetris3d-stat { min-width:36px; }
    .tetris3d-wrap .tetris3d-stat .label { font-size:0.55rem; }
    .tetris3d-wrap .tetris3d-stat .val { font-size:1rem; }
    .tetris3d-wrap .tetris3d-actions button { height:28px; padding:0 8px; font-size:0.72rem; }
    .tetris3d-wrap #t3d-mute { width:28px; font-size:0.9rem; }
}
@media (max-width:480px) {
    .tetris3d-wrap .tetris3d-top-bar { padding:6px 8px; gap:6px; }
    .tetris3d-wrap .tetris3d-title { font-size:0.68rem; }
    .tetris3d-wrap .tetris3d-title .ver { font-size:0.48rem; }
    .tetris3d-wrap .tetris3d-stats { gap:5px; }
    .tetris3d-wrap .tetris3d-stat { min-width:30px; gap:1px; }
    .tetris3d-wrap .tetris3d-stat .label { font-size:0.48rem; letter-spacing:0.04em; }
    .tetris3d-wrap .tetris3d-stat .val { font-size:0.82rem; }
    .tetris3d-wrap .tetris3d-actions { gap:4px; }
    .tetris3d-wrap .tetris3d-actions button { font-size:0.62rem; height:24px; padding:0 6px; }
    .tetris3d-wrap #t3d-mute { width:24px; font-size:0.8rem; }
    .tetris3d-wrap .t3d-modal h2 { font-size:1.6rem; }
    .tetris3d-wrap .t3d-modal p { font-size:0.85rem; }
    .tetris3d-wrap .t3d-modal { padding:20px 16px; max-width:280px; }
    .tetris3d-wrap .tetris3d-overlay { padding:16px; }
    .tetris3d-wrap .t3d-gm-btn { padding:10px 20px; font-size:0.8rem; }
    body #t3d-touch .tbtn { width:56px; height:56px; font-size:1.3rem; border-radius:14px; }
    body #t3d-touch .tbtn.hold { width:auto; padding:0 12px; }
    body #t3d-touch { padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
    body #t3d-touch .tgrp { gap:8px; }
    body #t3d-touch-sd { bottom:76px; }
    body #t3d-touch-sd .tbtn { width:48px; height:48px; font-size:1.1rem; }
}
@media (max-width:360px) {
    .tetris3d-wrap .tetris3d-stat .label { font-size:0.42rem; }
    .tetris3d-wrap .tetris3d-stat .val { font-size:0.72rem; }
    body #t3d-touch .tbtn { width:48px; height:48px; font-size:1.1rem; }
    body #t3d-touch .tgrp { gap:6px; }
}