/* Lobby v2: round-button rail + dropdowns, icon tiles, featured packs, adventure card, motion. */
.view { top: calc(var(--u) * 35); }
.rail { position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 16.5); z-index: 6; display: flex; justify-content: space-between; }
.rb { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); width: calc(var(--u) * 17); animation: railIn 0.5s cubic-bezier(.2,1.2,.4,1) both; }
.rb:nth-child(2) { animation-delay: 0.05s; } .rb:nth-child(3) { animation-delay: 0.1s; } .rb:nth-child(4) { animation-delay: 0.15s; } .rb:nth-child(5) { animation-delay: 0.2s; }
.rb img { width: calc(var(--u) * 12); aspect-ratio: 1; padding: calc(var(--u) * 1.4); border-radius: 50%; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px);
  box-shadow: 0 6px 16px rgba(30, 40, 80, 0.16); transition: transform 0.2s cubic-bezier(.3,1.6,.5,1), box-shadow 0.2s; }
.rb span { font-size: calc(var(--u) * 2.3); font-weight: 700; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.rb:hover img { transform: translateY(-3px) scale(1.06); }
.rb.on img { box-shadow: 0 0 0 calc(var(--u) * 0.6) var(--accent), 0 8px 20px rgba(47, 107, 255, 0.3); transform: scale(1.06); }
.rb .badge { right: calc(var(--u) * 2.6); top: 0; }
.dropdown { position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 35); z-index: 9; max-height: 58%; overflow-y: auto;
  padding: calc(var(--u) * 3.4); border-radius: calc(var(--u) * 5); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(18px); border: 1px solid #fff;
  box-shadow: 0 24px 60px rgba(20, 30, 70, 0.28); transform-origin: var(--ax) 0; animation: dropIn 0.28s cubic-bezier(.2,1.2,.4,1); scrollbar-width: none; }
.dropdown.closing { animation: dropOut 0.18s forwards; }
.dropdown h4 { margin: 0 0 calc(var(--u) * 2.4); font-size: calc(var(--u) * 3.8); font-weight: 800; }
.dropdown > div, .dropdown > button { animation: itemIn 0.35s cubic-bezier(.2,1,.4,1) both; animation-delay: calc(var(--i, 0) * 0.05s + 0.06s); }
.ev { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2); border-radius: calc(var(--u) * 3.4); background-size: cover; background-position: center; color: #fff; }
.ev > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ev b { font-size: calc(var(--u) * 3.6); }
.ev small { font-size: calc(var(--u) * 2.5); opacity: 0.9; }
.ev em { font-style: normal; font-size: calc(var(--u) * 2.2); font-weight: 800; color: var(--gold); }
.pill.sm { padding: calc(var(--u) * 1.4) calc(var(--u) * 3); font-size: calc(var(--u) * 2.6); }
.mail { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.4); margin-bottom: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 3); background: #fff; box-shadow: 0 3px 10px rgba(30, 40, 80, 0.07); }
.mail > img { width: calc(var(--u) * 10); }
.mail > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mail small { color: var(--ink-2); font-size: calc(var(--u) * 2.5); }
.mail.read { opacity: 0.7; }
.rank { display: grid; grid-template-columns: calc(var(--u) * 8) 1fr auto; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 2.4); margin-bottom: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 3); background: #fff; font-size: calc(var(--u) * 3); }
.rank .pos { width: calc(var(--u) * 7); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: rgba(35, 49, 77, 0.07); }
.rank:nth-of-type(1) .pos { background: linear-gradient(135deg, #ffe27a, #ffb13d); color: #5a3a00; }
.rank:nth-of-type(2) .pos { background: linear-gradient(135deg, #eef1f6, #b9c3d3); }
.rank:nth-of-type(3) .pos { background: linear-gradient(135deg, #ffd2b0, #d58a5a); color: #fff; }
.rank.me { box-shadow: inset 0 0 0 2px var(--accent); }
.rank > span:last-child { color: var(--ink-2); font-weight: 700; }
.code { font-size: calc(var(--u) * 7); font-weight: 900; letter-spacing: 0.08em; text-align: center; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: #fff; margin-bottom: calc(var(--u) * 2); }
.set-row { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 3); background: #fff; font-weight: 700; font-size: calc(var(--u) * 3); }
.set-row.danger { color: #e23a45; }
.tog { width: calc(var(--u) * 10); height: calc(var(--u) * 5.6); border-radius: 99px; background: #c9cfdc; position: relative; transition: 0.2s; }
.tog::after { content: ""; position: absolute; top: 12%; left: 6%; height: 76%; aspect-ratio: 1; border-radius: 50%; background: #fff; transition: 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.tog.on { background: var(--accent); }
.tog.on::after { left: 50%; }

/* play button with icon */
.play-btn { flex-direction: row; justify-content: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) 0; }
.play-btn img { position: relative; z-index: 1; width: calc(var(--u) * 13); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); animation: bob 2.4s ease-in-out infinite; }
.play-btn > span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.play-btn b { font-size: calc(var(--u) * 7.4); font-weight: 900; line-height: 1; letter-spacing: 0.01em; }
.play-btn small { font-size: calc(var(--u) * 2.8); opacity: 0.92; font-weight: 600; }

/* icon tiles: tinted gradient cards */
.tile { min-height: calc(var(--u) * 30); padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2.6); overflow: hidden; border: 0; color: #fff; }
.tile img { position: absolute; right: calc(var(--u) * -1.6); top: calc(var(--u) * -1.6); width: calc(var(--u) * 19); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.22)); transition: transform 0.3s cubic-bezier(.3,1.6,.5,1); animation: bob 3s ease-in-out infinite; }
.tile:nth-child(2) img { animation-delay: -0.7s; } .tile:nth-child(3) img { animation-delay: -1.4s; } .tile:nth-child(4) img { animation-delay: -2.1s; }
.tile:hover img { transform: rotate(-8deg) scale(1.08); }
.tile b { margin-top: auto; font-size: calc(var(--u) * 3.6); position: relative; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.tile small { color: rgba(255, 255, 255, 0.92); position: relative; font-weight: 600; }
.tile .bar { background: rgba(255, 255, 255, 0.3); position: relative; }
.tile .bar > span { background: #fff; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%); background-size: 260% 100%; animation: sweep 5s ease-in-out infinite; pointer-events: none; }
.t-missions { background: linear-gradient(160deg, rgba(255, 120, 80, 0.55), rgba(255, 60, 100, 0.92) 70%), url('../assets/ui/tiles/missions.webp') 70% center / cover; box-shadow: 0 10px 24px rgba(255, 77, 109, 0.3); }
.t-pass { background: linear-gradient(160deg, rgba(140, 107, 255, 0.5), rgba(70, 80, 240, 0.92) 70%), url('../assets/ui/tiles/pass.webp') 70% center / cover; box-shadow: 0 10px 24px rgba(79, 91, 255, 0.3); }
.t-adv { background: linear-gradient(160deg, rgba(63, 210, 154, 0.45), rgba(20, 150, 145, 0.92) 70%), url('../assets/ui/tiles/adventure.webp') 70% center / cover; box-shadow: 0 10px 24px rgba(31, 167, 160, 0.3); }
.t-gift { background: linear-gradient(160deg, rgba(255, 122, 198, 0.5), rgba(180, 80, 250, 0.92) 70%), url('../assets/ui/tiles/gift.webp') 70% center / cover; box-shadow: 0 10px 24px rgba(195, 92, 255, 0.3); }
.tile .badge { right: auto; left: calc(var(--u) * 2.4); background: #ffe27a; box-shadow: 0 0 0 calc(var(--u) * 0.6) rgba(255, 255, 255, 0.7); }

/* featured packs shelf */
.shelf-head { display: flex; justify-content: space-between; align-items: baseline; margin: calc(var(--u) * 5) 0 calc(var(--u) * 1); }
.shelf-head b { font-size: calc(var(--u) * 3.8); }
.shelf-head a { color: var(--accent); font-weight: 700; font-size: calc(var(--u) * 2.8); text-decoration: none; }
.shelf { display: flex; gap: calc(var(--u) * 3); overflow-x: auto; padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 4); margin: 0 calc(var(--u) * -4); scrollbar-width: none; scroll-snap-type: x mandatory; }
.shelf::-webkit-scrollbar { display: none; }
.shelf-pack { flex: 0 0 auto; width: calc(var(--u) * 24); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); text-decoration: none; color: var(--ink); scroll-snap-align: start; }
.shelf-pack img { height: calc(var(--u) * 38); filter: drop-shadow(0 10px 14px rgba(30, 40, 80, 0.3)); transition: transform 0.25s cubic-bezier(.3,1.6,.5,1); animation: bob 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.45s); }
.shelf-pack:hover img { transform: translateY(-6px) rotate(-3deg) scale(1.05); }
.shelf-pack span { font-size: calc(var(--u) * 2.4); font-weight: 700; text-align: center; line-height: 1.15; }

/* adventure card */
.adv-card { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 2); min-height: calc(var(--u) * 34);
  padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 5); margin-bottom: calc(var(--u) * 4); color: #fff; box-shadow: 0 14px 34px rgba(30, 40, 80, 0.22); }
.adv-bg { position: absolute; inset: 0; background-size: cover; background-position: center 40%; }
.adv-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 22, 50, 0.85), rgba(14, 22, 50, 0.1)); }
.adv-copy { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.adv-copy b { font-size: calc(var(--u) * 5.6); font-weight: 900; line-height: 1; }
.adv-copy small { font-size: calc(var(--u) * 2.7); opacity: 0.9; }
.adv-card .pill { position: relative; }

/* bottom nav with icons */
.nav button img { width: calc(var(--u) * 7.4); aspect-ratio: 1; object-fit: contain; transition: transform 0.2s cubic-bezier(.3,1.6,.5,1); filter: saturate(0.85); }
.nav button.on img { transform: translateY(-2px) scale(1.12); filter: none; }
.nav button[data-view="packs"] img { width: calc(var(--u) * 9); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }

/* entrance + idle motion */
.reveal-up { animation: revealUp 0.55s cubic-bezier(.2,.9,.3,1) both; animation-delay: var(--d, 0s); }
@keyframes revealUp { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes railIn { from { opacity: 0; transform: translateY(-10px) scale(0.8); } }
@keyframes dropIn { from { opacity: 0; transform: scale(0.85) translateY(-8px); } }
@keyframes dropOut { to { opacity: 0; transform: scale(0.92) translateY(-6px); } }
@keyframes itemIn { from { opacity: 0; transform: translateX(-12px); } }
@keyframes bob { 50% { translate: 0 calc(var(--u) * -1.2); } }

/* ---------- Card Dex ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: calc(var(--u) * 1); border-radius: 99px; background: rgba(35, 49, 77, 0.07); margin: calc(var(--u) * 2) 0; }
.seg button { padding: calc(var(--u) * 2) 0; border-radius: 99px; font-weight: 800; font-size: calc(var(--u) * 3); color: var(--ink-2); transition: 0.2s; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgba(30, 40, 80, 0.12); }
.search { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 3); border-radius: 99px; background: #fff; box-shadow: 0 3px 10px rgba(30, 40, 80, 0.07); }
.search span { font-size: calc(var(--u) * 4.6); color: var(--ink-2); }
.search input { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: calc(var(--u) * 3.2); padding: calc(var(--u) * 2.6) 0; color: var(--ink); }
.types { display: flex; gap: calc(var(--u) * 1.4); overflow-x: auto; padding: calc(var(--u) * 2.4) 0 calc(var(--u) * 1); scrollbar-width: none; }
.tdot { flex: none; width: calc(var(--u) * 7.4); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6), transparent 50%), var(--tc); box-shadow: 0 2px 6px rgba(30, 40, 80, 0.2); color: #fff; font-weight: 800; font-size: calc(var(--u) * 2.3); transition: transform 0.15s; }
.tdot.on { box-shadow: 0 0 0 calc(var(--u) * 0.7) #fff, 0 0 0 calc(var(--u) * 1.3) var(--tc); transform: scale(1.08); }
.selects { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6); margin: calc(var(--u) * 1.6) 0; }
.selects select.unused { appearance: none; border: 0; border-radius: 99px; padding: calc(var(--u) * 2) calc(var(--u) * 3); font: inherit; font-weight: 700; font-size: calc(var(--u) * 2.6); color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b6785'/%3E%3C/svg%3E") no-repeat right 12px center; box-shadow: 0 3px 10px rgba(30, 40, 80, 0.07); }
.dex-count { margin: 0 0 calc(var(--u) * 2); }
.cc .lock { position: absolute; right: 5%; top: 4%; width: calc(var(--u) * 6.4); aspect-ratio: 1; border-radius: 50%;
  background: rgba(20, 26, 46, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / 52% no-repeat;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 3px 8px rgba(0, 0, 0, 0.3); }
.more { text-align: center; padding: calc(var(--u) * 5) 0; color: var(--ink-2); font-weight: 700; }
.cv-stats { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2); margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); }
.cv-stats span { padding: calc(var(--u) * 1) calc(var(--u) * 2.4); border-radius: 99px; background: #fff; font-size: calc(var(--u) * 2.6); font-weight: 700; color: var(--ink-2); }
.cv-stats b { color: var(--ink); }
.cv-atk { padding: calc(var(--u) * 2.4) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: #fff; margin-bottom: calc(var(--u) * 1.6); display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.cv-atk span { font-weight: 800; color: var(--ink-2); font-size: calc(var(--u) * 2.8); }
.cv-atk small { grid-column: 1 / -1; color: var(--ink-2); font-size: calc(var(--u) * 2.6); }

/* ---------- Battle Pass v3 ---------- */
.sheet-card.pass-sheet { padding-top: 0; background: #f3f5f9; }
.pass-sheet .x { z-index: 3; background: rgba(255, 255, 255, 0.18); color: #fff; }
.pass-hero { position: sticky; top: 0; z-index: 2; margin: 0 calc(var(--u) * -5); overflow: hidden; color: #fff; }
.ph-bg { position: absolute; inset: 0; background: url('../assets/ui/banners/pass.webp') 70% 40% / cover; }
.ph-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 18, 32, 0.92), rgba(11, 18, 32, 0.55) 70%, rgba(11, 18, 32, 0.35)); }
.ph-content { position: relative; padding: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 4); animation: uiIn 0.45s both; }
.ph-top { display: flex; justify-content: space-between; align-items: flex-end; padding-right: calc(var(--u) * 10); }
.ph-season { font-size: calc(var(--u) * 2.4); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fcd34d; }
.ph-top h2 { color: #fff; margin: calc(var(--u) * 0.6) 0 2px; font-size: calc(var(--u) * 6.6); font-weight: 800; letter-spacing: -0.02em; }
.ph-top small { color: rgba(255, 255, 255, 0.75); font-size: calc(var(--u) * 2.7); }
.ph-tier { display: flex; flex-direction: column; align-items: center; line-height: 1; padding: calc(var(--u) * 2) calc(var(--u) * 3.4); border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); }
.ph-tier b { font-size: calc(var(--u) * 7.4); font-weight: 800; margin: 2px 0; }
.ph-tier small { font-size: calc(var(--u) * 2.1); color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.ph-bar { height: calc(var(--u) * 2); border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; margin: calc(var(--u) * 4) 0 calc(var(--u) * 1.4); }
.ph-bar span { display: block; height: 100%; border-radius: inherit; background: #fcd34d; transition: width 0.6s cubic-bezier(.2,.9,.3,1); }
.ph-bar-label { display: flex; justify-content: space-between; font-size: calc(var(--u) * 2.4); color: rgba(255, 255, 255, 0.8); }
.ph-earn { list-style: none; margin: calc(var(--u) * 3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.3); color: rgba(255, 255, 255, 0.85); }
.ph-earn li { padding: calc(var(--u) * 0.8) calc(var(--u) * 2); border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.ph-earn b { color: #fcd34d; font-weight: 700; }
.ph-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3.4); }
.ph-btn { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 2.6) calc(var(--u) * 2); border-radius: 12px; font-weight: 700; font-size: calc(var(--u) * 2.9); white-space: nowrap; transition: background-color 0.15s, transform 0.12s; }
.ph-btn span { display: inline-flex; align-items: center; gap: 3px; opacity: 0.9; font-weight: 600; }
.ph-btn.ghost { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.ph-btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.ph-btn.gold { background: #fcd34d; color: #3b2a00; }
.ph-btn.gold:hover { background: #fbbf24; }
.ph-btn.on { background: rgba(252, 211, 77, 0.16); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.4); }
.ph-btn:active { transform: scale(0.98); }
.ph-btn:disabled { opacity: 0.4; }
.lanes { display: grid; grid-template-columns: 1fr calc(var(--u) * 10) 1fr; gap: calc(var(--u) * 2); margin: calc(var(--u) * 4) 0 calc(var(--u) * 2); }
.lane { text-align: center; font-weight: 700; font-size: calc(var(--u) * 2.6); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.lane.gold { color: #b7791f; }
.ptrack { display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 6); }
.prow { display: grid; grid-template-columns: 1fr calc(var(--u) * 10) 1fr; gap: calc(var(--u) * 2); align-items: stretch; animation: uiIn 0.4s both; animation-delay: calc(var(--i) * 0.035s); }
.spine { position: relative; display: grid; place-items: center; }
.spine::before { content: ""; position: absolute; top: calc(var(--u) * -2); bottom: calc(var(--u) * -2); left: 50%; width: 3px; transform: translateX(-50%); background: #dfe3ea; }
.prow.reached .spine::before { background: #f5b301; }
.spine span { position: relative; width: calc(var(--u) * 8.4); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 3); color: #9aa3b2; background: #fff; box-shadow: inset 0 0 0 2px #dfe3ea; transition: 0.3s; }
.prow.reached .spine span { color: #3b2a00; background: #fcd34d; box-shadow: none; }
.prow.next .spine span { color: var(--ui-primary, #2563eb); box-shadow: inset 0 0 0 2px var(--ui-primary, #2563eb), 0 0 0 5px rgba(37, 99, 235, 0.15); }
.pr { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; border-radius: 14px; overflow: hidden; text-align: left;
  background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px rgba(17, 24, 39, 0.05); transition: transform 0.15s, box-shadow 0.2s; }
.pr-art { height: calc(var(--u) * 22); display: grid; place-items: center; background: #eef4ff; overflow: visible; }
.pr.prem .pr-art { background: #fff6db; }
.pr-art img { max-width: 70%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(17, 24, 39, 0.18)); transition: transform 0.3s cubic-bezier(.3,1.6,.5,1); }
.pr.pack .pr-art img { max-height: 92%; rotate: 4deg; }
.pr.card .pr-art img { max-height: 90%; rotate: -5deg; }
.pr.mat .pr-art img { height: 88%; max-height: none; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 2px #fff, 0 6px 12px rgba(17, 24, 39, 0.2); }
.pr-amt { display: flex; align-items: baseline; gap: 6px; padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4); color: var(--ink); }
.pr-amt b { font-size: calc(var(--u) * 3.8); font-weight: 800; letter-spacing: -0.01em; }
.pr-amt small { font-size: calc(var(--u) * 2.4); color: var(--ink-2); font-weight: 600; }
.pr-tag { position: absolute; top: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.1); font-weight: 700; padding: 3px calc(var(--u) * 1.8); border-radius: 99px; }
.pr-tag.go { background: var(--ui-primary, #2563eb); color: #fff; }
.pr-tag.ok { background: #dcfce7; color: #15803d; }
.pr-tag.lock { background: rgba(17, 24, 39, 0.72); color: #fcd34d; padding-left: calc(var(--u) * 5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fcd34d'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: calc(var(--u) * 2.6); background-position: calc(var(--u) * 1.4) center; }
.pr.can { box-shadow: 0 0 0 2px var(--ui-primary, #2563eb), 0 8px 18px rgba(37, 99, 235, 0.18); }
.pr.can:hover { transform: translateY(-2px); }
.pr.can:hover .pr-art img { transform: scale(1.08) rotate(-3deg); }
.pr.can .pr-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%); background-size: 250% 100%; animation: sweep 2s linear infinite; pointer-events: none; }
.pr-art { position: relative; }
.pr.claimed .pr-art img { opacity: 0.45; filter: grayscale(0.6); }
.pr.locked .pr-art img { filter: drop-shadow(0 6px 10px rgba(17, 24, 39, 0.18)) saturate(0.7); }
.pr:disabled { cursor: default; }

.vip-card { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3); margin: calc(var(--u) * 2) 0; border-radius: calc(var(--u) * 4); color: #5a3a00;
  background: linear-gradient(135deg, #fff3c4, #ffd98a); box-shadow: 0 8px 20px rgba(255, 177, 61, 0.25); }
.vip-card img { width: calc(var(--u) * 14); animation: bob 3s ease-in-out infinite; }
.vip-card > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vip-card b { font-size: calc(var(--u) * 5); font-weight: 900; }
.vip-card small { font-size: calc(var(--u) * 2.5); }
.vip-card .bar { background: rgba(122, 74, 0, 0.15); }
.vip-card .bar > span { background: linear-gradient(90deg, #ff9d2e, #ff3d6e); }

.tdot:not(.all) { background: none; box-shadow: none; padding: 0; }
.tdot img { width: 118%; margin: -9%; display: block; filter: drop-shadow(0 2px 3px rgba(30, 40, 80, 0.25)); }
.tdot.on:not(.all) { box-shadow: 0 0 0 calc(var(--u) * 0.7) #fff, 0 0 0 calc(var(--u) * 1.3) var(--tc); }

img.ico { width: calc(var(--u) * 6); height: auto; border-radius: 0; background: none; box-shadow: none; transform: none; margin: calc(var(--u) * -1) 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)); }
img.gem-art { width: calc(var(--u) * 20); height: auto; aspect-ratio: auto; transform: none; border-radius: 0; background: none; box-shadow: none; margin: 0; filter: drop-shadow(0 10px 14px rgba(47, 107, 255, 0.35)); animation: bob 3s ease-in-out infinite; }
.gem-pack:nth-child(2) img.gem-art { width: calc(var(--u) * 22); } .gem-pack:nth-child(3) img.gem-art { width: calc(var(--u) * 24); } .gem-pack:nth-child(4) img.gem-art { width: calc(var(--u) * 26); }

.ci { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.32em; margin: 0 1px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.cur-inline { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.day b .ci { width: calc(var(--u) * 8); height: calc(var(--u) * 8); vertical-align: middle; }
.celebrate b .ci { width: 1em; height: 1em; vertical-align: -0.12em; }

/* ---------- Dex: custom dropdowns + locked cards ---------- */
#view-collection { position: absolute; }
.dd { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: calc(var(--u) * 1.6) calc(var(--u) * 7) calc(var(--u) * 1.6) calc(var(--u) * 3);
  border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e5e7eb; text-align: left; transition: box-shadow 0.15s, background 0.15s; min-width: 0; }
.dd small { font-size: calc(var(--u) * 2.1); color: #6b7280; font-weight: 600; }
.dd b { font-size: calc(var(--u) * 2.9); font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dd i { position: absolute; right: calc(var(--u) * 3); top: 50%; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); margin-top: calc(var(--u) * -1.4); border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280; transform: rotate(45deg); transition: transform 0.2s; }
.dd.open { box-shadow: inset 0 0 0 2px #2563eb; }
.dd.open i { transform: rotate(225deg); margin-top: calc(var(--u) * -0.2); }
.dd.set { box-shadow: inset 0 0 0 1px #bfdbfe; background: #eff6ff; }
.dd-menu { position: absolute; z-index: 8; max-height: calc(var(--u) * 92); overflow-y: auto; padding: calc(var(--u) * 1.2); border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px #e5e7eb, 0 16px 40px rgba(17, 24, 39, 0.16); transform-origin: top left; animation: ddIn 0.18s cubic-bezier(.2,.9,.3,1); scrollbar-width: thin; }
.dd-opt { display: flex; align-items: center; gap: calc(var(--u) * 2); width: 100%; padding: calc(var(--u) * 2) calc(var(--u) * 2.4); border-radius: 10px; text-align: left; font-size: calc(var(--u) * 2.9); font-weight: 600; color: #111827; animation: uiIn 0.25s both; animation-delay: calc(var(--i) * 0.015s); }
.dd-opt:hover { background: #f3f4f6; }
.dd-opt span { flex: 1; }
.dd-opt em { font-style: normal; font-size: calc(var(--u) * 2.4); letter-spacing: 1px; }
.dd-opt .dot { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; flex: none; }
.dd-opt img { width: calc(var(--u) * 5); height: calc(var(--u) * 7); object-fit: contain; flex: none; }
.dd-opt.on { background: #eff6ff; color: #1d4ed8; }
.dd-opt.on::after { content: ""; width: calc(var(--u) * 2.4); height: calc(var(--u) * 1.3); border-left: 2px solid #1d4ed8; border-bottom: 2px solid #1d4ed8; transform: rotate(-45deg) translateY(-2px); margin-left: calc(var(--u) * 1); }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.cc .lock { display: none; }
.cc .veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.35), rgba(17, 24, 39, 0.55)); border-radius: inherit; }
.cc .veil .lock { display: block; position: static; width: calc(var(--u) * 9); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111827'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / 50% no-repeat; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.cc .veil small { color: #fff; font-weight: 700; font-size: calc(var(--u) * 2.3); letter-spacing: 0.04em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.cc.missing:hover .veil { background: linear-gradient(180deg, rgba(17, 24, 39, 0.15), rgba(17, 24, 39, 0.4)); }

.dropdown.closing { pointer-events: none; }
.lvl em { white-space: nowrap; }

/* =====================================================================
   Lobby v3 — free pack hero, deals strip, 6 tiles, missions / bag / mail,
   shop tabs, confirm + reward modals, level-up celebration.
   ===================================================================== */
:root { --red-dot: #ff3b30; --gold-1: #ffd54a; --gold-2: #f5a900; --blue-1: #3b82f6; --blue-2: #2563eb; }

/* ---------- buttons ---------- */
.b3 { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2.2) calc(var(--u) * 4.4);
  border-radius: 99px; font-weight: 800; font-size: calc(var(--u) * 3); line-height: 1; white-space: nowrap; color: #fff;
  background: linear-gradient(180deg, var(--blue-1), var(--blue-2)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 4px 12px rgba(37, 99, 235, 0.28);
  transition: transform 0.12s, filter 0.15s, box-shadow 0.15s; }
.b3:hover:not(:disabled) { filter: brightness(1.06); }
.b3:active:not(:disabled) { transform: scale(0.95); }
.b3.sm { padding: calc(var(--u) * 1.8) calc(var(--u) * 3.6); font-size: calc(var(--u) * 2.7); }
.b3.wide { width: 100%; padding: calc(var(--u) * 3.2) 0; font-size: calc(var(--u) * 3.6); }
.b3.gold { color: #4a2c00; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); box-shadow: inset 0 -3px 0 rgba(140, 80, 0, 0.22), 0 4px 14px rgba(245, 169, 0, 0.35); }
.b3.green { background: linear-gradient(180deg, #3fd08a, #16a34a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 4px 12px rgba(22, 163, 74, 0.3); }
.b3.red { background: linear-gradient(180deg, #ff6259, #e5302a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16), 0 4px 12px rgba(229, 48, 42, 0.3); }
.b3.ghost { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1.5px #dfe4ee, 0 2px 6px rgba(30, 40, 80, 0.06); }
.b3.off, .b3:disabled { color: #8a93a6; background: #e9ecf2; box-shadow: none; cursor: default; }
.b3.gold:not(:disabled)::after, .b3.green.shine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); background-size: 260% 100%; animation: sweep 2.6s ease-in-out infinite; pointer-events: none; }
.dotn { display: inline-grid; place-items: center; min-width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); padding: 0 calc(var(--u) * 1); border-radius: 99px; background: var(--red-dot); color: #fff;
  font-style: normal; font-size: calc(var(--u) * 2.3); font-weight: 800; box-shadow: 0 0 0 2px #fff; line-height: 1; }
.dotn.light { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }

/* ---------- red notification badges everywhere ---------- */
.badge, .tile .badge { background: var(--red-dot) !important; box-shadow: 0 0 0 calc(var(--u) * 0.6) #fff !important; animation: badgePop 0.4s cubic-bezier(.3,1.8,.5,1), pulse 1.4s 0.4s infinite; }
.badge.num { width: auto; min-width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); padding: 0 calc(var(--u) * 1.2); border-radius: 99px; display: grid; place-items: center;
  font-style: normal; font-size: calc(var(--u) * 2.5); font-weight: 900; color: #fff; line-height: 1; aspect-ratio: auto; }
.tile .badge { left: auto; right: calc(var(--u) * 2.2); top: calc(var(--u) * 2.2); z-index: 2; }
.nav .badge { top: calc(var(--u) * 0.6); right: calc(var(--u) * 3); }
@keyframes badgePop { from { transform: scale(0); } }

/* ---------- topbar bump when currencies change ---------- */
.cur.bump { animation: curBump 0.5s cubic-bezier(.3,1.8,.5,1); }
@keyframes curBump { 30% { transform: scale(1.14); } }

/* ---------- play card: deck button ---------- */
.deck-btn { width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 2.4); margin-bottom: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.4) calc(var(--u) * 3) calc(var(--u) * 1.4) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 3); background: #fff; box-shadow: inset 0 0 0 1.5px #e3e8f1; text-align: left; transition: transform 0.12s, box-shadow 0.15s; }
.deck-btn:hover { box-shadow: inset 0 0 0 1.5px var(--blue-1); }
.deck-btn:active { transform: scale(0.98); }
.deck-btn img { width: calc(var(--u) * 7.4); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)); }
.deck-btn span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.deck-btn small { font-size: calc(var(--u) * 2.1); color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.deck-btn b { font-size: calc(var(--u) * 3.1); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-btn em { font-style: normal; font-weight: 800; font-size: calc(var(--u) * 2.7); color: var(--blue-2); }

/* ---------- free pack hero ---------- */
.free-card { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 3); margin: calc(var(--u) * 1) 0 calc(var(--u) * 2.4); padding: calc(var(--u) * 3) calc(var(--u) * 3.4) calc(var(--u) * 3) calc(var(--u) * 2.4);
  min-height: calc(var(--u) * 36); border-radius: calc(var(--u) * 5); color: #fff; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(125deg, #2f7bff, #1559d6 55%, #0b3d9e); box-shadow: 0 16px 36px rgba(21, 89, 214, 0.35); }
.free-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 28px); pointer-events: none; }
.free-card.ready { background: radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.55), transparent 42%), linear-gradient(125deg, #ffb300, #ff7a00 55%, #e5482a); box-shadow: 0 16px 40px rgba(255, 122, 0, 0.45); }
.free-card.spun .fc-hg img { animation: hgSpin 0.6s cubic-bezier(.3,1.4,.5,1); }
@keyframes hgSpin { to { transform: rotate(180deg); } }
.fc-art { position: relative; width: calc(var(--u) * 26); flex: none; display: grid; place-items: center; }
.fc-art img { position: relative; z-index: 1; height: calc(var(--u) * 31); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.4)); rotate: -7deg; animation: bob 3s ease-in-out infinite; transition: transform 0.3s cubic-bezier(.3,1.6,.5,1); }
.free-card:hover .fc-art img { transform: scale(1.06) rotate(4deg); }
.free-card.ready .fc-art img { animation: bob 3s ease-in-out infinite, packShake 2.4s ease-in-out infinite; }
@keyframes packShake { 0%, 84%, 100% { transform: none; } 88% { transform: rotate(-5deg) scale(1.04); } 92% { transform: rotate(5deg) scale(1.04); } 96% { transform: rotate(-3deg); } }
.fc-glow { position: absolute; width: 190%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.75) 0 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 66%); mask: radial-gradient(circle, #000 10%, transparent 66%); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fc-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.fc-tag { align-self: flex-start; font-size: calc(var(--u) * 2.1); font-weight: 900; letter-spacing: 0.14em; color: #1559d6; background: #fff; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.8); border-radius: 99px; }
.free-card.ready .fc-tag { color: #e5482a; }
.fc-main > b { font-size: calc(var(--u) * 5.2); font-weight: 900; line-height: 1.02; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.fc-meter { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.fc-meter i { flex: 1; max-width: calc(var(--u) * 10); height: calc(var(--u) * 2.2); border-radius: 99px; background: rgba(255, 255, 255, 0.22); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.fc-meter i span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #fff3b0, #ffd23f); box-shadow: 0 0 10px rgba(255, 220, 80, 0.9); transition: width 0.8s; }
.fc-meter em { font-style: normal; font-size: calc(var(--u) * 2.5); font-weight: 800; opacity: 0.9; white-space: nowrap; }
.fc-time { font-size: calc(var(--u) * 6); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1; }
.fc-row { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 0.6); }
.fc-open { color: #e5482a !important; background: #fff !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important; padding: calc(var(--u) * 2.4) calc(var(--u) * 5) !important; font-size: calc(var(--u) * 3.4) !important; animation: openPulse 1.3s ease-in-out infinite; }
@keyframes openPulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 calc(var(--u) * 1.6) rgba(255, 255, 255, 0.35), 0 6px 16px rgba(0, 0, 0, 0.18); } }
.fc-hg { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.8) calc(var(--u) * 2.2) calc(var(--u) * 0.8) calc(var(--u) * 0.8); border-radius: 99px; color: #fff;
  background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); transition: transform 0.12s, background 0.15s; }
.fc-hg:hover { background: rgba(255, 255, 255, 0.28); }
.fc-hg:active { transform: scale(0.95); }
.fc-hg img { width: calc(var(--u) * 6); }
.fc-hg b { font-size: calc(var(--u) * 2.8); font-weight: 900; }
.fc-hg small { font-size: calc(var(--u) * 2.3); font-weight: 800; opacity: 0.9; }
.fc-hg.none { opacity: 0.55; }

/* nav: free pack chip on the Packs button */
.nav button { position: relative; }
.nav-chip { position: absolute; top: calc(var(--u) * -2.8); left: 50%; transform: translateX(-50%); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6); border-radius: 99px; white-space: nowrap;
  font-style: normal; font-size: calc(var(--u) * 2.1); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); background: #fff; box-shadow: 0 2px 8px rgba(30, 40, 80, 0.2); }
.nav-chip.ready { color: #fff; background: var(--red-dot); animation: chipBounce 1.6s ease-in-out infinite; }
@keyframes chipBounce { 0%, 70%, 100% { transform: translateX(-50%); } 80% { transform: translateX(-50%) translateY(-3px); } 90% { transform: translateX(-50%) translateY(0); } }

/* ---------- deals strip (home) ---------- */
.deals-head { display: flex; justify-content: space-between; align-items: baseline; margin: calc(var(--u) * 4) 0 calc(var(--u) * 0.6); }
.deals-head b { font-size: calc(var(--u) * 3.8); }
.deals-head a { color: var(--accent); font-weight: 700; font-size: calc(var(--u) * 2.8); text-decoration: none; cursor: pointer; }
.deals { display: flex; gap: calc(var(--u) * 2.6); overflow-x: auto; padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 3); margin: 0 calc(var(--u) * -4); scrollbar-width: none; scroll-snap-type: x mandatory; }
.deals::-webkit-scrollbar { display: none; }
.deal { position: relative; flex: 0 0 calc(var(--u) * 62); scroll-snap-align: start; overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 3) calc(var(--u) * 3.4);
  min-height: calc(var(--u) * 36); border-radius: calc(var(--u) * 4.4); color: #fff; text-align: left; box-shadow: 0 10px 24px rgba(30, 40, 80, 0.2); animation: cardIn 0.45s both; animation-delay: calc(var(--i) * 0.07s); transition: transform 0.15s; }
.deal:hover { transform: translateY(-3px); }
.deal.starter { background: radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(135deg, #ff6b4a, #e5302a 60%, #b31b1b); }
.deal.monthly { background: radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(135deg, #22c3e6, #1679d6 60%, #0d4fa8); }
.deal.bundle { background: radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.4), transparent 40%), linear-gradient(135deg, #ffcf3f, #f59e0b 55%, #d9730b); color: #3b2200; }
.deal-tag { align-self: flex-start; font-size: calc(var(--u) * 2); font-weight: 900; letter-spacing: 0.12em; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.6); border-radius: 99px; background: rgba(255, 255, 255, 0.95); color: #b31b1b; }
.deal.monthly .deal-tag { color: #0d4fa8; } .deal.bundle .deal-tag { color: #b45309; background: #fff; }
.deal > b { position: relative; z-index: 1; font-size: calc(var(--u) * 4.6); font-weight: 900; line-height: 1.05; max-width: 62%; }
.deal > small { position: relative; z-index: 1; font-size: calc(var(--u) * 2.5); font-weight: 700; opacity: 0.95; max-width: 60%; line-height: 1.3; }
.deal-art { position: absolute; right: calc(var(--u) * -2); top: 50%; translate: 0 -50%; width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.deal-art img { position: absolute; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3)); animation: bob 3s ease-in-out infinite; }
.deal-art img:nth-child(1) { width: 78%; left: 4%; top: 10%; }
.deal-art img:nth-child(2) { width: 46%; right: 8%; bottom: 0; animation-delay: -1s; }
.deal-art img:nth-child(3) { width: 38%; left: 0; bottom: 4%; animation-delay: -2s; }
.deal-foot { position: relative; z-index: 1; margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.deal-price { padding: calc(var(--u) * 1.6) calc(var(--u) * 3.6); border-radius: 99px; font-weight: 900; font-size: calc(var(--u) * 3); color: #fff; background: linear-gradient(180deg, #3fd08a, #16a34a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.2); }
.deal-foot em { font-style: normal; font-size: calc(var(--u) * 2.3); font-weight: 800; opacity: 0.95; font-variant-numeric: tabular-nums; }
.value-sticker { position: absolute; z-index: 2; right: calc(var(--u) * 2.4); top: calc(var(--u) * 2.4); width: calc(var(--u) * 14); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; line-height: 0.95;
  font-size: calc(var(--u) * 2.3); font-weight: 900; color: #4a2c00; background: radial-gradient(circle at 35% 30%, #fff6c6, #ffd23f 55%, #f5a900); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.6); rotate: 12deg; animation: stickerWob 2.4s ease-in-out infinite; }
.value-sticker b { display: block; font-size: calc(var(--u) * 4.6); }
@keyframes stickerWob { 50% { rotate: 4deg; scale: 1.06; } }
.deal .badge { left: calc(var(--u) * 2); top: calc(var(--u) * 2); right: auto; }

/* ---------- tiles (6) ---------- */
.tiles .tile { min-height: calc(var(--u) * 28); }
.tile .t-stat { font-weight: 800 !important; color: #fff !important; }
.t-lucky { background: linear-gradient(160deg, #3ddc97, #10a36b 70%) !important; box-shadow: 0 10px 24px rgba(16, 163, 107, 0.28) !important; }
.t-bag { background: linear-gradient(160deg, #4f9bff, #1d5fe0 70%) !important; box-shadow: 0 10px 24px rgba(29, 95, 224, 0.28) !important; }
.t-lucky::before, .t-bag::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.35), transparent 45%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 10px, transparent 10px 20px); pointer-events: none; }
.pips { display: flex; gap: calc(var(--u) * 0.8); margin-top: calc(var(--u) * 0.8); position: relative; }
.pips i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.pips i.on { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffd23f 60%, #f5a900); box-shadow: 0 0 6px rgba(255, 220, 80, 0.9); }
.tile.locked-soft { filter: saturate(0.35); }
.tile .lock-chip { position: relative; align-self: flex-start; font-size: calc(var(--u) * 2.2); font-weight: 900; padding: 1px calc(var(--u) * 1.6); border-radius: 99px; background: rgba(0, 0, 0, 0.35); }

/* ---------- sheet with fixed head/foot (missions, bag, mail) ---------- */
.sheet-card.missions-sheet { display: flex; flex-direction: column; height: calc(var(--vh1) * 88); max-height: calc(var(--vh1) * 88); padding: 0; overflow: hidden; background: #f3f5f9; }
.missions-sheet .x { z-index: 4; }
.m-head { flex: none; padding: calc(var(--u) * 5.4) calc(var(--u) * 5) calc(var(--u) * 2.4); background: #fff; box-shadow: 0 1px 0 #e6e9f0; }
.m-head h2 { margin-bottom: calc(var(--u) * 3); }
.m-head h2 + .muted { margin: calc(var(--u) * -2) 0 0; }
.tabs3 { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: calc(var(--u) * 0.9); border-radius: 99px; background: #eef1f6; }
.tabs3.two { grid-template-columns: 1fr 1fr; }
.tabs3 button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2.1) 0; border-radius: 99px; font-weight: 800; font-size: calc(var(--u) * 2.9); color: var(--ink-2); transition: color 0.2s; }
.tabs3 button.on { color: var(--ink); }
.tabs3 .dotn { position: absolute; top: calc(var(--u) * -1.4); right: calc(var(--u) * 1); }
.tabs3 .cnt { font-size: calc(var(--u) * 2.3); color: var(--ink-2); background: rgba(35, 49, 77, 0.08); padding: 1px calc(var(--u) * 1.4); border-radius: 99px; }
.tab-ink { position: absolute; top: calc(var(--u) * 0.9); bottom: calc(var(--u) * 0.9); left: calc(var(--u) * 0.9); width: calc((100% - var(--u) * 1.8) / 3); border-radius: 99px; background: #fff;
  box-shadow: 0 2px 8px rgba(30, 40, 80, 0.12); transform: translateX(calc(var(--n) * 100%)); transition: transform 0.32s cubic-bezier(.3,1.3,.5,1); }
.tabs3.two .tab-ink { width: calc((100% - var(--u) * 1.8) / 2); }
.m-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: calc(var(--u) * 3.4) calc(var(--u) * 4) calc(var(--u) * 8); scrollbar-width: none; animation: bodyIn 0.3s cubic-bezier(.2,.9,.3,1); }
.m-body::-webkit-scrollbar { display: none; }
@keyframes bodyIn { from { opacity: 0; transform: translateX(14px); } }
.m-foot { flex: none; padding: calc(var(--u) * 2.6) calc(var(--u) * 5) calc(var(--u) * 5); background: linear-gradient(180deg, rgba(243, 245, 249, 0), #f3f5f9 35%); margin-top: calc(var(--u) * -6); position: relative; z-index: 2; }
.m-foot .b3 .dotn { margin-left: calc(var(--u) * 0.6); }

/* beginner milestone header */
.ms-head { padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 3); margin-bottom: calc(var(--u) * 3); border-radius: calc(var(--u) * 4.4); color: #fff;
  background: radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.28), transparent 45%), linear-gradient(135deg, #2f7bff, #1559d6 60%, #0f4bb8); box-shadow: 0 10px 26px rgba(21, 89, 214, 0.3); }
.ms-title { display: flex; justify-content: space-between; align-items: baseline; }
.ms-title span { font-size: calc(var(--u) * 3); font-weight: 800; opacity: 0.92; }
.ms-title b { font-size: calc(var(--u) * 6.4); font-weight: 900; line-height: 1; }
.ms-title b small { font-size: calc(var(--u) * 3.2); opacity: 0.75; }
.ms-track { position: relative; height: calc(var(--u) * 19); margin: calc(var(--u) * 4.4) calc(var(--u) * 6) 0 calc(var(--u) * 1); }
.ms-bar { position: absolute; left: 0; right: 0; top: calc(var(--u) * 5.2); height: calc(var(--u) * 2); border-radius: 99px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.ms-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe27a, #ffb300); box-shadow: 0 0 10px rgba(255, 200, 60, 0.8); animation: barIn 0.9s cubic-bezier(.2,.9,.3,1) both; transform-origin: left; }
@keyframes barIn { from { transform: scaleX(0); } }
.ms-node { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); color: #fff; }
.ms-ico { position: relative; width: calc(var(--u) * 12.4); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), inset 0 0 0 3px #d6e2fb; }
.ms-ico img { width: 72%; height: 72%; object-fit: contain; filter: saturate(0.4) opacity(0.75); }
.ms-ico i { position: absolute; bottom: calc(var(--u) * -1); right: calc(var(--u) * -1.4); font-style: normal; font-size: calc(var(--u) * 2.2); font-weight: 900; color: #fff; background: #23314d; padding: 1px calc(var(--u) * 1.2); border-radius: 99px; }
.ms-node small { font-size: calc(var(--u) * 2.6); font-weight: 900; }
.ms-node.can .ms-ico { box-shadow: 0 0 0 calc(var(--u) * 0.8) #ffd23f, 0 0 22px rgba(255, 210, 63, 0.9); animation: nodePulse 1.2s ease-in-out infinite; }
.ms-node.can .ms-ico img, .ms-node.got .ms-ico img { filter: none; }
.ms-node.can::after { content: "Claim"; position: absolute; top: calc(var(--u) * -3.6); font-size: calc(var(--u) * 2); font-weight: 900; color: #4a2c00; background: #ffd23f; padding: 1px calc(var(--u) * 1.4); border-radius: 99px; }
.ms-node.got .ms-ico { background: #ffe9a6; box-shadow: inset 0 0 0 3px #ffc531; }
.ms-node.got .ms-ico::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(22, 163, 74, 0.72); color: #fff; font-weight: 900; font-size: calc(var(--u) * 5); }
@keyframes nodePulse { 50% { transform: scale(1.08); } }
.ms-hint { margin: calc(var(--u) * 1) 0 0; font-size: calc(var(--u) * 2.5); opacity: 0.85; }

/* mission + achievement cards */
.mlist { display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); }
.mcard, .acard { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 2.8); padding: calc(var(--u) * 2.6) calc(var(--u) * 3) calc(var(--u) * 2.6) calc(var(--u) * 2.6);
  border-radius: calc(var(--u) * 3.6); background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 12px rgba(17, 24, 39, 0.05); animation: cardIn 0.42s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(min(var(--i), 12) * 0.04s); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.mcard.ready, .acard.ready { box-shadow: 0 0 0 2px #ffc531, 0 8px 20px rgba(245, 169, 0, 0.2); background: linear-gradient(90deg, #fffbea, #fff 60%); }
.mcard.claimed { opacity: 0.6; }
.mcard.claimed .rbox { filter: grayscale(0.5); }
.claiming { animation: claimOut 0.3s ease-in forwards !important; }
@keyframes claimOut { to { transform: scale(1.04); opacity: 0.2; filter: brightness(1.4); } }
.rbox { position: relative; flex: none; width: calc(var(--u) * 14); aspect-ratio: 1; border-radius: calc(var(--u) * 3); display: grid; place-items: center; background: #eef3fb; overflow: hidden; }
.rbox.gem { background: linear-gradient(160deg, #e5f3ff, #cfe6ff); }
.rbox.coin { background: linear-gradient(160deg, #fff6d6, #ffe7a3); }
.rbox.pack.prem, .rbox.card { background: linear-gradient(160deg, #fff4cf, #ffe08a); }
.rbox.pack.vip, .rbox.mat { background: linear-gradient(160deg, #ffe2e0, #ffb4ad); }
.rbox.item { background: linear-gradient(160deg, #e8f8ef, #c9efd9); }
.rbox img { width: 70%; height: 70%; object-fit: contain; margin-top: -14%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18)); }
.rbox b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: calc(var(--u) * 2.5); font-weight: 900; padding: calc(var(--u) * 0.5) 0; background: rgba(255, 255, 255, 0.85); }
.mc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.mc-main > b { font-size: calc(var(--u) * 3.2); font-weight: 800; line-height: 1.2; }
.mc-prog { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.mbar { flex: 1; height: calc(var(--u) * 1.8); border-radius: 99px; background: #e8ebf2; overflow: hidden; }
.mbar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #22c3e6); animation: barIn 0.8s cubic-bezier(.2,.9,.3,1) both; transform-origin: left; }
.ready .mbar > span { background: linear-gradient(90deg, #ffc531, #ff9d00); }
.mc-prog em { font-style: normal; font-size: calc(var(--u) * 2.5); font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-rw { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); }
.rchip { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.6) calc(var(--u) * 0.4) calc(var(--u) * 0.6); border-radius: 99px; background: #f1f4f9; font-size: calc(var(--u) * 2.4); font-weight: 800; color: var(--ink); }
.rchip img { width: calc(var(--u) * 4); height: calc(var(--u) * 4); object-fit: contain; }
.rchip.mat img { object-fit: cover; border-radius: 3px; }
.mc-done { flex: none; width: calc(var(--u) * 9); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #15803d; font-weight: 900; font-size: calc(var(--u) * 4); }
.daily-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(var(--u) * 1); margin-bottom: calc(var(--u) * 2.6); font-size: calc(var(--u) * 2.6); color: var(--ink-2); font-weight: 700; }
.daily-head b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* achievements: tiered medals */
.medal { position: relative; flex: none; width: calc(var(--u) * 14); aspect-ratio: 1; display: grid; place-items: center; }
.medal::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--mg); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 4px 6px rgba(255, 255, 255, 0.65), 0 4px 10px rgba(0, 0, 0, 0.18); }
.medal::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.medal span { position: relative; z-index: 1; font-size: calc(var(--u) * 5); font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.medal.bronze { --mg: radial-gradient(circle at 35% 30%, #ffd9b8, #d0844c 55%, #8f4f22); }
.medal.silver { --mg: radial-gradient(circle at 35% 30%, #ffffff, #b9c3d3 55%, #7a879b); }
.medal.gold { --mg: radial-gradient(circle at 35% 30%, #fff6c6, #ffc531 55%, #c98400); }
.medal.plat { --mg: radial-gradient(circle at 35% 30%, #e9fffb, #7fd8cf 55%, #2c8f88); }
.medal.diamond { --mg: radial-gradient(circle at 35% 30%, #eaf6ff, #6cb8ff 55%, #1f5fd1); }
.medal.master { --mg: radial-gradient(circle at 35% 30%, #fff0d2, #ff7a45 50%, #c7271a); }
.acard.ready .medal { animation: nodePulse 1.4s ease-in-out infinite; }
.ac-top { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.ac-top b { font-size: calc(var(--u) * 3.2); font-weight: 800; }
.ac-top em { font-style: normal; font-size: calc(var(--u) * 2.1); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px calc(var(--u) * 1.4); border-radius: 99px; color: #fff; }
.m-bronze { background: #b8693a; } .m-silver { background: #8b97aa; } .m-gold { background: #e0a100; } .m-plat { background: #2fa59c; } .m-diamond { background: #2f74e0; } .m-master { background: #e0452c; }
.ac-text { font-size: calc(var(--u) * 2.6); color: var(--ink-2); font-weight: 600; }
.ac-pips { display: flex; gap: calc(var(--u) * 0.8); }
.ac-pips i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: #e4e8ef; }
.ac-pips i.on.bronze { background: #c8763f; } .ac-pips i.on.silver { background: #a3aebf; } .ac-pips i.on.gold { background: #f5b301; }
.ac-pips i.on.plat { background: #3fb6ad; } .ac-pips i.on.diamond { background: #3b82f6; } .ac-pips i.on.master { background: #ef5a3c; }

/* ---------- bag ---------- */
.bag-list { display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); }
.bag-item { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3.6); background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 12px rgba(17, 24, 39, 0.05);
  animation: cardIn 0.42s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i) * 0.05s); }
.bag-item.empty .bi-art img { filter: grayscale(0.7) opacity(0.6); }
.bag-item.used .bi-art img { animation: useFx 0.6s cubic-bezier(.3,1.6,.5,1); }
@keyframes useFx { 40% { transform: scale(1.25) rotate(-10deg); filter: brightness(1.5); } }
.bi-art { position: relative; flex: none; width: calc(var(--u) * 16); aspect-ratio: 1; border-radius: calc(var(--u) * 3.4); display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff, #e8eef9); }
.bi-art img { width: 82%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); }
.bi-art i { position: absolute; right: calc(var(--u) * -1); bottom: calc(var(--u) * -1); font-style: normal; font-size: calc(var(--u) * 2.6); font-weight: 900; color: #fff; background: #23314d; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.6); border-radius: 99px; box-shadow: 0 0 0 2px #fff; }
.bi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }
.bi-main b { font-size: calc(var(--u) * 3.3); font-weight: 800; }
.bi-main small { font-size: calc(var(--u) * 2.6); color: var(--ink-2); line-height: 1.3; }
.bi-main em { font-style: normal; font-size: calc(var(--u) * 2.4); font-weight: 800; color: var(--blue-2); }
.bag-packs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.6); }
.bp3 { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 5) calc(var(--u) * 2) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 4);
  background: linear-gradient(180deg, var(--bp-a), var(--bp-b) 55%, #fff 55.1%); box-shadow: 0 0 0 2px var(--bp-ring), 0 6px 16px rgba(17, 24, 39, 0.1); animation: cardIn 0.45s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i) * 0.06s); text-align: center; }
.bp3.std { --bp-a: #d8e8ff; --bp-b: #a9c8ff; --bp-ring: #8fb5ff; }
.bp3.prem { --bp-a: #fff1c2; --bp-b: #ffd76a; --bp-ring: #ffc531; }
.bp3.vip { --bp-a: #ffd5d0; --bp-b: #ff8f80; --bp-ring: #ff5a4a; }
.bp3.banner { --bp-a: #e2f6ee; --bp-b: #a9e5cc; --bp-ring: #5fcfa3; }
.bp3-class { position: absolute; top: calc(var(--u) * 1.6); left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 2); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(17, 24, 39, 0.55); padding: 1px calc(var(--u) * 1.6); border-radius: 99px; }
.bp3-art { position: relative; height: calc(var(--u) * 30); display: grid; place-items: center; }
.bp3-art img { position: relative; z-index: 1; height: 100%; filter: drop-shadow(0 8px 12px rgba(17, 24, 39, 0.3)); animation: bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.5s); }
.bp3-art .bp3-back { position: absolute; z-index: 0; height: 92%; rotate: 9deg; translate: 18% 2%; opacity: 0.75; animation: none; filter: brightness(0.85) drop-shadow(0 6px 8px rgba(17, 24, 39, 0.2)); }
.bp3 > b { font-size: calc(var(--u) * 3.1); font-weight: 800; margin-top: calc(var(--u) * 1.4); }
.bp3 > small { font-size: calc(var(--u) * 2.5); color: var(--ink-2); font-weight: 700; }
.bp3-act { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 1); }
.bag-empty { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 10) calc(var(--u) * 6); text-align: center; }
.bag-empty img { height: calc(var(--u) * 28); opacity: 0.5; filter: grayscale(0.6); animation: bob 3s ease-in-out infinite; }
.bag-empty b { font-size: calc(var(--u) * 3.8); }
.bag-empty small { font-size: calc(var(--u) * 2.8); color: var(--ink-2); margin-bottom: calc(var(--u) * 2); }

/* ---------- mail inbox ---------- */
.mail3 { display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3.6); background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 12px rgba(17, 24, 39, 0.05);
  animation: cardIn 0.42s both; animation-delay: calc(var(--i) * 0.05s); }
.mail3.unread { box-shadow: inset 4px 0 0 var(--red-dot), 0 4px 12px rgba(17, 24, 39, 0.06); }
.mail3.done { opacity: 0.55; }
.mail3 .mi { position: relative; flex: none; width: calc(var(--u) * 12); aspect-ratio: 1; border-radius: calc(var(--u) * 3); display: grid; place-items: center; background: #eef3fb; }
.mail3 .mi img { width: 74%; }
.mail3 .mi .badge { right: calc(var(--u) * -0.8); top: calc(var(--u) * -0.8); }
.mail3 .mc-main > small { font-size: calc(var(--u) * 2.5); color: var(--ink-2); line-height: 1.3; }
.exp-chip { align-self: flex-start; font-style: normal; font-size: calc(var(--u) * 2.1); font-weight: 900; padding: 1px calc(var(--u) * 1.4); border-radius: 99px; background: #fff1e6; color: #c2410c; }
.exp-chip.soon { background: #ffe4e2; color: #e5302a; }

/* ---------- modal: confirm + rewards ---------- */
.modal { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: calc(var(--u) * 6); background: rgba(15, 22, 42, 0.55); backdrop-filter: blur(5px); animation: fadeIn 0.2s; }
.modal.closing { animation: fadeOut 0.18s forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.mbox { position: relative; width: min(calc(var(--u) * 86), 420px); max-height: calc(var(--vh1) * 86); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 5); border-radius: calc(var(--u) * 6); background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); text-align: center; animation: boxIn 0.38s cubic-bezier(.2,1.4,.4,1); }
.mbox::-webkit-scrollbar { display: none; }
.modal.closing .mbox { animation: boxOut 0.18s forwards; }
@keyframes boxIn { from { opacity: 0; transform: scale(0.8) translateY(20px); } }
@keyframes boxOut { to { opacity: 0; transform: scale(0.92); } }
.mtitle { position: relative; font-size: calc(var(--u) * 4.6); font-weight: 900; line-height: 1.15; }
.mtitle.big { font-size: calc(var(--u) * 6.2); color: #fff; -webkit-text-stroke: calc(var(--u) * 0.5) #1f5fe0; paint-order: stroke fill; animation: pop 0.5s cubic-bezier(.3,1.7,.5,1); }
.mart { width: calc(var(--u) * 30); height: calc(var(--u) * 30); display: grid; place-items: center; border-radius: calc(var(--u) * 5); background: radial-gradient(circle, #fff 30%, #eaf1fc); }
.mart img { max-width: 80%; max-height: 90%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.22)); animation: bob 3s ease-in-out infinite; border-radius: 6px; }
.mgain { font-size: calc(var(--u) * 5); font-weight: 900; }
.mgain small { font-size: calc(var(--u) * 2.4); color: #e5302a; font-weight: 800; }
.mgain .mc-rw { justify-content: center; }
.mtext { margin: 0; font-size: calc(var(--u) * 2.9); color: var(--ink-2); line-height: 1.4; position: relative; }
.mnote { margin: 0; font-size: calc(var(--u) * 2.4); color: var(--ink-2); }
.mcost { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 2.6); background: #f3f5f9; font-size: calc(var(--u) * 2.9); font-weight: 700; color: var(--ink-2); }
.mcost b { color: var(--ink); font-size: calc(var(--u) * 3.4); font-weight: 900; }
.mcost b.short { color: #e5302a; }
.mact { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.6); }
.mact.one { grid-template-columns: 1fr; }
.mact .b3 { padding: calc(var(--u) * 3) 0; font-size: calc(var(--u) * 3.3); }
.modal.rewards .mbox { background: linear-gradient(180deg, #e9f3ff, #fff 45%); }
.rw-rays { position: absolute; left: 50%; top: calc(var(--u) * -40); width: calc(var(--u) * 130); aspect-ratio: 1; translate: -50% 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 63, 0.22) 0 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 65%); mask: radial-gradient(circle, #000 25%, transparent 65%); animation: spin 18s linear infinite; }
.rw-grid { position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); margin: calc(var(--u) * 2) 0; }
.rw-grid.few { grid-template-columns: repeat(auto-fit, minmax(0, calc(var(--u) * 26))); justify-content: center; }
.rw-tile { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 2.4) calc(var(--u) * 1) calc(var(--u) * 2); border-radius: calc(var(--u) * 3.4); background: #fff; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.1), inset 0 0 0 1.5px #eef1f6;
  animation: rwIn 0.5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(0.25s + var(--i) * 0.14s); }
@keyframes rwIn { from { opacity: 0; transform: scale(0.3) translateY(20px); } 60% { opacity: 1; } }
.rw-art { width: calc(var(--u) * 15); height: calc(var(--u) * 15); display: grid; place-items: center; }
.rw-art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); }
.rw-tile.mat .rw-art img { height: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; }
.rw-tile b { font-size: calc(var(--u) * 3.8); font-weight: 900; }
.rw-tile small { font-size: calc(var(--u) * 2.2); font-weight: 700; color: var(--ink-2); line-height: 1.15; }

/* ---------- level up ---------- */
.lvup { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, #fffef4 0%, #fff1b8 30%, #ffc94d 62%, #ff9a3c 100%); animation: fadeIn 0.3s; }
.lvup.closing { animation: fadeOut 0.26s forwards; }
.lv-rays { position: absolute; left: 50%; top: 34%; width: 240vmax; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.55) 0 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 4%, transparent 40%); mask: radial-gradient(circle, #000 4%, transparent 40%); animation: spin 30s linear infinite; }
.lv-conf { position: absolute; inset: 0; pointer-events: none; }
.lv-conf i { position: absolute; top: -5%; left: var(--x); width: 10px; height: 16px; border-radius: 2px; background: var(--c); rotate: var(--r); animation: confFall 2.8s cubic-bezier(.3,.6,.6,1) var(--dl) both; }
.lv-conf i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes confFall { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(calc(var(--vh1) * 110)) rotate(720deg); opacity: 0.6; } }
.lv-body { position: relative; width: min(calc(var(--u) * 90), 440px); max-height: calc(var(--vh1) * 100); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 4) 0; }
.lv-title { font-size: calc(var(--u) * 13); font-weight: 900; line-height: 1; color: #fff; letter-spacing: -0.01em; -webkit-text-stroke: calc(var(--u) * 1.1) #e2541c; paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 1.2) 0 #b8380c, 0 calc(var(--u) * 2) 24px rgba(184, 56, 12, 0.4); animation: lvTitle 0.7s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes lvTitle { from { transform: scale(0.2) rotate(-8deg); opacity: 0; } }
.lv-avatar { position: relative; width: calc(var(--u) * 36); aspect-ratio: 1; display: grid; place-items: center; animation: pop 0.6s 0.15s cubic-bezier(.3,1.7,.5,1) both; }
.lv-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ffd23f, #fff, #ff9a3c, #fff, #ffd23f); animation: spin 4s linear infinite; box-shadow: 0 0 40px rgba(255, 255, 255, 0.9); }
.lv-face { position: relative; width: 86%; aspect-ratio: 1; border-radius: 50%; background-size: 280%; background-position: 50% 24%; background-color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 1) #fff, 0 6px 18px rgba(0, 0, 0, 0.2); }
.lv-levels { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 1.6) calc(var(--u) * 6); border-radius: 99px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 24px rgba(184, 56, 12, 0.25);
  font-weight: 900; color: #6b3a10; animation: uiIn 0.4s 0.3s both; }
.lv-levels span { font-size: calc(var(--u) * 4.4); opacity: 0.7; }
.lv-levels i { font-style: normal; font-size: calc(var(--u) * 5); color: #e2541c; }
.lv-levels b { font-size: calc(var(--u) * 8); color: #e2541c; min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; }
.lv-levels b::before { content: "Lv. "; font-size: calc(var(--u) * 4.4); }
.lv-levels b.pop { animation: numPop 0.35s cubic-bezier(.3,1.8,.5,1); }
@keyframes numPop { from { transform: scale(1.6); } }
.lv-rw-head { font-size: calc(var(--u) * 2.8); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #8a4a12; animation: uiIn 0.4s var(--rows-at, 1s) both; }
.lv-rewards { width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
.lv-row { display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 1.4) calc(var(--u) * 4) calc(var(--u) * 1.4) calc(var(--u) * 1.4); border-radius: 99px; background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 16px rgba(184, 56, 12, 0.18); animation: rowSlide 0.45s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--rows-at, 1s) + var(--i) * 0.16s); }
@keyframes rowSlide { from { opacity: 0; transform: translateX(-60px); } }
.lv-ico { width: calc(var(--u) * 9); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff5d6; flex: none; }
.lv-ico img { width: 78%; height: 78%; object-fit: contain; }
.lv-lbl { flex: 1; text-align: left; font-size: calc(var(--u) * 3.1); font-weight: 800; color: var(--ink); }
.lv-row b { font-size: calc(var(--u) * 4); font-weight: 900; color: #e2541c; }
.lv-next { font-size: calc(var(--u) * 2.7); font-weight: 800; color: #6b3a10; background: rgba(255, 255, 255, 0.6); padding: calc(var(--u) * 1) calc(var(--u) * 3); border-radius: 99px; animation: uiIn 0.4s var(--rows-at, 1s) both; }
.lv-tap { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 2.8); font-weight: 800; color: #7a3b0c; opacity: 0; transition: opacity 0.3s; }
.lvup.ready .lv-tap { opacity: 1; animation: pulse 1.2s infinite; }
.lvup.skip .lv-row, .lvup.skip .lv-rw-head, .lvup.skip .lv-next { animation-delay: 0s !important; animation-duration: 0.2s !important; }

/* ---------- shop ---------- */
#view-shop .view-head h2 { margin: 0; }
.stabs { display: flex; gap: calc(var(--u) * 1.6); overflow-x: auto; margin: calc(var(--u) * 2.4) calc(var(--u) * -4) calc(var(--u) * 3); padding: calc(var(--u) * 1) calc(var(--u) * 4); scrollbar-width: none; }
.stabs::-webkit-scrollbar { display: none; }
.stabs button { position: relative; flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.2) calc(var(--u) * 3.2) calc(var(--u) * 1.2) calc(var(--u) * 1.4); border-radius: 99px; background: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.07); font-weight: 800; font-size: calc(var(--u) * 2.9); color: var(--ink-2); transition: background 0.2s, color 0.2s, transform 0.15s; }
.stabs button img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); object-fit: contain; }
.stabs button.on { background: #23314d; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(35, 49, 77, 0.3); }
.stabs .badge { top: calc(var(--u) * -0.6); right: calc(var(--u) * -0.4); }
.shop-body { animation: bodyIn 0.3s cubic-bezier(.2,.9,.3,1); padding-bottom: calc(var(--u) * 4); }
.sh3 { margin: calc(var(--u) * 5) 0 calc(var(--u) * 2.4); display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); }
.sh3 small { font-size: calc(var(--u) * 2.5); color: var(--ink-2); font-weight: 700; }
.sh-lead { margin: 0 0 calc(var(--u) * 3); font-size: calc(var(--u) * 2.9); color: var(--ink-2); }
.center { text-align: center; margin-top: calc(var(--u) * 3); }
.ribbon { position: absolute; z-index: 3; top: calc(var(--u) * 2.6); right: calc(var(--u) * -8); width: calc(var(--u) * 32); padding: calc(var(--u) * 0.8) 0; rotate: 40deg; text-align: center;
  font-size: calc(var(--u) * 2.1); font-weight: 900; letter-spacing: 0.04em; color: #fff; background: linear-gradient(180deg, #ff6259, #e5302a); box-shadow: 0 3px 8px rgba(229, 48, 42, 0.4); }
.ribbon.best { background: linear-gradient(180deg, #ffd23f, #f5a900); color: #4a2c00; box-shadow: 0 3px 8px rgba(245, 169, 0, 0.45); }
.first-buy { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.4) calc(var(--u) * 3); margin: calc(var(--u) * 3) 0 0; border-radius: calc(var(--u) * 3.4); background: linear-gradient(120deg, #ff6b4a, #ff3b30); color: #fff; box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3); }
.first-buy img { width: calc(var(--u) * 10); animation: bob 2.6s ease-in-out infinite; }
.first-buy span { flex: 1; display: flex; flex-direction: column; }
.first-buy b { font-size: calc(var(--u) * 3.4); } .first-buy small { font-size: calc(var(--u) * 2.5); opacity: 0.92; }
.first-buy em { font-style: normal; font-size: calc(var(--u) * 7); font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }

/* premium offer cards (Starter Deal / Monthly Card / Weekend Bundle) */
.offer { position: relative; overflow: hidden; display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3.4) calc(var(--u) * 3.4) calc(var(--u) * 3.4) calc(var(--u) * 3); margin-bottom: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 4.4); color: #fff; animation: cardIn 0.45s both; animation-delay: calc(var(--i) * 0.07s); box-shadow: 0 0 0 calc(var(--u) * 0.7) #ffd23f, 0 0 0 calc(var(--u) * 1.1) #b97800, 0 12px 28px rgba(30, 40, 80, 0.22); }
.offer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 65%); background-size: 260% 100%; animation: sweep 4s ease-in-out infinite; pointer-events: none; }
.offer.starter { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.3), transparent 40%), linear-gradient(135deg, #ff6b4a, #e5302a 55%, #a3151a); }
.offer.monthly { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.3), transparent 40%), linear-gradient(135deg, #22c3e6, #1679d6 55%, #0d4fa8); }
.offer.bundle { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.4), transparent 40%), linear-gradient(135deg, #ffcf3f, #f59e0b 55%, #c2620a); color: #3b2200; }
.of-art { position: relative; flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.of-art img { position: absolute; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3)); animation: bob 3s ease-in-out infinite; }
.of-art img:nth-child(1) { width: 74%; left: 6%; top: 4%; }
.of-art img:nth-child(2) { width: 50%; right: -4%; bottom: 0; animation-delay: -1s; }
.of-art img:nth-child(3) { width: 42%; left: -4%; bottom: 2%; animation-delay: -2s; }
.of-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.of-main > span { align-self: flex-start; font-size: calc(var(--u) * 2); font-weight: 900; letter-spacing: 0.12em; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.6); border-radius: 99px; background: rgba(255, 255, 255, 0.95); color: #a3151a; }
.offer.monthly .of-main > span { color: #0d4fa8; } .offer.bundle .of-main > span { color: #b45309; }
.of-main > b { font-size: calc(var(--u) * 4.8); font-weight: 900; line-height: 1.05; }
.of-main .mc-rw .rchip { background: rgba(255, 255, 255, 0.92); color: var(--ink); }
.of-main > em { font-style: normal; font-size: calc(var(--u) * 2.5); font-weight: 800; opacity: 0.95; font-variant-numeric: tabular-nums; }
.of-buy { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1); }
.of-buy .g3-price { width: auto; margin: 0; padding: calc(var(--u) * 1.9) calc(var(--u) * 5); }
.of-buy s { font-size: calc(var(--u) * 2.6); font-weight: 800; opacity: 0.75; }
.offer .value-sticker { top: calc(var(--u) * 2); right: calc(var(--u) * 2); }
.mon-days { display: flex; gap: 3px; flex-wrap: wrap; margin-top: calc(var(--u) * 0.6); }
.mon-days i { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 3px; background: rgba(255, 255, 255, 0.25); }
.mon-days i.on { background: #ffd23f; }

/* VIP card with perks */
.vip-card { flex-wrap: wrap; }
.vip-perks { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.6); }
.vip-perk { position: relative; padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 2.6); background: rgba(255, 255, 255, 0.55); font-size: calc(var(--u) * 2.3); line-height: 1.3; color: #6b4500; text-align: left; }
.vip-perk b { display: block; font-size: calc(var(--u) * 2.7) !important; font-weight: 900; color: #4a2c00; }
.vip-perk.on { background: #fff; box-shadow: inset 0 0 0 2px #ffb300; }
.vip-perk.on::after { content: "✓"; position: absolute; right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.4); color: #16a34a; font-weight: 900; }
.vip-perk.next { box-shadow: inset 0 0 0 2px rgba(229, 48, 42, 0.5); }

/* cumulative top-up track */
.tu-track { display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); }
.tu3 { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3.8); background: linear-gradient(90deg, #fff8e1, #fff 60%);
  box-shadow: 0 0 0 2px #ffe08a, 0 6px 16px rgba(17, 24, 39, 0.06); animation: cardIn 0.42s both; animation-delay: calc(var(--i) * 0.06s); }
.tu3.ready { box-shadow: 0 0 0 2.5px #ffb300, 0 0 22px rgba(255, 179, 0, 0.4); }
.tu3.done { opacity: 0.6; background: #fff; box-shadow: 0 0 0 1.5px #e5e9f0; }
.tu-amt { flex: none; width: calc(var(--u) * 15); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; line-height: 1; color: #4a2c00;
  background: radial-gradient(circle at 35% 30%, #fff6c6, #ffd23f 55%, #e09400); box-shadow: inset 0 -3px 0 rgba(140, 80, 0, 0.25), 0 4px 10px rgba(245, 169, 0, 0.35); }
.tu-amt b { font-size: calc(var(--u) * 4.4); font-weight: 900; }
.tu-amt small { display: block; font-size: calc(var(--u) * 1.9); font-weight: 900; letter-spacing: 0.06em; }
.tu3 .mc-rw .rchip { background: #fff; box-shadow: inset 0 0 0 1px #f1e2b5; }
.tu3 .excl { font-style: normal; font-size: calc(var(--u) * 2); font-weight: 900; color: #fff; background: #e5302a; padding: 1px calc(var(--u) * 1.4); border-radius: 99px; margin-left: calc(var(--u) * 1); vertical-align: middle; }

/* daily free gift (shop) */
.gift3 { position: relative; overflow: hidden; display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 3); border-radius: calc(var(--u) * 4);
  background: linear-gradient(120deg, #e8fff3, #fff 60%); box-shadow: 0 0 0 2px #7ee2b0, 0 8px 20px rgba(22, 163, 74, 0.12); animation: cardIn 0.4s both; }
.gift3.claimed { background: #fff; box-shadow: 0 0 0 1.5px #e5e9f0; }
.gift3 > img { width: calc(var(--u) * 16); animation: bob 2.8s ease-in-out infinite; }
.gift3.claimed > img { filter: grayscale(0.6); animation: none; }
.gift3 .mc-main > b { font-size: calc(var(--u) * 3.6); }
.gift3 .badge { left: calc(var(--u) * 2); top: calc(var(--u) * 2); right: auto; }

.gem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.6); margin-top: calc(var(--u) * 3); }
.gem3 { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 4);
  background: linear-gradient(180deg, #eaf4ff, #fff 62%); box-shadow: 0 0 0 1.5px #dbe8fb, 0 6px 16px rgba(17, 24, 39, 0.08); transition: transform 0.15s, box-shadow 0.2s; animation: cardIn 0.45s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i) * 0.05s); }
.gem3:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px #93bbf5, 0 10px 22px rgba(17, 24, 39, 0.12); }
.gem3:active { transform: scale(0.97); }
.gem3.best { background: linear-gradient(180deg, #fff3c4, #fff 62%); box-shadow: 0 0 0 2.5px #ffc531, 0 8px 20px rgba(245, 169, 0, 0.25); }
.g3-art { height: calc(var(--u) * 19); display: grid; place-items: center; }
.g3-art img { width: calc(var(--u) * 24 * var(--s)); filter: drop-shadow(0 8px 10px rgba(47, 107, 255, 0.35)); animation: bob 3s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s); }
.g3-amt { font-size: calc(var(--u) * 4.6); font-weight: 900; line-height: 1; }
.g3-amt s { font-size: calc(var(--u) * 2.8); color: #9aa3b2; font-weight: 700; }
.g3-name { font-size: calc(var(--u) * 2.4); color: var(--ink-2); font-weight: 700; }
.g3-price { margin-top: calc(var(--u) * 1.2); width: 100%; padding: calc(var(--u) * 1.9) 0; border-radius: 99px; color: #fff; font-weight: 900; font-size: calc(var(--u) * 3.1);
  background: linear-gradient(180deg, #3fd08a, #16a34a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 4px 10px rgba(22, 163, 74, 0.3); }
.bonus3 { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); font-style: normal; font-size: calc(var(--u) * 2.3); font-weight: 900; color: #fff; background: #ff3b30; padding: calc(var(--u) * 0.3) calc(var(--u) * 1.4); border-radius: 99px; }
.x2 { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 6); font-style: normal; font-size: calc(var(--u) * 2.3); font-weight: 900; color: #4a2c00; background: #ffd23f; padding: calc(var(--u) * 0.3) calc(var(--u) * 1.4); border-radius: 99px; animation: stickerWob 2s ease-in-out infinite; }
.price3 { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 1.6) calc(var(--u) * 3); border-radius: 99px;
  font-weight: 900; font-size: calc(var(--u) * 2.9); color: #fff; background: linear-gradient(180deg, var(--blue-1), var(--blue-2)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 4px 10px rgba(37, 99, 235, 0.25); transition: transform 0.12s, filter 0.15s; white-space: nowrap; }
.price3.coins { color: #4a2c00; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); box-shadow: inset 0 -3px 0 rgba(140, 80, 0, 0.2), 0 4px 10px rgba(245, 169, 0, 0.3); }
.price3:hover:not(:disabled) { filter: brightness(1.06); }
.price3:active:not(:disabled) { transform: scale(0.95); }
.price3.short { filter: saturate(0.5); opacity: 0.8; }
.price3.off { color: #8a93a6; background: #e9ecf2; box-shadow: none; }
.price3 .ci { width: 1.3em; height: 1.3em; }
.price3 small { font-size: 0.8em; opacity: 0.85; }
.price3 .save { position: absolute; top: calc(var(--u) * -2.2); right: calc(var(--u) * -1); font-style: normal; font-size: calc(var(--u) * 2); font-weight: 900; color: #fff; background: #ff3b30; padding: 0 calc(var(--u) * 1.2); border-radius: 99px; }
.pk-list { display: flex; flex-direction: column; gap: calc(var(--u) * 2.8); }
.pk3 { position: relative; overflow: hidden; display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 4.4);
  background: linear-gradient(110deg, var(--bp-a), #fff 58%); box-shadow: 0 0 0 2px var(--bp-ring), 0 8px 20px rgba(17, 24, 39, 0.08); animation: cardIn 0.45s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i) * 0.07s); }
.pk3.std { --bp-a: #cfe1ff; --bp-ring: #a9c8ff; } .pk3.prem { --bp-a: #ffe9a6; --bp-ring: #ffc531; } .pk3.vip { --bp-a: #ffc9c2; --bp-ring: #ff6b5c; }
.pk3-art { flex: none; width: calc(var(--u) * 24); height: calc(var(--u) * 32); display: grid; place-items: center; }
.pk3-art img { height: 100%; filter: drop-shadow(0 10px 14px rgba(17, 24, 39, 0.3)); rotate: -5deg; animation: bob 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.6s); transition: transform 0.3s; }
.pk3:hover .pk3-art img { transform: rotate(4deg) scale(1.05); }
.pk3-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); }
.pk3-main > b { font-size: calc(var(--u) * 4); font-weight: 900; }
.pk3-main > small { font-size: calc(var(--u) * 2.6); color: var(--ink-2); font-weight: 700; }
.pk3-main > em { font-style: normal; font-size: calc(var(--u) * 2.4); font-weight: 800; color: var(--blue-2); }
.pk3-buy { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 2); }
.pk3-lock { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.6); font-weight: 800; font-size: calc(var(--u) * 2.7); color: #b42318; }
.pk3.locked .pk3-art img { filter: grayscale(0.5) drop-shadow(0 10px 14px rgba(17, 24, 39, 0.3)); }
.it-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.6); }
.it3 { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 3) calc(var(--u) * 2.4) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 4); text-align: center;
  background: linear-gradient(180deg, #eef3fb, #fff 50%); box-shadow: 0 0 0 1.5px #e3e9f3, 0 6px 16px rgba(17, 24, 39, 0.06); animation: cardIn 0.45s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i) * 0.05s); }
.it3-art { position: relative; height: calc(var(--u) * 18); display: grid; place-items: center; }
.it3-art img { width: calc(var(--u) * 17); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.2)); animation: bob 3s ease-in-out infinite; animation-delay: calc(var(--i) * -0.5s); }
.it3-art i { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * 1); font-style: normal; font-size: calc(var(--u) * 2.8); font-weight: 900; color: #fff; background: #23314d; padding: 0 calc(var(--u) * 1.6); border-radius: 99px; box-shadow: 0 0 0 2px #fff; }
.it3 > b { font-size: calc(var(--u) * 3.1); font-weight: 900; }
.it3 > small { font-size: calc(var(--u) * 2.3); color: var(--ink-2); line-height: 1.3; min-height: 2.6em; }
.it3-own { font-size: calc(var(--u) * 2.2); font-weight: 800; color: var(--ink-2); background: #f1f4f9; padding: 1px calc(var(--u) * 1.8); border-radius: 99px; margin-bottom: calc(var(--u) * 0.6); }
.it3 .price3 { width: 100%; }
.ex-list { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.ex3 { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2) calc(var(--u) * 2.4) calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 3.4); background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 12px rgba(17, 24, 39, 0.05); animation: cardIn 0.4s both; animation-delay: calc(var(--i) * 0.05s); }
.ex-coins { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.ex-coins img { width: calc(var(--u) * 9); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18)); }
.ex-coins b { font-size: calc(var(--u) * 4); font-weight: 900; }
.ex-arrow { font-size: calc(var(--u) * 5); color: #b6bfce; font-weight: 900; }
.ex3 .price3 { min-width: calc(var(--u) * 24); }
.cs-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: calc(var(--u) * 1); margin-bottom: calc(var(--u) * 2.6); }
.cs-head span { font-size: calc(var(--u) * 3.6); font-weight: 900; }
.cs-head em { font-style: normal; font-size: calc(var(--u) * 2.6); color: var(--ink-2); font-weight: 700; }
.cs-head em b { color: #e5302a; font-variant-numeric: tabular-nums; }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 3) calc(var(--u) * 2.6); }
.cs3 { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 2.4) calc(var(--u) * 2) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 4); background: #fff; min-width: 0;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 16px rgba(17, 24, 39, 0.07); animation: cardIn 0.45s both; animation-delay: calc(var(--i) * 0.05s); text-align: center; }
.cs3-card { position: relative; width: 78%; border-radius: 4.6% / 3.3%; overflow: hidden; box-shadow: 0 6px 14px rgba(17, 24, 39, 0.22); cursor: pointer; transition: transform 0.2s; margin-bottom: calc(var(--u) * 1); }
.cs3-card:hover { transform: translateY(-3px) rotate(-1deg); }
.cs3-card img { display: block; width: 100%; }
.cs3-tag { position: absolute; left: 6%; top: 4%; font-size: calc(var(--u) * 2); font-weight: 900; color: #fff; background: #16a34a; padding: 1px calc(var(--u) * 1.4); border-radius: 99px; }
.cs3-sold { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(17, 24, 39, 0.55); color: #fff; font-weight: 900; font-size: calc(var(--u) * 3.4); letter-spacing: 0.06em; }
.cs3 > b { font-size: calc(var(--u) * 2.9); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cs3 > small { font-size: calc(var(--u) * 2.3); color: var(--ink-2); font-weight: 700; margin-bottom: calc(var(--u) * 0.8); }
.cs3 .price3 { width: 100%; }
.cs3.sold .cs3-card img { filter: grayscale(0.6); }
.mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.6); }
.mat3 { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 4); background: #fff; min-width: 0;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 16px rgba(17, 24, 39, 0.07); animation: cardIn 0.45s both; animation-delay: calc(var(--i) * 0.05s); }
.mat3.on { box-shadow: 0 0 0 2.5px var(--blue-2), 0 8px 20px rgba(37, 99, 235, 0.2); }
.mat3-art { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: calc(var(--u) * 3); background-size: cover; background-position: center; background-color: #cfd8e8; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); overflow: hidden; }
.mat3:not(.owned) .mat3-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%); background-size: 260% 100%; animation: sweep 3.4s ease-in-out infinite; }
.mat3-eq, .mat3-own { position: absolute; left: calc(var(--u) * 1.6); top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.1); font-weight: 900; color: #fff; padding: 1px calc(var(--u) * 1.6); border-radius: 99px; background: var(--blue-2); }
.mat3-own { background: rgba(17, 24, 39, 0.6); }
.mat3 > b { font-size: calc(var(--u) * 3.1); font-weight: 900; }
.mat3 .b3 { width: 100%; }
.mat3-buy { width: 100%; display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 1.2); }
.mat3-buy .price3 { width: 100%; }
.view { overflow-x: hidden; }
.tiles + .hero { margin-top: calc(var(--u) * 5); }
.rb .badge.num { right: calc(var(--u) * 1.6); top: calc(var(--u) * -0.6); }
.mail-sheet .m-head h2 { margin-bottom: calc(var(--u) * 1.4); }
/* top bar: never overflow with big balances */
.topbar { gap: calc(var(--u) * 1.4); }
.me { flex: 0 1 auto; min-width: 0; padding-right: calc(var(--u) * 2.4); }
.me-text { min-width: 0; }
.me-text b { max-width: calc(var(--u) * 20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl i { width: calc(var(--u) * 9); }
.wallet { flex: none; gap: calc(var(--u) * 1); }
.wallet .cur { padding-right: calc(var(--u) * 1.4); }
.bp3-art img { height: calc(var(--u) * 28); width: auto; max-width: 100%; object-fit: contain; }
.bp3-art .bp3-back { height: calc(var(--u) * 25); }
.pk3-art img { height: calc(var(--u) * 30); width: auto; max-width: 100%; object-fit: contain; }
.vip-card > .vip-perks { flex: 0 0 100%; }
.g3-art { height: calc(var(--u) * 17); }
.g3-art img { width: auto; height: calc(var(--u) * 14.5 * var(--s)); max-height: 100%; }
/* shop tabs: 5 equal icon tabs, no hidden overflow */
.stabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1.4); overflow: visible; margin: calc(var(--u) * 2.4) 0 calc(var(--u) * 3); padding: 0; }
.stabs button { flex-direction: column; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 1.4) 0 calc(var(--u) * 1.2); border-radius: calc(var(--u) * 3); font-size: calc(var(--u) * 2.4); }
.stabs button img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.nav button.locked-nav img { filter: grayscale(1) opacity(0.5); }
.nav button.locked-nav::after { content: "🔒"; position: absolute; top: calc(var(--u) * 0.4); right: calc(var(--u) * 3); font-size: calc(var(--u) * 2.6); }
.tile .lock-chip { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 2.6); color: #fff; }
.mode { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.6); }
.mode-emb { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); object-fit: contain; margin: calc(var(--u) * -1) 0; }
.mode .badge { right: calc(var(--u) * -0.6); top: calc(var(--u) * -0.6); width: calc(var(--u) * 2.4); }

/* ---------- v4: "Missions & more" hub — the six tiles fold into one button with a dropdown list ---------- */
.hub-btn { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: calc(var(--u) * 2.6); margin-top: calc(var(--u) * 3);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3); border: 0; border-radius: calc(var(--u) * 4.4); background: #fff; color: var(--ink, #1d2742); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 6px 18px rgba(30, 45, 90, 0.1), inset 0 0 0 1px rgba(30, 45, 90, 0.05); transition: transform 0.15s, box-shadow 0.2s, border-radius 0.25s; }
.hub-btn:active { transform: scale(0.985); }
.hub-btn.open { border-radius: calc(var(--u) * 4.4) calc(var(--u) * 4.4) calc(var(--u) * 1.6) calc(var(--u) * 1.6); }
.hub-burger { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 3); background: linear-gradient(150deg, #4f7bff, #2b55e6); display: grid; align-content: center; justify-items: center; gap: calc(var(--u) * 1); box-shadow: 0 4px 10px rgba(43, 85, 230, 0.35); }
.hub-burger i { display: block; width: calc(var(--u) * 4.6); height: calc(var(--u) * 0.75); border-radius: 9px; background: #fff; transition: transform 0.3s cubic-bezier(.3, 1.4, .5, 1), opacity 0.2s; }
.hub-btn.open .hub-burger i:nth-child(1) { transform: translateY(calc(var(--u) * 1.75)) rotate(45deg); }
.hub-btn.open .hub-burger i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.hub-btn.open .hub-burger i:nth-child(3) { transform: translateY(calc(var(--u) * -1.75)) rotate(-45deg); }
.hub-txt { min-width: 0; }
.hub-txt b { display: block; font-size: calc(var(--u) * 3.7); font-weight: 700; }
.hub-txt small { display: block; margin-top: 1px; font-size: calc(var(--u) * 2.6); font-weight: 500; color: #6b7590; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-mini { display: flex; }
.hub-mini img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); object-fit: contain; margin-left: calc(var(--u) * -2); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)); transition: opacity 0.2s, transform 0.25s; }
.hub-btn.open .hub-mini img { opacity: 0; transform: scale(0.6); }
.hub-chev { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-right: 2px solid #9aa3b8; border-bottom: 2px solid #9aa3b8; transform: translateY(-25%) rotate(45deg); transition: transform 0.25s; margin-right: calc(var(--u) * 0.6); }
.hub-btn.open .hub-chev { transform: translateY(25%) rotate(-135deg); }
.hub-badge { position: absolute; left: calc(var(--u) * 10.2); top: calc(var(--u) * 1.4); min-width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); padding: 0 4px; border-radius: 99px; background: var(--red-dot, #ff3b4d); color: #fff; font-style: normal; font-size: calc(var(--u) * 2.5); font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 calc(var(--u) * 0.6) #fff; }
.hub-badge.hidden { display: none; }

/* dropdown list: the original tiles restyled as compact rows */
.tiles.hub-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: calc(var(--u) * 0.8); border-radius: calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 4.4) calc(var(--u) * 4.4); background: #fff; overflow: hidden;
  box-shadow: 0 6px 18px rgba(30, 45, 90, 0.1); max-height: 0; opacity: 0; transform: translateY(calc(var(--u) * -2)); pointer-events: none; transition: max-height 0.35s cubic-bezier(.3, .9, .3, 1), opacity 0.2s, transform 0.3s; }
.tiles.hub-list.open { max-height: calc(var(--u) * 120); opacity: 1; transform: none; pointer-events: auto; }
.hub-list .tile { min-height: 0 !important; display: grid; grid-template-columns: calc(var(--u) * 10) 1fr auto; grid-template-rows: auto auto; column-gap: calc(var(--u) * 2.6); align-items: center;
  padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: 0; background: #fff !important; box-shadow: none !important; color: var(--ink, #1d2742); border-top: 1px solid #eef1f6; animation: none; opacity: 1; }
.hub-list .tile:first-child { border-top: 0; }
.hub-list .tile:hover { transform: none; background: #f6f8fc !important; }
.hub-list .tile:active { background: #eef2f9 !important; }
.hub-list .tile::after { display: none; }
.hub-list .tile img { position: static; grid-row: 1 / 3; width: calc(var(--u) * 10); height: calc(var(--u) * 10); object-fit: contain; padding: calc(var(--u) * 1); border-radius: calc(var(--u) * 3); background: var(--hc, #eef2f9); animation: none; filter: none; transform: none !important; }
.hub-list .tile b { grid-column: 2; margin: 0; font-size: calc(var(--u) * 3.3); font-weight: 700; text-shadow: none; color: inherit; }
.hub-list .tile small { grid-column: 2; font-size: calc(var(--u) * 2.5); font-weight: 500; color: #6b7590 !important; }
.hub-list .tile .t-stat { color: #6b7590 !important; font-weight: 500 !important; display: none; }
.hub-list .tile .bar, .hub-list .tile .pips { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.hub-list .tile .bar { width: calc(var(--u) * 14); height: calc(var(--u) * 1.4); background: #edf1f7 !important; border-radius: 9px; overflow: hidden; margin-right: calc(var(--u) * 7); }
.hub-list .tile .bar > span { display: block; height: 100%; background: linear-gradient(90deg, #8c6bff, #4f5bff) !important; }
.hub-list .tile .pips { display: flex; gap: 3px; margin-right: calc(var(--u) * 7); }
.hub-list .tile .pips i { width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: #e2e7f0; box-shadow: none; border: 0; }
.hub-list .tile .pips i.on { background: #22c07a; }
.hub-list .tile .badge { position: absolute; left: auto !important; right: calc(var(--u) * 3) !important; top: 50% !important; transform: translateY(-50%); }
.hub-list .tile .lock-chip { position: static !important; grid-column: 3; grid-row: 1 / 3; background: #eef1f6; color: #7a849b !important; }
.hub-list .t-missions { --hc: #ffe3e6; } .hub-list .t-pass { --hc: #e7e6ff; } .hub-list .t-adv { --hc: #dcf6ee; }
.hub-list .t-lucky { --hc: #e1f7e9; } .hub-list .t-gift { --hc: #ffe4ee; } .hub-list .t-bag { --hc: #e3edff; }
.hub-list + .hero { margin-top: calc(var(--u) * 5); }
@media (prefers-reduced-motion: reduce) { .tiles.hub-list, .hub-burger i, .hub-chev { transition: none; } }

/* ---------- v4: Solo Adventure sheet ---------- */
.adv-sheet .adv-head h2 { margin-bottom: 2px; }
.adv-track { margin: calc(var(--u) * 3) 0 calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 3.4) calc(var(--u) * 7.4); border-radius: calc(var(--u) * 4); background: #fff; box-shadow: 0 4px 16px rgba(30, 45, 90, 0.08); }
.adv-track-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adv-track-top b { font-size: calc(var(--u) * 4.6); font-weight: 700; color: #e9a400; }
.adv-track-top b i { font-style: normal; font-size: calc(var(--u) * 3); color: #9aa3b8; font-weight: 500; }
.adv-go { border: 0; font: inherit; font-weight: 700; font-size: calc(var(--u) * 3); color: #fff; padding: calc(var(--u) * 1.8) calc(var(--u) * 3.6); border-radius: 99px; background: linear-gradient(180deg, #4f7bff, #2b55e6); box-shadow: 0 4px 12px rgba(43, 85, 230, 0.35); cursor: pointer; }
.adv-go:active { transform: scale(0.96); }
.adv-bar { position: relative; height: calc(var(--u) * 2); margin: calc(var(--u) * 4.6) calc(var(--u) * 3) 0 0; border-radius: 99px; background: #edf1f7; }
.adv-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #ffd25a, #ffad1f); }
.adv-chest { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.adv-chest img { width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); object-fit: contain; filter: saturate(0.6) opacity(0.8); transition: transform 0.2s; }
.adv-chest b { position: absolute; top: calc(100% - 2px); font-size: calc(var(--u) * 2.3); font-weight: 700; color: #8a94ab; white-space: nowrap; }
.adv-chest.ready img { filter: drop-shadow(0 0 8px rgba(255, 190, 40, 0.9)); animation: chestWiggle 1.2s ease-in-out infinite; }
.adv-chest.ready b { color: #d48c00; }
.adv-chest.done img { filter: grayscale(0.2) opacity(0.45); }
.adv-chest.done b::after { content: ' ✓'; color: #19a867; }
@keyframes chestWiggle { 0%, 100% { transform: rotate(0) scale(1.05); } 25% { transform: rotate(-8deg) scale(1.12); } 75% { transform: rotate(8deg) scale(1.12); } }

.chapters.adv { gap: calc(var(--u) * 4); }
.adv-ch { border-radius: calc(var(--u) * 4.4); background: #fff; overflow: hidden; box-shadow: 0 6px 20px rgba(30, 45, 90, 0.1); }
.adv-banner { position: relative; min-height: calc(var(--u) * 27); padding: calc(var(--u) * 3.4); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; background-size: cover; background-position: center; color: #fff; }
.adv-banner > small { font-size: calc(var(--u) * 2.4); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.adv-banner > b { font-size: calc(var(--u) * 5.6); font-weight: 700; line-height: 1.05; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.adv-types { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.adv-types img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); }
.adv-types em { font-style: normal; font-size: calc(var(--u) * 2.4); font-weight: 500; opacity: 0.85; margin-left: 4px; }
.adv-stars { position: absolute; top: calc(var(--u) * 3); right: calc(var(--u) * 3); padding: calc(var(--u) * 1) calc(var(--u) * 2.6); border-radius: 99px; background: rgba(10, 16, 40, 0.5); backdrop-filter: blur(6px); font-weight: 700; font-size: calc(var(--u) * 3.2); color: #ffd25a; }
.adv-stars i { font-style: normal; color: rgba(255, 255, 255, 0.7); font-size: 0.8em; }
.adv-ch.cleared .adv-banner::after { content: '✓ CLEARED'; position: absolute; top: calc(var(--u) * 3); left: calc(var(--u) * 3); padding: 2px calc(var(--u) * 2.2); border-radius: 99px; background: #19a867; font-size: calc(var(--u) * 2.3); font-weight: 700; letter-spacing: 0.08em; }
.adv-ch.cleared .adv-banner > small { display: none; }
.adv-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 26, 48, 0.55); backdrop-filter: grayscale(1) blur(1px); font-weight: 700; font-size: calc(var(--u) * 3.2); }
.adv-ch.locked .adv-stars { display: none; }

.adv-ch .path { padding: calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 2); align-items: flex-start; }
.adv-ch .link { margin-top: calc(var(--u) * 5); background: color-mix(in srgb, var(--cc) 40%, #e6eaf2); }
.adv-ch .node { position: relative; }
.adv-ch .node span img { width: 70%; height: 70%; object-fit: contain; }
.adv-ch .node.locked span img { filter: grayscale(1) opacity(0.6); }
.adv-ch .node.boss span { width: calc(var(--u) * 12.5); background: linear-gradient(135deg, #ffcf4a, var(--cc)); }
.adv-ch .node.locked.boss span { background: #c9cfdc; }
.adv-ch .node.next span { box-shadow: 0 0 0 calc(var(--u) * 0.8) #fff, 0 0 0 calc(var(--u) * 1.6) var(--cc), 0 8px 18px color-mix(in srgb, var(--cc) 50%, transparent); animation: nextPulse 1.4s ease-in-out infinite; }
@keyframes nextPulse { 50% { transform: scale(1.08); } }
.next-tag { position: absolute; top: calc(var(--u) * -4.6); left: 50%; transform: translateX(-50%); padding: 1px calc(var(--u) * 1.6); border-radius: 99px; background: var(--cc); color: #fff; font-style: normal; font-size: calc(var(--u) * 2); font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.adv-ch .node .fc { display: flex; align-items: center; gap: 1px; font-size: calc(var(--u) * 2.2); font-weight: 700; color: #2b6bff; }
.adv-ch .node .fc img { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }

.adv-rw { margin: 0 calc(var(--u) * 3) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: #f5f7fb; }
.adv-rw-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6); }
.adv-rw-row + .adv-rw-row { border-top: 1px solid #e8ecf3; }
.adv-rw-lbl b { display: block; font-size: calc(var(--u) * 2.9); font-weight: 700; }
.adv-rw-lbl small { display: block; font-size: calc(var(--u) * 2.3); color: #7a849b; }
.adv-rw-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.adv-rw-chips .rchip { font-size: calc(var(--u) * 2.5); }
.adv-rw-row.done .adv-rw-chips { opacity: 0.45; }
.adv-rw-row.ready { background: linear-gradient(90deg, #fff8e0, #fff3cc); border-radius: calc(var(--u) * 3); }
.adv-claim { border: 0; font: inherit; font-weight: 700; font-size: calc(var(--u) * 2.8); color: #5a3a00; padding: calc(var(--u) * 1.6) calc(var(--u) * 3.2); border-radius: 99px; background: linear-gradient(180deg, #ffd760, #ffb321); box-shadow: 0 3px 10px rgba(255, 170, 0, 0.45); cursor: pointer; animation: claimPulse 1.2s ease-in-out infinite; }
@keyframes claimPulse { 50% { transform: scale(1.06); } }
.adv-done { font-size: calc(var(--u) * 2.5); font-weight: 700; color: #19a867; white-space: nowrap; }
.adv-rw-row:not(.ready):not(.done) .adv-rw-chips { grid-column: 2 / 4; }
@media (prefers-reduced-motion: reduce) { .adv-chest.ready img, .adv-claim, .adv-ch .node.next span { animation: none; } }
.adv-ch .node.locked .fc { opacity: 0.55; }

/* ---------- v4: compact "Special offers" strip — one-row cards, drag/swipe, dots ---------- */
.deals { gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.4) calc(var(--u) * 4) calc(var(--u) * 1.6); cursor: grab; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.deals.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.deals.dragging .deal { pointer-events: none; }
.deal { flex: 0 0 calc(var(--u) * 78); min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 15) 1fr auto; grid-template-rows: auto auto auto; column-gap: calc(var(--u) * 2.6); row-gap: 1px; align-items: center;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3) calc(var(--u) * 2.4) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 4); box-shadow: 0 6px 16px rgba(30, 40, 80, 0.16); user-select: none; -webkit-user-drag: none; }
.deal:hover { transform: none; }
.deal:active { transform: scale(0.985); }
.deal .deal-art { position: relative; right: auto; top: auto; translate: none; grid-column: 1; grid-row: 1 / 4; width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: calc(var(--u) * 3); background: rgba(255, 255, 255, 0.18); }
.deal .deal-art img { pointer-events: none; animation: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25)); }
.deal .deal-art img:nth-child(1) { width: 74%; left: 6%; top: 8%; }
.deal .deal-art img:nth-child(2) { width: 48%; right: 2%; bottom: 2%; left: auto; }
.deal .deal-tag { grid-column: 2; grid-row: 1; font-size: calc(var(--u) * 1.8); padding: 1px calc(var(--u) * 1.4); }
.deal > b { grid-column: 2; grid-row: 2; max-width: none; font-size: calc(var(--u) * 3.7); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal > small { grid-column: 2; grid-row: 3; max-width: none; font-size: calc(var(--u) * 2.3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal .deal-foot { grid-column: 3; grid-row: 1 / 4; margin: 0; flex-direction: column; align-items: flex-end; gap: 3px; }
.deal .deal-price { padding: calc(var(--u) * 1.5) calc(var(--u) * 3); font-size: calc(var(--u) * 2.9); font-weight: 700; }
.deal .deal-foot em { font-size: calc(var(--u) * 2); }
.deal .value-sticker { width: calc(var(--u) * 8.4); top: calc(var(--u) * -0.6); right: auto; left: calc(var(--u) * 11.6); transform: rotate(-10deg); font-size: calc(var(--u) * 1.6); }
.deal .value-sticker b { font-size: calc(var(--u) * 2.8); }
.deal .badge { left: auto; right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.6); }
.deal-dots { display: flex; justify-content: center; gap: 5px; margin-top: calc(var(--u) * 0.4); }
.deal-dots i { width: 6px; height: 6px; border-radius: 99px; background: #cdd5e3; transition: width 0.25s, background 0.25s; cursor: pointer; }
.deal-dots i.on { width: 16px; background: #2b6bff; }
.deal .deal-tag { justify-self: start; width: max-content; } .deals { scroll-padding-inline: calc(var(--u) * 4); }
/* draggable strips + swipeable hero */
.shelf { cursor: grab; overscroll-behavior-x: contain; scroll-padding-inline: calc(var(--u) * 4); }
.shelf.dragging { cursor: grabbing; scroll-snap-type: none; }
.shelf.dragging .shelf-pack { pointer-events: none; }
.shelf img, .deals img, #hero img { -webkit-user-drag: none; user-select: none; }
.shelf-pack { -webkit-user-drag: none; user-select: none; }
#hero { touch-action: pan-y; user-select: none; cursor: grab; }
#hero[data-dir="next"] .hero-copy { animation: heroInR 0.4s cubic-bezier(.2, .9, .3, 1) both; }
#hero[data-dir="prev"] .hero-copy { animation: heroInL 0.4s cubic-bezier(.2, .9, .3, 1) both; }
#hero[data-dir="next"] .hero-pack { animation: heroInR 0.4s cubic-bezier(.2, .9, .3, 1) both, packBob 3.2s 0.4s ease-in-out infinite, packGlow 3.2s 0.4s ease-in-out infinite; }
#hero[data-dir="prev"] .hero-pack { animation: heroInL 0.4s cubic-bezier(.2, .9, .3, 1) both, packBob 3.2s 0.4s ease-in-out infinite, packGlow 3.2s 0.4s ease-in-out infinite; }
@keyframes heroInR { from { opacity: 0; transform: translateX(40px); } }
@keyframes heroInL { from { opacity: 0; transform: translateX(-40px); } }

/* ---------- v5: power rating (lực chiến) ---------- */
.pw { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pw img { width: 1.25em; height: 1.25em; object-fit: contain; }
.adv-mypw { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2.4) calc(var(--u) * 3.4); border-radius: calc(var(--u) * 3.4); text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #1d2a5c, #2b4bb8); color: #fff; box-shadow: 0 6px 16px rgba(29, 42, 92, 0.25); }
.adv-mypw small { display: block; font-size: calc(var(--u) * 2.3); opacity: 0.8; font-weight: 500; }
.adv-mypw b { font-size: calc(var(--u) * 4.6); }
.adv-mypw em { font-style: normal; font-size: calc(var(--u) * 2.7); font-weight: 700; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.adv-hint { margin: calc(var(--u) * 1.8) calc(var(--u) * 1) 0; font-size: calc(var(--u) * 2.6); font-weight: 600; color: #59647d; }
.adv-hint::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: currentColor; vertical-align: 1px; }
.adv-hint.easy { color: #16a34a; } .adv-hint.fair { color: #d18700; } .adv-hint.hard { color: #e5484d; }
.adv-rec { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 2px calc(var(--u) * 2) 2px calc(var(--u) * 2.2); border-radius: 99px; background: rgba(10, 16, 40, 0.5); backdrop-filter: blur(6px); font-size: calc(var(--u) * 2.4); font-weight: 600; }
.adv-rec b { padding: 0 calc(var(--u) * 1.4); border-radius: 99px; font-size: calc(var(--u) * 2.1); }
.adv-rec.easy b { background: #22c55e; } .adv-rec.fair b { background: #f5b301; color: #3b2600; } .adv-rec.hard b { background: #ef4444; }
.next-tag.easy { background: #16a34a; } .next-tag.fair { background: #e09a00; } .next-tag.hard { background: #e5484d; }
.adv-ch.locked .adv-rec { display: none; }

/* ---------- v5: weekly event sheet ---------- */
.hub-list .t-event { --hc: #fff1d6; }
.event-sheet .tabs3 { margin: calc(var(--u) * 3) 0; }
.ev-hero { position: relative; margin: calc(var(--u) * 6) 0 0; padding: calc(var(--u) * 4); min-height: calc(var(--u) * 34); display: flex; flex-direction: column; justify-content: flex-end; border-radius: calc(var(--u) * 4.4); background-size: cover; background-position: center; color: #fff; box-shadow: 0 8px 22px rgba(20, 30, 70, 0.22); overflow: hidden; }
.ev-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%); background-size: 260% 100%; animation: sweep 5s ease-in-out infinite; pointer-events: none; }
.ev-hero small { font-size: calc(var(--u) * 2.3); font-weight: 700; letter-spacing: 0.1em; opacity: 0.9; }
.ev-hero b { font-size: calc(var(--u) * 6.4); font-weight: 700; line-height: 1.05; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.ev-hero p { margin: 4px 0 0; font-size: calc(var(--u) * 2.7); opacity: 0.92; max-width: 70%; }
.ev-wallet { position: absolute; top: calc(var(--u) * 3.4); right: calc(var(--u) * 3.4); display: flex; align-items: center; gap: 6px; padding: calc(var(--u) * 1.2) calc(var(--u) * 3); border-radius: 99px; background: rgba(10, 16, 40, 0.55); backdrop-filter: blur(6px); font-size: calc(var(--u) * 3.6); }
.ev-wallet em { font-style: normal; font-size: 0.65em; opacity: 0.8; }
.ev-tok { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-tok img { width: 1.3em; height: 1.3em; object-fit: contain; }
.ev-body { display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); }
.ev-lv, .ev-ms { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2.8) calc(var(--u) * 3.2); border-radius: calc(var(--u) * 3.6); background: #fff; box-shadow: 0 4px 14px rgba(30, 45, 90, 0.08); }
.ev-lv-n { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 4.4); color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--ec, #2b6bff) 70%, #fff), var(--ec, #2b6bff)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.event-sheet { --ec: #2b6bff; }
.ev-lv.boss .ev-lv-n { background: linear-gradient(135deg, #ffd35a, #f08a00); }
.ev-lv-n img { width: 70%; }
.ev-lv-main b { display: block; font-size: calc(var(--u) * 3.4); font-weight: 700; }
.ev-lv-main small { display: block; margin-top: 2px; font-size: calc(var(--u) * 2.5); color: #6b7590; }
.ev-lv-rw { color: #8a5a00 !important; font-weight: 600; }
.ev-rate { font-style: normal; font-weight: 700; padding: 0 6px; border-radius: 99px; color: #fff; font-size: 0.9em; }
.ev-rate.easy { background: #22c55e; } .ev-rate.fair { background: #f5b301; color: #3b2600; } .ev-rate.hard { background: #ef4444; }
.ev-play, .ev-go { border: 0; font: inherit; font-weight: 700; font-size: calc(var(--u) * 3); color: #fff; padding: calc(var(--u) * 2) calc(var(--u) * 4); border-radius: 99px; background: linear-gradient(180deg, #4f7bff, #2b55e6); box-shadow: 0 4px 12px rgba(43, 85, 230, 0.35); cursor: pointer; }
.ev-go { padding: calc(var(--u) * 1.6) calc(var(--u) * 3.2); background: #eef2fb; color: #2b55e6; box-shadow: none; }
.ev-play:active, .ev-go:active { transform: scale(0.96); }
.ev-lv.locked { opacity: 0.6; } .ev-lv.locked .ev-lv-n { filter: grayscale(1); }
.ev-lock { font-size: calc(var(--u) * 2.4); font-weight: 700; color: #8a94ab; white-space: nowrap; }
.ev-note { margin: calc(var(--u) * 1) calc(var(--u) * 1) 0; font-size: calc(var(--u) * 2.4); color: #8a94ab; text-align: center; }
.ev-ms-main b { display: block; font-size: calc(var(--u) * 3); font-weight: 700; }
.ev-ms-main small { font-size: calc(var(--u) * 2.3); color: #8a94ab; }
.ev-bar { display: block; height: calc(var(--u) * 1.6); margin: 5px 0 3px; border-radius: 99px; background: #edf1f7; overflow: hidden; }
.ev-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd25a, #ffad1f); }
.ev-ms.ready { background: linear-gradient(90deg, #fff8e0, #fff); }
.ev-ms.done { opacity: 0.55; }
.ev-ms-rw { font-size: calc(var(--u) * 3); color: #8a5a00; }
.ev-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.2); }
.ev-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: calc(var(--u) * 2.4) calc(var(--u) * 1.6) calc(var(--u) * 2); border: 0; border-radius: calc(var(--u) * 3.4); background: #fff; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(30, 45, 90, 0.08); text-align: center; }
.ev-item:active { transform: scale(0.97); }
.ev-item.art { grid-column: span 3; display: grid; grid-template-columns: calc(var(--u) * 22) 1fr auto; text-align: left; column-gap: calc(var(--u) * 3); background: linear-gradient(135deg, #fff7e0, #fff 60%); box-shadow: 0 0 0 1.5px #ffd36a, 0 6px 18px rgba(255, 170, 0, 0.18); }
.ev-item-art { display: grid; place-items: center; height: calc(var(--u) * 15); }
.ev-item-art img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.18)); }
.ev-item.art .ev-item-art { grid-row: 1 / 4; height: calc(var(--u) * 30); }
.ev-item.art .ev-item-art img { border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); animation: bob 3s ease-in-out infinite; }
.ev-item b { font-size: calc(var(--u) * 2.6); font-weight: 700; line-height: 1.15; }
.ev-item.art b { font-size: calc(var(--u) * 3.4); align-self: end; }
.ev-cost { font-size: calc(var(--u) * 2.9); color: #8a5a00; }
.ev-item small { font-size: calc(var(--u) * 2.1); color: #8a94ab; }
.ev-item.art .ev-cost { grid-column: 2; } .ev-item.art small { grid-column: 2; align-self: start; }
.ev-item.poor .ev-cost { color: #c0c6d3; }
.ev-item.sold { opacity: 0.45; cursor: default; }
.ev-excl { position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); padding: 1px calc(var(--u) * 1.6); border-radius: 99px; background: linear-gradient(90deg, #ff9b2f, #ff5a6a); color: #fff; font-size: calc(var(--u) * 1.9); font-weight: 700; letter-spacing: 0.08em; }
.ev-item-art { width: 100%; overflow: hidden; } .ev-item:not(.art) .ev-item-art img { height: 100%; width: auto; max-width: 100%; } .ev-item.art .ev-item-art img { height: 100%; width: auto; }
/* pass reward tiles: keep every image inside its art area (SVG card backs have a large intrinsic size) */
.pr-art { overflow: hidden; }
.pr-art img { height: 78%; width: auto; max-width: 72%; max-height: none; }
.pr.card .pr-art img { height: 84%; aspect-ratio: 367 / 512; border-radius: 5px; box-shadow: 0 4px 10px rgba(17, 24, 39, 0.22); }
.pr.pack .pr-art img { height: 88%; }
.pr.mat .pr-art img { height: 86%; }
.pr-amt { position: relative; z-index: 1; background: #fff; }
.pr-art { display: flex; align-items: center; justify-content: center; } .pr-art img { flex: none; }
.deal.x-daily { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.35), transparent 40%), linear-gradient(135deg, #ff7ac6, #e0368f 60%, #a3175f); }
.deal.x-event { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.35), transparent 40%), linear-gradient(135deg, #3fd28f, #129a6a 60%, #0b6b4a); }
.deal.x-levelup { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.35), transparent 40%), linear-gradient(135deg, #8f7bff, #5a43e6 60%, #3a28a8); }
.deal.x-lucky { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.35), transparent 40%), linear-gradient(135deg, #5ee0c2, #1fb39a 60%, #0f7f6d); }
.deal.x-collector { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.4), transparent 40%), linear-gradient(135deg, #2a3358, #141a33 70%); }
.deal[class*="x-"] .deal-tag { color: #23314d; }
.offer.daily, .offer.event, .offer.levelup, .offer.lucky, .offer.collector { background: linear-gradient(135deg, #fff, #f3f6fb); }

/* ---------- v6: Adventure series + story scenes ---------- */
.adv-stabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); margin: calc(var(--u) * 3) 0 calc(var(--u) * 2.4); }
.adv-stab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2); border: 0; border-radius: calc(var(--u) * 3); background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px #e3e8f1; transition: box-shadow 0.2s, transform 0.15s; min-width: 0; }
.adv-stab small { font-size: calc(var(--u) * 2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc); }
.adv-stab b { font-size: calc(var(--u) * 2.7); font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.adv-stab i { font-style: normal; font-size: calc(var(--u) * 2.2); color: #8a94ab; font-weight: 600; }
.adv-stab.on { box-shadow: inset 0 0 0 2px var(--sc), 0 4px 12px color-mix(in srgb, var(--sc) 25%, transparent); }
.adv-stab.locked { opacity: 0.6; }
.adv-stab:active { transform: scale(0.97); }
.adv-series { position: relative; display: grid; grid-template-columns: 1fr calc(var(--u) * 22); gap: calc(var(--u) * 3); align-items: center; padding: calc(var(--u) * 3.4); border-radius: calc(var(--u) * 4); color: #fff; overflow: hidden;
  background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.25), transparent 45%), linear-gradient(135deg, var(--sc), color-mix(in srgb, var(--sc) 55%, #0b1230)); box-shadow: 0 8px 20px color-mix(in srgb, var(--sc) 30%, transparent); }
.adv-series-txt small { font-size: calc(var(--u) * 2.1); font-weight: 700; letter-spacing: 0.12em; opacity: 0.85; }
.adv-series-txt b { display: block; font-size: calc(var(--u) * 5); font-weight: 700; line-height: 1.05; margin: 2px 0 4px; }
.adv-series-txt p { margin: 0 0 calc(var(--u) * 2); font-size: calc(var(--u) * 2.6); opacity: 0.92; line-height: 1.35; }
.adv-series-goal { display: inline-block; padding: calc(var(--u) * 1) calc(var(--u) * 2.4); border-radius: 99px; background: rgba(0, 0, 0, 0.25); font-size: calc(var(--u) * 2.4); font-weight: 600; }
.adv-series-goal .adv-claim { margin: -4px -8px; }
.adv-series-card { position: relative; cursor: pointer; }
.adv-series-card img { width: 100%; display: block; border-radius: 7px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 8px 18px rgba(0, 0, 0, 0.35); transform: rotate(4deg); animation: bob 3.2s ease-in-out infinite; }
.adv-series-card span { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 1px calc(var(--u) * 1.8); border-radius: 99px; background: #ffd25a; color: #5a3a00; font-size: calc(var(--u) * 1.9); font-weight: 700; letter-spacing: 0.1em; }
.adv-series-card.locked img { filter: saturate(0.85); }
.adv-series-card.ready img { box-shadow: 0 0 0 2px #fff, 0 0 22px 4px #ffd25a; }
.adv-series-card.done img { filter: grayscale(0.3); }
.adv-story { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); border: 0; font: inherit; font-weight: 700; font-size: calc(var(--u) * 2.5); color: #fff; padding: calc(var(--u) * 1.2) calc(var(--u) * 2.6); border-radius: 99px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); cursor: pointer; }
.adv-story:active { transform: scale(0.95); }

/* story overlay (visual-novel style) */
.story { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-rows: auto 1fr auto; padding: max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); max-width: calc(calc(var(--vh1) * 100) * 0.5625); margin: 0 auto; color: #fff; cursor: pointer; animation: stIn 0.35s ease both; user-select: none; }
.story.out { animation: stOut 0.3s ease both; }
@keyframes stIn { from { opacity: 0; } } @keyframes stOut { to { opacity: 0; } }
.st-bg { position: fixed; inset: 0; background-size: cover; background-position: center; filter: saturate(1.1); z-index: -1; }
.st-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 30, 0.55), rgba(8, 12, 30, 0.15) 40%, rgba(8, 12, 30, 0.85)); }
.st-top { text-align: center; padding-top: 8px; }
.st-top small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.st-top b { display: block; font-size: 30px; font-weight: 700; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.st-top em { display: inline-block; margin-top: 4px; padding: 2px 12px; border-radius: 99px; background: var(--cc); font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.st-skip { position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px; border: 0; font: inherit; font-weight: 700; font-size: 13px; color: #fff; padding: 6px 14px; border-radius: 99px; background: rgba(0, 0, 0, 0.4); cursor: pointer; z-index: 2; }
.st-stage { display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.st-stage .st-npc { max-height: calc(var(--vh1) * 52); max-width: 80%; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); animation: stPop 0.35s cubic-bezier(.3, 1.5, .5, 1); }
.st-face { width: calc(var(--vw1) * 42); max-width: 200px; aspect-ratio: 1; border-radius: 50%; background: #fff center 22% / 220% no-repeat; box-shadow: 0 0 0 5px #fff, 0 12px 30px rgba(0, 0, 0, 0.45); margin-bottom: calc(var(--vh1) * 4); animation: stPop 0.35s cubic-bezier(.3, 1.5, .5, 1); display: grid; place-items: center; }
.st-face.rival { background: radial-gradient(circle, color-mix(in srgb, var(--cc) 60%, #fff), var(--cc)); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9), 0 0 40px var(--cc); }
.st-face.rival img { width: 56%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
@keyframes stPop { from { opacity: 0; transform: translateY(20px) scale(0.92); } }
.st-box { position: relative; padding: 18px 18px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.96); color: #1d2742; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); min-height: 96px; }
.st-box.narr { background: rgba(12, 18, 40, 0.82); color: #fff; font-style: italic; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.st-name { position: absolute; top: -14px; left: 16px; padding: 3px 14px; border-radius: 99px; background: var(--cc); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
.st-text { margin: 4px 0 0; font-size: 16px; line-height: 1.5; font-weight: 500; min-height: 48px; }
.st-next { position: absolute; right: 16px; bottom: 8px; font-style: normal; font-size: 12px; opacity: 0.5; animation: stBlink 1s ease-in-out infinite; }
@keyframes stBlink { 50% { opacity: 0.1; transform: translateY(2px); } }

/* Bag "Get" jumps to the matching Shop item and flashes it. */
.it3.flash { animation: it3Flash 1.4s ease-out; }
@keyframes it3Flash { 0%, 40% { box-shadow: 0 0 0 3px #3d7bff, 0 10px 30px rgba(61, 123, 255, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(61, 123, 255, 0); } }

/* ---------- v7: Sets tab (collection milestones) + Cosmetics shop + flair picker ---------- */
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg button { position: relative; }
.seg .dotn { position: absolute; top: -4px; right: 6px; }
.set-list { display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); padding-bottom: calc(var(--u) * 6); }
.set3 { display: grid; grid-template-columns: calc(var(--u) * 16) 1fr; gap: calc(var(--u) * 3); align-items: center; padding: calc(var(--u) * 2.6) calc(var(--u) * 3); border-radius: calc(var(--u) * 4); background: #fff; box-shadow: 0 4px 14px rgba(30, 45, 90, 0.08); animation: cardIn 0.4s both; animation-delay: calc(var(--i) * 0.03s); }
.set3.ready { box-shadow: 0 0 0 2px #ffd25a, 0 6px 18px rgba(255, 180, 30, 0.25); }
.set3.complete { background: linear-gradient(135deg, #fffaf0, #fff 60%); box-shadow: 0 0 0 2px #ffcf4a, 0 6px 18px rgba(255, 190, 40, 0.25); }
.set3-pack { width: 100%; filter: drop-shadow(0 6px 10px rgba(30, 40, 80, 0.25)); }
.set3-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.set3-top b { font-size: calc(var(--u) * 3.4); font-weight: 700; }
.set3-top em { font-style: normal; font-weight: 700; color: #2b6bff; font-size: calc(var(--u) * 3); }
.set3-badge { padding: 1px calc(var(--u) * 1.8); border-radius: 99px; background: linear-gradient(90deg, #ffd25a, #ffad1f); color: #5a3a00; font-size: calc(var(--u) * 2.1); font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.set3-bar { position: relative; height: calc(var(--u) * 1.8); margin: calc(var(--u) * 1.4) 0 4px; border-radius: 99px; background: #edf1f7; }
.set3-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #6ab8ff, #2b6bff); }
.set3.complete .set3-bar > i { background: linear-gradient(90deg, #ffd25a, #ffad1f); }
.set3-bar s { position: absolute; top: 50%; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #cfd8e6; }
.set3-bar s.on { box-shadow: 0 0 0 2px #2b6bff; background: #dce8ff; }
.set3-main small { font-size: calc(var(--u) * 2.3); color: #7a849b; }
.set3-ms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: calc(var(--u) * 1.6); }
.set3-m { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 0; border-radius: 10px; background: #f3f6fb; font: inherit; color: #8a94ab; font-size: calc(var(--u) * 2.1); min-width: 0; }
.set3-m b { font-size: calc(var(--u) * 2.3); }
.set3-m .rchip { font-size: calc(var(--u) * 2); transform: scale(0.92); }
.set3-m.go { background: linear-gradient(180deg, #ffe48a, #ffc23d); color: #5a3a00; cursor: pointer; animation: claimPulse 1.2s ease-in-out infinite; }
.set3-m.done { background: #e7f8ee; color: #16a34a; font-weight: 700; }
.set3-view { margin-top: calc(var(--u) * 1.4); border: 0; background: none; padding: 0; font: inherit; font-size: calc(var(--u) * 2.5); font-weight: 700; color: #2b6bff; cursor: pointer; }
.cos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.2); margin-bottom: calc(var(--u) * 5); }
.cos3 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: calc(var(--u) * 2.4) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 3.4); background: #fff; text-align: center; box-shadow: 0 4px 14px rgba(30, 45, 90, 0.08); animation: cardIn 0.4s both; animation-delay: calc(var(--i) * 0.04s); }
.cos3.on { box-shadow: 0 0 0 2px #2b6bff, 0 6px 16px rgba(43, 107, 255, 0.2); }
.cos3-art { height: calc(var(--u) * 20); display: grid; place-items: center; }
.cos3-art > img { height: 100%; border-radius: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.cos3 b { font-size: calc(var(--u) * 2.7); font-weight: 700; }
.cos3 small { font-size: calc(var(--u) * 2.1); color: #8a94ab; line-height: 1.25; min-height: 2.5em; }
.cos-own, .cos-earn { font-size: calc(var(--u) * 2.1); font-weight: 700; color: #16a34a; }
.cos-earn { color: #c98200; }
.coin-prev { display: block; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 0 15%, #2b3550 15.5% 21%, transparent 21.5%), linear-gradient(180deg, #ff5a5f 0 46%, #2b3550 46% 54%, #fff 54%); box-shadow: 0 0 0 4px #ffd75e, 0 6px 14px rgba(0, 0, 0, 0.25); }
.coin-prev.gold { filter: sepia(0.6) saturate(2.2) hue-rotate(-12deg) brightness(1.08); box-shadow: 0 0 0 4px #ffcf3c, 0 0 16px rgba(255, 200, 40, 0.8); }
.coin-prev.crystal { filter: hue-rotate(185deg) saturate(1.2) brightness(1.1); box-shadow: 0 0 0 4px #a8e9ff, 0 0 16px rgba(120, 210, 255, 0.85); }
.flair-prev { position: relative; display: block; height: 100%; aspect-ratio: 367 / 512; border-radius: 6px; }
.flair-prev img { height: 100%; border-radius: 6px; display: block; }
.flair-prev::after { content: ''; position: absolute; inset: -3px; border-radius: 8px; }
.flair-prev.fl-sparkle::after { background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 10% 20% / 30% 30%, radial-gradient(circle, #fff7c2 0 1.2px, transparent 2.2px) 70% 60% / 26% 26%; animation: flairTwinkle 2.4s linear infinite; }
.flair-prev.fl-flame::after { box-shadow: 0 0 0 2px #ffb347, 0 0 14px 4px rgba(255, 110, 30, 0.85); }
.flair-prev.fl-aurora::after { background: linear-gradient(120deg, rgba(255, 0, 128, 0.4), rgba(0, 200, 255, 0.4), rgba(120, 255, 120, 0.4)); mix-blend-mode: overlay; }
.flair-prev.fl-gold::after { box-shadow: 0 0 0 3px #ffd34d, 0 0 0 5px #fff6c9, 0 0 16px 4px rgba(255, 200, 40, 0.75); }
@keyframes flairTwinkle { 0% { background-position: 10% 20%, 70% 60%; opacity: .55; } 50% { opacity: 1; } 100% { background-position: 10% -80%, 70% -40%; opacity: .55; } }
.cv-flair { margin: calc(var(--u) * 2) 0; padding: calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3); background: #f5f7fb; }
.cv-flair > b { font-size: calc(var(--u) * 2.8); }
.cv-flair > div { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cv-flair small { font-size: calc(var(--u) * 2.2); color: #8a94ab; }
.fl-chip { border: 0; padding: 5px 11px; border-radius: 99px; background: #fff; font: inherit; font-size: calc(var(--u) * 2.5); font-weight: 600; color: #59647d; box-shadow: inset 0 0 0 1.5px #dfe5ef; cursor: pointer; }
.fl-chip.on { background: #2b6bff; color: #fff; box-shadow: none; }
.fl-chip.locked { opacity: 0.5; cursor: default; }
/* Card grid: a card back holds the slot until the thumbnail arrives, then the art fades in (no grey boxes). */
.cc { aspect-ratio: 367 / 512; background: #1d2a5c url('../assets/ui/card-back-r1.svg') center / cover; }
.cc img { height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.18s ease; }
.cc img.in { opacity: 1; }
.cc { animation: none; }
.cos3-art { height: calc(var(--u) * 20); overflow: hidden; }
.cos3-art > img, .flair-prev, .flair-prev img { height: calc(var(--u) * 20) !important; width: auto; max-width: 100%; }
.flair-prev { aspect-ratio: 367 / 512; }

/* ---------- v8: Exchange tab (Pack Points / Battle Medals / Stardust) ---------- */
.res-ic { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-ic img { width: 1.35em; height: 1.35em; object-fit: contain; }
.ex-wallet { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); margin: calc(var(--u) * 2) 0; }
.ex-wallet > div { display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 2) 4px; border-radius: calc(var(--u) * 3.4); background: #fff; box-shadow: 0 4px 14px rgba(30, 45, 90, 0.08); }
.ex-wallet img { width: calc(var(--u) * 10); height: calc(var(--u) * 10); object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.18)); }
.ex-wallet b { font-size: calc(var(--u) * 4); font-weight: 700; }
.ex-wallet small { font-size: calc(var(--u) * 2.2); color: #7a849b; }
.ex-sets { display: flex; gap: calc(var(--u) * 1.6); overflow-x: auto; padding: 4px 2px calc(var(--u) * 2); scrollbar-width: none; }
.ex-sets::-webkit-scrollbar { display: none; }
.ex-set { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: calc(var(--u) * 17); padding: 6px 4px; border: 0; border-radius: 12px; background: #fff; font: inherit; color: #59647d; box-shadow: inset 0 0 0 1.5px #e3e8f1; cursor: pointer; }
.ex-set img { height: calc(var(--u) * 13); }
.ex-set span { font-size: calc(var(--u) * 2); font-weight: 600; line-height: 1.15; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ex-set.on { box-shadow: inset 0 0 0 2px #2b6bff; color: #2b55e6; }
.ex-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.6); max-height: calc(var(--u) * 118); overflow-y: auto; padding: 2px; margin-bottom: calc(var(--u) * 4); }
.ex-card { position: relative; padding: 0; border: 0; background: #1d2a5c url('../assets/ui/card-back-r1.svg') center / cover; border-radius: 4.6% / 3.3%; aspect-ratio: 367 / 512; cursor: pointer; overflow: hidden; box-shadow: 0 3px 8px rgba(30, 40, 80, 0.15); }
.ex-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; background: rgba(15, 22, 45, 0.78); color: #fff; font-size: calc(var(--u) * 2.2); display: flex; justify-content: center; }
.ex-card em { position: absolute; top: 3px; right: 3px; padding: 0 5px; border-radius: 99px; background: rgba(15, 22, 45, 0.75); color: #fff; font-style: normal; font-size: calc(var(--u) * 2); font-weight: 700; }
.ex-card.poor span { color: #ffb4b4; }
.ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 4); }
.ex-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: calc(var(--u) * 2.2) 4px; border: 0; border-radius: calc(var(--u) * 3.2); background: #fff; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(30, 45, 90, 0.08); text-align: center; animation: cardIn 0.4s both; animation-delay: calc(var(--i) * 0.03s); }
.ex-item:active { transform: scale(0.97); }
.ex-art { height: calc(var(--u) * 13); display: grid; place-items: center; }
.ex-art img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.ex-item b { font-size: calc(var(--u) * 2.4); font-weight: 700; line-height: 1.15; }
.ex-item small { font-size: calc(var(--u) * 2); color: #8a94ab; }
.ex-item.poor .res-ic { color: #c0c6d3; }
.ex-item.sold { opacity: 0.45; cursor: default; }
.ex-sold { font-size: calc(var(--u) * 2.2); font-weight: 700; color: #8a94ab; }
.ex-recycle { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(var(--u) * 2.6) calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3.4); background: linear-gradient(135deg, #f4ecff, #fff); box-shadow: inset 0 0 0 1.5px #e3d4ff; }
.ex-recycle b { display: block; font-size: calc(var(--u) * 3); }
.ex-recycle small { font-size: calc(var(--u) * 2.3); color: #7a849b; }
.set-row.vol { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; cursor: default; }
.set-row.vol input[type=range] { width: 100%; accent-color: #2b6bff; }
.rd-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: calc(var(--u) * 3); }
.rd-row input { height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: #f1f4f9; box-shadow: inset 0 0 0 1.5px #dfe5ef; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #23314d; }
.rd-row input:focus { outline: none; box-shadow: inset 0 0 0 2px #2b6bff; }
.rd-row input.bad { animation: rdShake 0.35s; box-shadow: inset 0 0 0 2px #e5484d; }
@keyframes rdShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#rdMsg { color: #e5484d; min-height: 1.2em; margin-top: 8px; }
/* v8 fixes: 6 shop tabs on one row, icon sizes inside exchange tiles */
.stabs { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: calc(var(--u) * 1.2) !important; }
.stabs button { min-width: 0; padding-left: 2px !important; padding-right: 2px !important; }
.stabs button span { font-size: calc(var(--u) * 2.3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stabs button img { width: calc(var(--u) * 7.5) !important; height: calc(var(--u) * 7.5) !important; }
.ex-card img { width: auto; height: auto; }
.ex-card > img { width: 100%; height: 100%; }
.ex-card .res-ic img { width: 1.3em; height: 1.3em; }
.ex-art { display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; }
.ex-art img { height: calc(var(--u) * 13); }
.set3-how { margin: calc(var(--u) * 1.6) 0 4px; font-size: calc(var(--u) * 2.3); color: #59647d; }
.set3-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.set3-go { border: 0; padding: 5px 11px; border-radius: 99px; background: linear-gradient(180deg, #4f7bff, #2b55e6); color: #fff; font: inherit; font-size: calc(var(--u) * 2.3); font-weight: 700; text-decoration: none; cursor: pointer; }
.set3-go.alt { background: #eef2fb; color: #2b55e6; }
.set3-acts .set3-view { margin: 0 0 0 auto; font-size: calc(var(--u) * 2.3); }
.hub-list .t-club { --hc: #fff1d6; }
.set-row small { display: block; font-size: 11.5px; font-weight: 500; color: #8a94ab; margin-top: 1px; } .set-row.acct { cursor: default; }

/* =====================================================================
   LANDSCAPE 16:9 (v9) — the frame is 100 frame-units tall × 177.8 wide (css/landscape.css: --fh / --fw).
   Inside .app, --u is the frame unit capped at 8.6px so the chrome (top bar, nav rail, dashboard) never
   looks blown-up on big desktops; flex/grid areas simply grow into the extra room.
   Scrolling panels and dialogs use --su: denser on desktops, never below phone size, so content designed
   for the old 100u-wide column keeps its proportions (~13px body text at 720p, ~16px at 1080p).
   ===================================================================== */
:root { --su: clamp(3.9px, calc(var(--fh) * 0.0072), 6.4px); }
.app { --u: min(calc(var(--fh) / 100), 8.6px); border-radius: 0; }
.sky { height: 62%; background-position: 50% 40%; }

/* ---------- top bar: profile · round buttons · wallet ---------- */
.topbar { left: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.4); height: calc(var(--u) * 11); gap: calc(var(--u) * 1.6); justify-content: flex-start; }
.me { flex: none; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 0.9) calc(var(--u) * 2.4) calc(var(--u) * 0.9) calc(var(--u) * 0.9); }
.avatar { width: calc(var(--u) * 8); box-shadow: 0 0 0 calc(var(--u) * 0.45) #fff, 0 2px 8px rgba(30, 40, 80, 0.25); }
.me-text { gap: calc(var(--u) * 0.6); }
.me-text b { font-size: calc(var(--u) * 2.9); max-width: calc(var(--u) * 22); }
.lvl em { font-size: calc(var(--u) * 2.1); padding: 0 calc(var(--u) * 1.2); }
.lvl i { width: calc(var(--u) * 10); height: calc(var(--u) * 1.1); }
.rail { position: static; left: auto; right: auto; top: auto; flex: 1; min-width: 0; display: flex; justify-content: center; gap: calc(var(--u) * 0.4); }
.rb { width: calc(var(--u) * 10.6); gap: calc(var(--u) * 0.3); }
.rb img { width: calc(var(--u) * 7.4); padding: calc(var(--u) * 1.1); }
.rb span { font-size: calc(var(--u) * 2.1); line-height: 1.1; white-space: nowrap; }
.rb .badge { right: calc(var(--u) * 1.4); top: calc(var(--u) * -0.2); width: calc(var(--u) * 2.4); }
.rb .badge.num { right: calc(var(--u) * 0.6); top: calc(var(--u) * -0.8); min-width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); font-size: calc(var(--u) * 2.1); }
.wallet { flex: none; gap: calc(var(--u) * 1); }
.cur, .wallet .cur { padding: calc(var(--u) * 0.9) calc(var(--u) * 1.8) calc(var(--u) * 0.9) calc(var(--u) * 1); font-size: calc(var(--u) * 2.7); min-height: calc(var(--u) * 6.6); }
img.ico { width: calc(var(--u) * 5); }
.cur .plus { width: calc(var(--u) * 3.6); font-size: calc(var(--u) * 2.6); }

/* dropdowns from the round buttons: a panel anchored under the tapped button */
.dropdown { --dw: min(calc(var(--su) * 96), calc(100% - var(--u) * 17)); left: clamp(calc(var(--u) * 15), calc(var(--ax, 50%) - var(--dw) / 2), calc(100% - var(--dw) - var(--u) * 1.6)); right: auto; width: var(--dw);
  top: calc(var(--u) * 13); max-height: calc(100% - var(--u) * 15); transform-origin: 50% 0; padding: calc(var(--su) * 3.4); border-radius: calc(var(--su) * 4.4); }
.dropdown > * { --u: var(--su); }
.dropdown h4 { font-size: calc(var(--su) * 3.8); margin-bottom: calc(var(--su) * 2.2); }

/* ---------- left navigation rail ---------- */
.nav { left: calc(var(--u) * 1.6); right: auto; top: calc(var(--u) * 13.6); bottom: calc(var(--u) * 1.6); width: calc(var(--u) * 12.4);
  display: flex; flex-direction: column; justify-content: space-evenly; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 1.2) calc(var(--u) * 1); border-radius: calc(var(--u) * 4); }
.nav button { flex: 0 1 calc(var(--u) * 14); min-height: calc(var(--u) * 10.4); justify-content: center; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 1) 0; border-radius: calc(var(--u) * 3); font-size: calc(var(--u) * 2.3); }
.nav button img { width: calc(var(--u) * 6.4); }
.nav button.on img { transform: scale(1.1); }
.nav button.on { box-shadow: inset 0 0 0 1.5px rgba(47, 107, 255, 0.25); }
.nav button[data-view="packs"] { transform: none; }
.nav button[data-view="packs"] img { width: calc(var(--u) * 7.4); }
.nav button .nav-chip { top: calc(var(--u) * -1.4); bottom: auto; font-size: calc(var(--u) * 1.8); line-height: 1.25; padding: calc(var(--u) * 0.2) calc(var(--u) * 1); z-index: 1; }
.nav .badge { top: calc(var(--u) * 0.8); right: calc(var(--u) * 2); }
.nav button.locked-nav::after { top: calc(var(--u) * 0.6); right: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.4); }

/* ---------- views: everything right of the rail, below the top bar ---------- */
.view { top: calc(var(--u) * 13.6); left: calc(var(--u) * 15.6); right: 0; bottom: 0; padding: 0 calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 0.6); }
#view-collection, #view-shop, #view-market { left: calc(var(--u) * 15.6); right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); padding: 0 calc(var(--su) * 3) calc(var(--su) * 3);
  border-radius: calc(var(--u) * 4); background: rgba(244, 246, 251, 0.92); backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(30, 40, 80, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  scrollbar-width: thin; scrollbar-color: #cfd7e6 transparent; }
#view-collection > *, #view-shop > *, #view-market > * { --u: var(--su); }

/* ---------- HOME: three-column dashboard, no page scroll ---------- */
#view-home { display: grid; grid-template-columns: calc(var(--u) * 45) minmax(0, 1fr) calc(var(--u) * 40); column-gap: calc(var(--u) * 1.8); overflow: hidden; padding-top: calc(var(--u) * 0.2); }
.home-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }

/* left: free pack + play */
.free-card { flex: 0 1 auto; margin: 0; min-height: calc(var(--u) * 28); height: auto; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 2) calc(var(--u) * 2.4) calc(var(--u) * 2) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 4); }
.fc-art { width: calc(var(--u) * 15); }
.fc-art img { height: calc(var(--u) * 21); }
.fc-main { gap: calc(var(--u) * 0.9); }
.fc-tag { font-size: calc(var(--u) * 1.9); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.4); }
.fc-main > b { font-size: calc(var(--u) * 3); }
.fc-time { font-size: calc(var(--u) * 4.4); }
.fc-meter { gap: calc(var(--u) * 0.6) calc(var(--u) * 0.8); flex-wrap: wrap; }
.fc-meter i { flex: 0 0 calc(var(--u) * 6); height: calc(var(--u) * 1.6); }
.fc-meter em { flex: 1 1 100%; font-size: calc(var(--u) * 1.9); white-space: normal; line-height: 1.2; }
.fc-row { gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 0.4); }
.fc-open { padding: calc(var(--u) * 1.8) calc(var(--u) * 3) !important; font-size: calc(var(--u) * 2.7) !important; min-height: calc(var(--u) * 6.4); }
.fc-hg { min-height: calc(var(--u) * 6.4); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.8) calc(var(--u) * 0.6) calc(var(--u) * 0.6); }
.fc-hg img { width: calc(var(--u) * 4.6); }
.fc-hg b { font-size: calc(var(--u) * 2.4); } .fc-hg small { font-size: calc(var(--u) * 2); }
.play-card { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.8); border-radius: calc(var(--u) * 4); }
.modes { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1); margin: 0; }
.mode { min-height: calc(var(--u) * 6.4); padding: calc(var(--u) * 1) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.3); }
.mode-emb { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
.deck-btn { margin: 0; padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 1) calc(var(--u) * 1.2); min-height: calc(var(--u) * 8); border-radius: calc(var(--u) * 2.4); }
.deck-btn img { width: calc(var(--u) * 5.6); }
.deck-btn small { font-size: calc(var(--u) * 1.9); }
.deck-btn b { font-size: calc(var(--u) * 2.4); }
.deck-btn em { font-size: calc(var(--u) * 2.3); }
.play-btn { flex: 1; min-height: calc(var(--u) * 11); padding: calc(var(--u) * 1.6); gap: calc(var(--u) * 2); border-radius: calc(var(--u) * 3) !important; }
.play-btn img { width: calc(var(--u) * 11); }
.play-btn b { font-size: calc(var(--u) * 6.4); }
.play-btn small { font-size: calc(var(--u) * 2.3); }
/* tall Battle button: stack the emblem over the label so the space is used, not left empty */
.play-btn.tall { flex-direction: column; gap: calc(var(--u) * 1.4); }
.play-btn.tall img { width: min(44%, calc(var(--u) * 14)); }
.play-btn.tall > span { align-items: center; text-align: center; }
.play-btn.tall b { font-size: calc(var(--u) * 6.8); }
.play-btn.tall small { font-size: calc(var(--u) * 2.6); }
/* home Battle button: ukiyo-e artwork background, label on a dark wash at the bottom */
#view-home .play-btn { background: #1d2a44 url('../assets/ui/battle-bg.webp') center 30% / cover no-repeat !important; box-shadow: 0 12px 28px rgba(20, 30, 60, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.35) !important; }
#view-home .play-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 16, 34, 0) 45%, rgba(10, 16, 34, 0.55) 72%, rgba(10, 16, 34, 0.85)); }
#view-home .play-btn.tall { justify-content: flex-end; padding-bottom: calc(var(--u) * 2.6); }
#view-home .play-btn.tall img { width: min(30%, calc(var(--u) * 9)); }
#view-home .play-btn b, #view-home .play-btn small { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }

/* centre: hero carousel, offers strip, featured packs + adventure */
.hero-wrap { position: relative; flex: 1 1 calc(var(--u) * 30); min-height: calc(var(--u) * 24); }
.hero { position: absolute; inset: 0; margin: 0; height: auto; border-radius: calc(var(--u) * 4); }
.hero-pack { right: calc(var(--u) * 5); height: min(96%, calc(var(--u) * 44)); z-index: 2; }
/* two more new packs fanned out behind the featured one */
.hero-fan { position: absolute; top: 50%; height: min(80%, calc(var(--u) * 36)); cursor: pointer; z-index: 1; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4)) brightness(0.92); transition: filter 0.2s; }
.hero-fan:hover { filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4)) brightness(1.05); }
.hero-fan.f1 { right: calc(var(--u) * 18); transform: translateY(-46%) rotate(-7deg); animation: packBob 2.8s -0.9s ease-in-out infinite; }
.hero-fan.f2 { right: calc(var(--u) * 30); transform: translateY(-42%) rotate(-15deg); animation: packBob 3.6s -1.8s ease-in-out infinite; }
/* lively idle motion: packs hop and sway (individual translate/rotate so the base transform is kept) */
.hero-pack { animation: packBob 3.2s ease-in-out infinite, packGlow 3.2s ease-in-out infinite; }
@keyframes packBob { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 calc(var(--u) * -2.6); rotate: 2.5deg; } 50% { translate: 0 calc(var(--u) * -0.6); rotate: -1deg; } 75% { translate: 0 calc(var(--u) * -1.8); rotate: 1.5deg; } }
@keyframes packGlow { 0%, 100% { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); } 50% { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 calc(var(--u) * 3) rgba(255, 230, 140, 0.75)); } }
.shelf-pack img { animation: shelfHop 2.8s ease-in-out infinite; transition: scale 0.18s; }
.shelf-pack:nth-child(2n) img { animation-delay: -0.7s; } .shelf-pack:nth-child(3n) img { animation-delay: -1.4s; } .shelf-pack:nth-child(4n+1) img { animation-delay: -2.1s; }
.shelf-pack:hover img { scale: 1.08; }
@keyframes shelfHop { 0%, 100% { translate: 0 0; rotate: 0deg; } 20% { translate: 0 calc(var(--u) * -1.4); rotate: -2deg; } 40% { translate: 0 0; rotate: 1deg; } 55% { translate: 0 calc(var(--u) * -0.5); rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .hero-fan, .hero-pack, .shelf-pack img { animation: none !important; } }
.hero-copy { left: calc(var(--u) * 3.6); bottom: calc(var(--u) * 3.6); width: 58%; gap: calc(var(--u) * 1); z-index: 3; }
.hero-copy.wide { width: 74%; }
.hero-copy b { font-size: calc(var(--u) * 5.2); }
.hero-copy small { font-size: calc(var(--u) * 2.3); }
.hero-copy .pill { padding: calc(var(--u) * 1.6) calc(var(--u) * 3.6); font-size: calc(var(--u) * 2.5); min-height: calc(var(--u) * 6.2); }
.tag { font-size: calc(var(--u) * 1.9); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.4); }
.hero-wrap .dots { position: absolute; right: calc(var(--u) * 2.6); bottom: calc(var(--u) * 2.2); margin: 0; z-index: 2; gap: calc(var(--u) * 1); }
.hero-wrap .dots i { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); background: rgba(255, 255, 255, 0.55); }
.hero-wrap .dots i.on { width: calc(var(--u) * 4.4); background: #fff; }
.deals-wrap { flex: none; min-width: 0; }
.deals-head, .shelf-head { margin: 0 0 calc(var(--u) * 0.4); align-items: center; }
.deals-head b, .shelf-head b { font-size: calc(var(--u) * 2.8); }
.deals-head a, .shelf-head a { font-size: calc(var(--u) * 2.2); padding: calc(var(--u) * 0.6) 0; }
.deals { margin: 0 calc(var(--u) * -0.6); padding: calc(var(--u) * 0.8) calc(var(--u) * 0.6) calc(var(--u) * 1.2); gap: calc(var(--u) * 1.6); scroll-padding-inline: calc(var(--u) * 0.6); }
.deal { flex: 0 0 calc(var(--u) * 52); grid-template-columns: calc(var(--u) * 11) 1fr auto; column-gap: calc(var(--u) * 1.8); padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.6) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 3); }
.deal .deal-art { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 2.4); }
.deal .deal-tag { font-size: calc(var(--u) * 1.7); }
.deal > b { font-size: calc(var(--u) * 2.8); }
.deal > small { font-size: calc(var(--u) * 2); }
.deal .deal-price { padding: calc(var(--u) * 1.3) calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.4); }
.deal .deal-foot em { font-size: calc(var(--u) * 1.8); }
.deal .value-sticker { width: calc(var(--u) * 6.8); left: calc(var(--u) * 8.4); font-size: calc(var(--u) * 1.4); }
.deal .value-sticker b { font-size: calc(var(--u) * 2.3); }
.deal-dots { margin-top: 0; }
.hc-row { flex: 0 0 calc(var(--u) * 31); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 30); gap: calc(var(--u) * 1.6); }
.shelf-wrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6) 0; border-radius: calc(var(--u) * 3.4);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.shelf { flex: 1; min-height: 0; margin: 0 calc(var(--u) * -1.6); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.6) calc(var(--u) * 0.8); gap: calc(var(--u) * 1.4); align-items: flex-start; scroll-padding-inline: calc(var(--u) * 1.6); }
.shelf-pack { width: calc(var(--u) * 13); gap: calc(var(--u) * 0.6); }
.shelf-pack img { height: calc(var(--u) * 19); }
.shelf-pack span { font-size: calc(var(--u) * 2); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-card { min-height: 0; margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 3.4); flex-direction: column; align-items: stretch; justify-content: flex-end; gap: calc(var(--u) * 1.2); cursor: pointer; }
.adv-copy { gap: calc(var(--u) * 0.6); min-width: 0; }
.adv-copy .tag { align-self: flex-start; font-size: calc(var(--u) * 1.6); }
.adv-copy b { font-size: calc(var(--u) * 3.4); }
.adv-copy small { font-size: calc(var(--u) * 1.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-card .pill { align-self: flex-start; padding: calc(var(--u) * 1.2) calc(var(--u) * 3); font-size: calc(var(--u) * 2.3); min-height: calc(var(--u) * 5.6); }

/* right: "Missions & more" is always open in landscape (a header + a list) */
.hc-right { gap: 0; }
.hub-btn { flex: none; margin: 0; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.6) calc(var(--u) * 2); grid-template-columns: auto 1fr; pointer-events: none; cursor: default;
  border-radius: calc(var(--u) * 3.4) calc(var(--u) * 3.4) 0 0 !important; box-shadow: 0 6px 18px rgba(30, 45, 90, 0.1); }
.hub-burger { width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: calc(var(--u) * 2); background: url('../assets/icons/missions.webp') center / 82% no-repeat, linear-gradient(150deg, #4f7bff, #2b55e6); }
.hub-burger i, .hub-mini, .hub-chev { display: none; }
.hub-txt b { font-size: calc(var(--u) * 2.8); }
.hub-txt small { font-size: calc(var(--u) * 2); }
.hub-badge { left: calc(var(--u) * 6); top: calc(var(--u) * 0.8); min-width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); font-size: calc(var(--u) * 2); box-shadow: 0 0 0 calc(var(--u) * 0.45) #fff; }
.tiles.hub-list, .tiles.hub-list.open { flex: 1; min-height: 0; max-height: none; opacity: 1; transform: none; pointer-events: auto; margin: 0; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 0 0 calc(var(--u) * 3.4) calc(var(--u) * 3.4); border-top: 1px solid #eef1f6; scrollbar-width: thin; scrollbar-color: #cfd7e6 transparent; align-content: start; }
.hub-list .tile { grid-template-columns: calc(var(--u) * 6.8) minmax(0, 1fr) auto; column-gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 0.9) calc(var(--u) * 5.6) calc(var(--u) * 0.9) calc(var(--u) * 2); min-height: calc(var(--u) * 8.5) !important; }
.hub-list .tile img { width: calc(var(--u) * 6.8); height: calc(var(--u) * 6.8); padding: calc(var(--u) * 0.7); border-radius: calc(var(--u) * 2); }
.hub-list .tile b { font-size: calc(var(--u) * 2.5); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hub-list .tile:has(.lock-chip:not(.hidden)) .pips { display: none; }
.hub-list .tile small { font-size: calc(var(--u) * 1.95); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-width: 0; }
.hub-list .tile .bar { width: calc(var(--u) * 7); height: calc(var(--u) * 1.2); margin-right: 0; }
.hub-list .tile .pips { margin-right: 0; gap: 2px; }
.hub-list .tile .pips i { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
.hub-list .tile .badge { right: calc(var(--u) * 1.8) !important; width: calc(var(--u) * 2.4); }
.hub-list .tile .badge.num { min-width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); font-size: calc(var(--u) * 2); width: auto; }
.hub-list .tile .lock-chip { font-size: calc(var(--u) * 1.8); white-space: nowrap; }

/* ---------- CARDS: filter side panel + wide card grid ---------- */
#view-collection { display: grid; grid-template-columns: calc(var(--su) * 50) minmax(0, 1fr); column-gap: calc(var(--su) * 3.4); align-items: start; }
.dex-side { position: sticky; top: 0; z-index: 3; max-height: calc(var(--fh) * 0.83); overflow-y: auto; padding: calc(var(--u) * 3) 0 calc(var(--u) * 2); scrollbar-width: none; }
.dex-side::-webkit-scrollbar { display: none; }
.dex-side .view-head { padding-top: 0; flex-wrap: wrap; gap: 0 calc(var(--u) * 2); }
.dex-side .view-head h2 { font-size: calc(var(--u) * 5); }
.dex-side .view-head .muted { margin: 0; font-size: calc(var(--u) * 2.6); }
.dex-side .seg { margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 2.2); }
.dex-side .seg button { font-size: calc(var(--u) * 2.6); padding: calc(var(--u) * 1.8) 0; }
.dex-side .types { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 1.4); overflow: visible; padding: calc(var(--u) * 2.4) calc(var(--u) * 0.6) calc(var(--u) * 1); justify-items: center; }
.dex-side .tdot { width: 100%; max-width: calc(var(--u) * 7.4); }
.dex-side .selects { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2); }
.dex-side .dex-count { margin: calc(var(--u) * 1.2) 0 0; }
.dex-main { min-width: 0; padding-top: calc(var(--u) * 3); }
.dex-main .grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 19), 1fr)); gap: calc(var(--u) * 2); }
.dex-main .sh-lead { margin-top: 0; }
.set-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 82), 1fr)); gap: calc(var(--u) * 2.4); align-items: stretch; }
.dd-menu { max-height: calc(var(--fh) * 0.6); }

/* ---------- SHOP: tab rail on the left, wide grids on the right ---------- */
#view-shop { display: grid; grid-template-columns: calc(var(--su) * 34) minmax(0, 1fr); column-gap: calc(var(--su) * 3.4); align-items: start; }
.shop-side { position: sticky; top: 0; z-index: 3; padding: calc(var(--u) * 3) 0 calc(var(--u) * 2); }
.shop-side .view-head { padding-top: 0; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 0.6); }
.shop-side .view-head h2 { font-size: calc(var(--u) * 5); }
.shop-side .cur-inline { font-size: calc(var(--u) * 2.6); }
.shop-side .stabs { display: flex !important; flex-direction: column; gap: calc(var(--u) * 1.2) !important; margin: calc(var(--u) * 2.6) 0 0; }
.shop-side .stabs button { flex-direction: row; justify-content: flex-start; gap: calc(var(--u) * 1.6); min-height: calc(var(--u) * 9); padding: calc(var(--u) * 1) calc(var(--u) * 2) !important; border-radius: calc(var(--u) * 2.6); }
.shop-side .stabs button span { font-size: calc(var(--u) * 2.7) !important; }
.shop-side .stabs button img { width: calc(var(--u) * 6.4) !important; height: calc(var(--u) * 6.4) !important; }
.shop-side .stabs button.on { transform: translateX(3px); }
.shop-side .stabs .badge { top: 50%; right: calc(var(--u) * 2); transform: translateY(-50%); }
.shop-body { min-width: 0; padding-top: calc(var(--u) * 3); }
.shop-body > :first-child { margin-top: 0; }
.shop-body[data-tab="gems"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--u) * 2.6); align-items: start; }
.shop-body[data-tab="gems"] > * { grid-column: 1 / -1; }
.shop-body[data-tab="gems"] > .offer { grid-column: auto; }
.gem-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 30), 1fr)); }
.tu-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 82), 1fr)); }
.vip-perks { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 36), 1fr)); }
.pk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 76), 1fr)); gap: calc(var(--u) * 2.6); }
.it-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 30), 1fr)); }
.ex-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 60), 1fr)); }
.cs-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 30), 1fr)); }
.mat-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 30), 1fr)); }
.cos-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 27), 1fr)); }
.ex-wallet { grid-template-columns: repeat(3, minmax(0, calc(var(--u) * 36))); }
.ex-cards { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 17), 1fr)); max-height: calc(var(--fh) * 0.62); }
.ex-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 26), 1fr)); }

/* ---------- MARKET: two-column listings ---------- */
#view-market > .view-head { padding-top: calc(var(--u) * 3); }
.market { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 80), 1fr)); gap: calc(var(--u) * 2); }

/* ---------- sheets → compact centred landscape dialogs ---------- */
.sheet { --u: var(--su); align-items: center; justify-content: center; background: rgba(15, 22, 42, 0.5); }
.sheet-card { width: min(calc(var(--u) * 116), calc(var(--fw) - 24px)); max-height: min(calc(var(--fh) * 0.92), calc(var(--u) * 150));
  padding: calc(var(--u) * 5); border-radius: calc(var(--u) * 5); box-shadow: 0 30px 70px rgba(15, 22, 45, 0.4); animation: boxIn 0.32s cubic-bezier(.2, 1.2, .4, 1);
  scrollbar-width: thin; scrollbar-color: #cfd7e6 transparent; }
.sheet-card.tall { width: min(calc(var(--u) * 190), calc(var(--fw) - 24px)); height: min(calc(var(--fh) * 0.92), calc(var(--u) * 150)); max-height: none; }
.sheet-card .x { width: calc(var(--u) * 8); right: calc(var(--u) * 3); top: calc(var(--u) * 3); z-index: 5; }
.sheet-card > h2:first-of-type { padding-right: calc(var(--u) * 10); }
/* onboarding: six small partner tiles in one row */
.sheet-card.onboard .name-in { padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: calc(var(--u) * 3.2); margin-bottom: calc(var(--u) * 2.6); }
.sheet-card.onboard .partners { grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * 3); }
.sheet-card.onboard .partner { padding: calc(var(--u) * 1.4) 0; }
.sheet-card.onboard .partner span { width: min(calc(var(--u) * 12), 88%); }
.sheet-card.onboard .partner small { font-size: calc(var(--u) * 2.2); }
.sheet-card.onboard .pill.big { padding: calc(var(--u) * 2.4) 0; font-size: calc(var(--u) * 3.2); }
/* card view: the card on the left, details on the right */
.sheet-card.card-sheet { width: min(calc(var(--u) * 140), calc(var(--fw) - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--u) * 5); align-content: start; }
.card-sheet > * { grid-column: 2; }
.card-sheet > .x { grid-column: auto; }
.card-sheet > .big-card { grid-column: 1; grid-row: 1 / span 30; align-self: start; width: auto; height: min(calc(var(--fh) * 0.72), calc(var(--u) * 100)); aspect-ratio: 367 / 512; margin: 0; position: sticky; top: 0; }
/* missions · bag · mail: header row, two-column body, claim-all footer */
.m-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(var(--u) * 4); row-gap: calc(var(--u) * 1); padding: calc(var(--u) * 3.4) calc(var(--u) * 14) calc(var(--u) * 2.4) calc(var(--u) * 5); }
.m-head h2, .mail-sheet .m-head h2 { margin: 0; }
.m-head h2 + .muted { margin: 0; flex: 1 1 auto; }
.m-head .tabs3 { flex: 1 1 calc(var(--u) * 90); max-width: calc(var(--u) * 120); }
.m-body { padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 8); }
.m-body .mlist, .bag-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 80), 1fr)); gap: calc(var(--u) * 2.2); align-items: stretch; }
.bag-packs { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 34), 1fr)); }
.ms-head { display: grid; grid-template-columns: calc(var(--u) * 40) 1fr; column-gap: calc(var(--u) * 5); align-items: center; }
.ms-head .ms-title { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 0.8); }
.ms-head .ms-hint { grid-column: 1; grid-row: 2; }
.ms-head .ms-track { grid-column: 2; grid-row: 1 / span 2; margin-top: calc(var(--u) * 3); }
.m-foot { display: flex; justify-content: center; padding: calc(var(--u) * 2.4) calc(var(--u) * 5) calc(var(--u) * 3.4); }
.m-foot .b3.wide { width: auto; min-width: calc(var(--u) * 60); padding-left: calc(var(--u) * 6); padding-right: calc(var(--u) * 6); }
/* battle pass: season panel on the left, reward track on the right */
.sheet-card.pass-sheet { padding: 0; display: grid; grid-template-columns: calc(var(--u) * 66) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.pass-sheet .pass-hero { grid-column: 1; grid-row: 1 / 3; position: relative; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.pass-sheet .ph-content { padding: calc(var(--u) * 6) calc(var(--u) * 4.4); }
.pass-sheet .ph-top { padding-right: 0; }
.pass-sheet .ph-actions { grid-template-columns: 1fr; }
.pass-sheet .lanes { grid-column: 2; grid-row: 1; margin: 0; padding: calc(var(--u) * 4) calc(var(--u) * 12) calc(var(--u) * 2) calc(var(--u) * 4); }
.pass-sheet .ptrack { grid-column: 2; grid-row: 2; overflow-y: auto; padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 6); scrollbar-width: thin; scrollbar-color: #cfd7e6 transparent; }
.pass-sheet .x { background: rgba(35, 49, 77, 0.07); color: var(--ink); }
.pass-sheet .pr-art { height: calc(var(--u) * 18); }
/* solo adventure: series + progress on the left, chapters scroll on the right */
.sheet-card.adv-sheet { padding: 0; display: grid; grid-template-columns: calc(var(--u) * 74) minmax(0, 1fr); overflow: hidden; }
.adv-sheet .adv-head { min-height: 0; overflow-y: auto; padding: calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 5); background: #fff; box-shadow: 1px 0 0 #e6e9f0; scrollbar-width: none; }
.adv-sheet .adv-track { margin-bottom: 0; }
.adv-sheet .chapters.adv { min-height: 0; overflow-y: auto; padding: calc(var(--u) * 12) calc(var(--u) * 4) calc(var(--u) * 6); scrollbar-width: thin; scrollbar-color: #cfd7e6 transparent; }
/* weekly event: hero + tabs on the left, the tab's content on the right */
.sheet-card.event-sheet { padding: 0; display: grid; grid-template-columns: calc(var(--u) * 70) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
.event-sheet .ev-hero { grid-column: 1; grid-row: 1 / 3; margin: calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 4); min-height: calc(var(--u) * 56); }
.event-sheet .ev-hero p { max-width: none; }
.event-sheet .tabs3 { grid-column: 1; grid-row: 3; align-self: start; margin: 0 calc(var(--u) * 3) 0 calc(var(--u) * 4); }
.event-sheet .ev-body { grid-column: 2; grid-row: 1 / 4; min-height: 0; overflow-y: auto; padding: calc(var(--u) * 12) calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 1); scrollbar-width: thin; scrollbar-color: #cfd7e6 transparent; }
.event-sheet .ev-shop { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 26), 1fr)); }
.event-sheet .ev-item.art { grid-column: 1 / -1; }

/* ---------- modals, level-up, story ---------- */
.modal { --u: var(--su); }
.mbox { width: min(calc(var(--u) * 86), calc(var(--fw) - 24px)); max-height: calc(var(--fh) * 0.94); }
.modal.rewards .mbox { width: min(calc(var(--u) * 112), calc(var(--fw) - 24px)); }
.rw-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 22), 1fr)); }
.lvup { --u: var(--su); }
.lv-body { width: min(calc(var(--u) * 150), calc(var(--fw) - 32px)); max-height: var(--fh); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: calc(var(--u) * 7); row-gap: calc(var(--u) * 2); align-items: center; justify-items: center; }
.lv-title { grid-column: 1; grid-row: 1; }
.lv-avatar { grid-column: 1; grid-row: 2 / 4; width: calc(var(--u) * 34); }
.lv-levels { grid-column: 1; grid-row: 4; }
.lv-rw-head { grid-column: 2; grid-row: 1; align-self: end; }
.lv-rewards { grid-column: 2; grid-row: 2 / 4; }
.lv-next { grid-column: 2; grid-row: 4; }
.lv-tap { grid-column: 1 / -1; grid-row: 5; }
.story { max-width: var(--fw); max-height: var(--fh); }
.st-box { width: min(100%, calc(var(--fh) * 1.2)); justify-self: center; }
.st-stage .st-npc { max-height: calc(var(--fh) * 0.56); }
.st-face { width: calc(var(--fh) * 0.34); max-width: none; margin-bottom: calc(var(--fh) * 0.03); }
.toast { top: calc(calc(var(--vh1) * 50) - var(--fh) * 0.36); }
/* landscape polish: extra offer cards get coloured gradients so their white text reads (matches the home deal strip) */
.offer.daily { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.3), transparent 40%), linear-gradient(135deg, #ff7ac6, #e0368f 55%, #a3175f); }
.offer.event { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.3), transparent 40%), linear-gradient(135deg, #3fd28f, #129a6a 55%, #0b6b4a); }
.offer.levelup { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.3), transparent 40%), linear-gradient(135deg, #8f7bff, #5a43e6 55%, #3a28a8); }
.offer.lucky { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.3), transparent 40%), linear-gradient(135deg, #5ee0c2, #1fb39a 55%, #0f7f6d); }
.offer.collector { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.25), transparent 40%), linear-gradient(135deg, #2a3358, #141a33 70%); }
.offer.daily .of-main > span { color: #a3175f; } .offer.event .of-main > span { color: #0b6b4a; } .offer.levelup .of-main > span { color: #3a28a8; }
.offer.lucky .of-main > span { color: #0f7f6d; } .offer.collector .of-main > span { color: #141a33; }
/* nav rail chip + badges: small, inside the rail item's top-right corner */
.nav button .nav-chip { left: auto; right: calc(var(--u) * 0.3); top: calc(var(--u) * 0.3); transform: none; max-width: calc(100% - var(--u) * 0.6); overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(10px, calc(var(--u) * 1.6), 12px); line-height: 1.3; padding: 1px calc(var(--u) * 0.9); }
.nav-chip.ready { animation: chipBounceLs 1.6s ease-in-out infinite; }
@keyframes chipBounceLs { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -2px; } 90% { translate: 0 0; } }
.nav .badge { top: calc(var(--u) * 0.5); right: calc(var(--u) * 1); }

/* ---------- landscape: "Missions & more" collapses into a round "More" rail button with a dropdown ---------- */
#view-home { grid-template-columns: calc(var(--u) * 45) minmax(0, 1fr); }
#view-home .hc-right { display: none; }
.rb-hub .hub-badge { position: absolute; left: auto; right: calc(var(--u) * 0.6); top: calc(var(--u) * -0.8); min-width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); font-size: calc(var(--u) * 2.1); box-shadow: 0 0 0 calc(var(--u) * 0.45) #fff; }
.rb-hub.open img, .rb-hub:hover img { box-shadow: 0 0 0 calc(var(--u) * 0.6) rgba(79, 123, 255, 0.35); }
.app > .tiles.hub-list { position: absolute; z-index: 60; width: calc(var(--u) * 50); max-height: calc(var(--fh) - var(--u) * 18); margin: 0; flex: none;
  border-radius: calc(var(--u) * 3.4); border: 1px solid #e6ebf4; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(25, 38, 75, 0.28);
  opacity: 0; transform: translateY(calc(var(--u) * -1.5)) scale(0.98); transform-origin: top center; pointer-events: none; transition: opacity 0.18s, transform 0.22s cubic-bezier(.2, .9, .3, 1); }
.app > .tiles.hub-list.open { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- compact battle-mode picker (one button + dropdown) ---------- */
.play-card { position: relative; }
.mode-pick { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.2); width: 100%; min-height: calc(var(--u) * 7); padding: calc(var(--u) * 0.8) calc(var(--u) * 1) calc(var(--u) * 0.8) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2.6); background: #fff; box-shadow: inset 0 0 0 2px #3d6bff, 0 4px 12px rgba(61, 107, 255, 0.15); color: #2b55e6; font-weight: 800; font-size: calc(var(--u) * 2.6); cursor: pointer; }
.mode-pick .mp-cur { display: flex; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; white-space: nowrap; overflow: hidden; }
.mode-pick .mp-cur small { display: none; }
.mode-pick .mp-more { display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.9) calc(var(--u) * 1.6); border-radius: 99px; background: #eef2fb; color: #5a6684; font-size: calc(var(--u) * 2); font-weight: 700; }
.mode-pick .mp-more i { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 0.2s; }
.mode-pick.open .mp-more i { transform: translateY(25%) rotate(-135deg); }
#modes { display: none; }
#modes.open { position: absolute; z-index: 25; left: calc(var(--u) * 1.8); right: calc(var(--u) * 1.8); top: calc(var(--u) * 10); display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 3); background: #fff; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(25, 38, 75, 0.25); animation: uiIn 0.18s ease both; }
#modes.open .mode { display: grid; grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: calc(var(--u) * 1); min-height: calc(var(--u) * 7.4); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.6); text-align: left; font-size: calc(var(--u) * 2.5); }
#modes.open .mode small { grid-column: 1 / -1; font-size: calc(var(--u) * 1.8); font-weight: 500; color: #7a849b; }
#modes.open .mode .mode-emb { grid-row: 1; }

/* ---------- Friends dropdown (js/friends-drop.js) ---------- */
.fd-spin { width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin: calc(var(--u) * 3) auto; border-radius: 50%; border: 3px solid #dfe5f2; border-top-color: #3d6bff; animation: spin 0.8s linear infinite; }
.fd-code { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 2.6); background: linear-gradient(135deg, #eef3ff, #fff); box-shadow: inset 0 0 0 2px #d6e1ff; text-align: left; cursor: pointer; }
.fd-code small { grid-column: 1; font-size: calc(var(--u) * 1.8); color: #6b7590; font-weight: 600; }
.fd-code b { grid-column: 1; font-size: calc(var(--u) * 4.6); font-weight: 900; letter-spacing: 0.06em; color: #1b2540; }
.fd-code i { grid-column: 2; grid-row: 1 / 3; font-style: normal; font-size: calc(var(--u) * 2); font-weight: 700; color: #2b55e6; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.8); border-radius: 99px; background: #fff; box-shadow: 0 2px 8px rgba(43, 85, 230, 0.15); }
.fd-add { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.4); }
.fd-add input { min-width: 0; height: calc(var(--u) * 6.4); padding: 0 calc(var(--u) * 1.8); border: 2px solid #dfe5f2; border-radius: calc(var(--u) * 2); font: inherit; font-size: calc(var(--u) * 2.3); outline: none; }
.fd-add input:focus { border-color: #3d6bff; }
.fd-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 2.4); height: calc(var(--u) * 6.4); border: 0; border-radius: calc(var(--u) * 2); background: linear-gradient(180deg, #4f7bff, #2b55e6); color: #fff; font: inherit; font-weight: 800; font-size: calc(var(--u) * 2.3); text-decoration: none; cursor: pointer; white-space: nowrap; }
.fd-btn.sm { height: calc(var(--u) * 4.8); padding: 0 calc(var(--u) * 1.6); font-size: calc(var(--u) * 2); border-radius: calc(var(--u) * 1.6); }
.fd-btn.ghost { background: #eef2fb; color: #3b4766; }
.fd-btn.wide { width: 100%; margin-top: calc(var(--u) * 1.2); }
.fd-msg { min-height: calc(var(--u) * 2.6); margin: calc(var(--u) * 0.6) 0 0; font-size: calc(var(--u) * 1.9); color: #d93a4a; font-weight: 600; }
.fd-msg.ok { color: #1a9a5c; }
.fd-scroll { max-height: calc(var(--u) * 34); overflow-y: auto; overscroll-behavior: contain; margin-top: calc(var(--u) * 0.4); }
.fd-h { margin: calc(var(--u) * 1.4) 0 calc(var(--u) * 0.6); font-size: calc(var(--u) * 1.8); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #8a94ab; }
.fd-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1) 0; border-top: 1px solid #eef1f6; }
.fd-av { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #ffd36a, #ff8a5b); color: #fff; font-weight: 900; font-size: calc(var(--u) * 2.4); }
.fd-who { display: flex; flex-direction: column; min-width: 0; }
.fd-who b { font-size: calc(var(--u) * 2.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-who small { font-size: calc(var(--u) * 1.8); color: #7a849b; }
.fd-act { display: flex; gap: calc(var(--u) * 0.8); }

.acct-info { display: block; margin-top: calc(var(--u) * 0.6); }
.acct-info small { display: block; font-size: calc(var(--u) * 1.7); line-height: 1.45; color: #6b7590; word-break: break-all; }