:root { --ink:#2e2947; --muted:#746f87; --purple:#4d0f9a; --cream:#fff8ee; --yellow:#ffd166; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:ui-rounded,"Nunito",system-ui,-apple-system,sans-serif; }
.page { width:min(1120px,100%); min-height:100vh; margin:auto; padding:24px clamp(18px,4vw,46px); }
.nav { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:32px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-weight:950; font-size:1.2rem; }
.brand-mark { display:grid; place-items:center; width:43px; height:43px; color:white; background:linear-gradient(145deg,#8734dc,#4d0f9a); border-radius:15px; box-shadow:0 8px 20px rgba(77,15,154,.28); }
.family-badge,.count { border:0; background:white; padding:10px 15px; border-radius:999px; color:var(--muted); font-size:.88rem; font-weight:750; box-shadow:0 6px 18px rgba(56,43,90,.07); }
.player-access { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--ink); }.player-access span { display:grid; text-align:left; }.player-access small { color:var(--muted); font-size:.68rem; }
.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:1.4fr .6fr; min-height:390px; align-items:center; gap:20px; padding:clamp(30px,6vw,68px); border-radius:38px; color:white; background:linear-gradient(135deg,#8527df 0%,#4d0f9a 62%,#390b78 100%); box-shadow:0 22px 55px rgba(77,15,154,.3); }
.hero::before { content:""; position:absolute; width:330px; height:330px; right:-95px; bottom:-170px; border:55px solid rgba(255,255,255,.08); border-radius:50%; }
.eyebrow { margin:0 0 10px; color:var(--yellow); font-size:.76rem; font-weight:950; letter-spacing:.11em; text-transform:uppercase; }
.eyebrow.purple { color:var(--purple); }
h1 { position:relative; margin:0; max-width:700px; font-size:clamp(2.4rem,6vw,4.6rem); line-height:.98; letter-spacing:-.045em; }
.lead { position:relative; max-width:590px; margin:20px 0 28px; color:#efecff; font-size:clamp(1rem,2vw,1.18rem); line-height:1.55; }
.hero-button { position:relative; display:inline-block; border:0; padding:14px 20px; border-radius:16px; background:var(--yellow); color:#4b3a00; text-decoration:none; font-weight:950; box-shadow:0 9px 22px rgba(50,35,0,.17); cursor:pointer; transition:.2s; }.hero-button:hover { transform:translateY(-3px) rotate(-1deg); }
.hero-art { position:relative; display:grid; place-items:center; min-height:230px; }
.planet { position:relative; display:block; width:clamp(112px,17vw,176px); aspect-ratio:1; overflow:hidden; border-radius:50%; font-size:0; background:radial-gradient(circle at 32% 24%,#a9edff 0 8%,#45b9ed 35%,#1878c8 72%,#0d468c 100%); box-shadow:inset -22px -15px 30px #072d6d80,inset 12px 9px 20px #d8fbff70,0 20px 22px rgba(32,22,89,.24); animation:planetFloat 3.2s ease-in-out infinite; }
.planet::before { content:""; position:absolute; z-index:1; left:-100%; top:7%; width:300%; height:86%; background:radial-gradient(ellipse at 8% 28%,#75bf55 0 5%,transparent 5.5%),radial-gradient(ellipse at 17% 61%,#4d9f45 0 8%,transparent 8.5%),radial-gradient(ellipse at 30% 35%,#83ca58 0 7%,transparent 7.5%),radial-gradient(ellipse at 43% 70%,#4b9d46 0 6%,transparent 6.5%),radial-gradient(ellipse at 58% 28%,#75bf55 0 5%,transparent 5.5%),radial-gradient(ellipse at 67% 61%,#4d9f45 0 8%,transparent 8.5%),radial-gradient(ellipse at 80% 35%,#83ca58 0 7%,transparent 7.5%),radial-gradient(ellipse at 93% 70%,#4b9d46 0 6%,transparent 6.5%); animation:globeSurface 7s linear infinite; }
.planet::after { content:""; position:absolute; z-index:2; inset:0; border-radius:50%; background:radial-gradient(circle at 27% 20%,#fff9 0 5%,transparent 28%),linear-gradient(90deg,#fff2,transparent 35%,#001d5845); }
.spark { position:absolute; color:var(--yellow); font-size:2.2rem; animation:sparkle 1.35s ease-in-out infinite; filter:drop-shadow(0 0 5px #ffe59a); }
.spark.one { top:20px; right:10px; }.spark.two { bottom:12px; left:15px; font-size:1.4rem; animation-delay:.65s; }
.apps-section { padding:62px 2px 34px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px; }
h2 { margin:0; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.035em; }
.app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.app-card { min-height:245px; display:flex; align-items:center; gap:22px; padding:25px; border-radius:28px; background:white; color:var(--ink); text-decoration:none; box-shadow:0 12px 34px rgba(64,46,112,.09); border:2px solid transparent; }
.app-card.drawing,.app-card.david { transition:.2s ease; }.app-card.drawing:hover,.app-card.david:hover { transform:translateY(-4px); border-color:#9b8af2; box-shadow:0 18px 42px rgba(64,46,112,.15); }
.app-card.david { background:linear-gradient(145deg,#fff 0%,#fff8df 100%); }.app-card.david:hover { border-color:#f2bd4d; }.david-icon { overflow:hidden; background:#d9efc7; }.david-icon img { object-fit:cover; object-position:42% center; transform:scale(1.6); }
.app-card.fish{background:linear-gradient(145deg,#f4ffff,#d8f5f5);transition:.2s ease}.app-card.fish:hover{transform:translateY(-4px);border-color:#63c5d5}.fish-icon{background:linear-gradient(#a7ecf0 0 35%,#238db2 35%,#095477);font-size:3.3rem;box-shadow:inset 0 -12px 18px #003c5870}
.app-card.noah{background:linear-gradient(145deg,#fffef4,#e4f5e4);transition:.2s ease}.app-card.noah:hover{transform:translateY(-4px);border-color:#7fc9a0}.noah-icon{overflow:hidden;background:#d7efdb}.noah-icon img{object-fit:cover}
.app-card.coming { opacity:.58; border:2px dashed #d8d0eb; box-shadow:none; }
.app-icon { flex:0 0 100px; height:100px; display:grid; place-items:center; border-radius:27px; background:#eeeaff; font-size:3rem; }
.app-icon img { width:100%; height:100%; border-radius:27px; }
.tag { color:var(--purple); font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.app-copy h3 { margin:6px 0 7px; font-size:1.5rem; }.app-copy p { margin:0; color:var(--muted); line-height:1.5; }
.open { display:block; margin-top:18px; color:var(--purple); font-weight:950; }.open b { margin-left:5px; }
footer { padding:26px 0 10px; color:var(--muted); text-align:center; font-size:.9rem; }
.profile-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:18px; background:rgba(38,29,73,.55); backdrop-filter:blur(8px); }
.profile-modal { position:relative; width:min(780px,100%); max-height:92vh; overflow:auto; padding:32px; border-radius:32px; background:#fffaf3; box-shadow:0 30px 80px rgba(28,20,69,.35); text-align:center; animation:modalIn .25s both; }
.profile-modal h2 { margin:0; }.modal-lead { color:var(--muted); }.modal-close { position:absolute; top:16px; left:18px; border:0; background:#eeeaff; color:var(--purple); border-radius:12px; width:40px; height:40px; font-size:1.5rem; cursor:pointer; }
.hub-profiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:13px; margin-top:24px; }.hub-profile { min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:3px solid transparent; border-bottom-color:var(--pc); border-radius:22px; background:white; color:var(--ink); cursor:pointer; box-shadow:0 8px 22px rgba(56,43,90,.08); }.hub-profile:hover { border-color:var(--pc,var(--purple)); transform:translateY(-3px); }.hub-profile span:last-child { color:var(--muted); font-size:.8rem; }.hub-profile.new { border:3px dashed #ccc3e8; }
.hub-avatar { display:block; width:86px; height:86px; border-radius:50%; background-image:url('shared/kids-sprite.webp'); background-size:500% 200%; background-repeat:no-repeat; background-color:#fff8ed; }.hub-avatar.tiny { width:38px; height:38px; box-shadow:0 0 0 3px #ddd; }.plus { display:grid!important; place-items:center; width:80px; height:80px; border-radius:50%; background:#eeeaff; color:var(--purple)!important; font-size:2.6rem!important; }
.hub-label { display:block; margin:23px 0 9px; text-align:left; font-weight:900; }.hub-input { display:block; width:100%; padding:14px 16px; border:2px solid #dcd5eb; border-radius:15px; font:inherit; outline:none; }.hub-input:focus { border-color:var(--purple); box-shadow:0 0 0 4px #eeeaff; }.profile-modal.create>small { display:block; margin-top:6px; color:var(--muted); text-align:left; }
.hub-avatar-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }.avatar-choice { min-width:0; padding:3px; border:3px solid transparent; border-radius:18px; background:white; cursor:pointer; }.avatar-choice .hub-avatar { width:100%; height:auto; aspect-ratio:1; }.avatar-choice.active { border-color:var(--purple); background:#eeeaff; }.hub-colors { display:flex; gap:13px; flex-wrap:wrap; }.hub-color { width:42px; height:42px; border-radius:50%; border:5px solid white; background:var(--c); box-shadow:0 0 0 1px #ccc; cursor:pointer; }.hub-color.active { box-shadow:0 0 0 4px var(--purple); }.hub-error { min-height:22px; color:#c33f52; font-weight:800; }.save-profile { width:100%; border:0; border-radius:16px; padding:15px; color:white; background:var(--purple); font-weight:900; cursor:pointer; }
.access-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px; }.text-button { border:0; border-radius:13px; padding:10px 13px; background:#eeeaff; color:var(--purple); font-weight:850; cursor:pointer; }.text-button.danger { color:#bd3d51; background:#fff0f2; }.profile-modal.narrow { width:min(460px,100%); }.profile-modal.narrow>.hub-avatar { margin:0 auto; }.alias-state { min-height:22px; margin-top:6px; color:var(--muted); font-size:.82rem; text-align:left; }.alias-state.available { color:#218764; }.alias-state.taken { color:#c27800; }.pin-input { letter-spacing:.5em; font-size:1.3rem; }.loading-league { padding:60px 20px; font-size:1.3rem; font-weight:900; }
.podium { display:flex; align-items:end; justify-content:center; gap:12px; margin:28px 0; }.podium-item { position:relative; min-width:120px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 10px; border-radius:22px 22px 10px 10px; background:white; box-shadow:0 8px 24px rgba(56,43,90,.09); }.podium-item.p1 { order:2; padding-top:30px; background:#fff7d9; }.podium-item.p2 { order:1; }.podium-item.p3 { order:3; }.podium-item .hub-avatar { width:74px;height:74px; }.medal { position:absolute; top:-15px; font-size:2rem; }.ranking-list { display:grid; gap:8px; }.rank-row { display:grid; grid-template-columns:34px 42px 1fr auto; align-items:center; gap:9px; padding:9px 14px; border-radius:15px; background:white; text-align:left; }.rank-row.me { outline:3px solid var(--purple); background:#f3f0ff; }.rank-row .hub-avatar { width:38px;height:38px; }
@keyframes float { 50% { transform:translateY(-12px) rotate(3deg); } }
@keyframes planetFloat { 50% { transform:translateY(-9px); } }
@keyframes globeSurface { to { transform:translateX(33.333%); } }
@keyframes sparkle { 0%,100% { opacity:.3; transform:scale(.65) rotate(0); } 50% { opacity:1; transform:scale(1.4) rotate(45deg); } }
@keyframes modalIn { from { opacity:0; transform:scale(.92) translateY(20px); } }
@media (max-width:760px) { .player-access small { display:none; }.hero { grid-template-columns:1fr; min-height:auto; }.hero-art { min-height:160px; }.planet { font-size:7rem; }.app-grid { grid-template-columns:1fr; }.app-card { min-height:210px; }.section-heading { align-items:start; }.count { white-space:nowrap; } }
@media (max-width:440px) { .page { padding:15px 13px; }.hero { padding:31px 24px; border-radius:28px; }.app-card { align-items:flex-start; padding:19px; gap:15px; }.app-icon { flex-basis:72px; height:72px; border-radius:20px; }.app-icon img { border-radius:20px; }.app-copy h3 { font-size:1.25rem; }.profile-modal { padding:27px 14px 18px; }.hub-profiles { grid-template-columns:repeat(2,1fr); }.hub-avatar-grid { gap:3px; } }
.app-card.samaritan { background:linear-gradient(130deg,#f9eac7,#f4c990); color:#4c3426; }
.samaritan .tag { color:#8a5a2c; }
.samaritan-icon { display:grid; place-items:center; background:#fff6dd; font-size:3rem; }
.hub-avatar { background-image:url('shared/kids-sprite.webp'); }
.native-shell .nav { display:none; }
.native-shell .nav .brand { display:none; }
.progress-stars { margin:18px auto; padding:20px; border-radius:20px; background:#fff0bf; color:#5f4018; font-size:1.5rem; font-weight:900; }
.progress-stars small { display:block; margin-top:4px; font-size:.82rem; font-weight:600; }
.progress-modal { width:min(440px,100%); }