/* mypage/game/typing_defense.css - ポロポロハングル (네오브루탈리즘 테마) */

/* 게임 전체 래퍼 */
.td-game{position:relative;width:100%;height:100%;flex:1;background:#FFFDF5;overflow:hidden;touch-action:none;user-select:none;display:flex;flex-direction:column}

/* 배경 데코 파티클 */
.td-stars{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.td-star{position:absolute;width:auto;height:auto;background:none;border-radius:0;font-weight:700;opacity:.12;animation:td-twinkle 6s ease-in-out infinite alternate}
@keyframes td-twinkle{0%{opacity:.08;transform:translateY(0) rotate(-5deg)}50%{opacity:.18}100%{opacity:.1;transform:translateY(8px) rotate(5deg)}}

/* 상단 HUD */
.td-hud{position:absolute;top:0;left:0;right:0;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:center;z-index:10;font-size:.82em;color:#000}
.td-score{font-weight:800;font-size:1em}
.td-lives{display:flex;gap:3px}
.td-life{font-size:1em;transition:all .3s}
.td-life.lost{opacity:.2;transform:scale(.7)}
.td-level{font-size:.75em;color:#555}
.td-combo{font-size:.85em;font-weight:800;color:#FF3366;transition:all .2s}

/* 떨어지는 단어 */
.td-word{position:absolute;padding:6px 14px;background:#fff;border:3px solid #000;border-radius:8px;color:#000;font-weight:700;font-size:1.15em;white-space:nowrap;transition:transform .05s linear;z-index:5;box-shadow:3px 3px 0 #000}
.td-word .td-word-kr{font-size:.72em;color:#555;margin-top:1px}
.td-word.td-targeted{border-color:#FF3366;box-shadow:3px 3px 0 #FF3366}
.td-word.td-matched{color:#aaa}

/* 보호 실드 */
.td-shield-container{position:absolute;bottom:64px;left:0;right:0;z-index:9;display:flex;flex-direction:column-reverse;gap:3px;padding:0 12px 4px}
.td-shield-layer{height:6px;border-radius:3px;background:#FF3366;border:2px solid #000;box-shadow:2px 2px 0 #000;transition:all .2s}
.td-shield-layer:nth-child(1){opacity:.5}
.td-shield-layer:nth-child(2){opacity:.6}
.td-shield-layer:nth-child(3){opacity:.75}
.td-shield-layer:nth-child(4){opacity:.88}
.td-shield-layer:nth-child(5){opacity:1}
.td-shield-layer.td-shield-break{animation:td-shieldBreak .4s ease-out forwards}
@keyframes td-shieldBreak{
    0%{opacity:1;transform:scaleX(1);filter:brightness(1)}
    20%{opacity:1;transform:scaleX(1.15);filter:brightness(1.5)}
    100%{opacity:0;transform:scaleX(0);height:0;margin:0;padding:0}
}

/* 실드 HUD 아이콘 */
.td-shield-icon{font-size:.85em;transition:all .3s}
.td-shield-icon.lost{opacity:.15;transform:scale(.7)}

/* 지상 영역 */
.td-ground{position:absolute;bottom:0;left:0;right:0;height:80px;background:#88CC77;border-top:3px solid #000;z-index:8}

/* 학생 아바타 */
.td-avatar{z-index:12;text-align:center;display:flex;flex-direction:column;align-items:center}
.td-avatar-body{width:38px;height:38px;background:#FFCC00;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid #000;box-shadow:2px 2px 0 #000;font-size:.95em;color:#000;font-weight:800;transition:transform .15s,box-shadow .15s;overflow:hidden}
.td-avatar-body.firing{transform:scale(.85);box-shadow:0 0 0 #000}
/* 大砲の砲身 — 発射の瞬間に標的方向へ回転 (launchMissile が transform を更新) */
/* 막대기(포신): 원 중심을 축으로 발사 방향을 향해 회전. translateX 로 정확히 중앙정렬(border 무관) */
.td-cannon{position:absolute;bottom:16px;left:50%;width:8px;height:32px;background:#333;border:2px solid #000;border-radius:4px;transform-origin:50% 100%;transform:translateX(-50%) rotate(0deg);transition:transform .1s ease-out;z-index:11}
/* 원(받침대): 막대기 하단(피벗)에 중심을 둠. translate 로 중심 일치. 대칭이라 회전해도 안 보임 */
.td-cannon::before{content:"";position:absolute;left:50%;bottom:0;width:26px;height:26px;transform:translate(-50%,50%);background:#FFCC00;border:3px solid #000;border-radius:50%;z-index:-1}

/* 음성 어시스트 토글 버튼 */
.td-voice-btn{background:#fff;border:2px solid #000;border-radius:8px;box-shadow:2px 2px 0 #000;font-size:.95em;padding:2px 6px;cursor:pointer;margin-right:4px;line-height:1;opacity:.55}
.td-voice-btn.on{opacity:1;background:#FFE066}
.td-voice-btn.td-voice-live{background:#22CC66;animation:td-voicePulse .8s ease-in-out infinite}
.td-voice-btn.td-voice-proc{background:#3366FF}
@keyframes td-voicePulse{0%,100%{box-shadow:2px 2px 0 #000}50%{box-shadow:2px 2px 0 #000,0 0 0 4px rgba(34,204,102,.4)}}

/* 통합 랭킹 화면 */
.td-rank-title{font-size:1.2em;font-weight:900;color:#000;margin:8px 0 2px}
.td-rank-period{font-size:.72em;color:#777;margin-bottom:10px}
.td-rank-list{width:100%;max-width:300px;display:flex;flex-direction:column;gap:5px}
.td-rank-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#fff;border:2px solid #000;border-radius:8px;box-shadow:2px 2px 0 #000}
.td-rank-row.td-rank-top{background:#FFF4CC}
.td-rank-pos{font-weight:900;color:#FF3366;min-width:24px;text-align:center;font-size:.95em}
.td-rank-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#eee;border:2px solid #000;font-size:.8em;font-weight:800;flex-shrink:0}
.td-rank-name{flex:1;color:#000;font-size:.9em;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-rank-score{font-weight:800;color:#000;font-size:.9em}
.td-rank-empty{color:#777;font-size:.85em;padding:24px 0}
.td-rank-mine{margin-top:12px;font-size:.82em;color:#333}
.td-avatar-name{font-size:.58em;color:#000;font-weight:600;margin-top:3px;white-space:nowrap;max-width:56px;overflow:hidden;text-overflow:ellipsis}

/* 미사일 */
.td-missile{position:absolute;width:4px;height:16px;background:#FF3366;border-radius:2px;z-index:6;pointer-events:none;box-shadow:0 0 6px rgba(255,51,102,.5);transform-origin:center center}

/* 폭발 */
.td-explosion{position:absolute;z-index:7;pointer-events:none;animation:td-explode .5s ease-out forwards}
@keyframes td-explode{
    0%{transform:scale(0);opacity:1}
    50%{transform:scale(1.2);opacity:.8}
    100%{transform:scale(1.5);opacity:0}
}
.td-explosion-particle{position:absolute;width:4px;height:4px;border-radius:50%;animation:td-particle .5s ease-out forwards}
@keyframes td-particle{
    0%{opacity:1;transform:translate(0,0) scale(1)}
    100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}
}

/* 입력 영역 */
.td-input-area{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;z-index:15;display:flex;gap:6px;align-items:center;background:#FFFDF5;border-top:3px solid #000}
.td-input{flex:1;padding:10px 14px;background:#fff;border:2px solid #000;border-radius:8px;color:#000;font-size:1em;font-weight:600;font-family:inherit;outline:none;transition:border-color .2s;-webkit-appearance:none;box-shadow:2px 2px 0 #000}
.td-input:focus{border-color:#3366FF;box-shadow:2px 2px 0 #3366FF}
.td-input::placeholder{color:#999}

/* 시작 화면 / 로비 공통 */
.td-start-screen{position:relative;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;background:#FFFDF5;text-align:center;padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.td-title{font-size:1.4em;font-weight:900;color:#000;margin-bottom:4px}
.td-subtitle{font-size:.8em;color:#555;font-weight:600;margin-bottom:24px}
.td-start-btn{padding:14px 36px;background:#FF3366;color:#fff;border:3px solid #000;border-radius:10px;font-size:1em;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:4px 4px 0 #000;transition:all .1s}
.td-start-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.td-high-score{margin-top:16px;font-size:.8em;color:#555;font-weight:600}

/* 게임오버 화면 */
.td-gameover{position:relative;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;background:#FFFDF5;text-align:center;padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));animation:td-fadeIn .5s ease}
@keyframes td-fadeIn{from{opacity:0}to{opacity:1}}
.td-gameover-title{font-size:1.3em;font-weight:900;color:#000;margin-bottom:16px}
.td-gameover-stats{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;font-size:.9em;color:#555}
.td-gameover-stats .td-stat{display:flex;justify-content:space-between;gap:20px}
.td-gameover-stats .td-stat-val{font-weight:800;color:#000}
.td-retry-btn{padding:12px 32px;background:#FF3366;color:#fff;border:3px solid #000;border-radius:10px;font-size:.95em;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:4px 4px 0 #000;transition:all .1s;margin-bottom:8px}
.td-retry-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.td-back-btn{padding:8px 20px;background:#fff;border:2px solid #000;color:#000;border-radius:8px;font-size:.82em;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:3px 3px 0 #000;transition:all .1s}
.td-back-btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 #000}

/* 랭킹 (위젯 외부) */
.td-ranking{margin-top:12px}
.td-ranking-title{font-size:.85em;font-weight:800;color:#000;margin-bottom:8px;display:flex;align-items:center;gap:4px}
.td-ranking-list{display:flex;flex-direction:column;gap:4px}
.td-ranking-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#FFF5CC;border:2px solid #000;border-radius:8px;font-size:.85em;box-shadow:2px 2px 0 #000}
.td-ranking-row.me{background:#FFE066;border-width:3px}
.td-ranking-rank{font-weight:900;color:#FF3366;min-width:20px;text-align:center}
.td-ranking-name{flex:1;font-weight:700;color:#000}
.td-ranking-score{font-weight:800;color:#FF3366}

/* 위젯 카드 */
.td-widget{display:flex;align-items:center;justify-content:space-between;gap:12px}
.td-widget-info{flex:1}
.td-widget-desc{font-size:.82em;color:#555;font-weight:600;margin-bottom:8px;line-height:1.4}
.td-widget-play{padding:10px 24px;background:#FFCC00;color:#000;border:3px solid #000;border-radius:10px;font-size:.9em;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:3px 3px 0 #000;transition:all .1s;white-space:nowrap;flex-shrink:0}
.td-widget-play:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}

/* 위젯 프리뷰 */
.td-widget-preview{width:48px;height:48px;background:#FFF5CC;border:2px solid #000;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.3em;flex-shrink:0;box-shadow:2px 2px 0 #000}

/* 키보드 포함 게임 - 풀스크린 */
.td-game.td-with-kb{flex:1;min-height:0}

/* 게임 내 키보드 래퍼 */
#tdKeyboard.td-kb-wrap{border-radius:0 0 16px 16px}

/* レア単語スタイル */
.td-word-rare{animation:td-rarePulse 1.5s infinite alternate !important}
@keyframes td-rarePulse{0%{filter:brightness(1)}100%{filter:brightness(1.1)}}
.td-word-gold{animation:td-goldWord 1s infinite alternate !important}
@keyframes td-goldWord{0%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.1) saturate(1.1)}100%{filter:brightness(1) saturate(1)}}

/* ===== 로비 화면 ===== */
.td-lobby-game{height:100%;flex:1}
.td-lobby-screen{position:relative;z-index:20;display:flex;flex-direction:column;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));flex:1;min-height:0}
.td-lobby-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.td-online-badge{font-size:.72em;font-weight:700;color:#000;background:#88EEBB;border:2px solid #000;padding:3px 10px;border-radius:20px;box-shadow:2px 2px 0 #000}
.td-refresh-btn{width:28px;height:28px;border-radius:50%;border:2px solid #000;background:#fff;color:#000;font-size:1.1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;padding:0;line-height:1;box-shadow:2px 2px 0 #000;font-weight:800}
.td-refresh-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
@keyframes td-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.td-refresh-btn.td-spinning{animation:td-spin .6s ease}
.td-lobby-rooms{flex:1;overflow-y:auto;margin-bottom:12px;-webkit-overflow-scrolling:touch;min-height:0}
.td-lobby-empty{text-align:center;padding:24px 0;color:#555;font-size:.82em;font-weight:600}
.td-lobby-section-label{font-size:.72em;font-weight:700;color:#555;margin-bottom:6px;padding-left:2px}
.td-lobby-room-card{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#fff;border:2px solid #000;border-radius:10px;margin-bottom:6px;cursor:pointer;transition:all .1s;box-shadow:3px 3px 0 #000}
.td-lobby-room-card.td-room-waiting:active{transform:translate(1px,1px);box-shadow:2px 2px 0 #000}
.td-lobby-room-card.td-room-playing{opacity:.55;cursor:default}
.td-lobby-room-info{display:flex;align-items:center;gap:8px}
.td-lobby-room-code{font-weight:800;color:#000;font-size:.9em;letter-spacing:1px}
.td-lobby-room-creator{font-size:.75em;color:#555;font-weight:600}
.td-lobby-room-meta{display:flex;align-items:center;gap:8px}
.td-lobby-room-players{font-size:.75em;color:#555;font-weight:600}
.td-lobby-room-status{font-size:.65em;font-weight:700;padding:2px 8px;border-radius:6px;border:2px solid #000}
.td-lobby-room-status.waiting{background:#88EEBB;color:#000}
.td-lobby-room-status.playing{background:#FF3366;color:#fff}
.td-lobby-actions{text-align:center}
.td-lobby-create-btn{width:100%;margin-bottom:8px;padding:12px}
.td-lobby-exit-btn{margin-top:10px;padding:8px 20px;background:#fff;border:2px solid #000;border-radius:8px;color:#000;font-size:.78em;cursor:pointer;font-family:inherit;font-weight:700;-webkit-tap-highlight-color:transparent;box-shadow:2px 2px 0 #000;transition:all .1s}
.td-lobby-exit-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}

/* 게임 중 방 카드 클릭 가능 */
.td-room-playing{cursor:pointer;opacity:.85}
.td-room-playing:active{opacity:1;transform:scale(.98)}

/* 관전 대기 화면 */
.td-spectate-notice{text-align:center;padding:16px 12px;color:#000;font-size:.85em;font-weight:700}
.td-spectate-icon{font-size:1.5em;margin-bottom:4px;animation:td-pulse 2s ease infinite}
.td-spectate-sub{font-size:.75em;color:#555;font-weight:600;margin-top:4px}
@keyframes td-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ===== 대기실 화면 ===== */
.td-wait-game{height:100%;flex:1}
.td-wait-screen{position:relative;z-index:20;display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.td-wait-header{display:flex;align-items:center;gap:8px;padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top,0px));border-bottom:3px solid #000}
.td-wait-back{background:#fff;border:2px solid #000;border-radius:6px;color:#000;font-size:.75em;font-weight:700;cursor:pointer;padding:5px 12px;font-family:inherit;-webkit-tap-highlight-color:transparent;box-shadow:2px 2px 0 #000;transition:all .1s}
.td-wait-back:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.td-wait-room-info{display:flex;align-items:center;gap:6px;flex:1}
.td-wait-room-code{font-weight:800;color:#000;font-size:.95em;letter-spacing:1px}
.td-wait-copy{background:none;border:none;font-size:.9em;cursor:pointer;padding:2px 4px}
.td-wait-players{padding:10px 14px;border-bottom:3px solid #000}
.td-wait-players-label{font-size:.72em;font-weight:700;color:#555;margin-bottom:6px}
.td-wait-chips{display:flex;flex-wrap:wrap;gap:6px}
.td-wait-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 4px;border-radius:20px;background:#f5f5f5;border:2px solid #ddd;font-size:.82em;font-weight:600;color:#000;transition:all .15s}
.td-wait-chip-avatar{width:24px;height:24px;border-radius:50%;background:#FFCC00;border:2px solid #000;display:flex;align-items:center;justify-content:center;font-size:.6em;color:#000;font-weight:800;overflow:hidden;flex-shrink:0;box-shadow:1px 1px 0 #000}
.td-wait-chip-name{white-space:nowrap}
.td-chip-me{background:#FFE066}
.td-chip-ready{border:2.5px solid #22c55e;background:#f0fdf4;box-shadow:0 0 0 1px #22c55e40}
.td-wait-player{display:flex;align-items:center;gap:8px;padding:5px 0}
.td-wait-player.me{background:#FFE066;margin:0 -6px;padding:5px 6px;border-radius:6px;border:2px solid #000}
.td-wait-player-avatar{width:28px;height:28px;border-radius:50%;background:#FFCC00;border:2px solid #000;display:flex;align-items:center;justify-content:center;font-size:.7em;color:#000;font-weight:800;overflow:hidden;flex-shrink:0;box-shadow:1px 1px 0 #000}
.td-wait-player-name{flex:1;font-size:.85em;color:#000;font-weight:600}
.td-wait-player-ready{font-size:.85em}

/* 채팅 */
.td-wait-chat{flex:1;display:flex;flex-direction:column;min-height:80px;min-height:0}
.td-chat-messages{flex:1;overflow-y:auto;padding:8px 14px;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:4px}
.td-chat-empty{text-align:center;color:#999;font-size:.78em;font-weight:600;padding:20px 0}
.td-chat-msg{max-width:85%;padding:5px 10px;border-radius:8px;background:#fff;border:2px solid #000;font-size:.82em;box-shadow:2px 2px 0 #000}
.td-chat-msg.me{align-self:flex-end;background:#CCDDFF;border-color:#000}
.td-chat-name{font-size:.68em;font-weight:700;color:#555;display:block;margin-bottom:1px}
.td-chat-msg.me .td-chat-name{display:none}
.td-chat-text{color:#000;font-weight:600;word-break:break-word}
.td-chat-system{text-align:center;font-size:.7em;color:#999;font-weight:600;padding:3px 0}

/* 대기실 액션 버튼 */
.td-wait-actions{padding:8px 14px;text-align:center}
.td-start-notready{opacity:.4;cursor:default;padding:10px 24px;font-size:.9em}
.td-start-ready{padding:12px 32px;animation:td-readyPulse 1.5s infinite}
@keyframes td-readyPulse{0%,100%{box-shadow:4px 4px 0 #000}50%{box-shadow:4px 4px 0 #000,0 0 0 4px rgba(255,51,102,.3)}}
.td-ready-btn{padding:12px 32px;font-size:.95em}
.td-ready-active{background:#22CC66 !important;color:#000 !important;border-color:#000 !important;box-shadow:4px 4px 0 #000 !important}

/* 카운트다운 */
.td-wait-countdown{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;background:#FFFDF5;align-items:center;justify-content:center}
.td-countdown-number{font-size:5em;font-weight:900;color:#FF3366;animation:td-countPop .9s ease-out infinite}
.td-countdown-go{color:#3366FF !important;animation:td-countPop .5s ease-out !important}
@keyframes td-countPop{0%{transform:scale(1.3);opacity:0}20%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(.9);opacity:.5}}

/* 채팅 키보드 */
#tdChatKeyboard.td-kb-wrap{border-radius:0 0 16px 16px}

/* ===== 룸 생성 다이얼로그 ===== */
.td-create-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:60;background:#FFFDF5;display:flex;align-items:center;justify-content:center;padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.td-create-dialog{width:100%;max-width:300px;text-align:center}
.td-create-title{font-size:1.1em;font-weight:900;color:#000;margin-bottom:20px}
.td-create-field{margin-bottom:16px;text-align:left}
.td-create-label{display:block;font-size:.75em;font-weight:700;color:#555;margin-bottom:6px}
.td-create-input{width:100%;padding:10px 14px;background:#fff;border:2px solid #000;border-radius:8px;color:#000;font-size:.95em;font-weight:600;font-family:inherit;outline:none;box-sizing:border-box;box-shadow:2px 2px 0 #000}
.td-create-input:focus{border-color:#3366FF;box-shadow:2px 2px 0 #3366FF}
.td-create-input::placeholder{color:#999}
.td-create-toggle{display:flex;gap:6px;margin-bottom:6px}
.td-toggle-btn{flex:1;padding:8px;background:#fff;border:2px solid #000;border-radius:8px;color:#555;font-size:.82em;font-weight:700;cursor:pointer;font-family:inherit;transition:all .1s;box-shadow:2px 2px 0 #000}
.td-toggle-btn.td-toggle-active{background:#FFCC00;color:#000;box-shadow:2px 2px 0 #000}
.td-create-hint{font-size:.7em;color:#777;font-weight:600}
.td-create-buttons{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.td-create-buttons .td-start-btn{width:100%;padding:12px}
.td-create-buttons .td-back-btn{width:100%}

/* 비공개 배지 */
.td-wait-private-badge{font-size:.75em;opacity:.7}

/* ===== PIN 입력 모달 ===== */
.td-pin-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:60;background:#FFFDF5;display:flex;align-items:center;justify-content:center;padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.td-pin-dialog{text-align:center;width:100%;max-width:260px}
.td-pin-title{font-size:1em;font-weight:800;color:#000;margin-bottom:16px}
.td-pin-dots{display:flex;justify-content:center;gap:12px;margin-bottom:16px}
.td-pin-dot{width:14px;height:14px;border-radius:50%;border:3px solid #000;background:transparent;transition:all .15s}
.td-pin-dot.filled{background:#FF3366;border-color:#000;box-shadow:2px 2px 0 #000}
.td-pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:220px;margin:0 auto}
.td-pin-pad-small{max-width:200px}
.td-pin-pad-small .td-pin-key{padding:10px;font-size:.95em}
.td-pin-key{padding:14px;background:#fff;border:2px solid #000;border-radius:8px;color:#000;font-size:1.1em;font-weight:700;cursor:pointer;font-family:inherit;transition:all .1s;-webkit-tap-highlight-color:transparent;box-shadow:2px 2px 0 #000}
.td-pin-key:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.td-pin-empty{visibility:hidden}
.td-pin-del{font-size:1.2em;color:#555}
.td-pin-setup{margin-top:8px}

/* PIN 흔들림 애니메이션 */
.td-pin-shake{animation:td-shake .4s ease}
@keyframes td-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ===== 게임 중 종료 버튼 ===== */
.td-game-exit-btn{padding:4px 10px;background:#fff;border:2px solid #000;border-radius:6px;color:#000;font-size:.65em;font-weight:700;cursor:pointer;font-family:inherit;margin-top:4px;-webkit-tap-highlight-color:transparent;box-shadow:2px 2px 0 #000;transition:all .1s}
.td-game-exit-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}

/* ===== 종료 확인 오버레이 (인게임) ===== */
.td-exit-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;background:rgba(255,253,245,.92);display:flex;align-items:center;justify-content:center;padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px))}
.td-exit-dialog{background:#fff;border:3px solid #000;border-radius:10px;padding:24px 20px;max-width:280px;width:100%;text-align:center;box-shadow:5px 5px 0 #000}
.td-exit-title{color:#000;font-size:1em;font-weight:800;margin-bottom:6px}
.td-exit-desc{color:#555;font-size:.82em;font-weight:600;margin-bottom:20px}
.td-exit-buttons{display:flex;gap:8px}
.td-exit-cancel{flex:1;padding:10px;background:#fff;border:2px solid #000;border-radius:8px;color:#000;font-size:.9em;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:2px 2px 0 #000}
.td-exit-cancel:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.td-exit-ok{flex:1;padding:10px;background:#FF3366;border:2px solid #000;border-radius:8px;color:#fff;font-size:.9em;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:2px 2px 0 #000}
.td-exit-ok:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}

/* ===== HUD 레벨 표시 ===== */
.td-hud-level{font-size:.72em;color:#555;font-weight:700;margin-top:2px}

/* ===== 레벨 배너 ===== */
.td-level-banner{position:absolute;top:0;left:0;width:100%;height:100%;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(255,253,245,.85);animation:td-fadeIn .3s ease}
.td-level-num{font-size:2.5em;font-weight:900;color:#3366FF;animation:td-levelPop 1.5s ease-out}
@keyframes td-levelPop{0%{transform:scale(0);opacity:0}15%{transform:scale(1.3);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{transform:scale(.9);opacity:0}}

/* ===== 보스 ===== */
.td-boss{position:absolute;top:10%;left:50%;transform:translateX(-50%);z-index:20;transition:left 1.5s ease-in-out,top .5s ease}
.td-boss-body{display:flex;flex-direction:column;align-items:center;gap:6px}
.td-boss-sprite{font-size:3em;filter:drop-shadow(2px 2px 0 #000);transition:transform .3s}
.td-boss-hp-bar{width:120px;height:8px;background:#ddd;border-radius:4px;overflow:hidden;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-boss-hp-fill{width:100%;height:100%;background:#FF3366;border-radius:2px;transition:width .3s}
.td-boss-words{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:240px;margin-top:4px}
.td-boss-word{padding:3px 8px;background:#FFE0E8;border:2px solid #000;border-radius:6px;color:#000;font-size:.8em;font-weight:700;transition:all .3s;box-shadow:2px 2px 0 #000}
.td-boss-word-hit{opacity:.3;text-decoration:line-through;transform:scale(.8)}

/* 보스 상태 애니메이션 */
.td-boss-ready .td-boss-sprite{animation:td-bossIdle 2s ease infinite}
@keyframes td-bossIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.td-boss-charge{top:60% !important;transition:left 1.5s ease-in-out,top .8s cubic-bezier(.4,0,.2,1)}
.td-boss-charge .td-boss-sprite{animation:td-bossCharge .3s ease infinite;filter:brightness(1.3) drop-shadow(2px 2px 0 #000)}
@keyframes td-bossCharge{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
.td-boss-taunt{top:10% !important;transition:left 1.5s ease-in-out,top .6s ease-out}
.td-boss-taunt .td-boss-sprite{animation:td-bossTaunt 1.5s ease !important;filter:brightness(1.2) drop-shadow(2px 2px 0 #000)}
@keyframes td-bossTaunt{0%{transform:scale(1)}15%{transform:scale(1.2) rotate(-5deg)}30%{transform:scale(1.15) rotate(5deg)}50%{transform:scale(1.2) rotate(-3deg)}70%{transform:scale(1.1)}100%{transform:scale(1) rotate(0)}}
.td-boss-entrance{top:-20% !important;opacity:0;animation:td-bossEnter .6s ease-out forwards}
@keyframes td-bossEnter{0%{top:-20%;opacity:0;transform:translateX(-50%) scale(1.5)}70%{opacity:1}100%{top:10%;opacity:1;transform:translateX(-50%) scale(1)}}
.td-boss-land{top:10% !important}
.td-boss-land .td-boss-sprite{animation:td-bossLand .4s ease !important}
@keyframes td-bossLand{0%{transform:scale(1)}40%{transform:scale(1.3,.7)}70%{transform:scale(.9,1.1)}100%{transform:scale(1)}}
.td-boss-dying .td-boss-sprite{animation:td-bossDying .15s ease infinite !important;filter:brightness(2) drop-shadow(0 0 10px rgba(255,255,255,.8)) !important}
@keyframes td-bossDying{0%,100%{transform:translate(0) scale(1)}25%{transform:translate(-6px,3px) scale(1.05)}50%{transform:translate(6px,-3px) scale(.95)}75%{transform:translate(-4px,-2px) scale(1.03)}}
.td-boss-dead .td-boss-sprite{animation:td-bossDie 1.2s ease-out forwards}
@keyframes td-bossDie{0%{transform:scale(1);opacity:1;filter:brightness(1)}30%{transform:scale(1.3);filter:brightness(2)}100%{transform:scale(0) rotate(180deg);opacity:0}}
.td-boss-flinch .td-boss-sprite{animation:td-bossFlinch .3s ease !important}
@keyframes td-bossFlinch{0%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}}

/* ===== 보스 경고 ===== */
.td-boss-warning{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);z-index:30;font-size:1.4em;font-weight:900;color:#FF3366;letter-spacing:2px;animation:td-bossWarn 3s ease-out forwards;pointer-events:none;white-space:nowrap}
@keyframes td-bossWarn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}

/* ===== 보스 패턴 ===== */
.td-boss-roar .td-boss-sprite{animation:td-bossRoar .8s ease !important}
@keyframes td-bossRoar{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.td-boss-slam .td-boss-sprite{animation:td-bossSlam .5s ease !important}
@keyframes td-bossSlam{0%{transform:translateY(0)}50%{transform:translateY(20px) scale(1.1)}100%{transform:translateY(0)}}
.td-shockwave{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:4px;background:rgba(255,51,102,.5);border-radius:50%;animation:td-shockExpand 1s ease-out forwards;z-index:25;pointer-events:none}
@keyframes td-shockExpand{0%{width:0;opacity:1}100%{width:120%;opacity:0}}
.td-boss-enraged .td-boss-sprite{filter:drop-shadow(0 0 8px rgba(255,51,102,.6)) drop-shadow(0 0 16px rgba(255,51,102,.3)) !important}
.td-boss-enraged .td-boss-body{animation:td-bossRage 1s ease infinite}
@keyframes td-bossRage{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2) hue-rotate(10deg)}}
/* 미니언 */
.td-word.td-minion{border-color:#FF3366 !important;box-shadow:3px 3px 0 #FF3366}
.td-minion-icon{font-size:.7em;margin-right:2px}

/* ===== 보스 등장/격파/게임오버 연출 ===== */
.td-boss-dim{position:absolute;inset:0;background:rgba(0,0,0,0);z-index:15;animation:td-dimIn .6s ease forwards;pointer-events:none}
@keyframes td-dimIn{to{background:rgba(0,0,0,.5)}}
.td-boss-impact{position:absolute;top:15%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(255,51,102,.3),transparent 70%);animation:td-impactExpand .8s ease-out forwards;z-index:16;pointer-events:none}
@keyframes td-impactExpand{0%{width:0;height:0;opacity:1}100%{width:300px;height:300px;opacity:0}}
.td-screen-shake{animation:td-shake .4s ease !important}
.td-boss-defeat-flash{position:absolute;inset:0;z-index:35;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,204,0,.3),transparent 70%);animation:td-flash .6s ease-out forwards}
@keyframes td-flash{0%{opacity:1}100%{opacity:0}}
@keyframes td-defeatBurst{0%{transform:translate(0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
.td-boss-defeated-text{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);z-index:40;font-size:1.6em;font-weight:900;color:#FFCC00;letter-spacing:3px;pointer-events:none;white-space:nowrap;animation:td-defeatedText 1.8s ease-out forwards}
@keyframes td-defeatedText{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}25%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
.td-slowmo{filter:saturate(.3) brightness(.8);transition:filter .3s}
.td-crack-overlay{position:absolute;inset:0;z-index:50;pointer-events:none;animation:td-crackIn .3s ease-out forwards}
@keyframes td-crackIn{0%{opacity:0;filter:brightness(3)}100%{opacity:1;filter:brightness(1)}}
.td-gameover-flash{position:absolute;inset:0;z-index:51;pointer-events:none;background:radial-gradient(circle,rgba(255,51,102,.5),rgba(255,51,102,.2));animation:td-flash .5s ease-out forwards}
.td-gameover-fade{animation:td-gameoverFade .8s ease-in forwards}
@keyframes td-gameoverFade{to{filter:brightness(0)}}

/* ===== 레벨 타이머 ===== */
.td-level-timer{font-size:.72em;color:#555;font-weight:700;margin-top:2px;transition:color .3s}
.td-timer-urgent{color:#FF3366;animation:td-timerPulse .5s infinite alternate}
@keyframes td-timerPulse{0%{opacity:1;transform:scale(1)}100%{opacity:.7;transform:scale(1.1)}}

/* ===== 아이템 단어 ===== */
.td-item-word{position:absolute;padding:5px 12px;border:2px solid #000;border-radius:8px;font-weight:800;font-size:.85em;white-space:nowrap;z-index:12;cursor:default;display:flex;align-items:center;gap:4px;transition:opacity .15s;box-shadow:2px 2px 0 #000}
.td-item-emoji{font-size:1.1em}
.td-item-good{animation:td-itemFloat 2s ease-in-out infinite alternate}
.td-item-bad{animation:td-itemFloat 1.5s ease-in-out infinite alternate}
@keyframes td-itemFloat{0%{transform:translateY(-3px)}100%{transform:translateY(3px)}}

/* ===== 아이템 효과 텍스트 ===== */
.td-item-effect-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.4em;font-weight:900;z-index:30;pointer-events:none;animation:td-itemEffectPop 1.5s ease-out forwards;white-space:nowrap;display:flex;align-items:center;gap:4px}

/* ===== 폭탄 폭발 ===== */
.td-bomb-blast{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,51,102,.3) 0%,rgba(255,51,102,.1) 40%,transparent 70%);z-index:25;pointer-events:none;animation:td-bombBlast .6s ease-out forwards}

/* ===== 효과 오버레이 ===== */
.td-effect-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:22;pointer-events:none;transition:opacity .3s}
.td-overlay-timestop{background:rgba(51,102,255,.05);border:3px solid rgba(51,102,255,.3)}
.td-overlay-rage{border:3px solid rgba(255,51,102,.4);animation:td-ragePulse .5s infinite alternate}
.td-overlay-speedup{background:rgba(102,0,255,.04)}
.td-overlay-speedup::before,.td-overlay-speedup::after{content:'';position:absolute;top:0;bottom:0;width:3px;background:rgba(102,0,255,.3);animation:td-speedLine 1s linear infinite}
.td-overlay-speedup::before{left:20%}
.td-overlay-speedup::after{right:20%;animation-delay:.5s}
@keyframes td-ragePulse{0%{border-color:rgba(255,51,102,.2)}100%{border-color:rgba(255,51,102,.5)}}
@keyframes td-speedLine{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.td-overlay-text{position:absolute;top:15%;left:50%;transform:translateX(-50%);font-size:1.1em;font-weight:900;color:#3366FF;white-space:nowrap;animation:td-overlayTextPulse 1s infinite alternate}
@keyframes td-overlayTextPulse{0%{opacity:.6}100%{opacity:1}}

/* ===== 아바타 랭킹 배지 ===== */
.td-avatar-rank{position:absolute;top:-8px;right:-4px;width:16px;height:16px;border-radius:50%;background:#FFCC00;border:2px solid #000;color:#000;font-size:.55em;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 0 #000;z-index:2}
.td-avatar-score{font-size:.5em;color:#555;font-weight:700;margin-top:1px}

/* ===== 관전 진행 상황 ===== */
.td-spectate-progress{display:flex;justify-content:center;gap:20px;padding:8px 14px;margin:0 14px;background:#fff;border:2px solid #000;border-radius:8px;box-shadow:2px 2px 0 #000}
.td-spectate-stat{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.82em;color:#555;font-weight:600}
.td-spectate-stat span:last-child{font-weight:800;color:#000;font-size:1.1em}
.td-wait-player-score{font-size:.78em;font-weight:700;color:#FF3366;margin-left:auto}

/* ===== 모드 선택 ===== */
.td-mode-toggle{display:flex;gap:6px;margin-bottom:16px}
.td-mode-btn{flex:1;padding:10px 6px;background:#fff;border:2px solid #000;border-radius:8px;color:#555;font-size:.82em;font-weight:700;cursor:pointer;font-family:inherit;transition:all .1s;text-align:center;box-shadow:2px 2px 0 #000}
.td-mode-btn.td-mode-active{background:#FFCC00;color:#000;box-shadow:2px 2px 0 #000}
.td-mode-icon{font-size:1.3em;display:block;margin-bottom:2px}

/* ===== SVG 아이콘 공통 ===== */
.td-icon svg{width:100%;height:100%;display:block}
.td-logo-svg svg{height:100%;width:auto}