/* Đế Chế Gen Z — giao diện phố Hoa Sữa (pastel, ấm, bo tròn) */
:root{
  --bg:#f1edff; --bg2:#e4dcff; --card:#ffffff; --card2:#fff;
  --ink:#1c1830; --ink2:#3a3358; --muted:#6c6590; --line:#d6cdf5; --line2:#1c1830;
  --pri:#5b34f2; --pri2:#7a5cff; --pri-soft:#e6e0ff; --accent:#5b34f2; --accent-soft:#e6e0ff;
  --lime:#c8f53a; --sun:#ffd23f; --cyan:#3fd8ff; --hot:#ff3d8b;
  --good:#16935a; --good-soft:#d9f7e6; --warn:#b86e00; --warn-soft:#fff1cc; --bad:#e0263b; --bad-soft:#ffe0e3;
  --r-sm:8px; --r:14px; --r-lg:18px; --pill:999px;
  --sh:3px 3px 0 var(--ink);
  --sh-pop:6px 6px 0 var(--ink);
  --top:60px; --dock:68px; --rail:88px; --side:clamp(300px,26vw,380px);
  --safe-b:env(safe-area-inset-bottom,0px);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{background:radial-gradient(circle at 1px 1px,rgba(28,24,48,.13) 1.2px,transparent 1.6px) 0 0/18px 18px,var(--bg);-webkit-tap-highlight-color:transparent;font-size:15px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,select,textarea{font:inherit;color:inherit}
kbd{font:700 11px/1 inherit;background:#fff;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;padding:2px 5px}
[hidden]{display:none!important}
.muted{color:var(--muted)} .small{font-size:13px}

/* ---------- khung ---------- */
.app{display:grid;height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--top) 1fr var(--dock);grid-template-areas:"top" "play" "dock"}
.topbar{grid-area:top;display:flex;align-items:center;gap:10px;padding:0 12px;background:rgba(253,243,234,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:5}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--pri-soft);font-size:20px;box-shadow:inset 0 -2px 0 rgba(200,51,106,.15)}
.brand-text{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.brand-text b{font-weight:900;font-size:15px;color:var(--pri)} .brand-text small{color:var(--muted);font-size:11px;font-weight:600}
.chips{margin-left:auto;min-width:0;display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:var(--pill);background:var(--card2);border:1px solid var(--line);font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 1px 0 rgba(110,60,40,.06)}
.chip b{font-weight:800}
.chip.ghost{background:transparent}
.chip-clock{background:var(--pri-soft);border-color:#f6c6d6;color:#8d2450}
.chip-energy.low{background:var(--bad-soft);border-color:#f4b8af;color:var(--bad)}
.chip.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.12)}}
.rail{grid-area:rail;display:none}
.side{grid-area:side;display:none}

.play{grid-area:play;display:flex;flex-direction:column;min-height:0;padding:8px 10px 4px}
.play-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.shop-pill{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 6px;border-radius:var(--pill);background:var(--card2);border:1px solid var(--line);box-shadow:var(--sh);min-width:0;flex:0 1 auto}
@media (max-width:480px){.shop-pill{flex:1 0 186px;max-width:64%}}
.shop-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);font-size:18px}
.shop-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left;min-width:0}
.shop-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.shop-txt small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:700}
.caret{color:var(--muted);font-size:12px}
.play-tools{margin-left:auto;display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.play-tools::-webkit-scrollbar{display:none}
.play-tools>*{flex:none}
.hint{margin:4px 0 0;text-align:center;font-size:11.5px;color:var(--muted);font-weight:600}
@media (hover:none),(max-width:600px){.hint .kb{display:none}}

/* ---------- phiếu order ---------- */
.tickets{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;min-height:74px;scrollbar-width:thin;scroll-snap-type:x proximity}
.ticket{flex:0 0 auto;min-width:150px;max-width:230px;background:var(--card2);border:1.5px solid var(--line);border-radius:14px;padding:7px 10px 8px;box-shadow:var(--sh);text-align:left;scroll-snap-align:start;position:relative}
.ticket.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),var(--sh)}
.ticket .who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;margin-bottom:4px}
.ticket .who .fav{font-size:10px;background:#fff1c7;color:#8a5a14;border-radius:var(--pill);padding:1px 6px}
.ticket .bar{height:5px;border-radius:9px;background:#f2e6db;overflow:hidden;margin-top:6px}
.ticket .bar i{display:block;height:100%;border-radius:9px;background:#5cc283;transition:width .3s linear}
.ticket .bar i.mid{background:#f2b33d} .ticket .bar i.low{background:#e5534b}
.steps{display:flex;flex-wrap:wrap;gap:4px}
.step{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;background:#faf3ec;border-radius:8px;padding:2px 6px;color:var(--ink2)}
.step.done{background:var(--good-soft);color:var(--good);text-decoration:line-through;text-decoration-thickness:1.5px}
.ticket .sym{font-size:12px;font-weight:700;color:var(--ink2)}
.ticket.info{display:flex;align-items:center;gap:10px;flex:0 0 100%;min-width:0;max-width:none;line-height:1.35;background:linear-gradient(135deg,#fffaf5,var(--accent-soft));font-size:13px;font-weight:600;color:var(--ink2)}
.ticket.info b{color:var(--ink)}

/* ---------- sân khấu ---------- */
.stage{position:relative;flex:1;min-height:0;border-radius:var(--r-lg);overflow:hidden;background:#f1dfcd;box-shadow:inset 0 0 0 1.5px var(--line2),var(--sh);touch-action:none;user-select:none}
.stage canvas{display:block;position:absolute;inset:0;cursor:pointer}
.cta{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:min(92%,380px)}
.cta .btn{width:100%}
.cta small{background:rgba(255,250,245,.92);padding:3px 10px;border-radius:var(--pill);font-weight:700;color:var(--ink2);font-size:12px}
.tray{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 12px;box-shadow:var(--sh);font-size:12.5px;font-weight:700}
.tray .lbl{color:var(--muted);font-size:11px;white-space:nowrap}
.tray .items{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.tray .btn{height:32px;padding:0 10px;font-size:12px}

.popover{position:absolute;z-index:4;transform:translate(-50%,-100%);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-pop);padding:8px;display:flex;flex-direction:column;gap:6px;min-width:168px;animation:pop .14s ease-out}
.popover::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.popover.below{transform:translate(-50%,0)}
.popover.below::after{top:-7px;bottom:auto;transform:translateX(-50%) rotate(225deg)}
.popover h4{margin:0 4px 2px;font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.opt{display:flex;align-items:center;gap:8px;height:42px;padding:0 10px;border-radius:12px;background:#faf3ec;font-weight:700;font-size:14px;text-align:left}
.opt:hover{background:var(--accent-soft)}
.opt .em{font-size:18px}
.opt .meta{margin-left:auto;font-size:11px;color:var(--muted);font-weight:700}
.opt.hint{outline:2.5px solid var(--accent);background:var(--accent-soft)}
.opt[disabled]{opacity:.45;cursor:not-allowed}
.opt kbd{margin-left:4px}
@keyframes pop{from{opacity:0;transform:translate(-50%,-92%) scale(.96)}}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 16px;border-radius:var(--pill);background:var(--card2);border:1.5px solid var(--line2);font-weight:800;font-size:14px;box-shadow:0 2px 0 var(--line2);transition:transform .08s}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--line2)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 3px 0 #9c2350}
.btn.acc{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 70%,#000)}
.btn.big{height:52px;font-size:16px;padding:0 22px}
.btn.sm{height:34px;font-size:13px;padding:0 12px}
.btn.good{background:var(--good);border-color:var(--good);color:#fff;box-shadow:0 3px 0 #1f6640}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:800;background:#faf3ec}

/* ---------- dock ---------- */
.dock{grid-area:dock;display:flex;justify-content:space-around;align-items:stretch;background:rgba(255,250,245,.96);border-top:1px solid var(--line);padding-bottom:var(--safe-b);z-index:5}
.dock button,.rail button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:700;color:var(--ink2);min-height:44px}
.dock i,.rail i{font-style:normal;font-size:21px;line-height:1}
.dock button.on,.rail button.on{color:var(--pri)}
.dot{position:absolute;top:8px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--pri);box-shadow:0 0 0 2px #fff;animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.3)}}

/* ---------- sheet ---------- */
.backdrop{position:fixed;inset:0;background:rgba(60,30,20,.32);z-index:20;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:86dvh;z-index:21;background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-pop);display:flex;flex-direction:column;animation:up .22s ease-out;padding-bottom:var(--safe-b)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.grab{width:42px;height:5px;border-radius:9px;background:var(--line2);margin:8px auto 0}
.sheet header{display:flex;align-items:center;gap:8px;padding:8px 14px 8px}
.sheet h2{margin:0;font-size:18px;font-weight:900;flex:1}
.sheet-body{overflow-y:auto;padding:4px 14px 20px;-webkit-overflow-scrolling:touch}
.sec{margin:12px 0 6px;font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:0 1px 0 rgba(110,60,40,.05)}
.card+.card{margin-top:8px}
.row{display:flex;align-items:center;gap:10px}
.row .grow{flex:1;min-width:0}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:9px 10px}
.item .em{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#faf3ec;font-size:21px;flex:0 0 auto}
.item b{display:block;font-size:14px}
.item small{display:block;color:var(--muted);font-weight:600;font-size:12px}
.item .qty{font-weight:900;font-size:15px;min-width:34px;text-align:right}
.item .qty.low{color:var(--bad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-align:left;min-height:84px}
.tile i{font-style:normal;font-size:24px}
.tile b{font-size:14px} .tile small{color:var(--muted);font-size:12px;font-weight:600}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.stat b{display:block;font-size:19px;font-weight:900} .stat small{color:var(--muted);font-weight:700;font-size:11.5px}
.seg{display:flex;background:#f4e6da;border-radius:var(--pill);padding:3px;gap:3px}
.seg button{flex:1;height:36px;border-radius:var(--pill);font-weight:800;font-size:13px;color:var(--ink2)}
.seg button.on{background:#fff;color:var(--pri);box-shadow:0 1px 3px rgba(110,60,40,.15)}
.goal{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.goal+.goal{margin-top:6px}
.goal .ck{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-size:13px;flex:0 0 auto;margin-top:1px}
.goal.done .ck{background:var(--good);border-color:var(--good);color:#fff}
.goal.done .t{color:var(--muted);text-decoration:line-through}
.goal .t{font-weight:700;font-size:14px}
.prog{height:6px;border-radius:9px;background:#f2e6db;overflow:hidden;margin-top:6px}
.prog i{display:block;height:100%;background:var(--pri);border-radius:9px}
.story-text{font-size:14.5px;line-height:1.6;color:var(--ink2);background:var(--card);border-radius:var(--r);padding:12px 14px;border:1px solid var(--line);margin:0}
.hearts{color:#e0558a;letter-spacing:1px;font-size:13px}
.npc-card{display:flex;gap:10px;align-items:center}
.npc-card canvas{width:56px;height:64px;flex:0 0 auto;background:var(--accent-soft);border-radius:14px}
.field{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.field label{font-size:12px;font-weight:800;color:var(--muted)}
.input{height:44px;border-radius:12px;border:1.5px solid var(--line2);background:#fff;padding:0 12px;font-weight:600;width:100%}
.input:focus{outline:none;border-color:var(--pri)}
.chatlog{display:flex;flex-direction:column;gap:6px;max-height:44dvh;overflow-y:auto;padding:4px 0}
.msg{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-size:13.5px}
.msg b{color:var(--pri);margin-right:4px}
.badge{display:inline-block;font-size:11px;font-weight:800;border-radius:var(--pill);padding:2px 8px;background:#f4e6da;color:var(--ink2)}
.badge.good{background:var(--good-soft);color:var(--good)} .badge.pri{background:var(--pri-soft);color:var(--pri)} .badge.warn{background:var(--warn-soft);color:var(--warn)}
.shop-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r);background:var(--card);border:1.5px solid var(--line)}
.shop-card.cur{border-color:var(--pri);background:linear-gradient(135deg,#fff,var(--pri-soft))}
.shop-card.locked{opacity:.6}
.shop-card .em{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:26px;flex:0 0 auto}

/* ---------- modal ---------- */
.modal-wrap{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(60,30,20,.38);padding:16px;animation:fade .2s}
.modal{width:min(440px,100%);max-height:90dvh;overflow-y:auto;background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:18px;animation:up .22s ease-out}
.modal h3{margin:0 0 4px;font-size:20px;font-weight:900}
.modal .kicker{font-size:12px;font-weight:900;color:var(--pri);text-transform:uppercase;letter-spacing:.06em}
.modal .choices{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.modal .choices .btn{height:auto;min-height:46px;padding:10px 16px;text-align:center;line-height:1.3}
.stars{font-size:34px;letter-spacing:4px;text-align:center;margin:6px 0}
.stars .off{filter:grayscale(1);opacity:.3}
.sum-grid{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:10px 0}
.sum-grid b{text-align:right}
.sum-grid .tot{border-top:1px dashed var(--line2);padding-top:6px;font-weight:900}
.neg{color:var(--bad)} .pos{color:var(--good)}
.avatar-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.avatar-pick button{border:2px solid var(--line);border-radius:var(--r);background:var(--card);padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800}
.avatar-pick button.on{border-color:var(--pri);background:var(--pri-soft)}
.avatar-pick canvas{width:90px;height:100px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line2)}
.swatches button.on{box-shadow:0 0 0 2.5px var(--pri)}
.hero-art{width:100%;height:150px;display:block;border-radius:var(--r);background:var(--pri-soft);margin-bottom:12px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:700;margin:12px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line2)}
#gsiBox{min-height:44px;display:flex;justify-content:center}

/* ---------- toast ---------- */
.toasts{position:fixed;top:calc(var(--top) + 8px);left:50%;transform:translateX(-50%);z-index:40;display:flex;flex-direction:column;gap:6px;width:min(92vw,420px);pointer-events:none}
.toast{background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 14px;font-size:13.5px;font-weight:700;box-shadow:var(--sh-pop);animation:tin .2s ease-out;transition:opacity .3s,transform .3s}
.toast.good{border-color:#b9e3c8;background:#f3fbf6;color:#1f6640}
.toast.warn{border-color:#f3d79a;background:#fffaf0;color:#8a5a0a}
.toast.bad{border-color:#f4b8af;background:#fff6f4;color:var(--bad)}
.toast.out{opacity:0;transform:translateY(-6px)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}

/* ---------- side (desktop) ---------- */
.side-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.side-sec h3{margin:0 0 8px;font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.side-sec h3 button{margin-left:auto;font-size:12px;color:var(--pri);font-weight:800;text-transform:none;letter-spacing:0}
.mini-goal{font-size:13px;font-weight:600;display:flex;gap:6px;padding:3px 0;color:var(--ink2)}
.mini-goal.done{color:var(--muted);text-decoration:line-through}

@media (min-width:1024px){
  .app{grid-template-columns:var(--rail) minmax(0,1fr) var(--side);grid-template-rows:var(--top) 1fr;grid-template-areas:"top top top" "rail play side"}
  .rail{display:flex;flex-direction:column;gap:4px;padding:10px 6px;border-right:1px solid var(--line);background:rgba(255,250,245,.6)}
  .rail button{flex:0 0 auto;height:66px;border-radius:var(--r)}
  .rail button:hover{background:#fff}
  .dock{display:none}
  .side{display:block;overflow-y:auto;padding:12px;border-left:1px solid var(--line);background:rgba(255,250,245,.5)}
  .play{padding:12px 16px 8px}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:84dvh;border-radius:var(--r-lg);animation:fade .18s}
  .grab{display:none}
  .shop-txt b{max-width:30vw}
}
@media (max-width:420px){
  .brand-text{display:none}
  .chip{padding:0 9px;height:32px;font-size:12px}
  .chip span{display:none}
  .chip-clock span{display:inline}
  .ticket{min-width:132px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= Phong cách "sticker Gen Z": viền đậm, bóng cứng, màu neon ================= */
h2,h3,.brand-text b,.tile b,.stat b,.modal h3,.sheet h2,.btn.big,.pack b{font-family:"Baloo 2","Be Vietnam Pro",sans-serif;letter-spacing:-.01em}
.topbar{background:rgba(241,237,255,.94);border-bottom:2.5px solid var(--ink)}
.logo{background:var(--lime);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);transform:rotate(-7deg);border-radius:10px}
.brand-text b{color:var(--ink);font-size:18px;font-weight:800}
.chip{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff}
.chip-clock{background:var(--sun);border-color:var(--ink);color:var(--ink)}
.chip-energy.low{border-color:var(--ink)}
.chip-gem{background:linear-gradient(135deg,#c9f4ff,#ddd0ff)}
.vipmark{font-style:normal;font-size:10px;font-weight:900;background:var(--sun);border:1.5px solid var(--ink);border-radius:6px;padding:0 4px;margin-left:2px}
.shop-pill,.tray,.ticket{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.shop-ico{border:2px solid var(--ink)}
.ticket{border-radius:12px}
.ticket.sel{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent),4px 4px 0 var(--ink)}
.ticket .bar,.prog{border:1.5px solid var(--ink);background:#fff;height:8px}
.ticket.info{background:linear-gradient(135deg,#fff,var(--accent-soft))}
.step{background:var(--bg);border:1px solid var(--line)}
.stage{background:#e4dcff;border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.cta small{background:#fff;border:1.5px solid var(--ink)}
.popover{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:14px}
.popover::after{border-color:var(--ink);border-width:2px}
.opt{background:var(--bg);border:1.5px solid var(--ink);border-radius:10px}
.opt:hover{background:var(--lime)}
.btn{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:12px}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.pri,.btn.acc,.btn.good{border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn.gem{background:linear-gradient(135deg,var(--cyan),#8b5cff);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn.on{background:var(--lime)}
.btn[disabled]{box-shadow:1px 1px 0 var(--ink)}
.icon-btn{background:#fff;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.dock{background:#fff;border-top:2.5px solid var(--ink)}
.dock button.on i,.rail button.on i{background:var(--lime);border:2px solid var(--ink);border-radius:10px;padding:2px 8px;box-shadow:2px 2px 0 var(--ink)}
.dock button.on,.rail button.on{color:var(--ink)}
.dot{background:var(--hot);box-shadow:0 0 0 2px var(--ink)}
.backdrop,.modal-wrap{background:rgba(28,24,48,.45)}
.sheet{border:2.5px solid var(--ink);border-bottom:0}
.grab{background:var(--ink)}
.modal{border:2.5px solid var(--ink)}
.modal .kicker{color:var(--hot)}
.sec{display:table;margin:14px 0 8px;background:var(--sun);color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:1px 8px;transform:rotate(-1.2deg)}
.card,.item,.tile,.stat,.goal,.shop-card,.side-sec,.msg,.story-text,.sum-grid{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.item .em{background:var(--bg);border:1.5px solid var(--ink)}
.tile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.seg{background:#fff;border:2px solid var(--ink)}
.seg button.on{background:var(--ink);color:#fff;box-shadow:none}
.shop-card.cur{border-color:var(--ink);background:linear-gradient(135deg,#fff,var(--lime))}
.badge{background:var(--bg);border:1.5px solid var(--ink);color:var(--ink)}
.input{border:2px solid var(--ink)}
.toast{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.toast.good,.toast.warn,.toast.bad{border-color:var(--ink)}
.npc-card canvas,.avatar-pick canvas{border:2px solid var(--ink)}
.avatar-pick button{border:2px solid var(--ink)}
.avatar-pick button.on{background:var(--lime);border-color:var(--ink)}
.swatches button{box-shadow:0 0 0 2px var(--ink)}
.swatches button.on{box-shadow:0 0 0 3px var(--pri)}
.hero-art{border:2px solid var(--ink)}
kbd{border-color:var(--ink)}

/* ================= Cửa hàng ================= */
.shop-hero{display:flex;align-items:flex-end;gap:10px;background:linear-gradient(135deg,#ddd0ff,#c9f4ff 55%,#efffb8);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:16px;padding:6px 10px 10px;overflow:hidden}
.shop-hero canvas{flex:1;min-width:0;height:112px}
.wallets{display:flex;flex-direction:column;gap:6px;min-width:138px}
.wallets div{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:2px 8px;line-height:1.2}
.wallets small{display:block;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase}
.wallets b{font-size:14px}
.wallets .badge{text-align:center}
.perkline{margin:10px 0 8px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.stabs{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;margin:0 -2px;scrollbar-width:none;position:sticky;top:-4px;background:var(--bg);z-index:2}
.stabs::-webkit-scrollbar{display:none}
.stabs button{flex:0 0 auto;display:flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:2px solid var(--ink);border-radius:10px;background:#fff;font-weight:800;font-size:12.5px;box-shadow:2px 2px 0 var(--ink)}
.stabs button.on{background:var(--ink);color:#fff}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px 10px}
.scard{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 8px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 24%,#fff) 0 98px,#fff 98px);border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);text-align:center}
.scard.eq{box-shadow:0 0 0 3px var(--lime),4px 4px 0 3px var(--ink)}
.scard canvas{width:96px;height:92px}
.scard b{font-size:13px;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.scard .perk{font-size:11px;font-weight:800;color:var(--good);min-height:1.3em}
.scard .btn{width:100%;margin-top:auto;padding:0 6px}
.scard .goaltxt{font-size:10.5px;color:var(--muted);font-weight:700;line-height:1.25}
.rar{position:absolute;top:6px;left:6px;font-size:9.5px;font-weight:900;text-transform:uppercase;background:var(--rc);color:#fff;border:1.5px solid var(--ink);border-radius:6px;padding:0 5px;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.rar.inl{position:static;display:inline-block;vertical-align:middle;margin-left:4px}
.vipb{position:absolute;top:6px;right:6px;font-size:9.5px;font-weight:900;background:var(--sun);border:1.5px solid var(--ink);border-radius:6px;padding:0 5px}
.goalbar{width:100%;height:9px;border:1.5px solid var(--ink);border-radius:9px;background:#fff;overflow:hidden;margin:4px 0 2px}
.goalbar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--cyan))}
.item canvas{flex:0 0 auto;width:48px;height:48px;background:var(--bg);border:1.5px solid var(--ink);border-radius:10px}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px 10px;margin:12px 0 8px}
.pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px 10px;background:linear-gradient(160deg,#fff,#dff7ff);border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink)}
.pack:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pack[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.pack i{font-style:normal;font-size:30px;line-height:1.1}
.pack b{font-size:18px}
.pack small{font-size:11px;font-weight:800}
.pack .x2{color:var(--hot)}
.pack .items{font-size:16px}
.pack .vnd{margin-top:6px;width:100%;background:var(--ink);color:#fff;border-radius:8px;padding:4px 0;font-weight:900;font-size:13.5px}
.pack .tag{position:absolute;top:-10px;right:8px;background:var(--sun);border:1.5px solid var(--ink);border-radius:6px;padding:0 6px;font-size:10px;font-weight:900}
.pack.starter{grid-column:1/-1;background:linear-gradient(135deg,#fff3b0,#ffd0e6)}
.warnbox{background:#fff8d6}
.vipcard{background:linear-gradient(135deg,#fff3b0,#ffe08a 60%,#ffc6e1)}
.perks{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:3px;font-size:13px;font-weight:700}
.vipcard+.sgrid{margin-top:12px}
@media (min-width:1024px){
  .rail{border-right:2.5px solid var(--ink);background:rgba(255,255,255,.55)}
  .rail button:hover{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
  .side{border-left:2.5px solid var(--ink);background:rgba(255,255,255,.4)}
  .sheet{border-bottom:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
}