:root{--gold:#d4af37;--gold-light:#f4d03f;--gold-dark:#aa8c2c;--bg:#0a0a0a;--bg-card:#151515;--bg-card2:#1a1a1a;--text:#ffffff;--text-sub:#a0a0a0;--text-muted:#666;--border:#2a2a2a;--danger:#dc2626;--success:#22c55e;--safe-top:env(safe-area-inset-top,0);--safe-bottom:env(safe-area-inset-bottom,0)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text)}
.app{display:flex;flex-direction:column;height:100%}

.status-bar{flex-shrink:0;height:calc(28px + var(--safe-top));padding-top:var(--safe-top);background:#000;display:flex;align-items:center;justify-content:space-between;padding-left:16px;padding-right:16px;color:var(--gold);font-size:11px;font-weight:600;border-bottom:1px solid var(--border)}
.online-wrap{position:relative}
.online{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 8px;margin:-4px -8px;border-radius:8px;transition:background .2s}
.online:hover{background:rgba(212,175,55,.15)}
.online::before{content:'';width:6px;height:6px;background:var(--success);border-radius:50%;box-shadow:0 0 8px var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.online-wrap .online-popup{display:none}
.online-popup-header{padding:10px 12px;border-bottom:1px solid var(--border);font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.online-user{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);transition:background .15s}
.online-user:last-child{border-bottom:none}
.online-user.clickable{cursor:pointer}
.online-user.clickable:hover{background:rgba(212,175,55,.15)}
.online-user.clickable:active{background:rgba(212,175,55,.25)}
.online-user-name{font-size:12px;font-weight:500;color:var(--text)}
.online-user-name.is-me{color:var(--gold)}
.online-user-level{font-size:10px;font-weight:700;color:var(--gold);background:rgba(212,175,55,.15);padding:2px 8px;border-radius:10px}
.online-user-status{width:6px;height:6px;background:var(--success);border-radius:50%;margin-right:8px;box-shadow:0 0 6px var(--success)}

.header{flex-shrink:0;background:linear-gradient(180deg,#111 0%,#0a0a0a 100%);padding:14px 16px 18px;border-bottom:1px solid var(--border)}
.header-row{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:20px;font-weight:900;letter-spacing:2px;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer}
.user-chip{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--gold-dark);padding:6px 14px;border-radius:25px;font-size:12px;font-weight:600;cursor:pointer}
.user-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#000;overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.lv{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#000;padding:3px 8px;border-radius:10px;font-size:10px;font-weight:800}
.auth-buttons{display:flex;gap:8px;align-items:center}
.threads-login-btn{background:#000;color:#fff;border:1px solid #fff;padding:8px 14px;border-radius:25px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:flex;align-items:center;gap:4px}
.threads-login-btn:hover{background:#fff;color:#000}
.login-btn-small{background:transparent;color:var(--text-sub);border:1px solid var(--border);padding:8px 14px;border-radius:25px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.login-btn-small:hover{border-color:var(--gold);color:var(--gold)}
.start-btn{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border:none;padding:8px 18px;border-radius:25px;font-size:12px;font-weight:700;cursor:pointer}
.super-toggle{border:1px solid transparent!important;transition:all .2s}
.super-toggle.on{background:linear-gradient(135deg,rgba(147,51,234,.3),rgba(147,51,234,.1))!important;border-color:rgba(147,51,234,.5)!important}
.super-toggle.on .tab-icon,.super-toggle.on .tab-label{color:#a855f7!important}
.super-toggle.off{background:rgba(100,100,100,.2)!important;border-color:rgba(100,100,100,.3)!important}
.super-toggle.off .tab-icon,.super-toggle.off .tab-label{color:#888!important}

.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(75px + var(--safe-bottom));position:relative}

/* Pull to Refresh */
.ptr-indicator{position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;transition:top .2s,transform .2s;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.ptr-indicator.pulling{top:10px}
.ptr-indicator.refreshing{top:10px;animation:ptrSpin 1s linear infinite}
.ptr-indicator.done{top:10px}
@keyframes ptrSpin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}

.hero{margin:14px;padding:24px 20px;background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);border:1px solid var(--border);border-radius:20px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;right:0;width:150px;height:150px;background:radial-gradient(circle,rgba(212,175,55,.15) 0%,transparent 70%);border-radius:50%}
.hero-badge{display:inline-block;padding:4px 12px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;font-size:9px;font-weight:800;letter-spacing:1.5px;border-radius:20px;margin-bottom:10px}
.hero-title{font-size:22px;font-weight:800;margin-bottom:4px;letter-spacing:-0.5px}
.hero-sub{font-size:13px;color:var(--text-sub);margin-bottom:12px}

.level-bar-wrap{margin-bottom:16px}
.level-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.level-num{font-size:14px;font-weight:800;color:var(--gold)}
.level-xp{font-size:11px;color:var(--text-sub)}
.level-bar{height:8px;background:#222;border-radius:4px;overflow:hidden;position:relative}
.level-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light));border-radius:4px;transition:width .5s ease;position:relative}
.level-bar-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shine 2s infinite}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.hero-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border-radius:30px;font-size:14px;font-weight:700;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(212,175,55,.3)}
.hero-btn:active{transform:scale(.97)}

/* ===== DASHBOARD STYLES ===== */
.dashboard-wrap{margin:14px;display:flex;flex-direction:column;gap:12px}
.dash-rank-card{display:flex;align-items:center;justify-content:space-between;padding:20px;background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);border:1px solid var(--border);border-radius:20px;position:relative;overflow:hidden}
.dash-rank-card::before{content:'';position:absolute;top:0;right:0;width:150px;height:150px;background:radial-gradient(circle,rgba(212,175,55,.12) 0%,transparent 70%);border-radius:50%}
.dash-rank-left{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.dash-rank-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#000;overflow:hidden;flex-shrink:0}
.dash-rank-avatar img{width:100%;height:100%;object-fit:cover}
.dash-rank-name{font-size:16px;font-weight:800;letter-spacing:-0.3px}
.dash-rank-sub{font-size:12px;color:var(--text-sub);margin-top:2px}
.dash-rank-ring{position:relative;width:70px;height:70px;flex-shrink:0}
.dash-rank-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dash-rank-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:800;color:var(--gold)}
.dash-level-bar{padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px}
.dash-stage-badge{display:inline-block;padding:2px 8px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;font-size:9px;font-weight:800;letter-spacing:1px;border-radius:10px;margin-left:6px;vertical-align:middle}
.dash-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dash-stat-card{padding:16px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;text-align:center;cursor:pointer;transition:border-color .2s}
.dash-stat-card:active{border-color:var(--gold)}
.dash-stat-icon{font-size:22px;margin-bottom:6px}
.dash-stat-value{font-size:18px;font-weight:800;color:var(--gold)}
.dash-stat-label{font-size:10px;color:var(--text-sub);margin-top:3px}
.dash-daily-card{padding:16px;background:linear-gradient(135deg,#1a1a0a,#0d0d0d);border:1px solid rgba(212,175,55,.25);border-radius:14px}
.dash-daily-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;font-weight:700}
.dash-daily-timer{color:var(--gold);font-size:11px;font-weight:600}
.dash-daily-title{font-size:14px;font-weight:700;margin-bottom:10px}
.dash-daily-progress{display:flex;align-items:center;gap:10px}
.dash-daily-bar{flex:1;height:6px;background:#222;border-radius:3px;overflow:hidden}
.dash-daily-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold));border-radius:3px;transition:width .5s ease}
.dash-daily-count{font-size:11px;color:var(--text-sub);white-space:nowrap}
.dash-daily-reward{font-size:11px;color:var(--gold);margin-top:6px}
.dash-battle-card{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,#1a0a0a,#0d0d0d);border:1px solid rgba(255,80,80,.25);border-radius:14px;cursor:pointer;transition:border-color .2s}
.dash-battle-card:active{border-color:rgba(255,80,80,.5)}
.dash-battle-text{flex:1;font-size:13px}
.dash-battle-arrow{color:var(--text-sub)}
.dash-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dash-action-btn{padding:12px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;text-align:center;transition:all .2s}
.dash-action-btn:active{background:#222;transform:scale(.97)}

/* ===== SKILL CHECKLIST STYLES ===== */
.skill-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,.95);z-index:999;overflow-y:auto;display:none;-webkit-overflow-scrolling:touch}
.skill-overlay.active{display:block}
.skill-overlay *{color:inherit;text-decoration:none}
.skill-container{max-width:480px;margin:0 auto;padding:16px;padding-bottom:100px}
.skill-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:16px}
.skill-header h2{font-size:18px;font-weight:800;color:#fff}
.skill-close{background:var(--bg-card);border:1px solid var(--border);color:var(--text-sub);font-size:18px;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .2s}
.skill-close:hover{background:var(--border);color:#fff}
.skill-overall{text-align:center;padding:24px 20px;margin-bottom:16px;background:linear-gradient(135deg,var(--bg-card),rgba(212,175,55,.05));border:1px solid var(--border);border-radius:16px}
.skill-overall-ring{width:100px;height:100px;margin:0 auto 12px;position:relative}
.skill-overall-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.skill-overall-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:800;color:var(--gold)}
.skill-stage-card{margin-bottom:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s}
.skill-stage-card.open{border-color:rgba(212,175,55,.3)}
.skill-stage-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .2s}
.skill-stage-head:hover{background:rgba(255,255,255,.03)}
.skill-stage-head:active{background:rgba(255,255,255,.05)}
.skill-stage-num{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.skill-stage-info{flex:1}
.skill-stage-name{font-size:14px;font-weight:700;color:#fff}
.skill-stage-progress{font-size:11px;color:var(--text-sub);margin-top:2px}
.skill-stage-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:4px}
.skill-stage-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px;transition:width .5s ease}
.skill-stage-arrow{color:var(--text-muted);font-size:14px;transition:transform .3s}
.skill-stage-card.open .skill-stage-arrow{transform:rotate(180deg);color:var(--gold)}
.skill-stage-body{display:none;padding:4px 16px 14px}
.skill-stage-card.open .skill-stage-body{display:block}
.skill-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.skill-item:last-child{border-bottom:none}
.skill-check{width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.03);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;color:transparent;font-size:14px;outline:none;-webkit-appearance:none;appearance:none}
.skill-check:hover{border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.08)}
.skill-check:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.2)}
.skill-check.checked{background:var(--gold);border-color:var(--gold);color:#000}
.skill-item-text{font-size:13px;line-height:1.5;color:var(--text-sub)}
.skill-item-xp{font-size:10px;color:var(--gold);margin-top:3px;font-weight:600}
.skill-mastered{text-align:center;padding:16px;color:var(--gold);font-size:14px;font-weight:700;background:rgba(212,175,55,.05);border-radius:10px;margin-top:8px}

/* ===== BATTLE STYLES ===== */
.battle-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(5,5,5,.97);z-index:999;overflow-y:auto;display:none}
.battle-overlay.active{display:block}
.battle-container{max-width:480px;margin:0 auto;padding:16px;padding-bottom:100px}
.battle-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.battle-header h2{font-size:18px;font-weight:800;color:var(--gold)}
.battle-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px}
.battle-tabs{display:flex;gap:8px;margin-bottom:16px}
.battle-tab{flex:1;padding:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;color:var(--text-sub);font-size:12px;font-weight:700;cursor:pointer;text-align:center;transition:all .2s}
.battle-tab.active{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border-color:var(--gold)}
.battle-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.battle-stat{text-align:center;padding:12px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px}
.battle-stat-val{font-size:20px;font-weight:800;color:var(--gold)}
.battle-stat-lbl{font-size:10px;color:var(--text-sub);margin-top:2px}
.battle-list{display:flex;flex-direction:column;gap:8px}
.battle-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .2s}
.battle-item:active{border-color:var(--gold)}
.battle-item-avatar{width:40px;height:40px;border-radius:50%;background:#222;display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;flex-shrink:0}
.battle-item-avatar img{width:100%;height:100%;object-fit:cover}
.battle-item-info{flex:1}
.battle-item-name{font-size:13px;font-weight:700;color:#fff}
.battle-item-meta{font-size:11px;color:var(--text-sub);margin-top:2px}
.battle-item-wager{font-size:14px;font-weight:800;color:var(--gold)}
.battle-item-status{font-size:10px;padding:4px 8px;border-radius:8px;font-weight:700}
.battle-item-status.pending{background:rgba(212,175,55,.15);color:var(--gold)}
.battle-item-status.won{background:rgba(0,200,100,.15);color:#00c864}
.battle-item-status.lost{background:rgba(255,60,60,.15);color:#ff3c3c}
.battle-challenge-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;margin-top:12px}
.battle-challenge-btn:active{transform:scale(.98)}
/* Game Selection */
.game-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.game-select-card{background:var(--bg-card);border:2px solid var(--border);border-radius:16px;padding:20px 12px;text-align:center;cursor:pointer;transition:all .2s}
.game-select-card:active,.game-select-card.selected{border-color:var(--gold);background:rgba(212,175,55,.08);transform:scale(.97)}
.game-select-card .game-icon{font-size:36px;margin-bottom:8px;display:block}
.game-select-card .game-name{font-size:13px;font-weight:800;color:#fff;margin-bottom:4px}
.game-select-card .game-desc{font-size:10px;color:var(--text-sub);line-height:1.4}
/* Game Play UI */
.battle-game-wrap{padding:16px}
.game-title-bar{text-align:center;margin-bottom:20px}
.game-title-bar .game-emoji{font-size:48px;display:block;margin-bottom:8px}
.game-title-bar h3{font-size:18px;font-weight:800;color:var(--gold)}
.game-title-bar .game-sub{font-size:12px;color:var(--text-sub);margin-top:4px}
/* RPS Game */
.rps-round{text-align:center;margin-bottom:24px}
.rps-round-label{font-size:13px;font-weight:700;color:var(--text-sub);margin-bottom:12px}
.rps-choices{display:flex;gap:12px;justify-content:center}
.rps-choice{width:80px;height:80px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:36px;cursor:pointer;transition:all .2s}
.rps-choice:active{transform:scale(.9)}
.rps-choice.selected{border-color:var(--gold);background:rgba(212,175,55,.15);box-shadow:0 0 20px rgba(212,175,55,.3)}
.rps-choice.disabled{opacity:.4;pointer-events:none}
/* Dice Game */
.dice-area{text-align:center;padding:20px 0}
.dice-row{display:flex;justify-content:center;gap:16px;margin-bottom:20px}
.dice{width:64px;height:64px;background:var(--bg-card);border:2px solid var(--gold);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:var(--gold)}
.dice.rolling{animation:diceRoll .3s ease-in-out infinite}
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.8)}100%{transform:rotate(360deg) scale(1)}}
.dice-total{font-size:24px;font-weight:800;color:var(--gold);margin-top:8px}
.roll-btn{padding:16px 40px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border:none;border-radius:14px;font-size:16px;font-weight:800;cursor:pointer;margin-top:16px}
.roll-btn:active{transform:scale(.95)}
/* Number Guess */
.number-guess-area{text-align:center;padding:20px 0}
.number-display{font-size:48px;font-weight:800;color:var(--gold);margin:20px 0}
.number-slider{width:100%;-webkit-appearance:none;height:8px;border-radius:4px;background:var(--bg-card);outline:none;margin:16px 0}
.number-slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 10px rgba(212,175,55,.5)}
.number-range{display:flex;justify-content:space-between;font-size:12px;color:var(--text-sub)}
/* Odd/Even */
.oddeven-round{text-align:center;margin-bottom:20px}
.oddeven-question{font-size:14px;color:var(--text-sub);margin-bottom:8px}
.oddeven-hidden{font-size:48px;margin:12px 0;color:var(--gold)}
.oddeven-choices{display:flex;gap:12px;justify-content:center}
.oddeven-choice{padding:14px 32px;background:var(--bg-card);border:2px solid var(--border);border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;color:#fff;transition:all .2s}
.oddeven-choice:active{transform:scale(.95)}
.oddeven-choice.selected{border-color:var(--gold);background:rgba(212,175,55,.15);color:var(--gold)}
/* Nunchi Game */
.nunchi-round{text-align:center;margin-bottom:20px}
.nunchi-label{font-size:13px;color:var(--text-sub);margin-bottom:12px}
.nunchi-choices{display:flex;gap:10px;justify-content:center}
.nunchi-choice{width:56px;height:56px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;cursor:pointer;color:#fff;transition:all .2s}
.nunchi-choice:active{transform:scale(.9)}
.nunchi-choice.selected{border-color:var(--gold);background:rgba(212,175,55,.15);color:var(--gold)}
/* Battle Result */
.battle-result{text-align:center;padding:40px 20px}
.battle-result-icon{font-size:60px;margin-bottom:16px}
.battle-result-title{font-size:24px;font-weight:800;margin-bottom:8px;color:#fff}
.battle-result-dp{font-size:18px;color:var(--gold);font-weight:700;margin-bottom:20px}
/* Game progress dots */
.game-progress{display:flex;justify-content:center;gap:8px;margin-bottom:20px}
.game-dot{width:10px;height:10px;border-radius:50%;background:var(--border)}
.game-dot.active{background:var(--gold);box-shadow:0 0 8px rgba(212,175,55,.5)}
.game-dot.done{background:#00c864}
/* Submit button */
.game-submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border:none;border-radius:14px;font-size:16px;font-weight:800;cursor:pointer;margin-top:20px;transition:all .2s}
.game-submit-btn:active{transform:scale(.97)}
.game-submit-btn:disabled{opacity:.4;cursor:not-allowed}
/* Wager input modal */
.wager-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:24px;margin:20px 0}
.wager-modal h3{font-size:16px;font-weight:800;margin-bottom:16px;color:#fff;text-align:center}
.wager-input{width:100%;padding:14px;background:var(--bg);border:2px solid var(--border);border-radius:12px;color:var(--gold);font-size:20px;font-weight:800;text-align:center;outline:none}
.wager-input:focus{border-color:var(--gold)}
.wager-presets{display:flex;gap:8px;margin-top:10px;justify-content:center}
.wager-preset{padding:6px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text-sub);font-size:12px;font-weight:700;cursor:pointer}
.wager-preset:active{border-color:var(--gold);color:var(--gold)}

/* ===== ACHIEVEMENT STYLES ===== */
.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 14px}
.achievement-card{padding:14px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;text-align:center;transition:all .2s}
.achievement-card.earned{border-color:var(--gold);background:rgba(212,175,55,.05)}
.achievement-card.locked{opacity:.4}
.achievement-icon{font-size:28px;margin-bottom:6px}
.achievement-name{font-size:11px;font-weight:700;margin-bottom:2px}
.achievement-rarity{font-size:9px;padding:2px 6px;border-radius:6px;display:inline-block}
.achievement-rarity.common{background:rgba(150,150,150,.2);color:#999}
.achievement-rarity.rare{background:rgba(80,140,255,.2);color:#508cff}
.achievement-rarity.epic{background:rgba(180,80,255,.2);color:#b450ff}
.achievement-rarity.legendary{background:rgba(255,200,50,.2);color:var(--gold)}
.achievement-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:linear-gradient(135deg,#1a1a0a,#0d0d0d);border:2px solid var(--gold);border-radius:16px;padding:16px 24px;z-index:9999;display:flex;align-items:center;gap:12px;box-shadow:0 8px 32px rgba(212,175,55,.3);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.achievement-toast.show{transform:translateX(-50%) translateY(0)}
.achievement-toast-icon{font-size:32px}
.achievement-toast-text{font-size:13px;font-weight:700}
.achievement-toast-sub{font-size:11px;color:var(--text-sub);margin-top:2px}

.ad{margin:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;min-height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ad::before{content:'AD';position:absolute;font-size:10px;color:var(--text-muted);opacity:.3;pointer-events:none}
.ad ins{width:100%}

.section{padding:0 14px;margin-bottom:20px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section-title{font-size:14px;font-weight:700;color:var(--gold)}

.stage-scroll{display:flex;gap:10px;overflow-x:auto;padding:2px 14px 2px 0;margin-left:14px;scroll-snap-type:x mandatory}
.stage-scroll::-webkit-scrollbar{display:none}
.stage-card{flex:0 0 100px;scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center}
.stage-card.unlocked{border-color:var(--gold-dark);background:linear-gradient(135deg,rgba(212,175,55,.1),transparent)}
.stage-card.current{border-color:var(--gold);box-shadow:0 0 15px rgba(212,175,55,.3)}

/* Lesson Preview Scroll */
.lesson-preview-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 12px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none}
.lesson-preview-scroll.dragging{cursor:grabbing;scroll-snap-type:none}
.lesson-preview-scroll::-webkit-scrollbar{display:none}
.lesson-preview-card{flex:0 0 140px;scroll-snap-align:start;background:linear-gradient(145deg,var(--bg-card),var(--bg-card2));border:1px solid var(--border);border-radius:16px;padding:16px 12px;text-align:center;cursor:pointer;position:relative;transition:all .3s ease;overflow:hidden}
.lesson-preview-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.3)}
.lesson-preview-card:active{transform:scale(.98)}
.lesson-preview-card.locked{opacity:.7;filter:grayscale(.3)}
.lesson-preview-card.locked::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:1}
.lesson-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:32px;z-index:2;animation:lockPulse 2s infinite}
@keyframes lockPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
.lesson-preview-icon{font-size:36px;margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.lesson-preview-level{display:inline-block;font-size:9px;font-weight:700;color:var(--gold);background:rgba(212,175,55,.15);padding:2px 8px;border-radius:10px;margin-bottom:6px}
.lesson-preview-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.3}
.lesson-preview-desc{font-size:10px;color:var(--text-muted);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lesson-preview-meta{display:flex;justify-content:center;gap:8px;font-size:9px;color:var(--text-sub)}
.lesson-preview-meta span{background:var(--bg);padding:3px 6px;border-radius:6px}

/* Featured Lessons Popup */
.featured-popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;justify-content:center;align-items:flex-end}
.featured-popup-overlay.show{display:flex}
.featured-popup{width:100%;max-width:480px;max-height:85vh;background:var(--bg);border-radius:20px 20px 0 0;display:flex;flex-direction:column;animation:slideUpPopup .3s ease}
@keyframes slideUpPopup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.featured-popup-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.featured-popup-header h3{font-size:16px;font-weight:800;color:var(--text);margin:0}
.featured-popup-close{background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:4px 8px;line-height:1}
.featured-popup-body{overflow-y:auto;padding:12px 16px 24px;flex:1}
.featured-group{margin-bottom:16px}
.featured-group-title{font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;padding:6px 0;margin-bottom:6px;border-bottom:1px solid rgba(212,175,55,.2);letter-spacing:1px}
.featured-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);margin-bottom:8px;cursor:pointer;transition:all .2s ease}
.featured-item:hover{background:var(--bg-card2);transform:translateX(4px)}
.featured-item.locked{opacity:.55}
.featured-item-icon{font-size:28px;flex-shrink:0;width:40px;text-align:center}
.featured-item-info{flex:1;min-width:0}
.featured-item-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.featured-item-desc{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.featured-item-meta{display:flex;gap:6px;align-items:center;flex-shrink:0}
.featured-item-lv{font-size:9px;font-weight:700;color:var(--gold);background:rgba(212,175,55,.15);padding:2px 6px;border-radius:8px}
.featured-item-xp{font-size:9px;color:var(--text-sub)}

/* Roadmap */
.roadmap-container{padding:0 16px 16px}
.roadmap-item{display:flex;gap:16px;position:relative;padding-bottom:20px}
.roadmap-item:last-of-type{padding-bottom:0}
.roadmap-line{position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--border)}
.roadmap-line.first{top:20px}
.roadmap-line.last{bottom:auto;height:20px}
.roadmap-item.unlocked .roadmap-line{background:linear-gradient(180deg,var(--gold),var(--gold-dark))}
.roadmap-node{width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;z-index:1;flex-shrink:0}
.roadmap-item.unlocked .roadmap-node{border-color:var(--gold);background:linear-gradient(135deg,rgba(212,175,55,.2),transparent)}
.roadmap-item.current .roadmap-node{border-color:var(--gold);box-shadow:0 0 15px rgba(212,175,55,.5);animation:nodePulse 2s infinite}
@keyframes nodePulse{0%,100%{box-shadow:0 0 15px rgba(212,175,55,.5)}50%{box-shadow:0 0 25px rgba(212,175,55,.8)}}
.roadmap-content{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px}
.roadmap-item.unlocked .roadmap-content{border-color:var(--gold-dark)}
.roadmap-item.current .roadmap-content{border-color:var(--gold);background:linear-gradient(135deg,rgba(212,175,55,.1),transparent)}
.roadmap-header{display:flex;justify-content:space-between;margin-bottom:6px}
.roadmap-stage{font-size:10px;font-weight:700;color:var(--gold)}
.roadmap-levels{font-size:10px;color:var(--text-muted)}
.roadmap-name{font-size:16px;font-weight:800;margin-bottom:4px}
.roadmap-desc{font-size:12px;color:var(--text-sub);margin-bottom:10px}
.roadmap-skills{display:flex;flex-wrap:wrap;gap:6px}
.skill-tag{font-size:10px;padding:4px 8px;background:var(--bg);border-radius:6px;color:var(--text-muted)}
.roadmap-item.unlocked .skill-tag{background:rgba(212,175,55,.1);color:var(--gold)}
.roadmap-more{text-align:center;padding:20px;color:var(--text-muted)}
.roadmap-more-text{font-size:13px;font-weight:600;margin-bottom:4px}
.roadmap-more-sub{font-size:10px;opacity:.7}
/* Roadmap Preview on Home */
.rm-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.rm-item:hover{border-color:rgba(212,175,55,.3);transform:translateX(4px)}
.rm-item.rm-done{opacity:.7}
.rm-item.rm-done .rm-node{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.3)}
.rm-item.rm-current{border-color:var(--gold);background:linear-gradient(135deg,rgba(212,175,55,.08),transparent)}
.rm-item.rm-current .rm-node{border-color:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.3)}
.rm-item.rm-locked{opacity:.5}
.rm-item.rm-locked:hover{opacity:.7}
.rm-item.rm-highlight{background:linear-gradient(135deg,rgba(56,189,248,.06),rgba(212,175,55,.06));border-color:rgba(56,189,248,.25)}
.rm-item.rm-highlight::after{content:'';position:absolute;top:0;right:0;width:60px;height:100%;background:linear-gradient(90deg,transparent,rgba(212,175,55,.05))}
.rm-node{width:40px;height:40px;border-radius:12px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:var(--bg-card2)}
.rm-body{flex:1;min-width:0}
.rm-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rm-lv{font-size:10px;color:var(--gold);font-weight:800;background:rgba(212,175,55,.1);padding:2px 6px;border-radius:4px}
.rm-lock{font-size:12px}
.rm-badge-new{font-size:9px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;padding:2px 6px;border-radius:10px;font-weight:800;letter-spacing:.5px;animation:badgePulse 2s infinite}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.7}}
.rm-desc{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-lessons{font-size:11px;color:var(--text-sub);white-space:nowrap;flex-shrink:0}

/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 14px;margin-bottom:16px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;transition:all .2s}
.stat-card.clickable{cursor:pointer}
.stat-card.clickable:hover{border-color:var(--gold);background:rgba(212,175,55,.05);transform:translateY(-2px)}
.stat-card.clickable:active{transform:scale(.97)}
.stat-icon{font-size:24px;margin-bottom:8px}
.stat-value{font-size:22px;font-weight:800;color:var(--gold);margin-bottom:4px}
.stat-label{font-size:11px;color:var(--text-muted)}

/* Coming Soon */
.coming-soon-list{padding:0 14px}
.coming-item{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px}
.coming-item:last-child{margin-bottom:0}
.coming-icon{font-size:28px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:12px}
.coming-info{flex:1}
.coming-title{font-size:14px;font-weight:700;margin-bottom:2px}
.coming-desc{font-size:11px;color:var(--text-muted)}
.coming-badge{font-size:9px;font-weight:800;color:var(--gold);background:rgba(212,175,55,.15);padding:4px 10px;border-radius:10px;animation:badgePulse 2s infinite}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.6}}
.stage-num{font-size:9px;color:var(--text-muted);font-weight:600;margin-bottom:2px}
.stage-lv{font-size:18px;font-weight:900;color:var(--gold);margin-bottom:2px}
.stage-name{font-size:9px;font-weight:600;color:var(--text-sub)}

/* Lesson Cards */
.lesson-section{margin-bottom:24px}
.lesson-title{font-size:15px;font-weight:700;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.lesson-title .lv-badge{background:var(--gold);color:#000;padding:2px 8px;border-radius:10px;font-size:10px}
.lesson-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:pointer}
.lesson-card:active{transform:scale(.98)}
.lesson-card.completed{border-color:var(--success);opacity:.7}
.lesson-card.locked{opacity:.4;cursor:not-allowed}

/* Locked Preview Section (Level 80-89) */
.locked-preview-section{margin-bottom:24px}
.locked-preview-title{color:#FFD700}
.locked-preview-title .gold-badge{background:linear-gradient(135deg,#FFD700,#FFA500);color:#000}
.locked-preview-title .locked-msg{font-size:11px;color:#888;margin-left:auto}
.locked-preview-card{background:linear-gradient(135deg,rgba(255,215,0,.05),rgba(255,165,0,.05));border:1px dashed rgba(255,215,0,.3)}
.locked-preview-card.locked{opacity:.6;cursor:not-allowed}
.locked-preview-card .locked-icon{background:linear-gradient(135deg,#FFD700,#FFA500);color:#000}
.locked-preview-card .premium-xp{color:#FFD700;font-weight:700}

/* Ultra Locked Section (Level 90-99) */
.ultra-locked-section{margin-bottom:24px;position:relative}
.ultra-locked-title{color:#8B5CF6}
.ultra-locked-title .ultra-badge{background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff}
.ultra-lock-icon{margin-left:auto;font-size:14px}
.ultra-locked-card{background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(236,72,153,.1));border:1px solid rgba(139,92,246,.3);border-radius:12px;padding:20px;position:relative;overflow:hidden;min-height:60px}
.glitch-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(139,92,246,.03) 2px,rgba(139,92,246,.03) 4px);pointer-events:none}
.ultra-locked-content{text-align:center;position:relative;z-index:1}
.classified-stamp{font-size:10px;font-weight:700;color:#EC4899;letter-spacing:2px;margin-bottom:8px}
.mystery-text{font-size:14px;font-weight:600;color:#8B5CF6;margin-bottom:4px}
.mystery-desc{font-size:11px;color:#666}
.coming-soon-text{text-align:center;font-size:12px;font-weight:700;color:#8B5CF6;letter-spacing:3px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.ultra-locked-section.coming-soon .ultra-locked-card{border-style:dashed;animation:borderGlow 3s infinite}
@keyframes borderGlow{0%,100%{border-color:rgba(139,92,246,.3)}50%{border-color:rgba(236,72,153,.5)}}

.lesson-icon{width:40px;height:40px;border-radius:10px;background:var(--bg-card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.lesson-card.completed .lesson-icon{background:var(--success);border-color:var(--success);color:#fff}
.lesson-info{flex:1;min-width:0}
.lesson-name{font-size:13px;font-weight:600;margin-bottom:2px}
.lesson-new-badge{display:inline-block;margin-left:6px;padding:1px 6px;font-size:9px;font-weight:700;color:#000;background:linear-gradient(135deg,#FFD700,#FFA500);border-radius:4px;vertical-align:middle;letter-spacing:0.5px;animation:newBadgePulse 2s infinite}
@keyframes newBadgePulse{0%,100%{opacity:1}50%{opacity:.7}}
.lesson-desc{font-size:11px;color:var(--text-sub)}
.lesson-stats{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.lesson-stats .stat-item{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--text-muted);background:var(--bg);padding:2px 6px;border-radius:8px}
.lesson-stats .stat-item.highlight{color:var(--gold);background:rgba(212,175,55,.15)}
.lesson-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.lesson-xp{font-size:11px;color:var(--gold);font-weight:700}
.lesson-star{font-size:18px;color:#555;cursor:pointer;transition:all .2s;padding:4px}
.lesson-star:hover{transform:scale(1.2)}
.lesson-star.starred{color:var(--gold)}
.lesson-card.completed{border-color:var(--success);opacity:1;cursor:pointer}
.lesson-card.completed .lesson-xp{color:var(--success)}

/* 복습 섹션 */
.review-section{background:linear-gradient(135deg,rgba(249,115,22,.1),transparent);border:1px solid var(--orange);border-radius:14px;padding:16px;margin-bottom:20px}
.review-badge{background:var(--orange);color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;margin-left:8px}
.review-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:pointer;position:relative;overflow:hidden}
.review-card::before{content:'REVIEW';position:absolute;top:0;right:0;background:var(--orange);color:#fff;font-size:8px;font-weight:700;padding:2px 8px;border-radius:0 0 0 8px}
.review-card:active{transform:scale(.98)}
.review-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--orange),#fb923c);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.review-urgency{font-size:10px;color:var(--orange);margin-top:2px}

/* 푸시 알림 프롬프트 */
.push-prompt{margin-bottom:16px}
.push-card{background:linear-gradient(135deg,var(--bg-card),var(--bg-card2));border:1px solid var(--gold-dark);border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;position:relative}
.push-icon{font-size:24px}
.push-text{flex:1}
.push-text strong{font-size:13px;display:block;margin-bottom:2px}
.push-text p{font-size:11px;color:var(--text-sub);margin:0}
.push-btn{background:var(--gold);color:#000;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer}
.push-close{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer}

/* Level Chart View */
.level-chart-wrap{padding:14px}
.chart-title{font-size:16px;font-weight:700;color:var(--gold);margin-bottom:16px;text-align:center}
.chart-subtitle{font-size:12px;color:var(--text-sub);text-align:center;margin-bottom:20px}

.level-visual{position:relative;height:200px;background:var(--bg-card);border-radius:14px;padding:20px;margin-bottom:20px;overflow:hidden}
.level-bars{display:flex;align-items:flex-end;height:100%;gap:2px}
.level-bar-item{flex:1;background:var(--border);border-radius:2px 2px 0 0;min-width:3px;transition:all .3s}
.level-bar-item.filled{background:linear-gradient(180deg,var(--gold),var(--gold-dark))}
.level-bar-item.current{background:linear-gradient(180deg,var(--gold-light),var(--gold));box-shadow:0 0 10px var(--gold);animation:currentPulse 1.5s infinite}
@keyframes currentPulse{0%,100%{box-shadow:0 0 10px var(--gold)}50%{box-shadow:0 0 20px var(--gold-light)}}

.my-position{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--gold);color:#000;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}

.level-table{background:var(--bg-card);border-radius:14px;overflow:hidden}
.level-table-head{display:grid;grid-template-columns:60px 2fr 70px;padding:12px 14px;background:var(--bg-card2);border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--text-sub)}
.level-row{display:grid;grid-template-columns:60px 2fr 70px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:12px;align-items:center;position:relative}
.level-row:last-child{border-bottom:none}
.level-row.current{background:linear-gradient(90deg,rgba(212,175,55,.2),rgba(212,175,55,.05));border-left:4px solid var(--gold);animation:currentRowPulse 2s infinite}
@keyframes currentRowPulse{0%,100%{background:linear-gradient(90deg,rgba(212,175,55,.2),rgba(212,175,55,.05))}50%{background:linear-gradient(90deg,rgba(212,175,55,.3),rgba(212,175,55,.1))}}
.level-row.passed{color:var(--text-muted)}
.level-row .lv{font-weight:700;display:flex;align-items:center;gap:6px}
.level-row .xp{color:var(--text-sub)}
.level-row .delta{color:var(--gold);font-weight:600}
.level-row.current .lv{color:var(--gold);font-weight:800}
.level-row.current .user-icon{font-size:16px;animation:float 2s ease-in-out infinite;display:inline-flex;align-items:center;justify-content:center}
.level-row.current .user-icon img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 8px rgba(212,175,55,.5)}
.level-row.current::after{content:'← YOU';position:absolute;right:14px;font-size:10px;font-weight:700;color:var(--gold);background:rgba(212,175,55,.15);padding:2px 8px;border-radius:10px}

/* 레벨 유저 분포 */
.level-progress-bar{padding:0 8px}
.progress-track{position:relative;height:20px;background:var(--bg-card2);border-radius:10px;cursor:pointer;overflow:visible}
.progress-track:hover{background:var(--border)}
/* 둥둥 떠다니는 애니메이션 */
@keyframes markerFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-3px)}}
@keyframes markerGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(251,191,36,.3))}50%{filter:drop-shadow(0 0 8px rgba(251,191,36,.6))}}
.user-marker{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:2;cursor:pointer;transition:all .2s}
.user-marker.has-thumb{animation:markerFloat 2s ease-in-out infinite}
.user-marker.rank-1.has-thumb{animation:markerFloat 2s ease-in-out infinite, markerGlow 2s ease-in-out infinite;animation-delay:0s}
.user-marker.rank-2.has-thumb{animation-delay:.3s}
.user-marker.rank-3.has-thumb{animation-delay:.6s}
.user-marker:hover{transform:translate(-50%,-50%) scale(1.2);z-index:10;animation:none!important}
.user-marker .marker-icon{font-size:16px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));line-height:1}
.user-marker .marker-initial{font-size:8px;font-weight:700;color:var(--text);background:var(--bg-card2);border:1px solid var(--border);border-radius:4px;padding:1px 4px;margin-top:-2px}
.user-marker.rank-1 .marker-icon{font-size:20px}
.user-marker.rank-1 .marker-initial{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;border-color:#fbbf24}
.user-marker.rank-2 .marker-initial{background:linear-gradient(135deg,#9ca3af,#6b7280);color:#fff;border-color:#9ca3af}
.user-marker.rank-3 .marker-initial{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;border-color:#d97706}
.user-marker.rank-1{z-index:5}
.user-marker.rank-2{z-index:4}
.user-marker.rank-3{z-index:3}
/* 프로필 썸네일 */
.user-marker .marker-thumb{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--border);margin-top:-2px;box-shadow:0 3px 10px rgba(0,0,0,.5);transition:all .2s}
.user-marker.rank-1 .marker-thumb{width:32px;height:32px;border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.6),0 3px 10px rgba(0,0,0,.4)}
.user-marker.rank-2 .marker-thumb{width:30px;height:30px;border-color:#9ca3af;box-shadow:0 0 8px rgba(156,163,175,.5),0 3px 10px rgba(0,0,0,.4)}
.user-marker.rank-3 .marker-thumb{width:30px;height:30px;border-color:#d97706;box-shadow:0 0 8px rgba(217,119,6,.5),0 3px 10px rgba(0,0,0,.4)}
.user-marker.has-thumb:hover .marker-thumb{transform:scale(1.3);box-shadow:0 6px 16px rgba(0,0,0,.6)}
.user-marker.private{cursor:default;opacity:.7}
.user-marker.private:hover .marker-thumb,.user-marker.private:hover .marker-initial{transform:none}
.user-count-more{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:rgba(100,100,100,.4);color:var(--text-sub);font-size:9px;font-weight:600;padding:3px 8px;border-radius:10px}
.level-users-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-card);border:1px solid var(--gold);border-radius:16px;padding:20px;z-index:1000;max-width:320px;width:90%;max-height:70vh;overflow-y:auto}
.level-users-popup h3{color:var(--gold);font-size:14px;margin-bottom:12px;text-align:center}
.level-users-popup .close-btn{position:absolute;top:12px;right:12px;background:var(--bg);border:1px solid var(--border);color:var(--text-sub);font-size:11px;font-weight:600;padding:6px 12px;border-radius:16px;cursor:pointer;transition:all .2s}
.level-users-popup .close-btn:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px rgba(212,175,55,.3)}
.level-users-list{display:flex;flex-direction:column;gap:8px}
.level-user-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-card2);border-radius:10px;transition:all .2s;cursor:pointer}
.level-user-item:hover{background:var(--border);transform:translateX(4px)}
.level-user-item.top3{background:linear-gradient(135deg,rgba(212,175,55,.1),transparent);border:1px solid rgba(212,175,55,.3)}
.level-user-item.rank-1{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.05));border:1px solid rgba(251,191,36,.5)}
.level-user-item.rank-2{background:linear-gradient(135deg,rgba(156,163,175,.15),transparent);border:1px solid rgba(156,163,175,.4)}
.level-user-item.rank-3{background:linear-gradient(135deg,rgba(217,119,6,.15),transparent);border:1px solid rgba(217,119,6,.4)}
.rank-badge{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--text-sub);background:var(--bg);border-radius:8px;flex-shrink:0}
.rank-badge.top3{font-size:20px;background:transparent}
.popup-subtitle{text-align:center;font-size:12px;color:var(--text-sub);margin:-8px 0 12px}
.xp-gap-small{font-size:10px;color:#ef4444;margin-left:6px}
.level-user-item .avatar{width:32px;height:32px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#000;overflow:hidden}
.level-user-item .avatar img{width:100%;height:100%;object-fit:cover}
.level-user-item .info{flex:1}
.level-user-item .nickname{font-weight:600;font-size:13px}
.level-user-item .progress{font-size:11px;color:var(--text-sub)}
.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:999}

/* 로켓 트랙 */
.rocket-track-wrap{background:var(--bg-card);border-radius:16px;padding:20px;margin-bottom:20px;border:1px solid var(--border)}
.rocket-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-bottom:8px}
.rocket-track{position:relative;height:40px;background:var(--bg-card2);border-radius:20px;overflow:hidden}
.track-zone{position:absolute;top:0;height:100%;opacity:.3}
.zone-2x{background:linear-gradient(90deg,#3b82f6,#60a5fa);left:0}
.zone-stable{background:linear-gradient(90deg,#22c55e,#4ade80)}
.zone-15x{background:linear-gradient(90deg,#f97316,#fb923c)}
.zone-final{background:linear-gradient(90deg,#ef4444,#f87171)}
.rocket-progress{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light));border-radius:20px;width:0;transition:width 2s cubic-bezier(.4,0,.2,1)}
.rocket{position:absolute;top:50%;font-size:32px;left:0;z-index:10;filter:drop-shadow(0 0 12px var(--gold)) drop-shadow(0 0 25px rgba(212,175,55,.5));animation:rocketFloat 3s ease-in-out infinite;transition:left 2s cubic-bezier(.4,0,.2,1)}
.rocket.has-image{font-size:0}
.rocket.has-image img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);box-shadow:0 0 20px rgba(212,175,55,.6)}
@keyframes rocketFloat{0%,100%{transform:translateY(-50%) translateX(-50%) rotate(-10deg)}25%{transform:translateY(-60%) translateX(-50%) rotate(-5deg)}50%{transform:translateY(-40%) translateX(-50%) rotate(-15deg)}75%{transform:translateY(-55%) translateX(-50%) rotate(-8deg)}}
.rocket.has-image{animation:profileFloat 3s ease-in-out infinite}
@keyframes profileFloat{0%,100%{transform:translateY(-50%) translateX(-50%)}25%{transform:translateY(-60%) translateX(-50%)}50%{transform:translateY(-40%) translateX(-50%)}75%{transform:translateY(-55%) translateX(-50%)}}
.rocket.arrived{animation:rocketBounce 1s ease-in-out infinite}
@keyframes rocketBounce{0%,100%{transform:translateY(-50%) translateX(-50%) scale(1)}50%{transform:translateY(-55%) translateX(-50%) scale(1.1)}}
.rocket-glow{position:absolute;width:60px;height:60px;background:radial-gradient(circle,rgba(212,175,55,.4) 0%,transparent 70%);border-radius:50%;pointer-events:none;animation:glowPulse 2s ease-in-out infinite;z-index:5}
@keyframes glowPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.3}}
.rocket-info{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.rocket-level{font-size:24px;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:8px}
.level-icon{font-size:28px;animation:iconBounce 2s ease-in-out infinite;display:inline-flex;align-items:center;justify-content:center}
.level-icon.has-image{font-size:0}
.level-icon.has-image img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 10px rgba(212,175,55,.5)}
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.rocket-percent{font-size:18px;font-weight:700;color:var(--text)}

/* 현재 레벨 카드 */
.current-level-card{background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.05));border:1px solid var(--gold-dark);border-radius:16px;padding:20px;margin-bottom:20px}
.clc-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.clc-badge{background:var(--gold);color:#000;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:700;letter-spacing:1px}
.clc-level{font-size:28px;font-weight:800}
.clc-xp-bar{position:relative;height:24px;background:var(--bg-card2);border-radius:12px;overflow:hidden;margin-bottom:16px}
.clc-xp-fill{height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold));border-radius:12px;transition:width 1s}
.clc-xp-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.clc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.clc-stat{text-align:center}
.clc-stat-value{font-size:18px;font-weight:800;color:var(--gold)}
.clc-stat-label{font-size:10px;color:var(--text-muted);margin-top:2px}

/* 구간 범례 */
.zone-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.zone-item{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:12px}
.zone-color{width:12px;height:40px;border-radius:6px;flex-shrink:0}
.zone-2x-color{background:linear-gradient(180deg,#3b82f6,#60a5fa)}
.zone-stable-color{background:linear-gradient(180deg,#22c55e,#4ade80)}
.zone-15x-color{background:linear-gradient(180deg,#f97316,#fb923c)}
.zone-final-color{background:linear-gradient(180deg,#ef4444,#f87171)}
.zone-info{flex:1;min-width:0}
.zone-name{font-size:12px;font-weight:700;margin-bottom:2px}
.zone-range{font-size:10px;color:var(--text-muted);font-weight:400}
.zone-desc{font-size:10px;color:var(--text-sub)}

/* XP 그래프 */
.xp-graph-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:20px}
.xp-graph-title{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:16px;text-align:center}
.xp-graph{display:flex;align-items:flex-end;height:120px;gap:2px;padding:0 4px}
.xp-bar-wrap{flex:1;height:100%;display:flex;align-items:flex-end}
.xp-bar{width:100%;border-radius:3px 3px 0 0;position:relative;min-height:4px;transition:height .5s}
.xp-bar.bar-2x{background:linear-gradient(180deg,#3b82f6,#1e40af)}
.xp-bar.bar-stable{background:linear-gradient(180deg,#22c55e,#15803d)}
.xp-bar.bar-15x{background:linear-gradient(180deg,#f97316,#c2410c)}
.xp-bar.bar-final{background:linear-gradient(180deg,#ef4444,#b91c1c)}
.xp-bar.current{box-shadow:0 0 12px var(--gold);border:2px solid var(--gold)}
.xp-bar-label{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:8px;color:var(--text-muted);white-space:nowrap;margin-bottom:4px}
.xp-graph-x{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--text-muted)}

.level-tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}
.level-tabs::-webkit-scrollbar{display:none}
.level-tab{padding:8px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer;color:var(--text-sub);transition:all .2s}
.level-tab:hover{background:var(--bg-card2);border-color:var(--gold-dark)}
.level-tab.active{background:linear-gradient(135deg,#d4af37,#b8962e);border-color:#d4af37;color:#000 !important;font-weight:700;box-shadow:0 2px 8px rgba(212,175,55,.4)}
.level-tab.has-user{position:relative}
.level-tab.has-user::after{content:'';position:absolute;top:-3px;right:-3px;width:8px;height:8px;background:var(--gold);border-radius:50%;border:2px solid var(--bg);animation:pulse 1.5s infinite}
.level-tab .tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;background:rgba(255,255,255,.15);color:inherit;font-size:9px;font-weight:700;border-radius:8px;margin-left:4px;padding:0 4px}
.level-tab.active .tab-count{background:rgba(0,0,0,.2)}

.rank-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px}
.rank-item:nth-child(1){border-color:var(--gold);background:linear-gradient(135deg,rgba(212,175,55,.12),transparent)}
.rank-item:nth-child(2){border-color:#c0c0c0;background:linear-gradient(135deg,rgba(192,192,192,.08),transparent)}
.rank-item:nth-child(3){border-color:#cd7f32;background:linear-gradient(135deg,rgba(205,127,50,.08),transparent)}
.rank-pos{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--text-muted);border-radius:50%}
.rank-item:nth-child(1) .rank-pos{background:var(--gold);color:#000}
.rank-item:nth-child(2) .rank-pos{background:#c0c0c0;color:#000}
.rank-item:nth-child(3) .rank-pos{background:#cd7f32;color:#fff}
.rank-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-card2);overflow:hidden}
.rank-avatar img{width:100%;height:100%;object-fit:cover}
.rank-info{flex:1}
.rank-name{font-size:13px;font-weight:600}
.rank-lv{font-size:11px;color:var(--text-sub)}
.rank-xp{font-size:14px;font-weight:700;color:var(--gold)}

.tab-bar{position:fixed;bottom:0;left:0;right:0;height:calc(65px + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:rgba(10,10,10,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:flex-start;padding-top:8px;z-index:100}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 14px;background:none;border:none;cursor:pointer;color:var(--text-muted)}
.tab.active{color:var(--gold)}
.tab-icon{font-size:18px}
.tab-label{font-size:9px;font-weight:600;letter-spacing:.3px}

.view{display:none}.view.active{display:block}

.profile-header{text-align:center;padding:30px 20px;background:linear-gradient(180deg,#151515,#0a0a0a);border-bottom:1px solid var(--border)}
.profile-avatar{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:900;color:#000;overflow:hidden;position:relative;cursor:pointer;border:3px solid var(--gold)}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-avatar-edit{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);padding:6px;font-size:10px;color:#fff;font-weight:600}
.profile-name{font-size:20px;font-weight:800;margin-bottom:4px}
.profile-level{font-size:14px;color:var(--gold);margin-bottom:16px}
.profile-level-bar{max-width:250px;margin:0 auto}
.profile-stats{display:flex;justify-content:center;gap:30px;margin-top:20px}
.profile-stat{text-align:center}
.profile-stat-num{font-size:20px;font-weight:800;color:var(--gold)}
.profile-stat-label{font-size:10px;color:var(--text-sub)}
.profile-section{padding:20px 14px}
.profile-section-title{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:12px}
.profile-info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.profile-info-label{font-size:13px;color:var(--text-sub)}
.profile-info-value{font-size:13px;font-weight:600}

/* Settings */
.settings-wrap{padding:16px}
.settings-header{text-align:center;padding:20px 0 30px}
.settings-icon{font-size:48px;margin-bottom:12px}
.settings-title{font-size:24px;font-weight:700;color:var(--gold);margin-bottom:4px}
.settings-subtitle{font-size:13px;color:var(--text-sub)}
.nick-option-btn:hover{border-color:var(--gold) !important;background:rgba(212,175,55,.05) !important}
.settings-section{background:var(--bg-card);border-radius:16px;padding:20px;margin-bottom:16px}
.settings-section-title{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:16px;letter-spacing:1px}
.settings-notice{display:flex;gap:12px;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3);border-radius:12px;padding:14px;margin-bottom:20px}
.settings-notice .notice-icon{font-size:20px}
.settings-notice .notice-text{font-size:12px;line-height:1.5;color:var(--text-sub)}
.settings-notice .notice-text strong{color:var(--gold)}
.api-key-item{background:var(--bg-card2);border-radius:12px;padding:14px;margin-bottom:12px;border:1px solid var(--border)}
.api-key-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.api-key-logo{font-size:24px}
.api-key-info{flex:1}
.api-key-name{font-size:14px;font-weight:600;color:var(--text)}
.api-key-desc{font-size:11px;color:var(--text-muted)}
.api-key-status{font-size:10px;font-weight:600;padding:4px 10px;border-radius:12px;background:var(--bg-card);color:var(--text-muted)}
.api-key-status.set{background:rgba(76,175,80,.15);color:var(--success)}
.api-key-input-wrap{display:flex;gap:8px}
.api-key-input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--text);font-family:monospace;min-width:0}
.api-key-input:focus{outline:none;border-color:var(--gold)}
.api-key-input::placeholder{color:var(--text-muted)}
.api-key-toggle{background:var(--bg-card2);border:1px solid var(--border);border-radius:8px;padding:0 12px;font-size:16px;cursor:pointer;color:var(--text-sub);filter:grayscale(0)}
.api-key-toggle:hover{background:var(--bg-card);border-color:var(--gold);color:var(--text)}
.api-key-test{background:var(--gold);border:none;border-radius:8px;padding:0 14px;font-size:11px;font-weight:700;color:#000;cursor:pointer;white-space:nowrap}
.api-key-test:hover{opacity:.9}
.api-key-test:disabled{background:var(--bg-card);color:var(--text-muted);cursor:not-allowed}
.api-key-test.loading{background:var(--bg-card);color:var(--text-muted)}
.api-key-detail{margin-bottom:12px;padding:12px;background:var(--bg);border-radius:8px}
.api-key-detail p{font-size:12px;line-height:1.6;color:var(--text-sub);margin:0 0 10px}
.api-key-links{display:flex;gap:8px;flex-wrap:wrap}
.api-link{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;font-size:11px;color:var(--text);text-decoration:none;transition:all .2s}
.api-link:hover{border-color:var(--gold);color:var(--gold)}
.api-link.login{border-color:rgba(76,175,80,.3);color:var(--success)}
.api-link.login:hover{background:rgba(76,175,80,.1)}
.api-link.key{border-color:rgba(212,175,55,.3);color:var(--gold)}
.api-link.key:hover{background:rgba(212,175,55,.1)}
.api-key-test-result{margin-top:8px;padding:10px 12px;border-radius:8px;font-size:12px;display:none}
.api-key-test-result.show{display:block}
.api-key-test-result.success{background:rgba(76,175,80,.15);color:var(--success);border:1px solid rgba(76,175,80,.3)}
.api-key-test-result.error{background:rgba(244,67,54,.15);color:var(--error);border:1px solid rgba(244,67,54,.3)}
.api-key-test-result .result-title{font-weight:700;margin-bottom:4px}
.api-key-test-result .result-detail{font-size:11px;opacity:.8}
.api-usage-info{display:flex;gap:12px;background:linear-gradient(135deg,rgba(76,175,80,.1),rgba(76,175,80,.05));border:1px solid rgba(76,175,80,.3);border-radius:12px;padding:14px;margin-bottom:20px}
.api-usage-info .usage-icon{font-size:24px}
.api-usage-info .usage-text{font-size:12px;line-height:1.6;color:var(--text-sub)}
.api-usage-info .usage-text strong{color:var(--success)}
.model-select-wrap{margin-bottom:12px}
.model-label{display:block;font-size:10px;font-weight:600;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.model-select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--text);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.model-select:focus{outline:none;border-color:var(--gold)}
.model-select option{background:var(--bg-card);color:var(--text)}
.model-info{font-size:11px;color:var(--text-muted);margin-top:6px;padding:8px 10px;background:var(--bg);border-radius:6px}
.settings-save-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));border:none;border-radius:12px;font-size:14px;font-weight:700;color:#000;cursor:pointer;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px}
.settings-save-btn:hover{opacity:.9}
.settings-clear-btn{width:100%;padding:12px;background:transparent;border:1px solid var(--border);border-radius:12px;font-size:12px;color:var(--text-muted);cursor:pointer;margin-top:8px}
.settings-clear-btn:hover{border-color:var(--error);color:var(--error)}
.settings-about .about-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.settings-about .about-row:last-child{border-bottom:none}
.settings-about .about-row span:first-child{color:var(--text-sub)}
.settings-about .about-row span:last-child{font-weight:600}

/* Threads Integration Styles */
.threads-connected{padding:10px 0}
.threads-profile{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.threads-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--gold)}
.threads-avatar-placeholder{width:48px;height:48px;border-radius:50%;background:var(--bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:24px}
.threads-info{flex:1}
.threads-username{font-size:14px;font-weight:600;color:var(--text)}
.threads-status{margin-top:4px}
.verified-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:linear-gradient(135deg,rgba(76,175,80,.2),rgba(76,175,80,.1));border:1px solid rgba(76,175,80,.4);border-radius:12px;font-size:10px;font-weight:600;color:var(--success)}
.pending-badge{display:inline-flex;padding:3px 8px;background:var(--bg);border:1px solid var(--border);border-radius:12px;font-size:10px;color:var(--text-sub)}
.threads-benefits{background:var(--bg);border-radius:12px;padding:14px;margin-bottom:16px}
.benefit-title{font-size:11px;font-weight:700;color:var(--gold);margin-bottom:10px;letter-spacing:.5px}
.benefit-item{font-size:12px;color:var(--text-sub);padding:4px 0}
.benefit-item.active{color:var(--success)}
.benefit-item.dim{opacity:.5}
.threads-actions{display:flex;flex-wrap:wrap;gap:8px}
.threads-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:all .2s}
.threads-btn.primary{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;border:1px solid rgba(255,255,255,.1)}
.threads-btn.primary:hover{border-color:var(--gold)}
.threads-btn.secondary{background:var(--bg);color:var(--gold);border:1px solid var(--gold)}
.threads-btn.secondary:hover{background:rgba(212,175,55,.1)}
.threads-btn.danger{background:transparent;color:var(--error);border:1px solid var(--error);opacity:.6}
.threads-btn.danger:hover{opacity:1;background:rgba(244,67,54,.1)}
.threads-connect{text-align:center;padding:10px 0}
.threads-promo{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(0,0,0,.3),rgba(0,0,0,.1));border-radius:16px;padding:16px;margin-bottom:16px;text-align:left}
.threads-icon{font-size:36px}
.promo-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.promo-desc{font-size:12px;color:var(--text-sub)}
.threads-benefits-preview{background:var(--bg);border-radius:12px;padding:14px;margin-bottom:16px;text-align:left}
.threads-benefits-preview .benefit-item{font-size:12px;color:var(--text-sub);padding:5px 0}
.threads-connect-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}
.threads-connect-btn:hover{border-color:var(--gold);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.threads-connect-btn .btn-icon{font-size:18px}

/* Threads Beta Notice */
.threads-beta-notice{display:flex;align-items:flex-start;gap:12px;background:linear-gradient(135deg,rgba(147,51,234,.15),rgba(147,51,234,.05));border:1px solid rgba(147,51,234,.3);border-radius:12px;padding:14px;margin-bottom:16px}
.beta-badge{background:linear-gradient(135deg,#9333ea,#7c3aed);color:#fff;padding:4px 10px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap}
.beta-text{flex:1;font-size:12px;color:var(--text-sub);line-height:1.5}
.beta-text strong{display:block;color:var(--text);margin-bottom:4px}
.beta-text p{margin:0}
.threads-beta-steps{background:var(--bg);border-radius:12px;padding:14px;margin-bottom:16px}
.beta-step{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12px;color:var(--text-sub)}
.beta-step:not(:last-child){border-bottom:1px solid var(--border)}
.step-num{width:20px;height:20px;background:var(--gold);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}

/* Threads Verify Modal */
.threads-verify-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.verify-modal-content{background:var(--bg-card);border-radius:20px;padding:30px;max-width:340px;width:100%;text-align:center;position:relative}
.verify-close{position:absolute;top:12px;right:16px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-sub);cursor:pointer}
.verify-icon{font-size:48px;margin-bottom:16px}
.verify-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:20px}
.verify-steps{text-align:left;background:var(--bg);border-radius:12px;padding:16px;margin-bottom:20px}
.verify-steps .step{font-size:13px;color:var(--text-sub);padding:6px 0;line-height:1.5}
.verify-code{background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(212,175,55,.1));border:2px dashed var(--gold);border-radius:12px;padding:16px;font-size:24px;font-weight:700;letter-spacing:3px;color:var(--gold);margin-bottom:16px}
.verify-note{font-size:11px;color:var(--text-muted);margin-bottom:20px}
.verify-btn{width:100%;padding:14px 20px;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.verify-btn:hover{border-color:var(--gold)}

.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:10000;opacity:0;visibility:hidden;transition:.3s}
.sheet-bg.show{opacity:1;visibility:visible}
.sheet{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);border-radius:24px 24px 0 0;max-height:90vh;z-index:10001;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1)}
.sheet.show{transform:translateY(0)}
.sheet-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:12px auto}
.sheet-head{padding:0 20px 16px;border-bottom:1px solid var(--border)}
.sheet-title{font-size:17px;font-weight:700}
.sheet-sub{font-size:12px;color:var(--text-sub);margin-top:3px}
.sheet-close{position:absolute;top:14px;right:16px;width:32px;height:32px;background:var(--bg);border:1px solid var(--border);border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text)}
.sheet-body{padding:20px;max-height:calc(90vh - 90px);overflow-y:auto}

.field{margin-bottom:18px}
.field-label{display:block;font-size:12px;font-weight:600;color:var(--text-sub);margin-bottom:8px}
.field-input{width:100%;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:12px;font-size:14px;font-family:inherit;color:var(--text)}
.field-input:focus{outline:none;border-color:var(--gold)}
.field-textarea{min-height:120px;resize:none}

.assess-options{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.assess-opt{padding:16px;background:var(--bg);border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s}
.assess-opt:hover,.assess-opt:active{border-color:var(--gold);background:rgba(212,175,55,.08)}
.assess-opt-text{font-size:14px;font-weight:500}
.assess-opt-xp{font-size:11px;color:var(--gold);margin-top:4px}
.assess-progress{display:flex;gap:4px;margin-bottom:20px}
.assess-dot{width:100%;height:4px;background:var(--border);border-radius:2px}
.assess-dot.done{background:var(--gold)}
.assess-dot.current{background:var(--gold);animation:pulse 1s infinite}

.btn-submit{width:100%;padding:16px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border:none;border-radius:14px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer}
.btn-submit:active{transform:scale(.98)}

.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--bg-card);border:1px solid var(--gold);color:var(--text);padding:14px 28px;border-radius:30px;font-size:13px;font-weight:600;z-index:9000;opacity:0;transition:.3s}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* 응원 알림 */
.cheer-notification{position:fixed;top:80px;right:16px;z-index:9500;transform:translateX(120%);transition:transform .3s ease;max-width:340px}
.cheer-notification.show{transform:translateX(0)}
.cheer-notif-content{background:linear-gradient(135deg,rgba(212,175,55,.15),var(--bg-card));border:2px solid var(--gold);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 8px 32px rgba(0,0,0,.5);position:relative}
.cheer-notif-avatar{font-size:32px;flex-shrink:0}
.cheer-notif-body{flex:1;min-width:0}
.cheer-notif-title{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:4px}
.cheer-notif-from{font-size:12px;color:var(--text);margin-bottom:6px}
.cheer-notif-close{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:var(--text-sub);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.cheer-notif-close:hover{background:rgba(239,68,68,.3);color:var(--danger)}
.cheer-notif-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.cheer-notif-actions button{flex:1;padding:8px;border-radius:8px;border:none;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.cheer-btn-thanks{background:var(--gold);color:#000}
.cheer-btn-thanks:hover{opacity:.9}
.cheer-btn-spam{background:rgba(239,68,68,.2);color:var(--danger);border:1px solid rgba(239,68,68,.3)!important}
.cheer-btn-spam:hover{background:rgba(239,68,68,.4)}
.cheer-notif-msg{font-size:13px;color:var(--text-sub);line-height:1.4;word-break:break-word}

/* 뱃지 시스템 */
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.badge-item{position:relative;aspect-ratio:1;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;border:2px solid transparent}
.badge-item.locked{opacity:.4;filter:grayscale(1);cursor:not-allowed}
.badge-item.unlocked{border-color:var(--gold);background:rgba(212,175,55,.1)}
.badge-item.unlocked:hover{transform:scale(1.05)}
.badge-item.claimed{border-color:var(--success);background:rgba(34,197,94,.1)}
.badge-item.equipped{border-color:var(--cyan);background:rgba(0,255,255,.1);box-shadow:0 0 20px rgba(0,255,255,.3)}
.badge-icon{font-size:28px;margin-bottom:4px}
.badge-level{font-size:10px;font-weight:700;color:var(--text-sub)}
.badge-check{position:absolute;top:4px;right:4px;width:16px;height:16px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.badge-equipped-mark{position:absolute;top:4px;left:4px;font-size:12px}

/* 뱃지 등급별 스타일 */
.badge-item[data-tier="bronze"]{background:linear-gradient(135deg,rgba(205,127,50,.2),rgba(139,90,43,.1))}
.badge-item[data-tier="silver"]{background:linear-gradient(135deg,rgba(192,192,192,.2),rgba(169,169,169,.1))}
.badge-item[data-tier="gold"]{background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(218,165,32,.1))}
.badge-item[data-tier="platinum"]{background:linear-gradient(135deg,rgba(229,228,226,.3),rgba(192,192,192,.2))}
.badge-item[data-tier="diamond"]{background:linear-gradient(135deg,rgba(185,242,255,.3),rgba(0,255,255,.2))}
.badge-item[data-tier="legendary"]{background:linear-gradient(135deg,rgba(255,0,128,.2),rgba(138,43,226,.2));animation:legendaryPulse 2s infinite}
.badge-item[data-tier="mythic"]{background:linear-gradient(135deg,rgba(255,215,0,.3),rgba(255,0,128,.2),rgba(0,255,255,.2));animation:mythicShine 3s infinite}

@keyframes legendaryPulse{0%,100%{box-shadow:0 0 10px rgba(255,0,128,.3)}50%{box-shadow:0 0 25px rgba(138,43,226,.5)}}
@keyframes mythicShine{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

/* 뱃지 클레임 모달 */
.badge-claim-modal{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:10000;display:none;align-items:center;justify-content:center;flex-direction:column}
.badge-claim-modal.show{display:flex}
.badge-claim-content{text-align:center;animation:badgeAppear .5s ease}
.badge-claim-icon{font-size:120px;margin-bottom:20px;animation:badgeBounce 1s ease}
.badge-claim-title{font-size:28px;font-weight:800;color:var(--gold);margin-bottom:10px}
.badge-claim-subtitle{font-size:16px;color:var(--text-sub);margin-bottom:30px}
.badge-claim-btn{padding:16px 40px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border:none;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}
.badge-claim-btn:hover{transform:scale(1.05)}
.badge-equip-btn{margin-left:12px;padding:16px 40px;background:var(--bg-card);color:var(--text);border:2px solid var(--gold);border-radius:30px;font-size:16px;font-weight:700;cursor:pointer}

@keyframes badgeAppear{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
@keyframes badgeBounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}

/* 축하 파티클 효과 */
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:10001;overflow:hidden}
.confetti{position:absolute;width:10px;height:10px;top:-10px;animation:confettiFall 3s linear forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

.splash{position:fixed;inset:0;background:#000;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{font-size:28px;font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.splash-sub{font-size:10px;color:var(--text-sub);margin-top:8px;letter-spacing:3px;font-weight:600}

.warning-box{background:rgba(220,38,38,.15);border:1px solid var(--danger);border-radius:12px;padding:14px;margin-bottom:18px}
.warning-box p{font-size:12px;color:var(--text-sub);line-height:1.6}
.warning-box b{color:var(--danger)}

.levelup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s}
.levelup-overlay.show{opacity:1;visibility:visible}
.levelup-text{font-size:16px;color:var(--gold);letter-spacing:4px;margin-bottom:10px;animation:fadeInUp .5s ease}
.levelup-level{font-size:72px;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--gold-light),#fff,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:levelPop .8s ease}
.levelup-sub{font-size:14px;color:var(--text-sub);margin-top:10px}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes levelPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

.particles{position:fixed;inset:0;pointer-events:none;z-index:10001;overflow:hidden}
.particle{position:absolute;width:10px;height:10px;background:var(--gold);border-radius:50%;animation:particleFly 2s ease-out forwards}
@keyframes particleFly{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-400px) scale(0)}}

.levelup-overlay.special .levelup-level{font-size:100px;animation:specialPop 1.2s ease}
.levelup-overlay.special::before{content:'';position:absolute;width:300px;height:300px;background:radial-gradient(circle,var(--gold) 0%,transparent 70%);animation:specialGlow 2s ease infinite}

/* Daily Check-in Modal */
.checkin-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s;backdrop-filter:blur(10px)}
.checkin-overlay.show{opacity:1;visibility:visible}
.checkin-card{background:linear-gradient(145deg,#1a1a1a,#0f0f0f);border:2px solid var(--gold);border-radius:24px;padding:32px;text-align:center;max-width:380px;width:90%;transform:scale(.8);transition:.3s;max-height:90vh;overflow-y:auto}
.checkin-overlay.show .checkin-card{transform:scale(1)}
.checkin-icon{font-size:64px;margin-bottom:16px;animation:fireAnim 1s ease infinite}
@keyframes fireAnim{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.checkin-title{font-size:28px;font-weight:800;margin-bottom:8px;background:linear-gradient(135deg,var(--gold),#fff,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.checkin-sub{font-size:13px;color:var(--text-sub);margin-bottom:20px}
.checkin-calendar{display:flex;justify-content:center;gap:6px;margin-bottom:20px}
.checkin-day{width:36px;height:36px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-muted)}
.checkin-day.checked{background:rgba(212,175,55,.2);border-color:var(--gold);color:var(--gold)}
.checkin-day.today{background:var(--gold);color:#000;font-weight:700;animation:todayPulse 1.5s ease infinite}
@keyframes todayPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.4)}50%{box-shadow:0 0 0 8px rgba(212,175,55,0)}}
.checkin-bonus{background:rgba(34,197,94,.15);border:1px solid var(--success);border-radius:12px;padding:12px;margin-bottom:20px;font-size:13px;color:var(--success);display:none}
.checkin-bonus.show{display:block}
.checkin-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer}

/* ===== 룰렛 스타일 ===== */
.roulette-section{margin:20px 0 16px;position:relative}
.roulette-wheel{position:relative;width:240px;height:240px;margin:0 auto;border-radius:50%;border:4px solid var(--gold);overflow:hidden;box-shadow:0 0 30px rgba(212,175,55,.3)}
.roulette-inner{width:100%;height:100%;transition:transform 4s cubic-bezier(.17,.67,.12,.99);position:relative}
.roulette-segment{position:absolute;width:100%;height:100%;clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 50%);transform-origin:50% 50%;display:flex;align-items:center;justify-content:center}
.roulette-segment-text{position:absolute;top:18%;left:62%;font-size:11px;font-weight:800;transform:rotate(22.5deg);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.roulette-pointer{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid var(--gold);z-index:10;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.roulette-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:5;box-shadow:0 0 15px rgba(212,175,55,.5)}
.spin-btn{width:100%;padding:16px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:800;cursor:pointer;margin-top:16px;letter-spacing:1px;transition:all .2s;position:relative;overflow:hidden}
.spin-btn:hover{transform:scale(1.02);box-shadow:0 0 20px rgba(139,92,246,.4)}
.spin-btn:disabled{background:#333;color:#666;cursor:not-allowed;transform:none;box-shadow:none}
.spin-btn::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);animation:spinBtnShine 3s ease infinite}
@keyframes spinBtnShine{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}
.roulette-result{display:none;margin-top:16px;padding:20px;background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(139,92,246,.1));border:2px solid var(--gold);border-radius:16px;animation:resultPop .5s ease}
.roulette-result.show{display:block}
.roulette-result-dp{font-size:48px;font-weight:900;background:linear-gradient(135deg,var(--gold),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:dpPulse 1s ease infinite}
@keyframes resultPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ===== 로또 스타일 ===== */
.lotto-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9998;display:none;align-items:center;justify-content:center;backdrop-filter:blur(10px)}
.lotto-overlay.show{display:flex}
.lotto-card{background:linear-gradient(145deg,#0a0a1a,#1a0a2e);border:2px solid var(--purple);border-radius:24px;padding:28px;max-width:380px;width:90%;text-align:center;position:relative;overflow:hidden;max-height:90vh;overflow-y:auto}
.lotto-card::before{content:'';position:absolute;top:0;left:0;right:0;height:200px;background:radial-gradient(circle at top,rgba(139,92,246,.15),transparent);pointer-events:none}
.lotto-header{position:relative;z-index:1;margin-bottom:20px}
.lotto-title{font-size:24px;font-weight:900;background:linear-gradient(135deg,#a78bfa,#c4b5fd,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.lotto-sub{font-size:12px;color:var(--text-muted)}
.lotto-timer{font-size:14px;color:var(--purple);font-weight:700;margin-top:8px}
.lotto-numbers-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0;position:relative;z-index:1}
.lotto-num{width:52px;height:52px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--text-muted);cursor:pointer;transition:all .2s;user-select:none}
.lotto-num:hover{border-color:var(--purple);color:var(--purple);transform:scale(1.1)}
.lotto-num.selected{background:linear-gradient(135deg,#8b5cf6,#6d28d9);border-color:#a78bfa;color:#fff;transform:scale(1.15);box-shadow:0 0 20px rgba(139,92,246,.5)}
.lotto-num.match{background:linear-gradient(135deg,var(--gold),#f4d03f);border-color:var(--gold);color:#000;animation:matchBounce .5s ease}
.lotto-num.no-match{background:var(--bg);border-color:var(--danger);color:var(--danger);opacity:.5}
@keyframes matchBounce{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1.15)}}
.lotto-selected-display{display:flex;justify-content:center;gap:12px;margin:16px 0}
.lotto-selected-ball{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#6d28d9);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;box-shadow:0 4px 15px rgba(139,92,246,.4)}
.lotto-selected-ball.empty{background:var(--bg-card);border:2px dashed var(--border);color:var(--text-muted);box-shadow:none}
.lotto-submit{width:100%;padding:16px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;margin-top:16px;transition:all .2s;position:relative;z-index:1}
.lotto-submit:hover{transform:scale(1.02);box-shadow:0 0 20px rgba(139,92,246,.4)}
.lotto-submit:disabled{background:#333;color:#666;cursor:not-allowed;transform:none;box-shadow:none}
.lotto-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:24px;color:var(--text-muted);cursor:pointer;z-index:2}
.lotto-result-area{margin-top:20px;position:relative;z-index:1}
.lotto-draw-anim{display:flex;justify-content:center;gap:12px;margin:16px 0}
.lotto-draw-ball{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#f4d03f);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#000;box-shadow:0 4px 20px rgba(212,175,55,.5);opacity:0;transform:scale(0);animation:ballReveal .6s ease forwards}
@keyframes ballReveal{to{opacity:1;transform:scale(1)}}
.lotto-prize{font-size:16px;font-weight:700;margin-top:16px;padding:16px;border-radius:14px}
.lotto-prize.win{background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(139,92,246,.1));border:2px solid var(--gold);color:var(--gold)}
.lotto-prize.lose{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-sub)}
/* 로또 상단 배너 */
.lotto-banner{position:relative;margin:10px 12px 10px;padding:0;border-radius:16px;background:linear-gradient(135deg,#0a0a2e,#150828,#1a0a3e);border:1px solid rgba(212,175,55,.35);cursor:pointer;overflow:hidden;z-index:1;transition:all .3s;box-shadow:0 2px 20px rgba(139,92,246,.15),inset 0 1px 0 rgba(212,175,55,.1)}
.lotto-banner:hover{border-color:rgba(212,175,55,.7);transform:translateY(-2px);box-shadow:0 6px 35px rgba(139,92,246,.3),0 0 20px rgba(212,175,55,.15)}
.lotto-banner-glow{position:absolute;inset:0;border-radius:16px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.12),rgba(139,92,246,.15),rgba(212,175,55,.12),transparent);background-size:400% 100%;animation:bannerGlow 4s linear infinite;pointer-events:none}
.lotto-banner-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.lotto-banner-sparkle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:0;animation:sparkleFloat 3s ease-in-out infinite}
@keyframes sparkleFloat{0%{opacity:0;transform:translateY(10px) scale(0)}20%{opacity:.8;transform:translateY(0) scale(1)}80%{opacity:.6;transform:translateY(-15px) scale(.8)}100%{opacity:0;transform:translateY(-25px) scale(0)}}
@keyframes bannerGlow{0%{background-position:100% 0}100%{background-position:-100% 0}}
.lotto-banner::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#8b5cf6,var(--gold),#8b5cf6,transparent);background-size:200% 100%;animation:bannerLine 3s linear infinite}
@keyframes bannerLine{0%{background-position:100% 0}100%{background-position:-100% 0}}
.lotto-banner-content{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 4px;position:relative;z-index:1}
.lotto-banner-left{display:flex;align-items:center;gap:10px}
.lotto-banner-icon{font-size:28px;filter:drop-shadow(0 0 8px rgba(212,175,55,.6));animation:iconBounce 2s ease infinite}
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.lotto-banner-text{display:flex;flex-direction:column;gap:1px}
.lotto-banner-title{font-size:14px;font-weight:900;background:linear-gradient(135deg,var(--gold),#f0d060,var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1.5px}
.lotto-banner-round{font-size:10px;color:#a78bfa;font-weight:600}
.lotto-banner-right{display:flex;align-items:center;gap:8px}
.lotto-banner-arrow{font-size:18px;color:var(--gold);font-weight:700;transition:transform .2s;text-shadow:0 0 8px rgba(212,175,55,.5)}
.lotto-banner:hover .lotto-banner-arrow{transform:translateX(4px)}
.lotto-banner-jackpot-bar{position:relative;z-index:1;padding:4px 14px 8px;text-align:center}
.lotto-banner-jackpot-label{font-size:9px;font-weight:800;letter-spacing:3px;color:rgba(212,175,55,.6)}
.lotto-banner-jackpot-amount{font-size:22px;font-weight:900;background:linear-gradient(90deg,var(--gold),#fff,var(--gold-light),#fff,var(--gold));background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:jackpotShine 3s linear infinite;text-shadow:none;line-height:1.2}
.lotto-banner-jackpot-detail{font-size:10px;color:rgba(255,255,255,.4);margin-top:1px}
.lotto-banner-stats{display:flex;justify-content:center;gap:16px;padding:0 14px 8px;position:relative;z-index:1}
.lotto-banner-stat{display:flex;align-items:center;gap:4px;font-size:11px;background:rgba(255,255,255,.06);padding:3px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.lotto-banner-stat-icon{font-size:11px}
.lotto-banner-stat-val{color:#ccc;font-weight:600;white-space:nowrap}
.lotto-banner-cta{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;font-size:11px;font-weight:800;padding:4px 12px;border-radius:10px;white-space:nowrap;animation:ctaPulse 2s ease infinite}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.lotto-banner-ticker{position:relative;z-index:1;padding:0 14px 8px;overflow:hidden;height:18px}
.lotto-banner-ticker-inner{display:flex;gap:16px;animation:tickerScroll 25s linear infinite;white-space:nowrap}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.lotto-ticker-item{font-size:10px;color:rgba(167,139,250,.6);display:flex;align-items:center;gap:4px;flex-shrink:0}
.lotto-ticker-nick{color:rgba(212,175,55,.7);font-weight:600}
.lotto-banner.drawing .lotto-banner-glow{animation:bannerGlowFast 2s linear infinite}
.lotto-banner-typing{font-size:10px;color:rgba(212,175,55,.7);padding:4px 14px 8px;position:relative;z-index:1;animation:fadeInOut 8s ease forwards}
.lotto-banner-typing strong{color:rgba(255,255,255,.8)}
.lotto-banner-typing .typing-dot-anim{animation:typingDots 1.2s infinite;letter-spacing:2px;font-size:8px;color:var(--gold)}
@keyframes typingDots{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
@keyframes fadeInOut{0%{opacity:0;transform:translateY(4px)}10%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-4px)}}
@keyframes bannerGlowFast{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* 로또 실시간 참여자 리스트 */
.lotto-participants{margin:0 -4px 16px;background:rgba(0,0,0,.3);border-radius:12px;border:1px solid rgba(139,92,246,.2);overflow:hidden;position:relative;z-index:1}
.lotto-participants-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(139,92,246,.15);font-size:11px;font-weight:700}
.lotto-participants-header span:first-child{color:#ef4444;animation:livePulse 1.5s ease infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
.lotto-participants-count{color:var(--purple);background:rgba(139,92,246,.15);padding:2px 8px;border-radius:8px}
.lotto-participants-list{max-height:120px;overflow-y:auto;padding:4px 0}
.lotto-participants-list::-webkit-scrollbar{width:3px}
.lotto-participants-list::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);border-radius:3px}
.lotto-participant-row{display:flex;align-items:center;justify-content:space-between;padding:5px 12px;font-size:11px;transition:background .2s}
.lotto-participant-row:hover{background:rgba(139,92,246,.08)}
.lotto-participant-row.new-entry{animation:newEntry .6s ease}
@keyframes newEntry{0%{background:rgba(212,175,55,.2);transform:translateX(-10px);opacity:0}100%{background:transparent;transform:translateX(0);opacity:1}}
.lotto-participant-info{display:flex;align-items:center;gap:6px}
.lotto-participant-lv{color:var(--purple);font-weight:600;font-size:10px}
.lotto-participant-nick{color:var(--text-main);font-weight:600}
.lotto-participant-nums{display:flex;gap:3px}
.lotto-participant-num{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.lotto-participant-time{color:var(--text-muted);font-size:10px}
.lotto-participants-empty{text-align:center;padding:16px;color:var(--text-muted);font-size:11px}
/* 로또 라이브 카운트다운 (모달 내) */
.lotto-live-countdown{font-size:22px;font-weight:900;color:var(--gold);margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:2px}
/* 로또 전면 카운트다운 오버레이 */
.lotto-countdown-overlay{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;pointer-events:none}
.lotto-countdown-overlay.show{display:flex;pointer-events:auto}
.lotto-countdown-bg{position:absolute;inset:0;background:radial-gradient(circle,rgba(139,92,246,.3),rgba(0,0,0,.95));backdrop-filter:blur(8px)}
.lotto-countdown-content{position:relative;z-index:1;text-align:center}
.lotto-countdown-label{font-size:16px;color:var(--purple);font-weight:700;letter-spacing:4px;text-transform:uppercase;margin-bottom:16px;animation:cdLabelPulse 1s ease infinite}
@keyframes cdLabelPulse{0%,100%{opacity:.7}50%{opacity:1}}
.lotto-countdown-number{font-size:160px;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--gold),#fff,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 40px rgba(212,175,55,.5));animation:cdNumPop .3s ease;font-variant-numeric:tabular-nums}
@keyframes cdNumPop{0%{transform:scale(1.5);opacity:0}100%{transform:scale(1);opacity:1}}
.lotto-countdown-unit{font-size:24px;color:var(--text-muted);font-weight:700;margin-top:-10px}
.lotto-countdown-sub{font-size:14px;color:var(--purple);margin-top:20px;font-weight:600;opacity:.8}
/* 로또 v2 추가 스타일 */
.lotto-pool-display{margin:12px 0 8px;padding:10px 16px;background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(139,92,246,.1));border:1px solid rgba(212,175,55,.3);border-radius:12px}
.lotto-pool-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}
.lotto-pool-amount{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--gold),#fff,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:2px 0}
.lotto-pool-detail{font-size:10px;color:var(--text-muted)}
.lotto-entry-fee{font-size:12px;color:var(--text-sub);margin-top:6px;padding:6px 12px;background:rgba(139,92,246,.08);border-radius:8px;display:inline-block}
.lotto-tiers-info{margin:0 -4px 12px;padding:8px 12px;background:rgba(0,0,0,.3);border-radius:10px;border:1px solid rgba(139,92,246,.15);position:relative;z-index:1}
.lotto-tier-row{display:flex;justify-content:space-between;padding:3px 0;font-size:11px;color:var(--text-sub)}
.lotto-tier-row span:first-child{font-weight:600}
.lotto-tier-row span:last-child{color:var(--gold);font-weight:700}
.lotto-tier-note{font-size:9px;color:var(--text-muted);margin-top:4px;text-align:center;font-style:italic}
.lotto-numbers-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0;position:relative;z-index:1}
.lotto-num{width:auto;height:44px;border-radius:12px;background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--text-muted);cursor:pointer;transition:all .2s;user-select:none}
.lotto-selected-ball{width:38px;height:38px;font-size:14px}
.lotto-participant-nick .bot-tag{font-size:8px;color:var(--purple);background:rgba(139,92,246,.15);padding:1px 4px;border-radius:4px;margin-left:3px;vertical-align:middle}
.lotto-tier-results{margin-top:16px;padding:12px;background:rgba(0,0,0,.3);border-radius:12px;border:1px solid rgba(139,92,246,.15)}
.lotto-tier-result-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:11px;border-bottom:1px solid rgba(255,255,255,.05)}
.lotto-tier-result-row:last-child{border-bottom:none}
.lotto-tier-result-row .tier-name{font-weight:700;color:var(--text-main)}
.lotto-tier-result-row .tier-pool{color:var(--gold);font-weight:600}
.lotto-tier-result-row .tier-winners{color:var(--purple)}
.lotto-tier-result-row .tier-rollover{color:var(--danger);font-style:italic;font-size:10px}
.lotto-round-badge{display:inline-block;padding:4px 14px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;font-size:13px;font-weight:800;border-radius:12px;margin:6px 0}
.lotto-guide{background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.15);border-radius:12px;padding:14px;margin:10px 0}
.lotto-guide-title{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:8px}
.lotto-guide-row{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-sub);margin-bottom:6px;line-height:1.5}
.lotto-guide-row:last-of-type{margin-bottom:0}
.lotto-guide-row strong{color:var(--gold)}
.lotto-guide-icon{width:18px;height:18px;border-radius:50%;background:var(--gold);color:#000;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.lotto-guide-dp-info{margin-top:8px;padding:8px 10px;background:rgba(255,255,255,.05);border-radius:8px;font-size:12px;color:var(--text-muted);text-align:center}
.lotto-guide-dp-info strong{color:var(--gold)}
.lotto-my-tickets-header{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--gold);margin-bottom:8px}
.lotto-my-ticket-badge{background:var(--gold);color:#000;font-size:11px;font-weight:800;padding:1px 7px;border-radius:8px;margin-left:4px}
.lotto-my-ticket-add-hint{text-align:center;font-size:11px;color:var(--purple);margin-top:8px;padding:6px;background:rgba(139,92,246,.08);border-radius:8px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.lotto-my-tickets{background:rgba(212,175,55,.05);border:1px solid rgba(212,175,55,.2);border-radius:12px;padding:12px;margin:10px 0}
.lotto-my-ticket-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.lotto-my-ticket-row:last-child{border-bottom:none}
.lotto-ticket-num-label{font-size:10px;font-weight:700;color:var(--gold);width:20px;flex-shrink:0}
.lotto-ticket-nums{display:flex;gap:3px}
.lotto-history-btn{background:none;border:1px solid var(--border);color:var(--text-muted);padding:8px 16px;border-radius:10px;font-size:12px;cursor:pointer;transition:all .2s}
.lotto-history-btn:hover{border-color:var(--gold);color:var(--gold)}
.lotto-history-round{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:8px}
.lotto-history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.lotto-history-round-num{font-size:13px;font-weight:700;color:var(--gold)}
.lotto-history-date{font-size:11px;color:var(--text-muted)}
.lotto-history-winning{display:flex;gap:4px;margin-bottom:6px}
.lotto-history-ball{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.lotto-history-stats{font-size:10px;color:var(--text-muted)}
.lotto-history-my{margin-top:6px;padding-top:6px;border-top:1px solid rgba(212,175,55,.15)}
.lotto-history-page-btn{background:none;border:1px solid var(--border);color:var(--text-muted);padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;margin:0 2px}
.lotto-history-page-btn.active{background:var(--gold);color:#000;border-color:var(--gold);font-weight:700}
.lotto-banner-jackpot{font-size:11px;font-weight:900;background:linear-gradient(90deg,var(--gold),#fff,var(--gold));background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:jackpotShine 2s linear infinite;white-space:nowrap;margin-right:6px}
@keyframes jackpotShine{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes specialPop{0%{transform:scale(0) rotate(-10deg)}30%{transform:scale(1.5) rotate(5deg)}60%{transform:scale(0.9) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes specialGlow{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}
/* 당첨자 발표 & 공유 */
.lotto-winners-section{margin-top:20px;position:relative;z-index:1}
.lotto-winners-title{font-size:16px;font-weight:800;text-align:center;margin-bottom:12px;background:linear-gradient(135deg,#ffd700,#ff6b35);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lotto-winner-card{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:6px 0;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.2);border-radius:12px;animation:winnerSlideIn .5s ease forwards;opacity:0}
.lotto-winner-card.tier-1{background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,107,53,.1));border-color:rgba(255,215,0,.4);box-shadow:0 0 20px rgba(255,215,0,.15)}
.lotto-winner-card.tier-2{background:rgba(192,192,192,.08);border-color:rgba(192,192,192,.3)}
.lotto-winner-card.tier-3{background:rgba(205,127,50,.08);border-color:rgba(205,127,50,.3)}
@keyframes winnerSlideIn{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
.lotto-winner-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-card2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;overflow:hidden}
.lotto-winner-avatar img{width:100%;height:100%;object-fit:cover}
.lotto-winner-info{flex:1}
.lotto-winner-name{font-size:13px;font-weight:700}
.lotto-winner-detail{font-size:10px;color:var(--text-muted)}
.lotto-winner-prize{text-align:right}
.lotto-winner-tier{font-size:11px;font-weight:800}
.lotto-winner-xp{font-size:12px;font-weight:700;color:var(--gold)}
.lotto-share-section{margin-top:16px;text-align:center;padding:16px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);border-radius:14px}
.lotto-share-title{font-size:13px;font-weight:700;color:var(--purple);margin-bottom:10px}
.lotto-share-btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.lotto-share-btn{padding:8px 16px;border-radius:20px;border:none;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:4px}
.lotto-share-btn:hover{transform:scale(1.05)}
.lotto-share-btn.kakao{background:#fee500;color:#000}
.lotto-share-btn.twitter{background:#1da1f2;color:#fff}
.lotto-share-btn.copy{background:rgba(255,255,255,.1);color:var(--text-main);border:1px solid var(--border)}
.lotto-streak{margin-top:12px;text-align:center;font-size:11px;color:var(--text-muted)}
.lotto-streak strong{color:var(--gold)}
.lotto-engagement-bar{margin-top:12px;padding:10px 14px;background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.15);border-radius:10px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-muted)}
.lotto-engagement-bar .live-dot{width:6px;height:6px;border-radius:50%;background:#ef4444;display:inline-block;margin-right:4px;animation:livePulse 1.5s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Support Tip */
/* 공지사항 모달 */
.notice-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9998;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s;backdrop-filter:blur(5px)}
.notice-overlay.show{opacity:1;visibility:visible}
.notice-card{background:var(--bg-card);border:2px solid var(--gold);border-radius:20px;padding:24px;max-width:380px;width:90%;transform:scale(.9);transition:.3s}
.notice-overlay.show .notice-card{transform:scale(1)}
.notice-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.notice-icon{font-size:28px}
.notice-title{flex:1;font-size:16px;font-weight:700}
.notice-badge{font-size:10px;padding:3px 8px;background:var(--gold);color:#000;border-radius:8px;font-weight:700}
.notice-body{font-size:14px;color:var(--text-sub);line-height:1.7;max-height:300px;overflow-y:auto}
.notice-footer{margin-top:20px;display:flex;gap:10px}
.notice-btn{flex:1;padding:12px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer}
.notice-btn.primary{background:var(--gold);color:#000}
.notice-btn.secondary{background:var(--bg-card2);color:var(--text-sub);border:1px solid var(--border)}
.notice-time{font-size:11px;color:var(--text-muted);margin-top:12px;text-align:right}

.support-tip{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:14px 20px;max-width:320px;width:90%;z-index:800;opacity:0;visibility:hidden;transition:all .4s ease;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.support-tip.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.support-tip-content{display:flex;align-items:center;gap:12px}
.support-tip-icon{font-size:24px;flex-shrink:0}
.support-tip-text{font-size:12px;color:var(--text-sub);line-height:1.5}
.support-tip-text strong{color:var(--text);font-weight:600}
.support-tip-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px}
.support-tip-link{color:var(--gold);text-decoration:none;font-weight:600}

.upload-area{border:2px dashed var(--border);border-radius:14px;padding:30px;text-align:center;cursor:pointer}
.upload-area:hover{border-color:var(--gold)}
input[type="file"]{display:none}

/* Lesson Content */
.lesson-content{padding:20px}
.lesson-content h3{font-size:18px;margin-bottom:16px;color:var(--gold)}
.lesson-content p{font-size:14px;line-height:1.7;color:var(--text-sub);margin-bottom:16px}
.lesson-content ul{margin-left:20px;margin-bottom:16px}
.lesson-content li{font-size:13px;line-height:1.8;color:var(--text-sub)}
.lesson-complete-btn{margin-top:20px}

/* User Profile Modal */
.profile-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9700;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s;display:flex;align-items:flex-end;justify-content:center}
.profile-modal-overlay.show{pointer-events:auto}
.profile-modal-overlay.show{opacity:1;visibility:visible}
.profile-modal{background:var(--bg-card);border-radius:24px 24px 0 0;width:100%;max-width:500px;max-height:85vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s ease, left 0s, top 0s}
.profile-modal-overlay.show .profile-modal{transform:translateY(0)}
.profile-modal.dragging{transition:none!important}
.profile-modal-header{position:sticky;top:0;background:var(--bg-card);padding:20px;border-bottom:1px solid var(--border);z-index:1;cursor:move;user-select:none}
.profile-modal-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px}
.profile-modal-close{position:absolute;top:16px;right:16px;padding:8px 16px;border-radius:20px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text-sub);transition:all .2s}
.profile-modal-close:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 15px rgba(212,175,55,.3)}
.profile-modal-user{display:flex;align-items:center;gap:16px}
.profile-modal-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#000;overflow:hidden}
.profile-modal-avatar img{width:100%;height:100%;object-fit:cover}
.profile-modal-name{font-size:20px;font-weight:800}
.profile-modal-level{font-size:13px;color:var(--gold);margin-top:2px}
.profile-modal-stats{display:flex;gap:20px;margin-top:8px;flex-wrap:wrap}
.profile-modal-stat{font-size:12px;color:var(--text-sub)}
.profile-modal-stat b{color:var(--text)}

/* 프로필 Threads 섹션 */
.pm-threads-section{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pm-threads-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:20px;color:var(--text-sub);font-size:12px;text-decoration:none;transition:all .25s;cursor:pointer}
.pm-threads-badge:hover{border-color:rgba(255,255,255,0.35);color:#fff;background:rgba(255,255,255,0.1);transform:scale(1.03)}
.pm-threads-badge svg{opacity:0.8}
.pm-threads-badge::after{content:'↗';font-size:10px;opacity:0.4;margin-left:2px}
.pm-threads-badge:hover::after{opacity:0.8}
.pm-threads-badge.no-link{cursor:default}
.pm-threads-badge.no-link::after{display:none}
.pm-threads-badge.no-link:hover{border-color:rgba(255,255,255,0.12);color:var(--text-sub);background:rgba(255,255,255,0.06);transform:none}
.pm-threads-reconnect{display:inline-flex;align-items:center;padding:6px 12px;background:rgba(0,149,246,0.15);border:1px solid rgba(0,149,246,0.4);border-radius:20px;color:#0095f6;font-size:11px;font-weight:600;text-decoration:none;transition:all .2s}
.pm-threads-reconnect:hover{background:rgba(0,149,246,0.25);border-color:#0095f6;transform:scale(1.03)}
.pm-cheer-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:linear-gradient(135deg,rgba(212,175,55,0.15),rgba(212,175,55,0.05));border:1px solid rgba(212,175,55,0.4);border-radius:20px;color:var(--gold);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.pm-cheer-btn:hover{background:linear-gradient(135deg,rgba(212,175,55,0.25),rgba(212,175,55,0.1));border-color:var(--gold);transform:scale(1.02)}

/* 응원 패널 */
.cheer-panel{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;animation:cheerSlide .25s ease}
@keyframes cheerSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.cheer-panel-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px}
.cheer-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cheer-chip{padding:7px 14px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--text-sub);cursor:pointer;transition:all .2s;white-space:nowrap}
.cheer-chip:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.08)}
.cheer-chip.selected{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.15);font-weight:600}
.cheer-custom-wrap{margin-bottom:12px}
.cheer-custom-input{width:100%;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s;box-sizing:border-box}
.cheer-custom-input:focus{border-color:var(--gold)}
.cheer-threads-opt{margin-bottom:12px}
.cheer-threads-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-sub);cursor:pointer}
.cheer-threads-label input[type="checkbox"]{accent-color:var(--gold);width:14px;height:14px}
.cheer-threads-label svg{color:var(--text-sub);opacity:.7}
.cheer-send-btn{width:100%;padding:10px;background:var(--gold);color:#000;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.cheer-send-btn:hover{opacity:.9;transform:scale(1.01)}
.cheer-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.profile-modal-body{padding:20px}
.profile-section{margin-bottom:24px}
.profile-section-title{font-size:12px;font-weight:700;color:var(--text-sub);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.profile-section-title::before{content:'';width:3px;height:12px;background:var(--gold);border-radius:2px}

.completed-lesson{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;transition:all .2s}
.completed-lesson.clickable{cursor:pointer}
.completed-lesson.clickable:hover{border-color:var(--gold);background:rgba(212,175,55,.05)}
.completed-lesson.clickable:active{transform:scale(.98)}
.completed-lesson.locked{opacity:.6;cursor:not-allowed}
.completed-lesson-icon{width:32px;height:32px;background:var(--success);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.completed-lesson.locked .completed-lesson-icon{background:var(--text-muted)}
.completed-lesson-info{flex:1}
.completed-lesson-name{font-size:13px;font-weight:600}
.completed-lesson-date{font-size:11px;color:var(--text-muted)}
.completed-lesson-arrow{color:var(--gold);font-size:14px;font-weight:700}

.share-buttons{display:flex;gap:8px;flex-wrap:wrap}
.share-btn{flex:1;min-width:60px;padding:12px 8px;border-radius:12px;border:none;font-size:11px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .2s}
.share-btn:hover{transform:scale(1.05)}
.share-btn-threads{background:#000;color:#fff;border:1px solid #333}
.share-btn-instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.share-btn-kakao{background:#FEE500;color:#000}
.share-btn-link{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.share-btn-twitter{background:#000;color:#fff;border:1px solid #333}
.share-btn span{font-size:18px}

.profile-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--bg);border:1px solid var(--border);border-radius:20px;font-size:11px;margin-right:6px;margin-bottom:6px}
.profile-badge.gold{border-color:var(--gold);color:var(--gold)}
.profile-badge.blue{border-color:var(--blue);color:var(--blue)}
.profile-badge.purple{border-color:var(--purple);color:var(--purple)}

/* Online Users Popup */
.online-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9600;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s;display:flex;align-items:center;justify-content:center;padding:20px}
.online-popup-overlay.show{pointer-events:auto}
.online-popup-overlay.show{opacity:1;visibility:visible}
.online-popup-overlay .online-popup{position:static;opacity:1;visibility:visible;min-width:auto;max-width:320px;max-height:70vh;background:var(--bg-card);border:none;border-radius:16px;width:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.6);transform:scale(.9);transition:transform .3s ease}
.online-popup-overlay .online-popup::before{display:none}
.online-popup-overlay.show .online-popup{transform:scale(1)}
.online-popup-overlay .online-popup-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-size:inherit;color:inherit;text-transform:none;letter-spacing:normal}
.online-popup-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.online-popup-title .count{color:var(--gold);font-size:13px}
.online-popup-close{width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-sub);font-size:12px;transition:all .2s}
.online-popup-close:hover{border-color:var(--gold);color:var(--gold)}
.online-popup-body{padding:8px 12px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.online-others{text-align:center;padding:10px 12px;font-size:12px;color:var(--text-muted)}
.online-user-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.online-user-item:last-child{margin-bottom:0}
.online-user-item:hover{border-color:var(--gold);background:rgba(212,175,55,.05)}
.online-user-avatar{position:relative;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#000;flex-shrink:0;overflow:visible}
.online-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.online-user-info{flex:1;min-width:0}
.online-user-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.online-user-level{font-size:12px;color:var(--gold)}
.online-user-badge{font-size:10px;padding:2px 8px;background:rgba(212,175,55,.15);border:1px solid rgba(212,175,55,.3);border-radius:10px;color:var(--gold)}
.online-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}
.online-empty-icon{font-size:32px;margin-bottom:12px;opacity:.5}
.ol-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-card);background:#4caf50}

.rank-item{cursor:pointer;transition:all .2s}
.rank-item:hover{border-color:var(--gold-dark);transform:translateX(4px)}

.profile-buttons{display:flex;gap:10px;margin-top:16px}
.share-profile-btn{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:14px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.share-profile-btn:hover{transform:scale(1.02)}
.share-profile-btn span{font-size:18px}
.logout-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 20px;background:var(--bg-card2);color:var(--text-sub);border:1px solid var(--border);border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.logout-btn:hover{border-color:var(--error);color:var(--error);background:rgba(239,68,68,.1)}
.logout-btn span{font-size:16px}
.delete-account-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:transparent;color:var(--text-muted);border:none;font-size:12px;cursor:pointer;transition:all .2s}
.delete-account-btn:hover{color:var(--error)}
.delete-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
.delete-popup{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:32px 24px;max-width:360px;width:100%;text-align:center;animation:popupSlide .3s ease}
@keyframes popupSlide{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.delete-popup-icon{font-size:56px;margin-bottom:16px}
.delete-popup-title{font-size:20px;font-weight:700;margin-bottom:12px;color:var(--text)}
.delete-popup-desc{font-size:14px;color:var(--text-sub);line-height:1.6;margin-bottom:16px}
.delete-popup-desc .threads-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:rgba(0,0,0,.5);border:1px solid var(--border);border-radius:12px;font-size:12px}
.delete-popup-list{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:16px;text-align:left}
.delete-item{font-size:13px;color:var(--text-sub);padding:6px 0;border-bottom:1px solid var(--border)}
.delete-item:last-child{border-bottom:none}
.delete-popup-warning{font-size:12px;color:var(--error);margin-bottom:20px;padding:10px;background:rgba(239,68,68,.1);border-radius:8px}
.delete-popup-confirm{text-align:left;margin-bottom:20px}
.delete-popup-confirm label{display:block;font-size:12px;color:var(--text-sub);margin-bottom:8px}
.delete-confirm-input{width:100%;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;outline:none;transition:border-color .2s}
.delete-confirm-input:focus{border-color:var(--error)}
.delete-popup-buttons{display:flex;gap:10px}
.delete-btn-cancel{flex:1;padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:12px;color:var(--text-sub);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.delete-btn-cancel:hover{background:var(--bg-card2);color:var(--text)}
.delete-btn-confirm{flex:1;padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:12px;color:var(--text-muted);font-size:14px;font-weight:600;cursor:not-allowed;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.delete-btn-confirm.active{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:transparent;color:#fff;cursor:pointer}
.delete-btn-confirm.active:hover{filter:brightness(1.1)}
.spinner-small{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}

/* Threads Welcome Modal */
.threads-welcome-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease}
.threads-welcome-modal{background:linear-gradient(145deg,#1a1a1a,#0d0d0d);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:40px 32px;max-width:360px;width:100%;text-align:center;animation:popupSlide .4s ease}
.tw-icon{margin-bottom:20px}
.tw-icon svg{filter:drop-shadow(0 0 20px rgba(255,255,255,.3))}
.tw-title{font-size:24px;font-weight:800;margin-bottom:8px;background:linear-gradient(135deg,#fff,#ccc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tw-subtitle{font-size:14px;color:var(--text-sub);line-height:1.6;margin-bottom:24px}
.tw-streak{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000;padding:2px 10px;border-radius:12px;font-weight:700;font-size:13px}
.tw-features{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.tw-feature{padding:10px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;font-size:13px;color:var(--text-sub)}
.tw-close-btn{width:100%;padding:16px;background:linear-gradient(135deg,#fff,#e0e0e0);color:#000;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s}
.tw-close-btn:hover{transform:scale(1.02);box-shadow:0 4px 20px rgba(255,255,255,.2)}

/* Level & Ranking Detail */
.level-detail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
.level-detail-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.level-detail-current{font-size:24px;font-weight:800;color:var(--gold)}
.level-detail-arrow{font-size:18px;color:var(--text-muted)}
.level-detail-next{font-size:20px;font-weight:700;color:var(--text-sub)}
.level-detail-bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.level-detail-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:4px;transition:width .5s ease}
.level-detail-info{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--text-sub)}

.rank-detail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px}
.rank-detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.rank-detail-row:last-child{border-bottom:none}
.rank-detail-label{font-size:13px;color:var(--text-sub)}
.rank-detail-value{font-size:14px;font-weight:700}

/* Level Rank Competition */
.level-rank-card{background:linear-gradient(135deg,rgba(212,175,55,.1),transparent);border:1px solid rgba(212,175,55,.3);border-radius:12px;padding:16px;margin-top:12px}
.level-rank-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.level-rank-title{font-size:14px;font-weight:700;color:var(--gold)}
.level-rank-badge{font-size:13px;font-weight:700;color:var(--text-sub);background:var(--bg-card);padding:4px 12px;border-radius:20px}
.level-rank-badge.top3{background:linear-gradient(135deg,var(--gold),#f4d03f);color:#000}
.level-rank-info{font-size:12px;color:var(--text-sub);margin-bottom:12px}
.competition-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:10px}
.competition-card.close{background:linear-gradient(135deg,rgba(59,130,246,.1),transparent);border-color:rgba(59,130,246,.4)}
.competition-card.very-close{background:linear-gradient(135deg,rgba(34,197,94,.15),transparent);border-color:rgba(34,197,94,.5);animation:glowPulse 2s ease-in-out infinite}
.competition-card.first-place{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.1));border-color:rgba(251,191,36,.5);text-align:center}
.competition-card.second-place{background:linear-gradient(135deg,rgba(156,163,175,.15),transparent);border-color:rgba(156,163,175,.4);text-align:center}
.competition-card.third-place{background:linear-gradient(135deg,rgba(217,119,6,.15),transparent);border-color:rgba(217,119,6,.4);text-align:center}
.encourage-badge{font-size:11px;background:var(--gold);color:#000;padding:2px 8px;border-radius:10px;margin-left:8px;animation:float 2s ease-in-out infinite}
.gap-close-msg{font-size:12px;font-weight:700;color:var(--success);margin-bottom:4px}
.gap-value.float-anim{animation:float 1.5s ease-in-out infinite}
.first-place-trophy{font-size:48px;margin:10px 0;animation:float 2s ease-in-out infinite}
.first-place-msg{font-size:14px;font-weight:600;color:var(--gold);margin-bottom:12px}
.second-place-msg,.third-place-msg{font-size:13px;color:var(--text-sub);margin-top:8px}

/* 뒤따라오는 경쟁자 */
.chaser-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:10px}
.chaser-header{font-size:11px;font-weight:600;color:var(--text-sub);margin-bottom:8px}
.chaser-user{display:flex;align-items:center;gap:8px;padding:10px;background:var(--bg);border-radius:8px;cursor:pointer;transition:all .2s}
.chaser-user:hover{background:var(--border)}
.chaser-rank{font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-card2);padding:3px 8px;border-radius:6px}
.chaser-name{flex:1;font-size:13px;font-weight:600}
.chaser-xp{font-size:11px;color:var(--text-sub)}
.chaser-gap{font-size:11px;font-weight:700;color:var(--success)}
.chaser-warning{font-size:11px;color:#ef4444;margin-top:8px;text-align:center;animation:pulse 1s infinite}
.chaser-alert{font-size:11px;color:var(--gold);margin-top:8px;text-align:center}
.share-first-btn{background:linear-gradient(135deg,var(--gold),#f4d03f);color:#000;border:none;padding:12px 24px;border-radius:25px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.share-first-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px rgba(212,175,55,.4)}
.xp-gap.pulse{animation:pulse 1.5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 0 5px rgba(34,197,94,.3)}50%{box-shadow:0 0 20px rgba(34,197,94,.5)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.competition-header{font-size:12px;font-weight:700;color:var(--text-sub);margin-bottom:10px}
.competition-target{display:flex;flex-direction:column;gap:10px}
.target-user{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg);border-radius:8px;cursor:pointer;transition:all .2s}
.target-user:hover{background:var(--border)}
.target-rank{font-size:12px;font-weight:700;color:var(--gold);background:rgba(212,175,55,.2);padding:4px 8px;border-radius:6px}
.target-name{flex:1;font-size:14px;font-weight:600}
.target-xp{font-size:12px;color:var(--text-sub)}
.xp-gap{text-align:center;padding:12px;background:linear-gradient(135deg,rgba(239,68,68,.1),transparent);border:1px solid rgba(239,68,68,.3);border-radius:10px}
.gap-label{font-size:11px;color:var(--text-sub);margin-bottom:4px}
.gap-value{font-size:20px;font-weight:800;color:#ef4444}
.gap-hint{font-size:10px;color:var(--text-muted);margin-top:4px}
.first-place-msg{font-size:14px;font-weight:600;color:var(--gold);text-align:center;padding:10px}

/* Completed Quest Item */
.completed-quest-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px}
.completed-quest-item.needs-review{border-color:var(--gold);background:rgba(212,175,55,.08)}
.completed-quest-icon{width:36px;height:36px;background:var(--success);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0}
.completed-quest-item.needs-review .completed-quest-icon{background:var(--gold);color:#000}
.completed-quest-info{flex:1;min-width:0}
.completed-quest-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.completed-quest-meta{font-size:11px;color:var(--text-muted);margin-top:2px}
.review-btn{padding:8px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:11px;font-weight:600;color:var(--text-sub);cursor:pointer;white-space:nowrap}
.review-btn:hover{border-color:var(--gold);color:var(--gold)}
.completed-quest-item.needs-review .review-btn{background:var(--gold);border-color:var(--gold);color:#000}

/* Starred Lessons List */
.starred-lessons-list{display:flex;flex-direction:column;gap:8px}
.starred-lesson-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s}
.starred-lesson-item:hover{border-color:var(--gold)}
.starred-lesson-item:active{transform:scale(.98)}
.starred-lesson-item.locked{opacity:.5;cursor:not-allowed}
.starred-lesson-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.starred-lesson-info{flex:1;min-width:0}
.starred-lesson-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.starred-lesson-meta{font-size:11px;color:var(--text-muted);margin-top:2px}
.starred-lesson-unstar{font-size:18px;color:var(--gold);cursor:pointer;padding:4px}
.starred-lesson-unstar:hover{transform:scale(1.2)}

/* ═══ LEARNING ROADMAP DASHBOARD ═══ */
.ld-section{margin:24px 0}
.ld-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ld-title{font-size:13px;font-weight:800;letter-spacing:1.5px;color:var(--text-sub)}
.ld-subtitle{font-size:11px;color:var(--text-muted)}
.ld-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 0 16px;scrollbar-width:none}
.ld-scroll::-webkit-scrollbar{display:none}
.ld-card{flex:0 0 260px;scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px;position:relative;transition:all .3s;overflow:hidden}
.ld-card:hover{border-color:var(--text-muted)}
.ld-card--completed{border-color:var(--success);background:rgba(34,197,94,.04)}
.ld-card--completed .ld-card-badge{background:var(--success);color:#fff}
.ld-card--current{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 4px 20px rgba(212,175,55,.15);animation:ldPulse 3s ease-in-out infinite}
.ld-card--current .ld-card-badge{background:var(--gold);color:#000}
@keyframes ldPulse{0%,100%{box-shadow:0 0 0 1px var(--gold),0 4px 20px rgba(212,175,55,.15)}50%{box-shadow:0 0 0 2px var(--gold),0 4px 28px rgba(212,175,55,.25)}}
.ld-card--locked{opacity:.65}
.ld-card--locked .ld-card-topics{filter:blur(3px);pointer-events:none}
.ld-card--locked .ld-card-badge{background:var(--bg);color:var(--text-muted);border:1px solid var(--border)}
.ld-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ld-card-icon{width:42px;height:42px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.ld-card-info{flex:1;min-width:0}
.ld-card-range{font-size:14px;font-weight:800}
.ld-card-name{font-size:11px;color:var(--text-muted);font-weight:600}
.ld-card-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.ld-card-tagline{font-size:12px;color:var(--text-sub);margin-bottom:10px;font-weight:500}
.ld-card-topics{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.ld-topic{font-size:11px;color:var(--text-sub);display:flex;align-items:center;gap:6px}
.ld-topic::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);flex-shrink:0}
.ld-card--completed .ld-topic::before{background:var(--success)}
.ld-card--locked .ld-topic-bar{height:10px;border-radius:5px;background:var(--border);width:100%}
.ld-progress-wrap{margin-bottom:12px}
.ld-progress-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-bottom:4px}
.ld-progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.ld-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:3px;transition:width .6s ease}
.ld-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ld-avatars{display:flex;align-items:center}
.ld-avatar{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg-card);margin-left:-8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px;overflow:hidden}
.ld-avatar:first-child{margin-left:0}
.ld-avatar img{width:100%;height:100%;object-fit:cover}
.ld-avatar-count{font-size:10px;color:var(--text-muted);margin-left:6px;white-space:nowrap}
.ld-cheer-btn{padding:6px 14px;border:1px solid var(--gold);background:transparent;border-radius:20px;font-size:11px;font-weight:600;color:var(--gold);cursor:pointer;transition:all .2s;white-space:nowrap}
.ld-cheer-btn:hover{background:var(--gold);color:#000}
.ld-cheer-btn:active{transform:scale(.95)}

/* Cheer Modal */
.ld-cheer-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;opacity:0;visibility:hidden;transition:all .3s}
.ld-cheer-modal-overlay.active{opacity:1;visibility:visible}
.ld-cheer-modal{position:fixed;bottom:0;left:0;right:0;max-height:70vh;background:var(--bg);border-radius:20px 20px 0 0;z-index:9999;transform:translateY(100%);transition:transform .3s ease;display:flex;flex-direction:column;max-width:500px;margin:0 auto}
.ld-cheer-modal.active{transform:translateY(0)}
.ld-cheer-modal-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:10px auto}
.ld-cheer-modal-header{padding:10px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ld-cheer-modal-title{font-size:15px;font-weight:700}
.ld-cheer-modal-close{width:28px;height:28px;border-radius:50%;background:var(--bg-card);border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-sub)}
.ld-cheer-modal-body{flex:1;overflow-y:auto;padding:14px 20px}
.ld-cheer-user{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.ld-cheer-user:last-child{border-bottom:none}
.ld-cheer-user-avatar{width:38px;height:38px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;flex-shrink:0}
.ld-cheer-user-avatar img{width:100%;height:100%;object-fit:cover}
.ld-cheer-user-info{flex:1;min-width:0}
.ld-cheer-user-name{font-size:13px;font-weight:600}
.ld-cheer-user-meta{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px;margin-top:2px}
.ld-cheer-user-threads{color:var(--gold);text-decoration:none;font-weight:600}
.ld-cheer-user-threads:hover{text-decoration:underline}
.ld-cheer-send-btn{padding:6px 12px;border:1px solid var(--gold);background:transparent;border-radius:16px;font-size:11px;font-weight:600;color:var(--gold);cursor:pointer;transition:all .2s;flex-shrink:0}
.ld-cheer-send-btn:hover{background:var(--gold);color:#000}
.ld-cheer-send-btn.sent{border-color:var(--success);color:var(--success);pointer-events:none}
.ld-cheer-loading{text-align:center;padding:30px;color:var(--text-muted);font-size:13px}

/* ========== 북적북적 ENGAGEMENT ELEMENTS ========== */

/* 1. Live Activity Ticker */
.activity-ticker{overflow:hidden;background:linear-gradient(90deg,rgba(255,215,0,.08),rgba(255,165,0,.05),rgba(255,215,0,.08));border-bottom:1px solid rgba(255,215,0,.15);padding:8px 0;position:relative}
.activity-ticker::before,.activity-ticker::after{content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none}
.activity-ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.activity-ticker::after{right:0;background:linear-gradient(90deg,transparent,var(--bg))}
.ticker-track{display:flex;gap:32px;animation:tickerScroll 30s linear infinite;width:max-content;align-items:center}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;color:var(--text-sub);flex-shrink:0}
.ticker-item .ticker-icon{font-size:14px}
.ticker-item .ticker-nick{color:var(--gold);font-weight:600}
.ticker-item .ticker-action{color:var(--text-muted)}
.ticker-dot{width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.4;flex-shrink:0}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* 2. Battle Arena Live Card */
.battle-live-card{background:linear-gradient(135deg,rgba(255,59,48,.1),rgba(255,149,0,.08));border:1px solid rgba(255,59,48,.2);border-radius:16px;padding:16px;margin:0 16px 12px;position:relative;overflow:hidden;cursor:pointer;transition:transform .2s}
.battle-live-card:active{transform:scale(.98)}
.battle-live-pulse{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:#ff3b30}
.battle-live-pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:rgba(255,59,48,.4);animation:livePulse 1.5s ease-out infinite}
@keyframes livePulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.5);opacity:0}}
.battle-live-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.battle-live-icon{font-size:24px;animation:battleShake 2s ease-in-out infinite}
@keyframes battleShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.battle-live-title{font-size:14px;font-weight:700;color:#fff}
.battle-live-sub{font-size:11px;color:var(--text-muted)}
.battle-live-stats{display:flex;gap:12px;margin-bottom:12px}
.battle-live-stat{flex:1;text-align:center;background:rgba(0,0,0,.3);border-radius:10px;padding:8px 4px}
.battle-live-stat-num{font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.battle-live-stat-num.active-num{color:#ff3b30}
.battle-live-stat-num.completed-num{color:var(--gold)}
.battle-live-stat-label{font-size:10px;color:var(--text-muted);margin-top:2px}
.battle-live-cta{background:linear-gradient(135deg,#ff3b30,#ff6b35);color:#fff;border:none;border-radius:10px;padding:10px;width:100%;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.5px}

/* 3. Quick Quiz Widget */
.quick-quiz-card{background:linear-gradient(135deg,rgba(88,86,214,.12),rgba(175,82,222,.08));border:1px solid rgba(88,86,214,.25);border-radius:16px;padding:16px;margin:0 16px 12px;overflow:hidden}
.quick-quiz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.quick-quiz-badge{font-size:11px;color:#af52de;font-weight:700;letter-spacing:1px}
.quick-quiz-xp{font-size:11px;color:var(--gold);font-weight:600}
.quick-quiz-question{font-size:13px;color:#fff;font-weight:600;line-height:1.5;margin-bottom:12px}
.quick-quiz-options{display:flex;flex-direction:column;gap:6px}
.quick-quiz-opt{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--text-sub);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}
.quick-quiz-opt:hover{background:rgba(88,86,214,.15);border-color:rgba(88,86,214,.4)}
.quick-quiz-opt.correct{background:rgba(52,199,89,.15);border-color:rgba(52,199,89,.5);color:#34c759}
.quick-quiz-opt.wrong{background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.4);color:#ff3b30}
.quick-quiz-opt .opt-label{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.quick-quiz-result{text-align:center;padding:16px 0;font-size:13px;color:var(--gold);font-weight:600;display:none}

/* 4. Daily Mission Countdown */
.daily-countdown-card{background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(255,165,0,.05));border:1px solid rgba(255,215,0,.15);border-radius:16px;padding:14px 16px;margin:0 16px 12px;display:flex;align-items:center;gap:12px}
.daily-countdown-timer{display:flex;gap:4px;align-items:center}
.daily-countdown-num{background:rgba(255,215,0,.15);color:var(--gold);font-size:16px;font-weight:800;padding:4px 6px;border-radius:6px;min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.daily-countdown-sep{color:var(--gold);font-weight:700;opacity:.5}
.daily-countdown-info{flex:1}
.daily-countdown-title{font-size:12px;font-weight:700;color:#fff}
.daily-countdown-sub{font-size:10px;color:var(--text-muted);margin-top:2px}

/* 5. Level-Up Strategy Cards */
.levelup-strat-scroll{display:flex;gap:10px;overflow-x:auto;padding:0 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.levelup-strat-scroll::-webkit-scrollbar{display:none}
.levelup-strat-card{flex-shrink:0;width:140px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 12px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.levelup-strat-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.levelup-strat-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,rgba(255,215,0,.05),transparent);animation:stratRotate 4s linear infinite;pointer-events:none}
@keyframes stratRotate{100%{transform:rotate(360deg)}}
.strat-icon{font-size:28px;margin-bottom:8px}
.strat-xp{font-size:18px;font-weight:800;color:var(--gold)}
.strat-name{font-size:11px;font-weight:600;color:#fff;margin-top:4px}
.strat-desc{font-size:10px;color:var(--text-muted);margin-top:2px;line-height:1.3}

/* 6. Weekly Top Movers */
.weekly-movers{margin:0 16px 12px}
.mover-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.mover-item:last-child{border:none}
.mover-rank{font-size:14px;font-weight:800;color:var(--gold);width:24px;text-align:center}
.mover-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,215,0,.15);display:flex;align-items:center;justify-content:center;font-size:12px;overflow:hidden}
.mover-avatar img{width:100%;height:100%;object-fit:cover}
.mover-info{flex:1}
.mover-name{font-size:12px;font-weight:600;color:#fff}
.mover-lv{font-size:10px;color:var(--text-muted)}
.mover-xp{font-size:12px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:4px}
.mover-arrow{color:#34c759;font-size:14px;animation:arrowBounce 1s ease-in-out infinite}
@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* 7. Level Distribution Chart */
.level-dist-chart{display:flex;align-items:flex-end;gap:6px;height:80px;margin:0 16px 12px;padding:12px 16px;background:rgba(255,255,255,.03);border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.level-dist-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.level-dist-bar{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--gold),rgba(255,165,0,.6));min-height:4px;transition:height 1s ease;position:relative;align-self:flex-end}
.level-dist-bar.you-here{background:linear-gradient(180deg,#34c759,#30d158);box-shadow:0 0 8px rgba(52,199,89,.4)}
.level-dist-bar.you-here::after{content:'YOU';position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800;color:#34c759;white-space:nowrap}
.level-dist-count{font-size:9px;color:var(--text-muted);font-weight:600}
.level-dist-label{font-size:8px;color:var(--text-muted);white-space:nowrap}

/* 8. Growth Pulse */
.growth-pulse{display:flex;gap:8px;margin:0 16px 12px}
.growth-pulse-card{flex:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px 8px;text-align:center;position:relative;overflow:hidden}
.growth-pulse-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:gpulse 2s ease-in-out infinite}
@keyframes gpulse{0%,100%{opacity:.2;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}
.gp-num{font-size:22px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.gp-label{font-size:9px;color:var(--text-muted);margin-top:2px;letter-spacing:.5px}
.gp-change{font-size:10px;color:#34c759;font-weight:600;margin-top:4px}

/* 9. Locked Content Preview (FOMO) */
.fomo-card{background:linear-gradient(135deg,rgba(255,215,0,.06),rgba(175,82,222,.06));border:1px solid rgba(255,215,0,.15);border-radius:16px;padding:16px;margin:0 16px 12px;position:relative;overflow:hidden;cursor:pointer}
.fomo-card::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,215,0,.02) 10px,rgba(255,215,0,.02) 20px);pointer-events:none}
.fomo-badge{display:inline-block;background:linear-gradient(135deg,#FFD700,#FFA500);color:#000;font-size:9px;font-weight:800;padding:3px 8px;border-radius:4px;letter-spacing:1px;margin-bottom:8px}
.fomo-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.fomo-desc{font-size:11px;color:var(--text-muted);line-height:1.4;filter:blur(2px);user-select:none}
.fomo-unlock{margin-top:10px;font-size:11px;color:var(--gold);font-weight:600}
.fomo-card:hover .fomo-desc{filter:blur(1px);transition:filter .3s}

/* 10. Section enhancements */
.section-title-animated{position:relative;display:inline-block}
.section-title-animated::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--gold);animation:titleLine 3s ease-in-out infinite}
@keyframes titleLine{0%,100%{width:0;left:0}50%{width:100%;left:0}}

/* ========== BEGINNER GUIDE & ONBOARDING ========== */

/* Guest Hero - 개선 */
.hero-improved{padding:32px 20px;text-align:center}
.hero-welcome{font-size:28px;font-weight:800;color:#fff;margin-bottom:6px;line-height:1.3}
.hero-welcome em{font-style:normal;color:var(--gold)}
.hero-explain{font-size:15px;color:var(--text-sub);line-height:1.6;margin-bottom:20px;word-break:keep-all}
.hero-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;text-align:left}
.hero-step{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px}
.hero-step-num{width:32px;height:32px;border-radius:50%;background:var(--gold);color:#000;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-step-text{font-size:14px;color:#fff;font-weight:500;line-height:1.4}
.hero-btn-big{width:100%;padding:16px;background:linear-gradient(135deg,var(--gold),#FFA500);color:#000;border:none;border-radius:14px;font-size:17px;font-weight:800;cursor:pointer;letter-spacing:.5px}
.hero-btn-big:active{transform:scale(.98)}
.hero-note{font-size:12px;color:var(--text-muted);margin-top:10px}

/* 초보자 가이드 체크리스트 */
.beginner-guide{margin:12px 16px;background:linear-gradient(135deg,rgba(52,199,89,.08),rgba(48,209,88,.04));border:1px solid rgba(52,199,89,.2);border-radius:16px;padding:16px;position:relative}
.beginner-guide-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.beginner-guide-icon{font-size:28px}
.beginner-guide-title{font-size:15px;font-weight:700;color:#fff}
.beginner-guide-sub{font-size:11px;color:var(--text-muted)}
.beginner-guide-progress{height:4px;background:rgba(255,255,255,.1);border-radius:2px;margin-bottom:14px;overflow:hidden}
.beginner-guide-bar{height:100%;background:linear-gradient(90deg,#34c759,#30d158);border-radius:2px;transition:width .5s ease}
.guide-checklist{display:flex;flex-direction:column;gap:8px}
.guide-check-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(0,0,0,.2);border-radius:10px;cursor:pointer;transition:all .2s}
.guide-check-item:hover{background:rgba(255,255,255,.06)}
.guide-check-item.done{opacity:.5}
.guide-check-box{width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;color:#34c759}
.guide-check-item.done .guide-check-box{background:rgba(52,199,89,.2);border-color:#34c759}
.guide-check-text{flex:1;font-size:13px;color:#fff;font-weight:500}
.guide-check-xp{font-size:11px;color:var(--gold);font-weight:600;white-space:nowrap}
.guide-check-item.done .guide-check-text{text-decoration:line-through;color:var(--text-muted)}

/* 도우미 배너 (다음 할 일 추천) */
.helper-banner{margin:12px 16px;background:linear-gradient(135deg,rgba(0,122,255,.1),rgba(88,86,214,.08));border:1px solid rgba(0,122,255,.2);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s}
.helper-banner:active{transform:scale(.98)}
.helper-hand{font-size:28px;animation:handWave 2s ease-in-out infinite}
@keyframes handWave{0%,100%{transform:rotate(0deg)}20%{transform:rotate(14deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-4deg)}}
.helper-content{flex:1}
.helper-title{font-size:14px;font-weight:700;color:#fff}
.helper-desc{font-size:12px;color:var(--text-sub);margin-top:2px;line-height:1.4}
.helper-arrow{font-size:18px;color:var(--gold);font-weight:700}

/* 초보자 미니게임 카드 */
.mini-games-scroll{display:flex;gap:10px;overflow-x:auto;padding:0 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mini-games-scroll::-webkit-scrollbar{display:none}
.mini-game-card{flex-shrink:0;width:160px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px 14px;cursor:pointer;transition:all .2s;text-align:center}
.mini-game-card:active{transform:scale(.96)}
.mini-game-card:hover{border-color:var(--gold)}
.mini-game-icon{font-size:36px;margin-bottom:8px}
.mini-game-name{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}
.mini-game-desc{font-size:11px;color:var(--text-muted);line-height:1.3}
.mini-game-badge{display:inline-block;background:rgba(52,199,89,.15);color:#34c759;font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;margin-top:8px}

/* 미니게임 모달 */
.minigame-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.minigame-overlay.active{display:flex}
.minigame-box{width:100%;max-width:360px;background:var(--card);border-radius:20px;padding:24px;text-align:center;max-height:80vh;overflow-y:auto}
.minigame-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:4px}
.minigame-sub{font-size:12px;color:var(--text-muted);margin-bottom:20px}
.minigame-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.1);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer}

/* OX 퀴즈 게임 */
.ox-question{font-size:16px;font-weight:700;color:#fff;line-height:1.5;margin-bottom:20px;min-height:60px;word-break:keep-all}
.ox-buttons{display:flex;gap:12px;margin-bottom:16px}
.ox-btn{flex:1;padding:20px;border-radius:16px;border:2px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);font-size:32px;cursor:pointer;transition:all .2s}
.ox-btn:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.ox-btn.correct{border-color:#34c759;background:rgba(52,199,89,.15)}
.ox-btn.wrong{border-color:#ff3b30;background:rgba(255,59,48,.1)}
.ox-result{font-size:13px;color:var(--text-sub);min-height:40px;line-height:1.5}
.ox-score{font-size:14px;color:var(--gold);font-weight:700;margin-bottom:12px}
.ox-progress{display:flex;gap:4px;justify-content:center;margin-bottom:16px}
.ox-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.1)}
.ox-dot.right{background:#34c759}
.ox-dot.fail{background:#ff3b30}
.ox-dot.current{background:var(--gold);box-shadow:0 0 6px var(--gold)}

/* 단어 맞추기 게임 */
.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.match-card{aspect-ratio:1;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;cursor:pointer;transition:all .3s;padding:6px;text-align:center;word-break:keep-all;line-height:1.2}
.match-card:hover{border-color:rgba(255,215,0,.4)}
.match-card.selected{border-color:var(--gold);background:rgba(255,215,0,.1);box-shadow:0 0 8px rgba(255,215,0,.2)}
.match-card.matched{border-color:#34c759;background:rgba(52,199,89,.15);color:#34c759;pointer-events:none}
.match-card.wrong-match{animation:matchShake .4s ease;border-color:#ff3b30}
@keyframes matchShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* 속도 퀴즈 게임 */
.speed-timer-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;margin-bottom:16px;overflow:hidden}
.speed-timer-fill{height:100%;background:linear-gradient(90deg,#ff3b30,var(--gold),#34c759);border-radius:3px;transition:width .1s linear}
.speed-options{display:flex;flex-direction:column;gap:8px}
.speed-opt{padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:14px;color:#fff;cursor:pointer;transition:all .15s;text-align:left}
.speed-opt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.speed-opt.correct{background:rgba(52,199,89,.15);border-color:#34c759;color:#34c759}
.speed-opt.wrong{background:rgba(255,59,48,.1);border-color:#ff3b30;color:#ff3b30}

/* ========== 즉시 미션 시스템 (AI 가이드) ========== */
.mission-card{margin:12px 16px;background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,165,0,.08),rgba(255,215,0,.05));border:2px solid rgba(255,215,0,.3);border-radius:18px;padding:0;overflow:hidden;position:relative;animation:missionGlow 3s ease-in-out infinite}
@keyframes missionGlow{0%,100%{border-color:rgba(255,215,0,.3);box-shadow:0 0 0 rgba(255,215,0,0)}50%{border-color:rgba(255,215,0,.6);box-shadow:0 0 20px rgba(255,215,0,.1)}}
.mission-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0;margin-bottom:6px}
.mission-header-left{display:flex;align-items:center;gap:8px}
.mission-ai-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#FFA500);display:flex;align-items:center;justify-content:center;font-size:16px;animation:missionPulse 2s ease-in-out infinite}
@keyframes missionPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.mission-ai-label{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:1px}
.mission-ai-sub{font-size:10px;color:var(--text-muted)}
.mission-progress-badge{background:rgba(255,215,0,.15);color:var(--gold);font-size:10px;font-weight:700;padding:4px 10px;border-radius:12px}
.mission-body{padding:8px 16px 12px}
.mission-title{font-size:15px;font-weight:800;color:#fff;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.mission-title .mission-emoji{font-size:22px}
.mission-desc{font-size:12px;color:var(--text-sub);line-height:1.5;margin-bottom:10px}
.mission-rewards{display:flex;gap:12px;margin-bottom:12px}
.mission-reward{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.06);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700}
.mission-reward.xp{color:var(--gold)}
.mission-reward.dp{color:#af52de}
.mission-difficulty{font-size:9px;font-weight:600;padding:2px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}
.mission-difficulty.easy{background:rgba(52,199,89,.15);color:#34c759}
.mission-difficulty.medium{background:rgba(255,149,0,.15);color:#FF9500}
.mission-difficulty.hard{background:rgba(255,59,48,.15);color:#ff3b30}
.mission-action-btn{width:100%;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--gold),#FFA500);color:#000;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.mission-action-btn:active{transform:scale(.97)}
.mission-action-btn::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:missionShine 2.5s infinite}
@keyframes missionShine{0%{left:-100%}100%{left:200%}}
.mission-complete-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;opacity:0;pointer-events:none;transition:all .3s}
.mission-complete-overlay.show{opacity:1;pointer-events:auto}
.mission-complete-check{font-size:48px;animation:missionBounce .6s ease}
@keyframes missionBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.mission-complete-text{font-size:16px;font-weight:800;color:var(--gold);margin:8px 0 4px}
.mission-complete-reward{font-size:13px;color:#fff;margin-bottom:12px}
.mission-next-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 24px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer}
.mission-all-done{text-align:center;padding:16px}
.mission-all-done-icon{font-size:40px;margin-bottom:8px}
.mission-all-done-text{font-size:14px;font-weight:700;color:var(--gold)}
.mission-all-done-sub{font-size:11px;color:var(--text-muted);margin-top:4px}
.mission-chain{display:flex;gap:4px;padding:8px 16px;overflow-x:auto}
.mission-chain-dot{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-muted);flex-shrink:0;transition:all .3s}
.mission-chain-dot.done{background:rgba(52,199,89,.2);border-color:#34c759;color:#34c759}
.mission-chain-dot.active{background:rgba(255,215,0,.2);border-color:var(--gold);color:var(--gold);animation:missionPulse 2s ease-in-out infinite}

/* 실시간 XP 플로팅 */
.xp-float{position:fixed;z-index:9999;font-size:18px;font-weight:800;color:var(--gold);pointer-events:none;animation:xpFloat 1.5s ease-out forwards;text-shadow:0 2px 8px rgba(255,215,0,.5)}
@keyframes xpFloat{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-30px) scale(1.2)}100%{opacity:0;transform:translateY(-60px) scale(.8)}}