/* ============================================================
   v6 — Game Shell · World Hub · Character/Pet visual harmony · Rarity · Avatar/Frame/Title
   · Interaction prompt 𝄞 · Minimap · World transition · Merge roles · Arena countdown
   · Daily login · Season · Profile showcase. Art direction VuiSpace: mềm, đáng yêu, hiện đại, fantasy.
   ============================================================ */
:root{--gtop-h:60px;--nav-h:64px;--ra-common:#9AA3AE;--ra-rare:#2F80ED;--ra-epic:#9B51E0;--ra-legend:#F2994A;--ra-mystic:#EB5757}

/* ---------- 01 · Game Shell: header cố định ---------- */
.gtop{position:absolute;left:0;right:0;top:0;height:calc(var(--gtop-h) + env(safe-area-inset-top));padding:calc(6px + env(safe-area-inset-top)) 10px 6px;display:flex;align-items:center;gap:8px;z-index:25;
  background:linear-gradient(180deg,rgba(255,249,238,.97),rgba(255,249,238,.9));backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(130,95,40,.12);border-radius:0 0 22px 22px}
.gt-me{display:flex;align-items:center;gap:8px;min-width:0;flex:1;text-align:left;padding:2px 4px;border-radius:16px}
.gt-me:active{background:rgba(255,216,77,.25)}
.gt-id{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.gt-id b{font-size:14.5px;color:#3A2400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-id small{font-size:11px;color:#7C6E55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.gt-xp{display:block;height:4px;border-radius:4px;background:#F1E6CC;margin-top:3px;overflow:hidden;max-width:120px}.gt-xp i{display:block;height:100%;background:linear-gradient(90deg,#5ED3B0,#28A98A);border-radius:4px}
.lvpill{display:inline-block;background:linear-gradient(135deg,#FFD84D,#FFB820);color:#3A2400;border-radius:999px;padding:0 7px;font-weight:900;font-size:10.5px;line-height:17px}
.gt-cur{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.gt-cur span{background:var(--c-gold-bg);color:var(--c-gold-ink);border-radius:999px;padding:2px 9px;font-size:12px;white-space:nowrap}.gt-cur .w-dia{background:var(--c-dia-bg);color:var(--c-dia-ink)}
.gt-act{display:flex;gap:4px}
.gt-ic{position:relative;width:38px;height:38px;border-radius:14px;background:#fff;box-shadow:var(--sh-1);font-size:19px;display:grid;place-items:center}
.gt-ic.hot{animation:gtHot 1.6s ease-in-out infinite}
.gt-ic .badge{position:absolute;top:-4px;right:-4px}
@keyframes gtHot{50%{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,184,32,.45)}}
#scr-game .hud{top:calc(var(--gtop-h) + env(safe-area-inset-top));z-index:5}
#scr-game .hud-me,#scr-game #hud-gold,#scr-game #hud-env{display:none!important}
#scr-game .quest-pill{top:auto;bottom:calc(var(--nav-h) + 22px);max-width:calc(100% - 120px)}
#scr-game .sheet{top:calc(var(--gtop-h) + env(safe-area-inset-top) + 4px);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:20;animation:sheetIn .28s cubic-bezier(.2,.9,.3,1.1)}
.sheet-head .x.back{margin-right:6px}
.sheet-head{display:flex;align-items:center;gap:6px}.sheet-head h3{flex:1}
.sheet-body.swap{animation:swapIn .26s ease}
@keyframes sheetIn{from{transform:translateY(24px);opacity:.3}to{transform:none;opacity:1}}
@keyframes swapIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
body.sheet-open #scr-game .act-btn,body.sheet-open #scr-game .minimap,body.sheet-open #scr-game .quest-pill{visibility:hidden}
body.on-island #scr-game .hud{visibility:hidden}
/* ---------- 03 · Điều hướng 5 nút ---------- */
#scr-game .bottom-nav{z-index:24;min-height:var(--nav-h)}
.bottom-nav button{position:relative;transition:transform .15s}
.bottom-nav button.on{transform:translateY(-3px)}
.bottom-nav button.on i{filter:drop-shadow(0 3px 4px rgba(255,184,32,.55))}
.bottom-nav .badge{position:absolute;top:0;right:18%}
.more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.more-it{position:relative;background:#fff;border-radius:18px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:var(--sh-1);font-weight:800;font-size:12.5px;color:#3A2400}
.more-it i{font-style:normal;font-size:26px}.more-it .badge{position:absolute;top:4px;right:6px}
.more-it:active{transform:scale(.96)}

/* ---------- 02 · World Hub ---------- */
.hub-hero{position:relative;height:190px;margin:0 -14px;border-radius:0 0 30px 30px;overflow:hidden;background-size:cover;background-position:center}
.hh-sky{position:absolute;inset:0;background:linear-gradient(180deg,#9FDCF7 0%,#DDF4FF 55%,#FFF4D6 100%)}
.hub-hero.night .hh-sky{background:linear-gradient(180deg,#1C2350,#4B4F9E 60%,#8C7FC7)}
.hh-sun{position:absolute;right:30px;top:24px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#FFF6C2,#FFD84D 60%,rgba(255,216,77,0) 72%);box-shadow:0 0 40px #FFE38A}
.hub-hero.night .hh-sun{background:radial-gradient(circle,#FFFBEA,#F3E7B5 62%,rgba(0,0,0,0) 72%);box-shadow:0 0 30px rgba(255,248,200,.6)}
.hh-cloud{position:absolute;background:#fff;border-radius:40px;opacity:.85;animation:cloud 32s linear infinite}
.hh-cloud.a{width:90px;height:26px;top:26px;left:-100px;box-shadow:30px -10px 0 -4px #fff}.hh-cloud.b{width:60px;height:18px;top:70px;left:-80px;animation-duration:44s;animation-delay:-18s;opacity:.6}
.hub-hero.night .hh-cloud{opacity:.25}
.hh-land{position:absolute;left:0;right:0;bottom:0;width:100%;height:80px}
.hh-char,.hh-pet{position:absolute;bottom:18px;display:block}
.hh-char{left:calc(50% - 70px);width:92px;height:92px;animation:heroBob 3s ease-in-out infinite}
.hh-pet{left:calc(50% + 10px);width:70px;height:70px;animation:heroBob 2.4s ease-in-out infinite reverse}
.hh-char svg,.hh-pet svg,.hh-pet img,.hh-char img{width:100%;height:100%}
.hh-txt{position:absolute;left:16px;top:14px;max-width:62%;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.hh-txt b{display:block;font-size:15px;color:#3A2400}.hh-txt small{font-size:12px;color:#6B4A0F}
.hub-hero.night .hh-txt b,.hub-hero.night .hh-txt small{color:#FFF6D8;text-shadow:0 1px 3px rgba(0,0,0,.4)}
@keyframes heroBob{50%{transform:translateY(-6px)}}
.feat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.feat{background:#fff;border-radius:18px;padding:10px 12px;text-align:left;box-shadow:var(--sh-1);display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.feat i{grid-row:span 2;font-style:normal;font-size:26px}.feat b{font-size:13px;color:#3A2400;line-height:1.2}.feat small{font-size:11px;color:#7C6E55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feat.hot{background:linear-gradient(135deg,#FFF6D8,#FFE8B8);box-shadow:0 0 0 2px #FFD84D inset,var(--sh-1)}
.isl-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.isl-card{flex:0 0 auto;min-width:200px;scroll-snap-align:start;display:flex;gap:10px;align-items:center;text-align:left;background:#fff;border-radius:18px;padding:10px 12px;box-shadow:var(--sh-1);border:2px solid transparent}
.isl-card i{font-style:normal;font-size:28px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--ic) 25%,#fff)}
.isl-card b{display:block;color:#3A2400}.isl-card small{font-size:11.5px;color:#7C6E55}
.isl-card.on{border-color:var(--ic);box-shadow:0 0 0 3px color-mix(in srgb,var(--ic) 30%,transparent),var(--sh-1)}
.isl-card.lock{filter:grayscale(.7);opacity:.75}
.island .isl-name{position:absolute;left:12px;bottom:10px;background:rgba(255,255,255,.88);border-radius:999px;padding:4px 12px;font-weight:900;font-size:12.5px;color:#3A2400}
.tr-isl{margin:10px 0 4px;padding:6px 10px;border-radius:12px;background:#FFF6D8}.tr-isl b{display:block}.tr-isl small{color:#8A5A00}.tr-isl.lock{background:#EEE;filter:grayscale(.5)}

/* ---------- 07/08 · Character Card (cùng ngôn ngữ với Pet Card) ---------- */
.ccard{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#fff,#FFF8E6);border-radius:22px;padding:12px;box-shadow:var(--sh-2);border:2px solid #FFE7A0;position:relative;overflow:hidden;cursor:pointer}
.ccard::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,77,.35),rgba(255,216,77,0) 70%)}
.ccard.compact{padding:10px}
.cc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;position:relative;z-index:1}
.cc-name{display:flex;align-items:center;gap:6px}.cc-name b{font-size:17px;color:#3A2400}
.cc-bars{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cc-bar small{font-size:10.5px;color:#7C6E55}
.cc-st{display:flex;flex-wrap:wrap;gap:4px}.cc-st span{font-size:11px;background:rgba(255,255,255,.85);border-radius:999px;padding:1px 8px;color:#5A4A2A;box-shadow:0 1px 0 #F1E6CC}
.ccard.compact .cc-bars{display:none}

/* ---------- 16/17 · Avatar + khung ---------- */
.avx{--s:44px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);flex:0 0 auto;border-radius:30%}
.avx-in{width:calc(var(--s) - 8px);height:calc(var(--s) - 8px);border-radius:28%;overflow:hidden;background:linear-gradient(180deg,#E8F6EA,#FFF7DC);display:grid;place-items:center}
.avx-in svg,.avx-in img{width:100%;height:100%;object-fit:cover}
.avx-in .av-ic{font-size:calc(var(--s) * .5);line-height:1;color:#6B3FA0;font-weight:900}
.avx.fr-none .avx-in{width:var(--s);height:var(--s)}
.avx.fr{background:linear-gradient(135deg,var(--f1),var(--f2));box-shadow:0 0 0 2px #fff inset,0 0 12px var(--fg),0 3px 8px rgba(0,0,0,.15)}
.avx.fr::before{content:"";position:absolute;inset:-3px;border-radius:32%;pointer-events:none;background:var(--fimg,none) center/cover}
.avx.fp-leaf::after,.avx.fp-wave::after,.avx.fp-star::after,.avx.fp-flame::after,.avx.fp-crown::after,.avx.fp-heart::after,.avx.fp-gem::after,.avx.fp-cloud::after{position:absolute;font-size:calc(var(--s) * .28);right:-4px;top:-6px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.avx.fp-leaf::after{content:"🌿"}.avx.fp-wave::after{content:"🌊"}.avx.fp-star::after{content:"✨"}.avx.fp-flame::after{content:"🔥"}.avx.fp-crown::after{content:"👑";right:auto;left:calc(50% - var(--s) * .14);top:calc(var(--s) * -.26)}
.avx.fp-heart::after{content:"💗"}.avx.fp-gem::after{content:"💎"}.avx.fp-cloud::after{content:"☁️"}
.avx.fr-epic,.avx.fr-legendary,.avx.fr-event{animation:frGlow 2.8s ease-in-out infinite}
@keyframes frGlow{50%{box-shadow:0 0 0 2px #fff inset,0 0 20px var(--fg),0 3px 8px rgba(0,0,0,.15)}}
.ttl{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:900;color:var(--tc,#7C6E55);background:color-mix(in srgb,var(--tc,#7C6E55) 12%,#fff);border-radius:999px;padding:1px 9px;width:max-content;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl.tt-legendary,.ttl.tt-event{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 18%,#fff),#FFF6D8)}

/* ---------- 09/10 · Rarity badge + glow ---------- */
.rbadge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:900;color:#fff;background:var(--rc);border-radius:999px;padding:1px 8px;letter-spacing:.01em;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.rbadge.sm{font-size:9.5px;padding:0 6px;margin:2px 0}
.rbadge.ra-legend,.rbadge.ra-mystic{background:linear-gradient(90deg,var(--rc),#FFD84D,var(--rc));background-size:200% 100%;animation:shine 3s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.pcard{--rc:#9AA3AE;position:relative}
.pcard.ra-rare{box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 40%,transparent),0 4px 12px color-mix(in srgb,var(--rc) 18%,transparent)}
.pcard.ra-epic{box-shadow:0 0 0 2px color-mix(in srgb,var(--rc) 45%,transparent),0 6px 18px color-mix(in srgb,var(--rc) 28%,transparent)}
.pcard.ra-legend,.pcard.ra-mystic{box-shadow:0 0 0 2px color-mix(in srgb,var(--rc) 60%,transparent),0 0 22px color-mix(in srgb,var(--rc) 40%,transparent);animation:raPulse 3.2s ease-in-out infinite}
.pcard.ra-legend .pic::after,.pcard.ra-mystic .pic::after,.ps-card.ra-legend .ps-pic::after,.ps-card.ra-mystic .ps-pic::after{content:"✦";position:absolute;right:2px;top:0;color:var(--rc,#F2994A);font-size:12px;animation:twk 1.8s ease-in-out infinite}
.pcard .pic,.ps-card .ps-pic{position:relative}
@keyframes raPulse{50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--rc) 80%,transparent),0 0 30px color-mix(in srgb,var(--rc) 55%,transparent)}}
@keyframes twk{50%{opacity:.2;transform:scale(.7)}}
.pcard .fav{font-style:normal;font-size:12px}.pcard .cmp{font-style:normal;font-size:12px}
.ps-card.comp{box-shadow:0 0 0 3px #5ED3B0,var(--sh-1)}
.dex>div.ra-epic .pic,.dex>div.ra-legend .pic,.dex>div.ra-mystic .pic{box-shadow:0 0 14px rgba(155,81,224,.35);border-radius:14px}
.dex-more{opacity:.7}
body.reduced-motion .pcard,body.reduced-motion .rbadge,body.reduced-motion .avx,body.reduced-motion .gt-ic{animation:none!important}
.pd-actions .btn.on{background:#FFE3EC;border-color:#FF9DB5}
.pas{background:#F7F3FF;border-radius:12px;padding:7px 10px;margin:4px 0;font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pas b{color:#5B3DA8}.pas em{font-style:normal;background:#5ED3B0;color:#fff;border-radius:999px;padding:0 8px;font-size:10.5px;font-weight:900}
.pas.on{background:#E9FBF4}

/* ---------- 05/06 · Gợi ý tương tác 𝄞 ---------- */
.iprompt{position:absolute;z-index:6;transform:translate(-50%,-100%);background:rgba(255,255,255,.97);color:#3A2400;border-radius:999px;padding:6px 14px 6px 8px;font-weight:900;font-size:13px;
  box-shadow:0 6px 18px rgba(80,50,10,.25),0 0 0 2px #FFD84D;white-space:nowrap;display:flex;align-items:center;gap:6px;animation:ipBob 1.4s ease-in-out infinite;pointer-events:auto}
.iprompt b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#FFB820 55%,#E08A00);color:#fff;font-size:17px;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.iprompt.k-boss{box-shadow:0 6px 18px rgba(120,20,20,.3),0 0 0 2px #E53935}.iprompt.wait{opacity:.85;box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 2px #C9C0AE}
.iprompt::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes ipBob{50%{transform:translate(-50%,calc(-100% - 4px))}}
.act-btn.ready{animation:actReady 1.2s ease-in-out infinite}
@keyframes actReady{50%{box-shadow:0 5px 0 #B86E00,0 0 0 8px rgba(255,216,77,.45)}}
body.reduced-motion .iprompt,body.reduced-motion .act-btn.ready{animation:none}

/* ---------- 36 · Minimap ---------- */
.minimap{position:absolute;right:10px;top:calc(var(--gtop-h) + 108px + env(safe-area-inset-top));z-index:5;background:rgba(255,255,255,.92);padding:4px;border-radius:14px;box-shadow:var(--sh-2);cursor:pointer;line-height:0;transition:transform .2s}
.minimap canvas{border-radius:10px;image-rendering:pixelated;display:block}
.minimap.big{right:50%;transform:translateX(50%);top:calc(var(--gtop-h) + 70px);z-index:22}
.minimap::after{content:"🗺️";position:absolute;left:-8px;top:-8px;font-size:14px;line-height:1;background:#fff;border-radius:50%;padding:2px}

/* ---------- 04/34 · Chuyển cảnh thế giới ---------- */
.wtrans{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:linear-gradient(180deg,#BFE7F7,#FFF6D8);animation:wtIn .45s ease both;overflow:hidden}
.wtrans.isl{background:linear-gradient(180deg,#7FC3F0,#DDF4FF 60%,#FFF1C4)}
.wtrans.out{animation:wtOut .5s ease both}
.wt-cloud{position:absolute;background:#fff;border-radius:80px;opacity:.9;animation:wtCloud 1.6s ease-in-out infinite alternate}
.wt-cloud.c1{width:260px;height:80px;left:-60px;top:18%}.wt-cloud.c2{width:320px;height:90px;right:-80px;top:58%;animation-delay:-.6s}.wt-cloud.c3{width:200px;height:60px;left:30%;bottom:6%;animation-delay:-1.1s;opacity:.7}
.wt-txt{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.wt-clef{font-size:54px;color:#FFB820;text-shadow:0 3px 0 #fff;animation:spinClef 1.2s ease-in-out infinite}
.wt-txt b{font-size:24px;color:#3A2400;font-family:'Baloo 2',Nunito,sans-serif}.wt-txt small{color:#6B4A0F;font-weight:800}
@keyframes wtIn{from{opacity:0;transform:scale(1.04)}}@keyframes wtOut{to{opacity:0;transform:scale(.98)}}
@keyframes wtCloud{to{transform:translateX(40px)}}@keyframes spinClef{50%{transform:rotate(-12deg) scale(1.08)}}

/* ---------- 19/20/21 · Merge vai trò ---------- */
.pcard.msel{display:flex;align-items:center;gap:6px;padding:0;overflow:visible}
.msel-main{flex:1;display:flex;align-items:center;gap:8px;padding:8px;text-align:left;background:none}
.pcard.role-main{box-shadow:0 0 0 3px #FFD84D,0 6px 18px rgba(255,184,32,.35)}.pcard.role-sac{box-shadow:0 0 0 2px #FF8A65}
.mrole{position:absolute;top:-9px;left:10px;font-style:normal;font-size:10.5px;font-weight:900;border-radius:999px;padding:1px 8px;color:#fff}
.mrole.main{background:linear-gradient(90deg,#FFB820,#F2994A)}.mrole.sac{background:#FF7043}
.btn.mprim{margin-right:8px}
.mroles{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.mr-main{display:flex;flex-direction:column;align-items:center;text-align:center;background:#FFF6D8;border-radius:16px;padding:8px 12px;min-width:130px}.mr-main .pic{width:64px;height:64px}
.mr-main small{font-size:10.5px;color:#7C6E55}.mr-plus{font-size:22px;color:#C9A04A}.mr-sacs{display:flex;gap:6px}
.warnbox{background:#FFF1EC;border:2px solid #FFB199;color:#8E2B1E;border-radius:14px;padding:8px 12px;font-size:13px;margin:6px 0}
.okbox{background:#E9FBF4;border-radius:14px;padding:6px 12px;font-size:13px;color:#1E7B62}
.mconf{display:flex;flex-direction:column;gap:8px;text-align:left;margin:8px 0}.mini-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.chk{display:flex;align-items:center;gap:8px;justify-content:center;font-weight:800;margin:6px 0}.chk input{width:20px;height:20px}

/* ---------- 22/23/24 · Arena countdown ---------- */
.arena-cd{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:8;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.96),rgba(255,255,255,.82));box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 0 5px #5ED3B0;transition:box-shadow .3s}
.arena-cd b{font-size:40px;font-weight:900;color:#1E7B62;font-family:'Baloo 2',Nunito,sans-serif;line-height:1}
.arena-cd small{position:absolute;bottom:14px;font-size:10px;font-weight:900;color:#7C6E55;letter-spacing:.06em}
.arena-cd svg{position:absolute;inset:-5px;width:102px;height:102px;transform:rotate(-90deg)}
.arena-cd svg circle{fill:none;stroke-width:5;stroke:#5ED3B0;stroke-linecap:round;transition:stroke-dashoffset .4s linear,stroke .3s}
.arena-cd.warn{box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 0 5px #FFB820}.arena-cd.warn b{color:#B86E00}.arena-cd.warn svg circle{stroke:#FFB820}
.arena-cd.final{box-shadow:0 8px 28px rgba(198,40,40,.35),0 0 0 5px #E53935;animation:cdPulse .5s ease-in-out infinite alternate}.arena-cd.final b{color:#C62828}.arena-cd.final svg circle{stroke:#E53935}
.arena-cd.end{animation:cdEnd .7s ease both}
@keyframes cdPulse{to{transform:translate(-50%,-50%) scale(1.08)}}
@keyframes cdEnd{0%{transform:translate(-50%,-50%) scale(1.25)}60%{transform:translate(-50%,-50%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1);opacity:.9}}
.cd-flash{position:absolute;inset:0;background:#fff;z-index:9;pointer-events:none;animation:cdFlash .6s ease both}@keyframes cdFlash{from{opacity:.8}to{opacity:0}}
.to-cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;text-align:center;background:#FFF6D8;border-radius:14px;padding:8px;margin:6px 0}
.to-cmp b{font-size:22px}.to-cmp small{display:block;font-size:11px;color:#7C6E55}
body.reduced-motion .arena-cd{animation:none!important}

/* ---------- 41 · Gặp bí mật ---------- */
.battle.secret .bf{box-shadow:inset 0 0 60px rgba(155,134,232,.55)}
.battle.secret .b-sprite.wild{filter:drop-shadow(0 0 14px #B7A6F0)}
.secret-banner{position:absolute;left:50%;top:18%;transform:translateX(-50%);background:linear-gradient(90deg,#6A5FB0,#B7A6F0);color:#fff;font-weight:900;border-radius:999px;padding:6px 16px;z-index:5;animation:secIn 2.4s ease both;white-space:nowrap}
@keyframes secIn{0%{opacity:0;transform:translate(-50%,-10px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* ---------- 45 · Hồ sơ / trưng bày ---------- */
.prof-hero{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#FFF6D8,#FFE8F0);border-radius:22px;padding:14px;box-shadow:var(--sh-1)}
.prof-hero h3{margin:0 0 3px;font-size:20px}
.prof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.prof-stats>div,.mel-stats>div{background:#fff;border-radius:16px;padding:8px 4px;text-align:center;box-shadow:var(--sh-1)}
.prof-stats b,.mel-stats b{display:block;font-size:18px;color:#3A2400}.prof-stats small,.mel-stats small{font-size:10.5px;color:#7C6E55}
.mel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.sc-row{display:flex;gap:10px;align-items:center}.sc-row p{flex:1;margin:0}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.sc-pet{--rc:#9AA3AE;background:#fff;border-radius:18px;padding:8px;text-align:center;box-shadow:0 0 0 2px color-mix(in srgb,var(--rc) 45%,transparent),var(--sh-1);display:flex;flex-direction:column;align-items:center;min-width:96px}
.sc-pet .pic{width:62px;height:62px}.sc-pet b{font-size:12.5px}.sc-pet small{font-size:10.5px;color:#7C6E55}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.cos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.cos-cell{background:#fff;border-radius:18px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:var(--sh-1);border:2px solid transparent;text-align:center}
.cos-cell small{font-size:11.5px;font-weight:800;color:#3A2400}.cos-cell em{font-style:normal;font-size:10px;color:#8A7F70}
.cos-cell.on{border-color:#FFB820;background:#FFF8E6}.cos-cell.lock{opacity:.6;filter:grayscale(.6)}
.title-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;background:#fff;border-radius:14px;padding:9px 12px;box-shadow:var(--sh-1);border:2px solid transparent;text-align:left}
.title-row small{font-size:11px;color:#7C6E55}.title-row.on{border-color:#FFB820;background:#FFF8E6}.title-row.lock{opacity:.6}
.score-card{text-align:center}.score-big{display:block;font-size:40px;color:#9B51E0;font-family:'Baloo 2',Nunito,sans-serif}
.score-parts{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.score-parts span{font-size:11px;background:#F7F3FF;border-radius:999px;padding:2px 8px}
.av-ring{display:inline-flex}
.frow .avx{margin-right:2px}

/* ---------- 39 · Đăng nhập hằng ngày ---------- */
.daily-hero small{display:block}.daily-hero .daily-n,.season .daily-n{font-size:32px;color:#E08A00;font-family:'Baloo 2',Nunito,sans-serif}
.daily-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.dday{background:#fff;border-radius:14px;padding:8px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:2px;font-size:12px}
.dday small{font-size:10.5px;color:#7C6E55}.dday.mile{background:linear-gradient(135deg,#FFF6D8,#FFE3EC);box-shadow:0 0 0 2px #FFD84D inset}
.dday.done{opacity:.55}.dday.done b::after{content:" ✔";color:#28A98A}.dday.cur{box-shadow:0 0 0 3px #28A98A inset}
/* ---------- 40 · Mùa ---------- */
.season{display:flex;flex-direction:column;gap:8px}.season-hero{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#232863,#6A5FB0);color:#fff;border-radius:22px;padding:14px}
.season-hero h3{margin:0;color:#FFF3C4}.season-hero p{margin:4px 0 0;font-size:12.5px;opacity:.9}.season-hero small{opacity:.85}
.season-it.got{background:#E9FBF4}

/* ---------- 25/27 · Chest rarity trong sheet thông thạo ---------- */
.m-claim{display:flex;gap:8px;align-items:center;background:linear-gradient(135deg,#FFF6D8,#E9FBF4);border-radius:16px;padding:10px 12px;margin-top:8px}
.melody-card .btn{margin-top:6px}

/* PC: header cố định bên phải thanh điều hướng trái */
@media (min-width:1024px){
  body.pc .gtop{left:240px;border-radius:0 0 22px 22px}
  body.pc #scr-game .sheet{bottom:0}
  body.pc .bottom-nav button.on{transform:none}
}
@media (max-width:380px){.gt-cur span{font-size:11px;padding:2px 7px}.gt-ic{width:34px;height:34px;font-size:17px}.prof-stats{grid-template-columns:repeat(2,1fr)}}