/* Thành phần dùng chung v1.0: nút ≥44px, ví, thẻ, thanh tiến độ, tag */
.btn{min-height:var(--touch);min-width:var(--touch)}
.btn.sm{min-height:36px;padding:6px 10px;font-size:var(--t-sm)}
.btn.busy{opacity:.6;pointer-events:none;position:relative}
.btn.busy::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:sp 1s linear infinite}
.wallet{display:flex;gap:8px;flex-wrap:wrap}
.wallet span{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 14px;font-size:var(--t-md);font-weight:800}
.w-gold{background:var(--c-gold-bg);color:var(--c-gold-ink)}.w-dia{background:var(--c-dia-bg);color:var(--c-dia-ink)}
.tag{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:var(--t-xs);font-weight:800;background:#F1EAD8;color:#6B5A36;margin:2px}
.tag.ok{background:#DFF6EC;color:#1E7D62}
.good{color:var(--c-good);font-weight:800}.lack{color:#C0533A;font-weight:800;font-size:var(--t-xs);display:block;margin-top:4px}
.ico.sm{width:22px;height:22px;display:inline-block;vertical-align:middle}
.row.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:6px}
:focus-visible{outline:3px solid #2F80ED;outline-offset:2px}
/* Cửa hàng 2.0 */
.shop-head{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#F4FAF6;border:1px solid #D6E8DD;border-radius:var(--r-lg);padding:10px;position:sticky;top:0;z-index:5}
.shop-row,.craft-row{display:flex;gap:12px;align-items:center;background:#FAFBF8;border:1px solid #E6E8E0;border-radius:var(--r-lg);padding:12px}
.shop-row .ico,.craft-row .ico{width:64px;height:64px;flex:none;border-radius:16px;background:#fff;display:grid;place-items:center}
.shop-row small,.craft-row small{display:block}.shop-buy{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:110px}
.ings{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.ing{font-size:var(--t-xs);border-radius:999px;padding:2px 8px;background:#EFF7EF}.ing.miss{background:#FDECE8;color:#A33}
/* Thành tựu */
.ach-list{display:flex;flex-direction:column;gap:8px}
.ach,.disc,.exp-run{display:flex;gap:10px;align-items:center;background:#fff;border-radius:var(--r-lg);padding:10px 12px;box-shadow:var(--sh-1)}
.ach.done{box-shadow:0 0 0 2px #5ED3B0,var(--sh-1)}.ach.claimed{opacity:.72}
.ach-ic{width:44px;height:44px;flex:none;border-radius:14px;background:#FFF1CC;display:grid;place-items:center;font-size:24px}
.ach small,.disc small{display:block}
/* Gắn kết & ký ức */
.bond .bond-bar i{background:linear-gradient(90deg,#FF9AB5,#E0567B)}.bond-un{margin:6px 0}
.timeline{display:flex;flex-direction:column;gap:0;border-left:3px solid #F1E4C8;margin-left:18px;padding-left:10px}
.tl-item{display:flex;gap:10px;align-items:center;padding:6px 0;position:relative}.tl-item small{display:block;color:var(--c-muted)}
.tl-ic{width:32px;height:32px;margin-left:-28px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);display:grid;place-items:center;flex:none}
.guide{display:grid;grid-template-columns:1fr;gap:4px;text-align:left;background:#FFF9EE;border-radius:16px;padding:10px;margin:8px 0}
.g-row{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-sm)}.g-row span{color:var(--c-muted)}
/* Thông thạo */
.mastery .big-pct{font-size:28px;font-weight:900;color:var(--c-good)}.m-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.m-stats span{background:#F4F1E8;border-radius:999px;padding:4px 10px;font-size:var(--t-xs)}
.disc.found .ach-ic{background:#DFF6EC}
/* Thám hiểm */
.exp-run.ready{box-shadow:0 0 0 2px #5ED3B0,var(--sh-1)}.exp-run small{display:block}
.exp-dests{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.exp-dest{background:#fff;border-radius:18px;padding:10px;text-align:left;border:2px solid transparent;box-shadow:var(--sh-1)}.exp-dest small{display:block;color:var(--c-muted)}.exp-dest.on{border-color:var(--c-primary);background:#FFF6DA}
/* Sự kiện */
.ev-hero{border-radius:var(--r-xl);padding:18px;background:linear-gradient(135deg,#3B2E7A,#C0533A);background-size:cover;color:#fff;text-align:center;box-shadow:var(--sh-2)}
.ev-hero h3{color:#fff;margin:4px 0}.ev-hero p{opacity:.9;font-size:var(--t-sm)}.ev-ic{font-size:44px}
.ev-bar{position:relative;height:22px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden;margin:10px 0 6px}
.ev-bar i{display:block;height:100%;background:linear-gradient(90deg,#FFD968,#FF9A1F)}.ev-bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--t-xs);font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.ev-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.ev-points span{background:#FFF1CC;border-radius:999px;padding:3px 10px;font-size:var(--t-xs)}
.item-row.me{box-shadow:0 0 0 2px var(--c-primary)}.rk{width:34px}
/* Nhà */
.home-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.home-floor{position:relative;height:340px;border-radius:var(--r-xl);overflow:hidden;background:var(--floor);background-size:cover;box-shadow:inset 0 -30px 60px rgba(0,0,0,.06),var(--sh-2);touch-action:none}
.home-floor::before{content:"";position:absolute;inset:34% -20% -40%;background:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 22px,transparent 22px 44px),repeating-linear-gradient(-45deg,rgba(0,0,0,.04) 0 22px,transparent 22px 44px);transform:perspective(500px) rotateX(55deg);transform-origin:top}
.home-wall{position:absolute;left:0;right:0;top:0;height:32%;background:var(--wall);border-bottom:6px solid rgba(0,0,0,.08)}
.home-floor.edit{outline:3px dashed var(--c-primary);outline-offset:-6px}
.hitem{position:absolute;width:72px;height:72px;padding:0;background:none;border:0;transform-origin:50% 90%;filter:drop-shadow(0 6px 4px rgba(0,0,0,.18))}
.hitem .svg,.hitem img{width:100%;height:100%}.hitem.sel{outline:3px solid #2F80ED;border-radius:12px}
.hpet{position:absolute;width:70px;height:70px;transform:translate(-50%,-90%);animation:hwalk 9s ease-in-out infinite;z-index:60}
@keyframes hwalk{0%,100%{margin-left:0}50%{margin-left:60px}}
.home-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;border-radius:999px;padding:4px 12px;font-size:var(--t-xs);z-index:200}
.decor-inv{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}.decor{flex:none;width:92px;background:#fff;border-radius:16px;padding:6px;border:2px solid transparent;box-shadow:var(--sh-1)}
.decor .svg,.decor img{width:56px;height:56px;display:block;margin:0 auto}.decor small{font-size:10px}.decor.on{border-color:var(--c-primary)}
.home-up{display:flex;flex-direction:column;gap:6px}.home-selbar{flex-wrap:wrap}
.reduced-motion *{animation-duration:.001ms!important;transition-duration:.001ms!important}
/* Character Creator 2.0 */
#scr-create{background:#F6F0F8;overflow:auto}
.cc2{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:0;min-height:100%;max-width:1200px;margin:0 auto;padding:16px;width:100%}
.cc2-stage{background:#EAF6EC;border-radius:var(--r-xl) 0 0 var(--r-xl);padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.cc2-head{align-self:stretch}.cc2-head h2{margin:0;font-size:28px;letter-spacing:.02em;text-transform:uppercase}
.cc2-preview{width:100%;max-width:300px;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:var(--sh-2);display:grid;place-items:center;padding:20px}
.cc2-preview svg{width:100%;height:100%;animation:float 3s ease-in-out infinite}
.cc2-name{background:#fff;border-radius:18px;padding:10px 20px;font-size:22px;min-width:60%;text-align:center}
.cc2-name-in{text-align:center;font-size:20px;font-weight:800;border-radius:18px;max-width:320px}
.cc2-rand{background:linear-gradient(180deg,#FFE27A,#FFD84D);max-width:320px}
.cc2-panel{background:#fff;border-radius:0 var(--r-xl) var(--r-xl) 0;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-1);min-width:0}
.cc2-cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.cc2-cats::-webkit-scrollbar{display:none}
.cc2-cats button{flex:none;border-radius:999px;padding:8px 14px;background:#F2F4EF;font-weight:800;min-height:var(--touch)}.cc2-cats button.on{background:#DFF3E4;box-shadow:inset 0 0 0 2px #7CC08D}
.cc2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;align-content:start;flex:1;overflow:auto;max-height:52vh}
.cc2-opt{background:#F5F7F3;border:2px solid #E1E6DC;border-radius:18px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:var(--touch)}
.cc2-opt.on{background:#E3F6E7;border-color:#7CC08D}.cc2-opt.lock{opacity:.5}
.cc2-opt.txt{align-items:flex-start;text-align:left}.cc2-opt small{font-size:12px;font-weight:700;color:var(--c-muted)}
.cc2-th{width:84px;height:84px}.cc2-th svg{width:100%;height:100%}
.cc2-sw{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:1px solid rgba(0,0,0,.2)}
.cc2-foot{background:#F6F8F4;border-radius:var(--r-lg);padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.cc2-sum small,.cc2-sum b{display:block}.cc2-foot .err{flex-basis:100%;margin:0}
@media (max-width:800px){.cc2{grid-template-columns:1fr;padding:10px}.cc2-stage{border-radius:var(--r-xl) var(--r-xl) 0 0}.cc2-panel{border-radius:0 0 var(--r-xl) var(--r-xl)}.cc2-preview{max-width:200px}.cc2-grid{max-height:none}}
.ing .ico.sm,.exp-dest .ico.sm{width:18px!important;height:18px!important;min-width:0;background:none;box-shadow:none;border-radius:0}.ing .ico.sm .svg,.ing .ico.sm img{width:100%;height:100%}