:root { --ink:#173149; --blue:#4a79f5; --purple:#7146dc; --yellow:#ffd941; --cream:#fff9eb; --coral:#ff6b58; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:Fredoka,Arial,sans-serif; background:var(--cream); overflow-x:hidden; }
.site-header { width:min(1180px,92vw); height:90px; margin:auto; padding-right:165px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font:800 29px 'Baloo 2',sans-serif; }
.logo > span:last-child > span { color:var(--purple); }
.logo-controller { display:grid; place-items:center; width:49px; height:49px; border-radius:15px; background:var(--yellow); transform:rotate(-7deg); box-shadow:0 5px 0 #e7a922; font-size:27px; }
nav { display:flex; gap:38px; }
nav a { color:var(--ink); text-decoration:none; font-weight:700; font-size:17px; }
nav a:hover { color:var(--purple); }
.friends-tab { padding:8px 12px; border-radius:11px; background:#eee8ff; color:var(--purple)!important; }.friends-tab.active { color:white!important; background:var(--purple); }
.hero { min-height:590px; padding:55px max(4vw,calc((100vw - 1180px)/2)); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; position:relative; background:linear-gradient(145deg,#e3f8ff 0%,#f0ecff 58%,#ffe6ef 100%); border-radius:0 0 70px 70px; overflow:hidden; }
.hero::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:#ffdd45; right:8%; top:80px; opacity:.3; }
.eyebrow { margin:0 0 8px; color:var(--coral); font-size:14px; letter-spacing:2.2px; font-weight:700; }
h1,h2,h3 { font-family:'Baloo 2',sans-serif; margin:0; line-height:1; }
h1 { max-width:630px; font-size:clamp(61px,7.4vw,104px); letter-spacing:-4px; }
h1 span { color:var(--purple); }
.hero-copy > p:not(.eyebrow) { max-width:520px; font-size:21px; line-height:1.55; color:#52687c; }
.primary-button,.play-button { display:inline-flex; align-items:center; justify-content:center; gap:13px; color:#fff; background:linear-gradient(135deg,var(--purple),var(--blue)); border-radius:16px; text-decoration:none; font-weight:700; box-shadow:0 8px 0 #42269b,0 14px 30px #7146dc55; transition:.15s; }
.primary-button { padding:17px 24px; margin-top:12px; }
.primary-button:hover,.play-button:hover { transform:translateY(-3px); filter:brightness(1.08); }
.hero-art { position:relative; min-height:430px; display:grid; place-items:center; }
.planet-ring { position:absolute; width:390px; height:390px; border:28px solid #8edaf0; border-radius:50%; transform:rotate(-13deg); box-shadow:inset 0 0 0 18px #fff8; }
.planet-ring::after { content:""; position:absolute; width:450px; height:90px; border:20px solid var(--purple); border-top-color:transparent; border-radius:50%; top:125px; left:-52px; transform:rotate(8deg); }
.mascot { z-index:1; display:grid; place-items:center; width:265px; height:265px; font-size:170px; background:var(--yellow); border:11px solid #fff; border-radius:45% 55% 48% 52%; box-shadow:0 20px 0 #efa52d,0 30px 40px #4b77b644; transform:rotate(-5deg); }
.floating-icon { position:absolute; z-index:2; display:grid; place-items:center; width:75px; height:75px; font-size:38px; border:7px solid #fff; border-radius:23px; box-shadow:0 10px 20px #304f7d44; }
.bolt { top:20px; left:10%; background:#ff7d5f; transform:rotate(-12deg); }
.star { right:2%; top:45px; background:#52d4a0; color:#fff; transform:rotate(12deg); }
.pad { right:8%; bottom:7px; background:#6786ff; transform:rotate(9deg); }
.game-library { width:min(1180px,92vw); margin:0 auto; padding:100px 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:34px; }
h2 { font-size:47px; }
.game-count { color:#698093; }.game-count strong { color:var(--purple); font-size:26px; }
.game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.game-card { background:#fff; border-radius:30px; overflow:hidden; box-shadow:0 13px 35px #1d476d18; border:3px solid #fff; }
.featured { grid-column:auto; display:flex; flex-direction:column; min-height:590px; }
.game-picture { position:relative; overflow:hidden; background:linear-gradient(145deg,#8de168,#2bab66); min-height:330px; }
.game-picture::before { content:"🌴"; position:absolute; font-size:220px; opacity:.28; left:-25px; bottom:-45px; }
.new-badge { position:absolute; z-index:3; top:18px; left:18px; padding:8px 13px; border-radius:10px; background:var(--yellow); color:#74371e; font-weight:800; transform:rotate(-5deg); box-shadow:0 4px 0 #cf8e1d; }
.animal-preview { position:absolute; bottom:8%; width:53%; height:73%; border-radius:45%; background-image:url('games/gorilla-strength/assets/animals.png'); background-size:400% 100%; background-repeat:no-repeat; filter:drop-shadow(0 12px 5px #18552f77); }
.animal-preview.gorilla { right:-2%; background-position:100%; }
.animal-preview.lion { left:-2%; background-position:0%; }
.versus { position:absolute; z-index:2; left:50%; top:49%; transform:translate(-50%,-50%) rotate(-8deg); background:var(--coral); color:white; border:5px solid white; width:65px; height:65px; border-radius:50%; display:grid; place-items:center; font:800 24px 'Baloo 2'; box-shadow:0 6px 0 #9d3329; }
.game-info { padding:30px 32px; display:flex; flex:1; flex-direction:column; justify-content:space-between; gap:25px; }
.bright-card { display:flex; flex-direction:column; min-height:590px; }
.bright-picture { position:relative; min-height:330px; display:grid; grid-template-columns:repeat(3,1fr); place-items:center; gap:20px; padding:55px 35px 30px; overflow:hidden; background:linear-gradient(145deg,#201452,#3a2487 55%,#1454a3); }
.demo-light { width:82px; height:82px; border:7px solid #ffffff38; border-radius:50%; background:#4a4374; box-shadow:inset 0 -8px #1a1745,0 8px 12px #0005; }
.active-light { background:radial-gradient(circle at 38% 32%,white,#fff56a 18%,#ff9e25 55%,#fa405b); border-color:#fff; box-shadow:0 0 18px #fff,0 0 45px #ffe735; transform:scale(1.16); }
.bright-type { color:#8d62ed!important; }.bright-play { background:linear-gradient(135deg,#ff4fa3,#8247df); box-shadow:0 8px 0 #7e276e,0 14px 30px #d744a655; }
.race-card{display:flex;flex-direction:column;min-height:590px}.race-picture{position:relative;min-height:330px;overflow:hidden;background:linear-gradient(#70d8ef 0 55%,#d79850 55%)}.race-picture:after{content:'';position:absolute;left:0;right:0;bottom:30px;border-bottom:7px dashed white}.race-animal{position:absolute;z-index:2;font-size:115px;filter:drop-shadow(0 9px 3px #3335)}.race-animal.one{left:10%;bottom:35px;transform:scaleX(-1)}.race-animal.two{left:47%;bottom:25px;transform:scaleX(-1)}.race-finish{position:absolute;right:5%;bottom:20px;font-size:135px}.race-type{color:#e16f33!important}.race-play{background:linear-gradient(135deg,#f19b2f,#e24a3d);box-shadow:0 8px 0 #9b3528,0 14px 30px #df733f55}
.coin-card{display:flex;flex-direction:column;min-height:590px}.coin-picture{position:relative;min-height:330px;overflow:hidden;background:linear-gradient(145deg,#7b45b9,#da4f9b)}.coin-picture:before{content:'';position:absolute;inset:55px 35px 25px;border:7px solid #ffc9ea;border-radius:22px;background:linear-gradient(#5a357b,#9c6195)}.coin{position:absolute;z-index:2;font-size:74px;filter:drop-shadow(0 8px 3px #351b5a88)}.c1{left:18%;bottom:45px}.c2{left:43%;bottom:70px}.c3{right:16%;bottom:42px}.pusher-bar{position:absolute;z-index:1;left:12%;right:12%;top:105px;height:55px;border:6px solid #ffe3f5;border-radius:12px;background:#a36ca0;box-shadow:0 10px #5f3769}.coin-type{color:#d64a91!important}.coin-play{background:linear-gradient(135deg,#ec4e9a,#7544d0);box-shadow:0 8px 0 #7d2a72,0 14px 30px #b64ba655}
.kart-card{display:flex;flex-direction:column;min-height:590px}.kart-picture{position:relative;min-height:330px;overflow:hidden;background:linear-gradient(#75d8f0 0 38%,#65c76e 38%)}.kart-picture:before{content:'';position:absolute;left:20%;right:20%;top:0;bottom:0;background:#555b62;transform:perspective(300px) rotateX(12deg);border-left:8px solid white;border-right:8px solid white}.kart{position:absolute;z-index:2;font-size:78px;filter:drop-shadow(0 8px 3px #3336)}.k1{left:16%;bottom:33px}.k2{right:12%;top:68px}.banana{position:absolute;z-index:3;left:51%;bottom:95px;font-size:60px}.kart-type{color:#e14d3e!important}.kart-play{background:linear-gradient(135deg,#ed4d3d,#7245cd);box-shadow:0 8px 0 #8e302c,0 14px 30px #a8436b55}
.game-type { color:#37a767!important; font-size:12px!important; letter-spacing:1.5px; font-weight:700; }
.game-info h3,.coming-soon h3 { font-size:36px; }
.game-info p,.coming-soon p { color:#64798b; line-height:1.5; }
.play-button { padding:15px 20px; width:fit-content; }
.coming-soon { grid-column:1/-1; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:25px; border:3px dashed #cbbff3; background:#f6f2ff; }
.mystery { width:70px; height:70px; display:grid; place-items:center; color:white; font:800 45px 'Baloo 2'; background:#b7a6eb; border-radius:22px; transform:rotate(6deg); margin-bottom:12px; }
.coming-soon > span { margin-top:10px; color:var(--purple); font-size:13px; letter-spacing:2px; font-weight:700; }
.about { width:min(1060px,90vw); margin:0 auto 100px; padding:42px 50px; display:grid; grid-template-columns:auto 1fr 1.2fr; align-items:center; gap:30px; border-radius:30px; color:white; background:linear-gradient(135deg,#5936c9,#446fee); box-shadow:0 14px 0 #352092; }
.about-icon { font-size:58px; }.about h2 { font-size:31px; }.about p:last-child { line-height:1.6; color:#e3e6ff; }
footer { padding:30px max(4vw,calc((100vw - 1180px)/2)); display:flex; justify-content:space-between; background:var(--ink); color:#fff; }
footer span { color:#9eb1c1; }
.friends-page { min-height:100vh; background:linear-gradient(145deg,#eafaff,#f5eeff 55%,#fff0f5); }
.friends-main { width:min(1050px,92vw); margin:35px auto 90px; }.friends-hero { display:flex; align-items:center; justify-content:center; gap:35px; padding:45px; border-radius:35px; background:linear-gradient(135deg,#d9f7ff,#efe3ff); }.friends-hero>span { font-size:130px; }.friends-hero h1 { font-size:clamp(45px,7vw,75px); }.friends-hero h1 em { color:var(--purple); font-style:normal; }.friends-hero p:last-child { color:#667b8e; font-size:18px; }
.friends-box { margin-top:32px; padding:30px; border-radius:28px; background:white; box-shadow:0 12px 35px #21395618; }.add-friend { display:flex; align-items:center; justify-content:space-between; gap:20px; }.add-friend h2,.friend-games h2 { font-size:36px; }.add-friend form { display:flex; gap:8px; }.add-friend input { padding:12px 15px; border:3px solid #d8cdf7; border-radius:13px; font:600 16px Fredoka; outline:0; }.add-friend input:focus { border-color:var(--purple); }.add-friend button { padding:11px 16px; border:0; border-radius:12px; color:white; background:var(--purple); font:700 14px Fredoka; cursor:pointer; }
.friends-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:13px; margin-top:25px; }.friend-card { display:flex; align-items:center; gap:10px; padding:12px; border-radius:15px; background:#f4f0ff; }.friend-card>span { font-size:36px; }.friend-card b { flex:1; }.friend-card button { border:0; color:#a47fb2; background:transparent; font-size:25px; cursor:pointer; }.no-friends { grid-column:1/-1; padding:25px; text-align:center; color:#8493a0; }
.friend-games { margin-top:35px; text-align:center; }.friend-games>div { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:18px; }.friend-games a { padding:14px 18px; border-radius:14px; color:white; background:linear-gradient(135deg,var(--purple),var(--blue)); text-decoration:none; font-weight:700; box-shadow:0 5px #402497; }
@media(max-width:820px){ .hero{grid-template-columns:1fr;text-align:center;padding-top:65px}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-art{min-height:370px}.game-grid{grid-template-columns:1fr}.featured,.bright-card{grid-template-columns:1fr}.game-picture,.bright-picture{min-height:310px}.about{grid-template-columns:auto 1fr}.about>p:last-child{grid-column:1/-1}.game-library{padding-top:70px} }
@media(max-width:520px){ nav{gap:15px}.site-header{height:125px;padding:50px 0 0}.logo{font-size:22px}.logo-controller{width:40px;height:40px}.hero{border-radius:0 0 35px 35px;padding:45px 20px}.hero-art{min-height:300px}.planet-ring{width:265px;height:265px}.planet-ring::after{width:310px;left:-44px;top:76px}.mascot{width:190px;height:190px;font-size:120px}.floating-icon{width:58px;height:58px;font-size:27px}.section-heading{align-items:start;flex-direction:column}.featured{display:block}.game-info{padding:27px 23px}.about{padding:30px 25px;grid-template-columns:1fr;text-align:center}.about>p:last-child{grid-column:auto}footer{gap:15px;flex-direction:column;text-align:center} }
@media(max-width:620px){.friends-hero{padding:28px 18px;gap:15px;text-align:center;flex-direction:column}.friends-hero>span{font-size:80px}.add-friend{align-items:stretch;flex-direction:column}.add-friend form{flex-direction:column}.friends-page .site-header{padding-right:0}}