/* ───── app chrome ───── */
.boot { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: var(--bg); }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 5px solid rgba(255,255,255,.14); border-top-color: var(--sun); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: .01em; }
.logo-mark { width: 38px; height: 38px; filter: drop-shadow(0 4px 12px rgba(139,92,246,.6)); transition: transform .3s var(--spring); }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.08); }
.logo-text { background: linear-gradient(90deg, #fff, #d9ccff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.topbar { position: sticky; top: 0; z-index: 90; height: calc(var(--topbar-h) + var(--safe-t)); padding: var(--safe-t) clamp(12px, 3vw, 32px) 0; display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(11,10,36,.92), rgba(11,10,36,.72)); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line); }
.toplinks { display: flex; gap: 4px; margin-left: 18px; }
.toplinks a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; font-weight: 800; color: var(--muted); transition: .2s; }
.toplinks a:hover { color: #fff; background: rgba(255,255,255,.07); }
.toplinks a.on { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px var(--line2); }
.mechip { display: flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; border-radius: 99px; background: rgba(255,255,255,.07); font-weight: 800; transition: background .2s; max-width: 220px; }
.mechip:hover { background: rgba(255,255,255,.14); }
.mechip .mename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar { display: none; }
body[data-layout="bare"] .topbar, body[data-layout="bare"] .tabbar, body[data-layout="game"] .topbar, body[data-layout="game"] .tabbar { display: none !important; }
#view { min-height: calc(100dvh - var(--topbar-h)); outline: none; }
body[data-layout="bare"] #view, body[data-layout="game"] #view { min-height: 100dvh; }
.view-in { animation: viewIn .5s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } }
.page { width: min(100%, 1240px); margin: 0 auto; padding: 24px clamp(14px, 3vw, 32px) 80px; }
.page.narrow { max-width: 760px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(30px, 5vw, 44px); }
.kicker { display: inline-block; font-weight: 900; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); margin-bottom: 6px; }
.small { font-size: 13px; } .center { text-align: center; }
.ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grouphead { font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.frow { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; transition: background .2s; }
.frow:hover { background: rgba(255,255,255,.06); }
.notif { display: flex; gap: 12px; padding: 12px; border-radius: 18px; margin-bottom: 6px; }
.notif.unread { background: rgba(139,92,246,.16); box-shadow: inset 0 0 0 1px rgba(139,92,246,.4); }
.notif .ni { font-size: 26px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.08); border-radius: 14px; flex: none; }
.ftile { flex: none; width: 150px; padding: 16px 12px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ftile b, .ftile small { max-width: 100%; }
.friends-empty { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.friends-empty > div:nth-child(2) { flex: 1; min-width: 200px; }
.fe-avs { display: flex; } .fe-avs .av { margin-left: -14px; box-shadow: 0 0 0 4px var(--bg2); } .fe-avs .av:first-child { margin: 0; }
.fe0 { animation: bob 3s ease-in-out infinite; } .fe1 { animation: bob 3s .4s ease-in-out infinite; } .fe2 { animation: bob 3s .8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ───── hub hero ───── */
.hero { --accent: var(--grape); --px: 0; --py: 0; position: relative; overflow: hidden; border-radius: var(--r-xl); min-height: clamp(300px, 42vw, 440px); display: flex; align-items: center; isolation: isolate; box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 0 0 1px var(--line2); animation: rise .6s var(--ease) both; }
.hero-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(34px) saturate(1.4) brightness(.7); z-index: -3; transform: translate(calc(var(--px) * -14px), calc(var(--py) * -10px)); }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(11,10,36,.92) 0%, rgba(11,10,36,.55) 45%, rgba(11,10,36,0) 75%); }
.hero-art { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; width: 62%; object-fit: cover; z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); transform: translate(calc(var(--px) * 12px), calc(var(--py) * 8px)) scale(1.04); transition: transform .3s ease-out; }
.hero-copy { padding: clamp(22px, 4vw, 52px); max-width: 560px; }
.hero-copy h1 { font-size: clamp(36px, 6vw, 68px); margin: 12px 0 10px; text-shadow: 0 6px 30px rgba(0,0,0,.4); }
.hero-copy p { color: #dcdcff; font-size: clamp(15px, 2vw, 19px); max-width: 440px; }
.hero-meta { margin-top: 16px; gap: 8px; flex-wrap: wrap; }
.hero-tag { background: linear-gradient(135deg, var(--sun), var(--orange)); color: #3a2600; letter-spacing: .12em; }
.hero-tag svg { width: 15px; height: 15px; }
.hero-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dots button { width: 9px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.35); transition: .3s var(--spring); }
.hero-dots button.on { width: 28px; background: #fff; }
.cats { padding-top: 0; }

/* ───── library ───── */
.lib-tools { flex-wrap: wrap; }
.searchbox { position: relative; } .searchbox .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.searchbox .input { padding-left: 42px; width: min(100%, 260px); height: 44px; }

/* ───── game detail ───── */
.gd-hero { --accent: var(--grape); position: relative; border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: clamp(18px, 3vw, 36px); isolation: isolate; box-shadow: inset 0 0 0 1px var(--line2), 0 30px 70px -34px color-mix(in srgb, var(--accent) 80%, transparent); }
.gd-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(38px) brightness(.55) saturate(1.5); z-index: -2; }
.gd-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,10,36,.2), rgba(11,10,36,.55)); }
.gd-back { position: absolute; left: 14px; top: 14px; z-index: 3; background: rgba(12,10,48,.55); backdrop-filter: blur(8px); }
.gd-art { order: 2; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/10; box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.2); transform: rotate(1.5deg); transition: transform .5s var(--spring); }
.gd-hero:hover .gd-art { transform: rotate(0) scale(1.02); }
.gd-art img { width: 100%; height: 100%; object-fit: cover; }
.gd-copy { padding-top: 34px; }
.gd-copy h1 { font-size: clamp(34px, 5vw, 56px); margin: 12px 0 8px; }
.gd-copy p { color: #e0e0ff; font-size: 18px; max-width: 520px; }
.pill.soft { background: rgba(255,255,255,.06); font-weight: 700; }
.gd-play { margin-top: 20px; }
.gd-solo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 16px; }
.mm-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; border-radius: var(--r-lg); text-align: left; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line); transition: transform .25s var(--spring), background .2s, box-shadow .2s; }
.mm-opt:hover:not([disabled]) { transform: translateY(-4px); background: rgba(255,255,255,.12); }
.mm-opt[disabled] { opacity: .45; cursor: not-allowed; }
.mm-opt b { font: 600 21px var(--display); } .mm-opt small { color: var(--muted); font-weight: 700; }
.mm-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 8px; }
.mm-ic svg { width: 26px; height: 26px; }
.mm-opt.quick .mm-ic { background: linear-gradient(135deg, var(--coral), var(--orange)); box-shadow: 0 8px 20px -6px rgba(255,93,115,.7); }
.mm-opt.create .mm-ic { background: linear-gradient(135deg, var(--grape), var(--pink)); box-shadow: 0 8px 20px -6px rgba(139,92,246,.7); }
.mm-opt.friend .mm-ic { background: linear-gradient(135deg, var(--sky), var(--mint)); box-shadow: 0 8px 20px -6px rgba(56,182,255,.7); }
.gd-joinbox { margin-top: 16px; padding: 16px; border-radius: var(--r); background: rgba(0,0,0,.2); }
.ach-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ach { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); opacity: .7; }
.ach > div:nth-child(2) { flex: 1; min-width: 0; }
.ach.done { opacity: 1; background: linear-gradient(135deg, rgba(255,201,51,.14), rgba(255,138,61,.08)); box-shadow: inset 0 0 0 1px rgba(255,201,51,.35); }
.ach-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,.08); flex: none; }

/* ───── profile ───── */
.p-hero { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 4vw, 48px); align-items: center; padding: clamp(18px, 3vw, 36px); border-radius: var(--r-xl); background: radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,.4), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px var(--line2); }
.p-stage { position: relative; width: clamp(150px, 26vw, 250px); aspect-ratio: 120 / 200; }
.p-av { width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.4)); animation: bob 4s ease-in-out infinite; }
.p-pet { position: absolute; right: -44%; bottom: 0; width: 62%; }
.p-info h1 { font-size: clamp(30px, 5vw, 46px); }
.lvl { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; max-width: 460px; }
.lvl .progress { flex: 1; } .lvl-badge { font-family: var(--display); background: linear-gradient(135deg, var(--sun), var(--orange)); color: #3a2400; padding: 6px 14px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.pstat { padding: 16px 18px; border-radius: var(--r-lg); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pstat small { color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.pstat b { font: 600 clamp(20px, 3vw, 28px) var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.recent-i { --accent: var(--grape); flex: none; width: 170px; border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--spring); }
.recent-i:hover { transform: translateY(-4px); } .recent-i img { aspect-ratio: 16/10; width: 100%; object-fit: cover; } .recent-i b { display: block; padding: 10px 12px; font-size: 14px; }

/* ───── avatar editor ───── */
.ae-grid { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 22px; align-items: start; }
.ae-left { position: sticky; top: calc(var(--topbar-h) + 14px); }
.ae-stage { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-xl); display: grid; place-items: center; padding: 18px 40px; background: radial-gradient(70% 55% at 50% 78%, rgba(139,92,246,.55), transparent 70%), linear-gradient(180deg, var(--surface2), var(--surface)); box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; }
.ae-stage > svg.kv-avatar { height: 100%; width: auto; filter: drop-shadow(0 16px 20px rgba(0,0,0,.35)); animation: bob 4s ease-in-out infinite; }
.ae-pet { position: absolute; right: 8px; bottom: 14px; width: 30%; }
.ae-actions { margin-top: 14px; justify-content: space-between; flex-wrap: wrap; }
.ae-tabs { margin-bottom: 14px; }
.ae-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.opt { position: relative; border-radius: 20px; padding: 8px 6px 8px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .2s var(--spring), background .2s; }
.opt:hover { transform: translateY(-3px); background: rgba(255,255,255,.11); }
.opt.on { background: rgba(139,92,246,.28); box-shadow: inset 0 0 0 3px var(--sun); }
.opt-art { width: 100%; aspect-ratio: 1; display: grid; place-items: center; } .opt-art svg { height: 100%; width: 100%; }
.opt small { font-weight: 800; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.15; min-height: 28px; }
.opt.locked .opt-art { opacity: .5; filter: grayscale(.6); }
.opt-lock { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; background: rgba(12,10,48,.8); backdrop-filter: blur(4px); padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 900; }
.opt-lock svg { width: 12px; height: 12px; }
.ae-colors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ae-colors:empty { display: none; }
.swatch { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.3); transition: transform .2s var(--spring); }
.swatch.big { width: 64px; height: 64px; } .swatch:hover { transform: scale(1.12); } .swatch.on { box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px var(--sun); }
.buy-prev { width: 150px; height: 150px; margin: 0 auto 10px; }

/* ───── store ───── */
.store-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: clamp(20px, 3vw, 34px); border-radius: var(--r-xl); background: radial-gradient(90% 160% at 100% 0%, rgba(255,201,51,.28), transparent 60%), radial-gradient(80% 140% at 0% 100%, rgba(255,93,115,.22), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line2); }
.store-hero h1 { font-size: clamp(32px, 5vw, 50px); } .store-hero p { color: var(--muted); max-width: 520px; margin-top: 6px; }
.stars-pill.big { height: 60px; font-size: 28px; padding: 0 24px 0 14px; } .stars-pill.big .st { width: 38px; height: 38px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 16px; }
.scard { --rc: var(--line2); position: relative; display: flex; flex-direction: column; text-align: left; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 2px var(--rc); padding: 12px; gap: 8px; transition: transform .3s var(--spring), box-shadow .3s; overflow: hidden; }
.scard:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--rc), 0 18px 36px -14px var(--rc); }
.scard.r-rare { --rc: rgba(56,182,255,.75); } .scard.r-epic { --rc: rgba(178,124,255,.85); } .scard.r-legendary { --rc: rgba(255,201,51,.95); }
.scard.r-legendary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 66%); transform: translateX(-100%); animation: shine 3.4s infinite; pointer-events: none; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.sc-art { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.12), rgba(255,255,255,.02)); display: grid; place-items: center; padding: 8px; }
.ipreview { width: 100%; height: 100%; display: grid; place-items: center; } .ipreview svg { width: 100%; height: 100%; }
.sc-art .ipreview { position: absolute; inset: 8px; width: auto; height: auto; }
.ipreview.emojibox .emoji { font-size: clamp(44px, 7vw, 64px); filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.ipreview.lg { width: 150px; height: 150px; } .ipreview.lg .emoji { font-size: 84px; }
.sc-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .sc-info b { font-size: 15px; line-height: 1.2; }
.sc-price { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 12px; font: 600 18px var(--display); background: rgba(255,201,51,.16); color: #ffe08a; }
.sc-price .st { width: 20px; height: 20px; } .sc-price svg.ico { width: 18px; height: 18px; }
.sc-price.cant { background: rgba(255,255,255,.07); color: var(--muted); } .sc-price.own { background: rgba(43,227,176,.16); color: var(--mint); } .sc-price.reward { background: rgba(139,92,246,.22); color: #cdb8ff; }

/* ───── settings / parent ───── */
.srow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .srow:last-child { border: 0; }
.ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-weight: 700; } .ticks li svg { color: var(--mint); margin-top: 2px; }
.gate { max-width: 420px; margin: 40px auto; padding: 32px 26px; } .gate-ic { width: 72px; height: 72px; border-radius: 24px; background: linear-gradient(135deg, var(--grape), var(--sky)); display: grid; place-items: center; margin: 0 auto 14px; } .gate-ic svg { width: 36px; height: 36px; }
.gate h2 { margin-bottom: 6px; } .gate .input { margin-top: 18px; }
.usage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .usage .card { display: flex; flex-direction: column; } .usage b { font: 600 30px var(--display); }
.prow { display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .prow:last-child { border: 0; }
.p-ic { width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.08); display: grid; place-items: center; flex: none; }
.p-txt { flex: 1 1 200px; min-width: 0; } .p-ctl { flex: none; max-width: 100%; }
.field { display: grid; gap: 4px; }

/* ───── landing ───── */
.landing { position: relative; overflow: hidden; }
.l-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: calc(var(--safe-t) + 16px) clamp(16px, 4vw, 48px); }
.l-link { color: var(--muted); font-weight: 800; padding: 8px 12px; border-radius: 12px; } .l-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.l-hero { width: min(100%, 1240px); margin: 0 auto; min-height: min(100dvh, 860px); padding: 120px clamp(16px, 4vw, 48px) 60px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.l-title { display: flex; flex-direction: column; font-size: clamp(54px, 10vw, 118px); line-height: .92; letter-spacing: .01em; margin: 16px 0 18px; }
.l-title span { display: block; background-clip: text; -webkit-background-clip: text; color: transparent; animation: rise .8s var(--ease) both; filter: drop-shadow(0 8px 24px rgba(0,0,0,.25)); }
.w1 { background-image: linear-gradient(90deg, #ff5d73, #ff8a3d); } .w2 { background-image: linear-gradient(90deg, #38b6ff, #2be3b0); animation-delay: .12s !important; } .w3 { background-image: linear-gradient(90deg, #a77bff, #ff7bd5); animation-delay: .24s !important; }
.l-sub { font-size: clamp(18px, 2.4vw, 24px); color: #d6d6ff; max-width: 480px; font-weight: 700; }
.l-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.l-trust { display: flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--muted); font-weight: 800; font-size: 14px; } .l-trust svg { color: var(--mint); }
.l-hero-art { position: relative; height: clamp(340px, 46vw, 560px); }
.float-card { --accent: var(--grape); position: absolute; width: 56%; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.18), 0 0 60px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.float-card img { aspect-ratio: 16/10; width: 100%; object-fit: cover; } .float-card span { display: block; padding: 10px 14px; font: 600 17px var(--display); }
.float-card.f0 { right: 2%; top: 2%; transform: rotate(5deg); animation: floatA 7s ease-in-out infinite; } .float-card.f1 { left: 0; top: 30%; transform: rotate(-6deg); animation: floatB 8s ease-in-out infinite; z-index: 2; } .float-card.f2 { right: 6%; bottom: 0; transform: rotate(3deg); animation: floatA 9s 1s ease-in-out infinite; z-index: 3; width: 48%; }
@keyframes floatA { 50% { transform: translateY(-14px) rotate(3deg); } } @keyframes floatB { 50% { transform: translateY(12px) rotate(-3deg); } }
.float-av { position: absolute; width: 22%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.4)); z-index: 4; } .float-av.a1 { left: -2%; bottom: 2%; animation: bob 4s ease-in-out infinite; } .float-av.a2 { right: -3%; top: 40%; animation: bob 5s .6s ease-in-out infinite; }
.float-star { position: absolute; z-index: 1; } .float-star .st { width: 40px; height: 40px; } .float-star.s1 { left: 36%; top: -2%; animation: bob 3s infinite; } .float-star.s2 { left: 4%; top: 14%; animation: bob 4s 1s infinite; transform: scale(.7); } .float-star.s3 { right: 40%; bottom: 8%; animation: bob 3.5s .5s infinite; transform: scale(.85); }
.l-sec { width: min(100%, 1240px); margin: 0 auto; padding: 56px clamp(16px, 4vw, 48px); }
.l-sec-head { margin-bottom: 22px; } .l-sec-head h2, .l-split h2, .l-cta-band h2 { font-size: clamp(30px, 4.5vw, 48px); } .l-sec-head.center { text-align: center; }
.l-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; } .l-split.rev .l-split-copy { order: 0; }
.l-split-copy p { color: var(--muted); font-size: 18px; margin-top: 12px; max-width: 480px; font-weight: 600; }
.friends-art { position: relative; height: 340px; border-radius: var(--r-xl); background: radial-gradient(80% 80% at 50% 100%, rgba(56,182,255,.35), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; }
.room-chip { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); text-align: center; padding: 8px 22px; border-radius: 18px; background: rgba(0,0,0,.35); } .room-chip small { display: block; font-size: 10px; letter-spacing: .2em; color: var(--muted); font-weight: 900; } .room-chip b { font: 700 30px var(--display); letter-spacing: .14em; color: var(--sun); }
.lobby-av { position: absolute; bottom: 0; width: 28%; animation: bob 4s ease-in-out infinite; } .l0 { left: 4%; } .l1 { left: 26%; animation-delay: .5s; bottom: 6px; } .l2 { left: 48%; animation-delay: 1s; } .l3 { left: 68%; animation-delay: 1.5s; bottom: 6px; }
.bubble { position: absolute; background: #fff; color: #1b1b45; font-weight: 900; padding: 6px 14px; border-radius: 16px; box-shadow: 0 8px 18px rgba(0,0,0,.35); animation: bob 3s ease-in-out infinite; } .b1 { left: 8%; top: 36%; } .b2 { left: 52%; top: 30%; font-size: 22px; } .b3 { right: 6%; top: 46%; }
.cc-art { position: relative; height: 420px; display: grid; place-items: center; } .cc-glow { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.6), transparent 65%); animation: pulse 4s ease-in-out infinite; } @keyframes pulse { 50% { transform: scale(1.12); opacity: .8; } }
.cc-stage { position: relative; height: 100%; } .cc-stage svg { height: 100%; width: auto; filter: drop-shadow(0 20px 24px rgba(0,0,0,.4)); animation: bob 4s ease-in-out infinite; }
.cc-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.one-flow { display: grid; grid-template-columns: 1fr 70px 1.2fr; align-items: center; gap: 10px; }
.one-core { text-align: center; } .one-av { width: 130px; margin: 0 auto 10px; } .one-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.one-lines { height: 4px; background: repeating-linear-gradient(90deg, var(--sun) 0 10px, transparent 10px 20px); background-size: 20px 4px; animation: dash 1s linear infinite; border-radius: 4px; } @keyframes dash { to { background-position: 20px 0; } }
.one-games { display: grid; gap: 12px; } .one-game { --accent: var(--grape); display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } .one-game img { width: 84px; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; } .one-game span { font: 600 18px var(--display); }
.l-cta-band { text-align: center; margin: 30px auto 0; padding: 60px 20px 70px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: radial-gradient(60% 120% at 50% 100%, rgba(255,93,115,.3), transparent 70%); } .l-cta-band p { color: var(--muted); margin-bottom: 14px; font-size: 18px; font-weight: 700; }
.l-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px clamp(16px, 4vw, 48px) calc(var(--safe-b) + 28px); color: var(--faint); font-weight: 700; font-size: 14px; border-top: 1px solid var(--line); }

/* ───── who's playing ───── */
.login { min-height: 100dvh; display: flex; flex-direction: column; } .login-top { display: flex; align-items: center; padding: calc(var(--safe-t) + 16px) clamp(16px, 4vw, 40px); }
.login-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 16px 60px; } .login-main h1 { font-size: clamp(34px, 6vw, 56px); margin-bottom: 6px; }
.who-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 30px; max-width: 760px; }
.who-tile { position: relative; } .who-btn { width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 16px; border-radius: var(--r-lg); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--spring), background .2s; } .who-btn:hover { transform: translateY(-6px) scale(1.04); background: rgba(255,255,255,.12); }
.who-av { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, var(--surface3), var(--surface)); margin-bottom: 6px; display: grid; place-items: center; } .who-av svg { width: 100%; height: 100%; } .who-av.plus { background: linear-gradient(135deg, var(--coral), var(--orange)); } .who-av.plus svg { width: 50px; height: 50px; }
.who-x { position: absolute; top: -8px; right: -8px; width: 34px; height: 34px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); } .who-x svg { width: 18px; height: 18px; }

/* ───── game host ───── */
.play-root { position: fixed; inset: 0; background: #000; }
.play-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); touch-action: none; }
.play-loader { --accent: var(--grape); position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); transition: opacity .5s; z-index: 2; overflow: hidden; } .play-loader.out { opacity: 0; pointer-events: none; }
.play-loader > img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(40px) brightness(.45) saturate(1.6); } .pl-card { position: relative; text-align: center; display: grid; gap: 10px; justify-items: center; } .pl-card h2 { font-size: 34px; }
.play-handle { position: absolute; z-index: 3; right: 0; top: 38%; width: 30px; height: 62px; border-radius: 18px 0 0 18px; background: rgba(12,10,48,.55); backdrop-filter: blur(8px); display: grid; place-items: center; opacity: .55; transition: .25s; padding-right: env(safe-area-inset-right); box-sizing: content-box; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); } .play-handle:hover, .play-handle:active { opacity: 1; width: 40px; } .play-handle svg { width: 20px; height: 20px; }
.pmenu { display: grid; gap: 10px; } .pm-stars { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(255,201,51,.12); font-size: 22px; font-family: var(--display); } .pm-stars .st { width: 30px; height: 30px; }
.pm-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.07); text-align: left; font-size: 18px; transition: .2s; } .pm-item:hover { background: rgba(255,255,255,.14); } .pm-item.primary { background: linear-gradient(135deg, var(--coral), var(--orange)); }
.phrases { display: flex; flex-wrap: wrap; gap: 8px; } .emotes { display: flex; flex-wrap: wrap; gap: 8px; } .emote { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.08); font-size: 30px; transition: transform .2s var(--spring); } .emote:hover { transform: scale(1.12); background: rgba(255,255,255,.16); }

/* ───── admin ───── */
.admin { max-width: 1100px; margin: 0 auto; padding: 20px 16px 80px; } .ad-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } .stat { display: flex; flex-direction: column; } .stat b { font: 600 34px var(--display); }
.tablewrap { overflow-x: auto; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } th { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ad-game { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; padding: 14px; } .ad-game img { width: 120px; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; } .agi { flex: 1 1 200px; min-width: 0; }
select.input { appearance: none; padding-right: 14px; }

/* ───── responsive ───── */
@media (max-width: 960px) {
  .l-hero, .l-split, .gd-hero, .ae-grid, .p-hero { grid-template-columns: 1fr; }
  .l-hero { padding-top: 96px; min-height: 0; } .l-hero-art { height: 360px; order: -1; margin-top: 10px; }
  .l-split.rev .l-split-copy { order: 2; } .gd-art { order: 0; transform: none; } .gd-copy { padding-top: 0; }
  .ae-left { position: static; } .ae-stage { aspect-ratio: 5/4; padding: 12px; } .pstats { grid-template-columns: repeat(2, 1fr); }
  .p-hero { justify-items: center; text-align: center; } .p-info .row, .lvl { justify-content: center; margin-left: auto; margin-right: auto; } .p-stage { width: 190px; }
  .one-flow { grid-template-columns: 1fr; } .one-lines { height: 40px; width: 4px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--sun) 0 10px, transparent 10px 20px); }
}
@media (max-width: 720px) {
  :root { --topbar-h: 60px; }
  .toplinks, .gear, .mechip .mename, .topbar .logo-text { display: none; }
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; } .mechip { padding: 3px; } .stars-pill { height: 40px; font-size: 16px; padding-right: 12px; }
  .topbar > .iconbtn[aria-label="Friends"] { display: none; } .topbar > .spacer { flex: 1; }
  #view { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 95; left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px); height: var(--tabbar-h); padding: 6px; border-radius: 26px; background: rgba(24,23,70,.88); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 0 0 1px var(--line2); }
  .tab-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 20px; color: var(--muted); font-size: 11px; font-weight: 800; transition: .25s var(--spring); } .tab-item .ti-ico svg { width: 24px; height: 24px; }
  .tab-item.on { color: #fff; background: linear-gradient(135deg, rgba(139,92,246,.7), rgba(255,93,115,.55)); transform: translateY(-4px); box-shadow: 0 10px 20px -8px rgba(139,92,246,.9); } .tab-item .badge { top: 2px; right: 14px; }
  body[data-layout="game"] .tabbar { display: none; }
  .page { padding-top: 14px; } .hero { min-height: 360px; align-items: flex-end; border-radius: var(--r-lg); } .hero-shade { background: linear-gradient(180deg, rgba(11,10,36,.1) 0%, rgba(11,10,36,.92) 70%); } .hero-art { width: 100%; height: 62%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .hero-copy { padding: 20px 18px 28px; } .hero-dots { bottom: 8px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; } .gcard .desc { display: none; } .gcard .info { padding: 10px 12px 12px; } .gcard h3 { font-size: 16px; } .gcard .meta { font-size: 12px; margin-top: 6px; } .gcard .cat { transform: scale(.85); transform-origin: left top; left: 8px; top: 8px; } .gcard .fav { width: 34px; height: 34px; right: 6px; top: 6px; } .gcard .playchip { display: none; }
  .gcard.compact { width: 200px; } .mm { grid-template-columns: 1fr; } .mm-opt { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; } .mm-ic { margin: 0; } .mm-opt b { flex: 1; } .mm-opt small { flex-basis: 100%; margin-top: -10px; padding-left: 62px; }
  .store-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ae-options { grid-template-columns: repeat(3, 1fr); gap: 8px; } .opt small { font-size: 11px; }
  .l-title { font-size: clamp(52px, 17vw, 84px); } .l-hero-art { height: 300px; } .friends-art { height: 300px; } .cc-art { height: 340px; }
  .grid.two { grid-template-columns: 1fr; } .who-btn { width: 132px; } .who-av { width: 92px; height: 92px; } .who-grid { gap: 14px; }
  .usage { grid-template-columns: 1fr 1fr; } .p-ctl { width: 100%; } .p-ctl .seg { width: 100%; } .p-ctl .seg button { flex: 1; padding: 9px 6px; }
}
@media (hover: none) { .gcard:hover { transform: none; } .scard:hover, .opt:hover, .btn:hover { transform: none; } }

.l-sec .grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 900px) { .l-sec .grid { grid-template-columns: repeat(3, 1fr); } }

/* overflow guards */
.ae-grid > *, .gd-hero > *, .p-hero > *, .l-split > *, .l-hero > * { min-width: 0; }
.l-link { white-space: nowrap; }
@media (max-width: 960px) { .ae-stage { aspect-ratio: auto; height: min(52vh, 380px); } .ae-stage > svg.kv-avatar { max-width: 100%; } }
@media (max-width: 720px) {
  .hero { min-height: 470px; } .hero-art { height: 48%; } .hero-copy { padding-top: 0; }
  .gcard .meta { flex-wrap: wrap; row-gap: 2px; } .gcard .meta > span:nth-child(2) { display: none; }
}

.mm-opt.solo .mm-ic { background: linear-gradient(135deg, var(--mint), var(--sky)); box-shadow: 0 8px 20px -6px rgba(43,227,176,.7); }

/* ───── meeting-point plaza ───── */
.lobby-root { position: fixed; inset: 0; background: radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--accent) 35%, #1b1a5a) 0%, #12113a 55%, #0b0a24 100%); overflow: hidden; }
.lobby-canvas { position: absolute; inset: 0; touch-action: none; cursor: pointer; }
.lobby-top { position: absolute; top: calc(var(--safe-t) + 10px); left: 10px; right: 10px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.lobby-top > * { pointer-events: auto; }
.lobby-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--display); font-size: 20px; text-shadow: 0 2px 10px #000a; }
.lobby-status { font: 700 13px var(--font); color: #ffe9a6; max-width: 70vw; }
.lobby-hint { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 22px); transform: translateX(-50%); padding: 10px 18px; border-radius: 99px; background: rgba(20,19,64,.82); backdrop-filter: blur(10px); font-weight: 700; font-size: 14px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity .6s; }
.lobby-hint.gone { opacity: 0; }
.lobby-chat { position: absolute; right: 14px; bottom: calc(var(--safe-b) + 14px); width: 54px; height: 54px; background: rgba(20,19,64,.82); backdrop-filter: blur(10px); }
.lobby-found { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(11,10,36,.78); backdrop-filter: blur(6px); animation: fade .25s both; }
.petneed { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,201,51,.16), rgba(255,138,61,.1)); box-shadow: inset 0 0 0 1px rgba(255,201,51,.4); }
.petneed > div:nth-child(2) { flex: 1; min-width: 180px; } .pn-ic { font-size: 34px; }
@media (max-width: 720px) { .lobby-title { font-size: 17px; } .lobby-hint { font-size: 12px; bottom: calc(var(--safe-b) + 84px); } }

/* ───── 2D | 3D switch ───── */
.modeswitch { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line2); }
.modeswitch button { min-width: 44px; height: 38px; padding: 0 12px; border-radius: 99px; font: 600 15px var(--display); color: var(--muted); transition: .25s var(--spring); }
.modeswitch button.on { color: #fff; background: linear-gradient(135deg, var(--sky), var(--grape)); box-shadow: 0 6px 16px -6px rgba(56,182,255,.9); }
@media (max-width: 720px) { .modeswitch button { min-width: 36px; height: 34px; padding: 0 9px; font-size: 14px; } }
.lobby-stage { position: absolute; inset: 0; }
.ae-stage.is3d { padding: 0; } .ae-stage .stage3d { width: 100%; height: 100%; display: block; cursor: grab; }

/* 3D Square (home in 3D mode): fills the space under the top bar, above the tab bar */
.lobby-root.embedded { inset: calc(var(--topbar-h) + var(--safe-t)) 0 0 0; z-index: 1; }
.lobby-root.embedded .lobby-top { top: 8px; justify-content: space-between; }
.lobby-root.embedded .lobby-title { align-items: flex-start; text-align: left; }
.lobby-root.embedded .lobby-chat { bottom: 14px; }
@media (max-width: 720px) { .lobby-root.embedded { bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); } .lobby-root.embedded .lobby-hint { bottom: 12px; } .lobby-root.embedded .lobby-chat { bottom: 10px; } }

/* ───── 3D mode: ambient sky backdrop behind the pages ───── */
#bg3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
body.bg3d-on #bg3d { display: block; }
body.bg3d-on[data-world] #bg3d { display: none; }
body.bg3d-on { background: #2e3bd6; }
body.bg3d-on #app { position: relative; z-index: 1; }
#bg3d::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 36, .5), rgba(11, 10, 36, .18) 45%, rgba(11, 10, 36, .5)); }
body.bg3d-on .card, body.bg3d-on .panel { background: linear-gradient(180deg, rgba(26, 25, 72, .78), rgba(26, 25, 72, .62)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.bg3d-on .topbar, body.bg3d-on .tabbar { background: rgba(14, 13, 48, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }