/* Home: the sea runs all the way down behind the genre lists (shallow turquoise -> deep navy). */
.undersea{position:relative;isolation:isolate;
  --us0:36,53,68;
  background:linear-gradient(180deg,rgba(var(--us0),0) 0,rgba(var(--us0),.85) 90px,rgb(var(--us0)) 170px,#1f3040 14%,#192838 30%,#121e2c 50%,#0c1521 70%,#070d17 86%,#04070d 100%)}
.cove[data-sky="day"] + .undersea{--us0:58,88,104}
.undersea::after{display:none;content:"";position:absolute;left:0;right:0;top:0;height:1400px;z-index:0;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .045' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75  0 0 0 0 .85  0 0 0 0 .9  0 0 0 1.6 -.85'/%3E%3C/filter%3E%3Crect width='600' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask:linear-gradient(transparent 0,#000 60px,rgba(0,0,0,.6) 500px,transparent);mask:linear-gradient(transparent 0,#000 60px,rgba(0,0,0,.6) 500px,transparent)}
.undersea::before{display:none;content:"";position:absolute;inset:0 0 auto;height:900px;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 8%,rgba(200,225,235,.04) 11%,transparent 16%,transparent 34%,rgba(200,225,235,.03) 38%,transparent 45%,transparent 61%,rgba(200,225,235,.035) 63%,transparent 67%,transparent 82%,rgba(200,225,235,.025) 87%,transparent 93%);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.us-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5;filter:saturate(.45) brightness(.75) hue-rotate(-8deg)}
.us-deco svg{position:absolute;display:block;overflow:visible}
.us-deco .fish{animation:usSwim 26s linear infinite}
.us-deco .fish.r{animation-name:usSwimR;animation-duration:34s}
.us-deco .bub{animation:usBub 9s ease-in infinite;opacity:.0}
@keyframes usSwim{0%{transform:translateX(0)}50%{transform:translateX(-60px) translateY(8px)}100%{transform:translateX(0)}}
@keyframes usSwimR{0%{transform:translateX(0)}50%{transform:translateX(70px) translateY(-6px)}100%{transform:translateX(0)}}
@keyframes usBub{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-260px);opacity:0}}
.us-deco .sway{transform-origin:50% 100%;animation:usSway 6s ease-in-out infinite alternate}
@keyframes usSway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.us-deco *{animation:none!important}.us-deco .bub{opacity:.6}}
.undersea .genres{position:relative;z-index:2;padding-top:120px}
.undersea .gn-lead,.undersea .gn-h{color:#fffaf0;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.35)}
.undersea .gn-n{color:#d6f3f2;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.undersea .gn-grid .gtile{height:100%;padding:8px 8px 12px;border-radius:18px;background:rgba(6,14,22,.58);
  box-shadow:inset 0 0 0 1.5px rgba(170,200,215,.16),0 10px 24px -14px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.undersea .gn-grid .gt-art{border-radius:12px}
.undersea .gn-grid .gt-body{padding:10px 4px 0}
.undersea .gn-grid .gt-body b{color:#ffe7a8}
.undersea .gn-grid .gt-body span{color:#cfe6ea}
.undersea .gn-all{position:relative}
/* the island sits right on top of the games */
@media (min-width:640px){
  .cove.no-row{height:58vh;height:58svh;min-height:420px;max-height:600px}
  .cove.no-row + .undersea{margin-top:-150px}
}
@media (min-width:640px) and (orientation:portrait){.cove.no-row{height:44vh;height:44svh;min-height:420px}}
@media (max-width:639px){.cove.no-row + .undersea{margin-top:-46vh;margin-top:-46svh}.undersea .genres{margin-top:0!important;padding-top:110px}
  .undersea .gn-grid .gtile{padding:6px 6px 10px;border-radius:14px}}
@media (max-width:639px) and (max-height:799px){.cove.no-row + .undersea{margin-top:-360px}}
.undersea .genres{margin-top:0}
/* Game page: the game name sits on a ribbon plaque */
body:not(.scene) main .gt h1#gTitle{position:relative;display:inline-block;margin:0 22px;padding:9px 22px 10px;border:3px solid #143837;border-radius:14px;
  font-family:"Fredoka",var(--text),sans-serif;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:.01em;color:#163f3d;
  text-shadow:0 1px 0 rgba(255,255,255,.6);background:linear-gradient(#fffaea,#f9ecca 55%,#f0dcae);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 4px 0 #143837,0 8px 16px rgba(0,0,0,.35);z-index:1;max-width:calc(100vw - 150px);overflow-wrap:anywhere}
body:not(.scene) main .gt h1#gTitle::before,body:not(.scene) main .gt h1#gTitle::after{content:"";position:absolute;top:12px;bottom:-6px;width:30px;z-index:-1;
  background:linear-gradient(#e9cf96,#d9b670);border:3px solid #143837;box-shadow:0 4px 0 #143837}
body:not(.scene) main .gt h1#gTitle::before{left:-22px;border-right:0;border-radius:6px 0 0 6px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%)}
body:not(.scene) main .gt h1#gTitle::after{right:-22px;border-left:0;border-radius:0 6px 6px 0;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%)}
@media (max-width:639px){body:not(.scene) main .gt h1#gTitle{font-size:19px;padding:7px 14px 8px;border-radius:11px;margin:0 16px;border-width:2.5px}
  body:not(.scene) main .gt h1#gTitle::before,body:not(.scene) main .gt h1#gTitle::after{width:22px;top:9px}
  body:not(.scene) main .gt h1#gTitle::before{left:-16px}body:not(.scene) main .gt h1#gTitle::after{right:-16px}}

/* Hero + header buttons (Oct 29): one look everywhere, matching the "Install the app" button
   (Fredoka 700, cream gradient, dark teal rim, rounded 14px, chunky drop shadow). No first-visit popup. */
.lh-coach{display:none!important}
.cove .lh-tip,.cove .sh-link .sh-tip{font:700 16px/1 "Fredoka",var(--text),sans-serif!important;letter-spacing:.01em!important;text-transform:none!important;color:#163f3d!important;
  border-radius:14px!important;border:3px solid #143837!important;background:linear-gradient(#fff6dc,#f6e3b4 55%,#ecd39a)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 4px 0 #143837,0 8px 16px rgba(0,0,0,.4)!important;text-shadow:none!important;padding:7px 13px 8px!important}
.cove .lh-link:hover .lh-tip,.cove .lh-link:focus-visible .lh-tip,.cove .sh-link:hover .sh-tip,.cove .sh-link:focus-visible .sh-tip{background:linear-gradient(#fffbea,#fbecc4 55%,#f2dca8)!important}
.cove .lh-link:focus-visible{outline:3px solid #ffd77a;outline-offset:4px;border-radius:12px}
/* the beacon breathes so the lighthouse invites a tap without a popup */
.cove .lh-glow{animation:lhBeacon 2.8s ease-in-out infinite!important}
@keyframes lhBeacon{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){.cove .lh-glow{animation:none!important;opacity:.8}}
@media (max-width:380px){body:not(.scene) main .gt h1#gTitle{font-size:16px;padding:6px 10px 7px;white-space:nowrap}}