/* ============================================================
   HERO KID — app.css
   Soft Sky Blue design system
   ============================================================ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ── VARIABLES ── */
:root {
  --bg:   #EEF5FF; --bg2:  #E0ECFF;
  --w:    #FFFFFF;
  --blue: #4A7FE8; --bl:   #DCEEFF; --bll:  #EEF5FF; --bd:   #1A3A6E; --bm:   #2A5AAA;
  --bor:  #C8DEFF;
  --t:    #1A3A6E; --t2:   #2A5AAA; --t3:   #5A8AC8; --t4:   #8AADD8;
  --am:   #F4A338; --aml:  #FFF5E0;
  --gr:   #4FC87A; --grl:  #E8FBF0;
  --rd:   #FF6B8A; --rdl:  #FFECF0;
  --pu:   #8B7FE8; --pul:  #EAE6FF;
  --cy:   #38C8E8;
  --r:    18px;    --rs:   12px;
}

/* ── BASE ── */
html, body { height: 100%; background: var(--bg); overscroll-behavior: none; }
body { font-family: 'Nunito', sans-serif; color: var(--t); display: flex; justify-content: center; }
.app { width: 100%; max-width: 420px; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); position: relative; }

/* ── SCREENS ── */
.screen { display: none; flex: 1; flex-direction: column; }
.screen.on { display: flex; }

/* ── TOPBAR ── */
.tb { background: var(--w); padding: 12px 16px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--bor); flex-shrink: 0; }
.tb-title { font-size: 15px; font-weight: 900; color: var(--bd); }
.coins { display: flex; align-items: center; gap: 5px; background: var(--aml); border: 1.5px solid #F4C875; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 800; color: #9A6010; }
.icon-btn { background: var(--bll); border: 1.5px solid var(--bor); border-radius: 10px; padding: 5px 10px; font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 800; color: var(--t2); cursor: pointer; }

/* ── BOTTOM NAV ── */
.bnav { background: var(--w); border-top: 1.5px solid var(--bor); display: flex; justify-content: space-around; padding: 8px 0 14px; flex-shrink: 0; }
.ni { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; padding: 0 6px; }
.nicon { font-size: 20px; line-height: 1; }
.nlbl { font-size: 8px; font-weight: 700; color: var(--t4); }
.ni.on .nlbl { color: var(--blue); }
.ndot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); margin: 2px auto 0; }

/* ── SCROLL ── */
.scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.scroll::-webkit-scrollbar { width: 0; }

/* ── CARDS ── */
.card { background: var(--w); border-radius: var(--r); border: 1.5px solid var(--bor); padding: 14px; }
.ctitle { font-size: 10px; font-weight: 800; color: var(--t3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; }

/* ── BUTTONS ── */
.btn { width: 100%; background: var(--blue); color: #fff; border: none; border-radius: var(--r); padding: 13px; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 900; cursor: pointer; margin-bottom: 8px; }
.btn:active { opacity: .85; }
.btn.out { background: var(--w); color: var(--blue); border: 2px solid var(--blue); }
.btn.sm  { font-size: 11px; padding: 9px; border-radius: var(--rs); }
.btn.grn { background: var(--gr); }
.btn.red { background: var(--rd); }
.btn.am  { background: var(--am); color: #fff; }

/* ── INPUTS ── */
.inp { width: 100%; padding: 12px 14px; border: 1.5px solid var(--bor); border-radius: var(--rs); font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; color: var(--t); background: var(--w); outline: none; margin-bottom: 10px; }
.inp:focus { border-color: var(--blue); }
.lbl { font-size: 11px; font-weight: 800; color: var(--t2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .6px; display: block; }

/* ── BARS ── */
.bwrap { background: var(--bg2); border-radius: 8px; height: 8px; overflow: hidden; }
.bfill { height: 100%; border-radius: 8px; transition: width .4s; }

/* ── HERO PROFILE CARD ── */
.hpro { background: var(--blue); border-radius: var(--r); padding: 16px; }
.hinner { background: rgba(255,255,255,.15); border-radius: 14px; padding: 14px; display: flex; gap: 12px; }
.avwrap { flex-shrink: 0; position: relative; }
.av { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 38px; border: 3px solid rgba(255,255,255,.4); }
.lvbadge { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); background: var(--am); color: #fff; font-size: 9px; font-weight: 900; padding: 2px 8px; border-radius: 10px; white-space: nowrap; border: 2px solid rgba(255,255,255,.4); }
.hdet { flex: 1; min-width: 0; }
.hname { font-size: 18px; font-weight: 900; color: #fff; line-height: 1.1; }
.hcls  { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.rpill { display: inline-flex; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 9px; border-radius: 12px; margin-bottom: 8px; }
.hbrow { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.hblbl { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.8); width: 16px; }
.hbtrack { flex: 1; background: rgba(255,255,255,.2); border-radius: 8px; height: 7px; overflow: hidden; }
.hbfill { height: 100%; border-radius: 8px; }
.hbval  { font-size: 8px; font-weight: 700; color: rgba(255,255,255,.7); width: 48px; text-align: right; white-space: nowrap; }
.schip  { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.2); border-radius: 12px; padding: 3px 10px; font-size: 10px; font-weight: 800; color: #fff; margin-top: 8px; }
.tstrip { display: flex; background: rgba(255,255,255,.12); margin: 10px -16px 0; padding: 8px 16px; }
.tsi    { flex: 1; text-align: center; }
.tsiv   { font-size: 12px; font-weight: 900; color: #fff; }
.tsil   { font-size: 7px; font-weight: 700; color: rgba(255,255,255,.6); margin-top: 1px; }
.tsidiv { width: 1px; background: rgba(255,255,255,.2); }

/* ── QUEST ITEMS ── */
.qi     { background: var(--w); border-radius: var(--rs); border: 1.5px solid var(--bor); padding: 11px 12px; display: flex; align-items: center; gap: 10px; }
.qi.done{ background: var(--grl); border-color: #B8EDD0; }
.qi.pend{ background: var(--aml); border-color: #F4C875; }
.qchk   { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; }
.qchk.e { background: var(--bg2); border: 2px solid var(--bor); }
.qchk.c { background: var(--gr); color: #fff; }
.qchk.w { background: var(--am); color: #fff; }
.qinfo  { flex: 1; min-width: 0; }
.qname  { font-size: 12px; font-weight: 800; color: var(--t); }
.qmeta  { font-size: 9px; font-weight: 600; color: var(--t3); margin-top: 2px; }
.qstat  { font-size: 8px; font-weight: 700; color: var(--am); margin-top: 2px; }
.qdiff  { font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 10px; flex-shrink: 0; }
.de { background: var(--grl); color: #2E8B57; }
.dm { background: var(--aml); color: #9A6010; }
.dh { background: var(--rdl); color: #C0392B; }
.dbtn { background: var(--blue); color: #fff; border: none; border-radius: 10px; padding: 5px 10px; font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 800; cursor: pointer; flex-shrink: 0; }

/* ── SKILLS ── */
.sgrid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skcard { background: var(--w); border-radius: var(--rs); border: 1.5px solid var(--bor); padding: 10px 12px; }
.skemoji{ font-size: 20px; margin-bottom: 3px; }
.skname { font-size: 9px; font-weight: 700; color: var(--t3); margin-bottom: 2px; }
.sklv   { font-size: 20px; font-weight: 900; color: var(--t); line-height: 1.1; }
.sktrack{ background: var(--bg2); border-radius: 6px; height: 5px; margin-top: 5px; overflow: hidden; }
.skfill { height: 100%; border-radius: 6px; }

/* ── SKILLS FULL SCREEN ── */
.cat-section { margin-bottom: 4px; }
.cat-header  { display: flex; align-items: center; gap: 8px; padding: 10px 0 7px; }
.cat-icon    { font-size: 18px; }
.cat-name    { font-size: 12px; font-weight: 900; color: var(--t); flex: 1; }
.cat-lv      { font-size: 11px; font-weight: 900; }
.skill-row   { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--bor); }
.skill-row:last-child { border-bottom: none; }
.skill-emoji { font-size: 16px; flex-shrink: 0; }
.skill-info  { flex: 1; }
.skill-name  { font-size: 11px; font-weight: 800; color: var(--t); }
.skill-xp    { font-size: 8px; font-weight: 700; color: var(--t3); margin-top: 2px; }
.skill-lv-num{ font-size: 14px; font-weight: 900; color: var(--blue); flex-shrink: 0; width: 28px; text-align: right; }
.skill-bar-wrap { flex: 1; max-width: 80px; }

/* ── GEAR ── */
.ggrid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gslot  { background: var(--bg2); border-radius: var(--rs); border: 1.5px solid var(--bor); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.gslot.on { background: var(--bl); border-color: var(--blue); }
.gicon  { font-size: 24px; }
.glbl   { font-size: 8px; font-weight: 700; color: var(--t4); margin-top: 3px; }
.gslot.on .glbl { color: var(--bm); }
.rarity-common    { color: #888; }
.rarity-rare      { color: var(--blue); }
.rarity-epic      { color: var(--pu); }
.rarity-legendary { color: var(--am); }
.rarity-divine    { color: var(--rd); }

/* ── ITEM ROW ── */
.item-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bor); }
.item-row:last-child { border-bottom: none; }
.item-icon-wrap { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.item-info { flex: 1; }
.item-name { font-size: 11px; font-weight: 800; color: var(--t); }
.item-sub  { font-size: 9px; font-weight: 600; color: var(--t3); margin-top: 2px; }
.item-rarity { font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 7px; }
.r-common    { background: var(--bg2); color: var(--t3); }
.r-rare      { background: var(--bl);  color: var(--bm); }
.r-epic      { background: var(--pul); color: #4A3A9E; }
.r-legendary { background: var(--aml); color: #9A6010; }
.r-divine    { background: var(--rdl); color: #C0392B; }
.equip-tag  { background: var(--blue); color: #fff; font-size: 7px; font-weight: 900; padding: 2px 6px; border-radius: 6px; }

/* ── PETS ── */
.pet-card { background: var(--w); border-radius: var(--r); border: 1.5px solid var(--bor); overflow: hidden; }
.pet-active-bg { background: var(--blue); padding: 14px; }
.pet-stats-strip { display: flex; gap: 0; background: rgba(255,255,255,.12); border-radius: 10px; margin-top: 10px; }
.ps { flex: 1; text-align: center; padding: 7px 4px; }
.ps-v { font-size: 11px; font-weight: 900; color: #fff; }
.ps-l { font-size: 7px; font-weight: 700; color: rgba(255,255,255,.6); margin-top: 1px; }
.ps-div { width: 1px; background: rgba(255,255,255,.15); }
.need-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.need-lbl { font-size: 8px; font-weight: 700; color: rgba(255,255,255,.7); width: 60px; flex-shrink: 0; }
.need-track { flex: 1; background: rgba(255,255,255,.15); border-radius: 6px; height: 7px; overflow: hidden; }
.need-fill  { height: 100%; border-radius: 6px; }
.need-val   { font-size: 8px; font-weight: 800; color: #fff; width: 28px; text-align: right; }
.pet-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pet-ccard  { background: var(--w); border-radius: var(--r); border: 1.5px solid var(--bor); padding: 12px; text-align: center; cursor: pointer; }
.pet-ccard.active-pet { border-color: var(--blue); border-width: 2px; background: var(--bll); }
.pet-ccard.locked-pet { opacity: .5; }

/* ── BOSS ── */
.boss-card  { background: var(--w); border-radius: var(--r); border: 1.5px solid var(--bor); overflow: hidden; }
.bhead      { background: var(--bl); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.bsprite    { width: 56px; height: 56px; border-radius: 14px; background: var(--w); display: flex; align-items: center; justify-content: center; font-size: 32px; border: 1.5px solid var(--bor); flex-shrink: 0; position: relative; }
.bbody      { padding: 12px 14px; }
.bhprow     { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--t3); margin-bottom: 4px; }
.bhptrack   { background: var(--bg2); border-radius: 10px; height: 12px; overflow: hidden; margin-bottom: 10px; }
.bhpfill    { height: 100%; border-radius: 10px; background: var(--rd); transition: width .5s; }
.abtn       { width: 100%; background: var(--blue); color: #fff; border: none; border-radius: var(--rs); padding: 12px; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 900; cursor: pointer; }
.abtn.off   { background: var(--bg2); color: var(--t4); cursor: not-allowed; }
.atk-src    { display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 700; padding: 3px 0; }
.atk-lbl    { color: var(--t3); }
.atk-val    { font-weight: 900; color: var(--bm); }
.log-item   { font-size: 10px; font-weight: 600; color: var(--t3); padding: 5px 0; border-bottom: 1px solid var(--bor); }
.log-item:last-child { border-bottom: none; }

/* ── MAP ── */
.maparea    { background: #0F2040; padding: 12px 14px; overflow: hidden; }
.mnode      { border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; width: 52px; height: 52px; }
.mnode.done   { background: #0F6E56; border: 2px solid #5DCAA5; }
.mnode.active { background: #BA7517; border: 2px solid #FAC775; }
.mnode.next   { background: rgba(255,255,255,.08); border: 2px dashed rgba(255,255,255,.25); }
.mnode.locked { background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.08); }

/* ── BESTIARY ── */
.monster-row { padding: 9px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--bor); cursor: pointer; }
.monster-row:last-child { border-bottom: none; }
.monster-row.undiscovered { opacity: .5; }
.ms { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; border: 1.5px solid var(--bor); }
.ms.daily  { background: var(--rdl); }
.ms.boss   { background: var(--pul); }
.ms.monthly{ background: var(--aml); }
.ms.unknown{ background: var(--bg2); }
.boss-badge  { font-size: 7px; font-weight: 800; background: var(--pul); color: #4A3A9E; padding: 2px 6px; border-radius: 6px; }
.kill-badge  { font-size: 7px; font-weight: 800; background: var(--grl); color: #2A7A4A; padding: 2px 6px; border-radius: 6px; }
.active-badge{ font-size: 7px; font-weight: 800; background: var(--rdl); color: #C0392B; padding: 2px 6px; border-radius: 6px; }
.region-group{ background: var(--w); border-radius: var(--r); border: 1.5px solid var(--bor); overflow: hidden; }
.rg-header   { padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--bor); background: var(--bg2); }
.rg-name     { font-size: 10px; font-weight: 900; color: var(--t); flex: 1; }
.rg-count    { font-size: 8px; font-weight: 800; color: var(--t3); }
.dex-bar     { background: var(--bg2); border-radius: 8px; height: 7px; overflow: hidden; }
.dex-fill    { height: 100%; border-radius: 8px; background: var(--blue); }

/* ── ACHIEVEMENTS ── */
.abadge       { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.abadge.earned{ background: var(--aml); border: 2px solid var(--am); }
.abadge.locked{ background: var(--bg2); border: 2px dashed var(--bor); opacity: .5; }
.abadge.rare  { background: var(--pul); border: 2px solid var(--pu); }
.talent-badge { background: var(--pu); color: #fff; font-size: 7px; font-weight: 800; padding: 2px 6px; border-radius: 7px; }

/* ── CALENDAR ── */
.cday         { aspect-ratio: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; color: var(--t); cursor: pointer; }
.cday.full    { background: var(--gr); color: #fff; }
.cday.partial { background: var(--aml); border: 1.5px solid var(--am); }
.cday.miss    { background: var(--rdl); }
.cday.future  { background: var(--bg2); color: var(--t4); }
.cday.today   { border: 2px solid var(--blue); background: var(--bll); }
.hm-row       { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.hm-lbl       { font-size: 9px; font-weight: 700; color: var(--t); width: 80px; flex-shrink: 0; }
.hm-cells     { display: flex; gap: 2px; flex: 1; }
.hm-cell      { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.hc-0 { background: var(--bg2); }
.hc-1 { background: #C0DD97; }
.hc-2 { background: #97C459; }
.hc-3 { background: #639922; }
.hc-4 { background: #3B6D11; }

/* ── INBOX ── */
.msgrow         { background: var(--w); border-radius: var(--r); border: 1.5px solid var(--bor); padding: 10px 12px; display: flex; gap: 10px; cursor: pointer; margin-bottom: 7px; }
.msgrow.unread  { border-color: var(--blue); background: var(--bll); }
.msgav          { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background: var(--blue); color: #fff; }
.unread-dot     { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 4px; }

/* ── SHOP ── */
.sitem  { background: var(--w); border-radius: var(--rs); border: 1.5px solid var(--bor); padding: 11px 12px; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sicon  { font-size: 26px; flex-shrink: 0; }
.sname  { font-size: 12px; font-weight: 800; color: var(--t); }
.sdesc  { font-size: 9px; font-weight: 600; color: var(--t3); margin-top: 2px; }
.scost  { font-size: 11px; font-weight: 800; color: #9A6010; flex-shrink: 0; margin-right: 6px; }
.buybtn { background: var(--blue); color: #fff; border: none; border-radius: 10px; padding: 6px 12px; font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 800; cursor: pointer; }
.daily-deal { background: var(--blue); border-radius: var(--r); padding: 12px; position: relative; overflow: hidden; margin-bottom: 10px; }
.deal-badge { position: absolute; top: 10px; right: 10px; background: var(--rd); color: #fff; font-size: 7px; font-weight: 900; padding: 2px 7px; border-radius: 8px; }

/* ── WEEKLY QUEST ── */
.wcard  { background: var(--pul); border-radius: var(--r); border: 1.5px solid #C8C0F8; padding: 14px; }
.wtitle { font-size: 12px; font-weight: 900; color: #4A3A9E; margin-bottom: 3px; }
.wsub   { font-size: 9px; font-weight: 700; color: #6A5AB8; margin-bottom: 10px; }
.wtrack { background: rgba(255,255,255,.6); border-radius: 8px; height: 10px; overflow: hidden; }
.wfill  { height: 100%; background: var(--pu); border-radius: 8px; transition: width .4s; }

/* ── FILTER TABS ── */
.ftabs { background: var(--w); border-bottom: 1.5px solid var(--bor); display: flex; padding: 0 14px; flex-shrink: 0; }
.ftab  { flex: 1; text-align: center; padding: 8px 0; font-size: 10px; font-weight: 800; color: var(--t4); cursor: pointer; border-bottom: 2.5px solid transparent; }
.ftab.on { color: var(--blue); border-bottom-color: var(--blue); }

/* ── PROFILE ── */
.prof-banner    { background: var(--bd); height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; font-size: 18px; opacity: .3; letter-spacing: 4px; }
.prof-stat-card { background: var(--w); border-radius: var(--rs); border: 1.5px solid var(--bor); padding: 10px; text-align: center; }
.prof-cat-bar   { background: var(--bg2); border-radius: 10px; padding: 8px 9px; }
.pcat-top       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pcat-lbl       { font-size: 9px; font-weight: 800; color: var(--t); }
.pcat-val       { font-size: 9px; font-weight: 900; }
.pcat-track     { background: var(--w); border-radius: 6px; height: 6px; overflow: hidden; margin-bottom: 3px; }
.pcat-fill      { height: 100%; border-radius: 6px; }
.pcat-insight   { font-size: 8px; font-weight: 700; color: var(--t3); }

/* ── LEVEL UP SCREEN ── */
.lvup-screen    { background: var(--bd); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; text-align: center; }
.lvup-badge     { width: 90px; height: 90px; border-radius: 50%; background: var(--am); border: 4px solid #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; position: relative; animation: pulse 2s ease-in-out infinite; }
.lvup-ring      { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(244,163,56,.4); }
.lvup-ring2     { position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(244,163,56,.2); }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.lvup-gains     { display: flex; gap: 0; background: rgba(255,255,255,.12); border-radius: 12px; width: 100%; margin-bottom: 14px; }
.lg             { flex: 1; text-align: center; padding: 8px 4px; }
.lg-v           { font-size: 13px; font-weight: 900; color: var(--gr); }
.lg-l           { font-size: 7px; font-weight: 700; color: rgba(255,255,255,.6); margin-top: 1px; }
.lg-div         { width: 1px; background: rgba(255,255,255,.15); }
.lvup-unlocked  { width: 100%; margin-bottom: 14px; }
.lu-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.lu-card        { background: rgba(255,255,255,.1); border-radius: 12px; border: 1px solid rgba(255,255,255,.15); padding: 9px 8px; text-align: center; }

/* ── RANK UP SCREEN ── */
.rankup-screen  { background: var(--bd); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 18px; text-align: center; }
.ru-new         { width: 80px; height: 80px; border-radius: 50%; background: var(--am); border: 4px solid #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 14px; position: relative; }
.ru-ring        { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(244,163,56,.5); }
.ru-rewards     { width: 100%; background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.rur-row        { display: flex; align-items: center; gap: 8px; padding: 4px 0; }

/* ── PIN SCREEN ── */
.pin-screen     { background: var(--bd); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 20px; }
.pin-btn        { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.15); border-radius: 14px; padding: 14px 0; font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 900; color: #fff; cursor: pointer; text-align: center; }
.pin-btn:active { background: rgba(255,255,255,.25); }
.pin-dot        { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); }
.pin-dot.filled { background: #fff; border-color: #fff; }
.pin-dot.err    { background: var(--rd); border-color: var(--rd); }

/* ── PARENT UI ── */
.ptb       { background: var(--bd); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.ptb-title { font-size: 13px; font-weight: 900; color: #fff; }
.ptb-exit  { background: rgba(255,107,138,.2); border: 1px solid rgba(255,107,138,.4); border-radius: 8px; padding: 3px 9px; font-size: 9px; font-weight: 800; color: #FFB3C4; cursor: pointer; }
.pbnav     { background: var(--w); border-top: 1.5px solid var(--bor); display: flex; justify-content: space-around; padding: 8px 0 14px; flex-shrink: 0; }
.pq-row    { background: var(--w); border-radius: 10px; border: 1px solid #F4C875; padding: 9px 10px; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.approve-btn { background: var(--gr); color: #fff; border: none; border-radius: 8px; padding: 5px 9px; font-family: 'Nunito', sans-serif; font-size: 9px; font-weight: 900; cursor: pointer; }
.reject-btn  { background: var(--w); color: var(--rd); border: 1.5px solid var(--rd); border-radius: 8px; padding: 5px 7px; font-family: 'Nunito', sans-serif; font-size: 9px; font-weight: 900; cursor: pointer; }

/* ── CLASS CARDS ── */
.cgrid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccard  { background: var(--w); border-radius: var(--rs); border: 1.5px solid var(--bor); padding: 14px 10px; cursor: pointer; text-align: center; }
.ccard.sel { border-color: var(--blue); border-width: 2px; background: var(--bll); }
.cemoji { font-size: 26px; margin-bottom: 6px; }
.cname  { font-size: 11px; font-weight: 900; color: var(--t); }
.cdesc  { font-size: 8px; font-weight: 600; color: var(--t3); margin-top: 3px; line-height: 1.5; }

/* ── HERO SELECT ── */
.hchip      { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; opacity: .55; }
.hchip.sel  { opacity: 1; }
.chipav     { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 22px; border: 2px solid transparent; }
.hchip.sel .chipav  { border-color: #fff; background: rgba(255,255,255,.25); }
.chipname           { font-size: 8px; font-weight: 800; color: rgba(255,255,255,.7); }
.hchip.sel .chipname{ color: #fff; }

/* ── SKIN TONES ── */
.skin     { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.skin.sel { border-color: var(--bd); transform: scale(1.15); }

/* ── TOAST ── */
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--bd); color: #fff; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; padding: 10px 18px; border-radius: 14px; z-index: 999; animation: tIn .3s ease; max-width: 280px; text-align: center; line-height: 1.6; pointer-events: none; }
@keyframes tIn { from{ opacity:0; transform:translateX(-50%) translateY(14px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } }

/* ── DMG POPUP ── */
.dpop { position: absolute; font-size: 18px; font-weight: 900; color: var(--rd); animation: fUp .9s forwards; pointer-events: none; top: -4px; left: 50%; transform: translateX(-50%); }
@keyframes fUp { 0%{ opacity:1; transform:translateX(-50%) translateY(0) } 100%{ opacity:0; transform:translateX(-50%) translateY(-40px) } }

/* ── EMPTY STATE ── */
.empty    { text-align: center; padding: 20px; font-size: 11px; font-weight: 700; color: var(--t4); }
.ei       { font-size: 32px; margin-bottom: 8px; }

/* ── MISC ── */
.savest   { font-size: 9px; font-weight: 700; color: var(--t4); text-align: right; min-height: 14px; }
.divider  { height: 1px; background: var(--bor); margin: 8px 0; }
.tag      { font-size: 8px; font-weight: 800; padding: 2px 7px; border-radius: 8px; display: inline-block; }
.tag-mind { background: var(--pul); color: #4A3A9E; }
.tag-body { background: var(--rdl); color: #C0392B; }
.tag-soul { background: var(--aml); color: #9A6010; }
.tag-char { background: var(--grl); color: #2A7A4A; }