/* Sign-in sheet, wallet picker, rotating connect chip, home action row */
/* chip: Solana face and Google face swap every 2s */
#solChip { display: grid !important; align-items: center; cursor: pointer; min-width: 112px; }
#solChip .scf { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 7px; transition: opacity .4s ease, transform .4s ease; white-space: nowrap; }
#solChip .scf b { font: inherit; }
#solChip .gic { width: 17px; height: 17px; flex: none; }
#solChip .f2 { opacity: 0; transform: translateY(8px); pointer-events: none; }
#solChip.flip .f1 { opacity: 0; transform: translateY(-8px); }
#solChip.flip .f2 { opacity: 1; transform: none; }
#solChip.still .f2 { display: none; }
body.rm #solChip .scf { transition: none; }

/* home: one vertical column on the right: daily reward, friends, All worlds, missions */
#menu #rbGift { top: 130px !important; right: 12px !important; }
#menu #frBtn { top: 194px !important; right: 12px !important; }
#menu .hmid2 { top: 258px !important; left: auto !important; right: 12px !important; width: 52px; padding-top: 0 !important; }
#menu .hworld { width: 52px; height: 52px !important; padding: 0 !important; border-radius: 18px !important; justify-content: center; gap: 0; }
#menu .hworld svg { width: 24px !important; height: 24px !important; }
#menu .hworld #worldLbl, #menu .hworld .chev { display: none !important; }
#menu .hrail { top: 322px !important; right: 12px !important; flex-direction: column !important; }
#menu .hrail .rl { width: 52px; height: 52px; }
@media (max-width: 370px) { #menu #frBtn, #menu #rbGift, #menu .hrail .rl, #menu .hworld { width: 48px !important; height: 48px !important; } #menu .hmid2 { width: 48px; } #menu #frBtn { top: 190px !important; } #menu .hmid2 { top: 250px !important; } #menu .hrail { top: 310px !important; } }

/* sheet */
#authS { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: flex-end; justify-content: center; font-family: var(--ui, Inter, system-ui, sans-serif); }
#authS.hidden { display: none !important; }
#authS .aubg { position: absolute; inset: 0; background: rgba(2,6,4,.72); backdrop-filter: blur(6px); animation: auFade .25s ease-out; }
#authS .aus { position: relative; width: min(100%, 460px); max-height: 92vh; overflow-y: auto; padding: 14px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; color: #fff; text-align: center; background: radial-gradient(120% 70% at 50% 0, rgba(70,240,124,.16), transparent 60%), linear-gradient(180deg, #121a15, #070b09); box-shadow: inset 0 0 0 1.5px rgba(140,245,55,.28), 0 -20px 60px rgba(0,0,0,.6); animation: auUp .32s cubic-bezier(.2,.9,.25,1); }
@keyframes auFade { from { opacity: 0; } } @keyframes auUp { from { transform: translateY(40px); opacity: 0; } }
#authS .augrab { display: block; width: 40px; height: 4px; border-radius: 4px; margin: 0 auto 14px; background: rgba(255,255,255,.22); }
#authS .aux { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); display: grid; place-items: center; }
#authS .aux svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
#authS .aulogo { font: 400 30px/.9 var(--f-logo, var(--display, "Lilita One", sans-serif)); letter-spacing: .01em; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5); margin: 8px 0 18px; text-transform: uppercase; }
#authS .aulogo em { font-style: normal; margin-left: 8px; background: linear-gradient(180deg, #e6ffa8, #46f07c 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#authS h3 { margin: 0 0 8px; font: 400 27px/1.05 var(--f-logo, var(--display, "Lilita One", sans-serif)); letter-spacing: .01em; }
#authS p { margin: 0 auto 22px; max-width: 320px; color: #a9b8af; font-size: 14px; line-height: 1.45; }
#authS .aubtn { width: 100%; height: 58px; border: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; font: 800 16px var(--ui, Inter, system-ui, sans-serif); letter-spacing: .01em; }
#authS .aubtn:active { transform: translateY(2px) scale(.99); }
#authS .aubtn.g { background: #fff; color: #1b1f1d; box-shadow: 0 4px 0 #b9c2bd; } #authS .aubtn .gic { width: 22px; height: 22px; }
#authS .aubtn.w { background: rgba(8,16,11,.9); color: #8cf537; box-shadow: inset 0 0 0 2px rgba(140,245,55,.7), 0 0 22px rgba(140,245,55,.14); position: relative; } #authS .aubtn .solic { width: 24px; height: 24px; }
#authS .aubtn .ach { position: absolute; right: 18px; width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .7; }
#authS .aunot { border: 0; background: none; color: #8d9d93; font: 700 13px var(--ui, Inter, system-ui, sans-serif); padding: 12px 10px 4px; }
#authS .auback { display: flex; align-items: center; gap: 4px; border: 0; background: none; color: #8cf537; font: 800 13px var(--ui, Inter, system-ui, sans-serif); padding: 4px 2px 8px; margin-bottom: 4px; } #authS .auback svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
#authS .walls { display: flex; flex-direction: column; gap: 10px; text-align: left; }
#authS .wl { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); color: #fff; font: 800 16px var(--ui, Inter, system-ui, sans-serif); text-align: left; }
#authS .wl:active { transform: scale(.985); }
#authS .wl.ok { background: rgba(140,245,55,.08); box-shadow: inset 0 0 0 1.5px rgba(140,245,55,.5); }
#authS .wl .wi { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.4); } #authS .wl .wi svg { width: 28px; height: 28px; }
#authS .wl .wn { flex: 1; } #authS .wl .wn small { display: block; margin-top: 3px; color: #8d9d93; font: 600 12px var(--ui, Inter, system-ui, sans-serif); }
#authS .wl .wt { flex: none; padding: 6px 11px; border-radius: 99px; font: 800 11px var(--ui, Inter, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.1); color: #c4cec8; }
#authS .wl.ok .wt { background: #8cf537; color: #0a1507; }
#authS #auBusy { padding: 26px 0 8px; } #authS #auBusy b { display: block; margin-top: 18px; font: 400 21px var(--f-logo, var(--display, "Lilita One", sans-serif)); } #authS #auBusy small { display: block; min-height: 20px; margin-top: 8px; color: #ff8a8a; font-size: 13px; line-height: 1.4; }
#authS .auspin { display: block; width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; border: 4px solid rgba(140,245,55,.2); border-top-color: #8cf537; animation: auSp .8s linear infinite; } @keyframes auSp { to { transform: rotate(360deg); } }
body.rm #authS .auspin { animation-duration: 2s; }
#menu .cu2.sol .scf b { font: 800 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; }

/* wallet / account view */
#authS #auAcc { text-align: center; }
#authS .acw { margin: 0 0 12px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); text-align: left; }
#authS .acw small { display: flex; align-items: center; gap: 8px; color: #8d9d93; font: 800 11px var(--ui, Inter, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
#authS .acw small i { font-style: normal; padding: 2px 8px; border-radius: 99px; background: rgba(255,198,31,.18); color: #ffd166; letter-spacing: .06em; } #authS .acw small i:empty { display: none; }
#authS .acw b { display: block; margin: 8px 0 12px; font: 600 14px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; word-break: break-all; }
#authS .acc { width: 100%; height: 44px; border: 0; border-radius: 14px; background: #8cf537; color: #0a1507; font: 800 14px var(--ui, Inter, system-ui, sans-serif); box-shadow: 0 3px 0 #4e9a1a; } #authS .acc:active { transform: translateY(2px); }
#authS .acb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
#authS .acb > div { padding: 14px 12px; border-radius: 18px; background: rgba(8,16,11,.9); box-shadow: inset 0 0 0 1.5px rgba(140,245,55,.45); text-align: left; }
#authS .acb span { display: block; color: #8d9d93; font: 800 11px var(--ui, Inter, system-ui, sans-serif); letter-spacing: .1em; }
#authS .acb b { display: block; margin-top: 6px; font: 400 24px/1 var(--f-logo, var(--display, "Lilita One", sans-serif)); color: #fff; }
#authS .acb .off { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); } #authS .acb .off b { font-size: 16px; color: #8d9d93; padding-top: 6px; }
#authS .acn { margin: 0 auto 14px !important; font-size: 12.5px !important; max-width: 340px; }
#authS .acerr { display: block; min-height: 0; margin: -6px 0 10px; color: #ff8a8a; font-size: 13px; } #authS .acerr:empty { display: none; }
#authS #auAcc .aubtn { height: 52px; font-size: 15px; } #authS #auAcc .aubtn.w { box-shadow: inset 0 0 0 2px rgba(140,245,55,.55); }

#authS #auExp { text-align: center; } #authS #auExp .auback { margin-bottom: 8px; }
#authS .exw { max-width: none !important; padding: 12px 14px; border-radius: 16px; background: rgba(255,90,90,.1); box-shadow: inset 0 0 0 1.5px rgba(255,120,120,.4); color: #ffd0d0 !important; text-align: left; font-size: 13.5px !important; }
#authS .exck { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.06); text-align: left; font: 700 14px var(--ui, Inter, system-ui, sans-serif); }
#authS .exck input { width: 22px; height: 22px; accent-color: #8cf537; flex: none; }
#authS #auExpKey { margin: 0 0 14px; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1.5px rgba(255,198,31,.5); text-align: left; }
#authS #auExpKey b { display: block; margin-bottom: 12px; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; }
#authS #auExpKey small { display: block; margin-top: 10px; color: #a9b8af; font-size: 12px; line-height: 1.4; }
#authS #auExpGo:disabled { opacity: .4; }

/* telegram */
#authS .aubtn.t { background: #229ed9; color: #fff; box-shadow: 0 4px 0 #14729d; } #authS .aubtn .tgic { width: 24px; height: 24px; }
#authS #auTgBox { min-height: 56px; display: flex; justify-content: center; align-items: center; margin-bottom: 8px; }

/* pay-from toggle (in-game wallet vs connected wallet) */
#payWl.pf { display: grid; grid-auto-flow: column; gap: 6px; max-width: 70%; }
#payWl.pf button { border: 0; border-radius: 10px; padding: 7px 9px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #dfe8e2; font: 800 11px var(--ui); cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#payWl.pf button.on { background: rgba(20,241,149,.12); box-shadow: inset 0 0 0 1.5px #14f195; color: #fff; }

/* wardrobe: quick All / Owned switch */
#custS .cflt { display: flex; gap: 8px; padding: 2px 0 6px; }
#custS .cflt button { height: 28px; padding: 0 14px; border-radius: 99px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #b4c4ba; font: 800 11px var(--ui); letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; }
#custS .cflt button.on { background: #14f195; color: #06210a; box-shadow: none; }
#custS .cflt button em { font-style: normal; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; background: rgba(0,0,0,.25); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
#custS .cflt button.on em { background: rgba(0,0,0,.18); }

/* wardrobe: easier drag-down to see the character */
#custS .cgrab { height: 38px !important; margin: -6px 0 0 !important; touch-action: none; position: relative; }
#custS .cgrab i { width: 56px !important; height: 5px !important; background: rgba(255,255,255,.4) !important; }
#custS .cdock.min #cCats, #custS .cdock.min #cTabs, #custS .cdock.min #cSubs, #custS .cdock.min #cFlt, #custS .cdock.min #cGrid { display: none !important; }
#custS .cdock.min .cgrab i { background: #14f195 !important; }

/* ---- home top v3: one glass strip, calmer wordmark, tidy action rail ---- */
#menu .hword small { display: none !important; }
#menu .ht { height: 60px; padding: 0 8px 0 6px; gap: 6px; border-radius: 30px; background: linear-gradient(180deg, rgba(20,30,25,.8), rgba(6,10,8,.82)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.45); }
#menu .hp2 { padding: 0 8px 0 0 !important; }
#menu .hp2 .avw .av { box-shadow: 0 0 0 2.5px #46f07c, 0 0 14px rgba(70,240,124,.45) !important; }
#menu .ht .cu2.gold { height: 40px; padding: 0 5px 0 10px; background: rgba(255,198,31,.1) !important; box-shadow: inset 0 0 0 1px rgba(255,198,31,.35) !important; backdrop-filter: none; }
#menu .ht .cu2.gold .pl { background: linear-gradient(#ffe27a, #f2b632); border-radius: 50%; }
#menu .ht .cu2.gold .pl svg { stroke: #3a2600; stroke-width: 3; }
#menu .ht .cu2.sol { height: 40px; background: linear-gradient(110deg, #9945ff, #14f195) !important; box-shadow: none !important; color: #06140a; padding: 0 14px 0 10px; }
#menu .ht .cu2.sol #hSolN { font-weight: 900; }
#menu .ht #gearM { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08) !important; box-shadow: none !important; display: grid; place-items: center; margin-left: auto; }
#menu .hword { margin: 18px 6px 0; }
#menu .hword b { font-size: 50px; text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 28px rgba(70,240,124,.3); }
#menu #rbGift, #menu #frBtn, #menu .rl { width: 48px; height: 48px; border-radius: 50%; background: rgba(8,13,10,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
#menu #rbGift { top: 92px !important; right: 12px; box-shadow: inset 0 0 0 1.5px rgba(255,198,31,.7), 0 0 18px rgba(255,198,31,.25); }
#menu #frBtn { top: 150px !important; }
#menu .hmid2 { top: 208px !important; left: auto !important; right: 12px !important; width: 48px !important; }
#menu .hworld { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: rgba(8,13,10,.78) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; border: 0 !important; }
#menu .hrail { top: 266px !important; right: 12px; }
#menu .ht .hp2 { background: none !important; border: 0 !important; box-shadow: none !important; flex: none; height: 52px; }
#menu .ht .hp2 .hxp2 { display: none; } #menu .ht .hp2 .hpt { min-width: 0; }
#menu .ht .hp2 .avw, #menu .ht .hp2 .avw .av { width: 48px; height: 48px; }
#menu #rbGift, #menu #frBtn { right: 12px !important; left: auto !important; width: 48px !important; height: 48px !important; }
#menu #rbGift { top: 92px !important; } #menu #frBtn { top: 150px !important; }
#menu .hrail .rl { width: 48px !important; height: 48px !important; border-radius: 50% !important; }
#menu .hrail { right: 12px !important; top: 266px !important; }
#menu .ht .hp2 { position: relative; }
#menu .ht .hp2 .dt { left: 40px; right: auto; top: 4px; }
#menu .hword { display: none !important; }
.pc .blk i { font-size: 34px !important; letter-spacing: .02em; } .pc.r1 .blk i { font-size: 44px !important; }

/* email + password sign-in */
#authS .aubtn.e { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); } #authS .aubtn .emic { width: 24px; height: 24px; }
#authS .autabs { display: flex; gap: 6px; padding: 4px; margin: 0 0 14px; border-radius: 16px; background: rgba(255,255,255,.07); }
#authS .autabs button { flex: 1; height: 40px; border: 0; border-radius: 12px; background: none; color: #a9b8af; font: 800 14px var(--ui, Inter, system-ui, sans-serif); }
#authS .autabs button.on { background: #8cf537; color: #0a1507; }
#authS .auin { display: block; width: 100%; height: 54px; margin: 0 0 10px; padding: 0 16px; border: 0; border-radius: 16px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); color: #fff; font: 700 16px var(--ui, Inter, system-ui, sans-serif); outline: none; box-sizing: border-box; }
#authS .auin:focus { box-shadow: inset 0 0 0 2px #8cf537; } #authS .auin::placeholder { color: #7e8d84; }
#authS .auerr { display: block; min-height: 18px; margin: 0 0 10px; color: #ff8a8a; font: 700 13px/1.35 var(--ui, Inter, system-ui, sans-serif); } #authS .auerr.ok { color: #8cf537; }
#authS #auEm, #authS #auPw { text-align: center; } #authS #auEm .auback { margin-bottom: 8px; } #authS #auPw .aulogo { margin-bottom: 14px; }

/* GATE: the page shown after signing out. Full screen, no lobby behind it, a calm cinematic backdrop */
#authS.gate { align-items: center; z-index: 99999; }
#authS.gate .aubg { background: radial-gradient(90% 55% at 50% -5%, rgba(70,240,124,.20), transparent 62%), radial-gradient(80% 50% at 50% 108%, rgba(60,110,255,.16), transparent 66%), #03060a; backdrop-filter: none; animation: auGateIn .9s ease-out both; }
#authS.gate .aubg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 30% at 30% 40%, rgba(70,240,124,.07), transparent 70%), radial-gradient(35% 28% at 72% 62%, rgba(110,150,255,.07), transparent 70%); animation: auDrift 14s ease-in-out infinite alternate; }
#authS.gate .aus { border-radius: 28px; max-height: 94vh; margin: 0 14px; box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: auGateUp .7s .15s cubic-bezier(.2,.8,.2,1) both; }
#authS.gate .augrab, #authS.gate .aux { display: none; }
@keyframes auGateIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes auGateUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes auDrift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
body.rm #authS.gate .aubg::after { animation: none; }

/* leaderboard is for signed-in players: guests see this instead */
#ranksS .lbgate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 0 28px 60px; }
#ranksS .lbgate.hidden { display: none; }
#ranksS .lbgate .lgi { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: rgba(255,157,0,.12); box-shadow: inset 0 0 0 1.5px rgba(255,157,0,.4); }
#ranksS .lbgate .lgi svg { width: 34px; height: 34px; fill: none; stroke: #ff9d00; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ranksS .lbgate h3 { margin: 6px 0 0; font: 400 22px var(--display); }
#ranksS .lbgate p { margin: 0 0 8px; max-width: 280px; font-size: 14px; line-height: 1.5; opacity: .7; }