/* ============ GRAVITY SHIFT - ALL STYLES ============ */ /* Merged from: main style block + all inline screen style blocks */ /* ============ BLOCK 1 ============ */ /* ============ DESIGN SYSTEM ============ */ :root{ --bg:#EAE3D6; /* warm beige */ --bg-soft:#F3EEE4; /* off-white */ --stone:#A8A29A; /* soft stone gray */ --ink:#4A463F; /* warm dark text */ --ink-soft:#8B857A; --moss:#9CAF88; /* muted moss green */ --moss-deep:#7E9370; --sky:#C7DFEC; /* light sky blue */ --sky-deep:#A9CBDD; --card:rgba(255,255,253,.84); --card-solid:#FDFCF8; --orange:#E8A87C; /* soft orange accent */ --orange-deep:#DE9563; --gold:#E3C078; /* collectibles */ --cyan:#7EC8D3; /* interactive */ --cyan-deep:#5FB3C0; --shadow-lg:0 22px 48px rgba(94,82,60,.20); --shadow-md:0 10px 26px rgba(94,82,60,.16); --shadow-sm:0 4px 12px rgba(94,82,60,.12); --r-lg:28px; --r-md:20px; --r-sm:14px; --ease:cubic-bezier(.34,1.4,.44,1); --ease-soft:cubic-bezier(.4,0,.2,1); } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} button:focus{outline:none} html,body{height:100dvh} body{ font-family:'Quicksand',-apple-system,'SF Pro Rounded','Segoe UI',sans-serif; background:linear-gradient(160deg,#DDD5C4,#CFC6B2); color:var(--ink); display:flex;align-items:center;justify-content:center; min-height:100dvh;height:100dvh;overflow:hidden; user-select:none;-webkit-user-select:none; } /* ============ PHONE FRAME ============ */ #phone{ position:relative;width:390px;height:844px;max-height:96vh; border-radius:52px;overflow:hidden; background:linear-gradient(180deg,var(--sky) 0%,var(--bg-soft) 46%,var(--bg) 100%); box-shadow:0 40px 90px rgba(60,50,35,.35),0 0 0 10px #3E3A34,0 0 0 12px #55504a; } #phone{color:var(--ink)} /* on an actual phone/tablet turned sideways, fill the screen instead of staying a small portrait mockup floating in the middle of a wide viewport. Driven by a JS-toggled class (see bottom of file) rather than a CSS media query — orientation/hover/pointer media features were not firing reliably across the browsers this got tested in, so this checks window.innerWidth vs innerHeight directly at runtime instead, which can't be ambiguous. */ body.gs-landscape{padding:0} body.gs-landscape{align-items:stretch} body.gs-landscape #phone{width:100%;height:100dvh;max-height:100dvh;max-width:100%;border-radius:0;box-shadow:none} /* dialog cards (pause/victory/game-over/profile) were sized for a narrow portrait phone — at 280-340px wide they float in the middle of a wide landscape screen with huge dead space either side. Give them more room and lay the pause menu's 4 stacked buttons out in a grid like the home screen already does, instead of one tall single column. */ body.gs-landscape .pause-card{width:min(80vw,420px)} body.gs-landscape .win-card{width:min(80vw,460px)} body.gs-landscape #ovl-pause .pause-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:26px} body.gs-landscape #ovl-pause .pause-card .btn{margin-bottom:0} body.gs-landscape #ovl-pause #hudWorld,body.gs-landscape #ovl-pause #hudName,body.gs-landscape #ovl-pause #pStats,body.gs-landscape #ovl-pause #pResume,body.gs-landscape #ovl-pause #pExit{grid-column:1/-1} body.gs-landscape .win-stats{grid-template-columns:repeat(4,1fr)} /* home hero art: the island+robot illustration and its surrounding padding were sized for a tall portrait screen; on a short landscape viewport they don't fit and the Play button ends up overlapping the island */ body.gs-landscape #scr-home .home-top{padding:14px 20px 0} body.gs-landscape .island-wrap{width:170px} body.gs-landscape .island-shadow{bottom:-22px;width:110px;height:16px;margin-left:-55px} body.gs-landscape .home-menu{padding:0 30px;gap:8px} body.gs-landscape .home-currency{padding:8px 0 14px} #phone.night{--sky:#3A4A66;--bg:#232733;--bg-soft:#2A2E3B;--card:rgba(44,47,60,.85);--card-solid:#323543;--ink:#E9E7E0;--ink-soft:#9EA0AC;--stone:#7A7E8C;--shadow-lg:0 22px 48px rgba(0,0,0,.45);--shadow-md:0 10px 26px rgba(0,0,0,.4);--shadow-sm:0 4px 12px rgba(0,0,0,.35)} #phone.night .cloud{background:rgba(160,170,195,.3)} #phone.night .lvl{background:rgba(255,255,255,.12);color:var(--ink)} #phone.night .lvl.lock{background:rgba(255,255,255,.05);color:#5d616e} #phone.night .g-dir{background:rgba(60,64,80,.8);color:#E9E7E0} #phone.night .stat,#phone.night .reward{background:rgba(255,255,255,.08)} #phone.night .seg button.on,#phone.night .shop-tabs button.on{background:#3E4252;color:var(--ink)} #phone.night .shop-tabs button{background:rgba(255,255,255,.08)} #phone.night .toggle{background:rgba(255,255,255,.15)} #phone.night .day{color:var(--ink)} #phone.night .day.future{background:rgba(255,255,255,.06);color:#6b6f7c} #phone.night .load-track{background:rgba(255,255,255,.15)} @media (max-width:430px),(max-height:880px){ #phone{width:100vw;height:100vh;max-height:100vh;border-radius:0;box-shadow:none} #phone{height:100dvh;max-height:100dvh} } /* ============ SCREENS & TRANSITIONS ============ */ .screen{ position:absolute;inset:0;display:flex;flex-direction:column; opacity:0;pointer-events:none;transform:translateY(14px) scale(.985); transition:opacity .5s var(--ease-soft),transform .55s var(--ease-soft); } .screen.active{opacity:1;pointer-events:auto;transform:none} /* overlays (pause, victory) sit above */ .overlay{ position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .4s var(--ease-soft); background:rgba(234,227,214,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .overlay.active{opacity:1;pointer-events:auto} .overlay .float-card{transform:translateY(26px) scale(.94);transition:transform .5s var(--ease)} .overlay.active .float-card{transform:none} /* ============ SHARED COMPONENTS ============ */ .float-card{ background:var(--card);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.7);border-radius:var(--r-lg); box-shadow:var(--shadow-lg); } .btn{ display:flex;align-items:center;justify-content:center;gap:10px; font-family:inherit;font-weight:700;font-size:17px;color:var(--ink); border:none;cursor:pointer;border-radius:var(--r-md); padding:16px 24px;background:var(--card-solid);box-shadow:var(--shadow-sm); transition:transform .22s var(--ease),box-shadow .22s,filter .22s; letter-spacing:.3px; } .btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-md)} .btn:active{transform:scale(.95)} .btn-primary{background:linear-gradient(135deg,var(--moss),var(--moss-deep));color:#fff;box-shadow:0 10px 24px rgba(126,147,112,.4)} .btn-accent{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;box-shadow:0 10px 24px rgba(222,149,99,.38)} .btn-cyan{background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));color:#fff;box-shadow:0 10px 24px rgba(95,179,192,.38)} .btn-ghost{background:rgba(255,255,255,.55);color:var(--ink-soft)} .icon-btn{ width:48px;height:48px;border-radius:16px;padding:0;flex:none; display:flex;align-items:center;justify-content:center;font-size:20px; } .chip{ display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px; background:var(--card);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm); font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.7); } .chip svg{flex:none} h1,h2,h3{font-weight:700;letter-spacing:.5px} .screen-title{font-size:24px;text-align:center} .subtle{color:var(--ink-soft);font-weight:600;font-size:13px} /* top bar used by sub-screens */ .topbar{display:flex;align-items:center;gap:12px;padding:54px 20px 8px;z-index:5} .topbar .screen-title{flex:1} /* ============ AMBIENT LAYERS (clouds & particles) ============ */ .clouds,.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden} .cloud{ position:absolute;background:rgba(255,255,255,.85);border-radius:999px; filter:blur(1px);animation:drift linear infinite; } .cloud::before,.cloud::after{content:'';position:absolute;background:inherit;border-radius:999px} .cloud::before{width:55%;height:120%;top:-55%;left:18%} .cloud::after{width:38%;height:90%;top:-35%;right:14%} @keyframes drift{from{transform:translateX(-160px)}to{transform:translateX(560px)}} .particle{ position:absolute;border-radius:50%;background:rgba(255,255,255,.9); animation:floatUp linear infinite; } @keyframes floatUp{ 0%{transform:translateY(0);opacity:0} 12%{opacity:.85}88%{opacity:.85} 100%{transform:translateY(-780px);opacity:0} } @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes bobShadow{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(.86);opacity:.22}} @keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(126,200,211,.45),var(--shadow-md)}50%{box-shadow:0 0 0 16px rgba(126,200,211,0),var(--shadow-md)}} @keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}} @keyframes spinSlow{to{transform:rotate(360deg)}} /* ============ SPLASH ============ */ #scr-splash{align-items:center;justify-content:center;background:linear-gradient(180deg,#BFD9E8 0%,#E6E0D1 70%,#EAE3D6 100%)} #phone.night #scr-splash{background:linear-gradient(180deg,#2c3a58 0%,#262b3a 70%,#232733 100%)} .splash-cube{width:120px;height:120px;margin-bottom:34px;animation:bob 4.5s ease-in-out infinite} .splash-logo{font-size:38px;letter-spacing:6px;font-weight:700;color:var(--ink)} .splash-logo span{color:var(--moss-deep)} .splash-sub{margin-top:10px;font-size:14px;letter-spacing:4px;color:var(--ink-soft);font-weight:600} .tap-hint{position:absolute;bottom:90px;font-size:15px;font-weight:700;color:var(--ink-soft);animation:tapPulse 2.2s ease-in-out infinite;letter-spacing:2px} @keyframes tapPulse{0%,100%{opacity:.35}50%{opacity:1}} /* ============ LOADING ============ */ #scr-loading{align-items:center;justify-content:center} .load-cube{width:76px;height:76px;animation:spinSlow 3.4s var(--ease-soft) infinite;margin-bottom:36px} .load-track{width:210px;height:8px;border-radius:99px;background:rgba(255,255,255,.6);overflow:hidden;box-shadow:inset 0 1px 3px rgba(94,82,60,.15)} .load-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--moss),var(--cyan));transition:width .3s var(--ease-soft)} .load-tip{margin-top:26px;font-size:13.5px;color:var(--ink-soft);font-weight:600;max-width:250px;text-align:center;line-height:1.5} /* ============ HOME ============ */ #scr-home .home-top{display:flex;align-items:center;justify-content:space-between;padding:56px 20px 0;z-index:6} .avatar{width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,var(--sky-deep),var(--cyan));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);border:2px solid rgba(255,255,255,.8);cursor:pointer;transition:transform .22s var(--ease)} .avatar:active{transform:scale(.92)} .home-top .right{display:flex;gap:10px} .island-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0} .island-wrap{position:relative;width:300px;animation:bob 5.5s ease-in-out infinite} .island-shadow{position:absolute;left:50%;bottom:-46px;width:190px;height:30px;margin-left:-95px;border-radius:50%;background:radial-gradient(ellipse,rgba(94,82,60,.4),transparent 70%);animation:bobShadow 5.5s ease-in-out infinite} .home-menu{display:flex;flex-direction:column;gap:12px;padding:0 44px;z-index:6} .home-menu .row{display:flex;gap:12px} .home-menu .row .btn{flex:1;font-size:15px;padding:14px 10px} .btn-play{font-size:21px;padding:19px;border-radius:24px} .home-currency{display:flex;justify-content:center;gap:12px;padding:20px 0 34px;z-index:6} .island-wrap.poke{animation:pokeBounce .6s var(--ease)} @keyframes pokeBounce{0%{transform:scale(1)}30%{transform:scale(.95,.9)}60%{transform:scale(1.04,1.07) translateY(-7px)}100%{transform:scale(1)}} #homeScene svg{transition:transform .3s var(--ease-soft)} /* ============ LEVEL SELECT ============ */ .worlds{flex:1;display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 52px;align-items:center;scrollbar-width:none;scroll-behavior:smooth} .worlds::-webkit-scrollbar{display:none} .world{flex:none;width:286px;scroll-snap-align:center;text-align:center;transition:transform .5s var(--ease-soft)} .world .isle{position:relative;animation:bob 6s ease-in-out infinite;margin-bottom:-6px} .world:nth-child(2) .isle{animation-delay:-2s} .world:nth-child(3) .isle{animation-delay:-4s} .world-card{padding:20px;border-radius:var(--r-lg)} .world-name{font-size:19px;margin-bottom:4px} .world-stats{display:flex;justify-content:center;gap:14px;margin:8px 0 12px;font-size:13px;font-weight:700;color:var(--ink-soft)} .prog{height:7px;border-radius:99px;background:rgba(94,82,60,.12);overflow:hidden;margin-bottom:14px} .prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--moss),var(--cyan))} .lvl-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:14px} .lvl{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.75);color:var(--ink);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .2s var(--ease)} .lvl:active{transform:scale(.88)} .lvl.done{background:var(--moss);color:#fff} .lvl.lock{background:rgba(168,162,154,.22);color:#B5AFA6;box-shadow:none;cursor:default} .world.locked{filter:grayscale(.5);opacity:.75} .world.locked .isle svg{opacity:.7} .lock-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-soft)} .pan-dots{display:flex;justify-content:center;gap:8px;padding:14px 0 36px} .pan-dots i{width:8px;height:8px;border-radius:50%;background:rgba(94,82,60,.2);transition:all .3s} .pan-dots i.on{background:var(--moss-deep);width:22px;border-radius:99px} /* ============ GAMEPLAY HUD ============ */ #scr-game{background:linear-gradient(180deg,#C7DFEC 0%,#EDE7DA 60%,#EAE3D6 100%)} #phone.night #scr-game{background:linear-gradient(180deg,#2c3a58 0%,#262b3a 60%,#232733 100%)} .hud-top{display:flex;align-items:center;justify-content:space-between;padding:56px 20px 0;z-index:6} .hud-level{text-align:center} .hud-level b{display:block;font-size:17px} .hud-level span{font-size:12px;color:var(--ink-soft);font-weight:700;letter-spacing:1.5px} .stage-3d{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden} .board-frame{position:relative;padding:0;width:100%;display:flex;justify-content:center;touch-action:none} .gl-wrap{display:flex;align-items:center;justify-content:center;width:100%} .gl-wrap canvas{display:block;touch-action:none} #scr-game .stage-3d{position:absolute;inset:0;z-index:1;overflow:hidden} #scr-game .board-frame{position:absolute;inset:0;padding:0;display:flex;align-items:center;justify-content:center} #scr-game .gl-wrap{width:100%;height:100%} #scr-game .hud-top{position:absolute;top:0;left:0;right:0;z-index:6} .hud-hearts{display:flex;gap:5px;justify-content:center;margin-top:4px} .hud-hearts svg{width:15px;height:14px;flex:none} .undo-dock{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6} .undo-dock .g-core{position:static;width:58px;height:58px;margin:0} .tut-banner{position:absolute;top:128px;left:26px;right:26px;z-index:6;background:rgba(255,255,253,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm);display:none;line-height:1.55;flex-direction:row;align-items:flex-start;gap:10px;text-align:left} .tut-close{flex-shrink:0;background:none;border:none;font-size:18px;color:var(--ink-soft);cursor:pointer;padding:0 2px;line-height:1;font-family:inherit;margin-top:-1px} #phone.night .tut-banner{background:rgba(50,53,67,.92)} #phone.night .icon-btn svg [stroke="#8B857A"]{stroke:#C9CBD4} #phone.night #btnPause svg rect{fill:#E9E7E0} #phone.night .btn-ghost{background:rgba(255,255,255,.12);color:var(--ink-soft)} #phone.night .prog{background:rgba(255,255,255,.12)} #phone.night .win-title{color:#A8C89A} #phone.night .coin-earn{background:rgba(227,192,120,.16)} #phone.night .g-toast{background:rgba(20,22,30,.92)} .hud-sub{font-size:11px;color:var(--ink-soft);font-weight:700;letter-spacing:1.2px;margin-top:2px} .gravity-dock{position:relative;height:210px;flex:none;display:flex;align-items:center;justify-content:center;z-index:6} .gravity-pad{position:relative;width:196px;height:196px} .g-core{ position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%; background:linear-gradient(145deg,#8FD4DE,#5FB3C0);border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 12px 28px rgba(95,179,192,.45),inset 0 2px 6px rgba(255,255,255,.5); animation:pulseGlow 3s ease-in-out infinite; transition:transform .25s var(--ease); } .g-core:active{transform:scale(.9)} .g-core svg{filter:drop-shadow(0 2px 3px rgba(0,60,70,.25))} .g-dir{ position:absolute;width:52px;height:52px;border-radius:18px;border:none;cursor:pointer; background:var(--card);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm); display:flex;align-items:center;justify-content:center;color:var(--ink); font-size:19px;transition:transform .22s var(--ease),background .22s,color .22s; border:1px solid rgba(255,255,255,.7); } .g-dir:active,.g-dir.hot{transform:scale(.85);background:var(--cyan);color:#fff} .g-up{left:50%;top:0;margin-left:-26px} .g-down{left:50%;bottom:0;margin-left:-26px} .g-left{left:0;top:50%;margin-top:-26px} .g-right{right:0;top:50%;margin-top:-26px} .hint-btn{position:relative} .hint-btn::after{content:attr(data-ct);position:absolute;top:-4px;right:-4px;width:19px;height:19px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)} .g-toast{position:absolute;left:50%;bottom:230px;transform:translateX(-50%);padding:9px 18px;border-radius:99px;background:rgba(74,70,63,.85);color:#fff;font-size:13.5px;font-weight:700;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;z-index:70;letter-spacing:.5px} .g-toast.show{opacity:1;transform:translateX(-50%) translateY(-8px)} /* landscape-only on-screen d-pad: thumb clusters at each bottom corner, hidden everywhere else (portrait mobile / desktop keep swipe-only) */ .land-ctrl{position:absolute;display:none;flex-direction:column;gap:14px;z-index:6} .land-ctrl .g-dir{position:static;width:56px;height:56px;font-size:22px} body.gs-landscape #scr-game .hud-top{padding:14px 18px 0} body.gs-landscape #scr-game .undo-dock{top:14px;bottom:auto;left:auto;right:130px;transform:none} /* relocated next to the camera/hint icons — match their size and calm the pulsing glow so it reads as a peer control, not a giant CTA */ body.gs-landscape #scr-game .undo-dock .g-core{width:48px;height:48px;box-shadow:var(--shadow-sm);animation:none} body.gs-landscape .land-ctrl{display:flex} body.gs-landscape .land-ctrl-left{left:max(16px,calc(env(safe-area-inset-left) + 8px));bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px))} body.gs-landscape .land-ctrl-right{right:max(16px,calc(env(safe-area-inset-right) + 8px));bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px))} /* ============ SETTINGS ============ */ .set-list{flex:1;overflow-y:auto;padding:18px 24px 40px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none} .set-list::-webkit-scrollbar{display:none} .set-card{display:flex;align-items:center;gap:14px;padding:17px 18px;border-radius:var(--r-md)} .set-ic{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none} .set-card .lbl{flex:1} .set-card .lbl b{display:block;font-size:16px} .set-card .lbl span{font-size:12.5px;color:var(--ink-soft);font-weight:600} .toggle{width:54px;height:31px;border-radius:99px;background:rgba(94,82,60,.18);border:none;position:relative;cursor:pointer;transition:background .3s;flex:none} .toggle::after{content:'';position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease)} .toggle.on{background:var(--moss)} .toggle.on::after{transform:translateX(23px)} .seg{display:flex;background:rgba(94,82,60,.1);border-radius:12px;padding:3px;gap:3px;flex:none} .seg button{border:none;background:transparent;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink-soft);padding:7px 11px;border-radius:9px;cursor:pointer;transition:all .25s} .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)} /* ============ SHOP ============ */ .shop-tabs{display:flex;gap:8px;padding:12px 24px 4px;z-index:5} .shop-tabs button{flex:1;border:none;font-family:inherit;font-weight:700;font-size:13px;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.5);color:var(--ink-soft);cursor:pointer;transition:all .25s} .shop-tabs button.on{background:var(--card-solid);color:var(--ink);box-shadow:var(--shadow-sm)} .shop-grid{flex:1;overflow-y:auto;padding:16px 24px 40px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start;scrollbar-width:none} .shop-grid::-webkit-scrollbar{display:none} .shop-item{padding:18px 14px;border-radius:var(--r-md);text-align:center;transition:transform .22s var(--ease)} .shop-item:active{transform:scale(.95)} .shop-item .art{height:74px;display:flex;align-items:center;justify-content:center;margin-bottom:10px} .shop-item b{display:block;font-size:14.5px;margin-bottom:2px} .shop-item .subtle{font-size:11.5px;margin-bottom:10px;display:block} .price{display:inline-flex;align-items:center;gap:6px;background:rgba(227,192,120,.22);padding:6px 14px;border-radius:99px;font-weight:700;font-size:13.5px;cursor:pointer;transition:transform .2s var(--ease)} .price:active{transform:scale(.88)} .price.owned{background:rgba(156,175,136,.25);color:var(--moss-deep)} .shop-note{text-align:center;padding:0 40px 30px;font-size:12px;color:var(--ink-soft);font-weight:600;line-height:1.5} /* ============ DAILY CHALLENGE ============ */ .daily-body{flex:1;overflow-y:auto;padding:16px 24px 40px;display:flex;flex-direction:column;gap:16px;scrollbar-width:none} .daily-body::-webkit-scrollbar{display:none} .streak-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-md)} .flame{width:52px;height:52px;border-radius:18px;background:rgba(232,168,124,.25);display:flex;align-items:center;justify-content:center;font-size:26px;animation:bob 3.5s ease-in-out infinite} .streak-card b{font-size:22px;display:block} .cal-card{padding:20px;border-radius:var(--r-lg)} .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:700} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center} .cal-grid .dow{font-size:10.5px;font-weight:700;color:var(--ink-soft);padding-bottom:4px} .day{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--ink)} .day.done{background:var(--moss);color:#fff} .day.miss{color:#C4BEB3} .day.today{background:var(--orange);color:#fff;box-shadow:0 0 0 3px rgba(232,168,124,.35);animation:pulseGlow 2.6s infinite} .day.future{color:#C4BEB3;background:rgba(255,255,255,.4)} .today-card{padding:22px;border-radius:var(--r-lg);text-align:center} .today-card .mini-isle{animation:bob 5s ease-in-out infinite;margin-bottom:6px} .rewards{display:flex;justify-content:center;gap:10px;margin:12px 0 16px} .reward{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.65);padding:8px 14px;border-radius:99px;font-size:13px;font-weight:700} /* ============ PAUSE OVERLAY ============ */ .pause-card{width:280px;padding:30px 26px;text-align:center} .pause-card h2{margin-bottom:22px;font-size:22px} .pause-card .btn{width:100%;margin-bottom:11px} .pause-card .btn:last-child{margin-bottom:0} /* ============ VICTORY OVERLAY ============ */ .win-card{width:312px;padding:30px 26px;text-align:center} .win-title{font-size:24px;color:var(--moss-deep);letter-spacing:2px} .win-stars{display:flex;justify-content:center;gap:14px;margin:18px 0 6px;height:64px;align-items:center} .win-stars svg{width:52px;height:52px;transform:scale(0);opacity:0} .win-stars svg:nth-child(2){width:64px;height:64px} #ovl-victory.active .win-stars svg.earn{animation:starPop .7s var(--ease) forwards} #ovl-victory.active .win-stars svg.dim{animation:dimIn .5s var(--ease-soft) forwards} .win-stars svg.dim path{fill:#D8D2C6;stroke:#CCC5B7} @keyframes dimIn{to{transform:scale(.8);opacity:.4}} @keyframes starPop{0%{transform:scale(0) rotate(-30deg);opacity:0}70%{transform:scale(1.25) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}} .win-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 20px} .stat{background:rgba(255,255,255,.65);border-radius:var(--r-sm);padding:12px 8px} .stat b{display:block;font-size:19px} .stat span{font-size:11.5px;color:var(--ink-soft);font-weight:700;letter-spacing:.6px} .win-actions{display:flex;gap:10px} .win-actions .btn{flex:1;padding:14px 8px;font-size:15px} .coin-earn{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink);background:rgba(227,192,120,.25);padding:7px 16px;border-radius:99px;font-size:14px} /* ============ MOBILE COMPACT (portrait phones) ============ */ /* When the viewport is short (iPhones with browser chrome visible), reduce spacing in the home screen so all menu items fit without scrolling */ @media (max-height:800px) and (max-width:430px) { #scr-home .home-top{padding:24px 20px 0} .island-wrap{width:220px} .island-shadow{bottom:-28px;width:140px;height:20px;margin-left:-70px} .home-menu{gap:8px;padding:0 32px} .home-menu .row .btn{padding:12px 10px} .btn-play{padding:16px;font-size:19px} .home-currency{padding:10px 0 18px} } /* Fix 5: landscape HUD top should respect side safe areas (notch / dynamic island) */ body.gs-landscape #scr-game .hud-top{ padding-left:max(18px,calc(env(safe-area-inset-left) + 10px)); padding-right:max(18px,calc(env(safe-area-inset-right) + 10px)); } /* Fix 6: On a real phone (viewport ≤ 430 px wide) always fill the screen — portrait or landscape. Removes the decorative phone-frame (rounded corners, shadow) that only makes sense on a desktop browser. dvh = dynamic viewport height (excludes Safari URL-bar chrome). */ @media (max-width:430px){ body{padding:0;align-items:stretch} #phone{ width:100% !important; height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; box-shadow:none !important; } } /* Fix 7: Landscape full-bleed + compact overlays for short landscape viewports */ @media (orientation:landscape) and (max-height:660px){ /* stretch instead of center so no body-background strips peek through */ body{padding:0;align-items:stretch} #phone{ width:100% !important; /* 100% of body, not 100vw (avoids scrollbar artifact) */ height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; box-shadow:none !important; } /* overlays: scrollable so popup content is never clipped off-screen */ .overlay{ align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 0; } /* compact win-card so it fits in ~340-390px landscape height */ .win-card{padding:12px 24px !important} .win-title{font-size:18px} .win-stars{height:46px;margin:8px 0 2px} .win-stars svg{width:36px;height:36px} .win-stars svg:nth-child(2){width:46px;height:46px} .coin-earn{padding:4px 12px;font-size:12px;margin-bottom:4px} .win-stats{margin:6px 0 8px} .stat{padding:8px 6px} .stat b{font-size:16px} /* compact pause card */ .pause-card{padding:12px 20px !important} .pause-card h2{margin-bottom:12px;font-size:18px} .pause-card .btn{padding:11px;margin-bottom:7px} }