:root{
    --c-bg1:#0b1e36;
    --c-bg2:#09223f;
    --c-accent:#49cfff;
    --c-good:#29ffa1;
    --c-bad:#ff5c5c;
    --c-text:#e6f7ff;

    --cell-gap: 12px;
    --cell-radius: 12px;
    --grid-padding: 12px;

    /* 공통 배경 (단색/그라디언트 원하는 걸로) */
    --app-bg: linear-gradient(180deg, #0b1e36 0%, #09223f 100%);
}

*{box-sizing:border-box}
html,body{
    height:100%;
    /*background: transparent;*/
    margin:0;
    overflow: hidden;          /* 페이지 자체 스크롤 금지 */
    overscroll-behavior: none; /* 안드 크롬 등에서 바운스/당겨새로고침 차단 */
}
html{
    background: linear-gradient(180deg, #0b1e36, #09223f);
    color-scheme: dark;
    /* 루트가 항상 화면 높이 이상을 채우게 */
    min-height: 100svh;              /* iOS 16+ */
    min-height: 100dvh;              /* 최신 표준 */
    min-height: -webkit-fill-available; /* 구형 iOS */
    /* 루트 배경은 '단색'으로 깔고, 그라디언트는 body::before가 담당 */
    background: #0b1e36;
}
body{
    background: radial-gradient(1200px 600px at 20% 10%, rgba(73,207,255,.12), transparent 40%),
    radial-gradient(1000px 700px at 90% 90%, rgba(73,207,255,.08), transparent 50%),
    linear-gradient(180deg, var(--c-bg1), var(--c-bg2));
    color:var(--c-text);
    font-family: ui-sans-serif, system-ui, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    min-height: 100dvh;        /* iOS/안드 최신 브라우저에서 주소창 변동 대응 */
    overscroll-behavior: none;
    isolation: isolate;         /* ⬅️ ::before 레이어가 항상 위(배경층)에 남도록 */
    position: relative;         /* (안전망) 고정 레이어 기준 안정화 */
}
body::before{
    content: "";
    position: fixed;
    inset: 0;             /* = top/left/right/bottom: 0 */
    /*background: var(--app-bg);*/
    background: linear-gradient(180deg, #0b1e36, #09223f);
    z-index: -1;          /* 모든 콘텐츠 뒤로 */
}

/* 2) 실제 콘텐츠에 안전영역 패딩 주기 (노치/홈바를 피해서 배치) */
.safe-area {
    /* 기본 여백과 safe-area 중 더 큰 값을 사용 */
    padding-top:  max(16px, env(safe-area-inset-top));
    padding-right:max(16px, env(safe-area-inset-right));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
}

#app{width:min(92vw,520px)}

/* 상단 HUD - 간격/여백 살짝 축소 */
#hud{
    display:flex; justify-content:space-between; align-items:center;
    gap:8px;                           /* 12px → 8px */
    width:100%;
    max-width:min(92vw,520px);
    margin:8px auto 4px;               /* 12px auto 8px → 8px auto 4px (아래 간격 ↓) */
    padding:2px 6px;                   /* 4px 8px → 2px 6px */
    color:#e6fbff;
    text-shadow:0 0 10px rgba(73,207,255,.25);
    user-select:none;
}
#levelLabel{
    font-weight:800;
    letter-spacing:1.1px;
    font-size:12px;                    /* 13px → 12px */
    text-transform:uppercase;
    border:1px solid rgba(73,207,255,.55);
    border-radius:999px;
    padding:2px 8px;                   /* 3px 9px → 2px 8px */
    background:
            linear-gradient(180deg, rgba(0,40,60,.75), rgba(0,24,40,.65)),
            repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px);
    box-shadow: 0 0 12px rgba(73,207,255,.3), inset 0 0 8px rgba(73,207,255,.15);
}
#status{
    font-weight:700;
    font-size:12px;                    /* 13px → 12px */
    opacity:.95;
}

/* 게임 카드 */
#game{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    border-radius:16px;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
    transition: box-shadow .22s;
}
#game.is-turn{
    box-shadow:
            0 0 0 1px rgba(73,207,255,.35) inset,
            0 0 28px rgba(73,207,255,.28),
            0 0 70px rgba(73,207,255,.16),
            0 10px 40px rgba(0,0,0,.35);
}

#frame{
    position:relative;
    inset:0;
    margin:8px;                 /* 10 → 8 */
    height:calc(100% - 16px);   /* 20 → 16 */
    border-radius:16px;
    border:1.5px solid rgba(73,207,255,.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 24px rgba(73,207,255,.15);
    overflow:hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 턴가드 */
#turnGuard{
    position:absolute; inset:0;
    z-index:2;
    background: transparent;
    pointer-events: auto;
    opacity: 0;
    transition: opacity .12s linear;
}
#turnGuard.hidden{ display:none; }
#turnGuard.clear{ pointer-events:none; }

/* 그리드 */
#grid{
    position:relative; z-index:1;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(4, 1fr);
    width:100%; height:100%;
    gap: var(--cell-gap);
    padding: var(--grid-padding);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    background: transparent;
}
.cell{
    position:relative; z-index:1;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    border-radius: var(--cell-radius);
    transition:background .14s, box-shadow .14s, transform .10s;
    cursor:pointer;
    overflow:hidden;
    will-change: transform, box-shadow, background;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.cell::before{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    opacity:0;
    transition:opacity .14s, box-shadow .14s, transform .10s;
    pointer-events:none;
}

/* 데스크톱 hover */
@media (hover: hover) and (pointer: fine) {
    #grid.player-turn.hover-armed .cell:hover{
        transform:scale(1.03);
        background:rgba(73,207,255,.10);
    }
}
/* 터치 :active 무효화 */
@media (hover: none), (pointer: coarse) {
    .cell:active{ background: rgba(255,255,255,.05) !important; transform: none !important; }
    .cell:active::before{ opacity:0 !important; }
}

/* 클릭 탭 */
.cell.tap::before{
    opacity: 1;
    background: rgba(73,207,255,.14);
    box-shadow: 0 0 16px rgba(73,207,255,.22);
}

/* 피드백 */
.cell.flash{ z-index:2; }
.cell.flash::before{ background: var(--c-accent); box-shadow:0 0 22px var(--c-accent); opacity:1; }
.cell.correct{ z-index:2; }
.cell.correct::before{ background: var(--c-good); box-shadow:0 0 20px var(--c-good); opacity:1; }
.cell.wrong{ z-index:2; }
.cell.wrong::before{ background: var(--c-bad); box-shadow:0 0 20px var(--c-bad); opacity:1; }

/* Overlay (스크롤 허용) */
#overlay{
    position:absolute; inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    display:flex; flex-direction:column; gap:16px; /* 18 → 16 */
    align-items:center; justify-content:center;
    z-index:3;
    transition:opacity .22s;
    padding:6px;             /* 12 → 10 */
    overflow:auto;
}
#overlay.hidden{opacity:0; pointer-events:none}
#overlay.hidden #startBtn, #overlay.hidden #endCard{ visibility:hidden; }

/* Start/Play Again 버튼 */
#startBtn{
    font-size:17px; /* 18 → 17 */
    font-weight:700;
    color:var(--c-accent);
    background:rgba(0,0,0,.55);
    border:2px solid var(--c-accent);
    padding:11px 24px; /* 12x28 → 11x24 */
    border-radius:12px;
    cursor:pointer;
    transition:transform .10s, background .20s, box-shadow .20s, opacity .18s;
    box-shadow:0 0 20px rgba(73,207,255,.25);
}
#startBtn:hover{transform:scale(1.04); background:rgba(73,207,255,.12)}
#startBtn:active{transform:scale(.98)}
#startBtn.disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
#startBtn.invisible{ visibility:hidden; }

/* End Card (컴팩트) — 패딩 축소 */
#endCard{
    width:min(92%, 460px);           /* 480 → 460 */
    padding: 10px 18px 14px;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,10,20,.70));
    border:1px solid rgba(73,207,255,.52);
    box-shadow:0 0 32px rgba(73,207,255,.28);
    transform: translateY(6px) scale(.98);
    opacity:0;
    transition:opacity .24s ease, transform .24s ease;
    text-align:center;
    max-height: calc(100% - 16px);
    overflow:auto;
}
#endCard.show{ opacity:1; transform: translateY(0) scale(1); }
#endCard.hidden{ display:none; }


.end-title{
    font-size: clamp(18px, 3.6vh, 26px);  /* 20/4vh/30 → 18/3.6vh/26 */
    font-weight:900;
    letter-spacing:2px;
    color:#f3fbff;
    text-shadow:0 0 18px rgba(255,80,80,.45), 0 0 10px rgba(255,80,80,.30);
    margin-top: 0;       /* 안전 차원에서 명시 */
    margin-bottom: 6px;  /* 8px → 6px */
}

/* ✅ Score/High 박스 전체 높이 줄이기 */
.end-scores{
    display:flex;
    gap:14px;                     /* 12 → 14 */
    justify-content:center;
    flex-wrap:wrap;                      /* 작은 화면 줄바꿈 허용 */
    margin-top:4px;
}
.end-scores .row{
    display:flex; flex-direction:column; align-items:center;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    padding:14px 16px;            /* 10x12 → 14x16 (복원) */
    min-width:140px;              /* 110 → 140 (복원) */
    box-shadow: inset 0 0 16px rgba(73,207,255,.08);
    gap: 4px;            /* 5 → 4 (더 촘촘) */
}
.end-scores .row span{
    font-size:13px;               /* 12 → 13 (복원) */
    line-height:1.1;
    opacity:.9;
    letter-spacing:.35px;
    color:#9edcff;
    margin: 0;                 /* 개별 마진 제거(모든 간격은 gap으로) */
}
.end-scores .row strong{
    font-size: clamp(22px, 4vh, 32px);  /* 20/3.6vh/28 → 22/4vh/32 (복원) */
    line-height: 1.1;          /* 숫자 자체 세로 여유 약간 */
    margin: 0;
    letter-spacing:.55px;
    color:#e8fbff;
    text-shadow:0 0 9px rgba(73,207,255,.26);
}
/* Score 박스(첫 번째) 숫자만 더 낮게 */
.end-scores .row:first-child strong{
    font-size: clamp(14px, 2.2vh, 18px); /* 기존보다 한 단계 ↓ */
    line-height: 0.95;                   /* 세로 높이 압축 */
    margin-top: 1px;                     /* 위 여백도 소폭 축소 */
}
/* === Game Over 아래 Score/High 박스만 더 작게 === */
#endCard .end-scores{
    gap: 5px;                /* 좌우 간격 축소 */
    margin-top: 2px;         /* 위 여백 축소 */
}

#endCard .end-scores .row{
    padding: 6px 8px;        /* 내부 패딩 축소 (세로 ↓) */
    min-width: 78px;         /* 최소 가로 폭 축소 */
}

/* 라벨(Score/High) */
#endCard .end-scores .row > span{
    font-size: 10px;         /* 10~10.5px 권장 */
    line-height: 1.0;
}

/* 숫자(둘 다 공통으로 낮춤) */
#endCard .end-scores .row > strong{
    font-size: clamp(12px, 2.0vh, 17px);
    line-height: 0.85;                   /* 세로 높이 더 압축 */
    margin-top: 2px;                       /* 위 여백 제거 */
    letter-spacing: 0.5px;
}

/* ====== 그래프 영역: 강력 축소 (모바일·태블릿 스크롤 방지) ====== */
#statsBlock{
    margin-top: 10px;    /* 12px → 10px */
    padding:10px;
    border-radius:12px;
    border:1px solid rgba(73,207,255,.25);
    background: rgba(0,0,0,.35);
    box-shadow: inset 0 0 14px rgba(73,207,255,.10);
    max-height: 26dvh;              /* 872px 폭 단말 포함 전반 축소 */
    overflow: hidden;
    min-height: 0;                  /* flex 자식 축소 허용 */
}
#monthSummary{
    font-size:11px;
    color:#bfefff;
    opacity:.9;
    margin-bottom:6px;
}
.chartWrap{
    width:100%;
    max-height: 14dvh;              /* 래퍼 자체도 더 낮춤 */
    border-radius:10px;
    overflow:hidden;
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    margin-bottom:6px;
    padding:4px;                    /* 여백 최소화 */
    min-height: 0;
}
#distChart{
    display:block;
    width:100%;

    /* 1) 구형/캐시 대비 안전 px */
    height: 48px;

    /* 2) 표준 vh 폴백 */
    height: clamp(36px, 12vh, 64px);

    /* 3) iOS 안전 뷰포트(svh) 지원 시 덮어씀 */
    height: clamp(36px, 10svh, 64px);

    /* 4) 최신 동적 뷰포트(dvh) 지원 시 최종 덮어씀 */
    height: clamp(36px, 10dvh, 64px);
}

/* dvh 미지원(iOS 구버전 등)일 때 한 번 더 낮춤 */
@supports not (height: 1dvh) {
    #distChart { height: clamp(36px, 12vh, 56px); }
    .chartWrap { max-height: 12vh; }
}

#statsStatus{
    margin-top:4px;
    font-size:10px;
    color:#9edcff;
    opacity:.85;
    display: none !important;
}

/* 화면 낮은 환경(가로 폰 등) */
@media (max-height: 640px){
    #endCard{ padding:12px 16px 12px; }   /* 카드 패딩 추가 축소 */
    .end-scores{ gap:5px; }
    .end-scores .row{ padding:6px 8px; }
    .end-scores .row strong{ font-size: clamp(14px, 2.3vh, 18px); }

    #statsBlock{ max-height: 24dvh; }
    .chartWrap{ max-height: 12dvh; }
    #distChart{ height: clamp(32px, 9dvh, 56px); }
}

/* 폭 좁은 모바일 */
@media (max-width: 420px){
    .end-scores{ gap:5px; }
    .end-scores .row{ padding:6px 8px; min-width:80px; }
    .end-scores .row span{ font-size:10px; }
    .end-scores .row strong{ font-size: clamp(14px, 2.3vh, 18px); }

    #statsBlock{ max-height: 22dvh; }
    .chartWrap{ max-height: 12dvh; }
    #distChart{ height: clamp(30px, 14vw, 52px); }

    #percentileText{ font-size: 9.5px; }
    #percentileText .pt-line{ gap: 5px; }
}

/* 아주 작은 폭(아이폰 SE 등) */
@media (max-width: 360px){
    .end-scores .row{
        padding:12px 14px;
        min-width:120px;
        gap: 3px;
    }
    .end-scores .row strong{
        font-size: clamp(20px, 3.6vh, 28px);
    }

    #statsBlock{ max-height: 20dvh; }
    .chartWrap{ max-height: 11dvh; }
    #distChart{ height: clamp(28px, 13vw, 48px); }
}

/* 레벨 토스트 */
#toast{
    position:absolute;
    top:22px;
    left:50%; transform:translateX(-50%);
    color:#e9fbff;
    padding:6px 16px;
    border-radius:999px;
    border:1px solid rgba(73,207,255,.55);
    background:
            linear-gradient(180deg, rgba(0,40,60,.75), rgba(0,24,40,.65)),
            repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px);
    box-shadow: 0 0 16px rgba(73,207,255,.35), inset 0 0 12px rgba(73,207,255,.15);
    font-weight:800; font-size:12px;
    letter-spacing:1.1px;
    text-transform:uppercase;
    display:inline-flex; align-items:center; gap:6px;
    max-width:calc(100% - 20px);
    white-space:nowrap;
    opacity:0; pointer-events:none;
    z-index:2;
    transition:opacity .20s, transform .20s;
}
#toast::before, #toast::after{
    content:"";
    width:9px; height:9px; border-radius:2px;
    transform: rotate(45deg);
    background: linear-gradient(180deg, rgba(73,207,255,.9), rgba(73,207,255,.2));
    box-shadow:0 0 10px rgba(73,207,255,.6);
}
#toast.show{ opacity:1; transform:translate(-50%, 4px); }

/* 중앙 배너 (Watch / Your Turn) */
#centerBanner{
    position:absolute;
    top:33%; left:50%;
    transform:translate(-50%, -50%) scale(.96);
    padding:14px 28px;
    border-radius:16px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(73,207,255,.45);
    color:#dff7ff;
    font-size: clamp(28px, 4.6vw, 40px);
    font-weight:800;
    letter-spacing:.5px;
    text-shadow:0 0 24px rgba(73,207,255,.42);
    box-shadow:0 0 24px rgba(73,207,255,.22);
    opacity:0; pointer-events:none;
    z-index:2;
    transition:opacity .22s ease, transform .22s ease;
    white-space:nowrap;
}
#centerBanner.show{ opacity:1; transform:translate(-50%, -50%) scale(1); }


/* 그래프 하단 퍼센타일 텍스트 최소화 */
#percentileText,
#highScoreLine{
    font-size: 10px;          /* ↓ 더 작게 */
    line-height: 1.05;        /* 세로 압축 */
    letter-spacing: .2px;
    color: #cfeeff;           /* 살짝 연하게 */
    opacity: .95;
    margin-top: 2px;          /* 상단 간격 축소 */
}

/* 두 줄일 때 간격 조금만 띄움 */
#percentileText + #highScoreLine{
    margin-top: 2px;
}

/* 퍼센타일 한 줄 표기 */
#percentileText{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
    font-size: 10px;      /* 필요하면 9.5px로 더 줄여도 됨 */
    line-height: 1.1;
    letter-spacing: .2px;
    color: #cfeeff;
    opacity: .97;
}
#percentileText .pt-line{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
#percentileText .pt-label{
    opacity: .85;
}
#percentileText .pt-value{
    font-weight: 700;
    letter-spacing: .2px;
}
#percentileText .pt-value.score{ /* Score 라인 색상 = 그래프 Score 라인 색 */
    color: rgba(181,129,255,0.95);  /* 보라: Score */
}
#percentileText .pt-value.high{  /* High 라인 색상 = 그래프 High 라인 색 */
    color: rgba(80,220,200,0.95);   /* 청록: High */
}
#percentileText .pt-sep{
    opacity: .55;
    margin: 0 2px;
}

/* EndCard 로딩 스피너 */
#endLoading{
    display:none;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 0 6px;
}
#endLoading .spin-wrap{
    display:flex; align-items:center; gap:10px;
    opacity:.9;
}
#endLoading .spin{
    width:14px; height:14px; border-radius:50%;
    border:2px solid rgba(255,255,255,.22);
    border-top-color: var(--c-accent);
    animation: endspin 0.9s linear infinite;
}
#endLoading .spin-text{
    font-size:12px; letter-spacing:.3px; color:#bfefff;
    text-shadow:0 0 10px rgba(73,207,255,.18);
}
@keyframes endspin{ to { transform: rotate(360deg); } }

/* ===== Brand (centered between HUD and game) ===== */
#brand{
    position: relative;             /* 문서 흐름에 따라 배치 */
    z-index: 5;
    pointer-events: none;           /* 입력 방해 X */

    /* 크기 크게 */
    font-family: ui-sans-serif, system-ui, Inter, "Segoe UI", Roboto, Arial;
    font-weight: 900;
    letter-spacing: 0.8px;
    font-size: clamp(28px, 10vw, 60px);  /* ⬅ 크기 업! */
    line-height: 1.05;
    text-align: center;

    /* HUD와 게임 사이 간격 */
    margin: 8px auto 10px;          /* 위쪽/아래쪽 살짝만 */
    width: fit-content;

    /* 은은한 그라디언트 + 글로우 */
    background: linear-gradient(180deg, #eaf8ff 0%, #a7e3ff 45%, #6bd6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
            0 2px 10px rgba(73,207,255,.18),
            0 0 24px rgba(73,207,255,.16);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

#brand .plus{
    color: #49cfff;                 /* + 포인트 컬러 */
    text-shadow:
            0 0 14px rgba(73,207,255,.45),
            0 0 26px rgba(73,207,255,.30);
}

/* 화면 높이가 아주 작으면 간격을 더 압축 */
@media (max-height: 700px){
    #brand{ margin: 6px auto 8px; font-size: clamp(26px, 5.4vw, 50px); }
}
@media (max-height: 600px){
    #brand{ margin: 4px auto 6px; font-size: clamp(24px, 5vw, 46px); }
}