/* 글러브업 — 다크 모바일 우선 */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { background:#12131a; color:#e8eaf0; font-family:'Segoe UI',AppleSDGothicNeo,'Malgun Gothic',sans-serif; overscroll-behavior:none; }
#app { max-width:560px; margin:0 auto; height:100%; display:flex; flex-direction:column; }

#topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:#1a1c26; border-bottom:1px solid #262939; }
.brand { font-weight:800; font-size:17px; }
.wallet { display:flex; gap:6px; }
.pill { background:#262939; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:700; }
.pill.gold::before { content:'🪙 '; } .pill.cash::before { content:'💎 '; }

#screens { flex:1; overflow-y:auto; padding:12px; }
.screen { display:flex; flex-direction:column; gap:10px; }
.card { background:#1a1c26; border:1px solid #262939; border-radius:14px; padding:14px; }
.hero { display:flex; gap:14px; align-items:center; }
.boxer-face { font-size:44px; background:#262939; border-radius:14px; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.h1 { font-size:20px; font-weight:800; } .h2 { font-size:14px; font-weight:800; margin-bottom:8px; }
.sub { font-size:12px; color:#9aa0b4; margin-top:4px; }
.big { font-size:24px; font-weight:800; color:#7fd67f; }
.bar { background:#262939; height:12px; border-radius:8px; overflow:hidden; margin:6px 0; }
.fill { height:100%; width:0%; transition:width .3s; }
.fill.xp { background:linear-gradient(90deg,#4caf50,#8bc34a); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:13px; }
.row { display:flex; gap:8px; margin-top:10px; }

.btn { background:#2c3044; color:#e8eaf0; border:1px solid #3a3f58; border-radius:10px; padding:10px 14px; font-size:14px; font-weight:700; cursor:pointer; }
.btn:active { transform:scale(.97); }
.btn.primary { background:linear-gradient(135deg,#e53935,#ff7043); border:none; }
.btn.ghost { background:transparent; border:1px dashed #3a3f58; color:#9aa0b4; }
.btn.wide { width:100%; }
.btn:disabled { opacity:.4; }

#tabbar { display:flex; background:#1a1c26; border-top:1px solid #262939; }
.tab { flex:1; background:none; border:none; color:#9aa0b4; padding:8px 0 10px; font-size:18px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; }
.tab span { font-size:10px; }
.tab.on { color:#ff7043; }

/* 리그 */
.league-item { display:flex; justify-content:space-between; align-items:center; background:#1f2230; border:1px solid #2c3044; border-radius:12px; padding:12px; margin-bottom:8px; }
.league-item.locked { opacity:.45; }
.league-item .nm { font-weight:800; font-size:14px; }
.league-item .rw { font-size:11px; color:#9aa0b4; }

/* 전투 */
#ring { width:100%; border-radius:14px; background:#0d0e14; display:block; }
#skillBar { display:flex; gap:8px; margin-top:10px; }
.skill-btn { flex:1; background:#1f2230; border:1px solid #3a3f58; border-radius:12px; color:#e8eaf0; padding:8px 4px; font-size:11px; font-weight:700; cursor:pointer; position:relative; overflow:hidden; }
.skill-btn .cd { position:absolute; inset:0; background:rgba(0,0,0,.65); transform-origin:bottom; }
.skill-btn.ult { border-color:#ffb300; color:#ffb300; }
.skill-btn:disabled { opacity:.5; }
#fightLog { margin-top:8px; font-size:11px; color:#9aa0b4; max-height:70px; overflow-y:auto; }

/* 스탯 */
.stat-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #262939; }
.stat-row .nm { font-weight:800; font-size:14px; } .stat-row .ds { font-size:10px; color:#9aa0b4; }
.stat-row .val { font-size:16px; font-weight:800; margin:0 10px; }
.mini { width:34px; height:34px; border-radius:8px; font-size:16px; }

/* 스킬 */
.sk-item { display:flex; justify-content:space-between; align-items:center; padding:8px; border-radius:10px; margin-bottom:6px; background:#1f2230; border:1px solid #2c3044; }
.sk-item.equipped { border-color:#ff7043; background:#2a2030; }
.sk-item .nm { font-weight:800; font-size:13px; } .sk-item .ds { font-size:10px; color:#9aa0b4; margin-top:2px; }

/* 훈련장 */
.eq-item { display:flex; justify-content:space-between; align-items:center; background:#1f2230; border:1px solid #2c3044; border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.eq-item .nm { font-weight:800; font-size:13px; } .eq-item .ds { font-size:11px; color:#9aa0b4; }

/* 룰렛 */
#wheel { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:12px 0; }
.wheel-cell { text-align:center; padding:10px 2px; border-radius:10px; background:#1f2230; font-size:11px; font-weight:800; border:2px solid transparent; transition:border-color .05s; }
.wheel-cell.hot { border-color:#fff; }
.legend-t { color:#ffb300; }
#spinResult { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.pull { border-radius:10px; padding:8px 10px; font-size:12px; font-weight:800; background:#1f2230; border:1px solid; animation:pop .3s; }
@keyframes pop { from { transform:scale(.6); opacity:0; } }

.toast { position:fixed; left:50%; top:14%; transform:translateX(-50%); background:#000c; padding:10px 18px; border-radius:12px; font-weight:800; z-index:99; animation:pop .25s; }