/* UbayBian v0.5.8 · Cosmic Profile Polish Visual-only override for the logged-in profile chooser. Home Adventure UI v0.5.3 remains the locked baseline. */ body[data-profile=""]:not(.login-gateway) main{ padding-top:48px; background: radial-gradient(circle at 50% 43%,rgba(126,211,255,.13),transparent 24%), radial-gradient(circle at 49% 77%,rgba(255,255,255,.08),transparent 20%), radial-gradient(circle at 21% 67%,rgba(255,225,151,.08),transparent 16%), radial-gradient(circle at 79% 61%,rgba(198,170,255,.09),transparent 18%), radial-gradient(circle at 7% 20%,rgba(136,192,255,.30) 0 5.2%,transparent 5.35%), radial-gradient(circle at 91% 9%,rgba(222,184,255,.22) 0 8%,transparent 8.2%), radial-gradient(circle at 9% 87%,rgba(255,179,145,.13) 0 5%,transparent 5.2%), radial-gradient(circle at 92% 76%,rgba(255,201,145,.15) 0 6.3%,transparent 6.5%), radial-gradient(circle at 16% 14%,rgba(255,255,255,.72) 0 1px,transparent 2px), radial-gradient(circle at 28% 31%,rgba(255,255,255,.48) 0 1.2px,transparent 2.1px), radial-gradient(circle at 47% 19%,rgba(255,255,255,.70) 0 1px,transparent 2px), radial-gradient(circle at 65% 14%,rgba(255,255,255,.62) 0 1.2px,transparent 2px), radial-gradient(circle at 78% 35%,rgba(255,255,255,.50) 0 1px,transparent 1.8px), radial-gradient(circle at 40% 78%,rgba(255,255,255,.42) 0 1px,transparent 1.8px), radial-gradient(circle at 61% 72%,rgba(255,255,255,.48) 0 1px,transparent 1.8px), linear-gradient(155deg,rgba(50,126,199,.91),rgba(61,101,177,.82) 47%,rgba(121,92,161,.76)); } /* Bring the selector a little lower and give the title more breathing room. */ body[data-profile=""]:not(.login-gateway) .profile-intro{ margin-bottom:24px; } body[data-profile=""]:not(.login-gateway) .profile-intro h1{ font-size:43px; text-shadow:0 5px 18px rgba(18,38,83,.22); } body[data-profile=""]:not(.login-gateway) .profile-intro .intro{ font-size:14.5px; color:rgba(250,253,255,.94); } /* More depth: card is now a real character-select tile instead of a flat panel. */ body[data-profile=""]:not(.login-gateway) .profile-card{ min-height:286px; padding:25px 27px 22px; grid-template-columns:178px minmax(0,1fr); column-gap:24px; border-color:rgba(255,255,255,.80); background: radial-gradient(circle at 10% 18%,rgba(96,199,255,.24),transparent 28%), radial-gradient(circle at 84% 84%,rgba(80,153,231,.07),transparent 30%), linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,248,255,.90)); box-shadow: 0 22px 46px rgba(16,37,82,.24), 0 0 0 1px rgba(142,218,255,.10), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -18px 36px rgba(106,177,226,.045); } body[data-profile=""]:not(.login-gateway) .profile-card.orange{ background: radial-gradient(circle at 88% 16%,rgba(255,211,107,.24),transparent 29%), radial-gradient(circle at 14% 84%,rgba(242,183,73,.07),transparent 30%), linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,247,227,.91)); box-shadow: 0 22px 46px rgba(48,39,77,.22), 0 0 0 1px rgba(255,220,138,.10), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -18px 36px rgba(238,188,82,.05); } body[data-profile=""]:not(.login-gateway) .profile-card.blue:hover{ box-shadow:0 28px 54px rgba(15,42,90,.27),0 0 0 4px rgba(95,195,255,.13),inset 0 1px 0 rgba(255,255,255,.98); } body[data-profile=""]:not(.login-gateway) .profile-card.orange:hover{ box-shadow:0 28px 54px rgba(44,37,75,.25),0 0 0 4px rgba(255,203,83,.13),inset 0 1px 0 rgba(255,255,255,.98); } /* Original in-universe character avatars. Ubay keeps the red/blue wall-crawler-superhero energy he likes, but the character remains an original UbayBian robot. */ body[data-profile=""]:not(.login-gateway) .profile-card .avatar{ width:166px; height:166px; border-radius:40px; font-size:0; color:transparent; background-repeat:no-repeat; background-position:center; background-size:94% 94%; box-shadow:0 18px 34px rgba(42,126,183,.18),0 0 30px rgba(96,207,255,.12),inset 0 1px 0 rgba(255,255,255,.92); animation:profile-avatar-float 4.2s ease-in-out infinite; } body[data-profile=""]:not(.login-gateway) .profile-card.blue .avatar{ background-color:#dff5ff; background-image:url('assets/ubay-cosmic-spider-bot.svg'); border-color:rgba(75,177,226,.24); } body[data-profile=""]:not(.login-gateway) .profile-card.orange .avatar{ background-color:#fff3c8; background-image:url('assets/bian-cosmic-scout.svg'); border-color:rgba(228,176,53,.24); box-shadow:0 18px 34px rgba(177,126,36,.16),0 0 30px rgba(255,211,103,.12),inset 0 1px 0 rgba(255,255,255,.92); animation-delay:-1.2s; } @keyframes profile-avatar-float{ 0%,100%{transform:translateY(0) rotate(-.5deg)} 50%{transform:translateY(-5px) rotate(.5deg)} } body[data-profile=""]:not(.login-gateway) .profile-name{ font-size:33px; letter-spacing:-.025em; } body[data-profile=""]:not(.login-gateway) .profile-meta{ color:#3b5670; font-size:13.5px; } body[data-profile=""]:not(.login-gateway) .profile-count{ color:#536f86; font-size:12.5px; } /* Make the reward decoration feel like a deliberate mini-chip rather than loose emoji. */ body[data-profile=""]:not(.login-gateway) .profile-card::after{ content:"⭐ XP 🏅"; margin-top:10px; padding:6px 11px; border-radius:13px; color:#41627d; background:linear-gradient(180deg,rgba(237,249,255,.88),rgba(218,241,253,.74)); border:1px solid rgba(120,192,228,.25); box-shadow:0 5px 12px rgba(45,111,152,.08),inset 0 1px 0 rgba(255,255,255,.76); font-size:13px; font-weight:800; letter-spacing:.02em; } body[data-profile=""]:not(.login-gateway) .profile-card.orange::after{ color:#795b20; background:linear-gradient(180deg,rgba(255,249,225,.94),rgba(255,237,184,.78)); border-color:rgba(220,174,64,.26); } body[data-profile=""]:not(.login-gateway) .profile-enter{ min-height:48px; border-radius:16px; letter-spacing:.01em; } body[data-profile=""]:not(.login-gateway) .profile-card.blue .profile-enter{ background:linear-gradient(180deg,#3aa8f4,#267cd1); box-shadow:0 10px 20px rgba(36,121,206,.27),inset 0 1px 0 rgba(255,255,255,.38); } body[data-profile=""]:not(.login-gateway) .profile-card.orange .profile-enter{ background:linear-gradient(180deg,#ffd14c,#e2ad20); box-shadow:0 10px 20px rgba(196,144,21,.25),inset 0 1px 0 rgba(255,255,255,.38); } body[data-profile=""]:not(.login-gateway) .hint{ margin-top:20px; font-size:12.5px; font-weight:600; color:rgba(250,253,255,.96); text-shadow:0 2px 9px rgba(20,39,78,.26); } /* The exit action should not compete with the children cards. */ body[data-profile=""]:not(.login-gateway) .family-logout{ min-height:38px; padding:7px 15px; font-size:13px; border-radius:13px; background:rgba(255,255,255,.045); } /* Lighter footer: still anchors the screen without becoming a heavy dark slab. */ body[data-profile=""]:not(.login-gateway) footer{ min-height:34px; padding:8px 22px; background:rgba(19,40,75,.36); border-top:1px solid rgba(229,242,255,.10); color:rgba(245,250,255,.90); font-size:10.5px; } @media(max-height:780px) and (min-width:801px){ body[data-profile=""]:not(.login-gateway) main{padding-top:30px;padding-bottom:18px;} body[data-profile=""]:not(.login-gateway) .profile-intro{margin-bottom:16px;} body[data-profile=""]:not(.login-gateway) .profile-card{min-height:248px;grid-template-columns:150px minmax(0,1fr);padding:19px 22px 17px;} body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:138px;height:138px;border-radius:32px;} body[data-profile=""]:not(.login-gateway) .profile-name{font-size:29px;} body[data-profile=""]:not(.login-gateway) .hint{margin-top:13px;} } @media(max-width:800px){ body[data-profile=""]:not(.login-gateway) main{padding-top:26px;} body[data-profile=""]:not(.login-gateway) .profile-card{grid-template-columns:112px minmax(0,1fr);min-height:230px;padding:18px;column-gap:17px;} body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:104px;height:104px;border-radius:28px;} body[data-profile=""]:not(.login-gateway) .profile-name{font-size:27px;} } @media(max-width:560px){ body[data-profile=""]:not(.login-gateway) .profile-card{grid-template-columns:88px minmax(0,1fr);min-height:205px;padding:15px;column-gap:13px;} body[data-profile=""]:not(.login-gateway) .profile-card .avatar{width:82px;height:82px;border-radius:23px;} body[data-profile=""]:not(.login-gateway) .profile-card::after{font-size:11px;padding:5px 8px;} body[data-profile=""]:not(.login-gateway) .profile-intro h1{font-size:32px;} }