/* Hub: three windows, each made of its own game's material.
   POP IT = pink silicone with bubbles, Merge Ores = stone blocks and timber with an ore rail,
   RNG Zombie Defense = graphite plate lit by the game's six rarity colours. */
:root{--ink:#0c0e13;--paper:#eef0f5;--muted:#a3a9b6;--focus:#8cc8ff}
body{background:var(--ink);color:var(--paper)}
.top{--nav-hover:rgba(255,255,255,.07)}
.brand{color:var(--paper)}

.intro{padding-top:36px;padding-bottom:44px}
.intro h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(54px,10.5vw,148px);
  line-height:1.15;letter-spacing:-.035em}
.intro p{margin-top:16px;font-size:clamp(17px,1.6vw,21px);color:var(--muted);max-width:34em}

.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;padding-bottom:40px}
@media (max-width:1040px){.worlds{grid-template-columns:1fr;max-width:640px;gap:30px}}

.world{position:relative;display:flex;flex-direction:column;overflow:hidden;transition:transform .6s cubic-bezier(.2,.9,.25,1.2);
  will-change:transform;--tx:0;--ty:0}
.world-art{position:relative;aspect-ratio:16/10;overflow:hidden}
.world-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.08) translate(calc(var(--tx)*-14px),calc(var(--ty)*-10px));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.world-body{display:flex;flex-direction:column;gap:12px;padding:22px 24px 26px;flex:1}
.world-head{display:flex;align-items:center;gap:14px}
.world-icon{width:60px;height:60px;flex:none}
.world-state{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.world-state i{width:9px;height:9px;border-radius:50%;background:currentColor}
.world-name{font-size:30px;line-height:1.2;padding-top:4px}
.world-name a{text-decoration:none}
.world-name a::after{content:"";position:absolute;inset:0;z-index:1}
.world-line{font-size:16px;line-height:1.5;max-width:30em}
.world-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:10px;position:relative;z-index:2}
.world-acts a{text-decoration:none;font-weight:650;font-size:16px;padding:12px 18px;line-height:1.2;transition:transform .12s,box-shadow .12s}

/* ---------- POP IT: silicone ---------- */
.w-popit{border-radius:32px;color:#fff;background:linear-gradient(180deg,#ff63ae,#e3348a 70%);
  box-shadow:0 10px 0 #a3175c,0 34px 60px -26px rgba(255,70,150,.55);animation:squish .95s cubic-bezier(.3,1.5,.4,1) backwards}
.w-popit .world-art{border-radius:24px;margin:12px 12px 0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
.w-popit .world-art img{border-radius:24px}
.bubbles{display:flex;justify-content:center;gap:7px;padding:14px 12px 2px;flex-wrap:nowrap;overflow:hidden;height:46px}
.bubbles span{flex:none;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.75) 0 12%,transparent 30%),var(--b);
  box-shadow:inset 0 -4px 0 rgba(80,0,40,.28),0 3px 0 rgba(110,10,55,.45);transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.bubbles span.pop{transform:scale(.72);box-shadow:inset 0 4px 4px rgba(80,0,40,.45),0 1px 0 rgba(110,10,55,.35)}
.w-popit .world-name{font-family:'Fredoka',sans-serif;font-weight:700;text-shadow:0 3px 0 rgba(120,10,60,.35)}
.w-popit .world-state{color:#fff}
.w-popit .world-acts a{font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;border-radius:16px}
.w-popit .act-play{background:#4a2416;color:#fff;box-shadow:0 5px 0 #24100a}
.w-popit .act-more{background:#fff2f8;color:#a3175c;box-shadow:0 5px 0 #c0246f}
.w-popit .world-acts a:active{transform:translateY(3px);box-shadow:0 2px 0 #24100a}
@keyframes squish{0%{opacity:0;transform:translateY(40px) scale(.94,.88)}55%{opacity:1;transform:translateY(-4px) scale(1.03,.97)}100%{transform:none}}

/* ---------- Merge Ores: stone and timber ---------- */
.w-ores{border-radius:6px;color:#e9edf1;
  background:conic-gradient(from 90deg at 50% 50%,#1a2028 25%,#1e252e 0 50%,#1a2028 0 75%,#212831 0) 0 0/26px 26px;
  box-shadow:inset 0 0 0 3px #0b0e12,inset 4px 4px 0 3px #2a323d,0 10px 0 #090b0f,0 34px 60px -26px rgba(80,220,235,.25);
  animation:drop .8s cubic-bezier(.25,1.4,.45,1) .09s backwards}
.w-ores .world-art{margin:0}
.w-ores .world-art::before,.w-ores .world-art::after{content:"";position:absolute;z-index:1;pointer-events:none}
.w-ores .world-art::before{inset:0;border:12px solid transparent;border-top-width:16px;border-bottom:0;
  border-image:repeating-linear-gradient(90deg,#7d5534 0 18px,#6d4729 18px 30px,#86603d 30px 44px) 16 12 0 12;
  box-shadow:inset 0 10px 18px rgba(0,0,0,.45)}
.w-ores .world-art::after{right:26px;top:22px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,198,110,.55),rgba(255,198,110,0) 65%);mix-blend-mode:screen;animation:flicker 3.6s steps(1) infinite}
@keyframes flicker{0%,100%{opacity:.9}12%{opacity:.75}14%{opacity:.95}46%{opacity:.82}48%{opacity:1}77%{opacity:.86}}
.rail{position:relative;height:44px;overflow:hidden;
  background:linear-gradient(#9aa4ae,#9aa4ae) 0 34px/100% 3px no-repeat,
             repeating-linear-gradient(90deg,#5b3b22 0 12px,transparent 12px 30px) 0 36px/100% 8px no-repeat,#12161c}
.rail-track{position:absolute;left:0;top:6px;display:flex;gap:18px;width:max-content;animation:ride 22s linear infinite}
.rail-track img{width:28px;height:28px;image-rendering:pixelated;animation:bump 1.1s ease-in-out infinite}
.rail-track img:nth-child(odd){animation-delay:-.55s}
@keyframes ride{to{transform:translateX(-50%)}}
@keyframes bump{50%{transform:translateY(-2px)}}
.w-ores .world-name{font-family:'Alfa Slab One',serif;font-weight:400;color:#ffe3a6;text-shadow:0 3px 0 #000;letter-spacing:.01em}
.w-ores .world-state{color:#45dd77}
.w-ores .world-acts a{border-radius:3px}
.w-ores .act-play{background:#52e1ea;color:#05282c;box-shadow:inset 3px 3px 0 #bdfbff,inset -3px -3px 0 #1ea6b2,0 5px 0 #0b5a61}
.w-ores .act-more{background:#38414c;color:#eef1f4;box-shadow:inset 3px 3px 0 #56616e,inset -3px -3px 0 #232a32,0 5px 0 #11151a}
.w-ores .world-acts a:active{transform:translateY(3px)}
@keyframes drop{0%{opacity:0;transform:translateY(-46px)}60%{opacity:1;transform:translateY(5px)}80%{transform:translateY(-2px)}100%{transform:none}}

/* ---------- RNG Zombie Defense: graphite and rarity light ---------- */
@property --rc{syntax:'<color>';inherits:true;initial-value:#e1ae43}
.w-rng{color:#e9ecef;background:linear-gradient(180deg,#1b1f23,#131619);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  animation:power 1.1s ease-out .18s backwards,rarity 12s linear 1.3s infinite}
.w-rng .world-art{margin:0}
.w-rng .world-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(19,22,25,.85));pointer-events:none}
.w-rng .world-art img{filter:contrast(1.06) saturate(1.05)}
.rarity{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:0 24px;height:8px;margin-top:-4px;position:relative;z-index:1}
.rarity i{border-radius:1px;background:var(--c);opacity:.35;animation:seg 6s linear infinite;animation-delay:calc(var(--k)*1s)}
.rarity i:nth-child(1){--c:rgb(155,178,160);--k:0}.rarity i:nth-child(2){--c:rgb(93,193,128);--k:1}.rarity i:nth-child(3){--c:rgb(81,160,217);--k:2}
.rarity i:nth-child(4){--c:rgb(162,111,210);--k:3}.rarity i:nth-child(5){--c:rgb(225,174,67);--k:4}.rarity i:nth-child(6){--c:rgb(219,109,79);--k:5}
@keyframes seg{0%,14%{opacity:1;box-shadow:0 0 14px var(--c)}22%,100%{opacity:.35;box-shadow:none}}
.rng-mark{display:grid;place-items:center;color:var(--rc);background:#0f1214;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.rng-mark svg{width:36px;height:36px}
.w-rng .world-name{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.005em}
.w-rng .world-state.soon{color:var(--rc)}
.w-rng .world-state.soon i{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.w-rng .world-acts a{font-family:'Chakra Petch',sans-serif;font-weight:600;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.w-rng .act-play{background:#e9ecef;color:#111417;box-shadow:inset 4px 0 0 var(--rc)}
.w-rng .act-more{background:#262b31;color:#e9ecef}
.w-rng .world-acts a:hover{filter:brightness(1.08)}
@keyframes power{0%{opacity:0;filter:brightness(.2)}30%{opacity:1;filter:brightness(1.4)}38%{filter:brightness(.5)}52%{filter:brightness(1.15)}100%{filter:none}}
@keyframes rarity{0%,100%{--rc:rgb(225,174,67)}17%{--rc:rgb(219,109,79)}34%{--rc:rgb(155,178,160)}51%{--rc:rgb(93,193,128)}68%{--rc:rgb(81,160,217)}85%{--rc:rgb(162,111,210)}}

@media (hover:hover) and (pointer:fine){
  .world:hover .world-art img{transform:scale(1.13) translate(calc(var(--tx)*-18px),calc(var(--ty)*-12px))}
  .w-popit .act-play:hover{background:#5a2c1b}.w-popit .act-more:hover{background:#fff}
  .w-ores:hover .rail-track{animation-duration:9s}
  .w-ores .act-play:hover{background:#6eeaf1}.w-ores .act-more:hover{background:#434d59}
}
.world-acts a:focus-visible{outline-offset:4px}
@media (max-width:640px){
  .intro{padding-top:20px;padding-bottom:28px}
  .world-body{padding:18px 18px 22px}
  .world-name{font-size:26px}
  .world-acts a{flex:1 1 auto;text-align:center}
}

/* ---------- a look inside: real frames from the three games ---------- */
.peek{padding-top:56px;padding-bottom:24px}
.peek h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:750;font-size:clamp(30px,3.4vw,44px);line-height:1.15;letter-spacing:-.02em;margin-bottom:22px}
.peek-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pk{position:relative;display:block;text-decoration:none;overflow:hidden;aspect-ratio:16/10;background:#15181d}
.pk img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pk span{position:absolute;left:12px;bottom:12px;padding:6px 10px;font-size:14px;font-weight:650;background:rgba(10,12,16,.78);color:#fff;backdrop-filter:blur(6px)}
.pk-popit{border-radius:22px}.pk-popit span{border-radius:12px;font-family:'Fredoka',sans-serif;font-weight:600}
.pk-ores{border-radius:4px;box-shadow:inset 0 0 0 3px #2a323d}.pk-ores span{border-radius:2px;font-family:'Alfa Slab One',serif;font-weight:400;color:#ffe3a6}
.pk-rng{clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}.pk-rng span{font-family:'Chakra Petch',sans-serif}
@media (hover:hover){.pk:hover img{transform:scale(1.06)}}
@media (max-width:1040px){.peek-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .peek{padding-top:36px}
  .peek-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .peek-grid::-webkit-scrollbar{display:none}
  .pk{flex:0 0 78%;scroll-snap-align:start}
}
.w-popit .world-icon{border-radius:16px;box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.w-ores .world-icon{border-radius:2px;box-shadow:0 0 0 3px #0b0e12,0 0 0 6px #7a5333}