html {
    height: -webkit-fill-available;
    height: 100%;
}

body {
    font-family: 'Fredoka', 'Malgun Gothic', sans-serif;
    background: linear-gradient(135deg, #FFEBF0 0%, #E8F0FE 50%, #F5E6FF 100%);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    /* iOS 전체화면 시 safe area 대응 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* iOS 100vh 버그 대응 */
    min-height: -webkit-fill-available;
}

@keyframes gradientBG {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass-panel {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(255, 180, 200, 0.2);
}

.glass-panel-dark {
    background: rgba(45, 30, 55, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.cherry-blossom-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

.petal {
    position: absolute;
    background-color: #ffb7c5;
    border-radius: 150% 0px 150% 150%;
    opacity: 0.85;
    animation: fade 10s infinite linear, drag 10s infinite ease-in-out;
    pointer-events: none;
}

@keyframes fade {
    0%   { top: -10%; opacity: 0; }
    10%  { opacity: 0.9; }
    90%  { opacity: 0.9; }
    100% { top: 110%; opacity: 0; }
}

@keyframes drag {
    0%   { transform: translateX(0px) rotate(0deg); }
    50%  { transform: translateX(80px) rotate(180deg); }
    100% { transform: translateX(0px) rotate(360deg); }
}

.glow-text {
    text-shadow: 0 0 10px rgba(255, 182, 193, 0.8), 0 0 20px rgba(255, 105, 180, 0.4);
}

.btn-pastel {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-pastel:active {
    transform: scale(0.92);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 182, 193, 0.6); border-radius: 10px; }

/* i18n 준비 */
[data-i18n] {
    transition: opacity 0.2s ease;
}

/* ── 다크모드 ── */
body.dark-mode {
    background: linear-gradient(135deg, #1a0a2e 0%, #0d1b3e 50%, #1a1a2e 100%);
    color: #e2d9f3;
}
body.dark-mode .glass-panel {
    background: rgba(30, 15, 50, 0.6);
    border-color: rgba(180, 130, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(100, 50, 200, 0.2);
}
body.dark-mode .text-slate-700 { color: #e2d9f3; }
body.dark-mode .text-slate-800 { color: #f0ebff; }
body.dark-mode .text-slate-600 { color: #c4b5e8; }
body.dark-mode .text-slate-500 { color: #a89cc8; }
body.dark-mode .bg-pink-50     { background-color: #2d1b3d; }
body.dark-mode .bg-yellow-50   { background-color: #2d2510; }
body.dark-mode .bg-purple-50   { background-color: #1e1030; }
body.dark-mode .bg-green-50    { background-color: #0d2018; }
body.dark-mode footer          { color: #a78bfa; }

/* ── 시작 버튼 shimmer ── */
@keyframes shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── 가로 모드 회전 힌트 애니메이션 ── */
@keyframes rotateHint {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(-90deg); }
    60%  { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

/* ── 모바일 전체화면 캔버스 ── */
@media (max-width: 1023px) {
    html, body {
        height: 100%;
        overflow: hidden;
    }
    body {
        padding: 0 !important;
        margin: 0;
        display: block;
    }

    /* 좌/우 패널 (PC용) 완전히 숨김 */
    .lg\:col-span-3 { display: none !important; }

    /* 헤더 숨김 */
    header { display: none !important; }

    /* main: 꽉 채우기 */
    main {
        padding: 0 !important;
        gap: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* 그리드 → 단일 열 */
    main > div:first-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0 !important;
    }

    /* 캔버스 래퍼: 꽉 채우기 */
    #canvas-panel-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
    }

    /* 캔버스 패널: 테두리/패딩/배경 완전 제거, 높이 flex로 채우기 */
    #canvas-panel {
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        aspect-ratio: unset !important;
        flex: 1 !important;
        min-height: 0;
    }

    /* 캔버스 내부 wrapper */
    #canvas-panel > div:last-child {
        flex: 1;
        min-height: 0;
    }

    /* 캔버스 자체 */
    #tetris-canvas {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 오버레이 */
    #overlay-screen {
        border-radius: 0 !important;
    }
}

/* ── PC: 캔버스 패널 고정 너비 ── */
@media (min-width: 1024px) {
    #canvas-panel {
        max-width: 340px !important;
    }
    #speed-bar-wrapper {
        max-width: 340px !important;
    }
}

/* ── 모바일 HUD: 초기 숨김 (게임 시작 전) ── */
#mobile-stat-bar,
#mobile-hold,
#mobile-next {
    visibility: hidden;
}


/* ── 모바일/PC 레이아웃 전환 ── */
/* Tailwind lg:hidden 인라인 style 충돌 방지 */
@media (max-width: 1023px) {
    #mobile-layout { display: flex !important; }
    #pc-layout     { display: none !important; }
}
@media (min-width: 1024px) {
    #mobile-layout { display: none !important; }
    #pc-layout     { display: flex !important; }
}