/* ============================================================
   v7 — Master Spec: Creator 2.0 · Shop trang phục · Pet Showcase + 5 tab · Skill Card · Item tile
   · Leaderboard podium · World Boss tiers · Island selector
   ============================================================ */
/* ---------- Item/Skill icon: ô vuông bóng + viền độ hiếm ---------- */
.itile{--rc:#C9CED6;display:grid;place-items:center;width:100%;height:100%;min-width:30px;min-height:30px;border-radius:24%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 30% 25%,#fff 0%,#F4F1EA 45%,#E6E0D2 100%);box-shadow:inset 0 0 0 2px var(--rc),inset 0 -3px 0 rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.12)}
.itile>.svg,.itile>img,.itile>svg{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.itile::after{content:"";position:absolute;left:8%;top:6%;width:45%;height:22%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.itile.r-rare{--rc:#2F80ED;background:radial-gradient(circle at 30% 25%,#fff,#E6F0FF 50%,#C9DDFB)}
.itile.r-epic{--rc:#9B51E0;background:radial-gradient(circle at 30% 25%,#fff,#F1E6FF 50%,#DCC6F7);box-shadow:inset 0 0 0 2px var(--rc),0 0 10px rgba(155,81,224,.45)}
.itile.r-legend,.itile.r-legendary{--rc:#F2994A;background:radial-gradient(circle at 30% 25%,#fff,#FFF1D6 50%,#FFD9A6);box-shadow:inset 0 0 0 2px var(--rc),0 0 12px rgba(242,153,74,.55)}
.itile.r-event{--rc:#E5487A;background:radial-gradient(circle at 30% 25%,#fff,#FFE6EE 50%,#FFC7D8)}
.ico .itile{width:100%;height:100%}

/* ---------- Creator 2.0 ---------- */
.v7cc .v7prev{width:220px;height:220px;margin:0 auto;background:radial-gradient(circle at 50% 70%,#FFF6D8,#FFE8B8 55%,transparent 70%);border-radius:50%}
.v7cc .v7prev svg{width:100%;height:100%;animation:chibiBreath 3s ease-in-out infinite}
@keyframes chibiBreath{50%{transform:translateY(-3px) scale(1.01,.99)}}
.v7cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.v7cats button{flex:0 0 auto;white-space:nowrap;min-height:40px}
.v7grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))!important}
.v7grid .cc2-opt{position:relative;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 45%,transparent)}
.v7grid .cc2-opt em{position:absolute;top:4px;right:4px;font-style:normal;font-size:9.5px;font-weight:900;background:rgba(255,255,255,.92);border-radius:999px;padding:0 5px;color:#7C6E55}
.v7grid .cc2-opt em.rr{color:var(--rc);text-transform:capitalize}
.v7grid .cc2-opt.lock{opacity:.75}.v7grid .cc2-opt.lock .cc2-th{filter:grayscale(.5)}
body.reduced-motion .v7prev svg{animation:none}

/* ---------- Shop trang phục ---------- */
.cshop-top{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#FFF6D8,#FFE8F0);border-radius:22px;padding:10px 12px}
.cshop-prev{width:120px;height:120px;flex:0 0 auto}.cshop-prev svg{width:100%;height:100%}
.cshop-top .row span{background:#fff;border-radius:999px;padding:3px 10px;font-size:12.5px}
.cshop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.cs-card{--rc:#9AA3AE;background:#fff;border-radius:18px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 45%,transparent),var(--sh-1);cursor:pointer}
.cs-card.on{box-shadow:inset 0 0 0 3px var(--rc),0 6px 16px color-mix(in srgb,var(--rc) 35%,transparent)}
.cs-th{width:78px;height:78px}.cs-th svg{width:100%;height:100%}.cs-card b{font-size:12.5px}.cs-card .rr{color:var(--rc);font-weight:900;text-transform:capitalize;font-size:10.5px}
.cs-card .sale{color:#E53935;font-weight:900;font-size:10.5px}

/* ---------- Pet Showcase 2.0 ---------- */
.hero-stage{--rc:#9AA3AE;--ec:#5CC46B;position:relative;border-radius:26px;overflow:hidden;margin:0 -4px}
.hero-stage .portrait{margin:0}
.hero-stage .pedestal{position:absolute;left:50%;bottom:44px;width:62%;height:34px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--ec) 45%,#fff) 0%,color-mix(in srgb,var(--ec) 25%,transparent) 55%,transparent 72%);box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 55%,transparent);animation:pedPulse 3s ease-in-out infinite}
@keyframes pedPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--rc) 25%,transparent)}}
.hero-stage.ra-epic,.hero-stage.ra-legend,.hero-stage.ra-mystic{box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 60%,transparent),0 0 26px color-mix(in srgb,var(--rc) 40%,transparent)}
.hs-badges{position:absolute;top:10px;left:10px;display:flex;gap:4px;flex-wrap:wrap;z-index:3}
.lvchip{background:#3A2400!important;color:#FFD84D}
.pd-tabs{position:sticky;top:-10px;z-index:4;background:var(--bg);padding:6px 0}
.stats.mini{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:6px 0}.stats.mini .stat{padding:4px;font-size:10px}
.stbar{display:grid;grid-template-columns:48px 1fr 40px 60px;gap:8px;align-items:center;margin:4px 0}.stbar span{font-weight:900;text-align:right}
.evo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.evo-card{background:#fff;border-radius:18px;padding:8px;text-align:center;box-shadow:var(--sh-1);display:flex;flex-direction:column;align-items:center;gap:2px}
.evo-card .ec-pic{width:80px;height:80px}.evo-card.lock{opacity:.7}.evo-card b{font-size:12.5px}.evo-card small{font-size:10.5px;color:#7C6E55}
.lore-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lore-card{background:linear-gradient(135deg,#FFF8E6,#fff);border-radius:16px;padding:10px;box-shadow:var(--sh-1)}.lore-card p{margin:4px 0 0;font-size:13px}
.lore-poster{height:180px;border-radius:18px;background-size:cover;background-position:center;box-shadow:var(--sh-2)}
body.reduced-motion .hero-stage .pedestal{animation:none}

/* ---------- Skill Card ---------- */
.skc{--ec:#9AA3AE;--rc:#9AA3AE;display:flex;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:8px 10px;margin:6px 0;box-shadow:inset 4px 0 0 var(--ec),var(--sh-1)}
.skc-ic{width:46px;height:46px;flex:0 0 auto}
.skc b{display:block}.skc small{display:block;font-size:11px}.skc-st{color:#3A2400;font-weight:800}.skc-note{color:#8A5A00;font-weight:800}
.skc.on{box-shadow:inset 4px 0 0 var(--ec),0 0 0 2px #5ED3B0,var(--sh-1)}.skc.lock{opacity:.8;background:#F7F4EC}
.skc .btn.on{background:#E9FBF4;border-color:#5ED3B0}

/* ---------- Leaderboard ---------- */
.lb-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.lb-tabs button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;background:#fff;border-radius:14px;padding:6px 10px;font-size:11px;font-weight:800;box-shadow:var(--sh-1);min-width:74px;min-height:44px}
.lb-tabs button i{font-style:normal;font-size:18px}.lb-tabs button.on{background:#FFF1CC;box-shadow:0 0 0 2px #FFB820}
.podium{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;align-items:end;margin:14px 0 6px}
.pod{position:relative;border-radius:22px 22px 14px 14px;padding:22px 6px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.pod.p1{background:linear-gradient(180deg,#FFF3C4,#FFD968);box-shadow:0 0 0 3px #F2B01E,0 10px 28px rgba(242,176,30,.45);min-height:220px;animation:podGlow 2.6s ease-in-out infinite}
.pod.p2{background:linear-gradient(180deg,#F4F6FA,#D6DCE6);box-shadow:0 0 0 3px #A9B4C4;min-height:180px}
.pod.p3{background:linear-gradient(180deg,#FFE9DA,#E8B690);box-shadow:0 0 0 3px #C9884E;min-height:160px}
.pod.empty{background:transparent}
.pod-medal{position:absolute;top:-16px;font-size:26px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.pod b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pod em{font-style:normal;font-weight:900;font-size:14px;color:#3A2400}.pod em small{font-size:10px}
.pod-pet{position:absolute;right:2px;bottom:34px;width:40px;height:40px}.pod.me{outline:3px dashed #28A98A}
@keyframes podGlow{50%{box-shadow:0 0 0 3px #F2B01E,0 12px 36px rgba(242,176,30,.7)}}
body.reduced-motion .pod.p1{animation:none}

/* ---------- World Boss tiers ---------- */
.tier-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.tier{background:#fff;border-radius:14px;padding:8px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.tier small{font-size:11px;color:#7C6E55}.tier.t-mythic{background:linear-gradient(135deg,#F3E6FF,#FFE9C7)}.tier.t-diamond{background:#E9F6FF}.tier.t-platinum{background:#F2F6F8}.tier.t-gold{background:#FFF6D8}

/* ---------- Island selector ---------- */
.isl-card.cur i{box-shadow:0 0 0 2px #28A98A}
.isl-lockbar{background:#F1F0F6;border-radius:14px;padding:8px 12px;font-size:13px;color:#5A4A7A;margin-top:8px}
.island.locked{filter:grayscale(.55) brightness(.95)}

/* ---------- Pet scene: bỏ vật thể 2D, chỉ giữ VFX phát sáng ---------- */
.scene .deco{display:none}
.scene .aura-glow{position:absolute;left:50%;top:52%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--s2,#fff) 70%,#fff) 0%,color-mix(in srgb,var(--s1,#FFD84D) 55%,transparent) 38%,transparent 70%);filter:blur(6px);animation:auraPulse 4s ease-in-out infinite}
.scene .aura-rays{position:absolute;left:50%;top:52%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:0;pointer-events:none;opacity:.35;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--gc,#fff) 60%,#fff) 0deg 6deg,transparent 6deg 24deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%);animation:auraSpin 28s linear infinite}
.scene .aura-ring{position:absolute;left:50%;bottom:40px;width:62%;height:40px;transform:translateX(-50%);border-radius:50%;z-index:1;pointer-events:none;
  border:2px solid color-mix(in srgb,var(--s1,#FFD84D) 70%,#fff);box-shadow:0 0 18px color-mix(in srgb,var(--s1,#FFD84D) 80%,transparent),inset 0 0 14px color-mix(in srgb,var(--s1,#FFD84D) 60%,transparent);animation:auraRing 3s ease-out infinite}
.scene .aura-ring.r2{animation-delay:-1.5s}
@keyframes auraPulse{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.85}}
@keyframes auraSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes auraRing{0%{transform:translateX(-50%) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateX(-50%) scale(1.25);opacity:0}}
.hero-stage .pedestal{display:none}
body.reduced-motion .scene .aura-glow,body.reduced-motion .scene .aura-rays,body.reduced-motion .scene .aura-ring{animation:none}

/* Icon thay thế (Admin → Icon game) */
img.emo{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;object-fit:contain;margin:0 .05em}

/* Fix 2026-10-30: nút BẮT ĐẦU HÀNH TRÌNH tràn ngang trên mobile (.btn.big width:100% + margin 12px) */
#scr-intro #intro-cta{display:block;width:calc(100% - 24px);max-width:calc(100% - 24px);margin:0 12px calc(16px + env(safe-area-inset-bottom,0px));box-sizing:border-box;white-space:normal;flex:none}

/* PSprite — nhân vật chính anime (vs1104) */
.ps-prev{pointer-events:none}
.hh-char:has(.ps-prev){width:120px;height:120px;left:calc(50% - 84px);bottom:10px}
.cc2-preview .ps-prev{animation:float 3s ease-in-out infinite}
@keyframes psIdle{to{background-position:100% 0}}
.ps-anim,.cc2-preview .ps-anim{animation:psIdle 1.1s steps(6,jump-none) infinite}
.avx .ps-av{border-radius:inherit}
.cs-th .ps-prev,.cshop-prev .ps-prev{animation:none}
@keyframes psAura{to{background-position:100% 0}}
.ps-aura{pointer-events:none;opacity:.95;animation:psAura 1.2s steps(8,jump-none) infinite}
.ps-aura{inset:-12%!important;filter:saturate(1.7) brightness(1.15) drop-shadow(0 0 6px rgba(255,230,140,.6))}