/* Lobby — 16:9 landscape app frame (css/landscape.css owns --u / --fw / --fh), light frosted UI matching the battle screen. */
:root {
  --ink: #23314d;
  --ink-2: #5b6785;
  --glass: rgba(255, 255, 255, 0.78);
  --line: rgba(255, 255, 255, 0.95);
  --accent: #2f6bff;
  --gold: #ffc531;
  --teal: #29e0d0;
  --shadow: 0 8px 24px rgba(30, 40, 80, 0.14);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: 'Gilroy', 'M PLUS 1p', 'Segoe UI', system-ui, sans-serif; color: var(--ink); background: #e9edf5; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.hidden { display: none !important; }
h2 { margin: 0 0 6px; font-size: calc(var(--u) * 5.4); font-weight: 800; letter-spacing: -0.01em; }
h3 { margin: calc(var(--u) * 5) 0 calc(var(--u) * 2); font-size: calc(var(--u) * 3.6); font-weight: 800; }
.muted { color: var(--ink-2); font-size: calc(var(--u) * 3.1); margin: 0 0 calc(var(--u) * 3); }
.muted.small { font-size: calc(var(--u) * 2.7); }

.backdrop { position: fixed; inset: 0; background: url('../assets/ui/lobby-bg.webp') center / cover; filter: blur(30px) saturate(1.2); transform: scale(1.1); opacity: 0.7; }
.app { position: fixed; inset: 0; margin: auto; width: var(--fw); height: var(--fh); overflow: hidden; box-shadow: 0 0 40px rgba(20, 30, 60, 0.25);
  background: linear-gradient(180deg, #bfe3ff 0%, #e8f3ff 38%, #f4f6fb 60%, #eef1f8 100%); }
.sky { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: url('../assets/ui/lobby-bg.webp') 50% 30% / cover;
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
.view { position: absolute; left: 0; right: 0; top: calc(var(--u) * 17); bottom: calc(var(--u) * 17); overflow-y: auto; padding: 0 calc(var(--u) * 4) calc(var(--u) * 4); scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }
#view-collection, #view-shop, #view-market { background: linear-gradient(180deg, rgba(244, 246, 251, 0.0), #f4f6fb calc(var(--u) * 8)); }

/* ---------- top bar ---------- */
.topbar { position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 3); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }
.me { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.2) calc(var(--u) * 3) calc(var(--u) * 1.2) calc(var(--u) * 1.2);
  background: var(--glass); border: 1px solid var(--line); border-radius: 99px; backdrop-filter: blur(14px); box-shadow: var(--shadow); text-align: left; }
.avatar { width: calc(var(--u) * 10); aspect-ratio: 1; border-radius: 50%; background-size: 280%; background-position: 50% 24%; box-shadow: 0 0 0 calc(var(--u) * 0.6) #fff, 0 2px 8px rgba(30, 40, 80, 0.25); }
.me-text { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }
.me-text b { font-size: calc(var(--u) * 3.4); font-weight: 800; line-height: 1; }
.lvl { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.lvl em { font-style: normal; font-size: calc(var(--u) * 2.3); font-weight: 800; color: #fff; background: linear-gradient(180deg, #7c5cff, #5a3fe0); padding: 0 calc(var(--u) * 1.4); border-radius: 99px; }
.lvl i { width: calc(var(--u) * 14); height: calc(var(--u) * 1.2); border-radius: 99px; background: rgba(35, 49, 77, 0.12); overflow: hidden; }
.lvl i span { display: block; height: 100%; background: linear-gradient(90deg, #7c5cff, #29e0d0); border-radius: inherit; transition: width 0.6s; }
.wallet { display: flex; gap: calc(var(--u) * 1.2); }
.cur { display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 1) calc(var(--u) * 1.8) calc(var(--u) * 1) calc(var(--u) * 1);
  background: var(--glass); border: 1px solid var(--line); border-radius: 99px; backdrop-filter: blur(14px); box-shadow: var(--shadow); font-size: calc(var(--u) * 2.8); }
.cur b { font-weight: 800; font-variant-numeric: tabular-nums; }
.cur .plus { margin-left: calc(var(--u) * 0.4); width: calc(var(--u) * 4); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: calc(var(--u) * 2.8); line-height: 1; }
.ico { width: calc(var(--u) * 4.2); aspect-ratio: 1; border-radius: 50%; flex: none; }
.ico.coin { background: radial-gradient(circle at 35% 30%, #fff6c6, #ffc531 55%, #d58a00); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.ico.gem { border-radius: 25%; transform: rotate(45deg) scale(0.85); background: linear-gradient(135deg, #e6fbff, #4fc3ff 50%, #2f6bff); }
.ico.ticket { border-radius: 22%; background: linear-gradient(135deg, #ffd6ec, #ff5a8a); }

/* ---------- hero ---------- */
.hero { position: relative; margin-top: calc(var(--u) * 2); height: calc(var(--u) * 56); border-radius: calc(var(--u) * 5); overflow: hidden;
  box-shadow: 0 16px 40px rgba(30, 40, 80, 0.22); background: #2a3e7a; animation: heroIn 0.5s cubic-bezier(.2,.9,.3,1); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 26, 60, 0.75) 0%, rgba(18, 26, 60, 0.15) 70%), linear-gradient(0deg, rgba(18, 26, 60, 0.55), transparent 50%); }
.hero-pack { position: absolute; right: calc(var(--u) * 4); top: 50%; height: 92%; transform: translateY(-50%) rotate(6deg); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); animation: float 4s ease-in-out infinite; }
.hero-copy { position: absolute; left: calc(var(--u) * 5); bottom: calc(var(--u) * 5); width: 52%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.4); color: #fff; }
.hero-copy.wide { width: 80%; }
.hero-copy b { font-size: calc(var(--u) * 6); font-weight: 900; line-height: 1.02; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.hero-copy small { font-size: calc(var(--u) * 2.9); opacity: 0.9; }
.tag { font-size: calc(var(--u) * 2.2); font-weight: 800; letter-spacing: 0.14em; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6); border-radius: 99px; background: var(--gold); color: #4a3000; }
.dots { display: flex; justify-content: center; gap: calc(var(--u) * 1.4); margin: calc(var(--u) * 2.4) 0; }
.dots i { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 99px; background: rgba(35, 49, 77, 0.2); cursor: pointer; transition: width 0.3s, background 0.3s; }
.dots i.on { width: calc(var(--u) * 6); background: var(--accent); }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: calc(var(--u) * 1.8) calc(var(--u) * 4); border-radius: 99px; font-weight: 800; font-size: calc(var(--u) * 3);
  background: linear-gradient(180deg, #3d7bff, #2a5ef0); color: #fff; box-shadow: 0 6px 16px rgba(47, 107, 255, 0.35); transition: transform 0.12s, filter 0.2s; white-space: nowrap; }
.pill:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.pill:active:not(:disabled) { transform: scale(0.97); }
.pill:disabled { opacity: 0.5; cursor: default; }
.pill.ghost { background: rgba(35, 49, 77, 0.07); color: var(--ink); box-shadow: none; }
.pill.big { width: 100%; padding: calc(var(--u) * 3) 0; font-size: calc(var(--u) * 3.8); }

/* ---------- play card ---------- */
.play-card { padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 5); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.4); margin-bottom: calc(var(--u) * 2.4); }
.mode { padding: calc(var(--u) * 1.8) 0; border-radius: calc(var(--u) * 3); font-weight: 700; font-size: calc(var(--u) * 2.6); background: rgba(35, 49, 77, 0.06); color: var(--ink-2); transition: 0.15s; white-space: nowrap; }
.mode.on { background: #fff; color: var(--accent); box-shadow: 0 4px 12px rgba(30, 40, 80, 0.12), inset 0 0 0 2px var(--accent); }
.mode.locked { opacity: 0.55; }
.play-btn { position: relative; width: 100%; padding: calc(var(--u) * 3.6) 0 calc(var(--u) * 3); border-radius: calc(var(--u) * 4); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); color: #fff;
  background: linear-gradient(135deg, #ff7a45, #ff3d6e 50%, #b14bff); box-shadow: 0 12px 30px rgba(255, 61, 110, 0.35); transition: transform 0.12s; }
.play-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); background-size: 250% 100%; animation: sweep 3s ease-in-out infinite; }
.play-btn:active { transform: scale(0.98); }
.play-btn span { font-size: calc(var(--u) * 7); font-weight: 900; letter-spacing: 0.02em; line-height: 1; }
.play-btn small { font-size: calc(var(--u) * 2.8); opacity: 0.92; font-weight: 600; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 2.4); }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 3); text-align: left;
  border-radius: calc(var(--u) * 4); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: var(--shadow); transition: transform 0.15s; }
.tile:hover { transform: translateY(-2px); }
.t-ico { font-size: calc(var(--u) * 6); line-height: 1; margin-bottom: calc(var(--u) * 1); }
.tile b { font-size: calc(var(--u) * 3.3); font-weight: 800; }
.tile small { font-size: calc(var(--u) * 2.6); color: var(--ink-2); }
.badge { position: absolute; right: calc(var(--u) * 2.4); top: calc(var(--u) * 2.4); width: calc(var(--u) * 2.6); aspect-ratio: 1; border-radius: 50%; background: #ff3d6e; box-shadow: 0 0 0 calc(var(--u) * 0.6) #fff; animation: pulse 1.4s infinite; }
.bar { display: block; width: 100%; height: calc(var(--u) * 1.4); border-radius: 99px; background: rgba(35, 49, 77, 0.1); overflow: hidden; margin-top: calc(var(--u) * 1); }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f6bff, #29e0d0); }

/* ---------- bottom nav ---------- */
.nav { position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 5); background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(30, 40, 80, 0.18); }
.nav button { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 1.4) 0; border-radius: calc(var(--u) * 3.4); color: var(--ink-2); font-size: calc(var(--u) * 2.4); font-weight: 700; transition: 0.15s; }
.nav button i { font-style: normal; font-size: calc(var(--u) * 5); line-height: 1; }
.nav button.on { color: var(--accent); background: rgba(47, 107, 255, 0.1); }
.nav button[data-view="packs"] { color: #fff; background: linear-gradient(135deg, #ffb13d, #ff3d6e); box-shadow: 0 6px 16px rgba(255, 61, 110, 0.35); transform: translateY(calc(var(--u) * -2)); }

/* ---------- sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 26, 46, 0.45); backdrop-filter: blur(4px); animation: fadeIn 0.2s; }
.sheet-card { position: relative; width: calc(var(--u) * 100); max-height: calc(var(--vh1) * 82); overflow-y: auto; padding: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0; background: #f7f8fc; box-shadow: 0 -20px 50px rgba(15, 22, 45, 0.3); animation: sheetUp 0.32s cubic-bezier(.2,.9,.3,1); }
.sheet-card.tall { max-height: calc(var(--vh1) * 92); }
.sheet-card .x { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 4); width: calc(var(--u) * 8); aspect-ratio: 1; border-radius: 50%; background: rgba(35, 49, 77, 0.07); font-size: calc(var(--u) * 3.4); }
.list { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.row { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 3.4); background: #fff; box-shadow: 0 4px 14px rgba(30, 40, 80, 0.07); }
.row.done { box-shadow: 0 4px 14px rgba(30, 40, 80, 0.07), inset 0 0 0 2px rgba(41, 224, 208, 0.6); }
.row-main { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); min-width: 0; }
.row-main b { font-size: calc(var(--u) * 3.3); }
.row-main small { color: var(--ink-2); font-size: calc(var(--u) * 2.6); }

/* battle pass */
.buy-prem { width: 100%; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 3.4); font-weight: 800; font-size: calc(var(--u) * 3.4); color: #4a3000; background: linear-gradient(135deg, #ffe27a, #ffb13d); box-shadow: 0 8px 20px rgba(255, 177, 61, 0.4); margin-bottom: calc(var(--u) * 3); }
.prem-on { text-align: center; font-weight: 800; color: #8a5a00; background: #fff3c4; border-radius: 99px; padding: calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * 3); }
.pass-head, .tier { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr 1fr; gap: calc(var(--u) * 1.6); align-items: center; }
.pass-head { font-weight: 800; font-size: calc(var(--u) * 2.6); color: var(--ink-2); margin-bottom: calc(var(--u) * 1.6); }
.pass { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.tnum { width: calc(var(--u) * 8); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(35, 49, 77, 0.08); color: var(--ink-2); font-size: calc(var(--u) * 3); }
.tier.reached .tnum { background: linear-gradient(135deg, #2f6bff, #29e0d0); color: #fff; }
.reward { position: relative; padding: calc(var(--u) * 2.4) calc(var(--u) * 2); border-radius: calc(var(--u) * 3); background: #fff; font-size: calc(var(--u) * 2.5); font-weight: 700; color: var(--ink); text-align: left; box-shadow: 0 3px 10px rgba(30, 40, 80, 0.07); }
.reward.prem { background: linear-gradient(135deg, #fff8dc, #fff); }
.reward.can { box-shadow: 0 0 0 2px var(--teal), 0 0 16px rgba(41, 224, 208, 0.4); animation: pulse 1.6s infinite; }
.reward.claimed { opacity: 0.45; }
.reward i { position: absolute; right: calc(var(--u) * 1.4); top: 50%; transform: translateY(-50%); font-style: normal; }

/* daily gift */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--u) * 1.4); margin: calc(var(--u) * 2) 0; }
.day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: calc(var(--u) * 2) 0; border-radius: calc(var(--u) * 2.4); background: #fff; box-shadow: 0 3px 10px rgba(30, 40, 80, 0.07); }
.day small { font-size: calc(var(--u) * 2.1); color: var(--ink-2); }
.day b { font-size: calc(var(--u) * 5); }
.day.got { background: linear-gradient(180deg, #eaf0ff, #fff); box-shadow: inset 0 0 0 2px rgba(47, 107, 255, 0.35); }
.day.new { animation: pop 0.6s cubic-bezier(.3,1.7,.5,1); box-shadow: inset 0 0 0 2px var(--gold), 0 0 20px rgba(255, 197, 49, 0.5); }
.claimed-msg { text-align: center; font-weight: 800; color: #1f7a4d; }

/* adventure */
.chapters { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.chapter { padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 4); background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 18%, #fff), #fff 70%); box-shadow: 0 4px 14px rgba(30, 40, 80, 0.08); }
.ch-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(var(--u) * 2.4); }
.ch-head b { font-size: calc(var(--u) * 3.6); }
.ch-head small { color: var(--ink-2); font-weight: 700; font-size: calc(var(--u) * 2.6); }
.path { display: flex; align-items: center; }
.link { flex: 1; height: calc(var(--u) * 0.8); background: color-mix(in srgb, var(--cc) 35%, #fff); border-radius: 99px; }
.node { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.node span { width: calc(var(--u) * 10); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: calc(var(--u) * 3.6); color: #fff;
  background: var(--cc); box-shadow: 0 6px 14px color-mix(in srgb, var(--cc) 45%, transparent), inset 0 -3px 0 rgba(0, 0, 0, 0.15); transition: transform 0.15s; }
.node.boss span { width: calc(var(--u) * 12.5); background: linear-gradient(135deg, var(--gold), var(--cc)); }
.node i { font-style: normal; font-size: calc(var(--u) * 2.2); color: var(--gold); letter-spacing: 1px; }
.node:hover:not(:disabled) span { transform: scale(1.08); }
.node.locked span { background: #c9cfdc; box-shadow: none; }
.node.locked i { color: #c9cfdc; }
.node.cleared span { box-shadow: 0 0 0 calc(var(--u) * 0.6) #fff, 0 6px 14px color-mix(in srgb, var(--cc) 45%, transparent); }

/* collection */
.view-head { display: flex; align-items: baseline; justify-content: space-between; padding-top: calc(var(--u) * 3); }
.filters { display: flex; gap: calc(var(--u) * 1.2); overflow-x: auto; padding: calc(var(--u) * 1) 0 calc(var(--u) * 3); scrollbar-width: none; }
.chipf { flex: none; padding: calc(var(--u) * 1.4) calc(var(--u) * 3); border-radius: 99px; background: #fff; font-weight: 700; font-size: calc(var(--u) * 2.6); color: var(--ink-2); box-shadow: 0 2px 8px rgba(30, 40, 80, 0.06); }
.chipf.on { background: var(--accent); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); }
.cc { position: relative; border-radius: 4.6% / 3.3%; overflow: hidden; box-shadow: 0 4px 12px rgba(30, 40, 80, 0.15); cursor: pointer; transition: transform 0.15s; animation: pop 0.3s both; }
.cc:hover { transform: translateY(-3px) scale(1.02); }
.cc img { width: 100%; display: block; }
.cc b { position: absolute; right: 6%; bottom: 4%; background: rgba(255, 255, 255, 0.92); border-radius: 99px; padding: 0 calc(var(--u) * 1.4); font-size: calc(var(--u) * 2.4); }
.empty-state { text-align: center; padding: calc(var(--u) * 14) 0; color: var(--ink-2); }
.big-card { display: block; width: 62%; margin: 0 auto calc(var(--u) * 3); border-radius: 4.6% / 3.3%; box-shadow: 0 16px 40px rgba(30, 40, 80, 0.3); }
.sheet-card h2 + .muted { margin-bottom: calc(var(--u) * 3); }

/* shop */
.first-buy { padding: calc(var(--u) * 2.4) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: linear-gradient(135deg, #fff3c4, #ffe0ec); font-size: calc(var(--u) * 2.9); margin: calc(var(--u) * 2) 0; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 2); }
.gem-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 3);
  border-radius: calc(var(--u) * 4); background: #fff; box-shadow: 0 6px 18px rgba(30, 40, 80, 0.1); transition: transform 0.15s; }
.gem-pack:hover { transform: translateY(-3px); }
.gem-art { width: calc(var(--u) * 12); aspect-ratio: 1; border-radius: 25%; transform: rotate(45deg); margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); background: linear-gradient(135deg, #e6fbff, #4fc3ff 50%, #2f6bff); box-shadow: 0 10px 24px rgba(47, 107, 255, 0.35), inset 0 3px 6px rgba(255, 255, 255, 0.7); }
.gem-pack b { font-size: calc(var(--u) * 3.6); }
.gem-pack small { color: var(--ink-2); font-size: calc(var(--u) * 2.5); }
.price { margin-top: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.2) calc(var(--u) * 4); border-radius: 99px; background: var(--accent); color: #fff; font-weight: 800; font-size: calc(var(--u) * 2.8); }
.bonus { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); font-style: normal; font-size: calc(var(--u) * 2.2); font-weight: 800; color: #fff; background: #ff3d6e; padding: 0 calc(var(--u) * 1.4); border-radius: 99px; }

/* market */
.market { display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); }
.listing { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 3.4); background: #fff; box-shadow: 0 4px 14px rgba(30, 40, 80, 0.07); }
.listing > img { width: calc(var(--u) * 12); border-radius: 6% / 4.3%; box-shadow: 0 3px 8px rgba(30, 40, 80, 0.2); }
.listing > div { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.listing b { font-size: calc(var(--u) * 3.1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing small { color: var(--ink-2); font-size: calc(var(--u) * 2.5); }
.listing.sold { opacity: 0.5; }

/* onboarding */
.name-in { width: 100%; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 3); border: 2px solid rgba(35, 49, 77, 0.1); font: inherit; font-size: calc(var(--u) * 3.6); font-weight: 700; color: var(--ink); outline: none; margin-bottom: calc(var(--u) * 3); background: #fff; }
.name-in:focus { border-color: var(--accent); }
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.4); margin-bottom: calc(var(--u) * 4); }
.partner { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * 2) 0; border-radius: calc(var(--u) * 3.4); background: #fff; box-shadow: 0 4px 12px rgba(30, 40, 80, 0.08); transition: 0.15s; }
.partner span { width: calc(var(--u) * 16); aspect-ratio: 1; border-radius: 50%; background-size: 280%; background-position: 50% 24%; }
.partner small { font-weight: 700; font-size: calc(var(--u) * 2.6); }
.partner.on { box-shadow: 0 0 0 3px var(--accent), 0 8px 20px rgba(47, 107, 255, 0.25); transform: translateY(-2px); }

/* feedback */
.toast { position: fixed; left: 50%; top: 14%; transform: translate(-50%, -10px); opacity: 0; z-index: 30; pointer-events: none; background: rgba(38, 46, 66, 0.92); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 99px; transition: 0.22s; max-width: calc(var(--vw1) * 86); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.celebrate { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; animation: fadeIn 0.2s; }
.celebrate b { position: relative; font-size: clamp(36px, calc(var(--vh1) * 8), 72px); font-weight: 900; color: #fff; -webkit-text-stroke: 3px var(--accent); paint-order: stroke; animation: pop 0.5s cubic-bezier(.3,1.7,.5,1); }
.celebrate small { position: relative; font-weight: 700; color: var(--ink); background: #fff; padding: 6px 14px; border-radius: 99px; }
.cel-burst { position: absolute; width: calc(var(--vh1) * 60); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(79, 195, 255, 0.4) 40%, transparent 65%); animation: burst 0.9s ease-out forwards; }

@keyframes float { 50% { translate: 0 calc(var(--u) * -2); } }
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes pulse { 50% { filter: brightness(1.15); } }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(40%); } }
@keyframes heroIn { from { transform: translateY(12px); opacity: 0; } }
@keyframes burst { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }