:root {
  --bg: #e6efe9;
  --bg-2: #d3e2d9;
  --panel: #fbfdfc;
  --panel-2: #eef4f0;
  --ink: #15261f;
  --ink-soft: #587064;
  --line: #cfdcd4;
  --cat: #e8862a;
  --cat-soft: #fde3c4;
  --rat: #6a7180;
  --rat-soft: #dfe2e8;
  --cheese: #f7c948;
  --hp: #d6334a;
  --wood: #b98955;
  --wood-2: #9c6f3f;
  --shadow: 0 4px 12px rgba(20, 45, 35, .16);
  --r: 14px;
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16241f; --bg-2: #0c1512; --panel: #20332c; --panel-2: #2a4138;
    --ink: #eaf4ef; --ink-soft: #a5bdb1; --line: #35504a; --cat-soft: #4a321c; --rat-soft: #353a45;
    --wood: #7a5534; --wood-2: #5c3e24; --shadow: 0 4px 14px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16241f; --bg-2: #0c1512; --panel: #20332c; --panel-2: #2a4138;
  --ink: #eaf4ef; --ink-soft: #a5bdb1; --line: #35504a; --cat-soft: #4a321c; --rat-soft: #353a45;
  --wood: #7a5534; --wood-2: #5c3e24; --shadow: 0 4px 14px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--cheese) 18%, transparent), transparent 70%), linear-gradient(180deg, var(--bg), var(--bg-2)) fixed;
  background-color: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--cheese); outline-offset: 2px; }
#app { min-height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
svg { display: block; width: 100%; height: 100%; }

/* ---------- Trang chủ, sảnh ---------- */
.home, .lobby { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 22px; gap: 14px; }
.lobby { justify-content: flex-start; }
.versus { display: flex; align-items: center; justify-content: center; gap: 6px; }
.vs-art { width: 120px; height: 120px; }
.vs { font: 800 34px var(--font-display); color: var(--hp); transform: rotate(-8deg); }
.logo { font: 800 52px/0.9 var(--font-display); margin: 0; }
.logo span { display: block; color: var(--cat); }
.tagline { color: var(--ink-soft); margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.input { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 12px 14px; width: 100%; min-width: 0; }
.input:focus { border-color: var(--cheese); outline: none; }
.row { display: flex; gap: 8px; align-items: center; }
.btn { padding: 12px 16px; border-radius: var(--r); font-weight: 600; background: var(--panel); border: 2px solid var(--line); white-space: nowrap; min-height: 46px; }
.btn.primary { background: var(--cheese); color: #2a1d00; border-color: transparent; box-shadow: 0 3px 0 #c09520; font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #c09520; }
.btn.side-cat { background: var(--cat); color: #fff; border-color: transparent; font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.btn.side-rat { background: var(--rat); color: #fff; border-color: transparent; font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.hint { color: var(--ink-soft); font-size: 13px; margin: 0; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code { font: 800 48px/1 var(--font-display); letter-spacing: 6px; }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seat { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: var(--r); padding: 10px 12px; }
.seat .name { flex: 1; font-weight: 600; }
.seat .tag { font-size: 12px; color: var(--ink-soft); }
.seat.empty { background: transparent; border: 2px dashed var(--line); color: var(--ink-soft); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* ---------- Trong trận ---------- */
.game { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 8px 8px 10px; }
.topbar { display: flex; align-items: center; gap: 8px; }
.topbar h1 { font: 800 22px/1 var(--font-display); margin: 0; flex: 1; }
.topbar h1 span { color: var(--hp); }
.round { font: 700 14px var(--font-display); background: var(--panel); border-radius: 999px; padding: 3px 10px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--panel); box-shadow: var(--shadow); font-size: 16px; font-weight: 700; }

.leader { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: var(--r); padding: 4px 10px 4px 4px; box-shadow: var(--shadow); position: relative; border-left: 5px solid var(--rat); }
.leader.cat { border-left-color: var(--cat); }
.leader .lart { width: 46px; height: 46px; flex: none; border-radius: 10px; background: var(--rat-soft); overflow: hidden; }
.leader.cat .lart { background: var(--cat-soft); }
.leader .lmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.leader .lmeta b { font-size: 14px; line-height: 1.1; }
.leader .lmeta small { font-size: 11px; color: var(--ink-soft); }
.pips { display: flex; align-items: center; gap: 2px; font-size: 12px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: inline-block; }
.pips i.on { background: var(--cheese); box-shadow: 0 0 0 1px #c09520; }
.leader.cat .pips i.on { background: #7ec4e8; box-shadow: 0 0 0 1px #3a7fa6; }
.pips em { font-style: normal; font-weight: 700; margin-left: 4px; color: var(--ink-soft); }
.hp { font: 800 26px/1 var(--font-display); color: var(--hp); display: flex; align-items: center; gap: 2px; position: relative; }
.hp > span:first-child { font-size: 16px; }
.leader.hurt { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.float { position: absolute; right: -4px; top: -14px; background: var(--hp); color: #fff; font: 800 14px/1 var(--font-display); padding: 3px 6px; border-radius: 999px; animation: rise .5s ease-out; pointer-events: none; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

/* Bàn: 5 làn như ván sàn kho */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 16px;
  background: repeating-linear-gradient(90deg, var(--wood) 0 calc(20% - 2px), var(--wood-2) calc(20% - 2px) 20%); box-shadow: inset 0 0 0 3px var(--wood-2), var(--shadow); }
.lane { display: flex; flex-direction: column; align-items: stretch; gap: 3px; border-radius: 10px; padding: 2px; transition: background .2s; }
.lane.fighting { background: rgba(255, 220, 120, .35); }
.lno { text-align: center; font: 800 12px/1 var(--font-display); color: rgba(255, 255, 255, .75); }
.slot { aspect-ratio: 3 / 4; border-radius: 10px; position: relative; display: block; padding: 0; overflow: visible; }
.slot.empty { background: rgba(0, 0, 0, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.slot.unit { background: var(--rat-soft); box-shadow: 0 3px 6px rgba(0,0,0,.25), inset 0 0 0 2px var(--rat); }
.slot.unit.cat { background: var(--cat-soft); box-shadow: 0 3px 6px rgba(0,0,0,.25), inset 0 0 0 2px var(--cat); }
.slot .art { position: absolute; inset: 6% 4% 14%; }
.slot.tgt { box-shadow: 0 0 0 3px var(--cheese), 0 0 14px var(--cheese); animation: pulse 1s ease-in-out infinite; }
.slot .plus { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cheese); font-size: 26px; font-weight: 800; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--cheese), 0 0 4px var(--cheese); } }
.slot.stun .art { filter: grayscale(.7) brightness(.85); }
.slot .zz { position: absolute; top: 2px; right: 2px; font-size: 14px; }
.slot .keys { position: absolute; top: 1px; left: 2px; display: flex; gap: 1px; font-size: 11px; }
.slot .keys i { font-style: normal; }
.atk, .uhp { position: absolute; bottom: -6px; min-width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--font-display); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); padding: 0 3px; }
.atk { left: -4px; background: #e0802a; }
.uhp { right: -4px; background: var(--hp); }
.uhp.low { background: #8a1c2c; }
.slot.hurt { animation: shake .4s; }
.slot .float { right: auto; left: 50%; transform: translateX(-50%); top: 30%; }
@media (prefers-reduced-motion: reduce) { .slot.tgt, .slot.hurt, .leader.hurt, .float { animation: none; } }

.phase { background: var(--panel); border-radius: var(--r); padding: 6px 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.steps li { font-size: 10px; font-weight: 600; text-align: center; padding: 3px 2px; border-radius: 6px; background: var(--panel-2); color: var(--ink-soft); line-height: 1.2; }
.steps li.mine { box-shadow: inset 0 -2px 0 var(--cheese); }
.steps li.on { background: var(--ink); color: var(--panel); }
.prow { display: flex; align-items: center; gap: 8px; }
.phint { flex: 1; font-size: 13px; font-weight: 600; }
.timer { font-weight: 700; color: var(--ink-soft); font-size: 13px; }

/* Bài trên tay */
.hand { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.card { flex: none; width: 96px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); padding: 4px 5px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; scroll-snap-align: start; border: 2px solid var(--rat); opacity: .55; transition: transform .12s; }
.card.cat { border-color: var(--cat); }
.card.trick { background: linear-gradient(170deg, color-mix(in srgb, #8a4fd0 18%, var(--panel)), var(--panel)); }
.card.ok { opacity: 1; }
.card.sel { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--cheese), 0 8px 18px rgba(0,0,0,.3); }
.card .cost { position: absolute; top: -6px; left: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--cheese); color: #2a1d00; font: 800 15px/26px var(--font-display); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.card.cat .cost { background: #7ec4e8; color: #0c2f45; }
.card .art { width: 70px; height: 70px; }
.card b { font-size: 11.5px; line-height: 1.15; margin-top: 2px; }
.card small { font-size: 9.5px; color: var(--ink-soft); line-height: 1.2; margin-top: 2px; min-height: 22px; }
.card .atk { bottom: -8px; left: 8px; }
.card .uhp { bottom: -8px; right: 8px; }
.card .tag { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: #8a4fd0; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }

/* ---------- Bảng trượt ---------- */
.scrim { position: fixed; inset: 0; background: rgba(5, 15, 10, .5); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--panel); width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 86vh; overflow: auto; }
.sheet.anim { animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet.anim { animation: none; } }
.sheet h2 { font: 800 24px/1.15 var(--font-display); margin: 0 0 4px; }
.sheet .sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 12px; }
.flow { margin: 0 0 12px; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.keylist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.keylist div { display: grid; grid-template-columns: 28px 90px 1fr; align-items: center; gap: 6px; background: var(--panel-2); border-radius: 10px; padding: 6px 8px; font-size: 13px; }
.keylist small { color: var(--ink-soft); }
.unitinfo { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.unitinfo .art { width: 90px; height: 90px; flex: none; }
.kline { margin: 6px 0; font-size: 14px; }
.log { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; }
.log li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 40; box-shadow: var(--shadow); max-width: 90vw; text-align: center; }
.win { text-align: center; }
.win .art { width: 130px; height: 130px; margin: 0 auto; display: block; }

/* =================== v2: sảnh, bộ bài, cửa hàng =================== */
.hub { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.hubbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.hubbar h1 { font: 800 24px/1 var(--font-display); margin: 0; flex: 1; }
.hubbar h1 span { color: var(--hp); }
.wallet { display: flex; gap: 6px; font: 700 14px var(--font-display); }
.wallet span { background: var(--panel); border-radius: 999px; padding: 3px 10px; box-shadow: var(--shadow); }
.scroll { flex: 1; overflow-y: auto; padding: 4px 12px 16px; }
.pane { display: flex; flex-direction: column; gap: 10px; }
.pane h2 { font: 800 26px/1.1 var(--font-display); margin: 4px 0 0; }
.pane h3 { font: 700 18px var(--font-display); margin: 8px 0 0; }
.sub { color: var(--ink-soft); font-size: 13px; margin: 0; }
.center { text-align: center; }
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--panel); box-shadow: 0 -4px 14px rgba(0,0,0,.12); position: sticky; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 8px; font-size: 11px; font-weight: 600; color: var(--ink-soft); position: relative; }
.tabs button span { font-size: 20px; line-height: 1.1; }
.tabs button.on { color: var(--ink); }
.tabs button.on::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--cheese); }
.dotn { position: absolute; top: 6px; right: 28%; width: 8px; height: 8px; border-radius: 50%; background: var(--hp); }

.deckpick, .deckrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--panel); border-radius: var(--r); padding: 8px 12px 8px 8px; box-shadow: var(--shadow); border-left: 5px solid var(--rat); margin-bottom: 6px; }
.deckpick.cat, .deckrow:has(.dart) { border-left-color: var(--line); }
.deckpick.cat { border-left-color: var(--cat); }
.deckrow.on { box-shadow: 0 0 0 2.5px var(--cheese), var(--shadow); }
.deckrow:disabled { opacity: .5; }
.dart { width: 54px; height: 54px; flex: none; border-radius: 12px; background: var(--panel-2); overflow: hidden; display: block; }
.dart.small { width: 38px; height: 38px; }
.deckpick small, .deckrow small { display: block; font-size: 11px; color: var(--ink-soft); }
.deckpick b, .deckrow b { display: block; font-size: 15px; }
.deckpick em, .deckrow em { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); }
.deckpick > span:nth-child(2), .deckrow > span:nth-child(2) { flex: 1; min-width: 0; }
.chev { font-size: 26px; color: var(--ink-soft); }
.bad { color: var(--hp) !important; }
.good { color: #2f9a5a; }
.tagon { background: var(--cheese); color: #2a1d00; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }

.missions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mission { display: flex; gap: 10px; width: 100%; text-align: left; background: var(--panel); border-radius: var(--r); padding: 8px; box-shadow: var(--shadow); border-left: 5px solid var(--rat); position: relative; }
.mission.cat { border-left-color: var(--cat); }
.mission.done { opacity: .75; }
.mission:disabled { filter: grayscale(.8); opacity: .55; }
.mart { width: 64px; height: 64px; flex: none; border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.mt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mt small { font-size: 11px; color: var(--ink-soft); }
.mt b { font: 700 17px/1.15 var(--font-display); }
.mt em { font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
.mrew { font-size: 12px; font-weight: 600; margin-top: 2px; }
.lock { position: absolute; right: 10px; top: 8px; font-size: 18px; }

.shopcard { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: var(--r); padding: 12px; box-shadow: var(--shadow); }
.shopcard .big { font-size: 34px; }
.shopcard > div { flex: 1; }
.shopcard b { display: block; font: 700 17px var(--font-display); }
.shopcard small { color: var(--ink-soft); font-size: 12.5px; }
.shopcard.pack { background: linear-gradient(140deg, color-mix(in srgb, var(--cheese) 30%, var(--panel)), var(--panel)); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--panel); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); }
.chip.on { background: var(--ink); color: var(--panel); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding-top: 6px; }
.grid .card { width: 100%; opacity: 1; }
.card.dim { opacity: .45; filter: grayscale(.6); }
.card .cnt { position: absolute; top: -6px; right: -6px; background: var(--ink); color: var(--panel); font: 800 12px/1 var(--font-display); padding: 4px 6px; border-radius: 999px; }
.card { border-color: var(--cc) !important; }
.card .emoji { font-size: 46px; display: grid; place-items: center; height: 100%; }
.card.trick .art, .card.env .art { background: radial-gradient(circle, color-mix(in srgb, var(--cc) 30%, transparent), transparent 70%); border-radius: 50%; }
.card.env { background: linear-gradient(170deg, color-mix(in srgb, #2f9a5a 18%, var(--panel)), var(--panel)); }
.card.r-sp { background: linear-gradient(170deg, color-mix(in srgb, var(--cheese) 35%, var(--panel)), var(--panel)); border-color: #c9962e !important; }
.card .tag { background: var(--cc); }
.gemr { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: #a8b0b8; }
.r-u .gemr { background: #3b82c4; } .r-r .gemr { background: #8a4fd0; } .r-s .gemr { background: #e8862a; }
.r-l .gemr { background: conic-gradient(#f7c948, #e8862a, #d6334a, #8a4fd0, #3b82c4, #f7c948); width: 11px; height: 11px; }
.r-sp .gemr { background: #c9962e; }

.edit .hubbar { gap: 6px; }
.input.slim { padding: 7px 10px; flex: 1; font-weight: 600; }
.count { font: 800 18px var(--font-display); color: var(--hp); }
.count.ok { color: #2f9a5a; }
.curve { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; height: 56px; align-items: end; margin: 4px 0 8px; }
.curve span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.curve i { width: 70%; background: var(--cheese); border-radius: 4px 4px 0 0; min-height: 2px; }
.curve em { font-style: normal; font-size: 10px; color: var(--ink-soft); }
.decklines { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.dline { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 8px; padding: 5px 8px; border-left: 4px solid var(--cc); text-align: left; font-size: 13.5px; }
.dline .c { width: 22px; height: 22px; border-radius: 50%; background: var(--cheese); color: #2a1d00; display: grid; place-items: center; font: 800 13px var(--font-display); }
.dline .n { flex: 1; font-weight: 600; }
.dline .x { font-weight: 700; color: var(--ink-soft); }
.dline .minus { color: var(--hp); font-weight: 800; font-size: 18px; }
.savebar { display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--panel); box-shadow: 0 -4px 14px rgba(0,0,0,.12); position: sticky; bottom: 0; }
.savebar span { flex: 1; font-size: 13px; font-weight: 600; }

.heroes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.herocard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: var(--panel-2); border-radius: var(--r); padding: 10px 8px; border-top: 4px solid var(--rat); }
.herocard.cat { border-top-color: var(--cat); }
.herocard .dart { width: 70px; height: 70px; }
.herocard small { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.herocard em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.cardbig { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.cardbig > .card { width: 120px; flex: none; opacity: 1; }
.kline.small { font-size: 12.5px; margin: 3px 0; }
.label { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin: 8px 0 4px; }
.packgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.flip { position: relative; }
.flip .card { width: 100%; opacity: 1; }
.flip.back { aspect-ratio: 3 / 4.4; border-radius: 12px; background: repeating-linear-gradient(45deg, #2a4138 0 8px, #20332c 8px 16px); display: grid; place-items: center; font-size: 30px; box-shadow: var(--shadow); border: 3px solid #a8b0b8; }
.flip.back.r-u { border-color: #3b82c4; } .flip.back.r-r { border-color: #8a4fd0; box-shadow: 0 0 14px #8a4fd0; } .flip.back.r-s { border-color: #e8862a; box-shadow: 0 0 18px #e8862a; } .flip.back.r-l { border-color: #f7c948; box-shadow: 0 0 24px #f7c948; }
.flip.open { animation: flipin .35s ease-out; }
@keyframes flipin { from { transform: rotateY(90deg); } }
@media (prefers-reduced-motion: reduce) { .flip.open { animation: none; } }
.newb, .dupe { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.newb { background: #2f9a5a; color: #fff; }
.dupe { background: var(--ink); color: var(--panel); }
.reward { background: color-mix(in srgb, var(--cheese) 25%, var(--panel)); border-radius: 12px; padding: 10px; font: 800 20px var(--font-display); margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.reward small { font: 600 12px var(--font-body); color: var(--ink-soft); }

/* ---------- trận đấu v2 ---------- */
.leader .lart { border: 0; padding: 0; cursor: pointer; }
.lane.roof { background: rgba(214, 69, 60, .12); }
.lane.pond { background: rgba(59, 130, 196, .28); }
.lane.hasenv.env-cat { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cat) 70%, transparent); }
.lane.hasenv.env-rat { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rat) 90%, transparent); }
.lno { position: relative; min-height: 20px; border-radius: 8px; color: rgba(255,255,255,.85); font: 800 13px/20px var(--font-display); }
.lno.tgt { background: var(--cheese); color: #2a1d00; animation: pulse 1s ease-in-out infinite; }
.lno .envb { position: absolute; right: -2px; top: -6px; font-size: 13px; }
.slot.hiddenu { background: #3b2a1e; box-shadow: inset 0 0 0 2px #6b4c33, 0 3px 6px rgba(0,0,0,.3); }
.slot .hole { position: absolute; inset: 20% 10% 30%; display: grid; place-items: center; font-size: 26px; }
.slot .q { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; color: #f7c948; font: 800 16px var(--font-display); }
.slot .art .emoji, .card .art .emoji { font-size: 34px; }
.atk.up { background: #c2552b; box-shadow: 0 0 0 2px #f7c948; }
.btn.gold { background: linear-gradient(160deg, #fbe39a, #c9962e); color: #2a1d00; border-color: transparent; }
.pane .row .btn { white-space: normal; line-height: 1.2; }

/* bộ Thiên Đường & Địa Ngục */
.card.set-tdn::before { content: "TĐ"; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); font: 800 9px/1 var(--font-display); padding: 2px 6px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #f2c230, #b8352b); }
.shopcard.tdn, .shopcard.pack.tdn { background: linear-gradient(140deg, color-mix(in srgb, #f2c230 22%, var(--panel)), color-mix(in srgb, #b8352b 22%, var(--panel))); }
.pane .row .btn.side-cat, .pane .row .btn.side-rat { font-size: 15px; padding: 10px 8px; }

/* bộ Trung Thu + Đồng đội */
.card.set-mid::before { content: "TT"; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); font: 800 9px/1 var(--font-display); padding: 2px 6px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #d6262f, #f2c230); }
.shopcard.mid, .shopcard.pack.mid { background: linear-gradient(140deg, color-mix(in srgb, #d6262f 20%, var(--panel)), color-mix(in srgb, #f2c230 22%, var(--panel))); }
.cell { position: relative; }
.backu { position: absolute; right: -5px; bottom: 12px; width: 46%; aspect-ratio: 1; border-radius: 8px; padding: 0; background: var(--rat-soft); box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 0 0 2px var(--rat); z-index: 2; }
.backu.cat { background: var(--cat-soft); box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 0 0 2px var(--cat); }
.backu.hiddenu { background: #3b2a1e; display: grid; place-items: center; font-size: 14px; }
.backu .art { position: absolute; inset: 6%; }
.backu i { position: absolute; bottom: -5px; min-width: 15px; height: 15px; border-radius: 50%; font: 800 10px/15px var(--font-display); font-style: normal; color: #fff; text-align: center; }
.backu .ba { left: -4px; background: #e0802a; } .backu .bh { right: -4px; background: var(--hp); }
.backu.tgt { box-shadow: 0 0 0 3px var(--cheese), 0 0 10px var(--cheese); }
.cell { display: flex; flex-direction: column; } .cell > .slot { width: 100%; }

/* sự kiện hằng tuần */
.eventbox { background: linear-gradient(150deg, color-mix(in srgb, #8a4fd0 28%, var(--panel)), color-mix(in srgb, #f2c230 22%, var(--panel))); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; border: 2px solid color-mix(in srgb, #f2c230 60%, transparent); }
.evhead span { font: 700 13px var(--font-display); color: #8a4fd0; display: block; }
.evhead b { font: 800 22px/1.1 var(--font-display); display: block; }
.evhead small { color: var(--ink-soft); font-size: 12px; }
.evcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evc { display: flex; flex-direction: column; gap: 10px; }
.evc .card { width: 100%; opacity: 1; }
.quest { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--panel) 80%, transparent); border-radius: 12px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.quest span { flex: 1; }
.card.r-e { box-shadow: 0 0 0 2px #f2c230, 0 0 12px color-mix(in srgb, #8a4fd0 60%, transparent); background: linear-gradient(170deg, color-mix(in srgb, #8a4fd0 16%, var(--panel)), var(--panel)); }
.card.set-event::before { content: "⭐ SỰ KIỆN"; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); font: 800 8.5px/1 var(--font-display); padding: 2px 6px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #8a4fd0, #f2c230); white-space: nowrap; }
.r-e .gemr { background: conic-gradient(#f2c230, #8a4fd0, #f2c230); border-radius: 50%; transform: none; }
.evcal { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.evcal li { background: var(--panel-2); border-radius: 12px; padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12.5px; }
.evcal li.now { box-shadow: 0 0 0 2px #f2c230; }
.evcal .wk { grid-column: 1 / -1; font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.evcal b { grid-column: 1 / -1; font: 700 16px var(--font-display); }
.evcal .pair { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.evcal .pa { width: 34px; height: 34px; flex: none; }
.eventbox .btn { white-space: normal; line-height: 1.2; }

/* Hiệu ứng tấn công */
.lane { position: relative; }
.fxs { position: absolute; left: 50%; z-index: 5; font-size: 26px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); opacity: 0; }
.fxs.up { top: 62%; animation: fxup .5s ease-in forwards; }
.fxs.down { top: 12%; animation: fxdown .5s ease-in forwards; }
.fxs.back { margin-left: 14%; }
@keyframes fxup { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6) rotate(-20deg); } 20% { opacity: 1; } 85% { opacity: 1; transform: translate(-50%, -150%) scale(1.25) rotate(15deg); } 100% { opacity: 0; transform: translate(-50%, -175%) scale(1.6); } }
@keyframes fxdown { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6) rotate(20deg); } 20% { opacity: 1; } 85% { opacity: 1; transform: translate(-50%, 150%) scale(1.25) rotate(-15deg); } 100% { opacity: 0; transform: translate(-50%, 175%) scale(1.6); } }
.fxs.hero.up { animation-name: fxuph; } .fxs.hero.down { animation-name: fxdownh; }
@keyframes fxuph { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1.8); } }
@keyframes fxdownh { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 260%) scale(1.8); } }
.lunge.lu { animation: lu .45s ease-out; } .lunge.ld { animation: ld .45s ease-out; }
@keyframes lu { 40% { transform: translateY(-18%) scale(1.08); } }
@keyframes ld { 40% { transform: translateY(18%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .fxs { animation-duration: .01s !important; } .lunge { animation: none !important; } }
/* Đồng đội dễ thấy hơn */
.backu { width: 58%; right: -7px; bottom: 10px; }
.backu .tagb { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: #2f9a5a; color: #fff; font: 800 8.5px/1 var(--font-display); padding: 2px 5px; border-radius: 999px; white-space: nowrap; z-index: 3; }
.slot.paired { box-shadow: 0 3px 6px rgba(0,0,0,.25), inset 0 0 0 2px #2f9a5a !important; }
.joinlbl { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); background: var(--cheese); color: #2a1d00; font: 800 10px/1.1 var(--font-display); padding: 3px 6px; border-radius: 8px; z-index: 4; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* Lá đối thủ vừa đánh */
#reveal { position: fixed; left: 50%; top: calc(110px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 30; cursor: pointer; animation: rvin .25s ease-out; }
@keyframes rvin { from { transform: translate(-50%, -12px) scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #reveal { animation: none; } }
.rv { background: var(--panel); border-radius: 16px; padding: 8px 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); border: 2px solid var(--cheese); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 170px; }
.rv small { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-align: center; }
.rv .card { width: 140px; opacity: 1; }
.rv .card .art { width: 96px; height: 96px; }
.rv .card small { font-size: 10.5px; min-height: 30px; }
.rvhole { font-size: 54px; }
.rv b { font: 800 16px var(--font-display); } .rv em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); text-align: center; }
.recentp { display: flex; align-items: center; gap: 4px; padding: 0 2px; overflow-x: auto; }
.recentp .rl { font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.rp { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); position: relative; padding: 2px; display: grid; place-items: center; }
.rp .ra { width: 100%; height: 100%; display: block; } .rp .ra .emoji { font-size: 18px; }
.rp i { position: absolute; top: -5px; left: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--cheese); color: #2a1d00; font: 800 9px/14px var(--font-display); font-style: normal; text-align: center; }
.rp.hole { font-size: 16px; } .rp.more { font-weight: 800; color: var(--ink-soft); }
.plog { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.plog li { display: flex; gap: 8px; align-items: center; background: var(--panel-2); border-radius: 10px; padding: 6px 8px; border-left: 4px solid var(--rat); }
.plog li.me { border-left-color: #2f9a5a; }
.plog .pv { font: 800 11px var(--font-display); color: var(--ink-soft); width: 22px; }
.plog .pa { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 22px; padding: 0; }
.plog .pa .emoji { font-size: 24px; }
.plog .pt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plog .pt b { font-size: 13.5px; } .plog .pt small { font-size: 11px; color: var(--ink-soft); } .plog .pt em { font-style: normal; font-size: 11px; color: var(--ink-soft); }

/* nhận cá khô / phô mai */
.pips { position: relative; }
.pips i.pop { animation: pippop .45s ease-out both; }
@keyframes pippop { 0% { transform: scale(.2); opacity: .2; } 60% { transform: scale(1.6); } 100% { transform: scale(1); } }
.efloat { position: absolute; left: 100%; top: -14px; margin-left: 6px; white-space: nowrap; font: 800 14px/1 var(--font-display); padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.35); animation: efl 1.4s ease-out forwards; }
.efloat.cat { background: #7ec4e8; color: #0c2f45; } .efloat.rat { background: var(--cheese); color: #2a1d00; }
.efloat small { font-size: 10px; opacity: .8; }
@keyframes efl { 0% { transform: translateY(8px) scale(.7); opacity: 0; } 15% { transform: translateY(0) scale(1.1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pips i.pop, .efloat { animation: none; } }
.efloat { position: static; display: inline-block; margin-left: 6px; font-size: 12.5px; padding: 2px 7px; }
@keyframes efl { 0% { transform: translateY(6px) scale(.7); opacity: 0; } 15% { transform: translateY(0) scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }

/* ---------- Sân đấu: quân hiện như nhân vật đứng trên sàn, không có khung lá bài ---------- */
.slot.unit, .slot.unit.cat { background: transparent; box-shadow: none; }
.slot.unit .art { inset: -6% -8% 10%; z-index: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.slot.unit .art img, .backu .art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot.unit .shadow, .backu .shadow { position: absolute; left: 14%; right: 14%; bottom: 8%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); }
.slot.unit.cat .shadow { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat) 70%, transparent); }
.slot.unit.rat .shadow { box-shadow: 0 0 0 2px color-mix(in srgb, #c9ced8 55%, transparent); }
.slot.unit .keys { z-index: 2; background: rgba(0,0,0,.35); border-radius: 6px; padding: 0 2px; }
.slot.unit .atk, .slot.unit .uhp { z-index: 3; }
.slot.unit.tgt { box-shadow: 0 0 0 3px var(--cheese), 0 0 14px var(--cheese); border-radius: 12px; }
.slot.unit.paired { box-shadow: none !important; }
.slot.unit.paired .shadow { box-shadow: 0 0 0 2.5px #2f9a5a; }
.slot.hiddenu { background: transparent; box-shadow: none; }
.slot.hiddenu .hole { inset: 30% 6% 18%; border-radius: 50%; background: radial-gradient(closest-side, #1a120c 55%, #5a3d26 80%, transparent); font-size: 0; }
.slot.hiddenu .q { bottom: 30%; }
.backu, .backu.cat { background: transparent; box-shadow: none; width: 60%; right: -10px; bottom: 14px; }
.backu .art { inset: -4%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.backu .shadow { bottom: 4%; }
.backu.tgt { box-shadow: 0 0 0 3px var(--cheese); border-radius: 10px; }

/* ---------- Hiệu ứng môi trường và địa hình trên làn ---------- */
.envfx, .terrfx { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; overflow: hidden; z-index: 0; }
.lane > .cell, .lane > .lno { position: relative; z-index: 1; }
.envg-fancy { background: linear-gradient(180deg, rgba(209, 72, 154, .18), rgba(242, 194, 48, .14)); }
.envg-holy { background: radial-gradient(120% 60% at 50% 0%, rgba(255, 236, 150, .45), rgba(255, 255, 255, .06) 70%); }
.envg-green { background: linear-gradient(0deg, rgba(76, 175, 80, .38), rgba(76, 175, 80, .05) 70%); }
.envg-warm { background: linear-gradient(0deg, rgba(255, 120, 30, .38), rgba(255, 170, 60, .05) 75%); }
.envg-lava { background: linear-gradient(0deg, rgba(255, 70, 20, .55), rgba(120, 20, 10, .15) 70%); animation: lavaglow 2.4s ease-in-out infinite alternate; }
.envg-cold { background: linear-gradient(180deg, rgba(140, 200, 255, .38), rgba(200, 240, 255, .08) 75%); }
.envg-storm { background: linear-gradient(180deg, rgba(60, 70, 110, .55), rgba(120, 140, 200, .1)); animation: storm 3.2s steps(1) infinite; }
.envg-dark { background: radial-gradient(90% 70% at 50% 60%, rgba(30, 20, 40, .55), rgba(30, 20, 40, .1)); }
.envg-hell { background: radial-gradient(90% 70% at 50% 70%, rgba(170, 30, 40, .5), rgba(30, 10, 20, .3)); }
.envg-lab { background: linear-gradient(0deg, rgba(120, 230, 120, .3), rgba(120, 230, 160, .05)); }
.envg-disco { background: linear-gradient(135deg, rgba(209, 72, 154, .3), rgba(59, 130, 196, .3), rgba(242, 194, 48, .3)); background-size: 300% 300%; animation: disco 4s linear infinite; }
@keyframes lavaglow { to { filter: brightness(1.35); } }
@keyframes storm { 0%, 88%, 100% { filter: none; } 90%, 94% { filter: brightness(2.2); } }
@keyframes disco { to { background-position: 300% 0; } }
.envfx .ep { position: absolute; font-style: normal; font-size: 13px; opacity: 0; }
.envfx .ep.up { bottom: -6%; animation: epup 3.4s ease-in infinite; }
.envfx .ep.fall { top: -6%; animation: epfall 3.6s linear infinite; }
.envfx .ep.drift { top: 40%; animation: epdrift 4.2s ease-in-out infinite; }
@keyframes epup { 0% { opacity: 0; transform: translateY(0) scale(.7); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-380%) scale(1.1); } }
@keyframes epfall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(560%) rotate(160deg); } }
@keyframes epdrift { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30%, 70% { opacity: .85; } 50% { transform: translate(40%, -60%); } }
.envfx.flash { animation: envin .9s ease-out; }
@keyframes envin { 0% { box-shadow: inset 0 0 0 0 var(--cheese); filter: brightness(2); } 100% { box-shadow: inset 0 0 0 0 transparent; filter: none; } }
.envname { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); background: rgba(0,0,0,.7); color: #fff; font: 800 10px/1.2 var(--font-display); padding: 3px 6px; border-radius: 8px; white-space: nowrap; animation: envname 1.6s ease-out forwards; z-index: 2; }
@keyframes envname { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* địa hình */
.terrfx.roof { background: repeating-linear-gradient(170deg, rgba(150, 40, 30, .22) 0 9px, rgba(110, 25, 20, .22) 9px 11px); }
.terrfx.pond { background: linear-gradient(180deg, rgba(70, 150, 220, .25), rgba(40, 110, 190, .4)); }
.terrfx.pond i { position: absolute; left: 20%; width: 60%; height: 6%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); animation: ripple 3s ease-out infinite; }
.terrfx.pond i:nth-child(1) { top: 30%; } .terrfx.pond i:nth-child(2) { top: 70%; animation-delay: 1.5s; }
@keyframes ripple { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .envfx, .envfx *, .terrfx i, .envg-lava, .envg-storm, .envg-disco { animation: none !important; } .envfx .ep { opacity: .5; } }
.envname { white-space: normal; width: 92%; text-align: center; font-size: 9.5px; }

/* Siêu năng lực trong bảng thủ lĩnh */
.sprow { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border-radius: 12px; padding: 10px; margin-bottom: 8px; border-left: 4px solid #c9962e; }
.sprow.sig { background: linear-gradient(140deg, color-mix(in srgb, var(--cheese) 30%, var(--panel-2)), var(--panel-2)); box-shadow: 0 0 0 2px var(--cheese); }
.sprow .spic { font-size: 34px; line-height: 1; width: 44px; text-align: center; flex: none; }
.sprow b { display: block; font: 800 16px var(--font-display); }
.sprow small { display: block; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.sprow span:last-child { display: block; font-size: 13.5px; margin-top: 2px; }
.card .tag { white-space: nowrap; font-size: 9.5px; padding: 1px 6px; bottom: -7px; }
/* Hiệu ứng mẹo và siêu năng lực */
.board { position: relative; }
.spbanner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; display: flex; align-items: center; gap: 6px; background: rgba(20, 30, 25, .88); color: #fff; font: 800 15px var(--font-display); padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.45); animation: spb 1.1s ease-out forwards; white-space: nowrap; }
.spbanner span { font-size: 22px; }
.spbanner.sp { background: linear-gradient(90deg, #c9962e, #f7c948); color: #2a1d00; font-size: 17px; animation-duration: 1.5s; box-shadow: 0 0 0 3px #fff6c2, 0 0 30px rgba(247, 201, 72, .8); }
@keyframes spb { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%); } }
.fxhit { z-index: 4; }
.fxhit .burst { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: 34px; z-index: 6; pointer-events: none; animation: burst 1s ease-out forwards; filter: drop-shadow(0 0 6px #fff); }
.fxhit.good::after, .fxhit.bad::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: 5; pointer-events: none; animation: ring 1s ease-out forwards; }
.fxhit.good::after { box-shadow: 0 0 0 3px #7fe08a, 0 0 18px #7fe08a; }
.fxhit.bad::after { box-shadow: 0 0 0 3px #ff5a5a, 0 0 18px #ff5a5a; }
@keyframes burst { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.3); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); } 100% { opacity: 0; transform: translate(-50%, -110%) scale(1); } }
@keyframes ring { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes glow { 40% { filter: drop-shadow(0 0 10px #fff6a0) brightness(1.4); } }
.leader { position: relative; }
.fxlead .lburst { position: absolute; left: 30px; top: 50%; font-size: 30px; z-index: 6; pointer-events: none; animation: burst 1.1s ease-out forwards; }
.fxlead.good { box-shadow: 0 0 0 3px #7fe08a, var(--shadow); }
.fxlead.bad { box-shadow: 0 0 0 3px #ff5a5a, var(--shadow); animation: shake .4s; }
.fxhand { animation: handglow 1.1s ease-out; border-radius: 14px; }
@keyframes handglow { 30% { box-shadow: 0 0 0 3px var(--cheese), 0 0 24px var(--cheese); } }
@media (prefers-reduced-motion: reduce) { .spbanner, .burst, .lburst, .fxhit::after, .fxhit .art, .fxlead, .fxhand { animation-duration: .01s !important; } }

/* thẻ lá đối thủ: dạng thanh gọn ở trên cùng, không che bàn cờ */
#reveal { top: calc(8px + env(safe-area-inset-top, 0px)); width: min(94vw, 420px); }
.rv { flex-direction: row; align-items: center; width: 100%; padding: 8px 10px; gap: 10px; }
.rv.sp { border-color: #f7c948; box-shadow: 0 0 0 2px #fff6c2, 0 0 24px rgba(247,201,72,.6), 0 10px 30px rgba(0,0,0,.45); }
.rva { width: 56px; height: 56px; flex: none; position: relative; display: grid; place-items: center; font-size: 34px; background: var(--panel-2); border-radius: 12px; }
.rva .emoji { font-size: 32px; }
.rva i { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--cheese); color: #2a1d00; font: 800 12px/20px var(--font-display); font-style: normal; text-align: center; }
.rvt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.rvt small { text-align: left; }
.rvt b { font: 800 16px/1.15 var(--font-display); }
.rvt em { font-style: normal; font-size: 12px; color: var(--ink-soft); text-align: left; }

.aud { display: flex; flex-direction: column; gap: 6px; background: var(--panel-2); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.aud label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.aud input[type=range] { width: 100%; accent-color: var(--cheese); }

/* Bảng kết thúc trận: hộp nhỏ ở giữa màn hình */
.scrim.center { align-items: center; padding: 16px; }
.sheet.endmodal { width: min(100%, 330px); border-radius: 22px; padding: 18px 18px 20px; max-height: 80vh; }
.sheet.endmodal.anim { animation: popin .25s ease-out; }
@keyframes popin { from { transform: scale(.85); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet.endmodal.anim { animation: none; } }
.endmodal .win .art { width: 96px; height: 96px; }
.endmodal h2 { font-size: 26px; margin-top: 4px; }
.endmodal .sub { margin-bottom: 10px; }
.endmodal .reward { font-size: 18px; padding: 8px; align-items: center; }
.endrow { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.endrow .btn { min-width: 130px; }

/* Đổi bài đầu trận */
.mullgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; margin-bottom: 6px; }
.mullc { position: relative; padding: 0; border-radius: 12px; transition: transform .12s; }
.mullc .card { width: 100%; opacity: 1; }
.mullc.on { transform: translateY(-4px); }
.mullc.on .card { filter: grayscale(.7) brightness(.7); box-shadow: 0 0 0 3px #ff8a3a; }
.mullc .mx, .mullc .mk { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 800 12px var(--font-display); padding: 4px 8px; border-radius: 999px; white-space: nowrap; z-index: 3; }
.mullc .mx { background: #ff8a3a; color: #2a1000; } .mullc .mk { background: var(--cheese); color: #2a1d00; top: auto; bottom: 30%; }
.mullc:disabled { opacity: 1; cursor: default; }
.mullc { cursor: pointer; } .mullc.sig { cursor: default; } .mullc .card { pointer-events: none; }

/* Làn có Đồng đội: quân trước bên trái, quân sau bên phải, không đè nhau để chạm trúng từng con */
.slot.unit.paired .art { inset: 6% 34% 18% -4%; }
.slot.unit.paired .shadow { right: 40%; left: 2%; }
.backu, .backu.cat { width: 50%; right: -4px; bottom: 16px; top: auto; }
.backu.tgt { box-shadow: 0 0 0 3px var(--cheese), 0 0 10px var(--cheese); }
.poslbl { position: absolute; left: 4px; top: 30%; background: rgba(0,0,0,.65); color: #fff; font: 800 9px/1 var(--font-display); padding: 2px 5px; border-radius: 999px; z-index: 4; }
.pospick { position: absolute; inset: auto -4px 18% -4px; display: flex; flex-direction: column; gap: 4px; z-index: 9; background: rgba(15, 22, 18, .92); padding: 6px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.pospick .btn { font-size: 11px; padding: 6px 4px; white-space: nowrap; }

.pospick { position: absolute; left: 8px; right: 8px; bottom: 8px; inset-inline: 8px; top: auto; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 8px; }
.pospick span { color: #fff; font: 700 12px var(--font-display); margin-right: 2px; }
.pospick .btn { font-size: 13px; padding: 8px 12px; }
.posmark { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-size: 26px; z-index: 6; animation: pippop .6s ease-out infinite alternate; }

/* ---------- Cửa hàng: khung sự kiện bố cục đều ---------- */
.eventbox { gap: 12px; }
.evcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.evc { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-width: 0; }
.evc .card { width: 100%; height: 100%; }
.evc .card small { min-height: 3.6em; }
.evc .btn { width: 100%; }
.eventbox > .btn { width: 100%; }
.eventbox .quest { gap: 10px; }
.eventbox .quest span { font-size: 13px; line-height: 1.35; }
.eventbox .quest .btn { flex: none; }

/* ---------- Cấp độ ---------- */
.lvpill { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 5px 10px; border-radius: 999px; background: var(--panel); font: 800 13px/1 var(--font-display); color: var(--cheese); box-shadow: var(--shadow); }
.lvpill i { display: block; height: 4px; width: 46px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.lvpill i b { display: block; height: 100%; background: var(--cheese); }
.xpbar { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 700 12px var(--font-display); }
.xpbar i { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.xpbar i b { display: block; height: 100%; background: linear-gradient(90deg, var(--cheese), #ff9a3a); }
.xpbar small { color: var(--ink-soft); }

/* ---------- Độ khó bot ---------- */
.diffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.diff { background: var(--panel); border-radius: 12px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: var(--shadow); }
.diff b { font: 800 13px var(--font-display); } .diff small { font-size: 10.5px; color: var(--ink-soft); }
.diff.on { box-shadow: 0 0 0 2px var(--cheese), var(--shadow); }
.diff:disabled { opacity: .55; }

/* ---------- Thủ lĩnh khoá ---------- */
.lockheroes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.lockh { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 12px; padding: 8px 10px; }
.lockh .dart { width: 44px; height: 44px; flex: none; filter: grayscale(.6); }
.lockh > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lockh b { font-size: 14px; } .lockh small { font-size: 11.5px; color: var(--ink-soft); }
.herobox .lockh .dart { filter: none; }
.herocard.locked { opacity: .6; } .herocard.locked .dart { filter: grayscale(.8); }
.mission .mhero { display: block; font-size: 11.5px; font-weight: 700; color: var(--cheese); margin-top: 2px; }
.mission .mlv { display: block; font-size: 11.5px; font-weight: 700; color: #ff8a7a; }
.hubbar { gap: 6px; }
.hubbar h1 { font-size: 21px; white-space: nowrap; line-height: 1.1; }
.eventbox [data-a=buyEventBundle] { width: 100% !important; align-self: stretch; }
.eventbox [data-a=buyEventBundle] { max-width: none !important; }
/* sửa xung đột: lớp .block của thanh máu không được áp lên nút */
.btn.block { height: auto; max-width: none; width: 100%; border-radius: var(--r); margin-top: 0; overflow: visible; }
.btn.block:not(.primary):not(.gold):not(.side-cat):not(.side-rat) { background: var(--panel); }
.wallet span { white-space: nowrap; }
.hubbar { padding-inline: 10px; }
.hubbar h1 { font-size: 19px; }
.hubbar .icon-btn { width: 36px; height: 36px; min-width: 36px; font-size: 15px; }
.hubbar .wallet { gap: 4px; font-size: 13px; }
.hubbar .wallet span { padding: 4px 7px; }
.lvpill { padding: 4px 8px; font-size: 12px; }
.lvpill i { width: 34px; }
.zodbox { background: linear-gradient(150deg, color-mix(in srgb, #3b2a7a 40%, var(--panel)), color-mix(in srgb, #f2c230 18%, var(--panel))); }

/* Thanh đầu sảnh 2 hàng: không tràn ngang trên điện thoại hẹp hoặc chữ to */
html, body, .hub, .scroll { overflow-x: hidden; max-width: 100vw; }
.hubbar.two { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 12px 6px; }
.hubbar.two .hb1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hubbar.two .hb1 h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 22px; }
.hubbar.two .hb2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hubbar.two .lvpill { flex: 1; min-width: 0; flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; }
.hubbar.two .lvpill em { font-style: normal; white-space: nowrap; }
.hubbar.two .lvpill i { flex: 1; width: auto; height: 6px; }
.hubbar.two .lvpill small { font: 600 11px var(--font-body, inherit); color: var(--ink-soft); white-space: nowrap; }
.hubbar.two .wallet { flex: none; }
.seasonbox { background: linear-gradient(150deg, color-mix(in srgb, #2f6fbf 30%, var(--panel)), color-mix(in srgb, #f2c230 18%, var(--panel))); margin-bottom: 12px; }
.seasonbox .missions { margin: 0; }
.shopcard.oly { background: linear-gradient(140deg, color-mix(in srgb, #2f6fbf 26%, var(--panel)), color-mix(in srgb, #f2c230 20%, var(--panel))); }
.sealwin { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #c9962e, #f7c948); color: #2a1d00; border-radius: 14px; padding: 8px 12px; margin-bottom: 8px; animation: popin .4s ease-out; }
.sealwin .dart { width: 56px; height: 56px; flex: none; }
.sealwin small { display: block; font-weight: 800; } .sealwin b { font: 800 17px var(--font-display); }

.card.neutral { --side: #b07a3a; background: linear-gradient(170deg, color-mix(in srgb, #b07a3a 18%, var(--panel)), var(--panel)); box-shadow: 0 0 0 2px #b07a3a, var(--shadow); }
.card.set-dog::before { content: "🦴 CẨU CA"; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); font: 800 8.5px/1 var(--font-display); padding: 2px 6px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #8a5a2a, #d9a45a); white-space: nowrap; }
.dogbox, .shopcard.dog { background: linear-gradient(150deg, color-mix(in srgb, #8a5a2a 32%, var(--panel)), color-mix(in srgb, #d9a45a 22%, var(--panel))); margin-bottom: 12px; }

.verchip { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--panel); color: var(--cheese); font: 800 11px var(--font-display); box-shadow: var(--shadow); }
.vers { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vers li { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border-radius: 12px; padding: 10px; }
.vers li.now { box-shadow: 0 0 0 2px var(--cheese); }
.vers li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vers b { font: 800 15px var(--font-display); } .vers small { font-size: 11px; color: var(--ink-soft); font-weight: 700; } .vers span { font-size: 12.5px; }
/* Sảnh: thanh đầu và thanh tab luôn cố định, chỉ phần giữa cuộn */
.hub { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.hubbar { flex: none; position: sticky; top: 0; z-index: 20; background: var(--bg, #17221d); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.scroll { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tabs { flex: none; }
.hub { flex: none; height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }

/* Nút xem quà trên nhiệm vụ + popup quà */
.missions li.mrow { position: relative; }
.giftbtn { position: absolute; right: 10px; top: 8px; z-index: 3; padding: 4px 9px; border-radius: 999px; background: var(--cheese); color: #2a1d00; font: 800 11px var(--font-display); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.mrow .mission .mt small:first-child { padding-right: 84px; display: block; }
.giftpack { background: var(--panel-2); border-radius: 14px; padding: 10px; margin-bottom: 10px; }
.gph { display: flex; align-items: center; gap: 10px; } .gph .big { font-size: 30px; } .gph b { font: 800 16px var(--font-display); display: block; } .gph small { font-size: 12px; color: var(--ink-soft); }
.gline { background: var(--panel-2); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.gheroes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gh { display: flex; flex-direction: column; align-items: center; width: 74px; flex: none; text-align: center; }
.gh .dart { width: 56px; height: 56px; } .gh small { font-size: 10.5px; font-weight: 700; line-height: 1.2; } .gh.own { opacity: .55; }
.gsample { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lockh[data-a=heroView] { cursor: pointer; }
.lockh[data-a=heroView]:active { transform: scale(.99); }
.hvhead { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.hvhead .dart { width: 84px; height: 84px; flex: none; }
.hvhead h2 { margin: 0; } .hvhead .kline { margin: 4px 0; }

/* Nhiệm vụ thủ lĩnh & bộ chiến thuật */
.hq { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.hq li { display: flex; gap: 10px; background: var(--panel-2); border-radius: 12px; padding: 8px 10px; opacity: .7; }
.hq li.cur { opacity: 1; box-shadow: 0 0 0 2px var(--cheese); } .hq li.done { opacity: .85; }
.hqn { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font: 800 12px var(--font-display); }
.hq li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hq b { font-size: 13.5px; } .hq small { font-size: 11px; color: var(--ink-soft); } .hqrw { font-size: 12px; color: var(--cheese); font-weight: 700; }
.hqbar { display: block; height: 6px; border-radius: 3px; background: var(--panel); overflow: hidden; } .hqbar b { display: block; height: 100%; background: var(--cheese); }
.deckwrap { position: relative; }
.hqchip { position: absolute; right: 10px; bottom: 8px; z-index: 3; padding: 3px 8px; border-radius: 999px; background: var(--panel-2); color: var(--cheese); font: 800 11px var(--font-display); box-shadow: 0 0 0 1px var(--cheese); }

.skins { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; }
.skin { width: 104px; flex: none; background: var(--panel-2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.skin .dart { width: 64px; height: 64px; } .skin b { font-size: 11.5px; line-height: 1.2; } .skin small { font-size: 10px; color: var(--ink-soft); }
.skin.locked .dart { filter: grayscale(.8) opacity(.6); }
.shopcard.classp { background: linear-gradient(140deg, color-mix(in srgb, #3b82c4 22%, var(--panel)), color-mix(in srgb, #3a9c5a 20%, var(--panel))); }

.dvtoggle { display: flex; gap: 6px; margin: 6px 0 8px; }
.dline .dthumb { width: 34px; height: 34px; flex: none; display: grid; place-items: center; margin-right: 6px; }
.dline .dthumb .emoji { font-size: 22px; }
.shopcard .viewp { margin-right: 6px; white-space: nowrap; }
.shopcard { flex-wrap: wrap; }

/* nút Đóng luôn nằm ở đáy bảng, không phải kéo hết danh sách */
.sheet > .btn.block[data-a=close]:last-child { position: sticky; bottom: 0; z-index: 6; box-shadow: 0 -10px 18px var(--panel, #1f2b25); margin-top: 10px; }

/* Bảng: nội dung cuộn, chân bảng (nút Đóng) cố định */
.sheet.hasfoot { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.sheet.hasfoot > .sheetbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.sheet > .sheetfoot { flex: none; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: inherit; box-shadow: 0 -8px 16px rgba(0,0,0,.25); }
.sheet > .sheetfoot .btn { margin: 0; }
.sheet > .btn.block[data-a=close]:last-child { position: static; box-shadow: none; }
/* Bảng thủ lĩnh: chia tab */
.hvtabs { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0 10px; }
.hvsec .hvp { display: none; }
.hvsec[data-show=info] .p-info, .hvsec[data-show=quest] .p-quest, .hvsec[data-show=strat] .p-strat, .hvsec[data-show=base] .p-base { display: block; }
.explain { display: flex; flex-direction: column; gap: 4px; background: var(--panel-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.45; }
.explain b:first-child { font: 800 15px var(--font-display); }
/* Thẻ gói trong Cửa hàng: hình + chữ chiếm cả hàng trên, các nút xuống hàng dưới, canh phải */
.shopcard { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.shopcard > .big { flex: 0 0 48px; text-align: center; align-self: flex-start; }
.shopcard > div { flex: 1 1 calc(100% - 64px); min-width: 0; }
.shopcard > div b { display: block; font-size: 16px; line-height: 1.25; }
.shopcard > div small { display: block; line-height: 1.4; margin-top: 2px; }
.shopcard > .btn { flex: 0 0 auto; }
.shopcard > .btn:first-of-type { margin-left: auto; }
.shopcard > .viewp { margin-right: 0; }

/* Đổi bài đầu trận: các lá đều nhau */
.mullgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.mullgrid .mullc { position: relative; display: flex; }
.mullgrid .mullc > .card { width: 100%; height: 100%; min-height: 0; aspect-ratio: 3 / 4; }
.mullgrid .card .desc, .mullgrid .card .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mullgrid .mx, .mullgrid .keep { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
.dualbuy { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.dualrow { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 8px; }

.zset { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.zset > div { flex: 1; min-width: 0; } .zset b { display: block; } .zset small { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* Nút nổi nhiệm vụ ngày */
.fab { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 30; width: 58px; height: 58px; border-radius: 50%; background: var(--cheese); color: #2a1d00; font-size: 26px; box-shadow: 0 6px 16px rgba(0,0,0,.4); display: grid; place-items: center; }
.fab span { position: absolute; bottom: -4px; right: -4px; background: #d6262f; color: #fff; font: 800 11px var(--font-display); border-radius: 999px; padding: 2px 6px; }
.row.mm { margin-top: 8px; }
.dq { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.dq.done { box-shadow: 0 0 0 2px #3fae5a; } .dq small { color: var(--ink-soft); }
/* Ưu đãi */
.offers { margin-bottom: 12px; } .ofrow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.offer { flex: 0 0 132px; background: linear-gradient(160deg, color-mix(in srgb, #f2c230 22%, var(--panel)), var(--panel-2)); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 4px; text-align: left; position: relative; }
.offer.new::after { content: "MỚI"; position: absolute; top: 6px; right: 6px; background: #d6262f; color: #fff; font: 800 9px var(--font-display); padding: 2px 5px; border-radius: 6px; }
.offer .oic { font-size: 26px; } .offer b { font-size: 13px; line-height: 1.25; } .offer small { color: var(--cheese); font-weight: 800; }
.olist { margin: 0 0 10px; padding-left: 20px; line-height: 1.6; }

.passbar { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; background: linear-gradient(120deg, color-mix(in srgb, #8b5cf6 30%, var(--panel)), color-mix(in srgb, #f2c230 22%, var(--panel))); border-radius: 14px; padding: 10px 12px; margin: 10px 0 4px; }
.passbar span { font: 800 15px var(--font-display); } .passbar small { color: var(--cheese); font-weight: 700; }
.passbuy { display: grid; gap: 8px; margin-bottom: 8px; } .passbuy .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .passbuy small { font-weight: 600; font-size: 11.5px; opacity: .85; }
.ptiers { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ptiers li { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 6px; align-items: stretch; opacity: .6; } .ptiers li.reach { opacity: 1; }
.ptiers .pn { display: grid; place-items: center; font: 800 12px var(--font-display); background: var(--panel-2); border-radius: 8px; }
.ptiers .pc { background: var(--panel-2); border-radius: 10px; padding: 6px 8px; font-size: 11.5px; line-height: 1.35; display: flex; flex-direction: column; gap: 4px; }
.ptiers .pc.prem { background: color-mix(in srgb, #f2c230 14%, var(--panel-2)); } .ptiers .pc.ready { box-shadow: 0 0 0 2px var(--cheese); } .ptiers .pc.got { opacity: .55; }
.passbuy .btn small, .passbuy .btn b { white-space: normal; }
.ofpick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }   /* [C-pay] phần tự chọn của gói đã mua */

/* Vé Mùa: 2 cột quà, số bậc ở giữa trên một trục dọc */
.phead { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 6px; margin-top: 10px; font: 800 12px var(--font-display); color: var(--ink-soft); text-align: center; position: sticky; top: 0; z-index: 2; background: inherit; padding: 4px 0; }
.ptiers { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.ptiers::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); background: var(--panel-2); border-radius: 2px; }
.ptiers li { display: grid !important; grid-template-columns: 1fr 44px 1fr !important; gap: 6px; align-items: stretch; opacity: 1 !important; position: relative; }
.ptiers .pn { display: grid; place-items: center; z-index: 1; }
.ptiers .pn b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); font: 800 13px var(--font-display); color: var(--ink-soft); box-shadow: 0 0 0 3px var(--panel); }
.ptiers li.reach .pn b { background: var(--cheese); color: #2a1d00; }
.ptiers li.cur .pn b { background: #fff; color: #2a1d00; box-shadow: 0 0 0 3px var(--cheese); }
.ptiers .pc { min-height: 74px; border-radius: 14px; padding: 8px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--panel-2); text-align: center; position: relative; font-size: 12px; }
.ptiers .pc.prem { background: linear-gradient(160deg, color-mix(in srgb, #f2c230 22%, var(--panel-2)), var(--panel-2)); }
.ptiers .pc.lock { filter: saturate(.55); opacity: .75; }
.ptiers .pc.ready { box-shadow: 0 0 0 2px var(--cheese), 0 0 14px color-mix(in srgb, var(--cheese) 45%, transparent); cursor: pointer; animation: pulse 1.6s ease-in-out infinite; }
.ptiers .pc.got { opacity: .5; }
.ptiers li:not(.reach) .pc { opacity: .7; }
.pchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pchip { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px; }
.pchip .pic { font-size: 24px; line-height: 1; position: relative; }
.pchip .pic em { position: absolute; right: -10px; bottom: -4px; font: 800 10px var(--font-display); font-style: normal; background: #d6262f; color: #fff; border-radius: 999px; padding: 1px 5px; }
.pchip small { font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.pst { font: 800 10.5px var(--font-display); color: var(--ink-soft); }
.pst.go { background: var(--cheese); color: #2a1d00; border-radius: 999px; padding: 2px 10px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px var(--cheese), 0 0 22px color-mix(in srgb, var(--cheese) 70%, transparent); } }
/* Vé Mùa: sửa méo — hàng cố định, ô cao bằng nhau, đầu cột có nền đặc, số bậc không còn khung */
.phead { position: static; background: none; }
.ptiers li { display: flex !important; align-items: stretch; gap: 8px; min-height: 84px; }
.ptiers li > .pc { flex: 1 1 0; min-width: 0; height: auto; margin: 0 !important; box-sizing: border-box; }
.ptiers li > .pn { flex: 0 0 40px; background: none !important; border-radius: 0; padding: 0; margin: 0; }
.ptiers .pc .pst { position: absolute; top: 6px; right: 6px; }
.ptiers .pc .pst.go { position: static; margin-top: 2px; }
.ptiers .pc.lock .pst { font-size: 12px; }
.ptiers .pc { padding: 10px 8px; }
.ptiers .pc.got .pst { position: static; }
.ptiers .pc { top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; }
.pchip .pic { margin-bottom: 4px; } .pchip .pic em { bottom: -6px; }

.passpill { display: block; width: 100%; margin: 10px 0 4px; padding: 9px 12px; border-radius: 999px; text-align: center; font: 800 14px var(--font-display); background: linear-gradient(90deg, color-mix(in srgb, #8b5cf6 35%, var(--panel)), color-mix(in srgb, #f2c230 28%, var(--panel))); }
.passpill.has { box-shadow: 0 0 0 2px var(--cheese); }
.hub .scroll { padding-bottom: 96px; }
.bulk { flex: 1 1 100%; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bulk .btn { position: relative; font-size: 12px; padding: 6px 10px; }
.bulk em { position: absolute; top: -8px; right: -4px; background: #d6262f; color: #fff; font: 800 9px var(--font-display); font-style: normal; padding: 1px 4px; border-radius: 6px; }
.shopcard[data-a=packView] { cursor: pointer; }

.towerpill { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; margin: 6px 0; border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, #2f6fbf 30%, var(--panel)), color-mix(in srgb, #f2c230 20%, var(--panel))); }
.towerpill .dart { width: 44px; height: 44px; flex: none; } .towerpill b { display: block; font: 800 14px var(--font-display); } .towerpill small { color: var(--cheese); font-weight: 700; }
.tw { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column-reverse; gap: 8px; }
.tw li { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; opacity: .6; }
.tw li.open { opacity: 1; box-shadow: 0 0 0 2px var(--cheese); } .tw li.done { opacity: .85; }
.tw b { font: 800 15px var(--font-display); } .tw small { color: var(--ink-soft); font-size: 12px; } .twr { color: var(--cheese); font-weight: 700; font-size: 12.5px; }
.ptiers .pn { flex-direction: column; } .ptiers .pn small { font: 700 9.5px var(--font-display); color: var(--ink-soft); margin-top: 2px; } .ptiers .pn small i { font-style: normal; }
.lart.framed { box-shadow: 0 0 0 3px #f2c230, 0 0 12px #f2c23099; border-radius: 14px; }
.tw li .tagon { align-self: flex-start; width: auto; }
.tw li .btn { align-self: flex-start; }
.dualrow { grid-template-columns: 1fr; }
.dualrow .bulk { justify-content: flex-start; }

/* Gói bài dạng ô gọn (3 ô một hàng) */
.ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 16px; background: linear-gradient(170deg, color-mix(in srgb, var(--tc, #6b5cff) 38%, var(--panel)), var(--panel-2)); box-shadow: 0 3px 0 rgba(0,0,0,.25); text-align: center; }
.ptile .pti { font-size: 40px; line-height: 1.1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.ptile b { font: 800 13px var(--font-display); line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.ptile .ptp { background: #3fae5a; color: #fff; font: 800 13px var(--font-display); border-radius: 999px; padding: 4px 12px; box-shadow: 0 3px 0 #2a7a3d; }
.ptile .ptp.no { background: #5a6360; box-shadow: 0 3px 0 #3c4341; }
.t-base { --tc: #b87333; } .t-silver { --tc: #9aa6b8; } .t-goldp { --tc: #e0b030; } .t-tdn { --tc: #8a7bd8; } .t-mid { --tc: #d8574a; } .t-oly, .t-norse { --tc: #3f7fd0; } .t-dog { --tc: #a0703a; }
.pbuy { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .pbuy .bulk { justify-content: stretch; } .pbuy .bulk .btn { flex: 1; }

.fab.pass { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(140deg, #8b5cf6, #f2c230); color: #fff; }
.dq.row2 { flex-direction: row; align-items: center; justify-content: space-between; } .dq.row2 > div { display: flex; flex-direction: column; }
.dwrow { display: flex; gap: 6px; } .dw { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 22px; background: var(--panel); border-radius: 10px; padding: 6px 0; opacity: .45; } .dw.on { opacity: 1; box-shadow: 0 0 0 2px var(--cheese); } .dw small { font-size: 10px; }
.adban { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; margin-bottom: 14px; background: linear-gradient(110deg, #c86bdc, #e05ab8); }
.adban .adpk { font-size: 26px; letter-spacing: -8px; } .adban > div { flex: 1; min-width: 0; } .adban b { display: block; color: #fff; } .adban small { color: #fff; opacity: .9; font-size: 11.5px; }
.btn.blue { background: #2f7fe0; color: #fff; box-shadow: 0 3px 0 #1b4f99; }
.t-gem { --tc: #2f9fe0; position: relative; } .x2 { position: absolute; top: -6px; right: -4px; background: #d6262f; color: #fff; font: 800 9px var(--font-display); font-style: normal; padding: 2px 5px; border-radius: 6px; }
.adbox { display: grid; place-items: center; gap: 6px; height: 160px; background: #000; border-radius: 14px; color: #fff; margin: 10px 0; } .adbox b { font-size: 48px; }
.twhead { display: flex; gap: 12px; align-items: center; } .twhead .dart { width: 72px; height: 72px; flex: none; }
.ltag { font-style: normal; font: 800 9.5px var(--font-display); padding: 2px 6px; border-radius: 6px; margin-right: 6px; vertical-align: middle; } .ltag.foe { background: #d6262f; color: #fff; } .ltag.me { background: #3fae5a; color: #fff; }
.sheetfoot .pbuy { margin: 0 0 8px; }
.hub .scroll { padding-bottom: 170px; }

/* Viền theo độ hiếm, góc trái dưới biểu tượng hệ */
.card { border-color: var(--cc) !important; }
.card.r-l { box-shadow: 0 0 0 2px #ff5ad1, 0 0 12px #8b5cf6aa, var(--shadow) !important; }
.card.r-s { box-shadow: 0 0 10px #f29c1f66, var(--shadow); }
.card .gemr { display: none; }
.card .clsic { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-style: normal; background: var(--kc); box-shadow: 0 0 0 2px var(--panel); z-index: 2; }
.card.set-dog::before, .card.set-zod::before { top: auto; bottom: -7px; }
.card .indeck { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; background: #3fae5a; color: #fff; font: 800 9.5px var(--font-display); padding: 2px 6px; border-radius: 999px; z-index: 3; }
.card .nown { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); white-space: nowrap; background: #000a; color: #fff; font: 800 10px var(--font-display); padding: 3px 8px; border-radius: 999px; z-index: 3; }
.rlegend { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; font-size: 11px; font-weight: 700; }
.rlegend span { padding: 2px 8px; border-radius: 999px; border: 2px solid var(--c); }

.htgt { position: absolute; inset: 0; z-index: 6; border-radius: 16px; background: color-mix(in srgb, #d6262f 30%, transparent); border: 2px dashed #ff6b6b; color: #fff; font: 800 13px var(--font-display); animation: pulse 1.2s ease-in-out infinite; }
.leader { position: relative; }
.edtools { display: flex; gap: 8px; margin: 12px 0; } .edtools .btn { flex: 1; } .btn.danger { background: #5a2a2a; color: #ffd6d6; }
.fpanel { background: var(--panel-2); border-radius: 16px; padding: 12px; margin-bottom: 12px; } .fpanel h3 { margin: 0 0 8px; font: 800 16px var(--font-display); }
.frow { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: start; margin-bottom: 6px; } .frow .fl { font: 800 12px var(--font-display); color: var(--ink-soft); padding-top: 9px; }
.frow .chips { margin: 0; flex-wrap: wrap; } .rchip { border: 2px solid var(--c) !important; }
/* Xem lá: khuôn cố định, lá to ở giữa, chữ bên dưới */
.cardbig { flex-direction: column; align-items: center; text-align: center; }
.cardbig > .card { width: 200px; height: 280px; min-height: 0; flex: none; }
.cardbig > .card .art { width: 132px; height: 132px; }
.cardbig > .card .art .emoji { font-size: 72px; }
.cardbig > .card b { font-size: 15px; } .cardbig > .card small { font-size: 12px; }
.cardbig > div { width: 100%; text-align: left; }
.unitinfo { flex-direction: column; align-items: center; text-align: center; }
.unitinfo > .art { width: 160px; height: 160px; }
.unitinfo > .art .emoji { font-size: 90px; }
.cempty { text-align: center; color: var(--ink-soft); padding: 24px 0; }

/* Mặt sau lá */
.cback { position: absolute; inset: 0; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #3a5a4c 0 28%, transparent 29%), repeating-linear-gradient(45deg, #26402f 0 8px, #1c3126 8px 16px); }
.cback .cbe { font-style: normal; font-size: 30px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #f2c230; box-shadow: 0 0 0 4px #1c3126, 0 0 0 6px #f2c230; }
.cback b { font: 800 10px var(--font-display); letter-spacing: 1px; color: #f2c230; }
.cback.season { background: radial-gradient(circle at 50% 45%, #5b3fa0 0 28%, transparent 29%), repeating-linear-gradient(45deg, #3a2470 0 8px, #2a1856 8px 16px); }
.cback.season .cbe { background: linear-gradient(140deg, #f2c230, #ff7ad1); box-shadow: 0 0 0 4px #2a1856, 0 0 0 6px #f2c230, 0 0 14px #ff7ad1; }
.flip.back { position: relative; overflow: hidden; }
.ohand { display: flex; margin-top: 4px; height: 26px; }
.ohand .cback.mini { position: relative; inset: auto; width: 18px; height: 26px; border-radius: 4px; margin-right: -6px; box-shadow: 0 1px 3px #0008; border: 1px solid #f2c23088; }
.ohand .cback.mini .cbe { width: 10px; height: 10px; font-size: 7px; box-shadow: none; }

.elpanel h3 small { font: 600 11px var(--font-body, inherit); color: var(--ink-soft); }
.elslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.elslot { background: var(--panel); border-radius: 12px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed #ffffff22; }
.elslot b { font-size: 26px; } .elslot small { font-size: 11px; color: var(--ink-soft); } .elslot.lk { opacity: .5; position: static; }
.ellist { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.elrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; background: var(--panel); border-radius: 12px; padding: 8px; }
.elrow.none { opacity: .75; } .elrow .elic { font-size: 24px; text-align: center; } .elrow b { font-size: 13px; color: var(--cheese); }
.elrow small { display: block; font-size: 11px; line-height: 1.35; color: var(--ink-soft); } .elrow .elby { opacity: .7; }
.elbtn { display: flex; flex-direction: column; gap: 4px; }
.modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; } .modes small { flex: 1 1 100%; color: var(--ink-soft); font-size: 12px; }
.elchip { display: inline-flex; align-items: center; font-size: 13px; margin-right: 2px; } .elchip em { font: 800 9px var(--font-display); font-style: normal; color: var(--cheese); }
.elchip.off { opacity: .45; filter: grayscale(1); }

.elcombo { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; font-size: 11.5px; color: var(--ink-soft); }
.elcombo > b { font: 800 13px var(--font-display); color: var(--ink); } .elcombo span { background: var(--panel); border-radius: 8px; padding: 5px 8px; line-height: 1.35; }
.elcombo span.on { box-shadow: 0 0 0 2px var(--cheese); color: var(--ink); } .elcombo span b { color: var(--cheese); }
[hidden] { display: none !important; }

.anchip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sc) 35%, var(--panel)), var(--panel)); box-shadow: 0 0 0 2px var(--sc); font-size: 20px; line-height: 1; flex: none; }
.anchip em { font-style: normal; font-size: 7px; color: var(--sc); letter-spacing: -1px; }
.antabs { margin: 8px 0; } .anbag { display: flex; flex-direction: column; gap: 6px; }
.anitem { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; background: var(--panel-2); border-radius: 12px; padding: 8px; }
.anitem b { font-size: 13px; } .anitem small { display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.35; }
.anpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .anpickb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 10px; background: var(--panel); min-width: 56px; } .anpickb.on { box-shadow: 0 0 0 2px var(--cheese); } .anpickb small { font-size: 10px; } .anpickb:disabled { opacity: .4; }
.anchain { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; } .anchain li { background: var(--panel-2); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; opacity: .6; display: flex; gap: 6px; align-items: center; } .anchain li span { margin-left: auto; } .anchain li.open { opacity: 1; box-shadow: 0 0 0 2px var(--cheese); } .anchain li.done { opacity: .85; }
.anpack { display: flex; gap: 10px; align-items: center; background: linear-gradient(120deg, #3a2470, #1c3126); border-radius: 14px; padding: 12px; } .anpack .pti { font-size: 40px; } .anpack small { display: block; color: var(--ink-soft); }
.anbox { background: linear-gradient(140deg, color-mix(in srgb, #8b5cf6 30%, var(--panel)), var(--panel)); }

.fab.left { right: auto; left: 16px; } .fab.an { background: linear-gradient(140deg, #5b3fa0, #8b5cf6); color: #fff; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
/* chuỗi nhiệm vụ siêu khó */
.anchain { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.anchain li { display: grid !important; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: var(--panel-2); border-radius: 14px; padding: 10px 12px; opacity: 1 !important; font-size: 13px; }
.anchain li.lk { filter: grayscale(.6); opacity: .55 !important; position: static; } .anchain li.open { box-shadow: 0 0 0 2px var(--cheese), 0 0 14px #f2c23044; } .anchain li.done { background: color-mix(in srgb, #3fae5a 18%, var(--panel-2)); }
.anchain .acn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--font-display); background: var(--panel); box-shadow: 0 0 0 2px #ffffff22; }
.anchain li.open .acn { background: var(--cheese); color: #2a1d00; } .anchain li.done .acn { background: #3fae5a; color: #fff; }
.anchain .act { line-height: 1.35; } .anchain .act small { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.anchain .acr { display: flex; align-items: center; gap: 2px; background: var(--panel); border-radius: 999px; padding: 4px 10px; font-size: 13px; } .anchain .acr b { font: 800 13px var(--font-display); }
/* popup chọn chế độ */
.mlabel { font: 800 12px var(--font-display); color: var(--ink-soft); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.sidepick, .modepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sidecard, .modecard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; background: var(--panel-2); text-align: center; border: 2px solid transparent; }
.sidecard.on, .modecard.on { border-color: var(--cheese); box-shadow: 0 0 16px #f2c23033; background: color-mix(in srgb, #f2c230 10%, var(--panel-2)); }
.sidecard .dart { width: 56px; height: 56px; } .sidecard b, .modecard b { font: 800 15px var(--font-display); } .sidecard small, .modecard small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }
.modecard .mic { font-size: 30px; }
.mmels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; background: var(--panel-2); border-radius: 14px; padding: 10px; font-size: 12px; } .mmels em { color: var(--ink-soft); }
.mmgo { margin-top: 14px; } .btn.big { padding: 14px; font-size: 17px; }
.lockcard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 24px 12px; background: var(--panel-2); border-radius: 16px; font-size: 30px; } .lockcard b { font-size: 16px; } .lockcard small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
/* tìm trận */
.mmsearch { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; text-align: center; } .mmsearch small { color: var(--ink-soft); font-size: 12px; }
.radar { width: 150px; height: 150px; border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle, #f2c23022, transparent 70%); box-shadow: inset 0 0 0 2px #f2c23055; }
.radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cheese); animation: radar 2s ease-out infinite; opacity: 0; } .radar span + span { animation-delay: 1s; }
.radar b { font: 800 28px var(--font-display); color: var(--cheese); }
@keyframes radar { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
.mmlobby { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 10px 0 14px; }
.mmp { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--panel-2); border-radius: 16px; padding: 12px 6px; text-align: center; border: 2px solid transparent; } .mmp.ready { border-color: #3fae5a; }
.mmp .dart { width: 64px; height: 64px; display: grid; place-items: center; } .mmp .q { font: 800 34px var(--font-display); color: var(--ink-soft); } .mmp b { font: 800 14px var(--font-display); } .mmp small { font-size: 11px; color: var(--ink-soft); } .mmst { font-size: 11px; font-weight: 700; }
.mmvs { font: 900 22px var(--font-display); color: #e0566a; }
.mmcount { font: 900 72px var(--font-display); text-align: center; color: var(--cheese); animation: pulse 1s ease-in-out infinite; }
.anchain li, .anchain .act { text-align: left !important; } .anchain li.lk { justify-items: stretch; }
.cdisc { text-decoration: none; color: #7CFF9B; font-weight: 900; } .arch { color: var(--cheese) !important; } .need { font-size: 10px; color: var(--ink-soft); text-align: center; }
.anstart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; } .anstartb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--panel-2); } .anstartb .elic { font-size: 24px; } .anstartb b { font-size: 12px; } .anstartb small { font-size: 9.5px; color: var(--ink-soft); text-align: center; line-height: 1.25; }
.anbosses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .anboss { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 14px; background: var(--panel-2); text-align: center; } .anboss.done { box-shadow: 0 0 0 2px #3fae5a; } .anboss .dart { width: 56px; height: 56px; } .anboss b { font-size: 12px; } .anboss small { font-size: 10px; color: var(--ink-soft); }
.ancards { background: var(--panel); border-radius: 12px; padding: 8px; margin: 8px 0; } .ancards > small { display: block; font-size: 11px; color: var(--ink-soft); margin: 2px 0 6px; } .anrm { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rage { position: relative; display: flex; align-items: center; gap: 4px; height: 14px; margin-top: 3px; background: #ffffff14; border-radius: 999px; overflow: hidden; padding-left: 2px; } .rage b { font-size: 10px; z-index: 1; } .rage i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #e0566a, #f29c1f); border-radius: 999px; transition: width .3s; } .rage em { position: relative; z-index: 1; font: 800 9px var(--font-display); font-style: normal; color: #fff; margin-left: auto; padding-right: 6px; }
.mmels { flex-direction: column; align-items: stretch; } .mmelh { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .mmelh small, .mmelf { color: var(--ink-soft); font-size: 11px; } .anpickb small.arch { font-size: 9px; color: var(--cheese); }

/* Bộ sưu tập gọn */
.chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .chead h2 { margin: 0; }
.cprog { position: relative; flex: 0 0 120px; height: 22px; border-radius: 999px; background: var(--panel-2); overflow: hidden; display: grid; place-items: center; }
.cprog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #3fae5a, #f2c230); } .cprog b { position: relative; font: 800 11px var(--font-display); color: #fff; text-shadow: 0 1px 2px #0008; }
.settabs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; scrollbar-width: none; } .settabs::-webkit-scrollbar { display: none; }
.settab { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 74px; padding: 8px 10px; border-radius: 14px; background: var(--panel-2); border: 2px solid transparent; }
.settab span { font-size: 20px; line-height: 1; } .settab b { font: 800 11px var(--font-display); white-space: nowrap; } .settab small { font-size: 10px; color: var(--ink-soft); }
.settab.on { border-color: var(--cheese); background: color-mix(in srgb, #f2c230 12%, var(--panel-2)); } .settab.an { background: linear-gradient(140deg, color-mix(in srgb, #8b5cf6 35%, var(--panel-2)), var(--panel-2)); }
.cfilters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 6px; }
.csel { position: relative; display: block; } .csel::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-soft); font-size: 12px; }
.csel select { width: 100%; appearance: none; -webkit-appearance: none; background: var(--panel-2); color: var(--ink); border: 1px solid #ffffff1c; border-radius: 12px; padding: 10px 30px 10px 12px; font: 700 13px var(--font-body, inherit); }
.cfilters .chip { justify-self: stretch; border-radius: 12px; padding: 10px; }
.cgroup { margin: 12px 0 4px; } .cgh { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; width: 100%; text-align: left; background: var(--panel-2); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.cgh .cgi { grid-row: span 2; font-size: 24px; text-align: center; } .cgh b { font: 800 14px var(--font-display); } .cgh small { grid-column: 2; font-size: 11px; color: var(--cheese); } .cgh em { grid-row: 1 / span 2; grid-column: 3; font-style: normal; font: 800 12px var(--font-display); color: var(--ink-soft); }
.settab { max-width: 112px; } .settab b { white-space: normal; text-align: center; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anitem .perk { color: #9fd8ff !important; } .anitem .weak { color: #ffb4a8 !important; }
.anboss .bstat { font-style: normal; font-size: 10px; background: #f2c23022; color: var(--cheese); border-radius: 999px; padding: 2px 8px; margin-top: 2px; } .anboss .bstat.done { background: #3fae5a22; color: #7CFF9B; }
.spr.eli { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; } .spr.eli .elic { font-size: 26px; text-align: center; } .spr.eli small { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; } .spr.eli .perk { color: #9fd8ff; } .spr.eli .weak { color: #ffb4a8; } .weakt { font-style: normal; font-size: 10px; background: #e0566a33; color: #ffb4a8; border-radius: 999px; padding: 1px 6px; }

.edtools { display: grid !important; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; } .edtools .btn { padding: 9px 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.edtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 6px; background: var(--panel); padding: 4px; border-radius: 14px; }
.edtab { padding: 10px; border-radius: 10px; font: 800 13.5px var(--font-display); color: var(--ink-soft); } .edtab.on { background: var(--cheese); color: #2a1d00; } .edtab em { font-style: normal; background: #0003; border-radius: 999px; padding: 0 7px; margin-left: 4px; font-size: 11px; }
.explain.gift { background: linear-gradient(120deg, #5b3fa055, var(--panel-2)); box-shadow: 0 0 0 2px var(--cheese); }
.doghd { margin-top: 16px; } .doglist { display: flex; flex-direction: column; gap: 8px; } .dogrow { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; background: var(--panel-2); border-radius: 14px; padding: 8px; } .dogrow .dart { width: 56px; height: 56px; } .dogbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .dogbtns .btn { display: flex; flex-direction: column; padding: 6px; } .dogbtns small { font-size: 9.5px; opacity: .8; }

.hbtn { position: relative; border: none; padding: 0; background: transparent; } .hbtn i { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 11px; background: var(--cheese); color: #2a1d00; border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; font-weight: 900; }
.herostrip { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: linear-gradient(120deg, color-mix(in srgb, #f2c230 14%, var(--panel-2)), var(--panel-2)); border-radius: 14px; padding: 10px 12px; margin: 6px 0 10px; }
.herostrip b { font: 800 14px var(--font-display); } .herostrip span { font-size: 12px; } .herostrip small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; } .herostrip em { font-style: normal; font-size: 11px; color: var(--cheese); font-weight: 800; }
.hinfo { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--cheese); background: #0003; border-radius: 999px; padding: 2px 8px; }

/* ===== Trận đấu vừa khít màn hình, không cần cuộn ===== */
main.game { height: 100dvh; max-height: 100dvh; overflow: hidden; gap: 4px; padding: 4px 6px 0; box-sizing: border-box; }
.game .topbar h1 { font-size: 18px; } .game .topbar .icon-btn { width: 36px; height: 36px; font-size: 15px; } .game .round { font-size: 12px; padding: 4px 10px; }
.game .leader { padding: 2px 8px 2px 2px; min-height: 0; } .game .leader .lart { width: 40px; height: 40px; }
.game .board { flex: 1 1 0; min-height: 0; padding: 4px; }
.game .lane { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 0; position: relative; }
.game .cell { min-height: 0; display: flex; } .game .slot { aspect-ratio: auto; width: 100%; height: 100%; max-height: 100%; }
.game .hand { flex: 0 0 auto; height: clamp(62px, 10dvh, 92px); overflow-x: auto; overflow-y: hidden; align-items: flex-start; padding: 6px 2px 0; }
.game .hand .card { transition: transform .15s; } .game .hand .card.sel { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--cheese), var(--shadow); }
.handpeek { position: fixed; left: 50%; bottom: calc(clamp(62px, 10dvh, 92px) + 10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) scale(1.55); transform-origin: bottom center; z-index: 30; pointer-events: none; animation: peekin .18s ease-out; filter: drop-shadow(0 10px 20px #000a); }
.handpeek .card { width: 120px; }
@keyframes peekin { from { opacity: 0; transform: translateX(-50%) scale(1.2) translateY(20px); } }
/* nhãn kỹ năng khi tấn công */
.abil { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; white-space: nowrap; font: 800 10px var(--font-display); background: #000c; color: #ffe08a; border: 1px solid #f2c23088; border-radius: 999px; padding: 3px 7px; animation: abilpop .9s ease-out both; pointer-events: none; }
.abil.up { bottom: 52%; } .abil.down { top: 52%; }
@keyframes abilpop { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 25% { opacity: 1; transform: translateX(-50%) scale(1.15); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
.splashfx { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; z-index: 5; animation: splash .6s ease-out both; pointer-events: none; }
@keyframes splash { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.6); } }
/* lá bài đều kích thước trong lưới (sưu tập, mở gói, sửa bộ) */
.grid { grid-auto-rows: 1fr; } .grid .card { height: 100%; box-sizing: border-box; }
.card .cname, .card b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card small, .card .ctext { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.handpeek .card small, .handpeek .card .ctext { -webkit-line-clamp: unset; display: block; overflow: visible; }
.fab.an.locked { background: linear-gradient(140deg, #3a3550, #5b5470); font-size: 18px; } .fab.an.locked span { font-size: 9px; }

/* ===== Ảnh vẽ AI (gắn lại sau khi gộp bản update 2026-11-08) ===== */
/* Ảnh vẽ (webp) luôn nằm gọn trong khung như SVG, không tràn ra màn hình */
.art img, .rva img, .ra img, .pa img, .dart img, .mart img, .dthumb img, .vs-art img, .lart img { width: 100%; height: 100%; object-fit: contain; display: block; max-width: 100%; }

/* Môi trường: ảnh cảnh của lá phủ nền cả làn để thấy rõ làn đã đổi */
.envbg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .62; filter: saturate(1.15); }
.envfx.hasbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 40%, rgba(0,0,0,.25)); }
.envfx.flash .envbg { animation: envbgin 1.4s ease-out; }
@keyframes envbgin { 0% { opacity: 0; transform: scale(1.25); filter: brightness(2) saturate(1.4); } 35% { opacity: 1; transform: scale(1.04); } 100% { opacity: .62; transform: scale(1); } }
.envfx .ep { z-index: 1; }

/* Lá phép: ảnh lá bung giữa sân + nổ trên từng mục tiêu */
.spbanner.hasart { flex-direction: column; border-radius: 20px; padding: 8px 14px 10px; gap: 4px; animation-duration: 1.4s; }
.spbanner .spart { width: 110px; height: 110px; display: block; animation: spartpop .6s cubic-bezier(.2,1.6,.4,1); filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.spbanner .spart img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes spartpop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.fxhit .burst.artburst { width: 80%; height: 80%; font-size: 0; }
.burst.artburst img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }

/* Tư thế tấn công: ảnh lớn hơn chút khi lao lên */
.slot.unit.lunge .art img, .backu.lunge .art img { transform: scale(1.12); transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .envfx.flash .envbg, .spbanner .spart { animation: none !important; } }

/* ===== C1 · Popup chuẩn (docs/ui-spec-giao-dien.md mục 0.2): khung giữa màn, tai tab phía trên, nút ĐÓNG đỏ giữa đáy ===== */
.scrim { align-items: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, .55); z-index: 50; }
.sheetwrap { position: relative; width: min(92vw, 440px); max-width: 100%; display: flex; flex-direction: column; align-items: stretch; }
.sheetwrap.hasclose { padding-bottom: 24px; }
.sheetwrap .sheet { width: 100%; max-width: none; border-radius: 24px; max-height: 80dvh; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.sheetwrap .sheet.anim { animation: popin .18s ease-out; }
@keyframes popin { from { transform: translateY(24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.sheetclose { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); min-width: 140px; min-height: 46px; z-index: 2;
  background: #e2483d; color: #fff; border: 2px solid #8f1f17; box-shadow: 0 4px 0 #8f1f17; font: 800 17px var(--font-display); letter-spacing: .5px; text-transform: uppercase; }
.sheetclose:active { transform: translate(-50%, 2px); box-shadow: 0 2px 0 #8f1f17; }
.sheetver { position: absolute; right: 12px; bottom: 6px; font-size: 10px; opacity: .45; pointer-events: none; }
.sheettabs { display: flex; gap: 6px; padding: 0 14px; margin-bottom: -4px; position: relative; z-index: 1; }
.sheettabs .stab { flex: 1; min-height: 46px; border-radius: 16px 16px 0 0; background: var(--panel-2); font-size: 22px; opacity: .8; }
.sheettabs .stab.on { background: var(--panel); opacity: 1; transform: translateY(-4px); }
.has-ui .sheetwrap .sheet { padding: 6px 4px 10px; }
.has-ui .sheetclose { text-shadow: 0 1px 0 rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .sheetwrap .sheet.anim { animation: none; } }

/* ===== C2 · Hệ nút chung: vàng (chính) · đỏ · xanh lá · xanh dương · tím · cam (Mèo) · xám tím (Chuột) ===== */
.btn.red { background: #e2483d; color: #fff; border-color: transparent; box-shadow: 0 3px 0 #8f1f17; font-family: var(--font-display); font-weight: 800; }
.btn.green { background: #5cb85c; color: #fff; border-color: transparent; box-shadow: 0 3px 0 #2f7a33; font-family: var(--font-display); font-weight: 800; }
.btn.blue { background: #4aa3df; color: #fff; border-color: transparent; box-shadow: 0 3px 0 #23679a; font-family: var(--font-display); font-weight: 800; }
.btn.purple { background: #8a4fd0; color: #fff; border-color: transparent; box-shadow: 0 3px 0 #55278f; font-family: var(--font-display); font-weight: 800; }
.has-ui .btn.primary, .has-ui .btn.gold { color: #3a2500; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.has-ui .btn.red, .has-ui .btn.danger, .has-ui .btn.green, .has-ui .btn.blue, .has-ui .btn.purple, .has-ui .btn.side-cat, .has-ui .btn.side-rat { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.45); }
.has-ui .btn:active { transform: translateY(1px); }
/* Khung popup vẽ (nền giấy kem): bên trong popup luôn dùng bảng màu sáng ấm để chữ đọc rõ, kể cả khi máy đang chế độ tối */
.has-ui .sheetwrap .sheet { --ink: #3b2a1a; --ink-soft: #7a6248; --panel: #fff6e2; --panel-2: #f6e7c6; --line: #e3cc9c; color: var(--ink); }
.has-ui .sheetwrap .sheet h2, .has-ui .sheetwrap .sheet h3 { color: #5a3410; }
.sheetwrap.hasclose .sheet { padding-bottom: 30px; } .has-ui .sheetwrap.hasclose .sheet { padding-bottom: 26px; }

/* ===== N1 · Thanh điều hướng dưới: ĐẤU giữa nổi cao, icon vẽ ===== */
.tabs.navx { overflow: visible; z-index: 5; }
.tabs.navx button { padding: 6px 0 7px; gap: 0; }
.tabs.navx button em { font-style: normal; font-size: 11px; line-height: 1.2; }
.tabs.navx .nic { display: grid; place-items: center; width: 34px; height: 34px; font-size: 22px; transition: transform .15s; }
.tabs.navx .nic img.uiic { width: 100%; height: 100%; object-fit: contain; filter: saturate(.75) brightness(.95); }
.tabs.navx button.on .nic { transform: translateY(-3px) scale(1.12); }
.tabs.navx button.on .nic img.uiic { filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.tabs.navx button.on em { font-weight: 800; }
.tabs.navx button.mid .nic { width: 62px; height: 62px; margin-top: -30px; border-radius: 50%; font-size: 30px;
  background: radial-gradient(circle at 50% 35%, #fff3c4, #f2b630 62%, #b9781a); box-shadow: 0 4px 0 #8a5510, 0 6px 14px rgba(0,0,0,.3); border: 3px solid #fff6dd; }
.tabs.navx button.mid .nic img.uiic { width: 84%; height: 84%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.tabs.navx button.mid em { font-weight: 900; color: #b0640c; letter-spacing: .5px; }
.tabs.navx button.mid.on .nic { transform: translateY(-4px) scale(1.06); }
.tabs.navx button.mid:active .nic { transform: translateY(1px) scale(.97); box-shadow: 0 2px 0 #8a5510; }
.tabs.navx button.on::before { left: 30%; right: 30%; }
.tabs.navx button.mid::before { display: none; }

/* ===== N2 · Thanh trên: hồ sơ (ảnh thủ lĩnh trong khung theo cấp) + tiền tệ có icon vẽ ===== */
.hb2 { display: flex; align-items: center; gap: 8px; }
.pbar { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.pav { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.pav > img:not(.pfr), .pav > svg { width: 74%; height: 74%; object-fit: cover; border-radius: 50%; background: #fbe7c0; }
.pav .pfr { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); object-fit: contain; pointer-events: none; }
.pav:not(:has(.pfr)) > img, .pav:not(:has(.pfr)) > svg { width: 100%; height: 100%; border: 3px solid var(--cheese); }
.plv { position: absolute; bottom: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #3b2a1a; color: #ffd659;
  font: 900 11px/20px var(--font-display); text-align: center; border: 2px solid #ffd659; }
.pinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pname { font: 800 14px/1.1 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pinfo .lvpill { flex-direction: row; align-items: center; gap: 5px; padding: 3px 8px; }
.pinfo .lvpill i { width: 56px; height: 6px; }
.pinfo .lvpill small { font-size: 10px; color: var(--ink-soft); }
.wallet .cur { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; }
.wallet .cur img.uiic { width: 22px; height: 22px; object-fit: contain; margin: -3px 0; }
.wallet .cur .cic { font-weight: 400; }
.wallet .cur em { font-style: normal; }
@media (max-width: 380px) { .pname { max-width: 84px; } .pinfo .lvpill i { width: 40px; } .wallet .cur img.uiic { width: 18px; height: 18px; } }
.has-ui .wallet .cur { color: #ffe9b0; padding: 0 4px 0 0; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.hub > .scroll { padding-bottom: 34px; }
/* nút nổi không che nút Ghép trận: nhỏ lại + chừa chỗ cuối trang để cuộn lên khỏi vùng nút nổi */
.hub > .scroll:has(.fab) { padding-bottom: 150px; }
.hub .fab { width: 50px; height: 50px; font-size: 22px; right: 10px; }
.hub .fab.left { left: 10px; right: auto; }
.hub .fab.pass { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); }
/* nhãn ĐẤU: tách khỏi vòng tròn, chữ vàng sáng viền tối cho dễ đọc trên nền thanh tối */
.tabs.navx button.mid .nic { margin-bottom: 7px; }
.tabs.navx button.mid em { position: relative; z-index: 1; color: #ffd659; font-size: 12px;
  text-shadow: 0 1px 0 #3b2a1a, 0 0 3px #3b2a1a, 0 0 6px rgba(0,0,0,.6); }
.tabs.navx button.mid.on em { color: #fff1b0; }

/* ===== Cửa hàng: gói có banner nhân vật, hàng mua đều nhau ===== */
.shopcard.pk { display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; padding: 0 0 12px; overflow: hidden; }
.shopcard.pk > * { margin-inline: 12px; }
.shopcard.pk > .pbanner { margin: 0; }
.pbanner { position: relative; height: 132px; display: flex; justify-content: center; align-items: flex-end; gap: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(255,214,89,.55), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.25));
  border-bottom: 2px solid rgba(255,214,89,.35); }
.eventbox > .pbanner { margin: -2px -2px 8px; border-radius: 14px 14px 0 0; }
.pbanner img { height: 118px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); position: relative; }
.pbanner.n3 .pb0 { order: 2; height: 128px; z-index: 3; margin: 0 -14px; }
.pbanner.n3 .pb1 { order: 1; height: 100px; z-index: 2; transform: rotate(-6deg); }
.pbanner.n3 .pb2 { order: 3; height: 100px; z-index: 2; transform: rotate(6deg); }
.pbanner.n2 .pb0 { z-index: 2; margin-right: -12px; }
.pkhead { display: flex; align-items: center; gap: 8px; }
.pkhead .big { font-size: 26px; flex: none; }
.pkhead b { font: 800 18px/1.2 var(--font-display); }
.shopcard.pk .pkdesc { display: block; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.shopcard.pk .pbuy { margin-top: 2px; }
/* hàng mua nhiều: 3 ô bằng nhau */
.bulk { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bulk .btn { width: 100%; min-height: 40px; padding: 6px 4px; font-size: 12.5px; white-space: nowrap; }
.bulk .btn:disabled { opacity: .45; }
.has-ui .bulk .btn { color: #ffe9b0; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.has-ui .bulk em { top: -14px; right: -10px; }
.dualrow { grid-template-columns: 1fr !important; }
.pbuy > .btn.gold { width: 100%; }

/* nút ĐÓNG popup: gọn, chỉ đè nửa lên viền đáy, không che chữ */
.sheetwrap.hasclose { padding-bottom: 20px; }
.sheetclose, .has-ui .btn.red.sheetclose { box-sizing: border-box; height: 42px; min-height: 0; min-width: 128px; padding: 0 24px; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.sheetwrap.hasclose .sheet, .has-ui .sheetwrap.hasclose .sheet { padding-bottom: 30px; }

/* 4 nút vào trận: lưới 2×2 đều nhau, icon + 2 dòng chữ cùng cỡ */
.playgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.playgrid .btn { box-sizing: border-box; height: 74px; min-height: 0; margin: 0; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 800 16px/1.1 var(--font-display); white-space: nowrap; }
.playgrid .pg-i { font-size: 24px; line-height: 1; flex: none; }
.playgrid .pg-t { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.playgrid .pg-t small { font-size: 12.5px; font-weight: 700; opacity: .92; margin-top: 2px; }
.playgrid .btn[aria-disabled="true"] { color: #e8e2f0; }
.dq .dqopen { margin-top: 8px; min-height: 40px; font-size: 14px; }
.sheetclose, .has-ui .btn.red.sheetclose { bottom: -6px; } .sheetwrap.hasclose { padding-bottom: 16px; }

/* ===== NÚT TRONG POPUP: phẳng, đơn giản (ảnh khung chỉ dùng cho nút chính ngoài sảnh) ===== */
.has-ui .sheet .btn { border-image: none !important; border: 0 !important; border-radius: 14px; box-shadow: 0 3px 0 rgba(0,0,0,.18) !important; background: #efe3c8 !important; color: #3b2a1a; text-shadow: none; }
.has-ui .sheet .btn.primary, .has-ui .sheet .btn.gold { background: #f5c542 !important; color: #3b2a1a; box-shadow: 0 3px 0 #b8871c !important; }
.has-ui .sheet .btn.red, .has-ui .sheet .btn.danger { background: #e2483d !important; color: #fff; box-shadow: 0 3px 0 #8f1f17 !important; }
.has-ui .sheet .btn.green { background: #4caf50 !important; color: #fff; box-shadow: 0 3px 0 #2e7d32 !important; }
.has-ui .sheet .btn.blue { background: #3d9be0 !important; color: #fff; box-shadow: 0 3px 0 #1f5f94 !important; }
.has-ui .sheet .btn.purple { background: #8a4fd0 !important; color: #fff; box-shadow: 0 3px 0 #5a2f91 !important; }
.has-ui .sheet .btn.side-cat { background: var(--cat) !important; color: #fff; } .has-ui .sheet .btn.side-rat { background: var(--rat) !important; color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; filter: grayscale(.5); }
/* nút khoá vẫn giữ khung vẽ, chỉ mờ + xám (trước đây bỏ khung làm nút "Trọn bộ" trông như chữ trơn) */
/* nút ĐÓNG: đỏ phẳng, gọn */
.sheetclose, .has-ui .btn.sheetclose { background: #e2483d !important; color: #fff; border: 0 !important; border-image: none !important; border-radius: 14px; box-shadow: 0 3px 0 #8f1f17, 0 4px 10px rgba(0,0,0,.3) !important; }
.backbtn { margin: 0 0 8px; }
.sheetbody { overflow-x: hidden; }
.cardbig > .card { max-width: 100%; }

/* ===== KHUÔN LÁ BÀI CHUẨN (mọi chỗ ngoài bàn đấu): tỉ lệ 5:7, ảnh vuông, tên 2 dòng, mô tả 2 dòng, cỡ chữ theo bề rộng lá ===== */
:is(.grid, .flip, .evc, .rv, .cardbig, .handpeek) .card {
  aspect-ratio: 5 / 7; height: auto !important; min-height: 0 !important; box-sizing: border-box; container-type: inline-size;
  justify-content: flex-start; padding: 7% 6% 11%; overflow: visible; }
:is(.grid, .flip, .evc, .rv, .cardbig, .handpeek) .card .art { width: 80%; height: auto; aspect-ratio: 1; flex: none; }
:is(.grid, .flip, .evc, .rv, .cardbig, .handpeek) .card b { font-size: clamp(11px, 11cqw, 18px); line-height: 1.12; min-height: 2.24em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(.grid, .flip, .evc, .rv, .cardbig, .handpeek) .card small { font-size: clamp(9px, 8.5cqw, 13px); line-height: 1.2; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cardbig > .card { width: 190px; }
/* ===== XEM LÁ (cardInfo): lá giữa, tên + nhãn giữa, khung kỹ năng rõ ràng ===== */
.cardbig { gap: 14px; }
.cardbig > div > h2 { text-align: center; margin: 0; }
.cardbig > div > .sub:first-of-type { text-align: center; margin: 4px 0 10px; }
.cardbig .kline { background: rgba(120, 80, 30, .08); border: 1px solid rgba(120, 80, 30, .15); border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; }
.cardbig .kline.small { font-size: 14px; }
.cardbig > div > .sub:last-child { text-align: center; background: rgba(245, 197, 66, .22); border-radius: 999px; padding: 6px 12px; width: fit-content; margin: 6px auto 0; }
.sheet { overflow-x: hidden; } .sheet .row { gap: 8px; } .sheet .row > .btn { min-width: 0; flex: 1 1 0; margin: 0; white-space: normal; }
.sheet .row > .btn { white-space: nowrap; height: 46px; min-height: 0; padding: 0 6px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
/* màn đổi bài đầu trận: dùng khuôn lá chuẩn 5:7, tên + mô tả đọc được */
.mullgrid .mullc > .card { aspect-ratio: 5 / 7; height: auto !important; min-height: 0 !important; box-sizing: border-box; container-type: inline-size;
  justify-content: flex-start; padding: 8% 6% 12%; overflow: visible; }
.mullgrid .mullc > .card .art { width: 72%; height: auto; aspect-ratio: 1; flex: none; }
.mullgrid .mullc > .card b { font-size: clamp(11px, 11.5cqw, 15px); line-height: 1.12; min-height: 2.24em; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mullgrid .mullc > .card small { font-size: clamp(9.5px, 9.5cqw, 12px); line-height: 1.2; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mullgrid { gap: 14px 8px; }
.mullgrid .mk, .mullgrid .keep { top: 34%; }
.mullgrid .mullc > .card { aspect-ratio: auto; height: 100% !important; padding: 9px 4px 14px; }
.mullgrid .mullc > .card .art { width: 58%; }
.mullgrid .mullc > .card small { font-size: 10.5px; -webkit-line-clamp: 3; color: #5a4632; }
.mullgrid .mullc > .card b { font-size: 12px; }
.mullgrid .mullc { min-height: 150px; }
.sheetwrap:has(.mullgrid) { width: min(96vw, 460px); }

/* dòng tên thủ lĩnh trong trận: 1 dòng, rút gọn (bỏ tên gốc trong ngoặc, độ khó thành nhãn nhỏ) */
.lmeta .lname { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.lmeta .lname .lnm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lmeta .lname .ltag { flex: none; }
.lmeta .lname .lex { flex: none; font: 700 11px var(--font-body, inherit); font-style: normal; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.12); color: #e9dcc0; }
.lmeta { min-width: 0; }

/* lá đang chọn trong trận: dải ngang nằm sát trên tay bài, không che sân */
.handpeek2 { position: fixed; left: 8px; right: 8px; bottom: calc(clamp(62px, 10dvh, 92px) + 46px + env(safe-area-inset-bottom, 0px)); z-index: 30; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 16px; background: rgba(28, 22, 18, .94); border: 2px solid var(--rat);
  box-shadow: 0 6px 18px rgba(0,0,0,.5); animation: peekin .15s ease-out; max-width: 520px; margin: 0 auto; }
.handpeek2.cat { border-color: var(--cat); }
.handpeek2 .pk-cost { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #7ec4e8; color: #0c2f45; font: 800 16px var(--font-display); }
.handpeek2.rat .pk-cost { background: var(--cheese); color: #2a1d00; }
.handpeek2 .pk-art { flex: none; width: 52px; height: 52px; } .handpeek2 .pk-art img { width: 100%; height: 100%; object-fit: contain; }
.handpeek2 .pk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.handpeek2 .pk-txt b { color: #fff; font: 800 15px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handpeek2 .pk-txt small { color: #e9dcc0; font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.handpeek2 .pk-st { flex: none; display: flex; gap: 4px; }
.handpeek2 .pk-st i { font-style: normal; font: 800 14px var(--font-display); min-width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.handpeek2 .pk-st .a { background: #d9822b; } .handpeek2 .pk-st .h { background: #c8323c; }
.handpeek2 .pk-st .t { border-radius: 999px; padding: 0 8px; background: #8a4fd0; font-size: 11px; }
.handpeek2 { bottom: calc(clamp(62px, 10dvh, 92px) + 6px + env(safe-area-inset-bottom, 0px)); padding: 4px 10px 4px 6px; } .handpeek2 .pk-art { width: 46px; height: 46px; }
/* nhãn Giữ / Đổi ở màn đổi bài: chip nhỏ trên mép lá, không che ảnh và tên */
.mullgrid .mullc .mk, .mullgrid .mullc .mx { top: auto; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; padding: 3px 9px; box-shadow: 0 2px 4px rgba(0,0,0,.3); z-index: 4; }
.mullgrid .mullc.sig .card .tag { display: none; }
.mullgrid .mullc.sig .card { box-shadow: 0 0 0 3px var(--cheese), 0 0 14px rgba(245,197,66,.6); }
/* tay bài trong trận: mọi lá tự chia đều bề ngang, không chồng, không cuộn ngang; lá gọn (ảnh + giá + công/máu) — chi tiết xem ở dải lá đang chọn */
.game .hand { display: flex; gap: 4px; overflow: visible; padding: 8px 4px 0; justify-content: center; }
.game .hand .card { flex: 1 1 0; min-width: 0; max-width: 78px; width: auto; height: calc(100% - 4px); aspect-ratio: auto; padding: 2px 2px 0; overflow: visible; container-type: normal; }
.game .hand .card .art { width: 100%; height: 100%; flex: 1; min-height: 0; }
.game .hand .card .art img { width: 100%; height: 100%; object-fit: contain; }
.game .hand .card b, .game .hand .card small, .game .hand .card .tag, .game .hand .card .clsic { display: none; }
.game .hand .card .cost { width: 22px; height: 22px; font-size: 13px; line-height: 22px; top: -7px; left: -4px; }
.game .hand .card .atk, .game .hand .card .uhp { bottom: 2px; transform: scale(.8); }
.game .hand .card .atk { left: -2px; } .game .hand .card .uhp { right: -2px; }
.handpeek2 { pointer-events: auto; cursor: pointer; }
.handpeek2 .pk-more { flex: none; color: #ffd659; font-size: 18px; font-weight: 800; }
/* ===== ĐẤU gọn 1 màn: 2 thủ lĩnh là nút đổi bộ ===== */
.vsbox { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; margin: 2px 0 6px; }
.vsbox .vs { font: 900 28px var(--font-display); color: #e2483d; text-shadow: 0 2px 0 #000; }
.vsside { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 6px 4px 8px; border-radius: 18px; background: var(--panel); border: 2px solid transparent; }
.vsside.cat { border-color: color-mix(in srgb, var(--cat) 70%, transparent); } .vsside.rat { border-color: color-mix(in srgb, var(--rat) 70%, transparent); }
.vsside .vs-art { width: min(30vw, 120px); height: min(30vw, 120px); }
.vsside b { max-width: 100%; font: 800 14px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.vsside small { max-width: 100%; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsside em { font-style: normal; font-size: 11px; font-weight: 700; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(255,214,89,.16); color: #ffd659; }
.pane .label { margin: 4px 0 6px; }
.playgrid { margin-top: 10px; }
.playgrid .btn { height: 64px; }
/* popup chọn bộ: tab phe + nút sửa */
.pdtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 4px 0 10px; }
.pdtab { min-height: 40px; border-radius: 12px; background: rgba(120,80,30,.1); font: 800 14px var(--font-display); color: #5a4632; }
.pdtab.on { background: #f5c542; color: #3b2a1a; box-shadow: 0 3px 0 #b8871c; }
.pdlist { display: flex; flex-direction: column; gap: 8px; }
.pdrow { display: flex; align-items: center; gap: 6px; }
.pdrow .deckrow { flex: 1; min-width: 0; margin: 0; }
.pdrow.on .deckrow { box-shadow: 0 0 0 3px var(--cheese); }
.pdrow .deckrow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdrow .pdedit { flex: none; height: 44px; padding: 0 10px; font-size: 13px; }
.deckrow em.ok { color: #2e7d32; font-weight: 700; }
/* ĐẤU: nút tròn (Vé Mùa, Nhiệm vụ, Ấn) nằm thành hàng trong trang thay vì nổi → không phải chừa đáy, không cần cuộn */
.hub > .scroll:has(.playgrid) { padding-bottom: 12px; }
.pane:has(.playgrid) { text-align: center; }
.pane:has(.playgrid) > * { text-align: left; }
.pane:has(.playgrid) > .fab, .hub .pane:has(.playgrid) > .fab.pass, .hub .pane:has(.playgrid) > .fab.left { position: relative; inset: auto; display: inline-grid; vertical-align: middle; margin: 10px 8px 0; width: 48px; height: 48px; }
.pane:has(.playgrid) > .hint.center { text-align: center; margin-top: 6px; }
.vsside .vs-art { width: min(30vw, 15dvh, 120px); height: min(30vw, 15dvh, 120px); }
.pane:has(.playgrid) { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.pane:has(.playgrid) > * { grid-column: 1 / -1; }
.pane:has(.playgrid) > .fab { grid-column: auto; justify-self: center; margin: 10px 0 0; }
.vsside .vs-art { width: min(30vw, 14dvh, 120px); height: min(30vw, 14dvh, 120px); } .vsside { padding: 4px 4px 6px; }
.pane:has(.playgrid) { grid-template-columns: 64px 1fr 64px; grid-auto-flow: row dense; }
.pane:has(.playgrid) > .fab.pass { grid-column: 1; } .pane:has(.playgrid) > .fab:not(.pass):not(.left) { grid-column: 3; } .pane:has(.playgrid) > .fab.left { grid-column: 1; }
.pane:has(.playgrid) > .hint.center { grid-column: 2; align-self: center; margin: 10px 0 0; font-size: 12.5px; }
/* ===== ĐẤU v3: vừa màn thấp (~650px). Nút tròn lên cùng dòng "Độ khó"; thành tích dưới chữ VS; ảnh co theo chiều cao ===== */
.pane:has(.playgrid) { grid-template-columns: 1fr auto auto auto; grid-auto-flow: row; column-gap: 8px; }
.pane:has(.playgrid) > .vsbox { grid-row: 1; grid-column: 1 / -1; }
.pane:has(.playgrid) > .label { grid-row: 2; grid-column: 1; align-self: center; margin: 6px 0; }
.pane:has(.playgrid) > .fab.left { grid-row: 2; grid-column: 2; }
.pane:has(.playgrid) > .fab.pass { grid-row: 2; grid-column: 3; }
.pane:has(.playgrid) > .fab:not(.pass):not(.left) { grid-row: 2; grid-column: 4; }
.pane:has(.playgrid) > .fab { margin: 4px 0; width: 42px; height: 42px; font-size: 20px; justify-self: end; }
.pane:has(.playgrid) > .fab span { font-size: 10px; padding: 0 5px; min-width: 0; bottom: -6px; right: -8px; }
.pane:has(.playgrid) > .diffs { grid-row: 3; grid-column: 1 / -1; }
.pane:has(.playgrid) > .playgrid { grid-row: 4; grid-column: 1 / -1; }
.pane:has(.playgrid) > .hint.center { display: none; }
.vsbox .vs { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.vsbox .vs small { font: 700 11px var(--font-body, inherit); color: var(--ink-soft); text-shadow: none; margin-top: 4px; white-space: nowrap; }
.vsside .vs-art { width: clamp(64px, calc(100dvh - 590px), 120px); height: clamp(64px, calc(100dvh - 590px), 120px); }
.hub > .scroll:has(.playgrid) { padding-bottom: 34px; }   /* chừa chỗ nút ĐẤU tròn nhô lên */
.diffs .diff { padding-top: 6px; padding-bottom: 6px; }
/* ĐẤU: Vé Mùa (trái) + Nhiệm vụ (phải) là nút nổi hai bên, ngay trên thanh điều hướng, cạnh nút ĐẤU tròn; trang chừa đáy 44px nên không che nút */
.hub .pane:has(.playgrid) > .fab, .hub .pane:has(.playgrid) > .fab.pass, .hub .pane:has(.playgrid) > .fab.left {
  position: fixed; inset: auto; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; margin: 0; z-index: 20; }
.hub .pane:has(.playgrid) > .fab.pass { left: 12px; right: auto; }
.hub .pane:has(.playgrid) > .fab:not(.pass):not(.left) { right: 12px; left: auto; }
.hub .pane:has(.playgrid) > .fab.left { left: 62px; right: auto; }
.hub > .scroll:has(.playgrid) { padding-bottom: 46px; }
.pane:has(.playgrid) > .label { grid-column: 1 / -1; }
.vsside .vs-art { width: clamp(60px, calc(100dvh - 600px), 120px); height: clamp(60px, calc(100dvh - 600px), 120px); }
.hub .pane:has(.playgrid) > .fab span { top: -8px; bottom: auto; right: -10px; }
/* dải lá đang chọn nằm TRONG khung bước, thay hàng 4 bước (không đè năng lượng / sân) */
.phase .handpeek2 { position: static; inset: auto; margin: 0 0 6px; max-width: none; padding: 4px 8px 4px 6px; box-shadow: none; animation: none; background: rgba(0,0,0,.35); }
.phase.haspk .steps { display: none; }
.phase .handpeek2 .pk-art { width: 40px; height: 40px; }
.phase .handpeek2 .pk-txt b { font-size: 14px; } .phase .handpeek2 .pk-txt small { font-size: 12px; }
#newver { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 90; padding: 7px 14px; border-radius: 999px; background: #3d9be0; color: #fff; font: 800 13px var(--font-display); box-shadow: 0 4px 12px rgba(0,0,0,.4); border: 0; }

/* Hàng mua gói: 4 nút nhỏ màu (×1 ×3 ×5 ×10) */
.buy4 { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.buy4 .btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 46px; padding: 6px 2px 5px; border: 0; border-radius: 10px; color: #fff; background-image: none !important; text-shadow: 0 1px 0 rgba(0,0,0,.35); white-space: nowrap; }
.buy4 .btn b { font: 900 15px/1 var(--font-display); }
.buy4 .btn small { font: 700 11px/1.1 var(--font-body, sans-serif); opacity: .95; }
.buy4 .bk0 { background: #3aa655 !important; box-shadow: 0 3px 0 #23753a; }
.buy4 .bk1 { background: #2f86d6 !important; box-shadow: 0 3px 0 #1d5d99; }
.buy4 .bk2 { background: #8a4fd8 !important; box-shadow: 0 3px 0 #5e319c; }
.buy4 .bk3 { background: #ee8a1c !important; box-shadow: 0 3px 0 #b05f08; }
.buy4 .btn:active { transform: translateY(2px); box-shadow: none; }
.buy4 .btn:disabled { opacity: .45; filter: none; }
.buy4 em { top: -7px; right: -3px; }
.buy4 em { position: absolute; background: #d6262f; color: #fff; font: 800 9px var(--font-display); font-style: normal; padding: 1px 4px; border-radius: 6px; text-shadow: none; }
.pbuy .buy4 { width: 100%; }

/* Trận: lá đang chọn + nút Xong cùng một hàng; khung hướng dẫn giữ chiều cao cố định để sân không nhảy (kiểu PvZ: năng lượng + Xong luôn lộ) */
.game .phase { min-height: 112px; justify-content: center; }
.phase.haspk { flex-direction: row; align-items: stretch; gap: 6px; }
.phase.haspk .handpeek2 { flex: 1 1 auto; min-width: 0; margin: 0; align-items: center; }
.phase.haspk .prow { flex: 0 0 auto; }
.phase.haspk .phint { display: none; }
.phase.haspk .handpeek2 .pk-art { width: 52px; height: 52px; }
.phase.haspk .handpeek2 .pk-txt small { -webkit-line-clamp: 3; line-clamp: 3; }
/* dải lá trong khung: ảnh + công/máu thành cột trái, chữ chiếm phần còn lại */
.phase.haspk .handpeek2 { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: 1fr auto; column-gap: 8px; row-gap: 2px; position: relative; padding: 5px 22px 5px 6px; }
.phase.haspk .handpeek2 .pk-art { grid-area: 1 / 1; width: 56px; height: 52px; justify-self: center; }
.phase.haspk .handpeek2 .pk-st { grid-area: 2 / 1; justify-content: center; gap: 2px; }
.phase.haspk .handpeek2 .pk-st i { min-width: 24px; height: 22px; font-size: 13px; }
.phase.haspk .handpeek2 .pk-txt { grid-area: 1 / 2 / 3 / 3; justify-content: center; }
.phase.haspk .handpeek2 .pk-cost { position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; font-size: 14px; z-index: 1; }
.phase.haspk .handpeek2 .pk-more { position: absolute; right: 6px; top: 4px; }
/* Gói Bọ Cạp: tiêu đề phe rõ ràng thay nút vàng cũ; nút thiếu tiền vẫn bấm được (báo "Chưa đủ Ngọc") */
.zodbuyh { font: 800 15px/1.2 var(--font-display); color: #ffe9b0; text-shadow: 0 1px 0 rgba(0,0,0,.4); margin-top: 6px; }
.zodbuyh b { color: #ffd23f; }
.buy4 .btn.poor { opacity: .6; filter: saturate(.7); }
.regionb { margin-left: 8px; font-size: 11px; padding: 3px 9px; vertical-align: middle; }
/* ===== Thanh trên mới: tiền tệ · thẻ hồ sơ · Vé Mùa · cài đặt ===== */
.hb-new { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 10px 4px; position: relative; }
.curbar { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px; }
.curbar .cur { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--panel); border-radius: 999px; padding: 6px 8px; font: 800 13px var(--font-display); color: var(--ink); min-width: 0; white-space: nowrap; }
.curbar .cur.lv { gap: 6px; justify-content: flex-start; } .curbar .cur.lv em { font-style: normal; color: var(--cheese); } .curbar .cur.lv i { flex: 1; height: 7px; background: #0004; border-radius: 9px; overflow: hidden; } .curbar .cur.lv i b { display: block; height: 100%; background: var(--cheese); } .curbar .cur.lv small { font-size: 10px; opacity: .8; }
.profrow { display: grid; grid-template-columns: 1.55fr 1fr; gap: 8px; padding-right: 0; }
.profcard { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; background: linear-gradient(110deg, color-mix(in srgb, var(--cat) 30%, var(--panel)), var(--panel-2)); border-radius: 16px; padding: 6px 10px 6px 6px; min-width: 0; }
.profcard .pinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .profcard .pinfo b { font: 800 15px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptags { display: flex; gap: 4px; flex-wrap: wrap; } .ptags em { font-style: normal; font-size: 11px; font-weight: 800; background: #0003; border-radius: 999px; padding: 2px 7px; } .ptags .tro { color: #ffd76a; }
.bang { position: absolute; top: -6px; right: -4px; width: 20px; height: 20px; transform: rotate(45deg); background: #3fae5a; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-weight: 900; color: #fff; box-shadow: 0 2px 4px #0006; } .bang::first-letter { display: inline-block; }
.passcard { display: flex; flex-direction: column; justify-content: center; gap: 4px; background: linear-gradient(135deg, #f2c230, #e09a1a); color: #3a2400; border-radius: 16px; padding: 6px 10px; text-align: left; position: relative; }
.passcard b { font: 900 13px var(--font-display); letter-spacing: .5px; } .passcard .pl { display: flex; align-items: center; gap: 6px; } .passcard .pl em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #2a6fd6; color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 12px; } .passcard .pl i { flex: 1; height: 8px; background: #0005; border-radius: 9px; overflow: hidden; } .passcard .pl i b { display: block; height: 100%; background: #fff; }
.gearb { position: absolute; right: 12px; bottom: -40px; width: 40px; height: 40px; border-radius: 50%; background: var(--panel); font-size: 19px; box-shadow: var(--shadow); z-index: 25; }
/* khung ảnh đại diện */
.avf { position: relative; display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; padding: 4px; box-sizing: border-box; flex: none; background: #6b4a2b; box-shadow: inset 0 0 0 2px #a8794b; }
.avf .avi { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #0003; display: block; }
.avf.big { width: 96px; height: 96px; border-radius: 22px; padding: 6px; } .avf.big .avi { border-radius: 16px; }
.avf.f_tienphong { background: linear-gradient(135deg, #7fd3ff, #3b6fd6); box-shadow: inset 0 0 0 2px #cfefff; }
.avf.f_tanbinh { background: linear-gradient(135deg, #9be37a, #3e9a52); }
.avf.f_dong { background: linear-gradient(135deg, #e0a070, #8a4f24); box-shadow: inset 0 0 0 2px #f3c39b; }
.avf.f_bac { background: linear-gradient(135deg, #f2f5f8, #8e9aa6); box-shadow: inset 0 0 0 2px #fff; }
.avf.f_vang { background: linear-gradient(135deg, #ffe48a, #c88a12); box-shadow: inset 0 0 0 2px #fff3c4, 0 0 10px #f2c23088; }
.avf.f_chienbinh { background: linear-gradient(135deg, #ff8a8a, #a3242f); }
.avf.f_diethan { background: conic-gradient(from 0deg, #ffd34d, #ff7a1a, #ffd34d, #fff1a8, #ffd34d); box-shadow: 0 0 12px #ffb300aa; }
.avf.f_chienthan { background: conic-gradient(#ff6a3d, #ffd34d, #6ee7ff, #b98bff, #ff6a3d); box-shadow: 0 0 12px #b98bffaa; }
.avf.f_ungho { background: linear-gradient(135deg, #ff9ed2, #b03f8f); box-shadow: inset 0 0 0 2px #ffd3ec; }
@media (prefers-reduced-motion: no-preference) { .avf.f_diethan, .avf.f_chienthan { animation: frspin 6s linear infinite; } .avf.f_diethan .avi, .avf.f_chienthan .avi { animation: frspin 6s linear infinite reverse; } }
@keyframes frspin { to { transform: rotate(360deg); } }
.leader .lart.avf { width: 44px; height: 44px; padding: 3px; }
/* popup Hồ sơ & Cài đặt */
.ptabs { display: flex; gap: 8px; justify-content: center; margin: -4px 0 10px; } .ptab { width: 72px; height: 48px; border-radius: 16px 16px 6px 6px; background: var(--panel-2); font-size: 22px; opacity: .7; } .ptab.on { background: var(--cheese); opacity: 1; transform: translateY(-3px); }
.pbox { display: flex; flex-direction: column; gap: 10px; }
.ppname { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, #f6b463, #e48a3a); color: #3a1d00; border-radius: 14px; padding: 8px 10px; } .ppname b { flex: 1; text-align: center; font: 900 17px var(--font-display); } .ppname .input { flex: 1; } .pen { width: 36px; height: 36px; border-radius: 50%; background: #e05aa6; font-size: 16px; }
.ppav { display: grid; place-items: center; }
.avgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .avopt { aspect-ratio: 1; border-radius: 12px; background: var(--panel-2); padding: 3px; } .avopt.on { box-shadow: 0 0 0 3px var(--cheese); }
.frgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fropt { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--panel-2); border-radius: 14px; padding: 8px 4px; } .fropt b { font-size: 11px; } .fropt small { font-size: 9.5px; color: var(--ink-soft); text-align: center; } .fropt.off { opacity: .45; } .fropt.on { box-shadow: 0 0 0 3px var(--cheese); }
.pstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pstats span { background: var(--panel-2); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; } .pstats small { font-size: 11px; color: var(--ink-soft); } .pstats b { font: 800 16px var(--font-display); } .pstats .up { color: #6fdc8c; } .pstats .dn { color: #ff8a8a; }
.pid { font-size: 11px; color: var(--ink-soft); background: transparent; text-align: center; padding: 4px; word-break: break-all; }
.setblk { background: var(--panel-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } .setblk.row { flex-direction: row; justify-content: space-between; align-items: center; } .setblk label { display: flex; flex-direction: column; gap: 4px; font-weight: 800; } .setblk label b { color: var(--cheese); }
.tick { width: 34px; height: 34px; border-radius: 9px; background: var(--panel); font-weight: 900; color: #3fae5a; font-size: 20px; } .tick.on { background: #fff; }
.setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .setb { background: linear-gradient(180deg, #ffd96a, #f2b630); color: #3a2400; font-weight: 800; }
.gbtn { background: #fff; color: #333; font-weight: 800; } .commb { background: #5865f2; color: #fff; font-weight: 800; } .pver { text-align: right; font-size: 10px; opacity: .6; margin: 0; }
/* ===== Chống tràn ngang trong popup Hồ sơ & Cài đặt (mọi cỡ máy) ===== */
.pbox, .pbox * { box-sizing: border-box; } .pbox { width: 100%; min-width: 0; overflow-x: hidden; }
.setgrid, .pstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .avgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.setb { min-width: 0; width: 100%; white-space: normal; line-height: 1.2; padding: 12px 6px; font-size: clamp(12px, 3.6vw, 15px); }
.setb:last-child:nth-child(odd) { grid-column: 1 / -1; }
.setblk input[type=range] { width: 100%; min-width: 0; }
.fropt, .avopt, .pstats span { min-width: 0; } .fropt b, .fropt small { max-width: 100%; overflow-wrap: anywhere; }
.ppname { min-width: 0; } .ppname .input { min-width: 0; width: 100%; }
html, body { overflow-x: hidden; }
.pbox .btn.gbtn { background: #fff; color: #1f1f1f; box-shadow: 0 2px 0 #0003; } .pbox .btn.commb { background: #5865f2; color: #fff; }
.topup .x2, .x2 { right: 4px !important; max-width: calc(100% - 8px); }
.ebar { display: inline-block; width: clamp(60px, 22vw, 110px); height: 10px; border-radius: 9px; background: #0005; overflow: hidden; vertical-align: middle; } .ebar b { display: block; height: 100%; background: linear-gradient(90deg, #ffd34d, #ff9a1a); } .ebar.pop { animation: abilpop .5s ease-out; }
.sheet .row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .sheet .row > .btn { min-width: 0; width: 100%; white-space: normal; line-height: 1.2; font-size: clamp(12px, 3.7vw, 15px); padding-left: 6px; padding-right: 6px; }
.roletag { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px; margin: 2px 0; white-space: nowrap; } .roletag.r-atk { background: #e0566a33; color: #ffb4a8; } .roletag.r-sup { background: #3f8ee033; color: #9fd0ff; } .roletxt { font-size: 12px; margin: 2px 0 6px; }
.roletag { font-style: normal; }
.roletag.r-def { background: #3fae5a33; color: #9ff0b4; } .roletag.r-sup { background: #f2c23033; color: #ffe08a; } .roletag.r-atk { background: #e0566a33; color: #ffb4a8; }
.skl { display: flex; flex-direction: column; gap: 2px; margin: 3px 0; } .skl small { font-size: 11px; line-height: 1.35; } .skl small.off { opacity: .55; } .elrole { font-style: normal; font-size: 10px; background: #0003; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.avf.f_kimcuong { background: conic-gradient(#bfefff, #6fd3ff, #e6f9ff, #6fd3ff, #bfefff); box-shadow: 0 0 12px #6fd3ffaa; } .avf.f_huyenthoai { background: conic-gradient(#ff5fa2, #ffd34d, #6fffb0, #6fd3ff, #b98bff, #ff5fa2); box-shadow: 0 0 14px #ffd34daa; }
@media (prefers-reduced-motion: no-preference) { .avf.f_kimcuong, .avf.f_huyenthoai { animation: frspin 6s linear infinite; } .avf.f_kimcuong .avi, .avf.f_huyenthoai .avi { animation: frspin 6s linear infinite reverse; } }
/* icon tiền tệ vẽ trong thanh trên mới */
.curbar .cur > span { display: inline-grid; place-items: center; } .curbar .cur .uiic { width: 20px; height: 20px; object-fit: contain; }
/* nút Cài đặt nằm trong hàng hồ sơ (không nổi đè lên nút đầu trang như Mở gói tặng) */
.hb-new .profrow { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) 40px; } .hb-new .gearb { position: static; align-self: center; width: 40px; height: 40px; }
/* thanh trên cũ: chạm avatar mở Hồ sơ */
.pbtn { background: none; border: 0; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; display: flex; min-width: 0; }
.avf .avi img, .avf .avi svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.thsel { display: flex; gap: 6px; } .thsel .chip.on { background: var(--cheese, #f2c230); color: #3a1d00; font-weight: 800; }
.avopt { overflow: hidden; padding: 3px; } .avopt img, .avopt svg { width: 100%; height: 100%; object-fit: contain; display: block; }
/* avatar tách skin (11/11): ô tải ảnh, ảnh tự tải lên phủ kín ô, avatar khoá xám + số màn chiến dịch */
.avopt { position: relative; } .avopt img.avup, .avi img.avup, .pav img.avup { object-fit: cover; border-radius: 10px; width: 100%; height: 100%; display: block; }
.avopt.avload { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border: 2px dashed var(--line, rgba(0,0,0,.25)); }
.avopt.avload > span { font-size: 26px; line-height: 1; } .avopt.avload small { font-size: 10px; font-weight: 700; margin-top: 2px; text-align: center; }
.avopt.avload img.avup { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); opacity: .9; } .avopt.avload img.avup + small { position: absolute; bottom: 2px; left: 0; right: 0; background: rgba(0,0,0,.55); color: #fff; border-radius: 0 0 8px 8px; }
.avopt.off > :not(.avlock) { filter: grayscale(1) brightness(.75); opacity: .6; } .avopt .avlock { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 10px; font-weight: 800; text-align: center; }
.thsel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .thsel .chip { width: 100%; min-width: 0; padding: 8px 4px; }

/* nút ĐÓNG căn giữa bằng translateX: khi bấm phải giữ -50% (luật .has-ui .btn:active làm nút nhảy sang phải) */
.sheetclose:active, .has-ui .btn.sheetclose:active, .has-ui .btn.red.sheetclose:active { transform: translate(-50%, 2px); }
/* hình gói & ngọc vẽ sẵn */
.ptile .pti .uiic { width: 58px; height: 58px; object-fit: contain; display: block; }
.pkhead .big .uiic { width: 44px; height: 44px; object-fit: contain; vertical-align: middle; }
.adban .adpk .uiic { width: 54px; height: 54px; object-fit: contain; display: block; transform: rotate(-8deg); }
/* hàng ưu đãi kéo ngang: ẩn thanh cuộn của trình duyệt */
.ofrow { scrollbar-width: none; } .ofrow::-webkit-scrollbar { display: none; }

/* THANH THỦ LĨNH TRONG TRẬN: trái = ảnh đại diện người chơi, phải = thủ lĩnh đứng trên khung, máu nằm trong khung */
.leader .lav { flex: none; width: 48px; height: 48px; display: grid; place-items: center; }
.leader .lav .avf.ingame { width: 46px; height: 46px; }
.leader { padding-right: 96px !important; }
.leader .lhero { position: absolute; right: 4px; bottom: 2px; width: 88px; height: calc(100% + 22px); border: 0; padding: 0; background: none; cursor: pointer; z-index: 3; display: block; }
.leader.top .lhero { height: calc(100% - 2px); }
.leader .lhero .lhimg { position: absolute; inset: 0 0 12px; display: block; }
.leader .lhero .lhimg img, .leader .lhero .lhimg svg { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.leader .lhero .hp { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 20px; background: rgba(20,14,10,.78); border: 2px solid rgba(255,255,255,.18); border-radius: 999px; padding: 2px 9px 2px 6px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.leader .lhero .hp > span:first-child { font-size: 13px; }
.leader.hurt .lhero .lhimg { animation: shake .4s; }

/* Bảng xếp hạng */
.rankb { margin-top: 8px; }
.rklist { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.rkrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); }
.rkrow .rkn { grid-row: span 2; font: 800 18px var(--font-display); text-align: center; }
.rkrow b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkrow small { grid-column: 2; color: var(--ink-soft); font-size: 11px; }
.rkrow em { grid-row: 1 / span 2; grid-column: 3; font: 800 15px var(--font-display); font-style: normal; color: #c98a10; }
.rkrow.me { outline: 2px solid #f2c230; background: color-mix(in srgb, #f2c230 18%, var(--panel-2)); }
.rkmine { position: sticky; bottom: 0; padding-top: 4px; }
/* [#14] Top 100: ảnh đại diện + khung Đua Top Ra Mắt */
.rkrow.av { grid-template-columns: 34px 40px minmax(0, 1fr) auto; }
.rkrow.av .rkav { grid-row: span 2; grid-column: 2; width: 40px; height: 40px; padding: 3px; border-radius: 11px; }
.rkrow.av .rkav .avi { border-radius: 8px; display: grid; place-items: center; font-size: 20px; }
.rkrow.av b, .rkrow.av small { grid-column: 3; }
.rkrow.av em { grid-column: 4; }
.rkrace { margin: 6px 0 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #f2c230 14%, var(--panel-2)); box-shadow: inset 0 0 0 2px #e0a92b; font-size: 13px; }
.rkrace p { margin: 3px 0; }
.rkrace .rkrt { font: 800 16px var(--font-display); color: #b8750c; }
.rkgift { list-style: none; padding: 0; margin: 6px 0 2px; display: grid; gap: 3px; font-size: 12px; }
.rkgift li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 6px; }
.rkgift span { font-weight: 800; }
.rkgift em { font-style: normal; color: var(--ink-soft); }
.rksub { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }

/* SỰ KIỆN & ĐĂNG NHẬP 7 NGÀY */
.evban { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 10px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; color: #fff; background: linear-gradient(110deg, #e0563f, #f2a03a 60%, #f2c230); box-shadow: 0 3px 0 #a5402d; }
.evban .evic { font-size: 30px; flex: none; } .evban .evt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.evban b { font: 800 15px var(--font-display); } .evban small { font-size: 11px; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evban .evdot { flex: none; font-style: normal; background: #d6262f; color: #fff; font: 800 12px var(--font-display); border-radius: 999px; padding: 3px 8px; }
.evban .evgo { flex: none; font-style: normal; background: rgba(255,255,255,.25); border-radius: 999px; padding: 4px 10px; font: 800 12px var(--font-display); }
.evhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .evhead > div { flex: 1; min-width: 0; } .evhead h2 { margin: 0; } .evhead small { color: var(--ink-soft); font-size: 11.5px; }
.evic.big { font-size: 36px; } .evpts { flex: none; background: #f2c230; color: #3a2a00; font: 800 14px var(--font-display); border-radius: 999px; padding: 4px 10px; }
.evms { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.evm, .evfin { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--panel-2); }
.evm > div, .evfin > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .evm small, .evfin small { color: var(--ink-soft); font-size: 11px; }
.evm.done { outline: 2px solid #f2c230; } .evm.got { opacity: .65; }
.evfin { background: linear-gradient(110deg, color-mix(in srgb, #f2c230 30%, var(--panel-2)), var(--panel-2)); } .evfin.done { outline: 2px solid #f2c230; }
.evshop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.evsi { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: var(--panel-2); text-align: center; }
.evsi .evsimg { font-size: 34px; height: 56px; display: grid; place-items: center; } .evsi .evsimg .uiic { width: 52px; height: 52px; object-fit: contain; }
.evtop { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; } .evtop li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); } .evtop em { font-style: normal; }
.l7grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.l7 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; background: var(--panel-2); text-align: center; font-size: 11px; }
.l7.big { grid-column: span 2; } .l7 b { font: 800 11.5px var(--font-display); } .l7 small { color: var(--ink-soft); font-size: 10px; }
.l7 .l7img { height: 40px; display: grid; place-items: center; font-size: 26px; } .l7 .l7img .uiic { width: 40px; height: 40px; object-fit: contain; } .l7.big .l7img .uiic { width: 48px; height: 48px; }
.l7.got { opacity: .55; } .l7 i { position: absolute; top: 2px; right: 6px; font-style: normal; color: #2f9a5a; font-weight: 900; }
.l7.now { outline: 3px solid #f2c230; animation: l7pulse 1.2s ease-in-out infinite; } @keyframes l7pulse { 50% { box-shadow: 0 0 14px #f2c230; } }
.fab.l7f { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(140deg, #3d9be0, #6bd0ff); color: #fff; }
.sheettabs .stab.evtab { font: 800 13px/1.15 var(--font-display); padding: 4px 2px; }

/* Nút Ghép trận hạng khi chưa đủ cấp: cùng khung vàng như 3 nút kia, chỉ xám lại */
.playgrid .btn.lockd[aria-disabled="true"] { opacity: 1; filter: grayscale(1) brightness(.78); color: #2c2c2c; text-shadow: 0 1px 0 rgba(255,255,255,.35); }

/* Hộp thư */
.fab.mailf { bottom: calc(218px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(140deg, #e0663d, #ffb36b); color: #fff; }
.mlist { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.mrow { position: relative; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); display: grid; gap: 4px; }
.mrow.got, .mrow.old { opacity: .6; }
.mrow .mtop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .mrow .mtop b { min-width: 0; overflow-wrap: anywhere; } .mrow .mtop small { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.mrow p { margin: 0; font-size: 13px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.mrow .mgift { font-weight: 800; color: #c98a10; font-size: 13px; }
.mrow .btn.small { justify-self: end; } .mrow .mdone { justify-self: end; font-size: 12px; font-weight: 700; color: var(--ink-soft); }

/* Giao diện tối: tai tab của popup nằm ngoài khung giấy → dùng cùng bảng màu giấy, chữ tối; tab không trong suốt (không lộ thanh trên phía sau) */
.has-ui .sheetwrap .sheettabs { --ink: #3b2a1a; --ink-soft: #7a6248; --panel: #fff6e2; --panel-2: #f6e7c6; color: #3b2a1a; }
.has-ui .sheettabs .stab { color: #3b2a1a; opacity: 1; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.has-ui .sheettabs .stab:not(.on) { filter: brightness(.86) saturate(.85); }

/* Thẻ gói tặng: Mở + Mở hết xếp dọc bên phải, thẻ gọn */
.shopcard .freebtns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; margin-left: auto; }
.shopcard .freebtns .btn { margin: 0; white-space: nowrap; }
.mrow .mtop { flex-direction: column; align-items: flex-start; gap: 0; }
.shopcard .freebtns .btn { min-height: 38px; height: auto; padding: 4px 14px; font-size: 14px; line-height: 1.2; }
.shopcard .freebtns { flex-direction: row; justify-content: flex-end; gap: 8px; }
.has-ui .shopcard .freebtns .btn { border-width: 10px; border-image-width: 10px; min-height: 0; padding: 2px 12px; }

/* Thẻ gói tặng kiểu banner (học bố cục cửa hàng game thẻ bài: tranh lớn, ruy băng, nút to) */
.shopcard.pk.gift { position: relative; box-shadow: 0 0 0 2px #f2c230, 0 6px 18px rgba(242,194,48,.28); }
.shopcard.pk.gift .giftrib { position: absolute; top: 10px; left: 0; margin: 0; z-index: 4; padding: 4px 12px 4px 10px; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, #e2483d, #ff8a3d); color: #fff; font: 800 12.5px var(--font-display); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.shopcard.pk.gift .freebtns { flex-direction: row; gap: 8px; margin-left: 12px; }
.shopcard.pk.gift .freebtns .btn { flex: 1; }
.has-ui .shopcard.pk.gift .freebtns .btn { min-height: 44px; font-size: 15px; }
.quest .qnote { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
/* trang Đấu: nút ✉️ đứng sau 📅 (không đè lên nhau) */
/* Hộp thư: bên phải, cạnh nút Nhiệm vụ 🎯 */
.hub .pane:has(.playgrid) > .fab.mailf:not(.pass):not(.left) { right: 62px; left: auto; }
/* Trọn bộ cung: chạm để xem */
.zset[data-a] { cursor: pointer; } .zset .zsee { display: block; margin-top: 4px; font-style: normal; font-weight: 700; color: #3d7fd6; }
.packgrid .zgive { background: #3d7fd6; }

/* ===== Tân thủ: trận dạy chơi + hành trình 🐣 ===== */
.tutbar { margin: 6px 10px; padding: 8px 12px; border-radius: 12px; background: #fff6d6; color: #3b2a1a; border: 2px solid #f2c230; font-size: 14px; line-height: 1.35; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.evban.tutban { background: linear-gradient(120deg, #3d9be0, #6bd0ff); }
.fab.nbf { bottom: calc(218px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(140deg, #f2c230, #ffe58a); }
.hub .pane:has(.playgrid) > .fab.left.nbf { left: 112px; }
.nbroad { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.nbst { border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.6); border: 2px solid rgba(59,42,26,.15); color: #3b2a1a; }
.nbst.ok { border-color: #f2c230; box-shadow: 0 0 0 3px rgba(242,194,48,.3); }
.nbst.got { opacity: .7; }
.nbst .nbh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nbst ul { list-style: none; padding: 0; margin: 6px 0; font-size: 13px; }
.nbst ul li.y { opacity: .75; }
.nbst .nbg { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.pickc { display: grid; gap: 4px; }
.evcal li.soon { opacity: .6; }

/* ===== Quà theo cấp · Thẻ tên · Tổng kết mùa ===== */
.lvnow { display: grid; gap: 4px; justify-items: center; margin: 6px 0 10px; color: #3b2a1a; }
.lvlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lvlist li { display: grid; grid-template-columns: 64px 1fr 20px; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.55); color: #3b2a1a; font-size: 13px; }
.lvlist li.got { opacity: .6; }
.lvlist li.next { border: 2px solid #f2c230; }
.plate { display: inline-block; padding: 1px 10px; border-radius: 999px; }
.plate.p_giay { background: transparent; padding: 0; }
.plate.p_dong { background: linear-gradient(90deg, #b87333, #e3a46b); color: #fff; }
.plate.p_bac { background: linear-gradient(90deg, #9aa4b1, #e6ebf1); color: #2a2f36; }
.plate.p_vang { background: linear-gradient(90deg, #d9a400, #ffe58a); color: #3b2a00; }
.plate.p_tanbinh { background: linear-gradient(90deg, #3d9be0, #8fd8ff); color: #fff; }
.plate.p_chienbinh { background: linear-gradient(90deg, #c0392b, #f08a5d); color: #fff; }
.plate.p_ungho { background: linear-gradient(90deg, #8b5cf6, #f2c230); color: #fff; }
.plgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.plopt { display: grid; gap: 4px; justify-items: center; padding: 8px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.5); color: #3b2a1a; }
.plopt.on { border-color: #f2c230; }
.plopt.off { opacity: .55; }

/* Bộ chiến thuật: lá còn thiếu + chế tạo phần thiếu */
.missbox { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 210, 120, .14); border: 1px dashed rgba(200, 140, 40, .55); }
.missbox > span { font-size: 12px; line-height: 1.45; opacity: .9; }
.missbox.ok { background: rgba(80, 180, 100, .12); border-color: rgba(60, 150, 80, .5); }
.missbox .btn { white-space: normal; height: auto; min-height: 44px; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
.missbox .btn small { display: block; font-size: 11px; font-weight: 500; opacity: .85; }

/* Nút sảnh đấu không đẩy tràn màn khi chữ dài (tiếng Anh "Matchmaking"): cột co được, chữ tự xuống dòng */
.playgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.playgrid .btn { min-width: 0; }
.playgrid .pg-t { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
html[lang="en"] .playgrid .btn { font-size: clamp(13px, 4vw, 17px); }
html[lang="en"] .playgrid .pg-t small { font-size: 11.5px; }
/* ô nhập trong bảng (chọn tên lần đầu, xác nhận xoá dữ liệu) */
input.field { background: #fffaf0; color: #2a1d00; border: 2px solid #d9a93a; border-radius: 12px; padding: 10px 12px; font: 600 16px var(--font-body, inherit); box-sizing: border-box; }
input.field:focus { outline: 3px solid rgba(242,194,48,.5); }
.btn.onbside { height: auto; min-height: 170px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; white-space: normal; }
.onbside .onbart { width: 110px; height: 110px; display: block; overflow: hidden; border-radius: 14px; background: rgba(0,0,0,.18); }
.onbside .onbart img, .onbside .onbart svg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* trang Đấu: hàng nút nổi (Vé Mùa, lịch, trứng, thư, nhiệm vụ) cố định ở đáy → chừa đệm để thẻ cuối (banner, bảng xếp hạng) cuộn lên khỏi hàng nút (phản hồi 11/11 mục 3) */
.hub > .scroll:has(.playgrid):has(.fab) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.offer .oleft { font-style: normal; font-size: 11px; font-weight: 700; color: #ffb4a8; }
/* nhãn chữ trong CSS (content) không đi qua kho dịch → bản tiếng Anh ghi đè theo html[lang] */
html[lang="en"] .offer.new::after { content: "NEW"; } html[lang="en"] .card.set-event::before { content: "⭐ EVENT"; } html[lang="en"] .card.set-dog::before { content: "🦴 DOG"; } html[lang="en"] .card.set-tdn::before { content: "HH"; } html[lang="en"] .card.set-mid::before { content: "MA"; }

/* Thân Thép (đánh bằng máu): viền vàng nổi quanh ô máu — công giữ nguyên, không đổi máu thành công (chủ game 11/11) */
.uhp.hpatk, .bh.hpatk { box-shadow: 0 0 0 2px #ffd34d, 0 0 8px 2px rgba(255, 211, 77, .85), 0 1px 3px rgba(0,0,0,.35); }
.card .uhp.hpatk { box-shadow: 0 0 0 2px #ffd34d, 0 0 6px 1px rgba(255, 211, 77, .8); }

/* Mẹo / siêu năng lực trúng lá: vòng sáng lặp suốt thời gian hiệu ứng + nhãn tác dụng (chủ game 11/11) */
.fxhit.good::after, .fxhit.bad::after { animation: ring .9s ease-out 2; }
.fxhit.slot, .fxhit.backu { outline: 3px solid transparent; animation: fxbox 2s ease-out; border-radius: 12px; }
.fxhit.bad.slot, .fxhit.bad.backu { --fxc: #ff5a5a; } .fxhit.good.slot, .fxhit.good.backu { --fxc: #7fe08a; }
@keyframes fxbox { 0%, 80% { outline-color: var(--fxc); box-shadow: 0 0 14px 2px var(--fxc); } 100% { outline-color: transparent; box-shadow: none; } }
.fxtag { position: absolute; left: 50%; top: 18%; transform: translate(-50%, 0); z-index: 7; pointer-events: none; white-space: nowrap;
  font: 800 13px/1.1 var(--font-display); padding: 3px 7px; border-radius: 9px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); animation: fxtag 2s ease-out forwards; }
.fxtag.bad { background: #c43a3a; } .fxtag.good { background: #2f9a4a; }
@keyframes fxtag { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 22% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@media (prefers-reduced-motion: reduce) { .fxtag, .fxhit.slot, .fxhit.backu { animation-duration: .01s !important; } .fxtag { opacity: 1; } }

/* ===== Gói 11/11-b: Hộ vệ đỡ đòn · Thanh chặn 4 nấc · Đòn đánh rõ · Trúng phép rõ (không chữ — chỉ hình + số) ===== */
.guardfx { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 30; pointer-events: none; }
.guardfx.foe { top: 28%; } .guardfx.mine { top: 72%; }
.guardfx .gjump { position: absolute; left: calc((var(--from) + 0.5) * 20%); width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); animation: gjump .6s cubic-bezier(.3,1.6,.5,1) forwards; }
.guardfx .gart, .guardfx .gart img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px #ffd34d); }
.guardfx .gjump b { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); font-size: 26px; filter: drop-shadow(0 0 8px #ffd34d); }
@keyframes gjump { 0% { left: calc((var(--from) + 0.5) * 20%); transform: translate(-50%, -50%) scale(.9); } 50% { transform: translate(-50%, -130%) scale(1.25); } 100% { left: calc((var(--to) + 0.5) * 20%); transform: translate(-50%, -50%) scale(1.1); } }
.guardfx .glab { position: absolute; left: calc((var(--to) + 0.5) * 20%); transform: translate(-50%, -260%); white-space: nowrap; background: #1e2a24ee; color: #ffe08a; font: 800 15px var(--font-display); padding: 3px 9px; border-radius: 999px; box-shadow: 0 0 0 2px #ffd34d88; animation: glab .3s ease-out; }
@keyframes glab { from { opacity: 0; transform: translate(-50%, -200%); } }
.slot.unit.gaway .art { opacity: .25; filter: grayscale(.6); transition: opacity .2s; }
/* chặn đòn */
.leader .hp { position: relative; }
.float.blk { font-size: 20px !important; background: #1d4f86 !important; color: #c9ecff !important; text-shadow: 0 0 10px #4fb3ff, 0 2px 0 #0008; box-shadow: 0 0 0 2px #8fd6ff; }
.blkring { position: absolute; inset: -14px; border-radius: 50%; border: 4px solid #8fd6ff; box-shadow: 0 0 22px #4fb3ff, inset 0 0 18px #4fb3ff88; animation: blkring .9s ease-out forwards; pointer-events: none; }
@keyframes blkring { 0% { transform: scale(.6); opacity: 0; } 30% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
/* thanh chặn: 4 nấc tách rời, mỗi nấc tô theo --f (0 · ½ · đầy) */
.block.seg { display: flex; gap: 3px; height: 8px; margin-top: 3px; width: 100%; max-width: 160px; }
.float.blk { right: 30px; }
.block.seg i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4a9fe0 calc(var(--f) * 100%), color-mix(in srgb, var(--line) 85%, #000) 0); box-shadow: inset 0 0 0 1px #8fd6ff66; }
.block.seg i:last-child { box-shadow: inset 0 0 0 1px #ffd34d; }
.block.seg.ready i:last-child { animation: blkready 1s ease-in-out infinite; }
@keyframes blkready { 50% { box-shadow: inset 0 0 0 1px #ffd34d, 0 0 8px #ffd34d; } }
.block.seg i.drain { animation: blkdrain .9s ease-in forwards; animation-delay: calc((3 - var(--k)) * 90ms); }
@keyframes blkdrain { 0% { background: #bfe8ff; box-shadow: 0 0 10px #4fb3ff; } 100% { background: color-mix(in srgb, var(--line) 85%, #000); box-shadow: none; } }
/* đòn đánh trúng quân: 3 vệt cào + loé trắng + giật, đúng lúc đạn bay tới */
.slashfx { position: absolute; inset: 8% 12%; z-index: 7; pointer-events: none; }
.slashfx i { position: absolute; left: 10%; right: 10%; height: 5px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff 30%, #ff4d4d 70%, transparent); box-shadow: 0 0 10px #ff3b3b; transform: rotate(-35deg) scaleX(0); opacity: 0; animation: slash .45s ease-out forwards; animation-delay: .32s; }
.slashfx i:nth-child(1) { top: 30%; } .slashfx i:nth-child(2) { top: 48%; animation-delay: .38s; } .slashfx i:nth-child(3) { top: 66%; animation-delay: .44s; }
@keyframes slash { 0% { opacity: 1; transform: rotate(-35deg) scaleX(0); } 45% { opacity: 1; transform: rotate(-35deg) scaleX(1.1); } 100% { opacity: 0; transform: rotate(-35deg) scaleX(1.1); } }
.slot.unit.struck .art { animation: struck .5s .32s ease-out; }
@keyframes struck { 0% { filter: brightness(3) saturate(0); transform: translateX(0); } 30% { transform: translateX(-6px); } 55% { filter: brightness(1.4) sepia(1) hue-rotate(-40deg) saturate(4); transform: translateX(5px); } 100% { filter: none; transform: none; } }
/* trúng phép: tô màu cả hình nhân vật + bật nảy, nhìn là biết lá nào bị phép */
.fxhit.bad .art img { animation: fxbadimg 1.6s ease-out; }
.fxhit.good .art img { animation: fxgoodimg 1.6s ease-out; }
@keyframes fxbadimg { 0%, 100% { filter: none; transform: none; } 12% { filter: brightness(2.6) saturate(0); transform: scale(1.12); } 30%, 70% { filter: drop-shadow(0 0 10px #ff3b3b) sepia(1) hue-rotate(-50deg) saturate(5) brightness(.9); transform: scale(.94) rotate(-3deg); } 50% { transform: scale(.94) rotate(3deg); } }
@keyframes fxgoodimg { 0%, 100% { filter: none; transform: none; } 15% { filter: brightness(2.2); transform: scale(1.15) translateY(-6%); } 35%, 75% { filter: drop-shadow(0 0 12px #7fe08a) brightness(1.25); transform: scale(1.06) translateY(-3%); } }
.fxhit .burst { font-size: 44px; animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .guardfx .gjump { animation: none; left: calc((var(--to) + 0.5) * 20%); } .blkring { animation: none; opacity: .8; } .slashfx i, .slot.unit.struck .art, .fxhit .art img, .block.seg i { animation: none !important; } .slashfx i { opacity: 1; transform: rotate(-35deg); } }
/* G: vụ nổ khi gục đánh cả đội */
.boomfx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.boomfx b { position: absolute; left: 50%; top: 45%; font-size: 56px; transform: translate(-50%, -50%); animation: boom .9s ease-out forwards; filter: drop-shadow(0 0 12px #ffb03b); }
.boomfx i { position: absolute; left: 50%; top: 45%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 5px solid #ffb03b; box-shadow: 0 0 24px #ff7a1a; animation: boomwave .9s ease-out forwards; }
@keyframes boom { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } }
@keyframes boomwave { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
.fxtag.boomhit { animation-delay: .25s; opacity: 0; font-size: 16px; }
.fxtag.miss { background: #44505a; }
/* F: Lẻn — mũi tên vòng qua đầu quân chặn, chỉ thẳng thủ lĩnh */
.sneakfx { position: absolute; left: 50%; top: 50%; z-index: 9; pointer-events: none; }
.sneakfx i { position: absolute; font-style: normal; font-size: 34px; color: #ffd34d; text-shadow: 0 0 10px #ff9d00, 0 2px 0 #0008; transform: translate(-50%, -50%); }
.sneakfx.up i { animation: sneakup .7s ease-in forwards; } .sneakfx.down i { animation: sneakdn .7s ease-in forwards; }
@keyframes sneakup { 0% { transform: translate(-50%, 120%) rotate(-90deg); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(60%, -60%) rotate(-150deg); } 100% { transform: translate(-50%, -330%) rotate(-90deg); opacity: 0; } }
@keyframes sneakdn { 0% { transform: translate(-50%, -220%) rotate(90deg); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(60%, -40%) rotate(30deg); } 100% { transform: translate(-50%, 230%) rotate(90deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boomfx b, .boomfx i, .sneakfx i { animation-duration: .01s !important; } .fxtag.boomhit { opacity: 1; } }
/* E: diễn biến trận theo vòng (màn kết thúc) */
.rlog { border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; padding: 4px 10px; background: color-mix(in srgb, var(--panel) 92%, #000); }
.rlog summary { cursor: pointer; font: 800 14px var(--font-display); padding: 4px 0; }
.rlog .log { margin: 4px 0 6px; }

/* ===== Bộ hình hiệu ứng trận (art/fx, tools/gen_fx.py → fx_pack.py): thay emoji / vệt CSS khi có ảnh ===== */
.fxi { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: middle; display: inline-block; pointer-events: none; }
.fxs .fxi { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); }
/* dải 6 khung: chạy 1 lượt rồi tắt; nền trong suốt, đặt giữa ô */
.fxa { position: absolute; left: 50%; top: 46%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 7; pointer-events: none;
  background-repeat: no-repeat; background-size: 600% 100%; background-position: 120% 0; animation: fxa .75s steps(6) forwards; }
/* 120% = trượt hết dải ra ngoài ô (không còn gì): trước lúc chạy (đang chờ delay) và sau khi chạy xong đều trống */
@keyframes fxa { 0% { background-position: 0 0; } 100% { background-position: 120% 0; } }
.fxa.hit { width: 105%; animation-duration: .55s; }
.fxa.big { width: 170%; animation-duration: .9s; z-index: 8; }
.fxa.lead { left: 34px; width: 90px; }
.fxa.lanefx { top: 50%; width: 80%; z-index: 5; }
.fxhit .fxa { animation-duration: 1.1s; }
.fxhit.hasfx::after { display: none; }   /* có hình trúng phép thì bỏ vòng sáng CSS cũ, không chồng hai hiệu ứng */
.fxtag .fxi { width: 18px; height: 18px; margin: -3px 1px -3px -2px; }
.fxtag b { font-weight: 800; }
.abil:has(.fxi) { background: #000a; padding: 2px 5px; display: flex; gap: 2px; }
.abil .fxi { width: 24px; height: 24px; }
.slot .zz .fxi { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .fxa { animation-duration: .01s !important; } }

/* hero bị quân đánh thẳng: hình đòn theo hệ nổ trên chân dung + chớp đỏ (11/11) */
.lhero .fxa.hero { top: 50%; width: 130%; z-index: 9; }
.lhero .slashfx.hero { z-index: 9; }
.leader.hstruck .lhero .lhimg { animation: hstruck .55s ease-out .3s both; }
@keyframes hstruck { 0% { filter: none; } 30% { filter: brightness(1.6) saturate(1.4) drop-shadow(0 0 10px #ff3b3b); transform: translateX(-4px); } 60% { transform: translateX(4px); } 100% { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .leader.hstruck .lhero .lhimg { animation: none; } }

/* màn chờ lúc mở game (nằm sẵn trong index.html): tranh banner toàn màn (art/ui/ui_splash*.webp, không chữ) + tên game + thanh tải theo tiến độ thật.
 * Đổi tranh thì tăng ?v= trong index.html (ảnh art giữ 30 ngày). Chưa tải xong tranh thì nền tối chuyển màu Mèo–Chuột. */
html.booting #app { visibility: hidden; }
.bootsplash { position: fixed; inset: 0; z-index: 999; overflow: hidden; background: linear-gradient(135deg, #5a2d12 0%, #2a1a2e 55%, #17122a 100%); }
.bootsplash.out { opacity: 0; transition: opacity .3s; }
.bootsplash .bsart { position: absolute; inset: 0; background: url("art/ui/ui_splash.webp?v=1") center top / cover no-repeat; animation: bszoom 9s ease-out both; }
@media (orientation: landscape) { .bootsplash .bsart { background-image: url("art/ui/ui_splash_wide.webp?v=1"); background-position: center; } }
.bootsplash .bsart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, #120c1ccc 80%, #0c0814 100%); }
.bootsplash .bsfoot { position: absolute; left: 0; right: 0; bottom: max(7vh, calc(env(safe-area-inset-bottom) + 28px)); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 16px; }
.bootsplash .bstitle { margin: 0; text-align: center; font: 800 clamp(30px, 9vw, 56px)/1 var(--font-display, 'Baloo 2', sans-serif); color: #fff3d0; letter-spacing: .5px;
  text-shadow: 0 3px 0 #7a3a10, 0 0 18px #ff9d2e99, 0 6px 18px #000a; -webkit-text-stroke: 1px #5a2a0a; }
.bootsplash .bstitle b { display: block; font-size: 1.15em; background: linear-gradient(180deg, #fff6c8, #ffc23d 55%, #ff8a1f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #6a2c06; text-shadow: none; filter: drop-shadow(0 3px 0 #5a2405) drop-shadow(0 0 14px #ffb34d88); }
.bootsplash i { width: min(260px, 70vw); height: 10px; border-radius: 6px; background: #00000080; box-shadow: 0 0 0 2px #ffd34d66, inset 0 1px 3px #000a; overflow: hidden; display: block; }
.bootsplash i b { display: block; height: 100%; width: 6%; border-radius: 6px; background: linear-gradient(90deg, #ff9d2e, #ffe066); box-shadow: 0 0 10px #ffd34d; transition: width .35s; }
@keyframes bszoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bootsplash .bsart { animation: none; } }

/* code quà trong Hộp thư (11/11) */
.mcode{display:flex;gap:8px;margin:8px 0 12px}.mcode .field{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.06em}

/* [B-acc] tài khoản: ID 9 số, nút liên kết Google / Facebook, hộp chọn tài khoản (12/11) */
.accblk { display: flex; flex-direction: column; gap: 6px; }
.pid.accid { font-size: 14px; color: var(--ink); word-break: normal; letter-spacing: .04em; }
.pid.accid b { font-variant-numeric: tabular-nums; }
.accbtns { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.accbtns .btn[disabled] { opacity: .75; cursor: default; }
.btn.fbbtn, .pbox .btn.fbbtn { background: #1877f2; color: #fff; font-weight: 800; }
.accban { color: #b3261e; font-weight: 700; }
.acccard { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; background: var(--panel-2); color: var(--ink); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; font: inherit; cursor: pointer; }
.acccard b { font-size: 15px; } .acccard small { font-size: 12px; color: var(--ink-soft); } .acccard em { font-size: 12px; font-style: normal; }
.acccard:active { transform: scale(.98); }
/* [/B-acc] */
/* [F-rank] màn Xếp hạng: huy hiệu giải, đếm ngược tuần / mùa, vùng lên / xuống giải trong nhóm tuần */
.rkhead { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--panel-2); margin: 6px 0; flex-wrap: wrap; }
.rkbadge { font-size: 40px; line-height: 1; width: 52px; height: 52px; display: grid; place-items: center; }
.rkbadge .uiic { width: 52px; height: 52px; object-fit: contain; }
.rkinfo { display: grid; min-width: 0; flex: 1; }
.rkinfo b { font: 800 18px var(--font-display); }
.rkinfo small { color: var(--ink-soft); font-size: 11px; }
.rkpct { font: 800 13px var(--font-display); color: #c98a10; margin: 4px 0; }
.rkcd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font-size: 12px; margin: 4px 0 8px; }
.rkcd b { text-align: right; }
.rkleg { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; margin: 4px 0; }
.rkleg .up, .rkrow.up em { color: #2e9d4a; }
.rkleg .down, .rkrow.down em { color: #d0453a; }
.rkrow.up { box-shadow: inset 4px 0 0 #2e9d4a; }
.rkrow.down { box-shadow: inset 4px 0 0 #d0453a; }
/* [/F-rank] */
/* [E-match] đồng hồ lượt trong trận: rõ, 10 giây cuối đỏ + nhấp nháy · đối thủ rớt mạng · khoá tìm trận */
.timer { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.28); color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.timer.off { display: none; }
.timer.mine { background: #2f7d46; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.timer.urgent { background: #d0453a; box-shadow: 0 0 0 2px #ffd0cc; animation: mcTimerPulse 1s ease-in-out infinite; }
@keyframes mcTimerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .timer.urgent { animation: none; } }
.dcinfo { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: #d0453a; }
.mmcool .mmcoolt { display: block; margin-top: 8px; font-size: 28px; font-variant-numeric: tabular-nums; color: #d0453a; }
/* [/E-match] */
/* [F-rank] khung Huyền Thoại Mùa (quà mùa xếp hạng; ảnh ui_frame_legend ở thanh trên) */
.avf.f_legend { background: conic-gradient(#7b3fe4, #ffd34d, #b98bff, #ffb703, #7b3fe4); box-shadow: 0 0 14px #b98bffaa; }
/* [story-18] popup truyện tranh không chữ (comicOpen trong app.js): khung gỗ, vuốt ngang, chấm trang, Bỏ qua luôn hiện */
.comic { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(10, 6, 2, .9); padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)); animation: cmin .2s ease-out; }
@keyframes cmin { from { opacity: 0; } }
.comic .cmbox { --ink: #3b2a1a; width: 100%; max-width: 460px; max-height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fff6e2; border-radius: 20px; color: var(--ink); box-sizing: border-box; }
.has-ui .comic .cmbox { padding: 2px; }
.comic .cmtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.comic .cmn { font-size: 15px; font-variant-numeric: tabular-nums; }
.comic .cmbox .btn { border-image: none !important; border: 0 !important; border-radius: 14px; box-shadow: 0 3px 0 rgba(0,0,0,.18) !important; background: #efe3c8 !important; color: #3b2a1a; text-shadow: none; margin: 0; }
.comic .cmbox .btn.primary { background: #f5c542 !important; box-shadow: 0 3px 0 #b8871c !important; font-size: 17px; min-height: 46px; }
.comic .cmskip { min-height: 36px; padding: 6px 16px; font-weight: 700; }
.comic .cmframe { position: relative; width: min(100%, calc((100vh - 250px) * .5625)); aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border-radius: 12px; border: 4px solid #8a5a2b; box-shadow: 0 0 0 2px #3b2210, 0 6px 18px rgba(0,0,0,.45); background: #1b120a; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; box-sizing: border-box; }
@supports (height: 100dvh) { .comic .cmframe { width: min(100%, calc((100dvh - 250px) * .5625)); } }
.comic .cmtrack { display: flex; height: 100%; transition: transform .3s ease; will-change: transform; }
.comic .cmtrack.drag { transition: none; }
.comic .cmpg { flex: 0 0 100%; height: 100%; }
.comic .cmpg img, .comic .cmpg video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comic .cmcap { margin: 0; text-align: center; font-size: 15px; line-height: 1.35; }
.comic .cmcap:empty { display: none; }
.comic .cmln { display: block; }
.comic .cmln b { font-weight: 800; }
/* #23 truyện mở đầu: chữ nằm trong vùng 28% đáy khung (hình đã chừa nền tối) */
.comic.capin .cmframe .cmcap { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 14px; box-sizing: border-box; color: #fff8e6; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.8); font-size: clamp(12px, 3.6vw, 16px); line-height: 1.3; pointer-events: none; }
.comic.capin .cmframe .cmcap .cmln b { color: #ffd76a; }
.comic .cmnav { display: flex; align-items: center; justify-content: center; gap: 12px; }
.comic .cmarr { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid #8a5a2b; background: #f3dfb6; color: #5a3312; font-size: 28px; font-weight: 800; line-height: 1; padding: 0 0 4px; cursor: pointer; }
.comic .cmarr:disabled { opacity: .35; cursor: default; }
.comic .cmdots { display: flex; gap: 2px; }
.comic .cmdot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.comic .cmdot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #8a5a2b; transition: transform .2s; }
.comic .cmdot.on::after { background: #e8a33a; border-color: #b8711c; transform: scale(1.25); }
.comic .cmend { visibility: hidden; }
.comic.last .cmend { visibility: visible; }
.comic button:focus-visible { outline: 3px solid #3d9be0; outline-offset: 2px; }
.stlist { display: flex; flex-wrap: wrap; gap: 6px; }
.stlist .stbtn { flex: 1 1 140px; min-width: 0; white-space: normal; }
.cmreplay { margin: 6px 0; }
@media (prefers-reduced-motion: reduce) { .comic, .comic .cmtrack, .comic .cmdot::after { animation: none; transition: none; } }
/* [/story-18] */
/* [ban-1-0-qua] #29–#33: khung mới, Thẻ Plus ✦, biểu cảm trong trận, banner sự kiện, nền Đấu mùa đông, hình quà (dat-hinh #16–#20) */
.avf.f_mua { background: url(art/ui/ui_frame_mua.webp) center / 100% 100% no-repeat, linear-gradient(135deg, #8fd0ff, #4a5fd6); }
.avf.f_vuotai { background: url(art/ui/ui_frame_vuotai.webp) center / 100% 100% no-repeat, linear-gradient(135deg, #c9a46a, #6b4a22); box-shadow: inset 0 0 0 2px #f1d9a8; }
.avf.f_cung { background: url(art/ui/ui_frame_cung.webp) center / 100% 100% no-repeat, conic-gradient(#3b2a7a, #b98bff, #ffd34d, #3b2a7a); box-shadow: 0 0 10px #b98bff88; }
.avf.f_plus { background: url(art/ui/ui_frame_plus.webp) center / 100% 100% no-repeat, linear-gradient(135deg, #fff1a8, #e0a412); box-shadow: 0 0 10px #f2c23099; }
.plusnm { border: 2px solid #f2c230; border-radius: 8px; padding: 0 5px; box-shadow: 0 0 6px #f2c23088; }
.plusst { font-style: normal; color: #f2c230; margin-left: 3px; text-shadow: 0 0 4px #000a; }
.mmp.plusp { box-shadow: 0 0 0 2px #f2c230, 0 0 12px #f2c23088; }
.emopop { position: fixed; left: 50%; top: 32%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; animation: emopop 2.6s ease forwards; }
.emopop .emoi { font-size: 64px; line-height: 1; } .emopop .emoi .uiic { width: 96px; height: auto; display: block; }
.emopop small { background: #000a; color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 11px; }
@keyframes emopop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 20% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }
@media (prefers-reduced-motion: reduce) { .emopop { animation: none; } }
.so-pre .chip.emo { padding: 2px 6px; } .so-pre .chip.emo .uiic { width: 34px; height: 34px; object-fit: contain; display: block; }
.evban.hasimg { position: relative; overflow: hidden; min-height: 96px; align-items: flex-end; background: #2b1b12; }
.evban .evbimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evban.hasimg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.65)); }
.evban.hasimg > :not(.evbimg) { position: relative; z-index: 1; } .evban.hasimg .evic { display: none; } .evban.hasimg b, .evban.hasimg small { text-shadow: 0 1px 3px #000; }
.evbanbig { margin: 0 0 8px; border-radius: 14px; overflow: hidden; aspect-ratio: 1024 / 312; } .evbanbig .evbimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pane.bgdong { background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.35)), url(art/ui/ui_bg_dau_dong.webp) center top / cover no-repeat; border-radius: 18px; padding: 6px 0; }
.mrow.noel .mtop .uiic { width: 34px; height: auto; margin-right: 6px; vertical-align: middle; }
.mcode .btn .uiic { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin: -4px 4px -4px 0; }
.pchip .pic .uiic { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }
.zskpick .skins { margin-top: 6px; }
.dq .btn.block { margin-top: 6px; }
/* [/ban-1-0-qua] */
/* Khung ảnh đại diện vẽ bằng hình (chủ game 14/11: mọi khung rõ và đẹp như Khung Mùa). Hình nằm sau, ảnh đại diện tròn nằm trong vòng khung. */
.avf.f_go, .avf.f_tienphong, .avf.f_tanbinh, .avf.f_dong, .avf.f_bac, .avf.f_vang, .avf.f_kimcuong, .avf.f_huyenthoai, .avf.f_chienbinh, .avf.f_diethan, .avf.f_chienthan, .avf.f_ungho, .avf.f_ramat, .avf.f_legend, .avf.f_mua, .avf.f_vuotai, .avf.f_vodich, .avf.f_cung, .avf.f_plus { background: var(--fr) center / 100% 100% no-repeat; box-shadow: none; border-radius: 50%; padding: 15%; animation: none; }
.avf.f_go .avi, .avf.f_tienphong .avi, .avf.f_tanbinh .avi, .avf.f_dong .avi, .avf.f_bac .avi, .avf.f_vang .avi, .avf.f_kimcuong .avi, .avf.f_huyenthoai .avi, .avf.f_chienbinh .avi, .avf.f_diethan .avi, .avf.f_chienthan .avi, .avf.f_ungho .avi, .avf.f_ramat .avi, .avf.f_legend .avi, .avf.f_mua .avi, .avf.f_vuotai .avi, .avf.f_vodich .avi, .avf.f_cung .avi, .avf.f_plus .avi { border-radius: 50%; animation: none; }
.avf.f_go { --fr: url(art/ui/ui_frame_go.webp); } .avf.f_tienphong { --fr: url(art/ui/ui_frame_tienphong.webp); } .avf.f_tanbinh { --fr: url(art/ui/ui_frame_tanbinh.webp); }
.avf.f_dong { --fr: url(art/ui/ui_frame_dong.webp); } .avf.f_bac { --fr: url(art/ui/ui_frame_bac.webp); } .avf.f_vang { --fr: url(art/ui/ui_frame_vang.webp); }
.avf.f_kimcuong { --fr: url(art/ui/ui_frame_kimcuong.webp); } .avf.f_huyenthoai { --fr: url(art/ui/ui_frame_huyenthoai.webp); } .avf.f_chienbinh { --fr: url(art/ui/ui_frame_chienbinh.webp); }
.avf.f_diethan { --fr: url(art/ui/ui_frame_diethan.webp); } .avf.f_chienthan { --fr: url(art/ui/ui_frame_chienthan.webp); } .avf.f_ungho { --fr: url(art/ui/ui_frame_ungho.webp); }
.avf.f_ramat { --fr: url(art/ui/ui_frame_ramat.webp); } .avf.f_legend { --fr: url(art/ui/ui_frame_legend.webp); } .avf.f_mua { --fr: url(art/ui/ui_frame_mua.webp); }
.avf.f_vuotai { --fr: url(art/ui/ui_frame_vuotai.webp); } .avf.f_vodich { --fr: url(art/ui/ui_frame_vodich.webp); } .avf.f_cung { --fr: url(art/ui/ui_frame_cung.webp); } .avf.f_plus { --fr: url(art/ui/ui_frame_plus.webp); }
.frgrid .fropt.off .avf { filter: grayscale(.55) opacity(.75); }
/* Mục Skin trong Hồ sơ */
.skgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0 12px; }
.skopt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: #fff8; border: 2px solid transparent; text-align: center; }
.skopt .dart { width: 64px; height: 64px; display: block; } .skopt .dart img, .skopt .dart svg { width: 100%; height: 100%; object-fit: contain; }
.skopt .btn.small { width: 100%; font-size: 11px; padding: 6px 4px; } .skopt b { font-size: 12px; line-height: 1.2; } .skopt small { font-size: 11px; opacity: .8; line-height: 1.25; }
.skopt.off .dart { filter: grayscale(.8) opacity(.6); } .skopt.on { border-color: #e0a412; background: #fff3c4; }