@font-face{font-family:"Gotham";src:url("/games/rocket/fonts/GothamPro.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("/games/rocket/fonts/GothamPro-Medium.woff") format("woff");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("/games/rocket/fonts/GothamPro-Bold.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}
:root{
 --bg:#081328;--surface:#1a1b26;--surface2:#20222e;--border:#343442;--text:#f4f3f8;--muted:#a5a4b8;
 --accent:#b9a7ff;--accent-bright:#d0c3ff;--accent-tint:rgba(185,167,255,.12);--ok:#a1dbc8;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-size:16px;line-height:1.5;background:radial-gradient(ellipse 70% 70% at 15% 0%,#20437b70,transparent 65%),radial-gradient(ellipse 60% 70% at 90% 10%,#61278366,transparent 70%),radial-gradient(ellipse 70% 60% at 80% 90%,#25357d44,transparent 75%),#071226}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.shell{width:min(1080px,calc(100% - 44px));margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0;border-bottom:1px solid #ffffff1a}
.brand{display:inline-flex;align-items:center;gap:13px;font-size:18px;line-height:1.25;letter-spacing:-.035em;text-decoration:none;font-weight:780}
.brand img{width:52px;height:52px;object-fit:contain;flex-shrink:0}
.brand-sub{display:block;color:var(--accent);font-size:14px;letter-spacing:.18em;margin-top:3px}
.platform-label{font-size:11px;letter-spacing:.17em;color:var(--muted);white-space:nowrap}
.hero{padding:62px 0 37px;max-width:690px}
.eyebrow{margin:0 0 11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-size:13px;font-weight:750}
.hero h1{font-size:clamp(35px,5vw,54px);line-height:1.12;letter-spacing:-.055em;margin:0 0 17px;font-weight:780}
.hero h1 span{color:var(--accent)}
.hero>p:last-child{color:var(--muted);margin:0;font-size:15px}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.game-card{overflow:hidden;border-radius:17px;border:1px solid var(--border);background:linear-gradient(135deg,#20212e,#171923);box-shadow:0 18px 45px #00000022;display:flex;flex-direction:column}
.game-card:not(.upcoming){border-color:#61587d}
.game-art{height:245px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.space-art{background:radial-gradient(ellipse at 50% 55%,#30304d,#161c35 62%,#0c172b)}
.space-art:before{content:"";position:absolute;inset:0;opacity:.42;background-image:radial-gradient(#ffffff99 1px,transparent 1px);background-size:35px 38px}
.orb{position:absolute;border-radius:50%;z-index:-1}
.orb-one{width:138px;height:138px;left:-36px;top:40px;background:linear-gradient(140deg,#7879b8,#2e3b78);box-shadow:inset -20px -15px 30px #111a4b88}
.orb-two{width:95px;height:95px;right:26px;bottom:-35px;background:linear-gradient(135deg,#9b6d9d,#4e346e)}
.game-logo{position:relative;z-index:1;width:min(72%,220px);height:210px;object-fit:contain;filter:drop-shadow(0 14px 22px #0008)}
.chip{position:absolute;z-index:2;right:17px;top:17px;padding:6px 12px;border-radius:9px;font-size:12px;font-weight:700}
.chip-ready{background:#a1dbc81c;border:1px solid #a1dbc84d;color:#b1e6d5}
.chip-soon{background:#b9a7ff13;border:1px solid #b9a7ff3c;color:var(--accent-bright)}
.next-art{background:radial-gradient(ellipse at 50% 50%,#44365c 0,#252238 45%,#171923 85%)}
.next-glyph{width:112px;height:112px;color:#b9a7ff55}
.game-info{padding:25px;display:flex;flex-direction:column;flex:1}
.card-category{font-size:11px!important;letter-spacing:.15em;color:var(--accent)!important;font-weight:750;margin:0 0 9px!important}
.game-info h2{font-size:24px;line-height:1.26;letter-spacing:-.03em;margin:0 0 12px}
.game-info>p:not(.card-category){font-size:14px;color:var(--muted);margin:0 0 24px;flex:1;line-height:1.65}
.action{display:flex;justify-content:center;align-items:center;gap:12px;text-align:center;min-height:48px;padding:10px 20px;border-radius:11px;background:var(--accent);color:#191526;font-weight:750;font-size:14px;text-decoration:none;transition:background .18s}
.action:hover{background:var(--accent-bright)}
.action.inactive{background:#343441;color:#a5a4b8;cursor:not-allowed;transform:none}
.upcoming{opacity:.87}
footer{text-align:center;color:#88889d;padding:48px 0 30px;font-size:12px;letter-spacing:.08em}
@media(max-width:680px){.shell{width:min(100% - 30px,500px)}.topbar{padding:18px 0}.brand{font-size:14px;gap:9px}.brand img{width:44px;height:44px}.brand-sub{font-size:12px}.platform-label{display:none}.hero{padding:44px 0 28px}.games{grid-template-columns:1fr;gap:18px}.game-art{height:220px}.game-info{padding:22px}.game-info>p:not(.card-category){margin-bottom:21px}footer{padding:35px 0 24px}}
\n.action-icon{width:18px;height:18px;flex:none}\n
/* Keep inline SVG icons compact inside call-to-action controls. */
.action{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:48px;flex-shrink:0}
.action .action-icon{display:block!important;width:18px!important;height:18px!important;min-width:18px;max-width:18px;min-height:18px;max-height:18px;flex:0 0 18px!important;vertical-align:middle}

/* Shared portal shell: visual structure adapted from wordpress-yaprofi header/footer. */
.portal-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(15px);background:#101226e8;border-bottom:1px solid #ffffff20}
.portal-header-inner{width:min(1200px,calc(100% - 44px));min-height:76px;margin:auto;display:flex;align-items:center;gap:25px}
.portal-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;flex-shrink:0}
.portal-brand img{height:44px;width:44px;object-fit:contain}
.portal-brand-text{display:flex;flex-direction:column;line-height:1.25;gap:3px}
.portal-brand-text strong{font-size:16px;white-space:nowrap;letter-spacing:-.03em}
.portal-brand-text>span{font-size:13px;color:var(--muted)}
.portal-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.portal-nav a{display:inline-flex;align-items:center;gap:7px;color:var(--text);border:1px solid transparent;padding:8px 11px;border-radius:9px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.portal-nav a:hover{background:#ffffff11;border-color:#ffffff20}
.portal-nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-switch{display:flex;flex:none;gap:2px;padding:3px;border:1px solid #ffffff30;border-radius:9px}
.theme-switch button{border:0;background:none;color:var(--muted);width:30px;height:30px;display:grid;place-items:center;border-radius:6px;cursor:pointer}
.theme-switch button[aria-pressed="true"]{background:#b9a7ff32;color:var(--accent-bright)}
.theme-switch svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portal-footer{border-top:1px solid #ffffff21;margin-top:48px;padding:25px 0 30px;background:#1012269c}
.portal-footer-inner{width:min(1200px,calc(100% - 44px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:14px 28px}
.portal-copyright{color:var(--muted);white-space:nowrap;font-size:13px}
.portal-copyright span span{font-weight:650}
.portal-footer-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.portal-footer-links a{color:var(--muted);text-decoration:none;font-size:13px}
.portal-footer-links a:hover{text-decoration:underline;color:var(--text)}
.shell>footer{display:none}
:root[data-color-theme="light"]{--text:#202234;--muted:#5c6074;--accent:#7055c0;--accent-bright:#593bab;color-scheme:light}
:root[data-color-theme="light"] body{background:radial-gradient(ellipse 70% 70% at 15% 0%,#d7e6ff,transparent 65%),radial-gradient(ellipse 60% 70% at 90% 10%,#eee2ff,transparent 70%),#f7f7fb}
:root[data-color-theme="light"] .portal-header{background:#ffffffeb;border-color:#dddde9}
:root[data-color-theme="light"] .portal-nav a:hover{background:#eae8f3;border-color:#d3d0dd}
:root[data-color-theme="light"] .theme-switch{border-color:#d5d2e0}
:root[data-color-theme="light"] .theme-switch button[aria-pressed="true"]{background:#e5ddfa}
:root[data-color-theme="light"] .game-card{background:linear-gradient(135deg,#fff,#f1f0f7);border-color:#dad7e5}
:root[data-color-theme="light"] .game-card:not(.upcoming){border-color:#b6a6d9}
:root[data-color-theme="light"] .game-info h2{color:#252435}
:root[data-color-theme="light"] .action{background:#b9a7ff;color:#191526}
:root[data-color-theme="light"] .action.inactive{background:#dedee7;color:#737387}
:root[data-color-theme="light"] .portal-footer{background:#ffffffad;border-color:#d5d2e0}
@media(max-width:760px){.portal-header-inner{width:calc(100% - 30px);min-height:68px;gap:12px}.portal-footer-inner{width:calc(100% - 30px);align-items:flex-start;flex-direction:column}.portal-nav{gap:0}.portal-nav a{padding:6px;font-size:12px}.portal-nav a:first-child{display:none}.portal-brand-text strong{font-size:13px}.portal-brand-text>span{font-size:11px}.portal-brand img{width:39px;height:39px}.theme-switch button{width:27px;height:28px}}
@media(max-width:430px){.portal-nav{display:none}.theme-switch{margin-left:auto}.portal-footer-links{gap:8px;flex-direction:column;align-items:flex-start}}

/* Full-height page shell: footer occupies the remaining viewport height. */
html{min-height:100%;background:#071226}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>.shell{flex:1 0 auto}
.portal-footer{flex-shrink:0;margin-top:0;min-height:100px;display:flex;align-items:center;background:#101226e8}
:root[data-color-theme="light"] .portal-footer{background:#ffffffeb}
.portal-nav a:first-child{display:inline-flex}

/* The rocket SVG has generous transparent margins within its 1080x1080 viewBox.
   Crop those margins inside a fixed header icon box while preserving its aspect ratio. */
.portal-brand-logo{position:relative;display:block;flex:0 0 52px;width:52px;height:52px;overflow:hidden}
.portal-brand .portal-brand-logo img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;max-width:none;object-fit:contain}
@media(max-width:760px){.portal-brand-logo{flex-basis:46px;width:46px;height:46px}.portal-brand .portal-brand-logo img{width:78px;height:78px}}

/* Consistent Gotham typography across the entire games hub. */
:root{font-family:"Gotham",Arial,sans-serif}
body,button,input,select,textarea{font-family:"Gotham",Arial,sans-serif}

/* Card illustration: native planet SVG assets from the rocket game. */
.space-art{isolation:isolate;background:radial-gradient(ellipse at 50% 40%,#39406b 0%,#222846 42%,#101931 100%)}
.space-art::before{z-index:0;opacity:.55;background-image:radial-gradient(circle,#ecedffb0 .8px,transparent 1.6px);background-size:27px 31px}
.space-art::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(0deg,#0b11286b,transparent 45%),radial-gradient(ellipse at 85% 95%,#a26acb22,transparent 55%)}
.space-haze{position:absolute;z-index:0;inset:-20%;pointer-events:none;background:radial-gradient(ellipse at 52% 48%,#ba89fa35,transparent 36%),radial-gradient(ellipse at 17% 65%,#3c85bf33,transparent 32%);filter:blur(17px)}
.space-planet{position:absolute;display:block;z-index:1;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 12px 15px #03071077)}
.planet-left{width:210px;height:210px;left:-67px;top:17px;transform:rotate(-13deg)}
.planet-right{width:146px;height:146px;right:14px;bottom:-52px;transform:rotate(14deg)}
.planet-far{width:69px;height:69px;right:25%;top:19px;opacity:.7;filter:drop-shadow(0 5px 9px #0008)}
.space-art .game-logo{z-index:2;transform:translateY(-3px);filter:drop-shadow(0 15px 21px #000a)}
.space-art .chip{z-index:3}
@media(max-width:680px){.planet-left{width:178px;height:178px;left:-70px;top:22px}.planet-right{width:125px;height:125px;right:0;bottom:-43px}.planet-far{width:55px;height:55px;right:20%;top:23px}}


/* Portal arrival: one-shot composited entrance, no timers or runtime dependency. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes portal-enter {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes portal-header-enter {
    from { opacity: 0; transform: translate3d(0, -12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .portal-header {
    animation: portal-header-enter 500ms cubic-bezier(.22, 1, .36, 1) both;
  }
  .hero .eyebrow,
  .hero h1,
  .hero > p:last-child,
  .games > .game-slot,
  .portal-footer {
    animation: portal-enter 700ms cubic-bezier(.22, 1, .36, 1) both;
  }
  .hero .eyebrow { animation-delay: 100ms; }
  .hero h1 { animation-delay: 175ms; }
  .hero > p:last-child { animation-delay: 260ms; }
  .games > .game-slot:nth-child(1) { animation-delay: 350ms; }
  .games > .game-slot:nth-child(2) { animation-delay: 440ms; }
  .portal-footer { animation-delay: 520ms; }
}


/* Subtle interaction for full-sized cards. Keep the existing slots for
   staggered page entrance; hover never changes grid geometry. */
.game-slot{min-width:0;display:flex;align-items:stretch}
.game-slot>.game-card{width:100%;min-width:0}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .game-slot>.game-card{
    transition:transform 260ms cubic-bezier(.22,1,.36,1),
               border-color 220ms ease,
               box-shadow 260ms ease;
  }
  .game-slot>.game-card:is(:hover,:focus-within){
    transform:translateY(-4px) scale(1.02);
    border-color:var(--accent);
    box-shadow:0 20px 42px rgba(0,0,0,.28),0 0 28px rgba(185,167,255,.18);
  }
  .game-slot>.game-card:not(.upcoming):is(:hover,:focus-within) .action{
    background:var(--accent-bright);
  }
}
@media (prefers-reduced-motion:reduce){
  .game-slot>.game-card{transition:none;transform:none}
}

/* Frosted captions inspired by the editorial story cards.
   A translucent layer separates the copy from each illustration without
   obscuring the artwork; include an opaque accessibility fallback. */
.game-card .game-info{
  position:relative;
  background:rgba(20,17,42,.67);
  border-top:1px solid rgba(225,212,255,.22);
  -webkit-backdrop-filter:blur(13px) saturate(125%);
  backdrop-filter:blur(13px) saturate(125%);
}
:root[data-color-theme="light"] .game-card .game-info{
  background:rgba(250,246,255,.76);
  border-top-color:rgba(112,85,192,.22);
}
@media (prefers-reduced-transparency:reduce){
  .game-card .game-info{
    background:#17172c;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  :root[data-color-theme="light"] .game-card .game-info{
    background:#f7f4fc;
  }
}
/* Buttons change colour, never position, even when hovered inside a card. */
.action:hover,.action:focus-visible{transform:none}

/* Continuous artwork behind the frosted text panel.
   Put the atmosphere on the card itself: a negative z-index pseudo-element
   is hidden behind the card's opaque background and cannot work here. */
.game-card{
  position:relative;
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 18%,#39406b 0%,#222846 43%,#101931 100%);
}
.game-card.upcoming{
  background:radial-gradient(ellipse at 50% 18%,#44365c 0%,#252238 48%,#171923 100%);
}
.game-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(236,237,255,.38) .8px,transparent 1.6px);
  background-size:27px 31px;
}
.game-card.upcoming::before{display:none}
.game-card .game-art,
.game-card .game-info{
  position:relative;
  z-index:1;
}
.game-card .game-art{background:transparent}
.game-card .space-art::before{display:none}
.game-card .game-info{
  background:rgba(20,17,42,.58);
  border-top:1px solid rgba(225,212,255,.22);
  -webkit-backdrop-filter:blur(13px) saturate(125%);
  backdrop-filter:blur(13px) saturate(125%);
}
:root[data-color-theme="light"] .game-card{
  background:radial-gradient(ellipse at 50% 18%,#d9d2f0,#c4c9e3 45%,#a9b5d7);
}
:root[data-color-theme="light"] .game-card.upcoming{
  background:radial-gradient(ellipse at 50% 18%,#ded0ee,#d7d1e6 50%,#cbc9dc);
}
:root[data-color-theme="light"] .game-card .game-info{
  background:rgba(250,246,255,.76);
  border-top-color:rgba(112,85,192,.22);
}
@media (prefers-reduced-transparency:reduce){
  .game-card .game-info{
    background:#17172c;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  :root[data-color-theme="light"] .game-card .game-info{background:#f7f4fc}
}

/* Truly layered illustration: allow planets to extend under the glass caption.
   The caption is a higher stacking layer so its blur acts on actual artwork. */
.game-card .game-art{z-index:1;overflow:visible}
.game-card .game-info{z-index:2;background:rgba(20,17,42,.38)}
.game-card .space-art .planet-right{bottom:-142px}
.game-card .space-art .planet-left{top:44px}
:root[data-color-theme="light"] .game-card .game-info{background:rgba(250,246,255,.64)}
@media(max-width:680px){
  .game-card .space-art .planet-right{bottom:-115px}
}
@media(prefers-reduced-transparency:reduce){
  .game-card .game-info{background:#17172c}
  :root[data-color-theme="light"] .game-card .game-info{background:#f7f4fc}
}

/* Editorial image-only hover, matching wordpress-yaprofi news cards.
   The card stays fixed; illustration zooms under the glass caption. */
.game-slot>.game-card{transform:none!important;transition:border-color 220ms ease,box-shadow 280ms ease,background-color 220ms ease}
.game-slot>.game-card:is(:hover,:focus-within){transform:none!important}
.game-art .game-art-visual{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  transform-origin:center center;
  transition:transform 420ms cubic-bezier(.22,1,.36,1);
}
.game-art .chip{z-index:3}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .game-slot>.game-card:is(:hover,:focus-within) .game-art-visual{transform:scale(1.045)}
}
@media (prefers-reduced-motion:reduce){
  .game-art .game-art-visual{transition:none;transform:none!important}
}