/* base.css — reset, layout, components, responsive + biến symbol logo
   (tách NGUYÊN VĂN từ index.html L524–831, Phase 2/R2 — không đổi rule nào). */
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
    html,body{height:100%}
    body{background-color:var(--bg);background-image:radial-gradient(880px 420px at 50% -120px,var(--bgg1) 0%,transparent 68%),radial-gradient(620px 460px at -12% 108%,var(--bgg2) 0%,transparent 62%),radial-gradient(620px 460px at 112% 92%,var(--bgg3) 0%,transparent 62%),radial-gradient(var(--bgdot) 1px,transparent 1.4px);background-size:auto,auto,auto,26px 26px;background-attachment:fixed;color:var(--txt);font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;display:flex;justify-content:center;overscroll-behavior:none}
    #menu{width:100%;max-width:440px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px calc(24px + env(safe-area-inset-bottom));gap:0}
    #menuLogo{width:92px;height:92px;display:flex;align-items:center;justify-content:center;animation:logoFloat 4.2s ease-in-out infinite}
    #menuLogo svg{width:88px;height:88px;display:block;overflow:visible}
    @keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
    .lgTileA{fill:var(--symA,#7A4E33)}
    .lgTileB{fill:var(--symB,#CE8B52)}
    .lgLens{fill:var(--symL,#FFE9BE)}
    .lgTile{rx:calc(var(--r-logo,28px)*.5)}
    .lgPlay .lgAnA{animation:lgInA .5s cubic-bezier(.2,.8,.3,1) both}
    .lgPlay .lgAnB{animation:lgInB .5s cubic-bezier(.2,.8,.3,1) both}
    .lgPlay .lgAnL{animation:lgInL .4s .42s cubic-bezier(.25,1.4,.4,1) both;transform-origin:48px 50px}
    @keyframes lgInA{from{transform:translateX(-16px);opacity:0}to{transform:translateX(0);opacity:1}}
    @keyframes lgInB{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}
    @keyframes lgInL{0%{transform:scale(.55);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
    :root{--symA:#7A4E33;--symB:#3FA8C9;--symL:#FFE9BE}
    html.dark{--symA:#9C6B4A;--symB:#4FA3C9;--symL:#FFC85C}
    html[data-pal="night"]{--symA:#3E5C7A;--symB:#C08A2E;--symL:#FFE9BE}
    html[data-pal="pop"]{--symA:#EF4D7E;--symB:#14A3D6;--symL:#FFE9BE}
    html[data-pal="cozy"]{--symA:#C97A5A;--symB:#5FA8B8;--symL:#FFF0DC}
    html[data-pal="lime"]{--symA:#55913C;--symB:#199AB0;--symL:#F0FFDF}
    html[data-pal="tomato"]{--symA:#E0523F;--symB:#2E8F55;--symL:#FFE9C9}
    html[data-pal="cobalt"]{--symA:#2457E6;--symB:#E0821A;--symL:#FFE9CC}
    html[data-pal="violet"]{--symA:#8759F0;--symB:#FF8AC2;--symL:#FFF0D9}
    html[data-pal="coral"]{--symA:#F2485F;--symB:#17A6A3;--symL:#FFE9DC}
    html[data-pal="cafe"].dark{--symA:#9C6B4A;--symB:#4FA3C9;--symL:#FFC85C}
    html[data-pal="night"].dark{--symA:#5E82A6;--symB:#D9A455;--symL:#FFD98A}
    html[data-pal="pop"].dark{--symA:#FF6B9C;--symB:#1FA3DA;--symL:#FFDE7A}
    html[data-pal="cozy"].dark{--symA:#C98F6E;--symB:#6FB6C8;--symL:#FFD9A8}
    html[data-pal="lime"].dark{--symA:#4E9E63;--symB:#199AB0;--symL:#B7F34A}
    html[data-pal="tomato"].dark{--symA:#FF7A64;--symB:#2E9E68;--symL:#FFD9A0}
    html[data-pal="cobalt"].dark{--symA:#4C80FF;--symB:#E8862A;--symL:#FFDFAD}
    html[data-pal="violet"].dark{--symA:#9E7BF0;--symB:#F56FAE;--symL:#DFFF42}
    html[data-pal="coral"].dark{--symA:#FF7285;--symB:#17A6A3;--symL:#FFD98A}
    #menu h1{font-size:30px;font-weight:1000;margin-top:16px;letter-spacing:.2px}
    #menu h1 span{color:var(--gold)}
    #titleB::after{content:"";display:inline-block;width:.26em;height:.26em;margin-left:.24em;background:currentColor;border-radius:26%;transform:rotate(9deg) translateY(-.05em)}
    .menuTag{font-size:12.5px;color:var(--dim);font-style:italic;margin-top:7px;text-align:center;line-height:1.5;min-height:34px}
    .menuBtns{width:100%;max-width:330px;display:flex;flex-direction:column;gap:10px}
    .mbig{display:block;width:100%;text-align:center;background:var(--panel);border:1px solid var(--border);color:var(--txt);border-radius:var(--r-card);padding:17px 20px;font-size:17px;font-weight:800;cursor:pointer;letter-spacing:.2px;transition:transform .1s,border-color .15s;box-shadow:0 6px 16px var(--shB)}
    .mbig:active{transform:scale(.97);border-color:var(--green)}
    .mbig.primary{background:linear-gradient(180deg,var(--btn-g1),var(--btn-g2));border-color:var(--btn-g-bd);color:var(--btn-txt);font-size:18px;padding:19px}
    .mbig.danger{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger-tx)}
    .mbig small{display:block;font-weight:400;color:var(--dim);font-size:11px;margin-top:3px;letter-spacing:0}
    #menuLang{margin-top:14px;background:transparent;border:1px solid var(--border);color:var(--dim);border-radius:99px;padding:13px 24px;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px}
    #menuLang:active{transform:scale(.95)}
    #app{width:100%;max-width:440px;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:8px 10px calc(10px + env(safe-area-inset-bottom));overflow-y:auto}
    #app>*{flex:none}
    #app.appIn{animation:appFade .3s ease}
    @keyframes appFade{from{opacity:0;transform:translateY(8px)}}
    #topbar{display:flex;align-items:center;gap:8px;padding:2px 2px 9px}
    #titleBlock{flex:1;min-width:0}
    #waveChip{font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--dim2)}
    #waveTitle{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ibtn{width:52px;height:52px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--border);color:var(--txt);font-size:23px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px var(--shC)}
    .ibtn:active{transform:scale(.92)}
    #walletBox{flex:1.15;gap:2px}
    .walletRow{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;min-width:0}
    .walletRow.g{color:var(--gold)}
    .walletRow.d{color:var(--gem)}
    #goalCard{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:var(--r-card);padding:10px 14px;margin-bottom:8px;box-shadow:0 8px 20px var(--shD)}
    .goalTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
    .goalLabel{display:flex;gap:7px;align-items:center;min-width:0;font-size:12.5px;font-weight:700;letter-spacing:.2px}
    #mood{font-size:19px;line-height:1}
    #goalIcon{font-size:14px}
    #goalName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .goalPts{font-size:12px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
    .goalPts b{font-size:16px;color:var(--txt)}
    .goalPts .dim{color:var(--dim2)}
    #goalBarWrap{position:relative;height:13px;background:var(--track);border-radius:99px;overflow:hidden;border:1px solid var(--track-bd)}
    #goalBar{height:100%;border-radius:99px;transition:width .45s cubic-bezier(.2,.8,.2,1)}
    .ms{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:var(--ms);transform:translate(-50%,-50%);border:2px solid var(--ms-ring);transition:background .3s}
    .ms.done{background:var(--gold)}
    #storyText{min-height:33px;max-height:33px;overflow:hidden;margin-top:7px;font-size:10.5px;color:var(--dim);font-style:italic;line-height:1.55;opacity:0;transition:opacity .5s ease}
    #storyText.show{opacity:1}
    #board{flex:0 0 auto;margin:auto;width:100%;max-width:calc((100vh - 476px)*5/6 + 62px);max-width:calc((100dvh - 476px)*5/6 + 62px);display:grid;grid-template-columns:repeat(5,1fr);gap:9px;padding:12px;background:linear-gradient(180deg,var(--board-1),var(--board-2));border:1px solid var(--board-bd);border-radius:var(--r-board);box-shadow:inset 0 2px 10px var(--board-in),0 10px 26px var(--shE);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
    @media (max-height:760px){
      #board{max-width:calc((100vh - 452px)*5/6 + 54px);max-width:calc((100dvh - 452px)*5/6 + 54px);gap:6px;padding:9px}
    }
    @media (max-height:600px){
      #board{max-width:calc((100vh - 446px)*5/6 + 54px);max-width:calc((100dvh - 446px)*5/6 + 54px);gap:5px;padding:8px}
    }
    #adZone{flex:none;height:62px;display:flex;align-items:center;justify-content:center;overflow:hidden}
    #adCard{width:100%;max-width:350px;height:48px;display:flex;align-items:center;gap:9px;padding:0 6px 0 11px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:var(--r-card);box-shadow:0 4px 12px var(--shC)}
    #adCard[hidden]{display:none}
    .adIc{flex:none;font-size:19px;line-height:1}
    .adBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
    .adT{font-size:12.5px;font-weight:800;line-height:1.25;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .adD{font-size:10px;line-height:1.3;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #adCard .adD{display:none}
    #adCard .adT{font-size:15px}
    .adGo{flex:none;height:34px;padding:0 13px;border-radius:99px;background:var(--panel);border:1px solid var(--gold);color:var(--gold);font-size:11.5px;font-weight:800;white-space:nowrap;cursor:pointer;display:flex;align-items:center}
    .adGo:active{transform:scale(.94)}
    .adX{flex:none;width:40px;height:40px;margin-left:2px;border-radius:var(--r-ui);background:transparent;border:none;color:var(--dim2);font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center}
    .adX:active{transform:scale(.9)}
    .cell{position:relative;aspect-ratio:1;min-height:0;min-width:0;border-radius:var(--r-cell);background:linear-gradient(180deg,var(--cell-b),var(--cell));border:1px solid var(--cell-bd);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
    .cell.empty{background:var(--empty-bg);border:1px dashed var(--empty-bd);box-shadow:none}
    .cell.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--selRing),0 6px 14px var(--shA);transform:scale(1.06)}
    .cell.match{border-color:var(--green);background:linear-gradient(180deg,var(--match-1),var(--match-2));box-shadow:inset 0 0 0 2px var(--match-in)}
    .cell.target{border-color:var(--green);border-style:dashed;box-shadow:0 0 0 2px var(--match-in);transform:scale(1.08)}
    .cell.lucky{border-color:var(--green);box-shadow:0 0 12px var(--match-in)}
    .cell.tut{animation:tut 1.1s ease infinite}
    @keyframes tut{0%,100%{box-shadow:0 0 0 0 #d98e3200}50%{box-shadow:0 0 0 3px var(--gold);transform:scale(1.07)}}
    .cell.hintp{animation:hintPulse .6s ease-in-out infinite alternate;border:2px solid #ffca28!important;box-shadow:0 0 16px #ffca28, inset 0 0 10px #ffca28!important;background:rgba(255,202,40,0.25)!important;z-index:5}
    @keyframes hintPulse{0%{transform:scale(1.02);box-shadow:0 0 10px #ffca28, inset 0 0 6px #ffca28}100%{transform:scale(1.12);box-shadow:0 0 22px #ffca28, inset 0 0 14px #ffca28}}
    .item{font-size:clamp(18px,6vw,27px);line-height:1;flex-shrink:0;pointer-events:none;filter:drop-shadow(0 3px 5px var(--itemSh))}
    .iname{font-size:8.5px;color:var(--iname);text-align:center;line-height:1.15;max-width:100%;padding:0 3px;flex-shrink:0;pointer-events:none;overflow:hidden}
    .tier{position:absolute;top:3px;right:5px;font-size:7.5px;color:var(--tier);letter-spacing:-1px;pointer-events:none}
    /* v21: tên vật phẩm LUÔN hiển thị — màn thấp: tên 1 dòng (ellipsis), co chữ vừa ô
       (đặt SAU rule base để thắng cascade; màn cao >760 giữ nguyên hành vi wrap như cũ) */
    @media (max-height:760px){
      .iname{white-space:nowrap;text-overflow:ellipsis}
    }
    @media (max-height:640px){
      .cell{gap:1px}
      .item{font-size:clamp(15px,5vw,22px)}
      .iname{font-size:7.5px;white-space:nowrap;text-overflow:ellipsis}
    }
    @media (max-height:600px){
      .cell{gap:1px}
      .item{font-size:clamp(12px,4.2vw,17px)}
      .iname{font-size:6.5px;padding:0 2px;white-space:nowrap;text-overflow:ellipsis}
    }
    .cell.shake{animation:shk .3s}
    @keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
    .cell.spawned{animation:pop .35s ease}
    .cell.target.bad{border-color:var(--red);box-shadow:0 0 0 2px rgba(217,95,76,.25);background:linear-gradient(180deg,rgba(217,95,76,.10),rgba(217,95,76,.16))}
    .cell.mergedfx{animation:mergeglow .5s ease}
    @keyframes mergeglow{0%{box-shadow:0 0 0 0 var(--goldGlow)}55%{box-shadow:0 0 0 6px var(--goldGlow),0 6px 16px var(--shA);transform:scale(1.07)}100%{box-shadow:0 6px 14px var(--shB);transform:scale(1)}}
    #goalHint{margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.2px;color:var(--dim);text-align:center;line-height:1.35}
    .goalPts b{display:inline-block}
    #goalCur.bump{animation:goalBump .5s ease}
    @keyframes goalBump{0%{transform:scale(1)}35%{transform:scale(1.3);color:var(--gold)}100%{transform:scale(1)}}
    #modeLbl{font-size:13px;font-weight:700;color:var(--dim);text-align:right;line-height:1.3;padding-right:2px}
    .abtn.attn{animation:shopPulse .8s ease 2}
    @keyframes shopPulse{0%,100%{box-shadow:0 6px 14px var(--shB)}50%{box-shadow:0 0 0 4px var(--goldGlow),0 6px 14px var(--shB);border-color:var(--gold)}}
    #onbChip{width:100%;max-width:350px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 14px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1.5px solid var(--gold);border-radius:var(--r-card);box-shadow:0 0 0 3px var(--goldGlow),0 4px 12px var(--shC);font-size:12.5px;font-weight:700;color:var(--txt);text-align:center;line-height:1.4;animation:pop .35s ease}
    #onbChip[hidden]{display:none}
    @media (max-height:660px){#goalHint{display:none!important}}
    @keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
    #subRow{display:flex;gap:8px;align-items:center;justify-content:center;padding-top:9px;min-height:0}
    #subRow.off{display:none}
    #modeCancel{background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger-tx);border-radius:99px;padding:14px 26px;font-size:14px;line-height:1.2;font-weight:700;white-space:nowrap;cursor:pointer;min-height:48px}
    #footer{display:flex;gap:10px;padding-top:10px;justify-content:center}
    .statBox{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-ui);padding:7px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 14px var(--shB)}
    #statRow{display:flex;gap:8px;margin-bottom:8px}
    #movesBox{flex:1}
    #scoreBox{flex:1.9;min-width:0}
    .scoreRow{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
    #multChip{display:none;align-items:center;flex:none;background:linear-gradient(135deg,#f7b733,#e0831d);color:#fff;border-radius:99px;padding:3px 10px;font-size:12.5px;font-weight:800;line-height:1.2;letter-spacing:.3px;animation:multPulse 1s ease infinite}
    #multChip.show{display:inline-flex;animation:multIn .3s cubic-bezier(.2,.9,.3,1.4),multPulse 1s ease .3s infinite}
    #multChip.x2{background:linear-gradient(135deg,#ff8a3d,#e04b1a)}
    @keyframes multIn{from{transform:scale(.3);opacity:0}}
    @keyframes multPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
    .statNum{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
    #movesNum{color:var(--txt)}
    #movesNum.low{color:var(--red);animation:blink 1s infinite}
    @keyframes blink{50%{opacity:.35}}
    .statLbl{font-size:9.5px;letter-spacing:.2px;color:var(--dim2);font-weight:700;margin-top:2px;white-space:nowrap}
    .abtn{position:relative;width:56px;height:56px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--border);color:var(--txt);font-size:23px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px var(--shB);transition:transform .1s}
    .abtn:active{transform:scale(.92)}
    .abtn.on{background:var(--on-bg);border-color:var(--on-bd);color:var(--on-tx);box-shadow:0 0 14px var(--on-bd)}
    .badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:99px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg)}
    /* Phase 5 / BUG-04: .badge{display:flex} đè mất style [hidden] mặc định của UA -> bong bóng "0"
       hiện khi túi đồ rỗng (syncInvUI đặt hidden nhưng vô hiệu). Specificity .badge[hidden] (0,2,0) > .badge (0,1,0). */
    .badge[hidden]{display:none}
    .badge.cost{background:var(--gold)}
    .badge.zero{background:var(--soft);border:1px solid var(--soft-bd);color:var(--dim2)}
    .ibtn{position:relative}
    .ibtn .badge{top:-5px;right:-5px}
    .tcost{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);min-width:24px;height:13px;border-radius:99px;background:var(--tcost-bg);border:1px solid var(--tcost-bd);color:var(--tcost-tx);font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px}
    .ghost{position:fixed;z-index:70;font-size:36px;transform:translate(-50%,-55%);pointer-events:none;filter:drop-shadow(0 6px 10px var(--ghostSh))}
    .float{position:fixed;font-weight:800;font-size:18px;z-index:75;pointer-events:none;animation:fup 1s cubic-bezier(.2,.7,.3,1) forwards;text-shadow:0 2px 6px var(--float-sh),0 0 14px var(--float-sh)}
    @keyframes fup{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-52px)}}
    .burstP{position:fixed;z-index:78;font-size:22px;pointer-events:none;animation:bp 1.15s ease-out forwards;filter:drop-shadow(0 4px 8px var(--itemSh))}
    @keyframes bp{from{opacity:1;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-230%) scale(1.3) rotate(var(--r,0deg))}}
    #flash{position:fixed;inset:0;background:#fff;z-index:95;opacity:0;pointer-events:none}
    #flash.go{animation:fb .6s ease-out}
    #critflash{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,#d98e32cc,#d98e3211 45%,transparent 70%);z-index:94;opacity:0;pointer-events:none}
    #critflash.go{animation:fb .75s ease-out}
    @keyframes fb{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
    body.shake{animation:bshake .5s}
    @keyframes bshake{0%,100%{transform:translate(0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-3px)}80%{transform:translate(4px,2px)}}
    #toastWrap{position:fixed;left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:5px;z-index:60;pointer-events:none;width:min(86vw,330px)}
    .toast{background:var(--toast-bg);border:1px solid var(--border);border-left:3px solid var(--blue);color:var(--txt);padding:10px 13px;border-radius:var(--r-cell);font-size:12.5px;line-height:1.4;box-shadow:0 8px 22px var(--shF);animation:tin .28s cubic-bezier(.2,.9,.3,1.2);transition:opacity .3s,transform .3s}
    .toast.big{border-left-color:var(--green);background:var(--toast-big);border-color:var(--toast-big-bd)}
    .toast.disc{border-left-color:var(--gold);background:var(--toast-disc);border-color:var(--toast-disc-bd);color:var(--toast-disc-tx);font-weight:700}
    .toast.bad{border-left-color:var(--red);background:var(--toast-bad);border-color:var(--toast-bad-bd);color:var(--toast-bad-tx)}
    .toast.amb{border-left-color:var(--dim2)}
    @keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
    #overlay{position:fixed;inset:0;background:var(--ovl,#43331fd9);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:90;padding:18px}
    #overlay.show{display:flex;animation:fadein .2s}
    @keyframes fadein{from{opacity:0}}
    #modal{background:linear-gradient(180deg,var(--modal-1),var(--modal-2));border:1px solid var(--border);border-radius:var(--r-modal);padding:20px;width:100%;max-width:390px;max-height:86vh;overflow-y:auto;box-shadow:0 24px 60px var(--modalSh);animation:mpop .25s cubic-bezier(.2,.9,.3,1.15)}
    @keyframes mpop{from{opacity:0;transform:scale(.92) translateY(10px)}}
    #modal h2{display:flex;align-items:center;gap:8px;font-size:16.5px;margin-bottom:10px}
    .mdesc{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:13px}
    .mdesc b{color:var(--txt)}
    .mbtn{display:block;width:100%;text-align:left;background:var(--mbtn);color:var(--txt);border:1px solid var(--mbtn-bd);border-radius:var(--r-ui);padding:15px 17px;margin-bottom:9px;font-size:15px;cursor:pointer;transition:transform .1s,border-color .15s;min-height:50px}
    .mbtn:active{transform:scale(.97);border-color:var(--green)}
    .mbtn.primary{background:linear-gradient(180deg,var(--btn-g1),var(--btn-g2));border-color:var(--btn-g-bd);color:var(--btn-txt);font-weight:700}
    .mbtn.danger{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger-tx)}
    .mbtn small{display:block;color:var(--dim);font-size:12.5px;margin-top:4px;line-height:1.45;font-weight:400}
    .mclose{display:block;width:100%;text-align:center;background:var(--mbtn);color:var(--txt);border:1px solid var(--mbtn-bd);border-radius:var(--r-ui);padding:15px 17px;margin:14px 0 2px;font-size:15px;font-weight:800;letter-spacing:.2px;cursor:pointer;min-height:50px;transition:transform .1s,border-color .15s}
    .mclose:active{transform:scale(.97);border-color:var(--green)}
    .setLabel{font-size:11.5px;font-weight:800;color:var(--dim2);letter-spacing:.3px;margin:13px 2px 7px}
    .credits{background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:9px 12px 10px;margin:0 0 10px;display:flex;flex-direction:column;gap:4px}
    .crRow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px;min-width:0}
    .crRow span{color:var(--dim);font-weight:600;flex-shrink:0}
    .crRow b{font-weight:800;color:var(--txt);letter-spacing:.2px;text-align:right;overflow-wrap:anywhere}
    .crVer{text-align:center;font-size:10.5px;font-weight:700;color:var(--dim2);margin-top:3px;letter-spacing:.3px}
    .crLinks{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:5px;font-size:11px}
    .crLinks a{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-color:#d98e3255;cursor:pointer}
    .crLinks a:active{opacity:.6}
    .crLinks span{color:var(--dim2)}
    .legalWrap{border:1px solid var(--border);border-radius:var(--r-ui);overflow:hidden;background:#fffdf8;margin:2px 0 12px}
    .legalFrame{display:block;width:100%;height:min(60vh,600px);border:0;background:#fffdf8}
    .styleGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:2px}
    .styleCard{position:relative;display:flex;flex-direction:column;gap:7px;background:var(--mbtn);border:2px solid var(--mbtn-bd);border-radius:var(--r-ui);padding:11px 12px;cursor:pointer;transition:transform .1s,border-color .15s}
    .styleCard:active{transform:scale(.97)}
    .styleCard.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--selRing)}
    .scPrev{display:flex;gap:5px;align-items:flex-end;height:32px;padding-right:16px}
    .scPrev i{display:block;border:1px solid var(--border);background:var(--panel)}
    .scPrev .spA{width:16px;height:16px}
    .scPrev .spB{width:25px;height:25px;background:var(--cell-b);border-color:var(--cell-bd)}
    .scPrev .spC{width:46px;height:27px;background:linear-gradient(180deg,var(--btn-g1),var(--btn-g2));border-color:var(--btn-g-bd)}
    .palGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:2px}
    .palCard{position:relative;display:flex;flex-direction:column;gap:7px;background:var(--mbtn);border:2px solid var(--mbtn-bd);border-radius:var(--r-ui);padding:11px 12px;cursor:pointer;transition:transform .1s,border-color .15s}
    .palCard:active{transform:scale(.97)}
    .palCard.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--selRing)}
    .palCard.sel .scCheck{display:block}
    .pcPrev{display:block;position:relative;height:42px;border-radius:var(--r-ui);overflow:hidden;border:1px solid var(--border)}
    .pcPrev i{display:block;position:absolute}
    .pcPrev .pcSur{left:8px;top:7px;width:46%;height:28px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
    .pcPrev .pcAcc{right:10px;top:8px;width:18px;height:8px;border-radius:4px}
    .pcPrev .pcBtn{right:8px;bottom:8px;width:36%;height:16px;border-radius:8px}
    .scName{font-size:12.5px;font-weight:800;color:var(--txt);line-height:1.25;min-height:32px;text-align:left}
    .scCheck{position:absolute;top:8px;right:9px;font-size:13px;color:var(--gold);display:none}
    .styleCard.sel .scCheck{display:block}
    .segWrap{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--track);border:1px solid var(--track-bd);border-radius:var(--r-ui);padding:5px;margin-bottom:10px}
    .segBtn{border:0;background:transparent;color:var(--dim);border-radius:var(--r-seg);padding:11px 6px;font-size:13.5px;font-weight:800;cursor:pointer;min-height:50px}
    .segBtn.sel{background:var(--panel);color:var(--txt);box-shadow:0 2px 8px var(--shC)}
    .qcard{position:relative;background:linear-gradient(135deg,var(--modal-1),var(--panel2));border:1px solid var(--soft-bd);border-left:4px solid var(--gold);border-radius:var(--r-ui);padding:13px 15px 13px 46px;margin:2px 0 14px;animation:qin .5s ease}
    @keyframes qin{from{opacity:0;transform:translateY(6px)}}
    .qic{position:absolute;left:15px;top:13px;font-size:17px;filter:drop-shadow(0 2px 4px var(--itemSh))}
    .qtext{font-size:13.5px;line-height:1.65;font-style:italic;color:var(--qtext-tx)}
    .qtext b{color:var(--gold)}
    .stars{font-size:34px;color:var(--gold);text-align:center;margin:8px 0 14px;letter-spacing:5px;animation:starpop .5s cubic-bezier(.2,.9,.3,1.4)}
    @keyframes starpop{from{transform:scale(.4);opacity:0}}
    .srow{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--dim);padding:7px 0;border-bottom:1px dashed var(--hair)}
    .srow b{color:var(--txt);font-variant-numeric:tabular-nums;text-align:right}
    .srow.big{font-size:16px;border:0;margin-top:6px;color:var(--gold);font-weight:800;align-items:baseline}
    .sumDetails{background:var(--sumbg);border:1px solid var(--soft-bd);border-radius:var(--r-cell);margin:10px 0 12px}
    .sumDetails summary{padding:14px 15px;font-size:13.5px;font-weight:700;color:var(--dim);cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;min-height:48px}
    .sumDetails summary::-webkit-details-marker{display:none}
    .sumDetails summary::before{content:'▸';color:var(--dim2);transition:transform .2s;display:inline-block}
    .sumDetails[open] summary::before{transform:rotate(90deg)}
    .sumDetails .srow{margin:0 14px}
    .sumDetails .srow:last-of-type{border-bottom:0;padding-bottom:12px}
    .cxstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
    .cxstats div{background:var(--sumbg);border:1px solid var(--soft-bd);border-radius:var(--r-ui);padding:8px 6px;text-align:center}
    .cxstats b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
    .cxstats i{display:block;font-style:normal;font-size:9.5px;color:var(--dim2);margin-top:2px;letter-spacing:.2px;font-weight:700}
    .dpRow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sumbg);border:1px solid var(--soft-bd);border-radius:var(--r-ui);padding:10px 12px;margin-bottom:6px;font-size:13px;min-height:42px}
    .dpRow span{color:var(--dim);font-weight:600;flex-shrink:0}
    .dpRow b{text-align:right;font-variant-numeric:tabular-nums}
    .cxcat{font-size:11.5px;font-weight:700;margin:14px 0 5px;letter-spacing:.3px;display:flex;align-items:center;gap:6px}
    .cxcat::after{content:'';flex:1;height:1px;background:var(--hair)}
    details.cxdet{margin:8px 0}
    details.cxdet summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:12px 12px;background:var(--sumbg);border:1px solid var(--soft-bd);border-radius:var(--r-cell);color:var(--txt);min-height:46px;-webkit-tap-highlight-color:transparent}
    details.cxdet summary::-webkit-details-marker{display:none}
    details.cxdet summary .cxcount{margin-left:auto;color:var(--dim);font-weight:700;font-size:11.5px;font-variant-numeric:tabular-nums}
    details.cxdet summary::after{content:'▾';color:var(--dim);font-size:11px}
    details.cxdet[open] summary::after{content:'▴'}
    details.cxdet[open]{margin-bottom:4px}
    details.cxdet summary:active{border-color:var(--green)}
    .cxrow{font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--hair2);color:var(--txt)}
    .cxrow .q{color:var(--cxq)}
    .achHead{background:linear-gradient(135deg,var(--modal-1),var(--panel2));border:1px solid var(--soft-bd);border-radius:var(--r-card);padding:14px 16px;text-align:center;margin-bottom:13px}
    .achRank{font-size:17px;font-weight:800;color:var(--gold)}
    .achSub{font-size:10.5px;color:var(--dim);margin-top:4px}
    .achBarWrap{height:9px;background:var(--track);border-radius:99px;overflow:hidden;margin-top:10px}
    .achBar{height:100%;background:var(--gold);border-radius:99px;transition:width .5s}
    .achRow{display:flex;gap:11px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--hair2)}
    .achIc{width:42px;height:42px;border-radius:var(--r-ui);background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;filter:grayscale(.7);opacity:.55}
    .achRow.done .achIc{filter:none;opacity:1;border-color:var(--achv-bd)}
    .achBody{flex:1;min-width:0}
    .achCatName{font-size:12px;font-weight:700}
    .achMile{font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.4}
    .achMile b{color:var(--gold)}
    .achProg{font-size:10px;color:var(--dim2);font-variant-numeric:tabular-nums;flex:none;font-weight:700;text-align:right;line-height:1.3}
    .achProg b{font-size:13px;color:var(--txt)}
    .achProg i{font-style:normal;opacity:.75}
    .achRow.done .achProg b{color:var(--gold)}
    .shopBal{display:flex;gap:8px;margin:2px 0 10px}
    .shopBal .balChip{flex:1;background:var(--soft);border:1px solid var(--soft-bd);border-radius:var(--r-cell);padding:8px 10px;text-align:center;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
    .shopBal .balChip.gold{color:var(--tcost-tx)}
    .shopBal .balChip.gem{color:var(--gem)}
    .shopSec{font-size:11.5px;font-weight:700;margin:12px 0 7px;letter-spacing:.3px;display:flex;align-items:center;gap:6px;color:var(--dim)}
    .shopSec::after{content:'';flex:1;height:1px;background:var(--hair)}
    .shopGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
    .shopCard{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-ui);padding:12px 8px 10px;cursor:pointer;transition:transform .1s,border-color .15s;box-shadow:0 4px 12px var(--shC);text-align:center}
    .shopCard:active{transform:scale(.96)}
    .shopCard .shopIc{font-size:27px;line-height:1.25;filter:drop-shadow(0 3px 5px var(--itemSh))}
    .shopCard .shopName{font-size:12.5px;font-weight:700;color:var(--txt)}
    .shopCard .shopDesc{font-size:10px;color:var(--dim);line-height:1.35;min-height:27px;display:flex;align-items:center}
    .shopCard .shopBuy{margin-top:6px;background:var(--buy-bg);border:1px solid var(--buy-bd);color:var(--buy-tx);border-radius:99px;padding:7px 14px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
    .shopCard.poor{opacity:.62}
    .shopCard.poor .shopBuy{background:var(--poor-bg);border-color:var(--poor-bd);color:var(--danger-tx)}
    .shopCard.soon{border-style:dashed;cursor:default;opacity:.8}
    .shopCard.soon:active{transform:none}
    .shopCard.soon .shopBuy{background:var(--soon-bg);border-color:var(--soon-bd);color:var(--soon-tx)}
    .shopCard.own{border-style:dashed;opacity:.9}
    .shopCard.own .shopBuy{background:var(--soon-bg);border-color:var(--soon-bd);color:var(--soon-tx)}
    .shopNote{font-size:10px;color:var(--dim2);line-height:1.5;margin:8px 2px 0;text-align:center}
    @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

    /* ===== BJ-REFERRAL-001: Mời bạn bè — màn mời (chỉ dùng biến theme sẵn — tự ăn light/dark) ===== */
    .invMsg{font-size:13px;line-height:1.55}
    .invGrid .shopCard .shopBuy{min-width:64px}
    .invCodeBox{display:flex;justify-content:center;background:var(--soft);border:1.5px dashed var(--tcost-bd);border-radius:var(--r-ui);padding:13px 10px;margin:2px 0 10px}
    .invCode{font-size:23px;font-weight:900;letter-spacing:2.5px;color:var(--tcost-tx);font-variant-numeric:tabular-nums}
    .invCode.dim{color:var(--dim);font-size:14px;letter-spacing:.5px;font-weight:700}
    .invBtnRow{display:flex;gap:9px}
    .invHowto{margin-top:9px;font-size:11.5px;text-align:center}
    .invEnterRow{display:flex;gap:8px}
    .invInput{flex:1.6;min-width:0;background:var(--panel2);border:1.5px solid var(--soft-bd);border-radius:var(--r-ui);color:var(--txt);font-family:inherit;font-size:16px;font-weight:800;letter-spacing:1.5px;padding:12px 14px;min-height:50px;text-transform:uppercase}
    .invInput:focus{outline:none;border-color:var(--gold)}
    .invEnterStatus{font-size:12px;color:var(--dim);min-height:18px;margin:7px 2px 0;font-weight:600}
    .invStatRow{display:flex;gap:8px}
    .invStat{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-ui);padding:10px 6px;text-align:center}
    .invStat b{display:block;font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}
    .invStat span{font-size:10px;color:var(--dim);line-height:1.3;display:block;margin-top:3px}
    .invLegend{font-size:10px;color:var(--dim2);text-align:center;margin:8px 2px 0;line-height:1.5}