.hub-note { padding: 7px 12px; border: 1px solid rgba(105,214,196,.24); border-radius: 99px; color: var(--mint); background: rgba(35,60,72,.32); font-size: .78rem; font-weight: 900; }
.hub-hero { width: min(1040px, calc(100% - 32px)); min-height: 520px; margin: auto; padding: 70px 0 60px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.hub-hero h1 { margin: 0; font-size: clamp(4.4rem, 9vw, 7.4rem); line-height: .77; letter-spacing: -.055em; }
.hub-hero h1 span { color: var(--gold); }
.hub-hero > div:first-child > p:last-child { max-width: 560px; margin: 30px 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.hub-hero-art { min-height: 410px; position: relative; }
.hub-hero-art::before { content: ""; width: 360px; height: 360px; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(105,214,196,.18); border-radius: 50%; background: radial-gradient(circle, rgba(105,214,196,.13), transparent 68%); transform: translate(-50%,-50%); }
.hub-hero-art img { width: 245px; aspect-ratio: 1; position: absolute; object-fit: cover; border: 4px solid #293258; border-radius: 34% 66% 48% 52%; box-shadow: 0 25px 50px rgba(0,0,0,.4); }
.hub-hero-art img:first-child { left: 15px; top: 30px; transform: rotate(-7deg); }
.hub-hero-art img:nth-child(2) { right: 5px; bottom: 12px; transform: rotate(7deg); }
.hub-hero-art > span { position: absolute; right: 20px; top: 30px; color: var(--gold); font-size: 46px; filter: drop-shadow(0 0 14px rgba(246,212,123,.5)); }
.games-section { padding: 78px max(20px, calc((100% - 1040px) / 2)); background: rgba(7,12,29,.38); border-top: 1px solid rgba(203,186,245,.1); }
.games-heading { margin-bottom: 28px; text-align: center; }
.games-heading h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.7rem); }
.games-grid { width: min(880px,100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.portal-card { overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(203,186,245,.2); border-radius: 26px; background: linear-gradient(160deg, rgba(30,39,75,.9), rgba(25,20,49,.96)); box-shadow: 0 22px 45px rgba(0,0,0,.27); transition: transform .2s, border-color .2s; }
.portal-card:hover { transform: translateY(-6px); border-color: rgba(246,212,123,.42); }
.portal-picture { height: 245px; position: relative; overflow: hidden; }
.portal-picture::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(17,21,43,.75)); }
.portal-picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.portal-card:hover img { transform: scale(1.04); }
.portal-number { width: 38px; height: 38px; position: absolute; left: 16px; top: 16px; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #221c32; background: var(--gold); font-weight: 900; }
.sound-waves, .question-mark { position: absolute; right: 18px; top: 18px; z-index: 2; color: var(--mint); font: 900 1.35rem "Baloo 2"; text-shadow: 0 0 15px rgba(105,214,196,.6); }
.creator-spark { width: 44px; height: 44px; position: absolute; right: 18px; top: 18px; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(246,212,123,.45); border-radius: 50%; color: var(--gold); background: rgba(13,19,43,.75); box-shadow: 0 0 22px rgba(246,212,123,.23); font-size: 1.55rem; }
.builder-portal { width: auto; }
.feeding-card-art { background: radial-gradient(circle at 50% 35%,rgba(246,212,123,.2),transparent 30%),linear-gradient(180deg,#294d64 0%,#183e43 62%,#214632 63%,#152d27 100%); }
.feeding-card-art::before { content:""; position:absolute; inset:auto -6% -55px; height:125px; border-radius:50% 50% 0 0; background:#294e35; box-shadow:0 -15px 0 rgba(22,57,45,.72); }
.card-animal { position:absolute; z-index:1; line-height:1; filter:drop-shadow(0 10px 6px rgba(0,0,0,.28)); }
.card-animal-one { left:16%; bottom:34px; font-size:82px; transform:rotate(-5deg); }
.card-animal-two { left:50%; bottom:38px; font-size:86px; transform:translateX(-50%); }
.card-animal-three { right:13%; bottom:39px; font-size:73px; transform:rotate(5deg); }
.card-food { position:absolute; left:50%; top:26px; z-index:2; font-size:53px; filter:drop-shadow(0 0 18px rgba(246,212,123,.5)); transform:translateX(-50%) rotate(12deg); }
.feeding-spark { width:44px; height:44px; position:absolute; right:18px; top:18px; z-index:3; display:grid; place-items:center; border:1px solid rgba(255,174,192,.5); border-radius:50%; color:#ff9fba; background:rgba(13,19,43,.72); box-shadow:0 0 22px rgba(255,130,165,.2); font-size:1.25rem; }
.piano-card-art { background: radial-gradient(circle at 50% 24%,rgba(246,212,123,.26),transparent 25%),linear-gradient(180deg,#1d3155 0%,#182742 58%,#11162a 100%); }
.piano-card-art::before { content:""; width:115px; height:115px; position:absolute; left:50%; top:30px; border:1px solid rgba(246,212,123,.24); border-radius:50%; background:radial-gradient(circle,rgba(246,212,123,.12),transparent 68%); transform:translateX(-50%); }
.piano-card-star { position:absolute; left:50%; top:47px; z-index:2; color:#fff2a8; font-size:54px; line-height:1; filter:drop-shadow(0 0 16px rgba(246,212,123,.8)); transform:translateX(-50%); }
.piano-card-note { position:absolute; z-index:2; color:var(--mint); font-weight:900; filter:drop-shadow(0 0 12px rgba(105,214,196,.5)); }
.piano-card-note-one { left:17%; top:74px; font-size:34px; transform:rotate(-12deg); }
.piano-card-note-two { right:16%; top:67px; font-size:41px; transform:rotate(10deg); }
.piano-card-keys { height:94px; position:absolute; right:8%; bottom:24px; left:8%; z-index:2; display:grid; grid-template-columns:repeat(7,1fr); overflow:hidden; border:6px solid #111321; border-radius:12px; box-shadow:0 14px 24px rgba(0,0,0,.35); }
.piano-card-keys i { position:relative; border-right:1px solid #bdb9c4; background:linear-gradient(#fffdf8,#dfdae2); }
.piano-card-keys i:last-child { border-right:0; }
.piano-card-keys i:nth-child(1)::after,.piano-card-keys i:nth-child(2)::after,.piano-card-keys i:nth-child(4)::after,.piano-card-keys i:nth-child(5)::after,.piano-card-keys i:nth-child(6)::after { content:""; width:68%; height:58%; position:absolute; right:-34%; top:0; z-index:2; border-radius:0 0 5px 5px; background:linear-gradient(90deg,#090b14,#292b3d,#080910); box-shadow:0 6px 5px rgba(0,0,0,.3); }
.question-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: rgba(13,19,43,.72); font-size: 1.8rem; }
.portal-copy { flex: 1; padding: 23px; display: flex; flex-direction: column; }
.game-tag { color: var(--mint); font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.portal-copy h3 { margin: 8px 0 5px; font: 800 1.55rem "Baloo 2"; }
.portal-copy p { min-height: 49px; margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.portal-button { margin-top: auto; min-height: 48px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(246,212,123,.5); border-radius: 13px; color: #211b30; background: linear-gradient(135deg, #ffe8a5, #e7bd64); box-shadow: 0 5px 0 #92703d; font-weight: 900; }
.portal-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #92703d; }
.calm-note { width: min(750px, calc(100% - 32px)); margin: 70px auto; padding: 24px 28px; display: flex; align-items: center; gap: 20px; border: 1px solid rgba(105,214,196,.2); border-radius: 22px; background: rgba(30,53,66,.28); }
.calm-note > span { color: var(--gold); font-size: 46px; }
.calm-note strong { font: 800 1.2rem "Baloo 2"; }
.calm-note p { margin: 3px 0 0; color: var(--muted); line-height: 1.5; }
@media (max-width: 800px) { .hub-hero { grid-template-columns: 1fr; padding-top: 55px; text-align: center; gap: 30px; }.hub-hero > div:first-child > p:last-child { margin-inline: auto; }.hub-hero-art { width: min(500px,100%); margin: auto; }}
@media (max-width: 560px) { .hub-hero { min-height: auto; padding-bottom: 30px; }.hub-hero h1 { font-size: clamp(3.15rem, 14.5vw, 3.75rem); }.hub-hero-art { min-height: 320px; }.hub-hero-art img { width: 190px; }.games-section { padding-block: 60px; }.games-grid { grid-template-columns: 1fr; }.builder-portal { grid-column: auto; width: auto; }.calm-note { align-items: flex-start; }.calm-note > span { font-size: 35px; }}