/* mypage/game/shisen.css - ソラン文字畑 (네오브루탈리즘) */

/* ===== 네오브루탈리즘 변수 ===== */
:root{
    --nb-black:#1a1a2e;
    --nb-border:2.5px solid #1a1a2e;
    --nb-shadow:4px 4px 0 #1a1a2e;
    --nb-shadow-sm:3px 3px 0 #1a1a2e;
    --nb-shadow-lg:6px 6px 0 #1a1a2e;
    --nb-pink:#ff6b9d;
    --nb-yellow:#ffd93d;
    --nb-mint:#6bcb77;
    --nb-sky:#4fc3f7;
    --nb-coral:#ff8a65;
    --nb-purple:#b388ff;
    --nb-cream:#fff8e8;
    --nb-red:#ff5252;
    --nb-radius:12px;
}

/* 인라인(탭 내) 표시 */
.ss-inline-wrap{
    max-width:460px;width:100%;margin:0 auto;
    padding:4px 0
}

/* 모달 */
.ss-modal-overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:var(--nb-cream);z-index:9999;
    display:flex;align-items:flex-start;justify-content:center;
    box-sizing:border-box;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0
}
.ss-modal-content{
    width:100%;max-width:460px;min-height:100%;
    padding:8px 10px;box-sizing:border-box
}

/* 로딩/에러 */
.ss-loading{display:flex;justify-content:center;padding:60px 0}
.ss-error{
    text-align:center;padding:40px 20px;
    color:var(--nb-black);font-size:.9em;line-height:1.8;
    background:#fff;border:var(--nb-border);border-radius:var(--nb-radius);
    box-shadow:var(--nb-shadow)
}

/* ===== 메뉴 ===== */
.ss-menu{text-align:center}
.ss-menu-title{
    font-size:1.6em;font-weight:900;
    color:var(--nb-black);
    margin-bottom:6px;
    letter-spacing:-.02em
}
.ss-menu-subtitle{
    font-size:.82em;color:var(--nb-black);opacity:.7;
    margin-bottom:18px;line-height:1.6;
    background:#fff;border:var(--nb-border);border-radius:var(--nb-radius);
    padding:10px 14px;box-shadow:var(--nb-shadow-sm);
    text-align:left
}

.ss-sound-notice{
    font-size:.82em;font-weight:700;color:var(--nb-black);
    background:var(--nb-yellow);border:var(--nb-border);
    border-radius:var(--nb-radius);padding:10px 14px;margin-bottom:14px;
    box-shadow:var(--nb-shadow-sm)
}
.ss-difficulty-select{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.ss-diff-btn{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;border:var(--nb-border);border-radius:var(--nb-radius);
    background:#fff;cursor:pointer;font-family:inherit;
    text-align:left;transition:all .15s;touch-action:manipulation;
    box-shadow:var(--nb-shadow-sm)
}
.ss-diff-btn.active{
    background:var(--nb-mint);
    transform:translate(1px,1px);
    box-shadow:2px 2px 0 var(--nb-black)
}
.ss-diff-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--nb-black)}
.ss-diff-icon{font-size:1.5em}
.ss-diff-label{font-weight:800;font-size:.95em;color:var(--nb-black);flex:1}
.ss-diff-desc{font-size:.78em;color:var(--nb-black);opacity:.6;font-weight:600}

.ss-start-btn{
    display:block;width:100%;padding:16px;
    background:var(--nb-pink);
    color:#fff;border:var(--nb-border);border-radius:var(--nb-radius);
    font-size:1.05em;font-weight:800;cursor:pointer;font-family:inherit;
    transition:all .1s;margin-bottom:10px;touch-action:manipulation;
    box-shadow:var(--nb-shadow-lg);
    text-shadow:1px 1px 0 rgba(0,0,0,.15)
}
.ss-start-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--nb-black)}
.ss-ranking-btn{
    display:block;width:100%;padding:12px;
    background:var(--nb-sky);color:var(--nb-black);
    border:var(--nb-border);border-radius:var(--nb-radius);
    font-size:.9em;font-weight:700;cursor:pointer;font-family:inherit;
    transition:all .1s;margin-bottom:10px;touch-action:manipulation;
    box-shadow:var(--nb-shadow-sm)
}
.ss-ranking-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--nb-black)}
.ss-close-btn{
    display:block;width:100%;padding:12px;
    background:#fff;color:var(--nb-black);
    border:var(--nb-border);border-radius:var(--nb-radius);
    font-size:.9em;font-weight:700;cursor:pointer;font-family:inherit;
    transition:all .1s;touch-action:manipulation;
    box-shadow:var(--nb-shadow-sm)
}
.ss-close-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--nb-black)}

/* ===== 게임 플레이 ===== */
.ss-game{
    padding:0 0 8px 0;position:relative;
    display:flex;flex-direction:column;
    height:calc(100vh - 48px - env(safe-area-inset-bottom,0px));
    height:calc(100dvh - 48px - env(safe-area-inset-bottom,0px));
    box-sizing:border-box;overflow:hidden
}
.ss-header{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:8px;background:#fff;
    border:var(--nb-border);border-radius:var(--nb-radius);
    padding:8px 12px;box-shadow:var(--nb-shadow-sm);
    flex-shrink:0
}
.ss-match-info{font-size:.85em;font-weight:800;color:var(--nb-black)}
.ss-hint-btn{
    display:block;width:100%;padding:8px;
    background:var(--nb-yellow);border:var(--nb-border);
    border-radius:var(--nb-radius);cursor:pointer;font-family:inherit;
    font-size:.85em;font-weight:800;color:var(--nb-black);
    touch-action:manipulation;transition:all .1s;
    box-shadow:var(--nb-shadow-sm);flex-shrink:0
}
.ss-hint-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--nb-black)}
.ss-score-display{font-size:.95em;font-weight:800;color:var(--nb-pink)}
.ss-exit-x{
    background:none;border:none;cursor:pointer;
    font-size:1.4em;font-weight:700;color:var(--nb-black);opacity:.5;
    padding:0 0 0 8px;line-height:1;touch-action:manipulation
}
.ss-exit-x:active{opacity:1}
/* タイマーバー（残り時間表示） */
.ss-timer-bar{
    height:8px;background:#fff;border-radius:6px;margin-bottom:8px;overflow:hidden;
    border:2px solid var(--nb-black);flex-shrink:0
}
.ss-timer-bar-danger-border{border-color:var(--nb-red)}
.ss-timer-fill{
    height:100%;background:var(--nb-mint);border-radius:4px;
    transition:width 1s linear
}
.ss-timer-bar-danger{
    background:var(--nb-red);
    animation:ss-timer-pulse 1s ease infinite
}
.ss-timer-complete{
    background:var(--nb-yellow);
    animation:ss-timer-shine .6s ease
}
@keyframes ss-timer-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes ss-timer-shine{
    0%{filter:brightness(1)}
    50%{filter:brightness(1.3)}
    100%{filter:brightness(1)}
}

/* SVGアイコン共通 */
.ss-icon{display:inline-block;vertical-align:middle}
.ss-icon-inline{width:16px;height:16px;vertical-align:-2px}
.ss-icon-life{width:16px;height:16px;vertical-align:-2px;margin:0 1px}
.ss-icon-sm{width:14px;height:14px;vertical-align:-2px}
.ss-icon-title{width:22px;height:22px;vertical-align:-3px}
.ss-icon-medal{width:22px;height:22px;vertical-align:-4px}

.ss-combo{
    text-align:center;font-size:.9em;font-weight:900;
    color:var(--nb-coral);margin-bottom:4px;
    min-height:1.3em;flex-shrink:0;
    text-shadow:1px 1px 0 rgba(0,0,0,.1)
}
.ss-combo:not(:empty){animation:ss-combo-pop .4s ease}
.ss-combo-fade{opacity:0}
@keyframes ss-combo-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}

/* ===== 그리드 ===== */
.ss-grid{
    display:grid;gap:4px;margin-bottom:8px;
    padding:8px;background:#fff;
    border:var(--nb-border);border-radius:var(--nb-radius);
    box-shadow:var(--nb-shadow);flex-shrink:0
}
.ss-cell{
    aspect-ratio:1;
    display:flex;align-items:center;justify-content:center;
    font-size:1.1em;font-weight:800;border-radius:8px;
    user-select:none;-webkit-tap-highlight-color:transparent;
    touch-action:manipulation;transition:all .12s;
    min-height:42px
}

/* 테두리 셀 (터치 가능) */
.ss-cell-border{
    background:var(--nb-cream);color:var(--nb-black);
    border:2.5px solid var(--nb-black);
    cursor:pointer;
    box-shadow:2px 2px 0 var(--nb-black)
}
.ss-cell-border:active{
    transform:translate(2px,2px);
    box-shadow:0 0 0 var(--nb-black)
}

/* 내부 셀 (터치 불가) */
.ss-cell-inner{
    background:#e8e8e8;color:#aaa;
    border:2px dashed #ccc;
    cursor:default;opacity:.6
}

/* 선택된 셀 */
.ss-cell-selected{
    background:var(--nb-yellow)!important;
    border-color:var(--nb-black)!important;
    color:var(--nb-black)!important;
    transform:translate(2px,2px);
    box-shadow:0 0 0 var(--nb-black)!important
}

/* 빈 셀 */
.ss-cell-empty{
    background:transparent;border:none;
    pointer-events:none;box-shadow:none
}

/* 힌트 하이라이트 */
.ss-cell-hint{
    animation:ss-hint-glow 2s ease
}
@keyframes ss-hint-glow{
    0%{background:var(--nb-purple);box-shadow:0 0 0 4px var(--nb-purple)}
    100%{background:initial;box-shadow:2px 2px 0 var(--nb-black)}
}


/* 라이프 표시 */
.ss-lives{font-size:.85em;letter-spacing:1px}

/* 정답 클리어 애니메이션 (임팩트) */
.ss-cell-clear{
    animation:ss-clear-impact .5s ease forwards;
    z-index:10;position:relative
}
@keyframes ss-clear-impact{
    0%{transform:scale(1) rotate(0);opacity:1}
    30%{transform:scale(1.3) rotate(5deg);background:var(--nb-mint);box-shadow:0 0 0 6px var(--nb-mint)}
    60%{transform:scale(1.1) rotate(-3deg);opacity:.8}
    100%{transform:scale(0) rotate(10deg);opacity:0;box-shadow:none}
}

/* 파티클 이펙트 */
.ss-particle{
    position:fixed;width:10px;height:10px;border-radius:3px;
    pointer-events:none;z-index:10000;
    border:1.5px solid var(--nb-black);
    animation:ss-particle-fly .5s ease-out forwards
}
@keyframes ss-particle-fly{
    0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}
    100%{transform:translate(var(--dx),var(--dy)) scale(0) rotate(180deg);opacity:0}
}

/* 제거 애니메이션 (기존) */
.ss-cell-removing{animation:ss-remove .3s ease forwards}
@keyframes ss-remove{
    0%{transform:scale(1);opacity:1}
    100%{transform:scale(0) rotate(15deg);opacity:0}
}

/* ===== 입력 영역 ===== */
.ss-input-area{
    margin-bottom:8px;padding:6px 12px;
    background:var(--nb-cream);
    border:var(--nb-border);border-radius:var(--nb-radius);
    box-shadow:var(--nb-shadow-sm);flex-shrink:0
}
.ss-input-chars{
    display:flex;gap:6px;justify-content:center;
    height:52px;align-items:center;flex-wrap:nowrap;
    margin-bottom:0;overflow:hidden
}
.ss-input-char{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;
    background:var(--nb-yellow);border:var(--nb-border);border-radius:8px;
    font-size:1.2em;font-weight:800;color:var(--nb-black);
    cursor:pointer;transition:all .12s;touch-action:manipulation;
    box-shadow:var(--nb-shadow-sm)
}
.ss-input-char:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--nb-black)}
.ss-input-placeholder{
    font-size:.85em;color:var(--nb-black);opacity:.4;font-weight:700
}

/* ===== 힌트 ===== */
.ss-hints{
    margin-bottom:8px;padding:8px 10px;
    background:#fff;border:var(--nb-border);border-radius:var(--nb-radius);
    box-shadow:var(--nb-shadow-sm);
    flex:1;min-height:60px;box-sizing:border-box;
    overflow:hidden
}
.ss-hints-list{
    display:flex;flex-wrap:wrap;gap:5px;font-size:1em;
    height:100%;align-items:center;align-content:center;justify-content:center
}
.ss-hint-word{
    background:var(--nb-sky);color:var(--nb-black);
    padding:5px 12px;border-radius:8px;font-weight:700;
    cursor:pointer;transition:all .1s;touch-action:manipulation;
    border:2px solid var(--nb-black);
    box-shadow:2px 2px 0 var(--nb-black);
    flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ss-hint-word:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--nb-black)}
.ss-hint-matched{
    background:var(--nb-mint);color:#fff;
    animation:ss-hint-fade .8s .2s ease forwards;
    pointer-events:none
}
@keyframes ss-hint-fade{
    0%{transform:scale(1.1);opacity:1}
    100%{transform:scale(.8) rotate(5deg);opacity:0}
}
.ss-hint-empty{color:var(--nb-black);opacity:.4;font-size:.85em;font-weight:600}

/* 조립창 글자 중앙 모임 애니메이션 */
.ss-char-merge{animation:ss-char-merge .3s ease forwards}
@keyframes ss-char-merge{
    0%{transform:scale(1);opacity:1}
    100%{transform:scale(.3) translateY(-8px);opacity:0}
}

/* 단어 카드 (정답 시 조립창에 표시) */
.ss-word-card{
    display:flex;align-items:center;justify-content:center;gap:8px;
    animation:ss-wc-pop .35s ease;flex-wrap:wrap
}
.ss-wc-korean{font-size:1.4em;font-weight:900;color:var(--nb-pink)}
.ss-wc-japanese{font-size:.85em;color:var(--nb-black);opacity:.6;font-weight:600}
.ss-wc-score{font-size:.9em;font-weight:800;color:var(--nb-coral)}
.ss-wc-combo{font-size:.75em;font-weight:900;color:var(--nb-coral);width:100%;text-align:center}
@keyframes ss-wc-pop{
    0%{transform:scale(.5) rotate(-5deg);opacity:0}
    60%{transform:scale(1.1) rotate(2deg)}
    100%{transform:scale(1) rotate(0);opacity:1}
}

/* 플로팅 토스트 (에러/정보 메시지) */
.ss-toast{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    padding:10px 22px;border-radius:var(--nb-radius);font-size:.85em;font-weight:800;
    pointer-events:none;z-index:100;
    border:var(--nb-border);
    animation:ss-toast-in .25s ease;white-space:nowrap
}
.ss-toast-error{background:var(--nb-red);color:#fff;box-shadow:var(--nb-shadow-sm)}
.ss-toast-info{background:var(--nb-mint);color:var(--nb-black);box-shadow:var(--nb-shadow-sm)}
.ss-toast-hide{opacity:0;transition:opacity .4s}
@keyframes ss-toast-in{
    0%{transform:translate(-50%,-50%) scale(.8) rotate(-3deg);opacity:0}
    100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
}

.ss-exit-btn{
    display:block;width:100%;padding:8px;
    background:#fff;color:var(--nb-black);
    border:var(--nb-border);border-radius:var(--nb-radius);
    font-size:.82em;font-weight:700;cursor:pointer;font-family:inherit;
    touch-action:manipulation;transition:all .1s;
    box-shadow:var(--nb-shadow-sm);flex-shrink:0
}
.ss-exit-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--nb-black)}

/* ===== 결과 ===== */
.ss-result{text-align:center}
.ss-result-title{
    font-size:1.3em;font-weight:900;color:var(--nb-black);margin-bottom:10px;
    background:var(--nb-yellow);border:var(--nb-border);border-radius:var(--nb-radius);
    padding:12px;box-shadow:var(--nb-shadow-sm);
    display:inline-block
}
.ss-result-score{
    font-size:2.8em;font-weight:900;
    color:var(--nb-pink);margin-bottom:4px;
    text-shadow:2px 2px 0 rgba(0,0,0,.08)
}
.ss-result-score span{font-size:.4em;font-weight:700}
.ss-new-record{
    font-size:1em;font-weight:900;color:var(--nb-black);
    background:var(--nb-yellow);border:var(--nb-border);border-radius:8px;
    padding:6px 16px;margin-bottom:14px;display:inline-block;
    box-shadow:var(--nb-shadow-sm);animation:ss-combo-pop .5s ease
}

.ss-result-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    margin-bottom:16px;text-align:left
}
.ss-stat{
    padding:10px 12px;background:#fff;
    border:var(--nb-border);border-radius:10px;
    display:flex;justify-content:space-between;align-items:center;
    box-shadow:var(--nb-shadow-sm)
}
.ss-stat-label{font-size:.8em;color:var(--nb-black);opacity:.6;font-weight:600}
.ss-stat-value{font-size:.9em;font-weight:800;color:var(--nb-black)}

.ss-result-words{
    margin-bottom:16px;text-align:left;
    max-height:180px;overflow-y:auto;
    border:var(--nb-border);border-radius:var(--nb-radius);padding:12px;
    background:#fff;box-shadow:var(--nb-shadow-sm)
}
.ss-result-words-title{font-size:.8em;font-weight:700;color:var(--nb-black);opacity:.6;margin-bottom:6px}
.ss-result-word{
    display:flex;align-items:center;gap:6px;
    padding:4px 0;border-bottom:2px solid var(--nb-cream)
}
.ss-result-word:last-child{border-bottom:none}
.ss-rw-ko{font-weight:800;font-size:.9em;flex:1;color:var(--nb-black)}
.ss-rw-jp{font-size:.82em;color:var(--nb-black);opacity:.5;flex:1;font-weight:600}
.ss-rw-ok{color:var(--nb-mint);font-weight:900;font-size:.85em}
.ss-rw-ng{color:var(--nb-red);font-weight:900;font-size:.85em}
.ss-rw-missed{opacity:.4}

/* ===== 랭킹 ===== */
.ss-ranking{text-align:center}
.ss-ranking-title{font-size:1.3em;font-weight:900;color:var(--nb-black);margin-bottom:4px}
.ss-ranking-period{font-size:.8em;color:var(--nb-black);opacity:.5;font-weight:600;margin-bottom:16px}
.ss-rank-list{margin-bottom:16px;text-align:left;max-height:300px;overflow-y:auto}
.ss-rank-row{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:10px;
    margin-bottom:6px;background:#fff;
    border:var(--nb-border);box-shadow:var(--nb-shadow-sm)
}
.ss-rank-pos{font-size:1em;min-width:28px;text-align:center;font-weight:800}
.ss-rank-avatar{
    width:32px;height:32px;border-radius:50%;overflow:hidden;
    background:var(--nb-purple);
    border:2px solid var(--nb-black);
    display:flex;align-items:center;justify-content:center;
    font-size:.85em;font-weight:800;color:#fff;flex-shrink:0
}
.ss-rank-name{flex:1;font-weight:700;font-size:.9em;color:var(--nb-black)}
.ss-rank-score{font-weight:800;color:var(--nb-pink);font-size:.95em}
.ss-rank-empty{
    padding:30px;color:var(--nb-black);opacity:.5;font-size:.9em;font-weight:600
}
.ss-my-stats{
    display:flex;justify-content:center;gap:20px;
    font-size:.85em;color:var(--nb-black);opacity:.6;font-weight:600;
    margin-bottom:20px
}
.ss-my-stats strong{color:var(--nb-black);opacity:1}

/* ===== 반응형: 작은 화면 ===== */
@media(max-width:360px){
    .ss-cell{font-size:.95em;min-height:36px}
    .ss-input-char{width:36px;height:36px;font-size:1em}
}