/* Games section: each game brings its own world. Layers crossfade with scroll (opacity set by home.js). */
.tide{isolation:isolate;--c1:#7ad20e;--c2:#e8541c}
.tide-env{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(transparent,#000 18vh,#000 calc(100% - 24vh),transparent);mask:linear-gradient(transparent,#000 18vh,#000 calc(100% - 24vh),transparent)}
.tide-env-in{position:sticky;top:0;height:100vh;overflow:hidden}
.env{position:absolute;inset:0;opacity:0;will-change:opacity}
.env i{position:absolute;inset:0;animation-play-state:paused}
.tide.live .env.on i{animation-play-state:running}
.env-grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* BOGSAINT: drowned swamp light, drifting fog, embers rising off a pyre */
.env-bogsaint{background:radial-gradient(90% 70% at 25% 85%,#22300c 0,#0d1407 55%,#060904 100%)}
.env-bogsaint i:nth-child(1){inset:-20%;background:radial-gradient(40% 18% at 30% 60%,rgba(170,200,120,.13),transparent 70%),radial-gradient(35% 14% at 75% 40%,rgba(150,180,110,.1),transparent 70%);filter:blur(30px);animation:fog 26s ease-in-out infinite alternate}
.env-bogsaint i:nth-child(2){background:radial-gradient(50% 35% at 70% 105%,rgba(232,84,28,.45),transparent 70%);animation:ember 4s ease-in-out infinite alternate}
.env-bogsaint i:nth-child(3){background-image:radial-gradient(2px 2px at 20px 30px,#ff9a3c,transparent),radial-gradient(1.5px 1.5px at 90px 120px,#ffb15e,transparent),radial-gradient(2px 2px at 150px 70px,#e8541c,transparent);background-size:180px 180px;opacity:.55;-webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%);animation:rise 14s linear infinite}
@keyframes fog{to{transform:translateX(8%) translateY(-3%)}}
@keyframes ember{to{opacity:.55}}
@keyframes rise{to{background-position:0 -720px}}

/* PHOSPHOR: neon facility, pixel-grid floor, a scanline that glitches past */
.env-phosphor{background:radial-gradient(60% 50% at 75% 30%,rgba(22,180,255,.22),transparent 70%),radial-gradient(45% 40% at 15% 85%,rgba(255,90,31,.2),transparent 70%),#030a1c}
.env-phosphor i:nth-child(1){top:45%;left:-30%;right:-30%;bottom:-20%;background:repeating-linear-gradient(90deg,rgba(22,180,255,.16) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(22,180,255,.16) 0 1px,transparent 1px 48px);transform:perspective(500px) rotateX(62deg);transform-origin:top;-webkit-mask:linear-gradient(transparent,#000 50%);mask:linear-gradient(transparent,#000 50%);animation:gridrun 3s linear infinite}
.env-phosphor i:nth-child(2){background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.env-phosphor i:nth-child(3){height:14vh;top:-15%;bottom:auto;background:linear-gradient(transparent,rgba(22,180,255,.12) 45%,rgba(255,90,31,.08) 55%,transparent);animation:sweep 7s linear infinite}
@keyframes gridrun{to{background-position:0 48px,0 48px}}
@keyframes sweep{0%{top:-15%}92%{transform:none}93%{transform:translateX(12px) skewX(-8deg)}95%{transform:translateX(-8px)}97%{transform:none}100%{top:110%}}

/* SHIRAMI-X: a vertical shmup sky raining red and cyan bullets */
.env-shirami{background:radial-gradient(60% 45% at 50% -5%,rgba(255,59,78,.4),transparent 70%),radial-gradient(40% 40% at 85% 90%,rgba(56,225,255,.18),transparent 70%),#12040b}
.env-shirami i:nth-child(1){background-image:radial-gradient(3px 3px at 30px 40px,#ff3b4e,transparent),radial-gradient(3px 3px at 110px 90px,#38e1ff,transparent),radial-gradient(2px 2px at 70px 150px,#ffd1d6,transparent);background-size:140px 170px;opacity:.8;animation:rain 2.6s linear infinite}
.env-shirami i:nth-child(2){background-image:radial-gradient(5px 5px at 60px 60px,rgba(255,59,78,.7),transparent),radial-gradient(5px 5px at 170px 140px,rgba(56,225,255,.7),transparent);background-size:230px 230px;filter:blur(1px);animation:rain2 5s linear infinite}
.env-shirami i:nth-child(3){background:repeating-linear-gradient(90deg,transparent 0 22vw,rgba(56,225,255,.06) 22vw calc(22vw + 2px));animation:streak 1.2s linear infinite}
@keyframes rain{to{background-position:0 680px,0 680px,0 680px}}
@keyframes rain2{to{background-position:0 690px,0 690px}}
@keyframes streak{50%{opacity:.4}}

/* Rocket Sprocket: a cozy dusk sky with bursts going off over the water */
.env-rocketsprocket{background:linear-gradient(#120a30 0,#2a1556 45%,#5a1f63 75%,#ff2c7c 140%)}
.env-rocketsprocket i{inset:auto;width:46vmin;height:46vmin;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(255,214,56,.85) 0 2deg,transparent 2deg 15deg);-webkit-mask:radial-gradient(circle,transparent 18%,#000 30%,#000 50%,transparent 68%);mask:radial-gradient(circle,transparent 18%,#000 30%,#000 50%,transparent 68%);animation:burst 4.2s ease-out infinite}
.env-rocketsprocket i:nth-child(1){left:10%;top:12%}
.env-rocketsprocket i:nth-child(2){left:56%;top:4%;width:34vmin;height:34vmin;filter:hue-rotate(-60deg);animation-delay:1.4s}
.env-rocketsprocket i:nth-child(3){left:72%;top:36%;width:28vmin;height:28vmin;filter:hue-rotate(-110deg) saturate(1.4);animation-delay:2.8s}
@keyframes burst{0%{transform:scale(.15);opacity:0}8%{opacity:1}60%{opacity:.6}100%{transform:scale(1.05) translateY(6%);opacity:0}}

/* Stage frame picks up the active game's colours */
.tide-art{box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--c1) 45%,transparent),0 0 80px color-mix(in srgb,var(--c1) 22%,transparent);transition:box-shadow .8s}
.tide-dots li.on{background:var(--c1)}

/* Panels: real title text, each in its game's own voice */
.tide-game{gap:16px}
.tg-head{display:flex;align-items:center;gap:18px}
.tg-head .tide-logo{width:auto;max-width:150px;max-height:72px;padding-right:18px;border-right:1px solid rgba(232,244,255,.16)}
.tg-head .tide-logo.wide{max-width:170px;border-radius:6px}
.tg-title{font:800 clamp(28px,3vw,44px)/1 var(--disp);color:#fff}
.tg-genre{color:var(--mist);font-size:15px;margin-top:6px}
.tide-line{max-width:24ch}
.tg-body{color:var(--text);max-width:46ch}
.tg-facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;max-width:52ch}
.tg-facts li{font-size:14.5px;color:#dbe6f2;padding:6px 12px;border-radius:8px;background:rgba(4,7,12,.45);border:1px solid rgba(232,244,255,.12)}
.tg-facts b{color:#fff;font-weight:800;margin-right:2px}
.tg-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:6px}
.tg-buy .price{display:grid;margin-right:10px;font-size:15px;color:var(--text)}
.tg-buy .price strong{font:800 24px var(--disp);color:#fff}
.tg-buy .price s{color:var(--mist);margin-left:6px}
.tg-buy .price span{font-size:13px;color:var(--mist)}

.g-bogsaint .tg-title{font-family:Gothic,serif;font-weight:400;letter-spacing:.04em;color:#d6ef8a;text-shadow:0 0 24px rgba(122,210,14,.35)}
.g-bogsaint .tide-line{color:#ffb27a}
.g-bogsaint .tg-facts li{border-color:rgba(122,210,14,.28);background:rgba(16,26,6,.55)}
.g-phosphor .tg-title{font-family:Mono,monospace;font-weight:400;letter-spacing:.18em;color:#7fd8ff;text-shadow:0 0 18px rgba(22,180,255,.8),2px 0 rgba(255,90,31,.6)}
.g-phosphor .tide-line{font-family:Mono,monospace;font-weight:400;letter-spacing:.04em;color:#bfe9ff}
.g-phosphor .tg-facts li{font-family:Mono,monospace;border-color:rgba(22,180,255,.35);background:rgba(4,16,42,.6);border-radius:2px}
.g-shirami .tg-title{font-weight:900;transform:skewX(-10deg);transform-origin:left;text-shadow:-3px 0 rgba(255,59,78,.9),3px 0 rgba(56,225,255,.8)}
.g-shirami .tide-line{color:#ffd1d6}
.g-shirami .tg-facts li{border-color:rgba(255,59,78,.4);background:rgba(26,6,16,.6);border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.g-rocketsprocket .tg-title{font-family:'Exo 2',sans-serif;font-weight:900;color:#ffd638;transform:rotate(-2.5deg);transform-origin:left;text-shadow:3px 3px 0 #ff2c7c,6px 6px 0 rgba(22,13,56,.8)}
.g-rocketsprocket .tide-line{color:#ffe7a6}
.g-rocketsprocket .tg-facts li{border-color:rgba(255,44,124,.4);background:rgba(22,13,56,.55);border-radius:99px}

/* "And many more": an uneven mosaic of the rest of the library */
.more{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;padding:14vh 0 12vh}
.more-copy h2{font:800 clamp(28px,3.2vw,46px)/1.08 var(--disp);color:#fff;max-width:16ch}
.more-copy p{color:var(--text);max-width:44ch;margin:18px 0 26px}
.more-cta{display:flex;flex-wrap:wrap;gap:12px}
.more-wall{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:92px;grid-auto-flow:dense;gap:10px}
.mw-t a{position:relative;display:block;height:100%;border-radius:12px;overflow:hidden;text-decoration:none;background:#0a111c;border:1px solid rgba(232,244,255,.08);transition:transform .35s var(--ease),border-color .3s}
.mw-t a:hover,.mw-t a:focus-visible{transform:translateY(-3px);border-color:rgba(0,203,255,.5)}
.mw-t a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mw-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.mw-img a::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(4,7,12,.92))}
.mw-cap{position:absolute;left:12px;right:10px;bottom:10px;z-index:1;display:grid;gap:1px}
.mw-cap b{font:700 14px var(--body);color:#fff}
.mw-cap small{font-size:12px;color:var(--mist)}
.mw-icon img{position:absolute;left:12px;top:12px;width:40px;height:40px;object-fit:contain}
.mw-icon a,.mw-mono a{background:linear-gradient(160deg,#101a2a,#070b13)}
.mw-t .mw-mono{position:absolute;left:12px;top:12px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font:800 15px var(--disp);color:#0a111c;background:#ff7a00}
.mw-dev a::before{content:'Playtest';position:absolute;top:8px;right:8px;z-index:2;font-size:11px;font-weight:700;color:#0a111c;background:#c88cff;padding:2px 8px;border-radius:99px}
.mw-next a{display:grid;place-items:center;border-style:dashed;border-color:rgba(0,203,255,.45);background:rgba(0,203,255,.05)}
.mw-plus{font:800 30px var(--disp);color:var(--cyan);margin-bottom:24px}
.more-wall li:nth-child(1),.more-wall li:nth-child(3),.more-wall li:nth-child(8){grid-column:span 2;grid-row:span 2}
.more-wall li:nth-child(4),.more-wall li:nth-child(6),.more-wall li:nth-child(9),.more-wall li:nth-child(12){grid-column:span 2}

@media (max-width:900px){
  .more{grid-template-columns:1fr;gap:28px;padding:10vh 0 8vh}
  .more-wall{grid-template-columns:repeat(4,1fr);grid-auto-rows:84px}
  .tg-head .tide-logo{max-width:96px;max-height:52px;padding-right:12px}
  .tide-stage{background:none}
}
@media (max-width:520px){
  .more-wall{grid-template-columns:repeat(2,1fr)}
  .more-wall li{grid-column:span 1 !important;grid-row:span 1 !important}
  .more-wall li:nth-child(1),.more-wall li:nth-child(3){grid-column:span 2 !important;grid-row:span 2 !important}
}
@media (prefers-reduced-motion:reduce){.env i{animation:none !important}.env-rocketsprocket i{opacity:.35;transform:scale(.8)}}

/* Mana Pass: a notched chrome ticket that tags the section as a content pass */
.pass-ticket{display:inline-flex;align-items:stretch;margin-bottom:18px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
  --notch:radial-gradient(circle at 0 50%,transparent 9px,#000 9.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 9px,#000 9.5px) right/51% 100% no-repeat}
.pass-ticket>span{position:relative}
.pt-stub{display:grid;place-items:center;padding:0 14px 0 18px;font:800 14px var(--disp);letter-spacing:.06em;color:#0a111c;
  background:linear-gradient(180deg,#f4f8ff,#aeb9c8 55%,#e6edf7);border-radius:10px 0 0 10px;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 8px,#000 8.5px);mask:radial-gradient(circle at 0 50%,transparent 8px,#000 8.5px)}
.pt-main{display:grid;gap:1px;padding:8px 22px 8px 16px;border-radius:0 10px 10px 0;border-left:2px dashed rgba(10,17,28,.55);
  background:linear-gradient(180deg,#1a2540,#0c1322);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(232,244,255,.14);
  -webkit-mask:radial-gradient(circle at 100% 50%,transparent 8px,#000 8.5px);mask:radial-gradient(circle at 100% 50%,transparent 8px,#000 8.5px)}
.pt-main::after{content:'';position:absolute;left:16px;right:22px;bottom:5px;height:3px;border-radius:2px;background:linear-gradient(90deg,#ff8a1e,#ff2c7c 50%,#8a5cff)}
.pt-main b{font:800 16px var(--disp);color:#fff;letter-spacing:.04em}
.pt-main small{font-size:12px;color:var(--mist);margin-bottom:6px}

/* The sticky trailer frame lives in .tide-run so it lets go before the library wall */
.tide{display:block}
.tide-run{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 64px}
.more{padding-left:0;padding-right:0}
@media (max-width:900px){.tide-run{grid-template-columns:1fr}}

/* Phones: no sticky frame; each game carries its own still */
.tg-shot{display:none}
@media (max-width:900px){
  .tide-stage{display:none}
  .tg-shot{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--c1) 40%,transparent)}
}
@media (max-width:520px){.tg-head .tide-logo{display:none}.tg-title{overflow-wrap:normal}}