.home-content { height:57%; gap:7px }
.top-actions { display:flex; align-items:center; gap:7px }
.top-gems,.header-gems { display:flex!important; flex-direction:row!important; align-items:center; justify-content:center; gap:5px; min-width:58px; height:36px; padding:0 10px; border-radius:20px; background:linear-gradient(135deg,#40326eaa,#261f4dcc); border:1px solid #b59aff66; backdrop-filter:blur(9px); box-shadow:0 5px 15px #09051e55 }
.top-gems span,.header-gems span { color:#b99aff; font-size:15px; text-shadow:0 0 9px #9c78ff }.top-gems strong,.header-gems strong { color:#fff; font:800 12px Manrope }
.social-row { display:grid; grid-template-columns:1fr auto; gap:8px }
.leaderboard-button { min-height:38px; display:flex; align-items:center; gap:8px; padding:6px 10px; text-align:left; border-radius:12px; background:#ffffff0b; border:1px solid #ffffff15 }
.leaderboard-button > span { font-size:17px }.leaderboard-button div { display:flex; flex:1; flex-direction:column }.leaderboard-button small { color:#8998af; font-size:7px; letter-spacing:1px }.leaderboard-button strong { font-size:10px }.leaderboard-button > b { color:#f6b66c; font-size:9px }
.gems-pill,.game-gems { display:flex; align-items:center; justify-content:center; gap:5px; padding:0 10px; border-radius:12px; background:#302951; border:1px solid #917bed55 }.gems-pill span,.game-gems span { color:#a98aff; text-shadow:0 0 10px #9877ff; font-size:15px }.gems-pill strong,.game-gems strong { font-size:11px }
.boosters { display:grid; grid-template-columns:repeat(3,1fr) auto; gap:6px; margin:0 16px 8px }
.boosters button { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:4px; padding:6px; border-radius:10px; background:#ffffff0a; border:1px solid #ffffff15; text-align:left }
.boosters button > span { grid-row:1 / 3; color:#86dfd1; font-size:17px }.boosters button b { font-size:6px; line-height:7px; color:#dae3ef }.boosters button small { font-size:7px; color:#ad92ff }
.game-gems { border-radius:10px; padding:0 7px }
.game-topbar { grid-template-columns:40px 1fr 1fr auto }
.header-gems { min-width:52px; height:32px; padding:0 8px }
.level-card { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:8px; min-height:45px; padding:6px 10px; border-radius:13px; text-align:left; background:linear-gradient(100deg,#25415a,#192b46); border:1px solid #65d5c63d }.level-number { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(145deg,#76dfcf,#2b9b91); box-shadow:inset 0 1px #c6fff6; font:800 15px Manrope }.level-card div { display:flex; flex-direction:column }.level-card small { font-size:6px; letter-spacing:1px; color:#8fa1b7 }.level-card strong { font-size:10px }.level-card i { width:100%; height:3px; margin-top:3px; border-radius:4px; background:#ffffff18; overflow:hidden }.level-card i span { display:block; width:62%; height:100%; background:#67d9c9 }.level-card > b { font-size:6px; color:#76dfcf }
.level-progress { position:relative; height:8px; margin:5px 20px 8px; border-radius:8px; background:#ffffff12; overflow:visible }.level-progress > span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5dd5c8,#9be9b8); transition:.35s }.level-progress b { position:absolute; right:3px; top:-13px; color:#9eacc0; font-size:7px }
.game-goal { white-space:nowrap; font-size:7px }.game-goal span { color:#66d7c9; padding:0 3px }.game-goal b { color:#ffbd70 }
.levels-modal { max-height:min(720px,86dvh) }.levels-modal > p { font-size:7px; letter-spacing:1px; color:#8fa0b8 }.levels-close { position:absolute; right:13px; top:10px; background:none; font-size:25px; color:#8ea0b8 }.level-map { display:grid; gap:6px; margin-top:15px; max-height:55dvh; overflow:auto; padding-right:3px }.level-map > div { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:8px; padding:8px; border-radius:11px; background:#ffffff09; text-align:left }.level-map > div > span { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:#263a55; font-weight:800 }.level-map div div { display:flex; flex-direction:column }.level-map small { color:#8495ac; font-size:6px; letter-spacing:1px }.level-map strong { font-size:10px }.level-map div > b { font-size:6px; color:#71839b }.level-map .done > span { background:#276b65; color:#82eadb }.level-map .active { background:#6bd8c31d; border:1px solid #6bd8c366 }.level-map .active > span { background:linear-gradient(145deg,#75dfd0,#309c91) }.level-map .active > b { color:#7be3d4 }.level-map .locked { opacity:.48 }
.success-modal .success-stars { color:#ffd06d; font-size:24px; letter-spacing:6px; text-shadow:0 0 16px #ffb64b }.success-reward { display:flex; justify-content:center; gap:8px; margin:18px; color:#c2a5ff }.success-modal #nextLevelButton { width:100%; border-radius:14px; padding:13px; background:linear-gradient(#ffb76c,#ed765c); box-shadow:0 5px 0 #9d4145; font-weight:800 }
.rules-link { align-self:center; background:none; color:#91a2b9; font-size:7px; font-weight:800; letter-spacing:1.2px; padding:0 }.rules-link span { display:inline-grid; place-items:center; width:15px; height:15px; margin-right:4px; border:1px solid #71849e; border-radius:50%; color:#f2b66e }
.rules-close { position:absolute; right:13px; top:10px; background:none; color:#8ea0b8; font-size:25px }.rules-intro { color:#a8b5c8; font-size:10px }.rules-list { display:grid; gap:8px; margin:17px 0 }.rules-list > div { display:grid; grid-template-columns:24px 31px 1fr; gap:7px; align-items:center; text-align:left; padding:8px; border-radius:12px; background:#ffffff09 }.rules-list div > span { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:#ed805e; font-size:9px; font-weight:800 }.rules-list i { color:#74d9cc; font-size:20px; text-align:center; font-style:normal }.rules-list section { display:flex; flex-direction:column }.rules-list strong { font-size:10px }.rules-list small { color:#8fa0b7; font-size:8px; line-height:11px }.rules-tip { display:flex; flex-direction:column; padding:9px; border-radius:10px; background:#9a7cff13; border:1px solid #9a7cff3b }.rules-tip b { color:#b89bff; font-size:8px }.rules-tip span { color:#9aa9bd; font-size:8px }.rules-modal #understoodButton { width:100%; margin-top:15px; padding:12px; border-radius:13px; background:linear-gradient(#ffb86d,#eb775d); box-shadow:0 4px 0 #9e4145; font-weight:800; font-size:11px }
.hint-cell { background:#ffd270!important; box-shadow:0 0 16px #ffd270,inset 0 0 0 2px white!important; animation:hintPulse .55s ease-in-out infinite alternate }
.placement-help { display:flex; flex-direction:column; align-items:center; height:42px; margin:-2px 20px -7px; color:#dfe8f5; transition:.3s; pointer-events:none }.placement-help span { color:#78ded0; font-size:21px; line-height:15px; animation:guideBounce .8s ease-in-out infinite alternate }.placement-help b { font-size:8px; letter-spacing:1.2px }.placement-help small { color:#8496af; font-size:7px }.placement-help.is-hidden { height:0; opacity:0; margin-bottom:0; overflow:hidden }
.pieces .piece:first-child:not(.used) { border-color:#76d9cd66; box-shadow:0 0 18px #53cfc12c; animation:pieceInvite 1.1s ease-in-out infinite alternate }
.placement-preview { background:#8af2df!important; box-shadow:0 0 18px #67dfd2,inset 0 0 0 2px #eaffff!important; animation:previewPop .32s ease-out }
.line-clear { background:#fff1a4!important; box-shadow:0 0 20px #ffe37d!important; animation:lineClear .38s ease-in-out }
.leaderboard-modal p { font-size:8px; letter-spacing:1.4px; color:#8fa0b8 }.ranking { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:7px }.ranking li { display:grid; grid-template-columns:25px 1fr auto; align-items:center; text-align:left; padding:10px; border-radius:11px; background:#ffffff09 }.ranking li > b { color:#8191a9 }.ranking li span { font-size:12px }.ranking li strong { color:#ffd073; font-size:11px }.ranking .is-player { background:linear-gradient(90deg,#6f5ddb55,#9b6ae522); border:1px solid #a58aff66 }.ranking .is-player > b { color:#c2adff }.leaderboard-close { position:absolute; top:10px; right:13px; background:none; font-size:25px; color:#8ea0b8 }
.leaderboard-modal{max-height:min(760px,90dvh)}.ranking-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px auto;width:160px;padding:3px;border-radius:10px;background:#071329}.ranking-tabs button{padding:7px;background:none;color:#778aa3;border-radius:8px;font-size:7px;font-weight:800}.ranking-tabs .active{background:#2b405e;color:white}.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:5px;margin:14px 0 18px}.podium>div{display:flex;flex-direction:column;align-items:center;padding:9px 3px;border-radius:12px 12px 5px 5px;background:#ffffff09}.podium .first{padding-top:14px;background:linear-gradient(#ffd66e2c,#ffffff09)}.podium span{font-size:17px}.podium i{display:grid;place-items:center;width:31px;height:31px;margin:4px;border-radius:50%;background:linear-gradient(145deg,#75d9ce,#337d91);font-size:8px;font-style:normal;font-weight:800}.podium .first i{width:39px;height:39px;background:linear-gradient(145deg,#ffc875,#e7785e)}.podium strong{font-size:9px}.podium b{color:#ffd073;font-size:8px}.leaderboard-modal .ranking{margin-top:8px;max-height:235px;overflow:auto}
@keyframes hintPulse { to { scale:.86; opacity:.72 } }
@keyframes guideBounce { to { transform:translateY(-5px) } }
@keyframes pieceInvite { to { transform:translateY(-4px); background:#5dd9c515 } }
@keyframes previewPop { from { scale:.55 } to { scale:1 } }
@keyframes lineClear { 50% { scale:1.18; filter:brightness(1.5) } to { scale:.1; opacity:0 } }
@media(max-height:740px) { .home-content { height:63%; gap:4px }.goal-card { display:none }.boosters { margin-bottom:3px }.pieces { height:57px; margin-top:5px }.placement-help { height:34px }.energy { margin-bottom:3px }.game-goal { margin-top:2px }.grid { width:min(69vh,310px) } }